commit beca25fcd79957ef8c0b9f19a0f3d224d5df37db
Author: Husnu Setiawan <husnusetiawan@gmail.com>
Date:   Mon Dec 29 14:25:34 2025 +0700

    init

diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..8f0de65
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,18 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 4
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.{yml,yaml}]
+indent_size = 2
+
+[docker-compose.yml]
+indent_size = 4
diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..35db1dd
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,65 @@
+APP_NAME=Laravel
+APP_ENV=local
+APP_KEY=
+APP_DEBUG=true
+APP_URL=http://localhost
+
+APP_LOCALE=en
+APP_FALLBACK_LOCALE=en
+APP_FAKER_LOCALE=en_US
+
+APP_MAINTENANCE_DRIVER=file
+# APP_MAINTENANCE_STORE=database
+
+PHP_CLI_SERVER_WORKERS=4
+
+BCRYPT_ROUNDS=12
+
+LOG_CHANNEL=stack
+LOG_STACK=single
+LOG_DEPRECATIONS_CHANNEL=null
+LOG_LEVEL=debug
+
+DB_CONNECTION=sqlite
+# DB_HOST=127.0.0.1
+# DB_PORT=3306
+# DB_DATABASE=laravel
+# DB_USERNAME=root
+# DB_PASSWORD=
+
+SESSION_DRIVER=database
+SESSION_LIFETIME=120
+SESSION_ENCRYPT=false
+SESSION_PATH=/
+SESSION_DOMAIN=null
+
+BROADCAST_CONNECTION=log
+FILESYSTEM_DISK=local
+QUEUE_CONNECTION=database
+
+CACHE_STORE=database
+# CACHE_PREFIX=
+
+MEMCACHED_HOST=127.0.0.1
+
+REDIS_CLIENT=phpredis
+REDIS_HOST=127.0.0.1
+REDIS_PASSWORD=null
+REDIS_PORT=6379
+
+MAIL_MAILER=log
+MAIL_SCHEME=null
+MAIL_HOST=127.0.0.1
+MAIL_PORT=2525
+MAIL_USERNAME=null
+MAIL_PASSWORD=null
+MAIL_FROM_ADDRESS="hello@example.com"
+MAIL_FROM_NAME="${APP_NAME}"
+
+AWS_ACCESS_KEY_ID=
+AWS_SECRET_ACCESS_KEY=
+AWS_DEFAULT_REGION=us-east-1
+AWS_BUCKET=
+AWS_USE_PATH_STYLE_ENDPOINT=false
+
+VITE_APP_NAME="${APP_NAME}"
diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 0000000..fcb21d3
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1,11 @@
+* text=auto eol=lf
+
+*.blade.php diff=html
+*.css diff=css
+*.html diff=html
+*.md diff=markdown
+*.php diff=php
+
+/.github export-ignore
+CHANGELOG.md export-ignore
+.styleci.yml export-ignore
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..b71b1ea
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,24 @@
+*.log
+.DS_Store
+.env
+.env.backup
+.env.production
+.phpactor.json
+.phpunit.result.cache
+/.fleet
+/.idea
+/.nova
+/.phpunit.cache
+/.vscode
+/.zed
+/auth.json
+/node_modules
+/public/build
+/public/hot
+/public/storage
+/storage/*.key
+/storage/pail
+/vendor
+Homestead.json
+Homestead.yaml
+Thumbs.db
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..75c347a
--- /dev/null
+++ b/README.md
@@ -0,0 +1,61 @@
+<p align="center"><a href="https://laravel.com" target="_blank"><img src="https://raw.githubusercontent.com/laravel/art/master/logo-lockup/5%20SVG/2%20CMYK/1%20Full%20Color/laravel-logolockup-cmyk-red.svg" width="400" alt="Laravel Logo"></a></p>
+
+<p align="center">
+<a href="https://github.com/laravel/framework/actions"><img src="https://github.com/laravel/framework/workflows/tests/badge.svg" alt="Build Status"></a>
+<a href="https://packagist.org/packages/laravel/framework"><img src="https://img.shields.io/packagist/dt/laravel/framework" alt="Total Downloads"></a>
+<a href="https://packagist.org/packages/laravel/framework"><img src="https://img.shields.io/packagist/v/laravel/framework" alt="Latest Stable Version"></a>
+<a href="https://packagist.org/packages/laravel/framework"><img src="https://img.shields.io/packagist/l/laravel/framework" alt="License"></a>
+</p>
+
+## About Laravel
+
+Laravel is a web application framework with expressive, elegant syntax. We believe development must be an enjoyable and creative experience to be truly fulfilling. Laravel takes the pain out of development by easing common tasks used in many web projects, such as:
+
+- [Simple, fast routing engine](https://laravel.com/docs/routing).
+- [Powerful dependency injection container](https://laravel.com/docs/container).
+- Multiple back-ends for [session](https://laravel.com/docs/session) and [cache](https://laravel.com/docs/cache) storage.
+- Expressive, intuitive [database ORM](https://laravel.com/docs/eloquent).
+- Database agnostic [schema migrations](https://laravel.com/docs/migrations).
+- [Robust background job processing](https://laravel.com/docs/queues).
+- [Real-time event broadcasting](https://laravel.com/docs/broadcasting).
+
+Laravel is accessible, powerful, and provides tools required for large, robust applications.
+
+## Learning Laravel
+
+Laravel has the most extensive and thorough [documentation](https://laravel.com/docs) and video tutorial library of all modern web application frameworks, making it a breeze to get started with the framework.
+
+You may also try the [Laravel Bootcamp](https://bootcamp.laravel.com), where you will be guided through building a modern Laravel application from scratch.
+
+If you don't feel like reading, [Laracasts](https://laracasts.com) can help. Laracasts contains thousands of video tutorials on a range of topics including Laravel, modern PHP, unit testing, and JavaScript. Boost your skills by digging into our comprehensive video library.
+
+## Laravel Sponsors
+
+We would like to extend our thanks to the following sponsors for funding Laravel development. If you are interested in becoming a sponsor, please visit the [Laravel Partners program](https://partners.laravel.com).
+
+### Premium Partners
+
+- **[Vehikl](https://vehikl.com)**
+- **[Tighten Co.](https://tighten.co)**
+- **[Kirschbaum Development Group](https://kirschbaumdevelopment.com)**
+- **[64 Robots](https://64robots.com)**
+- **[Curotec](https://www.curotec.com/services/technologies/laravel)**
+- **[DevSquad](https://devsquad.com/hire-laravel-developers)**
+- **[Redberry](https://redberry.international/laravel-development)**
+- **[Active Logic](https://activelogic.com)**
+
+## Contributing
+
+Thank you for considering contributing to the Laravel framework! The contribution guide can be found in the [Laravel documentation](https://laravel.com/docs/contributions).
+
+## Code of Conduct
+
+In order to ensure that the Laravel community is welcoming to all, please review and abide by the [Code of Conduct](https://laravel.com/docs/contributions#code-of-conduct).
+
+## Security Vulnerabilities
+
+If you discover a security vulnerability within Laravel, please send an e-mail to Taylor Otwell via [taylor@laravel.com](mailto:taylor@laravel.com). All security vulnerabilities will be promptly addressed.
+
+## License
+
+The Laravel framework is open-sourced software licensed under the [MIT license](https://opensource.org/licenses/MIT).
diff --git a/app/Http/Controllers/Controller.php b/app/Http/Controllers/Controller.php
new file mode 100644
index 0000000..8677cd5
--- /dev/null
+++ b/app/Http/Controllers/Controller.php
@@ -0,0 +1,8 @@
+<?php
+
+namespace App\Http\Controllers;
+
+abstract class Controller
+{
+    //
+}
diff --git a/app/Http/Controllers/RoutingController.php b/app/Http/Controllers/RoutingController.php
new file mode 100644
index 0000000..9ec6c9a
--- /dev/null
+++ b/app/Http/Controllers/RoutingController.php
@@ -0,0 +1,34 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+
+class RoutingController extends Controller
+{
+    public function index()
+    {
+        return view('index');
+    }
+
+    public function root(Request $request, $first)
+    {
+        return view($first);
+    }
+
+    /**
+     * second level route
+     */
+    public function secondLevel(Request $request, $first, $second)
+    {
+        return view($first . '.' . $second);
+    }
+
+    /**
+     * third level route
+     */
+    public function thirdLevel(Request $request, $first, $second, $third)
+    {
+        return view($first . '.' . $second . '.' . $third);
+    }
+}
diff --git a/app/Models/User.php b/app/Models/User.php
new file mode 100644
index 0000000..749c7b7
--- /dev/null
+++ b/app/Models/User.php
@@ -0,0 +1,48 @@
+<?php
+
+namespace App\Models;
+
+// use Illuminate\Contracts\Auth\MustVerifyEmail;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Foundation\Auth\User as Authenticatable;
+use Illuminate\Notifications\Notifiable;
+
+class User extends Authenticatable
+{
+    /** @use HasFactory<\Database\Factories\UserFactory> */
+    use HasFactory, Notifiable;
+
+    /**
+     * The attributes that are mass assignable.
+     *
+     * @var list<string>
+     */
+    protected $fillable = [
+        'name',
+        'email',
+        'password',
+    ];
+
+    /**
+     * The attributes that should be hidden for serialization.
+     *
+     * @var list<string>
+     */
+    protected $hidden = [
+        'password',
+        'remember_token',
+    ];
+
+    /**
+     * Get the attributes that should be cast.
+     *
+     * @return array<string, string>
+     */
+    protected function casts(): array
+    {
+        return [
+            'email_verified_at' => 'datetime',
+            'password' => 'hashed',
+        ];
+    }
+}
diff --git a/app/Providers/AppServiceProvider.php b/app/Providers/AppServiceProvider.php
new file mode 100644
index 0000000..452e6b6
--- /dev/null
+++ b/app/Providers/AppServiceProvider.php
@@ -0,0 +1,24 @@
+<?php
+
+namespace App\Providers;
+
+use Illuminate\Support\ServiceProvider;
+
+class AppServiceProvider extends ServiceProvider
+{
+    /**
+     * Register any application services.
+     */
+    public function register(): void
+    {
+        //
+    }
+
+    /**
+     * Bootstrap any application services.
+     */
+    public function boot(): void
+    {
+        //
+    }
+}
diff --git a/artisan b/artisan
new file mode 100644
index 0000000..c35e31d
--- /dev/null
+++ b/artisan
@@ -0,0 +1,18 @@
+#!/usr/bin/env php
+<?php
+
+use Illuminate\Foundation\Application;
+use Symfony\Component\Console\Input\ArgvInput;
+
+define('LARAVEL_START', microtime(true));
+
+// Register the Composer autoloader...
+require __DIR__.'/vendor/autoload.php';
+
+// Bootstrap Laravel and handle the command...
+/** @var Application $app */
+$app = require_once __DIR__.'/bootstrap/app.php';
+
+$status = $app->handleCommand(new ArgvInput);
+
+exit($status);
diff --git a/bootstrap/app.php b/bootstrap/app.php
new file mode 100644
index 0000000..c183276
--- /dev/null
+++ b/bootstrap/app.php
@@ -0,0 +1,18 @@
+<?php
+
+use Illuminate\Foundation\Application;
+use Illuminate\Foundation\Configuration\Exceptions;
+use Illuminate\Foundation\Configuration\Middleware;
+
+return Application::configure(basePath: dirname(__DIR__))
+    ->withRouting(
+        web: __DIR__.'/../routes/web.php',
+        commands: __DIR__.'/../routes/console.php',
+        health: '/up',
+    )
+    ->withMiddleware(function (Middleware $middleware): void {
+        //
+    })
+    ->withExceptions(function (Exceptions $exceptions): void {
+        //
+    })->create();
diff --git a/bootstrap/cache/.gitignore b/bootstrap/cache/.gitignore
new file mode 100644
index 0000000..d6b7ef3
--- /dev/null
+++ b/bootstrap/cache/.gitignore
@@ -0,0 +1,2 @@
+*
+!.gitignore
diff --git a/bootstrap/providers.php b/bootstrap/providers.php
new file mode 100644
index 0000000..38b258d
--- /dev/null
+++ b/bootstrap/providers.php
@@ -0,0 +1,5 @@
+<?php
+
+return [
+    App\Providers\AppServiceProvider::class,
+];
diff --git a/bun.lock b/bun.lock
new file mode 100644
index 0000000..17e914a
--- /dev/null
+++ b/bun.lock
@@ -0,0 +1,323 @@
+{
+  "lockfileVersion": 1,
+  "configVersion": 0,
+  "workspaces": {
+    "": {
+      "dependencies": {
+        "bootstrap": "^5.3.8",
+        "chart.js": "^4.5.0",
+        "choices.js": "^11.1.0",
+        "cleave.js": "^1.6.0",
+        "drift-zoom": "^1.5.1",
+        "flatpickr": "^4.6.13",
+        "glightbox": "^3.3.1",
+        "img-comparison-slider": "^8.0.6",
+        "list.js": "^2.3.1",
+        "nouislider": "^15.8.1",
+        "simplebar": "^6.3.2",
+        "swiper": "^11.2.10",
+        "timezz": "^9.0.2",
+      },
+      "devDependencies": {
+        "axios": "^1.8.2",
+        "concurrently": "^9.0.1",
+        "laravel-vite-plugin": "^2.0.0",
+        "sass": "1.77.6",
+        "vite": "^6.2.4",
+      },
+    },
+  },
+  "packages": {
+    "@esbuild/aix-ppc64": ["@esbuild/aix-ppc64@0.25.8", "", { "os": "aix", "cpu": "ppc64" }, "sha512-urAvrUedIqEiFR3FYSLTWQgLu5tb+m0qZw0NBEasUeo6wuqatkMDaRT+1uABiGXEu5vqgPd7FGE1BhsAIy9QVA=="],
+
+    "@esbuild/android-arm": ["@esbuild/android-arm@0.25.8", "", { "os": "android", "cpu": "arm" }, "sha512-RONsAvGCz5oWyePVnLdZY/HHwA++nxYWIX1atInlaW6SEkwq6XkP3+cb825EUcRs5Vss/lGh/2YxAb5xqc07Uw=="],
+
+    "@esbuild/android-arm64": ["@esbuild/android-arm64@0.25.8", "", { "os": "android", "cpu": "arm64" }, "sha512-OD3p7LYzWpLhZEyATcTSJ67qB5D+20vbtr6vHlHWSQYhKtzUYrETuWThmzFpZtFsBIxRvhO07+UgVA9m0i/O1w=="],
+
+    "@esbuild/android-x64": ["@esbuild/android-x64@0.25.8", "", { "os": "android", "cpu": "x64" }, "sha512-yJAVPklM5+4+9dTeKwHOaA+LQkmrKFX96BM0A/2zQrbS6ENCmxc4OVoBs5dPkCCak2roAD+jKCdnmOqKszPkjA=="],
+
+    "@esbuild/darwin-arm64": ["@esbuild/darwin-arm64@0.25.8", "", { "os": "darwin", "cpu": "arm64" }, "sha512-Jw0mxgIaYX6R8ODrdkLLPwBqHTtYHJSmzzd+QeytSugzQ0Vg4c5rDky5VgkoowbZQahCbsv1rT1KW72MPIkevw=="],
+
+    "@esbuild/darwin-x64": ["@esbuild/darwin-x64@0.25.8", "", { "os": "darwin", "cpu": "x64" }, "sha512-Vh2gLxxHnuoQ+GjPNvDSDRpoBCUzY4Pu0kBqMBDlK4fuWbKgGtmDIeEC081xi26PPjn+1tct+Bh8FjyLlw1Zlg=="],
+
+    "@esbuild/freebsd-arm64": ["@esbuild/freebsd-arm64@0.25.8", "", { "os": "freebsd", "cpu": "arm64" }, "sha512-YPJ7hDQ9DnNe5vxOm6jaie9QsTwcKedPvizTVlqWG9GBSq+BuyWEDazlGaDTC5NGU4QJd666V0yqCBL2oWKPfA=="],
+
+    "@esbuild/freebsd-x64": ["@esbuild/freebsd-x64@0.25.8", "", { "os": "freebsd", "cpu": "x64" }, "sha512-MmaEXxQRdXNFsRN/KcIimLnSJrk2r5H8v+WVafRWz5xdSVmWLoITZQXcgehI2ZE6gioE6HirAEToM/RvFBeuhw=="],
+
+    "@esbuild/linux-arm": ["@esbuild/linux-arm@0.25.8", "", { "os": "linux", "cpu": "arm" }, "sha512-FuzEP9BixzZohl1kLf76KEVOsxtIBFwCaLupVuk4eFVnOZfU+Wsn+x5Ryam7nILV2pkq2TqQM9EZPsOBuMC+kg=="],
+
+    "@esbuild/linux-arm64": ["@esbuild/linux-arm64@0.25.8", "", { "os": "linux", "cpu": "arm64" }, "sha512-WIgg00ARWv/uYLU7lsuDK00d/hHSfES5BzdWAdAig1ioV5kaFNrtK8EqGcUBJhYqotlUByUKz5Qo6u8tt7iD/w=="],
+
+    "@esbuild/linux-ia32": ["@esbuild/linux-ia32@0.25.8", "", { "os": "linux", "cpu": "ia32" }, "sha512-A1D9YzRX1i+1AJZuFFUMP1E9fMaYY+GnSQil9Tlw05utlE86EKTUA7RjwHDkEitmLYiFsRd9HwKBPEftNdBfjg=="],
+
+    "@esbuild/linux-loong64": ["@esbuild/linux-loong64@0.25.8", "", { "os": "linux", "cpu": "none" }, "sha512-O7k1J/dwHkY1RMVvglFHl1HzutGEFFZ3kNiDMSOyUrB7WcoHGf96Sh+64nTRT26l3GMbCW01Ekh/ThKM5iI7hQ=="],
+
+    "@esbuild/linux-mips64el": ["@esbuild/linux-mips64el@0.25.8", "", { "os": "linux", "cpu": "none" }, "sha512-uv+dqfRazte3BzfMp8PAQXmdGHQt2oC/y2ovwpTteqrMx2lwaksiFZ/bdkXJC19ttTvNXBuWH53zy/aTj1FgGw=="],
+
+    "@esbuild/linux-ppc64": ["@esbuild/linux-ppc64@0.25.8", "", { "os": "linux", "cpu": "ppc64" }, "sha512-GyG0KcMi1GBavP5JgAkkstMGyMholMDybAf8wF5A70CALlDM2p/f7YFE7H92eDeH/VBtFJA5MT4nRPDGg4JuzQ=="],
+
+    "@esbuild/linux-riscv64": ["@esbuild/linux-riscv64@0.25.8", "", { "os": "linux", "cpu": "none" }, "sha512-rAqDYFv3yzMrq7GIcen3XP7TUEG/4LK86LUPMIz6RT8A6pRIDn0sDcvjudVZBiiTcZCY9y2SgYX2lgK3AF+1eg=="],
+
+    "@esbuild/linux-s390x": ["@esbuild/linux-s390x@0.25.8", "", { "os": "linux", "cpu": "s390x" }, "sha512-Xutvh6VjlbcHpsIIbwY8GVRbwoviWT19tFhgdA7DlenLGC/mbc3lBoVb7jxj9Z+eyGqvcnSyIltYUrkKzWqSvg=="],
+
+    "@esbuild/linux-x64": ["@esbuild/linux-x64@0.25.8", "", { "os": "linux", "cpu": "x64" }, "sha512-ASFQhgY4ElXh3nDcOMTkQero4b1lgubskNlhIfJrsH5OKZXDpUAKBlNS0Kx81jwOBp+HCeZqmoJuihTv57/jvQ=="],
+
+    "@esbuild/netbsd-arm64": ["@esbuild/netbsd-arm64@0.25.8", "", { "os": "none", "cpu": "arm64" }, "sha512-d1KfruIeohqAi6SA+gENMuObDbEjn22olAR7egqnkCD9DGBG0wsEARotkLgXDu6c4ncgWTZJtN5vcgxzWRMzcw=="],
+
+    "@esbuild/netbsd-x64": ["@esbuild/netbsd-x64@0.25.8", "", { "os": "none", "cpu": "x64" }, "sha512-nVDCkrvx2ua+XQNyfrujIG38+YGyuy2Ru9kKVNyh5jAys6n+l44tTtToqHjino2My8VAY6Lw9H7RI73XFi66Cg=="],
+
+    "@esbuild/openbsd-arm64": ["@esbuild/openbsd-arm64@0.25.8", "", { "os": "openbsd", "cpu": "arm64" }, "sha512-j8HgrDuSJFAujkivSMSfPQSAa5Fxbvk4rgNAS5i3K+r8s1X0p1uOO2Hl2xNsGFppOeHOLAVgYwDVlmxhq5h+SQ=="],
+
+    "@esbuild/openbsd-x64": ["@esbuild/openbsd-x64@0.25.8", "", { "os": "openbsd", "cpu": "x64" }, "sha512-1h8MUAwa0VhNCDp6Af0HToI2TJFAn1uqT9Al6DJVzdIBAd21m/G0Yfc77KDM3uF3T/YaOgQq3qTJHPbTOInaIQ=="],
+
+    "@esbuild/openharmony-arm64": ["@esbuild/openharmony-arm64@0.25.8", "", { "os": "none", "cpu": "arm64" }, "sha512-r2nVa5SIK9tSWd0kJd9HCffnDHKchTGikb//9c7HX+r+wHYCpQrSgxhlY6KWV1nFo1l4KFbsMlHk+L6fekLsUg=="],
+
+    "@esbuild/sunos-x64": ["@esbuild/sunos-x64@0.25.8", "", { "os": "sunos", "cpu": "x64" }, "sha512-zUlaP2S12YhQ2UzUfcCuMDHQFJyKABkAjvO5YSndMiIkMimPmxA+BYSBikWgsRpvyxuRnow4nS5NPnf9fpv41w=="],
+
+    "@esbuild/win32-arm64": ["@esbuild/win32-arm64@0.25.8", "", { "os": "win32", "cpu": "arm64" }, "sha512-YEGFFWESlPva8hGL+zvj2z/SaK+pH0SwOM0Nc/d+rVnW7GSTFlLBGzZkuSU9kFIGIo8q9X3ucpZhu8PDN5A2sQ=="],
+
+    "@esbuild/win32-ia32": ["@esbuild/win32-ia32@0.25.8", "", { "os": "win32", "cpu": "ia32" }, "sha512-hiGgGC6KZ5LZz58OL/+qVVoZiuZlUYlYHNAmczOm7bs2oE1XriPFi5ZHHrS8ACpV5EjySrnoCKmcbQMN+ojnHg=="],
+
+    "@esbuild/win32-x64": ["@esbuild/win32-x64@0.25.8", "", { "os": "win32", "cpu": "x64" }, "sha512-cn3Yr7+OaaZq1c+2pe+8yxC8E144SReCQjN6/2ynubzYjvyqZjTXfQJpAcQpsdJq3My7XADANiYGHoFC69pLQw=="],
+
+    "@kurkle/color": ["@kurkle/color@0.3.4", "", {}, "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w=="],
+
+    "@popperjs/core": ["@popperjs/core@2.11.8", "", {}, "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A=="],
+
+    "@rollup/rollup-android-arm-eabi": ["@rollup/rollup-android-arm-eabi@4.46.2", "", { "os": "android", "cpu": "arm" }, "sha512-Zj3Hl6sN34xJtMv7Anwb5Gu01yujyE/cLBDB2gnHTAHaWS1Z38L7kuSG+oAh0giZMqG060f/YBStXtMH6FvPMA=="],
+
+    "@rollup/rollup-android-arm64": ["@rollup/rollup-android-arm64@4.46.2", "", { "os": "android", "cpu": "arm64" }, "sha512-nTeCWY83kN64oQ5MGz3CgtPx8NSOhC5lWtsjTs+8JAJNLcP3QbLCtDDgUKQc/Ro/frpMq4SHUaHN6AMltcEoLQ=="],
+
+    "@rollup/rollup-darwin-arm64": ["@rollup/rollup-darwin-arm64@4.46.2", "", { "os": "darwin", "cpu": "arm64" }, "sha512-HV7bW2Fb/F5KPdM/9bApunQh68YVDU8sO8BvcW9OngQVN3HHHkw99wFupuUJfGR9pYLLAjcAOA6iO+evsbBaPQ=="],
+
+    "@rollup/rollup-darwin-x64": ["@rollup/rollup-darwin-x64@4.46.2", "", { "os": "darwin", "cpu": "x64" }, "sha512-SSj8TlYV5nJixSsm/y3QXfhspSiLYP11zpfwp6G/YDXctf3Xkdnk4woJIF5VQe0of2OjzTt8EsxnJDCdHd2xMA=="],
+
+    "@rollup/rollup-freebsd-arm64": ["@rollup/rollup-freebsd-arm64@4.46.2", "", { "os": "freebsd", "cpu": "arm64" }, "sha512-ZyrsG4TIT9xnOlLsSSi9w/X29tCbK1yegE49RYm3tu3wF1L/B6LVMqnEWyDB26d9Ecx9zrmXCiPmIabVuLmNSg=="],
+
+    "@rollup/rollup-freebsd-x64": ["@rollup/rollup-freebsd-x64@4.46.2", "", { "os": "freebsd", "cpu": "x64" }, "sha512-pCgHFoOECwVCJ5GFq8+gR8SBKnMO+xe5UEqbemxBpCKYQddRQMgomv1104RnLSg7nNvgKy05sLsY51+OVRyiVw=="],
+
+    "@rollup/rollup-linux-arm-gnueabihf": ["@rollup/rollup-linux-arm-gnueabihf@4.46.2", "", { "os": "linux", "cpu": "arm" }, "sha512-EtP8aquZ0xQg0ETFcxUbU71MZlHaw9MChwrQzatiE8U/bvi5uv/oChExXC4mWhjiqK7azGJBqU0tt5H123SzVA=="],
+
+    "@rollup/rollup-linux-arm-musleabihf": ["@rollup/rollup-linux-arm-musleabihf@4.46.2", "", { "os": "linux", "cpu": "arm" }, "sha512-qO7F7U3u1nfxYRPM8HqFtLd+raev2K137dsV08q/LRKRLEc7RsiDWihUnrINdsWQxPR9jqZ8DIIZ1zJJAm5PjQ=="],
+
+    "@rollup/rollup-linux-arm64-gnu": ["@rollup/rollup-linux-arm64-gnu@4.46.2", "", { "os": "linux", "cpu": "arm64" }, "sha512-3dRaqLfcOXYsfvw5xMrxAk9Lb1f395gkoBYzSFcc/scgRFptRXL9DOaDpMiehf9CO8ZDRJW2z45b6fpU5nwjng=="],
+
+    "@rollup/rollup-linux-arm64-musl": ["@rollup/rollup-linux-arm64-musl@4.46.2", "", { "os": "linux", "cpu": "arm64" }, "sha512-fhHFTutA7SM+IrR6lIfiHskxmpmPTJUXpWIsBXpeEwNgZzZZSg/q4i6FU4J8qOGyJ0TR+wXBwx/L7Ho9z0+uDg=="],
+
+    "@rollup/rollup-linux-loongarch64-gnu": ["@rollup/rollup-linux-loongarch64-gnu@4.46.2", "", { "os": "linux", "cpu": "none" }, "sha512-i7wfGFXu8x4+FRqPymzjD+Hyav8l95UIZ773j7J7zRYc3Xsxy2wIn4x+llpunexXe6laaO72iEjeeGyUFmjKeA=="],
+
+    "@rollup/rollup-linux-ppc64-gnu": ["@rollup/rollup-linux-ppc64-gnu@4.46.2", "", { "os": "linux", "cpu": "ppc64" }, "sha512-B/l0dFcHVUnqcGZWKcWBSV2PF01YUt0Rvlurci5P+neqY/yMKchGU8ullZvIv5e8Y1C6wOn+U03mrDylP5q9Yw=="],
+
+    "@rollup/rollup-linux-riscv64-gnu": ["@rollup/rollup-linux-riscv64-gnu@4.46.2", "", { "os": "linux", "cpu": "none" }, "sha512-32k4ENb5ygtkMwPMucAb8MtV8olkPT03oiTxJbgkJa7lJ7dZMr0GCFJlyvy+K8iq7F/iuOr41ZdUHaOiqyR3iQ=="],
+
+    "@rollup/rollup-linux-riscv64-musl": ["@rollup/rollup-linux-riscv64-musl@4.46.2", "", { "os": "linux", "cpu": "none" }, "sha512-t5B2loThlFEauloaQkZg9gxV05BYeITLvLkWOkRXogP4qHXLkWSbSHKM9S6H1schf/0YGP/qNKtiISlxvfmmZw=="],
+
+    "@rollup/rollup-linux-s390x-gnu": ["@rollup/rollup-linux-s390x-gnu@4.46.2", "", { "os": "linux", "cpu": "s390x" }, "sha512-YKjekwTEKgbB7n17gmODSmJVUIvj8CX7q5442/CK80L8nqOUbMtf8b01QkG3jOqyr1rotrAnW6B/qiHwfcuWQA=="],
+
+    "@rollup/rollup-linux-x64-gnu": ["@rollup/rollup-linux-x64-gnu@4.46.2", "", { "os": "linux", "cpu": "x64" }, "sha512-Jj5a9RUoe5ra+MEyERkDKLwTXVu6s3aACP51nkfnK9wJTraCC8IMe3snOfALkrjTYd2G1ViE1hICj0fZ7ALBPA=="],
+
+    "@rollup/rollup-linux-x64-musl": ["@rollup/rollup-linux-x64-musl@4.46.2", "", { "os": "linux", "cpu": "x64" }, "sha512-7kX69DIrBeD7yNp4A5b81izs8BqoZkCIaxQaOpumcJ1S/kmqNFjPhDu1LHeVXv0SexfHQv5cqHsxLOjETuqDuA=="],
+
+    "@rollup/rollup-win32-arm64-msvc": ["@rollup/rollup-win32-arm64-msvc@4.46.2", "", { "os": "win32", "cpu": "arm64" }, "sha512-wiJWMIpeaak/jsbaq2HMh/rzZxHVW1rU6coyeNNpMwk5isiPjSTx0a4YLSlYDwBH/WBvLz+EtsNqQScZTLJy3g=="],
+
+    "@rollup/rollup-win32-ia32-msvc": ["@rollup/rollup-win32-ia32-msvc@4.46.2", "", { "os": "win32", "cpu": "ia32" }, "sha512-gBgaUDESVzMgWZhcyjfs9QFK16D8K6QZpwAaVNJxYDLHWayOta4ZMjGm/vsAEy3hvlS2GosVFlBlP9/Wb85DqQ=="],
+
+    "@rollup/rollup-win32-x64-msvc": ["@rollup/rollup-win32-x64-msvc@4.46.2", "", { "os": "win32", "cpu": "x64" }, "sha512-CvUo2ixeIQGtF6WvuB87XWqPQkoFAFqW+HUo/WzHwuHDvIwZCtjdWXoYCcr06iKGydiqTclC4jU/TNObC/xKZg=="],
+
+    "@types/estree": ["@types/estree@1.0.8", "", {}, "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w=="],
+
+    "ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="],
+
+    "ansi-styles": ["ansi-styles@4.3.0", "", { "dependencies": { "color-convert": "^2.0.1" } }, "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg=="],
+
+    "anymatch": ["anymatch@3.1.3", "", { "dependencies": { "normalize-path": "^3.0.0", "picomatch": "^2.0.4" } }, "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw=="],
+
+    "asynckit": ["asynckit@0.4.0", "", {}, "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="],
+
+    "axios": ["axios@1.11.0", "", { "dependencies": { "follow-redirects": "^1.15.6", "form-data": "^4.0.4", "proxy-from-env": "^1.1.0" } }, "sha512-1Lx3WLFQWm3ooKDYZD1eXmoGO9fxYQjrycfHFC8P0sCfQVXyROp0p9PFWBehewBOdCwHc+f/b8I0fMto5eSfwA=="],
+
+    "binary-extensions": ["binary-extensions@2.3.0", "", {}, "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw=="],
+
+    "bootstrap": ["bootstrap@5.3.8", "", { "peerDependencies": { "@popperjs/core": "^2.11.8" } }, "sha512-HP1SZDqaLDPwsNiqRqi5NcP0SSXciX2s9E+RyqJIIqGo+vJeN5AJVM98CXmW/Wux0nQ5L7jeWUdplCEf0Ee+tg=="],
+
+    "braces": ["braces@3.0.3", "", { "dependencies": { "fill-range": "^7.1.1" } }, "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA=="],
+
+    "call-bind-apply-helpers": ["call-bind-apply-helpers@1.0.2", "", { "dependencies": { "es-errors": "^1.3.0", "function-bind": "^1.1.2" } }, "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ=="],
+
+    "chalk": ["chalk@4.1.2", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="],
+
+    "chart.js": ["chart.js@4.5.0", "", { "dependencies": { "@kurkle/color": "^0.3.0" } }, "sha512-aYeC/jDgSEx8SHWZvANYMioYMZ2KX02W6f6uVfyteuCGcadDLcYVHdfdygsTQkQ4TKn5lghoojAsPj5pu0SnvQ=="],
+
+    "choices.js": ["choices.js@11.1.0", "", { "dependencies": { "fuse.js": "^7.0.0" } }, "sha512-mIt0uLhedHg2ea/K2PACrVpt391vRGHuOoctPAiHcyemezwzNMxj7jOzNEk8e7EbjLh0S0sspDkSCADOKz9kcw=="],
+
+    "chokidar": ["chokidar@3.6.0", "", { "dependencies": { "anymatch": "~3.1.2", "braces": "~3.0.2", "glob-parent": "~5.1.2", "is-binary-path": "~2.1.0", "is-glob": "~4.0.1", "normalize-path": "~3.0.0", "readdirp": "~3.6.0" }, "optionalDependencies": { "fsevents": "~2.3.2" } }, "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw=="],
+
+    "cleave.js": ["cleave.js@1.6.0", "", {}, "sha512-ivqesy3j5hQVG3gywPfwKPbi/7ZSftY/UNp5uphnqjr25yI2CP8FS2ODQPzuLXXnNLi29e2+PgPkkiKUXLs/Nw=="],
+
+    "cliui": ["cliui@8.0.1", "", { "dependencies": { "string-width": "^4.2.0", "strip-ansi": "^6.0.1", "wrap-ansi": "^7.0.0" } }, "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ=="],
+
+    "color-convert": ["color-convert@2.0.1", "", { "dependencies": { "color-name": "~1.1.4" } }, "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ=="],
+
+    "color-name": ["color-name@1.1.4", "", {}, "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="],
+
+    "combined-stream": ["combined-stream@1.0.8", "", { "dependencies": { "delayed-stream": "~1.0.0" } }, "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg=="],
+
+    "concurrently": ["concurrently@9.2.0", "", { "dependencies": { "chalk": "^4.1.2", "lodash": "^4.17.21", "rxjs": "^7.8.1", "shell-quote": "^1.8.1", "supports-color": "^8.1.1", "tree-kill": "^1.2.2", "yargs": "^17.7.2" }, "bin": { "concurrently": "dist/bin/concurrently.js", "conc": "dist/bin/concurrently.js" } }, "sha512-IsB/fiXTupmagMW4MNp2lx2cdSN2FfZq78vF90LBB+zZHArbIQZjQtzXCiXnvTxCZSvXanTqFLWBjw2UkLx1SQ=="],
+
+    "delayed-stream": ["delayed-stream@1.0.0", "", {}, "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="],
+
+    "drift-zoom": ["drift-zoom@1.5.1", "", {}, "sha512-GNLWl0ydTkgyFxfPouKvAZXvJhTt2dqUGkXCqENe+Y1OlQuQ+nUNKgvSpNvjp3nrbcij75GbJR/iMf/qdZbgPw=="],
+
+    "dunder-proto": ["dunder-proto@1.0.1", "", { "dependencies": { "call-bind-apply-helpers": "^1.0.1", "es-errors": "^1.3.0", "gopd": "^1.2.0" } }, "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A=="],
+
+    "emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
+
+    "es-define-property": ["es-define-property@1.0.1", "", {}, "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g=="],
+
+    "es-errors": ["es-errors@1.3.0", "", {}, "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw=="],
+
+    "es-object-atoms": ["es-object-atoms@1.1.1", "", { "dependencies": { "es-errors": "^1.3.0" } }, "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA=="],
+
+    "es-set-tostringtag": ["es-set-tostringtag@2.1.0", "", { "dependencies": { "es-errors": "^1.3.0", "get-intrinsic": "^1.2.6", "has-tostringtag": "^1.0.2", "hasown": "^2.0.2" } }, "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA=="],
+
+    "esbuild": ["esbuild@0.25.8", "", { "optionalDependencies": { "@esbuild/aix-ppc64": "0.25.8", "@esbuild/android-arm": "0.25.8", "@esbuild/android-arm64": "0.25.8", "@esbuild/android-x64": "0.25.8", "@esbuild/darwin-arm64": "0.25.8", "@esbuild/darwin-x64": "0.25.8", "@esbuild/freebsd-arm64": "0.25.8", "@esbuild/freebsd-x64": "0.25.8", "@esbuild/linux-arm": "0.25.8", "@esbuild/linux-arm64": "0.25.8", "@esbuild/linux-ia32": "0.25.8", "@esbuild/linux-loong64": "0.25.8", "@esbuild/linux-mips64el": "0.25.8", "@esbuild/linux-ppc64": "0.25.8", "@esbuild/linux-riscv64": "0.25.8", "@esbuild/linux-s390x": "0.25.8", "@esbuild/linux-x64": "0.25.8", "@esbuild/netbsd-arm64": "0.25.8", "@esbuild/netbsd-x64": "0.25.8", "@esbuild/openbsd-arm64": "0.25.8", "@esbuild/openbsd-x64": "0.25.8", "@esbuild/openharmony-arm64": "0.25.8", "@esbuild/sunos-x64": "0.25.8", "@esbuild/win32-arm64": "0.25.8", "@esbuild/win32-ia32": "0.25.8", "@esbuild/win32-x64": "0.25.8" }, "bin": { "esbuild": "bin/esbuild" } }, "sha512-vVC0USHGtMi8+R4Kz8rt6JhEWLxsv9Rnu/lGYbPR8u47B+DCBksq9JarW0zOO7bs37hyOK1l2/oqtbciutL5+Q=="],
+
+    "escalade": ["escalade@3.2.0", "", {}, "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA=="],
+
+    "fdir": ["fdir@6.4.6", "", { "peerDependencies": { "picomatch": "^3 || ^4" }, "optionalPeers": ["picomatch"] }, "sha512-hiFoqpyZcfNm1yc4u8oWCf9A2c4D3QjCrks3zmoVKVxpQRzmPNar1hUJcBG2RQHvEVGDN+Jm81ZheVLAQMK6+w=="],
+
+    "fill-range": ["fill-range@7.1.1", "", { "dependencies": { "to-regex-range": "^5.0.1" } }, "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg=="],
+
+    "flatpickr": ["flatpickr@4.6.13", "", {}, "sha512-97PMG/aywoYpB4IvbvUJi0RQi8vearvU0oov1WW3k0WZPBMrTQVqekSX5CjSG/M4Q3i6A/0FKXC7RyAoAUUSPw=="],
+
+    "follow-redirects": ["follow-redirects@1.15.11", "", {}, "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ=="],
+
+    "form-data": ["form-data@4.0.4", "", { "dependencies": { "asynckit": "^0.4.0", "combined-stream": "^1.0.8", "es-set-tostringtag": "^2.1.0", "hasown": "^2.0.2", "mime-types": "^2.1.12" } }, "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow=="],
+
+    "fsevents": ["fsevents@2.3.3", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="],
+
+    "function-bind": ["function-bind@1.1.2", "", {}, "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA=="],
+
+    "fuse.js": ["fuse.js@7.1.0", "", {}, "sha512-trLf4SzuuUxfusZADLINj+dE8clK1frKdmqiJNb1Es75fmI5oY6X2mxLVUciLLjxqw/xr72Dhy+lER6dGd02FQ=="],
+
+    "get-caller-file": ["get-caller-file@2.0.5", "", {}, "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="],
+
+    "get-intrinsic": ["get-intrinsic@1.3.0", "", { "dependencies": { "call-bind-apply-helpers": "^1.0.2", "es-define-property": "^1.0.1", "es-errors": "^1.3.0", "es-object-atoms": "^1.1.1", "function-bind": "^1.1.2", "get-proto": "^1.0.1", "gopd": "^1.2.0", "has-symbols": "^1.1.0", "hasown": "^2.0.2", "math-intrinsics": "^1.1.0" } }, "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ=="],
+
+    "get-proto": ["get-proto@1.0.1", "", { "dependencies": { "dunder-proto": "^1.0.1", "es-object-atoms": "^1.0.0" } }, "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g=="],
+
+    "glightbox": ["glightbox@3.3.1", "", {}, "sha512-nXoKfJRnQTDaAFAw5799hjpfAAHx5aLvOLG0SIGudeMCwtHgO3P2/avNYapJ+SL4UEZxO2YNBPtq6pzMhSx42g=="],
+
+    "glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
+
+    "gopd": ["gopd@1.2.0", "", {}, "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg=="],
+
+    "has-flag": ["has-flag@4.0.0", "", {}, "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="],
+
+    "has-symbols": ["has-symbols@1.1.0", "", {}, "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ=="],
+
+    "has-tostringtag": ["has-tostringtag@1.0.2", "", { "dependencies": { "has-symbols": "^1.0.3" } }, "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw=="],
+
+    "hasown": ["hasown@2.0.2", "", { "dependencies": { "function-bind": "^1.1.2" } }, "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ=="],
+
+    "img-comparison-slider": ["img-comparison-slider@8.0.6", "", {}, "sha512-ej4de7mWyjcXZvDgHq8K2a/dG8Vv+qYTdUjZa3cVILf316rLtDrHyGbh9fPvixmAFgbs30zTLfmaRDa7abjtzw=="],
+
+    "immutable": ["immutable@4.3.7", "", {}, "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw=="],
+
+    "is-binary-path": ["is-binary-path@2.1.0", "", { "dependencies": { "binary-extensions": "^2.0.0" } }, "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw=="],
+
+    "is-extglob": ["is-extglob@2.1.1", "", {}, "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="],
+
+    "is-fullwidth-code-point": ["is-fullwidth-code-point@3.0.0", "", {}, "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="],
+
+    "is-glob": ["is-glob@4.0.3", "", { "dependencies": { "is-extglob": "^2.1.1" } }, "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg=="],
+
+    "is-number": ["is-number@7.0.0", "", {}, "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="],
+
+    "laravel-vite-plugin": ["laravel-vite-plugin@2.0.0", "", { "dependencies": { "picocolors": "^1.0.0", "vite-plugin-full-reload": "^1.1.0" }, "peerDependencies": { "vite": "^7.0.0" }, "bin": { "clean-orphaned-assets": "bin/clean.js" } }, "sha512-pnaKHInJgiWpG/g+LmaISHl7D/1s5wnOXnrGiBdt4NOs+tYZRw0v/ZANELGX2/dGgHyEzO+iZ6x4idpoK04z/Q=="],
+
+    "list.js": ["list.js@2.3.1", "", { "dependencies": { "string-natural-compare": "^2.0.2" } }, "sha512-jnmm7DYpKtH3DxtO1E2VNCC9Gp7Wrp/FWA2JxQrZUhVJ2RCQBd57pCN6W5w6jpsfWZV0PCAbTX2NOPgyFeeZZg=="],
+
+    "lodash": ["lodash@4.17.21", "", {}, "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="],
+
+    "lodash-es": ["lodash-es@4.17.21", "", {}, "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="],
+
+    "math-intrinsics": ["math-intrinsics@1.1.0", "", {}, "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g=="],
+
+    "mime-db": ["mime-db@1.52.0", "", {}, "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="],
+
+    "mime-types": ["mime-types@2.1.35", "", { "dependencies": { "mime-db": "1.52.0" } }, "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw=="],
+
+    "nanoid": ["nanoid@3.3.11", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="],
+
+    "normalize-path": ["normalize-path@3.0.0", "", {}, "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="],
+
+    "nouislider": ["nouislider@15.8.1", "", {}, "sha512-93TweAi8kqntHJSPiSWQ1o/uZ29VWOmal9YKb6KKGGlCkugaNfAupT7o1qTHqdJvNQ7S0su5rO6qRFCjP8fxtw=="],
+
+    "picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
+
+    "picomatch": ["picomatch@4.0.3", "", {}, "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q=="],
+
+    "postcss": ["postcss@8.5.6", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg=="],
+
+    "proxy-from-env": ["proxy-from-env@1.1.0", "", {}, "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="],
+
+    "readdirp": ["readdirp@3.6.0", "", { "dependencies": { "picomatch": "^2.2.1" } }, "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA=="],
+
+    "require-directory": ["require-directory@2.1.1", "", {}, "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q=="],
+
+    "rollup": ["rollup@4.46.2", "", { "dependencies": { "@types/estree": "1.0.8" }, "optionalDependencies": { "@rollup/rollup-android-arm-eabi": "4.46.2", "@rollup/rollup-android-arm64": "4.46.2", "@rollup/rollup-darwin-arm64": "4.46.2", "@rollup/rollup-darwin-x64": "4.46.2", "@rollup/rollup-freebsd-arm64": "4.46.2", "@rollup/rollup-freebsd-x64": "4.46.2", "@rollup/rollup-linux-arm-gnueabihf": "4.46.2", "@rollup/rollup-linux-arm-musleabihf": "4.46.2", "@rollup/rollup-linux-arm64-gnu": "4.46.2", "@rollup/rollup-linux-arm64-musl": "4.46.2", "@rollup/rollup-linux-loongarch64-gnu": "4.46.2", "@rollup/rollup-linux-ppc64-gnu": "4.46.2", "@rollup/rollup-linux-riscv64-gnu": "4.46.2", "@rollup/rollup-linux-riscv64-musl": "4.46.2", "@rollup/rollup-linux-s390x-gnu": "4.46.2", "@rollup/rollup-linux-x64-gnu": "4.46.2", "@rollup/rollup-linux-x64-musl": "4.46.2", "@rollup/rollup-win32-arm64-msvc": "4.46.2", "@rollup/rollup-win32-ia32-msvc": "4.46.2", "@rollup/rollup-win32-x64-msvc": "4.46.2", "fsevents": "~2.3.2" }, "bin": { "rollup": "dist/bin/rollup" } }, "sha512-WMmLFI+Boh6xbop+OAGo9cQ3OgX9MIg7xOQjn+pTCwOkk+FNDAeAemXkJ3HzDJrVXleLOFVa1ipuc1AmEx1Dwg=="],
+
+    "rxjs": ["rxjs@7.8.2", "", { "dependencies": { "tslib": "^2.1.0" } }, "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA=="],
+
+    "sass": ["sass@1.77.6", "", { "dependencies": { "chokidar": ">=3.0.0 <4.0.0", "immutable": "^4.0.0", "source-map-js": ">=0.6.2 <2.0.0" }, "bin": { "sass": "sass.js" } }, "sha512-ByXE1oLD79GVq9Ht1PeHWCPMPB8XHpBuz1r85oByKHjZY6qV6rWnQovQzXJXuQ/XyE1Oj3iPk3lo28uzaRA2/Q=="],
+
+    "shell-quote": ["shell-quote@1.8.3", "", {}, "sha512-ObmnIF4hXNg1BqhnHmgbDETF8dLPCggZWBjkQfhZpbszZnYur5DUljTcCHii5LC3J5E0yeO/1LIMyH+UvHQgyw=="],
+
+    "simplebar": ["simplebar@6.3.2", "", { "dependencies": { "simplebar-core": "^1.3.2" } }, "sha512-l4P1Oma0nply0g+pkrkwfC1SF5WDnIHrgiQDXSDzIdjngUDLkPgZcPGKrOvuFeXoSensfKijjIjDlUJSEp+mLQ=="],
+
+    "simplebar-core": ["simplebar-core@1.3.2", "", { "dependencies": { "lodash": "^4.17.21", "lodash-es": "^4.17.21" } }, "sha512-qKgTTuTqapjsFGkNhCjyPhysnbZGpQqNmjk0nOYjFN5ordC/Wjvg+RbYCyMSnW60l/Z0ZS82GbNltly6PMUH1w=="],
+
+    "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
+
+    "string-natural-compare": ["string-natural-compare@2.0.3", "", {}, "sha512-4Kcl12rNjc+6EKhY8QyDVuQTAlMWwRiNbsxnVwBUKFr7dYPQuXVrtNU4sEkjF9LHY0AY6uVbB3ktbkIH4LC+BQ=="],
+
+    "string-width": ["string-width@4.2.3", "", { "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", "strip-ansi": "^6.0.1" } }, "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g=="],
+
+    "strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],
+
+    "supports-color": ["supports-color@8.1.1", "", { "dependencies": { "has-flag": "^4.0.0" } }, "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q=="],
+
+    "swiper": ["swiper@11.2.10", "", {}, "sha512-RMeVUUjTQH+6N3ckimK93oxz6Sn5la4aDlgPzB+rBrG/smPdCTicXyhxa+woIpopz+jewEloiEE3lKo1h9w2YQ=="],
+
+    "timezz": ["timezz@9.0.2", "", {}, "sha512-oZrPwr4MJtzuD1R+2zy1rLaorF2c1urprqLI39IUj9et8b5xW2Zylbye0V1UbqMLGal/Z8bnoBNxyLZ9qnXhXQ=="],
+
+    "tinyglobby": ["tinyglobby@0.2.14", "", { "dependencies": { "fdir": "^6.4.4", "picomatch": "^4.0.2" } }, "sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ=="],
+
+    "to-regex-range": ["to-regex-range@5.0.1", "", { "dependencies": { "is-number": "^7.0.0" } }, "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ=="],
+
+    "tree-kill": ["tree-kill@1.2.2", "", { "bin": { "tree-kill": "cli.js" } }, "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A=="],
+
+    "tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
+
+    "vite": ["vite@6.3.5", "", { "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.4.4", "picomatch": "^4.0.2", "postcss": "^8.5.3", "rollup": "^4.34.9", "tinyglobby": "^0.2.13" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0", "jiti": ">=1.21.0", "less": "*", "lightningcss": "^1.21.0", "sass": "*", "sass-embedded": "*", "stylus": "*", "sugarss": "*", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ=="],
+
+    "vite-plugin-full-reload": ["vite-plugin-full-reload@1.2.0", "", { "dependencies": { "picocolors": "^1.0.0", "picomatch": "^2.3.1" } }, "sha512-kz18NW79x0IHbxRSHm0jttP4zoO9P9gXh+n6UTwlNKnviTTEpOlum6oS9SmecrTtSr+muHEn5TUuC75UovQzcA=="],
+
+    "wrap-ansi": ["wrap-ansi@7.0.0", "", { "dependencies": { "ansi-styles": "^4.0.0", "string-width": "^4.1.0", "strip-ansi": "^6.0.0" } }, "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q=="],
+
+    "y18n": ["y18n@5.0.8", "", {}, "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA=="],
+
+    "yargs": ["yargs@17.7.2", "", { "dependencies": { "cliui": "^8.0.1", "escalade": "^3.1.1", "get-caller-file": "^2.0.5", "require-directory": "^2.1.1", "string-width": "^4.2.3", "y18n": "^5.0.5", "yargs-parser": "^21.1.1" } }, "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w=="],
+
+    "yargs-parser": ["yargs-parser@21.1.1", "", {}, "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw=="],
+
+    "anymatch/picomatch": ["picomatch@2.3.1", "", {}, "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="],
+
+    "chalk/supports-color": ["supports-color@7.2.0", "", { "dependencies": { "has-flag": "^4.0.0" } }, "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw=="],
+
+    "readdirp/picomatch": ["picomatch@2.3.1", "", {}, "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="],
+
+    "vite-plugin-full-reload/picomatch": ["picomatch@2.3.1", "", {}, "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="],
+  }
+}
diff --git a/composer.json b/composer.json
new file mode 100644
index 0000000..7ee5043
--- /dev/null
+++ b/composer.json
@@ -0,0 +1,78 @@
+{
+    "$schema": "https://getcomposer.org/schema.json",
+    "name": "laravel/laravel",
+    "type": "project",
+    "description": "The skeleton application for the Laravel framework.",
+    "keywords": [
+        "laravel",
+        "framework"
+    ],
+    "license": "MIT",
+    "require": {
+        "php": "^8.2",
+        "laravel/framework": "^12.0",
+        "laravel/tinker": "^2.10.1"
+    },
+    "require-dev": {
+        "fakerphp/faker": "^1.23",
+        "laravel/pail": "^1.2.2",
+        "laravel/pint": "^1.13",
+        "laravel/sail": "^1.41",
+        "mockery/mockery": "^1.6",
+        "nunomaduro/collision": "^8.6",
+        "phpunit/phpunit": "^11.5.3"
+    },
+    "autoload": {
+        "psr-4": {
+            "App\\": "app/",
+            "Database\\Factories\\": "database/factories/",
+            "Database\\Seeders\\": "database/seeders/"
+        }
+    },
+    "autoload-dev": {
+        "psr-4": {
+            "Tests\\": "tests/"
+        }
+    },
+    "scripts": {
+        "post-autoload-dump": [
+            "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
+            "@php artisan package:discover --ansi"
+        ],
+        "post-update-cmd": [
+            "@php artisan vendor:publish --tag=laravel-assets --ansi --force"
+        ],
+        "post-root-package-install": [
+            "@php -r \"file_exists('.env') || copy('.env.example', '.env');\""
+        ],
+        "post-create-project-cmd": [
+            "@php artisan key:generate --ansi",
+            "@php -r \"file_exists('database/database.sqlite') || touch('database/database.sqlite');\"",
+            "@php artisan migrate --graceful --ansi"
+        ],
+        "dev": [
+            "Composer\\Config::disableProcessTimeout",
+            "npx concurrently -c \"#93c5fd,#c4b5fd,#fb7185,#fdba74\" \"php artisan serve\" \"php artisan queue:listen --tries=1\" \"php artisan pail --timeout=0\" \"npm run dev\" --names=server,queue,logs,vite"
+        ],
+        "test": [
+            "@php artisan config:clear --ansi",
+            "@php artisan test"
+        ]
+    },
+    "extra": {
+        "laravel": {
+            "dont-discover": []
+        }
+    },
+    "config": {
+        "optimize-autoloader": true,
+        "preferred-install": "dist",
+        "sort-packages": true,
+        "allow-plugins": {
+            "pestphp/pest-plugin": true,
+            "php-http/discovery": true
+        }
+    },
+    "minimum-stability": "stable",
+    "prefer-stable": true
+}
\ No newline at end of file
diff --git a/composer.lock b/composer.lock
new file mode 100644
index 0000000..1943771
--- /dev/null
+++ b/composer.lock
@@ -0,0 +1,8152 @@
+{
+    "_readme": [
+        "This file locks the dependencies of your project to a known state",
+        "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
+        "This file is @generated automatically"
+    ],
+    "content-hash": "88970a0117c062eed55fa8728fc43833",
+    "packages": [
+        {
+            "name": "brick/math",
+            "version": "0.13.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/brick/math.git",
+                "reference": "fc7ed316430118cc7836bf45faff18d5dfc8de04"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/brick/math/zipball/fc7ed316430118cc7836bf45faff18d5dfc8de04",
+                "reference": "fc7ed316430118cc7836bf45faff18d5dfc8de04",
+                "shasum": ""
+            },
+            "require": {
+                "php": "^8.1"
+            },
+            "require-dev": {
+                "php-coveralls/php-coveralls": "^2.2",
+                "phpunit/phpunit": "^10.1",
+                "vimeo/psalm": "6.8.8"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Brick\\Math\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "description": "Arbitrary-precision arithmetic library",
+            "keywords": [
+                "Arbitrary-precision",
+                "BigInteger",
+                "BigRational",
+                "arithmetic",
+                "bigdecimal",
+                "bignum",
+                "bignumber",
+                "brick",
+                "decimal",
+                "integer",
+                "math",
+                "mathematics",
+                "rational"
+            ],
+            "support": {
+                "issues": "https://github.com/brick/math/issues",
+                "source": "https://github.com/brick/math/tree/0.13.1"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/BenMorel",
+                    "type": "github"
+                }
+            ],
+            "time": "2025-03-29T13:50:30+00:00"
+        },
+        {
+            "name": "carbonphp/carbon-doctrine-types",
+            "version": "3.2.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/CarbonPHP/carbon-doctrine-types.git",
+                "reference": "18ba5ddfec8976260ead6e866180bd5d2f71aa1d"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/CarbonPHP/carbon-doctrine-types/zipball/18ba5ddfec8976260ead6e866180bd5d2f71aa1d",
+                "reference": "18ba5ddfec8976260ead6e866180bd5d2f71aa1d",
+                "shasum": ""
+            },
+            "require": {
+                "php": "^8.1"
+            },
+            "conflict": {
+                "doctrine/dbal": "<4.0.0 || >=5.0.0"
+            },
+            "require-dev": {
+                "doctrine/dbal": "^4.0.0",
+                "nesbot/carbon": "^2.71.0 || ^3.0.0",
+                "phpunit/phpunit": "^10.3"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Carbon\\Doctrine\\": "src/Carbon/Doctrine/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "KyleKatarn",
+                    "email": "kylekatarnls@gmail.com"
+                }
+            ],
+            "description": "Types to use Carbon in Doctrine",
+            "keywords": [
+                "carbon",
+                "date",
+                "datetime",
+                "doctrine",
+                "time"
+            ],
+            "support": {
+                "issues": "https://github.com/CarbonPHP/carbon-doctrine-types/issues",
+                "source": "https://github.com/CarbonPHP/carbon-doctrine-types/tree/3.2.0"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/kylekatarnls",
+                    "type": "github"
+                },
+                {
+                    "url": "https://opencollective.com/Carbon",
+                    "type": "open_collective"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/nesbot/carbon",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2024-02-09T16:56:22+00:00"
+        },
+        {
+            "name": "dflydev/dot-access-data",
+            "version": "v3.0.3",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/dflydev/dflydev-dot-access-data.git",
+                "reference": "a23a2bf4f31d3518f3ecb38660c95715dfead60f"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/dflydev/dflydev-dot-access-data/zipball/a23a2bf4f31d3518f3ecb38660c95715dfead60f",
+                "reference": "a23a2bf4f31d3518f3ecb38660c95715dfead60f",
+                "shasum": ""
+            },
+            "require": {
+                "php": "^7.1 || ^8.0"
+            },
+            "require-dev": {
+                "phpstan/phpstan": "^0.12.42",
+                "phpunit/phpunit": "^7.5 || ^8.5 || ^9.3",
+                "scrutinizer/ocular": "1.6.0",
+                "squizlabs/php_codesniffer": "^3.5",
+                "vimeo/psalm": "^4.0.0"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-main": "3.x-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Dflydev\\DotAccessData\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Dragonfly Development Inc.",
+                    "email": "info@dflydev.com",
+                    "homepage": "http://dflydev.com"
+                },
+                {
+                    "name": "Beau Simensen",
+                    "email": "beau@dflydev.com",
+                    "homepage": "http://beausimensen.com"
+                },
+                {
+                    "name": "Carlos Frutos",
+                    "email": "carlos@kiwing.it",
+                    "homepage": "https://github.com/cfrutos"
+                },
+                {
+                    "name": "Colin O'Dell",
+                    "email": "colinodell@gmail.com",
+                    "homepage": "https://www.colinodell.com"
+                }
+            ],
+            "description": "Given a deep data structure, access data by dot notation.",
+            "homepage": "https://github.com/dflydev/dflydev-dot-access-data",
+            "keywords": [
+                "access",
+                "data",
+                "dot",
+                "notation"
+            ],
+            "support": {
+                "issues": "https://github.com/dflydev/dflydev-dot-access-data/issues",
+                "source": "https://github.com/dflydev/dflydev-dot-access-data/tree/v3.0.3"
+            },
+            "time": "2024-07-08T12:26:09+00:00"
+        },
+        {
+            "name": "doctrine/inflector",
+            "version": "2.0.10",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/doctrine/inflector.git",
+                "reference": "5817d0659c5b50c9b950feb9af7b9668e2c436bc"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/doctrine/inflector/zipball/5817d0659c5b50c9b950feb9af7b9668e2c436bc",
+                "reference": "5817d0659c5b50c9b950feb9af7b9668e2c436bc",
+                "shasum": ""
+            },
+            "require": {
+                "php": "^7.2 || ^8.0"
+            },
+            "require-dev": {
+                "doctrine/coding-standard": "^11.0",
+                "phpstan/phpstan": "^1.8",
+                "phpstan/phpstan-phpunit": "^1.1",
+                "phpstan/phpstan-strict-rules": "^1.3",
+                "phpunit/phpunit": "^8.5 || ^9.5",
+                "vimeo/psalm": "^4.25 || ^5.4"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Doctrine\\Inflector\\": "lib/Doctrine/Inflector"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Guilherme Blanco",
+                    "email": "guilhermeblanco@gmail.com"
+                },
+                {
+                    "name": "Roman Borschel",
+                    "email": "roman@code-factory.org"
+                },
+                {
+                    "name": "Benjamin Eberlei",
+                    "email": "kontakt@beberlei.de"
+                },
+                {
+                    "name": "Jonathan Wage",
+                    "email": "jonwage@gmail.com"
+                },
+                {
+                    "name": "Johannes Schmitt",
+                    "email": "schmittjoh@gmail.com"
+                }
+            ],
+            "description": "PHP Doctrine Inflector is a small library that can perform string manipulations with regard to upper/lowercase and singular/plural forms of words.",
+            "homepage": "https://www.doctrine-project.org/projects/inflector.html",
+            "keywords": [
+                "inflection",
+                "inflector",
+                "lowercase",
+                "manipulation",
+                "php",
+                "plural",
+                "singular",
+                "strings",
+                "uppercase",
+                "words"
+            ],
+            "support": {
+                "issues": "https://github.com/doctrine/inflector/issues",
+                "source": "https://github.com/doctrine/inflector/tree/2.0.10"
+            },
+            "funding": [
+                {
+                    "url": "https://www.doctrine-project.org/sponsorship.html",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://www.patreon.com/phpdoctrine",
+                    "type": "patreon"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/doctrine%2Finflector",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2024-02-18T20:23:39+00:00"
+        },
+        {
+            "name": "doctrine/lexer",
+            "version": "3.0.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/doctrine/lexer.git",
+                "reference": "31ad66abc0fc9e1a1f2d9bc6a42668d2fbbcd6dd"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/doctrine/lexer/zipball/31ad66abc0fc9e1a1f2d9bc6a42668d2fbbcd6dd",
+                "reference": "31ad66abc0fc9e1a1f2d9bc6a42668d2fbbcd6dd",
+                "shasum": ""
+            },
+            "require": {
+                "php": "^8.1"
+            },
+            "require-dev": {
+                "doctrine/coding-standard": "^12",
+                "phpstan/phpstan": "^1.10",
+                "phpunit/phpunit": "^10.5",
+                "psalm/plugin-phpunit": "^0.18.3",
+                "vimeo/psalm": "^5.21"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Doctrine\\Common\\Lexer\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Guilherme Blanco",
+                    "email": "guilhermeblanco@gmail.com"
+                },
+                {
+                    "name": "Roman Borschel",
+                    "email": "roman@code-factory.org"
+                },
+                {
+                    "name": "Johannes Schmitt",
+                    "email": "schmittjoh@gmail.com"
+                }
+            ],
+            "description": "PHP Doctrine Lexer parser library that can be used in Top-Down, Recursive Descent Parsers.",
+            "homepage": "https://www.doctrine-project.org/projects/lexer.html",
+            "keywords": [
+                "annotations",
+                "docblock",
+                "lexer",
+                "parser",
+                "php"
+            ],
+            "support": {
+                "issues": "https://github.com/doctrine/lexer/issues",
+                "source": "https://github.com/doctrine/lexer/tree/3.0.1"
+            },
+            "funding": [
+                {
+                    "url": "https://www.doctrine-project.org/sponsorship.html",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://www.patreon.com/phpdoctrine",
+                    "type": "patreon"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/doctrine%2Flexer",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2024-02-05T11:56:58+00:00"
+        },
+        {
+            "name": "dragonmantank/cron-expression",
+            "version": "v3.4.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/dragonmantank/cron-expression.git",
+                "reference": "8c784d071debd117328803d86b2097615b457500"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/dragonmantank/cron-expression/zipball/8c784d071debd117328803d86b2097615b457500",
+                "reference": "8c784d071debd117328803d86b2097615b457500",
+                "shasum": ""
+            },
+            "require": {
+                "php": "^7.2|^8.0",
+                "webmozart/assert": "^1.0"
+            },
+            "replace": {
+                "mtdowling/cron-expression": "^1.0"
+            },
+            "require-dev": {
+                "phpstan/extension-installer": "^1.0",
+                "phpstan/phpstan": "^1.0",
+                "phpunit/phpunit": "^7.0|^8.0|^9.0"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "3.x-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Cron\\": "src/Cron/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Chris Tankersley",
+                    "email": "chris@ctankersley.com",
+                    "homepage": "https://github.com/dragonmantank"
+                }
+            ],
+            "description": "CRON for PHP: Calculate the next or previous run date and determine if a CRON expression is due",
+            "keywords": [
+                "cron",
+                "schedule"
+            ],
+            "support": {
+                "issues": "https://github.com/dragonmantank/cron-expression/issues",
+                "source": "https://github.com/dragonmantank/cron-expression/tree/v3.4.0"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/dragonmantank",
+                    "type": "github"
+                }
+            ],
+            "time": "2024-10-09T13:47:03+00:00"
+        },
+        {
+            "name": "egulias/email-validator",
+            "version": "4.0.4",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/egulias/EmailValidator.git",
+                "reference": "d42c8731f0624ad6bdc8d3e5e9a4524f68801cfa"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/egulias/EmailValidator/zipball/d42c8731f0624ad6bdc8d3e5e9a4524f68801cfa",
+                "reference": "d42c8731f0624ad6bdc8d3e5e9a4524f68801cfa",
+                "shasum": ""
+            },
+            "require": {
+                "doctrine/lexer": "^2.0 || ^3.0",
+                "php": ">=8.1",
+                "symfony/polyfill-intl-idn": "^1.26"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "^10.2",
+                "vimeo/psalm": "^5.12"
+            },
+            "suggest": {
+                "ext-intl": "PHP Internationalization Libraries are required to use the SpoofChecking validation"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "4.0.x-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Egulias\\EmailValidator\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Eduardo Gulias Davis"
+                }
+            ],
+            "description": "A library for validating emails against several RFCs",
+            "homepage": "https://github.com/egulias/EmailValidator",
+            "keywords": [
+                "email",
+                "emailvalidation",
+                "emailvalidator",
+                "validation",
+                "validator"
+            ],
+            "support": {
+                "issues": "https://github.com/egulias/EmailValidator/issues",
+                "source": "https://github.com/egulias/EmailValidator/tree/4.0.4"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/egulias",
+                    "type": "github"
+                }
+            ],
+            "time": "2025-03-06T22:45:56+00:00"
+        },
+        {
+            "name": "fruitcake/php-cors",
+            "version": "v1.3.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/fruitcake/php-cors.git",
+                "reference": "3d158f36e7875e2f040f37bc0573956240a5a38b"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/fruitcake/php-cors/zipball/3d158f36e7875e2f040f37bc0573956240a5a38b",
+                "reference": "3d158f36e7875e2f040f37bc0573956240a5a38b",
+                "shasum": ""
+            },
+            "require": {
+                "php": "^7.4|^8.0",
+                "symfony/http-foundation": "^4.4|^5.4|^6|^7"
+            },
+            "require-dev": {
+                "phpstan/phpstan": "^1.4",
+                "phpunit/phpunit": "^9",
+                "squizlabs/php_codesniffer": "^3.5"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "1.2-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Fruitcake\\Cors\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Fruitcake",
+                    "homepage": "https://fruitcake.nl"
+                },
+                {
+                    "name": "Barryvdh",
+                    "email": "barryvdh@gmail.com"
+                }
+            ],
+            "description": "Cross-origin resource sharing library for the Symfony HttpFoundation",
+            "homepage": "https://github.com/fruitcake/php-cors",
+            "keywords": [
+                "cors",
+                "laravel",
+                "symfony"
+            ],
+            "support": {
+                "issues": "https://github.com/fruitcake/php-cors/issues",
+                "source": "https://github.com/fruitcake/php-cors/tree/v1.3.0"
+            },
+            "funding": [
+                {
+                    "url": "https://fruitcake.nl",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/barryvdh",
+                    "type": "github"
+                }
+            ],
+            "time": "2023-10-12T05:21:21+00:00"
+        },
+        {
+            "name": "graham-campbell/result-type",
+            "version": "v1.1.3",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/GrahamCampbell/Result-Type.git",
+                "reference": "3ba905c11371512af9d9bdd27d99b782216b6945"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/GrahamCampbell/Result-Type/zipball/3ba905c11371512af9d9bdd27d99b782216b6945",
+                "reference": "3ba905c11371512af9d9bdd27d99b782216b6945",
+                "shasum": ""
+            },
+            "require": {
+                "php": "^7.2.5 || ^8.0",
+                "phpoption/phpoption": "^1.9.3"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "^8.5.39 || ^9.6.20 || ^10.5.28"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "GrahamCampbell\\ResultType\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Graham Campbell",
+                    "email": "hello@gjcampbell.co.uk",
+                    "homepage": "https://github.com/GrahamCampbell"
+                }
+            ],
+            "description": "An Implementation Of The Result Type",
+            "keywords": [
+                "Graham Campbell",
+                "GrahamCampbell",
+                "Result Type",
+                "Result-Type",
+                "result"
+            ],
+            "support": {
+                "issues": "https://github.com/GrahamCampbell/Result-Type/issues",
+                "source": "https://github.com/GrahamCampbell/Result-Type/tree/v1.1.3"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/GrahamCampbell",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/graham-campbell/result-type",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2024-07-20T21:45:45+00:00"
+        },
+        {
+            "name": "guzzlehttp/guzzle",
+            "version": "7.9.3",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/guzzle/guzzle.git",
+                "reference": "7b2f29fe81dc4da0ca0ea7d42107a0845946ea77"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/guzzle/guzzle/zipball/7b2f29fe81dc4da0ca0ea7d42107a0845946ea77",
+                "reference": "7b2f29fe81dc4da0ca0ea7d42107a0845946ea77",
+                "shasum": ""
+            },
+            "require": {
+                "ext-json": "*",
+                "guzzlehttp/promises": "^1.5.3 || ^2.0.3",
+                "guzzlehttp/psr7": "^2.7.0",
+                "php": "^7.2.5 || ^8.0",
+                "psr/http-client": "^1.0",
+                "symfony/deprecation-contracts": "^2.2 || ^3.0"
+            },
+            "provide": {
+                "psr/http-client-implementation": "1.0"
+            },
+            "require-dev": {
+                "bamarni/composer-bin-plugin": "^1.8.2",
+                "ext-curl": "*",
+                "guzzle/client-integration-tests": "3.0.2",
+                "php-http/message-factory": "^1.1",
+                "phpunit/phpunit": "^8.5.39 || ^9.6.20",
+                "psr/log": "^1.1 || ^2.0 || ^3.0"
+            },
+            "suggest": {
+                "ext-curl": "Required for CURL handler support",
+                "ext-intl": "Required for Internationalized Domain Name (IDN) support",
+                "psr/log": "Required for using the Log middleware"
+            },
+            "type": "library",
+            "extra": {
+                "bamarni-bin": {
+                    "bin-links": true,
+                    "forward-command": false
+                }
+            },
+            "autoload": {
+                "files": [
+                    "src/functions_include.php"
+                ],
+                "psr-4": {
+                    "GuzzleHttp\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Graham Campbell",
+                    "email": "hello@gjcampbell.co.uk",
+                    "homepage": "https://github.com/GrahamCampbell"
+                },
+                {
+                    "name": "Michael Dowling",
+                    "email": "mtdowling@gmail.com",
+                    "homepage": "https://github.com/mtdowling"
+                },
+                {
+                    "name": "Jeremy Lindblom",
+                    "email": "jeremeamia@gmail.com",
+                    "homepage": "https://github.com/jeremeamia"
+                },
+                {
+                    "name": "George Mponos",
+                    "email": "gmponos@gmail.com",
+                    "homepage": "https://github.com/gmponos"
+                },
+                {
+                    "name": "Tobias Nyholm",
+                    "email": "tobias.nyholm@gmail.com",
+                    "homepage": "https://github.com/Nyholm"
+                },
+                {
+                    "name": "Márk Sági-Kazár",
+                    "email": "mark.sagikazar@gmail.com",
+                    "homepage": "https://github.com/sagikazarmark"
+                },
+                {
+                    "name": "Tobias Schultze",
+                    "email": "webmaster@tubo-world.de",
+                    "homepage": "https://github.com/Tobion"
+                }
+            ],
+            "description": "Guzzle is a PHP HTTP client library",
+            "keywords": [
+                "client",
+                "curl",
+                "framework",
+                "http",
+                "http client",
+                "psr-18",
+                "psr-7",
+                "rest",
+                "web service"
+            ],
+            "support": {
+                "issues": "https://github.com/guzzle/guzzle/issues",
+                "source": "https://github.com/guzzle/guzzle/tree/7.9.3"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/GrahamCampbell",
+                    "type": "github"
+                },
+                {
+                    "url": "https://github.com/Nyholm",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/guzzlehttp/guzzle",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2025-03-27T13:37:11+00:00"
+        },
+        {
+            "name": "guzzlehttp/promises",
+            "version": "2.2.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/guzzle/promises.git",
+                "reference": "7c69f28996b0a6920945dd20b3857e499d9ca96c"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/guzzle/promises/zipball/7c69f28996b0a6920945dd20b3857e499d9ca96c",
+                "reference": "7c69f28996b0a6920945dd20b3857e499d9ca96c",
+                "shasum": ""
+            },
+            "require": {
+                "php": "^7.2.5 || ^8.0"
+            },
+            "require-dev": {
+                "bamarni/composer-bin-plugin": "^1.8.2",
+                "phpunit/phpunit": "^8.5.39 || ^9.6.20"
+            },
+            "type": "library",
+            "extra": {
+                "bamarni-bin": {
+                    "bin-links": true,
+                    "forward-command": false
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "GuzzleHttp\\Promise\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Graham Campbell",
+                    "email": "hello@gjcampbell.co.uk",
+                    "homepage": "https://github.com/GrahamCampbell"
+                },
+                {
+                    "name": "Michael Dowling",
+                    "email": "mtdowling@gmail.com",
+                    "homepage": "https://github.com/mtdowling"
+                },
+                {
+                    "name": "Tobias Nyholm",
+                    "email": "tobias.nyholm@gmail.com",
+                    "homepage": "https://github.com/Nyholm"
+                },
+                {
+                    "name": "Tobias Schultze",
+                    "email": "webmaster@tubo-world.de",
+                    "homepage": "https://github.com/Tobion"
+                }
+            ],
+            "description": "Guzzle promises library",
+            "keywords": [
+                "promise"
+            ],
+            "support": {
+                "issues": "https://github.com/guzzle/promises/issues",
+                "source": "https://github.com/guzzle/promises/tree/2.2.0"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/GrahamCampbell",
+                    "type": "github"
+                },
+                {
+                    "url": "https://github.com/Nyholm",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/guzzlehttp/promises",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2025-03-27T13:27:01+00:00"
+        },
+        {
+            "name": "guzzlehttp/psr7",
+            "version": "2.7.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/guzzle/psr7.git",
+                "reference": "c2270caaabe631b3b44c85f99e5a04bbb8060d16"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/guzzle/psr7/zipball/c2270caaabe631b3b44c85f99e5a04bbb8060d16",
+                "reference": "c2270caaabe631b3b44c85f99e5a04bbb8060d16",
+                "shasum": ""
+            },
+            "require": {
+                "php": "^7.2.5 || ^8.0",
+                "psr/http-factory": "^1.0",
+                "psr/http-message": "^1.1 || ^2.0",
+                "ralouphie/getallheaders": "^3.0"
+            },
+            "provide": {
+                "psr/http-factory-implementation": "1.0",
+                "psr/http-message-implementation": "1.0"
+            },
+            "require-dev": {
+                "bamarni/composer-bin-plugin": "^1.8.2",
+                "http-interop/http-factory-tests": "0.9.0",
+                "phpunit/phpunit": "^8.5.39 || ^9.6.20"
+            },
+            "suggest": {
+                "laminas/laminas-httphandlerrunner": "Emit PSR-7 responses"
+            },
+            "type": "library",
+            "extra": {
+                "bamarni-bin": {
+                    "bin-links": true,
+                    "forward-command": false
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "GuzzleHttp\\Psr7\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Graham Campbell",
+                    "email": "hello@gjcampbell.co.uk",
+                    "homepage": "https://github.com/GrahamCampbell"
+                },
+                {
+                    "name": "Michael Dowling",
+                    "email": "mtdowling@gmail.com",
+                    "homepage": "https://github.com/mtdowling"
+                },
+                {
+                    "name": "George Mponos",
+                    "email": "gmponos@gmail.com",
+                    "homepage": "https://github.com/gmponos"
+                },
+                {
+                    "name": "Tobias Nyholm",
+                    "email": "tobias.nyholm@gmail.com",
+                    "homepage": "https://github.com/Nyholm"
+                },
+                {
+                    "name": "Márk Sági-Kazár",
+                    "email": "mark.sagikazar@gmail.com",
+                    "homepage": "https://github.com/sagikazarmark"
+                },
+                {
+                    "name": "Tobias Schultze",
+                    "email": "webmaster@tubo-world.de",
+                    "homepage": "https://github.com/Tobion"
+                },
+                {
+                    "name": "Márk Sági-Kazár",
+                    "email": "mark.sagikazar@gmail.com",
+                    "homepage": "https://sagikazarmark.hu"
+                }
+            ],
+            "description": "PSR-7 message implementation that also provides common utility methods",
+            "keywords": [
+                "http",
+                "message",
+                "psr-7",
+                "request",
+                "response",
+                "stream",
+                "uri",
+                "url"
+            ],
+            "support": {
+                "issues": "https://github.com/guzzle/psr7/issues",
+                "source": "https://github.com/guzzle/psr7/tree/2.7.1"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/GrahamCampbell",
+                    "type": "github"
+                },
+                {
+                    "url": "https://github.com/Nyholm",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/guzzlehttp/psr7",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2025-03-27T12:30:47+00:00"
+        },
+        {
+            "name": "guzzlehttp/uri-template",
+            "version": "v1.0.4",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/guzzle/uri-template.git",
+                "reference": "30e286560c137526eccd4ce21b2de477ab0676d2"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/guzzle/uri-template/zipball/30e286560c137526eccd4ce21b2de477ab0676d2",
+                "reference": "30e286560c137526eccd4ce21b2de477ab0676d2",
+                "shasum": ""
+            },
+            "require": {
+                "php": "^7.2.5 || ^8.0",
+                "symfony/polyfill-php80": "^1.24"
+            },
+            "require-dev": {
+                "bamarni/composer-bin-plugin": "^1.8.2",
+                "phpunit/phpunit": "^8.5.36 || ^9.6.15",
+                "uri-template/tests": "1.0.0"
+            },
+            "type": "library",
+            "extra": {
+                "bamarni-bin": {
+                    "bin-links": true,
+                    "forward-command": false
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "GuzzleHttp\\UriTemplate\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Graham Campbell",
+                    "email": "hello@gjcampbell.co.uk",
+                    "homepage": "https://github.com/GrahamCampbell"
+                },
+                {
+                    "name": "Michael Dowling",
+                    "email": "mtdowling@gmail.com",
+                    "homepage": "https://github.com/mtdowling"
+                },
+                {
+                    "name": "George Mponos",
+                    "email": "gmponos@gmail.com",
+                    "homepage": "https://github.com/gmponos"
+                },
+                {
+                    "name": "Tobias Nyholm",
+                    "email": "tobias.nyholm@gmail.com",
+                    "homepage": "https://github.com/Nyholm"
+                }
+            ],
+            "description": "A polyfill class for uri_template of PHP",
+            "keywords": [
+                "guzzlehttp",
+                "uri-template"
+            ],
+            "support": {
+                "issues": "https://github.com/guzzle/uri-template/issues",
+                "source": "https://github.com/guzzle/uri-template/tree/v1.0.4"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/GrahamCampbell",
+                    "type": "github"
+                },
+                {
+                    "url": "https://github.com/Nyholm",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/guzzlehttp/uri-template",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2025-02-03T10:55:03+00:00"
+        },
+        {
+            "name": "laravel/framework",
+            "version": "v12.21.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/laravel/framework.git",
+                "reference": "ac8c4e73bf1b5387b709f7736d41427e6af1c93b"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/laravel/framework/zipball/ac8c4e73bf1b5387b709f7736d41427e6af1c93b",
+                "reference": "ac8c4e73bf1b5387b709f7736d41427e6af1c93b",
+                "shasum": ""
+            },
+            "require": {
+                "brick/math": "^0.11|^0.12|^0.13",
+                "composer-runtime-api": "^2.2",
+                "doctrine/inflector": "^2.0.5",
+                "dragonmantank/cron-expression": "^3.4",
+                "egulias/email-validator": "^3.2.1|^4.0",
+                "ext-ctype": "*",
+                "ext-filter": "*",
+                "ext-hash": "*",
+                "ext-mbstring": "*",
+                "ext-openssl": "*",
+                "ext-session": "*",
+                "ext-tokenizer": "*",
+                "fruitcake/php-cors": "^1.3",
+                "guzzlehttp/guzzle": "^7.8.2",
+                "guzzlehttp/uri-template": "^1.0",
+                "laravel/prompts": "^0.3.0",
+                "laravel/serializable-closure": "^1.3|^2.0",
+                "league/commonmark": "^2.7",
+                "league/flysystem": "^3.25.1",
+                "league/flysystem-local": "^3.25.1",
+                "league/uri": "^7.5.1",
+                "monolog/monolog": "^3.0",
+                "nesbot/carbon": "^3.8.4",
+                "nunomaduro/termwind": "^2.0",
+                "php": "^8.2",
+                "psr/container": "^1.1.1|^2.0.1",
+                "psr/log": "^1.0|^2.0|^3.0",
+                "psr/simple-cache": "^1.0|^2.0|^3.0",
+                "ramsey/uuid": "^4.7",
+                "symfony/console": "^7.2.0",
+                "symfony/error-handler": "^7.2.0",
+                "symfony/finder": "^7.2.0",
+                "symfony/http-foundation": "^7.2.0",
+                "symfony/http-kernel": "^7.2.0",
+                "symfony/mailer": "^7.2.0",
+                "symfony/mime": "^7.2.0",
+                "symfony/polyfill-php83": "^1.31",
+                "symfony/process": "^7.2.0",
+                "symfony/routing": "^7.2.0",
+                "symfony/uid": "^7.2.0",
+                "symfony/var-dumper": "^7.2.0",
+                "tijsverkoyen/css-to-inline-styles": "^2.2.5",
+                "vlucas/phpdotenv": "^5.6.1",
+                "voku/portable-ascii": "^2.0.2"
+            },
+            "conflict": {
+                "tightenco/collect": "<5.5.33"
+            },
+            "provide": {
+                "psr/container-implementation": "1.1|2.0",
+                "psr/log-implementation": "1.0|2.0|3.0",
+                "psr/simple-cache-implementation": "1.0|2.0|3.0"
+            },
+            "replace": {
+                "illuminate/auth": "self.version",
+                "illuminate/broadcasting": "self.version",
+                "illuminate/bus": "self.version",
+                "illuminate/cache": "self.version",
+                "illuminate/collections": "self.version",
+                "illuminate/concurrency": "self.version",
+                "illuminate/conditionable": "self.version",
+                "illuminate/config": "self.version",
+                "illuminate/console": "self.version",
+                "illuminate/container": "self.version",
+                "illuminate/contracts": "self.version",
+                "illuminate/cookie": "self.version",
+                "illuminate/database": "self.version",
+                "illuminate/encryption": "self.version",
+                "illuminate/events": "self.version",
+                "illuminate/filesystem": "self.version",
+                "illuminate/hashing": "self.version",
+                "illuminate/http": "self.version",
+                "illuminate/log": "self.version",
+                "illuminate/macroable": "self.version",
+                "illuminate/mail": "self.version",
+                "illuminate/notifications": "self.version",
+                "illuminate/pagination": "self.version",
+                "illuminate/pipeline": "self.version",
+                "illuminate/process": "self.version",
+                "illuminate/queue": "self.version",
+                "illuminate/redis": "self.version",
+                "illuminate/routing": "self.version",
+                "illuminate/session": "self.version",
+                "illuminate/support": "self.version",
+                "illuminate/testing": "self.version",
+                "illuminate/translation": "self.version",
+                "illuminate/validation": "self.version",
+                "illuminate/view": "self.version",
+                "spatie/once": "*"
+            },
+            "require-dev": {
+                "ably/ably-php": "^1.0",
+                "aws/aws-sdk-php": "^3.322.9",
+                "ext-gmp": "*",
+                "fakerphp/faker": "^1.24",
+                "guzzlehttp/promises": "^2.0.3",
+                "guzzlehttp/psr7": "^2.4",
+                "laravel/pint": "^1.18",
+                "league/flysystem-aws-s3-v3": "^3.25.1",
+                "league/flysystem-ftp": "^3.25.1",
+                "league/flysystem-path-prefixing": "^3.25.1",
+                "league/flysystem-read-only": "^3.25.1",
+                "league/flysystem-sftp-v3": "^3.25.1",
+                "mockery/mockery": "^1.6.10",
+                "orchestra/testbench-core": "^10.0.0",
+                "pda/pheanstalk": "^5.0.6|^7.0.0",
+                "php-http/discovery": "^1.15",
+                "phpstan/phpstan": "^2.0",
+                "phpunit/phpunit": "^10.5.35|^11.5.3|^12.0.1",
+                "predis/predis": "^2.3|^3.0",
+                "resend/resend-php": "^0.10.0",
+                "symfony/cache": "^7.2.0",
+                "symfony/http-client": "^7.2.0",
+                "symfony/psr-http-message-bridge": "^7.2.0",
+                "symfony/translation": "^7.2.0"
+            },
+            "suggest": {
+                "ably/ably-php": "Required to use the Ably broadcast driver (^1.0).",
+                "aws/aws-sdk-php": "Required to use the SQS queue driver, DynamoDb failed job storage, and SES mail driver (^3.322.9).",
+                "brianium/paratest": "Required to run tests in parallel (^7.0|^8.0).",
+                "ext-apcu": "Required to use the APC cache driver.",
+                "ext-fileinfo": "Required to use the Filesystem class.",
+                "ext-ftp": "Required to use the Flysystem FTP driver.",
+                "ext-gd": "Required to use Illuminate\\Http\\Testing\\FileFactory::image().",
+                "ext-memcached": "Required to use the memcache cache driver.",
+                "ext-pcntl": "Required to use all features of the queue worker and console signal trapping.",
+                "ext-pdo": "Required to use all database features.",
+                "ext-posix": "Required to use all features of the queue worker.",
+                "ext-redis": "Required to use the Redis cache and queue drivers (^4.0|^5.0|^6.0).",
+                "fakerphp/faker": "Required to use the eloquent factory builder (^1.9.1).",
+                "filp/whoops": "Required for friendly error pages in development (^2.14.3).",
+                "laravel/tinker": "Required to use the tinker console command (^2.0).",
+                "league/flysystem-aws-s3-v3": "Required to use the Flysystem S3 driver (^3.25.1).",
+                "league/flysystem-ftp": "Required to use the Flysystem FTP driver (^3.25.1).",
+                "league/flysystem-path-prefixing": "Required to use the scoped driver (^3.25.1).",
+                "league/flysystem-read-only": "Required to use read-only disks (^3.25.1)",
+                "league/flysystem-sftp-v3": "Required to use the Flysystem SFTP driver (^3.25.1).",
+                "mockery/mockery": "Required to use mocking (^1.6).",
+                "pda/pheanstalk": "Required to use the beanstalk queue driver (^5.0).",
+                "php-http/discovery": "Required to use PSR-7 bridging features (^1.15).",
+                "phpunit/phpunit": "Required to use assertions and run tests (^10.5.35|^11.5.3|^12.0.1).",
+                "predis/predis": "Required to use the predis connector (^2.3|^3.0).",
+                "psr/http-message": "Required to allow Storage::put to accept a StreamInterface (^1.0).",
+                "pusher/pusher-php-server": "Required to use the Pusher broadcast driver (^6.0|^7.0).",
+                "resend/resend-php": "Required to enable support for the Resend mail transport (^0.10.0).",
+                "symfony/cache": "Required to PSR-6 cache bridge (^7.2).",
+                "symfony/filesystem": "Required to enable support for relative symbolic links (^7.2).",
+                "symfony/http-client": "Required to enable support for the Symfony API mail transports (^7.2).",
+                "symfony/mailgun-mailer": "Required to enable support for the Mailgun mail transport (^7.2).",
+                "symfony/postmark-mailer": "Required to enable support for the Postmark mail transport (^7.2).",
+                "symfony/psr-http-message-bridge": "Required to use PSR-7 bridging features (^7.2)."
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "12.x-dev"
+                }
+            },
+            "autoload": {
+                "files": [
+                    "src/Illuminate/Collections/functions.php",
+                    "src/Illuminate/Collections/helpers.php",
+                    "src/Illuminate/Events/functions.php",
+                    "src/Illuminate/Filesystem/functions.php",
+                    "src/Illuminate/Foundation/helpers.php",
+                    "src/Illuminate/Log/functions.php",
+                    "src/Illuminate/Support/functions.php",
+                    "src/Illuminate/Support/helpers.php"
+                ],
+                "psr-4": {
+                    "Illuminate\\": "src/Illuminate/",
+                    "Illuminate\\Support\\": [
+                        "src/Illuminate/Macroable/",
+                        "src/Illuminate/Collections/",
+                        "src/Illuminate/Conditionable/"
+                    ]
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Taylor Otwell",
+                    "email": "taylor@laravel.com"
+                }
+            ],
+            "description": "The Laravel Framework.",
+            "homepage": "https://laravel.com",
+            "keywords": [
+                "framework",
+                "laravel"
+            ],
+            "support": {
+                "issues": "https://github.com/laravel/framework/issues",
+                "source": "https://github.com/laravel/framework"
+            },
+            "time": "2025-07-22T15:41:55+00:00"
+        },
+        {
+            "name": "laravel/prompts",
+            "version": "v0.3.6",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/laravel/prompts.git",
+                "reference": "86a8b692e8661d0fb308cec64f3d176821323077"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/laravel/prompts/zipball/86a8b692e8661d0fb308cec64f3d176821323077",
+                "reference": "86a8b692e8661d0fb308cec64f3d176821323077",
+                "shasum": ""
+            },
+            "require": {
+                "composer-runtime-api": "^2.2",
+                "ext-mbstring": "*",
+                "php": "^8.1",
+                "symfony/console": "^6.2|^7.0"
+            },
+            "conflict": {
+                "illuminate/console": ">=10.17.0 <10.25.0",
+                "laravel/framework": ">=10.17.0 <10.25.0"
+            },
+            "require-dev": {
+                "illuminate/collections": "^10.0|^11.0|^12.0",
+                "mockery/mockery": "^1.5",
+                "pestphp/pest": "^2.3|^3.4",
+                "phpstan/phpstan": "^1.11",
+                "phpstan/phpstan-mockery": "^1.1"
+            },
+            "suggest": {
+                "ext-pcntl": "Required for the spinner to be animated."
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-main": "0.3.x-dev"
+                }
+            },
+            "autoload": {
+                "files": [
+                    "src/helpers.php"
+                ],
+                "psr-4": {
+                    "Laravel\\Prompts\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "description": "Add beautiful and user-friendly forms to your command-line applications.",
+            "support": {
+                "issues": "https://github.com/laravel/prompts/issues",
+                "source": "https://github.com/laravel/prompts/tree/v0.3.6"
+            },
+            "time": "2025-07-07T14:17:42+00:00"
+        },
+        {
+            "name": "laravel/serializable-closure",
+            "version": "v2.0.4",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/laravel/serializable-closure.git",
+                "reference": "b352cf0534aa1ae6b4d825d1e762e35d43f8a841"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/laravel/serializable-closure/zipball/b352cf0534aa1ae6b4d825d1e762e35d43f8a841",
+                "reference": "b352cf0534aa1ae6b4d825d1e762e35d43f8a841",
+                "shasum": ""
+            },
+            "require": {
+                "php": "^8.1"
+            },
+            "require-dev": {
+                "illuminate/support": "^10.0|^11.0|^12.0",
+                "nesbot/carbon": "^2.67|^3.0",
+                "pestphp/pest": "^2.36|^3.0",
+                "phpstan/phpstan": "^2.0",
+                "symfony/var-dumper": "^6.2.0|^7.0.0"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "2.x-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Laravel\\SerializableClosure\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Taylor Otwell",
+                    "email": "taylor@laravel.com"
+                },
+                {
+                    "name": "Nuno Maduro",
+                    "email": "nuno@laravel.com"
+                }
+            ],
+            "description": "Laravel Serializable Closure provides an easy and secure way to serialize closures in PHP.",
+            "keywords": [
+                "closure",
+                "laravel",
+                "serializable"
+            ],
+            "support": {
+                "issues": "https://github.com/laravel/serializable-closure/issues",
+                "source": "https://github.com/laravel/serializable-closure"
+            },
+            "time": "2025-03-19T13:51:03+00:00"
+        },
+        {
+            "name": "laravel/tinker",
+            "version": "v2.10.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/laravel/tinker.git",
+                "reference": "22177cc71807d38f2810c6204d8f7183d88a57d3"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/laravel/tinker/zipball/22177cc71807d38f2810c6204d8f7183d88a57d3",
+                "reference": "22177cc71807d38f2810c6204d8f7183d88a57d3",
+                "shasum": ""
+            },
+            "require": {
+                "illuminate/console": "^6.0|^7.0|^8.0|^9.0|^10.0|^11.0|^12.0",
+                "illuminate/contracts": "^6.0|^7.0|^8.0|^9.0|^10.0|^11.0|^12.0",
+                "illuminate/support": "^6.0|^7.0|^8.0|^9.0|^10.0|^11.0|^12.0",
+                "php": "^7.2.5|^8.0",
+                "psy/psysh": "^0.11.1|^0.12.0",
+                "symfony/var-dumper": "^4.3.4|^5.0|^6.0|^7.0"
+            },
+            "require-dev": {
+                "mockery/mockery": "~1.3.3|^1.4.2",
+                "phpstan/phpstan": "^1.10",
+                "phpunit/phpunit": "^8.5.8|^9.3.3|^10.0"
+            },
+            "suggest": {
+                "illuminate/database": "The Illuminate Database package (^6.0|^7.0|^8.0|^9.0|^10.0|^11.0|^12.0)."
+            },
+            "type": "library",
+            "extra": {
+                "laravel": {
+                    "providers": [
+                        "Laravel\\Tinker\\TinkerServiceProvider"
+                    ]
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Laravel\\Tinker\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Taylor Otwell",
+                    "email": "taylor@laravel.com"
+                }
+            ],
+            "description": "Powerful REPL for the Laravel framework.",
+            "keywords": [
+                "REPL",
+                "Tinker",
+                "laravel",
+                "psysh"
+            ],
+            "support": {
+                "issues": "https://github.com/laravel/tinker/issues",
+                "source": "https://github.com/laravel/tinker/tree/v2.10.1"
+            },
+            "time": "2025-01-27T14:24:01+00:00"
+        },
+        {
+            "name": "league/commonmark",
+            "version": "2.7.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/thephpleague/commonmark.git",
+                "reference": "10732241927d3971d28e7ea7b5712721fa2296ca"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/thephpleague/commonmark/zipball/10732241927d3971d28e7ea7b5712721fa2296ca",
+                "reference": "10732241927d3971d28e7ea7b5712721fa2296ca",
+                "shasum": ""
+            },
+            "require": {
+                "ext-mbstring": "*",
+                "league/config": "^1.1.1",
+                "php": "^7.4 || ^8.0",
+                "psr/event-dispatcher": "^1.0",
+                "symfony/deprecation-contracts": "^2.1 || ^3.0",
+                "symfony/polyfill-php80": "^1.16"
+            },
+            "require-dev": {
+                "cebe/markdown": "^1.0",
+                "commonmark/cmark": "0.31.1",
+                "commonmark/commonmark.js": "0.31.1",
+                "composer/package-versions-deprecated": "^1.8",
+                "embed/embed": "^4.4",
+                "erusev/parsedown": "^1.0",
+                "ext-json": "*",
+                "github/gfm": "0.29.0",
+                "michelf/php-markdown": "^1.4 || ^2.0",
+                "nyholm/psr7": "^1.5",
+                "phpstan/phpstan": "^1.8.2",
+                "phpunit/phpunit": "^9.5.21 || ^10.5.9 || ^11.0.0",
+                "scrutinizer/ocular": "^1.8.1",
+                "symfony/finder": "^5.3 | ^6.0 | ^7.0",
+                "symfony/process": "^5.4 | ^6.0 | ^7.0",
+                "symfony/yaml": "^2.3 | ^3.0 | ^4.0 | ^5.0 | ^6.0 | ^7.0",
+                "unleashedtech/php-coding-standard": "^3.1.1",
+                "vimeo/psalm": "^4.24.0 || ^5.0.0 || ^6.0.0"
+            },
+            "suggest": {
+                "symfony/yaml": "v2.3+ required if using the Front Matter extension"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-main": "2.8-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "League\\CommonMark\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "BSD-3-Clause"
+            ],
+            "authors": [
+                {
+                    "name": "Colin O'Dell",
+                    "email": "colinodell@gmail.com",
+                    "homepage": "https://www.colinodell.com",
+                    "role": "Lead Developer"
+                }
+            ],
+            "description": "Highly-extensible PHP Markdown parser which fully supports the CommonMark spec and GitHub-Flavored Markdown (GFM)",
+            "homepage": "https://commonmark.thephpleague.com",
+            "keywords": [
+                "commonmark",
+                "flavored",
+                "gfm",
+                "github",
+                "github-flavored",
+                "markdown",
+                "md",
+                "parser"
+            ],
+            "support": {
+                "docs": "https://commonmark.thephpleague.com/",
+                "forum": "https://github.com/thephpleague/commonmark/discussions",
+                "issues": "https://github.com/thephpleague/commonmark/issues",
+                "rss": "https://github.com/thephpleague/commonmark/releases.atom",
+                "source": "https://github.com/thephpleague/commonmark"
+            },
+            "funding": [
+                {
+                    "url": "https://www.colinodell.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://www.paypal.me/colinpodell/10.00",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/colinodell",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/league/commonmark",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2025-07-20T12:47:49+00:00"
+        },
+        {
+            "name": "league/config",
+            "version": "v1.2.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/thephpleague/config.git",
+                "reference": "754b3604fb2984c71f4af4a9cbe7b57f346ec1f3"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/thephpleague/config/zipball/754b3604fb2984c71f4af4a9cbe7b57f346ec1f3",
+                "reference": "754b3604fb2984c71f4af4a9cbe7b57f346ec1f3",
+                "shasum": ""
+            },
+            "require": {
+                "dflydev/dot-access-data": "^3.0.1",
+                "nette/schema": "^1.2",
+                "php": "^7.4 || ^8.0"
+            },
+            "require-dev": {
+                "phpstan/phpstan": "^1.8.2",
+                "phpunit/phpunit": "^9.5.5",
+                "scrutinizer/ocular": "^1.8.1",
+                "unleashedtech/php-coding-standard": "^3.1",
+                "vimeo/psalm": "^4.7.3"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-main": "1.2-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "League\\Config\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "BSD-3-Clause"
+            ],
+            "authors": [
+                {
+                    "name": "Colin O'Dell",
+                    "email": "colinodell@gmail.com",
+                    "homepage": "https://www.colinodell.com",
+                    "role": "Lead Developer"
+                }
+            ],
+            "description": "Define configuration arrays with strict schemas and access values with dot notation",
+            "homepage": "https://config.thephpleague.com",
+            "keywords": [
+                "array",
+                "config",
+                "configuration",
+                "dot",
+                "dot-access",
+                "nested",
+                "schema"
+            ],
+            "support": {
+                "docs": "https://config.thephpleague.com/",
+                "issues": "https://github.com/thephpleague/config/issues",
+                "rss": "https://github.com/thephpleague/config/releases.atom",
+                "source": "https://github.com/thephpleague/config"
+            },
+            "funding": [
+                {
+                    "url": "https://www.colinodell.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://www.paypal.me/colinpodell/10.00",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/colinodell",
+                    "type": "github"
+                }
+            ],
+            "time": "2022-12-11T20:36:23+00:00"
+        },
+        {
+            "name": "league/flysystem",
+            "version": "3.30.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/thephpleague/flysystem.git",
+                "reference": "2203e3151755d874bb2943649dae1eb8533ac93e"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/thephpleague/flysystem/zipball/2203e3151755d874bb2943649dae1eb8533ac93e",
+                "reference": "2203e3151755d874bb2943649dae1eb8533ac93e",
+                "shasum": ""
+            },
+            "require": {
+                "league/flysystem-local": "^3.0.0",
+                "league/mime-type-detection": "^1.0.0",
+                "php": "^8.0.2"
+            },
+            "conflict": {
+                "async-aws/core": "<1.19.0",
+                "async-aws/s3": "<1.14.0",
+                "aws/aws-sdk-php": "3.209.31 || 3.210.0",
+                "guzzlehttp/guzzle": "<7.0",
+                "guzzlehttp/ringphp": "<1.1.1",
+                "phpseclib/phpseclib": "3.0.15",
+                "symfony/http-client": "<5.2"
+            },
+            "require-dev": {
+                "async-aws/s3": "^1.5 || ^2.0",
+                "async-aws/simple-s3": "^1.1 || ^2.0",
+                "aws/aws-sdk-php": "^3.295.10",
+                "composer/semver": "^3.0",
+                "ext-fileinfo": "*",
+                "ext-ftp": "*",
+                "ext-mongodb": "^1.3|^2",
+                "ext-zip": "*",
+                "friendsofphp/php-cs-fixer": "^3.5",
+                "google/cloud-storage": "^1.23",
+                "guzzlehttp/psr7": "^2.6",
+                "microsoft/azure-storage-blob": "^1.1",
+                "mongodb/mongodb": "^1.2|^2",
+                "phpseclib/phpseclib": "^3.0.36",
+                "phpstan/phpstan": "^1.10",
+                "phpunit/phpunit": "^9.5.11|^10.0",
+                "sabre/dav": "^4.6.0"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "League\\Flysystem\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Frank de Jonge",
+                    "email": "info@frankdejonge.nl"
+                }
+            ],
+            "description": "File storage abstraction for PHP",
+            "keywords": [
+                "WebDAV",
+                "aws",
+                "cloud",
+                "file",
+                "files",
+                "filesystem",
+                "filesystems",
+                "ftp",
+                "s3",
+                "sftp",
+                "storage"
+            ],
+            "support": {
+                "issues": "https://github.com/thephpleague/flysystem/issues",
+                "source": "https://github.com/thephpleague/flysystem/tree/3.30.0"
+            },
+            "time": "2025-06-25T13:29:59+00:00"
+        },
+        {
+            "name": "league/flysystem-local",
+            "version": "3.30.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/thephpleague/flysystem-local.git",
+                "reference": "6691915f77c7fb69adfb87dcd550052dc184ee10"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/thephpleague/flysystem-local/zipball/6691915f77c7fb69adfb87dcd550052dc184ee10",
+                "reference": "6691915f77c7fb69adfb87dcd550052dc184ee10",
+                "shasum": ""
+            },
+            "require": {
+                "ext-fileinfo": "*",
+                "league/flysystem": "^3.0.0",
+                "league/mime-type-detection": "^1.0.0",
+                "php": "^8.0.2"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "League\\Flysystem\\Local\\": ""
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Frank de Jonge",
+                    "email": "info@frankdejonge.nl"
+                }
+            ],
+            "description": "Local filesystem adapter for Flysystem.",
+            "keywords": [
+                "Flysystem",
+                "file",
+                "files",
+                "filesystem",
+                "local"
+            ],
+            "support": {
+                "source": "https://github.com/thephpleague/flysystem-local/tree/3.30.0"
+            },
+            "time": "2025-05-21T10:34:19+00:00"
+        },
+        {
+            "name": "league/mime-type-detection",
+            "version": "1.16.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/thephpleague/mime-type-detection.git",
+                "reference": "2d6702ff215bf922936ccc1ad31007edc76451b9"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/thephpleague/mime-type-detection/zipball/2d6702ff215bf922936ccc1ad31007edc76451b9",
+                "reference": "2d6702ff215bf922936ccc1ad31007edc76451b9",
+                "shasum": ""
+            },
+            "require": {
+                "ext-fileinfo": "*",
+                "php": "^7.4 || ^8.0"
+            },
+            "require-dev": {
+                "friendsofphp/php-cs-fixer": "^3.2",
+                "phpstan/phpstan": "^0.12.68",
+                "phpunit/phpunit": "^8.5.8 || ^9.3 || ^10.0"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "League\\MimeTypeDetection\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Frank de Jonge",
+                    "email": "info@frankdejonge.nl"
+                }
+            ],
+            "description": "Mime-type detection for Flysystem",
+            "support": {
+                "issues": "https://github.com/thephpleague/mime-type-detection/issues",
+                "source": "https://github.com/thephpleague/mime-type-detection/tree/1.16.0"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/frankdejonge",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/league/flysystem",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2024-09-21T08:32:55+00:00"
+        },
+        {
+            "name": "league/uri",
+            "version": "7.5.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/thephpleague/uri.git",
+                "reference": "81fb5145d2644324614cc532b28efd0215bda430"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/thephpleague/uri/zipball/81fb5145d2644324614cc532b28efd0215bda430",
+                "reference": "81fb5145d2644324614cc532b28efd0215bda430",
+                "shasum": ""
+            },
+            "require": {
+                "league/uri-interfaces": "^7.5",
+                "php": "^8.1"
+            },
+            "conflict": {
+                "league/uri-schemes": "^1.0"
+            },
+            "suggest": {
+                "ext-bcmath": "to improve IPV4 host parsing",
+                "ext-fileinfo": "to create Data URI from file contennts",
+                "ext-gmp": "to improve IPV4 host parsing",
+                "ext-intl": "to handle IDN host with the best performance",
+                "jeremykendall/php-domain-parser": "to resolve Public Suffix and Top Level Domain",
+                "league/uri-components": "Needed to easily manipulate URI objects components",
+                "php-64bit": "to improve IPV4 host parsing",
+                "symfony/polyfill-intl-idn": "to handle IDN host via the Symfony polyfill if ext-intl is not present"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "7.x-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "League\\Uri\\": ""
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Ignace Nyamagana Butera",
+                    "email": "nyamsprod@gmail.com",
+                    "homepage": "https://nyamsprod.com"
+                }
+            ],
+            "description": "URI manipulation library",
+            "homepage": "https://uri.thephpleague.com",
+            "keywords": [
+                "data-uri",
+                "file-uri",
+                "ftp",
+                "hostname",
+                "http",
+                "https",
+                "middleware",
+                "parse_str",
+                "parse_url",
+                "psr-7",
+                "query-string",
+                "querystring",
+                "rfc3986",
+                "rfc3987",
+                "rfc6570",
+                "uri",
+                "uri-template",
+                "url",
+                "ws"
+            ],
+            "support": {
+                "docs": "https://uri.thephpleague.com",
+                "forum": "https://thephpleague.slack.com",
+                "issues": "https://github.com/thephpleague/uri-src/issues",
+                "source": "https://github.com/thephpleague/uri/tree/7.5.1"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/sponsors/nyamsprod",
+                    "type": "github"
+                }
+            ],
+            "time": "2024-12-08T08:40:02+00:00"
+        },
+        {
+            "name": "league/uri-interfaces",
+            "version": "7.5.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/thephpleague/uri-interfaces.git",
+                "reference": "08cfc6c4f3d811584fb09c37e2849e6a7f9b0742"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/thephpleague/uri-interfaces/zipball/08cfc6c4f3d811584fb09c37e2849e6a7f9b0742",
+                "reference": "08cfc6c4f3d811584fb09c37e2849e6a7f9b0742",
+                "shasum": ""
+            },
+            "require": {
+                "ext-filter": "*",
+                "php": "^8.1",
+                "psr/http-factory": "^1",
+                "psr/http-message": "^1.1 || ^2.0"
+            },
+            "suggest": {
+                "ext-bcmath": "to improve IPV4 host parsing",
+                "ext-gmp": "to improve IPV4 host parsing",
+                "ext-intl": "to handle IDN host with the best performance",
+                "php-64bit": "to improve IPV4 host parsing",
+                "symfony/polyfill-intl-idn": "to handle IDN host via the Symfony polyfill if ext-intl is not present"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "7.x-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "League\\Uri\\": ""
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Ignace Nyamagana Butera",
+                    "email": "nyamsprod@gmail.com",
+                    "homepage": "https://nyamsprod.com"
+                }
+            ],
+            "description": "Common interfaces and classes for URI representation and interaction",
+            "homepage": "https://uri.thephpleague.com",
+            "keywords": [
+                "data-uri",
+                "file-uri",
+                "ftp",
+                "hostname",
+                "http",
+                "https",
+                "parse_str",
+                "parse_url",
+                "psr-7",
+                "query-string",
+                "querystring",
+                "rfc3986",
+                "rfc3987",
+                "rfc6570",
+                "uri",
+                "url",
+                "ws"
+            ],
+            "support": {
+                "docs": "https://uri.thephpleague.com",
+                "forum": "https://thephpleague.slack.com",
+                "issues": "https://github.com/thephpleague/uri-src/issues",
+                "source": "https://github.com/thephpleague/uri-interfaces/tree/7.5.0"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/sponsors/nyamsprod",
+                    "type": "github"
+                }
+            ],
+            "time": "2024-12-08T08:18:47+00:00"
+        },
+        {
+            "name": "monolog/monolog",
+            "version": "3.9.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/Seldaek/monolog.git",
+                "reference": "10d85740180ecba7896c87e06a166e0c95a0e3b6"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/Seldaek/monolog/zipball/10d85740180ecba7896c87e06a166e0c95a0e3b6",
+                "reference": "10d85740180ecba7896c87e06a166e0c95a0e3b6",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.1",
+                "psr/log": "^2.0 || ^3.0"
+            },
+            "provide": {
+                "psr/log-implementation": "3.0.0"
+            },
+            "require-dev": {
+                "aws/aws-sdk-php": "^3.0",
+                "doctrine/couchdb": "~1.0@dev",
+                "elasticsearch/elasticsearch": "^7 || ^8",
+                "ext-json": "*",
+                "graylog2/gelf-php": "^1.4.2 || ^2.0",
+                "guzzlehttp/guzzle": "^7.4.5",
+                "guzzlehttp/psr7": "^2.2",
+                "mongodb/mongodb": "^1.8",
+                "php-amqplib/php-amqplib": "~2.4 || ^3",
+                "php-console/php-console": "^3.1.8",
+                "phpstan/phpstan": "^2",
+                "phpstan/phpstan-deprecation-rules": "^2",
+                "phpstan/phpstan-strict-rules": "^2",
+                "phpunit/phpunit": "^10.5.17 || ^11.0.7",
+                "predis/predis": "^1.1 || ^2",
+                "rollbar/rollbar": "^4.0",
+                "ruflin/elastica": "^7 || ^8",
+                "symfony/mailer": "^5.4 || ^6",
+                "symfony/mime": "^5.4 || ^6"
+            },
+            "suggest": {
+                "aws/aws-sdk-php": "Allow sending log messages to AWS services like DynamoDB",
+                "doctrine/couchdb": "Allow sending log messages to a CouchDB server",
+                "elasticsearch/elasticsearch": "Allow sending log messages to an Elasticsearch server via official client",
+                "ext-amqp": "Allow sending log messages to an AMQP server (1.0+ required)",
+                "ext-curl": "Required to send log messages using the IFTTTHandler, the LogglyHandler, the SendGridHandler, the SlackWebhookHandler or the TelegramBotHandler",
+                "ext-mbstring": "Allow to work properly with unicode symbols",
+                "ext-mongodb": "Allow sending log messages to a MongoDB server (via driver)",
+                "ext-openssl": "Required to send log messages using SSL",
+                "ext-sockets": "Allow sending log messages to a Syslog server (via UDP driver)",
+                "graylog2/gelf-php": "Allow sending log messages to a GrayLog2 server",
+                "mongodb/mongodb": "Allow sending log messages to a MongoDB server (via library)",
+                "php-amqplib/php-amqplib": "Allow sending log messages to an AMQP server using php-amqplib",
+                "rollbar/rollbar": "Allow sending log messages to Rollbar",
+                "ruflin/elastica": "Allow sending log messages to an Elastic Search server"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-main": "3.x-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Monolog\\": "src/Monolog"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Jordi Boggiano",
+                    "email": "j.boggiano@seld.be",
+                    "homepage": "https://seld.be"
+                }
+            ],
+            "description": "Sends your logs to files, sockets, inboxes, databases and various web services",
+            "homepage": "https://github.com/Seldaek/monolog",
+            "keywords": [
+                "log",
+                "logging",
+                "psr-3"
+            ],
+            "support": {
+                "issues": "https://github.com/Seldaek/monolog/issues",
+                "source": "https://github.com/Seldaek/monolog/tree/3.9.0"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/Seldaek",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/monolog/monolog",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2025-03-24T10:02:05+00:00"
+        },
+        {
+            "name": "nesbot/carbon",
+            "version": "3.10.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/CarbonPHP/carbon.git",
+                "reference": "1fd1935b2d90aef2f093c5e35f7ae1257c448d00"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/CarbonPHP/carbon/zipball/1fd1935b2d90aef2f093c5e35f7ae1257c448d00",
+                "reference": "1fd1935b2d90aef2f093c5e35f7ae1257c448d00",
+                "shasum": ""
+            },
+            "require": {
+                "carbonphp/carbon-doctrine-types": "<100.0",
+                "ext-json": "*",
+                "php": "^8.1",
+                "psr/clock": "^1.0",
+                "symfony/clock": "^6.3.12 || ^7.0",
+                "symfony/polyfill-mbstring": "^1.0",
+                "symfony/translation": "^4.4.18 || ^5.2.1 || ^6.0 || ^7.0"
+            },
+            "provide": {
+                "psr/clock-implementation": "1.0"
+            },
+            "require-dev": {
+                "doctrine/dbal": "^3.6.3 || ^4.0",
+                "doctrine/orm": "^2.15.2 || ^3.0",
+                "friendsofphp/php-cs-fixer": "^3.75.0",
+                "kylekatarnls/multi-tester": "^2.5.3",
+                "phpmd/phpmd": "^2.15.0",
+                "phpstan/extension-installer": "^1.4.3",
+                "phpstan/phpstan": "^2.1.17",
+                "phpunit/phpunit": "^10.5.46",
+                "squizlabs/php_codesniffer": "^3.13.0"
+            },
+            "bin": [
+                "bin/carbon"
+            ],
+            "type": "library",
+            "extra": {
+                "laravel": {
+                    "providers": [
+                        "Carbon\\Laravel\\ServiceProvider"
+                    ]
+                },
+                "phpstan": {
+                    "includes": [
+                        "extension.neon"
+                    ]
+                },
+                "branch-alias": {
+                    "dev-2.x": "2.x-dev",
+                    "dev-master": "3.x-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Carbon\\": "src/Carbon/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Brian Nesbitt",
+                    "email": "brian@nesbot.com",
+                    "homepage": "https://markido.com"
+                },
+                {
+                    "name": "kylekatarnls",
+                    "homepage": "https://github.com/kylekatarnls"
+                }
+            ],
+            "description": "An API extension for DateTime that supports 281 different languages.",
+            "homepage": "https://carbon.nesbot.com",
+            "keywords": [
+                "date",
+                "datetime",
+                "time"
+            ],
+            "support": {
+                "docs": "https://carbon.nesbot.com/docs",
+                "issues": "https://github.com/CarbonPHP/carbon/issues",
+                "source": "https://github.com/CarbonPHP/carbon"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/sponsors/kylekatarnls",
+                    "type": "github"
+                },
+                {
+                    "url": "https://opencollective.com/Carbon#sponsor",
+                    "type": "opencollective"
+                },
+                {
+                    "url": "https://tidelift.com/subscription/pkg/packagist-nesbot-carbon?utm_source=packagist-nesbot-carbon&utm_medium=referral&utm_campaign=readme",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2025-06-21T15:19:35+00:00"
+        },
+        {
+            "name": "nette/schema",
+            "version": "v1.3.2",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/nette/schema.git",
+                "reference": "da801d52f0354f70a638673c4a0f04e16529431d"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/nette/schema/zipball/da801d52f0354f70a638673c4a0f04e16529431d",
+                "reference": "da801d52f0354f70a638673c4a0f04e16529431d",
+                "shasum": ""
+            },
+            "require": {
+                "nette/utils": "^4.0",
+                "php": "8.1 - 8.4"
+            },
+            "require-dev": {
+                "nette/tester": "^2.5.2",
+                "phpstan/phpstan-nette": "^1.0",
+                "tracy/tracy": "^2.8"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "1.3-dev"
+                }
+            },
+            "autoload": {
+                "classmap": [
+                    "src/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "BSD-3-Clause",
+                "GPL-2.0-only",
+                "GPL-3.0-only"
+            ],
+            "authors": [
+                {
+                    "name": "David Grudl",
+                    "homepage": "https://davidgrudl.com"
+                },
+                {
+                    "name": "Nette Community",
+                    "homepage": "https://nette.org/contributors"
+                }
+            ],
+            "description": "📐 Nette Schema: validating data structures against a given Schema.",
+            "homepage": "https://nette.org",
+            "keywords": [
+                "config",
+                "nette"
+            ],
+            "support": {
+                "issues": "https://github.com/nette/schema/issues",
+                "source": "https://github.com/nette/schema/tree/v1.3.2"
+            },
+            "time": "2024-10-06T23:10:23+00:00"
+        },
+        {
+            "name": "nette/utils",
+            "version": "v4.0.7",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/nette/utils.git",
+                "reference": "e67c4061eb40b9c113b218214e42cb5a0dda28f2"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/nette/utils/zipball/e67c4061eb40b9c113b218214e42cb5a0dda28f2",
+                "reference": "e67c4061eb40b9c113b218214e42cb5a0dda28f2",
+                "shasum": ""
+            },
+            "require": {
+                "php": "8.0 - 8.4"
+            },
+            "conflict": {
+                "nette/finder": "<3",
+                "nette/schema": "<1.2.2"
+            },
+            "require-dev": {
+                "jetbrains/phpstorm-attributes": "dev-master",
+                "nette/tester": "^2.5",
+                "phpstan/phpstan": "^1.0",
+                "tracy/tracy": "^2.9"
+            },
+            "suggest": {
+                "ext-gd": "to use Image",
+                "ext-iconv": "to use Strings::webalize(), toAscii(), chr() and reverse()",
+                "ext-intl": "to use Strings::webalize(), toAscii(), normalize() and compare()",
+                "ext-json": "to use Nette\\Utils\\Json",
+                "ext-mbstring": "to use Strings::lower() etc...",
+                "ext-tokenizer": "to use Nette\\Utils\\Reflection::getUseStatements()"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "4.0-dev"
+                }
+            },
+            "autoload": {
+                "classmap": [
+                    "src/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "BSD-3-Clause",
+                "GPL-2.0-only",
+                "GPL-3.0-only"
+            ],
+            "authors": [
+                {
+                    "name": "David Grudl",
+                    "homepage": "https://davidgrudl.com"
+                },
+                {
+                    "name": "Nette Community",
+                    "homepage": "https://nette.org/contributors"
+                }
+            ],
+            "description": "🛠  Nette Utils: lightweight utilities for string & array manipulation, image handling, safe JSON encoding/decoding, validation, slug or strong password generating etc.",
+            "homepage": "https://nette.org",
+            "keywords": [
+                "array",
+                "core",
+                "datetime",
+                "images",
+                "json",
+                "nette",
+                "paginator",
+                "password",
+                "slugify",
+                "string",
+                "unicode",
+                "utf-8",
+                "utility",
+                "validation"
+            ],
+            "support": {
+                "issues": "https://github.com/nette/utils/issues",
+                "source": "https://github.com/nette/utils/tree/v4.0.7"
+            },
+            "time": "2025-06-03T04:55:08+00:00"
+        },
+        {
+            "name": "nikic/php-parser",
+            "version": "v5.6.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/nikic/PHP-Parser.git",
+                "reference": "221b0d0fdf1369c71047ad1d18bb5880017bbc56"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/nikic/PHP-Parser/zipball/221b0d0fdf1369c71047ad1d18bb5880017bbc56",
+                "reference": "221b0d0fdf1369c71047ad1d18bb5880017bbc56",
+                "shasum": ""
+            },
+            "require": {
+                "ext-ctype": "*",
+                "ext-json": "*",
+                "ext-tokenizer": "*",
+                "php": ">=7.4"
+            },
+            "require-dev": {
+                "ircmaxell/php-yacc": "^0.0.7",
+                "phpunit/phpunit": "^9.0"
+            },
+            "bin": [
+                "bin/php-parse"
+            ],
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "5.0-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "PhpParser\\": "lib/PhpParser"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "BSD-3-Clause"
+            ],
+            "authors": [
+                {
+                    "name": "Nikita Popov"
+                }
+            ],
+            "description": "A PHP parser written in PHP",
+            "keywords": [
+                "parser",
+                "php"
+            ],
+            "support": {
+                "issues": "https://github.com/nikic/PHP-Parser/issues",
+                "source": "https://github.com/nikic/PHP-Parser/tree/v5.6.0"
+            },
+            "time": "2025-07-27T20:03:57+00:00"
+        },
+        {
+            "name": "nunomaduro/termwind",
+            "version": "v2.3.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/nunomaduro/termwind.git",
+                "reference": "dfa08f390e509967a15c22493dc0bac5733d9123"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/nunomaduro/termwind/zipball/dfa08f390e509967a15c22493dc0bac5733d9123",
+                "reference": "dfa08f390e509967a15c22493dc0bac5733d9123",
+                "shasum": ""
+            },
+            "require": {
+                "ext-mbstring": "*",
+                "php": "^8.2",
+                "symfony/console": "^7.2.6"
+            },
+            "require-dev": {
+                "illuminate/console": "^11.44.7",
+                "laravel/pint": "^1.22.0",
+                "mockery/mockery": "^1.6.12",
+                "pestphp/pest": "^2.36.0 || ^3.8.2",
+                "phpstan/phpstan": "^1.12.25",
+                "phpstan/phpstan-strict-rules": "^1.6.2",
+                "symfony/var-dumper": "^7.2.6",
+                "thecodingmachine/phpstan-strict-rules": "^1.0.0"
+            },
+            "type": "library",
+            "extra": {
+                "laravel": {
+                    "providers": [
+                        "Termwind\\Laravel\\TermwindServiceProvider"
+                    ]
+                },
+                "branch-alias": {
+                    "dev-2.x": "2.x-dev"
+                }
+            },
+            "autoload": {
+                "files": [
+                    "src/Functions.php"
+                ],
+                "psr-4": {
+                    "Termwind\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Nuno Maduro",
+                    "email": "enunomaduro@gmail.com"
+                }
+            ],
+            "description": "Its like Tailwind CSS, but for the console.",
+            "keywords": [
+                "cli",
+                "console",
+                "css",
+                "package",
+                "php",
+                "style"
+            ],
+            "support": {
+                "issues": "https://github.com/nunomaduro/termwind/issues",
+                "source": "https://github.com/nunomaduro/termwind/tree/v2.3.1"
+            },
+            "funding": [
+                {
+                    "url": "https://www.paypal.com/paypalme/enunomaduro",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/nunomaduro",
+                    "type": "github"
+                },
+                {
+                    "url": "https://github.com/xiCO2k",
+                    "type": "github"
+                }
+            ],
+            "time": "2025-05-08T08:14:37+00:00"
+        },
+        {
+            "name": "phpoption/phpoption",
+            "version": "1.9.3",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/schmittjoh/php-option.git",
+                "reference": "e3fac8b24f56113f7cb96af14958c0dd16330f54"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/schmittjoh/php-option/zipball/e3fac8b24f56113f7cb96af14958c0dd16330f54",
+                "reference": "e3fac8b24f56113f7cb96af14958c0dd16330f54",
+                "shasum": ""
+            },
+            "require": {
+                "php": "^7.2.5 || ^8.0"
+            },
+            "require-dev": {
+                "bamarni/composer-bin-plugin": "^1.8.2",
+                "phpunit/phpunit": "^8.5.39 || ^9.6.20 || ^10.5.28"
+            },
+            "type": "library",
+            "extra": {
+                "bamarni-bin": {
+                    "bin-links": true,
+                    "forward-command": false
+                },
+                "branch-alias": {
+                    "dev-master": "1.9-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "PhpOption\\": "src/PhpOption/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "Apache-2.0"
+            ],
+            "authors": [
+                {
+                    "name": "Johannes M. Schmitt",
+                    "email": "schmittjoh@gmail.com",
+                    "homepage": "https://github.com/schmittjoh"
+                },
+                {
+                    "name": "Graham Campbell",
+                    "email": "hello@gjcampbell.co.uk",
+                    "homepage": "https://github.com/GrahamCampbell"
+                }
+            ],
+            "description": "Option Type for PHP",
+            "keywords": [
+                "language",
+                "option",
+                "php",
+                "type"
+            ],
+            "support": {
+                "issues": "https://github.com/schmittjoh/php-option/issues",
+                "source": "https://github.com/schmittjoh/php-option/tree/1.9.3"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/GrahamCampbell",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/phpoption/phpoption",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2024-07-20T21:41:07+00:00"
+        },
+        {
+            "name": "psr/clock",
+            "version": "1.0.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/php-fig/clock.git",
+                "reference": "e41a24703d4560fd0acb709162f73b8adfc3aa0d"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/php-fig/clock/zipball/e41a24703d4560fd0acb709162f73b8adfc3aa0d",
+                "reference": "e41a24703d4560fd0acb709162f73b8adfc3aa0d",
+                "shasum": ""
+            },
+            "require": {
+                "php": "^7.0 || ^8.0"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Psr\\Clock\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "PHP-FIG",
+                    "homepage": "https://www.php-fig.org/"
+                }
+            ],
+            "description": "Common interface for reading the clock.",
+            "homepage": "https://github.com/php-fig/clock",
+            "keywords": [
+                "clock",
+                "now",
+                "psr",
+                "psr-20",
+                "time"
+            ],
+            "support": {
+                "issues": "https://github.com/php-fig/clock/issues",
+                "source": "https://github.com/php-fig/clock/tree/1.0.0"
+            },
+            "time": "2022-11-25T14:36:26+00:00"
+        },
+        {
+            "name": "psr/container",
+            "version": "2.0.2",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/php-fig/container.git",
+                "reference": "c71ecc56dfe541dbd90c5360474fbc405f8d5963"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/php-fig/container/zipball/c71ecc56dfe541dbd90c5360474fbc405f8d5963",
+                "reference": "c71ecc56dfe541dbd90c5360474fbc405f8d5963",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=7.4.0"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "2.0.x-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Psr\\Container\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "PHP-FIG",
+                    "homepage": "https://www.php-fig.org/"
+                }
+            ],
+            "description": "Common Container Interface (PHP FIG PSR-11)",
+            "homepage": "https://github.com/php-fig/container",
+            "keywords": [
+                "PSR-11",
+                "container",
+                "container-interface",
+                "container-interop",
+                "psr"
+            ],
+            "support": {
+                "issues": "https://github.com/php-fig/container/issues",
+                "source": "https://github.com/php-fig/container/tree/2.0.2"
+            },
+            "time": "2021-11-05T16:47:00+00:00"
+        },
+        {
+            "name": "psr/event-dispatcher",
+            "version": "1.0.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/php-fig/event-dispatcher.git",
+                "reference": "dbefd12671e8a14ec7f180cab83036ed26714bb0"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/php-fig/event-dispatcher/zipball/dbefd12671e8a14ec7f180cab83036ed26714bb0",
+                "reference": "dbefd12671e8a14ec7f180cab83036ed26714bb0",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=7.2.0"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "1.0.x-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Psr\\EventDispatcher\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "PHP-FIG",
+                    "homepage": "http://www.php-fig.org/"
+                }
+            ],
+            "description": "Standard interfaces for event handling.",
+            "keywords": [
+                "events",
+                "psr",
+                "psr-14"
+            ],
+            "support": {
+                "issues": "https://github.com/php-fig/event-dispatcher/issues",
+                "source": "https://github.com/php-fig/event-dispatcher/tree/1.0.0"
+            },
+            "time": "2019-01-08T18:20:26+00:00"
+        },
+        {
+            "name": "psr/http-client",
+            "version": "1.0.3",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/php-fig/http-client.git",
+                "reference": "bb5906edc1c324c9a05aa0873d40117941e5fa90"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/php-fig/http-client/zipball/bb5906edc1c324c9a05aa0873d40117941e5fa90",
+                "reference": "bb5906edc1c324c9a05aa0873d40117941e5fa90",
+                "shasum": ""
+            },
+            "require": {
+                "php": "^7.0 || ^8.0",
+                "psr/http-message": "^1.0 || ^2.0"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "1.0.x-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Psr\\Http\\Client\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "PHP-FIG",
+                    "homepage": "https://www.php-fig.org/"
+                }
+            ],
+            "description": "Common interface for HTTP clients",
+            "homepage": "https://github.com/php-fig/http-client",
+            "keywords": [
+                "http",
+                "http-client",
+                "psr",
+                "psr-18"
+            ],
+            "support": {
+                "source": "https://github.com/php-fig/http-client"
+            },
+            "time": "2023-09-23T14:17:50+00:00"
+        },
+        {
+            "name": "psr/http-factory",
+            "version": "1.1.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/php-fig/http-factory.git",
+                "reference": "2b4765fddfe3b508ac62f829e852b1501d3f6e8a"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/php-fig/http-factory/zipball/2b4765fddfe3b508ac62f829e852b1501d3f6e8a",
+                "reference": "2b4765fddfe3b508ac62f829e852b1501d3f6e8a",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=7.1",
+                "psr/http-message": "^1.0 || ^2.0"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "1.0.x-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Psr\\Http\\Message\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "PHP-FIG",
+                    "homepage": "https://www.php-fig.org/"
+                }
+            ],
+            "description": "PSR-17: Common interfaces for PSR-7 HTTP message factories",
+            "keywords": [
+                "factory",
+                "http",
+                "message",
+                "psr",
+                "psr-17",
+                "psr-7",
+                "request",
+                "response"
+            ],
+            "support": {
+                "source": "https://github.com/php-fig/http-factory"
+            },
+            "time": "2024-04-15T12:06:14+00:00"
+        },
+        {
+            "name": "psr/http-message",
+            "version": "2.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/php-fig/http-message.git",
+                "reference": "402d35bcb92c70c026d1a6a9883f06b2ead23d71"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/php-fig/http-message/zipball/402d35bcb92c70c026d1a6a9883f06b2ead23d71",
+                "reference": "402d35bcb92c70c026d1a6a9883f06b2ead23d71",
+                "shasum": ""
+            },
+            "require": {
+                "php": "^7.2 || ^8.0"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "2.0.x-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Psr\\Http\\Message\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "PHP-FIG",
+                    "homepage": "https://www.php-fig.org/"
+                }
+            ],
+            "description": "Common interface for HTTP messages",
+            "homepage": "https://github.com/php-fig/http-message",
+            "keywords": [
+                "http",
+                "http-message",
+                "psr",
+                "psr-7",
+                "request",
+                "response"
+            ],
+            "support": {
+                "source": "https://github.com/php-fig/http-message/tree/2.0"
+            },
+            "time": "2023-04-04T09:54:51+00:00"
+        },
+        {
+            "name": "psr/log",
+            "version": "3.0.2",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/php-fig/log.git",
+                "reference": "f16e1d5863e37f8d8c2a01719f5b34baa2b714d3"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/php-fig/log/zipball/f16e1d5863e37f8d8c2a01719f5b34baa2b714d3",
+                "reference": "f16e1d5863e37f8d8c2a01719f5b34baa2b714d3",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.0.0"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "3.x-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Psr\\Log\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "PHP-FIG",
+                    "homepage": "https://www.php-fig.org/"
+                }
+            ],
+            "description": "Common interface for logging libraries",
+            "homepage": "https://github.com/php-fig/log",
+            "keywords": [
+                "log",
+                "psr",
+                "psr-3"
+            ],
+            "support": {
+                "source": "https://github.com/php-fig/log/tree/3.0.2"
+            },
+            "time": "2024-09-11T13:17:53+00:00"
+        },
+        {
+            "name": "psr/simple-cache",
+            "version": "3.0.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/php-fig/simple-cache.git",
+                "reference": "764e0b3939f5ca87cb904f570ef9be2d78a07865"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/php-fig/simple-cache/zipball/764e0b3939f5ca87cb904f570ef9be2d78a07865",
+                "reference": "764e0b3939f5ca87cb904f570ef9be2d78a07865",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.0.0"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "3.0.x-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Psr\\SimpleCache\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "PHP-FIG",
+                    "homepage": "https://www.php-fig.org/"
+                }
+            ],
+            "description": "Common interfaces for simple caching",
+            "keywords": [
+                "cache",
+                "caching",
+                "psr",
+                "psr-16",
+                "simple-cache"
+            ],
+            "support": {
+                "source": "https://github.com/php-fig/simple-cache/tree/3.0.0"
+            },
+            "time": "2021-10-29T13:26:27+00:00"
+        },
+        {
+            "name": "psy/psysh",
+            "version": "v0.12.9",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/bobthecow/psysh.git",
+                "reference": "1b801844becfe648985372cb4b12ad6840245ace"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/bobthecow/psysh/zipball/1b801844becfe648985372cb4b12ad6840245ace",
+                "reference": "1b801844becfe648985372cb4b12ad6840245ace",
+                "shasum": ""
+            },
+            "require": {
+                "ext-json": "*",
+                "ext-tokenizer": "*",
+                "nikic/php-parser": "^5.0 || ^4.0",
+                "php": "^8.0 || ^7.4",
+                "symfony/console": "^7.0 || ^6.0 || ^5.0 || ^4.0 || ^3.4",
+                "symfony/var-dumper": "^7.0 || ^6.0 || ^5.0 || ^4.0 || ^3.4"
+            },
+            "conflict": {
+                "symfony/console": "4.4.37 || 5.3.14 || 5.3.15 || 5.4.3 || 5.4.4 || 6.0.3 || 6.0.4"
+            },
+            "require-dev": {
+                "bamarni/composer-bin-plugin": "^1.2"
+            },
+            "suggest": {
+                "ext-pcntl": "Enabling the PCNTL extension makes PsySH a lot happier :)",
+                "ext-pdo-sqlite": "The doc command requires SQLite to work.",
+                "ext-posix": "If you have PCNTL, you'll want the POSIX extension as well."
+            },
+            "bin": [
+                "bin/psysh"
+            ],
+            "type": "library",
+            "extra": {
+                "bamarni-bin": {
+                    "bin-links": false,
+                    "forward-command": false
+                },
+                "branch-alias": {
+                    "dev-main": "0.12.x-dev"
+                }
+            },
+            "autoload": {
+                "files": [
+                    "src/functions.php"
+                ],
+                "psr-4": {
+                    "Psy\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Justin Hileman",
+                    "email": "justin@justinhileman.info",
+                    "homepage": "http://justinhileman.com"
+                }
+            ],
+            "description": "An interactive shell for modern PHP.",
+            "homepage": "http://psysh.org",
+            "keywords": [
+                "REPL",
+                "console",
+                "interactive",
+                "shell"
+            ],
+            "support": {
+                "issues": "https://github.com/bobthecow/psysh/issues",
+                "source": "https://github.com/bobthecow/psysh/tree/v0.12.9"
+            },
+            "time": "2025-06-23T02:35:06+00:00"
+        },
+        {
+            "name": "ralouphie/getallheaders",
+            "version": "3.0.3",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/ralouphie/getallheaders.git",
+                "reference": "120b605dfeb996808c31b6477290a714d356e822"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/ralouphie/getallheaders/zipball/120b605dfeb996808c31b6477290a714d356e822",
+                "reference": "120b605dfeb996808c31b6477290a714d356e822",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=5.6"
+            },
+            "require-dev": {
+                "php-coveralls/php-coveralls": "^2.1",
+                "phpunit/phpunit": "^5 || ^6.5"
+            },
+            "type": "library",
+            "autoload": {
+                "files": [
+                    "src/getallheaders.php"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Ralph Khattar",
+                    "email": "ralph.khattar@gmail.com"
+                }
+            ],
+            "description": "A polyfill for getallheaders.",
+            "support": {
+                "issues": "https://github.com/ralouphie/getallheaders/issues",
+                "source": "https://github.com/ralouphie/getallheaders/tree/develop"
+            },
+            "time": "2019-03-08T08:55:37+00:00"
+        },
+        {
+            "name": "ramsey/collection",
+            "version": "2.1.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/ramsey/collection.git",
+                "reference": "344572933ad0181accbf4ba763e85a0306a8c5e2"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/ramsey/collection/zipball/344572933ad0181accbf4ba763e85a0306a8c5e2",
+                "reference": "344572933ad0181accbf4ba763e85a0306a8c5e2",
+                "shasum": ""
+            },
+            "require": {
+                "php": "^8.1"
+            },
+            "require-dev": {
+                "captainhook/plugin-composer": "^5.3",
+                "ergebnis/composer-normalize": "^2.45",
+                "fakerphp/faker": "^1.24",
+                "hamcrest/hamcrest-php": "^2.0",
+                "jangregor/phpstan-prophecy": "^2.1",
+                "mockery/mockery": "^1.6",
+                "php-parallel-lint/php-console-highlighter": "^1.0",
+                "php-parallel-lint/php-parallel-lint": "^1.4",
+                "phpspec/prophecy-phpunit": "^2.3",
+                "phpstan/extension-installer": "^1.4",
+                "phpstan/phpstan": "^2.1",
+                "phpstan/phpstan-mockery": "^2.0",
+                "phpstan/phpstan-phpunit": "^2.0",
+                "phpunit/phpunit": "^10.5",
+                "ramsey/coding-standard": "^2.3",
+                "ramsey/conventional-commits": "^1.6",
+                "roave/security-advisories": "dev-latest"
+            },
+            "type": "library",
+            "extra": {
+                "captainhook": {
+                    "force-install": true
+                },
+                "ramsey/conventional-commits": {
+                    "configFile": "conventional-commits.json"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Ramsey\\Collection\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Ben Ramsey",
+                    "email": "ben@benramsey.com",
+                    "homepage": "https://benramsey.com"
+                }
+            ],
+            "description": "A PHP library for representing and manipulating collections.",
+            "keywords": [
+                "array",
+                "collection",
+                "hash",
+                "map",
+                "queue",
+                "set"
+            ],
+            "support": {
+                "issues": "https://github.com/ramsey/collection/issues",
+                "source": "https://github.com/ramsey/collection/tree/2.1.1"
+            },
+            "time": "2025-03-22T05:38:12+00:00"
+        },
+        {
+            "name": "ramsey/uuid",
+            "version": "4.9.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/ramsey/uuid.git",
+                "reference": "4e0e23cc785f0724a0e838279a9eb03f28b092a0"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/ramsey/uuid/zipball/4e0e23cc785f0724a0e838279a9eb03f28b092a0",
+                "reference": "4e0e23cc785f0724a0e838279a9eb03f28b092a0",
+                "shasum": ""
+            },
+            "require": {
+                "brick/math": "^0.8.8 || ^0.9 || ^0.10 || ^0.11 || ^0.12 || ^0.13",
+                "php": "^8.0",
+                "ramsey/collection": "^1.2 || ^2.0"
+            },
+            "replace": {
+                "rhumsaa/uuid": "self.version"
+            },
+            "require-dev": {
+                "captainhook/captainhook": "^5.25",
+                "captainhook/plugin-composer": "^5.3",
+                "dealerdirect/phpcodesniffer-composer-installer": "^1.0",
+                "ergebnis/composer-normalize": "^2.47",
+                "mockery/mockery": "^1.6",
+                "paragonie/random-lib": "^2",
+                "php-mock/php-mock": "^2.6",
+                "php-mock/php-mock-mockery": "^1.5",
+                "php-parallel-lint/php-parallel-lint": "^1.4.0",
+                "phpbench/phpbench": "^1.2.14",
+                "phpstan/extension-installer": "^1.4",
+                "phpstan/phpstan": "^2.1",
+                "phpstan/phpstan-mockery": "^2.0",
+                "phpstan/phpstan-phpunit": "^2.0",
+                "phpunit/phpunit": "^9.6",
+                "slevomat/coding-standard": "^8.18",
+                "squizlabs/php_codesniffer": "^3.13"
+            },
+            "suggest": {
+                "ext-bcmath": "Enables faster math with arbitrary-precision integers using BCMath.",
+                "ext-gmp": "Enables faster math with arbitrary-precision integers using GMP.",
+                "ext-uuid": "Enables the use of PeclUuidTimeGenerator and PeclUuidRandomGenerator.",
+                "paragonie/random-lib": "Provides RandomLib for use with the RandomLibAdapter",
+                "ramsey/uuid-doctrine": "Allows the use of Ramsey\\Uuid\\Uuid as Doctrine field type."
+            },
+            "type": "library",
+            "extra": {
+                "captainhook": {
+                    "force-install": true
+                }
+            },
+            "autoload": {
+                "files": [
+                    "src/functions.php"
+                ],
+                "psr-4": {
+                    "Ramsey\\Uuid\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "description": "A PHP library for generating and working with universally unique identifiers (UUIDs).",
+            "keywords": [
+                "guid",
+                "identifier",
+                "uuid"
+            ],
+            "support": {
+                "issues": "https://github.com/ramsey/uuid/issues",
+                "source": "https://github.com/ramsey/uuid/tree/4.9.0"
+            },
+            "time": "2025-06-25T14:20:11+00:00"
+        },
+        {
+            "name": "symfony/clock",
+            "version": "v7.3.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/clock.git",
+                "reference": "b81435fbd6648ea425d1ee96a2d8e68f4ceacd24"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/clock/zipball/b81435fbd6648ea425d1ee96a2d8e68f4ceacd24",
+                "reference": "b81435fbd6648ea425d1ee96a2d8e68f4ceacd24",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.2",
+                "psr/clock": "^1.0",
+                "symfony/polyfill-php83": "^1.28"
+            },
+            "provide": {
+                "psr/clock-implementation": "1.0"
+            },
+            "type": "library",
+            "autoload": {
+                "files": [
+                    "Resources/now.php"
+                ],
+                "psr-4": {
+                    "Symfony\\Component\\Clock\\": ""
+                },
+                "exclude-from-classmap": [
+                    "/Tests/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Nicolas Grekas",
+                    "email": "p@tchwork.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Decouples applications from the system clock",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "clock",
+                "psr20",
+                "time"
+            ],
+            "support": {
+                "source": "https://github.com/symfony/clock/tree/v7.3.0"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2024-09-25T14:21:43+00:00"
+        },
+        {
+            "name": "symfony/console",
+            "version": "v7.3.2",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/console.git",
+                "reference": "5f360ebc65c55265a74d23d7fe27f957870158a1"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/console/zipball/5f360ebc65c55265a74d23d7fe27f957870158a1",
+                "reference": "5f360ebc65c55265a74d23d7fe27f957870158a1",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.2",
+                "symfony/deprecation-contracts": "^2.5|^3",
+                "symfony/polyfill-mbstring": "~1.0",
+                "symfony/service-contracts": "^2.5|^3",
+                "symfony/string": "^7.2"
+            },
+            "conflict": {
+                "symfony/dependency-injection": "<6.4",
+                "symfony/dotenv": "<6.4",
+                "symfony/event-dispatcher": "<6.4",
+                "symfony/lock": "<6.4",
+                "symfony/process": "<6.4"
+            },
+            "provide": {
+                "psr/log-implementation": "1.0|2.0|3.0"
+            },
+            "require-dev": {
+                "psr/log": "^1|^2|^3",
+                "symfony/config": "^6.4|^7.0",
+                "symfony/dependency-injection": "^6.4|^7.0",
+                "symfony/event-dispatcher": "^6.4|^7.0",
+                "symfony/http-foundation": "^6.4|^7.0",
+                "symfony/http-kernel": "^6.4|^7.0",
+                "symfony/lock": "^6.4|^7.0",
+                "symfony/messenger": "^6.4|^7.0",
+                "symfony/process": "^6.4|^7.0",
+                "symfony/stopwatch": "^6.4|^7.0",
+                "symfony/var-dumper": "^6.4|^7.0"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\Component\\Console\\": ""
+                },
+                "exclude-from-classmap": [
+                    "/Tests/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Fabien Potencier",
+                    "email": "fabien@symfony.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Eases the creation of beautiful and testable command line interfaces",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "cli",
+                "command-line",
+                "console",
+                "terminal"
+            ],
+            "support": {
+                "source": "https://github.com/symfony/console/tree/v7.3.2"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://github.com/nicolas-grekas",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2025-07-30T17:13:41+00:00"
+        },
+        {
+            "name": "symfony/css-selector",
+            "version": "v7.3.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/css-selector.git",
+                "reference": "601a5ce9aaad7bf10797e3663faefce9e26c24e2"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/css-selector/zipball/601a5ce9aaad7bf10797e3663faefce9e26c24e2",
+                "reference": "601a5ce9aaad7bf10797e3663faefce9e26c24e2",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.2"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\Component\\CssSelector\\": ""
+                },
+                "exclude-from-classmap": [
+                    "/Tests/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Fabien Potencier",
+                    "email": "fabien@symfony.com"
+                },
+                {
+                    "name": "Jean-François Simon",
+                    "email": "jeanfrancois.simon@sensiolabs.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Converts CSS selectors to XPath expressions",
+            "homepage": "https://symfony.com",
+            "support": {
+                "source": "https://github.com/symfony/css-selector/tree/v7.3.0"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2024-09-25T14:21:43+00:00"
+        },
+        {
+            "name": "symfony/deprecation-contracts",
+            "version": "v3.6.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/deprecation-contracts.git",
+                "reference": "63afe740e99a13ba87ec199bb07bbdee937a5b62"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/deprecation-contracts/zipball/63afe740e99a13ba87ec199bb07bbdee937a5b62",
+                "reference": "63afe740e99a13ba87ec199bb07bbdee937a5b62",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.1"
+            },
+            "type": "library",
+            "extra": {
+                "thanks": {
+                    "url": "https://github.com/symfony/contracts",
+                    "name": "symfony/contracts"
+                },
+                "branch-alias": {
+                    "dev-main": "3.6-dev"
+                }
+            },
+            "autoload": {
+                "files": [
+                    "function.php"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Nicolas Grekas",
+                    "email": "p@tchwork.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "A generic function and convention to trigger deprecation notices",
+            "homepage": "https://symfony.com",
+            "support": {
+                "source": "https://github.com/symfony/deprecation-contracts/tree/v3.6.0"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2024-09-25T14:21:43+00:00"
+        },
+        {
+            "name": "symfony/error-handler",
+            "version": "v7.3.2",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/error-handler.git",
+                "reference": "0b31a944fcd8759ae294da4d2808cbc53aebd0c3"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/error-handler/zipball/0b31a944fcd8759ae294da4d2808cbc53aebd0c3",
+                "reference": "0b31a944fcd8759ae294da4d2808cbc53aebd0c3",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.2",
+                "psr/log": "^1|^2|^3",
+                "symfony/var-dumper": "^6.4|^7.0"
+            },
+            "conflict": {
+                "symfony/deprecation-contracts": "<2.5",
+                "symfony/http-kernel": "<6.4"
+            },
+            "require-dev": {
+                "symfony/console": "^6.4|^7.0",
+                "symfony/deprecation-contracts": "^2.5|^3",
+                "symfony/http-kernel": "^6.4|^7.0",
+                "symfony/serializer": "^6.4|^7.0",
+                "symfony/webpack-encore-bundle": "^1.0|^2.0"
+            },
+            "bin": [
+                "Resources/bin/patch-type-declarations"
+            ],
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\Component\\ErrorHandler\\": ""
+                },
+                "exclude-from-classmap": [
+                    "/Tests/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Fabien Potencier",
+                    "email": "fabien@symfony.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Provides tools to manage errors and ease debugging PHP code",
+            "homepage": "https://symfony.com",
+            "support": {
+                "source": "https://github.com/symfony/error-handler/tree/v7.3.2"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://github.com/nicolas-grekas",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2025-07-07T08:17:57+00:00"
+        },
+        {
+            "name": "symfony/event-dispatcher",
+            "version": "v7.3.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/event-dispatcher.git",
+                "reference": "497f73ac996a598c92409b44ac43b6690c4f666d"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/event-dispatcher/zipball/497f73ac996a598c92409b44ac43b6690c4f666d",
+                "reference": "497f73ac996a598c92409b44ac43b6690c4f666d",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.2",
+                "symfony/event-dispatcher-contracts": "^2.5|^3"
+            },
+            "conflict": {
+                "symfony/dependency-injection": "<6.4",
+                "symfony/service-contracts": "<2.5"
+            },
+            "provide": {
+                "psr/event-dispatcher-implementation": "1.0",
+                "symfony/event-dispatcher-implementation": "2.0|3.0"
+            },
+            "require-dev": {
+                "psr/log": "^1|^2|^3",
+                "symfony/config": "^6.4|^7.0",
+                "symfony/dependency-injection": "^6.4|^7.0",
+                "symfony/error-handler": "^6.4|^7.0",
+                "symfony/expression-language": "^6.4|^7.0",
+                "symfony/http-foundation": "^6.4|^7.0",
+                "symfony/service-contracts": "^2.5|^3",
+                "symfony/stopwatch": "^6.4|^7.0"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\Component\\EventDispatcher\\": ""
+                },
+                "exclude-from-classmap": [
+                    "/Tests/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Fabien Potencier",
+                    "email": "fabien@symfony.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Provides tools that allow your application components to communicate with each other by dispatching events and listening to them",
+            "homepage": "https://symfony.com",
+            "support": {
+                "source": "https://github.com/symfony/event-dispatcher/tree/v7.3.0"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2025-04-22T09:11:45+00:00"
+        },
+        {
+            "name": "symfony/event-dispatcher-contracts",
+            "version": "v3.6.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/event-dispatcher-contracts.git",
+                "reference": "59eb412e93815df44f05f342958efa9f46b1e586"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/event-dispatcher-contracts/zipball/59eb412e93815df44f05f342958efa9f46b1e586",
+                "reference": "59eb412e93815df44f05f342958efa9f46b1e586",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.1",
+                "psr/event-dispatcher": "^1"
+            },
+            "type": "library",
+            "extra": {
+                "thanks": {
+                    "url": "https://github.com/symfony/contracts",
+                    "name": "symfony/contracts"
+                },
+                "branch-alias": {
+                    "dev-main": "3.6-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\Contracts\\EventDispatcher\\": ""
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Nicolas Grekas",
+                    "email": "p@tchwork.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Generic abstractions related to dispatching event",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "abstractions",
+                "contracts",
+                "decoupling",
+                "interfaces",
+                "interoperability",
+                "standards"
+            ],
+            "support": {
+                "source": "https://github.com/symfony/event-dispatcher-contracts/tree/v3.6.0"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2024-09-25T14:21:43+00:00"
+        },
+        {
+            "name": "symfony/finder",
+            "version": "v7.3.2",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/finder.git",
+                "reference": "2a6614966ba1074fa93dae0bc804227422df4dfe"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/finder/zipball/2a6614966ba1074fa93dae0bc804227422df4dfe",
+                "reference": "2a6614966ba1074fa93dae0bc804227422df4dfe",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.2"
+            },
+            "require-dev": {
+                "symfony/filesystem": "^6.4|^7.0"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\Component\\Finder\\": ""
+                },
+                "exclude-from-classmap": [
+                    "/Tests/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Fabien Potencier",
+                    "email": "fabien@symfony.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Finds files and directories via an intuitive fluent interface",
+            "homepage": "https://symfony.com",
+            "support": {
+                "source": "https://github.com/symfony/finder/tree/v7.3.2"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://github.com/nicolas-grekas",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2025-07-15T13:41:35+00:00"
+        },
+        {
+            "name": "symfony/http-foundation",
+            "version": "v7.3.2",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/http-foundation.git",
+                "reference": "6877c122b3a6cc3695849622720054f6e6fa5fa6"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/http-foundation/zipball/6877c122b3a6cc3695849622720054f6e6fa5fa6",
+                "reference": "6877c122b3a6cc3695849622720054f6e6fa5fa6",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.2",
+                "symfony/deprecation-contracts": "^2.5|^3.0",
+                "symfony/polyfill-mbstring": "~1.1",
+                "symfony/polyfill-php83": "^1.27"
+            },
+            "conflict": {
+                "doctrine/dbal": "<3.6",
+                "symfony/cache": "<6.4.12|>=7.0,<7.1.5"
+            },
+            "require-dev": {
+                "doctrine/dbal": "^3.6|^4",
+                "predis/predis": "^1.1|^2.0",
+                "symfony/cache": "^6.4.12|^7.1.5",
+                "symfony/clock": "^6.4|^7.0",
+                "symfony/dependency-injection": "^6.4|^7.0",
+                "symfony/expression-language": "^6.4|^7.0",
+                "symfony/http-kernel": "^6.4|^7.0",
+                "symfony/mime": "^6.4|^7.0",
+                "symfony/rate-limiter": "^6.4|^7.0"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\Component\\HttpFoundation\\": ""
+                },
+                "exclude-from-classmap": [
+                    "/Tests/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Fabien Potencier",
+                    "email": "fabien@symfony.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Defines an object-oriented layer for the HTTP specification",
+            "homepage": "https://symfony.com",
+            "support": {
+                "source": "https://github.com/symfony/http-foundation/tree/v7.3.2"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://github.com/nicolas-grekas",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2025-07-10T08:47:49+00:00"
+        },
+        {
+            "name": "symfony/http-kernel",
+            "version": "v7.3.2",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/http-kernel.git",
+                "reference": "6ecc895559ec0097e221ed2fd5eb44d5fede083c"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/http-kernel/zipball/6ecc895559ec0097e221ed2fd5eb44d5fede083c",
+                "reference": "6ecc895559ec0097e221ed2fd5eb44d5fede083c",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.2",
+                "psr/log": "^1|^2|^3",
+                "symfony/deprecation-contracts": "^2.5|^3",
+                "symfony/error-handler": "^6.4|^7.0",
+                "symfony/event-dispatcher": "^7.3",
+                "symfony/http-foundation": "^7.3",
+                "symfony/polyfill-ctype": "^1.8"
+            },
+            "conflict": {
+                "symfony/browser-kit": "<6.4",
+                "symfony/cache": "<6.4",
+                "symfony/config": "<6.4",
+                "symfony/console": "<6.4",
+                "symfony/dependency-injection": "<6.4",
+                "symfony/doctrine-bridge": "<6.4",
+                "symfony/form": "<6.4",
+                "symfony/http-client": "<6.4",
+                "symfony/http-client-contracts": "<2.5",
+                "symfony/mailer": "<6.4",
+                "symfony/messenger": "<6.4",
+                "symfony/translation": "<6.4",
+                "symfony/translation-contracts": "<2.5",
+                "symfony/twig-bridge": "<6.4",
+                "symfony/validator": "<6.4",
+                "symfony/var-dumper": "<6.4",
+                "twig/twig": "<3.12"
+            },
+            "provide": {
+                "psr/log-implementation": "1.0|2.0|3.0"
+            },
+            "require-dev": {
+                "psr/cache": "^1.0|^2.0|^3.0",
+                "symfony/browser-kit": "^6.4|^7.0",
+                "symfony/clock": "^6.4|^7.0",
+                "symfony/config": "^6.4|^7.0",
+                "symfony/console": "^6.4|^7.0",
+                "symfony/css-selector": "^6.4|^7.0",
+                "symfony/dependency-injection": "^6.4|^7.0",
+                "symfony/dom-crawler": "^6.4|^7.0",
+                "symfony/expression-language": "^6.4|^7.0",
+                "symfony/finder": "^6.4|^7.0",
+                "symfony/http-client-contracts": "^2.5|^3",
+                "symfony/process": "^6.4|^7.0",
+                "symfony/property-access": "^7.1",
+                "symfony/routing": "^6.4|^7.0",
+                "symfony/serializer": "^7.1",
+                "symfony/stopwatch": "^6.4|^7.0",
+                "symfony/translation": "^6.4|^7.0",
+                "symfony/translation-contracts": "^2.5|^3",
+                "symfony/uid": "^6.4|^7.0",
+                "symfony/validator": "^6.4|^7.0",
+                "symfony/var-dumper": "^6.4|^7.0",
+                "symfony/var-exporter": "^6.4|^7.0",
+                "twig/twig": "^3.12"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\Component\\HttpKernel\\": ""
+                },
+                "exclude-from-classmap": [
+                    "/Tests/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Fabien Potencier",
+                    "email": "fabien@symfony.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Provides a structured process for converting a Request into a Response",
+            "homepage": "https://symfony.com",
+            "support": {
+                "source": "https://github.com/symfony/http-kernel/tree/v7.3.2"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://github.com/nicolas-grekas",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2025-07-31T10:45:04+00:00"
+        },
+        {
+            "name": "symfony/mailer",
+            "version": "v7.3.2",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/mailer.git",
+                "reference": "d43e84d9522345f96ad6283d5dfccc8c1cfc299b"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/mailer/zipball/d43e84d9522345f96ad6283d5dfccc8c1cfc299b",
+                "reference": "d43e84d9522345f96ad6283d5dfccc8c1cfc299b",
+                "shasum": ""
+            },
+            "require": {
+                "egulias/email-validator": "^2.1.10|^3|^4",
+                "php": ">=8.2",
+                "psr/event-dispatcher": "^1",
+                "psr/log": "^1|^2|^3",
+                "symfony/event-dispatcher": "^6.4|^7.0",
+                "symfony/mime": "^7.2",
+                "symfony/service-contracts": "^2.5|^3"
+            },
+            "conflict": {
+                "symfony/http-client-contracts": "<2.5",
+                "symfony/http-kernel": "<6.4",
+                "symfony/messenger": "<6.4",
+                "symfony/mime": "<6.4",
+                "symfony/twig-bridge": "<6.4"
+            },
+            "require-dev": {
+                "symfony/console": "^6.4|^7.0",
+                "symfony/http-client": "^6.4|^7.0",
+                "symfony/messenger": "^6.4|^7.0",
+                "symfony/twig-bridge": "^6.4|^7.0"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\Component\\Mailer\\": ""
+                },
+                "exclude-from-classmap": [
+                    "/Tests/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Fabien Potencier",
+                    "email": "fabien@symfony.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Helps sending emails",
+            "homepage": "https://symfony.com",
+            "support": {
+                "source": "https://github.com/symfony/mailer/tree/v7.3.2"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://github.com/nicolas-grekas",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2025-07-15T11:36:08+00:00"
+        },
+        {
+            "name": "symfony/mime",
+            "version": "v7.3.2",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/mime.git",
+                "reference": "e0a0f859148daf1edf6c60b398eb40bfc96697d1"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/mime/zipball/e0a0f859148daf1edf6c60b398eb40bfc96697d1",
+                "reference": "e0a0f859148daf1edf6c60b398eb40bfc96697d1",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.2",
+                "symfony/polyfill-intl-idn": "^1.10",
+                "symfony/polyfill-mbstring": "^1.0"
+            },
+            "conflict": {
+                "egulias/email-validator": "~3.0.0",
+                "phpdocumentor/reflection-docblock": "<3.2.2",
+                "phpdocumentor/type-resolver": "<1.4.0",
+                "symfony/mailer": "<6.4",
+                "symfony/serializer": "<6.4.3|>7.0,<7.0.3"
+            },
+            "require-dev": {
+                "egulias/email-validator": "^2.1.10|^3.1|^4",
+                "league/html-to-markdown": "^5.0",
+                "phpdocumentor/reflection-docblock": "^3.0|^4.0|^5.0",
+                "symfony/dependency-injection": "^6.4|^7.0",
+                "symfony/process": "^6.4|^7.0",
+                "symfony/property-access": "^6.4|^7.0",
+                "symfony/property-info": "^6.4|^7.0",
+                "symfony/serializer": "^6.4.3|^7.0.3"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\Component\\Mime\\": ""
+                },
+                "exclude-from-classmap": [
+                    "/Tests/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Fabien Potencier",
+                    "email": "fabien@symfony.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Allows manipulating MIME messages",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "mime",
+                "mime-type"
+            ],
+            "support": {
+                "source": "https://github.com/symfony/mime/tree/v7.3.2"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://github.com/nicolas-grekas",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2025-07-15T13:41:35+00:00"
+        },
+        {
+            "name": "symfony/polyfill-ctype",
+            "version": "v1.32.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/polyfill-ctype.git",
+                "reference": "a3cc8b044a6ea513310cbd48ef7333b384945638"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/polyfill-ctype/zipball/a3cc8b044a6ea513310cbd48ef7333b384945638",
+                "reference": "a3cc8b044a6ea513310cbd48ef7333b384945638",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=7.2"
+            },
+            "provide": {
+                "ext-ctype": "*"
+            },
+            "suggest": {
+                "ext-ctype": "For best performance"
+            },
+            "type": "library",
+            "extra": {
+                "thanks": {
+                    "url": "https://github.com/symfony/polyfill",
+                    "name": "symfony/polyfill"
+                }
+            },
+            "autoload": {
+                "files": [
+                    "bootstrap.php"
+                ],
+                "psr-4": {
+                    "Symfony\\Polyfill\\Ctype\\": ""
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Gert de Pagter",
+                    "email": "BackEndTea@gmail.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Symfony polyfill for ctype functions",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "compatibility",
+                "ctype",
+                "polyfill",
+                "portable"
+            ],
+            "support": {
+                "source": "https://github.com/symfony/polyfill-ctype/tree/v1.32.0"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2024-09-09T11:45:10+00:00"
+        },
+        {
+            "name": "symfony/polyfill-intl-grapheme",
+            "version": "v1.32.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/polyfill-intl-grapheme.git",
+                "reference": "b9123926e3b7bc2f98c02ad54f6a4b02b91a8abe"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/polyfill-intl-grapheme/zipball/b9123926e3b7bc2f98c02ad54f6a4b02b91a8abe",
+                "reference": "b9123926e3b7bc2f98c02ad54f6a4b02b91a8abe",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=7.2"
+            },
+            "suggest": {
+                "ext-intl": "For best performance"
+            },
+            "type": "library",
+            "extra": {
+                "thanks": {
+                    "url": "https://github.com/symfony/polyfill",
+                    "name": "symfony/polyfill"
+                }
+            },
+            "autoload": {
+                "files": [
+                    "bootstrap.php"
+                ],
+                "psr-4": {
+                    "Symfony\\Polyfill\\Intl\\Grapheme\\": ""
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Nicolas Grekas",
+                    "email": "p@tchwork.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Symfony polyfill for intl's grapheme_* functions",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "compatibility",
+                "grapheme",
+                "intl",
+                "polyfill",
+                "portable",
+                "shim"
+            ],
+            "support": {
+                "source": "https://github.com/symfony/polyfill-intl-grapheme/tree/v1.32.0"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2024-09-09T11:45:10+00:00"
+        },
+        {
+            "name": "symfony/polyfill-intl-idn",
+            "version": "v1.32.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/polyfill-intl-idn.git",
+                "reference": "9614ac4d8061dc257ecc64cba1b140873dce8ad3"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/polyfill-intl-idn/zipball/9614ac4d8061dc257ecc64cba1b140873dce8ad3",
+                "reference": "9614ac4d8061dc257ecc64cba1b140873dce8ad3",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=7.2",
+                "symfony/polyfill-intl-normalizer": "^1.10"
+            },
+            "suggest": {
+                "ext-intl": "For best performance"
+            },
+            "type": "library",
+            "extra": {
+                "thanks": {
+                    "url": "https://github.com/symfony/polyfill",
+                    "name": "symfony/polyfill"
+                }
+            },
+            "autoload": {
+                "files": [
+                    "bootstrap.php"
+                ],
+                "psr-4": {
+                    "Symfony\\Polyfill\\Intl\\Idn\\": ""
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Laurent Bassin",
+                    "email": "laurent@bassin.info"
+                },
+                {
+                    "name": "Trevor Rowbotham",
+                    "email": "trevor.rowbotham@pm.me"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Symfony polyfill for intl's idn_to_ascii and idn_to_utf8 functions",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "compatibility",
+                "idn",
+                "intl",
+                "polyfill",
+                "portable",
+                "shim"
+            ],
+            "support": {
+                "source": "https://github.com/symfony/polyfill-intl-idn/tree/v1.32.0"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2024-09-10T14:38:51+00:00"
+        },
+        {
+            "name": "symfony/polyfill-intl-normalizer",
+            "version": "v1.32.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/polyfill-intl-normalizer.git",
+                "reference": "3833d7255cc303546435cb650316bff708a1c75c"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/polyfill-intl-normalizer/zipball/3833d7255cc303546435cb650316bff708a1c75c",
+                "reference": "3833d7255cc303546435cb650316bff708a1c75c",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=7.2"
+            },
+            "suggest": {
+                "ext-intl": "For best performance"
+            },
+            "type": "library",
+            "extra": {
+                "thanks": {
+                    "url": "https://github.com/symfony/polyfill",
+                    "name": "symfony/polyfill"
+                }
+            },
+            "autoload": {
+                "files": [
+                    "bootstrap.php"
+                ],
+                "psr-4": {
+                    "Symfony\\Polyfill\\Intl\\Normalizer\\": ""
+                },
+                "classmap": [
+                    "Resources/stubs"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Nicolas Grekas",
+                    "email": "p@tchwork.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Symfony polyfill for intl's Normalizer class and related functions",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "compatibility",
+                "intl",
+                "normalizer",
+                "polyfill",
+                "portable",
+                "shim"
+            ],
+            "support": {
+                "source": "https://github.com/symfony/polyfill-intl-normalizer/tree/v1.32.0"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2024-09-09T11:45:10+00:00"
+        },
+        {
+            "name": "symfony/polyfill-mbstring",
+            "version": "v1.32.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/polyfill-mbstring.git",
+                "reference": "6d857f4d76bd4b343eac26d6b539585d2bc56493"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/polyfill-mbstring/zipball/6d857f4d76bd4b343eac26d6b539585d2bc56493",
+                "reference": "6d857f4d76bd4b343eac26d6b539585d2bc56493",
+                "shasum": ""
+            },
+            "require": {
+                "ext-iconv": "*",
+                "php": ">=7.2"
+            },
+            "provide": {
+                "ext-mbstring": "*"
+            },
+            "suggest": {
+                "ext-mbstring": "For best performance"
+            },
+            "type": "library",
+            "extra": {
+                "thanks": {
+                    "url": "https://github.com/symfony/polyfill",
+                    "name": "symfony/polyfill"
+                }
+            },
+            "autoload": {
+                "files": [
+                    "bootstrap.php"
+                ],
+                "psr-4": {
+                    "Symfony\\Polyfill\\Mbstring\\": ""
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Nicolas Grekas",
+                    "email": "p@tchwork.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Symfony polyfill for the Mbstring extension",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "compatibility",
+                "mbstring",
+                "polyfill",
+                "portable",
+                "shim"
+            ],
+            "support": {
+                "source": "https://github.com/symfony/polyfill-mbstring/tree/v1.32.0"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2024-12-23T08:48:59+00:00"
+        },
+        {
+            "name": "symfony/polyfill-php80",
+            "version": "v1.32.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/polyfill-php80.git",
+                "reference": "0cc9dd0f17f61d8131e7df6b84bd344899fe2608"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/polyfill-php80/zipball/0cc9dd0f17f61d8131e7df6b84bd344899fe2608",
+                "reference": "0cc9dd0f17f61d8131e7df6b84bd344899fe2608",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=7.2"
+            },
+            "type": "library",
+            "extra": {
+                "thanks": {
+                    "url": "https://github.com/symfony/polyfill",
+                    "name": "symfony/polyfill"
+                }
+            },
+            "autoload": {
+                "files": [
+                    "bootstrap.php"
+                ],
+                "psr-4": {
+                    "Symfony\\Polyfill\\Php80\\": ""
+                },
+                "classmap": [
+                    "Resources/stubs"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Ion Bazan",
+                    "email": "ion.bazan@gmail.com"
+                },
+                {
+                    "name": "Nicolas Grekas",
+                    "email": "p@tchwork.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Symfony polyfill backporting some PHP 8.0+ features to lower PHP versions",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "compatibility",
+                "polyfill",
+                "portable",
+                "shim"
+            ],
+            "support": {
+                "source": "https://github.com/symfony/polyfill-php80/tree/v1.32.0"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2025-01-02T08:10:11+00:00"
+        },
+        {
+            "name": "symfony/polyfill-php83",
+            "version": "v1.32.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/polyfill-php83.git",
+                "reference": "2fb86d65e2d424369ad2905e83b236a8805ba491"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/polyfill-php83/zipball/2fb86d65e2d424369ad2905e83b236a8805ba491",
+                "reference": "2fb86d65e2d424369ad2905e83b236a8805ba491",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=7.2"
+            },
+            "type": "library",
+            "extra": {
+                "thanks": {
+                    "url": "https://github.com/symfony/polyfill",
+                    "name": "symfony/polyfill"
+                }
+            },
+            "autoload": {
+                "files": [
+                    "bootstrap.php"
+                ],
+                "psr-4": {
+                    "Symfony\\Polyfill\\Php83\\": ""
+                },
+                "classmap": [
+                    "Resources/stubs"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Nicolas Grekas",
+                    "email": "p@tchwork.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Symfony polyfill backporting some PHP 8.3+ features to lower PHP versions",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "compatibility",
+                "polyfill",
+                "portable",
+                "shim"
+            ],
+            "support": {
+                "source": "https://github.com/symfony/polyfill-php83/tree/v1.32.0"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2024-09-09T11:45:10+00:00"
+        },
+        {
+            "name": "symfony/polyfill-uuid",
+            "version": "v1.32.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/polyfill-uuid.git",
+                "reference": "21533be36c24be3f4b1669c4725c7d1d2bab4ae2"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/polyfill-uuid/zipball/21533be36c24be3f4b1669c4725c7d1d2bab4ae2",
+                "reference": "21533be36c24be3f4b1669c4725c7d1d2bab4ae2",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=7.2"
+            },
+            "provide": {
+                "ext-uuid": "*"
+            },
+            "suggest": {
+                "ext-uuid": "For best performance"
+            },
+            "type": "library",
+            "extra": {
+                "thanks": {
+                    "url": "https://github.com/symfony/polyfill",
+                    "name": "symfony/polyfill"
+                }
+            },
+            "autoload": {
+                "files": [
+                    "bootstrap.php"
+                ],
+                "psr-4": {
+                    "Symfony\\Polyfill\\Uuid\\": ""
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Grégoire Pineau",
+                    "email": "lyrixx@lyrixx.info"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Symfony polyfill for uuid functions",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "compatibility",
+                "polyfill",
+                "portable",
+                "uuid"
+            ],
+            "support": {
+                "source": "https://github.com/symfony/polyfill-uuid/tree/v1.32.0"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2024-09-09T11:45:10+00:00"
+        },
+        {
+            "name": "symfony/process",
+            "version": "v7.3.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/process.git",
+                "reference": "40c295f2deb408d5e9d2d32b8ba1dd61e36f05af"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/process/zipball/40c295f2deb408d5e9d2d32b8ba1dd61e36f05af",
+                "reference": "40c295f2deb408d5e9d2d32b8ba1dd61e36f05af",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.2"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\Component\\Process\\": ""
+                },
+                "exclude-from-classmap": [
+                    "/Tests/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Fabien Potencier",
+                    "email": "fabien@symfony.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Executes commands in sub-processes",
+            "homepage": "https://symfony.com",
+            "support": {
+                "source": "https://github.com/symfony/process/tree/v7.3.0"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2025-04-17T09:11:12+00:00"
+        },
+        {
+            "name": "symfony/routing",
+            "version": "v7.3.2",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/routing.git",
+                "reference": "7614b8ca5fa89b9cd233e21b627bfc5774f586e4"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/routing/zipball/7614b8ca5fa89b9cd233e21b627bfc5774f586e4",
+                "reference": "7614b8ca5fa89b9cd233e21b627bfc5774f586e4",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.2",
+                "symfony/deprecation-contracts": "^2.5|^3"
+            },
+            "conflict": {
+                "symfony/config": "<6.4",
+                "symfony/dependency-injection": "<6.4",
+                "symfony/yaml": "<6.4"
+            },
+            "require-dev": {
+                "psr/log": "^1|^2|^3",
+                "symfony/config": "^6.4|^7.0",
+                "symfony/dependency-injection": "^6.4|^7.0",
+                "symfony/expression-language": "^6.4|^7.0",
+                "symfony/http-foundation": "^6.4|^7.0",
+                "symfony/yaml": "^6.4|^7.0"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\Component\\Routing\\": ""
+                },
+                "exclude-from-classmap": [
+                    "/Tests/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Fabien Potencier",
+                    "email": "fabien@symfony.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Maps an HTTP request to a set of configuration variables",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "router",
+                "routing",
+                "uri",
+                "url"
+            ],
+            "support": {
+                "source": "https://github.com/symfony/routing/tree/v7.3.2"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://github.com/nicolas-grekas",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2025-07-15T11:36:08+00:00"
+        },
+        {
+            "name": "symfony/service-contracts",
+            "version": "v3.6.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/service-contracts.git",
+                "reference": "f021b05a130d35510bd6b25fe9053c2a8a15d5d4"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/service-contracts/zipball/f021b05a130d35510bd6b25fe9053c2a8a15d5d4",
+                "reference": "f021b05a130d35510bd6b25fe9053c2a8a15d5d4",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.1",
+                "psr/container": "^1.1|^2.0",
+                "symfony/deprecation-contracts": "^2.5|^3"
+            },
+            "conflict": {
+                "ext-psr": "<1.1|>=2"
+            },
+            "type": "library",
+            "extra": {
+                "thanks": {
+                    "url": "https://github.com/symfony/contracts",
+                    "name": "symfony/contracts"
+                },
+                "branch-alias": {
+                    "dev-main": "3.6-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\Contracts\\Service\\": ""
+                },
+                "exclude-from-classmap": [
+                    "/Test/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Nicolas Grekas",
+                    "email": "p@tchwork.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Generic abstractions related to writing services",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "abstractions",
+                "contracts",
+                "decoupling",
+                "interfaces",
+                "interoperability",
+                "standards"
+            ],
+            "support": {
+                "source": "https://github.com/symfony/service-contracts/tree/v3.6.0"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2025-04-25T09:37:31+00:00"
+        },
+        {
+            "name": "symfony/string",
+            "version": "v7.3.2",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/string.git",
+                "reference": "42f505aff654e62ac7ac2ce21033818297ca89ca"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/string/zipball/42f505aff654e62ac7ac2ce21033818297ca89ca",
+                "reference": "42f505aff654e62ac7ac2ce21033818297ca89ca",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.2",
+                "symfony/polyfill-ctype": "~1.8",
+                "symfony/polyfill-intl-grapheme": "~1.0",
+                "symfony/polyfill-intl-normalizer": "~1.0",
+                "symfony/polyfill-mbstring": "~1.0"
+            },
+            "conflict": {
+                "symfony/translation-contracts": "<2.5"
+            },
+            "require-dev": {
+                "symfony/emoji": "^7.1",
+                "symfony/error-handler": "^6.4|^7.0",
+                "symfony/http-client": "^6.4|^7.0",
+                "symfony/intl": "^6.4|^7.0",
+                "symfony/translation-contracts": "^2.5|^3.0",
+                "symfony/var-exporter": "^6.4|^7.0"
+            },
+            "type": "library",
+            "autoload": {
+                "files": [
+                    "Resources/functions.php"
+                ],
+                "psr-4": {
+                    "Symfony\\Component\\String\\": ""
+                },
+                "exclude-from-classmap": [
+                    "/Tests/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Nicolas Grekas",
+                    "email": "p@tchwork.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Provides an object-oriented API to strings and deals with bytes, UTF-8 code points and grapheme clusters in a unified way",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "grapheme",
+                "i18n",
+                "string",
+                "unicode",
+                "utf-8",
+                "utf8"
+            ],
+            "support": {
+                "source": "https://github.com/symfony/string/tree/v7.3.2"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://github.com/nicolas-grekas",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2025-07-10T08:47:49+00:00"
+        },
+        {
+            "name": "symfony/translation",
+            "version": "v7.3.2",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/translation.git",
+                "reference": "81b48f4daa96272efcce9c7a6c4b58e629df3c90"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/translation/zipball/81b48f4daa96272efcce9c7a6c4b58e629df3c90",
+                "reference": "81b48f4daa96272efcce9c7a6c4b58e629df3c90",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.2",
+                "symfony/deprecation-contracts": "^2.5|^3",
+                "symfony/polyfill-mbstring": "~1.0",
+                "symfony/translation-contracts": "^2.5|^3.0"
+            },
+            "conflict": {
+                "nikic/php-parser": "<5.0",
+                "symfony/config": "<6.4",
+                "symfony/console": "<6.4",
+                "symfony/dependency-injection": "<6.4",
+                "symfony/http-client-contracts": "<2.5",
+                "symfony/http-kernel": "<6.4",
+                "symfony/service-contracts": "<2.5",
+                "symfony/twig-bundle": "<6.4",
+                "symfony/yaml": "<6.4"
+            },
+            "provide": {
+                "symfony/translation-implementation": "2.3|3.0"
+            },
+            "require-dev": {
+                "nikic/php-parser": "^5.0",
+                "psr/log": "^1|^2|^3",
+                "symfony/config": "^6.4|^7.0",
+                "symfony/console": "^6.4|^7.0",
+                "symfony/dependency-injection": "^6.4|^7.0",
+                "symfony/finder": "^6.4|^7.0",
+                "symfony/http-client-contracts": "^2.5|^3.0",
+                "symfony/http-kernel": "^6.4|^7.0",
+                "symfony/intl": "^6.4|^7.0",
+                "symfony/polyfill-intl-icu": "^1.21",
+                "symfony/routing": "^6.4|^7.0",
+                "symfony/service-contracts": "^2.5|^3",
+                "symfony/yaml": "^6.4|^7.0"
+            },
+            "type": "library",
+            "autoload": {
+                "files": [
+                    "Resources/functions.php"
+                ],
+                "psr-4": {
+                    "Symfony\\Component\\Translation\\": ""
+                },
+                "exclude-from-classmap": [
+                    "/Tests/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Fabien Potencier",
+                    "email": "fabien@symfony.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Provides tools to internationalize your application",
+            "homepage": "https://symfony.com",
+            "support": {
+                "source": "https://github.com/symfony/translation/tree/v7.3.2"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://github.com/nicolas-grekas",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2025-07-30T17:31:46+00:00"
+        },
+        {
+            "name": "symfony/translation-contracts",
+            "version": "v3.6.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/translation-contracts.git",
+                "reference": "df210c7a2573f1913b2d17cc95f90f53a73d8f7d"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/translation-contracts/zipball/df210c7a2573f1913b2d17cc95f90f53a73d8f7d",
+                "reference": "df210c7a2573f1913b2d17cc95f90f53a73d8f7d",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.1"
+            },
+            "type": "library",
+            "extra": {
+                "thanks": {
+                    "url": "https://github.com/symfony/contracts",
+                    "name": "symfony/contracts"
+                },
+                "branch-alias": {
+                    "dev-main": "3.6-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\Contracts\\Translation\\": ""
+                },
+                "exclude-from-classmap": [
+                    "/Test/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Nicolas Grekas",
+                    "email": "p@tchwork.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Generic abstractions related to translation",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "abstractions",
+                "contracts",
+                "decoupling",
+                "interfaces",
+                "interoperability",
+                "standards"
+            ],
+            "support": {
+                "source": "https://github.com/symfony/translation-contracts/tree/v3.6.0"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2024-09-27T08:32:26+00:00"
+        },
+        {
+            "name": "symfony/uid",
+            "version": "v7.3.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/uid.git",
+                "reference": "a69f69f3159b852651a6bf45a9fdd149520525bb"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/uid/zipball/a69f69f3159b852651a6bf45a9fdd149520525bb",
+                "reference": "a69f69f3159b852651a6bf45a9fdd149520525bb",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.2",
+                "symfony/polyfill-uuid": "^1.15"
+            },
+            "require-dev": {
+                "symfony/console": "^6.4|^7.0"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\Component\\Uid\\": ""
+                },
+                "exclude-from-classmap": [
+                    "/Tests/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Grégoire Pineau",
+                    "email": "lyrixx@lyrixx.info"
+                },
+                {
+                    "name": "Nicolas Grekas",
+                    "email": "p@tchwork.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Provides an object-oriented API to generate and represent UIDs",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "UID",
+                "ulid",
+                "uuid"
+            ],
+            "support": {
+                "source": "https://github.com/symfony/uid/tree/v7.3.1"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2025-06-27T19:55:54+00:00"
+        },
+        {
+            "name": "symfony/var-dumper",
+            "version": "v7.3.2",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/var-dumper.git",
+                "reference": "53205bea27450dc5c65377518b3275e126d45e75"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/var-dumper/zipball/53205bea27450dc5c65377518b3275e126d45e75",
+                "reference": "53205bea27450dc5c65377518b3275e126d45e75",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.2",
+                "symfony/deprecation-contracts": "^2.5|^3",
+                "symfony/polyfill-mbstring": "~1.0"
+            },
+            "conflict": {
+                "symfony/console": "<6.4"
+            },
+            "require-dev": {
+                "symfony/console": "^6.4|^7.0",
+                "symfony/http-kernel": "^6.4|^7.0",
+                "symfony/process": "^6.4|^7.0",
+                "symfony/uid": "^6.4|^7.0",
+                "twig/twig": "^3.12"
+            },
+            "bin": [
+                "Resources/bin/var-dump-server"
+            ],
+            "type": "library",
+            "autoload": {
+                "files": [
+                    "Resources/functions/dump.php"
+                ],
+                "psr-4": {
+                    "Symfony\\Component\\VarDumper\\": ""
+                },
+                "exclude-from-classmap": [
+                    "/Tests/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Nicolas Grekas",
+                    "email": "p@tchwork.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Provides mechanisms for walking through any arbitrary PHP variable",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "debug",
+                "dump"
+            ],
+            "support": {
+                "source": "https://github.com/symfony/var-dumper/tree/v7.3.2"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://github.com/nicolas-grekas",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2025-07-29T20:02:46+00:00"
+        },
+        {
+            "name": "tijsverkoyen/css-to-inline-styles",
+            "version": "v2.3.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/tijsverkoyen/CssToInlineStyles.git",
+                "reference": "0d72ac1c00084279c1816675284073c5a337c20d"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/tijsverkoyen/CssToInlineStyles/zipball/0d72ac1c00084279c1816675284073c5a337c20d",
+                "reference": "0d72ac1c00084279c1816675284073c5a337c20d",
+                "shasum": ""
+            },
+            "require": {
+                "ext-dom": "*",
+                "ext-libxml": "*",
+                "php": "^7.4 || ^8.0",
+                "symfony/css-selector": "^5.4 || ^6.0 || ^7.0"
+            },
+            "require-dev": {
+                "phpstan/phpstan": "^2.0",
+                "phpstan/phpstan-phpunit": "^2.0",
+                "phpunit/phpunit": "^8.5.21 || ^9.5.10"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "2.x-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "TijsVerkoyen\\CssToInlineStyles\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "BSD-3-Clause"
+            ],
+            "authors": [
+                {
+                    "name": "Tijs Verkoyen",
+                    "email": "css_to_inline_styles@verkoyen.eu",
+                    "role": "Developer"
+                }
+            ],
+            "description": "CssToInlineStyles is a class that enables you to convert HTML-pages/files into HTML-pages/files with inline styles. This is very useful when you're sending emails.",
+            "homepage": "https://github.com/tijsverkoyen/CssToInlineStyles",
+            "support": {
+                "issues": "https://github.com/tijsverkoyen/CssToInlineStyles/issues",
+                "source": "https://github.com/tijsverkoyen/CssToInlineStyles/tree/v2.3.0"
+            },
+            "time": "2024-12-21T16:25:41+00:00"
+        },
+        {
+            "name": "vlucas/phpdotenv",
+            "version": "v5.6.2",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/vlucas/phpdotenv.git",
+                "reference": "24ac4c74f91ee2c193fa1aaa5c249cb0822809af"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/vlucas/phpdotenv/zipball/24ac4c74f91ee2c193fa1aaa5c249cb0822809af",
+                "reference": "24ac4c74f91ee2c193fa1aaa5c249cb0822809af",
+                "shasum": ""
+            },
+            "require": {
+                "ext-pcre": "*",
+                "graham-campbell/result-type": "^1.1.3",
+                "php": "^7.2.5 || ^8.0",
+                "phpoption/phpoption": "^1.9.3",
+                "symfony/polyfill-ctype": "^1.24",
+                "symfony/polyfill-mbstring": "^1.24",
+                "symfony/polyfill-php80": "^1.24"
+            },
+            "require-dev": {
+                "bamarni/composer-bin-plugin": "^1.8.2",
+                "ext-filter": "*",
+                "phpunit/phpunit": "^8.5.34 || ^9.6.13 || ^10.4.2"
+            },
+            "suggest": {
+                "ext-filter": "Required to use the boolean validator."
+            },
+            "type": "library",
+            "extra": {
+                "bamarni-bin": {
+                    "bin-links": true,
+                    "forward-command": false
+                },
+                "branch-alias": {
+                    "dev-master": "5.6-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Dotenv\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "BSD-3-Clause"
+            ],
+            "authors": [
+                {
+                    "name": "Graham Campbell",
+                    "email": "hello@gjcampbell.co.uk",
+                    "homepage": "https://github.com/GrahamCampbell"
+                },
+                {
+                    "name": "Vance Lucas",
+                    "email": "vance@vancelucas.com",
+                    "homepage": "https://github.com/vlucas"
+                }
+            ],
+            "description": "Loads environment variables from `.env` to `getenv()`, `$_ENV` and `$_SERVER` automagically.",
+            "keywords": [
+                "dotenv",
+                "env",
+                "environment"
+            ],
+            "support": {
+                "issues": "https://github.com/vlucas/phpdotenv/issues",
+                "source": "https://github.com/vlucas/phpdotenv/tree/v5.6.2"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/GrahamCampbell",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/vlucas/phpdotenv",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2025-04-30T23:37:27+00:00"
+        },
+        {
+            "name": "voku/portable-ascii",
+            "version": "2.0.3",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/voku/portable-ascii.git",
+                "reference": "b1d923f88091c6bf09699efcd7c8a1b1bfd7351d"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/voku/portable-ascii/zipball/b1d923f88091c6bf09699efcd7c8a1b1bfd7351d",
+                "reference": "b1d923f88091c6bf09699efcd7c8a1b1bfd7351d",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=7.0.0"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "~6.0 || ~7.0 || ~9.0"
+            },
+            "suggest": {
+                "ext-intl": "Use Intl for transliterator_transliterate() support"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "voku\\": "src/voku/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Lars Moelleken",
+                    "homepage": "https://www.moelleken.org/"
+                }
+            ],
+            "description": "Portable ASCII library - performance optimized (ascii) string functions for php.",
+            "homepage": "https://github.com/voku/portable-ascii",
+            "keywords": [
+                "ascii",
+                "clean",
+                "php"
+            ],
+            "support": {
+                "issues": "https://github.com/voku/portable-ascii/issues",
+                "source": "https://github.com/voku/portable-ascii/tree/2.0.3"
+            },
+            "funding": [
+                {
+                    "url": "https://www.paypal.me/moelleken",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/voku",
+                    "type": "github"
+                },
+                {
+                    "url": "https://opencollective.com/portable-ascii",
+                    "type": "open_collective"
+                },
+                {
+                    "url": "https://www.patreon.com/voku",
+                    "type": "patreon"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/voku/portable-ascii",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2024-11-21T01:49:47+00:00"
+        },
+        {
+            "name": "webmozart/assert",
+            "version": "1.11.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/webmozarts/assert.git",
+                "reference": "11cb2199493b2f8a3b53e7f19068fc6aac760991"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/webmozarts/assert/zipball/11cb2199493b2f8a3b53e7f19068fc6aac760991",
+                "reference": "11cb2199493b2f8a3b53e7f19068fc6aac760991",
+                "shasum": ""
+            },
+            "require": {
+                "ext-ctype": "*",
+                "php": "^7.2 || ^8.0"
+            },
+            "conflict": {
+                "phpstan/phpstan": "<0.12.20",
+                "vimeo/psalm": "<4.6.1 || 4.6.2"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "^8.5.13"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "1.10-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Webmozart\\Assert\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Bernhard Schussek",
+                    "email": "bschussek@gmail.com"
+                }
+            ],
+            "description": "Assertions to validate method input/output with nice error messages.",
+            "keywords": [
+                "assert",
+                "check",
+                "validate"
+            ],
+            "support": {
+                "issues": "https://github.com/webmozarts/assert/issues",
+                "source": "https://github.com/webmozarts/assert/tree/1.11.0"
+            },
+            "time": "2022-06-03T18:03:27+00:00"
+        }
+    ],
+    "packages-dev": [
+        {
+            "name": "fakerphp/faker",
+            "version": "v1.24.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/FakerPHP/Faker.git",
+                "reference": "e0ee18eb1e6dc3cda3ce9fd97e5a0689a88a64b5"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/FakerPHP/Faker/zipball/e0ee18eb1e6dc3cda3ce9fd97e5a0689a88a64b5",
+                "reference": "e0ee18eb1e6dc3cda3ce9fd97e5a0689a88a64b5",
+                "shasum": ""
+            },
+            "require": {
+                "php": "^7.4 || ^8.0",
+                "psr/container": "^1.0 || ^2.0",
+                "symfony/deprecation-contracts": "^2.2 || ^3.0"
+            },
+            "conflict": {
+                "fzaninotto/faker": "*"
+            },
+            "require-dev": {
+                "bamarni/composer-bin-plugin": "^1.4.1",
+                "doctrine/persistence": "^1.3 || ^2.0",
+                "ext-intl": "*",
+                "phpunit/phpunit": "^9.5.26",
+                "symfony/phpunit-bridge": "^5.4.16"
+            },
+            "suggest": {
+                "doctrine/orm": "Required to use Faker\\ORM\\Doctrine",
+                "ext-curl": "Required by Faker\\Provider\\Image to download images.",
+                "ext-dom": "Required by Faker\\Provider\\HtmlLorem for generating random HTML.",
+                "ext-iconv": "Required by Faker\\Provider\\ru_RU\\Text::realText() for generating real Russian text.",
+                "ext-mbstring": "Required for multibyte Unicode string functionality."
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Faker\\": "src/Faker/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "François Zaninotto"
+                }
+            ],
+            "description": "Faker is a PHP library that generates fake data for you.",
+            "keywords": [
+                "data",
+                "faker",
+                "fixtures"
+            ],
+            "support": {
+                "issues": "https://github.com/FakerPHP/Faker/issues",
+                "source": "https://github.com/FakerPHP/Faker/tree/v1.24.1"
+            },
+            "time": "2024-11-21T13:46:39+00:00"
+        },
+        {
+            "name": "filp/whoops",
+            "version": "2.18.3",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/filp/whoops.git",
+                "reference": "59a123a3d459c5a23055802237cb317f609867e5"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/filp/whoops/zipball/59a123a3d459c5a23055802237cb317f609867e5",
+                "reference": "59a123a3d459c5a23055802237cb317f609867e5",
+                "shasum": ""
+            },
+            "require": {
+                "php": "^7.1 || ^8.0",
+                "psr/log": "^1.0.1 || ^2.0 || ^3.0"
+            },
+            "require-dev": {
+                "mockery/mockery": "^1.0",
+                "phpunit/phpunit": "^7.5.20 || ^8.5.8 || ^9.3.3",
+                "symfony/var-dumper": "^4.0 || ^5.0"
+            },
+            "suggest": {
+                "symfony/var-dumper": "Pretty print complex values better with var-dumper available",
+                "whoops/soap": "Formats errors as SOAP responses"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "2.7-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Whoops\\": "src/Whoops/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Filipe Dobreira",
+                    "homepage": "https://github.com/filp",
+                    "role": "Developer"
+                }
+            ],
+            "description": "php error handling for cool kids",
+            "homepage": "https://filp.github.io/whoops/",
+            "keywords": [
+                "error",
+                "exception",
+                "handling",
+                "library",
+                "throwable",
+                "whoops"
+            ],
+            "support": {
+                "issues": "https://github.com/filp/whoops/issues",
+                "source": "https://github.com/filp/whoops/tree/2.18.3"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/denis-sokolov",
+                    "type": "github"
+                }
+            ],
+            "time": "2025-06-16T00:02:10+00:00"
+        },
+        {
+            "name": "hamcrest/hamcrest-php",
+            "version": "v2.1.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/hamcrest/hamcrest-php.git",
+                "reference": "f8b1c0173b22fa6ec77a81fe63e5b01eba7e6487"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/hamcrest/hamcrest-php/zipball/f8b1c0173b22fa6ec77a81fe63e5b01eba7e6487",
+                "reference": "f8b1c0173b22fa6ec77a81fe63e5b01eba7e6487",
+                "shasum": ""
+            },
+            "require": {
+                "php": "^7.4|^8.0"
+            },
+            "replace": {
+                "cordoval/hamcrest-php": "*",
+                "davedevelopment/hamcrest-php": "*",
+                "kodova/hamcrest-php": "*"
+            },
+            "require-dev": {
+                "phpunit/php-file-iterator": "^1.4 || ^2.0 || ^3.0",
+                "phpunit/phpunit": "^4.8.36 || ^5.7 || ^6.5 || ^7.0 || ^8.0 || ^9.0"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "2.1-dev"
+                }
+            },
+            "autoload": {
+                "classmap": [
+                    "hamcrest"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "BSD-3-Clause"
+            ],
+            "description": "This is the PHP port of Hamcrest Matchers",
+            "keywords": [
+                "test"
+            ],
+            "support": {
+                "issues": "https://github.com/hamcrest/hamcrest-php/issues",
+                "source": "https://github.com/hamcrest/hamcrest-php/tree/v2.1.1"
+            },
+            "time": "2025-04-30T06:54:44+00:00"
+        },
+        {
+            "name": "laravel/pail",
+            "version": "v1.2.3",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/laravel/pail.git",
+                "reference": "8cc3d575c1f0e57eeb923f366a37528c50d2385a"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/laravel/pail/zipball/8cc3d575c1f0e57eeb923f366a37528c50d2385a",
+                "reference": "8cc3d575c1f0e57eeb923f366a37528c50d2385a",
+                "shasum": ""
+            },
+            "require": {
+                "ext-mbstring": "*",
+                "illuminate/console": "^10.24|^11.0|^12.0",
+                "illuminate/contracts": "^10.24|^11.0|^12.0",
+                "illuminate/log": "^10.24|^11.0|^12.0",
+                "illuminate/process": "^10.24|^11.0|^12.0",
+                "illuminate/support": "^10.24|^11.0|^12.0",
+                "nunomaduro/termwind": "^1.15|^2.0",
+                "php": "^8.2",
+                "symfony/console": "^6.0|^7.0"
+            },
+            "require-dev": {
+                "laravel/framework": "^10.24|^11.0|^12.0",
+                "laravel/pint": "^1.13",
+                "orchestra/testbench-core": "^8.13|^9.0|^10.0",
+                "pestphp/pest": "^2.20|^3.0",
+                "pestphp/pest-plugin-type-coverage": "^2.3|^3.0",
+                "phpstan/phpstan": "^1.12.27",
+                "symfony/var-dumper": "^6.3|^7.0"
+            },
+            "type": "library",
+            "extra": {
+                "laravel": {
+                    "providers": [
+                        "Laravel\\Pail\\PailServiceProvider"
+                    ]
+                },
+                "branch-alias": {
+                    "dev-main": "1.x-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Laravel\\Pail\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Taylor Otwell",
+                    "email": "taylor@laravel.com"
+                },
+                {
+                    "name": "Nuno Maduro",
+                    "email": "enunomaduro@gmail.com"
+                }
+            ],
+            "description": "Easily delve into your Laravel application's log files directly from the command line.",
+            "homepage": "https://github.com/laravel/pail",
+            "keywords": [
+                "dev",
+                "laravel",
+                "logs",
+                "php",
+                "tail"
+            ],
+            "support": {
+                "issues": "https://github.com/laravel/pail/issues",
+                "source": "https://github.com/laravel/pail"
+            },
+            "time": "2025-06-05T13:55:57+00:00"
+        },
+        {
+            "name": "laravel/pint",
+            "version": "v1.24.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/laravel/pint.git",
+                "reference": "0345f3b05f136801af8c339f9d16ef29e6b4df8a"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/laravel/pint/zipball/0345f3b05f136801af8c339f9d16ef29e6b4df8a",
+                "reference": "0345f3b05f136801af8c339f9d16ef29e6b4df8a",
+                "shasum": ""
+            },
+            "require": {
+                "ext-json": "*",
+                "ext-mbstring": "*",
+                "ext-tokenizer": "*",
+                "ext-xml": "*",
+                "php": "^8.2.0"
+            },
+            "require-dev": {
+                "friendsofphp/php-cs-fixer": "^3.82.2",
+                "illuminate/view": "^11.45.1",
+                "larastan/larastan": "^3.5.0",
+                "laravel-zero/framework": "^11.45.0",
+                "mockery/mockery": "^1.6.12",
+                "nunomaduro/termwind": "^2.3.1",
+                "pestphp/pest": "^2.36.0"
+            },
+            "bin": [
+                "builds/pint"
+            ],
+            "type": "project",
+            "autoload": {
+                "files": [
+                    "overrides/Runner/Parallel/ProcessFactory.php"
+                ],
+                "psr-4": {
+                    "App\\": "app/",
+                    "Database\\Seeders\\": "database/seeders/",
+                    "Database\\Factories\\": "database/factories/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Nuno Maduro",
+                    "email": "enunomaduro@gmail.com"
+                }
+            ],
+            "description": "An opinionated code formatter for PHP.",
+            "homepage": "https://laravel.com",
+            "keywords": [
+                "format",
+                "formatter",
+                "lint",
+                "linter",
+                "php"
+            ],
+            "support": {
+                "issues": "https://github.com/laravel/pint/issues",
+                "source": "https://github.com/laravel/pint"
+            },
+            "time": "2025-07-10T18:09:32+00:00"
+        },
+        {
+            "name": "laravel/sail",
+            "version": "v1.44.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/laravel/sail.git",
+                "reference": "a09097bd2a8a38e23ac472fa6a6cf5b0d1c1d3fe"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/laravel/sail/zipball/a09097bd2a8a38e23ac472fa6a6cf5b0d1c1d3fe",
+                "reference": "a09097bd2a8a38e23ac472fa6a6cf5b0d1c1d3fe",
+                "shasum": ""
+            },
+            "require": {
+                "illuminate/console": "^9.52.16|^10.0|^11.0|^12.0",
+                "illuminate/contracts": "^9.52.16|^10.0|^11.0|^12.0",
+                "illuminate/support": "^9.52.16|^10.0|^11.0|^12.0",
+                "php": "^8.0",
+                "symfony/console": "^6.0|^7.0",
+                "symfony/yaml": "^6.0|^7.0"
+            },
+            "require-dev": {
+                "orchestra/testbench": "^7.0|^8.0|^9.0|^10.0",
+                "phpstan/phpstan": "^1.10"
+            },
+            "bin": [
+                "bin/sail"
+            ],
+            "type": "library",
+            "extra": {
+                "laravel": {
+                    "providers": [
+                        "Laravel\\Sail\\SailServiceProvider"
+                    ]
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Laravel\\Sail\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Taylor Otwell",
+                    "email": "taylor@laravel.com"
+                }
+            ],
+            "description": "Docker files for running a basic Laravel application.",
+            "keywords": [
+                "docker",
+                "laravel"
+            ],
+            "support": {
+                "issues": "https://github.com/laravel/sail/issues",
+                "source": "https://github.com/laravel/sail"
+            },
+            "time": "2025-07-04T16:17:06+00:00"
+        },
+        {
+            "name": "mockery/mockery",
+            "version": "1.6.12",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/mockery/mockery.git",
+                "reference": "1f4efdd7d3beafe9807b08156dfcb176d18f1699"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/mockery/mockery/zipball/1f4efdd7d3beafe9807b08156dfcb176d18f1699",
+                "reference": "1f4efdd7d3beafe9807b08156dfcb176d18f1699",
+                "shasum": ""
+            },
+            "require": {
+                "hamcrest/hamcrest-php": "^2.0.1",
+                "lib-pcre": ">=7.0",
+                "php": ">=7.3"
+            },
+            "conflict": {
+                "phpunit/phpunit": "<8.0"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "^8.5 || ^9.6.17",
+                "symplify/easy-coding-standard": "^12.1.14"
+            },
+            "type": "library",
+            "autoload": {
+                "files": [
+                    "library/helpers.php",
+                    "library/Mockery.php"
+                ],
+                "psr-4": {
+                    "Mockery\\": "library/Mockery"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "BSD-3-Clause"
+            ],
+            "authors": [
+                {
+                    "name": "Pádraic Brady",
+                    "email": "padraic.brady@gmail.com",
+                    "homepage": "https://github.com/padraic",
+                    "role": "Author"
+                },
+                {
+                    "name": "Dave Marshall",
+                    "email": "dave.marshall@atstsolutions.co.uk",
+                    "homepage": "https://davedevelopment.co.uk",
+                    "role": "Developer"
+                },
+                {
+                    "name": "Nathanael Esayeas",
+                    "email": "nathanael.esayeas@protonmail.com",
+                    "homepage": "https://github.com/ghostwriter",
+                    "role": "Lead Developer"
+                }
+            ],
+            "description": "Mockery is a simple yet flexible PHP mock object framework",
+            "homepage": "https://github.com/mockery/mockery",
+            "keywords": [
+                "BDD",
+                "TDD",
+                "library",
+                "mock",
+                "mock objects",
+                "mockery",
+                "stub",
+                "test",
+                "test double",
+                "testing"
+            ],
+            "support": {
+                "docs": "https://docs.mockery.io/",
+                "issues": "https://github.com/mockery/mockery/issues",
+                "rss": "https://github.com/mockery/mockery/releases.atom",
+                "security": "https://github.com/mockery/mockery/security/advisories",
+                "source": "https://github.com/mockery/mockery"
+            },
+            "time": "2024-05-16T03:13:13+00:00"
+        },
+        {
+            "name": "myclabs/deep-copy",
+            "version": "1.13.3",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/myclabs/DeepCopy.git",
+                "reference": "faed855a7b5f4d4637717c2b3863e277116beb36"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/myclabs/DeepCopy/zipball/faed855a7b5f4d4637717c2b3863e277116beb36",
+                "reference": "faed855a7b5f4d4637717c2b3863e277116beb36",
+                "shasum": ""
+            },
+            "require": {
+                "php": "^7.1 || ^8.0"
+            },
+            "conflict": {
+                "doctrine/collections": "<1.6.8",
+                "doctrine/common": "<2.13.3 || >=3 <3.2.2"
+            },
+            "require-dev": {
+                "doctrine/collections": "^1.6.8",
+                "doctrine/common": "^2.13.3 || ^3.2.2",
+                "phpspec/prophecy": "^1.10",
+                "phpunit/phpunit": "^7.5.20 || ^8.5.23 || ^9.5.13"
+            },
+            "type": "library",
+            "autoload": {
+                "files": [
+                    "src/DeepCopy/deep_copy.php"
+                ],
+                "psr-4": {
+                    "DeepCopy\\": "src/DeepCopy/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "description": "Create deep copies (clones) of your objects",
+            "keywords": [
+                "clone",
+                "copy",
+                "duplicate",
+                "object",
+                "object graph"
+            ],
+            "support": {
+                "issues": "https://github.com/myclabs/DeepCopy/issues",
+                "source": "https://github.com/myclabs/DeepCopy/tree/1.13.3"
+            },
+            "funding": [
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/myclabs/deep-copy",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2025-07-05T12:25:42+00:00"
+        },
+        {
+            "name": "nunomaduro/collision",
+            "version": "v8.8.2",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/nunomaduro/collision.git",
+                "reference": "60207965f9b7b7a4ce15a0f75d57f9dadb105bdb"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/nunomaduro/collision/zipball/60207965f9b7b7a4ce15a0f75d57f9dadb105bdb",
+                "reference": "60207965f9b7b7a4ce15a0f75d57f9dadb105bdb",
+                "shasum": ""
+            },
+            "require": {
+                "filp/whoops": "^2.18.1",
+                "nunomaduro/termwind": "^2.3.1",
+                "php": "^8.2.0",
+                "symfony/console": "^7.3.0"
+            },
+            "conflict": {
+                "laravel/framework": "<11.44.2 || >=13.0.0",
+                "phpunit/phpunit": "<11.5.15 || >=13.0.0"
+            },
+            "require-dev": {
+                "brianium/paratest": "^7.8.3",
+                "larastan/larastan": "^3.4.2",
+                "laravel/framework": "^11.44.2 || ^12.18",
+                "laravel/pint": "^1.22.1",
+                "laravel/sail": "^1.43.1",
+                "laravel/sanctum": "^4.1.1",
+                "laravel/tinker": "^2.10.1",
+                "orchestra/testbench-core": "^9.12.0 || ^10.4",
+                "pestphp/pest": "^3.8.2",
+                "sebastian/environment": "^7.2.1 || ^8.0"
+            },
+            "type": "library",
+            "extra": {
+                "laravel": {
+                    "providers": [
+                        "NunoMaduro\\Collision\\Adapters\\Laravel\\CollisionServiceProvider"
+                    ]
+                },
+                "branch-alias": {
+                    "dev-8.x": "8.x-dev"
+                }
+            },
+            "autoload": {
+                "files": [
+                    "./src/Adapters/Phpunit/Autoload.php"
+                ],
+                "psr-4": {
+                    "NunoMaduro\\Collision\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Nuno Maduro",
+                    "email": "enunomaduro@gmail.com"
+                }
+            ],
+            "description": "Cli error handling for console/command-line PHP applications.",
+            "keywords": [
+                "artisan",
+                "cli",
+                "command-line",
+                "console",
+                "dev",
+                "error",
+                "handling",
+                "laravel",
+                "laravel-zero",
+                "php",
+                "symfony"
+            ],
+            "support": {
+                "issues": "https://github.com/nunomaduro/collision/issues",
+                "source": "https://github.com/nunomaduro/collision"
+            },
+            "funding": [
+                {
+                    "url": "https://www.paypal.com/paypalme/enunomaduro",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/nunomaduro",
+                    "type": "github"
+                },
+                {
+                    "url": "https://www.patreon.com/nunomaduro",
+                    "type": "patreon"
+                }
+            ],
+            "time": "2025-06-25T02:12:12+00:00"
+        },
+        {
+            "name": "phar-io/manifest",
+            "version": "2.0.4",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/phar-io/manifest.git",
+                "reference": "54750ef60c58e43759730615a392c31c80e23176"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/phar-io/manifest/zipball/54750ef60c58e43759730615a392c31c80e23176",
+                "reference": "54750ef60c58e43759730615a392c31c80e23176",
+                "shasum": ""
+            },
+            "require": {
+                "ext-dom": "*",
+                "ext-libxml": "*",
+                "ext-phar": "*",
+                "ext-xmlwriter": "*",
+                "phar-io/version": "^3.0.1",
+                "php": "^7.2 || ^8.0"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "2.0.x-dev"
+                }
+            },
+            "autoload": {
+                "classmap": [
+                    "src/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "BSD-3-Clause"
+            ],
+            "authors": [
+                {
+                    "name": "Arne Blankerts",
+                    "email": "arne@blankerts.de",
+                    "role": "Developer"
+                },
+                {
+                    "name": "Sebastian Heuer",
+                    "email": "sebastian@phpeople.de",
+                    "role": "Developer"
+                },
+                {
+                    "name": "Sebastian Bergmann",
+                    "email": "sebastian@phpunit.de",
+                    "role": "Developer"
+                }
+            ],
+            "description": "Component for reading phar.io manifest information from a PHP Archive (PHAR)",
+            "support": {
+                "issues": "https://github.com/phar-io/manifest/issues",
+                "source": "https://github.com/phar-io/manifest/tree/2.0.4"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/theseer",
+                    "type": "github"
+                }
+            ],
+            "time": "2024-03-03T12:33:53+00:00"
+        },
+        {
+            "name": "phar-io/version",
+            "version": "3.2.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/phar-io/version.git",
+                "reference": "4f7fd7836c6f332bb2933569e566a0d6c4cbed74"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/phar-io/version/zipball/4f7fd7836c6f332bb2933569e566a0d6c4cbed74",
+                "reference": "4f7fd7836c6f332bb2933569e566a0d6c4cbed74",
+                "shasum": ""
+            },
+            "require": {
+                "php": "^7.2 || ^8.0"
+            },
+            "type": "library",
+            "autoload": {
+                "classmap": [
+                    "src/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "BSD-3-Clause"
+            ],
+            "authors": [
+                {
+                    "name": "Arne Blankerts",
+                    "email": "arne@blankerts.de",
+                    "role": "Developer"
+                },
+                {
+                    "name": "Sebastian Heuer",
+                    "email": "sebastian@phpeople.de",
+                    "role": "Developer"
+                },
+                {
+                    "name": "Sebastian Bergmann",
+                    "email": "sebastian@phpunit.de",
+                    "role": "Developer"
+                }
+            ],
+            "description": "Library for handling version information and constraints",
+            "support": {
+                "issues": "https://github.com/phar-io/version/issues",
+                "source": "https://github.com/phar-io/version/tree/3.2.1"
+            },
+            "time": "2022-02-21T01:04:05+00:00"
+        },
+        {
+            "name": "phpunit/php-code-coverage",
+            "version": "11.0.10",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/sebastianbergmann/php-code-coverage.git",
+                "reference": "1a800a7446add2d79cc6b3c01c45381810367d76"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/sebastianbergmann/php-code-coverage/zipball/1a800a7446add2d79cc6b3c01c45381810367d76",
+                "reference": "1a800a7446add2d79cc6b3c01c45381810367d76",
+                "shasum": ""
+            },
+            "require": {
+                "ext-dom": "*",
+                "ext-libxml": "*",
+                "ext-xmlwriter": "*",
+                "nikic/php-parser": "^5.4.0",
+                "php": ">=8.2",
+                "phpunit/php-file-iterator": "^5.1.0",
+                "phpunit/php-text-template": "^4.0.1",
+                "sebastian/code-unit-reverse-lookup": "^4.0.1",
+                "sebastian/complexity": "^4.0.1",
+                "sebastian/environment": "^7.2.0",
+                "sebastian/lines-of-code": "^3.0.1",
+                "sebastian/version": "^5.0.2",
+                "theseer/tokenizer": "^1.2.3"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "^11.5.2"
+            },
+            "suggest": {
+                "ext-pcov": "PHP extension that provides line coverage",
+                "ext-xdebug": "PHP extension that provides line coverage as well as branch and path coverage"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-main": "11.0.x-dev"
+                }
+            },
+            "autoload": {
+                "classmap": [
+                    "src/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "BSD-3-Clause"
+            ],
+            "authors": [
+                {
+                    "name": "Sebastian Bergmann",
+                    "email": "sebastian@phpunit.de",
+                    "role": "lead"
+                }
+            ],
+            "description": "Library that provides collection, processing, and rendering functionality for PHP code coverage information.",
+            "homepage": "https://github.com/sebastianbergmann/php-code-coverage",
+            "keywords": [
+                "coverage",
+                "testing",
+                "xunit"
+            ],
+            "support": {
+                "issues": "https://github.com/sebastianbergmann/php-code-coverage/issues",
+                "security": "https://github.com/sebastianbergmann/php-code-coverage/security/policy",
+                "source": "https://github.com/sebastianbergmann/php-code-coverage/tree/show"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/sebastianbergmann",
+                    "type": "github"
+                },
+                {
+                    "url": "https://liberapay.com/sebastianbergmann",
+                    "type": "liberapay"
+                },
+                {
+                    "url": "https://thanks.dev/u/gh/sebastianbergmann",
+                    "type": "thanks_dev"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/phpunit/php-code-coverage",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2025-06-18T08:56:18+00:00"
+        },
+        {
+            "name": "phpunit/php-file-iterator",
+            "version": "5.1.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/sebastianbergmann/php-file-iterator.git",
+                "reference": "118cfaaa8bc5aef3287bf315b6060b1174754af6"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/sebastianbergmann/php-file-iterator/zipball/118cfaaa8bc5aef3287bf315b6060b1174754af6",
+                "reference": "118cfaaa8bc5aef3287bf315b6060b1174754af6",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.2"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "^11.0"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-main": "5.0-dev"
+                }
+            },
+            "autoload": {
+                "classmap": [
+                    "src/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "BSD-3-Clause"
+            ],
+            "authors": [
+                {
+                    "name": "Sebastian Bergmann",
+                    "email": "sebastian@phpunit.de",
+                    "role": "lead"
+                }
+            ],
+            "description": "FilterIterator implementation that filters files based on a list of suffixes.",
+            "homepage": "https://github.com/sebastianbergmann/php-file-iterator/",
+            "keywords": [
+                "filesystem",
+                "iterator"
+            ],
+            "support": {
+                "issues": "https://github.com/sebastianbergmann/php-file-iterator/issues",
+                "security": "https://github.com/sebastianbergmann/php-file-iterator/security/policy",
+                "source": "https://github.com/sebastianbergmann/php-file-iterator/tree/5.1.0"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/sebastianbergmann",
+                    "type": "github"
+                }
+            ],
+            "time": "2024-08-27T05:02:59+00:00"
+        },
+        {
+            "name": "phpunit/php-invoker",
+            "version": "5.0.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/sebastianbergmann/php-invoker.git",
+                "reference": "c1ca3814734c07492b3d4c5f794f4b0995333da2"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/sebastianbergmann/php-invoker/zipball/c1ca3814734c07492b3d4c5f794f4b0995333da2",
+                "reference": "c1ca3814734c07492b3d4c5f794f4b0995333da2",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.2"
+            },
+            "require-dev": {
+                "ext-pcntl": "*",
+                "phpunit/phpunit": "^11.0"
+            },
+            "suggest": {
+                "ext-pcntl": "*"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-main": "5.0-dev"
+                }
+            },
+            "autoload": {
+                "classmap": [
+                    "src/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "BSD-3-Clause"
+            ],
+            "authors": [
+                {
+                    "name": "Sebastian Bergmann",
+                    "email": "sebastian@phpunit.de",
+                    "role": "lead"
+                }
+            ],
+            "description": "Invoke callables with a timeout",
+            "homepage": "https://github.com/sebastianbergmann/php-invoker/",
+            "keywords": [
+                "process"
+            ],
+            "support": {
+                "issues": "https://github.com/sebastianbergmann/php-invoker/issues",
+                "security": "https://github.com/sebastianbergmann/php-invoker/security/policy",
+                "source": "https://github.com/sebastianbergmann/php-invoker/tree/5.0.1"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/sebastianbergmann",
+                    "type": "github"
+                }
+            ],
+            "time": "2024-07-03T05:07:44+00:00"
+        },
+        {
+            "name": "phpunit/php-text-template",
+            "version": "4.0.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/sebastianbergmann/php-text-template.git",
+                "reference": "3e0404dc6b300e6bf56415467ebcb3fe4f33e964"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/sebastianbergmann/php-text-template/zipball/3e0404dc6b300e6bf56415467ebcb3fe4f33e964",
+                "reference": "3e0404dc6b300e6bf56415467ebcb3fe4f33e964",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.2"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "^11.0"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-main": "4.0-dev"
+                }
+            },
+            "autoload": {
+                "classmap": [
+                    "src/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "BSD-3-Clause"
+            ],
+            "authors": [
+                {
+                    "name": "Sebastian Bergmann",
+                    "email": "sebastian@phpunit.de",
+                    "role": "lead"
+                }
+            ],
+            "description": "Simple template engine.",
+            "homepage": "https://github.com/sebastianbergmann/php-text-template/",
+            "keywords": [
+                "template"
+            ],
+            "support": {
+                "issues": "https://github.com/sebastianbergmann/php-text-template/issues",
+                "security": "https://github.com/sebastianbergmann/php-text-template/security/policy",
+                "source": "https://github.com/sebastianbergmann/php-text-template/tree/4.0.1"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/sebastianbergmann",
+                    "type": "github"
+                }
+            ],
+            "time": "2024-07-03T05:08:43+00:00"
+        },
+        {
+            "name": "phpunit/php-timer",
+            "version": "7.0.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/sebastianbergmann/php-timer.git",
+                "reference": "3b415def83fbcb41f991d9ebf16ae4ad8b7837b3"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/sebastianbergmann/php-timer/zipball/3b415def83fbcb41f991d9ebf16ae4ad8b7837b3",
+                "reference": "3b415def83fbcb41f991d9ebf16ae4ad8b7837b3",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.2"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "^11.0"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-main": "7.0-dev"
+                }
+            },
+            "autoload": {
+                "classmap": [
+                    "src/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "BSD-3-Clause"
+            ],
+            "authors": [
+                {
+                    "name": "Sebastian Bergmann",
+                    "email": "sebastian@phpunit.de",
+                    "role": "lead"
+                }
+            ],
+            "description": "Utility class for timing",
+            "homepage": "https://github.com/sebastianbergmann/php-timer/",
+            "keywords": [
+                "timer"
+            ],
+            "support": {
+                "issues": "https://github.com/sebastianbergmann/php-timer/issues",
+                "security": "https://github.com/sebastianbergmann/php-timer/security/policy",
+                "source": "https://github.com/sebastianbergmann/php-timer/tree/7.0.1"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/sebastianbergmann",
+                    "type": "github"
+                }
+            ],
+            "time": "2024-07-03T05:09:35+00:00"
+        },
+        {
+            "name": "phpunit/phpunit",
+            "version": "11.5.28",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/sebastianbergmann/phpunit.git",
+                "reference": "93f30aa3889e785ac63493d4976df0ae9fdecb60"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/sebastianbergmann/phpunit/zipball/93f30aa3889e785ac63493d4976df0ae9fdecb60",
+                "reference": "93f30aa3889e785ac63493d4976df0ae9fdecb60",
+                "shasum": ""
+            },
+            "require": {
+                "ext-dom": "*",
+                "ext-json": "*",
+                "ext-libxml": "*",
+                "ext-mbstring": "*",
+                "ext-xml": "*",
+                "ext-xmlwriter": "*",
+                "myclabs/deep-copy": "^1.13.3",
+                "phar-io/manifest": "^2.0.4",
+                "phar-io/version": "^3.2.1",
+                "php": ">=8.2",
+                "phpunit/php-code-coverage": "^11.0.10",
+                "phpunit/php-file-iterator": "^5.1.0",
+                "phpunit/php-invoker": "^5.0.1",
+                "phpunit/php-text-template": "^4.0.1",
+                "phpunit/php-timer": "^7.0.1",
+                "sebastian/cli-parser": "^3.0.2",
+                "sebastian/code-unit": "^3.0.3",
+                "sebastian/comparator": "^6.3.1",
+                "sebastian/diff": "^6.0.2",
+                "sebastian/environment": "^7.2.1",
+                "sebastian/exporter": "^6.3.0",
+                "sebastian/global-state": "^7.0.2",
+                "sebastian/object-enumerator": "^6.0.1",
+                "sebastian/type": "^5.1.2",
+                "sebastian/version": "^5.0.2",
+                "staabm/side-effects-detector": "^1.0.5"
+            },
+            "suggest": {
+                "ext-soap": "To be able to generate mocks based on WSDL files"
+            },
+            "bin": [
+                "phpunit"
+            ],
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-main": "11.5-dev"
+                }
+            },
+            "autoload": {
+                "files": [
+                    "src/Framework/Assert/Functions.php"
+                ],
+                "classmap": [
+                    "src/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "BSD-3-Clause"
+            ],
+            "authors": [
+                {
+                    "name": "Sebastian Bergmann",
+                    "email": "sebastian@phpunit.de",
+                    "role": "lead"
+                }
+            ],
+            "description": "The PHP Unit Testing framework.",
+            "homepage": "https://phpunit.de/",
+            "keywords": [
+                "phpunit",
+                "testing",
+                "xunit"
+            ],
+            "support": {
+                "issues": "https://github.com/sebastianbergmann/phpunit/issues",
+                "security": "https://github.com/sebastianbergmann/phpunit/security/policy",
+                "source": "https://github.com/sebastianbergmann/phpunit/tree/11.5.28"
+            },
+            "funding": [
+                {
+                    "url": "https://phpunit.de/sponsors.html",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/sebastianbergmann",
+                    "type": "github"
+                },
+                {
+                    "url": "https://liberapay.com/sebastianbergmann",
+                    "type": "liberapay"
+                },
+                {
+                    "url": "https://thanks.dev/u/gh/sebastianbergmann",
+                    "type": "thanks_dev"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/phpunit/phpunit",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2025-07-31T07:10:28+00:00"
+        },
+        {
+            "name": "sebastian/cli-parser",
+            "version": "3.0.2",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/sebastianbergmann/cli-parser.git",
+                "reference": "15c5dd40dc4f38794d383bb95465193f5e0ae180"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/sebastianbergmann/cli-parser/zipball/15c5dd40dc4f38794d383bb95465193f5e0ae180",
+                "reference": "15c5dd40dc4f38794d383bb95465193f5e0ae180",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.2"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "^11.0"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-main": "3.0-dev"
+                }
+            },
+            "autoload": {
+                "classmap": [
+                    "src/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "BSD-3-Clause"
+            ],
+            "authors": [
+                {
+                    "name": "Sebastian Bergmann",
+                    "email": "sebastian@phpunit.de",
+                    "role": "lead"
+                }
+            ],
+            "description": "Library for parsing CLI options",
+            "homepage": "https://github.com/sebastianbergmann/cli-parser",
+            "support": {
+                "issues": "https://github.com/sebastianbergmann/cli-parser/issues",
+                "security": "https://github.com/sebastianbergmann/cli-parser/security/policy",
+                "source": "https://github.com/sebastianbergmann/cli-parser/tree/3.0.2"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/sebastianbergmann",
+                    "type": "github"
+                }
+            ],
+            "time": "2024-07-03T04:41:36+00:00"
+        },
+        {
+            "name": "sebastian/code-unit",
+            "version": "3.0.3",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/sebastianbergmann/code-unit.git",
+                "reference": "54391c61e4af8078e5b276ab082b6d3c54c9ad64"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/sebastianbergmann/code-unit/zipball/54391c61e4af8078e5b276ab082b6d3c54c9ad64",
+                "reference": "54391c61e4af8078e5b276ab082b6d3c54c9ad64",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.2"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "^11.5"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-main": "3.0-dev"
+                }
+            },
+            "autoload": {
+                "classmap": [
+                    "src/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "BSD-3-Clause"
+            ],
+            "authors": [
+                {
+                    "name": "Sebastian Bergmann",
+                    "email": "sebastian@phpunit.de",
+                    "role": "lead"
+                }
+            ],
+            "description": "Collection of value objects that represent the PHP code units",
+            "homepage": "https://github.com/sebastianbergmann/code-unit",
+            "support": {
+                "issues": "https://github.com/sebastianbergmann/code-unit/issues",
+                "security": "https://github.com/sebastianbergmann/code-unit/security/policy",
+                "source": "https://github.com/sebastianbergmann/code-unit/tree/3.0.3"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/sebastianbergmann",
+                    "type": "github"
+                }
+            ],
+            "time": "2025-03-19T07:56:08+00:00"
+        },
+        {
+            "name": "sebastian/code-unit-reverse-lookup",
+            "version": "4.0.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/sebastianbergmann/code-unit-reverse-lookup.git",
+                "reference": "183a9b2632194febd219bb9246eee421dad8d45e"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/sebastianbergmann/code-unit-reverse-lookup/zipball/183a9b2632194febd219bb9246eee421dad8d45e",
+                "reference": "183a9b2632194febd219bb9246eee421dad8d45e",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.2"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "^11.0"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-main": "4.0-dev"
+                }
+            },
+            "autoload": {
+                "classmap": [
+                    "src/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "BSD-3-Clause"
+            ],
+            "authors": [
+                {
+                    "name": "Sebastian Bergmann",
+                    "email": "sebastian@phpunit.de"
+                }
+            ],
+            "description": "Looks up which function or method a line of code belongs to",
+            "homepage": "https://github.com/sebastianbergmann/code-unit-reverse-lookup/",
+            "support": {
+                "issues": "https://github.com/sebastianbergmann/code-unit-reverse-lookup/issues",
+                "security": "https://github.com/sebastianbergmann/code-unit-reverse-lookup/security/policy",
+                "source": "https://github.com/sebastianbergmann/code-unit-reverse-lookup/tree/4.0.1"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/sebastianbergmann",
+                    "type": "github"
+                }
+            ],
+            "time": "2024-07-03T04:45:54+00:00"
+        },
+        {
+            "name": "sebastian/comparator",
+            "version": "6.3.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/sebastianbergmann/comparator.git",
+                "reference": "24b8fbc2c8e201bb1308e7b05148d6ab393b6959"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/sebastianbergmann/comparator/zipball/24b8fbc2c8e201bb1308e7b05148d6ab393b6959",
+                "reference": "24b8fbc2c8e201bb1308e7b05148d6ab393b6959",
+                "shasum": ""
+            },
+            "require": {
+                "ext-dom": "*",
+                "ext-mbstring": "*",
+                "php": ">=8.2",
+                "sebastian/diff": "^6.0",
+                "sebastian/exporter": "^6.0"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "^11.4"
+            },
+            "suggest": {
+                "ext-bcmath": "For comparing BcMath\\Number objects"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-main": "6.3-dev"
+                }
+            },
+            "autoload": {
+                "classmap": [
+                    "src/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "BSD-3-Clause"
+            ],
+            "authors": [
+                {
+                    "name": "Sebastian Bergmann",
+                    "email": "sebastian@phpunit.de"
+                },
+                {
+                    "name": "Jeff Welch",
+                    "email": "whatthejeff@gmail.com"
+                },
+                {
+                    "name": "Volker Dusch",
+                    "email": "github@wallbash.com"
+                },
+                {
+                    "name": "Bernhard Schussek",
+                    "email": "bschussek@2bepublished.at"
+                }
+            ],
+            "description": "Provides the functionality to compare PHP values for equality",
+            "homepage": "https://github.com/sebastianbergmann/comparator",
+            "keywords": [
+                "comparator",
+                "compare",
+                "equality"
+            ],
+            "support": {
+                "issues": "https://github.com/sebastianbergmann/comparator/issues",
+                "security": "https://github.com/sebastianbergmann/comparator/security/policy",
+                "source": "https://github.com/sebastianbergmann/comparator/tree/6.3.1"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/sebastianbergmann",
+                    "type": "github"
+                }
+            ],
+            "time": "2025-03-07T06:57:01+00:00"
+        },
+        {
+            "name": "sebastian/complexity",
+            "version": "4.0.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/sebastianbergmann/complexity.git",
+                "reference": "ee41d384ab1906c68852636b6de493846e13e5a0"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/sebastianbergmann/complexity/zipball/ee41d384ab1906c68852636b6de493846e13e5a0",
+                "reference": "ee41d384ab1906c68852636b6de493846e13e5a0",
+                "shasum": ""
+            },
+            "require": {
+                "nikic/php-parser": "^5.0",
+                "php": ">=8.2"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "^11.0"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-main": "4.0-dev"
+                }
+            },
+            "autoload": {
+                "classmap": [
+                    "src/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "BSD-3-Clause"
+            ],
+            "authors": [
+                {
+                    "name": "Sebastian Bergmann",
+                    "email": "sebastian@phpunit.de",
+                    "role": "lead"
+                }
+            ],
+            "description": "Library for calculating the complexity of PHP code units",
+            "homepage": "https://github.com/sebastianbergmann/complexity",
+            "support": {
+                "issues": "https://github.com/sebastianbergmann/complexity/issues",
+                "security": "https://github.com/sebastianbergmann/complexity/security/policy",
+                "source": "https://github.com/sebastianbergmann/complexity/tree/4.0.1"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/sebastianbergmann",
+                    "type": "github"
+                }
+            ],
+            "time": "2024-07-03T04:49:50+00:00"
+        },
+        {
+            "name": "sebastian/diff",
+            "version": "6.0.2",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/sebastianbergmann/diff.git",
+                "reference": "b4ccd857127db5d41a5b676f24b51371d76d8544"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/sebastianbergmann/diff/zipball/b4ccd857127db5d41a5b676f24b51371d76d8544",
+                "reference": "b4ccd857127db5d41a5b676f24b51371d76d8544",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.2"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "^11.0",
+                "symfony/process": "^4.2 || ^5"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-main": "6.0-dev"
+                }
+            },
+            "autoload": {
+                "classmap": [
+                    "src/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "BSD-3-Clause"
+            ],
+            "authors": [
+                {
+                    "name": "Sebastian Bergmann",
+                    "email": "sebastian@phpunit.de"
+                },
+                {
+                    "name": "Kore Nordmann",
+                    "email": "mail@kore-nordmann.de"
+                }
+            ],
+            "description": "Diff implementation",
+            "homepage": "https://github.com/sebastianbergmann/diff",
+            "keywords": [
+                "diff",
+                "udiff",
+                "unidiff",
+                "unified diff"
+            ],
+            "support": {
+                "issues": "https://github.com/sebastianbergmann/diff/issues",
+                "security": "https://github.com/sebastianbergmann/diff/security/policy",
+                "source": "https://github.com/sebastianbergmann/diff/tree/6.0.2"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/sebastianbergmann",
+                    "type": "github"
+                }
+            ],
+            "time": "2024-07-03T04:53:05+00:00"
+        },
+        {
+            "name": "sebastian/environment",
+            "version": "7.2.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/sebastianbergmann/environment.git",
+                "reference": "a5c75038693ad2e8d4b6c15ba2403532647830c4"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/sebastianbergmann/environment/zipball/a5c75038693ad2e8d4b6c15ba2403532647830c4",
+                "reference": "a5c75038693ad2e8d4b6c15ba2403532647830c4",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.2"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "^11.3"
+            },
+            "suggest": {
+                "ext-posix": "*"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-main": "7.2-dev"
+                }
+            },
+            "autoload": {
+                "classmap": [
+                    "src/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "BSD-3-Clause"
+            ],
+            "authors": [
+                {
+                    "name": "Sebastian Bergmann",
+                    "email": "sebastian@phpunit.de"
+                }
+            ],
+            "description": "Provides functionality to handle HHVM/PHP environments",
+            "homepage": "https://github.com/sebastianbergmann/environment",
+            "keywords": [
+                "Xdebug",
+                "environment",
+                "hhvm"
+            ],
+            "support": {
+                "issues": "https://github.com/sebastianbergmann/environment/issues",
+                "security": "https://github.com/sebastianbergmann/environment/security/policy",
+                "source": "https://github.com/sebastianbergmann/environment/tree/7.2.1"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/sebastianbergmann",
+                    "type": "github"
+                },
+                {
+                    "url": "https://liberapay.com/sebastianbergmann",
+                    "type": "liberapay"
+                },
+                {
+                    "url": "https://thanks.dev/u/gh/sebastianbergmann",
+                    "type": "thanks_dev"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/sebastian/environment",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2025-05-21T11:55:47+00:00"
+        },
+        {
+            "name": "sebastian/exporter",
+            "version": "6.3.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/sebastianbergmann/exporter.git",
+                "reference": "3473f61172093b2da7de1fb5782e1f24cc036dc3"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/sebastianbergmann/exporter/zipball/3473f61172093b2da7de1fb5782e1f24cc036dc3",
+                "reference": "3473f61172093b2da7de1fb5782e1f24cc036dc3",
+                "shasum": ""
+            },
+            "require": {
+                "ext-mbstring": "*",
+                "php": ">=8.2",
+                "sebastian/recursion-context": "^6.0"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "^11.3"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-main": "6.1-dev"
+                }
+            },
+            "autoload": {
+                "classmap": [
+                    "src/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "BSD-3-Clause"
+            ],
+            "authors": [
+                {
+                    "name": "Sebastian Bergmann",
+                    "email": "sebastian@phpunit.de"
+                },
+                {
+                    "name": "Jeff Welch",
+                    "email": "whatthejeff@gmail.com"
+                },
+                {
+                    "name": "Volker Dusch",
+                    "email": "github@wallbash.com"
+                },
+                {
+                    "name": "Adam Harvey",
+                    "email": "aharvey@php.net"
+                },
+                {
+                    "name": "Bernhard Schussek",
+                    "email": "bschussek@gmail.com"
+                }
+            ],
+            "description": "Provides the functionality to export PHP variables for visualization",
+            "homepage": "https://www.github.com/sebastianbergmann/exporter",
+            "keywords": [
+                "export",
+                "exporter"
+            ],
+            "support": {
+                "issues": "https://github.com/sebastianbergmann/exporter/issues",
+                "security": "https://github.com/sebastianbergmann/exporter/security/policy",
+                "source": "https://github.com/sebastianbergmann/exporter/tree/6.3.0"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/sebastianbergmann",
+                    "type": "github"
+                }
+            ],
+            "time": "2024-12-05T09:17:50+00:00"
+        },
+        {
+            "name": "sebastian/global-state",
+            "version": "7.0.2",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/sebastianbergmann/global-state.git",
+                "reference": "3be331570a721f9a4b5917f4209773de17f747d7"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/sebastianbergmann/global-state/zipball/3be331570a721f9a4b5917f4209773de17f747d7",
+                "reference": "3be331570a721f9a4b5917f4209773de17f747d7",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.2",
+                "sebastian/object-reflector": "^4.0",
+                "sebastian/recursion-context": "^6.0"
+            },
+            "require-dev": {
+                "ext-dom": "*",
+                "phpunit/phpunit": "^11.0"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-main": "7.0-dev"
+                }
+            },
+            "autoload": {
+                "classmap": [
+                    "src/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "BSD-3-Clause"
+            ],
+            "authors": [
+                {
+                    "name": "Sebastian Bergmann",
+                    "email": "sebastian@phpunit.de"
+                }
+            ],
+            "description": "Snapshotting of global state",
+            "homepage": "https://www.github.com/sebastianbergmann/global-state",
+            "keywords": [
+                "global state"
+            ],
+            "support": {
+                "issues": "https://github.com/sebastianbergmann/global-state/issues",
+                "security": "https://github.com/sebastianbergmann/global-state/security/policy",
+                "source": "https://github.com/sebastianbergmann/global-state/tree/7.0.2"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/sebastianbergmann",
+                    "type": "github"
+                }
+            ],
+            "time": "2024-07-03T04:57:36+00:00"
+        },
+        {
+            "name": "sebastian/lines-of-code",
+            "version": "3.0.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/sebastianbergmann/lines-of-code.git",
+                "reference": "d36ad0d782e5756913e42ad87cb2890f4ffe467a"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/sebastianbergmann/lines-of-code/zipball/d36ad0d782e5756913e42ad87cb2890f4ffe467a",
+                "reference": "d36ad0d782e5756913e42ad87cb2890f4ffe467a",
+                "shasum": ""
+            },
+            "require": {
+                "nikic/php-parser": "^5.0",
+                "php": ">=8.2"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "^11.0"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-main": "3.0-dev"
+                }
+            },
+            "autoload": {
+                "classmap": [
+                    "src/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "BSD-3-Clause"
+            ],
+            "authors": [
+                {
+                    "name": "Sebastian Bergmann",
+                    "email": "sebastian@phpunit.de",
+                    "role": "lead"
+                }
+            ],
+            "description": "Library for counting the lines of code in PHP source code",
+            "homepage": "https://github.com/sebastianbergmann/lines-of-code",
+            "support": {
+                "issues": "https://github.com/sebastianbergmann/lines-of-code/issues",
+                "security": "https://github.com/sebastianbergmann/lines-of-code/security/policy",
+                "source": "https://github.com/sebastianbergmann/lines-of-code/tree/3.0.1"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/sebastianbergmann",
+                    "type": "github"
+                }
+            ],
+            "time": "2024-07-03T04:58:38+00:00"
+        },
+        {
+            "name": "sebastian/object-enumerator",
+            "version": "6.0.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/sebastianbergmann/object-enumerator.git",
+                "reference": "f5b498e631a74204185071eb41f33f38d64608aa"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/sebastianbergmann/object-enumerator/zipball/f5b498e631a74204185071eb41f33f38d64608aa",
+                "reference": "f5b498e631a74204185071eb41f33f38d64608aa",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.2",
+                "sebastian/object-reflector": "^4.0",
+                "sebastian/recursion-context": "^6.0"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "^11.0"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-main": "6.0-dev"
+                }
+            },
+            "autoload": {
+                "classmap": [
+                    "src/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "BSD-3-Clause"
+            ],
+            "authors": [
+                {
+                    "name": "Sebastian Bergmann",
+                    "email": "sebastian@phpunit.de"
+                }
+            ],
+            "description": "Traverses array structures and object graphs to enumerate all referenced objects",
+            "homepage": "https://github.com/sebastianbergmann/object-enumerator/",
+            "support": {
+                "issues": "https://github.com/sebastianbergmann/object-enumerator/issues",
+                "security": "https://github.com/sebastianbergmann/object-enumerator/security/policy",
+                "source": "https://github.com/sebastianbergmann/object-enumerator/tree/6.0.1"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/sebastianbergmann",
+                    "type": "github"
+                }
+            ],
+            "time": "2024-07-03T05:00:13+00:00"
+        },
+        {
+            "name": "sebastian/object-reflector",
+            "version": "4.0.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/sebastianbergmann/object-reflector.git",
+                "reference": "6e1a43b411b2ad34146dee7524cb13a068bb35f9"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/sebastianbergmann/object-reflector/zipball/6e1a43b411b2ad34146dee7524cb13a068bb35f9",
+                "reference": "6e1a43b411b2ad34146dee7524cb13a068bb35f9",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.2"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "^11.0"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-main": "4.0-dev"
+                }
+            },
+            "autoload": {
+                "classmap": [
+                    "src/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "BSD-3-Clause"
+            ],
+            "authors": [
+                {
+                    "name": "Sebastian Bergmann",
+                    "email": "sebastian@phpunit.de"
+                }
+            ],
+            "description": "Allows reflection of object attributes, including inherited and non-public ones",
+            "homepage": "https://github.com/sebastianbergmann/object-reflector/",
+            "support": {
+                "issues": "https://github.com/sebastianbergmann/object-reflector/issues",
+                "security": "https://github.com/sebastianbergmann/object-reflector/security/policy",
+                "source": "https://github.com/sebastianbergmann/object-reflector/tree/4.0.1"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/sebastianbergmann",
+                    "type": "github"
+                }
+            ],
+            "time": "2024-07-03T05:01:32+00:00"
+        },
+        {
+            "name": "sebastian/recursion-context",
+            "version": "6.0.2",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/sebastianbergmann/recursion-context.git",
+                "reference": "694d156164372abbd149a4b85ccda2e4670c0e16"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/sebastianbergmann/recursion-context/zipball/694d156164372abbd149a4b85ccda2e4670c0e16",
+                "reference": "694d156164372abbd149a4b85ccda2e4670c0e16",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.2"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "^11.0"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-main": "6.0-dev"
+                }
+            },
+            "autoload": {
+                "classmap": [
+                    "src/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "BSD-3-Clause"
+            ],
+            "authors": [
+                {
+                    "name": "Sebastian Bergmann",
+                    "email": "sebastian@phpunit.de"
+                },
+                {
+                    "name": "Jeff Welch",
+                    "email": "whatthejeff@gmail.com"
+                },
+                {
+                    "name": "Adam Harvey",
+                    "email": "aharvey@php.net"
+                }
+            ],
+            "description": "Provides functionality to recursively process PHP variables",
+            "homepage": "https://github.com/sebastianbergmann/recursion-context",
+            "support": {
+                "issues": "https://github.com/sebastianbergmann/recursion-context/issues",
+                "security": "https://github.com/sebastianbergmann/recursion-context/security/policy",
+                "source": "https://github.com/sebastianbergmann/recursion-context/tree/6.0.2"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/sebastianbergmann",
+                    "type": "github"
+                }
+            ],
+            "time": "2024-07-03T05:10:34+00:00"
+        },
+        {
+            "name": "sebastian/type",
+            "version": "5.1.2",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/sebastianbergmann/type.git",
+                "reference": "a8a7e30534b0eb0c77cd9d07e82de1a114389f5e"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/sebastianbergmann/type/zipball/a8a7e30534b0eb0c77cd9d07e82de1a114389f5e",
+                "reference": "a8a7e30534b0eb0c77cd9d07e82de1a114389f5e",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.2"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "^11.3"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-main": "5.1-dev"
+                }
+            },
+            "autoload": {
+                "classmap": [
+                    "src/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "BSD-3-Clause"
+            ],
+            "authors": [
+                {
+                    "name": "Sebastian Bergmann",
+                    "email": "sebastian@phpunit.de",
+                    "role": "lead"
+                }
+            ],
+            "description": "Collection of value objects that represent the types of the PHP type system",
+            "homepage": "https://github.com/sebastianbergmann/type",
+            "support": {
+                "issues": "https://github.com/sebastianbergmann/type/issues",
+                "security": "https://github.com/sebastianbergmann/type/security/policy",
+                "source": "https://github.com/sebastianbergmann/type/tree/5.1.2"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/sebastianbergmann",
+                    "type": "github"
+                }
+            ],
+            "time": "2025-03-18T13:35:50+00:00"
+        },
+        {
+            "name": "sebastian/version",
+            "version": "5.0.2",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/sebastianbergmann/version.git",
+                "reference": "c687e3387b99f5b03b6caa64c74b63e2936ff874"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/sebastianbergmann/version/zipball/c687e3387b99f5b03b6caa64c74b63e2936ff874",
+                "reference": "c687e3387b99f5b03b6caa64c74b63e2936ff874",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.2"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-main": "5.0-dev"
+                }
+            },
+            "autoload": {
+                "classmap": [
+                    "src/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "BSD-3-Clause"
+            ],
+            "authors": [
+                {
+                    "name": "Sebastian Bergmann",
+                    "email": "sebastian@phpunit.de",
+                    "role": "lead"
+                }
+            ],
+            "description": "Library that helps with managing the version number of Git-hosted PHP projects",
+            "homepage": "https://github.com/sebastianbergmann/version",
+            "support": {
+                "issues": "https://github.com/sebastianbergmann/version/issues",
+                "security": "https://github.com/sebastianbergmann/version/security/policy",
+                "source": "https://github.com/sebastianbergmann/version/tree/5.0.2"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/sebastianbergmann",
+                    "type": "github"
+                }
+            ],
+            "time": "2024-10-09T05:16:32+00:00"
+        },
+        {
+            "name": "staabm/side-effects-detector",
+            "version": "1.0.5",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/staabm/side-effects-detector.git",
+                "reference": "d8334211a140ce329c13726d4a715adbddd0a163"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/staabm/side-effects-detector/zipball/d8334211a140ce329c13726d4a715adbddd0a163",
+                "reference": "d8334211a140ce329c13726d4a715adbddd0a163",
+                "shasum": ""
+            },
+            "require": {
+                "ext-tokenizer": "*",
+                "php": "^7.4 || ^8.0"
+            },
+            "require-dev": {
+                "phpstan/extension-installer": "^1.4.3",
+                "phpstan/phpstan": "^1.12.6",
+                "phpunit/phpunit": "^9.6.21",
+                "symfony/var-dumper": "^5.4.43",
+                "tomasvotruba/type-coverage": "1.0.0",
+                "tomasvotruba/unused-public": "1.0.0"
+            },
+            "type": "library",
+            "autoload": {
+                "classmap": [
+                    "lib/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "description": "A static analysis tool to detect side effects in PHP code",
+            "keywords": [
+                "static analysis"
+            ],
+            "support": {
+                "issues": "https://github.com/staabm/side-effects-detector/issues",
+                "source": "https://github.com/staabm/side-effects-detector/tree/1.0.5"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/staabm",
+                    "type": "github"
+                }
+            ],
+            "time": "2024-10-20T05:08:20+00:00"
+        },
+        {
+            "name": "symfony/yaml",
+            "version": "v7.3.2",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/yaml.git",
+                "reference": "b8d7d868da9eb0919e99c8830431ea087d6aae30"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/yaml/zipball/b8d7d868da9eb0919e99c8830431ea087d6aae30",
+                "reference": "b8d7d868da9eb0919e99c8830431ea087d6aae30",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.2",
+                "symfony/deprecation-contracts": "^2.5|^3.0",
+                "symfony/polyfill-ctype": "^1.8"
+            },
+            "conflict": {
+                "symfony/console": "<6.4"
+            },
+            "require-dev": {
+                "symfony/console": "^6.4|^7.0"
+            },
+            "bin": [
+                "Resources/bin/yaml-lint"
+            ],
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\Component\\Yaml\\": ""
+                },
+                "exclude-from-classmap": [
+                    "/Tests/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Fabien Potencier",
+                    "email": "fabien@symfony.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Loads and dumps YAML files",
+            "homepage": "https://symfony.com",
+            "support": {
+                "source": "https://github.com/symfony/yaml/tree/v7.3.2"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://github.com/nicolas-grekas",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2025-07-10T08:47:49+00:00"
+        },
+        {
+            "name": "theseer/tokenizer",
+            "version": "1.2.3",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/theseer/tokenizer.git",
+                "reference": "737eda637ed5e28c3413cb1ebe8bb52cbf1ca7a2"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/theseer/tokenizer/zipball/737eda637ed5e28c3413cb1ebe8bb52cbf1ca7a2",
+                "reference": "737eda637ed5e28c3413cb1ebe8bb52cbf1ca7a2",
+                "shasum": ""
+            },
+            "require": {
+                "ext-dom": "*",
+                "ext-tokenizer": "*",
+                "ext-xmlwriter": "*",
+                "php": "^7.2 || ^8.0"
+            },
+            "type": "library",
+            "autoload": {
+                "classmap": [
+                    "src/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "BSD-3-Clause"
+            ],
+            "authors": [
+                {
+                    "name": "Arne Blankerts",
+                    "email": "arne@blankerts.de",
+                    "role": "Developer"
+                }
+            ],
+            "description": "A small library for converting tokenized PHP source code into XML and potentially other formats",
+            "support": {
+                "issues": "https://github.com/theseer/tokenizer/issues",
+                "source": "https://github.com/theseer/tokenizer/tree/1.2.3"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/theseer",
+                    "type": "github"
+                }
+            ],
+            "time": "2024-03-03T12:36:25+00:00"
+        }
+    ],
+    "aliases": [],
+    "minimum-stability": "stable",
+    "stability-flags": {},
+    "prefer-stable": true,
+    "prefer-lowest": false,
+    "platform": {
+        "php": "^8.2"
+    },
+    "platform-dev": {},
+    "plugin-api-version": "2.6.0"
+}
diff --git a/config/app.php b/config/app.php
new file mode 100644
index 0000000..423eed5
--- /dev/null
+++ b/config/app.php
@@ -0,0 +1,126 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Application Name
+    |--------------------------------------------------------------------------
+    |
+    | This value is the name of your application, which will be used when the
+    | framework needs to place the application's name in a notification or
+    | other UI elements where an application name needs to be displayed.
+    |
+    */
+
+    'name' => env('APP_NAME', 'Laravel'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Application Environment
+    |--------------------------------------------------------------------------
+    |
+    | This value determines the "environment" your application is currently
+    | running in. This may determine how you prefer to configure various
+    | services the application utilizes. Set this in your ".env" file.
+    |
+    */
+
+    'env' => env('APP_ENV', 'production'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Application Debug Mode
+    |--------------------------------------------------------------------------
+    |
+    | When your application is in debug mode, detailed error messages with
+    | stack traces will be shown on every error that occurs within your
+    | application. If disabled, a simple generic error page is shown.
+    |
+    */
+
+    'debug' => (bool) env('APP_DEBUG', false),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Application URL
+    |--------------------------------------------------------------------------
+    |
+    | This URL is used by the console to properly generate URLs when using
+    | the Artisan command line tool. You should set this to the root of
+    | the application so that it's available within Artisan commands.
+    |
+    */
+
+    'url' => env('APP_URL', 'http://localhost'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Application Timezone
+    |--------------------------------------------------------------------------
+    |
+    | Here you may specify the default timezone for your application, which
+    | will be used by the PHP date and date-time functions. The timezone
+    | is set to "UTC" by default as it is suitable for most use cases.
+    |
+    */
+
+    'timezone' => 'UTC',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Application Locale Configuration
+    |--------------------------------------------------------------------------
+    |
+    | The application locale determines the default locale that will be used
+    | by Laravel's translation / localization methods. This option can be
+    | set to any locale for which you plan to have translation strings.
+    |
+    */
+
+    'locale' => env('APP_LOCALE', 'en'),
+
+    'fallback_locale' => env('APP_FALLBACK_LOCALE', 'en'),
+
+    'faker_locale' => env('APP_FAKER_LOCALE', 'en_US'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Encryption Key
+    |--------------------------------------------------------------------------
+    |
+    | This key is utilized by Laravel's encryption services and should be set
+    | to a random, 32 character string to ensure that all encrypted values
+    | are secure. You should do this prior to deploying the application.
+    |
+    */
+
+    'cipher' => 'AES-256-CBC',
+
+    'key' => env('APP_KEY'),
+
+    'previous_keys' => [
+        ...array_filter(
+            explode(',', (string) env('APP_PREVIOUS_KEYS', ''))
+        ),
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Maintenance Mode Driver
+    |--------------------------------------------------------------------------
+    |
+    | These configuration options determine the driver used to determine and
+    | manage Laravel's "maintenance mode" status. The "cache" driver will
+    | allow maintenance mode to be controlled across multiple machines.
+    |
+    | Supported drivers: "file", "cache"
+    |
+    */
+
+    'maintenance' => [
+        'driver' => env('APP_MAINTENANCE_DRIVER', 'file'),
+        'store' => env('APP_MAINTENANCE_STORE', 'database'),
+    ],
+
+];
diff --git a/config/auth.php b/config/auth.php
new file mode 100644
index 0000000..7d1eb0d
--- /dev/null
+++ b/config/auth.php
@@ -0,0 +1,115 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Authentication Defaults
+    |--------------------------------------------------------------------------
+    |
+    | This option defines the default authentication "guard" and password
+    | reset "broker" for your application. You may change these values
+    | as required, but they're a perfect start for most applications.
+    |
+    */
+
+    'defaults' => [
+        'guard' => env('AUTH_GUARD', 'web'),
+        'passwords' => env('AUTH_PASSWORD_BROKER', 'users'),
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Authentication Guards
+    |--------------------------------------------------------------------------
+    |
+    | Next, you may define every authentication guard for your application.
+    | Of course, a great default configuration has been defined for you
+    | which utilizes session storage plus the Eloquent user provider.
+    |
+    | All authentication guards have a user provider, which defines how the
+    | users are actually retrieved out of your database or other storage
+    | system used by the application. Typically, Eloquent is utilized.
+    |
+    | Supported: "session"
+    |
+    */
+
+    'guards' => [
+        'web' => [
+            'driver' => 'session',
+            'provider' => 'users',
+        ],
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | User Providers
+    |--------------------------------------------------------------------------
+    |
+    | All authentication guards have a user provider, which defines how the
+    | users are actually retrieved out of your database or other storage
+    | system used by the application. Typically, Eloquent is utilized.
+    |
+    | If you have multiple user tables or models you may configure multiple
+    | providers to represent the model / table. These providers may then
+    | be assigned to any extra authentication guards you have defined.
+    |
+    | Supported: "database", "eloquent"
+    |
+    */
+
+    'providers' => [
+        'users' => [
+            'driver' => 'eloquent',
+            'model' => env('AUTH_MODEL', App\Models\User::class),
+        ],
+
+        // 'users' => [
+        //     'driver' => 'database',
+        //     'table' => 'users',
+        // ],
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Resetting Passwords
+    |--------------------------------------------------------------------------
+    |
+    | These configuration options specify the behavior of Laravel's password
+    | reset functionality, including the table utilized for token storage
+    | and the user provider that is invoked to actually retrieve users.
+    |
+    | The expiry time is the number of minutes that each reset token will be
+    | considered valid. This security feature keeps tokens short-lived so
+    | they have less time to be guessed. You may change this as needed.
+    |
+    | The throttle setting is the number of seconds a user must wait before
+    | generating more password reset tokens. This prevents the user from
+    | quickly generating a very large amount of password reset tokens.
+    |
+    */
+
+    'passwords' => [
+        'users' => [
+            'provider' => 'users',
+            'table' => env('AUTH_PASSWORD_RESET_TOKEN_TABLE', 'password_reset_tokens'),
+            'expire' => 60,
+            'throttle' => 60,
+        ],
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Password Confirmation Timeout
+    |--------------------------------------------------------------------------
+    |
+    | Here you may define the number of seconds before a password confirmation
+    | window expires and users are asked to re-enter their password via the
+    | confirmation screen. By default, the timeout lasts for three hours.
+    |
+    */
+
+    'password_timeout' => env('AUTH_PASSWORD_TIMEOUT', 10800),
+
+];
diff --git a/config/cache.php b/config/cache.php
new file mode 100644
index 0000000..c2d927d
--- /dev/null
+++ b/config/cache.php
@@ -0,0 +1,108 @@
+<?php
+
+use Illuminate\Support\Str;
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Default Cache Store
+    |--------------------------------------------------------------------------
+    |
+    | This option controls the default cache store that will be used by the
+    | framework. This connection is utilized if another isn't explicitly
+    | specified when running a cache operation inside the application.
+    |
+    */
+
+    'default' => env('CACHE_STORE', 'database'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Cache Stores
+    |--------------------------------------------------------------------------
+    |
+    | Here you may define all of the cache "stores" for your application as
+    | well as their drivers. You may even define multiple stores for the
+    | same cache driver to group types of items stored in your caches.
+    |
+    | Supported drivers: "array", "database", "file", "memcached",
+    |                    "redis", "dynamodb", "octane", "null"
+    |
+    */
+
+    'stores' => [
+
+        'array' => [
+            'driver' => 'array',
+            'serialize' => false,
+        ],
+
+        'database' => [
+            'driver' => 'database',
+            'connection' => env('DB_CACHE_CONNECTION'),
+            'table' => env('DB_CACHE_TABLE', 'cache'),
+            'lock_connection' => env('DB_CACHE_LOCK_CONNECTION'),
+            'lock_table' => env('DB_CACHE_LOCK_TABLE'),
+        ],
+
+        'file' => [
+            'driver' => 'file',
+            'path' => storage_path('framework/cache/data'),
+            'lock_path' => storage_path('framework/cache/data'),
+        ],
+
+        'memcached' => [
+            'driver' => 'memcached',
+            'persistent_id' => env('MEMCACHED_PERSISTENT_ID'),
+            'sasl' => [
+                env('MEMCACHED_USERNAME'),
+                env('MEMCACHED_PASSWORD'),
+            ],
+            'options' => [
+                // Memcached::OPT_CONNECT_TIMEOUT => 2000,
+            ],
+            'servers' => [
+                [
+                    'host' => env('MEMCACHED_HOST', '127.0.0.1'),
+                    'port' => env('MEMCACHED_PORT', 11211),
+                    'weight' => 100,
+                ],
+            ],
+        ],
+
+        'redis' => [
+            'driver' => 'redis',
+            'connection' => env('REDIS_CACHE_CONNECTION', 'cache'),
+            'lock_connection' => env('REDIS_CACHE_LOCK_CONNECTION', 'default'),
+        ],
+
+        'dynamodb' => [
+            'driver' => 'dynamodb',
+            'key' => env('AWS_ACCESS_KEY_ID'),
+            'secret' => env('AWS_SECRET_ACCESS_KEY'),
+            'region' => env('AWS_DEFAULT_REGION', 'us-east-1'),
+            'table' => env('DYNAMODB_CACHE_TABLE', 'cache'),
+            'endpoint' => env('DYNAMODB_ENDPOINT'),
+        ],
+
+        'octane' => [
+            'driver' => 'octane',
+        ],
+
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Cache Key Prefix
+    |--------------------------------------------------------------------------
+    |
+    | When utilizing the APC, database, memcached, Redis, and DynamoDB cache
+    | stores, there might be other applications using the same cache. For
+    | that reason, you may prefix every cache key to avoid collisions.
+    |
+    */
+
+    'prefix' => env('CACHE_PREFIX', Str::slug((string) env('APP_NAME', 'laravel')).'-cache-'),
+
+];
diff --git a/config/database.php b/config/database.php
new file mode 100644
index 0000000..5b318f5
--- /dev/null
+++ b/config/database.php
@@ -0,0 +1,174 @@
+<?php
+
+use Illuminate\Support\Str;
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Default Database Connection Name
+    |--------------------------------------------------------------------------
+    |
+    | Here you may specify which of the database connections below you wish
+    | to use as your default connection for database operations. This is
+    | the connection which will be utilized unless another connection
+    | is explicitly specified when you execute a query / statement.
+    |
+    */
+
+    'default' => env('DB_CONNECTION', 'sqlite'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Database Connections
+    |--------------------------------------------------------------------------
+    |
+    | Below are all of the database connections defined for your application.
+    | An example configuration is provided for each database system which
+    | is supported by Laravel. You're free to add / remove connections.
+    |
+    */
+
+    'connections' => [
+
+        'sqlite' => [
+            'driver' => 'sqlite',
+            'url' => env('DB_URL'),
+            'database' => env('DB_DATABASE', database_path('database.sqlite')),
+            'prefix' => '',
+            'foreign_key_constraints' => env('DB_FOREIGN_KEYS', true),
+            'busy_timeout' => null,
+            'journal_mode' => null,
+            'synchronous' => null,
+        ],
+
+        'mysql' => [
+            'driver' => 'mysql',
+            'url' => env('DB_URL'),
+            'host' => env('DB_HOST', '127.0.0.1'),
+            'port' => env('DB_PORT', '3306'),
+            'database' => env('DB_DATABASE', 'laravel'),
+            'username' => env('DB_USERNAME', 'root'),
+            'password' => env('DB_PASSWORD', ''),
+            'unix_socket' => env('DB_SOCKET', ''),
+            'charset' => env('DB_CHARSET', 'utf8mb4'),
+            'collation' => env('DB_COLLATION', 'utf8mb4_unicode_ci'),
+            'prefix' => '',
+            'prefix_indexes' => true,
+            'strict' => true,
+            'engine' => null,
+            'options' => extension_loaded('pdo_mysql') ? array_filter([
+                PDO::MYSQL_ATTR_SSL_CA => env('MYSQL_ATTR_SSL_CA'),
+            ]) : [],
+        ],
+
+        'mariadb' => [
+            'driver' => 'mariadb',
+            'url' => env('DB_URL'),
+            'host' => env('DB_HOST', '127.0.0.1'),
+            'port' => env('DB_PORT', '3306'),
+            'database' => env('DB_DATABASE', 'laravel'),
+            'username' => env('DB_USERNAME', 'root'),
+            'password' => env('DB_PASSWORD', ''),
+            'unix_socket' => env('DB_SOCKET', ''),
+            'charset' => env('DB_CHARSET', 'utf8mb4'),
+            'collation' => env('DB_COLLATION', 'utf8mb4_unicode_ci'),
+            'prefix' => '',
+            'prefix_indexes' => true,
+            'strict' => true,
+            'engine' => null,
+            'options' => extension_loaded('pdo_mysql') ? array_filter([
+                PDO::MYSQL_ATTR_SSL_CA => env('MYSQL_ATTR_SSL_CA'),
+            ]) : [],
+        ],
+
+        'pgsql' => [
+            'driver' => 'pgsql',
+            'url' => env('DB_URL'),
+            'host' => env('DB_HOST', '127.0.0.1'),
+            'port' => env('DB_PORT', '5432'),
+            'database' => env('DB_DATABASE', 'laravel'),
+            'username' => env('DB_USERNAME', 'root'),
+            'password' => env('DB_PASSWORD', ''),
+            'charset' => env('DB_CHARSET', 'utf8'),
+            'prefix' => '',
+            'prefix_indexes' => true,
+            'search_path' => 'public',
+            'sslmode' => 'prefer',
+        ],
+
+        'sqlsrv' => [
+            'driver' => 'sqlsrv',
+            'url' => env('DB_URL'),
+            'host' => env('DB_HOST', 'localhost'),
+            'port' => env('DB_PORT', '1433'),
+            'database' => env('DB_DATABASE', 'laravel'),
+            'username' => env('DB_USERNAME', 'root'),
+            'password' => env('DB_PASSWORD', ''),
+            'charset' => env('DB_CHARSET', 'utf8'),
+            'prefix' => '',
+            'prefix_indexes' => true,
+            // 'encrypt' => env('DB_ENCRYPT', 'yes'),
+            // 'trust_server_certificate' => env('DB_TRUST_SERVER_CERTIFICATE', 'false'),
+        ],
+
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Migration Repository Table
+    |--------------------------------------------------------------------------
+    |
+    | This table keeps track of all the migrations that have already run for
+    | your application. Using this information, we can determine which of
+    | the migrations on disk haven't actually been run on the database.
+    |
+    */
+
+    'migrations' => [
+        'table' => 'migrations',
+        'update_date_on_publish' => true,
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Redis Databases
+    |--------------------------------------------------------------------------
+    |
+    | Redis is an open source, fast, and advanced key-value store that also
+    | provides a richer body of commands than a typical key-value system
+    | such as Memcached. You may define your connection settings here.
+    |
+    */
+
+    'redis' => [
+
+        'client' => env('REDIS_CLIENT', 'phpredis'),
+
+        'options' => [
+            'cluster' => env('REDIS_CLUSTER', 'redis'),
+            'prefix' => env('REDIS_PREFIX', Str::slug((string) env('APP_NAME', 'laravel')).'-database-'),
+            'persistent' => env('REDIS_PERSISTENT', false),
+        ],
+
+        'default' => [
+            'url' => env('REDIS_URL'),
+            'host' => env('REDIS_HOST', '127.0.0.1'),
+            'username' => env('REDIS_USERNAME'),
+            'password' => env('REDIS_PASSWORD'),
+            'port' => env('REDIS_PORT', '6379'),
+            'database' => env('REDIS_DB', '0'),
+        ],
+
+        'cache' => [
+            'url' => env('REDIS_URL'),
+            'host' => env('REDIS_HOST', '127.0.0.1'),
+            'username' => env('REDIS_USERNAME'),
+            'password' => env('REDIS_PASSWORD'),
+            'port' => env('REDIS_PORT', '6379'),
+            'database' => env('REDIS_CACHE_DB', '1'),
+        ],
+
+    ],
+
+];
diff --git a/config/filesystems.php b/config/filesystems.php
new file mode 100644
index 0000000..3d671bd
--- /dev/null
+++ b/config/filesystems.php
@@ -0,0 +1,80 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Default Filesystem Disk
+    |--------------------------------------------------------------------------
+    |
+    | Here you may specify the default filesystem disk that should be used
+    | by the framework. The "local" disk, as well as a variety of cloud
+    | based disks are available to your application for file storage.
+    |
+    */
+
+    'default' => env('FILESYSTEM_DISK', 'local'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Filesystem Disks
+    |--------------------------------------------------------------------------
+    |
+    | Below you may configure as many filesystem disks as necessary, and you
+    | may even configure multiple disks for the same driver. Examples for
+    | most supported storage drivers are configured here for reference.
+    |
+    | Supported drivers: "local", "ftp", "sftp", "s3"
+    |
+    */
+
+    'disks' => [
+
+        'local' => [
+            'driver' => 'local',
+            'root' => storage_path('app/private'),
+            'serve' => true,
+            'throw' => false,
+            'report' => false,
+        ],
+
+        'public' => [
+            'driver' => 'local',
+            'root' => storage_path('app/public'),
+            'url' => env('APP_URL').'/storage',
+            'visibility' => 'public',
+            'throw' => false,
+            'report' => false,
+        ],
+
+        's3' => [
+            'driver' => 's3',
+            'key' => env('AWS_ACCESS_KEY_ID'),
+            'secret' => env('AWS_SECRET_ACCESS_KEY'),
+            'region' => env('AWS_DEFAULT_REGION'),
+            'bucket' => env('AWS_BUCKET'),
+            'url' => env('AWS_URL'),
+            'endpoint' => env('AWS_ENDPOINT'),
+            'use_path_style_endpoint' => env('AWS_USE_PATH_STYLE_ENDPOINT', false),
+            'throw' => false,
+            'report' => false,
+        ],
+
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Symbolic Links
+    |--------------------------------------------------------------------------
+    |
+    | Here you may configure the symbolic links that will be created when the
+    | `storage:link` Artisan command is executed. The array keys should be
+    | the locations of the links and the values should be their targets.
+    |
+    */
+
+    'links' => [
+        public_path('storage') => storage_path('app/public'),
+    ],
+
+];
diff --git a/config/logging.php b/config/logging.php
new file mode 100644
index 0000000..9e998a4
--- /dev/null
+++ b/config/logging.php
@@ -0,0 +1,132 @@
+<?php
+
+use Monolog\Handler\NullHandler;
+use Monolog\Handler\StreamHandler;
+use Monolog\Handler\SyslogUdpHandler;
+use Monolog\Processor\PsrLogMessageProcessor;
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Default Log Channel
+    |--------------------------------------------------------------------------
+    |
+    | This option defines the default log channel that is utilized to write
+    | messages to your logs. The value provided here should match one of
+    | the channels present in the list of "channels" configured below.
+    |
+    */
+
+    'default' => env('LOG_CHANNEL', 'stack'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Deprecations Log Channel
+    |--------------------------------------------------------------------------
+    |
+    | This option controls the log channel that should be used to log warnings
+    | regarding deprecated PHP and library features. This allows you to get
+    | your application ready for upcoming major versions of dependencies.
+    |
+    */
+
+    'deprecations' => [
+        'channel' => env('LOG_DEPRECATIONS_CHANNEL', 'null'),
+        'trace' => env('LOG_DEPRECATIONS_TRACE', false),
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Log Channels
+    |--------------------------------------------------------------------------
+    |
+    | Here you may configure the log channels for your application. Laravel
+    | utilizes the Monolog PHP logging library, which includes a variety
+    | of powerful log handlers and formatters that you're free to use.
+    |
+    | Available drivers: "single", "daily", "slack", "syslog",
+    |                    "errorlog", "monolog", "custom", "stack"
+    |
+    */
+
+    'channels' => [
+
+        'stack' => [
+            'driver' => 'stack',
+            'channels' => explode(',', (string) env('LOG_STACK', 'single')),
+            'ignore_exceptions' => false,
+        ],
+
+        'single' => [
+            'driver' => 'single',
+            'path' => storage_path('logs/laravel.log'),
+            'level' => env('LOG_LEVEL', 'debug'),
+            'replace_placeholders' => true,
+        ],
+
+        'daily' => [
+            'driver' => 'daily',
+            'path' => storage_path('logs/laravel.log'),
+            'level' => env('LOG_LEVEL', 'debug'),
+            'days' => env('LOG_DAILY_DAYS', 14),
+            'replace_placeholders' => true,
+        ],
+
+        'slack' => [
+            'driver' => 'slack',
+            'url' => env('LOG_SLACK_WEBHOOK_URL'),
+            'username' => env('LOG_SLACK_USERNAME', 'Laravel Log'),
+            'emoji' => env('LOG_SLACK_EMOJI', ':boom:'),
+            'level' => env('LOG_LEVEL', 'critical'),
+            'replace_placeholders' => true,
+        ],
+
+        'papertrail' => [
+            'driver' => 'monolog',
+            'level' => env('LOG_LEVEL', 'debug'),
+            'handler' => env('LOG_PAPERTRAIL_HANDLER', SyslogUdpHandler::class),
+            'handler_with' => [
+                'host' => env('PAPERTRAIL_URL'),
+                'port' => env('PAPERTRAIL_PORT'),
+                'connectionString' => 'tls://'.env('PAPERTRAIL_URL').':'.env('PAPERTRAIL_PORT'),
+            ],
+            'processors' => [PsrLogMessageProcessor::class],
+        ],
+
+        'stderr' => [
+            'driver' => 'monolog',
+            'level' => env('LOG_LEVEL', 'debug'),
+            'handler' => StreamHandler::class,
+            'handler_with' => [
+                'stream' => 'php://stderr',
+            ],
+            'formatter' => env('LOG_STDERR_FORMATTER'),
+            'processors' => [PsrLogMessageProcessor::class],
+        ],
+
+        'syslog' => [
+            'driver' => 'syslog',
+            'level' => env('LOG_LEVEL', 'debug'),
+            'facility' => env('LOG_SYSLOG_FACILITY', LOG_USER),
+            'replace_placeholders' => true,
+        ],
+
+        'errorlog' => [
+            'driver' => 'errorlog',
+            'level' => env('LOG_LEVEL', 'debug'),
+            'replace_placeholders' => true,
+        ],
+
+        'null' => [
+            'driver' => 'monolog',
+            'handler' => NullHandler::class,
+        ],
+
+        'emergency' => [
+            'path' => storage_path('logs/laravel.log'),
+        ],
+
+    ],
+
+];
diff --git a/config/mail.php b/config/mail.php
new file mode 100644
index 0000000..522b284
--- /dev/null
+++ b/config/mail.php
@@ -0,0 +1,118 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Default Mailer
+    |--------------------------------------------------------------------------
+    |
+    | This option controls the default mailer that is used to send all email
+    | messages unless another mailer is explicitly specified when sending
+    | the message. All additional mailers can be configured within the
+    | "mailers" array. Examples of each type of mailer are provided.
+    |
+    */
+
+    'default' => env('MAIL_MAILER', 'log'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Mailer Configurations
+    |--------------------------------------------------------------------------
+    |
+    | Here you may configure all of the mailers used by your application plus
+    | their respective settings. Several examples have been configured for
+    | you and you are free to add your own as your application requires.
+    |
+    | Laravel supports a variety of mail "transport" drivers that can be used
+    | when delivering an email. You may specify which one you're using for
+    | your mailers below. You may also add additional mailers if needed.
+    |
+    | Supported: "smtp", "sendmail", "mailgun", "ses", "ses-v2",
+    |            "postmark", "resend", "log", "array",
+    |            "failover", "roundrobin"
+    |
+    */
+
+    'mailers' => [
+
+        'smtp' => [
+            'transport' => 'smtp',
+            'scheme' => env('MAIL_SCHEME'),
+            'url' => env('MAIL_URL'),
+            'host' => env('MAIL_HOST', '127.0.0.1'),
+            'port' => env('MAIL_PORT', 2525),
+            'username' => env('MAIL_USERNAME'),
+            'password' => env('MAIL_PASSWORD'),
+            'timeout' => null,
+            'local_domain' => env('MAIL_EHLO_DOMAIN', parse_url((string) env('APP_URL', 'http://localhost'), PHP_URL_HOST)),
+        ],
+
+        'ses' => [
+            'transport' => 'ses',
+        ],
+
+        'postmark' => [
+            'transport' => 'postmark',
+            // 'message_stream_id' => env('POSTMARK_MESSAGE_STREAM_ID'),
+            // 'client' => [
+            //     'timeout' => 5,
+            // ],
+        ],
+
+        'resend' => [
+            'transport' => 'resend',
+        ],
+
+        'sendmail' => [
+            'transport' => 'sendmail',
+            'path' => env('MAIL_SENDMAIL_PATH', '/usr/sbin/sendmail -bs -i'),
+        ],
+
+        'log' => [
+            'transport' => 'log',
+            'channel' => env('MAIL_LOG_CHANNEL'),
+        ],
+
+        'array' => [
+            'transport' => 'array',
+        ],
+
+        'failover' => [
+            'transport' => 'failover',
+            'mailers' => [
+                'smtp',
+                'log',
+            ],
+            'retry_after' => 60,
+        ],
+
+        'roundrobin' => [
+            'transport' => 'roundrobin',
+            'mailers' => [
+                'ses',
+                'postmark',
+            ],
+            'retry_after' => 60,
+        ],
+
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Global "From" Address
+    |--------------------------------------------------------------------------
+    |
+    | You may wish for all emails sent by your application to be sent from
+    | the same address. Here you may specify a name and address that is
+    | used globally for all emails that are sent by your application.
+    |
+    */
+
+    'from' => [
+        'address' => env('MAIL_FROM_ADDRESS', 'hello@example.com'),
+        'name' => env('MAIL_FROM_NAME', 'Example'),
+    ],
+
+];
diff --git a/config/queue.php b/config/queue.php
new file mode 100644
index 0000000..116bd8d
--- /dev/null
+++ b/config/queue.php
@@ -0,0 +1,112 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Default Queue Connection Name
+    |--------------------------------------------------------------------------
+    |
+    | Laravel's queue supports a variety of backends via a single, unified
+    | API, giving you convenient access to each backend using identical
+    | syntax for each. The default queue connection is defined below.
+    |
+    */
+
+    'default' => env('QUEUE_CONNECTION', 'database'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Queue Connections
+    |--------------------------------------------------------------------------
+    |
+    | Here you may configure the connection options for every queue backend
+    | used by your application. An example configuration is provided for
+    | each backend supported by Laravel. You're also free to add more.
+    |
+    | Drivers: "sync", "database", "beanstalkd", "sqs", "redis", "null"
+    |
+    */
+
+    'connections' => [
+
+        'sync' => [
+            'driver' => 'sync',
+        ],
+
+        'database' => [
+            'driver' => 'database',
+            'connection' => env('DB_QUEUE_CONNECTION'),
+            'table' => env('DB_QUEUE_TABLE', 'jobs'),
+            'queue' => env('DB_QUEUE', 'default'),
+            'retry_after' => (int) env('DB_QUEUE_RETRY_AFTER', 90),
+            'after_commit' => false,
+        ],
+
+        'beanstalkd' => [
+            'driver' => 'beanstalkd',
+            'host' => env('BEANSTALKD_QUEUE_HOST', 'localhost'),
+            'queue' => env('BEANSTALKD_QUEUE', 'default'),
+            'retry_after' => (int) env('BEANSTALKD_QUEUE_RETRY_AFTER', 90),
+            'block_for' => 0,
+            'after_commit' => false,
+        ],
+
+        'sqs' => [
+            'driver' => 'sqs',
+            'key' => env('AWS_ACCESS_KEY_ID'),
+            'secret' => env('AWS_SECRET_ACCESS_KEY'),
+            'prefix' => env('SQS_PREFIX', 'https://sqs.us-east-1.amazonaws.com/your-account-id'),
+            'queue' => env('SQS_QUEUE', 'default'),
+            'suffix' => env('SQS_SUFFIX'),
+            'region' => env('AWS_DEFAULT_REGION', 'us-east-1'),
+            'after_commit' => false,
+        ],
+
+        'redis' => [
+            'driver' => 'redis',
+            'connection' => env('REDIS_QUEUE_CONNECTION', 'default'),
+            'queue' => env('REDIS_QUEUE', 'default'),
+            'retry_after' => (int) env('REDIS_QUEUE_RETRY_AFTER', 90),
+            'block_for' => null,
+            'after_commit' => false,
+        ],
+
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Job Batching
+    |--------------------------------------------------------------------------
+    |
+    | The following options configure the database and table that store job
+    | batching information. These options can be updated to any database
+    | connection and table which has been defined by your application.
+    |
+    */
+
+    'batching' => [
+        'database' => env('DB_CONNECTION', 'sqlite'),
+        'table' => 'job_batches',
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Failed Queue Jobs
+    |--------------------------------------------------------------------------
+    |
+    | These options configure the behavior of failed queue job logging so you
+    | can control how and where failed jobs are stored. Laravel ships with
+    | support for storing failed jobs in a simple file or in a database.
+    |
+    | Supported drivers: "database-uuids", "dynamodb", "file", "null"
+    |
+    */
+
+    'failed' => [
+        'driver' => env('QUEUE_FAILED_DRIVER', 'database-uuids'),
+        'database' => env('DB_CONNECTION', 'sqlite'),
+        'table' => 'failed_jobs',
+    ],
+
+];
diff --git a/config/services.php b/config/services.php
new file mode 100644
index 0000000..6182e4b
--- /dev/null
+++ b/config/services.php
@@ -0,0 +1,38 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Third Party Services
+    |--------------------------------------------------------------------------
+    |
+    | This file is for storing the credentials for third party services such
+    | as Mailgun, Postmark, AWS and more. This file provides the de facto
+    | location for this type of information, allowing packages to have
+    | a conventional file to locate the various service credentials.
+    |
+    */
+
+    'postmark' => [
+        'token' => env('POSTMARK_TOKEN'),
+    ],
+
+    'resend' => [
+        'key' => env('RESEND_KEY'),
+    ],
+
+    'ses' => [
+        'key' => env('AWS_ACCESS_KEY_ID'),
+        'secret' => env('AWS_SECRET_ACCESS_KEY'),
+        'region' => env('AWS_DEFAULT_REGION', 'us-east-1'),
+    ],
+
+    'slack' => [
+        'notifications' => [
+            'bot_user_oauth_token' => env('SLACK_BOT_USER_OAUTH_TOKEN'),
+            'channel' => env('SLACK_BOT_USER_DEFAULT_CHANNEL'),
+        ],
+    ],
+
+];
diff --git a/config/session.php b/config/session.php
new file mode 100644
index 0000000..f348f5f
--- /dev/null
+++ b/config/session.php
@@ -0,0 +1,217 @@
+<?php
+
+use Illuminate\Support\Str;
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Default Session Driver
+    |--------------------------------------------------------------------------
+    |
+    | This option determines the default session driver that is utilized for
+    | incoming requests. Laravel supports a variety of storage options to
+    | persist session data. Database storage is a great default choice.
+    |
+    | Supported: "file", "cookie", "database", "memcached",
+    |            "redis", "dynamodb", "array"
+    |
+    */
+
+    'driver' => env('SESSION_DRIVER', 'database'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session Lifetime
+    |--------------------------------------------------------------------------
+    |
+    | Here you may specify the number of minutes that you wish the session
+    | to be allowed to remain idle before it expires. If you want them
+    | to expire immediately when the browser is closed then you may
+    | indicate that via the expire_on_close configuration option.
+    |
+    */
+
+    'lifetime' => (int) env('SESSION_LIFETIME', 120),
+
+    'expire_on_close' => env('SESSION_EXPIRE_ON_CLOSE', false),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session Encryption
+    |--------------------------------------------------------------------------
+    |
+    | This option allows you to easily specify that all of your session data
+    | should be encrypted before it's stored. All encryption is performed
+    | automatically by Laravel and you may use the session like normal.
+    |
+    */
+
+    'encrypt' => env('SESSION_ENCRYPT', false),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session File Location
+    |--------------------------------------------------------------------------
+    |
+    | When utilizing the "file" session driver, the session files are placed
+    | on disk. The default storage location is defined here; however, you
+    | are free to provide another location where they should be stored.
+    |
+    */
+
+    'files' => storage_path('framework/sessions'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session Database Connection
+    |--------------------------------------------------------------------------
+    |
+    | When using the "database" or "redis" session drivers, you may specify a
+    | connection that should be used to manage these sessions. This should
+    | correspond to a connection in your database configuration options.
+    |
+    */
+
+    'connection' => env('SESSION_CONNECTION'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session Database Table
+    |--------------------------------------------------------------------------
+    |
+    | When using the "database" session driver, you may specify the table to
+    | be used to store sessions. Of course, a sensible default is defined
+    | for you; however, you're welcome to change this to another table.
+    |
+    */
+
+    'table' => env('SESSION_TABLE', 'sessions'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session Cache Store
+    |--------------------------------------------------------------------------
+    |
+    | When using one of the framework's cache driven session backends, you may
+    | define the cache store which should be used to store the session data
+    | between requests. This must match one of your defined cache stores.
+    |
+    | Affects: "dynamodb", "memcached", "redis"
+    |
+    */
+
+    'store' => env('SESSION_STORE'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session Sweeping Lottery
+    |--------------------------------------------------------------------------
+    |
+    | Some session drivers must manually sweep their storage location to get
+    | rid of old sessions from storage. Here are the chances that it will
+    | happen on a given request. By default, the odds are 2 out of 100.
+    |
+    */
+
+    'lottery' => [2, 100],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session Cookie Name
+    |--------------------------------------------------------------------------
+    |
+    | Here you may change the name of the session cookie that is created by
+    | the framework. Typically, you should not need to change this value
+    | since doing so does not grant a meaningful security improvement.
+    |
+    */
+
+    'cookie' => env(
+        'SESSION_COOKIE',
+        Str::snake((string) env('APP_NAME', 'laravel')).'_session'
+    ),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session Cookie Path
+    |--------------------------------------------------------------------------
+    |
+    | The session cookie path determines the path for which the cookie will
+    | be regarded as available. Typically, this will be the root path of
+    | your application, but you're free to change this when necessary.
+    |
+    */
+
+    'path' => env('SESSION_PATH', '/'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session Cookie Domain
+    |--------------------------------------------------------------------------
+    |
+    | This value determines the domain and subdomains the session cookie is
+    | available to. By default, the cookie will be available to the root
+    | domain and all subdomains. Typically, this shouldn't be changed.
+    |
+    */
+
+    'domain' => env('SESSION_DOMAIN'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | HTTPS Only Cookies
+    |--------------------------------------------------------------------------
+    |
+    | By setting this option to true, session cookies will only be sent back
+    | to the server if the browser has a HTTPS connection. This will keep
+    | the cookie from being sent to you when it can't be done securely.
+    |
+    */
+
+    'secure' => env('SESSION_SECURE_COOKIE'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | HTTP Access Only
+    |--------------------------------------------------------------------------
+    |
+    | Setting this value to true will prevent JavaScript from accessing the
+    | value of the cookie and the cookie will only be accessible through
+    | the HTTP protocol. It's unlikely you should disable this option.
+    |
+    */
+
+    'http_only' => env('SESSION_HTTP_ONLY', true),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Same-Site Cookies
+    |--------------------------------------------------------------------------
+    |
+    | This option determines how your cookies behave when cross-site requests
+    | take place, and can be used to mitigate CSRF attacks. By default, we
+    | will set this value to "lax" to permit secure cross-site requests.
+    |
+    | See: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie#samesitesamesite-value
+    |
+    | Supported: "lax", "strict", "none", null
+    |
+    */
+
+    'same_site' => env('SESSION_SAME_SITE', 'lax'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Partitioned Cookies
+    |--------------------------------------------------------------------------
+    |
+    | Setting this value to true will tie the cookie to the top-level site for
+    | a cross-site context. Partitioned cookies are accepted by the browser
+    | when flagged "secure" and the Same-Site attribute is set to "none".
+    |
+    */
+
+    'partitioned' => env('SESSION_PARTITIONED_COOKIE', false),
+
+];
diff --git a/database/.gitignore b/database/.gitignore
new file mode 100644
index 0000000..9b19b93
--- /dev/null
+++ b/database/.gitignore
@@ -0,0 +1 @@
+*.sqlite*
diff --git a/database/factories/UserFactory.php b/database/factories/UserFactory.php
new file mode 100644
index 0000000..584104c
--- /dev/null
+++ b/database/factories/UserFactory.php
@@ -0,0 +1,44 @@
+<?php
+
+namespace Database\Factories;
+
+use Illuminate\Database\Eloquent\Factories\Factory;
+use Illuminate\Support\Facades\Hash;
+use Illuminate\Support\Str;
+
+/**
+ * @extends \Illuminate\Database\Eloquent\Factories\Factory<\App\Models\User>
+ */
+class UserFactory extends Factory
+{
+    /**
+     * The current password being used by the factory.
+     */
+    protected static ?string $password;
+
+    /**
+     * Define the model's default state.
+     *
+     * @return array<string, mixed>
+     */
+    public function definition(): array
+    {
+        return [
+            'name' => fake()->name(),
+            'email' => fake()->unique()->safeEmail(),
+            'email_verified_at' => now(),
+            'password' => static::$password ??= Hash::make('password'),
+            'remember_token' => Str::random(10),
+        ];
+    }
+
+    /**
+     * Indicate that the model's email address should be unverified.
+     */
+    public function unverified(): static
+    {
+        return $this->state(fn (array $attributes) => [
+            'email_verified_at' => null,
+        ]);
+    }
+}
diff --git a/database/migrations/0001_01_01_000000_create_users_table.php b/database/migrations/0001_01_01_000000_create_users_table.php
new file mode 100644
index 0000000..05fb5d9
--- /dev/null
+++ b/database/migrations/0001_01_01_000000_create_users_table.php
@@ -0,0 +1,49 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('users', function (Blueprint $table) {
+            $table->id();
+            $table->string('name');
+            $table->string('email')->unique();
+            $table->timestamp('email_verified_at')->nullable();
+            $table->string('password');
+            $table->rememberToken();
+            $table->timestamps();
+        });
+
+        Schema::create('password_reset_tokens', function (Blueprint $table) {
+            $table->string('email')->primary();
+            $table->string('token');
+            $table->timestamp('created_at')->nullable();
+        });
+
+        Schema::create('sessions', function (Blueprint $table) {
+            $table->string('id')->primary();
+            $table->foreignId('user_id')->nullable()->index();
+            $table->string('ip_address', 45)->nullable();
+            $table->text('user_agent')->nullable();
+            $table->longText('payload');
+            $table->integer('last_activity')->index();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('users');
+        Schema::dropIfExists('password_reset_tokens');
+        Schema::dropIfExists('sessions');
+    }
+};
diff --git a/database/migrations/0001_01_01_000001_create_cache_table.php b/database/migrations/0001_01_01_000001_create_cache_table.php
new file mode 100644
index 0000000..b9c106b
--- /dev/null
+++ b/database/migrations/0001_01_01_000001_create_cache_table.php
@@ -0,0 +1,35 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('cache', function (Blueprint $table) {
+            $table->string('key')->primary();
+            $table->mediumText('value');
+            $table->integer('expiration');
+        });
+
+        Schema::create('cache_locks', function (Blueprint $table) {
+            $table->string('key')->primary();
+            $table->string('owner');
+            $table->integer('expiration');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('cache');
+        Schema::dropIfExists('cache_locks');
+    }
+};
diff --git a/database/migrations/0001_01_01_000002_create_jobs_table.php b/database/migrations/0001_01_01_000002_create_jobs_table.php
new file mode 100644
index 0000000..425e705
--- /dev/null
+++ b/database/migrations/0001_01_01_000002_create_jobs_table.php
@@ -0,0 +1,57 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('jobs', function (Blueprint $table) {
+            $table->id();
+            $table->string('queue')->index();
+            $table->longText('payload');
+            $table->unsignedTinyInteger('attempts');
+            $table->unsignedInteger('reserved_at')->nullable();
+            $table->unsignedInteger('available_at');
+            $table->unsignedInteger('created_at');
+        });
+
+        Schema::create('job_batches', function (Blueprint $table) {
+            $table->string('id')->primary();
+            $table->string('name');
+            $table->integer('total_jobs');
+            $table->integer('pending_jobs');
+            $table->integer('failed_jobs');
+            $table->longText('failed_job_ids');
+            $table->mediumText('options')->nullable();
+            $table->integer('cancelled_at')->nullable();
+            $table->integer('created_at');
+            $table->integer('finished_at')->nullable();
+        });
+
+        Schema::create('failed_jobs', function (Blueprint $table) {
+            $table->id();
+            $table->string('uuid')->unique();
+            $table->text('connection');
+            $table->text('queue');
+            $table->longText('payload');
+            $table->longText('exception');
+            $table->timestamp('failed_at')->useCurrent();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('jobs');
+        Schema::dropIfExists('job_batches');
+        Schema::dropIfExists('failed_jobs');
+    }
+};
diff --git a/database/seeders/DatabaseSeeder.php b/database/seeders/DatabaseSeeder.php
new file mode 100644
index 0000000..d01a0ef
--- /dev/null
+++ b/database/seeders/DatabaseSeeder.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace Database\Seeders;
+
+use App\Models\User;
+// use Illuminate\Database\Console\Seeds\WithoutModelEvents;
+use Illuminate\Database\Seeder;
+
+class DatabaseSeeder extends Seeder
+{
+    /**
+     * Seed the application's database.
+     */
+    public function run(): void
+    {
+        // User::factory(10)->create();
+
+        User::factory()->create([
+            'name' => 'Test User',
+            'email' => 'test@example.com',
+        ]);
+    }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..cbc29f1
--- /dev/null
+++ b/package.json
@@ -0,0 +1,31 @@
+{
+    "$schema": "https://json.schemastore.org/package.json",
+    "private": true,
+    "type": "module",
+    "scripts": {
+        "build": "vite build",
+        "dev": "vite"
+    },
+    "devDependencies": {
+        "axios": "^1.8.2",
+        "concurrently": "^9.0.1",
+        "laravel-vite-plugin": "^2.0.0",
+        "sass": "1.77.6",
+        "vite": "^6.2.4"
+    },
+    "dependencies": {
+        "bootstrap": "^5.3.8",
+        "chart.js": "^4.5.0",
+        "choices.js": "^11.1.0",
+        "cleave.js": "^1.6.0",
+        "drift-zoom": "^1.5.1",
+        "flatpickr": "^4.6.13",
+        "glightbox": "^3.3.1",
+        "img-comparison-slider": "^8.0.6",
+        "list.js": "^2.3.1",
+        "nouislider": "^15.8.1",
+        "simplebar": "^6.3.2",
+        "swiper": "^11.2.10",
+        "timezz": "^9.0.2"
+    }
+}
diff --git a/phpunit.xml b/phpunit.xml
new file mode 100644
index 0000000..5fd5bcf
--- /dev/null
+++ b/phpunit.xml
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<phpunit xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+         xsi:noNamespaceSchemaLocation="vendor/phpunit/phpunit/phpunit.xsd"
+         bootstrap="vendor/autoload.php"
+         colors="true"
+>
+    <testsuites>
+        <testsuite name="Unit">
+            <directory>tests/Unit</directory>
+        </testsuite>
+        <testsuite name="Feature">
+            <directory>tests/Feature</directory>
+        </testsuite>
+    </testsuites>
+    <source>
+        <include>
+            <directory>app</directory>
+        </include>
+    </source>
+    <php>
+        <env name="APP_ENV" value="testing"/>
+        <env name="APP_MAINTENANCE_DRIVER" value="file"/>
+        <env name="BCRYPT_ROUNDS" value="4"/>
+        <env name="CACHE_STORE" value="array"/>
+        <env name="DB_CONNECTION" value="sqlite"/>
+        <env name="DB_DATABASE" value=":memory:"/>
+        <env name="MAIL_MAILER" value="array"/>
+        <env name="QUEUE_CONNECTION" value="sync"/>
+        <env name="SESSION_DRIVER" value="array"/>
+        <env name="PULSE_ENABLED" value="false"/>
+        <env name="TELESCOPE_ENABLED" value="false"/>
+        <env name="NIGHTWATCH_ENABLED" value="false"/>
+    </php>
+</phpunit>
diff --git a/public/.htaccess b/public/.htaccess
new file mode 100644
index 0000000..b574a59
--- /dev/null
+++ b/public/.htaccess
@@ -0,0 +1,25 @@
+<IfModule mod_rewrite.c>
+    <IfModule mod_negotiation.c>
+        Options -MultiViews -Indexes
+    </IfModule>
+
+    RewriteEngine On
+
+    # Handle Authorization Header
+    RewriteCond %{HTTP:Authorization} .
+    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
+
+    # Handle X-XSRF-Token Header
+    RewriteCond %{HTTP:x-xsrf-token} .
+    RewriteRule .* - [E=HTTP_X_XSRF_TOKEN:%{HTTP:X-XSRF-Token}]
+
+    # Redirect Trailing Slashes If Not A Folder...
+    RewriteCond %{REQUEST_FILENAME} !-d
+    RewriteCond %{REQUEST_URI} (.+)/$
+    RewriteRule ^ %1 [L,R=301]
+
+    # Send Requests To Front Controller...
+    RewriteCond %{REQUEST_FILENAME} !-d
+    RewriteCond %{REQUEST_FILENAME} !-f
+    RewriteRule ^ index.php [L]
+</IfModule>
diff --git a/public/app-icons/favicon.ico b/public/app-icons/favicon.ico
new file mode 100644
index 0000000..4efee4e
Binary files /dev/null and b/public/app-icons/favicon.ico differ
diff --git a/public/app-icons/icon-144x144.png b/public/app-icons/icon-144x144.png
new file mode 100644
index 0000000..13633fb
Binary files /dev/null and b/public/app-icons/icon-144x144.png differ
diff --git a/public/app-icons/icon-180x180.png b/public/app-icons/icon-180x180.png
new file mode 100644
index 0000000..ed1421d
Binary files /dev/null and b/public/app-icons/icon-180x180.png differ
diff --git a/public/app-icons/icon-192x192.png b/public/app-icons/icon-192x192.png
new file mode 100644
index 0000000..62a7781
Binary files /dev/null and b/public/app-icons/icon-192x192.png differ
diff --git a/public/app-icons/icon-32x32.png b/public/app-icons/icon-32x32.png
new file mode 100644
index 0000000..0b05212
Binary files /dev/null and b/public/app-icons/icon-32x32.png differ
diff --git a/public/app-icons/icon-512x512.png b/public/app-icons/icon-512x512.png
new file mode 100644
index 0000000..efabbbd
Binary files /dev/null and b/public/app-icons/icon-512x512.png differ
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000..4efee4e
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/public/img/404/furniture.png b/public/img/404/furniture.png
new file mode 100644
index 0000000..db54267
Binary files /dev/null and b/public/img/404/furniture.png differ
diff --git a/public/img/404/grocery-bg-1.png b/public/img/404/grocery-bg-1.png
new file mode 100644
index 0000000..627aaf0
Binary files /dev/null and b/public/img/404/grocery-bg-1.png differ
diff --git a/public/img/404/grocery-bg-2.png b/public/img/404/grocery-bg-2.png
new file mode 100644
index 0000000..478119a
Binary files /dev/null and b/public/img/404/grocery-bg-2.png differ
diff --git a/public/img/404/grocery.png b/public/img/404/grocery.png
new file mode 100644
index 0000000..10118d1
Binary files /dev/null and b/public/img/404/grocery.png differ
diff --git a/public/img/about/v1/avatar.jpg b/public/img/about/v1/avatar.jpg
new file mode 100644
index 0000000..853a567
Binary files /dev/null and b/public/img/about/v1/avatar.jpg differ
diff --git a/public/img/about/v1/delivery.jpg b/public/img/about/v1/delivery.jpg
new file mode 100644
index 0000000..bb2d8d2
Binary files /dev/null and b/public/img/about/v1/delivery.jpg differ
diff --git a/public/img/about/v1/hero.jpg b/public/img/about/v1/hero.jpg
new file mode 100644
index 0000000..22d9afd
Binary files /dev/null and b/public/img/about/v1/hero.jpg differ
diff --git a/public/img/about/v1/video-cover.jpg b/public/img/about/v1/video-cover.jpg
new file mode 100644
index 0000000..23cdef1
Binary files /dev/null and b/public/img/about/v1/video-cover.jpg differ
diff --git a/public/img/about/v2/feature01.jpg b/public/img/about/v2/feature01.jpg
new file mode 100644
index 0000000..d19aec9
Binary files /dev/null and b/public/img/about/v2/feature01.jpg differ
diff --git a/public/img/about/v2/feature02.jpg b/public/img/about/v2/feature02.jpg
new file mode 100644
index 0000000..1067723
Binary files /dev/null and b/public/img/about/v2/feature02.jpg differ
diff --git a/public/img/about/v2/feature03.jpg b/public/img/about/v2/feature03.jpg
new file mode 100644
index 0000000..8f81a04
Binary files /dev/null and b/public/img/about/v2/feature03.jpg differ
diff --git a/public/img/about/v2/hero.jpg b/public/img/about/v2/hero.jpg
new file mode 100644
index 0000000..1c1ab9f
Binary files /dev/null and b/public/img/about/v2/hero.jpg differ
diff --git a/public/img/account/avatar-lg.png b/public/img/account/avatar-lg.png
new file mode 100644
index 0000000..d52fb22
Binary files /dev/null and b/public/img/account/avatar-lg.png differ
diff --git a/public/img/account/avatar-sm.png b/public/img/account/avatar-sm.png
new file mode 100644
index 0000000..3476cd3
Binary files /dev/null and b/public/img/account/avatar-sm.png differ
diff --git a/public/img/account/avatar.png b/public/img/account/avatar.png
new file mode 100644
index 0000000..5621cd6
Binary files /dev/null and b/public/img/account/avatar.png differ
diff --git a/public/img/account/cover.png b/public/img/account/cover.png
new file mode 100644
index 0000000..392afd0
Binary files /dev/null and b/public/img/account/cover.png differ
diff --git a/public/img/account/products/01.jpg b/public/img/account/products/01.jpg
new file mode 100644
index 0000000..57fadc8
Binary files /dev/null and b/public/img/account/products/01.jpg differ
diff --git a/public/img/account/products/02.jpg b/public/img/account/products/02.jpg
new file mode 100644
index 0000000..5e2c8e6
Binary files /dev/null and b/public/img/account/products/02.jpg differ
diff --git a/public/img/account/products/03.jpg b/public/img/account/products/03.jpg
new file mode 100644
index 0000000..22ce352
Binary files /dev/null and b/public/img/account/products/03.jpg differ
diff --git a/public/img/account/products/04.jpg b/public/img/account/products/04.jpg
new file mode 100644
index 0000000..5139193
Binary files /dev/null and b/public/img/account/products/04.jpg differ
diff --git a/public/img/account/products/05.jpg b/public/img/account/products/05.jpg
new file mode 100644
index 0000000..e8b9745
Binary files /dev/null and b/public/img/account/products/05.jpg differ
diff --git a/public/img/account/products/06.jpg b/public/img/account/products/06.jpg
new file mode 100644
index 0000000..7e84458
Binary files /dev/null and b/public/img/account/products/06.jpg differ
diff --git a/public/img/account/products/07.jpg b/public/img/account/products/07.jpg
new file mode 100644
index 0000000..e8115f1
Binary files /dev/null and b/public/img/account/products/07.jpg differ
diff --git a/public/img/account/products/08.jpg b/public/img/account/products/08.jpg
new file mode 100644
index 0000000..c695866
Binary files /dev/null and b/public/img/account/products/08.jpg differ
diff --git a/public/img/account/products/09.jpg b/public/img/account/products/09.jpg
new file mode 100644
index 0000000..4e9e435
Binary files /dev/null and b/public/img/account/products/09.jpg differ
diff --git a/public/img/account/products/10.jpg b/public/img/account/products/10.jpg
new file mode 100644
index 0000000..f6e0826
Binary files /dev/null and b/public/img/account/products/10.jpg differ
diff --git a/public/img/account/products/11.jpg b/public/img/account/products/11.jpg
new file mode 100644
index 0000000..edb6811
Binary files /dev/null and b/public/img/account/products/11.jpg differ
diff --git a/public/img/account/products/12.jpg b/public/img/account/products/12.jpg
new file mode 100644
index 0000000..3963a5d
Binary files /dev/null and b/public/img/account/products/12.jpg differ
diff --git a/public/img/account/products/13.jpg b/public/img/account/products/13.jpg
new file mode 100644
index 0000000..e3157f7
Binary files /dev/null and b/public/img/account/products/13.jpg differ
diff --git a/public/img/account/products/14.jpg b/public/img/account/products/14.jpg
new file mode 100644
index 0000000..f4982cf
Binary files /dev/null and b/public/img/account/products/14.jpg differ
diff --git a/public/img/account/products/15.jpg b/public/img/account/products/15.jpg
new file mode 100644
index 0000000..21a5c9a
Binary files /dev/null and b/public/img/account/products/15.jpg differ
diff --git a/public/img/account/products/16.jpg b/public/img/account/products/16.jpg
new file mode 100644
index 0000000..beb4548
Binary files /dev/null and b/public/img/account/products/16.jpg differ
diff --git a/public/img/account/products/17.jpg b/public/img/account/products/17.jpg
new file mode 100644
index 0000000..1f15be7
Binary files /dev/null and b/public/img/account/products/17.jpg differ
diff --git a/public/img/account/products/18.jpg b/public/img/account/products/18.jpg
new file mode 100644
index 0000000..7d1a4a6
Binary files /dev/null and b/public/img/account/products/18.jpg differ
diff --git a/public/img/blog/grid/v1/01.jpg b/public/img/blog/grid/v1/01.jpg
new file mode 100644
index 0000000..8acd0dd
Binary files /dev/null and b/public/img/blog/grid/v1/01.jpg differ
diff --git a/public/img/blog/grid/v1/02.jpg b/public/img/blog/grid/v1/02.jpg
new file mode 100644
index 0000000..ecadf77
Binary files /dev/null and b/public/img/blog/grid/v1/02.jpg differ
diff --git a/public/img/blog/grid/v1/03.jpg b/public/img/blog/grid/v1/03.jpg
new file mode 100644
index 0000000..69aad26
Binary files /dev/null and b/public/img/blog/grid/v1/03.jpg differ
diff --git a/public/img/blog/grid/v1/04.jpg b/public/img/blog/grid/v1/04.jpg
new file mode 100644
index 0000000..0732215
Binary files /dev/null and b/public/img/blog/grid/v1/04.jpg differ
diff --git a/public/img/blog/grid/v1/05.jpg b/public/img/blog/grid/v1/05.jpg
new file mode 100644
index 0000000..db79c45
Binary files /dev/null and b/public/img/blog/grid/v1/05.jpg differ
diff --git a/public/img/blog/grid/v1/06.jpg b/public/img/blog/grid/v1/06.jpg
new file mode 100644
index 0000000..4d7c1e9
Binary files /dev/null and b/public/img/blog/grid/v1/06.jpg differ
diff --git a/public/img/blog/grid/v1/07.jpg b/public/img/blog/grid/v1/07.jpg
new file mode 100644
index 0000000..020ecfe
Binary files /dev/null and b/public/img/blog/grid/v1/07.jpg differ
diff --git a/public/img/blog/grid/v1/08.jpg b/public/img/blog/grid/v1/08.jpg
new file mode 100644
index 0000000..67e18de
Binary files /dev/null and b/public/img/blog/grid/v1/08.jpg differ
diff --git a/public/img/blog/grid/v1/09.jpg b/public/img/blog/grid/v1/09.jpg
new file mode 100644
index 0000000..58d769d
Binary files /dev/null and b/public/img/blog/grid/v1/09.jpg differ
diff --git a/public/img/blog/grid/v1/10.jpg b/public/img/blog/grid/v1/10.jpg
new file mode 100644
index 0000000..0cc7a54
Binary files /dev/null and b/public/img/blog/grid/v1/10.jpg differ
diff --git a/public/img/blog/grid/v1/11.jpg b/public/img/blog/grid/v1/11.jpg
new file mode 100644
index 0000000..b887598
Binary files /dev/null and b/public/img/blog/grid/v1/11.jpg differ
diff --git a/public/img/blog/grid/v1/12.jpg b/public/img/blog/grid/v1/12.jpg
new file mode 100644
index 0000000..8ff8ec1
Binary files /dev/null and b/public/img/blog/grid/v1/12.jpg differ
diff --git a/public/img/blog/grid/v1/13.jpg b/public/img/blog/grid/v1/13.jpg
new file mode 100644
index 0000000..5b859b0
Binary files /dev/null and b/public/img/blog/grid/v1/13.jpg differ
diff --git a/public/img/blog/grid/v1/14.jpg b/public/img/blog/grid/v1/14.jpg
new file mode 100644
index 0000000..b06fc3c
Binary files /dev/null and b/public/img/blog/grid/v1/14.jpg differ
diff --git a/public/img/blog/grid/v1/slider01.jpg b/public/img/blog/grid/v1/slider01.jpg
new file mode 100644
index 0000000..e1071c4
Binary files /dev/null and b/public/img/blog/grid/v1/slider01.jpg differ
diff --git a/public/img/blog/grid/v1/slider02.jpg b/public/img/blog/grid/v1/slider02.jpg
new file mode 100644
index 0000000..c7865f2
Binary files /dev/null and b/public/img/blog/grid/v1/slider02.jpg differ
diff --git a/public/img/blog/grid/v1/th01.jpg b/public/img/blog/grid/v1/th01.jpg
new file mode 100644
index 0000000..9db9146
Binary files /dev/null and b/public/img/blog/grid/v1/th01.jpg differ
diff --git a/public/img/blog/grid/v1/th02.jpg b/public/img/blog/grid/v1/th02.jpg
new file mode 100644
index 0000000..5d3b599
Binary files /dev/null and b/public/img/blog/grid/v1/th02.jpg differ
diff --git a/public/img/blog/grid/v1/th03.jpg b/public/img/blog/grid/v1/th03.jpg
new file mode 100644
index 0000000..042246f
Binary files /dev/null and b/public/img/blog/grid/v1/th03.jpg differ
diff --git a/public/img/blog/grid/v1/video01.jpg b/public/img/blog/grid/v1/video01.jpg
new file mode 100644
index 0000000..6ce3a8b
Binary files /dev/null and b/public/img/blog/grid/v1/video01.jpg differ
diff --git a/public/img/blog/grid/v1/video02.jpg b/public/img/blog/grid/v1/video02.jpg
new file mode 100644
index 0000000..428669c
Binary files /dev/null and b/public/img/blog/grid/v1/video02.jpg differ
diff --git a/public/img/blog/grid/v1/video03.jpg b/public/img/blog/grid/v1/video03.jpg
new file mode 100644
index 0000000..895404d
Binary files /dev/null and b/public/img/blog/grid/v1/video03.jpg differ
diff --git a/public/img/blog/grid/v1/video04.jpg b/public/img/blog/grid/v1/video04.jpg
new file mode 100644
index 0000000..69864ce
Binary files /dev/null and b/public/img/blog/grid/v1/video04.jpg differ
diff --git a/public/img/blog/grid/v2/01.jpg b/public/img/blog/grid/v2/01.jpg
new file mode 100644
index 0000000..e2e6230
Binary files /dev/null and b/public/img/blog/grid/v2/01.jpg differ
diff --git a/public/img/blog/grid/v2/02.jpg b/public/img/blog/grid/v2/02.jpg
new file mode 100644
index 0000000..15a6ec3
Binary files /dev/null and b/public/img/blog/grid/v2/02.jpg differ
diff --git a/public/img/blog/grid/v2/03.jpg b/public/img/blog/grid/v2/03.jpg
new file mode 100644
index 0000000..7de3db4
Binary files /dev/null and b/public/img/blog/grid/v2/03.jpg differ
diff --git a/public/img/blog/grid/v2/04.jpg b/public/img/blog/grid/v2/04.jpg
new file mode 100644
index 0000000..9e646c1
Binary files /dev/null and b/public/img/blog/grid/v2/04.jpg differ
diff --git a/public/img/blog/grid/v2/05.jpg b/public/img/blog/grid/v2/05.jpg
new file mode 100644
index 0000000..8527d0b
Binary files /dev/null and b/public/img/blog/grid/v2/05.jpg differ
diff --git a/public/img/blog/grid/v2/06.jpg b/public/img/blog/grid/v2/06.jpg
new file mode 100644
index 0000000..e5e49cd
Binary files /dev/null and b/public/img/blog/grid/v2/06.jpg differ
diff --git a/public/img/blog/grid/v2/07.jpg b/public/img/blog/grid/v2/07.jpg
new file mode 100644
index 0000000..bcf2d46
Binary files /dev/null and b/public/img/blog/grid/v2/07.jpg differ
diff --git a/public/img/blog/grid/v2/08.jpg b/public/img/blog/grid/v2/08.jpg
new file mode 100644
index 0000000..3a992a5
Binary files /dev/null and b/public/img/blog/grid/v2/08.jpg differ
diff --git a/public/img/blog/grid/v2/09.jpg b/public/img/blog/grid/v2/09.jpg
new file mode 100644
index 0000000..ede5b23
Binary files /dev/null and b/public/img/blog/grid/v2/09.jpg differ
diff --git a/public/img/blog/grid/v2/10.jpg b/public/img/blog/grid/v2/10.jpg
new file mode 100644
index 0000000..f5c5022
Binary files /dev/null and b/public/img/blog/grid/v2/10.jpg differ
diff --git a/public/img/blog/grid/v2/11.jpg b/public/img/blog/grid/v2/11.jpg
new file mode 100644
index 0000000..2bb75ee
Binary files /dev/null and b/public/img/blog/grid/v2/11.jpg differ
diff --git a/public/img/blog/grid/v2/12.jpg b/public/img/blog/grid/v2/12.jpg
new file mode 100644
index 0000000..c711b9f
Binary files /dev/null and b/public/img/blog/grid/v2/12.jpg differ
diff --git a/public/img/blog/grid/v2/13.jpg b/public/img/blog/grid/v2/13.jpg
new file mode 100644
index 0000000..dc040ce
Binary files /dev/null and b/public/img/blog/grid/v2/13.jpg differ
diff --git a/public/img/blog/grid/v2/14.jpg b/public/img/blog/grid/v2/14.jpg
new file mode 100644
index 0000000..9215340
Binary files /dev/null and b/public/img/blog/grid/v2/14.jpg differ
diff --git a/public/img/blog/grid/v2/15.jpg b/public/img/blog/grid/v2/15.jpg
new file mode 100644
index 0000000..1564289
Binary files /dev/null and b/public/img/blog/grid/v2/15.jpg differ
diff --git a/public/img/blog/grid/v2/video01.jpg b/public/img/blog/grid/v2/video01.jpg
new file mode 100644
index 0000000..ffef3cd
Binary files /dev/null and b/public/img/blog/grid/v2/video01.jpg differ
diff --git a/public/img/blog/grid/v2/video02.jpg b/public/img/blog/grid/v2/video02.jpg
new file mode 100644
index 0000000..65e82ce
Binary files /dev/null and b/public/img/blog/grid/v2/video02.jpg differ
diff --git a/public/img/blog/list/01.jpg b/public/img/blog/list/01.jpg
new file mode 100644
index 0000000..ffaf29b
Binary files /dev/null and b/public/img/blog/list/01.jpg differ
diff --git a/public/img/blog/list/02.jpg b/public/img/blog/list/02.jpg
new file mode 100644
index 0000000..f306356
Binary files /dev/null and b/public/img/blog/list/02.jpg differ
diff --git a/public/img/blog/list/03.jpg b/public/img/blog/list/03.jpg
new file mode 100644
index 0000000..625cd7d
Binary files /dev/null and b/public/img/blog/list/03.jpg differ
diff --git a/public/img/blog/list/04.jpg b/public/img/blog/list/04.jpg
new file mode 100644
index 0000000..b1989d1
Binary files /dev/null and b/public/img/blog/list/04.jpg differ
diff --git a/public/img/blog/list/05.jpg b/public/img/blog/list/05.jpg
new file mode 100644
index 0000000..cc8602f
Binary files /dev/null and b/public/img/blog/list/05.jpg differ
diff --git a/public/img/blog/list/06.jpg b/public/img/blog/list/06.jpg
new file mode 100644
index 0000000..b3a3aa1
Binary files /dev/null and b/public/img/blog/list/06.jpg differ
diff --git a/public/img/blog/list/07.jpg b/public/img/blog/list/07.jpg
new file mode 100644
index 0000000..40e8d38
Binary files /dev/null and b/public/img/blog/list/07.jpg differ
diff --git a/public/img/blog/list/08.jpg b/public/img/blog/list/08.jpg
new file mode 100644
index 0000000..a5508d4
Binary files /dev/null and b/public/img/blog/list/08.jpg differ
diff --git a/public/img/blog/list/09.jpg b/public/img/blog/list/09.jpg
new file mode 100644
index 0000000..749a6c0
Binary files /dev/null and b/public/img/blog/list/09.jpg differ
diff --git a/public/img/blog/list/10.jpg b/public/img/blog/list/10.jpg
new file mode 100644
index 0000000..705fa15
Binary files /dev/null and b/public/img/blog/list/10.jpg differ
diff --git a/public/img/blog/list/11.jpg b/public/img/blog/list/11.jpg
new file mode 100644
index 0000000..2ba779e
Binary files /dev/null and b/public/img/blog/list/11.jpg differ
diff --git a/public/img/blog/list/12.jpg b/public/img/blog/list/12.jpg
new file mode 100644
index 0000000..134fc2b
Binary files /dev/null and b/public/img/blog/list/12.jpg differ
diff --git a/public/img/blog/post/main.jpg b/public/img/blog/post/main.jpg
new file mode 100644
index 0000000..90439f9
Binary files /dev/null and b/public/img/blog/post/main.jpg differ
diff --git a/public/img/blog/post/nav01.jpg b/public/img/blog/post/nav01.jpg
new file mode 100644
index 0000000..8bf057e
Binary files /dev/null and b/public/img/blog/post/nav01.jpg differ
diff --git a/public/img/blog/post/nav02.jpg b/public/img/blog/post/nav02.jpg
new file mode 100644
index 0000000..f4fb8f0
Binary files /dev/null and b/public/img/blog/post/nav02.jpg differ
diff --git a/public/img/blog/post/slide01.jpg b/public/img/blog/post/slide01.jpg
new file mode 100644
index 0000000..4c2134d
Binary files /dev/null and b/public/img/blog/post/slide01.jpg differ
diff --git a/public/img/blog/post/slide02.jpg b/public/img/blog/post/slide02.jpg
new file mode 100644
index 0000000..66cd6f4
Binary files /dev/null and b/public/img/blog/post/slide02.jpg differ
diff --git a/public/img/blog/post/slide03.jpg b/public/img/blog/post/slide03.jpg
new file mode 100644
index 0000000..6c3e637
Binary files /dev/null and b/public/img/blog/post/slide03.jpg differ
diff --git a/public/img/contact/form-image.jpg b/public/img/contact/form-image.jpg
new file mode 100644
index 0000000..7a9078c
Binary files /dev/null and b/public/img/contact/form-image.jpg differ
diff --git a/public/img/contact/map.jpg b/public/img/contact/map.jpg
new file mode 100644
index 0000000..34beebb
Binary files /dev/null and b/public/img/contact/map.jpg differ
diff --git a/public/img/contact/title-bg.png b/public/img/contact/title-bg.png
new file mode 100644
index 0000000..c8bea16
Binary files /dev/null and b/public/img/contact/title-bg.png differ
diff --git a/public/img/docs/browserslistrc.png b/public/img/docs/browserslistrc.png
new file mode 100644
index 0000000..22cf5c8
Binary files /dev/null and b/public/img/docs/browserslistrc.png differ
diff --git a/public/img/docs/cache.png b/public/img/docs/cache.png
new file mode 100644
index 0000000..7654372
Binary files /dev/null and b/public/img/docs/cache.png differ
diff --git a/public/img/docs/card/img-hover.jpg b/public/img/docs/card/img-hover.jpg
new file mode 100644
index 0000000..19679ba
Binary files /dev/null and b/public/img/docs/card/img-hover.jpg differ
diff --git a/public/img/docs/card/img.png b/public/img/docs/card/img.png
new file mode 100644
index 0000000..c8ddad0
Binary files /dev/null and b/public/img/docs/card/img.png differ
diff --git a/public/img/docs/image-comparison-slider/after.jpg b/public/img/docs/image-comparison-slider/after.jpg
new file mode 100644
index 0000000..90ac778
Binary files /dev/null and b/public/img/docs/image-comparison-slider/after.jpg differ
diff --git a/public/img/docs/image-comparison-slider/before.jpg b/public/img/docs/image-comparison-slider/before.jpg
new file mode 100644
index 0000000..63451c9
Binary files /dev/null and b/public/img/docs/image-comparison-slider/before.jpg differ
diff --git a/public/img/docs/local-storage.png b/public/img/docs/local-storage.png
new file mode 100644
index 0000000..820fa4d
Binary files /dev/null and b/public/img/docs/local-storage.png differ
diff --git a/public/img/docs/vercel.png b/public/img/docs/vercel.png
new file mode 100644
index 0000000..9362eb2
Binary files /dev/null and b/public/img/docs/vercel.png differ
diff --git a/public/img/flags/de.png b/public/img/flags/de.png
new file mode 100644
index 0000000..4455a98
Binary files /dev/null and b/public/img/flags/de.png differ
diff --git a/public/img/flags/en-uk.png b/public/img/flags/en-uk.png
new file mode 100644
index 0000000..dfa705e
Binary files /dev/null and b/public/img/flags/en-uk.png differ
diff --git a/public/img/flags/en-us.png b/public/img/flags/en-us.png
new file mode 100644
index 0000000..0a25bfd
Binary files /dev/null and b/public/img/flags/en-us.png differ
diff --git a/public/img/flags/fr.png b/public/img/flags/fr.png
new file mode 100644
index 0000000..83dcd9f
Binary files /dev/null and b/public/img/flags/fr.png differ
diff --git a/public/img/flags/it.png b/public/img/flags/it.png
new file mode 100644
index 0000000..372da6a
Binary files /dev/null and b/public/img/flags/it.png differ
diff --git a/public/img/help/article01.jpg b/public/img/help/article01.jpg
new file mode 100644
index 0000000..e418000
Binary files /dev/null and b/public/img/help/article01.jpg differ
diff --git a/public/img/help/article02.jpg b/public/img/help/article02.jpg
new file mode 100644
index 0000000..771ee15
Binary files /dev/null and b/public/img/help/article02.jpg differ
diff --git a/public/img/help/article03.jpg b/public/img/help/article03.jpg
new file mode 100644
index 0000000..f969dd6
Binary files /dev/null and b/public/img/help/article03.jpg differ
diff --git a/public/img/help/article04.jpg b/public/img/help/article04.jpg
new file mode 100644
index 0000000..26f38ae
Binary files /dev/null and b/public/img/help/article04.jpg differ
diff --git a/public/img/help/hero-dark.png b/public/img/help/hero-dark.png
new file mode 100644
index 0000000..19cc63a
Binary files /dev/null and b/public/img/help/hero-dark.png differ
diff --git a/public/img/help/hero-light.png b/public/img/help/hero-light.png
new file mode 100644
index 0000000..4e9e305
Binary files /dev/null and b/public/img/help/hero-light.png differ
diff --git a/public/img/help/single.jpg b/public/img/help/single.jpg
new file mode 100644
index 0000000..75807cc
Binary files /dev/null and b/public/img/help/single.jpg differ
diff --git a/public/img/home/electronics/banner/background.jpg b/public/img/home/electronics/banner/background.jpg
new file mode 100644
index 0000000..8d914e4
Binary files /dev/null and b/public/img/home/electronics/banner/background.jpg differ
diff --git a/public/img/home/electronics/banner/camera.png b/public/img/home/electronics/banner/camera.png
new file mode 100644
index 0000000..800bb8e
Binary files /dev/null and b/public/img/home/electronics/banner/camera.png differ
diff --git a/public/img/home/electronics/banner/laptop.png b/public/img/home/electronics/banner/laptop.png
new file mode 100644
index 0000000..60b5645
Binary files /dev/null and b/public/img/home/electronics/banner/laptop.png differ
diff --git a/public/img/home/electronics/hero-slider/01.png b/public/img/home/electronics/hero-slider/01.png
new file mode 100644
index 0000000..b08a968
Binary files /dev/null and b/public/img/home/electronics/hero-slider/01.png differ
diff --git a/public/img/home/electronics/hero-slider/02.png b/public/img/home/electronics/hero-slider/02.png
new file mode 100644
index 0000000..b8ef950
Binary files /dev/null and b/public/img/home/electronics/hero-slider/02.png differ
diff --git a/public/img/home/electronics/hero-slider/03.png b/public/img/home/electronics/hero-slider/03.png
new file mode 100644
index 0000000..93a7ccc
Binary files /dev/null and b/public/img/home/electronics/hero-slider/03.png differ
diff --git a/public/img/home/electronics/vlog/01.jpg b/public/img/home/electronics/vlog/01.jpg
new file mode 100644
index 0000000..8b54c09
Binary files /dev/null and b/public/img/home/electronics/vlog/01.jpg differ
diff --git a/public/img/home/electronics/vlog/02.jpg b/public/img/home/electronics/vlog/02.jpg
new file mode 100644
index 0000000..3bc781f
Binary files /dev/null and b/public/img/home/electronics/vlog/02.jpg differ
diff --git a/public/img/home/electronics/vlog/03.jpg b/public/img/home/electronics/vlog/03.jpg
new file mode 100644
index 0000000..9068bee
Binary files /dev/null and b/public/img/home/electronics/vlog/03.jpg differ
diff --git a/public/img/home/fashion/v1/collection/01.jpg b/public/img/home/fashion/v1/collection/01.jpg
new file mode 100644
index 0000000..7a82c1f
Binary files /dev/null and b/public/img/home/fashion/v1/collection/01.jpg differ
diff --git a/public/img/home/fashion/v1/collection/02.jpg b/public/img/home/fashion/v1/collection/02.jpg
new file mode 100644
index 0000000..f8f29aa
Binary files /dev/null and b/public/img/home/fashion/v1/collection/02.jpg differ
diff --git a/public/img/home/fashion/v1/hero-slider/01.png b/public/img/home/fashion/v1/hero-slider/01.png
new file mode 100644
index 0000000..3147c36
Binary files /dev/null and b/public/img/home/fashion/v1/hero-slider/01.png differ
diff --git a/public/img/home/fashion/v1/hero-slider/02.png b/public/img/home/fashion/v1/hero-slider/02.png
new file mode 100644
index 0000000..4b2b8da
Binary files /dev/null and b/public/img/home/fashion/v1/hero-slider/02.png differ
diff --git a/public/img/home/fashion/v1/hero-slider/03.png b/public/img/home/fashion/v1/hero-slider/03.png
new file mode 100644
index 0000000..4b93a00
Binary files /dev/null and b/public/img/home/fashion/v1/hero-slider/03.png differ
diff --git a/public/img/home/fashion/v1/popular/01.jpg b/public/img/home/fashion/v1/popular/01.jpg
new file mode 100644
index 0000000..effc594
Binary files /dev/null and b/public/img/home/fashion/v1/popular/01.jpg differ
diff --git a/public/img/home/fashion/v1/popular/02.jpg b/public/img/home/fashion/v1/popular/02.jpg
new file mode 100644
index 0000000..c723a8e
Binary files /dev/null and b/public/img/home/fashion/v1/popular/02.jpg differ
diff --git a/public/img/home/fashion/v1/reviews/01.png b/public/img/home/fashion/v1/reviews/01.png
new file mode 100644
index 0000000..d90f922
Binary files /dev/null and b/public/img/home/fashion/v1/reviews/01.png differ
diff --git a/public/img/home/fashion/v1/reviews/02.png b/public/img/home/fashion/v1/reviews/02.png
new file mode 100644
index 0000000..45d6caa
Binary files /dev/null and b/public/img/home/fashion/v1/reviews/02.png differ
diff --git a/public/img/home/fashion/v1/reviews/03.png b/public/img/home/fashion/v1/reviews/03.png
new file mode 100644
index 0000000..b89ba93
Binary files /dev/null and b/public/img/home/fashion/v1/reviews/03.png differ
diff --git a/public/img/home/fashion/v1/reviews/04.png b/public/img/home/fashion/v1/reviews/04.png
new file mode 100644
index 0000000..edef80c
Binary files /dev/null and b/public/img/home/fashion/v1/reviews/04.png differ
diff --git a/public/img/home/fashion/v1/reviews/05.png b/public/img/home/fashion/v1/reviews/05.png
new file mode 100644
index 0000000..c1d7f8c
Binary files /dev/null and b/public/img/home/fashion/v1/reviews/05.png differ
diff --git a/public/img/home/fashion/v2/brands/adidas-dark.svg b/public/img/home/fashion/v2/brands/adidas-dark.svg
new file mode 100644
index 0000000..a33f8fe
--- /dev/null
+++ b/public/img/home/fashion/v2/brands/adidas-dark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 221 231" fill="#cad0d9"><path d="M155.605 148.613c-4.982 0-7.937-2.561-8.163-6.248h4.763c0 1.229.679 2.865 3.626 2.967 2.043 0 3.173-1.229 3.173-2.153-.226-1.433-2.042-1.535-3.851-1.848-2.043-.297-3.626-.712-4.764-1.221-1.583-.822-2.495-2.568-2.495-4.408 0-3.281 2.729-5.841 7.485-5.841 4.538 0 7.485 2.357 7.703 5.943h-4.53c0-.917-.226-2.459-2.947-2.459-1.817 0-2.947.305-3.173 1.636 0 1.848 3.851 1.746 6.798 2.459 2.721.72 4.538 2.458 4.538 4.925 0 4.51-3.626 6.248-8.163 6.248zm-86.809-30.258l15.64-9.121 8.389 14.454H71.743"/><path d="M103.973 129.826v18.243h-4.577v-18.243h4.577z"/><path d="M61.536 139.217c0 2.866 2.495 5.223 5.208 5.223 2.955 0 5.216-2.357 5.216-5.223 0-2.763-2.261-5.222-5.216-5.222-2.713 0-5.208 2.459-5.208 5.222zm4.982 9.427c-4.982 0-9.286-4.204-9.286-9.427s4.304-9.324 9.286-9.324c2.043 0 3.859.516 5.442 1.636v-1.433h4.538v18.133h-4.537v-1.127c-1.357 1.026-3.4 1.542-5.442 1.542zm60.537-24.961l-21.761-38.114 15.64-9.223 27.203 47.337m-65.744 15.534c0 2.866 2.269 5.223 5.216 5.223 2.713 0 5.216-2.357 5.216-5.223 0-2.763-2.503-5.222-5.216-5.222-2.947 0-5.216 2.459-5.216 5.222zm4.99 9.427c-5.216 0-9.294-4.204-9.294-9.427s4.078-9.324 9.294-9.324c2.035 0 3.852.516 5.442 1.636v-7.681h4.53v24.381h-4.53v-1.127c-1.591 1.026-3.407 1.542-5.442 1.542zm-.223-46.579l15.866-9.012 17.458 30.629H103.93v4.51H99.4v-4.51m61.428 4.652c-1.138 0-2.268-1.026-2.268-2.255s1.13-2.255 2.268-2.255c1.357 0 2.27 1.026 2.27 2.255s-.913 2.255-2.27 2.255zm0-4.196c-1.138 0-1.816.916-1.816 1.941s.678 1.95 1.816 1.95c1.131 0 1.809-.924 1.809-1.95s-.678-1.941-1.809-1.941z"/><path d="M161.297 127.316l-.453-1.025h-.452v1.025h-.343v-2.458h1.021c.227 0 .679.313.679.72a.73.73 0 0 1-.452.713l.452 1.025m-.905-2.145h-.452v.814h.452c.453 0 .453-.101.453-.407 0-.211 0-.407-.453-.407zm-29.955 14.046c0 2.866 2.269 5.223 5.216 5.223 2.721 0 5.208-2.357 5.208-5.223 0-2.763-2.487-5.222-5.208-5.222-2.947 0-5.216 2.459-5.216 5.222zm4.982 9.427c-5.208 0-9.286-4.204-9.286-9.427s4.078-9.325 9.286-9.325c2.043 0 3.859.517 5.442 1.637v-1.433h4.312v18.133h-4.311v-1.127c-1.584 1.026-3.4 1.542-5.443 1.542zm-25.823-9.427c0 2.866 2.495 5.223 5.216 5.223 2.948 0 5.216-2.357 5.216-5.223 0-2.763-2.269-5.222-5.216-5.222-2.721 0-5.216 2.459-5.216 5.222zm10.432-15.369h4.53v24.381h-4.53v-1.127c-1.364 1.026-3.181 1.542-5.216 1.542-5.216 0-9.52-4.204-9.52-9.427s4.304-9.325 9.52-9.325c2.035 0 3.852.517 5.216 1.637v-7.681z"/></svg>
\ No newline at end of file
diff --git a/public/img/home/fashion/v2/brands/adidas-light.svg b/public/img/home/fashion/v2/brands/adidas-light.svg
new file mode 100644
index 0000000..0cd3e34
--- /dev/null
+++ b/public/img/home/fashion/v2/brands/adidas-light.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 221 231" fill="#4e5562"><path d="M155.605 148.613c-4.982 0-7.937-2.561-8.163-6.248h4.763c0 1.229.679 2.865 3.626 2.967 2.043 0 3.173-1.229 3.173-2.153-.226-1.433-2.042-1.535-3.851-1.848-2.043-.297-3.626-.712-4.764-1.221-1.583-.822-2.495-2.568-2.495-4.408 0-3.281 2.729-5.841 7.485-5.841 4.538 0 7.485 2.357 7.703 5.943h-4.53c0-.917-.226-2.459-2.947-2.459-1.817 0-2.947.305-3.173 1.636 0 1.848 3.851 1.746 6.798 2.459 2.721.72 4.538 2.458 4.538 4.925 0 4.51-3.626 6.248-8.163 6.248zm-86.809-30.258l15.64-9.121 8.389 14.454H71.743"/><path d="M103.973 129.826v18.243h-4.577v-18.243h4.577z"/><path d="M61.536 139.217c0 2.866 2.495 5.223 5.208 5.223 2.955 0 5.216-2.357 5.216-5.223 0-2.763-2.261-5.222-5.216-5.222-2.713 0-5.208 2.459-5.208 5.222zm4.982 9.427c-4.982 0-9.286-4.204-9.286-9.427s4.304-9.324 9.286-9.324c2.043 0 3.859.516 5.442 1.636v-1.433h4.538v18.133h-4.537v-1.127c-1.357 1.026-3.4 1.542-5.442 1.542zm60.537-24.961l-21.761-38.114 15.64-9.223 27.203 47.337m-65.744 15.534c0 2.866 2.269 5.223 5.216 5.223 2.713 0 5.216-2.357 5.216-5.223 0-2.763-2.503-5.222-5.216-5.222-2.947 0-5.216 2.459-5.216 5.222zm4.99 9.427c-5.216 0-9.294-4.204-9.294-9.427s4.078-9.324 9.294-9.324c2.035 0 3.852.516 5.442 1.636v-7.681h4.53v24.381h-4.53v-1.127c-1.591 1.026-3.407 1.542-5.442 1.542zm-.223-46.579l15.866-9.012 17.458 30.629H103.93v4.51H99.4v-4.51m61.428 4.652c-1.138 0-2.268-1.026-2.268-2.255s1.13-2.255 2.268-2.255c1.357 0 2.27 1.026 2.27 2.255s-.913 2.255-2.27 2.255zm0-4.196c-1.138 0-1.816.916-1.816 1.941s.678 1.95 1.816 1.95c1.131 0 1.809-.924 1.809-1.95s-.678-1.941-1.809-1.941z"/><path d="M161.297 127.316l-.453-1.025h-.452v1.025h-.343v-2.458h1.021c.227 0 .679.313.679.72a.73.73 0 0 1-.452.713l.452 1.025m-.905-2.145h-.452v.814h.452c.453 0 .453-.101.453-.407 0-.211 0-.407-.453-.407zm-29.955 14.046c0 2.866 2.269 5.223 5.216 5.223 2.721 0 5.208-2.357 5.208-5.223 0-2.763-2.487-5.222-5.208-5.222-2.947 0-5.216 2.459-5.216 5.222zm4.982 9.427c-5.208 0-9.286-4.204-9.286-9.427s4.078-9.325 9.286-9.325c2.043 0 3.859.517 5.442 1.637v-1.433h4.312v18.133h-4.311v-1.127c-1.584 1.026-3.4 1.542-5.443 1.542zm-25.823-9.427c0 2.866 2.495 5.223 5.216 5.223 2.948 0 5.216-2.357 5.216-5.223 0-2.763-2.269-5.222-5.216-5.222-2.721 0-5.216 2.459-5.216 5.222zm10.432-15.369h4.53v24.381h-4.53v-1.127c-1.364 1.026-3.181 1.542-5.216 1.542-5.216 0-9.52-4.204-9.52-9.427s4.304-9.325 9.52-9.325c2.035 0 3.852.517 5.216 1.637v-7.681z"/></svg>
\ No newline at end of file
diff --git a/public/img/home/fashion/v2/brands/brooks-dark.svg b/public/img/home/fashion/v2/brands/brooks-dark.svg
new file mode 100644
index 0000000..8d194e2
--- /dev/null
+++ b/public/img/home/fashion/v2/brands/brooks-dark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 429 145" fill="#cad0d9"><path d="M203.03 71.496c2.763-14.038 13.466-19.464 18.608-19.522 7.309.058 14.277 9.709 11.267 22.169-2.965 12.389-10.931 19.144-19.291 18.86-8.319-.441-13.299-7.318-10.584-21.507zm6.223.395c1.637-8.568 7.977-11.88 11.022-11.916 4.33.035 8.458 5.926 6.674 13.531-1.756 7.562-6.475 11.685-11.426 11.512-4.928-.269-7.878-4.467-6.27-13.127zm-46.636-16.305l-.9.028-1.878 10.092-7.512-4.136.683-3.805c.128-1.332-.557-2.115-1.878-2.151-1.914.036-1.604-2.377 0-2.316l5.1.109 1.388.057 7.852-.331c2.977-.196 11.012.626 9.902 8.768-.763 6.237-7.173 8.768-7.511 8.768-.285 0-.41.483.17.496 5.27 2.098 5.768 7.042 5.292 9.761-1.579 9.709-10.169 11.939-16.218 11.581l-1.805-.154-4.17-.342-.107.006-6.38.325c-2.026.041-1.155-2.192.171-2.482l.234-.037c1.053-.166 1.883-.298 2.156-1.452l1.366-8.107c1.269-.91 7.181-3.562 9.389-4.467l-2.39 11.746c-.194 1.522.492 2.245 1.707 2.316 1.958-.072 5.941-.915 7.341-8.768 1.465-7.828-2.02-8.01-3.073-7.941-3.118-.069-24.031 8.374-28.68 19.026h-19.291c-.894.025-.831-.576-.171-1.324.583-.822 16.332-17.589 35.85-20.515l-13.998-14.559c-.356-.461-.137-1.246 1.024-.662l24.754 13.235a2.57 2.57 0 0 1 .231.095c.195.087.427.191.793.236l.177-.038c1.648-.354 3.873-.833 4.774-7.903.709-5.418-2.25-5.266-4.392-5.156zm72.508 15.91c2.677-14.038 13.384-19.464 18.437-19.522 7.395.058 14.363 9.709 11.438 22.169-3.05 12.389-11.017 19.144-19.291 18.86-8.405-.441-13.384-7.318-10.584-21.507zm6.097.395c1.637-8.568 7.977-11.88 11.022-11.916 4.33.035 8.457 5.926 6.674 13.531-1.756 7.562-6.475 11.685-11.426 11.512-4.928-.269-7.878-4.467-6.27-13.127z" fill-rule="evenodd"/><path d="M292.314 92.177c1.574.328 5.273.973 7.853.827 2.968-.077 10.923-1.985 13.999-10.588 2.538-7.464-2.441-12.289-3.585-13.235-1.098-.984-7.133-5.868-7.17-8.768.037-2.556 2.088-5.302 5.292-5.294 3.269-.008 4.328 4.213 4.951 8.107.185 1.412 1.681 1.897 1.878.662l1.536-7.941c.071-.777.009-1.078-.341-1.323-1.642-1.084-3.01-1.988-7.17-1.985-4.305.119-10.218 3.075-12.121 6.783-3.232 6.414-.151 11.914 1.024 13.235 1.315 1.332 5.975 5.625 5.975 5.625 1.631 1.916 3.93 5.418.854 10.257a5.51 5.51 0 0 1-2.159 1.794 5.7 5.7 0 0 1-2.792.522c-1.559-.099-4.049-.339-4.268-9.926-.028-2.115-2.396-2.476-3.073 0l-1.536 8.438a5 5 0 0 0-.342-.827l-6.999-22.665 2.732-3.143c6.014-6.957 8.814-7.318 10.242-7.279 1.747.094 1.312-2.211.174-2.151-1.101-.061-3.653.061-4.441 0-.956.061-4.877-.061-6.146 0-1.346-.061-1.659 2.231.171 2.151 1.781-.039 1.408 2.01.682 2.813L276.95 70.504c-.267.287-.828.166-.683-.331l2.219-12.243c.376-1.495 1.87-2.402 3.244-2.482 1.363-.039 1.178-2.211 0-2.151-2.874-.061-5.358.119-6.829.165-1.516-.047-4.256-.226-6.487-.165-1.627-.061-1.69 2.291.171 2.316 1.377-.025 1.812.819 1.707 2.151l-5.804 30.607c-.313 1.238-1.246 1.299-2.561 1.489-1.178.29-2.049 2.523 0 2.482l6.487-.331c1.235.072 5.591.19 6.487.331.974-.019 1.534-1.767.171-2.151-1.499-.46-2.433-1.125-2.219-2.647l2.731-13.566h1.537l4.268 14.062c.21 1.266.398 1.869-.854 1.985-1.423.185-1.673 2.176-.171 2.151 1.363.025 4.473-.097 5.975-.168 1.36.072 3.602.245 5.463.168.217.019.393-.008.512 0z"/><path d="M187.836 74.474h-2.219l-2.561 13.067c-.168 1.522.765 2.187 2.219 2.647 1.409.383.851 2.131 0 2.151-.692-.096-2.925-.181-4.687-.248l-1.971-.083-6.487.331c-2 .041-1.129-2.192.171-2.482l.231-.036c1.078-.167 1.909-.296 2.159-1.453l5.804-30.606c.151-1.332-.532-2.115-1.878-2.151-1.892.036-1.581-2.377.171-2.316 1.557-.045 3.459.041 4.938.108l1.379.057 7.853-.331c3.001-.196 11.153.587 10.413 8.768-.629 8.225-9.466 10.459-9.731 10.423-.358.036-.48.518 0 .496 1.634.022 3.065.626 3.415 2.815l1.707 11.581c.31 1.492.805 2.396 2.219 2.647 1.326.232 1.451 2.341 0 2.316h-9.56c-.503.025-.754-.276-.853-.827l-2.732-16.875zm1.947-18.862l-.581.002-3.073 16.048c4.88.064 7.839-3.527 8.194-10.257.338-5.849-2.46-5.816-4.54-5.792z"/></svg>
\ No newline at end of file
diff --git a/public/img/home/fashion/v2/brands/brooks-light.svg b/public/img/home/fashion/v2/brands/brooks-light.svg
new file mode 100644
index 0000000..f4ca18a
--- /dev/null
+++ b/public/img/home/fashion/v2/brands/brooks-light.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 429 145" fill="#4e5562"><path d="M203.03 71.496c2.763-14.038 13.466-19.464 18.608-19.522 7.309.058 14.277 9.709 11.267 22.169-2.965 12.389-10.931 19.144-19.291 18.86-8.319-.441-13.299-7.318-10.584-21.507zm6.223.395c1.637-8.568 7.977-11.88 11.022-11.916 4.33.035 8.458 5.926 6.674 13.531-1.756 7.562-6.475 11.685-11.426 11.512-4.928-.269-7.878-4.467-6.27-13.127zm-46.636-16.305l-.9.028-1.878 10.092-7.512-4.136.683-3.805c.128-1.332-.557-2.115-1.878-2.151-1.914.036-1.604-2.377 0-2.316l5.1.109 1.388.057 7.852-.331c2.977-.196 11.012.626 9.902 8.768-.763 6.237-7.173 8.768-7.511 8.768-.285 0-.41.483.17.496 5.27 2.098 5.768 7.042 5.292 9.761-1.579 9.709-10.169 11.939-16.218 11.581l-1.805-.154-4.17-.342-.107.006-6.38.325c-2.026.041-1.155-2.192.171-2.482l.234-.037c1.053-.166 1.883-.298 2.156-1.452l1.366-8.107c1.269-.91 7.181-3.562 9.389-4.467l-2.39 11.746c-.194 1.522.492 2.245 1.707 2.316 1.958-.072 5.941-.915 7.341-8.768 1.465-7.828-2.02-8.01-3.073-7.941-3.118-.069-24.031 8.374-28.68 19.026h-19.291c-.894.025-.831-.576-.171-1.324.583-.822 16.332-17.589 35.85-20.515l-13.998-14.559c-.356-.461-.137-1.246 1.024-.662l24.754 13.235a2.57 2.57 0 0 1 .231.095c.195.087.427.191.793.236l.177-.038c1.648-.354 3.873-.833 4.774-7.903.709-5.418-2.25-5.266-4.392-5.156zm72.508 15.91c2.677-14.038 13.384-19.464 18.437-19.522 7.395.058 14.363 9.709 11.438 22.169-3.05 12.389-11.017 19.144-19.291 18.86-8.405-.441-13.384-7.318-10.584-21.507zm6.097.395c1.637-8.568 7.977-11.88 11.022-11.916 4.33.035 8.457 5.926 6.674 13.531-1.756 7.562-6.475 11.685-11.426 11.512-4.928-.269-7.878-4.467-6.27-13.127z" fill-rule="evenodd"/><path d="M292.314 92.177c1.574.328 5.273.973 7.853.827 2.968-.077 10.923-1.985 13.999-10.588 2.538-7.464-2.441-12.289-3.585-13.235-1.098-.984-7.133-5.868-7.17-8.768.037-2.556 2.088-5.302 5.292-5.294 3.269-.008 4.328 4.213 4.951 8.107.185 1.412 1.681 1.897 1.878.662l1.536-7.941c.071-.777.009-1.078-.341-1.323-1.642-1.084-3.01-1.988-7.17-1.985-4.305.119-10.218 3.075-12.121 6.783-3.232 6.414-.151 11.914 1.024 13.235 1.315 1.332 5.975 5.625 5.975 5.625 1.631 1.916 3.93 5.418.854 10.257a5.51 5.51 0 0 1-2.159 1.794 5.7 5.7 0 0 1-2.792.522c-1.559-.099-4.049-.339-4.268-9.926-.028-2.115-2.396-2.476-3.073 0l-1.536 8.438a5 5 0 0 0-.342-.827l-6.999-22.665 2.732-3.143c6.014-6.957 8.814-7.318 10.242-7.279 1.747.094 1.312-2.211.174-2.151-1.101-.061-3.653.061-4.441 0-.956.061-4.877-.061-6.146 0-1.346-.061-1.659 2.231.171 2.151 1.781-.039 1.408 2.01.682 2.813L276.95 70.504c-.267.287-.828.166-.683-.331l2.219-12.243c.376-1.495 1.87-2.402 3.244-2.482 1.363-.039 1.178-2.211 0-2.151-2.874-.061-5.358.119-6.829.165-1.516-.047-4.256-.226-6.487-.165-1.627-.061-1.69 2.291.171 2.316 1.377-.025 1.812.819 1.707 2.151l-5.804 30.607c-.313 1.238-1.246 1.299-2.561 1.489-1.178.29-2.049 2.523 0 2.482l6.487-.331c1.235.072 5.591.19 6.487.331.974-.019 1.534-1.767.171-2.151-1.499-.46-2.433-1.125-2.219-2.647l2.731-13.566h1.537l4.268 14.062c.21 1.266.398 1.869-.854 1.985-1.423.185-1.673 2.176-.171 2.151 1.363.025 4.473-.097 5.975-.168 1.36.072 3.602.245 5.463.168.217.019.393-.008.512 0z"/><path d="M187.836 74.474h-2.219l-2.561 13.067c-.168 1.522.765 2.187 2.219 2.647 1.409.383.851 2.131 0 2.151-.692-.096-2.925-.181-4.687-.248l-1.971-.083-6.487.331c-2 .041-1.129-2.192.171-2.482l.231-.036c1.078-.167 1.909-.296 2.159-1.453l5.804-30.606c.151-1.332-.532-2.115-1.878-2.151-1.892.036-1.581-2.377.171-2.316 1.557-.045 3.459.041 4.938.108l1.379.057 7.853-.331c3.001-.196 11.153.587 10.413 8.768-.629 8.225-9.466 10.459-9.731 10.423-.358.036-.48.518 0 .496 1.634.022 3.065.626 3.415 2.815l1.707 11.581c.31 1.492.805 2.396 2.219 2.647 1.326.232 1.451 2.341 0 2.316h-9.56c-.503.025-.754-.276-.853-.827l-2.732-16.875zm1.947-18.862l-.581.002-3.073 16.048c4.88.064 7.839-3.527 8.194-10.257.338-5.849-2.46-5.816-4.54-5.792z"/></svg>
\ No newline at end of file
diff --git a/public/img/home/fashion/v2/brands/dior-dark.svg b/public/img/home/fashion/v2/brands/dior-dark.svg
new file mode 100644
index 0000000..c76ae48
--- /dev/null
+++ b/public/img/home/fashion/v2/brands/dior-dark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 221 286" fill="#cad0d9"><path d="M54.493 119.85l-2.205-.112-.909-.18-.182-.337c0-.315.227-.45.682-.45h22.802c10.685 0 18.187 3.214 22.552 9.664 2.501 3.73 3.75 8.158 3.75 13.282 0 2.674-.409 5.258-1.25 7.753-.954 2.629-2.273 4.945-3.978 7.012-1.865 2.18-4.138 3.866-6.752 5.102-2.797 1.258-5.934 1.91-9.457 1.91H50.47c-.477 0-.705-.158-.705-.427 0-.292.341-.449.977-.449l5.57-.336c.864-.114 1.478-.361 1.774-.698l.568-.787c.205-.538.319-1.347.341-2.449v-35.644c0-1.393-.796-2.247-2.341-2.584l-2.161-.27zm12.277.607l-.159.899v39.576c0 .449.091.763.273.876l.91.135h3.001l6.956-.247c1.864-.202 3.455-.495 4.706-.899 1.244-.449 2.409-1.085 3.455-1.887.909-.742 1.841-1.799 2.865-3.147 1.704-2.202 2.932-5.011 3.682-8.45.454-2.246.682-4.426.682-6.516 0-1.843-.273-3.821-.841-5.956-.796-3.079-2.001-5.776-3.706-8.068-3.296-4.449-8.707-6.652-16.186-6.652h-4.615c-.522-.046-.863.066-1.022.336zm38.692 42.7c-.045-.271.182-.383.683-.383l1.591-.045c.864-.112 1.387-.404 1.591-.854l.296-1.618V147.2c0-.494-.182-.876-.523-1.101l-1.182-.113-1.591.428-.865-.046c-.113-.27.228-.517 1.023-.742 1.887-.494 3.548-1.123 4.956-1.91.864-.494 1.478-.764 1.75-.876l.683-.067c.227.044.341.494.341 1.303v16.45c0 .786.182 1.348.523 1.685.409.405 1.364.607 2.842.607.523 0 .795.113.841.359 0 .203-.159.27-.432.27h-12.118c-.272.002-.409-.111-.409-.29zm53.652-16.182c-1.114 1.147-1.864 2.495-2.274 4.113v9.552c0 .853.296 1.46.91 1.842l1.387.246 1.455.158c.341.045.478.113.478.292l-.068.158-.387.113h-12.162c-.364 0-.568-.113-.568-.292l.34-.271 2.047-.157c.795-.135 1.296-.404 1.568-.809l.342-1.011v-13.484l-.228-.989-.386-.224c-.114-.112-.295-.179-.569-.225-.34-.022-.75.046-1.181.225l-1.159.315-.66-.158c-.114-.157-.068-.269.091-.336l.977-.405c2.227-.652 4.024-1.326 5.275-2.022l1.545-.832.682.044.273.563v4.943c1.706-2.741 3.069-4.426 4.002-4.989.568-.336 1.113-.607 1.523-.719l.795-.067c.5-.045 1.069.112 1.705.517.864.494 1.319 1.236 1.364 2.179.046.788-.183 1.395-.683 1.866-.454.382-.909.495-1.318.382-.386-.067-.682-.225-.886-.449l-.637-.786c-.5-.72-.977-.945-1.545-.742-.662.178-1.343.674-2.048 1.459zm-47.513-18.473a2.84 2.84 0 0 0-2.091.855 2.57 2.57 0 0 0-.865 2.112c-.045.787.25 1.461.865 2.023a2.84 2.84 0 0 0 2.091.854 2.87 2.87 0 0 0 2.068-.854c.568-.562.886-1.236.886-2.023a2.9 2.9 0 0 0-.886-2.112c-.568-.562-1.273-.855-2.068-.855zm12.049 17.934c.818-1.079 1.842-1.978 3.069-2.696 1.092-.63 2.182-1.034 3.319-1.237l4.206-.247c1.522.067 2.933.36 4.206.921 3.069 1.348 5.001 3.821 5.728 7.416.75 3.641.115 6.721-1.887 9.215-1.704 2.112-3.955 3.461-6.797 4.045-2.977.651-5.751.449-8.252-.562-3.252-1.304-5.228-3.888-5.866-7.663-.568-3.573.182-6.608 2.274-9.192zm13.321-1.011c-1.387-1.527-3.137-2.202-5.252-2.023-2.045.203-3.614 1.326-4.637 3.461-.932 1.933-1.273 4.294-.932 7.08.249 2.764 1.137 4.966 2.568 6.652 1.524 1.775 3.252 2.517 5.184 2.18 2.023-.382 3.502-1.462 4.479-3.259.954-1.842 1.295-4.224 1.068-7.258-.272-3.034-1.067-5.283-2.478-6.833zm-31.668.989v.225l-.5-.315v.112l.045.203h-.068v-.428h.023l.454.338v-.338h.091l-.045.203z"/><path d="M106.144 146.257h-.272v.157h.227v.022h-.227v.157h.272v.046h-.34v-.428h.34v.046zm1.251-.046h.023l-.227.428h-.069l-.182-.338-.204.338h-.023c-.114-.203-.205-.338-.228-.428h.114l.137.338.204-.338h.068l.16.338.182-.338h.045zm.636.225l.046.203h-.114v-.157l-.227-.271h.113l.182.225.182-.225h.091l-.273.225zm.637-.134c.045-.045.159-.09.273-.09s.182.045.273.09c.022.022.068.067.068.134l-.068.158c-.091.045-.159.045-.273.045s-.227 0-.273-.045l-.114-.158c0-.067.046-.112.114-.134zm.455 0l-.182-.045-.181.045c-.046.022-.091.067-.091.134 0 .046.045.09.091.114l.181.089c.068 0 .159-.045.182-.089.045-.023.091-.068.091-.114 0-.067-.046-.112-.091-.134zm.682-.045l-.023.157h.068c.113 0 .182-.045.182-.09 0-.022-.023-.067-.138-.067h-.089zm.113-.046c.115 0 .204.046.204.113l-.09.09-.114.022.273.203h-.115l-.272-.203h-.022l.023.203h-.115v-.428h.228zm1.137 0l-.295.203.295.225h-.113l-.251-.203v-.022l-.046.022.046.203h-.114v-.428h.114l-.046.203h.046l.296-.203h.068z"/></svg>
\ No newline at end of file
diff --git a/public/img/home/fashion/v2/brands/dior-light.svg b/public/img/home/fashion/v2/brands/dior-light.svg
new file mode 100644
index 0000000..c9f84d6
--- /dev/null
+++ b/public/img/home/fashion/v2/brands/dior-light.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 221 286" fill="#4e5562"><path d="M54.493 119.85l-2.205-.112-.909-.18-.182-.337c0-.315.227-.45.682-.45h22.802c10.685 0 18.187 3.214 22.552 9.664 2.501 3.73 3.75 8.158 3.75 13.282 0 2.674-.409 5.258-1.25 7.753-.954 2.629-2.273 4.945-3.978 7.012-1.865 2.18-4.138 3.866-6.752 5.102-2.797 1.258-5.934 1.91-9.457 1.91H50.47c-.477 0-.705-.158-.705-.427 0-.292.341-.449.977-.449l5.57-.336c.864-.114 1.478-.361 1.774-.698l.568-.787c.205-.538.319-1.347.341-2.449v-35.644c0-1.393-.796-2.247-2.341-2.584l-2.161-.27zm12.277.607l-.159.899v39.576c0 .449.091.763.273.876l.91.135h3.001l6.956-.247c1.864-.202 3.455-.495 4.706-.899 1.244-.449 2.409-1.085 3.455-1.887.909-.742 1.841-1.799 2.865-3.147 1.704-2.202 2.932-5.011 3.682-8.45.454-2.246.682-4.426.682-6.516 0-1.843-.273-3.821-.841-5.956-.796-3.079-2.001-5.776-3.706-8.068-3.296-4.449-8.707-6.652-16.186-6.652h-4.615c-.522-.046-.863.066-1.022.336zm38.692 42.7c-.045-.271.182-.383.683-.383l1.591-.045c.864-.112 1.387-.404 1.591-.854l.296-1.618V147.2c0-.494-.182-.876-.523-1.101l-1.182-.113-1.591.428-.865-.046c-.113-.27.228-.517 1.023-.742 1.887-.494 3.548-1.123 4.956-1.91.864-.494 1.478-.764 1.75-.876l.683-.067c.227.044.341.494.341 1.303v16.45c0 .786.182 1.348.523 1.685.409.405 1.364.607 2.842.607.523 0 .795.113.841.359 0 .203-.159.27-.432.27h-12.118c-.272.002-.409-.111-.409-.29zm53.652-16.182c-1.114 1.147-1.864 2.495-2.274 4.113v9.552c0 .853.296 1.46.91 1.842l1.387.246 1.455.158c.341.045.478.113.478.292l-.068.158-.387.113h-12.162c-.364 0-.568-.113-.568-.292l.34-.271 2.047-.157c.795-.135 1.296-.404 1.568-.809l.342-1.011v-13.484l-.228-.989-.386-.224c-.114-.112-.295-.179-.569-.225-.34-.022-.75.046-1.181.225l-1.159.315-.66-.158c-.114-.157-.068-.269.091-.336l.977-.405c2.227-.652 4.024-1.326 5.275-2.022l1.545-.832.682.044.273.563v4.943c1.706-2.741 3.069-4.426 4.002-4.989.568-.336 1.113-.607 1.523-.719l.795-.067c.5-.045 1.069.112 1.705.517.864.494 1.319 1.236 1.364 2.179.046.788-.183 1.395-.683 1.866-.454.382-.909.495-1.318.382-.386-.067-.682-.225-.886-.449l-.637-.786c-.5-.72-.977-.945-1.545-.742-.662.178-1.343.674-2.048 1.459zm-47.513-18.473a2.84 2.84 0 0 0-2.091.855 2.57 2.57 0 0 0-.865 2.112c-.045.787.25 1.461.865 2.023a2.84 2.84 0 0 0 2.091.854 2.87 2.87 0 0 0 2.068-.854c.568-.562.886-1.236.886-2.023a2.9 2.9 0 0 0-.886-2.112c-.568-.562-1.273-.855-2.068-.855zm12.049 17.934c.818-1.079 1.842-1.978 3.069-2.696 1.092-.63 2.182-1.034 3.319-1.237l4.206-.247c1.522.067 2.933.36 4.206.921 3.069 1.348 5.001 3.821 5.728 7.416.75 3.641.115 6.721-1.887 9.215-1.704 2.112-3.955 3.461-6.797 4.045-2.977.651-5.751.449-8.252-.562-3.252-1.304-5.228-3.888-5.866-7.663-.568-3.573.182-6.608 2.274-9.192zm13.321-1.011c-1.387-1.527-3.137-2.202-5.252-2.023-2.045.203-3.614 1.326-4.637 3.461-.932 1.933-1.273 4.294-.932 7.08.249 2.764 1.137 4.966 2.568 6.652 1.524 1.775 3.252 2.517 5.184 2.18 2.023-.382 3.502-1.462 4.479-3.259.954-1.842 1.295-4.224 1.068-7.258-.272-3.034-1.067-5.283-2.478-6.833zm-31.668.989v.225l-.5-.315v.112l.045.203h-.068v-.428h.023l.454.338v-.338h.091l-.045.203z"/><path d="M106.144 146.257h-.272v.157h.227v.022h-.227v.157h.272v.046h-.34v-.428h.34v.046zm1.251-.046h.023l-.227.428h-.069l-.182-.338-.204.338h-.023c-.114-.203-.205-.338-.228-.428h.114l.137.338.204-.338h.068l.16.338.182-.338h.045zm.636.225l.046.203h-.114v-.157l-.227-.271h.113l.182.225.182-.225h.091l-.273.225zm.637-.134c.045-.045.159-.09.273-.09s.182.045.273.09c.022.022.068.067.068.134l-.068.158c-.091.045-.159.045-.273.045s-.227 0-.273-.045l-.114-.158c0-.067.046-.112.114-.134zm.455 0l-.182-.045-.181.045c-.046.022-.091.067-.091.134 0 .046.045.09.091.114l.181.089c.068 0 .159-.045.182-.089.045-.023.091-.068.091-.114 0-.067-.046-.112-.091-.134zm.682-.045l-.023.157h.068c.113 0 .182-.045.182-.09 0-.022-.023-.067-.138-.067h-.089zm.113-.046c.115 0 .204.046.204.113l-.09.09-.114.022.273.203h-.115l-.272-.203h-.022l.023.203h-.115v-.428h.228zm1.137 0l-.295.203.295.225h-.113l-.251-.203v-.022l-.046.022.046.203h-.114v-.428h.114l-.046.203h.046l.296-.203h.068z"/></svg>
\ No newline at end of file
diff --git a/public/img/home/fashion/v2/brands/fila-dark.svg b/public/img/home/fashion/v2/brands/fila-dark.svg
new file mode 100644
index 0000000..dc55d5d
--- /dev/null
+++ b/public/img/home/fashion/v2/brands/fila-dark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 221 232" fill="#cad0d9"><path d="M101.017 118.457c0 2.799-2.324 5.067-5.19 5.067s-5.192-2.269-5.192-5.067V92.811c0-2.799 2.324-5.067 5.192-5.067s5.19 2.268 5.19 5.067v25.646zM59.695 97.991c-2.867 0-5.191-2.269-5.191-5.068s2.324-5.068 5.191-5.068h22.367c2.866 0 5.191 2.269 5.191 5.068s-2.324 5.068-5.19 5.068H59.695zm20.876 13.103c2.866 0 5.19-2.269 5.19-5.068s-2.324-5.068-5.19-5.068H59.81c-2.867 0-5.19 2.268-5.19 5.068v12.431c0 2.799 2.324 5.067 5.19 5.067s5.191-2.269 5.191-5.067v-7.392l15.57.029zm77.652 12.472c4.569 0 8.273-3.673 8.273-8.133 0-1.673-.521-3.227-1.413-4.516l-13.401-21.312c-.925-1.391-2.531-2.31-4.355-2.31-1.883 0-3.532.978-4.442 2.443l-14.484 22.783H115.01V92.924c0-2.799-2.324-5.068-5.19-5.068s-5.191 2.269-5.191 5.068v25.533c0 2.799 2.325 5.067 5.191 5.067h19.098c2.351.027 4.702-1.261 6.423-3.893l11.986-18.757 8.028 12.486-11.24.028c-2.866 0-5.191 2.268-5.191 5.067s2.325 5.068 5.191 5.068l14.108.043zm-95.564 12.766c.189-.369.465-.682.802-.909.327-.226.711-.346 1.103-.344 1.377 0 2.115.818 2.214 2.453h-4.412a2.57 2.57 0 0 1 .294-1.2zm3.771 4.107c-.174.255-.414.471-.722.646s-.654.264-1.041.264c-.755 0-1.328-.235-1.718-.704s-.585-1.136-.585-2.006h5.791c0-.977-.126-1.828-.379-2.555s-.634-1.286-1.145-1.678-1.139-.588-1.886-.588c-.843 0-1.549.2-2.118.601s-.992.946-1.269 1.64-.414 1.478-.414 2.359c0 .799.142 1.513.425 2.139s.692 1.116 1.225 1.471 1.164.53 1.891.53c.897 0 1.615-.19 2.152-.568a3.09 3.09 0 0 0 1.006-1.136c.234-.454.368-.83.402-1.127h-1.335c-.014.219-.108.456-.283.712zm13.27.348l2.123-6.73h1.468l-.651 1.905-.638 1.858-1.559 4.346c-.355.95-.627 1.636-.815 2.061s-.378.746-.567.966-.406.359-.648.422-.6.095-1.077.095c-.081 0-.267-.043-.558-.128v-1.277a2.27 2.27 0 0 0 .802.144c.237 0 .417-.04.54-.121s.241-.244.353-.487.284-.679.515-1.304l-2.94-8.479h1.516l2.105 6.73h.03v-.001zm13.2-4.455c.196-.377.463-.68.801-.909a1.92 1.92 0 0 1 1.104-.344c1.377 0 2.115.818 2.214 2.453h-4.412c0-.422.098-.823.294-1.2zm3.771 4.107a2.13 2.13 0 0 1-.722.646c-.307.176-.654.264-1.041.264-.755 0-1.328-.235-1.717-.704s-.585-1.136-.585-2.006h5.791c0-.977-.126-1.828-.38-2.555s-.634-1.286-1.144-1.678-1.139-.588-1.886-.588c-.843 0-1.55.2-2.119.601s-.992.946-1.268 1.64-.413 1.478-.413 2.359c0 .799.141 1.513.425 2.139a3.4 3.4 0 0 0 1.226 1.471c.533.352 1.163.53 1.891.53.897 0 1.615-.19 2.152-.568.421-.285.767-.676 1.006-1.136.235-.454.369-.83.403-1.127h-1.336c-.015.219-.11.456-.283.712zm14.866-4.523l-1.543 6.404h-1.38l-2.291-8.263h1.458l1.514 6.491h.029l1.533-6.491h1.483l1.547 6.491h.03l1.61-6.491h1.332l-2.305 8.263h-1.377l-1.606-6.404h-.034zm14.963.416c.189-.369.464-.682.801-.909a1.93 1.93 0 0 1 1.104-.344c1.377 0 2.115.818 2.213 2.453h-4.413a2.57 2.57 0 0 1 .295-1.2zm3.771 4.107c-.175.255-.414.471-.722.646s-.655.264-1.041.264c-.756 0-1.327-.235-1.718-.704s-.585-1.136-.585-2.006h5.793c0-.977-.128-1.828-.379-2.555s-.636-1.286-1.145-1.678-1.138-.588-1.886-.588c-.842 0-1.55.2-2.119.601s-.991.946-1.267 1.64-.414 1.478-.414 2.359c0 .799.141 1.513.424 2.139s.692 1.116 1.227 1.471 1.163.53 1.89.53c.898 0 1.615-.19 2.153-.568a3.09 3.09 0 0 0 1.006-1.136c.234-.454.368-.83.403-1.127h-1.336c-.015.219-.11.456-.284.712zm14.913.001c-.233.298-.537.533-.917.702-.373.17-.775.257-1.181.257-.957 0-1.435-.478-1.435-1.433 0-.319.089-.572.265-.761s.384-.322.621-.399.507-.137.806-.181c.758-.102 1.282-.192 1.575-.266s.497-.16.615-.258v1.359a1.56 1.56 0 0 1-.349.98zm-2.832-5.007c.24-.305.692-.456 1.352-.456 1.24 0 1.859.448 1.859 1.344 0 .607-.231.932-.694.975l-2.19.286c-.962.123-1.605.445-1.929.968a3.04 3.04 0 0 0-.486 1.625c0 .465.106.879.316 1.241s.505.644.882.843.805.3 1.285.3c.688 0 1.25-.127 1.691-.38s.834-.58 1.169-.968c.032.395.142.704.331.927s.549.335 1.082.335c.164-.001.328-.027.485-.078.064-.021.146-.045.244-.075v-1.012c-.202.04-.348.061-.439.061-.292 0-.439-.163-.439-.489v-4.755c0-.632-.182-1.121-.544-1.465a2.65 2.65 0 0 0-1.212-.679c-.447-.108-.839-.163-1.18-.163-1.023 0-1.817.222-2.381.664s-.861 1.138-.89 2.09h1.231c.064-.455.216-.834.457-1.139zm15.413 2.082v4.805h-1.337v-8.263h1.26v1.37h.033c.589-1.072 1.332-1.609 2.227-1.609.129 0 .243.017.347.05v1.432h-.499c-.602 0-1.09.215-1.466.645s-.565.953-.565 1.57z"/></svg>
\ No newline at end of file
diff --git a/public/img/home/fashion/v2/brands/fila-light.svg b/public/img/home/fashion/v2/brands/fila-light.svg
new file mode 100644
index 0000000..175b103
--- /dev/null
+++ b/public/img/home/fashion/v2/brands/fila-light.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 221 232" fill="#4e5562"><path d="M101.017 118.457c0 2.799-2.324 5.067-5.19 5.067s-5.192-2.269-5.192-5.067V92.811c0-2.799 2.324-5.067 5.192-5.067s5.19 2.268 5.19 5.067v25.646zM59.695 97.991c-2.867 0-5.191-2.269-5.191-5.068s2.324-5.068 5.191-5.068h22.367c2.866 0 5.191 2.269 5.191 5.068s-2.324 5.068-5.19 5.068H59.695zm20.876 13.103c2.866 0 5.19-2.269 5.19-5.068s-2.324-5.068-5.19-5.068H59.81c-2.867 0-5.19 2.268-5.19 5.068v12.431c0 2.799 2.324 5.067 5.19 5.067s5.191-2.269 5.191-5.067v-7.392l15.57.029zm77.652 12.472c4.569 0 8.273-3.673 8.273-8.133 0-1.673-.521-3.227-1.413-4.516l-13.401-21.312c-.925-1.391-2.531-2.31-4.355-2.31-1.883 0-3.532.978-4.442 2.443l-14.484 22.783H115.01V92.924c0-2.799-2.324-5.068-5.19-5.068s-5.191 2.269-5.191 5.068v25.533c0 2.799 2.325 5.067 5.191 5.067h19.098c2.351.027 4.702-1.261 6.423-3.893l11.986-18.757 8.028 12.486-11.24.028c-2.866 0-5.191 2.268-5.191 5.067s2.325 5.068 5.191 5.068l14.108.043zm-95.564 12.766c.189-.369.465-.682.802-.909.327-.226.711-.346 1.103-.344 1.377 0 2.115.818 2.214 2.453h-4.412a2.57 2.57 0 0 1 .294-1.2zm3.771 4.107c-.174.255-.414.471-.722.646s-.654.264-1.041.264c-.755 0-1.328-.235-1.718-.704s-.585-1.136-.585-2.006h5.791c0-.977-.126-1.828-.379-2.555s-.634-1.286-1.145-1.678-1.139-.588-1.886-.588c-.843 0-1.549.2-2.118.601s-.992.946-1.269 1.64-.414 1.478-.414 2.359c0 .799.142 1.513.425 2.139s.692 1.116 1.225 1.471 1.164.53 1.891.53c.897 0 1.615-.19 2.152-.568a3.09 3.09 0 0 0 1.006-1.136c.234-.454.368-.83.402-1.127h-1.335c-.014.219-.108.456-.283.712zm13.27.348l2.123-6.73h1.468l-.651 1.905-.638 1.858-1.559 4.346c-.355.95-.627 1.636-.815 2.061s-.378.746-.567.966-.406.359-.648.422-.6.095-1.077.095c-.081 0-.267-.043-.558-.128v-1.277a2.27 2.27 0 0 0 .802.144c.237 0 .417-.04.54-.121s.241-.244.353-.487.284-.679.515-1.304l-2.94-8.479h1.516l2.105 6.73h.03v-.001zm13.2-4.455c.196-.377.463-.68.801-.909a1.92 1.92 0 0 1 1.104-.344c1.377 0 2.115.818 2.214 2.453h-4.412c0-.422.098-.823.294-1.2zm3.771 4.107a2.13 2.13 0 0 1-.722.646c-.307.176-.654.264-1.041.264-.755 0-1.328-.235-1.717-.704s-.585-1.136-.585-2.006h5.791c0-.977-.126-1.828-.38-2.555s-.634-1.286-1.144-1.678-1.139-.588-1.886-.588c-.843 0-1.55.2-2.119.601s-.992.946-1.268 1.64-.413 1.478-.413 2.359c0 .799.141 1.513.425 2.139a3.4 3.4 0 0 0 1.226 1.471c.533.352 1.163.53 1.891.53.897 0 1.615-.19 2.152-.568.421-.285.767-.676 1.006-1.136.235-.454.369-.83.403-1.127h-1.336c-.015.219-.11.456-.283.712zm14.866-4.523l-1.543 6.404h-1.38l-2.291-8.263h1.458l1.514 6.491h.029l1.533-6.491h1.483l1.547 6.491h.03l1.61-6.491h1.332l-2.305 8.263h-1.377l-1.606-6.404h-.034zm14.963.416c.189-.369.464-.682.801-.909a1.93 1.93 0 0 1 1.104-.344c1.377 0 2.115.818 2.213 2.453h-4.413a2.57 2.57 0 0 1 .295-1.2zm3.771 4.107c-.175.255-.414.471-.722.646s-.655.264-1.041.264c-.756 0-1.327-.235-1.718-.704s-.585-1.136-.585-2.006h5.793c0-.977-.128-1.828-.379-2.555s-.636-1.286-1.145-1.678-1.138-.588-1.886-.588c-.842 0-1.55.2-2.119.601s-.991.946-1.267 1.64-.414 1.478-.414 2.359c0 .799.141 1.513.424 2.139s.692 1.116 1.227 1.471 1.163.53 1.89.53c.898 0 1.615-.19 2.153-.568a3.09 3.09 0 0 0 1.006-1.136c.234-.454.368-.83.403-1.127h-1.336c-.015.219-.11.456-.284.712zm14.913.001c-.233.298-.537.533-.917.702-.373.17-.775.257-1.181.257-.957 0-1.435-.478-1.435-1.433 0-.319.089-.572.265-.761s.384-.322.621-.399.507-.137.806-.181c.758-.102 1.282-.192 1.575-.266s.497-.16.615-.258v1.359a1.56 1.56 0 0 1-.349.98zm-2.832-5.007c.24-.305.692-.456 1.352-.456 1.24 0 1.859.448 1.859 1.344 0 .607-.231.932-.694.975l-2.19.286c-.962.123-1.605.445-1.929.968a3.04 3.04 0 0 0-.486 1.625c0 .465.106.879.316 1.241s.505.644.882.843.805.3 1.285.3c.688 0 1.25-.127 1.691-.38s.834-.58 1.169-.968c.032.395.142.704.331.927s.549.335 1.082.335c.164-.001.328-.027.485-.078.064-.021.146-.045.244-.075v-1.012c-.202.04-.348.061-.439.061-.292 0-.439-.163-.439-.489v-4.755c0-.632-.182-1.121-.544-1.465a2.65 2.65 0 0 0-1.212-.679c-.447-.108-.839-.163-1.18-.163-1.023 0-1.817.222-2.381.664s-.861 1.138-.89 2.09h1.231c.064-.455.216-.834.457-1.139zm15.413 2.082v4.805h-1.337v-8.263h1.26v1.37h.033c.589-1.072 1.332-1.609 2.227-1.609.129 0 .243.017.347.05v1.432h-.499c-.602 0-1.09.215-1.466.645s-.565.953-.565 1.57z"/></svg>
\ No newline at end of file
diff --git a/public/img/home/fashion/v2/brands/hermes-dark.svg b/public/img/home/fashion/v2/brands/hermes-dark.svg
new file mode 100644
index 0000000..0b6819e
--- /dev/null
+++ b/public/img/home/fashion/v2/brands/hermes-dark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 221 286" fill="#cad0d9"><path d="M63.419 141.949h2.203v3.965h-7.834v-3.965h2.192v-2.323h-6.964v2.323h2.216v11.679h-2.216v2.312h6.964v-2.312h-2.194v-5.419h7.834v5.419h-2.201v2.312H70.4v-2.312h-2.222v-11.679h2.224v-2.323H63.42m84.005 14.002h-6.864v-5.442h5.905v-2.303h-5.907v-3.934h6.918v2.232h2.432v-4.555h-14.228v2.323h2.321v11.679h-2.321v2.312h14.262v-5.436h-2.516m-59.507 0h-2.516v3.124H78.54v-5.442h5.906v-2.303H78.54v-3.934h6.919v2.232h2.432v-4.555H73.663v2.323h2.321v11.679h-2.322v2.312H87.92m53.303-17.119h4.989l-1.276-1.433h-5.115m23.998 9.223c-1.741-.467-2.97-.361-4.741-.918-1.6-.505-1.916-1.432-1.916-2.045s.706-2.217 3.219-2.217 4.162 1.567 4.255 2.947l.01-.007v.007h2.416v-4.756h-2.338v1.036l.073.323c-.016-.047-.083-.178-.329-.408-.745-.641-2.158-1.325-4.282-1.325-2.574 0-5.607 1.504-5.607 4.411 0 2.833 2.173 3.822 4.016 4.28l4.326.854c1.537.393 2.533 1.265 2.533 2.559 0 1.224-.8 2.83-4.052 2.83s-4.543-1.655-4.92-4.022l-.027.011h-2.299v5.774h2.403v-1.08l-.007-.008-.087-.286c.085.153.209.282.36.372l.024.032c1.216.879 2.812 1.462 4.858 1.462 2.282 0 6.278-1.103 6.278-5.012-.007-2.797-1.583-4.114-4.166-4.814zm-38.446 7.017v2.312h7.064v-2.312h-2.316v-11.679h2.316v-2.323h-6.314l-4.182 9.534-.087.468-.083-.475-4.182-9.528h-6.307v2.323h2.31v11.678h-2.314v2.312h7.059v-2.31h-2.207v-10.74l.016-.709.205.565 4.815 10.854h1.37l4.831-10.858.177-.571.027.644v10.815M77.12 132.757v.534h2.382l-.68-.534H77.12zm64.171.01h-1.24c-.345.063-.6.337-.628.524h1.866v-.526l.002.002zm-64.171 2.081h64.161v-1.13h-41.265c-1.055.474-2.393.452-3.436 0H84.051c-1.196.487-2.535.489-3.732.005l-3.199-.008v1.13.003zm18.067-2.091h-9.69c-.033.063-.477.424-.656.534h10.963c-.226-.153-.433-.332-.616-.534h-.001z"/><path d="M78.22 128.563a3.69 3.69 0 0 0-.188 1.104c.018.509.138 1.009.354 1.471s.521.875.899 1.216c.773.709 1.809 1.105 2.887 1.105a4.28 4.28 0 0 0 2.887-1.104 3.8 3.8 0 0 0 1.254-2.687 3.66 3.66 0 0 0-.257-1.31l1.403-.294c.217-.055.208-.148.038-.196-.636-.178-1.281-.322-1.933-.43a4.05 4.05 0 0 0-1.478-1.227 4.33 4.33 0 0 0-1.913-.443 4.29 4.29 0 0 0-1.499.274c-.007-.003-.013-.012-.017-.015-.094-.161-.148-.339-.157-.522a1.12 1.12 0 0 1 .107-.533c.421-.647 1.356-.9 2.124-.961.258-.012.878.016.945.085.15.113.408.154.683.063.263.094.33.168.63.256 2.639.847 5.561 1.295 8.514.784.462.412.716 1.134 1.04 1.633.087.125.192-.094 1.646-.141l1.691-.004c-1.133.123-2.108.722-2.686 1.589-.91.273-1.611.534-1.874.684-.323.184-.383.286 0 .38.448.11.903.19 1.361.24-.03.173-.057.35-.057.531 0 .918.387 1.799 1.076 2.448s1.624 1.014 2.598 1.014 1.909-.365 2.599-1.014a3.36 3.36 0 0 0 1.076-2.448 3.28 3.28 0 0 0-.457-1.64l1.466-.518c.4.136.672.361.958.675.234.248.762.15 1.075.078.508-.126.587-.507.583-.942 0-.198.01-.392.11-.549.595-1.276 2.972-1.444 4.192-1.727 0 0-.638.722-1.09.882-.091 1.864-.849 3.485-.941 5.262.575.022.55.628.688.973-.16.327-.436 0-.688.11-.873-.455.207-1.19-.506-1.753.366-1.492.966-2.943.916-4.524-.228.022-.317.26-.412.433-.161 1.496-.619 2.86-1.033 4.244.184.087.505.173.484.434-.554.325.021.847-.209 1.218h-5.673l-.629.533h8.7l.083-.301c-1.283-1.256-.8-3.139-.205-4.568l1.493-1.905c1.241-.455 1.999-1.884 3.309-2.339 0 .607-.805.868-1.241 1.213-.457 1.017-1.906 1.126-2.113 2.253.55.606 1.374.995 2.066 1.558.713.413.456 1.278 1.033 1.711.093.131 0 .325-.163.434-.605.136-.587.521-.222.841.233.204.5.471.47.571h-4.015c0 .173.163.239.339.534h22.176c.167-.295-.195-.644-.35-.934-1.566-.557-1.558-1.953-1.649-3.491.016-.063-.09-.209-.074-.526-.233-.207-1.263-2.676-.794-4.608l.341-.636c.322-.435-.02-.667.208-1.121l4.674-.851c.083-.04.061-.219-.027-.301l-1.419.248c-1.128-.447-2.783-1.436-3.872-2.778.338-2.176.17-3.94-.059-5.117l1.24-1.04c.471.267.573.142.638-.003-.075-.081-.775-.361-.66-.646.442.11.54-.019.608-.251l-.31-.104h-.01l.05-.157c.09-.173.507-.009.667-.053.278-.161-.033-.401.06-.617-.65-.518-1.823-.534-2.533-1.016-.22-.386-.309-.549-.539-.706-.237-.157-1.267-.247-1.458-.189s-.55.382-.55.382c-.738.146-1.183-.079-1.691-.369.045.176.131.338.251.474a1.15 1.15 0 0 0 .439.308c-.513.197-.74.606-.823 1.117-.707.135-.733.798-.642 1.099-.578.325-.521.757-.316 1.193-.517.326-.439.797-.292 1.157-.433.251 0 .948.067 1.356 1.244-.242 2.799 2.347 5.031 2.665.42-1.847-.106-2.753-.59-3.665.364-.199.759-.474 1.142-.763.294 1.583.339 3.202.133 4.799-.017-.016-.033-.028-.043-.044-.14 0-.28-.088-.393-.13.023.062.279.447.228.518 0 0-.723.45-2.158-.118-.383.844-5.308 2.919-5.308 2.919.183 1.281.83 2.132 1.496 2.826 1.058.738 2.188 1.117 3.522 1.378l1.267 3.312c.089.364.304.364.304.364.129.163.55.886.597 1.232l.105 1.225c.045.279.433.069.506.307l-.18.823-14.753.003c.207-.973-.32-1.824-.046-2.69-.593-.974-2.203-1.645-1.93-2.923.783-1.017 3.216-2.009 2.666-3.238 2.211-1.057 3.377.706 5.471.576.73-.038 1.543-.113 2.211-.299-.826-.674-1.616-1.667-2.032-2.553-4.389 1.663-8.657 3.034-13.416 3.943l-.366-.11c-.362.052-5.603 1.161-6.993 1.671-.364-.206-.765-.351-1.182-.428h.122c.445 0 1.125-.223 1.606-.381 2.036-.701 2.786-3.432 3.699-5.168.8 2.7 2.656 2.92 3.732 2.584l.1.847s.94-.031 1.646-.298c-.072-.16-.167-.588-.233-1.152.428-.209.659-.361.854-.468.059.641.1 1.245-.103 1.57l2.423-.609c.466-1.973 1.732-4.715 3.97-6.718-3.004-1.126-5.255.16-5.826.675-2.828.85-2.941 4.527-2.856 5.792-.49.091-2.546.763-3.519-2.59.567-1.287 1.641-2.719 2.849-3.835.105-.083-.016-.215-.258-.082-2.428 1.57-3.316 4.333-4.62 6.665-1.023 1.449-2.404 2.234-4.475 2.151-2.586-.038-3.837-2.579-5.022-4.229-1.816-3.747-6.514-2.402-10.006-3.202-.195-.094-.583-1.177-1.14-1.137-.395.029-.023.412-.25.54-.438-.172-.806-.475-1.356-.389-.345.066-.438.411-.413.716.275 1.19 1.629 1.711 2.641 2.144.388.546.243 2.433-.08 3.081-.417.722-2.054.465-2.382 2.119-.063.336.017.628.163.903-.636.315-1.174.78-1.563 1.35-.677.148-1.347.33-2.006.546-.167.057-.167.148.05.195.496.096.995.173 1.496.232l-.004-.011zm51.738-9.264c.6.617 2.032 1.554 2.949 1.86l-2.654.463c.3-1.059-.722-1.466-.295-2.323zm.286-8.575c.1-.039.38.063.495.091.07.016.044.157.009.282-.174.035-.444-.055-.48-.141-.05-.094-.122-.191-.024-.232zm.022.643a1.38 1.38 0 0 0 .228.55c-.003.085-.495.513-1.061.965-.14-.654-.283-1.105-.317-1.284.225-.151.833-.314 1.15-.231zm-2.541-2.296c.1-.031.304.031.358.069s.01.198.007.251-.253.167-.253.167-.24-.173-.237-.227l-.011-.004a2.09 2.09 0 0 1 .136-.256zm.312 4.839c-.313-.596-.567-1.227-.5-2.15.303-.005.743.182 1.325-.066 0 0 .179.512.358 1.35-.433.34-.883.672-1.183.866zm-3.974 10.376c-.949-.449-.358-.072-.083-.267 1.504.653 2.262.502 3.389.374.161.194.383.376.383.635-1.378.369-2.449-.11-3.69-.741l.001-.001zm5.42 6.985c-.088-.688-.13-1.174-.467-1.502-.266-.685-1.039-2.587-1.589-4.301.333-.311.592-.149.813.703.212.688.467 1.256.66 1.83.256.578.45 1.347.646 1.752 0 0 .174.028.27.246.483 1.272.61 1.476.528 2.082.117.475.827.088.762.675H129.6l.663-.005c-.457-.455-.134-1.133-.78-1.48zm-29.376 1.138c-.417.293-.916.48-1.461.54-.053-.016-.1-.118-.103-.181l-.087-1.769c-.003-.019.03-.039.05-.047.078-.026.153-.056.227-.091.02-.011.072-.016.088 0l1.232 1.347c.044.05.084.16.05.204l.004-.003zm-1.906.565a3.19 3.19 0 0 1-1.378-.364c-.033-.044-.022-.16.017-.212l1.03-1.479c.01-.015.05-.015.073-.009.067.019.135.035.203.047.023 0 .067.031.067.052l.092 1.773c.003.063-.05.173-.105.189l.002.003h-.001zm-2.599-3.684c-.067-.019-.167-.104-.163-.157.092-.244.219-.475.375-.684a30.54 30.54 0 0 1 .766-.195l.833.989-.038.005a14.91 14.91 0 0 1-1.523.1l-.25-.063v.005zm2.344-2.025c.05.019.1.119.1.181l.008.138c-.5.091-.99.193-1.459.306-.03-.058-.045-.126-.02-.157.4-.256.866-.413 1.366-.466l.005-.002zm-.263 1.931l-.846-.999a30.79 30.79 0 0 1 1.236-.257l.057 1.169c-.167.038-.305.063-.447.087zm-.08.314c-.003.011 0 .022-.007.031-.04.054-.076.11-.108.168-.01.02-.05.05-.075.047l-.608-.157c.26-.025.525-.047.8-.091l-.002.002zm1.121-.214c-.01.016-.05.016-.073.008h-.008l.088-.019-.005.01-.002.001zm-.355-.243l-.058-1.157c.494-.089.99-.162 1.489-.22-.006.048-.02.095-.043.138l-.755 1.08a13.33 13.33 0 0 1-.633.159zm1.588-1.115c.033-.051.14-.109.196-.098a3.13 3.13 0 0 1 .584.554l-1.38.408.6-.864zm-1.666-.397l-.003-.11c-.003-.065.05-.182.103-.193a3.19 3.19 0 0 1 .9.157 22.45 22.45 0 0 0-1 .145v.001zm-.042-.306c.017 0 .03-.004.045-.004l.04.003h-.087l.002.001zm-4.362 1.953c-.163-.047-.125-.094-.027-.134.328-.122.696-.243 1.083-.361-.093.202-.168.412-.223.628-.281-.02-.56-.066-.833-.133zm1.408.447a10.56 10.56 0 0 0 .755.005l1.293.334c.017.005.03.041.03.063a1.24 1.24 0 0 0 .023.228c0 .022-.017.039-.037.047l-1.724.717c-.063.024-.188.022-.227-.019a2.72 2.72 0 0 1-.17-.901c0-.163.023-.318.05-.471l.007-.003zm.285 1.76c0-.053.092-.135.15-.16l1.733-.681c.017-.01.05.015.063.031.03.034.075.086.117.125.02.016.037.063.027.079l-1.033 1.485c-.037.053-.15.11-.203.094a2.89 2.89 0 0 1-.85-.973h-.004zm1.028 1.103c-.017-.011-.028-.02-.043-.028l.045.027-.002.001zm3.849-.362c-.05.028-.175-.032-.222-.079l-1.228-1.345c-.017-.012-.003-.047.01-.067.033-.047.062-.095.088-.145.012-.02.05-.05.075-.047l1.816.474c.057.016.15.074.17.126a2.9 2.9 0 0 1-.709 1.083zm.829-1.476c-.03.047-.166.063-.233.047l-1.808-.471c-.022-.004-.033-.04-.033-.062a1.45 1.45 0 0 0-.013-.197c-.005-.022.008-.069.028-.078l1.756-.628c.062-.022.183-.011.225.028a2.76 2.76 0 0 1 .133.806c0 .188-.021.376-.058.557l.003-.002zm-.233-1.766c0 .055-.092.142-.153.165l.116-.037-1.871.662c-.02.008-.05-.016-.063-.031a1.65 1.65 0 0 0-.133-.153c-.022-.015-.037-.059-.028-.078l.162-.231c.57-.141 1.183-.323 1.833-.534.05.079.1.157.14.239l-.003-.002zm4.882-2.527c-.813.553-.43 1.204-.933 1.334-.184-.025-1.207.151-1.366.22-.345-.303-.697-.559-1.227-.69 1.008-.39 2.606-.776 3.526-.864zm-3.307 1.374c-.175.078-.642.248-1.27.455-.156-.222-.34-.425-.546-.606.786-.039 1.427 0 1.816.151zm8.776-9.698c-1.229 1.165-1.071 2.904-.928 4.273-.283.195-.633.358-.859.477-.134-1.68.056-4.185 1.787-4.75zm-30.772.59c-.207-.26-.51-.659-.275-.93.173-.201.526-.044.733.044.175.086 1.553.784 1.928.882 2.782.653 6.298-.31 8.504 1.574.108.094.187.184.163.314-3.237-2.078-8.112.995-11.053-1.884zm2.619 3.356c.23.131.322.476.575.671.413.649 1.195.866 1.608 1.428a1.49 1.49 0 0 1-.416-.028c-.27-.05-.377-.126-.603-.22-.12-.184-.422-.245-.658-.126-.354.028-.71.001-1.056-.078.067-.521.6-1.019.55-1.647zm-3.239 5.604l.846.887c-.589-.006-1.178-.028-1.766-.068-.043-.056-.067-.109-.055-.141.108-.213.24-.411.392-.596.188-.032.387-.055.583-.079v-.003zm5.018.22a3.36 3.36 0 0 1 .267.447c-.441.06-.883.105-1.326.137l.661-.534c.167-.125.357-.099.398-.05zm-.583-.138l-.94.753c-.24.016-.483.022-.728.032l.383-1.027c.477.016.94.047 1.371.088-.02.055-.037.11-.083.154h-.003zm-.23 4.622c-.34.232-.718.404-1.116.507-.073-.009-.213-.116-.253-.273l-.367-1.872c-.007-.024.003-.054.028-.063a.97.97 0 0 0 .2-.088c.022-.016.05-.005.067.013l1.358 1.406c.133.148.128.318.083.37zm-2.876-3.312c.017.016.023.051.008.069-.042.048-.057.063-.09.121-.012.022-.04.025-.067.016l-1.513-.509c.468.025.936.038 1.404.037l.257.266h.001zm1.499-.07c-.046-.04-.096-.074-.15-.102a.04.04 0 0 1-.023-.058l.028-.073.527-.025-.317.252c-.017.015-.045.021-.065.006zm-.358-.448l-.39.013h-.007l-.208-1.052c.067-.003.125-.011.19-.015.275 0 .543.009.813.015l-.4 1.041.002-.002zm-.88-1.023l.203 1.036a18.56 18.56 0 0 1-.578 0l-.9-.926c.413-.047.836-.083 1.275-.11zm.225 1.271c-.005.007 0 .019-.01.022-.07.024-.137.054-.2.091-.023.016-.05.005-.067-.012l-.093-.097c.123-.004.25 0 .372-.005l-.002.001zm-2.866-.313c.005-.013.017-.027.022-.043a.3.3 0 0 1-.022.044v-.001zm-.155.474c.038-.059.217-.131.387-.079l1.904.64c.022.007.042.032.037.055a.97.97 0 0 0-.017.176c0 .025-.022.039-.045.047l-1.989.349c-.197.026-.333-.063-.361-.126-.008-.094-.028-.182-.028-.276a2.94 2.94 0 0 1 .112-.786zm.033 1.685c.007-.07.122-.212.293-.248l1.983-.342c.012-.002.025-.001.036.005s.02.015.024.027c.02.053.027.078.063.135.012.022.005.044-.017.062l-1.578 1.196c-.17.121-.35.095-.392.048a3.34 3.34 0 0 1-.412-.883zm.475.967a.48.48 0 0 1-.047-.062c.01.018.032.042.047.062zm.371.427c-.037-.053-.01-.251.13-.361l1.576-1.185c.017-.022.045-.027.067-.008.045.04.117.09.177.121.025.013.033.032.02.06l-.683 1.792c-.073.181-.227.252-.295.239a3.58 3.58 0 0 1-.99-.659l-.002.001zm1.155.735c-.021-.007-.042-.015-.062-.025l.062.025zm.477.141c-.063-.036-.15-.198-.097-.358l.69-1.799c.007-.023.03-.039.055-.034a.99.99 0 0 0 .188.016c.028 0 .045.022.05.047l.372 1.875c.03.181-.058.299-.125.336-.093.007-.187.027-.283.027a3.5 3.5 0 0 1-.846-.11h-.004zm3.282-.832c.017-.015.033-.031.043-.047-.017.016-.028.032-.043.047zm.122-.133c-.062.036-.258.023-.383-.098l-1.348-1.419c-.017-.015-.023-.047-.005-.067.034-.037.063-.078.087-.122.012-.024.04-.029.063-.016l1.933.647c.2.073.25.222.233.282-.15.288-.342.555-.572.793h-.008zm.583-.82c.035-.064.065-.129.092-.197-.028.066-.059.132-.092.196v.001zm.222-.591c-.027.059-.2.147-.378.094l-1.923-.65c-.022-.006-.042-.031-.038-.055.01-.06.017-.088.017-.152 0-.025.023-.039.047-.047l2.028-.299c.2-.023.326.066.346.131.003.063.017.125.017.188 0 .272-.043.534-.112.788l-.004.002zm-.008-1.605c0 .076-.117.211-.29.242l-2.016.298c-.012.002-.025 0-.036-.005s-.019-.015-.024-.026c-.021-.065-.049-.128-.083-.188-.017-.021-.01-.043.008-.063l.6-.484c.573-.04 1.141-.102 1.704-.18a3.34 3.34 0 0 1 .133.408l.004-.002zm1.038-.982c.13.039.175.121.01.163-.173.044-.383.079-.583.118-.075-.167-.175-.319-.272-.471.313.056.6.118.843.188l.002.002zm-3.294-.696l.083-.224c.073-.179.233-.24.307-.229.32.144.618.334.883.565-.424-.052-.849-.088-1.275-.11l.002-.002zm-.263-.675a.37.37 0 0 1 .092.369l-.113.299c-.308-.013-.613-.029-.921-.026-.08 0-.155.016-.237.016l-.078-.402c-.03-.185.062-.304.13-.334.1-.008.193-.028.292-.028a3.7 3.7 0 0 1 .835.106zm-1.783.032c.075.008.22.116.258.276l.05.256c-.17-.147-.327-.309-.47-.483l.163-.048-.002-.001h.001zm-.117.68c-.323.028-.645.062-.963.109-.067-.122-.07-.235-.033-.276.158-.11.33-.207.51-.292a5.4 5.4 0 0 0 .486.459zm-3.502.882c.26-.088.576-.17.926-.248-.092.161-.173.328-.242.499-.238-.027-.483-.052-.683-.088-.17-.028-.129-.119-.001-.163zm61.153-9.297c-.07.054-.093.13-.036.141.106.019.166.053.29.16.066.031.05-.066.033-.119-.067-.151-.207-.242-.283-.182h-.004z"/><path d="M136.253 132.767h-3.276c-.041.208.217.361.367.522h3.577l.999-.458c.177-.408-.179-.769-.166-1.099.06-.982-.522-1.962-.828-2.861.2-.2.45-.659.778-.537.766 1.124.908 2.559.778 3.987-.078.353-.716.675-.696 1.008.011.116.849.066 1.196-.212.061-.229.511-.512.656-.545.16-.432-.09-.417-.05-.678.08-.181-.026-2.127-.17-2.336-.053-.031-.071-.031-.075-.026-.16-.387.23-.978.387-1.344l1.143-.097c-.137-.958-.5-1.953-.73-2.936.14-.229.393-.408.625-.538 1.204-.749.143-1.956.103-2.888-.205-.484-.911-.86-.976-1.394.146.107.258.063.29.071.345-.223.328-.545.156-.949l.94-1.043c-.033-.492-.871-1.225-1.363-1.225-.29.151-.483.455-1.016.845-.017.02-.64-.204-.828-.016-.184.141-.12.597.216.843-.041.121-.08.168-.15.314-.036.072-.053.149-.005.191.11.095.15.241.072.465-.083.239.2.414.3.449.017.005.05.038.083.078.037.264-.913.738-.913.942-.075.617-.483.556-.879 2.582.05.492.043.926.006 1.314l-1.213 2.786c-.273.722 1.26 2.813 1.283 4.238-.333.471-.6.404-.621.545v.002zm2.487-2.171c-.078-.193-.143-.466-.103-.669.133-.121.383-.031.51-.05.155.675.193.769-.405.722l-.002-.003zm.012-9.979c.043-.031.083-.131.108-.168.505-.304.157-.084-.345-.334-.163-.078-.166-.226-.146-.435.03-.259-.084-.309-.127-.392-.017-.035.062-.162.127-.251.116-.167.221-.512.276-.597.837.032.65.38.672.443.066.169.416.534.588.648-.05.477-.447.196-.27.631-.047.826-1.088.722-1.533 1.4-.045-.671.583-.669.65-.945zm-.95 3.554c.227.193.467.437.64.477.12.283-.25.322-.383.456-.312.044-.428-.267-.61-.126-.042.031-.228-.005-.225-.039.136-.294.332-.556.576-.769l.002.001zm-1.974 4.207c-.117-.571.69-1.46 1.226-3.202.22-.072.337.403.65.22.483.011.276 1.196.726.442-.01-.333-.02-.706.26-.884.303-.065.5.095.52.346l-.467.684c.884.032-.283 1.369.884 1.124-.039.502-.325 1.91-.53 1.84-.16-.78-.29-.456-.29-.226.033.303.026.549.216.794-.063.063-.299.056-.366.071-.66-.887-.633-2.104-1.058-3.068-.072-.003-.162.079-.158.15-.05.58-.29 1.419-.797 1.695-.316.176.697.069-.133.436.317.198.025.466-.323.466-.174-.348-.307-.637-.358-.89l-.002.002zm.875 1.924c-.12-.132-.305-.513-.38-.678l.483-.188a1.29 1.29 0 0 1 .321.706c-.108.055-.258.149-.424.16zm-15.553-9.355c-.072-.926.333-1.711-.125-2.7.005-.408.308-.722.226-1.099l-.744.17c-.114.779-.25 1.036-.139 1.769.197.84.297 1.604.78 1.862l.002-.002zm-7.694 2.59c2.849-.753 4.815-1.397 7.176-2.331-.983-1.978-.767-2.549-.683-3.814 0 0-1.2.015-2.595-.333-1.652 1.005-3.582 4.601-3.898 6.478zm9.776.573c.074.085-.153-.141 0 0zm3.424-5.996c-1.199-.779-2.129-2.59-3.437-2.468-.127-1.334-.745-3.599 1.211-5.988.254-.11.667-.152.827-.327-.8-.078-1.853.388-2.616-.02 0 0 .353.581.763.669-.27.345-.793.591-.475 1.193-.653.365-.406.913-.205 1.208-.326.317-.525.887-.091 1.234-.534.538.128.995.283 1.177-.27.539-.01.955-.01.955-.01.387-.743.942-1.008 1.12-.317.911-.195 2.743-.147 3.956 1.783-.804 3.532-1.568 4.905-2.709zm-20.493 32.181c0-.957-.678-2.087-1.609-2.618-.228-.13-.484-.209-.75-.229.227.012.533-.003.822-.116.009-.004.019-.006.03-.007.943-.395 2.086-1.546 2.086-3.484.012-.662-.144-1.316-.453-1.902s-.76-1.084-1.313-1.449c-1.04-.71-2.273-.87-3.504-.87h-9.697v2.323h2.183v11.702h-2.183v2.314h6.886v-2.316h-2.154v-5.154h4.76c1.641.018 2.276 1.036 2.309 1.91l.12 5.557h4.758v-2.311h-2.224l-.067-3.35zm-4.381-4.049h-5.273v-4.301h4.99c.517 0 1.16-.016 1.662.224.613.294 1.187.926 1.187 1.959 0 1.193-1.16 2.118-2.566 2.118zm-10.868 15.458h-3.287v9.335h1.466v-4.041h1.626c2.366 0 3.441-1.146 3.441-2.612 0-1.478-1.016-2.682-3.246-2.682zm-.06 4.092h-1.758v-2.888h1.819c1.333 0 1.733.737 1.733 1.419 0 .934-.702 1.469-1.794 1.469zm9.005-4.147l-4.385 9.386h1.583l1.2-2.751h4.34l1.242 2.751h1.616l-4.565-9.386h-1.033.002zm-1.033 5.431l1.526-3.689 1.645 3.689h-3.171zm21.646-5.376h1.466v9.335h-1.466v-9.335zm7.562 2.189c0-.659.713-1.109 1.706-1.109.733 0 1.621.219 2.536.973v-1.523c-.731-.426-1.562-.651-2.408-.654-1.979 0-3.277.968-3.277 2.489 0 2.559 4.67 2.779 4.67 4.709 0 .518-.553 1.174-1.758 1.174-1.063 0-2.055-.48-2.849-1.35v1.696c.903.588 1.85.863 3.023.863 1.741 0 3.022-1.07 3.022-2.532.007-2.971-4.665-2.941-4.665-4.736zm-12.745 5.297c-.795-1.162-1.373-2.025-2.316-2.587 1.111-.396 1.736-1.206 1.736-2.284 0-1.614-1.313-2.614-3.416-2.614h-2.625v9.335h1.494v-4.054h.626c.764 0 1.388.219 2.761 2.134l1.311 1.919h1.755l-.772-1.087-.554-.762zm-4.166-3.407h-.958v-2.93h.96c1.449 0 2.029.533 2.046 1.409.012.785-.443 1.52-2.046 1.52l-.002.001z"/></svg>
\ No newline at end of file
diff --git a/public/img/home/fashion/v2/brands/hermes-light.svg b/public/img/home/fashion/v2/brands/hermes-light.svg
new file mode 100644
index 0000000..977a410
--- /dev/null
+++ b/public/img/home/fashion/v2/brands/hermes-light.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 221 286" fill="#4e5562"><path d="M63.419 141.949h2.203v3.965h-7.834v-3.965h2.192v-2.323h-6.964v2.323h2.216v11.679h-2.216v2.312h6.964v-2.312h-2.194v-5.419h7.834v5.419h-2.201v2.312H70.4v-2.312h-2.222v-11.679h2.224v-2.323H63.42m84.005 14.002h-6.864v-5.442h5.905v-2.303h-5.907v-3.934h6.918v2.232h2.432v-4.555h-14.228v2.323h2.321v11.679h-2.321v2.312h14.262v-5.436h-2.516m-59.507 0h-2.516v3.124H78.54v-5.442h5.906v-2.303H78.54v-3.934h6.919v2.232h2.432v-4.555H73.663v2.323h2.321v11.679h-2.322v2.312H87.92m53.303-17.119h4.989l-1.276-1.433h-5.115m23.998 9.223c-1.741-.467-2.97-.361-4.741-.918-1.6-.505-1.916-1.432-1.916-2.045s.706-2.217 3.219-2.217 4.162 1.567 4.255 2.947l.01-.007v.007h2.416v-4.756h-2.338v1.036l.073.323c-.016-.047-.083-.178-.329-.408-.745-.641-2.158-1.325-4.282-1.325-2.574 0-5.607 1.504-5.607 4.411 0 2.833 2.173 3.822 4.016 4.28l4.326.854c1.537.393 2.533 1.265 2.533 2.559 0 1.224-.8 2.83-4.052 2.83s-4.543-1.655-4.92-4.022l-.027.011h-2.299v5.774h2.403v-1.08l-.007-.008-.087-.286c.085.153.209.282.36.372l.024.032c1.216.879 2.812 1.462 4.858 1.462 2.282 0 6.278-1.103 6.278-5.012-.007-2.797-1.583-4.114-4.166-4.814zm-38.446 7.017v2.312h7.064v-2.312h-2.316v-11.679h2.316v-2.323h-6.314l-4.182 9.534-.087.468-.083-.475-4.182-9.528h-6.307v2.323h2.31v11.678h-2.314v2.312h7.059v-2.31h-2.207v-10.74l.016-.709.205.565 4.815 10.854h1.37l4.831-10.858.177-.571.027.644v10.815M77.12 132.757v.534h2.382l-.68-.534H77.12zm64.171.01h-1.24c-.345.063-.6.337-.628.524h1.866v-.526l.002.002zm-64.171 2.081h64.161v-1.13h-41.265c-1.055.474-2.393.452-3.436 0H84.051c-1.196.487-2.535.489-3.732.005l-3.199-.008v1.13.003zm18.067-2.091h-9.69c-.033.063-.477.424-.656.534h10.963c-.226-.153-.433-.332-.616-.534h-.001z"/><path d="M78.22 128.563a3.69 3.69 0 0 0-.188 1.104c.018.509.138 1.009.354 1.471s.521.875.899 1.216c.773.709 1.809 1.105 2.887 1.105a4.28 4.28 0 0 0 2.887-1.104 3.8 3.8 0 0 0 1.254-2.687 3.66 3.66 0 0 0-.257-1.31l1.403-.294c.217-.055.208-.148.038-.196-.636-.178-1.281-.322-1.933-.43a4.05 4.05 0 0 0-1.478-1.227 4.33 4.33 0 0 0-1.913-.443 4.29 4.29 0 0 0-1.499.274c-.007-.003-.013-.012-.017-.015-.094-.161-.148-.339-.157-.522a1.12 1.12 0 0 1 .107-.533c.421-.647 1.356-.9 2.124-.961.258-.012.878.016.945.085.15.113.408.154.683.063.263.094.33.168.63.256 2.639.847 5.561 1.295 8.514.784.462.412.716 1.134 1.04 1.633.087.125.192-.094 1.646-.141l1.691-.004c-1.133.123-2.108.722-2.686 1.589-.91.273-1.611.534-1.874.684-.323.184-.383.286 0 .38.448.11.903.19 1.361.24-.03.173-.057.35-.057.531 0 .918.387 1.799 1.076 2.448s1.624 1.014 2.598 1.014 1.909-.365 2.599-1.014a3.36 3.36 0 0 0 1.076-2.448 3.28 3.28 0 0 0-.457-1.64l1.466-.518c.4.136.672.361.958.675.234.248.762.15 1.075.078.508-.126.587-.507.583-.942 0-.198.01-.392.11-.549.595-1.276 2.972-1.444 4.192-1.727 0 0-.638.722-1.09.882-.091 1.864-.849 3.485-.941 5.262.575.022.55.628.688.973-.16.327-.436 0-.688.11-.873-.455.207-1.19-.506-1.753.366-1.492.966-2.943.916-4.524-.228.022-.317.26-.412.433-.161 1.496-.619 2.86-1.033 4.244.184.087.505.173.484.434-.554.325.021.847-.209 1.218h-5.673l-.629.533h8.7l.083-.301c-1.283-1.256-.8-3.139-.205-4.568l1.493-1.905c1.241-.455 1.999-1.884 3.309-2.339 0 .607-.805.868-1.241 1.213-.457 1.017-1.906 1.126-2.113 2.253.55.606 1.374.995 2.066 1.558.713.413.456 1.278 1.033 1.711.093.131 0 .325-.163.434-.605.136-.587.521-.222.841.233.204.5.471.47.571h-4.015c0 .173.163.239.339.534h22.176c.167-.295-.195-.644-.35-.934-1.566-.557-1.558-1.953-1.649-3.491.016-.063-.09-.209-.074-.526-.233-.207-1.263-2.676-.794-4.608l.341-.636c.322-.435-.02-.667.208-1.121l4.674-.851c.083-.04.061-.219-.027-.301l-1.419.248c-1.128-.447-2.783-1.436-3.872-2.778.338-2.176.17-3.94-.059-5.117l1.24-1.04c.471.267.573.142.638-.003-.075-.081-.775-.361-.66-.646.442.11.54-.019.608-.251l-.31-.104h-.01l.05-.157c.09-.173.507-.009.667-.053.278-.161-.033-.401.06-.617-.65-.518-1.823-.534-2.533-1.016-.22-.386-.309-.549-.539-.706-.237-.157-1.267-.247-1.458-.189s-.55.382-.55.382c-.738.146-1.183-.079-1.691-.369.045.176.131.338.251.474a1.15 1.15 0 0 0 .439.308c-.513.197-.74.606-.823 1.117-.707.135-.733.798-.642 1.099-.578.325-.521.757-.316 1.193-.517.326-.439.797-.292 1.157-.433.251 0 .948.067 1.356 1.244-.242 2.799 2.347 5.031 2.665.42-1.847-.106-2.753-.59-3.665.364-.199.759-.474 1.142-.763.294 1.583.339 3.202.133 4.799-.017-.016-.033-.028-.043-.044-.14 0-.28-.088-.393-.13.023.062.279.447.228.518 0 0-.723.45-2.158-.118-.383.844-5.308 2.919-5.308 2.919.183 1.281.83 2.132 1.496 2.826 1.058.738 2.188 1.117 3.522 1.378l1.267 3.312c.089.364.304.364.304.364.129.163.55.886.597 1.232l.105 1.225c.045.279.433.069.506.307l-.18.823-14.753.003c.207-.973-.32-1.824-.046-2.69-.593-.974-2.203-1.645-1.93-2.923.783-1.017 3.216-2.009 2.666-3.238 2.211-1.057 3.377.706 5.471.576.73-.038 1.543-.113 2.211-.299-.826-.674-1.616-1.667-2.032-2.553-4.389 1.663-8.657 3.034-13.416 3.943l-.366-.11c-.362.052-5.603 1.161-6.993 1.671-.364-.206-.765-.351-1.182-.428h.122c.445 0 1.125-.223 1.606-.381 2.036-.701 2.786-3.432 3.699-5.168.8 2.7 2.656 2.92 3.732 2.584l.1.847s.94-.031 1.646-.298c-.072-.16-.167-.588-.233-1.152.428-.209.659-.361.854-.468.059.641.1 1.245-.103 1.57l2.423-.609c.466-1.973 1.732-4.715 3.97-6.718-3.004-1.126-5.255.16-5.826.675-2.828.85-2.941 4.527-2.856 5.792-.49.091-2.546.763-3.519-2.59.567-1.287 1.641-2.719 2.849-3.835.105-.083-.016-.215-.258-.082-2.428 1.57-3.316 4.333-4.62 6.665-1.023 1.449-2.404 2.234-4.475 2.151-2.586-.038-3.837-2.579-5.022-4.229-1.816-3.747-6.514-2.402-10.006-3.202-.195-.094-.583-1.177-1.14-1.137-.395.029-.023.412-.25.54-.438-.172-.806-.475-1.356-.389-.345.066-.438.411-.413.716.275 1.19 1.629 1.711 2.641 2.144.388.546.243 2.433-.08 3.081-.417.722-2.054.465-2.382 2.119-.063.336.017.628.163.903-.636.315-1.174.78-1.563 1.35-.677.148-1.347.33-2.006.546-.167.057-.167.148.05.195.496.096.995.173 1.496.232l-.004-.011zm51.738-9.264c.6.617 2.032 1.554 2.949 1.86l-2.654.463c.3-1.059-.722-1.466-.295-2.323zm.286-8.575c.1-.039.38.063.495.091.07.016.044.157.009.282-.174.035-.444-.055-.48-.141-.05-.094-.122-.191-.024-.232zm.022.643a1.38 1.38 0 0 0 .228.55c-.003.085-.495.513-1.061.965-.14-.654-.283-1.105-.317-1.284.225-.151.833-.314 1.15-.231zm-2.541-2.296c.1-.031.304.031.358.069s.01.198.007.251-.253.167-.253.167-.24-.173-.237-.227l-.011-.004a2.09 2.09 0 0 1 .136-.256zm.312 4.839c-.313-.596-.567-1.227-.5-2.15.303-.005.743.182 1.325-.066 0 0 .179.512.358 1.35-.433.34-.883.672-1.183.866zm-3.974 10.376c-.949-.449-.358-.072-.083-.267 1.504.653 2.262.502 3.389.374.161.194.383.376.383.635-1.378.369-2.449-.11-3.69-.741l.001-.001zm5.42 6.985c-.088-.688-.13-1.174-.467-1.502-.266-.685-1.039-2.587-1.589-4.301.333-.311.592-.149.813.703.212.688.467 1.256.66 1.83.256.578.45 1.347.646 1.752 0 0 .174.028.27.246.483 1.272.61 1.476.528 2.082.117.475.827.088.762.675H129.6l.663-.005c-.457-.455-.134-1.133-.78-1.48zm-29.376 1.138c-.417.293-.916.48-1.461.54-.053-.016-.1-.118-.103-.181l-.087-1.769c-.003-.019.03-.039.05-.047.078-.026.153-.056.227-.091.02-.011.072-.016.088 0l1.232 1.347c.044.05.084.16.05.204l.004-.003zm-1.906.565a3.19 3.19 0 0 1-1.378-.364c-.033-.044-.022-.16.017-.212l1.03-1.479c.01-.015.05-.015.073-.009.067.019.135.035.203.047.023 0 .067.031.067.052l.092 1.773c.003.063-.05.173-.105.189l.002.003h-.001zm-2.599-3.684c-.067-.019-.167-.104-.163-.157.092-.244.219-.475.375-.684a30.54 30.54 0 0 1 .766-.195l.833.989-.038.005a14.91 14.91 0 0 1-1.523.1l-.25-.063v.005zm2.344-2.025c.05.019.1.119.1.181l.008.138c-.5.091-.99.193-1.459.306-.03-.058-.045-.126-.02-.157.4-.256.866-.413 1.366-.466l.005-.002zm-.263 1.931l-.846-.999a30.79 30.79 0 0 1 1.236-.257l.057 1.169c-.167.038-.305.063-.447.087zm-.08.314c-.003.011 0 .022-.007.031-.04.054-.076.11-.108.168-.01.02-.05.05-.075.047l-.608-.157c.26-.025.525-.047.8-.091l-.002.002zm1.121-.214c-.01.016-.05.016-.073.008h-.008l.088-.019-.005.01-.002.001zm-.355-.243l-.058-1.157c.494-.089.99-.162 1.489-.22-.006.048-.02.095-.043.138l-.755 1.08a13.33 13.33 0 0 1-.633.159zm1.588-1.115c.033-.051.14-.109.196-.098a3.13 3.13 0 0 1 .584.554l-1.38.408.6-.864zm-1.666-.397l-.003-.11c-.003-.065.05-.182.103-.193a3.19 3.19 0 0 1 .9.157 22.45 22.45 0 0 0-1 .145v.001zm-.042-.306c.017 0 .03-.004.045-.004l.04.003h-.087l.002.001zm-4.362 1.953c-.163-.047-.125-.094-.027-.134.328-.122.696-.243 1.083-.361-.093.202-.168.412-.223.628-.281-.02-.56-.066-.833-.133zm1.408.447a10.56 10.56 0 0 0 .755.005l1.293.334c.017.005.03.041.03.063a1.24 1.24 0 0 0 .023.228c0 .022-.017.039-.037.047l-1.724.717c-.063.024-.188.022-.227-.019a2.72 2.72 0 0 1-.17-.901c0-.163.023-.318.05-.471l.007-.003zm.285 1.76c0-.053.092-.135.15-.16l1.733-.681c.017-.01.05.015.063.031.03.034.075.086.117.125.02.016.037.063.027.079l-1.033 1.485c-.037.053-.15.11-.203.094a2.89 2.89 0 0 1-.85-.973h-.004zm1.028 1.103c-.017-.011-.028-.02-.043-.028l.045.027-.002.001zm3.849-.362c-.05.028-.175-.032-.222-.079l-1.228-1.345c-.017-.012-.003-.047.01-.067.033-.047.062-.095.088-.145.012-.02.05-.05.075-.047l1.816.474c.057.016.15.074.17.126a2.9 2.9 0 0 1-.709 1.083zm.829-1.476c-.03.047-.166.063-.233.047l-1.808-.471c-.022-.004-.033-.04-.033-.062a1.45 1.45 0 0 0-.013-.197c-.005-.022.008-.069.028-.078l1.756-.628c.062-.022.183-.011.225.028a2.76 2.76 0 0 1 .133.806c0 .188-.021.376-.058.557l.003-.002zm-.233-1.766c0 .055-.092.142-.153.165l.116-.037-1.871.662c-.02.008-.05-.016-.063-.031a1.65 1.65 0 0 0-.133-.153c-.022-.015-.037-.059-.028-.078l.162-.231c.57-.141 1.183-.323 1.833-.534.05.079.1.157.14.239l-.003-.002zm4.882-2.527c-.813.553-.43 1.204-.933 1.334-.184-.025-1.207.151-1.366.22-.345-.303-.697-.559-1.227-.69 1.008-.39 2.606-.776 3.526-.864zm-3.307 1.374c-.175.078-.642.248-1.27.455-.156-.222-.34-.425-.546-.606.786-.039 1.427 0 1.816.151zm8.776-9.698c-1.229 1.165-1.071 2.904-.928 4.273-.283.195-.633.358-.859.477-.134-1.68.056-4.185 1.787-4.75zm-30.772.59c-.207-.26-.51-.659-.275-.93.173-.201.526-.044.733.044.175.086 1.553.784 1.928.882 2.782.653 6.298-.31 8.504 1.574.108.094.187.184.163.314-3.237-2.078-8.112.995-11.053-1.884zm2.619 3.356c.23.131.322.476.575.671.413.649 1.195.866 1.608 1.428a1.49 1.49 0 0 1-.416-.028c-.27-.05-.377-.126-.603-.22-.12-.184-.422-.245-.658-.126-.354.028-.71.001-1.056-.078.067-.521.6-1.019.55-1.647zm-3.239 5.604l.846.887c-.589-.006-1.178-.028-1.766-.068-.043-.056-.067-.109-.055-.141.108-.213.24-.411.392-.596.188-.032.387-.055.583-.079v-.003zm5.018.22a3.36 3.36 0 0 1 .267.447c-.441.06-.883.105-1.326.137l.661-.534c.167-.125.357-.099.398-.05zm-.583-.138l-.94.753c-.24.016-.483.022-.728.032l.383-1.027c.477.016.94.047 1.371.088-.02.055-.037.11-.083.154h-.003zm-.23 4.622c-.34.232-.718.404-1.116.507-.073-.009-.213-.116-.253-.273l-.367-1.872c-.007-.024.003-.054.028-.063a.97.97 0 0 0 .2-.088c.022-.016.05-.005.067.013l1.358 1.406c.133.148.128.318.083.37zm-2.876-3.312c.017.016.023.051.008.069-.042.048-.057.063-.09.121-.012.022-.04.025-.067.016l-1.513-.509c.468.025.936.038 1.404.037l.257.266h.001zm1.499-.07c-.046-.04-.096-.074-.15-.102a.04.04 0 0 1-.023-.058l.028-.073.527-.025-.317.252c-.017.015-.045.021-.065.006zm-.358-.448l-.39.013h-.007l-.208-1.052c.067-.003.125-.011.19-.015.275 0 .543.009.813.015l-.4 1.041.002-.002zm-.88-1.023l.203 1.036a18.56 18.56 0 0 1-.578 0l-.9-.926c.413-.047.836-.083 1.275-.11zm.225 1.271c-.005.007 0 .019-.01.022-.07.024-.137.054-.2.091-.023.016-.05.005-.067-.012l-.093-.097c.123-.004.25 0 .372-.005l-.002.001zm-2.866-.313c.005-.013.017-.027.022-.043a.3.3 0 0 1-.022.044v-.001zm-.155.474c.038-.059.217-.131.387-.079l1.904.64c.022.007.042.032.037.055a.97.97 0 0 0-.017.176c0 .025-.022.039-.045.047l-1.989.349c-.197.026-.333-.063-.361-.126-.008-.094-.028-.182-.028-.276a2.94 2.94 0 0 1 .112-.786zm.033 1.685c.007-.07.122-.212.293-.248l1.983-.342c.012-.002.025-.001.036.005s.02.015.024.027c.02.053.027.078.063.135.012.022.005.044-.017.062l-1.578 1.196c-.17.121-.35.095-.392.048a3.34 3.34 0 0 1-.412-.883zm.475.967a.48.48 0 0 1-.047-.062c.01.018.032.042.047.062zm.371.427c-.037-.053-.01-.251.13-.361l1.576-1.185c.017-.022.045-.027.067-.008.045.04.117.09.177.121.025.013.033.032.02.06l-.683 1.792c-.073.181-.227.252-.295.239a3.58 3.58 0 0 1-.99-.659l-.002.001zm1.155.735c-.021-.007-.042-.015-.062-.025l.062.025zm.477.141c-.063-.036-.15-.198-.097-.358l.69-1.799c.007-.023.03-.039.055-.034a.99.99 0 0 0 .188.016c.028 0 .045.022.05.047l.372 1.875c.03.181-.058.299-.125.336-.093.007-.187.027-.283.027a3.5 3.5 0 0 1-.846-.11h-.004zm3.282-.832c.017-.015.033-.031.043-.047-.017.016-.028.032-.043.047zm.122-.133c-.062.036-.258.023-.383-.098l-1.348-1.419c-.017-.015-.023-.047-.005-.067.034-.037.063-.078.087-.122.012-.024.04-.029.063-.016l1.933.647c.2.073.25.222.233.282-.15.288-.342.555-.572.793h-.008zm.583-.82c.035-.064.065-.129.092-.197-.028.066-.059.132-.092.196v.001zm.222-.591c-.027.059-.2.147-.378.094l-1.923-.65c-.022-.006-.042-.031-.038-.055.01-.06.017-.088.017-.152 0-.025.023-.039.047-.047l2.028-.299c.2-.023.326.066.346.131.003.063.017.125.017.188 0 .272-.043.534-.112.788l-.004.002zm-.008-1.605c0 .076-.117.211-.29.242l-2.016.298c-.012.002-.025 0-.036-.005s-.019-.015-.024-.026c-.021-.065-.049-.128-.083-.188-.017-.021-.01-.043.008-.063l.6-.484c.573-.04 1.141-.102 1.704-.18a3.34 3.34 0 0 1 .133.408l.004-.002zm1.038-.982c.13.039.175.121.01.163-.173.044-.383.079-.583.118-.075-.167-.175-.319-.272-.471.313.056.6.118.843.188l.002.002zm-3.294-.696l.083-.224c.073-.179.233-.24.307-.229.32.144.618.334.883.565-.424-.052-.849-.088-1.275-.11l.002-.002zm-.263-.675a.37.37 0 0 1 .092.369l-.113.299c-.308-.013-.613-.029-.921-.026-.08 0-.155.016-.237.016l-.078-.402c-.03-.185.062-.304.13-.334.1-.008.193-.028.292-.028a3.7 3.7 0 0 1 .835.106zm-1.783.032c.075.008.22.116.258.276l.05.256c-.17-.147-.327-.309-.47-.483l.163-.048-.002-.001h.001zm-.117.68c-.323.028-.645.062-.963.109-.067-.122-.07-.235-.033-.276.158-.11.33-.207.51-.292a5.4 5.4 0 0 0 .486.459zm-3.502.882c.26-.088.576-.17.926-.248-.092.161-.173.328-.242.499-.238-.027-.483-.052-.683-.088-.17-.028-.129-.119-.001-.163zm61.153-9.297c-.07.054-.093.13-.036.141.106.019.166.053.29.16.066.031.05-.066.033-.119-.067-.151-.207-.242-.283-.182h-.004z"/><path d="M136.253 132.767h-3.276c-.041.208.217.361.367.522h3.577l.999-.458c.177-.408-.179-.769-.166-1.099.06-.982-.522-1.962-.828-2.861.2-.2.45-.659.778-.537.766 1.124.908 2.559.778 3.987-.078.353-.716.675-.696 1.008.011.116.849.066 1.196-.212.061-.229.511-.512.656-.545.16-.432-.09-.417-.05-.678.08-.181-.026-2.127-.17-2.336-.053-.031-.071-.031-.075-.026-.16-.387.23-.978.387-1.344l1.143-.097c-.137-.958-.5-1.953-.73-2.936.14-.229.393-.408.625-.538 1.204-.749.143-1.956.103-2.888-.205-.484-.911-.86-.976-1.394.146.107.258.063.29.071.345-.223.328-.545.156-.949l.94-1.043c-.033-.492-.871-1.225-1.363-1.225-.29.151-.483.455-1.016.845-.017.02-.64-.204-.828-.016-.184.141-.12.597.216.843-.041.121-.08.168-.15.314-.036.072-.053.149-.005.191.11.095.15.241.072.465-.083.239.2.414.3.449.017.005.05.038.083.078.037.264-.913.738-.913.942-.075.617-.483.556-.879 2.582.05.492.043.926.006 1.314l-1.213 2.786c-.273.722 1.26 2.813 1.283 4.238-.333.471-.6.404-.621.545v.002zm2.487-2.171c-.078-.193-.143-.466-.103-.669.133-.121.383-.031.51-.05.155.675.193.769-.405.722l-.002-.003zm.012-9.979c.043-.031.083-.131.108-.168.505-.304.157-.084-.345-.334-.163-.078-.166-.226-.146-.435.03-.259-.084-.309-.127-.392-.017-.035.062-.162.127-.251.116-.167.221-.512.276-.597.837.032.65.38.672.443.066.169.416.534.588.648-.05.477-.447.196-.27.631-.047.826-1.088.722-1.533 1.4-.045-.671.583-.669.65-.945zm-.95 3.554c.227.193.467.437.64.477.12.283-.25.322-.383.456-.312.044-.428-.267-.61-.126-.042.031-.228-.005-.225-.039.136-.294.332-.556.576-.769l.002.001zm-1.974 4.207c-.117-.571.69-1.46 1.226-3.202.22-.072.337.403.65.22.483.011.276 1.196.726.442-.01-.333-.02-.706.26-.884.303-.065.5.095.52.346l-.467.684c.884.032-.283 1.369.884 1.124-.039.502-.325 1.91-.53 1.84-.16-.78-.29-.456-.29-.226.033.303.026.549.216.794-.063.063-.299.056-.366.071-.66-.887-.633-2.104-1.058-3.068-.072-.003-.162.079-.158.15-.05.58-.29 1.419-.797 1.695-.316.176.697.069-.133.436.317.198.025.466-.323.466-.174-.348-.307-.637-.358-.89l-.002.002zm.875 1.924c-.12-.132-.305-.513-.38-.678l.483-.188a1.29 1.29 0 0 1 .321.706c-.108.055-.258.149-.424.16zm-15.553-9.355c-.072-.926.333-1.711-.125-2.7.005-.408.308-.722.226-1.099l-.744.17c-.114.779-.25 1.036-.139 1.769.197.84.297 1.604.78 1.862l.002-.002zm-7.694 2.59c2.849-.753 4.815-1.397 7.176-2.331-.983-1.978-.767-2.549-.683-3.814 0 0-1.2.015-2.595-.333-1.652 1.005-3.582 4.601-3.898 6.478zm9.776.573c.074.085-.153-.141 0 0zm3.424-5.996c-1.199-.779-2.129-2.59-3.437-2.468-.127-1.334-.745-3.599 1.211-5.988.254-.11.667-.152.827-.327-.8-.078-1.853.388-2.616-.02 0 0 .353.581.763.669-.27.345-.793.591-.475 1.193-.653.365-.406.913-.205 1.208-.326.317-.525.887-.091 1.234-.534.538.128.995.283 1.177-.27.539-.01.955-.01.955-.01.387-.743.942-1.008 1.12-.317.911-.195 2.743-.147 3.956 1.783-.804 3.532-1.568 4.905-2.709zm-20.493 32.181c0-.957-.678-2.087-1.609-2.618-.228-.13-.484-.209-.75-.229.227.012.533-.003.822-.116.009-.004.019-.006.03-.007.943-.395 2.086-1.546 2.086-3.484.012-.662-.144-1.316-.453-1.902s-.76-1.084-1.313-1.449c-1.04-.71-2.273-.87-3.504-.87h-9.697v2.323h2.183v11.702h-2.183v2.314h6.886v-2.316h-2.154v-5.154h4.76c1.641.018 2.276 1.036 2.309 1.91l.12 5.557h4.758v-2.311h-2.224l-.067-3.35zm-4.381-4.049h-5.273v-4.301h4.99c.517 0 1.16-.016 1.662.224.613.294 1.187.926 1.187 1.959 0 1.193-1.16 2.118-2.566 2.118zm-10.868 15.458h-3.287v9.335h1.466v-4.041h1.626c2.366 0 3.441-1.146 3.441-2.612 0-1.478-1.016-2.682-3.246-2.682zm-.06 4.092h-1.758v-2.888h1.819c1.333 0 1.733.737 1.733 1.419 0 .934-.702 1.469-1.794 1.469zm9.005-4.147l-4.385 9.386h1.583l1.2-2.751h4.34l1.242 2.751h1.616l-4.565-9.386h-1.033.002zm-1.033 5.431l1.526-3.689 1.645 3.689h-3.171zm21.646-5.376h1.466v9.335h-1.466v-9.335zm7.562 2.189c0-.659.713-1.109 1.706-1.109.733 0 1.621.219 2.536.973v-1.523c-.731-.426-1.562-.651-2.408-.654-1.979 0-3.277.968-3.277 2.489 0 2.559 4.67 2.779 4.67 4.709 0 .518-.553 1.174-1.758 1.174-1.063 0-2.055-.48-2.849-1.35v1.696c.903.588 1.85.863 3.023.863 1.741 0 3.022-1.07 3.022-2.532.007-2.971-4.665-2.941-4.665-4.736zm-12.745 5.297c-.795-1.162-1.373-2.025-2.316-2.587 1.111-.396 1.736-1.206 1.736-2.284 0-1.614-1.313-2.614-3.416-2.614h-2.625v9.335h1.494v-4.054h.626c.764 0 1.388.219 2.761 2.134l1.311 1.919h1.755l-.772-1.087-.554-.762zm-4.166-3.407h-.958v-2.93h.96c1.449 0 2.029.533 2.046 1.409.012.785-.443 1.52-2.046 1.52l-.002.001z"/></svg>
\ No newline at end of file
diff --git a/public/img/home/fashion/v2/brands/hm-dark.svg b/public/img/home/fashion/v2/brands/hm-dark.svg
new file mode 100644
index 0000000..959493d
--- /dev/null
+++ b/public/img/home/fashion/v2/brands/hm-dark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 208 245" fill="#cad0d9"><path d="M124.802 90.588c3.787-1.884 5.729-1.595 5.778.289.048 2.464-.341 5.748-.584 8.115-1.456 12.849-3.786 23.331-3.98 36.567 6.263-16.134 11.457-27.244 18.206-41.011 2.136-4.396 3.544-3.574 5.292-4.396 6.845-3.043 7.087-1.159 6.165 2.608-3.3 13.671-11.748 56.903-13.059 63.522-.388 1.932-2.524 1.159-3.01.387-2.525-3.333-5.244-3.383-4.953-5.652 1.554-11.013 7.089-38.885 8.497-45.455-7.331 14.877-14.905 33.571-18.788 44.101-.826 2.223-2.33 2.078-3.253.435-1.36-2.367-3.885-3.526-4.272-6.231-1.36-8.647 1.504-25.167 1.893-35.649-3.933 11.4-10.632 33.62-13.545 43.618-1.213 4.155-5.243 3.431-4.175-.531 4.466-16.858 14.031-46.566 18.157-57.241.971-2.559 3.543-2.414 5.631-3.476zm-24.177-2.077c-1.311-.29-5.098 1.739-7.428 2.077-.728.194-1.408.918-1.65 1.497-3.691 8.453-6.991 16.472-9.807 23.717l-12.72 2.512 10.244-25.602c1.651-4.153-2.718-4.54-4.419-.386L63.97 119.522c-3.35.822-6.992 1.739-10.681 2.85-2.719.724-2.816 1.449-1.651 3.092.679.869 1.942.773 2.573 1.449 1.602 1.642 2.574 3.623 5.437 3.912-2.621 6.763-5.146 13.671-7.379 20.289-1.457 4.202 2.67 5.072 4.224.628l7.963-21.593 12.865-2.802c-4.029 11.11-6.651 19.467-7.72 23.573-.193.773.195 1.159.34 1.545 1.311 1.933 2.67 2.029 4.418 4.493.437.677 2.039 1.014 2.622-.628a771.15 771.15 0 0 1 11.117-31.301c1.505-.387 4.225-1.015 5.875-3.43 2.913-4.348 3.739-3.477 4.516-4.782.873-1.69.242-3.188-2.864-2.85 0 0-1.166.097-3.399.338l8.739-22.075c.727-1.98.826-3.43-.34-3.719zm-3.415 54.893l1.376-1.903c1.839-2.708.049-4.3-1.845-2.706l-.83.797-.924-2.901 2.433-3.258c3.043-4.695-2.912-7.39-5.486-4.346-1.358 1.594-1.019 3.188-.631 4.588l.505 1.752-2.738 3.03c-2.961 3.382-2.138 7.737.971 8.695 1.875.578 3.643-.265 5.176-1.61l.213.548c.825 2.029 3.399 1.4 2.379-1.063l-.599-1.623zm-4.215-4.256l.793 2.41c-.338.281-.682.565-1.028.764-1.204.693-2.088-.049-.534-2.125l.769-1.049zm.972-5.915c-.089-.225-.141-.445-.188-.62-.871-3.237 2.858-2.373.972-.242l-.784.862z"/></svg>
\ No newline at end of file
diff --git a/public/img/home/fashion/v2/brands/hm-light.svg b/public/img/home/fashion/v2/brands/hm-light.svg
new file mode 100644
index 0000000..5659bf5
--- /dev/null
+++ b/public/img/home/fashion/v2/brands/hm-light.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 208 245" fill="#4e5562"><path d="M124.802 90.588c3.787-1.884 5.729-1.595 5.778.289.048 2.464-.341 5.748-.584 8.115-1.456 12.849-3.786 23.331-3.98 36.567 6.263-16.134 11.457-27.244 18.206-41.011 2.136-4.396 3.544-3.574 5.292-4.396 6.845-3.043 7.087-1.159 6.165 2.608-3.3 13.671-11.748 56.903-13.059 63.522-.388 1.932-2.524 1.159-3.01.387-2.525-3.333-5.244-3.383-4.953-5.652 1.554-11.013 7.089-38.885 8.497-45.455-7.331 14.877-14.905 33.571-18.788 44.101-.826 2.223-2.33 2.078-3.253.435-1.36-2.367-3.885-3.526-4.272-6.231-1.36-8.647 1.504-25.167 1.893-35.649-3.933 11.4-10.632 33.62-13.545 43.618-1.213 4.155-5.243 3.431-4.175-.531 4.466-16.858 14.031-46.566 18.157-57.241.971-2.559 3.543-2.414 5.631-3.476zm-24.177-2.077c-1.311-.29-5.098 1.739-7.428 2.077-.728.194-1.408.918-1.65 1.497-3.691 8.453-6.991 16.472-9.807 23.717l-12.72 2.512 10.244-25.602c1.651-4.153-2.718-4.54-4.419-.386L63.97 119.522c-3.35.822-6.992 1.739-10.681 2.85-2.719.724-2.816 1.449-1.651 3.092.679.869 1.942.773 2.573 1.449 1.602 1.642 2.574 3.623 5.437 3.912-2.621 6.763-5.146 13.671-7.379 20.289-1.457 4.202 2.67 5.072 4.224.628l7.963-21.593 12.865-2.802c-4.029 11.11-6.651 19.467-7.72 23.573-.193.773.195 1.159.34 1.545 1.311 1.933 2.67 2.029 4.418 4.493.437.677 2.039 1.014 2.622-.628a771.15 771.15 0 0 1 11.117-31.301c1.505-.387 4.225-1.015 5.875-3.43 2.913-4.348 3.739-3.477 4.516-4.782.873-1.69.242-3.188-2.864-2.85 0 0-1.166.097-3.399.338l8.739-22.075c.727-1.98.826-3.43-.34-3.719zm-3.415 54.893l1.376-1.903c1.839-2.708.049-4.3-1.845-2.706l-.83.797-.924-2.901 2.433-3.258c3.043-4.695-2.912-7.39-5.486-4.346-1.358 1.594-1.019 3.188-.631 4.588l.505 1.752-2.738 3.03c-2.961 3.382-2.138 7.737.971 8.695 1.875.578 3.643-.265 5.176-1.61l.213.548c.825 2.029 3.399 1.4 2.379-1.063l-.599-1.623zm-4.215-4.256l.793 2.41c-.338.281-.682.565-1.028.764-1.204.693-2.088-.049-.534-2.125l.769-1.049zm.972-5.915c-.089-.225-.141-.445-.188-.62-.871-3.237 2.858-2.373.972-.242l-.784.862z"/></svg>
\ No newline at end of file
diff --git a/public/img/home/fashion/v2/brands/newbalance-dark.svg b/public/img/home/fashion/v2/brands/newbalance-dark.svg
new file mode 100644
index 0000000..6705cd2
--- /dev/null
+++ b/public/img/home/fashion/v2/brands/newbalance-dark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 441 172" fill="#cad0d9"><path d="M206.59 82.866l-18.636.659 17.695.976.941-1.635zm-2.229 3.888l-18.68.66 17.761.98.919-1.64zm-2.229 3.921l-18.657.65 17.739.979.918-1.629zm-2.183 3.901l-18.68.661 17.718.977.962-1.638zm22.835-31.337l-23.786.84 23.853 1.316-.067-2.157zm-.151-3.859l-21.368.744 21.436 1.221-.068-1.965zm-.152-3.722l-19.038.622 19.129 1.055-.091-1.677zm-.129-3.821l-16.687.554 16.753.982-.066-1.536zm-.108-3.089H207.73l14.536.766-.022-.766zm-24.546 49.728l-18.635.67h18.254l.381-.67zm63.154-49.603h-26.856l-.762 1.338 13.439.708c.158 0 .158.222-.067.222l-14.155.47-1.366 2.373 13.348.783c.179.022.135.267-.022.267l-14.178.463-1.32 2.272 13.326.735c.291.022.291.267 0 .267l-14.155.493-1.343 2.376 13.281.756c.291.022.27.289 0 .289l-14.155.501-1.367 2.347 13.303.734c.201.022.226.268-.044.268l-40.786 1.357 38.703 2.135c.246 0 .224.311-.046.311l-40.852 1.446 38.704 2.134c.179 0 .223.289-.046.289l-40.92 1.468 38.704 2.135c.157.022.312.311-.022.334l-40.855 1.443 38.703 2.134c.112.022.224.311-.044.311l-20.562.728.068 1.843 18.321 1.011c.133.022.201.289-.046.289l-18.208.643.089 2.061 15.904.877c.156.022.223.334-.046.334l-15.768.55.068 2.262 13.551.747c.156.022.201.311-.067.311l-13.416.476.089 2.488 11.199.618c.157.022.157.29-.067.29l-11.087.398.045 1.069h36.151c9.585 0 18.185-6.939 19.798-12.454s1.614-10.497-6.091-12.987c4.301-.979 11.781-5.795 13.26-12.454 1.341-6.05-.898-12.233-11.335-12.255zm-18.184 38.625h-11.109l6.271-11.031h8.243c8.511 0 4.389 11.031-3.405 11.031zm14.379-23.664c-.359 1.334-3.048 4.715-6.451 4.715h-8.242l5.284-9.251h4.212c5.374.178 5.553 3.203 5.197 4.536zm44.498 51.174c0-4.274-3.579-7.855-7.884-7.855-4.417 0-8.023 3.637-8.023 8.105-.005 1.051.201 2.093.604 3.065a7.96 7.96 0 0 0 1.744 2.598c.749.743 1.638 1.331 2.617 1.732a8.08 8.08 0 0 0 3.086.599c3.269 0 6.372-2.221 7.295-5.246h-4.081c-.811 1.277-1.872 1.859-3.327 1.859-1.845 0-3.493-1.249-4.025-3.026h11.796c.141-.859.198-1.276.198-1.831zm-12.105-1.07c.532-2.082 2.209-3.414 4.277-3.414s3.691 1.305 4.193 3.414h-8.47zm-40.888-6.044v1.246c-1.173-1.249-2.873-1.959-4.691-1.959-4.025 0-7.457 3.413-7.457 7.855 0 4.19 3.036 7.948 7.537 7.948 1.985 0 3.494-.455 4.919-2.064v1.97h3.412v-14.996h-3.72zm-4.167 11.912c-1.243 0-2.435-.491-3.314-1.364s-1.373-2.056-1.373-3.291a4.64 4.64 0 0 1 1.373-3.291c.879-.873 2.071-1.363 3.314-1.363s2.436.49 3.315 1.363a4.64 4.64 0 0 1 1.373 3.291c0 1.235-.494 2.419-1.373 3.291a4.71 4.71 0 0 1-3.315 1.364zm-97.494-12.654c-1.536 0-2.71.528-3.997 1.833v-1.471h-3.439v15.376h3.719v-7.245c0-1.969.167-5.107 2.907-5.107 2.571 0 2.851 2.942 2.851 4.83v7.522h3.717v-8.244c0-2.165-.167-3.192-.754-4.413-.867-1.832-2.907-3.081-5.004-3.081zm23.102 7.856c0-4.274-3.579-7.855-7.884-7.855-4.416 0-8.022 3.637-8.022 8.105-.005 1.051.201 2.093.604 3.064a7.96 7.96 0 0 0 1.744 2.598c.748.743 1.638 1.332 2.616 1.732a8.08 8.08 0 0 0 3.086.6c3.271 0 6.373-2.221 7.296-5.246h-4.081c-.811 1.277-1.873 1.859-3.327 1.859-1.844 0-3.494-1.249-4.025-3.026h11.796c.141-.859.197-1.276.197-1.831zm-12.104-1.07c.531-2.082 2.209-3.414 4.278-3.414s3.69 1.305 4.193 3.414h-8.471zm73.274 8.939h3.718v-20.511h-3.718v20.511zm30.917-15.725c-1.538 0-2.712.528-3.998 1.833v-1.471h-3.439v15.376h3.72v-7.245c0-1.969.167-5.107 2.906-5.107 2.571 0 2.852 2.942 2.852 4.83v7.522h3.717v-8.244c0-2.165-.167-3.192-.754-4.413-.867-1.832-2.907-3.081-5.004-3.081zm15.039 3.387c1.704 0 2.682.556 3.606 2.109h4.191c-1.145-3.302-4.08-5.496-7.659-5.496-4.528 0-8.163 3.581-8.163 7.995 0 4.44 3.663 8.104 8.163 8.104 1.148-.006 2.283-.249 3.331-.712a8.29 8.29 0 0 0 2.763-1.981c.783-.86 1.063-1.36 1.565-2.719h-4.191c-.868 1.332-1.985 2.025-3.383 2.025-2.601 0-4.528-1.998-4.528-4.663 0-2.691 1.844-4.662 4.305-4.662zm-92.916 6.356l-2.633-9.38h-2.992l-2.661 9.38-3.148-9.38h-3.28l5.171 15.375h2.381l3.02-9.963 2.934 9.963h2.5l4.958-15.375h-3.074l-3.176 9.38zm19.919-9.726c-1.817 0-3.517.71-4.691 1.958v-6.76h-3.718v20.51h3.41v-1.969c1.426 1.609 2.935 2.063 4.92 2.063 4.501 0 7.537-3.757 7.537-7.948.001-4.441-3.432-7.854-7.458-7.854zm-.524 12.637c-1.243 0-2.436-.491-3.315-1.364s-1.373-2.056-1.373-3.291a4.64 4.64 0 0 1 1.373-3.291c.879-.873 2.072-1.363 3.315-1.363s2.435.49 3.314 1.363a4.64 4.64 0 0 1 1.373 3.291c0 1.235-.494 2.419-1.373 3.291a4.71 4.71 0 0 1-3.314 1.364zm21.363-11.912v1.246c-1.174-1.249-2.873-1.959-4.691-1.959-4.025 0-7.458 3.413-7.458 7.855 0 4.19 3.036 7.948 7.536 7.948 1.985 0 3.494-.455 4.921-2.064v1.97h3.41v-14.996h-3.718zm-4.166 11.912c-1.243 0-2.435-.491-3.314-1.364s-1.373-2.056-1.373-3.291a4.64 4.64 0 0 1 1.373-3.291c.879-.873 2.071-1.363 3.314-1.363s2.436.49 3.315 1.363a4.64 4.64 0 0 1 1.373 3.291c0 1.235-.494 2.419-1.373 3.291a4.71 4.71 0 0 1-3.315 1.364z"/></svg>
\ No newline at end of file
diff --git a/public/img/home/fashion/v2/brands/newbalance-light.svg b/public/img/home/fashion/v2/brands/newbalance-light.svg
new file mode 100644
index 0000000..b2f3810
--- /dev/null
+++ b/public/img/home/fashion/v2/brands/newbalance-light.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 441 172" fill="#4e5562"><path d="M206.59 82.866l-18.636.659 17.695.976.941-1.635zm-2.229 3.888l-18.68.66 17.761.98.919-1.64zm-2.229 3.921l-18.657.65 17.739.979.918-1.629zm-2.183 3.901l-18.68.661 17.718.977.962-1.638zm22.835-31.337l-23.786.84 23.853 1.316-.067-2.157zm-.151-3.859l-21.368.744 21.436 1.221-.068-1.965zm-.152-3.722l-19.038.622 19.129 1.055-.091-1.677zm-.129-3.821l-16.687.554 16.753.982-.066-1.536zm-.108-3.089H207.73l14.536.766-.022-.766zm-24.546 49.728l-18.635.67h18.254l.381-.67zm63.154-49.603h-26.856l-.762 1.338 13.439.708c.158 0 .158.222-.067.222l-14.155.47-1.366 2.373 13.348.783c.179.022.135.267-.022.267l-14.178.463-1.32 2.272 13.326.735c.291.022.291.267 0 .267l-14.155.493-1.343 2.376 13.281.756c.291.022.27.289 0 .289l-14.155.501-1.367 2.347 13.303.734c.201.022.226.268-.044.268l-40.786 1.357 38.703 2.135c.246 0 .224.311-.046.311l-40.852 1.446 38.704 2.134c.179 0 .223.289-.046.289l-40.92 1.468 38.704 2.135c.157.022.312.311-.022.334l-40.855 1.443 38.703 2.134c.112.022.224.311-.044.311l-20.562.728.068 1.843 18.321 1.011c.133.022.201.289-.046.289l-18.208.643.089 2.061 15.904.877c.156.022.223.334-.046.334l-15.768.55.068 2.262 13.551.747c.156.022.201.311-.067.311l-13.416.476.089 2.488 11.199.618c.157.022.157.29-.067.29l-11.087.398.045 1.069h36.151c9.585 0 18.185-6.939 19.798-12.454s1.614-10.497-6.091-12.987c4.301-.979 11.781-5.795 13.26-12.454 1.341-6.05-.898-12.233-11.335-12.255zm-18.184 38.625h-11.109l6.271-11.031h8.243c8.511 0 4.389 11.031-3.405 11.031zm14.379-23.664c-.359 1.334-3.048 4.715-6.451 4.715h-8.242l5.284-9.251h4.212c5.374.178 5.553 3.203 5.197 4.536zm44.498 51.174c0-4.274-3.579-7.855-7.884-7.855-4.417 0-8.023 3.637-8.023 8.105-.005 1.051.201 2.093.604 3.065a7.96 7.96 0 0 0 1.744 2.598c.749.743 1.638 1.331 2.617 1.732a8.08 8.08 0 0 0 3.086.599c3.269 0 6.372-2.221 7.295-5.246h-4.081c-.811 1.277-1.872 1.859-3.327 1.859-1.845 0-3.493-1.249-4.025-3.026h11.796c.141-.859.198-1.276.198-1.831zm-12.105-1.07c.532-2.082 2.209-3.414 4.277-3.414s3.691 1.305 4.193 3.414h-8.47zm-40.888-6.044v1.246c-1.173-1.249-2.873-1.959-4.691-1.959-4.025 0-7.457 3.413-7.457 7.855 0 4.19 3.036 7.948 7.537 7.948 1.985 0 3.494-.455 4.919-2.064v1.97h3.412v-14.996h-3.72zm-4.167 11.912c-1.243 0-2.435-.491-3.314-1.364s-1.373-2.056-1.373-3.291a4.64 4.64 0 0 1 1.373-3.291c.879-.873 2.071-1.363 3.314-1.363s2.436.49 3.315 1.363a4.64 4.64 0 0 1 1.373 3.291c0 1.235-.494 2.419-1.373 3.291a4.71 4.71 0 0 1-3.315 1.364zm-97.494-12.654c-1.536 0-2.71.528-3.997 1.833v-1.471h-3.439v15.376h3.719v-7.245c0-1.969.167-5.107 2.907-5.107 2.571 0 2.851 2.942 2.851 4.83v7.522h3.717v-8.244c0-2.165-.167-3.192-.754-4.413-.867-1.832-2.907-3.081-5.004-3.081zm23.102 7.856c0-4.274-3.579-7.855-7.884-7.855-4.416 0-8.022 3.637-8.022 8.105-.005 1.051.201 2.093.604 3.064a7.96 7.96 0 0 0 1.744 2.598c.748.743 1.638 1.332 2.616 1.732a8.08 8.08 0 0 0 3.086.6c3.271 0 6.373-2.221 7.296-5.246h-4.081c-.811 1.277-1.873 1.859-3.327 1.859-1.844 0-3.494-1.249-4.025-3.026h11.796c.141-.859.197-1.276.197-1.831zm-12.104-1.07c.531-2.082 2.209-3.414 4.278-3.414s3.69 1.305 4.193 3.414h-8.471zm73.274 8.939h3.718v-20.511h-3.718v20.511zm30.917-15.725c-1.538 0-2.712.528-3.998 1.833v-1.471h-3.439v15.376h3.72v-7.245c0-1.969.167-5.107 2.906-5.107 2.571 0 2.852 2.942 2.852 4.83v7.522h3.717v-8.244c0-2.165-.167-3.192-.754-4.413-.867-1.832-2.907-3.081-5.004-3.081zm15.039 3.387c1.704 0 2.682.556 3.606 2.109h4.191c-1.145-3.302-4.08-5.496-7.659-5.496-4.528 0-8.163 3.581-8.163 7.995 0 4.44 3.663 8.104 8.163 8.104 1.148-.006 2.283-.249 3.331-.712a8.29 8.29 0 0 0 2.763-1.981c.783-.86 1.063-1.36 1.565-2.719h-4.191c-.868 1.332-1.985 2.025-3.383 2.025-2.601 0-4.528-1.998-4.528-4.663 0-2.691 1.844-4.662 4.305-4.662zm-92.916 6.356l-2.633-9.38h-2.992l-2.661 9.38-3.148-9.38h-3.28l5.171 15.375h2.381l3.02-9.963 2.934 9.963h2.5l4.958-15.375h-3.074l-3.176 9.38zm19.919-9.726c-1.817 0-3.517.71-4.691 1.958v-6.76h-3.718v20.51h3.41v-1.969c1.426 1.609 2.935 2.063 4.92 2.063 4.501 0 7.537-3.757 7.537-7.948.001-4.441-3.432-7.854-7.458-7.854zm-.524 12.637c-1.243 0-2.436-.491-3.315-1.364s-1.373-2.056-1.373-3.291a4.64 4.64 0 0 1 1.373-3.291c.879-.873 2.072-1.363 3.315-1.363s2.435.49 3.314 1.363a4.64 4.64 0 0 1 1.373 3.291c0 1.235-.494 2.419-1.373 3.291a4.71 4.71 0 0 1-3.314 1.364zm21.363-11.912v1.246c-1.174-1.249-2.873-1.959-4.691-1.959-4.025 0-7.458 3.413-7.458 7.855 0 4.19 3.036 7.948 7.536 7.948 1.985 0 3.494-.455 4.921-2.064v1.97h3.41v-14.996h-3.718zm-4.166 11.912c-1.243 0-2.435-.491-3.314-1.364s-1.373-2.056-1.373-3.291a4.64 4.64 0 0 1 1.373-3.291c.879-.873 2.071-1.363 3.314-1.363s2.436.49 3.315 1.363a4.64 4.64 0 0 1 1.373 3.291c0 1.235-.494 2.419-1.373 3.291a4.71 4.71 0 0 1-3.315 1.364z"/></svg>
\ No newline at end of file
diff --git a/public/img/home/fashion/v2/brands/puma-dark.svg b/public/img/home/fashion/v2/brands/puma-dark.svg
new file mode 100644
index 0000000..41c4162
--- /dev/null
+++ b/public/img/home/fashion/v2/brands/puma-dark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 208 194" fill="#cad0d9"><path d="M107.945 63.544c-.393.061-.771 1.519-1.531 2.279-.555.548-1.248.514-1.617 1.191-.14.253-.094.685-.253 1.1-.31.83-1.402.904-1.402 1.808-.004.977.911 1.163 1.702 1.856.618.558.679.942 1.427 1.212.639.219 1.589-.497 2.445-.24.703.211 1.375.364 1.534 1.091.14.67-.009 1.709-.862 1.589-.287-.032-1.532-.455-3.062-.291-1.846.211-3.953.818-4.159 2.891-.113 1.159 1.309 2.526 2.683 2.248.95-.189.501-1.317 1.018-1.865.679-.702 4.522 2.452 8.095 2.452 1.504 0 2.622-.382 3.733-1.555.104-.09.231-.282.391-.293.151.011.416.162.503.227 2.877 2.33 5.052 7.003 15.627 7.058 1.487.008 3.182.723 4.565 1.995 1.234 1.15 1.955 2.937 2.656 4.751 1.058 2.722 2.955 5.37 5.831 8.316.157.158 2.524 2.012 2.713 2.151.03.019.204.438.144.672-.07 1.766-.325 6.904 3.476 7.136.93.047.686-.611.686-1.064-.002-.895-.164-1.784.304-2.699.641-1.26-1.358-1.841-1.3-4.564.042-2.031-1.651-1.685-2.511-3.232-.495-.897-.935-1.372-.903-2.469.193-6.171-1.303-10.225-2.05-11.22-.582-.752-1.063-1.051-.531-1.399 3.173-2.111 3.893-4.075 3.893-4.075 1.687-3.995 3.204-7.644 5.295-9.251.422-.331 1.503-1.144 2.166-1.464 1.951-.927 2.979-1.488 3.546-2.044.898-.881 1.606-2.718.746-3.832-1.069-1.374-2.919-.284-3.735.204-5.832 3.487-6.692 9.639-8.712 13.172-1.612 2.823-4.232 4.895-6.575 5.065-1.757.131-3.65-.227-5.536-1.06-4.586-2.025-7.095-4.64-7.686-5.103-1.232-.957-10.796-10.416-18.545-10.802 0 0-.961-1.94-1.203-1.972-.567-.072-1.147 1.159-1.563 1.302-.391.131-1.048-1.335-1.443-1.27zm-34.111 56.449c-.729-.017-1.349-.621-1.349-1.367l.002-24.348h-7.966v26.84c0 1.315 1.058 2.389 2.356 2.389H80.8c1.307 0 2.352-1.074 2.352-2.389v-26.84h-7.958l-.008 24.348c0 .746-.62 1.35-1.353 1.367zm26.67-25.715H88.448c-1.426 0-2.588 1.169-2.588 2.621v26.607h7.973V99.099c.006-.748.606-1.34 1.347-1.34s1.341.579 1.358 1.319v24.429h7.942V99.078c.009-.74.606-1.319 1.349-1.319a1.35 1.35 0 0 1 1.351 1.34v24.408h7.973V96.899c0-1.452-1.164-2.621-2.591-2.621h-12.058zm-46.643 4.873a1.37 1.37 0 0 0-1.349-1.391h-1.353v14.784h1.353a1.35 1.35 0 0 0 1.349-1.372v-12.02zm5.345 17.01h-8.047v7.346h-7.962V94.278h16.06c1.438 0 2.56 1.176 2.56 2.632v16.619c0 1.458-1.166 2.632-2.611 2.632zm83.27.809c-1.601 0-2.944 1.394-2.944 3.082 0 1.694 1.343 3.076 2.995 3.076 1.638 0 2.964-1.382 2.964-3.076s-1.326-3.082-2.965-3.082h-.05zm3.586 3.072c0 1.986-1.58 3.6-3.535 3.6-1.977 0-3.564-1.603-3.564-3.6 0-1.958 1.587-3.595 3.505-3.595a3.56 3.56 0 0 1 3.594 3.595z"/><path d="M142.158 119.814c.554 0 .845-.198.845-.594 0-.352-.282-.533-.82-.533h-.159v1.127h.134zm2.039 2.311h-.95l-1.223-1.639v1.639h-.776v-4.144h.816c1.109 0 1.698.423 1.698 1.23 0 .538-.347 1.016-.833 1.159l-.057.021 1.325 1.734zm-15.676-9.576V99.09a1.34 1.34 0 0 0-1.357-1.315 1.35 1.35 0 0 0-1.349 1.336v13.438h2.706zm0 10.958v-7.338h-2.706v7.338h-7.958V96.899c0-1.452 1.162-2.621 2.588-2.621h13.445c1.431 0 2.593 1.169 2.593 2.621v26.607l-7.962.001z"/></svg>
\ No newline at end of file
diff --git a/public/img/home/fashion/v2/brands/puma-light.svg b/public/img/home/fashion/v2/brands/puma-light.svg
new file mode 100644
index 0000000..da07f3d
--- /dev/null
+++ b/public/img/home/fashion/v2/brands/puma-light.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 208 194" fill="#4e5562"><path d="M107.945 63.544c-.393.061-.771 1.519-1.531 2.279-.555.548-1.248.514-1.617 1.191-.14.253-.094.685-.253 1.1-.31.83-1.402.904-1.402 1.808-.004.977.911 1.163 1.702 1.856.618.558.679.942 1.427 1.212.639.219 1.589-.497 2.445-.24.703.211 1.375.364 1.534 1.091.14.67-.009 1.709-.862 1.589-.287-.032-1.532-.455-3.062-.291-1.846.211-3.953.818-4.159 2.891-.113 1.159 1.309 2.526 2.683 2.248.95-.189.501-1.317 1.018-1.865.679-.702 4.522 2.452 8.095 2.452 1.504 0 2.622-.382 3.733-1.555.104-.09.231-.282.391-.293.151.011.416.162.503.227 2.877 2.33 5.052 7.003 15.627 7.058 1.487.008 3.182.723 4.565 1.995 1.234 1.15 1.955 2.937 2.656 4.751 1.058 2.722 2.955 5.37 5.831 8.316.157.158 2.524 2.012 2.713 2.151.03.019.204.438.144.672-.07 1.766-.325 6.904 3.476 7.136.93.047.686-.611.686-1.064-.002-.895-.164-1.784.304-2.699.641-1.26-1.358-1.841-1.3-4.564.042-2.031-1.651-1.685-2.511-3.232-.495-.897-.935-1.372-.903-2.469.193-6.171-1.303-10.225-2.05-11.22-.582-.752-1.063-1.051-.531-1.399 3.173-2.111 3.893-4.075 3.893-4.075 1.687-3.995 3.204-7.644 5.295-9.251.422-.331 1.503-1.144 2.166-1.464 1.951-.927 2.979-1.488 3.546-2.044.898-.881 1.606-2.718.746-3.832-1.069-1.374-2.919-.284-3.735.204-5.832 3.487-6.692 9.639-8.712 13.172-1.612 2.823-4.232 4.895-6.575 5.065-1.757.131-3.65-.227-5.536-1.06-4.586-2.025-7.095-4.64-7.686-5.103-1.232-.957-10.796-10.416-18.545-10.802 0 0-.961-1.94-1.203-1.972-.567-.072-1.147 1.159-1.563 1.302-.391.131-1.048-1.335-1.443-1.27zm-34.111 56.449c-.729-.017-1.349-.621-1.349-1.367l.002-24.348h-7.966v26.84c0 1.315 1.058 2.389 2.356 2.389H80.8c1.307 0 2.352-1.074 2.352-2.389v-26.84h-7.958l-.008 24.348c0 .746-.62 1.35-1.353 1.367zm26.67-25.715H88.448c-1.426 0-2.588 1.169-2.588 2.621v26.607h7.973V99.099c.006-.748.606-1.34 1.347-1.34s1.341.579 1.358 1.319v24.429h7.942V99.078c.009-.74.606-1.319 1.349-1.319a1.35 1.35 0 0 1 1.351 1.34v24.408h7.973V96.899c0-1.452-1.164-2.621-2.591-2.621h-12.058zm-46.643 4.873a1.37 1.37 0 0 0-1.349-1.391h-1.353v14.784h1.353a1.35 1.35 0 0 0 1.349-1.372v-12.02zm5.345 17.01h-8.047v7.346h-7.962V94.278h16.06c1.438 0 2.56 1.176 2.56 2.632v16.619c0 1.458-1.166 2.632-2.611 2.632zm83.27.809c-1.601 0-2.944 1.394-2.944 3.082 0 1.694 1.343 3.076 2.995 3.076 1.638 0 2.964-1.382 2.964-3.076s-1.326-3.082-2.965-3.082h-.05zm3.586 3.072c0 1.986-1.58 3.6-3.535 3.6-1.977 0-3.564-1.603-3.564-3.6 0-1.958 1.587-3.595 3.505-3.595a3.56 3.56 0 0 1 3.594 3.595z"/><path d="M142.158 119.814c.554 0 .845-.198.845-.594 0-.352-.282-.533-.82-.533h-.159v1.127h.134zm2.039 2.311h-.95l-1.223-1.639v1.639h-.776v-4.144h.816c1.109 0 1.698.423 1.698 1.23 0 .538-.347 1.016-.833 1.159l-.057.021 1.325 1.734zm-15.676-9.576V99.09a1.34 1.34 0 0 0-1.357-1.315 1.35 1.35 0 0 0-1.349 1.336v13.438h2.706zm0 10.958v-7.338h-2.706v7.338h-7.958V96.899c0-1.452 1.162-2.621 2.588-2.621h13.445c1.431 0 2.593 1.169 2.593 2.621v26.607l-7.962.001z"/></svg>
\ No newline at end of file
diff --git a/public/img/home/fashion/v2/brands/zara-dark.svg b/public/img/home/fashion/v2/brands/zara-dark.svg
new file mode 100644
index 0000000..4ae42b7
--- /dev/null
+++ b/public/img/home/fashion/v2/brands/zara-dark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 429 301" fill="#cad0d9"><path d="M324.63 197.022l-36.364-96.937-.024-.064h-.718l-7.488 19.92-13.632 36.265-.032-.029c-4.725-4.036-11.391-6.56-19.786-7.499l-2.56-.256 2.54-.316c13.844-2.408 23.15-10.874 23.15-21.074 0-13.986-13.587-23.749-33.049-23.749h-40.493v.708h11.766v72.272l-28.576-76.178-.026-.064h-.718l-7.488 19.92-28.881 76.831-.178.02a32.69 32.69 0 0 1-1.465.141c-.723.057-1.448.086-2.173.088h-29.183l55.472-93.03.413-.699H97.292v28.778h.72c.128-14.017 8.559-28.079 27.187-28.079h22.474l-55.892 93.727h75.297v-27.571h-.72c-.098 12.217-7.252 23.822-22.806 26.442l-.495.082 11.846-31.527h33.185l11.958 31.878H188.25v.697h46.299v-.697h-11.847v-48.086h13.669c13.91 0 21.888 6.017 21.888 16.503v8.53c0 .94.066 2.314.139 3.463v.042l-7.347 19.543h-9.598v.697h19.868v-.697h-9.495l6.691-17.796.02.276.185 1.603.178 1.061c1.116 6.562 3.708 11.386 7.702 14.338l.574.403c3.034 2.043 6.805 3.077 11.213 3.077 5.839 0 9.732-1.409 12.946-4.726l-.421-.384c-2.962 2.646-5.447 3.719-8.561 3.719-5.306 0-8.083-6.232-8.083-12.377V174.26c.028-2.969-.452-5.921-1.419-8.728l-.132-.371v-.013h24.273l11.957 31.878h-11.795v.697h40.065v-.697l-12.589-.004zm-169.463-32.575l16.348-43.487 16.312 43.487h-32.66zm67.542-16.211v-44.245h10.434c13.938 0 21.296 8.022 21.296 23.191 0 16.133-4.224 21.054-18.068 21.054h-13.662zm49.727 16.211l-.071-.172c-1.078-2.544-2.649-4.865-4.627-6.838l-.683-.662-.073-.066 13.427-35.749 16.312 43.487h-24.285z"/></svg>
\ No newline at end of file
diff --git a/public/img/home/fashion/v2/brands/zara-light.svg b/public/img/home/fashion/v2/brands/zara-light.svg
new file mode 100644
index 0000000..1d642c7
--- /dev/null
+++ b/public/img/home/fashion/v2/brands/zara-light.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 429 301" fill="#4e5562"><path d="M324.63 197.022l-36.364-96.937-.024-.064h-.718l-7.488 19.92-13.632 36.265-.032-.029c-4.725-4.036-11.391-6.56-19.786-7.499l-2.56-.256 2.54-.316c13.844-2.408 23.15-10.874 23.15-21.074 0-13.986-13.587-23.749-33.049-23.749h-40.493v.708h11.766v72.272l-28.576-76.178-.026-.064h-.718l-7.488 19.92-28.881 76.831-.178.02a32.69 32.69 0 0 1-1.465.141c-.723.057-1.448.086-2.173.088h-29.183l55.472-93.03.413-.699H97.292v28.778h.72c.128-14.017 8.559-28.079 27.187-28.079h22.474l-55.892 93.727h75.297v-27.571h-.72c-.098 12.217-7.252 23.822-22.806 26.442l-.495.082 11.846-31.527h33.185l11.958 31.878H188.25v.697h46.299v-.697h-11.847v-48.086h13.669c13.91 0 21.888 6.017 21.888 16.503v8.53c0 .94.066 2.314.139 3.463v.042l-7.347 19.543h-9.598v.697h19.868v-.697h-9.495l6.691-17.796.02.276.185 1.603.178 1.061c1.116 6.562 3.708 11.386 7.702 14.338l.574.403c3.034 2.043 6.805 3.077 11.213 3.077 5.839 0 9.732-1.409 12.946-4.726l-.421-.384c-2.962 2.646-5.447 3.719-8.561 3.719-5.306 0-8.083-6.232-8.083-12.377V174.26c.028-2.969-.452-5.921-1.419-8.728l-.132-.371v-.013h24.273l11.957 31.878h-11.795v.697h40.065v-.697l-12.589-.004zm-169.463-32.575l16.348-43.487 16.312 43.487h-32.66zm67.542-16.211v-44.245h10.434c13.938 0 21.296 8.022 21.296 23.191 0 16.133-4.224 21.054-18.068 21.054h-13.662zm49.727 16.211l-.071-.172c-1.078-2.544-2.649-4.865-4.627-6.838l-.683-.662-.073-.066 13.427-35.749 16.312 43.487h-24.285z"/></svg>
\ No newline at end of file
diff --git a/public/img/home/fashion/v2/categories/01.png b/public/img/home/fashion/v2/categories/01.png
new file mode 100644
index 0000000..49852eb
Binary files /dev/null and b/public/img/home/fashion/v2/categories/01.png differ
diff --git a/public/img/home/fashion/v2/categories/02.png b/public/img/home/fashion/v2/categories/02.png
new file mode 100644
index 0000000..deb45ce
Binary files /dev/null and b/public/img/home/fashion/v2/categories/02.png differ
diff --git a/public/img/home/fashion/v2/categories/03.png b/public/img/home/fashion/v2/categories/03.png
new file mode 100644
index 0000000..b4041c0
Binary files /dev/null and b/public/img/home/fashion/v2/categories/03.png differ
diff --git a/public/img/home/fashion/v2/hero/hotspot01.png b/public/img/home/fashion/v2/hero/hotspot01.png
new file mode 100644
index 0000000..9d6289b
Binary files /dev/null and b/public/img/home/fashion/v2/hero/hotspot01.png differ
diff --git a/public/img/home/fashion/v2/hero/hotspot02.png b/public/img/home/fashion/v2/hero/hotspot02.png
new file mode 100644
index 0000000..42252c0
Binary files /dev/null and b/public/img/home/fashion/v2/hero/hotspot02.png differ
diff --git a/public/img/home/fashion/v2/hero/hotspot03.png b/public/img/home/fashion/v2/hero/hotspot03.png
new file mode 100644
index 0000000..972dcba
Binary files /dev/null and b/public/img/home/fashion/v2/hero/hotspot03.png differ
diff --git a/public/img/home/fashion/v2/hero/image.png b/public/img/home/fashion/v2/hero/image.png
new file mode 100644
index 0000000..48fe348
Binary files /dev/null and b/public/img/home/fashion/v2/hero/image.png differ
diff --git a/public/img/home/fashion/v2/offers-slider/preview01.png b/public/img/home/fashion/v2/offers-slider/preview01.png
new file mode 100644
index 0000000..1bf5496
Binary files /dev/null and b/public/img/home/fashion/v2/offers-slider/preview01.png differ
diff --git a/public/img/home/fashion/v2/offers-slider/preview02.png b/public/img/home/fashion/v2/offers-slider/preview02.png
new file mode 100644
index 0000000..442b8cf
Binary files /dev/null and b/public/img/home/fashion/v2/offers-slider/preview02.png differ
diff --git a/public/img/home/fashion/v2/offers-slider/product01.png b/public/img/home/fashion/v2/offers-slider/product01.png
new file mode 100644
index 0000000..13e54fc
Binary files /dev/null and b/public/img/home/fashion/v2/offers-slider/product01.png differ
diff --git a/public/img/home/fashion/v2/offers-slider/product02.png b/public/img/home/fashion/v2/offers-slider/product02.png
new file mode 100644
index 0000000..5c96f54
Binary files /dev/null and b/public/img/home/fashion/v2/offers-slider/product02.png differ
diff --git a/public/img/home/furniture/categories/01.png b/public/img/home/furniture/categories/01.png
new file mode 100644
index 0000000..1d3464e
Binary files /dev/null and b/public/img/home/furniture/categories/01.png differ
diff --git a/public/img/home/furniture/categories/02.png b/public/img/home/furniture/categories/02.png
new file mode 100644
index 0000000..521befe
Binary files /dev/null and b/public/img/home/furniture/categories/02.png differ
diff --git a/public/img/home/furniture/categories/03.png b/public/img/home/furniture/categories/03.png
new file mode 100644
index 0000000..213d8fa
Binary files /dev/null and b/public/img/home/furniture/categories/03.png differ
diff --git a/public/img/home/furniture/categories/04.png b/public/img/home/furniture/categories/04.png
new file mode 100644
index 0000000..f02e85e
Binary files /dev/null and b/public/img/home/furniture/categories/04.png differ
diff --git a/public/img/home/furniture/categories/05.png b/public/img/home/furniture/categories/05.png
new file mode 100644
index 0000000..0404a84
Binary files /dev/null and b/public/img/home/furniture/categories/05.png differ
diff --git a/public/img/home/furniture/categories/06.png b/public/img/home/furniture/categories/06.png
new file mode 100644
index 0000000..5ace77e
Binary files /dev/null and b/public/img/home/furniture/categories/06.png differ
diff --git a/public/img/home/furniture/featured-product-thumbnail.jpg b/public/img/home/furniture/featured-product-thumbnail.jpg
new file mode 100644
index 0000000..7258053
Binary files /dev/null and b/public/img/home/furniture/featured-product-thumbnail.jpg differ
diff --git a/public/img/home/furniture/featured-product.png b/public/img/home/furniture/featured-product.png
new file mode 100644
index 0000000..7742191
Binary files /dev/null and b/public/img/home/furniture/featured-product.png differ
diff --git a/public/img/home/furniture/gallery/01.jpg b/public/img/home/furniture/gallery/01.jpg
new file mode 100644
index 0000000..805faeb
Binary files /dev/null and b/public/img/home/furniture/gallery/01.jpg differ
diff --git a/public/img/home/furniture/gallery/02.jpg b/public/img/home/furniture/gallery/02.jpg
new file mode 100644
index 0000000..6c7591e
Binary files /dev/null and b/public/img/home/furniture/gallery/02.jpg differ
diff --git a/public/img/home/furniture/gallery/03.jpg b/public/img/home/furniture/gallery/03.jpg
new file mode 100644
index 0000000..0f60fe8
Binary files /dev/null and b/public/img/home/furniture/gallery/03.jpg differ
diff --git a/public/img/home/furniture/gallery/04.jpg b/public/img/home/furniture/gallery/04.jpg
new file mode 100644
index 0000000..30fb925
Binary files /dev/null and b/public/img/home/furniture/gallery/04.jpg differ
diff --git a/public/img/home/furniture/gallery/hotspot01.png b/public/img/home/furniture/gallery/hotspot01.png
new file mode 100644
index 0000000..60c0dbc
Binary files /dev/null and b/public/img/home/furniture/gallery/hotspot01.png differ
diff --git a/public/img/home/furniture/gallery/hotspot02.png b/public/img/home/furniture/gallery/hotspot02.png
new file mode 100644
index 0000000..b7bebc0
Binary files /dev/null and b/public/img/home/furniture/gallery/hotspot02.png differ
diff --git a/public/img/home/furniture/gallery/hotspot03.png b/public/img/home/furniture/gallery/hotspot03.png
new file mode 100644
index 0000000..80926dd
Binary files /dev/null and b/public/img/home/furniture/gallery/hotspot03.png differ
diff --git a/public/img/home/furniture/hero-slider/01.png b/public/img/home/furniture/hero-slider/01.png
new file mode 100644
index 0000000..de73b01
Binary files /dev/null and b/public/img/home/furniture/hero-slider/01.png differ
diff --git a/public/img/home/furniture/hero-slider/02.png b/public/img/home/furniture/hero-slider/02.png
new file mode 100644
index 0000000..b5ad768
Binary files /dev/null and b/public/img/home/furniture/hero-slider/02.png differ
diff --git a/public/img/home/furniture/hero-slider/03.png b/public/img/home/furniture/hero-slider/03.png
new file mode 100644
index 0000000..8edc516
Binary files /dev/null and b/public/img/home/furniture/hero-slider/03.png differ
diff --git a/public/img/home/furniture/hero-slider/04.png b/public/img/home/furniture/hero-slider/04.png
new file mode 100644
index 0000000..cdb942a
Binary files /dev/null and b/public/img/home/furniture/hero-slider/04.png differ
diff --git a/public/img/home/furniture/hero-slider/th01.png b/public/img/home/furniture/hero-slider/th01.png
new file mode 100644
index 0000000..a3ac74c
Binary files /dev/null and b/public/img/home/furniture/hero-slider/th01.png differ
diff --git a/public/img/home/furniture/hero-slider/th02.png b/public/img/home/furniture/hero-slider/th02.png
new file mode 100644
index 0000000..15ca2e0
Binary files /dev/null and b/public/img/home/furniture/hero-slider/th02.png differ
diff --git a/public/img/home/furniture/hero-slider/th03.png b/public/img/home/furniture/hero-slider/th03.png
new file mode 100644
index 0000000..ecd0a3c
Binary files /dev/null and b/public/img/home/furniture/hero-slider/th03.png differ
diff --git a/public/img/home/furniture/hero-slider/th04.png b/public/img/home/furniture/hero-slider/th04.png
new file mode 100644
index 0000000..35f0fd2
Binary files /dev/null and b/public/img/home/furniture/hero-slider/th04.png differ
diff --git a/public/img/home/grocery/banner01.png b/public/img/home/grocery/banner01.png
new file mode 100644
index 0000000..fea9bfb
Binary files /dev/null and b/public/img/home/grocery/banner01.png differ
diff --git a/public/img/home/grocery/banner02.png b/public/img/home/grocery/banner02.png
new file mode 100644
index 0000000..aa6e381
Binary files /dev/null and b/public/img/home/grocery/banner02.png differ
diff --git a/public/img/home/grocery/featured/01.png b/public/img/home/grocery/featured/01.png
new file mode 100644
index 0000000..8f6cc4a
Binary files /dev/null and b/public/img/home/grocery/featured/01.png differ
diff --git a/public/img/home/grocery/featured/02.png b/public/img/home/grocery/featured/02.png
new file mode 100644
index 0000000..2f3e4e5
Binary files /dev/null and b/public/img/home/grocery/featured/02.png differ
diff --git a/public/img/home/grocery/featured/03.png b/public/img/home/grocery/featured/03.png
new file mode 100644
index 0000000..d114b08
Binary files /dev/null and b/public/img/home/grocery/featured/03.png differ
diff --git a/public/img/home/grocery/hero-slider/01.jpg b/public/img/home/grocery/hero-slider/01.jpg
new file mode 100644
index 0000000..fdbd054
Binary files /dev/null and b/public/img/home/grocery/hero-slider/01.jpg differ
diff --git a/public/img/home/grocery/hero-slider/02.jpg b/public/img/home/grocery/hero-slider/02.jpg
new file mode 100644
index 0000000..4823044
Binary files /dev/null and b/public/img/home/grocery/hero-slider/02.jpg differ
diff --git a/public/img/home/grocery/hero-slider/03.jpg b/public/img/home/grocery/hero-slider/03.jpg
new file mode 100644
index 0000000..712a189
Binary files /dev/null and b/public/img/home/grocery/hero-slider/03.jpg differ
diff --git a/public/img/home/grocery/recipes/01.jpg b/public/img/home/grocery/recipes/01.jpg
new file mode 100644
index 0000000..6b99540
Binary files /dev/null and b/public/img/home/grocery/recipes/01.jpg differ
diff --git a/public/img/home/grocery/recipes/02.jpg b/public/img/home/grocery/recipes/02.jpg
new file mode 100644
index 0000000..4f87740
Binary files /dev/null and b/public/img/home/grocery/recipes/02.jpg differ
diff --git a/public/img/home/grocery/recipes/03.jpg b/public/img/home/grocery/recipes/03.jpg
new file mode 100644
index 0000000..fd9aa15
Binary files /dev/null and b/public/img/home/grocery/recipes/03.jpg differ
diff --git a/public/img/home/grocery/recipes/book-cover.jpg b/public/img/home/grocery/recipes/book-cover.jpg
new file mode 100644
index 0000000..dfbcd03
Binary files /dev/null and b/public/img/home/grocery/recipes/book-cover.jpg differ
diff --git a/public/img/home/marketplace/cart/01.jpg b/public/img/home/marketplace/cart/01.jpg
new file mode 100644
index 0000000..1fcd48d
Binary files /dev/null and b/public/img/home/marketplace/cart/01.jpg differ
diff --git a/public/img/home/marketplace/cart/02.jpg b/public/img/home/marketplace/cart/02.jpg
new file mode 100644
index 0000000..12ad530
Binary files /dev/null and b/public/img/home/marketplace/cart/02.jpg differ
diff --git a/public/img/home/marketplace/cart/03.jpg b/public/img/home/marketplace/cart/03.jpg
new file mode 100644
index 0000000..2eaf561
Binary files /dev/null and b/public/img/home/marketplace/cart/03.jpg differ
diff --git a/public/img/home/marketplace/categories/01.jpg b/public/img/home/marketplace/categories/01.jpg
new file mode 100644
index 0000000..e5370db
Binary files /dev/null and b/public/img/home/marketplace/categories/01.jpg differ
diff --git a/public/img/home/marketplace/categories/02.jpg b/public/img/home/marketplace/categories/02.jpg
new file mode 100644
index 0000000..d96aa58
Binary files /dev/null and b/public/img/home/marketplace/categories/02.jpg differ
diff --git a/public/img/home/marketplace/categories/03.jpg b/public/img/home/marketplace/categories/03.jpg
new file mode 100644
index 0000000..b6682ef
Binary files /dev/null and b/public/img/home/marketplace/categories/03.jpg differ
diff --git a/public/img/home/marketplace/categories/04.jpg b/public/img/home/marketplace/categories/04.jpg
new file mode 100644
index 0000000..402a8c8
Binary files /dev/null and b/public/img/home/marketplace/categories/04.jpg differ
diff --git a/public/img/home/marketplace/categories/05.jpg b/public/img/home/marketplace/categories/05.jpg
new file mode 100644
index 0000000..0a0660c
Binary files /dev/null and b/public/img/home/marketplace/categories/05.jpg differ
diff --git a/public/img/home/marketplace/categories/06.jpg b/public/img/home/marketplace/categories/06.jpg
new file mode 100644
index 0000000..d31a147
Binary files /dev/null and b/public/img/home/marketplace/categories/06.jpg differ
diff --git a/public/img/home/marketplace/collections/01.jpg b/public/img/home/marketplace/collections/01.jpg
new file mode 100644
index 0000000..93c76a2
Binary files /dev/null and b/public/img/home/marketplace/collections/01.jpg differ
diff --git a/public/img/home/marketplace/collections/02.jpg b/public/img/home/marketplace/collections/02.jpg
new file mode 100644
index 0000000..3a4621e
Binary files /dev/null and b/public/img/home/marketplace/collections/02.jpg differ
diff --git a/public/img/home/marketplace/collections/03.jpg b/public/img/home/marketplace/collections/03.jpg
new file mode 100644
index 0000000..58c79c2
Binary files /dev/null and b/public/img/home/marketplace/collections/03.jpg differ
diff --git a/public/img/home/marketplace/collections/04.jpg b/public/img/home/marketplace/collections/04.jpg
new file mode 100644
index 0000000..7661129
Binary files /dev/null and b/public/img/home/marketplace/collections/04.jpg differ
diff --git a/public/img/home/marketplace/collections/05.jpg b/public/img/home/marketplace/collections/05.jpg
new file mode 100644
index 0000000..0e75568
Binary files /dev/null and b/public/img/home/marketplace/collections/05.jpg differ
diff --git a/public/img/home/marketplace/collections/06.jpg b/public/img/home/marketplace/collections/06.jpg
new file mode 100644
index 0000000..09041de
Binary files /dev/null and b/public/img/home/marketplace/collections/06.jpg differ
diff --git a/public/img/home/marketplace/collections/07.jpg b/public/img/home/marketplace/collections/07.jpg
new file mode 100644
index 0000000..7f99c7e
Binary files /dev/null and b/public/img/home/marketplace/collections/07.jpg differ
diff --git a/public/img/home/marketplace/collections/08.jpg b/public/img/home/marketplace/collections/08.jpg
new file mode 100644
index 0000000..ea2f202
Binary files /dev/null and b/public/img/home/marketplace/collections/08.jpg differ
diff --git a/public/img/home/marketplace/collections/09.jpg b/public/img/home/marketplace/collections/09.jpg
new file mode 100644
index 0000000..bab937f
Binary files /dev/null and b/public/img/home/marketplace/collections/09.jpg differ
diff --git a/public/img/home/marketplace/collections/10.jpg b/public/img/home/marketplace/collections/10.jpg
new file mode 100644
index 0000000..043e356
Binary files /dev/null and b/public/img/home/marketplace/collections/10.jpg differ
diff --git a/public/img/home/marketplace/collections/11.jpg b/public/img/home/marketplace/collections/11.jpg
new file mode 100644
index 0000000..8d25005
Binary files /dev/null and b/public/img/home/marketplace/collections/11.jpg differ
diff --git a/public/img/home/marketplace/collections/12.jpg b/public/img/home/marketplace/collections/12.jpg
new file mode 100644
index 0000000..df622c6
Binary files /dev/null and b/public/img/home/marketplace/collections/12.jpg differ
diff --git a/public/img/home/marketplace/formats/figma.png b/public/img/home/marketplace/formats/figma.png
new file mode 100644
index 0000000..9017f63
Binary files /dev/null and b/public/img/home/marketplace/formats/figma.png differ
diff --git a/public/img/home/marketplace/formats/framer.png b/public/img/home/marketplace/formats/framer.png
new file mode 100644
index 0000000..9ef5ce1
Binary files /dev/null and b/public/img/home/marketplace/formats/framer.png differ
diff --git a/public/img/home/marketplace/formats/illustrator.png b/public/img/home/marketplace/formats/illustrator.png
new file mode 100644
index 0000000..9e2cc45
Binary files /dev/null and b/public/img/home/marketplace/formats/illustrator.png differ
diff --git a/public/img/home/marketplace/formats/photoshop.png b/public/img/home/marketplace/formats/photoshop.png
new file mode 100644
index 0000000..c798e50
Binary files /dev/null and b/public/img/home/marketplace/formats/photoshop.png differ
diff --git a/public/img/home/marketplace/formats/webflow.png b/public/img/home/marketplace/formats/webflow.png
new file mode 100644
index 0000000..cae86a9
Binary files /dev/null and b/public/img/home/marketplace/formats/webflow.png differ
diff --git a/public/img/home/marketplace/products/01.jpg b/public/img/home/marketplace/products/01.jpg
new file mode 100644
index 0000000..43e1c2a
Binary files /dev/null and b/public/img/home/marketplace/products/01.jpg differ
diff --git a/public/img/home/marketplace/products/02.jpg b/public/img/home/marketplace/products/02.jpg
new file mode 100644
index 0000000..3ee5752
Binary files /dev/null and b/public/img/home/marketplace/products/02.jpg differ
diff --git a/public/img/home/marketplace/products/03.jpg b/public/img/home/marketplace/products/03.jpg
new file mode 100644
index 0000000..0acd0e3
Binary files /dev/null and b/public/img/home/marketplace/products/03.jpg differ
diff --git a/public/img/home/single-product/01.png b/public/img/home/single-product/01.png
new file mode 100644
index 0000000..04cd33e
Binary files /dev/null and b/public/img/home/single-product/01.png differ
diff --git a/public/img/home/single-product/02.jpg b/public/img/home/single-product/02.jpg
new file mode 100644
index 0000000..7cc30bc
Binary files /dev/null and b/public/img/home/single-product/02.jpg differ
diff --git a/public/img/home/single-product/03.jpg b/public/img/home/single-product/03.jpg
new file mode 100644
index 0000000..e46f35d
Binary files /dev/null and b/public/img/home/single-product/03.jpg differ
diff --git a/public/img/home/single-product/bpa-fee-dark.png b/public/img/home/single-product/bpa-fee-dark.png
new file mode 100644
index 0000000..a427559
Binary files /dev/null and b/public/img/home/single-product/bpa-fee-dark.png differ
diff --git a/public/img/home/single-product/bpa-fee-light.png b/public/img/home/single-product/bpa-fee-light.png
new file mode 100644
index 0000000..774d827
Binary files /dev/null and b/public/img/home/single-product/bpa-fee-light.png differ
diff --git a/public/img/home/single-product/colors/darkness.png b/public/img/home/single-product/colors/darkness.png
new file mode 100644
index 0000000..4d07d2d
Binary files /dev/null and b/public/img/home/single-product/colors/darkness.png differ
diff --git a/public/img/home/single-product/colors/freshness.png b/public/img/home/single-product/colors/freshness.png
new file mode 100644
index 0000000..d1f0073
Binary files /dev/null and b/public/img/home/single-product/colors/freshness.png differ
diff --git a/public/img/home/single-product/colors/heavenly.png b/public/img/home/single-product/colors/heavenly.png
new file mode 100644
index 0000000..2580c73
Binary files /dev/null and b/public/img/home/single-product/colors/heavenly.png differ
diff --git a/public/img/home/single-product/colors/sunflower.png b/public/img/home/single-product/colors/sunflower.png
new file mode 100644
index 0000000..49e68e8
Binary files /dev/null and b/public/img/home/single-product/colors/sunflower.png differ
diff --git a/public/img/home/single-product/hero/background.jpg b/public/img/home/single-product/hero/background.jpg
new file mode 100644
index 0000000..a259cd8
Binary files /dev/null and b/public/img/home/single-product/hero/background.jpg differ
diff --git a/public/img/home/single-product/hero/foreground.png b/public/img/home/single-product/hero/foreground.png
new file mode 100644
index 0000000..a005d5d
Binary files /dev/null and b/public/img/home/single-product/hero/foreground.png differ
diff --git a/public/img/home/single-product/reviews/ava01.jpg b/public/img/home/single-product/reviews/ava01.jpg
new file mode 100644
index 0000000..d19aadd
Binary files /dev/null and b/public/img/home/single-product/reviews/ava01.jpg differ
diff --git a/public/img/home/single-product/reviews/ava02.jpg b/public/img/home/single-product/reviews/ava02.jpg
new file mode 100644
index 0000000..46bf4b9
Binary files /dev/null and b/public/img/home/single-product/reviews/ava02.jpg differ
diff --git a/public/img/home/single-product/reviews/ava03.jpg b/public/img/home/single-product/reviews/ava03.jpg
new file mode 100644
index 0000000..a95a13c
Binary files /dev/null and b/public/img/home/single-product/reviews/ava03.jpg differ
diff --git a/public/img/home/single-product/reviews/ava04.jpg b/public/img/home/single-product/reviews/ava04.jpg
new file mode 100644
index 0000000..a4ba6d7
Binary files /dev/null and b/public/img/home/single-product/reviews/ava04.jpg differ
diff --git a/public/img/home/single-product/reviews/ava05.jpg b/public/img/home/single-product/reviews/ava05.jpg
new file mode 100644
index 0000000..1aa2296
Binary files /dev/null and b/public/img/home/single-product/reviews/ava05.jpg differ
diff --git a/public/img/home/single-product/reviews/video.jpg b/public/img/home/single-product/reviews/video.jpg
new file mode 100644
index 0000000..566572a
Binary files /dev/null and b/public/img/home/single-product/reviews/video.jpg differ
diff --git a/public/img/home/single-product/socials/01.jpg b/public/img/home/single-product/socials/01.jpg
new file mode 100644
index 0000000..e62d57e
Binary files /dev/null and b/public/img/home/single-product/socials/01.jpg differ
diff --git a/public/img/home/single-product/socials/02.jpg b/public/img/home/single-product/socials/02.jpg
new file mode 100644
index 0000000..2db2cb4
Binary files /dev/null and b/public/img/home/single-product/socials/02.jpg differ
diff --git a/public/img/home/single-product/socials/03.jpg b/public/img/home/single-product/socials/03.jpg
new file mode 100644
index 0000000..c9e44b0
Binary files /dev/null and b/public/img/home/single-product/socials/03.jpg differ
diff --git a/public/img/home/single-product/socials/04.jpg b/public/img/home/single-product/socials/04.jpg
new file mode 100644
index 0000000..acd0f13
Binary files /dev/null and b/public/img/home/single-product/socials/04.jpg differ
diff --git a/public/img/instagram/01.jpg b/public/img/instagram/01.jpg
new file mode 100644
index 0000000..471d672
Binary files /dev/null and b/public/img/instagram/01.jpg differ
diff --git a/public/img/instagram/02.jpg b/public/img/instagram/02.jpg
new file mode 100644
index 0000000..56b5ac9
Binary files /dev/null and b/public/img/instagram/02.jpg differ
diff --git a/public/img/instagram/03.jpg b/public/img/instagram/03.jpg
new file mode 100644
index 0000000..4f41b14
Binary files /dev/null and b/public/img/instagram/03.jpg differ
diff --git a/public/img/instagram/04.jpg b/public/img/instagram/04.jpg
new file mode 100644
index 0000000..cbcd39a
Binary files /dev/null and b/public/img/instagram/04.jpg differ
diff --git a/public/img/instagram/05.jpg b/public/img/instagram/05.jpg
new file mode 100644
index 0000000..c5dbb11
Binary files /dev/null and b/public/img/instagram/05.jpg differ
diff --git a/public/img/intro/customizer/borders-dark.png b/public/img/intro/customizer/borders-dark.png
new file mode 100644
index 0000000..3221ace
Binary files /dev/null and b/public/img/intro/customizer/borders-dark.png differ
diff --git a/public/img/intro/customizer/borders-light.jpg b/public/img/intro/customizer/borders-light.jpg
new file mode 100644
index 0000000..9588e59
Binary files /dev/null and b/public/img/intro/customizer/borders-light.jpg differ
diff --git a/public/img/intro/customizer/colors-dark.png b/public/img/intro/customizer/colors-dark.png
new file mode 100644
index 0000000..a2beff3
Binary files /dev/null and b/public/img/intro/customizer/colors-dark.png differ
diff --git a/public/img/intro/customizer/colors-light.jpg b/public/img/intro/customizer/colors-light.jpg
new file mode 100644
index 0000000..9a6226c
Binary files /dev/null and b/public/img/intro/customizer/colors-light.jpg differ
diff --git a/public/img/intro/customizer/typography-dark.png b/public/img/intro/customizer/typography-dark.png
new file mode 100644
index 0000000..eaa521f
Binary files /dev/null and b/public/img/intro/customizer/typography-dark.png differ
diff --git a/public/img/intro/customizer/typography-light.jpg b/public/img/intro/customizer/typography-light.jpg
new file mode 100644
index 0000000..dfbdff2
Binary files /dev/null and b/public/img/intro/customizer/typography-light.jpg differ
diff --git a/public/img/intro/dark-mode.jpg b/public/img/intro/dark-mode.jpg
new file mode 100644
index 0000000..e4c2a05
Binary files /dev/null and b/public/img/intro/dark-mode.jpg differ
diff --git a/public/img/intro/demos/electronics-dark.png b/public/img/intro/demos/electronics-dark.png
new file mode 100644
index 0000000..7c43613
Binary files /dev/null and b/public/img/intro/demos/electronics-dark.png differ
diff --git a/public/img/intro/demos/electronics-light.png b/public/img/intro/demos/electronics-light.png
new file mode 100644
index 0000000..8d5263a
Binary files /dev/null and b/public/img/intro/demos/electronics-light.png differ
diff --git a/public/img/intro/demos/fashion-1-dark.png b/public/img/intro/demos/fashion-1-dark.png
new file mode 100644
index 0000000..267230d
Binary files /dev/null and b/public/img/intro/demos/fashion-1-dark.png differ
diff --git a/public/img/intro/demos/fashion-1-light.png b/public/img/intro/demos/fashion-1-light.png
new file mode 100644
index 0000000..dd0c156
Binary files /dev/null and b/public/img/intro/demos/fashion-1-light.png differ
diff --git a/public/img/intro/demos/fashion-2-dark.png b/public/img/intro/demos/fashion-2-dark.png
new file mode 100644
index 0000000..58eb412
Binary files /dev/null and b/public/img/intro/demos/fashion-2-dark.png differ
diff --git a/public/img/intro/demos/fashion-2-light.png b/public/img/intro/demos/fashion-2-light.png
new file mode 100644
index 0000000..4e1ebc1
Binary files /dev/null and b/public/img/intro/demos/fashion-2-light.png differ
diff --git a/public/img/intro/demos/furniture-dark.png b/public/img/intro/demos/furniture-dark.png
new file mode 100644
index 0000000..bf6c126
Binary files /dev/null and b/public/img/intro/demos/furniture-dark.png differ
diff --git a/public/img/intro/demos/furniture-light.png b/public/img/intro/demos/furniture-light.png
new file mode 100644
index 0000000..19c80f5
Binary files /dev/null and b/public/img/intro/demos/furniture-light.png differ
diff --git a/public/img/intro/demos/grocery-dark.png b/public/img/intro/demos/grocery-dark.png
new file mode 100644
index 0000000..5015904
Binary files /dev/null and b/public/img/intro/demos/grocery-dark.png differ
diff --git a/public/img/intro/demos/grocery-light.png b/public/img/intro/demos/grocery-light.png
new file mode 100644
index 0000000..b2fcffa
Binary files /dev/null and b/public/img/intro/demos/grocery-light.png differ
diff --git a/public/img/intro/demos/marketplace-dark.png b/public/img/intro/demos/marketplace-dark.png
new file mode 100644
index 0000000..8b07963
Binary files /dev/null and b/public/img/intro/demos/marketplace-dark.png differ
diff --git a/public/img/intro/demos/marketplace-light.png b/public/img/intro/demos/marketplace-light.png
new file mode 100644
index 0000000..ff470cb
Binary files /dev/null and b/public/img/intro/demos/marketplace-light.png differ
diff --git a/public/img/intro/demos/single-store-dark.png b/public/img/intro/demos/single-store-dark.png
new file mode 100644
index 0000000..b96ee3a
Binary files /dev/null and b/public/img/intro/demos/single-store-dark.png differ
diff --git a/public/img/intro/demos/single-store-light.png b/public/img/intro/demos/single-store-light.png
new file mode 100644
index 0000000..d368e95
Binary files /dev/null and b/public/img/intro/demos/single-store-light.png differ
diff --git a/public/img/intro/features/bootstrap.png b/public/img/intro/features/bootstrap.png
new file mode 100644
index 0000000..b7af227
Binary files /dev/null and b/public/img/intro/features/bootstrap.png differ
diff --git a/public/img/intro/features/figma.png b/public/img/intro/features/figma.png
new file mode 100644
index 0000000..11f3f6c
Binary files /dev/null and b/public/img/intro/features/figma.png differ
diff --git a/public/img/intro/features/google-fonts.png b/public/img/intro/features/google-fonts.png
new file mode 100644
index 0000000..aefb308
Binary files /dev/null and b/public/img/intro/features/google-fonts.png differ
diff --git a/public/img/intro/features/html5.png b/public/img/intro/features/html5.png
new file mode 100644
index 0000000..6513475
Binary files /dev/null and b/public/img/intro/features/html5.png differ
diff --git a/public/img/intro/features/js.png b/public/img/intro/features/js.png
new file mode 100644
index 0000000..5d50b01
Binary files /dev/null and b/public/img/intro/features/js.png differ
diff --git a/public/img/intro/features/npm.png b/public/img/intro/features/npm.png
new file mode 100644
index 0000000..a3ba1fb
Binary files /dev/null and b/public/img/intro/features/npm.png differ
diff --git a/public/img/intro/features/sass.png b/public/img/intro/features/sass.png
new file mode 100644
index 0000000..c25d54a
Binary files /dev/null and b/public/img/intro/features/sass.png differ
diff --git a/public/img/intro/features/touch.png b/public/img/intro/features/touch.png
new file mode 100644
index 0000000..6f2ad51
Binary files /dev/null and b/public/img/intro/features/touch.png differ
diff --git a/public/img/intro/features/vector.png b/public/img/intro/features/vector.png
new file mode 100644
index 0000000..6b2e1d7
Binary files /dev/null and b/public/img/intro/features/vector.png differ
diff --git a/public/img/intro/light-mode.jpg b/public/img/intro/light-mode.jpg
new file mode 100644
index 0000000..f159f9f
Binary files /dev/null and b/public/img/intro/light-mode.jpg differ
diff --git a/public/img/intro/mobile-dark.png b/public/img/intro/mobile-dark.png
new file mode 100644
index 0000000..02b2f27
Binary files /dev/null and b/public/img/intro/mobile-dark.png differ
diff --git a/public/img/intro/mobile-light.png b/public/img/intro/mobile-light.png
new file mode 100644
index 0000000..a7207a7
Binary files /dev/null and b/public/img/intro/mobile-light.png differ
diff --git a/public/img/intro/pages-dark.png b/public/img/intro/pages-dark.png
new file mode 100644
index 0000000..84f1276
Binary files /dev/null and b/public/img/intro/pages-dark.png differ
diff --git a/public/img/intro/pages-light.jpg b/public/img/intro/pages-light.jpg
new file mode 100644
index 0000000..81bccbe
Binary files /dev/null and b/public/img/intro/pages-light.jpg differ
diff --git a/public/img/intro/qr-dark.png b/public/img/intro/qr-dark.png
new file mode 100644
index 0000000..d703f9e
Binary files /dev/null and b/public/img/intro/qr-dark.png differ
diff --git a/public/img/intro/qr-light.png b/public/img/intro/qr-light.png
new file mode 100644
index 0000000..c65f549
Binary files /dev/null and b/public/img/intro/qr-light.png differ
diff --git a/public/img/mega-menu/demo-preview/electronics-dark.jpg b/public/img/mega-menu/demo-preview/electronics-dark.jpg
new file mode 100644
index 0000000..a92fc29
Binary files /dev/null and b/public/img/mega-menu/demo-preview/electronics-dark.jpg differ
diff --git a/public/img/mega-menu/demo-preview/electronics-light.jpg b/public/img/mega-menu/demo-preview/electronics-light.jpg
new file mode 100644
index 0000000..5bc13aa
Binary files /dev/null and b/public/img/mega-menu/demo-preview/electronics-light.jpg differ
diff --git a/public/img/mega-menu/demo-preview/fashion-1-dark.jpg b/public/img/mega-menu/demo-preview/fashion-1-dark.jpg
new file mode 100644
index 0000000..56cd497
Binary files /dev/null and b/public/img/mega-menu/demo-preview/fashion-1-dark.jpg differ
diff --git a/public/img/mega-menu/demo-preview/fashion-1-light.jpg b/public/img/mega-menu/demo-preview/fashion-1-light.jpg
new file mode 100644
index 0000000..e7e49f5
Binary files /dev/null and b/public/img/mega-menu/demo-preview/fashion-1-light.jpg differ
diff --git a/public/img/mega-menu/demo-preview/fashion-2-dark.jpg b/public/img/mega-menu/demo-preview/fashion-2-dark.jpg
new file mode 100644
index 0000000..716ab04
Binary files /dev/null and b/public/img/mega-menu/demo-preview/fashion-2-dark.jpg differ
diff --git a/public/img/mega-menu/demo-preview/fashion-2-light.jpg b/public/img/mega-menu/demo-preview/fashion-2-light.jpg
new file mode 100644
index 0000000..5609167
Binary files /dev/null and b/public/img/mega-menu/demo-preview/fashion-2-light.jpg differ
diff --git a/public/img/mega-menu/demo-preview/furniture-dark.jpg b/public/img/mega-menu/demo-preview/furniture-dark.jpg
new file mode 100644
index 0000000..f1d8dc6
Binary files /dev/null and b/public/img/mega-menu/demo-preview/furniture-dark.jpg differ
diff --git a/public/img/mega-menu/demo-preview/furniture-light.jpg b/public/img/mega-menu/demo-preview/furniture-light.jpg
new file mode 100644
index 0000000..74f3993
Binary files /dev/null and b/public/img/mega-menu/demo-preview/furniture-light.jpg differ
diff --git a/public/img/mega-menu/demo-preview/grocery-dark.jpg b/public/img/mega-menu/demo-preview/grocery-dark.jpg
new file mode 100644
index 0000000..bb48146
Binary files /dev/null and b/public/img/mega-menu/demo-preview/grocery-dark.jpg differ
diff --git a/public/img/mega-menu/demo-preview/grocery-light.jpg b/public/img/mega-menu/demo-preview/grocery-light.jpg
new file mode 100644
index 0000000..62e85a9
Binary files /dev/null and b/public/img/mega-menu/demo-preview/grocery-light.jpg differ
diff --git a/public/img/mega-menu/demo-preview/marketplace-dark.jpg b/public/img/mega-menu/demo-preview/marketplace-dark.jpg
new file mode 100644
index 0000000..650310e
Binary files /dev/null and b/public/img/mega-menu/demo-preview/marketplace-dark.jpg differ
diff --git a/public/img/mega-menu/demo-preview/marketplace-light.jpg b/public/img/mega-menu/demo-preview/marketplace-light.jpg
new file mode 100644
index 0000000..a682afa
Binary files /dev/null and b/public/img/mega-menu/demo-preview/marketplace-light.jpg differ
diff --git a/public/img/mega-menu/demo-preview/single-store-dark.jpg b/public/img/mega-menu/demo-preview/single-store-dark.jpg
new file mode 100644
index 0000000..29b6068
Binary files /dev/null and b/public/img/mega-menu/demo-preview/single-store-dark.jpg differ
diff --git a/public/img/mega-menu/demo-preview/single-store-light.jpg b/public/img/mega-menu/demo-preview/single-store-light.jpg
new file mode 100644
index 0000000..f7664f0
Binary files /dev/null and b/public/img/mega-menu/demo-preview/single-store-light.jpg differ
diff --git a/public/img/mega-menu/electronics/01.png b/public/img/mega-menu/electronics/01.png
new file mode 100644
index 0000000..cd6ba2f
Binary files /dev/null and b/public/img/mega-menu/electronics/01.png differ
diff --git a/public/img/mega-menu/electronics/02.png b/public/img/mega-menu/electronics/02.png
new file mode 100644
index 0000000..0272cec
Binary files /dev/null and b/public/img/mega-menu/electronics/02.png differ
diff --git a/public/img/mega-menu/electronics/03.png b/public/img/mega-menu/electronics/03.png
new file mode 100644
index 0000000..7bdd1ca
Binary files /dev/null and b/public/img/mega-menu/electronics/03.png differ
diff --git a/public/img/mega-menu/electronics/04.png b/public/img/mega-menu/electronics/04.png
new file mode 100644
index 0000000..31c4dac
Binary files /dev/null and b/public/img/mega-menu/electronics/04.png differ
diff --git a/public/img/mega-menu/electronics/05.png b/public/img/mega-menu/electronics/05.png
new file mode 100644
index 0000000..ac93285
Binary files /dev/null and b/public/img/mega-menu/electronics/05.png differ
diff --git a/public/img/mega-menu/electronics/06.png b/public/img/mega-menu/electronics/06.png
new file mode 100644
index 0000000..36d1b33
Binary files /dev/null and b/public/img/mega-menu/electronics/06.png differ
diff --git a/public/img/mega-menu/electronics/07.png b/public/img/mega-menu/electronics/07.png
new file mode 100644
index 0000000..2332f26
Binary files /dev/null and b/public/img/mega-menu/electronics/07.png differ
diff --git a/public/img/mega-menu/electronics/08.png b/public/img/mega-menu/electronics/08.png
new file mode 100644
index 0000000..376f1ca
Binary files /dev/null and b/public/img/mega-menu/electronics/08.png differ
diff --git a/public/img/mega-menu/electronics/09.png b/public/img/mega-menu/electronics/09.png
new file mode 100644
index 0000000..854ea7a
Binary files /dev/null and b/public/img/mega-menu/electronics/09.png differ
diff --git a/public/img/mega-menu/electronics/10.png b/public/img/mega-menu/electronics/10.png
new file mode 100644
index 0000000..508f0ff
Binary files /dev/null and b/public/img/mega-menu/electronics/10.png differ
diff --git a/public/img/mega-menu/electronics/11.png b/public/img/mega-menu/electronics/11.png
new file mode 100644
index 0000000..11b8d29
Binary files /dev/null and b/public/img/mega-menu/electronics/11.png differ
diff --git a/public/img/mega-menu/electronics/12.png b/public/img/mega-menu/electronics/12.png
new file mode 100644
index 0000000..399b3f3
Binary files /dev/null and b/public/img/mega-menu/electronics/12.png differ
diff --git a/public/img/mega-menu/fashion/01.jpg b/public/img/mega-menu/fashion/01.jpg
new file mode 100644
index 0000000..85ed1f8
Binary files /dev/null and b/public/img/mega-menu/fashion/01.jpg differ
diff --git a/public/img/mega-menu/fashion/02.jpg b/public/img/mega-menu/fashion/02.jpg
new file mode 100644
index 0000000..c209474
Binary files /dev/null and b/public/img/mega-menu/fashion/02.jpg differ
diff --git a/public/img/mega-menu/fashion/03.jpg b/public/img/mega-menu/fashion/03.jpg
new file mode 100644
index 0000000..d90d69c
Binary files /dev/null and b/public/img/mega-menu/fashion/03.jpg differ
diff --git a/public/img/mega-menu/grocery/th01.png b/public/img/mega-menu/grocery/th01.png
new file mode 100644
index 0000000..6cb7eeb
Binary files /dev/null and b/public/img/mega-menu/grocery/th01.png differ
diff --git a/public/img/mega-menu/grocery/th02.png b/public/img/mega-menu/grocery/th02.png
new file mode 100644
index 0000000..55b2a36
Binary files /dev/null and b/public/img/mega-menu/grocery/th02.png differ
diff --git a/public/img/mega-menu/grocery/th03.png b/public/img/mega-menu/grocery/th03.png
new file mode 100644
index 0000000..1a430f7
Binary files /dev/null and b/public/img/mega-menu/grocery/th03.png differ
diff --git a/public/img/mega-menu/grocery/th04.png b/public/img/mega-menu/grocery/th04.png
new file mode 100644
index 0000000..e8b86d9
Binary files /dev/null and b/public/img/mega-menu/grocery/th04.png differ
diff --git a/public/img/mega-menu/grocery/th05.png b/public/img/mega-menu/grocery/th05.png
new file mode 100644
index 0000000..b69d4cd
Binary files /dev/null and b/public/img/mega-menu/grocery/th05.png differ
diff --git a/public/img/mega-menu/grocery/th06.png b/public/img/mega-menu/grocery/th06.png
new file mode 100644
index 0000000..fab0469
Binary files /dev/null and b/public/img/mega-menu/grocery/th06.png differ
diff --git a/public/img/payment-methods/amex.svg b/public/img/payment-methods/amex.svg
new file mode 100644
index 0000000..c00ce98
--- /dev/null
+++ b/public/img/payment-methods/amex.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="58" height="40" fill="none" xmlns:v="https://vecta.io/nano"><path fill-rule="evenodd" d="M10.397 14.167L4.971 26.245h6.496l.805-1.926h1.841l.805 1.926h7.151v-1.47l.637 1.47h3.699l.637-1.501v1.501h14.872l1.808-1.876 1.693 1.876 7.638.016-5.444-6.021 5.444-6.073h-7.52l-1.76 1.841-1.64-1.841H25.956l-1.389 3.117-1.422-3.117h-6.483v1.42l-.721-1.42h-5.543zm22.208 1.715h8.54l2.612 2.838 2.696-2.838h2.612l-3.969 4.356 3.969 4.306h-2.73l-2.612-2.871-2.71 2.871h-8.408v-8.662zm2.107 3.377v-1.582-.002h5.329l2.325 2.53-2.428 2.544h-5.226v-1.727h4.659v-1.763h-4.659zm-23.058-3.377h3.167l3.599 8.19v-8.19h3.469l2.78 5.872 2.562-5.872h3.452v8.667h-2.1l-.017-6.791-3.062 6.791h-1.879l-3.079-6.791v6.791h-4.321l-.819-1.943h-4.425l-.817 1.941H7.85l3.805-8.665zm.081 4.928l1.458-3.461 1.456 3.461h-2.914z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/public/img/payment-methods/apple-pay-dark-mode.svg b/public/img/payment-methods/apple-pay-dark-mode.svg
new file mode 100644
index 0000000..287c247
--- /dev/null
+++ b/public/img/payment-methods/apple-pay-dark-mode.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="58" height="40" fill="none" xmlns:v="https://vecta.io/nano"><path fill-rule="evenodd" d="M16.471 16.598c.628.053 1.256-.32 1.649-.793.386-.486.641-1.139.576-1.805-.556.027-1.243.373-1.636.859-.36.42-.667 1.099-.589 1.738zm7.47 8.578V14.793h3.827c1.976 0 3.356 1.385 3.356 3.41s-1.407 3.423-3.408 3.423h-2.192v3.55h-1.583zm-5.253-8.452c-.553-.032-1.058.169-1.466.332-.262.105-.485.194-.654.194-.19 0-.421-.094-.681-.199-.34-.138-.73-.295-1.138-.288-.936.013-1.806.553-2.283 1.412-.981 1.718-.255 4.263.693 5.661.464.693 1.021 1.452 1.753 1.425.322-.012.554-.113.794-.216.276-.119.563-.243 1.011-.243.433 0 .707.121.971.237.25.11.491.216.848.21.759-.013 1.236-.693 1.701-1.385.501-.743.721-1.469.755-1.579l.004-.013c-.186-.087-1.466-.684-1.479-2.284-.012-1.343 1.016-2.024 1.178-2.131l.02-.013c-.654-.986-1.675-1.092-2.028-1.119zm15.328 8.532c.994 0 1.917-.513 2.336-1.325h.033v1.245h1.465v-5.168c0-1.498-1.178-2.464-2.99-2.464-1.681 0-2.924.979-2.97 2.325h1.426c.118-.639.7-1.059 1.498-1.059.968 0 1.511.459 1.511 1.305v.573l-1.976.12c-1.838.113-2.833.879-2.833 2.211 0 1.345 1.027 2.238 2.499 2.238zm.424-1.232c-.844 0-1.38-.413-1.38-1.046 0-.653.517-1.032 1.505-1.092l1.76-.113v.586c0 .972-.811 1.665-1.884 1.665zm8.272 1.559C42.078 27.401 41.352 28 39.808 28c-.118 0-.51-.013-.602-.04v-1.245c.098.013.34.027.464.027.7 0 1.093-.3 1.335-1.079l.144-.459-2.682-7.559h1.655l1.865 6.134h.033l1.864-6.134h1.609l-2.78 7.939zm-17.187-9.431h1.825c1.374 0 2.159.746 2.159 2.058s-.785 2.065-2.165 2.065h-1.819v-4.123z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/public/img/payment-methods/apple-pay-light-mode.svg b/public/img/payment-methods/apple-pay-light-mode.svg
new file mode 100644
index 0000000..c64086b
--- /dev/null
+++ b/public/img/payment-methods/apple-pay-light-mode.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="58" height="40" fill="none" xmlns:v="https://vecta.io/nano"><path fill-rule="evenodd" d="M16.471 15.598c.628.053 1.256-.32 1.649-.793.386-.486.641-1.139.576-1.805-.556.027-1.243.373-1.636.859-.36.42-.667 1.099-.589 1.738zm7.47 8.578V13.793h3.827c1.976 0 3.356 1.385 3.356 3.41s-1.407 3.423-3.408 3.423h-2.192v3.55h-1.583zm-5.253-8.452c-.553-.032-1.058.169-1.466.332-.262.105-.485.194-.654.194-.19 0-.421-.094-.681-.199-.34-.138-.73-.295-1.138-.288-.936.013-1.806.553-2.283 1.412-.981 1.718-.255 4.263.693 5.661.464.693 1.021 1.452 1.753 1.425.322-.012.554-.113.794-.216.276-.119.563-.243 1.011-.243.433 0 .707.121.971.237.25.11.491.216.848.21.759-.013 1.236-.693 1.701-1.385.501-.743.721-1.469.755-1.579l.004-.013c-.186-.087-1.466-.684-1.479-2.284-.012-1.343 1.016-2.024 1.178-2.131l.02-.013c-.654-.986-1.675-1.092-2.028-1.119zm15.328 8.532c.994 0 1.917-.513 2.336-1.325h.033v1.245h1.465v-5.168c0-1.498-1.178-2.464-2.99-2.464-1.681 0-2.924.979-2.97 2.325h1.426c.118-.639.7-1.059 1.498-1.059.968 0 1.511.459 1.511 1.305v.573l-1.976.12c-1.838.113-2.833.879-2.833 2.211 0 1.345 1.027 2.238 2.499 2.238zm.424-1.232c-.844 0-1.38-.413-1.38-1.046 0-.653.517-1.032 1.505-1.092l1.76-.113v.586c0 .972-.811 1.665-1.884 1.665zm8.272 1.559C42.078 26.401 41.352 27 39.808 27c-.118 0-.51-.013-.602-.04v-1.245c.098.013.34.027.464.027.7 0 1.093-.3 1.335-1.079l.144-.459-2.682-7.559h1.655l1.865 6.134h.033l1.864-6.134h1.609l-2.78 7.939zm-17.187-9.431h1.825c1.374 0 2.159.746 2.159 2.058s-.785 2.065-2.165 2.065h-1.819v-4.123z" fill="#181d25"/></svg>
\ No newline at end of file
diff --git a/public/img/payment-methods/google-icon.svg b/public/img/payment-methods/google-icon.svg
new file mode 100644
index 0000000..ce28acd
--- /dev/null
+++ b/public/img/payment-methods/google-icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21" height="17" fill="none" xmlns:v="https://vecta.io/nano"><path d="M16.164 8.552c0-.569-.046-1.139-.137-1.696H8.25v3.218h4.455c-.183 1.034-.779 1.964-1.649 2.544v2.091h2.657c1.557-1.452 2.451-3.602 2.451-6.158z" fill="#4285f4"/><path d="M8.247 16.732c2.222 0 4.1-.744 5.463-2.022l-2.657-2.091c-.744.511-1.695.802-2.806.802-2.153 0-3.974-1.476-4.627-3.451H.883v2.161c1.397 2.823 4.249 4.601 7.364 4.601z" fill="#34a853"/><path d="M3.622 9.969c-.344-1.034-.344-2.161 0-3.207V4.613H.885a8.4 8.4 0 0 0 0 7.506l2.738-2.149z" fill="#fbbc04"/><path d="M8.247 3.312c1.18-.023 2.313.43 3.161 1.255l2.359-2.393c-1.5-1.418-3.47-2.196-5.52-2.173C5.132.001 2.281 1.79.883 4.613L3.62 6.774c.653-1.987 2.474-3.462 4.627-3.462z" fill="#ea4335"/></svg>
\ No newline at end of file
diff --git a/public/img/payment-methods/google-pay-dark-mode.svg b/public/img/payment-methods/google-pay-dark-mode.svg
new file mode 100644
index 0000000..eaadf4b
--- /dev/null
+++ b/public/img/payment-methods/google-pay-dark-mode.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="58" height="40" fill="none" xmlns:v="https://vecta.io/nano"><path fill-rule="evenodd" d="M27.88 24.856v-4.448h2.283c.935 0 1.725-.315 2.368-.937l.154-.158c1.176-1.287 1.098-3.292-.154-4.483a3.25 3.25 0 0 0-2.368-.954h-3.664v10.98h1.382zm.001-5.796v-3.835h2.317c.498 0 .97.193 1.322.543a1.96 1.96 0 0 1 .043 2.723 1.79 1.79 0 0 1-1.365.569h-2.317zm11.249-1.13c-.592-.552-1.399-.832-2.42-.832-1.313 0-2.3.49-2.952 1.462l1.218.779c.446-.666 1.056-.998 1.828-.998.489 0 .961.184 1.33.517a1.66 1.66 0 0 1 .566 1.252v.324c-.532-.298-1.201-.455-2.025-.455-.961 0-1.733.228-2.308.692s-.867 1.077-.867 1.856c-.017.709.283 1.383.815 1.839.541.49 1.227.735 2.034.735.953 0 1.708-.429 2.283-1.287h.06v1.042h1.322v-4.632c0-.972-.292-1.742-.884-2.294zm-3.749 5.543c-.283-.21-.455-.552-.455-.919 0-.412.189-.753.558-1.024.378-.271.85-.412 1.408-.412.772-.009 1.373.166 1.802.517 0 .595-.232 1.112-.687 1.55-.412.42-.97.657-1.553.657-.386.009-.764-.122-1.073-.368zm7.601 4.684l4.617-10.814h-1.502l-2.137 5.394h-.026l-2.188-5.394h-1.502l3.029 7.031-1.716 3.782h1.424z" fill="#fff"/><path d="M23.109 19.445a7.95 7.95 0 0 0-.103-1.278H17.18v2.425h3.338c-.137.779-.584 1.48-1.236 1.918v1.576h1.991c1.167-1.094 1.836-2.714 1.836-4.641z" fill="#4285f4"/><path d="M17.18 25.609c1.665 0 3.072-.56 4.093-1.524l-1.991-1.576c-.558.385-1.27.604-2.102.604-1.613 0-2.978-1.112-3.467-2.601h-2.051v1.629c1.047 2.128 3.184 3.467 5.518 3.467z" fill="#34a853"/><path d="M13.714 20.513c-.258-.779-.258-1.629 0-2.417v-1.62h-2.051c-.884 1.777-.884 3.879 0 5.656l2.051-1.62z" fill="#fbbc04"/><path d="M17.18 15.496a3.29 3.29 0 0 1 2.368.946l1.768-1.804c-1.124-1.068-2.6-1.655-4.136-1.637-2.334 0-4.471 1.348-5.518 3.476l2.051 1.629c.489-1.497 1.854-2.609 3.467-2.609z" fill="#ea4335"/></svg>
\ No newline at end of file
diff --git a/public/img/payment-methods/google-pay-light-mode.svg b/public/img/payment-methods/google-pay-light-mode.svg
new file mode 100644
index 0000000..f425006
--- /dev/null
+++ b/public/img/payment-methods/google-pay-light-mode.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="58" height="40" fill="none" xmlns:v="https://vecta.io/nano"><path fill-rule="evenodd" d="M27.88 23.856v-4.448h2.283c.935 0 1.725-.315 2.368-.937l.154-.158c1.176-1.287 1.098-3.292-.154-4.483a3.25 3.25 0 0 0-2.368-.954h-3.664v10.98h1.382zm.001-5.796v-3.835h2.317c.498 0 .97.193 1.322.543a1.96 1.96 0 0 1 .043 2.723 1.79 1.79 0 0 1-1.365.569h-2.317zm11.249-1.13c-.592-.552-1.399-.832-2.42-.832-1.313 0-2.3.49-2.952 1.462l1.218.779c.446-.666 1.056-.998 1.828-.998.489 0 .961.184 1.33.517a1.66 1.66 0 0 1 .566 1.252v.324c-.532-.298-1.201-.455-2.025-.455-.961 0-1.733.228-2.308.692s-.867 1.077-.867 1.856c-.017.709.283 1.383.815 1.839.541.49 1.227.735 2.034.735.953 0 1.708-.429 2.283-1.287h.06v1.042h1.321v-4.632c0-.972-.292-1.742-.884-2.294zm-3.749 5.543c-.283-.21-.455-.552-.455-.919 0-.412.189-.753.558-1.024.378-.271.85-.412 1.408-.412.772-.009 1.373.166 1.802.517 0 .595-.232 1.112-.687 1.55-.412.42-.97.657-1.553.657-.386.009-.764-.122-1.073-.368zm7.601 4.684l4.617-10.814h-1.502l-2.137 5.394h-.026l-2.188-5.394h-1.502l3.029 7.031-1.716 3.782h1.424z" fill="#181d25"/><path d="M23.109 18.445a7.95 7.95 0 0 0-.103-1.278H17.18v2.425h3.338c-.137.779-.584 1.48-1.236 1.918v1.576h1.991c1.167-1.094 1.836-2.714 1.836-4.641z" fill="#4285f4"/><path d="M17.18 24.609c1.665 0 3.072-.56 4.093-1.524l-1.991-1.576c-.558.385-1.27.604-2.102.604-1.613 0-2.978-1.112-3.467-2.601h-2.051v1.629c1.047 2.128 3.184 3.467 5.518 3.467z" fill="#34a853"/><path d="M13.714 19.513c-.258-.779-.258-1.629 0-2.417v-1.62h-2.051c-.884 1.778-.884 3.879 0 5.656l2.051-1.62z" fill="#fbbc04"/><path d="M17.18 14.496a3.29 3.29 0 0 1 2.368.946l1.768-1.804c-1.124-1.068-2.6-1.655-4.136-1.637-2.334 0-4.471 1.348-5.518 3.476l2.051 1.629c.489-1.497 1.854-2.609 3.467-2.609z" fill="#ea4335"/></svg>
\ No newline at end of file
diff --git a/public/img/payment-methods/maestro.svg b/public/img/payment-methods/maestro.svg
new file mode 100644
index 0000000..e1c979e
--- /dev/null
+++ b/public/img/payment-methods/maestro.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="58" height="40" fill="none" xmlns:v="https://vecta.io/nano"><path d="M32.946 20.147c0 5.604-4.465 10.147-9.973 10.147S13 25.751 13 20.147 17.465 10 22.973 10s9.973 4.543 9.973 10.147z" fill="#ed0006"/><path d="M45.883 20.147c0 5.604-4.465 10.147-9.973 10.147s-9.973-4.543-9.973-10.147S30.403 10 35.91 10s9.973 4.543 9.973 10.147z" fill="#0099df"/><path fill-rule="evenodd" d="M29.441 27.869c2.144-1.861 3.504-4.63 3.504-7.723s-1.36-5.862-3.504-7.723c-2.144 1.861-3.504 4.63-3.504 7.723s1.36 5.862 3.504 7.723z" fill="#6c6bbd"/></svg>
\ No newline at end of file
diff --git a/public/img/payment-methods/mastercard.svg b/public/img/payment-methods/mastercard.svg
new file mode 100644
index 0000000..a3e3d4d
--- /dev/null
+++ b/public/img/payment-methods/mastercard.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="58" height="40" fill="none" fill-rule="evenodd" xmlns:v="https://vecta.io/nano"><path d="M28.934 27.318a9.53 9.53 0 0 1-6.269 2.349c-5.338 0-9.665-4.402-9.665-9.833S17.327 10 22.665 10a9.53 9.53 0 0 1 6.269 2.349A9.53 9.53 0 0 1 35.203 10c5.338 0 9.665 4.403 9.665 9.833s-4.327 9.833-9.665 9.833a9.53 9.53 0 0 1-6.269-2.349z" fill="#ed0006"/><path d="M28.936 27.318c2.078-1.804 3.396-4.487 3.396-7.484s-1.318-5.681-3.396-7.484A9.53 9.53 0 0 1 35.205 10c5.338 0 9.665 4.403 9.665 9.833s-4.327 9.833-9.665 9.833a9.53 9.53 0 0 1-6.269-2.349z" fill="#f9a000"/><path d="M28.935 27.318c2.078-1.804 3.396-4.487 3.396-7.484s-1.318-5.681-3.396-7.485c-2.078 1.804-3.396 4.488-3.396 7.485s1.318 5.681 3.396 7.484z" fill="#ff5e00"/></svg>
\ No newline at end of file
diff --git a/public/img/payment-methods/paypal-dark-mode.svg b/public/img/payment-methods/paypal-dark-mode.svg
new file mode 100644
index 0000000..596cd82
--- /dev/null
+++ b/public/img/payment-methods/paypal-dark-mode.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="58" height="40" fill="none" fill-rule="evenodd" xmlns:v="https://vecta.io/nano"><path d="M12.925 14H9.733c-.218 0-.404.16-.438.376L8.003 22.61c-.026.163.099.309.263.309h1.524c.218 0 .404-.16.438-.377l.348-2.221c.034-.217.22-.377.438-.377h1.011c2.103 0 3.316-1.024 3.634-3.052.143-.887.006-1.585-.407-2.073-.454-.536-1.258-.82-2.327-.82zm.368 3.007c-.175 1.152-1.05 1.152-1.896 1.152h-.482l.338-2.152c.02-.13.132-.226.263-.226h.221c.577 0 1.12 0 1.401.33.167.197.219.49.155.895zm9.175-.037h-1.529c-.13 0-.243.096-.263.226l-.068.43-.107-.156c-.331-.483-1.069-.645-1.805-.645-1.689 0-3.132 1.287-3.413 3.092-.146.9.062 1.761.57 2.362.466.552 1.133.782 1.926.782 1.361 0 2.116-.88 2.116-.88l-.068.427c-.026.163.099.31.262.31h1.377c.219 0 .404-.16.438-.377l.826-5.263c.026-.162-.099-.309-.262-.309zm-2.131 2.993c-.148.878-.841 1.468-1.725 1.468-.444 0-.799-.143-1.027-.415s-.312-.653-.24-1.08c.138-.871.843-1.48 1.713-1.48.434 0 .787.145 1.019.419s.325.663.259 1.088zm8.737-2.993h1.536c.215 0 .341.243.218.42l-5.11 7.418c-.083.12-.219.192-.365.192H23.82c-.216 0-.342-.245-.217-.422l1.591-2.259-1.692-4.994c-.059-.174.069-.354.253-.354h1.509c.196 0 .369.13.426.318l.898 3.016 2.119-3.139c.083-.122.221-.196.367-.196z" fill="#fff"/><path d="M45.729 22.61l1.31-8.384c.02-.13.132-.226.262-.226h1.475c.163 0 .288.147.262.309l-1.292 8.233c-.034.217-.219.377-.438.377h-1.317c-.163 0-.288-.146-.262-.309zM35.695 14h-3.193c-.218 0-.404.16-.438.376l-1.291 8.233c-.026.163.099.309.262.309h1.638a.31.31 0 0 0 .306-.264l.366-2.334c.034-.218.22-.377.438-.377h1.01c2.103 0 3.317-1.024 3.634-3.052.143-.887.006-1.585-.407-2.073-.453-.536-1.258-.82-2.326-.82zm.368 3.007c-.174 1.152-1.049 1.152-1.896 1.152h-.481l.339-2.152c.02-.13.131-.226.262-.226h.221c.576 0 1.12 0 1.401.331.168.197.219.49.155.895zm9.174-.037h-1.528c-.131 0-.243.096-.262.226l-.068.43-.107-.156c-.331-.483-1.068-.645-1.805-.645-1.69 0-3.132 1.287-3.413 3.092-.146.9.061 1.761.569 2.362.467.552 1.133.782 1.926.782 1.361 0 2.116-.88 2.116-.88l-.068.427c-.026.163.099.31.263.31h1.377c.218 0 .404-.16.438-.377l.827-5.263c.025-.162-.1-.309-.264-.309zm-2.131 2.993c-.147.878-.841 1.468-1.725 1.468-.443 0-.799-.143-1.026-.415s-.311-.653-.24-1.08c.139-.871.843-1.48 1.713-1.48.434 0 .787.145 1.02.419s.326.662.259 1.088z" fill="#179bd7"/></svg>
\ No newline at end of file
diff --git a/public/img/payment-methods/paypal-icon.svg b/public/img/payment-methods/paypal-icon.svg
new file mode 100644
index 0000000..6df2707
--- /dev/null
+++ b/public/img/payment-methods/paypal-icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="19" fill="none" xmlns:v="https://vecta.io/nano"><path d="M4.544 18.238l.327-2.078-.729-.017H.663L3.081.808c.007-.047.031-.09.067-.12S3.23.64 3.277.641h5.868c1.948 0 3.292.405 3.994 1.205.329.375.539.768.64 1.199.106.453.108.994.004 1.654l-.008.048v.423l.329.186a2.31 2.31 0 0 1 .666.508c.282.321.463.729.54 1.212.079.497.053 1.089-.077 1.759-.15.771-.393 1.442-.721 1.991-.289.492-.678.918-1.142 1.251-.435.309-.953.544-1.538.694-.567.148-1.213.222-1.922.222h-.457c-.327 0-.644.118-.893.328s-.414.508-.465.831l-.034.187-.578 3.663-.026.134c-.007.043-.019.064-.036.078s-.038.022-.06.022H4.544z" fill="#253b80"/><path d="M14.418 4.796l-.06.344c-.774 3.973-3.421 5.345-6.802 5.345H5.834c-.413 0-.762.3-.826.708l-.881 5.59-.25 1.585a.44.44 0 0 0 .1.355.44.44 0 0 0 .335.154h3.053c.362 0 .669-.263.726-.619l.03-.155.575-3.648.037-.2c.056-.358.364-.62.726-.62h.457c2.958 0 5.274-1.201 5.951-4.677.283-1.452.136-2.664-.612-3.517a2.92 2.92 0 0 0-.836-.644z" fill="#179bd7"/><path d="M13.607 4.473c-.247-.071-.498-.127-.753-.167a9.56 9.56 0 0 0-1.518-.111H6.738c-.175 0-.344.062-.477.176s-.221.271-.248.444l-.978 6.197-.028.181c.03-.197.131-.377.282-.507s.345-.201.544-.201h1.722c3.381 0 6.029-1.373 6.802-5.345l.06-.344c-.204-.107-.417-.197-.636-.268l-.173-.054z" fill="#222d65"/><path d="M6.014 4.816a.73.73 0 0 1 .725-.62h4.599a9.56 9.56 0 0 1 1.518.111c.314.049.624.123.926.221a4.19 4.19 0 0 1 .636.268c.23-1.468-.002-2.468-.796-3.373C12.748.427 11.168 0 9.147 0H3.279a.84.84 0 0 0-.829.709L.006 16.201c-.011.072-.007.145.013.216s.054.135.102.191.106.1.172.13.138.046.211.047h3.623l.91-5.771.978-6.197z" fill="#253b80"/></svg>
\ No newline at end of file
diff --git a/public/img/payment-methods/paypal-light-mode.svg b/public/img/payment-methods/paypal-light-mode.svg
new file mode 100644
index 0000000..8164bde
--- /dev/null
+++ b/public/img/payment-methods/paypal-light-mode.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="58" height="40" fill="none" fill-rule="evenodd" xmlns:v="https://vecta.io/nano"><path d="M12.925 14H9.733c-.218 0-.404.16-.438.376L8.003 22.61c-.026.163.099.309.263.309h1.524c.218 0 .404-.16.438-.377l.348-2.221c.034-.217.22-.377.438-.377h1.011c2.103 0 3.316-1.024 3.634-3.052.143-.887.006-1.585-.407-2.073-.454-.536-1.258-.82-2.327-.82zm.368 3.007c-.175 1.152-1.05 1.152-1.896 1.152h-.482l.338-2.152c.02-.13.132-.226.263-.226h.221c.577 0 1.12 0 1.401.33.167.197.219.49.155.895zm9.175-.037h-1.529c-.13 0-.243.096-.263.226l-.068.43-.107-.156c-.331-.483-1.069-.645-1.805-.645-1.689 0-3.132 1.287-3.413 3.092-.146.9.062 1.761.57 2.362.466.552 1.133.782 1.926.782 1.361 0 2.116-.88 2.116-.88l-.068.427c-.026.163.099.31.262.31h1.377c.219 0 .404-.16.438-.377l.826-5.263c.026-.162-.099-.309-.262-.309zm-2.131 2.993c-.148.878-.841 1.468-1.725 1.468-.444 0-.799-.143-1.027-.415s-.312-.653-.24-1.08c.138-.871.843-1.48 1.713-1.48.434 0 .787.145 1.019.419s.325.663.259 1.088zm8.737-2.993h1.536c.215 0 .341.243.218.42l-5.11 7.418c-.083.12-.219.192-.365.192H23.82c-.216 0-.342-.245-.217-.422l1.591-2.259-1.692-4.994c-.059-.174.069-.354.253-.354h1.509c.196 0 .369.13.426.318l.898 3.016 2.119-3.139c.083-.122.221-.196.367-.196z" fill="#253b80"/><path d="M45.729 22.61l1.31-8.384c.02-.13.132-.226.262-.226h1.475c.163 0 .288.147.262.309l-1.292 8.233c-.034.217-.219.377-.438.377h-1.317c-.163 0-.288-.146-.262-.309zM35.695 14h-3.193c-.218 0-.404.16-.438.376l-1.291 8.233c-.026.163.099.309.262.309h1.638a.31.31 0 0 0 .306-.264l.366-2.334c.034-.218.22-.377.438-.377h1.01c2.103 0 3.317-1.024 3.634-3.052.143-.887.006-1.585-.407-2.073-.453-.536-1.258-.82-2.326-.82zm.368 3.007c-.174 1.152-1.049 1.152-1.896 1.152h-.481l.339-2.152c.02-.13.131-.226.262-.226h.221c.576 0 1.12 0 1.401.331.168.197.219.49.155.895zm9.174-.037h-1.528c-.131 0-.243.096-.262.226l-.068.43-.107-.156c-.331-.483-1.068-.645-1.805-.645-1.69 0-3.132 1.287-3.413 3.092-.146.9.061 1.761.569 2.362.467.552 1.133.782 1.926.782 1.361 0 2.116-.88 2.116-.88l-.068.427c-.026.163.099.31.263.31h1.377c.218 0 .404-.16.438-.377l.827-5.263c.025-.162-.1-.309-.264-.309zm-2.131 2.993c-.147.878-.841 1.468-1.725 1.468-.443 0-.799-.143-1.026-.415s-.311-.653-.24-1.08c.139-.871.843-1.48 1.713-1.48.434 0 .787.145 1.02.419s.326.662.259 1.088z" fill="#179bd7"/></svg>
\ No newline at end of file
diff --git a/public/img/payment-methods/visa-dark-mode.svg b/public/img/payment-methods/visa-dark-mode.svg
new file mode 100644
index 0000000..2d77187
--- /dev/null
+++ b/public/img/payment-methods/visa-dark-mode.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="58" height="40" fill="none" xmlns:v="https://vecta.io/nano"><path fill-rule="evenodd" d="M20.438 25.749h-2.921l-2.19-8.404c-.104-.387-.325-.728-.649-.889-.81-.405-1.703-.727-2.677-.889v-.324h4.705a1.23 1.23 0 0 1 1.218 1.051l1.136 6.062 2.919-7.113h2.84l-4.381 10.507zm6.004 0h-2.759l2.272-10.507h2.758l-2.271 10.507zm5.84-7.596c.081-.566.568-.889 1.136-.889.893-.081 1.866.081 2.677.485l.487-2.262A6.95 6.95 0 0 0 34.068 15c-2.677 0-4.626 1.455-4.626 3.475 0 1.537 1.38 2.343 2.354 2.829 1.054.485 1.46.808 1.379 1.293 0 .727-.812 1.05-1.622 1.05-.974 0-1.948-.242-2.84-.647l-.487 2.264c.974.403 2.028.566 3.002.566 3.002.08 4.868-1.374 4.868-3.556 0-2.748-3.814-2.909-3.814-4.121zm13.468 7.596l-2.19-10.507h-2.353c-.487 0-.974.324-1.136.808l-4.056 9.699h2.84l.567-1.535h3.489l.325 1.535h2.515zm-4.137-7.677l.81 3.96h-2.271l1.461-3.96z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/public/img/payment-methods/visa-light-mode.svg b/public/img/payment-methods/visa-light-mode.svg
new file mode 100644
index 0000000..e959b9a
--- /dev/null
+++ b/public/img/payment-methods/visa-light-mode.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="58" height="40" fill="none" xmlns:v="https://vecta.io/nano"><path fill-rule="evenodd" d="M20.438 25.749h-2.921l-2.19-8.404c-.104-.387-.325-.728-.649-.889-.81-.405-1.703-.727-2.677-.89v-.323h4.705a1.23 1.23 0 0 1 1.218 1.05l1.136 6.062 2.919-7.113h2.84l-4.381 10.507zm6.004 0h-2.759l2.271-10.507h2.759l-2.271 10.507zm5.841-7.596c.081-.566.568-.889 1.136-.889.893-.081 1.866.081 2.677.485l.487-2.262A6.95 6.95 0 0 0 34.069 15c-2.677 0-4.626 1.455-4.626 3.475 0 1.537 1.38 2.343 2.354 2.829 1.054.485 1.46.808 1.379 1.293 0 .727-.812 1.05-1.622 1.05-.974 0-1.948-.242-2.84-.647l-.487 2.264c.974.403 2.028.566 3.002.566 3.002.08 4.868-1.374 4.868-3.556 0-2.748-3.814-2.909-3.814-4.121zm13.468 7.596l-2.19-10.507h-2.353c-.487 0-.974.323-1.136.808l-4.056 9.699h2.84l.567-1.535h3.489l.325 1.535h2.515zm-4.138-7.677l.81 3.96h-2.271l1.461-3.96z" fill="#172b85"/></svg>
\ No newline at end of file
diff --git a/public/img/shop/electronics/01.png b/public/img/shop/electronics/01.png
new file mode 100644
index 0000000..6600bd8
Binary files /dev/null and b/public/img/shop/electronics/01.png differ
diff --git a/public/img/shop/electronics/02.png b/public/img/shop/electronics/02.png
new file mode 100644
index 0000000..9a95c35
Binary files /dev/null and b/public/img/shop/electronics/02.png differ
diff --git a/public/img/shop/electronics/03.png b/public/img/shop/electronics/03.png
new file mode 100644
index 0000000..4975859
Binary files /dev/null and b/public/img/shop/electronics/03.png differ
diff --git a/public/img/shop/electronics/04.png b/public/img/shop/electronics/04.png
new file mode 100644
index 0000000..a96bc6b
Binary files /dev/null and b/public/img/shop/electronics/04.png differ
diff --git a/public/img/shop/electronics/05.png b/public/img/shop/electronics/05.png
new file mode 100644
index 0000000..a29fb32
Binary files /dev/null and b/public/img/shop/electronics/05.png differ
diff --git a/public/img/shop/electronics/06.png b/public/img/shop/electronics/06.png
new file mode 100644
index 0000000..fe7c480
Binary files /dev/null and b/public/img/shop/electronics/06.png differ
diff --git a/public/img/shop/electronics/07.png b/public/img/shop/electronics/07.png
new file mode 100644
index 0000000..5d467b7
Binary files /dev/null and b/public/img/shop/electronics/07.png differ
diff --git a/public/img/shop/electronics/08.png b/public/img/shop/electronics/08.png
new file mode 100644
index 0000000..de08838
Binary files /dev/null and b/public/img/shop/electronics/08.png differ
diff --git a/public/img/shop/electronics/09.png b/public/img/shop/electronics/09.png
new file mode 100644
index 0000000..583cc36
Binary files /dev/null and b/public/img/shop/electronics/09.png differ
diff --git a/public/img/shop/electronics/10.png b/public/img/shop/electronics/10.png
new file mode 100644
index 0000000..dc10578
Binary files /dev/null and b/public/img/shop/electronics/10.png differ
diff --git a/public/img/shop/electronics/11.png b/public/img/shop/electronics/11.png
new file mode 100644
index 0000000..0bfc662
Binary files /dev/null and b/public/img/shop/electronics/11.png differ
diff --git a/public/img/shop/electronics/12.png b/public/img/shop/electronics/12.png
new file mode 100644
index 0000000..fe127e5
Binary files /dev/null and b/public/img/shop/electronics/12.png differ
diff --git a/public/img/shop/electronics/13.png b/public/img/shop/electronics/13.png
new file mode 100644
index 0000000..381081f
Binary files /dev/null and b/public/img/shop/electronics/13.png differ
diff --git a/public/img/shop/electronics/14.png b/public/img/shop/electronics/14.png
new file mode 100644
index 0000000..652a9e0
Binary files /dev/null and b/public/img/shop/electronics/14.png differ
diff --git a/public/img/shop/electronics/15.png b/public/img/shop/electronics/15.png
new file mode 100644
index 0000000..af37c13
Binary files /dev/null and b/public/img/shop/electronics/15.png differ
diff --git a/public/img/shop/electronics/banners/background.jpg b/public/img/shop/electronics/banners/background.jpg
new file mode 100644
index 0000000..4917f81
Binary files /dev/null and b/public/img/shop/electronics/banners/background.jpg differ
diff --git a/public/img/shop/electronics/banners/ipad.png b/public/img/shop/electronics/banners/ipad.png
new file mode 100644
index 0000000..c4e056d
Binary files /dev/null and b/public/img/shop/electronics/banners/ipad.png differ
diff --git a/public/img/shop/electronics/banners/iphone-1.png b/public/img/shop/electronics/banners/iphone-1.png
new file mode 100644
index 0000000..901f88f
Binary files /dev/null and b/public/img/shop/electronics/banners/iphone-1.png differ
diff --git a/public/img/shop/electronics/banners/iphone-2.png b/public/img/shop/electronics/banners/iphone-2.png
new file mode 100644
index 0000000..7fa7cae
Binary files /dev/null and b/public/img/shop/electronics/banners/iphone-2.png differ
diff --git a/public/img/shop/electronics/banners/laptop.png b/public/img/shop/electronics/banners/laptop.png
new file mode 100644
index 0000000..d5c5c08
Binary files /dev/null and b/public/img/shop/electronics/banners/laptop.png differ
diff --git a/public/img/shop/electronics/brands/apple-dark-mode.svg b/public/img/shop/electronics/brands/apple-dark-mode.svg
new file mode 100644
index 0000000..d5f4645
--- /dev/null
+++ b/public/img/shop/electronics/brands/apple-dark-mode.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="164" height="80" fill="#9ca3af"><path d="M54.191 37.598c-.043-4.429 3.678-6.557 3.845-6.658-2.094-3.01-5.347-3.424-6.506-3.47-2.768-.279-5.403 1.604-6.81 1.604s-3.575-1.566-5.871-1.52c-3.021.042-5.806 1.727-7.364 4.387-3.133 5.345-.798 13.282 2.262 17.627 1.498 2.124 3.274 4.517 5.617 4.429 2.257-.089 3.107-1.435 5.828-1.435s3.489 1.435 5.871 1.393c2.425-.046 3.961-2.17 5.446-4.302 1.708-2.47 2.416-4.855 2.459-4.982-.056-.021-4.725-1.782-4.776-7.072zM49.715 24.59c1.244-1.482 2.081-3.538 1.854-5.59-1.789.072-3.957 1.174-5.24 2.656-1.15 1.309-2.158 3.403-1.884 5.413 1.987.152 4.029-1.001 5.27-2.478zm20.169 17.361l-2.06 6.143h-2.648l6.742-19.522h3.09l6.767 19.522h-2.738l-2.12-6.143h-7.034zm6.506-1.972l-1.94-5.619c-.442-1.275-.734-2.432-1.03-3.563h-.056l-1 3.534-1.94 5.645 5.965.004zm7.394-1.33l-.12-4.577h2.326l.12 2.407h.056c1.06-1.71 2.738-2.723 5.064-2.723 3.446 0 6.034 2.867 6.034 7.127 0 5.041-3.12 7.528-6.476 7.528-1.884 0-3.532-.811-4.386-2.2h-.056v7.616h-2.562V38.649zm2.558 3.736a5.23 5.23 0 0 0 .12 1.043 3.99 3.99 0 0 0 3.888 2.985c2.738 0 4.33-2.2 4.33-5.417 0-2.812-1.502-5.21-4.24-5.21-1.764 0-3.412 1.245-3.918 3.158-.09.317-.176.697-.176 1.043l-.004 2.398zm13.599-3.736l-.12-4.577h2.326l.12 2.407h.055c1.06-1.71 2.738-2.723 5.064-2.723 3.446 0 6.034 2.867 6.034 7.127 0 5.041-3.12 7.528-6.476 7.528-1.884 0-3.532-.811-4.386-2.2h-.055v7.616h-2.562V38.649zm2.562 3.736c0 .38.055.722.12 1.043a3.99 3.99 0 0 0 3.888 2.985c2.738 0 4.33-2.2 4.33-5.417 0-2.812-1.502-5.21-4.24-5.21-1.764 0-3.412 1.245-3.918 3.158-.09.317-.176.697-.176 1.043l-.004 2.398zm13.599-14.857h2.592v20.561h-2.592V27.528zm7.801 14.017c.056 3.445 2.296 4.868 4.884 4.868 1.854 0 2.974-.317 3.944-.722l.442 1.824c-.91.405-2.472.87-4.738.87-4.386 0-7.008-2.837-7.008-7.068s2.532-7.562 6.682-7.562c4.652 0 5.888 4.024 5.888 6.603 0 .523-.056.925-.09 1.186h-10.004zm7.596-1.824c.03-1.621-.678-4.142-3.592-4.142-2.622 0-3.767 2.377-3.973 4.142h7.565z"/></svg>
\ No newline at end of file
diff --git a/public/img/shop/electronics/brands/apple-light-mode.svg b/public/img/shop/electronics/brands/apple-light-mode.svg
new file mode 100644
index 0000000..95e6e07
--- /dev/null
+++ b/public/img/shop/electronics/brands/apple-light-mode.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="164" height="80" fill="#6c727f"><path d="M54.191 37.598c-.043-4.429 3.678-6.557 3.845-6.658-2.094-3.01-5.347-3.424-6.506-3.47-2.768-.279-5.403 1.604-6.81 1.604s-3.575-1.566-5.871-1.52c-3.021.042-5.806 1.727-7.364 4.387-3.133 5.345-.798 13.282 2.262 17.627 1.498 2.124 3.274 4.517 5.617 4.429 2.257-.089 3.107-1.435 5.828-1.435s3.489 1.435 5.871 1.393c2.425-.046 3.961-2.17 5.446-4.302 1.708-2.47 2.416-4.855 2.459-4.982-.056-.021-4.725-1.782-4.776-7.072zM49.715 24.59c1.244-1.482 2.081-3.538 1.854-5.59-1.789.072-3.957 1.174-5.24 2.656-1.15 1.309-2.158 3.403-1.884 5.413 1.987.152 4.029-1.001 5.27-2.478zm20.169 17.361l-2.06 6.143h-2.648l6.742-19.522h3.09l6.767 19.522h-2.738l-2.12-6.143h-7.034zm6.506-1.972l-1.94-5.619c-.442-1.275-.734-2.432-1.03-3.563h-.056l-1 3.534-1.94 5.645 5.965.004zm7.394-1.33l-.12-4.577h2.326l.12 2.407h.056c1.06-1.71 2.738-2.723 5.064-2.723 3.446 0 6.034 2.867 6.034 7.127 0 5.041-3.12 7.528-6.476 7.528-1.884 0-3.532-.811-4.386-2.2h-.056v7.616h-2.562V38.649zm2.558 3.736a5.23 5.23 0 0 0 .12 1.043 3.99 3.99 0 0 0 3.888 2.985c2.738 0 4.33-2.2 4.33-5.417 0-2.812-1.502-5.21-4.24-5.21-1.764 0-3.412 1.245-3.918 3.158-.09.317-.176.697-.176 1.043l-.004 2.398zm13.599-3.736l-.12-4.577h2.326l.12 2.407h.055c1.06-1.71 2.738-2.723 5.064-2.723 3.446 0 6.034 2.867 6.034 7.127 0 5.041-3.12 7.528-6.476 7.528-1.884 0-3.532-.811-4.386-2.2h-.055v7.616h-2.562V38.649zm2.562 3.736c0 .38.055.722.12 1.043a3.99 3.99 0 0 0 3.888 2.985c2.738 0 4.33-2.2 4.33-5.417 0-2.812-1.502-5.21-4.24-5.21-1.764 0-3.412 1.245-3.918 3.158-.09.317-.176.697-.176 1.043l-.004 2.398zm13.599-14.857h2.592v20.561h-2.592V27.528zm7.801 14.017c.056 3.445 2.296 4.868 4.884 4.868 1.854 0 2.974-.317 3.944-.722l.442 1.824c-.91.405-2.472.87-4.738.87-4.386 0-7.008-2.837-7.008-7.068s2.532-7.562 6.682-7.562c4.652 0 5.888 4.024 5.888 6.603 0 .523-.056.925-.09 1.186h-10.004zm7.596-1.824c.03-1.621-.678-4.142-3.592-4.142-2.622 0-3.767 2.377-3.973 4.142h7.565z"/></svg>
\ No newline at end of file
diff --git a/public/img/shop/electronics/brands/canon-dark-mode.svg b/public/img/shop/electronics/brands/canon-dark-mode.svg
new file mode 100644
index 0000000..5c12c8b
--- /dev/null
+++ b/public/img/shop/electronics/brands/canon-dark-mode.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="164" height="80" fill="#9ca3af"><path d="M49.674 48.35c-4.463 0-8.081-3.738-8.081-8.35s3.617-8.346 8.081-8.346a7.85 7.85 0 0 1 4.283 1.267l-4.283 7.08 8.063-4.809c-.876-1.442-2.132-2.684-3.652-3.627-1.933-1.196-4.622-1.936-7.596-1.936-4.242 0-7.963 1.592-10.038 3.977C34.915 35.369 34 37.587 34 40.001s.915 4.635 2.451 6.399c2.081 2.387 5.747 3.97 9.918 3.97s7.836-1.584 9.918-3.97a7.91 7.91 0 0 0 .329-.402l-.314-1.217c-1.463 2.157-3.886 3.57-6.628 3.57zm26.732 1.518l-3.384-13.04c-.544-2.107-2.401-3.656-4.613-3.656a4.63 4.63 0 0 0-1.633.297l-7.285 2.736h7.493l1.28 4.939c-1.242-1.104-2.86-1.776-4.631-1.776-3.517 0-6.365 2.435-6.365 5.438s2.848 5.442 6.365 5.442c2.532 0 4.771-1.28 6.152-3.248l.743 2.867h5.878zm-10.322-2.025c-1.622 0-2.938-1.357-2.938-3.036s1.315-3.034 2.938-3.034 2.939 1.358 2.939 3.034-1.316 3.036-2.939 3.036zm24.119-14.669a2.83 2.83 0 0 0-1.238.283l-4.678 2.252c-.232-1.438-1.441-2.535-2.9-2.535a2.87 2.87 0 0 0-1.242.283l-5.711 2.749h4.015v13.662h5.878V37.726c0-.838.656-1.52 1.47-1.52s1.47.682 1.47 1.52v12.142h5.875V36.206c0-1.675-1.316-3.032-2.939-3.032zm36.859 0a2.89 2.89 0 0 0-1.248.283l-4.672 2.252c-.231-1.438-1.44-2.535-2.9-2.535a2.88 2.88 0 0 0-1.243.283l-5.708 2.749h4.014v13.662h5.876V37.726c0-.838.658-1.52 1.471-1.52s1.468.682 1.468 1.52v12.142H130V36.206c0-1.675-1.318-3.032-2.938-3.032zm-14.821 8.598c0 4.749-3.726 8.597-8.322 8.597s-8.328-3.849-8.328-8.597 3.728-8.598 8.328-8.598 8.322 3.851 8.322 8.598zm-7.977-5.989c-.262-1.012-1.269-1.612-2.248-1.34s-1.562 1.312-1.3 2.323l2.855 10.994c.264 1.013 1.269 1.613 2.248 1.345.979-.274 1.561-1.314 1.298-2.325l-2.853-10.997z"/></svg>
\ No newline at end of file
diff --git a/public/img/shop/electronics/brands/canon-light-mode.svg b/public/img/shop/electronics/brands/canon-light-mode.svg
new file mode 100644
index 0000000..bab8d4c
--- /dev/null
+++ b/public/img/shop/electronics/brands/canon-light-mode.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="164" height="80" fill="#6c727f"><path d="M49.674 48.35c-4.463 0-8.081-3.738-8.081-8.35s3.617-8.346 8.081-8.346a7.85 7.85 0 0 1 4.283 1.267l-4.283 7.08 8.063-4.809c-.876-1.442-2.132-2.684-3.652-3.627-1.933-1.196-4.622-1.936-7.596-1.936-4.242 0-7.963 1.592-10.038 3.977C34.915 35.369 34 37.587 34 40.001s.915 4.635 2.451 6.399c2.081 2.387 5.747 3.97 9.918 3.97s7.836-1.584 9.918-3.97a7.91 7.91 0 0 0 .329-.402l-.314-1.217c-1.463 2.157-3.886 3.57-6.628 3.57zm26.732 1.518l-3.384-13.04c-.544-2.107-2.401-3.656-4.613-3.656a4.63 4.63 0 0 0-1.633.297l-7.285 2.736h7.493l1.28 4.939c-1.242-1.104-2.86-1.776-4.631-1.776-3.517 0-6.365 2.435-6.365 5.438s2.848 5.442 6.365 5.442c2.532 0 4.771-1.28 6.152-3.248l.743 2.867h5.878zm-10.322-2.025c-1.622 0-2.938-1.357-2.938-3.036s1.315-3.034 2.938-3.034 2.939 1.358 2.939 3.034-1.316 3.036-2.939 3.036zm24.119-14.669a2.83 2.83 0 0 0-1.238.283l-4.678 2.252c-.232-1.438-1.441-2.535-2.9-2.535a2.87 2.87 0 0 0-1.242.283l-5.711 2.749h4.015v13.662h5.878V37.726c0-.838.656-1.52 1.47-1.52s1.47.682 1.47 1.52v12.142h5.875V36.206c0-1.675-1.316-3.032-2.939-3.032zm36.859 0a2.89 2.89 0 0 0-1.248.283l-4.672 2.252c-.231-1.438-1.44-2.535-2.9-2.535a2.88 2.88 0 0 0-1.243.283l-5.708 2.749h4.014v13.662h5.876V37.726c0-.838.658-1.52 1.471-1.52s1.468.682 1.468 1.52v12.142H130V36.206c0-1.675-1.318-3.032-2.938-3.032zm-14.821 8.598c0 4.749-3.726 8.597-8.322 8.597s-8.328-3.849-8.328-8.597 3.728-8.598 8.328-8.598 8.322 3.851 8.322 8.598zm-7.977-5.989c-.262-1.012-1.269-1.612-2.248-1.34s-1.562 1.312-1.3 2.323l2.855 10.994c.264 1.013 1.269 1.613 2.248 1.345.979-.274 1.561-1.314 1.298-2.325l-2.853-10.997z"/></svg>
\ No newline at end of file
diff --git a/public/img/shop/electronics/brands/motorola-dark-mode.svg b/public/img/shop/electronics/brands/motorola-dark-mode.svg
new file mode 100644
index 0000000..8d0f2a9
--- /dev/null
+++ b/public/img/shop/electronics/brands/motorola-dark-mode.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="164" height="80" fill="none"><path fill-rule="evenodd" d="M10 46.333l3.517-11.849h6.057l1.53 5.063 4.394-5.087h6.429l-3.346 11.862-4.858.017 1.775-6.12-5.638 6.12h-2.389l-1.74-6.547-1.956 6.547L10 46.333zm42.788-11.875l14.924.026-.896 3.826h-5.124l-2.105 8.023-4.723.006 1.963-7.995h-5.044l1.004-3.886zm40.028.022v2.755h.008l-.581 2.292h5.116s1.243-.214 1.314-1.336c.059-.994-.875-.924-.875-.924l-4.981-.018v-2.766l7.707-.004s3.298.247 2.978 3.075c-.331 2.825-3.363 3.727-3.363 3.727s-.185.181-.041.287 1.276.316 1.419 1.373-.372 1.83-.372 2.151c0 .315.033.95.439 1.231h-4.87s-.869-.132-.795-1.021l.113-1.652s-.072-.922-1.378-.812l-3.561-.035-1.014 3.532h-4.468l3.401-11.853 3.804-.001zm33.827 0h4.57l-2.214 8.597h7.522l-.873 3.266h-12.129l3.124-11.863zm24.492-.01l2.742 11.869h-4.755l-.503-2.057-.017-.04h-5.761l-.021.018-1.391 2.073-4.027.006 8.132-11.869 1.575 3.499-2.358 3.459.068.025h3.056l.055-.006-.821-3.478-1.575-3.499h5.601zM42.582 37.107c1.45 0 2.879.711 3.104 1.742.689 3.299-2.864 4.712-2.447 4.504-2.044 1.004-5.149.682-5.514-1.398-.346-2 1.213-3.968 2.525-4.438.898-.321 1.639-.457 2.331-.411l.01-.031.017-3.076a17.66 17.66 0 0 0-2.831.296c-3.581.68-8.095 3.903-7.3 7.982.67 3.448 5.392 5.299 10.686 4.285 4.965-.944 8.215-4.731 7.517-8.089C50.01 35.224 46.123 34 42.609 34v2.66l-.027.447zm34.711 0c1.448 0 2.882.711 3.094 1.742.702 3.299-2.855 4.712-2.431 4.504-2.047 1.004-5.155.682-5.517-1.398-.351-2 1.209-3.968 2.524-4.438.895-.321 1.646-.457 2.329-.411l.01-.031.02-3.076c-.952.023-1.901.122-2.837.296-3.578.68-8.099 3.903-7.304 7.982.669 3.448 5.403 5.299 10.688 4.285 4.97-.944 8.225-4.731 7.524-8.089C84.721 35.224 80.836 34 77.322 34v2.66l-.029.447zm37.737-.031c1.448.08 2.867.742 3.089 1.773.692 3.299-2.861 4.712-2.434 4.504-2.048 1.004-5.155.682-5.519-1.398-.349-2 1.206-3.968 2.524-4.438 1.079-.388 1.5-.496 2.34-.442l.02-3.076a17.95 17.95 0 0 0-2.837.296c-3.572.68-8.089 3.903-7.298 7.982.669 3.448 5.399 5.299 10.689 4.285 4.964-.944 8.22-4.731 7.513-8.089-.669-3.249-4.555-4.474-8.067-4.474v2.66l-.02.416z" fill="#9ca3af"/></svg>
\ No newline at end of file
diff --git a/public/img/shop/electronics/brands/motorola-light-mode.svg b/public/img/shop/electronics/brands/motorola-light-mode.svg
new file mode 100644
index 0000000..ee3ac76
--- /dev/null
+++ b/public/img/shop/electronics/brands/motorola-light-mode.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="164" height="80" fill="none"><path fill-rule="evenodd" d="M10 46.333l3.517-11.849h6.057l1.53 5.063 4.394-5.087h6.429l-3.346 11.862-4.858.017 1.775-6.12-5.638 6.12h-2.389l-1.74-6.547-1.956 6.547L10 46.333zm42.788-11.875l14.924.026-.896 3.826h-5.124l-2.105 8.023-4.723.006 1.963-7.995h-5.044l1.004-3.886zm40.028.022v2.755h.008l-.581 2.292h5.116s1.243-.214 1.314-1.336c.059-.994-.875-.924-.875-.924l-4.981-.018v-2.766l7.707-.004s3.298.247 2.978 3.075c-.331 2.825-3.363 3.727-3.363 3.727s-.185.181-.041.287 1.276.316 1.419 1.373-.372 1.83-.372 2.151c0 .315.033.95.439 1.231h-4.87s-.869-.132-.795-1.021l.113-1.652s-.072-.922-1.378-.812l-3.561-.035-1.014 3.532h-4.468l3.401-11.853 3.804-.001zm33.827 0h4.57l-2.214 8.597h7.522l-.873 3.266h-12.129l3.124-11.863zm24.492-.01l2.742 11.869h-4.755l-.503-2.057-.017-.04h-5.761l-.021.018-1.391 2.073-4.027.006 8.132-11.869 1.575 3.499-2.358 3.459.068.025h3.056l.055-.006-.821-3.478-1.575-3.499h5.601zM42.582 37.107c1.45 0 2.879.711 3.104 1.742.689 3.299-2.864 4.712-2.447 4.504-2.044 1.004-5.149.682-5.514-1.398-.346-2 1.213-3.968 2.525-4.438.898-.321 1.639-.457 2.331-.411l.01-.031.017-3.076a17.66 17.66 0 0 0-2.831.296c-3.581.68-8.095 3.903-7.3 7.982.67 3.448 5.392 5.299 10.686 4.285 4.965-.944 8.215-4.731 7.517-8.089C50.01 35.224 46.123 34 42.609 34v2.66l-.027.447zm34.711 0c1.448 0 2.882.711 3.094 1.742.702 3.299-2.855 4.712-2.431 4.504-2.047 1.004-5.155.682-5.517-1.398-.351-2 1.209-3.968 2.524-4.438.895-.321 1.646-.457 2.329-.411l.01-.031.02-3.076c-.952.023-1.901.122-2.837.296-3.578.68-8.099 3.903-7.304 7.982.669 3.448 5.403 5.299 10.688 4.285 4.97-.944 8.225-4.731 7.524-8.089C84.721 35.224 80.836 34 77.322 34v2.66l-.029.447zm37.737-.031c1.448.08 2.867.742 3.089 1.773.692 3.299-2.861 4.712-2.434 4.504-2.048 1.004-5.155.682-5.519-1.398-.349-2 1.206-3.968 2.524-4.438 1.079-.388 1.5-.496 2.34-.442l.02-3.076a17.95 17.95 0 0 0-2.837.296c-3.572.68-8.089 3.903-7.298 7.982.669 3.448 5.399 5.299 10.689 4.285 4.964-.944 8.22-4.731 7.513-8.089-.669-3.249-4.555-4.474-8.067-4.474v2.66l-.02.416z" fill="#6c727f"/></svg>
\ No newline at end of file
diff --git a/public/img/shop/electronics/brands/samsung-dark-mode.svg b/public/img/shop/electronics/brands/samsung-dark-mode.svg
new file mode 100644
index 0000000..ff82e66
--- /dev/null
+++ b/public/img/shop/electronics/brands/samsung-dark-mode.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="164" height="80" fill="#9ca3af"><path d="M39.574 33.236c-.796-.793-2.107-1.197-3.874-1.236-2.707 0-4.502 1.2-5.182 2.264a3.93 3.93 0 0 0-.339 1.061 5.12 5.12 0 0 0 .037 2.019c.652 3.068 5.949 3.953 6.707 5.851.134.336.102.774.028 1.072-.159.647-.619.964-1.407.964-.832 0-1.442-.463-1.442-1.301l-.002-1.491h-4.095L30 43.634C30 46.165 31.577 48 35.46 48c2.782 0 4.967-.958 5.321-3.44.173-1.212.063-2.06-.018-2.456-.617-3.077-6.29-4.113-6.698-5.78a1.84 1.84 0 0 1-.015-.761c.143-.637.585-.961 1.304-.961.855 0 1.337.498 1.337 1.301v.964h3.82v-1.092c0-1.064-.315-1.917-.937-2.539zm89.45 14.473c.176 0 .34-.018.51-.027.894-.044 3.145-.412 4.135-1.857a3.79 3.79 0 0 0 .643-1.833l.052-.983v-4.034h-5.369v2.268h1.518v2.105c.002.153-.003.372-.036.556-.017.107-.211 1.043-1.466 1.043-1.263 0-1.458-.937-1.477-1.043-.024-.136-.036-.32-.033-.556v-6.796c0-.274.019-.521.059-.693.071-.313.352-1.042 1.438-1.042 1.099 0 1.367.727 1.43 1.041a3.75 3.75 0 0 1 .048.554v.881h3.858v-.59-.018l-.035-.915c-.301-3.075-3.04-3.715-5.274-3.715-2.886 0-4.969 1.084-5.285 3.713a10.35 10.35 0 0 0-.062.987l-.001 6.253c.001.282.009.489.053.984.247 2.72 2.627 3.717 5.294 3.717zM49.383 34.167l1.954 13.253h4.097L52.68 32.453h-6.721L43.188 47.42h4.119l2.004-13.253h.07zm21.676.256l.091 12.997h3.818l-.331-14.967h-6.159L66.68 43.571h-.088l-1.794-11.118h-6.162l-.332 14.967h3.831l.088-12.997h.069l2.412 12.997h3.866l2.424-12.997h.066zM83.92 47.925c2.011 0 4.857-.507 5.27-3.406.171-1.208.062-2.042-.018-2.431-.616-3.048-6.238-4.063-6.644-5.723-.059-.247-.065-.503-.018-.753.144-.631.581-.952 1.304-.952.815 0 1.323.472 1.323 1.288v.953h3.784v-1.08c0-1.052-.312-1.898-.929-2.515-.827-.826-2.207-1.239-4.102-1.239-2.119 0-4.752.569-5.196 3.306-.12.734-.11 1.316.037 2 .639 3.02 5.894 3.932 6.64 5.793.129.329.099.764.026 1.062-.158.64-.614.952-1.392.952-.872 0-1.437-.489-1.437-1.289l-.003-1.473h-4.046l-.002 1.182c0 2.899 2.066 4.324 5.405 4.324zm19.245-3.78a12.23 12.23 0 0 0 .038-.986v-10.71h-3.857v11.05a3.59 3.59 0 0 1-.035.56c-.051.242-.296 1.041-1.385 1.041s-1.337-.798-1.385-1.043c-.025-.127-.037-.31-.033-.557V32.45h-3.871v10.713l.037.983c.229 2.466 1.998 3.719 5.252 3.719 3.241 0 5.008-1.253 5.239-3.719zm11.329 3.122h5.386V32.453h-3.782l.198 11.388h-.078l-3.342-11.388h-5.612v14.814h3.754l-.2-11.855h.06l3.616 11.855z"/></svg>
\ No newline at end of file
diff --git a/public/img/shop/electronics/brands/samsung-light-mode.svg b/public/img/shop/electronics/brands/samsung-light-mode.svg
new file mode 100644
index 0000000..e486f9a
--- /dev/null
+++ b/public/img/shop/electronics/brands/samsung-light-mode.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="164" height="80" fill="#6c727f"><path d="M39.574 33.236c-.796-.793-2.107-1.197-3.874-1.236-2.707 0-4.502 1.2-5.182 2.264a3.93 3.93 0 0 0-.339 1.061 5.12 5.12 0 0 0 .037 2.019c.652 3.068 5.949 3.953 6.707 5.851.134.336.102.774.028 1.072-.159.647-.619.964-1.407.964-.832 0-1.442-.463-1.442-1.301l-.002-1.491h-4.095L30 43.634C30 46.165 31.577 48 35.46 48c2.782 0 4.967-.958 5.321-3.44.173-1.212.063-2.06-.018-2.456-.617-3.077-6.29-4.113-6.698-5.78a1.84 1.84 0 0 1-.015-.761c.143-.637.585-.961 1.304-.961.855 0 1.337.498 1.337 1.301v.964h3.82v-1.092c0-1.064-.315-1.917-.937-2.539zm89.45 14.473c.176 0 .34-.018.51-.027.894-.044 3.145-.412 4.135-1.857a3.79 3.79 0 0 0 .643-1.833l.052-.983v-4.034h-5.369v2.268h1.518v2.105c.002.153-.003.372-.036.556-.017.107-.211 1.043-1.466 1.043-1.263 0-1.458-.937-1.477-1.043-.024-.136-.036-.32-.033-.556v-6.796c0-.274.019-.521.059-.693.071-.313.352-1.042 1.438-1.042 1.099 0 1.367.727 1.43 1.041a3.75 3.75 0 0 1 .048.554v.881h3.858v-.59-.018l-.035-.915c-.301-3.075-3.04-3.715-5.274-3.715-2.886 0-4.969 1.084-5.285 3.713a10.35 10.35 0 0 0-.062.987l-.001 6.253c.001.282.009.489.053.984.247 2.72 2.627 3.717 5.294 3.717zM49.383 34.167l1.954 13.253h4.097L52.68 32.453h-6.721L43.188 47.42h4.119l2.004-13.253h.07zm21.676.256l.091 12.997h3.818l-.331-14.967h-6.159L66.68 43.571h-.088l-1.794-11.118h-6.162l-.332 14.967h3.831l.088-12.997h.069l2.412 12.997h3.866l2.424-12.997h.066zM83.92 47.925c2.011 0 4.857-.507 5.27-3.406.171-1.208.062-2.042-.018-2.431-.616-3.048-6.238-4.063-6.644-5.723-.059-.247-.065-.503-.018-.753.144-.631.581-.952 1.304-.952.815 0 1.323.472 1.323 1.288v.953h3.784v-1.08c0-1.052-.312-1.898-.929-2.515-.827-.826-2.207-1.239-4.102-1.239-2.119 0-4.752.569-5.196 3.306-.12.734-.11 1.316.037 2 .639 3.02 5.894 3.932 6.64 5.793.129.329.099.764.026 1.062-.158.64-.614.952-1.392.952-.872 0-1.437-.489-1.437-1.289l-.003-1.473h-4.046l-.002 1.182c0 2.899 2.066 4.324 5.405 4.324zm19.245-3.78a12.23 12.23 0 0 0 .038-.986v-10.71h-3.857v11.05a3.59 3.59 0 0 1-.035.56c-.051.242-.296 1.041-1.385 1.041s-1.337-.798-1.385-1.043c-.025-.127-.037-.31-.033-.557V32.45h-3.871v10.713l.037.983c.229 2.466 1.998 3.719 5.252 3.719 3.241 0 5.008-1.253 5.239-3.719zm11.329 3.122h5.386V32.453h-3.782l.198 11.388h-.078l-3.342-11.388h-5.612v14.814h3.754l-.2-11.855h.06l3.616 11.855z"/></svg>
\ No newline at end of file
diff --git a/public/img/shop/electronics/brands/sony-dark-mode.svg b/public/img/shop/electronics/brands/sony-dark-mode.svg
new file mode 100644
index 0000000..e69097d
--- /dev/null
+++ b/public/img/shop/electronics/brands/sony-dark-mode.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="164" height="80" fill="none"><path d="M67.626 49c-3.622 0-6.985-1.111-9.23-3.17-1.696-1.556-2.511-3.67-2.511-5.846 0-2.149.85-4.277 2.511-5.825C60.48 32.216 64.161 31 67.626 31c3.835 0 6.904.988 9.25 3.164 1.669 1.549 2.476 3.668 2.476 5.82 0 2.086-.856 4.308-2.476 5.845-2.185 2.073-5.618 3.17-9.25 3.17v-2.374c1.923 0 3.706-.679 4.952-1.946 1.237-1.259 1.813-2.805 1.813-4.696 0-1.811-.622-3.504-1.813-4.706-1.229-1.237-3.055-1.934-4.952-1.934-1.903 0-3.73.689-4.96 1.934-1.185 1.201-1.809 2.899-1.809 4.706 0 1.801.631 3.498 1.809 4.696 1.231 1.252 3.052 1.946 4.96 1.946V49zM41.149 31.009c-1.938 0-4.139.371-6.01 1.225-1.726.788-3.139 2.061-3.139 4.173-.001 1.902 1.181 3.015 1.149 2.985.503.473 1.312 1.279 3.428 1.752.946.212 2.968.536 4.981.751l4.767.628c.637.166 1.706.391 1.706 1.618 0 1.221-1.126 1.594-1.322 1.675s-1.547.713-3.976.713c-1.794 0-3.95-.551-4.736-.839-.906-.33-1.856-.766-2.743-1.873-.221-.275-.568-1.029-.568-1.777h-2.199v6.299h2.444v-.851c0-.097.118-.495.529-.306.511.237 2.009.847 3.575 1.181 1.285.275 2.113.472 3.71.472 2.606 0 4.005-.434 4.973-.716.912-.267 2.038-.746 2.953-1.492.496-.403 1.582-1.437 1.582-3.315 0-1.802-.946-2.92-1.278-3.26-.453-.464-1.007-.823-1.584-1.1a11.47 11.47 0 0 0-1.945-.695c-1.26-.316-4.108-.706-5.47-.852l-4.896-.675c-.3-.095-.912-.393-.912-1.119 0-.516.28-.954.833-1.308.877-.562 2.65-.911 4.498-.911 2.184-.008 4.034.502 5.211 1.04.4.183.869.445 1.24.756.42.35 1.009 1.077 1.222 2.091h1.974v-5.483h-2.204v.637c0 .206-.208.473-.601.252-.986-.529-3.775-1.671-7.194-1.675zm48.3.996l10.751 9.92-.11-6.679c-.011-.876-.169-1.241-1.095-1.241h-2.022v-1.998h9.193v1.998h-1.972c-.945 0-1.004.309-1.016 1.241l.167 12.762h-3.148l-12.384-11.3.003 8.019c.011.872.051 1.282.929 1.282h2.208v1.997h-9.028V46.01h2.11c.788 0 .757-.768.757-1.328v-9.36c0-.604-.083-1.316-1.321-1.316h-1.713v-2.001h7.69zm27.222 14.001c.086 0 .47-.011.544-.035a.68.68 0 0 0 .423-.384c.028-.068.042-.367.042-.432l.002-3.157c0-.076-.006-.109-.132-.278-.139-.185-5.632-6.549-5.883-6.829-.312-.348-.86-.886-1.693-.886h-1.911v-1.999h10.781v1.996h-1.3c-.3 0-.5.291-.243.616l3.661 4.482c.034.047.063.059.109.015s3.718-4.457 3.747-4.492c.175-.214.056-.619-.32-.619h-1.333v-1.999H132v1.999h-1.974c-.716 0-1.007.135-1.546.758l-5.949 6.939c-.079.092-.072.22-.072.296v3.157c0 .064.014.364.042.432.067.162.211.317.423.384.075.023.453.035.539.035h2.019v1.998h-10.725v-1.999l1.914.002z" fill="#9ca3af"/></svg>
\ No newline at end of file
diff --git a/public/img/shop/electronics/brands/sony-light-mode.svg b/public/img/shop/electronics/brands/sony-light-mode.svg
new file mode 100644
index 0000000..56ec2cb
--- /dev/null
+++ b/public/img/shop/electronics/brands/sony-light-mode.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="164" height="80" fill="none"><path d="M67.626 49c-3.622 0-6.985-1.111-9.23-3.17-1.696-1.556-2.511-3.67-2.511-5.846 0-2.149.85-4.277 2.511-5.825C60.48 32.216 64.161 31 67.626 31c3.835 0 6.904.988 9.25 3.164 1.669 1.549 2.476 3.668 2.476 5.82 0 2.086-.856 4.308-2.476 5.845-2.185 2.073-5.618 3.17-9.25 3.17v-2.374c1.923 0 3.706-.679 4.952-1.946 1.237-1.259 1.813-2.805 1.813-4.696 0-1.811-.622-3.504-1.813-4.706-1.229-1.237-3.055-1.934-4.952-1.934-1.903 0-3.73.689-4.96 1.934-1.185 1.201-1.809 2.899-1.809 4.706 0 1.801.631 3.498 1.809 4.696 1.231 1.252 3.052 1.946 4.96 1.946V49zM41.149 31.009c-1.938 0-4.139.371-6.01 1.225-1.726.788-3.139 2.061-3.139 4.173-.001 1.902 1.181 3.015 1.149 2.985.503.473 1.312 1.279 3.428 1.752.946.212 2.968.536 4.981.751l4.767.628c.637.166 1.706.391 1.706 1.618 0 1.221-1.126 1.594-1.322 1.675s-1.547.713-3.976.713c-1.794 0-3.95-.551-4.736-.839-.906-.33-1.856-.766-2.743-1.873-.221-.275-.568-1.029-.568-1.777h-2.199v6.299h2.444v-.851c0-.097.118-.495.529-.306.511.237 2.009.847 3.575 1.181 1.285.275 2.113.472 3.71.472 2.606 0 4.005-.434 4.973-.716.912-.267 2.038-.746 2.953-1.492.496-.403 1.582-1.437 1.582-3.315 0-1.802-.946-2.92-1.278-3.26-.453-.464-1.007-.823-1.584-1.1a11.47 11.47 0 0 0-1.945-.695c-1.26-.316-4.108-.706-5.47-.852l-4.896-.675c-.3-.095-.912-.393-.912-1.119 0-.516.28-.954.833-1.308.877-.562 2.65-.911 4.498-.911 2.184-.008 4.034.502 5.211 1.04.4.183.869.445 1.24.756.42.35 1.009 1.077 1.222 2.091h1.974v-5.483h-2.204v.637c0 .206-.208.473-.601.252-.986-.529-3.775-1.671-7.194-1.675zm48.3.996l10.751 9.92-.11-6.679c-.011-.876-.169-1.241-1.095-1.241h-2.022v-1.998h9.193v1.998h-1.972c-.945 0-1.004.309-1.016 1.241l.167 12.762h-3.148l-12.384-11.3.003 8.019c.011.872.051 1.282.929 1.282h2.208v1.997h-9.028V46.01h2.11c.788 0 .757-.768.757-1.328v-9.36c0-.604-.083-1.316-1.321-1.316h-1.713v-2.001h7.69zm27.222 14.001c.086 0 .47-.011.544-.035a.68.68 0 0 0 .423-.384c.028-.068.042-.367.042-.432l.002-3.157c0-.076-.006-.109-.132-.278-.139-.185-5.632-6.549-5.883-6.829-.312-.348-.86-.886-1.693-.886h-1.911v-1.999h10.781v1.996h-1.3c-.3 0-.5.291-.243.616l3.661 4.482c.034.047.063.059.109.015s3.718-4.457 3.747-4.492c.175-.214.056-.619-.32-.619h-1.333v-1.999H132v1.999h-1.974c-.716 0-1.007.135-1.546.758l-5.949 6.939c-.079.092-.072.22-.072.296v3.157c0 .064.014.364.042.432.067.162.211.317.423.384.075.023.453.035.539.035h2.019v1.998h-10.725v-1.999l1.914.002z" fill="#6c727f"/></svg>
\ No newline at end of file
diff --git a/public/img/shop/electronics/brands/xiaomi-dark-mode.svg b/public/img/shop/electronics/brands/xiaomi-dark-mode.svg
new file mode 100644
index 0000000..98d2295
--- /dev/null
+++ b/public/img/shop/electronics/brands/xiaomi-dark-mode.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="164" height="80" fill="none" xmlns:v="https://vecta.io/nano"><path fill-rule="evenodd" d="M105.679 35.716v12.656c0 .183.207.284.397.284h3.885a.43.43 0 0 0 .46-.456v-8.854l-.056-2.212.145-2.179c.353-1.723 2.083-1.679 3.628-1.679.599 0 1.634.056 2.077.211.643.228.901.567 1.091 1.245.258.934.151 3.279.151 4.502v9.249c.123.083.191.172.398.172h3.885c.213 0 .274-.089.397-.172v-9.249c0-1.228-.112-3.563.14-4.519.151-.584.504-1.056 1.098-1.239.694-.217 1.875-.206 2.709-.206 1.59 0 2.771.35 2.989 1.74.202 1.256.096 7.537.096 9.327v3.58c-.006.439.028.734.459.734h3.885c.268 0 .397-.133.397-.395V36.394c0-2.657-.302-4.18-1.758-5.464-1.948-1.723-6.801-1.895-9.584-1.256-.548.128-1.326.361-1.825.573-.671.289-.268.244-1.181.244l-1.119-.478c-1.797-.623-3.477-.661-5.397-.661-2.917 0-6.057.65-6.953 3.313-.285.861-.42 1.929-.42 3.046l.006.006zm-44.527 6.753c0-1.106.358-1.562 1.355-1.945 1.562-.606 3.947-.517 5.564-.495.705.011 2.183.228 2.855.228 0 .945-.067 3.051-.571 3.746-.565.784-2.278 1.067-3.258 1.078-1.444.017-2.754.111-4.025-.206-1.22-.306-1.92-1.095-1.92-2.407zm-2.284-8.004c.291 0 .515-.145.75-.222l.784-.239 1.607-.445c1.831-.439 2.53-.511 4.462-.511 1.142 0 2.542.222 3.258.622.985.556 1.086 1.679 1.086 2.779-1.002 0-1.965-.172-3.314-.172-3.622 0-9.231.111-10.452 3.924-.633 1.973-.308 4.708 1.002 6.253.252.295.078.172.448.461 2.575 1.99 4.842 2.018 8.369 2.018 2.737 0 6.124-.573 7.658-2.896 1.467-2.218 1.26-5.164 1.26-7.832 0-1.345-.207-2.913-.549-3.935-.202-.606-.37-1.089-.677-1.601-.526-.884-1.355-1.734-2.245-2.257-3.516-2.068-8.492-1.506-12.226-.584-1.786.445-1.679.417-1.679 1.734 0 .539.056 1.162-.022 1.679-.09.572-.095 1.217.481 1.217v.006zm26.121 4.997c0-1.901.011-3.907 1.125-5.008.868-.856 1.657-1.062 2.889-1.217l1.355-.072c1.528 0 2.883.161 4.036 1.045a1.37 1.37 0 0 1 .308.317c1.288 1.662 1.03 3.496 1.03 5.792 0 2.234-.666 3.846-2.62 4.491-1.17.383-2.094.334-3.325.334-1.623 0-3.129-.5-3.823-1.428-.907-1.206-.98-2.646-.98-4.247l.005-.006zm-4.686-.339c0 1.579.179 3.096.537 4.346.386 1.351 1.265 2.907 2.401 3.746C85.268 48.717 87.944 49 90.592 49c1.489 0 3.073-.15 4.249-.489.521-.15 1.243-.389 1.691-.645.42-.245 1.036-.667 1.388-1.001.134-.128.157-.178.263-.306.784-.973 1.024-1.217 1.545-2.612 1.131-3.012 1.075-9.304-1.265-11.895-1.181-1.306-1.965-1.734-3.74-2.245-2.704-.789-8.117-.712-10.592.706-2.782 1.595-3.835 4.791-3.835 8.626l.006-.017zM20 29.93c.112.473 3.14 4.013 3.628 4.63l3.208 3.963.23.283c.106.133.173.2.252.317-.073.306-3.465 4.374-3.65 4.602l-3.23 3.996c-.174.222-.364.35-.431.65.095.178.123.284.397.284h5.089c.409 0 .957-.95 1.383-1.462l1.892-2.435c.196-.239 1.814-2.251 1.87-2.457.224.061 1.103 1.39 1.26 1.59l2.418 3.274c.381.506.946 1.49 1.355 1.49.907 0 4.725.078 5.318-.056.196-.406-.101-.645-.616-1.262-.873-1.045-1.92-2.473-2.805-3.568l-3.723-4.758c.14-.267 3.728-4.624 4.047-5.008l1.377-1.695c.224-.278 1.78-2.101 1.78-2.262 0-.261-.078-.395-.515-.395h-4.803c-.481 0-.532.233-.817.606l-4.445 5.803-2.435-3.318-1.215-1.629-.918-1.245c-.123-.161-.235-.222-.521-.222h-4.915c-.263 0-.314.122-.459.283H20zm120.258.167V48.2c0 .206.157.456.342.456h4.003c.19 0 .397-.1.397-.284V30.041c0-.272-.196-.395-.459-.395h-3.717c-.342 0-.571.117-.571.456l.005-.006zm-93.852-.167v18.442c0 .133.151.284.285.284h4.115c.134 0 .286-.15.286-.284V29.93c0-.222-.28-.283-.515-.283h-3.655c-.23 0-.515.061-.515.283z" fill="#9ca3af"/></svg>
\ No newline at end of file
diff --git a/public/img/shop/electronics/brands/xiaomi-light-mode.svg b/public/img/shop/electronics/brands/xiaomi-light-mode.svg
new file mode 100644
index 0000000..297169a
--- /dev/null
+++ b/public/img/shop/electronics/brands/xiaomi-light-mode.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="164" height="80" fill="none" xmlns:v="https://vecta.io/nano"><path fill-rule="evenodd" d="M105.679 35.716v12.656c0 .183.207.284.397.284h3.885a.43.43 0 0 0 .46-.456v-8.854l-.056-2.212.145-2.179c.353-1.723 2.083-1.679 3.628-1.679.599 0 1.634.056 2.077.211.643.228.901.567 1.091 1.245.258.934.151 3.279.151 4.502v9.249c.123.083.191.172.398.172h3.885c.213 0 .274-.089.397-.172v-9.249c0-1.228-.112-3.563.14-4.519.151-.584.504-1.056 1.098-1.239.694-.217 1.875-.206 2.709-.206 1.59 0 2.771.35 2.989 1.74.202 1.256.096 7.537.096 9.327v3.58c-.006.439.028.734.459.734h3.885c.268 0 .397-.133.397-.395V36.394c0-2.657-.302-4.18-1.758-5.464-1.948-1.723-6.801-1.895-9.584-1.256-.548.128-1.326.361-1.825.573-.671.289-.268.244-1.181.244l-1.119-.478c-1.797-.623-3.477-.661-5.397-.661-2.917 0-6.057.65-6.953 3.313-.285.861-.42 1.929-.42 3.046l.006.006zm-44.527 6.753c0-1.106.358-1.562 1.355-1.945 1.562-.606 3.947-.517 5.564-.495.705.011 2.183.228 2.855.228 0 .945-.067 3.051-.571 3.746-.565.784-2.278 1.067-3.258 1.078-1.444.017-2.754.111-4.025-.206-1.22-.306-1.92-1.095-1.92-2.407zm-2.284-8.004c.291 0 .515-.145.75-.222l.784-.239 1.607-.445c1.831-.439 2.53-.511 4.462-.511 1.142 0 2.542.222 3.258.622.985.556 1.086 1.679 1.086 2.779-1.002 0-1.965-.172-3.314-.172-3.622 0-9.231.111-10.452 3.924-.633 1.973-.308 4.708 1.002 6.253.252.295.078.172.448.461 2.575 1.99 4.842 2.018 8.369 2.018 2.737 0 6.124-.573 7.658-2.896 1.467-2.218 1.26-5.164 1.26-7.832 0-1.345-.207-2.913-.549-3.935-.202-.606-.37-1.089-.677-1.601-.526-.884-1.355-1.734-2.245-2.257-3.516-2.068-8.492-1.506-12.226-.584-1.786.445-1.679.417-1.679 1.734 0 .539.056 1.162-.022 1.679-.09.572-.095 1.217.481 1.217v.006zm26.121 4.997c0-1.901.011-3.907 1.125-5.008.868-.856 1.657-1.062 2.889-1.217l1.355-.072c1.528 0 2.883.161 4.036 1.045a1.37 1.37 0 0 1 .308.317c1.288 1.662 1.03 3.496 1.03 5.792 0 2.234-.666 3.846-2.62 4.491-1.17.383-2.094.334-3.325.334-1.623 0-3.129-.5-3.823-1.428-.907-1.206-.98-2.646-.98-4.247l.005-.006zm-4.686-.339c0 1.579.179 3.096.537 4.346.386 1.351 1.265 2.907 2.401 3.746C85.268 48.717 87.944 49 90.592 49c1.489 0 3.073-.15 4.249-.489.521-.15 1.243-.389 1.691-.645.42-.245 1.036-.667 1.388-1.001.134-.128.157-.178.263-.306.784-.973 1.024-1.217 1.545-2.612 1.131-3.012 1.075-9.304-1.265-11.895-1.181-1.306-1.965-1.734-3.74-2.245-2.704-.789-8.117-.712-10.592.706-2.782 1.595-3.835 4.791-3.835 8.626l.006-.017zM20 29.93c.112.473 3.14 4.013 3.628 4.63l3.208 3.963.23.283c.106.133.173.2.252.317-.073.306-3.465 4.374-3.65 4.602l-3.23 3.996c-.174.222-.364.35-.431.65.095.178.123.284.397.284h5.089c.409 0 .957-.95 1.383-1.462l1.892-2.435c.196-.239 1.814-2.251 1.87-2.457.224.061 1.103 1.39 1.26 1.59l2.418 3.274c.381.506.946 1.49 1.355 1.49.907 0 4.725.078 5.318-.056.196-.406-.101-.645-.616-1.262-.873-1.045-1.92-2.473-2.805-3.568l-3.723-4.758c.14-.267 3.728-4.624 4.047-5.008l1.377-1.695c.224-.278 1.78-2.101 1.78-2.262 0-.261-.078-.395-.515-.395h-4.803c-.481 0-.532.233-.817.606l-4.445 5.803-2.435-3.318-1.215-1.629-.918-1.245c-.123-.161-.235-.222-.521-.222h-4.915c-.263 0-.314.122-.459.283H20zm120.258.167V48.2c0 .206.157.456.342.456h4.003c.19 0 .397-.1.397-.284V30.041c0-.272-.196-.395-.459-.395h-3.717c-.342 0-.571.117-.571.456l.005-.006zm-93.852-.167v18.442c0 .133.151.284.285.284h4.115c.134 0 .286-.15.286-.284V29.93c0-.222-.28-.283-.515-.283h-3.655c-.23 0-.515.061-.515.283z" fill="#6c727f"/></svg>
\ No newline at end of file
diff --git a/public/img/shop/electronics/categories/01.png b/public/img/shop/electronics/categories/01.png
new file mode 100644
index 0000000..697899e
Binary files /dev/null and b/public/img/shop/electronics/categories/01.png differ
diff --git a/public/img/shop/electronics/categories/02.png b/public/img/shop/electronics/categories/02.png
new file mode 100644
index 0000000..cd5d9a3
Binary files /dev/null and b/public/img/shop/electronics/categories/02.png differ
diff --git a/public/img/shop/electronics/categories/03.png b/public/img/shop/electronics/categories/03.png
new file mode 100644
index 0000000..f2941e2
Binary files /dev/null and b/public/img/shop/electronics/categories/03.png differ
diff --git a/public/img/shop/electronics/categories/04.png b/public/img/shop/electronics/categories/04.png
new file mode 100644
index 0000000..1e3dd97
Binary files /dev/null and b/public/img/shop/electronics/categories/04.png differ
diff --git a/public/img/shop/electronics/categories/05.png b/public/img/shop/electronics/categories/05.png
new file mode 100644
index 0000000..61735ab
Binary files /dev/null and b/public/img/shop/electronics/categories/05.png differ
diff --git a/public/img/shop/electronics/categories/06.png b/public/img/shop/electronics/categories/06.png
new file mode 100644
index 0000000..a672381
Binary files /dev/null and b/public/img/shop/electronics/categories/06.png differ
diff --git a/public/img/shop/electronics/categories/07.png b/public/img/shop/electronics/categories/07.png
new file mode 100644
index 0000000..c4d5767
Binary files /dev/null and b/public/img/shop/electronics/categories/07.png differ
diff --git a/public/img/shop/electronics/categories/08.png b/public/img/shop/electronics/categories/08.png
new file mode 100644
index 0000000..e84dac2
Binary files /dev/null and b/public/img/shop/electronics/categories/08.png differ
diff --git a/public/img/shop/electronics/product/gallery/01.png b/public/img/shop/electronics/product/gallery/01.png
new file mode 100644
index 0000000..ab57575
Binary files /dev/null and b/public/img/shop/electronics/product/gallery/01.png differ
diff --git a/public/img/shop/electronics/product/gallery/02.png b/public/img/shop/electronics/product/gallery/02.png
new file mode 100644
index 0000000..33f6138
Binary files /dev/null and b/public/img/shop/electronics/product/gallery/02.png differ
diff --git a/public/img/shop/electronics/product/gallery/03.png b/public/img/shop/electronics/product/gallery/03.png
new file mode 100644
index 0000000..eb5c3ed
Binary files /dev/null and b/public/img/shop/electronics/product/gallery/03.png differ
diff --git a/public/img/shop/electronics/product/gallery/04.png b/public/img/shop/electronics/product/gallery/04.png
new file mode 100644
index 0000000..67ec282
Binary files /dev/null and b/public/img/shop/electronics/product/gallery/04.png differ
diff --git a/public/img/shop/electronics/product/gallery/05.png b/public/img/shop/electronics/product/gallery/05.png
new file mode 100644
index 0000000..47a51c0
Binary files /dev/null and b/public/img/shop/electronics/product/gallery/05.png differ
diff --git a/public/img/shop/electronics/product/gallery/06.png b/public/img/shop/electronics/product/gallery/06.png
new file mode 100644
index 0000000..fe5a472
Binary files /dev/null and b/public/img/shop/electronics/product/gallery/06.png differ
diff --git a/public/img/shop/electronics/product/gallery/07.png b/public/img/shop/electronics/product/gallery/07.png
new file mode 100644
index 0000000..24895d6
Binary files /dev/null and b/public/img/shop/electronics/product/gallery/07.png differ
diff --git a/public/img/shop/electronics/product/gallery/th01.png b/public/img/shop/electronics/product/gallery/th01.png
new file mode 100644
index 0000000..2f3b53a
Binary files /dev/null and b/public/img/shop/electronics/product/gallery/th01.png differ
diff --git a/public/img/shop/electronics/product/gallery/th02.png b/public/img/shop/electronics/product/gallery/th02.png
new file mode 100644
index 0000000..034c03b
Binary files /dev/null and b/public/img/shop/electronics/product/gallery/th02.png differ
diff --git a/public/img/shop/electronics/product/gallery/th03.png b/public/img/shop/electronics/product/gallery/th03.png
new file mode 100644
index 0000000..1aaa809
Binary files /dev/null and b/public/img/shop/electronics/product/gallery/th03.png differ
diff --git a/public/img/shop/electronics/product/gallery/th04.png b/public/img/shop/electronics/product/gallery/th04.png
new file mode 100644
index 0000000..ca554b7
Binary files /dev/null and b/public/img/shop/electronics/product/gallery/th04.png differ
diff --git a/public/img/shop/electronics/product/gallery/th05.png b/public/img/shop/electronics/product/gallery/th05.png
new file mode 100644
index 0000000..530bf48
Binary files /dev/null and b/public/img/shop/electronics/product/gallery/th05.png differ
diff --git a/public/img/shop/electronics/product/gallery/th06.png b/public/img/shop/electronics/product/gallery/th06.png
new file mode 100644
index 0000000..295e00f
Binary files /dev/null and b/public/img/shop/electronics/product/gallery/th06.png differ
diff --git a/public/img/shop/electronics/product/gallery/th07.png b/public/img/shop/electronics/product/gallery/th07.png
new file mode 100644
index 0000000..59cbfc3
Binary files /dev/null and b/public/img/shop/electronics/product/gallery/th07.png differ
diff --git a/public/img/shop/electronics/product/reviews/01.png b/public/img/shop/electronics/product/reviews/01.png
new file mode 100644
index 0000000..b01fdd0
Binary files /dev/null and b/public/img/shop/electronics/product/reviews/01.png differ
diff --git a/public/img/shop/electronics/product/reviews/02.png b/public/img/shop/electronics/product/reviews/02.png
new file mode 100644
index 0000000..16b6eb8
Binary files /dev/null and b/public/img/shop/electronics/product/reviews/02.png differ
diff --git a/public/img/shop/electronics/product/reviews/03.png b/public/img/shop/electronics/product/reviews/03.png
new file mode 100644
index 0000000..1ca39c1
Binary files /dev/null and b/public/img/shop/electronics/product/reviews/03.png differ
diff --git a/public/img/shop/electronics/thumbs/01.png b/public/img/shop/electronics/thumbs/01.png
new file mode 100644
index 0000000..505f908
Binary files /dev/null and b/public/img/shop/electronics/thumbs/01.png differ
diff --git a/public/img/shop/electronics/thumbs/02.png b/public/img/shop/electronics/thumbs/02.png
new file mode 100644
index 0000000..afc5824
Binary files /dev/null and b/public/img/shop/electronics/thumbs/02.png differ
diff --git a/public/img/shop/electronics/thumbs/03.png b/public/img/shop/electronics/thumbs/03.png
new file mode 100644
index 0000000..05951e3
Binary files /dev/null and b/public/img/shop/electronics/thumbs/03.png differ
diff --git a/public/img/shop/electronics/thumbs/04.png b/public/img/shop/electronics/thumbs/04.png
new file mode 100644
index 0000000..253d89a
Binary files /dev/null and b/public/img/shop/electronics/thumbs/04.png differ
diff --git a/public/img/shop/electronics/thumbs/05.png b/public/img/shop/electronics/thumbs/05.png
new file mode 100644
index 0000000..37dbd46
Binary files /dev/null and b/public/img/shop/electronics/thumbs/05.png differ
diff --git a/public/img/shop/electronics/thumbs/06.png b/public/img/shop/electronics/thumbs/06.png
new file mode 100644
index 0000000..f00c96e
Binary files /dev/null and b/public/img/shop/electronics/thumbs/06.png differ
diff --git a/public/img/shop/electronics/thumbs/07.png b/public/img/shop/electronics/thumbs/07.png
new file mode 100644
index 0000000..0f78cf1
Binary files /dev/null and b/public/img/shop/electronics/thumbs/07.png differ
diff --git a/public/img/shop/electronics/thumbs/08.png b/public/img/shop/electronics/thumbs/08.png
new file mode 100644
index 0000000..26090cb
Binary files /dev/null and b/public/img/shop/electronics/thumbs/08.png differ
diff --git a/public/img/shop/electronics/thumbs/09.png b/public/img/shop/electronics/thumbs/09.png
new file mode 100644
index 0000000..1f4430f
Binary files /dev/null and b/public/img/shop/electronics/thumbs/09.png differ
diff --git a/public/img/shop/electronics/thumbs/10.png b/public/img/shop/electronics/thumbs/10.png
new file mode 100644
index 0000000..417964f
Binary files /dev/null and b/public/img/shop/electronics/thumbs/10.png differ
diff --git a/public/img/shop/electronics/thumbs/11.png b/public/img/shop/electronics/thumbs/11.png
new file mode 100644
index 0000000..b0d6e80
Binary files /dev/null and b/public/img/shop/electronics/thumbs/11.png differ
diff --git a/public/img/shop/electronics/thumbs/12.png b/public/img/shop/electronics/thumbs/12.png
new file mode 100644
index 0000000..ff1409c
Binary files /dev/null and b/public/img/shop/electronics/thumbs/12.png differ
diff --git a/public/img/shop/electronics/thumbs/13.png b/public/img/shop/electronics/thumbs/13.png
new file mode 100644
index 0000000..2dd35de
Binary files /dev/null and b/public/img/shop/electronics/thumbs/13.png differ
diff --git a/public/img/shop/electronics/thumbs/14.png b/public/img/shop/electronics/thumbs/14.png
new file mode 100644
index 0000000..c312350
Binary files /dev/null and b/public/img/shop/electronics/thumbs/14.png differ
diff --git a/public/img/shop/electronics/thumbs/15.png b/public/img/shop/electronics/thumbs/15.png
new file mode 100644
index 0000000..37308cb
Binary files /dev/null and b/public/img/shop/electronics/thumbs/15.png differ
diff --git a/public/img/shop/electronics/thumbs/16.png b/public/img/shop/electronics/thumbs/16.png
new file mode 100644
index 0000000..8aaeed1
Binary files /dev/null and b/public/img/shop/electronics/thumbs/16.png differ
diff --git a/public/img/shop/electronics/thumbs/17.png b/public/img/shop/electronics/thumbs/17.png
new file mode 100644
index 0000000..d0237b3
Binary files /dev/null and b/public/img/shop/electronics/thumbs/17.png differ
diff --git a/public/img/shop/electronics/thumbs/18.png b/public/img/shop/electronics/thumbs/18.png
new file mode 100644
index 0000000..68f55e4
Binary files /dev/null and b/public/img/shop/electronics/thumbs/18.png differ
diff --git a/public/img/shop/electronics/thumbs/19.png b/public/img/shop/electronics/thumbs/19.png
new file mode 100644
index 0000000..f5a3673
Binary files /dev/null and b/public/img/shop/electronics/thumbs/19.png differ
diff --git a/public/img/shop/electronics/thumbs/20.png b/public/img/shop/electronics/thumbs/20.png
new file mode 100644
index 0000000..f3ce6df
Binary files /dev/null and b/public/img/shop/electronics/thumbs/20.png differ
diff --git a/public/img/shop/electronics/thumbs/21.png b/public/img/shop/electronics/thumbs/21.png
new file mode 100644
index 0000000..f7838ce
Binary files /dev/null and b/public/img/shop/electronics/thumbs/21.png differ
diff --git a/public/img/shop/electronics/thumbs/22.png b/public/img/shop/electronics/thumbs/22.png
new file mode 100644
index 0000000..4c059fa
Binary files /dev/null and b/public/img/shop/electronics/thumbs/22.png differ
diff --git a/public/img/shop/fashion/01.png b/public/img/shop/fashion/01.png
new file mode 100644
index 0000000..3838a4e
Binary files /dev/null and b/public/img/shop/fashion/01.png differ
diff --git a/public/img/shop/fashion/02.png b/public/img/shop/fashion/02.png
new file mode 100644
index 0000000..77114d0
Binary files /dev/null and b/public/img/shop/fashion/02.png differ
diff --git a/public/img/shop/fashion/03.png b/public/img/shop/fashion/03.png
new file mode 100644
index 0000000..b26d02a
Binary files /dev/null and b/public/img/shop/fashion/03.png differ
diff --git a/public/img/shop/fashion/04.png b/public/img/shop/fashion/04.png
new file mode 100644
index 0000000..b553e2a
Binary files /dev/null and b/public/img/shop/fashion/04.png differ
diff --git a/public/img/shop/fashion/05.png b/public/img/shop/fashion/05.png
new file mode 100644
index 0000000..6f51268
Binary files /dev/null and b/public/img/shop/fashion/05.png differ
diff --git a/public/img/shop/fashion/06.png b/public/img/shop/fashion/06.png
new file mode 100644
index 0000000..71532b1
Binary files /dev/null and b/public/img/shop/fashion/06.png differ
diff --git a/public/img/shop/fashion/07.png b/public/img/shop/fashion/07.png
new file mode 100644
index 0000000..b4cf61e
Binary files /dev/null and b/public/img/shop/fashion/07.png differ
diff --git a/public/img/shop/fashion/08.png b/public/img/shop/fashion/08.png
new file mode 100644
index 0000000..5c96459
Binary files /dev/null and b/public/img/shop/fashion/08.png differ
diff --git a/public/img/shop/fashion/09.png b/public/img/shop/fashion/09.png
new file mode 100644
index 0000000..52cf010
Binary files /dev/null and b/public/img/shop/fashion/09.png differ
diff --git a/public/img/shop/fashion/10.png b/public/img/shop/fashion/10.png
new file mode 100644
index 0000000..62a9b10
Binary files /dev/null and b/public/img/shop/fashion/10.png differ
diff --git a/public/img/shop/fashion/11.png b/public/img/shop/fashion/11.png
new file mode 100644
index 0000000..06ac2b7
Binary files /dev/null and b/public/img/shop/fashion/11.png differ
diff --git a/public/img/shop/fashion/12.png b/public/img/shop/fashion/12.png
new file mode 100644
index 0000000..d57dc1b
Binary files /dev/null and b/public/img/shop/fashion/12.png differ
diff --git a/public/img/shop/fashion/banner01.png b/public/img/shop/fashion/banner01.png
new file mode 100644
index 0000000..3dd246c
Binary files /dev/null and b/public/img/shop/fashion/banner01.png differ
diff --git a/public/img/shop/fashion/banner02.png b/public/img/shop/fashion/banner02.png
new file mode 100644
index 0000000..b252e3e
Binary files /dev/null and b/public/img/shop/fashion/banner02.png differ
diff --git a/public/img/shop/fashion/banner03.png b/public/img/shop/fashion/banner03.png
new file mode 100644
index 0000000..bd6c442
Binary files /dev/null and b/public/img/shop/fashion/banner03.png differ
diff --git a/public/img/shop/fashion/product/01.png b/public/img/shop/fashion/product/01.png
new file mode 100644
index 0000000..c1538eb
Binary files /dev/null and b/public/img/shop/fashion/product/01.png differ
diff --git a/public/img/shop/fashion/product/02.png b/public/img/shop/fashion/product/02.png
new file mode 100644
index 0000000..81d5ee7
Binary files /dev/null and b/public/img/shop/fashion/product/02.png differ
diff --git a/public/img/shop/fashion/product/03.png b/public/img/shop/fashion/product/03.png
new file mode 100644
index 0000000..a38353d
Binary files /dev/null and b/public/img/shop/fashion/product/03.png differ
diff --git a/public/img/shop/fashion/product/04.png b/public/img/shop/fashion/product/04.png
new file mode 100644
index 0000000..82847f1
Binary files /dev/null and b/public/img/shop/fashion/product/04.png differ
diff --git a/public/img/shop/fashion/product/05.png b/public/img/shop/fashion/product/05.png
new file mode 100644
index 0000000..0054ee3
Binary files /dev/null and b/public/img/shop/fashion/product/05.png differ
diff --git a/public/img/shop/fashion/product/colors/color01.png b/public/img/shop/fashion/product/colors/color01.png
new file mode 100644
index 0000000..988b85a
Binary files /dev/null and b/public/img/shop/fashion/product/colors/color01.png differ
diff --git a/public/img/shop/fashion/product/colors/color02.png b/public/img/shop/fashion/product/colors/color02.png
new file mode 100644
index 0000000..7d68c65
Binary files /dev/null and b/public/img/shop/fashion/product/colors/color02.png differ
diff --git a/public/img/shop/fashion/product/colors/color03.png b/public/img/shop/fashion/product/colors/color03.png
new file mode 100644
index 0000000..30ad8fc
Binary files /dev/null and b/public/img/shop/fashion/product/colors/color03.png differ
diff --git a/public/img/shop/fashion/product/thumb.png b/public/img/shop/fashion/product/thumb.png
new file mode 100644
index 0000000..39a2296
Binary files /dev/null and b/public/img/shop/fashion/product/thumb.png differ
diff --git a/public/img/shop/fashion/thumbs/01.png b/public/img/shop/fashion/thumbs/01.png
new file mode 100644
index 0000000..b2741cb
Binary files /dev/null and b/public/img/shop/fashion/thumbs/01.png differ
diff --git a/public/img/shop/fashion/thumbs/02.png b/public/img/shop/fashion/thumbs/02.png
new file mode 100644
index 0000000..7809aa5
Binary files /dev/null and b/public/img/shop/fashion/thumbs/02.png differ
diff --git a/public/img/shop/fashion/thumbs/03.png b/public/img/shop/fashion/thumbs/03.png
new file mode 100644
index 0000000..1e198e1
Binary files /dev/null and b/public/img/shop/fashion/thumbs/03.png differ
diff --git a/public/img/shop/fashion/thumbs/04.png b/public/img/shop/fashion/thumbs/04.png
new file mode 100644
index 0000000..f4b13c8
Binary files /dev/null and b/public/img/shop/fashion/thumbs/04.png differ
diff --git a/public/img/shop/fashion/thumbs/05.png b/public/img/shop/fashion/thumbs/05.png
new file mode 100644
index 0000000..e7a206d
Binary files /dev/null and b/public/img/shop/fashion/thumbs/05.png differ
diff --git a/public/img/shop/fashion/thumbs/06.png b/public/img/shop/fashion/thumbs/06.png
new file mode 100644
index 0000000..4aa04e1
Binary files /dev/null and b/public/img/shop/fashion/thumbs/06.png differ
diff --git a/public/img/shop/fashion/thumbs/07.png b/public/img/shop/fashion/thumbs/07.png
new file mode 100644
index 0000000..ebdd5ac
Binary files /dev/null and b/public/img/shop/fashion/thumbs/07.png differ
diff --git a/public/img/shop/fashion/thumbs/08.png b/public/img/shop/fashion/thumbs/08.png
new file mode 100644
index 0000000..f251e55
Binary files /dev/null and b/public/img/shop/fashion/thumbs/08.png differ
diff --git a/public/img/shop/fashion/thumbs/09.png b/public/img/shop/fashion/thumbs/09.png
new file mode 100644
index 0000000..34be82d
Binary files /dev/null and b/public/img/shop/fashion/thumbs/09.png differ
diff --git a/public/img/shop/furniture/01-hover.jpg b/public/img/shop/furniture/01-hover.jpg
new file mode 100644
index 0000000..1bd5487
Binary files /dev/null and b/public/img/shop/furniture/01-hover.jpg differ
diff --git a/public/img/shop/furniture/01.png b/public/img/shop/furniture/01.png
new file mode 100644
index 0000000..9b3d983
Binary files /dev/null and b/public/img/shop/furniture/01.png differ
diff --git a/public/img/shop/furniture/02-hover.jpg b/public/img/shop/furniture/02-hover.jpg
new file mode 100644
index 0000000..fc17613
Binary files /dev/null and b/public/img/shop/furniture/02-hover.jpg differ
diff --git a/public/img/shop/furniture/02.png b/public/img/shop/furniture/02.png
new file mode 100644
index 0000000..94b54c6
Binary files /dev/null and b/public/img/shop/furniture/02.png differ
diff --git a/public/img/shop/furniture/03-hover.jpg b/public/img/shop/furniture/03-hover.jpg
new file mode 100644
index 0000000..25a3cf6
Binary files /dev/null and b/public/img/shop/furniture/03-hover.jpg differ
diff --git a/public/img/shop/furniture/03.png b/public/img/shop/furniture/03.png
new file mode 100644
index 0000000..35cd5f7
Binary files /dev/null and b/public/img/shop/furniture/03.png differ
diff --git a/public/img/shop/furniture/04-hover.jpg b/public/img/shop/furniture/04-hover.jpg
new file mode 100644
index 0000000..851ada2
Binary files /dev/null and b/public/img/shop/furniture/04-hover.jpg differ
diff --git a/public/img/shop/furniture/04.png b/public/img/shop/furniture/04.png
new file mode 100644
index 0000000..238210e
Binary files /dev/null and b/public/img/shop/furniture/04.png differ
diff --git a/public/img/shop/furniture/05-hover.jpg b/public/img/shop/furniture/05-hover.jpg
new file mode 100644
index 0000000..9a073f0
Binary files /dev/null and b/public/img/shop/furniture/05-hover.jpg differ
diff --git a/public/img/shop/furniture/05.png b/public/img/shop/furniture/05.png
new file mode 100644
index 0000000..3c254f3
Binary files /dev/null and b/public/img/shop/furniture/05.png differ
diff --git a/public/img/shop/furniture/06-hover.jpg b/public/img/shop/furniture/06-hover.jpg
new file mode 100644
index 0000000..e41a03d
Binary files /dev/null and b/public/img/shop/furniture/06-hover.jpg differ
diff --git a/public/img/shop/furniture/06.png b/public/img/shop/furniture/06.png
new file mode 100644
index 0000000..95f66e3
Binary files /dev/null and b/public/img/shop/furniture/06.png differ
diff --git a/public/img/shop/furniture/07-hover.jpg b/public/img/shop/furniture/07-hover.jpg
new file mode 100644
index 0000000..fcdd396
Binary files /dev/null and b/public/img/shop/furniture/07-hover.jpg differ
diff --git a/public/img/shop/furniture/07.png b/public/img/shop/furniture/07.png
new file mode 100644
index 0000000..60b1020
Binary files /dev/null and b/public/img/shop/furniture/07.png differ
diff --git a/public/img/shop/furniture/08-hover.jpg b/public/img/shop/furniture/08-hover.jpg
new file mode 100644
index 0000000..9e4c4b3
Binary files /dev/null and b/public/img/shop/furniture/08-hover.jpg differ
diff --git a/public/img/shop/furniture/08.png b/public/img/shop/furniture/08.png
new file mode 100644
index 0000000..2d7614d
Binary files /dev/null and b/public/img/shop/furniture/08.png differ
diff --git a/public/img/shop/furniture/09-hover.jpg b/public/img/shop/furniture/09-hover.jpg
new file mode 100644
index 0000000..c9a7cfd
Binary files /dev/null and b/public/img/shop/furniture/09-hover.jpg differ
diff --git a/public/img/shop/furniture/09.png b/public/img/shop/furniture/09.png
new file mode 100644
index 0000000..f920485
Binary files /dev/null and b/public/img/shop/furniture/09.png differ
diff --git a/public/img/shop/furniture/10-hover.jpg b/public/img/shop/furniture/10-hover.jpg
new file mode 100644
index 0000000..5901116
Binary files /dev/null and b/public/img/shop/furniture/10-hover.jpg differ
diff --git a/public/img/shop/furniture/10.png b/public/img/shop/furniture/10.png
new file mode 100644
index 0000000..3fda6e3
Binary files /dev/null and b/public/img/shop/furniture/10.png differ
diff --git a/public/img/shop/furniture/11-hover.jpg b/public/img/shop/furniture/11-hover.jpg
new file mode 100644
index 0000000..5a076e8
Binary files /dev/null and b/public/img/shop/furniture/11-hover.jpg differ
diff --git a/public/img/shop/furniture/11.png b/public/img/shop/furniture/11.png
new file mode 100644
index 0000000..d27c2bd
Binary files /dev/null and b/public/img/shop/furniture/11.png differ
diff --git a/public/img/shop/furniture/12-hover.jpg b/public/img/shop/furniture/12-hover.jpg
new file mode 100644
index 0000000..170f739
Binary files /dev/null and b/public/img/shop/furniture/12-hover.jpg differ
diff --git a/public/img/shop/furniture/12.png b/public/img/shop/furniture/12.png
new file mode 100644
index 0000000..0fef254
Binary files /dev/null and b/public/img/shop/furniture/12.png differ
diff --git a/public/img/shop/furniture/13-hover.jpg b/public/img/shop/furniture/13-hover.jpg
new file mode 100644
index 0000000..eb22cc4
Binary files /dev/null and b/public/img/shop/furniture/13-hover.jpg differ
diff --git a/public/img/shop/furniture/13.png b/public/img/shop/furniture/13.png
new file mode 100644
index 0000000..abd398d
Binary files /dev/null and b/public/img/shop/furniture/13.png differ
diff --git a/public/img/shop/furniture/14-hover.jpg b/public/img/shop/furniture/14-hover.jpg
new file mode 100644
index 0000000..e64229d
Binary files /dev/null and b/public/img/shop/furniture/14-hover.jpg differ
diff --git a/public/img/shop/furniture/14.png b/public/img/shop/furniture/14.png
new file mode 100644
index 0000000..36ae349
Binary files /dev/null and b/public/img/shop/furniture/14.png differ
diff --git a/public/img/shop/furniture/15-hover.jpg b/public/img/shop/furniture/15-hover.jpg
new file mode 100644
index 0000000..559280c
Binary files /dev/null and b/public/img/shop/furniture/15-hover.jpg differ
diff --git a/public/img/shop/furniture/15.png b/public/img/shop/furniture/15.png
new file mode 100644
index 0000000..1e6172f
Binary files /dev/null and b/public/img/shop/furniture/15.png differ
diff --git a/public/img/shop/furniture/16-hover.jpg b/public/img/shop/furniture/16-hover.jpg
new file mode 100644
index 0000000..3c88c08
Binary files /dev/null and b/public/img/shop/furniture/16-hover.jpg differ
diff --git a/public/img/shop/furniture/16.png b/public/img/shop/furniture/16.png
new file mode 100644
index 0000000..f317049
Binary files /dev/null and b/public/img/shop/furniture/16.png differ
diff --git a/public/img/shop/furniture/product/01.png b/public/img/shop/furniture/product/01.png
new file mode 100644
index 0000000..9c46d30
Binary files /dev/null and b/public/img/shop/furniture/product/01.png differ
diff --git a/public/img/shop/furniture/product/02.jpg b/public/img/shop/furniture/product/02.jpg
new file mode 100644
index 0000000..08664da
Binary files /dev/null and b/public/img/shop/furniture/product/02.jpg differ
diff --git a/public/img/shop/furniture/product/03.jpg b/public/img/shop/furniture/product/03.jpg
new file mode 100644
index 0000000..bce5903
Binary files /dev/null and b/public/img/shop/furniture/product/03.jpg differ
diff --git a/public/img/shop/furniture/product/04.jpg b/public/img/shop/furniture/product/04.jpg
new file mode 100644
index 0000000..de9d5ba
Binary files /dev/null and b/public/img/shop/furniture/product/04.jpg differ
diff --git a/public/img/shop/furniture/product/05.jpg b/public/img/shop/furniture/product/05.jpg
new file mode 100644
index 0000000..c0d93c5
Binary files /dev/null and b/public/img/shop/furniture/product/05.jpg differ
diff --git a/public/img/shop/furniture/product/06.jpg b/public/img/shop/furniture/product/06.jpg
new file mode 100644
index 0000000..6ea551f
Binary files /dev/null and b/public/img/shop/furniture/product/06.jpg differ
diff --git a/public/img/shop/furniture/product/colors/color01.png b/public/img/shop/furniture/product/colors/color01.png
new file mode 100644
index 0000000..983c9c3
Binary files /dev/null and b/public/img/shop/furniture/product/colors/color01.png differ
diff --git a/public/img/shop/furniture/product/colors/color02.png b/public/img/shop/furniture/product/colors/color02.png
new file mode 100644
index 0000000..803ff52
Binary files /dev/null and b/public/img/shop/furniture/product/colors/color02.png differ
diff --git a/public/img/shop/furniture/product/colors/color03.png b/public/img/shop/furniture/product/colors/color03.png
new file mode 100644
index 0000000..0f29808
Binary files /dev/null and b/public/img/shop/furniture/product/colors/color03.png differ
diff --git a/public/img/shop/furniture/product/thumb.png b/public/img/shop/furniture/product/thumb.png
new file mode 100644
index 0000000..2fc36d1
Binary files /dev/null and b/public/img/shop/furniture/product/thumb.png differ
diff --git a/public/img/shop/grocery/01.png b/public/img/shop/grocery/01.png
new file mode 100644
index 0000000..fb3095d
Binary files /dev/null and b/public/img/shop/grocery/01.png differ
diff --git a/public/img/shop/grocery/02.png b/public/img/shop/grocery/02.png
new file mode 100644
index 0000000..18aad3c
Binary files /dev/null and b/public/img/shop/grocery/02.png differ
diff --git a/public/img/shop/grocery/03.png b/public/img/shop/grocery/03.png
new file mode 100644
index 0000000..03cb290
Binary files /dev/null and b/public/img/shop/grocery/03.png differ
diff --git a/public/img/shop/grocery/04.png b/public/img/shop/grocery/04.png
new file mode 100644
index 0000000..c00b3e0
Binary files /dev/null and b/public/img/shop/grocery/04.png differ
diff --git a/public/img/shop/grocery/05.png b/public/img/shop/grocery/05.png
new file mode 100644
index 0000000..d097daa
Binary files /dev/null and b/public/img/shop/grocery/05.png differ
diff --git a/public/img/shop/grocery/06.png b/public/img/shop/grocery/06.png
new file mode 100644
index 0000000..cfb123c
Binary files /dev/null and b/public/img/shop/grocery/06.png differ
diff --git a/public/img/shop/grocery/07.png b/public/img/shop/grocery/07.png
new file mode 100644
index 0000000..783cb88
Binary files /dev/null and b/public/img/shop/grocery/07.png differ
diff --git a/public/img/shop/grocery/08.png b/public/img/shop/grocery/08.png
new file mode 100644
index 0000000..14bc03b
Binary files /dev/null and b/public/img/shop/grocery/08.png differ
diff --git a/public/img/shop/grocery/09.png b/public/img/shop/grocery/09.png
new file mode 100644
index 0000000..86bbe81
Binary files /dev/null and b/public/img/shop/grocery/09.png differ
diff --git a/public/img/shop/grocery/10.png b/public/img/shop/grocery/10.png
new file mode 100644
index 0000000..0903a9d
Binary files /dev/null and b/public/img/shop/grocery/10.png differ
diff --git a/public/img/shop/grocery/11.png b/public/img/shop/grocery/11.png
new file mode 100644
index 0000000..a304a05
Binary files /dev/null and b/public/img/shop/grocery/11.png differ
diff --git a/public/img/shop/grocery/12.png b/public/img/shop/grocery/12.png
new file mode 100644
index 0000000..4ad1cca
Binary files /dev/null and b/public/img/shop/grocery/12.png differ
diff --git a/public/img/shop/grocery/13.png b/public/img/shop/grocery/13.png
new file mode 100644
index 0000000..1a6e924
Binary files /dev/null and b/public/img/shop/grocery/13.png differ
diff --git a/public/img/shop/grocery/14.png b/public/img/shop/grocery/14.png
new file mode 100644
index 0000000..563a676
Binary files /dev/null and b/public/img/shop/grocery/14.png differ
diff --git a/public/img/shop/grocery/15.png b/public/img/shop/grocery/15.png
new file mode 100644
index 0000000..3ecb728
Binary files /dev/null and b/public/img/shop/grocery/15.png differ
diff --git a/public/img/shop/grocery/16.png b/public/img/shop/grocery/16.png
new file mode 100644
index 0000000..b12433e
Binary files /dev/null and b/public/img/shop/grocery/16.png differ
diff --git a/public/img/shop/grocery/banner.jpg b/public/img/shop/grocery/banner.jpg
new file mode 100644
index 0000000..1aa8a34
Binary files /dev/null and b/public/img/shop/grocery/banner.jpg differ
diff --git a/public/img/shop/grocery/categories/01.png b/public/img/shop/grocery/categories/01.png
new file mode 100644
index 0000000..cc56233
Binary files /dev/null and b/public/img/shop/grocery/categories/01.png differ
diff --git a/public/img/shop/grocery/categories/02.png b/public/img/shop/grocery/categories/02.png
new file mode 100644
index 0000000..9b3018e
Binary files /dev/null and b/public/img/shop/grocery/categories/02.png differ
diff --git a/public/img/shop/grocery/categories/03.png b/public/img/shop/grocery/categories/03.png
new file mode 100644
index 0000000..ef2b231
Binary files /dev/null and b/public/img/shop/grocery/categories/03.png differ
diff --git a/public/img/shop/grocery/categories/04.png b/public/img/shop/grocery/categories/04.png
new file mode 100644
index 0000000..99ce198
Binary files /dev/null and b/public/img/shop/grocery/categories/04.png differ
diff --git a/public/img/shop/grocery/categories/05.png b/public/img/shop/grocery/categories/05.png
new file mode 100644
index 0000000..bdd6bca
Binary files /dev/null and b/public/img/shop/grocery/categories/05.png differ
diff --git a/public/img/shop/grocery/categories/06.png b/public/img/shop/grocery/categories/06.png
new file mode 100644
index 0000000..cd9f13f
Binary files /dev/null and b/public/img/shop/grocery/categories/06.png differ
diff --git a/public/img/shop/grocery/categories/07.png b/public/img/shop/grocery/categories/07.png
new file mode 100644
index 0000000..b0e9dae
Binary files /dev/null and b/public/img/shop/grocery/categories/07.png differ
diff --git a/public/img/shop/grocery/categories/08.png b/public/img/shop/grocery/categories/08.png
new file mode 100644
index 0000000..070cc0e
Binary files /dev/null and b/public/img/shop/grocery/categories/08.png differ
diff --git a/public/img/shop/grocery/categories/09.png b/public/img/shop/grocery/categories/09.png
new file mode 100644
index 0000000..2a9bf81
Binary files /dev/null and b/public/img/shop/grocery/categories/09.png differ
diff --git a/public/img/shop/grocery/categories/10.png b/public/img/shop/grocery/categories/10.png
new file mode 100644
index 0000000..db090ec
Binary files /dev/null and b/public/img/shop/grocery/categories/10.png differ
diff --git a/public/img/shop/grocery/categories/11.png b/public/img/shop/grocery/categories/11.png
new file mode 100644
index 0000000..ce264bf
Binary files /dev/null and b/public/img/shop/grocery/categories/11.png differ
diff --git a/public/img/shop/grocery/product/01.png b/public/img/shop/grocery/product/01.png
new file mode 100644
index 0000000..187b555
Binary files /dev/null and b/public/img/shop/grocery/product/01.png differ
diff --git a/public/img/shop/grocery/product/02.png b/public/img/shop/grocery/product/02.png
new file mode 100644
index 0000000..e7fb7e3
Binary files /dev/null and b/public/img/shop/grocery/product/02.png differ
diff --git a/public/img/shop/grocery/product/03.png b/public/img/shop/grocery/product/03.png
new file mode 100644
index 0000000..3b0b3e4
Binary files /dev/null and b/public/img/shop/grocery/product/03.png differ
diff --git a/public/img/shop/grocery/product/th01.png b/public/img/shop/grocery/product/th01.png
new file mode 100644
index 0000000..5df0d93
Binary files /dev/null and b/public/img/shop/grocery/product/th01.png differ
diff --git a/public/img/shop/grocery/product/th02.png b/public/img/shop/grocery/product/th02.png
new file mode 100644
index 0000000..8e6eb35
Binary files /dev/null and b/public/img/shop/grocery/product/th02.png differ
diff --git a/public/img/shop/grocery/product/th03.png b/public/img/shop/grocery/product/th03.png
new file mode 100644
index 0000000..ed179b9
Binary files /dev/null and b/public/img/shop/grocery/product/th03.png differ
diff --git a/public/img/shop/grocery/thankyou-bg-1.png b/public/img/shop/grocery/thankyou-bg-1.png
new file mode 100644
index 0000000..3075762
Binary files /dev/null and b/public/img/shop/grocery/thankyou-bg-1.png differ
diff --git a/public/img/shop/grocery/thankyou-bg-2.png b/public/img/shop/grocery/thankyou-bg-2.png
new file mode 100644
index 0000000..7ccef03
Binary files /dev/null and b/public/img/shop/grocery/thankyou-bg-2.png differ
diff --git a/public/img/shop/grocery/thumbs/01.png b/public/img/shop/grocery/thumbs/01.png
new file mode 100644
index 0000000..d10a6ed
Binary files /dev/null and b/public/img/shop/grocery/thumbs/01.png differ
diff --git a/public/img/shop/grocery/thumbs/02.png b/public/img/shop/grocery/thumbs/02.png
new file mode 100644
index 0000000..78b6184
Binary files /dev/null and b/public/img/shop/grocery/thumbs/02.png differ
diff --git a/public/img/shop/grocery/thumbs/03.png b/public/img/shop/grocery/thumbs/03.png
new file mode 100644
index 0000000..e8dd8dd
Binary files /dev/null and b/public/img/shop/grocery/thumbs/03.png differ
diff --git a/public/img/shop/grocery/thumbs/04.png b/public/img/shop/grocery/thumbs/04.png
new file mode 100644
index 0000000..49ec21b
Binary files /dev/null and b/public/img/shop/grocery/thumbs/04.png differ
diff --git a/public/img/shop/marketplace/01.jpg b/public/img/shop/marketplace/01.jpg
new file mode 100644
index 0000000..2117631
Binary files /dev/null and b/public/img/shop/marketplace/01.jpg differ
diff --git a/public/img/shop/marketplace/02.jpg b/public/img/shop/marketplace/02.jpg
new file mode 100644
index 0000000..8b02b9e
Binary files /dev/null and b/public/img/shop/marketplace/02.jpg differ
diff --git a/public/img/shop/marketplace/03.jpg b/public/img/shop/marketplace/03.jpg
new file mode 100644
index 0000000..bbdc217
Binary files /dev/null and b/public/img/shop/marketplace/03.jpg differ
diff --git a/public/img/shop/marketplace/04.jpg b/public/img/shop/marketplace/04.jpg
new file mode 100644
index 0000000..08d2e98
Binary files /dev/null and b/public/img/shop/marketplace/04.jpg differ
diff --git a/public/img/shop/marketplace/05.jpg b/public/img/shop/marketplace/05.jpg
new file mode 100644
index 0000000..5870e48
Binary files /dev/null and b/public/img/shop/marketplace/05.jpg differ
diff --git a/public/img/shop/marketplace/06.jpg b/public/img/shop/marketplace/06.jpg
new file mode 100644
index 0000000..231d969
Binary files /dev/null and b/public/img/shop/marketplace/06.jpg differ
diff --git a/public/img/shop/marketplace/07.jpg b/public/img/shop/marketplace/07.jpg
new file mode 100644
index 0000000..df117d7
Binary files /dev/null and b/public/img/shop/marketplace/07.jpg differ
diff --git a/public/img/shop/marketplace/08.jpg b/public/img/shop/marketplace/08.jpg
new file mode 100644
index 0000000..e27b743
Binary files /dev/null and b/public/img/shop/marketplace/08.jpg differ
diff --git a/public/img/shop/marketplace/09.jpg b/public/img/shop/marketplace/09.jpg
new file mode 100644
index 0000000..38b5693
Binary files /dev/null and b/public/img/shop/marketplace/09.jpg differ
diff --git a/public/img/shop/marketplace/10.jpg b/public/img/shop/marketplace/10.jpg
new file mode 100644
index 0000000..33e48fd
Binary files /dev/null and b/public/img/shop/marketplace/10.jpg differ
diff --git a/public/img/shop/marketplace/11.jpg b/public/img/shop/marketplace/11.jpg
new file mode 100644
index 0000000..38052dd
Binary files /dev/null and b/public/img/shop/marketplace/11.jpg differ
diff --git a/public/img/shop/marketplace/12.jpg b/public/img/shop/marketplace/12.jpg
new file mode 100644
index 0000000..6ceb736
Binary files /dev/null and b/public/img/shop/marketplace/12.jpg differ
diff --git a/public/img/shop/marketplace/13.jpg b/public/img/shop/marketplace/13.jpg
new file mode 100644
index 0000000..ca276ff
Binary files /dev/null and b/public/img/shop/marketplace/13.jpg differ
diff --git a/public/img/shop/marketplace/14.jpg b/public/img/shop/marketplace/14.jpg
new file mode 100644
index 0000000..92af3e4
Binary files /dev/null and b/public/img/shop/marketplace/14.jpg differ
diff --git a/public/img/shop/marketplace/15.jpg b/public/img/shop/marketplace/15.jpg
new file mode 100644
index 0000000..0689e54
Binary files /dev/null and b/public/img/shop/marketplace/15.jpg differ
diff --git a/public/img/shop/marketplace/16.jpg b/public/img/shop/marketplace/16.jpg
new file mode 100644
index 0000000..42908e3
Binary files /dev/null and b/public/img/shop/marketplace/16.jpg differ
diff --git a/public/img/shop/marketplace/17.jpg b/public/img/shop/marketplace/17.jpg
new file mode 100644
index 0000000..d5b98b2
Binary files /dev/null and b/public/img/shop/marketplace/17.jpg differ
diff --git a/public/img/shop/marketplace/18.jpg b/public/img/shop/marketplace/18.jpg
new file mode 100644
index 0000000..eb08c1f
Binary files /dev/null and b/public/img/shop/marketplace/18.jpg differ
diff --git a/public/img/shop/marketplace/avatars/01.png b/public/img/shop/marketplace/avatars/01.png
new file mode 100644
index 0000000..4847dc3
Binary files /dev/null and b/public/img/shop/marketplace/avatars/01.png differ
diff --git a/public/img/shop/marketplace/avatars/02.png b/public/img/shop/marketplace/avatars/02.png
new file mode 100644
index 0000000..9aa642b
Binary files /dev/null and b/public/img/shop/marketplace/avatars/02.png differ
diff --git a/public/img/shop/marketplace/avatars/03.png b/public/img/shop/marketplace/avatars/03.png
new file mode 100644
index 0000000..f35e069
Binary files /dev/null and b/public/img/shop/marketplace/avatars/03.png differ
diff --git a/public/img/shop/marketplace/avatars/04.png b/public/img/shop/marketplace/avatars/04.png
new file mode 100644
index 0000000..be8d88c
Binary files /dev/null and b/public/img/shop/marketplace/avatars/04.png differ
diff --git a/public/img/shop/marketplace/single/01.jpg b/public/img/shop/marketplace/single/01.jpg
new file mode 100644
index 0000000..cbe771a
Binary files /dev/null and b/public/img/shop/marketplace/single/01.jpg differ
diff --git a/public/img/shop/marketplace/single/02.jpg b/public/img/shop/marketplace/single/02.jpg
new file mode 100644
index 0000000..06f0962
Binary files /dev/null and b/public/img/shop/marketplace/single/02.jpg differ
diff --git a/public/img/shop/marketplace/single/03.jpg b/public/img/shop/marketplace/single/03.jpg
new file mode 100644
index 0000000..0916f76
Binary files /dev/null and b/public/img/shop/marketplace/single/03.jpg differ
diff --git a/public/img/shop/marketplace/single/04.jpg b/public/img/shop/marketplace/single/04.jpg
new file mode 100644
index 0000000..8a42ab0
Binary files /dev/null and b/public/img/shop/marketplace/single/04.jpg differ
diff --git a/public/img/shop/marketplace/single/avatar.png b/public/img/shop/marketplace/single/avatar.png
new file mode 100644
index 0000000..d66f9e0
Binary files /dev/null and b/public/img/shop/marketplace/single/avatar.png differ
diff --git a/public/img/shop/marketplace/single/comments/01.jpg b/public/img/shop/marketplace/single/comments/01.jpg
new file mode 100644
index 0000000..9927924
Binary files /dev/null and b/public/img/shop/marketplace/single/comments/01.jpg differ
diff --git a/public/img/shop/marketplace/single/comments/02.jpg b/public/img/shop/marketplace/single/comments/02.jpg
new file mode 100644
index 0000000..8900ac3
Binary files /dev/null and b/public/img/shop/marketplace/single/comments/02.jpg differ
diff --git a/public/img/shop/marketplace/single/comments/03.jpg b/public/img/shop/marketplace/single/comments/03.jpg
new file mode 100644
index 0000000..1b7937f
Binary files /dev/null and b/public/img/shop/marketplace/single/comments/03.jpg differ
diff --git a/public/img/shop/marketplace/single/th02.jpg b/public/img/shop/marketplace/single/th02.jpg
new file mode 100644
index 0000000..fa5100a
Binary files /dev/null and b/public/img/shop/marketplace/single/th02.jpg differ
diff --git a/public/img/shop/marketplace/single/th03.jpg b/public/img/shop/marketplace/single/th03.jpg
new file mode 100644
index 0000000..c79ec8e
Binary files /dev/null and b/public/img/shop/marketplace/single/th03.jpg differ
diff --git a/public/index.php b/public/index.php
new file mode 100644
index 0000000..ee8f07e
--- /dev/null
+++ b/public/index.php
@@ -0,0 +1,20 @@
+<?php
+
+use Illuminate\Foundation\Application;
+use Illuminate\Http\Request;
+
+define('LARAVEL_START', microtime(true));
+
+// Determine if the application is in maintenance mode...
+if (file_exists($maintenance = __DIR__.'/../storage/framework/maintenance.php')) {
+    require $maintenance;
+}
+
+// Register the Composer autoloader...
+require __DIR__.'/../vendor/autoload.php';
+
+// Bootstrap Laravel and handle the request...
+/** @var Application $app */
+$app = require_once __DIR__.'/../bootstrap/app.php';
+
+$app->handleRequest(Request::capture());
diff --git a/public/manifest.json b/public/manifest.json
new file mode 100644
index 0000000..3528ea6
--- /dev/null
+++ b/public/manifest.json
@@ -0,0 +1,33 @@
+{
+  "name": "Cartzilla",
+  "short_name": "Cartzilla",
+  "description": "Multipurpose E-Commerce Bootstrap Template",
+  "lang" : "en",
+  "dir": "ltr",
+  "start_url": "/index.html",
+  "scope": "/",
+  "icons": [
+    {
+      "src": "/app-icons/icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/app-icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/app-icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "background_color": "#fff",
+  "theme_color": "#131920",
+  "display": "standalone",
+  "orientation": "portrait-primary"
+}
diff --git a/public/robots.txt b/public/robots.txt
new file mode 100644
index 0000000..eb05362
--- /dev/null
+++ b/public/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Disallow:
diff --git a/resources/fonts/inter-variable-latin-ext.woff2 b/resources/fonts/inter-variable-latin-ext.woff2
new file mode 100644
index 0000000..725ee6b
Binary files /dev/null and b/resources/fonts/inter-variable-latin-ext.woff2 differ
diff --git a/resources/fonts/inter-variable-latin.woff2 b/resources/fonts/inter-variable-latin.woff2
new file mode 100644
index 0000000..3edd2e5
Binary files /dev/null and b/resources/fonts/inter-variable-latin.woff2 differ
diff --git a/resources/icons/cartzilla-icons.min.css b/resources/icons/cartzilla-icons.min.css
new file mode 100644
index 0000000..406e563
--- /dev/null
+++ b/resources/icons/cartzilla-icons.min.css
@@ -0,0 +1 @@
+@font-face{font-display:block;font-family:cartzilla-icons;src:url(cartzilla-icons.woff2) format("woff2")}[class*=" ci-"]:before,[class^=ci-]:before{font-family:cartzilla-icons!important;font-style:normal;font-variant:normal;font-weight:400!important;line-height:1;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.ci-activity:before{content:"\f101"}.ci-airbnb:before{content:"\f102"}.ci-airplay:before{content:"\f103"}.ci-alert-circle:before{content:"\f104"}.ci-alert-octagon:before{content:"\f105"}.ci-alert-triangle:before{content:"\f106"}.ci-align-center:before{content:"\f107"}.ci-align-justify:before{content:"\f108"}.ci-align-left:before{content:"\f109"}.ci-align-right:before{content:"\f10a"}.ci-anchor:before{content:"\f10b"}.ci-aperture:before{content:"\f10c"}.ci-apple:before{content:"\f10d"}.ci-archive:before{content:"\f10e"}.ci-arrow-down-circle:before{content:"\f10f"}.ci-arrow-down-left:before{content:"\f110"}.ci-arrow-down-right:before{content:"\f111"}.ci-arrow-down:before{content:"\f112"}.ci-arrow-left-circle:before{content:"\f113"}.ci-arrow-left:before{content:"\f114"}.ci-arrow-right-circle:before{content:"\f115"}.ci-arrow-right:before{content:"\f116"}.ci-arrow-up-circle:before{content:"\f117"}.ci-arrow-up-left:before{content:"\f118"}.ci-arrow-up-right:before{content:"\f119"}.ci-arrow-up:before{content:"\f11a"}.ci-at-sign:before{content:"\f11b"}.ci-auto:before{content:"\f11c"}.ci-avocado:before{content:"\f11d"}.ci-award:before{content:"\f11e"}.ci-banned:before{content:"\f11f"}.ci-bar-chart-2:before{content:"\f120"}.ci-bar-chart:before{content:"\f121"}.ci-battery-2:before{content:"\f122"}.ci-battery-charging:before{content:"\f123"}.ci-battery:before{content:"\f124"}.ci-behance:before{content:"\f125"}.ci-bell-off:before{content:"\f126"}.ci-bell:before{content:"\f127"}.ci-blogger:before{content:"\f128"}.ci-bluetooth:before{content:"\f129"}.ci-bold:before{content:"\f12a"}.ci-book-open:before{content:"\f12b"}.ci-book:before{content:"\f12c"}.ci-bookmark:before{content:"\f12d"}.ci-box:before{content:"\f12e"}.ci-briefcase:before{content:"\f12f"}.ci-broccoli:before{content:"\f130"}.ci-bullet:before{content:"\f131"}.ci-calendar:before{content:"\f132"}.ci-camera-2:before{content:"\f133"}.ci-camera-off:before{content:"\f134"}.ci-camera:before{content:"\f135"}.ci-cast:before{content:"\f136"}.ci-chat:before{content:"\f137"}.ci-check-circle:before{content:"\f138"}.ci-check-search:before{content:"\f139"}.ci-check-shield:before{content:"\f13a"}.ci-check-square:before{content:"\f13b"}.ci-check:before{content:"\f13c"}.ci-chevron-down:before{content:"\f13d"}.ci-chevron-left:before{content:"\f13e"}.ci-chevron-right:before{content:"\f13f"}.ci-chevron-up:before{content:"\f140"}.ci-chevrons-down:before{content:"\f141"}.ci-chevrons-left:before{content:"\f142"}.ci-chevrons-right:before{content:"\f143"}.ci-chevrons-up:before{content:"\f144"}.ci-click:before{content:"\f145"}.ci-clipboard:before{content:"\f146"}.ci-clock:before{content:"\f147"}.ci-close-circle:before{content:"\f148"}.ci-close-octagon:before{content:"\f149"}.ci-close-square:before{content:"\f14a"}.ci-close:before{content:"\f14b"}.ci-cloud-drizzle:before{content:"\f14c"}.ci-cloud-lightning:before{content:"\f14d"}.ci-cloud-off:before{content:"\f14e"}.ci-cloud-rain:before{content:"\f14f"}.ci-cloud-snow:before{content:"\f150"}.ci-cloud:before{content:"\f151"}.ci-code:before{content:"\f152"}.ci-codepen:before{content:"\f153"}.ci-coffee:before{content:"\f154"}.ci-columns:before{content:"\f155"}.ci-command:before{content:"\f156"}.ci-compass:before{content:"\f157"}.ci-computer:before{content:"\f158"}.ci-copy:before{content:"\f159"}.ci-corner-down-left:before{content:"\f15a"}.ci-corner-down-right:before{content:"\f15b"}.ci-corner-left-down:before{content:"\f15c"}.ci-corner-left-up:before{content:"\f15d"}.ci-corner-right-down:before{content:"\f15e"}.ci-corner-right-up:before{content:"\f15f"}.ci-corner-up-left:before{content:"\f160"}.ci-corner-up-right:before{content:"\f161"}.ci-credit-card:before{content:"\f162"}.ci-crop:before{content:"\f163"}.ci-crosshair:before{content:"\f164"}.ci-database:before{content:"\f165"}.ci-delete:before{content:"\f166"}.ci-delivery-2:before{content:"\f167"}.ci-delivery:before{content:"\f168"}.ci-disc:before{content:"\f169"}.ci-discord:before{content:"\f16a"}.ci-disqus:before{content:"\f16b"}.ci-divide:before{content:"\f16c"}.ci-dollar-sign:before{content:"\f16d"}.ci-download-cloud:before{content:"\f16e"}.ci-download:before{content:"\f16f"}.ci-dribbble:before{content:"\f170"}.ci-dropbox:before{content:"\f171"}.ci-droplet:before{content:"\f172"}.ci-edit-2:before{content:"\f173"}.ci-edit-3:before{content:"\f174"}.ci-edit:before{content:"\f175"}.ci-envato:before{content:"\f176"}.ci-evernote:before{content:"\f177"}.ci-external-link:before{content:"\f178"}.ci-eye-off:before{content:"\f179"}.ci-eye:before{content:"\f17a"}.ci-facebook:before{content:"\f17b"}.ci-fast-forward:before{content:"\f17c"}.ci-feather:before{content:"\f17d"}.ci-file-minus:before{content:"\f17e"}.ci-file-plus:before{content:"\f17f"}.ci-file-text:before{content:"\f180"}.ci-file:before{content:"\f181"}.ci-film:before{content:"\f182"}.ci-filter:before{content:"\f183"}.ci-flag:before{content:"\f184"}.ci-flickr:before{content:"\f185"}.ci-folder-minus:before{content:"\f186"}.ci-folder-plus:before{content:"\f187"}.ci-folder:before{content:"\f188"}.ci-food:before{content:"\f189"}.ci-foursquare:before{content:"\f18a"}.ci-frown:before{content:"\f18b"}.ci-game:before{content:"\f18c"}.ci-gift:before{content:"\f18d"}.ci-github:before{content:"\f18e"}.ci-globe:before{content:"\f18f"}.ci-gluten-free:before{content:"\f190"}.ci-google-drive:before{content:"\f191"}.ci-google-play:before{content:"\f192"}.ci-google:before{content:"\f193"}.ci-grid-2:before{content:"\f194"}.ci-grid:before{content:"\f195"}.ci-hanger:before{content:"\f196"}.ci-hangouts:before{content:"\f197"}.ci-hard-drive-2:before{content:"\f198"}.ci-hard-drive:before{content:"\f199"}.ci-hash:before{content:"\f19a"}.ci-headphones-2:before{content:"\f19b"}.ci-headphones:before{content:"\f19c"}.ci-heart-filled:before{content:"\f19d"}.ci-heart:before{content:"\f19e"}.ci-help-circle:before{content:"\f19f"}.ci-home:before{content:"\f1a0"}.ci-id-card:before{content:"\f1a1"}.ci-image:before{content:"\f1a2"}.ci-inbox:before{content:"\f1a3"}.ci-info:before{content:"\f1a4"}.ci-instagram:before{content:"\f1a5"}.ci-italic:before{content:"\f1a6"}.ci-key:before{content:"\f1a7"}.ci-kickstarter:before{content:"\f1a8"}.ci-layers-2:before{content:"\f1a9"}.ci-layers:before{content:"\f1aa"}.ci-layout:before{content:"\f1ab"}.ci-leaf:before{content:"\f1ac"}.ci-life-buoy:before{content:"\f1ad"}.ci-link-2:before{content:"\f1ae"}.ci-link:before{content:"\f1af"}.ci-linkedin:before{content:"\f1b0"}.ci-list:before{content:"\f1b1"}.ci-loader:before{content:"\f1b2"}.ci-lock:before{content:"\f1b3"}.ci-log-in:before{content:"\f1b4"}.ci-log-out:before{content:"\f1b5"}.ci-mail:before{content:"\f1b6"}.ci-map-pin:before{content:"\f1b7"}.ci-map:before{content:"\f1b8"}.ci-maximize-2:before{content:"\f1b9"}.ci-maximize:before{content:"\f1ba"}.ci-medium:before{content:"\f1bb"}.ci-meh:before{content:"\f1bc"}.ci-menu:before{content:"\f1bd"}.ci-message-circle:before{content:"\f1be"}.ci-message-square:before{content:"\f1bf"}.ci-messenger:before{content:"\f1c0"}.ci-mic-off:before{content:"\f1c1"}.ci-mic:before{content:"\f1c2"}.ci-minimize-2:before{content:"\f1c3"}.ci-minimize:before{content:"\f1c4"}.ci-minus-circle:before{content:"\f1c5"}.ci-minus-square:before{content:"\f1c6"}.ci-minus:before{content:"\f1c7"}.ci-monitor-2:before{content:"\f1c8"}.ci-monitor:before{content:"\f1c9"}.ci-moon:before{content:"\f1ca"}.ci-more-horizontal:before{content:"\f1cb"}.ci-more-vertical:before{content:"\f1cc"}.ci-mouse-pointer:before{content:"\f1cd"}.ci-move:before{content:"\f1ce"}.ci-music:before{content:"\f1cf"}.ci-myspace:before{content:"\f1d0"}.ci-navigation-2:before{content:"\f1d1"}.ci-navigation:before{content:"\f1d2"}.ci-odnoklassniki:before{content:"\f1d3"}.ci-open-source:before{content:"\f1d4"}.ci-package:before{content:"\f1d5"}.ci-paint:before{content:"\f1d6"}.ci-paperclip:before{content:"\f1d7"}.ci-patreon:before{content:"\f1d8"}.ci-pause-circle:before{content:"\f1d9"}.ci-pause:before{content:"\f1da"}.ci-pen-tool:before{content:"\f1db"}.ci-percent:before{content:"\f1dc"}.ci-phone-call:before{content:"\f1dd"}.ci-phone-forwarded:before{content:"\f1de"}.ci-phone-incoming:before{content:"\f1df"}.ci-phone-missed:before{content:"\f1e0"}.ci-phone-off:before{content:"\f1e1"}.ci-phone-outgoing:before{content:"\f1e2"}.ci-phone:before{content:"\f1e3"}.ci-pie-chart:before{content:"\f1e4"}.ci-pinterest:before{content:"\f1e5"}.ci-play-circle:before{content:"\f1e6"}.ci-play-filled:before{content:"\f1e7"}.ci-play:before{content:"\f1e8"}.ci-plus-circle:before{content:"\f1e9"}.ci-plus-square:before{content:"\f1ea"}.ci-plus:before{content:"\f1eb"}.ci-power:before{content:"\f1ec"}.ci-powerbank:before{content:"\f1ed"}.ci-printer-2:before{content:"\f1ee"}.ci-printer:before{content:"\f1ef"}.ci-product-hunt:before{content:"\f1f0"}.ci-quora:before{content:"\f1f1"}.ci-radio:before{content:"\f1f2"}.ci-reddit:before{content:"\f1f3"}.ci-refresh-ccw:before{content:"\f1f4"}.ci-refresh-cw:before{content:"\f1f5"}.ci-repeat:before{content:"\f1f6"}.ci-rewind:before{content:"\f1f7"}.ci-rocket:before{content:"\f1f8"}.ci-rotate-ccw:before{content:"\f1f9"}.ci-rotate-cw:before{content:"\f1fa"}.ci-rss-2:before{content:"\f1fb"}.ci-rss:before{content:"\f1fc"}.ci-ruler:before{content:"\f1fd"}.ci-save:before{content:"\f1fe"}.ci-scan:before{content:"\f1ff"}.ci-schedule:before{content:"\f200"}.ci-scissors:before{content:"\f201"}.ci-search:before{content:"\f202"}.ci-send:before{content:"\f203"}.ci-server:before{content:"\f204"}.ci-settings:before{content:"\f205"}.ci-share-2:before{content:"\f206"}.ci-share:before{content:"\f207"}.ci-shield-off:before{content:"\f208"}.ci-shield:before{content:"\f209"}.ci-shopping-bag:before{content:"\f20a"}.ci-shopping-cart:before{content:"\f20b"}.ci-shuffle:before{content:"\f20c"}.ci-sidebar:before{content:"\f20d"}.ci-skip-back:before{content:"\f20e"}.ci-skip-forward:before{content:"\f20f"}.ci-skype:before{content:"\f210"}.ci-slack:before{content:"\f211"}.ci-sliders:before{content:"\f212"}.ci-smartphone-2:before{content:"\f213"}.ci-smartphone:before{content:"\f214"}.ci-smile:before{content:"\f215"}.ci-snapchat:before{content:"\f216"}.ci-sort:before{content:"\f217"}.ci-soundcloud:before{content:"\f218"}.ci-speaker-2:before{content:"\f219"}.ci-speaker:before{content:"\f21a"}.ci-spotify:before{content:"\f21b"}.ci-stack-overflow:before{content:"\f21c"}.ci-star-filled:before{content:"\f21d"}.ci-star-half:before{content:"\f21e"}.ci-star:before{content:"\f21f"}.ci-steam:before{content:"\f220"}.ci-stop-circle:before{content:"\f221"}.ci-stumbleupon:before{content:"\f222"}.ci-sun:before{content:"\f223"}.ci-sunrise:before{content:"\f224"}.ci-sunset:before{content:"\f225"}.ci-table:before{content:"\f226"}.ci-tablet:before{content:"\f227"}.ci-tag:before{content:"\f228"}.ci-target:before{content:"\f229"}.ci-telegram:before{content:"\f22a"}.ci-terminal:before{content:"\f22b"}.ci-thermometer:before{content:"\f22c"}.ci-thumbs-down:before{content:"\f22d"}.ci-thumbs-up:before{content:"\f22e"}.ci-ticket:before{content:"\f22f"}.ci-tiktok:before{content:"\f230"}.ci-tinder:before{content:"\f231"}.ci-tool:before{content:"\f232"}.ci-trash-empty:before{content:"\f233"}.ci-trash:before{content:"\f234"}.ci-trello:before{content:"\f235"}.ci-trending-down:before{content:"\f236"}.ci-trending-up:before{content:"\f237"}.ci-triangle:before{content:"\f238"}.ci-truck:before{content:"\f239"}.ci-tumblr:before{content:"\f23a"}.ci-tv:before{content:"\f23b"}.ci-twitch:before{content:"\f23c"}.ci-type:before{content:"\f23d"}.ci-umbrella:before{content:"\f23e"}.ci-unlock:before{content:"\f23f"}.ci-upload-cloud:before{content:"\f240"}.ci-upload:before{content:"\f241"}.ci-user-check:before{content:"\f242"}.ci-user-plus:before{content:"\f243"}.ci-user-x:before{content:"\f244"}.ci-user:before{content:"\f245"}.ci-viber:before{content:"\f246"}.ci-video-off:before{content:"\f247"}.ci-video:before{content:"\f248"}.ci-vimeo:before{content:"\f249"}.ci-vk:before{content:"\f24a"}.ci-voicemail:before{content:"\f24b"}.ci-volume-1:before{content:"\f24c"}.ci-volume-2:before{content:"\f24d"}.ci-volume-x:before{content:"\f24e"}.ci-volume:before{content:"\f24f"}.ci-watch-2:before{content:"\f250"}.ci-watch:before{content:"\f251"}.ci-wechat:before{content:"\f252"}.ci-whatsapp:before{content:"\f253"}.ci-wifi-off:before{content:"\f254"}.ci-wifi:before{content:"\f255"}.ci-wind:before{content:"\f256"}.ci-x:before{content:"\f257"}.ci-xing:before{content:"\f258"}.ci-yelp:before{content:"\f259"}.ci-youtube:before{content:"\f25a"}.ci-zap-off:before{content:"\f25b"}.ci-zap:before{content:"\f25c"}.ci-zoom-in:before{content:"\f25d"}.ci-zoom-out:before{content:"\f25e"}
\ No newline at end of file
diff --git a/resources/icons/cartzilla-icons.woff2 b/resources/icons/cartzilla-icons.woff2
new file mode 100644
index 0000000..bcc3fed
Binary files /dev/null and b/resources/icons/cartzilla-icons.woff2 differ
diff --git a/resources/js/components/autofocus.js b/resources/js/components/autofocus.js
new file mode 100644
index 0000000..c6f1498
--- /dev/null
+++ b/resources/js/components/autofocus.js
@@ -0,0 +1,27 @@
+/**
+ * Focus input field automatically upon openning modal, collapse, offcanvas, dropdown or window
+ */
+
+export default (() => {
+    const autofocus = document.querySelectorAll('[data-autofocus]')
+
+    if (autofocus.length === 0) return
+
+    autofocus.forEach((input) => {
+        const containerType = input.dataset.autofocus // modal / collapse / offcanvas / dropdown / window
+
+        if (
+            containerType === 'modal' ||
+            containerType === 'collapse' ||
+            containerType === 'offcanvas' ||
+            containerType === 'dropdown'
+        ) {
+            const container = input.closest('.' + containerType)
+            container.addEventListener(`shown.bs.${containerType}`, () => {
+                input.focus()
+            })
+        } else {
+            input.focus()
+        }
+    })
+})()
diff --git a/resources/js/components/binded-label.js b/resources/js/components/binded-label.js
new file mode 100644
index 0000000..cbe1eb1
--- /dev/null
+++ b/resources/js/components/binded-label.js
@@ -0,0 +1,33 @@
+/**
+ * Update the text inside the binded element taken from data-label upon clicking
+ */
+
+export default (() => {
+  const bindedLabels = document.querySelectorAll('[data-binded-label]')
+
+  if (bindedLabels.length === 0) return
+
+  bindedLabels.forEach((container) => {
+    try {
+      const targetElement = document.querySelector(
+        container.dataset.bindedLabel
+      )
+      if (!targetElement) {
+        throw new Error(
+          `Target element not found for data-binded-label: ${container.dataset.bindedLabel}`
+        )
+      }
+
+      container.addEventListener('click', (event) => {
+        const clickedElement = event.target.closest('[data-label]')
+        if (!clickedElement) return
+
+        const dataLabel = clickedElement.dataset.label
+
+        targetElement.textContent = dataLabel
+      })
+    } catch (error) {
+      console.error(error)
+    }
+  })
+})()
diff --git a/resources/js/components/carousel.js b/resources/js/components/carousel.js
new file mode 100644
index 0000000..89d4c6b
--- /dev/null
+++ b/resources/js/components/carousel.js
@@ -0,0 +1,60 @@
+/**
+ * Content carousel (slider) with extensive options to control behaviour and appearance
+ * @requires https://swiperjs.com/
+ */
+
+import Swiper from 'swiper/bundle'
+
+export default (() => {
+  // Get all elements with the 'swiper' class
+  const carousels = document.querySelectorAll('[data-swiper]')
+
+  if (carousels.length === 0) return
+
+  // Iterate over each element using the built-in forEach method
+  /* eslint-disable no-unused-vars */
+  carousels.forEach((value, index) => {
+    let options, images
+
+    // Parse swiper options from the data attribute
+    if (value.dataset.swiper !== undefined && value.dataset.swiper !== '') {
+      options = JSON.parse(value.dataset.swiper)
+      images = options?.thumbnails?.images
+    }
+
+    // Create a new Swiper instance
+    /* eslint-disable no-undef */
+    const swiper = new Swiper(value, options)
+    /* eslint-enable no-undef */
+
+    // Check if a controlled slider is specified
+    if (options?.controlSlider) {
+      let controlledSliders = []
+
+      if (Array.isArray(options.controlSlider)) {
+        // Handle multiple sliders
+        controlledSliders = options.controlSlider.map((selector) =>
+          document.querySelector(selector)
+        )
+      } else {
+        // Handle single slider
+        controlledSliders.push(document.querySelector(options.controlSlider))
+      }
+
+      const swiperControlledInstances = controlledSliders.map(
+        (controlledSlider) => {
+          const controlledSliderOptions =
+            controlledSlider?.dataset.swiper &&
+            JSON.parse(controlledSlider.dataset.swiper)
+
+          // Create a new Swiper instance for each controlled slider
+          /* eslint-disable no-undef */
+          return new Swiper(controlledSlider, controlledSliderOptions)
+          /* eslint-enable no-undef */
+        }
+      )
+
+      swiper.controller.control = swiperControlledInstances
+    }
+  })
+})()
diff --git a/resources/js/components/chart.js b/resources/js/components/chart.js
new file mode 100644
index 0000000..d49a03a
--- /dev/null
+++ b/resources/js/components/chart.js
@@ -0,0 +1,22 @@
+/**
+ * Charts
+ * @requires https://www.chartjs.org/
+ */
+import Chart from 'chart.js/auto'
+
+export default (() => {
+  const charts = document.querySelectorAll('[data-chart]')
+
+  if (charts.length === 0) return
+
+  charts.forEach((chartElement) => {
+    const { chart: chartData } = chartElement.dataset
+    const options = JSON.parse(chartData)
+
+    if (typeof Chart !== 'undefined') {
+      new Chart(chartElement, options) // eslint-disable-line no-undef
+    } else {
+      console.error('Chart is not defined.')
+    }
+  })
+})()
diff --git a/resources/js/components/code-highlight.js b/resources/js/components/code-highlight.js
new file mode 100644
index 0000000..d84debc
--- /dev/null
+++ b/resources/js/components/code-highlight.js
@@ -0,0 +1,55 @@
+/**
+ * Code highlighting
+ * @requires https://highlightjs.org/
+ */
+
+export default (() => {
+  /* eslint-disable no-undef */
+  document.querySelectorAll('.code-highlight code').forEach((el) => {
+    // Extracting language from the class name
+    const languageClass = Array.from(el.classList).find((cls) =>
+      cls.startsWith('language-')
+    )
+    const language = languageClass ? languageClass.split('-')[1] : null
+
+    // Proceed only if a language is found
+    if (language) {
+      hljs.configure({
+        ignoreUnescapedHTML: true,
+        languages: [language], // Adding the detected language to the array
+      })
+      hljs.highlightElement(el)
+    }
+  })
+  /* eslint-enable no-undef */
+
+  // Copy to clipboard button
+  const buttons = document.querySelectorAll('[data-copy-code]')
+  buttons.forEach((button) => {
+    button.addEventListener('click', () => {
+      const codeBlockId = button.getAttribute('data-copy-code').substring(1)
+      const codeBlock = document.getElementById(codeBlockId)
+      if (codeBlock) {
+        const codeText = codeBlock.textContent || codeBlock.innerText
+        navigator.clipboard
+          .writeText(codeText)
+          .then(() => {
+            button.classList.remove('btn-outline-secondary')
+            button.classList.add('btn-outline-success', 'text-success')
+            button.innerHTML = '<i class="ci-check fs-sm me-1"></i> Copied'
+
+            setTimeout(() => {
+              button.classList.remove('btn-outline-success', 'text-success')
+              button.classList.add('btn-outline-secondary')
+              button.innerHTML = '<i class="ci-copy fs-sm me-1"></i> Copy'
+            }, 2000)
+          })
+          .catch((err) => {
+            console.error('Failed to copy code: ', err)
+          })
+      } else {
+        console.error('Code block not found: ' + codeBlockId)
+      }
+    })
+  })
+})()
diff --git a/resources/js/components/copy-text.js b/resources/js/components/copy-text.js
new file mode 100644
index 0000000..6a51a41
--- /dev/null
+++ b/resources/js/components/copy-text.js
@@ -0,0 +1,38 @@
+/**
+ * Copy text string to clipboard from the target element
+ */
+
+export default (() => {
+  // Function to copy text to clipboard
+  const copyToClipboard = (text) => {
+    return navigator.clipboard.writeText(text)
+  }
+
+  // Function to handle button click
+  const handleButtonClick = (event) => {
+    const button = event.target
+    const originalInnerHTML = button.innerHTML
+    const doneLabel = button.dataset.doneLabel || 'Copied'
+    const selector = button.getAttribute('data-copy-text-from')
+    const targetElement = document.querySelector(selector)
+    const textToCopy = targetElement.value || targetElement.textContent
+
+    // Copy the text to the clipboard and update button state
+    copyToClipboard(textToCopy)
+      .then(() => {
+        button.innerHTML = `<i class="ci-check me-1"></i> ${doneLabel}`
+        setTimeout(() => {
+          button.innerHTML = originalInnerHTML
+        }, 2000)
+      })
+      .catch((err) => {
+        console.error('Error in copying text: ', err)
+      })
+  }
+
+  // Add event listeners to all buttons with the data-copy-text-from attribute
+  const buttons = document.querySelectorAll('button[data-copy-text-from]')
+  buttons.forEach((button) =>
+    button.addEventListener('click', handleButtonClick)
+  )
+})()
diff --git a/resources/js/components/count-input.js b/resources/js/components/count-input.js
new file mode 100644
index 0000000..227dbdb
--- /dev/null
+++ b/resources/js/components/count-input.js
@@ -0,0 +1,67 @@
+/**
+ * Count input with increment (+) and decrement (-) buttons
+ */
+
+export default (() => {
+  const countInputs = document.querySelectorAll('.count-input')
+
+  if (countInputs.length === 0) return
+
+  const handleIncrement = (event) => {
+    const input = event.currentTarget.parentNode.querySelector('.form-control')
+    const maxValue = parseInt(input.getAttribute('max')) || Infinity
+
+    if (input.value < maxValue) {
+      input.value++
+      updateButtonStates(input)
+    }
+  }
+
+  const handleDecrement = (event) => {
+    const input = event.currentTarget.parentNode.querySelector('.form-control')
+    const minValue = parseInt(input.getAttribute('min')) || 0
+
+    if (input.value > minValue) {
+      input.value--
+      updateButtonStates(input)
+    }
+  }
+
+  const updateButtonStates = (input) => {
+    const decrementBtn = input.parentNode.querySelector('[data-decrement]')
+    const incrementBtn = input.parentNode.querySelector('[data-increment]')
+    const minValue = parseInt(input.getAttribute('min')) || 0
+    const maxValue = parseInt(input.getAttribute('max')) || Infinity
+
+    decrementBtn.disabled = input.value <= minValue
+    incrementBtn.disabled = input.value >= maxValue
+
+    const parent = input.closest('.count-input')
+    if (!parent.classList.contains('count-input-collapsible')) return
+
+    const inputValue = incrementBtn.querySelector('[data-count-input-value]')
+
+    if (input.value > 0) {
+      parent.classList.remove('collapsed')
+      if (inputValue) {
+        inputValue.textContent = input.value
+      }
+    } else {
+      parent.classList.add('collapsed')
+      if (inputValue) {
+        inputValue.textContent = ''
+      }
+    }
+  }
+
+  countInputs.forEach((component) => {
+    const incrementBtn = component.querySelector('[data-increment]')
+    const decrementBtn = component.querySelector('[data-decrement]')
+    const input = component.querySelector('.form-control')
+
+    incrementBtn.addEventListener('click', handleIncrement)
+    decrementBtn.addEventListener('click', handleDecrement)
+
+    updateButtonStates(input)
+  })
+})()
diff --git a/resources/js/components/countdown.js b/resources/js/components/countdown.js
new file mode 100644
index 0000000..ded4f3d
--- /dev/null
+++ b/resources/js/components/countdown.js
@@ -0,0 +1,50 @@
+/**
+ * Countdown timer
+ * @requires https://github.com/letstri/timezz
+ */
+
+// import timezz from 'https://cdn.jsdelivr.net/npm/timezz@9.0.2/+esm'
+//
+
+import {timezz} from "timezz";
+
+export default (() => {
+  const timers = document.querySelectorAll('[data-countdown-date]')
+
+  if (timers.length === 0) return
+
+  // Date form demo purpose. This function adds 13 days to user's current date
+  /* eslint-disable no-unused-vars */
+  const demoDate = () => {
+    const currentDate = new Date()
+
+    currentDate.setDate(currentDate.getDate() + 13)
+
+    const year = currentDate.getFullYear()
+    const month = (currentDate.getMonth() + 1).toString().padStart(2, '0')
+    const day = currentDate.getDate().toString().padStart(2, '0')
+    const hours = '12'
+    const minutes = '00'
+    const seconds = '00'
+
+    const formattedDate = `${month}/${day}/${year} ${hours}:${minutes}:${seconds}`
+
+    return formattedDate
+  }
+  /* eslint-enable no-unused-vars */
+
+  timers.forEach((timer) => {
+    let date = timer.dataset.countdownDate
+
+    if (date === 'demoDate') {
+      date = demoDate()
+    }
+
+    /* eslint-disable no-undef */
+    timezz(timer, {
+      date,
+      // add more options here
+    })
+    /* eslint-enable no-undef */
+  })
+})()
diff --git a/resources/js/components/date-picker.js b/resources/js/components/date-picker.js
new file mode 100644
index 0000000..0d09b7e
--- /dev/null
+++ b/resources/js/components/date-picker.js
@@ -0,0 +1,35 @@
+/**
+ * Date / time picker
+ * @requires https://github.com/flatpickr/flatpickr
+ */
+import flatpickr from 'flatpickr'
+export default (() => {
+  const pickers = document.querySelectorAll('[data-datepicker]')
+
+  if (pickers.length === 0) return
+
+  const defaultOptions = {
+    disableMobile: 'true',
+  }
+
+  pickers.forEach((picker) => {
+    let dataAttr = picker.getAttribute('data-datepicker'),
+      userOptions,
+      options
+
+    if (dataAttr !== '') userOptions = JSON.parse(dataAttr)
+
+    /* eslint-disable indent, no-undef */
+    const linkedInput =
+      userOptions?.linkedInput !== undefined
+        ? {
+            plugins: [new rangePlugin({ input: userOptions.linkedInput })],
+          }
+        : {}
+    /* eslint-enable indent, no-undef */
+
+    options = { ...defaultOptions, ...userOptions, ...linkedInput }
+
+    flatpickr(picker, options) // eslint-disable-line no-undef
+  })
+})()
diff --git a/resources/js/components/dropdown-hover.js b/resources/js/components/dropdown-hover.js
new file mode 100644
index 0000000..eddc8bf
--- /dev/null
+++ b/resources/js/components/dropdown-hover.js
@@ -0,0 +1,48 @@
+/**
+ * Open Dropdown on "hover" (Bootstrap's default is "click")
+ * @requires https://getbootstrap.com
+ * @requires https://popper.js.org/
+ */
+
+import {Dropdown} from "bootstrap"
+
+export default (() => {
+    if ((!'ontouchstart') in window || !navigator.maxTouchPoints) {
+        const dropdownTriggerList = document.querySelectorAll(
+            '[data-bs-toggle="dropdown"][data-bs-trigger="hover"]'
+        )
+
+        /* eslint-disable no-unused-vars, no-undef */
+        const dropdownList = [...dropdownTriggerList].map((dropdownTriggerEl) => {
+            const bsDropdown = new Dropdown(dropdownTriggerEl)
+
+            dropdownTriggerEl.addEventListener('click', (e) => {
+                if (e.currentTarget.getAttribute('href') === '#') {
+                    e.preventDefault()
+                }
+            })
+
+            dropdownTriggerEl.addEventListener('mouseover', () => {
+                dropdownTriggerEl.dataset.bsToggle = 'dropdown-hover'
+                bsDropdown.show()
+                dropdownTriggerEl.blur()
+            })
+
+            dropdownTriggerEl.parentNode.addEventListener('mouseleave', () => {
+                dropdownTriggerEl.dataset.bsToggle = 'dropdown'
+                bsDropdown.hide()
+            })
+
+            dropdownTriggerEl.addEventListener('focus', () => {
+                bsDropdown.show()
+            })
+
+            document.addEventListener('keydown', (e) => {
+                if (e.key === 'Escape') {
+                    bsDropdown.hide()
+                }
+            })
+        })
+    }
+    /* eslint-enable no-unused-vars, no-undef */
+})()
diff --git a/resources/js/components/filter-list.js b/resources/js/components/filter-list.js
new file mode 100644
index 0000000..e87628f
--- /dev/null
+++ b/resources/js/components/filter-list.js
@@ -0,0 +1,67 @@
+/**
+ * Search, sort and filter lists and tables
+ * @requires https://listjs.com/
+ */
+import List from "list.js"
+export default (() => {
+  const filterListContainers = document.querySelectorAll('[data-filter-list]')
+
+  if (filterListContainers.length === 0) return
+
+  // Clear button functions
+  const createClearButton = (container, searchField) => {
+    const clearButton = document.createElement('button')
+    clearButton.className =
+      'btn btn-sm btn-outline-secondary w-auto border-0 p-1 position-absolute top-50 end-0 translate-middle-y me-2 opacity-0'
+    clearButton.innerHTML = `
+      <svg class="opacity-75" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M18.619 5.381a.875.875 0 0 1 0 1.238l-12 12A.875.875 0 0 1 5.38 17.38l12-12a.875.875 0 0 1 1.238 0Z"/><path d="M5.381 5.381a.875.875 0 0 1 1.238 0l12 12a.875.875 0 1 1-1.238 1.238l-12-12a.875.875 0 0 1 0-1.238Z"/>
+      </svg>
+    `
+    container.appendChild(clearButton)
+    updateClearButtonVisibility(searchField, clearButton)
+    return clearButton
+  }
+
+  const updateClearButtonVisibility = (searchField, clearButton) => {
+    clearButton.classList.toggle('opacity-0', searchField.value === '')
+  }
+
+  const clearSearchField = (searchField, clearButton) => {
+    searchField.value = ''
+    updateClearButtonVisibility(searchField, clearButton)
+  }
+
+  // Init list filtering
+  /* eslint-disable no-unused-vars, no-undef */
+  const filterLists = [...filterListContainers].map((filterListsEl) => {
+    const options = JSON.parse(filterListsEl.dataset.filterList)
+    const searchFields = filterListsEl.querySelectorAll(
+      '.' + options.searchClass
+    )
+
+    if (searchFields.length) {
+      const clearButton = createClearButton(
+        searchFields[0].parentNode,
+        searchFields[0]
+      )
+      searchFields.forEach((searchField) => {
+        searchField.addEventListener('input', () => {
+          updateClearButtonVisibility(searchField, clearButton)
+        })
+      })
+
+      clearButton.addEventListener('click', () => {
+        searchFields.forEach((searchField) => {
+          clearSearchField(searchField, clearButton)
+        })
+        filterList.search()
+      })
+    }
+
+    const filterList = new List(filterListsEl, options)
+
+    return filterList
+  })
+  /* eslint-enable no-unused-vars, no-undef */
+})()
diff --git a/resources/js/components/form-validation.js b/resources/js/components/form-validation.js
new file mode 100644
index 0000000..eec90d3
--- /dev/null
+++ b/resources/js/components/form-validation.js
@@ -0,0 +1,24 @@
+/**
+ * Starter JavaScript for disabling form submissions if there are invalid fields
+ */
+
+export default (() => {
+  const forms = document.querySelectorAll('.needs-validation')
+
+  if (forms.length === 0) return
+
+  forms.forEach((form) => {
+    form.addEventListener(
+      'submit',
+      (event) => {
+        if (!form.checkValidity()) {
+          event.preventDefault()
+          event.stopPropagation()
+        }
+
+        form.classList.add('was-validated')
+      },
+      false
+    )
+  })
+})()
diff --git a/resources/js/components/image-zoom.js b/resources/js/components/image-zoom.js
new file mode 100644
index 0000000..0e7ad0c
--- /dev/null
+++ b/resources/js/components/image-zoom.js
@@ -0,0 +1,32 @@
+/**
+ * Image zoom on hover
+ * @requires https://github.com/imgix/drift
+ */
+import Drift from 'drift-zoom'
+export default (() => {
+  const images = document.querySelectorAll('[data-zoom]')
+
+  if (images.length === 0) return
+
+  images.forEach((image) => {
+    let options
+    if (
+      image.dataset.zoomOptions !== undefined &&
+      image.dataset.zoomOptions !== ''
+    ) {
+      options = JSON.parse(image.dataset.zoomOptions)
+      const zoomPane = document.querySelector(options.paneSelector)
+      /* eslint-disable no-undef */
+      const drift = new Drift(image, {
+        ...{ paneContainer: zoomPane },
+        ...options,
+      })
+      if (options.touchDisable) {
+        if ('ontouchstart' in window || navigator.maxTouchPoints) {
+          drift.destroy()
+        }
+      }
+      /* eslint-enable no-undef */
+    }
+  })
+})()
diff --git a/resources/js/components/input-formatter.js b/resources/js/components/input-formatter.js
new file mode 100644
index 0000000..801d15d
--- /dev/null
+++ b/resources/js/components/input-formatter.js
@@ -0,0 +1,71 @@
+/**
+ * Input text formatter
+ * @requires https://nosir.github.io/cleave.js/
+ */
+
+import Cleave from 'cleave.js'
+
+export default (() => {
+  const formattedInputs = document.querySelectorAll('[data-input-format]')
+
+  if (formattedInputs.length === 0) return
+
+  // Card icons
+  const cardPlaceholder = `<svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor"><path d="M21 3H3C1.3 3 0 4.3 0 6v12c0 1.7 1.3 3 3 3h18c1.7 0 3-1.3 3-3V6c0-1.7-1.3-3-3-3zm1.2 15c0 .7-.6 1.2-1.2 1.2H3c-.7 0-1.2-.6-1.2-1.2V6c0-.7.6-1.2 1.2-1.2h18c.7 0 1.2.6 1.2 1.2v12z"/><path d="M7 16.1H4c-.5 0-.9.4-.9.9s.4.9.9.9h3c.5 0 .9-.4.9-.9s-.4-.9-.9-.9zm13-9H4c-.5 0-.9.4-.9.9s.4.9.9.9h16c.5 0 .9-.4.9-.9s-.4-.9-.9-.9z"/></svg>`
+  const cardAmex = `<svg width="1.25em" height="1.25em" viewBox="0 0 24 24"><path d="M22.2,20.1H1.8c-1,0-1.8-0.8-1.8-1.8V5.8C0,4.8,0.8,4,1.8,4h20.5c1,0,1.8,0.8,1.8,1.8v12.6C24,19.3,23.2,20.1,22.2,20.1z" fill="#1f72cd"/><path d="M2.8,9l-2.7,6.2h3.3l0.4-1h1l0.4,1h3.5v-0.7L9,15.1h1.8l0.4-0.7v0.7h7.4l0.8-1l0.8,1H24l-2.7-3L24,9h-3.8l-0.8,1l-0.8-1h-8l-0.7,1.6L9.2,9H5.9v0.7L5.6,9H2.8z M13.8,9.9h4.2l1.3,1.5l1.3-1.5h1.3l-1.9,2.2l1.9,2.2h-1.3l-1.3-1.5l-1.3,1.5h-4.2V9.9z M14.9,11.6v-0.8l0,0h2.7l1.2,1.3l-1.2,1.3H15v-0.8h2.3v-0.8h-2.4V11.6z M3.4,9.9H5l1.8,4.1V9.9h1.7l1.3,3l1.3-3h1.7v4.4h-1.1v-3.5l-1.6,3.5H9.4l-1.6-3.5v3.5H5.7l-0.4-1H3.1l-0.4,1H1.6L3.4,9.9z M3.5,12.4l0.7-1.8L5,12.4H3.5z" fill="#ffffff"/></svg>`
+  const cardVisa = `<svg width="1.375em" height="1.375em" viewBox="0 0 24 24" fill="#2152c1"><path d="M6,15.6H3.9L2.4,9.9C2.3,9.6,2.2,9.4,1.9,9.3C1.4,9,0.7,8.8,0,8.7V8.5h3.3c0.5,0,0.8,0.3,0.9,0.7L5,13.3l2.1-4.8h2L6,15.6z M10.2,15.6H8.3l1.6-7.2h1.9L10.2,15.6z M14.3,10.5c0.1-0.4,0.4-0.6,0.8-0.6c0.6-0.1,1.3,0.1,1.9,0.3l0.3-1.5c-0.6-0.2-1.2-0.3-1.8-0.3c-1.9,0-3.3,1-3.3,2.4c0,1,1,1.6,1.7,1.9c0.7,0.3,1,0.6,1,0.9c0,0.5-0.6,0.7-1.1,0.7c-0.7,0-1.4-0.2-2-0.4l-0.3,1.5c0.7,0.3,1.4,0.4,2.1,0.4c2.1,0.1,3.4-0.9,3.4-2.4C17,11.4,14.3,11.3,14.3,10.5z M23.8,15.6l-1.5-7.2h-1.7c-0.3,0-0.7,0.2-0.8,0.6L17,15.6h2l0.4-1h2.5l0.2,1H23.8z M20.9,10.4l0.6,2.7h-1.6L20.9,10.4z"/></svg>`
+  const cardMaster = `<svg width="1.25em" height="1.25em" viewBox="0 0 24 24"><path d="M12,17.6c-1.3,1.1-2.9,1.8-4.7,1.8c-4,0-7.3-3.3-7.3-7.4c0-4.1,3.3-7.4,7.3-7.4c1.8,0,3.5,0.7,4.7,1.8c1.3-1.1,2.9-1.8,4.7-1.8c4,0,7.3,3.3,7.3,7.4c0,4.1-3.3,7.4-7.3,7.4C14.9,19.4,13.3,18.7,12,17.6z" fill="#ed0006"/><path d="M12,17.6c1.6-1.4,2.6-3.4,2.6-5.6s-1-4.3-2.6-5.6c1.3-1.1,2.9-1.8,4.7-1.8c4,0,7.3,3.3,7.3,7.4c0,4.1-3.3,7.4-7.3,7.4C14.9,19.4,13.3,18.7,12,17.6z" fill="#f9a000"/><path d="M12,17.6c1.6-1.4,2.6-3.4,2.6-5.6s-1-4.3-2.6-5.6C10.4,7.7,9.4,9.8,9.4,12S10.4,16.3,12,17.6z" fill="#ff5e00"/></svg>`
+  const cardDiners = `<svg width="1.125em" height="1.125em" viewBox="0 0 24 24"><path d="M14.1,21.5c5.2,0,9.9-4.2,9.9-9.4c0-5.7-4.7-9.6-9.9-9.6H9.6C4.3,2.5,0,6.4,0,12.1c0,5.2,4.3,9.4,9.6,9.4H14.1" fill="#0079be"/><path d="M11.6,17.1V6.8c2.1,0.8,3.5,2.8,3.5,5.1C15.1,14.3,13.7,16.3,11.6,17.1 M4.1,12c0-2.3,1.5-4.3,3.5-5.1v10.3C5.6,16.3,4.1,14.3,4.1,12 M9.6,3.3c-4.8,0-8.7,3.9-8.7,8.7c0,4.8,3.9,8.7,8.7,8.7c4.8,0,8.7-3.9,8.7-8.7C18.3,7.2,14.4,3.3,9.6,3.3" fill="#ffffff"/></svg>`
+  const cardJcb = `<svg width="1.25em" height="1.25em" viewBox="0 0 24 24"><path d="M7.3,3.3v14.2c0,1.8-1.7,3.2-3.2,3.2H0V6.6c0-2.1,1.4-3.3,3.3-3.3H7.3z" fill="#0f549d"/><path d="M15.6,3.3v14.2c0,1.8-1.7,3.2-3.2,3.2H8.3V6.6c0-2.1,1.4-3.3,3.3-3.3H15.6z" fill="#b41f36"/><path d="M24,3.3v14.2c0,1.8-1.7,3.2-3.2,3.2h-4.2V6.6c0-2.1,1.4-3.3,3.3-3.3H24z" fill="#329947"/><path d="M6,9.3v3c0,1.7-2.1,2.5-3.7,2.5c-0.9,0-1.7-0.3-2.4-0.7v-1.5c0.2,0.7,0.9,1.3,1.8,1.3c1,0,1.7-0.7,1.7-1.6v-3H6z" fill="#ffffff"/><path d="M21.5,11.9c0.7,0,1.3-0.6,1.3-1.3c0-0.7-0.6-1.3-1.3-1.3h-4.9v5.1h4.9c0.8,0,1.4-0.6,1.4-1.2C22.9,12.4,22.3,11.9,21.5,11.9z M17.9,9.8h1.8c0.5,0,0.9,0.4,0.9,0.9c0,0.5-0.4,0.9-0.9,0.9h-1.8V9.8z M19.8,13.8L19.8,13.8l-1.8,0V12h1.8c0.5,0,0.9,0.4,0.9,0.9C20.7,13.4,20.2,13.8,19.8,13.8z" fill="#ffffff"/><path d="M9.8,11.8c0,1.1,0.9,2,2,2c0.5,0,1.5-0.1,2.6-0.3v0.9H9.9c-0.6,0-1.2-0.2-1.7-0.6V9.9c0.4-0.4,1-0.6,1.7-0.6h4.4v0.9c-1.1-0.2-2.1-0.4-2.6-0.4C10.7,9.8,9.8,10.7,9.8,11.8z" fill="#ffffff"/></svg>`
+  const cardDiscover = `<svg width="1.5em" height="1.5em" viewBox="0 0 24 24"><path class="st0" d="M21.9,19.6H2.1c-1.1,0-2.1-0.9-2.1-2.1V6.2C0,5,0.9,4.1,2.1,4.1h19.8C23.1,4.1,24,5,24,6.2v11.4C24,18.7,23.1,19.6,21.9,19.6z" fill="#e0e5eb"/><path d="M1.9,10.2h-1v3.6h1c0.6,0,1-0.1,1.3-0.4c0.4-0.3,0.7-0.9,0.7-1.4C3.8,11,3,10.2,1.9,10.2z M2.7,12.9c-0.2,0.2-0.5,0.3-1,0.3H1.5v-2.4h0.2c0.5,0,0.7,0.1,1,0.3c0.2,0.2,0.4,0.6,0.4,0.9S2.9,12.7,2.7,12.9z" fill="#010101"/><rect x="4.1" y="10.2" width="0.7" height="3.6" fill="#010101"/><path d="M6.6,11.6C6.2,11.4,6,11.3,6,11.1c0-0.2,0.2-0.4,0.5-0.4c0.2,0,0.4,0.1,0.6,0.3l0.4-0.5c-0.3-0.3-0.7-0.4-1.1-0.4c-0.6,0-1.1,0.4-1.1,1c0,0.5,0.2,0.8,0.9,1c0.3,0.1,0.4,0.2,0.5,0.2c0.1,0.1,0.2,0.2,0.2,0.4c0,0.3-0.2,0.5-0.6,0.5c-0.3,0-0.6-0.2-0.8-0.5l-0.5,0.4c0.3,0.5,0.7,0.7,1.3,0.7c0.7,0,1.3-0.5,1.3-1.2C7.6,12.2,7.4,11.9,6.6,11.6L6.6,11.6z" fill="#010101"/><path d="M7.9,12c0,1.1,0.8,1.9,1.9,1.9c0.3,0,0.6-0.1,0.9-0.2v-0.8c-0.3,0.3-0.5,0.4-0.9,0.4c-0.7,0-1.2-0.5-1.2-1.3c0-0.7,0.5-1.3,1.2-1.3c0.3,0,0.6,0.1,0.9,0.4v-0.8c-0.3-0.2-0.6-0.2-0.9-0.2C8.7,10.1,7.9,11,7.9,12L7.9,12z" fill="#010101"/><polygon points="16.3,12.7 15.4,10.2 14.6,10.2 16.1,13.9 16.5,13.9 18.1,10.2 17.3,10.2" fill="#010101"/><polygon points="18.4,13.9 20.4,13.9 20.4,13.2 19.1,13.2 19.1,12.2 20.4,12.2 20.4,11.6 19.1,11.6 19.1,10.8 20.4,10.8 20.4,10.2 18.4,10.2" fill="#010101"/><path d="M23.2,11.3c0-0.7-0.5-1.1-1.3-1.1h-1.1v3.6h0.7v-1.5h0.1l1,1.5h0.9l-1.1-1.5C22.9,12.2,23.2,11.8,23.2,11.3zM21.8,11.9h-0.2v-1.1h0.2c0.4,0,0.7,0.2,0.7,0.5C22.5,11.7,22.3,11.9,21.8,11.9z" fill="#010101"/><path d="M14.8,12c0,1.1-0.9,1.9-1.9,1.9s-1.9-0.9-1.9-1.9s0.9-1.9,1.9-1.9S14.8,11,14.8,12L14.8,12z" fill="#f79234"/></svg>`
+
+  formattedInputs.forEach((input) => {
+    const targetInput =
+      input.tagName.toLowerCase() !== 'input'
+        ? input.querySelector('.form-control')
+        : input
+    const cardIcon = input.querySelector('[data-card-icon]')
+
+    let options
+    let formatter
+
+    if (input.dataset.inputFormat != undefined)
+      options = JSON.parse(input.dataset.inputFormat)
+
+    /* eslint-disable no-unused-vars, no-undef, indent */
+    if (cardIcon) {
+      cardIcon.innerHTML = cardPlaceholder
+
+      formatter = new Cleave(targetInput, {
+        ...options,
+        onCreditCardTypeChanged: (type) => {
+          switch (type) {
+            case 'amex':
+              cardIcon.innerHTML = cardAmex
+              break
+            case 'visa':
+              cardIcon.innerHTML = cardVisa
+              break
+            case 'mastercard':
+              cardIcon.innerHTML = cardMaster
+              break
+            case 'diners':
+              cardIcon.innerHTML = cardDiners
+              break
+            case 'jcb':
+              cardIcon.innerHTML = cardJcb
+              break
+            case 'discover':
+              cardIcon.innerHTML = cardDiscover
+              break
+            default:
+              cardIcon.innerHTML = cardPlaceholder
+          }
+        },
+      })
+    } else {
+      formatter = new Cleave(targetInput, options)
+    }
+    /* eslint-enable no-unused-vars, no-undef, indent */
+  })
+})()
diff --git a/resources/js/components/lightbox.js b/resources/js/components/lightbox.js
new file mode 100644
index 0000000..857252b
--- /dev/null
+++ b/resources/js/components/lightbox.js
@@ -0,0 +1,65 @@
+/**
+ * Gallery like styled lightbox component for presenting various types of media
+ * @requires https://github.com/biati-digital/glightbox
+ */
+import GLightbox from "glightbox";
+
+export default (() => {
+  const lightboxEl = document.querySelector('[data-glightbox]')
+
+  if (lightboxEl === null) return
+
+  // Check the dir attribute on html tag and set the default to "ltr" if it's not set or invalid
+  const htmlElement = document.documentElement
+  const direction =
+    htmlElement.getAttribute('dir') === 'ltr' ||
+    htmlElement.getAttribute('dir') === 'rtl'
+      ? htmlElement.getAttribute('dir')
+      : 'ltr'
+
+  const customLightboxHTML = `<div id="glightbox-body" class="glightbox-container">
+    <div class="gloader visible"></div>
+    <div class="goverlay"></div>
+    <div class="gcontainer">
+      <div id="glightbox-slider" class="gslider"></div>
+      <button class="gnext gbtn btn btn-icon btn-outline-secondary animate-slide-end bg-body rounded-circle end-0 me-2 me-sm-3 me-lg-4 ms-0" style="top: 45%; right: auto; left: auto" tabindex="0" aria-label="Next">
+        <span class="animate-target">
+          <svg class="rtl-flip" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.4 5.6c.3-.3.9-.3 1.2 0l6 6c.3.3.3.9 0 1.2l-6 6c-.3.3-.9.3-1.2 0-.4-.3-.4-.8 0-1.2l5.4-5.4-5.4-5.3C9 6.5 9 6 9.4 5.6"/></svg>
+        </span
+      </button>
+      <button class="gprev gbtn btn btn-icon btn-outline-secondary animate-slide-start bg-body rounded-circle start-0 ms-2 ms-sm-3 ms-lg-4 me-0" style="top: 45%; right: auto; left: auto" tabindex="1" aria-label="Previous">
+        <span class="animate-target">
+        <svg class="rtl-flip" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14.6 5.6c.4.4.4.9 0 1.3l-5.4 5.4 5.4 5.4c.3.3.3.9 0 1.2s-.9.3-1.2 0l-6-6c-.4-.4-.4-.9 0-1.3l6-6c.3-.3.9-.3 1.2 0"/></svg>
+        </span>
+      </button>
+      <button class="gclose gbtn btn btn-icon btn-outline-secondary bg-body rounded-circle top-0 end-0 mt-2 me-2 mt-md-3 me-md-3" style="right: auto; left: auto" tabindex="2" aria-label="Close">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.6 17.4c.3.3.3.9 0 1.2s-.9.3-1.2 0L12 13.2l-5.4 5.4c-.3.3-.9.3-1.2 0s-.3-.9 0-1.2l5.4-5.4-5.4-5.4c-.4-.3-.4-.9 0-1.2.3-.4.9-.4 1.2 0l5.4 5.4 5.4-5.4c.3-.3.9-.3 1.2 0s.3.9 0 1.2L13.2 12z"/></svg>
+      </button>
+    </div>
+  </div>`
+
+  const cssEffects =
+    direction === 'rtl'
+      ? {
+          slide: { out: 'slideOutRight', in: 'slideInLeft' },
+          slideBack: { out: 'slideOutLeft', in: 'slideInRight' },
+        }
+      : {
+          slide: { out: 'slideOutLeft', in: 'slideInRight' },
+          slideBack: { out: 'slideOutRight', in: 'slideInLeft' },
+        }
+
+  /* eslint-disable no-unused-vars, no-undef */
+  const lightbox = GLightbox({
+    selector: '[data-glightbox]',
+    lightboxHTML: customLightboxHTML,
+    openEffect: 'fade',
+    closeEffect: 'fade',
+    closeOnOutsideClick: false,
+    videosWidth: '1200px',
+    draggable: direction === 'rtl' ? false : true,
+    touchNavigation: direction === 'rtl' ? false : true,
+    cssEfects: cssEffects,
+  })
+  /* eslint-enable no-unused-vars, no-undef */
+})()
diff --git a/resources/js/components/master-checkbox.js b/resources/js/components/master-checkbox.js
new file mode 100644
index 0000000..bd5d79f
--- /dev/null
+++ b/resources/js/components/master-checkbox.js
@@ -0,0 +1,64 @@
+/**
+ * The master checkboxes are identified by the 'data-master-checkbox' attribute,
+    which holds an object with the container selector, label text, checked label text,
+    and an optional selector to show/hide an element based on checkbox state.
+    When a master checkbox is checked/unchecked, it controls the state of checkboxes
+    within the specified container, updates the label text, and shows/hides the optional element.
+ */
+
+export default (() => {
+  const masterCheckboxes = document.querySelectorAll('[data-master-checkbox]')
+
+  if (masterCheckboxes.length === 0) return
+
+  masterCheckboxes.forEach((masterCheckbox) => {
+    const { container, label, labelChecked, showOnCheck } = JSON.parse(
+      masterCheckbox.getAttribute('data-master-checkbox')
+    )
+    const checkboxContainer = document.querySelector(container)
+    const masterCheckboxInput = masterCheckbox.querySelector(
+      'input[type="checkbox"]'
+    )
+    const masterCheckboxLabel =
+      masterCheckbox.querySelector('.form-check-label')
+    const showOnCheckElement = showOnCheck
+      ? document.querySelector(showOnCheck)
+      : null
+
+    if (!checkboxContainer) {
+      console.error(
+        `Checkbox container with selector '${container}' not found.`
+      )
+      return
+    }
+
+    masterCheckboxInput.addEventListener('change', () => {
+      const allChecked = masterCheckboxInput.checked
+      checkboxContainer
+        .querySelectorAll('input[type="checkbox"]')
+        .forEach((checkbox) => {
+          checkbox.checked = allChecked
+        })
+      masterCheckboxLabel.textContent = allChecked ? labelChecked : label
+      if (showOnCheckElement) {
+        showOnCheckElement.classList.toggle('d-none', !allChecked)
+      }
+    })
+
+    const checkboxes = checkboxContainer.querySelectorAll(
+      'input[type="checkbox"]'
+    )
+    checkboxes.forEach((checkbox) => {
+      checkbox.addEventListener('change', () => {
+        const anyChecked = Array.from(checkboxes).some(
+          (checkbox) => checkbox.checked
+        )
+        masterCheckboxInput.checked = anyChecked
+        masterCheckboxLabel.textContent = anyChecked ? labelChecked : label
+        if (showOnCheckElement) {
+          showOnCheckElement.classList.toggle('d-none', !anyChecked)
+        }
+      })
+    })
+  })
+})()
diff --git a/resources/js/components/password-toggle.js b/resources/js/components/password-toggle.js
new file mode 100644
index 0000000..018396c
--- /dev/null
+++ b/resources/js/components/password-toggle.js
@@ -0,0 +1,55 @@
+/**
+ * Toggling password visibility inside password input
+ */
+
+export default (() => {
+  const initializePasswordToggle = (parentContainer) => {
+    const icon = document.createElement('span')
+    icon.className = 'password-toggle-button-icon d-flex'
+    icon.innerHTML = `
+      <svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M23.8 11.6c-.1-.1-.1-.3-.2-.4-.8-1.4-1.7-2.7-2.8-3.8-1.9-2.1-4.9-4.3-8.8-4.3S5.2 5.3 3.2 7.4c-1.1 1.2-2 2.4-2.8 3.8-.1.1-.1.2-.2.4s-.1.5 0 .8v.1c.2.4.5.8.7 1.2.7 1 1.4 2 2.2 2.9 1.9 2.1 4.9 4.3 8.8 4.3 3.9 0 6.8-2.2 8.8-4.3 1.1-1.2 2-2.4 2.8-3.8.1-.1.1-.2.2-.4.2-.3.2-.6.1-.8zm-4.3 3.8c-1.8 1.9-4.3 3.7-7.5 3.7s-5.7-1.8-7.5-3.7c-1-1-1.8-2.2-2.5-3.4.7-1.2 1.5-2.4 2.5-3.4C6.3 6.7 8.8 4.9 12 4.9s5.7 1.8 7.5 3.7c1 1 1.8 2.2 2.5 3.4-.7 1.2-1.5 2.4-2.5 3.4z"/><path d="M12 8.1c-2.2 0-3.9 1.8-3.9 3.9s1.7 3.9 3.9 3.9 3.9-1.7 3.9-3.9-1.7-3.9-3.9-3.9zm0 6c-1.1 0-2.1-1-2.1-2.1s.9-2.1 2.1-2.1 2.1 1 2.1 2.1-1 2.1-2.1 2.1z"/>
+      </svg>
+    `
+
+    const buttons = parentContainer.querySelectorAll('.password-toggle-button')
+
+    const togglePassword = (e) => {
+      const target = e.target
+      if (target.type !== 'checkbox') return
+
+      const passwordInput = target
+        .closest('.password-toggle')
+        .querySelector('.form-control')
+
+      if (target.checked) {
+        passwordInput.type = 'text'
+        target.parentElement.querySelector(
+          '.password-toggle-button-icon'
+        ).innerHTML = `
+          <svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M23.8 11.6c-.1-.1-.1-.3-.2-.4-.8-1.4-1.7-2.7-2.8-3.8-1.9-2.1-4.9-4.3-8.8-4.3-.8 0-1.5.1-2.3.3-.5.1-.8.6-.7 1.1s.6.8 1.1.6c.6-.1 1.3-.2 1.9-.2 3.2 0 5.7 1.8 7.5 3.7 1 1 1.8 2.2 2.5 3.4-.5.9-1.1 1.8-1.8 2.6-.3.4-.3.9.1 1.2.4.3.9.3 1.2-.1.9-1 1.6-2.2 2.3-3.3.1-.2.1-.5 0-.8zm-.2 10.8L10.5 9.3 6.8 5.5l-.2-.1-5-5C1.3 0 .7 0 .4.4c-.4.3-.4.9 0 1.2L4.8 6C3 7.6 1.4 9.5.3 11.6c-.1.2-.1.5 0 .8.1.1.1.2.2.4.8 1.4 1.7 2.7 2.8 3.8 1.9 2.1 4.9 4.3 8.8 4.3 2.1 0 4.1-.7 5.8-1.8l4.5 4.5c.3.3.9.3 1.2 0 .4-.3.4-.9 0-1.2zM10 11.2l2.8 2.8c-.8.3-1.7.1-2.3-.5-.7-.6-.8-1.5-.5-2.3zm2 7.9c-3.1 0-5.7-1.8-7.5-3.7-1-1-1.8-2.2-2.5-3.4 1-1.8 2.4-3.4 4-4.8l2.7 2.7-.3.6c-.7 1.5-.3 3.3.9 4.4 1.3 1.2 3.3 1.4 4.8.4l2.5 2.5c-1.4.8-3 1.3-4.6 1.3z"/>
+          </svg>
+        `
+      } else {
+        passwordInput.type = 'password'
+        target.parentElement.querySelector(
+          '.password-toggle-button-icon'
+        ).innerHTML = `
+          <svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M23.8 11.6c-.1-.1-.1-.3-.2-.4-.8-1.4-1.7-2.7-2.8-3.8-1.9-2.1-4.9-4.3-8.8-4.3S5.2 5.3 3.2 7.4c-1.1 1.2-2 2.4-2.8 3.8-.1.1-.1.2-.2.4s-.1.5 0 .8v.1c.2.4.5.8.7 1.2.7 1 1.4 2 2.2 2.9 1.9 2.1 4.9 4.3 8.8 4.3 3.9 0 6.8-2.2 8.8-4.3 1.1-1.2 2-2.4 2.8-3.8.1-.1.1-.2.2-.4.2-.3.2-.6.1-.8zm-4.3 3.8c-1.8 1.9-4.3 3.7-7.5 3.7s-5.7-1.8-7.5-3.7c-1-1-1.8-2.2-2.5-3.4.7-1.2 1.5-2.4 2.5-3.4C6.3 6.7 8.8 4.9 12 4.9s5.7 1.8 7.5 3.7c1 1 1.8 2.2 2.5 3.4-.7 1.2-1.5 2.4-2.5 3.4z"/><path d="M12 8.1c-2.2 0-3.9 1.8-3.9 3.9s1.7 3.9 3.9 3.9 3.9-1.7 3.9-3.9-1.7-3.9-3.9-3.9zm0 6c-1.1 0-2.1-1-2.1-2.1s.9-2.1 2.1-2.1 2.1 1 2.1 2.1-1 2.1-2.1 2.1z"/>
+          </svg>
+        `
+      }
+    }
+
+    parentContainer.addEventListener('click', togglePassword, false)
+
+    buttons.forEach((button) => {
+      button.appendChild(icon.cloneNode(true))
+    })
+  }
+
+  const containers = document.querySelectorAll('.password-toggle')
+  containers.forEach(initializePasswordToggle)
+})()
diff --git a/resources/js/components/popover.js b/resources/js/components/popover.js
new file mode 100644
index 0000000..879dbf9
--- /dev/null
+++ b/resources/js/components/popover.js
@@ -0,0 +1,19 @@
+/**
+ * Popover
+ * @requires https://getbootstrap.com
+ * @requires https://popper.js.org/
+ */
+
+import {Popover} from "bootstrap";
+
+export default (() => {
+  const popoverTriggerList = document.querySelectorAll(
+    '[data-bs-toggle="popover"]'
+  )
+
+  /* eslint-disable no-unused-vars, no-undef */
+  const popoverList = [...popoverTriggerList].map(
+    (popoverTriggerEl) => new Popover(popoverTriggerEl)
+  )
+  /* eslint-enable no-unused-vars, no-undef */
+})()
diff --git a/resources/js/components/pwa.js b/resources/js/components/pwa.js
new file mode 100644
index 0000000..1ffa7ff
--- /dev/null
+++ b/resources/js/components/pwa.js
@@ -0,0 +1,288 @@
+/**
+ * Register a Service Worker and add PWA features like installing prompts,
+ * but only if the HTML tag has data-pwa="true". Unregister service worker if not.
+ */
+
+export default (() => {
+  const htmlElement = document.documentElement
+
+  // Check the 'data-pwa' attribute of the HTML element
+  if (htmlElement.getAttribute('data-pwa') !== 'true') {
+    // Unregister the service worker if it's registered and 'data-pwa' is not 'true'
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker.getRegistrations().then((registrations) => {
+        for (let registration of registrations) {
+          registration.unregister()
+        }
+      })
+    }
+    return // Stop further execution to prevent PWA setup when not specified
+  }
+
+  // Settings
+  const SETTINGS = {
+    appName: 'Cartzilla',
+    remindAfterHours: 24, // Number of hours to wait before showing the prompt again
+    serviceWorkerFile: '/service-worker.js', // Service worker file path and name
+    serviceWorkerScope: '/', // Scope of the service worker
+    diagnostics: false, // Set to true to enable diagnostic logs
+  }
+
+  /**
+   * Helper function for logging messages to the console based on the message type.
+   * @param {string} message - The message to log.
+   * @param {string} type - The type of message ('info' or 'error').
+   */
+  const logMessage = (message, type = 'info') => {
+    if (SETTINGS.diagnostics) {
+      if (type === 'error') {
+        console.error(message)
+      } else {
+        console.log(message)
+      }
+    }
+  }
+
+  // Helper functions for detecting user's operating system and browser
+  const userAgent = window.navigator.userAgent.toLowerCase()
+
+  const detectOS = () => {
+    if (userAgent.includes('android')) return 'Android'
+    if (/iphone|ipad|ipod/.test(userAgent)) return 'iOS'
+    if (userAgent.includes('mac')) return 'macOS'
+    if (userAgent.includes('win')) return 'Windows'
+    if (userAgent.includes('cros')) return 'ChromeOS'
+    if (userAgent.includes('linux')) return 'Linux'
+    return 'Unknown'
+  }
+
+  const detectBrowser = () => {
+    if (userAgent.includes('chrome') && !userAgent.includes('edg'))
+      return 'Chrome'
+    if (userAgent.includes('safari') && !userAgent.includes('chrome'))
+      return 'Safari'
+    if (userAgent.includes('firefox')) return 'Firefox'
+    if (userAgent.includes('edg')) return 'Edge'
+    if (userAgent.includes('opera') || userAgent.includes('opr')) return 'Opera'
+    return 'Unknown'
+  }
+
+  // Register service worker
+  if ('serviceWorker' in navigator) {
+    window.addEventListener('load', () => {
+      navigator.serviceWorker
+        .register(SETTINGS.serviceWorkerFile, {
+          scope: SETTINGS.serviceWorkerScope,
+        })
+        .then((registration) => {
+          // Registration was successful
+          logMessage(
+            'Service Worker registration successful with scope: ' +
+              registration.scope
+          )
+        })
+        .catch((err) => {
+          // Registration failed
+          logMessage('Service Worker registration failed: ' + err, 'error')
+        })
+    })
+  }
+
+  // Store variables for future use across application
+  const promptId = 'installPWAPrompt'
+  const timeoutKey = `${SETTINGS.appName}-Prompt-Timeout`
+  const foreverKey = `${SETTINGS.appName}-Prompt-Dismiss-Forever`
+  const installedKey = `${SETTINGS.appName}-App-Installed`
+
+  // Initialize deferredPrompt for use later to show the install prompt
+  let deferredPrompt
+
+  // Function to create and show an installation prompt
+  const installationPrompt = () => {
+    // Detecting user's browser
+    const browser = detectBrowser()
+
+    // Check if we should show the prompt
+    const now = Date.now()
+    const setupTime = localStorage.getItem(timeoutKey)
+    const dismissForever = localStorage.getItem(foreverKey)
+    const appInstalled = localStorage.getItem(installedKey)
+
+    // Check if dismiss forever is set to true or app installed, or not enough time has passed
+    if (
+      dismissForever === 'true' ||
+      appInstalled === 'true' ||
+      (setupTime &&
+        now - setupTime < SETTINGS.remindAfterHours * 60 * 60 * 1000)
+    ) {
+      return
+    }
+
+    // HTML content for the prompt
+    const promptHTML = `
+      <div class="modal fade" id="${promptId}" tabindex="-1" aria-labelledby="${promptId}Label" aria-hidden="true">
+        <div class="modal-dialog">
+          <div class="modal-content">
+            <div class="modal-body text-center">
+              <svg class="d-inline-block mb-3" xmlns="http://www.w3.org/2000/svg" width="95" viewBox="0 0 250 283.6"><g stroke="#9ca3af" stroke-miterlimit="10"><path d="M.7 283.5V37.4C.7 17.3 17 .9 37.2.9h175.4C232.7.9 249 17.2 249 37.4v246.1" fill="none"/><path d="M240.2 41.7V283H9.5V41.7c0-17.6 14-31.9 31.5-31.9h167.9c17.2-.1 31.3 14.2 31.3 31.9z" fill="none"/><path d="M146.2,41.3h-45.1c-4.8,0-8.7-3.9-8.7-8.7s3.9-8.7,8.7-8.7h45.1c4.8,0,8.7,3.9,8.7,8.7S151.1,41.3,146.2,41.3z" fill="none"/></g><path class="d-none-dark" d="M144.9 37.6c2.7 0 5-2.2 5-5a4.95 4.95 0 0 0-5-5c-2.7 0-5 2.2-5 5s2.3 5 5 5z" fill="#cad0d9"/><path class="d-none d-block-dark" d="M144.9 37.6c2.7 0 5-2.2 5-5a4.95 4.95 0 0 0-5-5c-2.7 0-5 2.2-5 5s2.3 5 5 5z" fill="#4e5562"/><path d="M68.2 120.3H40.4c-7.6 0-13.9-6.2-13.9-13.8V80.8c0-7.6 6.2-13.8 13.9-13.8h27.8c7.6 0 13.9 6.2 13.9 13.8v25.7c-.1 7.6-6.3 13.8-13.9 13.8zm70.4 0h-27.8c-7.6 0-13.9-6.2-13.9-13.8V80.8c0-7.6 6.2-13.8 13.9-13.8h27.8c7.6 0 13.9 6.2 13.9 13.8v25.7c-.1 7.6-6.2 13.8-13.9 13.8zm70.5 0h-27.8c-7.6 0-13.9-6.2-13.9-13.8V80.8c0-7.6 6.2-13.8 13.9-13.8h27.8c7.6 0 13.9 6.2 13.9 13.8v25.7c0 7.6-6.3 13.8-13.9 13.8zM68.2 190.9H40.4c-7.6 0-13.9-6.2-13.9-13.8v-25.7c0-7.6 6.2-13.9 13.9-13.9h27.8c7.6 0 13.9 6.2 13.9 13.9V177c-.1 7.6-6.3 13.9-13.9 13.9zm140.9 0h-27.8c-7.6 0-13.9-6.2-13.9-13.8v-25.7c0-7.6 6.2-13.9 13.9-13.9h27.8c7.6 0 13.9 6.2 13.9 13.9V177c0 7.6-6.3 13.9-13.9 13.9zM68.2 261.2H40.4c-7.6 0-13.9-6.2-13.9-13.8v-25.7c0-7.6 6.2-13.9 13.9-13.9h27.8c7.6 0 13.9 6.2 13.9 13.9v25.7c-.1 7.8-6.3 13.8-13.9 13.8zm70.4 0h-27.8c-7.6 0-13.9-6.2-13.9-13.8v-25.7c0-7.6 6.2-13.9 13.9-13.9h27.8c7.6 0 13.9 6.2 13.9 13.9v25.7c-.1 7.8-6.2 13.8-13.9 13.8zm70.5 0h-27.8c-7.6 0-13.9-6.2-13.9-13.8v-25.7c0-7.6 6.2-13.9 13.9-13.9h27.8c7.6 0 13.9 6.2 13.9 13.9v25.7c0 7.8-6.3 13.8-13.9 13.8z" stroke="#9ca3af" fill="none"/><path d="M140.7 196H109c-9.3 0-16.9-7.6-16.9-16.9v-29.3c0-9.3 7.6-16.9 16.9-16.9h31.7c9.3 0 16.9 7.6 16.9 16.9v29.3c.1 9.3-7.4 16.9-16.9 16.9z" fill="#f55266"/><path d="M125.8 172.9c-.8 0-1.7-.5-2-1.5-.3-1.2.2-2.4 1.4-2.7l13.6-4.4-2.2-14.6-23.6 8.1c-1.2.3-2.4-.2-2.7-1.4s.2-2.4 1.4-2.7l24.6-8.5c1-.3 2-.2 2.9.3s1.4 1.4 1.5 2.2l2.4 16.3c.2 1.7-.8 3.6-2.7 4.1l-13.9 4.4c-.2.3-.5.4-.7.4zm13.1.2c-.3-1.2-1.5-1.9-2.7-1.4-.3 0-6.4 1.9-9.1 2.9-4.1 1.4-5.8 0-6.1-.2l-11.7-14.9c-2.4-3.4-6.1-3.6-7.8-3l-5.6 1.7-.8 4.7 7.5-2.4c.3 0 2-.3 3.2 1.4l11.9 15.2c1.4 1.7 3.6 2.4 5.9 2.4 1.7 0 3.2-.3 4.7-.8l9-2.7c1.2-.5 1.9-1.7 1.6-2.9zM128 185.3a3.4 3.4 0 1 1-6.8 0 3.4 3.4 0 1 1 6.8 0zm15.1-3.9a3.4 3.4 0 1 1-6.8 0 3.4 3.4 0 1 1 6.8 0z" fill="#fff"/></svg>
+              <h5 class="pt-1" id="${promptId}Label">Install Cartzilla app</h5>
+              ${browser === 'Safari' ? `<p class="fs-sm mb-0">Add Cartzilla to your home screen for quick and easy access to your shopping anytime, anywhere! Tap the <span class="fw-semibold">"Share"</span> icon in Safari and select <span class="fw-semibold">"Add to Home Screen"</span> from the options.</p>` : `<p class="fs-sm mb-0">Add Cartzilla to your home screen for quick and easy access to your shopping anytime, anywhere!</p>`}
+              <div class="d-flex flex-column align-items-center gap-3 pt-4">
+                ${
+                  browser === 'Safari'
+                    ? `
+                  <div class="d-flex justify-content-center gap-3 w-100">
+                    <button type="button" class="btn btn-secondary pe-3 w-100" id="timeoutPWAButton">
+                      <i class="ci-clock fs-base me-1 ms-n2"></i>
+                      Remind later
+                    </button>
+                    <button type="button" class="btn btn-outline-secondary pe-3 w-100" id="dismissPWAButton">
+                      <i class="ci-close fs-base me-1 ms-n2"></i>
+                      Dismiss forever
+                    </button>
+                  </div>
+                `
+                    : `
+                  <div class="d-flex justify-content-center gap-3 w-100">
+                    <button type="button" class="btn btn-primary w-100" id="installPWAButton">
+                      <i class="ci-download fs-base me-1 ms-n1"></i>
+                      Install
+                    </button>
+                    <button type="button" class="btn btn-secondary w-100" id="timeoutPWAButton">
+                      <i class="ci-clock fs-base me-1 ms-n2"></i>
+                      Remind later
+                    </button>
+                  </div>
+                  <button type="button" class="btn btn-outline-secondary border-0 mb-n1" id="dismissPWAButton">
+                    <i class="ci-close fs-lg me-1 ms-n2"></i>
+                    Dismiss forever
+                  </button>
+                `
+                }
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      `
+
+    // Append the prompt HTML to the body
+    document.body.insertAdjacentHTML('beforeend', promptHTML)
+
+    // Get prompt instance
+    const promptElement = document.getElementById(promptId)
+    /* eslint-disable no-undef */
+    const promptInstance = new bootstrap.Modal(promptElement, {
+      backdrop: 'static', // Optional: makes prompt not close when clicking outside
+      keyboard: false, // Optional: makes prompt not close when pressing escape key
+    })
+    /* eslint-enable no-undef */
+
+    // Show the prompt
+    promptInstance.show()
+
+    // Log the message
+    logMessage('PWA installation prompt has been displayed.')
+
+    // Event listeners to remove the prompt from the DOM when dismissed
+    document
+      .getElementById('timeoutPWAButton')
+      .addEventListener('click', () => {
+        promptInstance.hide()
+        localStorage.setItem(timeoutKey, Date.now()) // Set the new timeout value when dismissed
+      })
+
+    document
+      .getElementById('dismissPWAButton')
+      .addEventListener('click', () => {
+        promptInstance.hide()
+        localStorage.setItem(foreverKey, true) // Set the foreverKey value to true
+      })
+
+    promptElement.addEventListener('hidden.bs.modal', () => {
+      promptInstance.dispose() // Ensure the prompt is cleaned up correctly
+      promptElement.remove() // Remove the prompt from the DOM
+    })
+  }
+
+  // Handling appinstalled event for cases when PWA installed from the address bar or other browser components
+  window.addEventListener('appinstalled', () => {
+    localStorage.setItem(installedKey, true) // Set the installedKey value to true
+    deferredPrompt = null // Clear the deferredPrompt so it can be garbage collected
+    logMessage('PWA was installed') // Log message
+  })
+
+  // Funtion for initialization and configuration of Progressive Web App (PWA) installation prompts based on the user's operating system and browser
+  const setupPWAInstallation = () => {
+    const os = detectOS()
+    const browser = detectBrowser()
+
+    // Check if the PWA is already installed
+    const isInStandaloneMode = () =>
+      ('standalone' in navigator && navigator.standalone) ||
+      window.matchMedia('(display-mode: standalone)').matches
+
+    if (os === 'iOS' && browser === 'Safari') {
+      // Specific instructions for Safari on iOS
+      setTimeout(() => {
+        if (!isInStandaloneMode()) {
+          installationPrompt()
+          logMessage('PWA installation prompt has been displayed.')
+        }
+      }, 3500)
+    } else if (
+      os !== 'iOS' &&
+      (browser === 'Chrome' || browser === 'Edge' || browser === 'Opera')
+    ) {
+      // Setup for Chrome, Edge, and Opera on non-iOS devices
+      if (!isInStandaloneMode()) {
+        window.addEventListener('beforeinstallprompt', (e) => {
+          // Log message
+          logMessage(`'beforeinstallprompt' event was fired.`)
+          // Prevent the mini-infobar from appearing on mobile
+          e.preventDefault()
+          // Stash the event so it can be triggered later
+          deferredPrompt = e
+          // Show the installation prompt to the user
+          setTimeout(() => {
+            installationPrompt()
+          }, 3500)
+        })
+
+        // Handle "Install" button click event
+        document.body.addEventListener('click', (e) => {
+          const target = e.target
+
+          // Check if the clicked element is an "Install" button
+          if (target.id === 'installPWAButton') {
+            const promptElement = document.getElementById(promptId)
+            /* eslint-disable no-undef */
+            const promptInstance = bootstrap.Modal.getInstance(promptElement)
+            /* eslint-enable no-undef */
+
+            if (promptInstance) {
+              promptInstance.hide() // Hide the prompt
+            }
+
+            deferredPrompt.prompt() // Show the installation prompt
+            deferredPrompt.userChoice.then((choiceResult) => {
+              if (choiceResult.outcome === 'accepted') {
+                logMessage('User accepted the A2HS prompt. PWA was installed')
+                localStorage.setItem(installedKey, true) // Set the installedKey value to true
+              } else {
+                logMessage('User dismissed the A2HS prompt')
+                localStorage.setItem(timeoutKey, Date.now()) // Set the new timeout value
+              }
+              deferredPrompt = null // We've used the prompt and can't use it again, throw it away
+            })
+          }
+        })
+      }
+    } else {
+      logMessage('PWA installation is not supported on your device or browser.')
+    }
+  }
+
+  // Call the setup function
+  setupPWAInstallation()
+})()
diff --git a/resources/js/components/range-slider.js b/resources/js/components/range-slider.js
new file mode 100644
index 0000000..1733b5c
--- /dev/null
+++ b/resources/js/components/range-slider.js
@@ -0,0 +1,100 @@
+/**
+ * Range slider
+ * @requires https://refreshless.com/nouislider/
+ */
+
+import noUiSlider from 'nouislider'
+export default (() => {
+  const rangeSliderWidgets = document.querySelectorAll('[data-range-slider]')
+
+  if (rangeSliderWidgets.length === 0) return
+
+  // Check the dir attribute on html tag and set the default to "ltr" if it's not set or invalid
+  const htmlElement = document.documentElement
+  const direction =
+    htmlElement.getAttribute('dir') === 'ltr' ||
+    htmlElement.getAttribute('dir') === 'rtl'
+      ? htmlElement.getAttribute('dir')
+      : 'ltr'
+
+  rangeSliderWidgets.forEach((rangeSliderWidget) => {
+    const rangeSlider = rangeSliderWidget.querySelector('.range-slider-ui')
+    const valueMinInput = rangeSliderWidget.querySelector(
+      '[data-range-slider-min]'
+    )
+    const valueMaxInput = rangeSliderWidget.querySelector(
+      '[data-range-slider-max]'
+    )
+
+    let dataOptions
+    if (rangeSliderWidget.dataset.rangeSlider !== undefined)
+      dataOptions = JSON.parse(rangeSliderWidget.dataset.rangeSlider)
+
+    const options = {
+      startMin: parseInt(dataOptions.startMin, 10),
+      startMax: parseInt(dataOptions.startMax, 10),
+      min: parseInt(dataOptions.min, 10),
+      max: parseInt(dataOptions.max, 10),
+      step: parseInt(dataOptions.step, 10),
+      pips: dataOptions.pips,
+      tooltipPrefix: dataOptions.tooltipPrefix || '',
+      tooltipSuffix: dataOptions.tooltipSuffix || '',
+    }
+
+    const start = options.startMax
+      ? [options.startMin, options.startMax]
+      : [options.startMin]
+    const connect = options.startMax ? true : 'lower'
+
+    /* eslint-disable no-undef */
+    noUiSlider.create(rangeSlider, {
+      direction: direction,
+      start: start,
+      connect: connect,
+      step: options.step,
+      pips: options.pips ? { mode: 'count', values: 5 } : false,
+      tooltips: true,
+      range: {
+        min: options.min,
+        max: options.max,
+      },
+      format: {
+        to: function (value) {
+          return (
+            options.tooltipPrefix + parseInt(value, 10) + options.tooltipSuffix
+          )
+        },
+        from: function (value) {
+          return Number(value)
+        },
+      },
+    })
+
+    rangeSlider.noUiSlider.on('update', (values, handle) => {
+      let value = values[handle]
+      value = value.replace(/\D/g, '')
+      if (handle) {
+        if (valueMaxInput) {
+          valueMaxInput.value = Math.round(value)
+        }
+      } else {
+        if (valueMinInput) {
+          valueMinInput.value = Math.round(value)
+        }
+      }
+    })
+
+    if (valueMinInput) {
+      valueMinInput.addEventListener('change', function () {
+        rangeSlider.noUiSlider.set([this.value, null])
+      })
+    }
+
+    if (valueMaxInput) {
+      valueMaxInput.addEventListener('change', function () {
+        rangeSlider.noUiSlider.set([null, this.value])
+      })
+    }
+  })
+  /* eslint-enable no-undef */
+})()
diff --git a/resources/js/components/scroll-top-button.js b/resources/js/components/scroll-top-button.js
new file mode 100644
index 0000000..fb38284
--- /dev/null
+++ b/resources/js/components/scroll-top-button.js
@@ -0,0 +1,59 @@
+/**
+ * Animate scroll to top button in/off view
+ */
+
+export default (() => {
+  let button = document.querySelector('.btn-scroll-top'),
+    scrollOffset = 500
+
+  if (button === null) return
+
+  let offsetFromTop = parseInt(scrollOffset, 10),
+    progress = button.querySelector('svg rect'),
+    length = progress.getTotalLength()
+
+  progress.style.strokeDasharray = length
+  progress.style.strokeDashoffset = length
+
+  const showProgress = () => {
+    let scrollPosition = window.pageYOffset,
+      scrollHeight =
+        document.documentElement.scrollHeight -
+        document.documentElement.clientHeight,
+      scrollPercent = scrollPosition / scrollHeight || 0,
+      draw = length * scrollPercent
+    progress.style.strokeDashoffset = length - draw
+  }
+
+  const handleScroll = () => {
+    const toggleButtonVisibility = () => {
+      if (window.pageYOffset > offsetFromTop) {
+        button.classList.add('show')
+      } else {
+        button.classList.remove('show')
+      }
+    }
+
+    const throttledToggleButtonVisibility = throttle(
+      toggleButtonVisibility,
+      100
+    )
+
+    throttledToggleButtonVisibility()
+    showProgress()
+  }
+
+  const throttle = (callback, delay) => {
+    let timeoutId = null
+    return function () {
+      if (timeoutId === null) {
+        timeoutId = setTimeout(() => {
+          callback.apply(null, arguments)
+          timeoutId = null
+        }, delay)
+      }
+    }
+  }
+
+  window.addEventListener('scroll', handleScroll)
+})()
diff --git a/resources/js/components/select-box.js b/resources/js/components/select-box.js
new file mode 100644
index 0000000..d0c8d09
--- /dev/null
+++ b/resources/js/components/select-box.js
@@ -0,0 +1,106 @@
+/**
+ * Single / multiple select with search and sorting, tags components
+ * @requires https://github.com/Choices-js/Choices
+ */
+
+import Choices from 'choices.js'
+export default (() => {
+  let selects = document.querySelectorAll('[data-select]')
+
+  if (selects.length === 0) return
+
+  const defaultOptions = {
+    allowHTML: true,
+    searchPlaceholderValue: 'Search...',
+    removeItemButton: true,
+    editItems: true,
+    searchEnabled: false,
+    shouldSort: false,
+    itemSelectText: '',
+    classNames: {
+      containerInner: 'form-select',
+    },
+  }
+
+  selects.forEach((select) => {
+    let dataAttr = select.getAttribute('data-select'),
+      template = select.getAttribute('data-select-template'),
+      userOptions,
+      options
+
+    if (dataAttr !== '') userOptions = JSON.parse(dataAttr)
+
+    if (template !== null) {
+      options = {
+        ...defaultOptions,
+        ...userOptions,
+        /* eslint-disable indent */
+        callbackOnCreateTemplates: function (template) {
+          return {
+            item: ({ classNames }, data) => {
+              return template(`
+                <div class="${classNames.item} ${
+                  data.highlighted
+                    ? classNames.highlightedState
+                    : classNames.itemSelectable
+                } ${
+                  data.placeholder ? classNames.placeholder : ''
+                }" data-item data-id="${data.id}" data-value="${data.value}" ${
+                  data.active ? 'aria-selected="true"' : ''
+                } ${data.disabled ? 'aria-disabled="true"' : ''} ${data.placeholder ? 'data-placeholder' : ''}>
+                    ${data.placeholder || !data.customProperties?.selected ? data.label : data.customProperties.selected}
+                  ${userOptions.removeItemButton === false ? '' : `<button type="button" class="choices__button" aria-label="Remove item" data-button></button>`}
+                </div>
+              `)
+            },
+            choice: ({ classNames }, data) => {
+              return template(`
+                <div class="${classNames.item} ${classNames.itemChoice} ${
+                  data.disabled
+                    ? classNames.itemDisabled
+                    : classNames.itemSelectable
+                } ${
+                  data.placeholder ? classNames.placeholder : ''
+                }" data-select-text="${this.config.itemSelectText}" data-choice ${
+                  data.disabled
+                    ? 'data-choice-disabled aria-disabled="true"'
+                    : 'data-choice-selectable'
+                } data-id="${data.id}" data-value="${data.value}" ${
+                  data.groupId > 0 ? 'role="treeitem"' : 'role="option"'
+                }>
+                  <div>
+                    ${data.label}
+                    ${(() => {
+                      let output = ''
+                      if (data.customProperties) {
+                        for (const key in data.customProperties) {
+                          if (
+                            Object.prototype.hasOwnProperty.call(
+                              data.customProperties,
+                              key
+                            ) &&
+                            key !== 'selected'
+                          ) {
+                            output += data.customProperties[key]
+                          }
+                        }
+                      }
+                      return output
+                    })()}
+                  </div>
+                </div>
+              `)
+            },
+          }
+        },
+        /* eslint-enable indent */
+      }
+    } else {
+      options = { ...defaultOptions, ...userOptions }
+    }
+
+    /* eslint-disable no-unused-vars, no-undef */
+    const choices = new Choices(select, options)
+    /* eslint-enable no-unused-vars, no-undef */
+  })
+})()
diff --git a/resources/js/components/sticky-element.js b/resources/js/components/sticky-element.js
new file mode 100644
index 0000000..e1b6315
--- /dev/null
+++ b/resources/js/components/sticky-element.js
@@ -0,0 +1,18 @@
+/**
+ * Stuck navbar to the top on page scroll
+ */
+
+export default (() => {
+  const stickyElements = document.querySelectorAll('[data-sticky-element]')
+  if (stickyElements.length === 0) return
+  const observer = new IntersectionObserver(
+    ([e]) => e.target.classList.toggle('is-stuck', e.intersectionRatio < 1),
+    {
+      threshold: [1],
+      rootMargin: '0px 0px 100% 0px',
+    }
+  )
+  stickyElements.forEach((element) => {
+    observer.observe(element)
+  })
+})()
diff --git a/resources/js/components/sticky-navbar.js b/resources/js/components/sticky-navbar.js
new file mode 100644
index 0000000..b7b93d1
--- /dev/null
+++ b/resources/js/components/sticky-navbar.js
@@ -0,0 +1,53 @@
+/**
+ * Stuck navbar to the top on page scroll
+ */
+
+export default (() => {
+    const navbar = document.querySelector('[data-sticky-navbar]')
+    if (!navbar) return
+
+    const navbarHeight = navbar.clientHeight
+
+    /// Function to add classes to the header and referenced elements
+    const handleStickyNavbar = () => {
+        const {offset = 200} = JSON.parse(navbar.dataset.stickyNavbar || '{}')
+        const offsetValue = parseInt(offset, 10)
+
+        if (
+            window.scrollY >= offsetValue &&
+            !navbar.classList.contains('navbar-stuck')
+        ) {
+            // Add padding-top to the body to compensate for the height of navbar-stuck
+            document.body.style.paddingTop = `${navbarHeight}px`
+
+            navbar.classList.add('fixed-top', 'navbar-stuck')
+        } else if (
+            window.scrollY < offsetValue &&
+            navbar.classList.contains('navbar-stuck')
+        ) {
+            // Remove padding-top from the body when navbar is no longer stuck
+            document.body.style.paddingTop = '0'
+
+            navbar.classList.remove('fixed-top', 'navbar-stuck')
+        }
+    }
+
+    // Function to debounce the scroll event
+    const debounce = (func, wait) => {
+        let timeout
+        return (...args) => {
+            const later = () => {
+                timeout = null
+                func(...args)
+            }
+            clearTimeout(timeout)
+            timeout = setTimeout(later, wait)
+        }
+    }
+
+    // Attach the debounced scroll event handler
+    window.addEventListener('scroll', debounce(handleStickyNavbar, 5))
+
+    // Initial call to handleStickyNavbar to set initial state based on page load position
+    handleStickyNavbar()
+})()
diff --git a/resources/js/components/tooltip.js b/resources/js/components/tooltip.js
new file mode 100644
index 0000000..a288c01
--- /dev/null
+++ b/resources/js/components/tooltip.js
@@ -0,0 +1,19 @@
+/**
+ * Tooltip
+ * @requires https://getbootstrap.com
+ * @requires https://popper.js.org/
+ */
+import {Tooltip} from "bootstrap"
+
+export default (() => {
+    const tooltipTriggerList = document.querySelectorAll(
+        '[data-bs-toggle="tooltip"]'
+    )
+
+    /* eslint-disable no-unused-vars, no-undef */
+    const tooltipList = [...tooltipTriggerList].map(
+        (tooltipTriggerEl) =>
+            new Tooltip(tooltipTriggerEl, {trigger: 'hover'})
+    )
+    /* eslint-enable no-unused-vars, no-undef */
+})()
diff --git a/resources/js/theme-switcher.js b/resources/js/theme-switcher.js
new file mode 100644
index 0000000..640b8c0
--- /dev/null
+++ b/resources/js/theme-switcher.js
@@ -0,0 +1,84 @@
+/**
+ * Switch between light and dark themes (color modes)
+ */
+
+;(() => {
+  'use strict'
+
+  const getStoredTheme = () => localStorage.getItem('theme')
+  const setStoredTheme = (theme) => localStorage.setItem('theme', theme)
+
+  const getPreferredTheme = () => {
+    const storedTheme = getStoredTheme()
+    if (storedTheme) {
+      return storedTheme
+    }
+
+    // Set default theme to 'light'.
+    // Possible options: 'dark' or system color mode (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
+    return 'light'
+  }
+
+  const setTheme = (theme) => {
+    if (theme === 'auto') {
+      document.documentElement.setAttribute('data-bs-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'))
+    } else {
+      document.documentElement.setAttribute('data-bs-theme', theme)
+    }
+  }
+
+  setTheme(getPreferredTheme())
+
+  const showActiveTheme = (theme, focus = false) => {
+    const themeSwitcher = document.querySelector('.theme-switcher')
+
+    if (!themeSwitcher) {
+      return
+    }
+
+    const activeThemeIcon = document.querySelector('.theme-icon-active i')
+    const btnToActive = document.querySelector(
+      `[data-bs-theme-value="${theme}"]`
+    )
+    const iconOfActiveBtn = btnToActive.querySelector('.theme-icon i').className
+
+    document.querySelectorAll('[data-bs-theme-value]').forEach((element) => {
+      element.classList.remove('active')
+      element.setAttribute('aria-pressed', 'false')
+    })
+
+    btnToActive.classList.add('active')
+    btnToActive.setAttribute('aria-pressed', 'true')
+    activeThemeIcon.className = iconOfActiveBtn
+    themeSwitcher.setAttribute(
+      'aria-label',
+      `Toggle theme (${btnToActive.dataset.bsThemeValue})`
+    )
+
+    if (focus) {
+      themeSwitcher.focus()
+    }
+  }
+
+  window
+    .matchMedia('(prefers-color-scheme: dark)')
+    .addEventListener('change', () => {
+      const storedTheme = getStoredTheme()
+      if (storedTheme !== 'light' && storedTheme !== 'dark') {
+        setTheme(getPreferredTheme())
+      }
+    })
+
+  window.addEventListener('DOMContentLoaded', () => {
+    showActiveTheme(getPreferredTheme())
+
+    document.querySelectorAll('[data-bs-theme-value]').forEach((toggle) => {
+      toggle.addEventListener('click', () => {
+        const theme = toggle.getAttribute('data-bs-theme-value')
+        setStoredTheme(theme)
+        setTheme(theme)
+        showActiveTheme(theme, true)
+      })
+    })
+  })
+})()
diff --git a/resources/js/theme.js b/resources/js/theme.js
new file mode 100644
index 0000000..498094a
--- /dev/null
+++ b/resources/js/theme.js
@@ -0,0 +1,37 @@
+/*!
+ * Cartzilla | Multipurpose E-Commerce Bootstrap HTML Template
+ * Copyright 2024 Coderthemes
+ * Theme scripts
+ *
+ * @author Coderthemes
+ * @version 1.0.0
+ */
+import 'img-comparison-slider'
+import 'simplebar'
+
+// Components
+import './components/pwa'
+import './components/sticky-navbar'
+import './components/sticky-element'
+import './components/carousel'
+import './components/lightbox'
+import './components/countdown'
+import './components/range-slider'
+import './components/password-toggle'
+import './components/count-input'
+import './components/input-formatter'
+import './components/form-validation'
+import './components/autofocus'
+import './components/scroll-top-button'
+import './components/select-box'
+// import './components/dropdown-hover'
+import './components/tooltip'
+import './components/popover'
+import './components/filter-list'
+import './components/date-picker'
+import './components/master-checkbox'
+import './components/binded-label'
+import './components/image-zoom'
+import './components/code-highlight'
+import './components/copy-text'
+import './components/chart'
diff --git a/resources/scss/_animations.scss b/resources/scss/_animations.scss
new file mode 100644
index 0000000..7160fcd
--- /dev/null
+++ b/resources/scss/_animations.scss
@@ -0,0 +1,419 @@
+// Collection of animation utility classes
+
+// Underline
+
+@mixin underline(
+  $border-width: var(--#{$prefix}underline-thickness),
+  $element: after
+) {
+  position: relative;
+
+  &::#{$element} {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: $border-width;
+    content: "";
+    background-color: currentcolor;
+    transition: transform .3s ease-out;
+    transform: scaleX(0);
+    transform-origin: bottom right;
+  }
+}
+
+@mixin underline-action($element: after) {
+  &::#{$element} {
+    transform: scaleX(1);
+    transform-origin: bottom left;
+  }
+}
+
+.animate-underline {
+
+  &.animate-target,
+  .animate-target {
+    text-decoration: none;
+    @include underline();
+  }
+
+  &:hover,
+  &.show,
+  &.active,
+  &:focus-visible {
+    &.animate-target,
+    .animate-target {
+      @include underline-action();
+    }
+  }
+}
+
+
+// Shake
+
+.animate-shake {
+  &:hover,
+  &:focus-visible {
+    .animate-target {
+      animation: shake .8s;
+    }
+  }
+}
+
+@keyframes shake {
+  0% {
+    transform: scale3d(1, 1, 1);
+  }
+  20% {
+    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -5deg);
+  }
+  50%,
+  70%,
+  90% {
+    transform: scale3d(1.25, 1.25, 1.25) rotate3d(0, 0, 1, 5deg);
+  }
+  60%,
+  80% {
+    transform: scale3d(1.25, 1.25, 1.25) rotate3d(0, 0, 1, -5deg);
+  }
+  100% {
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+
+// Pulse
+
+.animate-pulse {
+  &:hover,
+  &:focus-visible {
+    .animate-target {
+      animation: pulse .9s;
+    }
+  }
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+  }
+  14% {
+    transform: scale(1.25);
+  }
+  28% {
+    transform: scale(1);
+  }
+  42% {
+    transform: scale(1.25);
+  }
+  70% {
+    transform: scale(1);
+  }
+}
+
+
+// Rotate
+
+.animate-rotate {
+  &:hover,
+  &:focus-visible {
+    .animate-target {
+      animation: rotate .45s ease-in-out;
+    }
+  }
+}
+
+@keyframes rotate  {
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+
+// Scale
+
+.animate-scale {
+  &:hover,
+  &:focus-visible {
+    .animate-target {
+      animation: scale .35s ease-in-out;
+    }
+  }
+}
+
+@keyframes scale {
+  0% {
+    transform: scale3d(1, 1, 1);
+  }
+
+  50% {
+    transform: scale3d(1.2, 1.2, 1.2);
+  }
+
+  100% {
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+
+// Slide
+
+@mixin slide( $direction: end ) {
+  overflow: hidden;
+
+  &:hover,
+  &:focus-visible {
+    .animate-target {
+      animation: slide-#{$direction} .3s forwards;
+    }
+  }
+}
+
+.animate-slide-end {
+  @include slide(end);
+}
+
+.animate-slide-start {
+  @include slide(start);
+}
+
+.animate-slide-up {
+  @include slide(up);
+}
+
+.animate-slide-down {
+  @include slide(down);
+}
+
+@keyframes slide-end {
+  49% {
+    transform: translate(100%);
+  }
+  50% {
+    opacity: 0;
+    transform: translate(-100%);
+  }
+  51% {
+    opacity: 1;
+  }
+}
+
+@keyframes slide-start {
+  49% {
+    transform: translate(-100%);
+  }
+  50% {
+    opacity: 0;
+    transform: translate(100%);
+  }
+  51% {
+    opacity: 1;
+  }
+}
+
+@keyframes slide-up {
+  49% {
+    transform: translateY(-100%);
+  }
+  50% {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  51% {
+    opacity: 1;
+  }
+}
+
+@keyframes slide-down {
+  49% {
+    transform: translateY(100%);
+  }
+  50% {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+  51% {
+    opacity: 1;
+  }
+}
+
+
+// Blinking
+
+.animate-blinking {
+  animation: blinking 1s infinite;
+}
+
+@keyframes blinking {
+  from {
+    opacity: 0;
+  }
+}
+
+
+// Disable pseudo elements on .animate-target when used inside .animate-underline parent
+
+.animate-shake,
+.animate-pulse,
+.animate-rotate,
+.animate-scale,
+.animate-slide-end,
+.animate-slide-start,
+.animate-slide-up,
+.animate-slide-down {
+  .animate-target::after {
+    display: none;
+  }
+}
+
+
+// Move up and down infinite animation
+
+.animate-up-down {
+  animation: move-up-down 5s linear infinite;
+}
+
+@keyframes move-up-down {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-1rem);
+  }
+}
+
+
+// Move down and up infinite animation
+
+.animate-down-up {
+  animation: move-down-up 5s linear infinite;
+}
+
+@keyframes move-down-up {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(1rem);
+  }
+}
+
+
+// Spin infinite animation
+
+.animate-spin {
+  animation: spin 10s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  50% {
+    transform: rotate(180deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+
+// Blink infinite animation
+
+.animate-blink {
+  animation: blink 1.75s linear infinite;
+}
+
+@keyframes blink {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+
+// Fade in animation (for Dropdowns)
+
+@keyframes fade-in  {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+
+// Fade up animation (for Dropdowns)
+
+@keyframes fade-up  {
+  from {
+    opacity: 0;
+    transform: translateY(.5rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+
+// Hover effects
+
+.hover-effect-scale {
+  --#{$prefix}transition-duration: .35s;
+  --#{$prefix}transform-scale: 1.06;
+
+  .hover-effect-target {
+    transition: transform var(--#{$prefix}transition-duration) ease-in-out;
+  }
+
+  &:hover .hover-effect-target,
+  &:focus-visible .hover-effect-target,
+  &:focus-within .hover-effect-target {
+    transform: scale(var(--#{$prefix}transform-scale));
+  }
+}
+
+.hover-effect-opacity {
+  --#{$prefix}transition-duration: .25s;
+
+  .hover-effect-target {
+    transition: visibility var(--#{$prefix}transition-duration) ease-in-out, opacity var(--#{$prefix}transition-duration) ease-in-out;
+  }
+
+  &:hover .hover-effect-target.opacity-0,
+  &:focus-visible .hover-effect-target.opacity-0,
+  &:focus-within .hover-effect-target.opacity-0 {
+    visibility: visible !important;
+    opacity: 1 !important;
+  }
+
+  &:hover .hover-effect-target.opacity-100,
+  &:focus-visible .hover-effect-target.opacity-100,
+  &:focus-within .hover-effect-target.opacity-100 {
+    visibility: hidden !important;
+    opacity: 0 !important;
+  }
+}
+
+.hover-effect-scale.hover-effect-opacity {
+  .hover-effect-target {
+    transition: all var(--#{$prefix}transition-duration) ease-in-out;
+  }
+}
+
+.hover-effect-underline:hover {
+  text-decoration: underline !important;
+  text-decoration-thickness: var(--#{$prefix}underline-thickness) !important;
+}
diff --git a/resources/scss/_bootstrap.scss b/resources/scss/_bootstrap.scss
new file mode 100644
index 0000000..2bdf6d0
--- /dev/null
+++ b/resources/scss/_bootstrap.scss
@@ -0,0 +1,40 @@
+// Import Bootstrap framework files
+
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/utilities";
+@import "bootstrap/scss/root";
+@import "bootstrap/scss/reboot";
+@import "bootstrap/scss/type";
+@import "bootstrap/scss/images";
+@import "bootstrap/scss/containers";
+@import "bootstrap/scss/grid";
+@import "bootstrap/scss/tables";
+@import "bootstrap/scss/forms";
+@import "bootstrap/scss/buttons";
+@import "bootstrap/scss/transitions";
+@import "bootstrap/scss/dropdown";
+@import "bootstrap/scss/button-group";
+@import "bootstrap/scss/nav";
+@import "bootstrap/scss/navbar";
+@import "bootstrap/scss/card";
+@import "bootstrap/scss/accordion";
+@import "bootstrap/scss/breadcrumb";
+@import "bootstrap/scss/pagination";
+@import "bootstrap/scss/badge";
+@import "bootstrap/scss/alert";
+@import "bootstrap/scss/progress";
+@import "bootstrap/scss/list-group";
+@import "bootstrap/scss/close";
+@import "bootstrap/scss/toasts";
+@import "bootstrap/scss/modal";
+@import "bootstrap/scss/tooltip";
+@import "bootstrap/scss/popover";
+@import "bootstrap/scss/spinners";
+@import "bootstrap/scss/offcanvas";
+@import "bootstrap/scss/placeholders";
+@import "bootstrap/scss/helpers";
+@import "bootstrap/scss/utilities/api";
diff --git a/resources/scss/_components.scss b/resources/scss/_components.scss
new file mode 100644
index 0000000..ab7ae4b
--- /dev/null
+++ b/resources/scss/_components.scss
@@ -0,0 +1,26 @@
+// Theme Components
+
+@import "components/type";
+@import "components/tables";
+@import "components/forms";
+@import "components/buttons";
+@import "components/dropdown";
+@import "components/nav";
+@import "components/navbar";
+@import "components/card";
+@import "components/accordion";
+@import "components/breadcrumb";
+@import "components/pagination";
+@import "components/alert";
+@import "components/progress";
+@import "components/list-group";
+@import "components/close";
+@import "components/toasts";
+@import "components/tooltip";
+@import "components/popover";
+@import "components/carousel";
+@import "components/lightbox";
+@import "components/select-box";
+@import "components/scrollbar";
+@import "components/date-picker";
+@import "components/image-zoom";
diff --git a/resources/scss/_fonts.scss b/resources/scss/_fonts.scss
new file mode 100644
index 0000000..e146207
--- /dev/null
+++ b/resources/scss/_fonts.scss
@@ -0,0 +1,13 @@
+// Custom web fonts
+
+// latin
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 300 800;
+  src: url("../fonts/inter-variable-latin.woff2") format("woff2");
+  font-display: swap;
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+// Include necessary font subsets here. Ensure that you preload the font files within the <head> section of the HTML document.
diff --git a/resources/scss/_reboot.scss b/resources/scss/_reboot.scss
new file mode 100644
index 0000000..be396d1
--- /dev/null
+++ b/resources/scss/_reboot.scss
@@ -0,0 +1,197 @@
+// Reboot
+
+// Make the edges of fonts smoother + apply globally :focus-visible styles
+
+html * {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  &:focus-visible {
+    outline: var(--#{$prefix}focus-ring-width) solid var(--#{$prefix}focus-ring-color);
+  }
+}
+
+
+// Disable :focus-visible for offcanvas component
+
+.offcanvas:focus-visible {
+  outline: none;
+}
+
+
+// Sticky footer
+
+body {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+.content-wrapper {
+  flex: 1;
+}
+.footer {
+  flex-shrink: 0;
+}
+
+
+// Images
+// Responsive images (ensure images don't scale beyond their parents)
+
+img,
+figure {
+  max-width: 100%;
+  height: auto;
+  vertical-align: middle;
+}
+svg {
+  max-width: 100%;
+}
+
+
+// Responsive iframes
+
+iframe {
+  width: 100%;
+}
+
+
+// Links
+/* stylelint-disable selector-no-qualifying-type */
+a,
+button {
+  text-underline-offset: .25em;
+  &.text-decoration-underline:hover {
+    text-decoration: none !important;
+  }
+}
+/* stylelint-enable selector-no-qualifying-type */
+
+.link-body-emphasis {
+  --#{$prefix}link-opacity: 1;
+}
+
+
+// Text Selection Color
+
+::selection {
+  background: var(--#{$prefix}user-selection-color);
+}
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    ::selection {
+      background: var(--#{$prefix}user-selection-color-dark);
+    }
+  }
+}
+
+
+// Lists
+
+ol,
+ul {
+  display: flex;
+  flex-direction: column;
+  gap: $spacer * .5;
+  padding-left: $spacer * 1.5;
+
+  ul,
+  ol {
+    margin-top: $spacer * .5;
+  }
+}
+
+ol,
+ul,
+dl {
+  margin-top: 0;
+  margin-bottom: $paragraph-margin-bottom;
+}
+
+dt {
+  color: $dt-color;
+}
+
+dd {
+  margin-bottom: $spacer * .75;
+}
+
+
+// Legend
+
+legend {
+  color: $legend-color;
+}
+
+
+// Base font icons styles
+
+[class*=" #{$icon-prefix}"],
+[class^="#{$icon-prefix}"] {
+  display: inline-flex;
+
+  &:not(.animate-target) {
+    a &,
+    button & {
+      transition: opacity .2s ease-in-out;
+    }
+    a:hover &,
+    a:focus-visible &,
+    a.active &,
+    a.show &,
+    button:hover &,
+    button:focus-visible &,
+    button.active &,
+    button.show & {
+      opacity: 1 !important;
+    }
+  }
+}
+
+
+// Code
+
+pre,
+.hljs {
+  padding: $pre-padding-y $pre-padding-x;
+  margin: 0;
+  background-color: $pre-bg;
+  @include border-radius($pre-border-radius);
+}
+
+kbd {
+  @include border-radius($border-radius-xs);
+}
+
+.hljs-comment,
+.hljs-quote {
+  font-style: normal;
+}
+
+
+// Section that is wider than a container on a left/right side
+
+.container-start {
+  margin-left: calc((100% - (map-get($container-max-widths, "xxl") - $grid-gutter-width)) / 2);
+}
+.container-end {
+  margin-right: calc((100% - (map-get($container-max-widths, "xxl") - $grid-gutter-width)) / 2);
+}
+@include media-breakpoint-down(xxl) {
+  .container-start {
+    margin-left: calc((100% - (map-get($container-max-widths, "xl") - $grid-gutter-width)) / 2);
+  }
+  .container-end {
+    margin-right: calc((100% - (map-get($container-max-widths, "xl") - $grid-gutter-width)) / 2);
+  }
+}
+@include media-breakpoint-down(sm) {
+  .container-start {
+    padding-left: $container-padding-x * .5;
+    margin-left: 0;
+  }
+  .container-end {
+    padding-right: $container-padding-x * .5;
+    margin-right: 0;
+  }
+}
diff --git a/resources/scss/_root.scss b/resources/scss/_root.scss
new file mode 100644
index 0000000..0efbbde
--- /dev/null
+++ b/resources/scss/_root.scss
@@ -0,0 +1,67 @@
+// Root CSS variables
+
+:root,
+[data-bs-theme="light"] {
+
+  // Link color
+  --#{$prefix}link-color: var(--#{$prefix}info);
+  --#{$prefix}link-color-rgb: var(--#{$prefix}info-rgb);
+  --#{$prefix}link-hover-color: var(--#{$prefix}info);
+  --#{$prefix}link-hover-color-rgb: var(--#{$prefix}info-rgb);
+  --#{$prefix}component-hover-color: #{$component-hover-color};
+
+  // Common component colors
+  --#{$prefix}component-color: #{$component-color};
+  --#{$prefix}component-hover-color: #{$component-hover-color};
+  --#{$prefix}component-hover-bg: #{$component-hover-bg};
+  --#{$prefix}component-active-color: #{$component-active-color};
+  --#{$prefix}component-active-bg: #{$component-active-bg};
+  --#{$prefix}component-disabled-color: #{$component-disabled-color};
+
+  // User selection color
+  --#{$prefix}user-selection-color: #{$user-selection-color};
+
+  // Add xs and xxxl border-radius
+  --#{$prefix}border-radius-xs: #{$border-radius-xs};
+  --#{$prefix}border-radius-xxxl: #{$border-radius-xxxl};
+
+  // Add underline thickness global variable
+  --#{$prefix}underline-thickness: #{$underline-thickness};
+
+  // Plyr video player main accent color
+  --plyr-color-main: var(--#{$prefix}primary);
+}
+
+
+// Dark mode overrides
+
+@if $enable-dark-mode {
+  @include color-mode(dark, true) {
+
+    // Link color
+    --#{$prefix}link-color: var(--#{$prefix}info);
+    --#{$prefix}link-color-rgb: var(--#{$prefix}info-rgb);
+    --#{$prefix}link-hover-color: var(--#{$prefix}info);
+    --#{$prefix}link-hover-color-rgb: var(--#{$prefix}info-rgb);
+
+    // Common component colors
+    --#{$prefix}component-color: #{$component-color-dark};
+    --#{$prefix}component-hover-color: #{$component-hover-color-dark};
+    --#{$prefix}component-hover-bg: #{$component-hover-bg-dark};
+    --#{$prefix}component-active-color: #{$component-active-color-dark};
+    --#{$prefix}component-active-bg: #{$component-active-bg-dark};
+    --#{$prefix}component-disabled-color: #{$component-disabled-color-dark};
+
+    // User selection color
+    --#{$prefix}user-selection-color-dark: #{$user-selection-color-dark};
+
+    // Focus styles
+    --#{$prefix}focus-ring-opacity: #{$focus-ring-opacity-dark};
+    --#{$prefix}focus-ring-color: #{$focus-ring-color-dark};
+
+    // Box shadow
+    --#{$prefix}box-shadow: #{$box-shadow-dark};
+    --#{$prefix}box-shadow-sm: #{$box-shadow-sm-dark};
+    --#{$prefix}box-shadow-lg: #{$box-shadow-lg-dark};
+  }
+}
diff --git a/resources/scss/_user-variables.scss b/resources/scss/_user-variables.scss
new file mode 100644
index 0000000..51d4104
--- /dev/null
+++ b/resources/scss/_user-variables.scss
@@ -0,0 +1,8 @@
+// _user-variables.scss
+// Use this to override Bootstrap and Cartzilla variables
+//
+// Example of a variable override to change Cartzilla background color
+// Remove the "//" to enable variables and apply the changes
+//
+// $body-bg: #f9fafb;
+// $body-bg-dark: #111827;
diff --git a/resources/scss/_user.scss b/resources/scss/_user.scss
new file mode 100644
index 0000000..5d5f081
--- /dev/null
+++ b/resources/scss/_user.scss
@@ -0,0 +1,2 @@
+// _user.scss
+// Use this file to write your custom SCSS
diff --git a/resources/scss/_utilities.scss b/resources/scss/_utilities.scss
new file mode 100644
index 0000000..8acfd8c
--- /dev/null
+++ b/resources/scss/_utilities.scss
@@ -0,0 +1,318 @@
+// Utilities
+// Extend / update default Bootstrap's utility classes
+
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/utilities";
+
+/* stylelint-disable @stylistic/value-list-max-empty-lines, @stylistic/function-max-empty-lines */
+$utilities: map-merge(
+  $utilities,
+  (
+    // Remove utilities
+    "link-offset": null,
+    "link-underline": null,
+    "link-underline-opacity": null,
+
+    // Border radius
+    "rounded": (
+      property: border-radius,
+      class: rounded,
+      values: (
+        null: var(--#{$prefix}border-radius),
+        0: 0,
+        1: var(--#{$prefix}border-radius-xs),
+        2: var(--#{$prefix}border-radius-sm),
+        3: var(--#{$prefix}border-radius),
+        4: var(--#{$prefix}border-radius-lg),
+        5: var(--#{$prefix}border-radius-xl),
+        6: var(--#{$prefix}border-radius-xxl),
+        7: var(--#{$prefix}border-radius-xxxl),
+        circle: 50%,
+        pill: var(--#{$prefix}border-radius-pill)
+      )
+    ),
+    "rounded-top": (
+      property: border-top-left-radius border-top-right-radius,
+      class: rounded-top,
+      values: (
+        null: var(--#{$prefix}border-radius),
+        0: 0,
+        1: var(--#{$prefix}border-radius-xs),
+        2: var(--#{$prefix}border-radius-sm),
+        3: var(--#{$prefix}border-radius),
+        4: var(--#{$prefix}border-radius-lg),
+        5: var(--#{$prefix}border-radius-xl),
+        6: var(--#{$prefix}border-radius-xxl),
+        7: var(--#{$prefix}border-radius-xxxl),
+        circle: 50%,
+        pill: var(--#{$prefix}border-radius-pill)
+      )
+    ),
+    "rounded-end": (
+      property: border-top-right-radius border-bottom-right-radius,
+      class: rounded-end,
+      values: (
+        null: var(--#{$prefix}border-radius),
+        0: 0,
+        1: var(--#{$prefix}border-radius-xs),
+        2: var(--#{$prefix}border-radius-sm),
+        3: var(--#{$prefix}border-radius),
+        4: var(--#{$prefix}border-radius-lg),
+        5: var(--#{$prefix}border-radius-xl),
+        6: var(--#{$prefix}border-radius-xxl),
+        7: var(--#{$prefix}border-radius-xxxl),
+        circle: 50%,
+        pill: var(--#{$prefix}border-radius-pill)
+      )
+    ),
+    "rounded-bottom": (
+      property: border-bottom-right-radius border-bottom-left-radius,
+      class: rounded-bottom,
+      values: (
+        null: var(--#{$prefix}border-radius),
+        0: 0,
+        1: var(--#{$prefix}border-radius-xs),
+        2: var(--#{$prefix}border-radius-sm),
+        3: var(--#{$prefix}border-radius),
+        4: var(--#{$prefix}border-radius-lg),
+        5: var(--#{$prefix}border-radius-xl),
+        6: var(--#{$prefix}border-radius-xxl),
+        7: var(--#{$prefix}border-radius-xxxl),
+        circle: 50%,
+        pill: var(--#{$prefix}border-radius-pill)
+      )
+    ),
+    "rounded-start": (
+      property: border-bottom-left-radius border-top-left-radius,
+      class: rounded-start,
+      values: (
+        null: var(--#{$prefix}border-radius),
+        0: 0,
+        1: var(--#{$prefix}border-radius-xs),
+        2: var(--#{$prefix}border-radius-sm),
+        3: var(--#{$prefix}border-radius),
+        4: var(--#{$prefix}border-radius-lg),
+        5: var(--#{$prefix}border-radius-xl),
+        6: var(--#{$prefix}border-radius-xxl),
+        7: var(--#{$prefix}border-radius-xxxl),
+        circle: 50%,
+        pill: var(--#{$prefix}border-radius-pill)
+      )
+    ),
+
+    // Min width
+    "min-width": (
+      property: min-width,
+      class: min-w,
+      values: (
+        0: 0,
+        100: 100
+      )
+    ),
+
+    // Line height
+    "line-height": (
+      property: line-height,
+      class: lh,
+      values: (
+        0: 0,
+        1: 1,
+        sm: $line-height-sm,
+        base: $line-height-base,
+        lg: $line-height-lg,
+      )
+    ),
+
+    // Opacity
+    "opacity": (
+      property: opacity,
+      values: (
+        0: 0,
+        25: .25,
+        40: .4,
+        50: .5,
+        60: .6,
+        75: .75,
+        100: 1,
+      )
+    ),
+
+    // z-index
+    "z-index": (
+      property: z-index,
+      class: z,
+      values: map-merge(
+        $zindex-levels,
+        (
+          sticky: $zindex-sticky,
+          fixed: $zindex-fixed
+        )
+      )
+    ),
+
+    // cursor
+    "cursor": (
+      property: cursor,
+      class: cursor,
+      values: (
+        pointer: pointer,
+        default: default,
+        help: help,
+        wait: wait,
+        crosshair: crosshair,
+        not-allowed: not-allowed,
+        zoom-in: zoom-in,
+        zoom-out: zoom-out,
+        grab: grab
+      )
+    )
+  )
+);
+
+
+// Disable :focus / :focus-visible
+
+.focus-none {
+  &:focus,
+  &:focus-visible {
+    outline: none !important;
+    box-shadow: none !important;
+  }
+}
+
+
+// Fix Safari quirk of rounded corners
+
+[class^="rounded"].overflow-hidden,
+[class*=" rounded"].overflow-hidden {
+  transform: translateZ(0);
+}
+
+
+// Dotted background
+
+.bg-dotted {
+  --#{$prefix}bg-color: var(--#{$prefix}tertiary-bg);
+  --#{$prefix}dot-color: var(--#{$prefix}secondary);
+  --#{$prefix}dot-size: 1px;
+  --#{$prefix}dot-space: 20px;
+
+  background: linear-gradient(90deg, var(--#{$prefix}bg-color) calc(var(--#{$prefix}dot-space) - var(--#{$prefix}dot-size)), transparent 1%) center, linear-gradient(var(--#{$prefix}bg-color) calc(var(--#{$prefix}dot-space) - var(--#{$prefix}dot-size)), transparent 1%) center, var(--#{$prefix}dot-color);
+  background-size: var(--#{$prefix}dot-space) var(--#{$prefix}dot-space);
+}
+
+
+// Border styles
+
+.border-dashed {
+  --#{$prefix}border-style: dashed;
+}
+.border-dotted {
+  --#{$prefix}border-style: dotted;
+}
+
+
+// Disable transition on element
+
+.transition-none {
+  transition: none !important;
+}
+
+
+// Disable transform on element
+
+.transform-none {
+  transform: none !important;
+}
+
+
+// Disable background image on element
+
+.bg-image-none {
+  background-image: none !important;
+}
+
+
+// Flip objects horizontally when the direction is set to RTL
+
+[dir="rtl"] .rtl-flip {
+  transform: rotateY(180deg);
+}
+
+
+// Display element only when the direction is set to RTL
+
+[dir="rtl"] .d-none-rtl {
+  display: none !important;
+}
+
+[dir="rtl"] .d-block-rtl {
+  display: block !important;
+}
+
+[dir="rtl"] .d-inline-rtl {
+  display: inline !important;
+}
+
+[dir="rtl"] .d-inline-block-rtl {
+  display: inline-block !important;
+}
+
+[dir="rtl"] .d-flex-rtl {
+  display: flex !important;
+}
+
+[dir="rtl"] .d-inline-flex-rtl {
+  display: inline-flex !important;
+}
+
+
+// To make IntersectionObserver work with ".sticky-top" class correctly
+
+[data-sticky-element] {
+  top: -1px !important;
+}
+
+
+// Dark mode
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+
+    // Display utilities
+    .d-none-dark {
+      display: none !important;
+    }
+    .d-block-dark {
+      display: block !important;
+    }
+    .d-inline-dark {
+      display: inline !important;
+    }
+    .d-inline-block-dark {
+      display: inline-block !important;
+    }
+    .d-inline-flex-dark {
+      display: inline-flex !important;
+    }
+    .d-flex-dark {
+      display: flex !important;
+    }
+
+    // Shadows
+    .shadow:not([data-bs-theme="light"]) {
+      box-shadow: $box-shadow-dark !important;
+    }
+    .shadow-sm:not([data-bs-theme="light"]) {
+      box-shadow: $box-shadow-sm-dark !important;
+    }
+    .shadow-lg:not([data-bs-theme="light"]) {
+      box-shadow: $box-shadow-lg-dark !important;
+    }
+  }
+}
+/* stylelint-enable @stylistic/value-list-max-empty-lines, @stylistic/function-max-empty-lines */
diff --git a/resources/scss/_variables-dark.scss b/resources/scss/_variables-dark.scss
new file mode 100644
index 0000000..4054c3b
--- /dev/null
+++ b/resources/scss/_variables-dark.scss
@@ -0,0 +1,165 @@
+// Dark color mode variables
+//
+// Custom variables for the `[data-bs-theme="dark"]` theme.
+
+// Global colors
+
+/* stylelint-disable */
+$primary-text-emphasis-dark:        adjust-color($primary, $lightness: -5%) !default;
+$secondary-text-emphasis-dark:      $gray-200 !default;
+$success-text-emphasis-dark:        adjust-color($success, $lightness: -5%) !default;
+$danger-text-emphasis-dark:         adjust-color($danger, $lightness: -5%)!default;
+$warning-text-emphasis-dark:        adjust-color($warning, $lightness: -5%) !default;
+$info-text-emphasis-dark:           adjust-color($info, $lightness: -5%) !default;
+$light-text-emphasis-dark:          $gray-200 !default;
+$dark-text-emphasis-dark:           $white !default;
+/* stylelint-enable */
+
+$primary-bg-subtle-dark:            mix($gray-900, $primary, 90%) !default;
+$secondary-bg-subtle-dark:          $gray-800 !default;
+$success-bg-subtle-dark:            mix($gray-900, $success, 90%) !default;
+$danger-bg-subtle-dark:             mix($gray-900, $danger, 90%) !default;
+$warning-bg-subtle-dark:            mix($gray-900, $warning, 90%) !default;
+$info-bg-subtle-dark:               mix($gray-900, $info, 90%) !default;
+$light-bg-subtle-dark:              $gray-900 !default;
+$dark-bg-subtle-dark:               $gray-950 !default;
+
+$primary-border-subtle-dark:        mix($gray-900, $primary, 80%) !default;
+$secondary-border-subtle-dark:      $gray-700 !default;
+$success-border-subtle-dark:        mix($gray-900, $success, 80%) !default;
+$danger-border-subtle-dark:         mix($gray-900, $danger, 80%) !default;
+$warning-border-subtle-dark:        mix($gray-900, $warning, 80%) !default;
+$info-border-subtle-dark:           mix($gray-900, $info, 80%) !default;
+$light-border-subtle-dark:          $gray-700 !default;
+$dark-border-subtle-dark:           $gray-950 !default;
+
+$body-color-dark:                   $gray-300 !default;
+$body-bg-dark:                      $gray-900 !default;
+$body-secondary-color-dark:         $gray-400 !default;
+$body-secondary-bg-dark:            $gray-700 !default;
+$body-tertiary-color-dark:          $gray-500 !default;
+$body-tertiary-bg-dark:             $gray-800 !default;
+$body-emphasis-color-dark:          $gray-100 !default;
+$user-selection-color-dark:         rgba($white, .12) !default;
+$border-color-dark:                 $gray-700 !default;
+$headings-color-dark:               $white !default;
+
+$component-color-dark:              $gray-200 !default;
+$component-hover-color-dark:        $white !default;
+$component-hover-bg-dark:           $gray-800 !default;
+$component-active-color-dark:       $white !default;
+$component-active-bg-dark:          $gray-700 !default;
+$component-disabled-color-dark:     $gray-500 !default;
+
+
+// Shadows
+
+$box-shadow-dark:                   0 .5rem 1.875rem -.25rem rgba(#080b12, .25) !default;
+$box-shadow-sm-dark:                0 .375rem 1.375rem -.25rem rgba(#080b12, .25) !default;
+$box-shadow-lg-dark:                0 .75rem 3rem -.5rem rgba(#080b12, .25) !default;
+
+
+// Focus styles
+
+$focus-ring-opacity-dark:           .12 !default;
+$focus-ring-color-dark:             rgba($white, $focus-ring-opacity) !default;
+
+
+// Tables
+
+$table-striped-bg-factor-dark:      .05 !default;
+$table-striped-bg-dark:             rgba($white, $table-striped-bg-factor-dark) !default;
+
+$table-active-bg-factor-dark:       .1 !default;
+$table-active-bg-dark:              rgba($white, $table-active-bg-factor-dark) !default;
+
+$table-hover-bg-factor-dark:        .075 !default;
+$table-hover-bg-dark:               rgba($white, $table-hover-bg-factor-dark) !default;
+
+
+// Buttons
+
+$btn-color-dark:                    $gray-200 !default;
+$btn-hover-color-dark:              $white !default;
+$btn-link-disabled-color-dark:      $gray-400 !default;
+
+
+// Forms
+
+$input-bg-dark:                               transparent !default;
+$input-border-color-dark:                     $gray-600 !default;
+$input-focus-bg-dark:                         transparent !default;
+$input-focus-border-color-dark:               $white !default;
+
+$form-check-input-bg-dark:                    $input-bg-dark !default;
+$form-check-input-border-dark:                var(--#{$prefix}border-width) solid $input-border-color-dark !default;
+$form-check-input-checked-color-dark:         $white !default;
+$form-check-input-checked-bg-color-dark:      $form-check-input-bg-dark !default;
+$form-check-input-checked-border-color-dark:  $white !default;
+$form-check-input-checked-bg-image-dark:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>") !default;
+$form-check-radio-checked-bg-image-dark:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color-dark}'/></svg>") !default;
+
+$form-check-input-indeterminate-color-dark:   $form-check-input-checked-color-dark !default;
+$form-check-input-indeterminate-bg-color-dark: $form-check-input-checked-bg-color-dark !default;
+$form-check-input-indeterminate-border-color-dark: $form-check-input-checked-border-color-dark !default;
+$form-check-input-indeterminate-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>") !default;
+
+$form-switch-bg-color-dark:                    $gray-600 !default;
+
+$form-valid-color-dark:                        $success !default;
+$form-valid-border-color-dark:                 $success !default;
+$form-invalid-color-dark:                      $danger !default;
+$form-invalid-border-color-dark:               $danger !default;
+
+
+// Input group
+
+$input-group-addon-border-color-dark:   $input-border-color-dark !default;
+
+
+// Navs
+
+$nav-tabs-link-hover-bg-dark:           rgba($gray-700, .4) !default;
+$nav-tabs-link-active-bg-dark:          $gray-700 !default;
+$nav-tabs-link-active-box-shadow-dark:  none !default;
+
+
+// Accordion
+
+$accordion-icon-color-dark:             $white !default;
+$accordion-icon-active-color-dark:      $white !default;
+$accordion-button-icon-dark:            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='#{$accordion-icon-color-dark}'><path d='M3.8,7.9c0.4-0.4,1.1-0.4,1.5,0l6.7,6.7l6.7-6.7c0.4-0.4,1.1-0.4,1.5,0c0.4,0.4,0.4,1.1,0,1.5l-7.4,7.4c-0.4,0.4-1.1,0.4-1.5,0L3.8,9.4C3.3,9.1,3.3,8.4,3.8,7.9z'/></svg>") !default;
+$accordion-button-active-icon-dark:     url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='#{$accordion-icon-active-color-dark}'><path d='M3.8,7.9c0.4-0.4,1.1-0.4,1.5,0l6.7,6.7l6.7-6.7c0.4-0.4,1.1-0.4,1.5,0c0.4,0.4,0.4,1.1,0,1.5l-7.4,7.4c-0.4,0.4-1.1,0.4-1.5,0L3.8,9.4C3.3,9.1,3.3,8.4,3.8,7.9z'/></svg>") !default;
+$accordion-button-icon-alt-dark:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='#{$accordion-icon-color-dark}'><path d='M12 4.125c.483 0 .875.392.875.875v14c0 .483-.392.875-.875.875s-.875-.392-.875-.875V5c0-.483.392-.875.875-.875z'/><path d='M4.125 12c0-.483.392-.875.875-.875h14c.483 0 .875.392.875.875s-.392.875-.875.875H5c-.483 0-.875-.392-.875-.875z'/></svg>") !default;
+$accordion-button-active-icon-alt-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='#{$accordion-icon-active-color-dark}'><path d='M4.125 12c0-.483.392-.875.875-.875h14c.483 0 .875.392.875.875s-.392.875-.875.875H5c-.483 0-.875-.392-.875-.875z'/></svg>") !default;
+
+
+// Popovers
+
+$popover-border-color-dark:             $gray-700 !default;
+$popover-box-shadow-dark:               $box-shadow-dark !default;
+
+
+// Breadcrumbs
+
+$breadcrumb-divider-color-dark:         $component-color-dark !default;
+$breadcrumb-divider-dark:               url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='#{$breadcrumb-divider-color-dark}'><path d='M8.381 5.381c.342-.342.896-.342 1.237 0l6 6c.342.342.342.896 0 1.237l-6 6c-.342.342-.896.342-1.237 0s-.342-.896 0-1.237L13.763 12 8.381 6.619c-.342-.342-.342-.896 0-1.237z'/></svg>") !default;
+$breadcrumb-divider-flipped-dark:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='#{$breadcrumb-divider-color-dark}'><path d='M15.3,5.4c0.3,0.3,0.3,0.9,0,1.2L9.9,12l5.4,5.4c0.3,0.3,0.3,0.9,0,1.2s-0.9,0.3-1.2,0l-6-6c-0.3-0.3-0.3-0.9,0-1.2l6-6C14.4,5,14.9,5,15.3,5.4L15.3,5.4z'/></svg>") !default;
+
+
+// Custom scrollbar
+
+$scrollbar-bg-dark:                      $gray-600 !default;
+$scrollbar-track-bg-dark:                adjust-color($gray-700, $lightness: -6%) !default; // stylelint-disable-line
+
+
+// Carousel
+
+$carousel-bullet-bg-dark:                rgba($white, .3) !default;
+$carousel-bullet-active-bg-dark:         $white !default;
+
+$carousel-progressbar-bg-dark:           rgba($white, .3) !default;
+$carousel-progressbar-fill-bg-dark:      $white !default;
+
+$carousel-scrollbar-bg-dark:             rgba($white, .3) !default;
+$carousel-scrollbar-drag-bg-dark:        $white !default;
diff --git a/resources/scss/_variables.scss b/resources/scss/_variables.scss
new file mode 100644
index 0000000..10b8239
--- /dev/null
+++ b/resources/scss/_variables.scss
@@ -0,0 +1,841 @@
+// Variables
+//
+// Variables should follow the `$component-state-property-size` formula for
+// consistent naming. Ex: $nav-link-hover-color and $btn-padding-y-sm.
+
+// Import Bootstrap functions to use inside variables values
+@import "bootstrap/scss/functions";
+
+
+// Color system
+
+// Grayscale
+$white:    #fff !default;
+$gray-50:  #f5f7fa !default;
+$gray-100: #eef1f6 !default;
+$gray-200: #e0e5eb !default;
+$gray-300: #cad0d9 !default;
+$gray-400: #9ca3af !default;
+$gray-500: #6c727f !default;
+$gray-600: #4e5562 !default;
+$gray-700: #333d4c !default;
+$gray-800: #222934 !default;
+$gray-900: #181d25 !default;
+$gray-950: #131920 !default;
+$black:    #000 !default;
+
+// Disable Bootstrap's default $colors map
+$colors: () !default;
+
+// Disable Bootstrap's default $grays map
+$grays: () !default;
+
+// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
+// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
+$min-contrast-ratio:   2 !default;
+
+// Theme colors
+$primary:       #f55266 !default;
+$secondary:     $gray-500 !default;
+$success:       #33b36b !default;
+$info:          #2f6ed5 !default;
+$warning:       #fc9231 !default;
+$danger:        #f03d3d !default;
+$light:         $white !default;
+$dark:          $gray-800 !default;
+
+/* stylelint-disable */
+$primary-text-emphasis:       adjust-color($primary, $lightness: -10%) !default;
+$secondary-text-emphasis:     $gray-700 !default;
+$success-text-emphasis:       adjust-color($success, $lightness: -10%) !default;
+$danger-text-emphasis:        adjust-color($danger, $lightness: -10%) !default;
+$warning-text-emphasis:       adjust-color($warning, $lightness: -10%) !default;
+$info-text-emphasis:          adjust-color($info, $lightness: -10%) !default;
+$light-text-emphasis:         $gray-700 !default;
+$dark-text-emphasis:          $gray-900 !default;
+/* stylelint-enable */
+
+$primary-bg-subtle:           tint-color($primary, 90%) !default;
+$secondary-bg-subtle:         $gray-50 !default;
+$success-bg-subtle:           tint-color($success, 90%) !default;
+$danger-bg-subtle:            tint-color($danger, 90%) !default;
+$warning-bg-subtle:           tint-color($warning, 90%) !default;
+$info-bg-subtle:              tint-color($info, 90%) !default;
+$light-bg-subtle:             $white !default;
+$dark-bg-subtle:              tint-color($dark, 92%) !default;
+
+$primary-border-subtle:       tint-color($primary, 80%) !default;
+$secondary-border-subtle:     $gray-200 !default;
+$success-border-subtle:       tint-color($success, 80%) !default;
+$danger-border-subtle:        tint-color($danger, 80%) !default;
+$warning-border-subtle:       tint-color($warning, 80%) !default;
+$info-border-subtle:          tint-color($info, 80%) !default;
+$light-border-subtle:         $gray-100 !default;
+$dark-border-subtle:          $gray-200 !default;
+
+// User selection color
+$user-selection-color:        rgba($gray-900, .1) !default;
+
+
+// Options
+//
+// Modifying Bootstrap global options
+
+$enable-shadows:              true !default;
+$enable-negative-margins:     true !default;
+$enable-dark-mode:            true !default;
+
+
+// Prefix for CSS variables and icons
+
+$prefix:                      cz- !default;
+$icon-prefix:                 ci- !default;
+
+
+// Spacing
+
+$spacer:                      1rem !default;
+
+
+// Body
+// Settings for the `<body>` element.
+
+$body-color:                  $gray-600 !default;
+$body-bg:                     $white !default;
+
+$body-secondary-color:        $gray-500 !default;
+$body-secondary-bg:           $gray-100 !default;
+
+$body-tertiary-color:         $gray-400 !default;
+$body-tertiary-bg:            $gray-50 !default;
+
+$body-emphasis-color:         $gray-800 !default;
+
+
+// Override Bootstrap's links
+
+$link-shade-percentage:       0% !default;
+$link-hover-decoration:       none !default;
+
+
+// Grid breakpoints
+//
+// Modifying default Bootstrap's $grid-breakpoints map
+
+$grid-breakpoints: (
+  xs: 0,
+  sm: 500px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+  xxl: 1400px
+) !default;
+
+
+// Grid containers
+//
+// Modifying default Bootstrap's $container-max-widths map (max-width of .container)
+$container-max-widths: (
+  sm: 95%,
+  md: 95%,
+  lg: 95%,
+  xl: 95%,
+  xxl: 1328px
+) !default;
+
+
+// Container padding
+
+$container-padding-x:         2rem !default;
+
+
+// Components
+//
+// Define common padding, border radius sizes, shadows and more.
+
+$border-width:                1px !default;
+$border-color:                $gray-200 !default;
+$border-color-translucent:    rgba($black, .1) !default;
+
+$border-radius:               .5rem !default;
+$border-radius-xs:            calc(var(--#{$prefix}border-radius) * .5) !default;
+$border-radius-sm:            calc(var(--#{$prefix}border-radius) * .75) !default;
+$border-radius-lg:            calc(var(--#{$prefix}border-radius) * 1.5) !default;
+$border-radius-xl:            calc(var(--#{$prefix}border-radius) * 2) !default;
+$border-radius-xxl:           calc(var(--#{$prefix}border-radius) * 2.5) !default;
+$border-radius-xxxl:          calc(var(--#{$prefix}border-radius) * 3) !default;
+$border-radius-pill:          50rem !default;
+
+$box-shadow:                  0 .5rem 2rem -.25rem rgba(#676f7b, .1) !default;
+$box-shadow-sm:               0 .375rem 1.5rem rgba(#676f7b, .06) !default;
+$box-shadow-lg:               0 1.125rem 3rem -.375rem rgba(#676f7b, .12) !default;
+$box-shadow-inset:            unset !default;
+
+$underline-thickness:         1px !default;
+
+$component-color:             $gray-700 !default;
+$component-hover-color:       $gray-900 !default;
+$component-hover-bg:          $gray-50 !default;
+$component-active-color:      $gray-900 !default;
+$component-active-bg:         $gray-100 !default;
+$component-disabled-color:    $gray-400 !default;
+
+$focus-ring-width:            .25rem !default;
+$focus-ring-opacity:          .1 !default;
+$focus-ring-color:            rgba($gray-900, $focus-ring-opacity) !default;
+$focus-ring-blur:             0 !default;
+$focus-ring-box-shadow:       0 0 $focus-ring-blur $focus-ring-width var(--#{$prefix}focus-ring-color) !default;
+
+$caret-width:                 1.275em !default;
+$caret-spacing:               .15em !default;
+
+
+// Typography
+//
+// Font, line-height, and color for body text, headings, and more.
+
+$font-family-sans-serif:      "Inter", sans-serif !default;
+
+$font-size-root:              1rem !default;
+$font-size-base:              $font-size-root !default;
+$font-size-xl:                $font-size-base * 1.25 !default;
+$font-size-lg:                $font-size-base * 1.125 !default;
+$font-size-sm:                $font-size-base * .875 !default;
+$font-size-xs:                $font-size-base * .75 !default;
+
+$font-weight-lighter:         lighter !default;
+$font-weight-light:           300 !default;
+$font-weight-normal:          400 !default;
+$font-weight-medium:          500 !default;
+$font-weight-semibold:        600 !default;
+$font-weight-bold:            700 !default;
+$font-weight-bolder:          bolder !default;
+
+$font-weight-base:            $font-weight-normal !default;
+
+$line-height-base:            1.5 !default;
+$line-height-sm:              1.25 !default;
+$line-height-lg:              2 !default;
+
+$h1-font-size:                $font-size-base * 2.5 !default;
+$h2-font-size:                $font-size-base * 2 !default;
+$h3-font-size:                $font-size-base * 1.75 !default;
+$h4-font-size:                $font-size-base * 1.5 !default;
+$h5-font-size:                $font-size-base * 1.25 !default;
+$h6-font-size:                $font-size-base !default;
+
+// Modifying default Bootstrap's $font-sizes map
+$font-sizes: (
+  1: $h1-font-size,
+  2: $h2-font-size,
+  3: $h3-font-size,
+  4: $h4-font-size,
+  5: $h5-font-size,
+  6: $h6-font-size,
+  "xl": $font-size-xl,
+  "lg": $font-size-lg,
+  "base": $font-size-base,
+  "sm": $font-size-sm,
+  "xs": $font-size-xs
+) !default;
+
+$headings-margin-bottom:      $spacer !default;
+$headings-font-weight:        $font-weight-semibold !default;
+$headings-color:              $gray-900 !default;
+
+$h1-line-height:              1.2 !default;
+$h2-line-height:              1.25 !default;
+$h3-line-height:              1.3 !default;
+$h4-line-height:              1.35 !default;
+$h5-line-height:              1.4 !default;
+$h6-line-height:              1.45 !default;
+
+// Modifying default Bootstrap's $display-font-sizes map
+$display-font-sizes: (
+  1: $font-size-base * 5,
+  2: $font-size-base * 4.5,
+  3: $font-size-base * 4,
+  4: $font-size-base * 3.5,
+  5: $font-size-base * 3,
+  6: $font-size-base * 2.625
+) !default;
+
+$display-font-weight:         $font-weight-bold !default;
+$display-line-height:         $h1-line-height !default;
+
+$lead-font-size:              $font-size-base * 1.5 !default;
+$lead-font-weight:            $font-weight-base !default;
+
+$blockquote-margin-y:         $spacer * 1.5 !default;
+$blockquote-color:            var(--#{$prefix}heading-color) !default;
+$blockquote-font-size:        $font-size-xl !default;
+$blockquote-font-weight:      $font-weight-semibold !default;
+$blockquote-footer-color:     var(--#{$prefix}body-color) !default;
+$blockquote-footer-font-size: $font-size-sm !default;
+
+$hr-margin-y:                 $spacer * 1.5 !default;
+$hr-color:                    var(--#{$prefix}border-color) !default;
+$hr-opacity:                  1 !default;
+
+$legend-margin-bottom:        $spacer !default;
+$legend-font-size:            1.125rem !default;
+$legend-color:                var(--#{$prefix}heading-color) !default;
+$legend-font-weight:          $headings-font-weight !default;
+
+$dt-font-weight:              $font-weight-semibold !default;
+$dt-color:                    var(--#{$prefix}heading-color) !default;
+
+$list-inline-padding:         $spacer !default;
+
+
+// Tables
+
+$table-cell-padding-y:        .75rem !default;
+$table-cell-padding-x:        .75rem !default;
+$table-cell-padding-y-sm:     .375rem !default;
+$table-cell-padding-x-sm:     .375rem !default;
+
+$table-th-font-weight:        $headings-font-weight !default;
+$table-th-color:              var(--#{$prefix}heading-color) !default;
+
+$table-striped-bg-factor:     .05 !default;
+$table-striped-bg:            rgba($gray-700, $table-striped-bg-factor) !default;
+
+$table-active-bg-factor:      .1 !default;
+$table-active-bg:             rgba($gray-700, $table-active-bg-factor) !default;
+
+$table-hover-bg-factor:       .075 !default;
+$table-hover-bg:              rgba($gray-700, $table-hover-bg-factor) !default;
+
+// Modifying default Bootstrap's $table-variants map
+$table-variants: (
+  "dark": $dark,
+) !default;
+
+
+// Buttons + Forms
+//
+// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
+
+$input-btn-padding-y:         .53rem !default;
+$input-btn-padding-x:         1rem !default;
+$input-btn-font-size:         $font-size-sm !default;
+
+$input-btn-padding-y-sm:      .375rem !default;
+$input-btn-padding-x-sm:      .875rem !default;
+$input-btn-font-size-sm:      $font-size-xs !default;
+
+$input-btn-padding-y-lg:      .685rem !default;
+$input-btn-padding-x-lg:      1.125rem !default;
+$input-btn-font-size-lg:      $font-size-base !default;
+
+$input-btn-focus-box-shadow:  unset !default;
+$input-btn-focus-width:       0 !default;
+
+
+// Buttons
+
+$btn-color:                   var(--#{$prefix}component-color) !default;
+$btn-font-weight:             $font-weight-medium !default;
+$btn-line-height:             1.125rem !default;
+$btn-white-space:             nowrap !default;
+
+$btn-padding-y:               .625rem !default;
+$btn-padding-x:               1.25rem !default;
+$btn-padding-x-sm:            1rem !default;
+$btn-padding-y-lg:            .875rem !default;
+$btn-padding-x-lg:            1.5rem !default;
+
+$btn-disabled-opacity:        .55 !default;
+$btn-link-disabled-color:     var(--#{$prefix}component-disabled-color) !default;
+
+$btn-border-radius:           var(--#{$prefix}border-radius) !default;
+$btn-border-radius-sm:        var(--#{$prefix}border-radius-sm) !default;
+$btn-border-radius-lg:        var(--#{$prefix}border-radius) !default;
+
+$btn-box-shadow:              none !default;
+$btn-active-box-shadow:       none !default;
+
+$btn-transition:              color .25s ease-in-out, background-color .25s ease-in-out, border-color .25s ease-in-out !default;
+
+
+// Icon buttons
+
+$btn-icon-size:               $font-size-base * 2.5 !default;
+$btn-icon-size-sm:            $font-size-base * 2 !default;
+$btn-icon-size-lg:            $font-size-base * 3 !default;
+
+
+// Forms
+
+$form-text-margin-top:                  .375rem !default;
+$form-text-font-size:                   $font-size-xs !default;
+
+$form-label-font-size:                  $font-size-sm !default;
+$form-label-font-weight:                $font-weight-medium !default;
+$form-label-color:                      var(--#{$prefix}heading-color) !default;
+
+$input-padding-x:                       $input-btn-padding-x !default;
+$input-bg:                              $white !default;
+$input-color:                           var(--#{$prefix}body-color) !default;
+$input-border-color:                    $gray-300 !default;
+$input-focus-border-color:              $gray-900 !default;
+
+$input-disabled-color:                  var(--#{$prefix}tertiary-color) !default;
+$input-disabled-bg:                     var(--#{$prefix}tertiary-bg) !default;
+$input-disabled-border-color:           var(--#{$prefix}border-color) !default;
+
+$input-border-radius:                   var(--#{$prefix}border-radius) !default;
+$input-border-radius-sm:                var(--#{$prefix}border-radius-sm) !default;
+$input-border-radius-lg:                var(--#{$prefix}border-radius) !default;
+
+$input-placeholder-color:               var(--#{$prefix}tertiary-color) !default;
+
+$form-check-margin-bottom:              .25rem !default;
+$form-check-input-border:               var(--#{$prefix}border-width) solid $input-border-color !default;
+$form-check-input-checked-color:        $gray-900 !default;
+$form-check-input-checked-bg-color:     $input-bg !default;
+$form-check-input-checked-border-color: $gray-900 !default;
+
+$form-check-input-indeterminate-color:  $form-check-input-checked-color !default;
+$form-check-input-indeterminate-bg-color: $form-check-input-checked-bg-color !default;
+$form-check-input-indeterminate-border-color: $form-check-input-checked-border-color !default;
+
+$form-switch-width:                     2.75rem !default;
+$form-switch-height:                    1.5rem !default;
+$form-switch-padding-start:             $form-switch-width + .625rem !default;
+$form-switch-margin-bottom:             .75rem !default;
+$form-switch-color:                     $white !default;
+$form-switch-focus-color:               $form-switch-color !default;
+$form-switch-checked-color:             $form-switch-color !default;
+$form-switch-bg-color:                  $gray-300 !default;
+$form-switch-checked-bg-color:          $success !default;
+
+$form-select-bg-size:                   15px 11px !default;
+$form-select-padding-x:                 $input-padding-x !default;
+$form-select-indicator-padding:         $form-select-padding-x * 2.25 !default;
+$form-select-indicator-color:           $gray-600 !default;
+
+$form-range-track-height:               .125rem !default;
+$form-range-track-bg:                   var(--#{$prefix}border-color) !default;
+$form-range-thumb-width:                .5rem !default;
+$form-range-thumb-bg:                   var(--#{$prefix}body-bg) !default;
+$form-range-thumb-box-shadow:           0 0 0 .125rem var(--#{$prefix}emphasis-color) !default;
+$form-range-thumb-active-bg:            var(--#{$prefix}emphasis-color) !default;
+$form-range-thumb-disabled-bg:          var(--#{$prefix}secondary-bg) !default;
+
+$form-feedback-valid-color:             $success !default;
+$form-feedback-invalid-color:           $danger !default;
+$form-feedback-icon-valid-color:        $form-feedback-valid-color !default;
+$form-feedback-icon-invalid-color:      $form-feedback-invalid-color !default;
+$form-feedback-icon-valid:              url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='#{$form-feedback-icon-valid-color}'><path d='M10.2,3.8c1.8-0.4,3.6-0.2,5.3,0.5c0.4,0.2,0.9,0,1.1-0.4s0-0.9-0.4-1.1c0,0,0,0,0,0c-5-2.2-10.9,0-13.2,5.1s0,10.9,5.1,13.2s10.9,0,13.2-5.1c0.6-1.3,0.9-2.7,0.9-4.1v-0.8c0-0.4-0.4-0.8-0.8-0.8s-0.8,0.4-0.8,0.8l0,0V12c0,4.6-3.8,8.4-8.4,8.4S3.6,16.6,3.6,12C3.6,8.1,6.3,4.7,10.2,3.8z'/><path d='M21.8,5.2c0.3-0.3,0.3-0.8,0-1.1c-0.3-0.3-0.8-0.3-1.1,0c0,0,0,0,0,0L12,12.7l-2.2-2.2c-0.3-0.3-0.8-0.3-1.1,0c-0.3,0.3-0.3,0.8,0,1.1l2.8,2.8c0.3,0.3,0.8,0.3,1.1,0c0,0,0,0,0,0L21.8,5.2L21.8,5.2z'/></svg>") !default;
+$form-feedback-icon-invalid:            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='#{$form-feedback-icon-invalid-color}'><path d='M12,1.5C6.2,1.5,1.5,6.2,1.5,12S6.2,22.5,12,22.5S22.5,17.8,22.5,12S17.8,1.5,12,1.5z M12,20.7c-4.8,0-8.7-4-8.7-8.7S7.2,3.3,12,3.3s8.7,4,8.7,8.7S16.8,20.7,12,20.7z'/><path d='M15.7,14.5c0.3,0.3,0.3,0.9,0,1.2s-0.9,0.3-1.2,0L12,13.2l-2.5,2.5c-0.3,0.3-0.9,0.3-1.2,0s-0.3-0.9,0-1.2l2.5-2.5L8.3,9.5c-0.4-0.3-0.4-0.9,0-1.2c0.3-0.4,0.9-0.4,1.2,0l2.5,2.5l2.5-2.5c0.3-0.3,0.9-0.3,1.2,0s0.3,0.9,0,1.2L13.2,12L15.7,14.5z'/></svg>") !default;
+
+$form-feedback-tooltip-padding-y:       .25rem !default;
+$form-feedback-tooltip-padding-x:       .5rem !default;
+$form-feedback-tooltip-font-size:       $font-size-xs !default;
+
+
+// Password toggle
+
+$password-toggle-button-color:          $input-color !default;
+$password-toggle-button-hover-color:    var(--#{$prefix}emphasis-color) !default;
+
+
+// Range slider
+
+$range-slider-height:                   .125rem !default;
+$range-slider-bg:                       var(--#{$prefix}border-color) !default;
+$range-slider-connect-bg:               var(--#{$prefix}emphasis-color) !default;
+$range-slider-handle-size:              .8125rem !default;
+$range-slider-handle-bg:                var(--#{$prefix}body-bg) !default;
+$range-slider-handle-active-bg:         var(--#{$prefix}emphasis-color) !default;
+$range-slider-handle-border-width:      2px !default;
+$range-slider-handle-border-color:      var(--#{$prefix}emphasis-color) !default;
+$range-slider-tooltip-font-size:        $font-size-xs !default;
+$range-slider-tooltip-bg:               transparent !default;
+$range-slider-tooltip-color:            var(--#{$prefix}emphasis-color) !default;
+$range-slider-pips-font-size:           $font-size-xs !default;
+
+
+// Navs
+
+$nav-link-padding-y:                    .5rem !default;
+$nav-link-padding-x:                    1.25rem !default;
+$nav-link-font-size:                    $font-size-sm !default;
+$nav-link-font-weight:                  $font-weight-medium !default;
+$nav-link-line-height:                  1.375rem !default;
+$nav-link-color:                        var(--#{$prefix}component-color) !default;
+$nav-link-hover-color:                  var(--#{$prefix}component-hover-color) !default;
+$nav-link-active-color:                 var(--#{$prefix}component-active-color) !default;
+$nav-link-disabled-color:               var(--#{$prefix}component-disabled-color) !default;
+$nav-link-transition:                   color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out !default;
+
+$nav-tabs-padding:                      .375rem !default;
+$nav-tabs-bg:                           var(--#{$prefix}tertiary-bg) !default;
+$nav-tabs-border-color:                 transparent !default;
+$nav-tabs-border-width:                 0 !default;
+$nav-tabs-link-hover-bg:                $gray-100 !default;
+$nav-tabs-link-active-bg:               $white !default;
+$nav-tabs-link-hover-border-color:      transparent !default;
+$nav-tabs-link-active-border-color:     transparent !default;
+$nav-tabs-link-active-box-shadow:       $box-shadow-sm !default;
+
+$nav-pills-gap:                         .875rem 1.125rem !default;
+$nav-pills-border-radius:               $border-radius-pill !default;
+$nav-pills-link-border-width:           var(--#{$prefix}border-width) !default;
+$nav-pills-link-border-color:           var(--#{$prefix}border-color) !default;
+$nav-pills-link-hover-color:            var(--#{$prefix}component-hover-color) !default;
+$nav-pills-link-hover-border-color:     $gray-500 !default;
+$nav-pills-link-active-color:           var(--#{$prefix}component-active-color) !default;
+$nav-pills-link-active-bg:              transparent !default;
+$nav-pills-link-active-border-color:    var(--#{$prefix}component-active-color) !default;
+$nav-pills-link-disabled-color:         var(--#{$prefix}component-disabled-color) !default;
+$nav-pills-link-disabled-border-color:  $gray-200 !default;
+
+$nav-underline-gap:                     .5rem 1.75rem !default;
+$nav-underline-border-width:            var(--#{$prefix}border-width) !default;
+$nav-underline-link-active-color:       var(--#{$prefix}component-active-color) !default;
+
+
+// Navbar
+
+$navbar-padding-y:                      $spacer * .625 !default;
+$navbar-padding-x:                      $spacer * .625 !default;
+
+$navbar-nav-link-padding-x:               1.125rem !default;
+$navbar-nav-link-font-size:               $font-size-base !default;
+$navbar-nav-link-underline-border-width:  var(--#{$prefix}underline-thickness) !default;
+
+$navbar-brand-font-size:                1.5rem !default;
+$navbar-brand-font-weight:              $font-weight-semibold !default;
+
+$navbar-toggler-padding-y:              $spacer * .625 !default;
+$navbar-toggler-padding-x:              $spacer * .25 !default;
+$navbar-toggler-border-radius:          0 !default;
+$navbar-toggler-bar-width:              1.375rem !default;
+$navbar-toggler-bar-height:             .125rem !default;
+$navbar-toggler-bar-spacing:            .3125rem !default;
+$navbar-toggler-focus-width:            0 !default;
+
+$navbar-light-color:                    $component-color !default;
+$navbar-light-hover-color:              $component-hover-color !default;
+$navbar-light-active-color:             $component-active-color !default;
+$navbar-light-disabled-color:           $component-disabled-color !default;
+$navbar-light-brand-color:              $gray-900 !default;
+$navbar-light-brand-hover-color:        $gray-900 !default;
+$navbar-light-toggler-border-color:     transparent !default;
+$navbar-light-toggler-icon-bg:          initial !default;
+
+$navbar-dark-color:                     rgba($white, .8) !default;
+$navbar-dark-hover-color:               $white !default;
+$navbar-dark-active-color:              $white !default;
+$navbar-dark-disabled-color:            rgba($white, .4) !default;
+$navbar-dark-brand-color:               $white !default;
+$navbar-dark-brand-hover-color:         $white !default;
+$navbar-dark-toggler-border-color:      transparent !default;
+$navbar-dark-toggler-icon-bg:           initial !default;
+
+
+// Dropdowns
+
+$dropdown-min-width:                    12.5rem !default;
+$dropdown-padding-x:                    .75rem !default;
+$dropdown-padding-y:                    .75rem !default;
+$dropdown-spacer:                       $spacer * .25 !default;
+$dropdown-font-size:                    $font-size-sm !default;
+$dropdown-color:                        var(--#{$prefix}component-color) !default;
+$dropdown-border-color:                 var(--#{$prefix}light-border-subtle) !default;
+$dropdown-divider-bg:                   var(--#{$prefix}border-color) !default;
+$dropdown-divider-margin-y:             $spacer * .375 !default;
+$dropdown-box-shadow:                   var(--#{$prefix}box-shadow) !default;
+
+$dropdown-link-color:                   var(--#{$prefix}component-color) !default;
+$dropdown-link-hover-color:             var(--#{$prefix}component-hover-color) !default;
+$dropdown-link-hover-bg:                var(--#{$prefix}component-hover-bg) !default;
+$dropdown-link-active-color:            var(--#{$prefix}component-active-color) !default;
+$dropdown-link-active-bg:               var(--#{$prefix}component-active-bg) !default;
+$dropdown-link-disabled-color:          var(--#{$prefix}component-disabled-color) !default;
+$dropdown-link-transition:              color .2s ease-in-out, background-color .2s ease-in-out !default;
+
+$dropdown-item-padding-y:               $spacer * .5 !default;
+$dropdown-item-padding-x:               $spacer * .75 !default;
+$dropdown-item-border-radius:           $border-radius-sm !default;
+$dropdown-item-spacer:                  $spacer * .125 !default;
+
+$dropdown-header-color:                 var(--#{$prefix}heading-color) !default;
+$dropdown-header-padding-x:             $dropdown-item-padding-x !default;
+$dropdown-header-padding-y:             $dropdown-item-padding-y !default;
+
+$dropdown-dark-color:                   $gray-200 !default;
+$dropdown-dark-bg:                      $gray-900 !default;
+$dropdown-dark-border-color:            $gray-700 !default;
+$dropdown-dark-box-shadow:              0 .5rem 1.875rem -.25rem rgba(#080b12, .35) !default;
+$dropdown-dark-link-hover-color:        $white !default;
+$dropdown-dark-link-hover-bg:           $gray-800 !default;
+$dropdown-dark-link-active-color:       $white !default;
+$dropdown-dark-link-active-bg:          $gray-700 !default;
+$dropdown-dark-header-color:            $white !default;
+
+
+// Pagination
+
+$pagination-spacer:                     .25rem !default;
+$pagination-margin-start:               0 !default;
+
+$pagination-padding-y:                  .375rem !default;
+$pagination-padding-x:                  .75rem !default;
+$pagination-padding-y-sm:               .1875rem !default;
+$pagination-padding-x-sm:               .5rem !default;
+$pagination-padding-y-lg:               .5rem !default;
+$pagination-padding-x-lg:               .9375rem !default;
+
+$pagination-font-size:                  $font-size-sm !default;
+$pagination-font-size-sm:               $font-size-xs !default;
+$pagination-font-size-lg:               $font-size-base !default;
+
+$pagination-border-radius:              var(--#{$prefix}border-radius-sm) !default;
+$pagination-border-radius-sm:           var(--#{$prefix}border-radius-xs) !default;
+$pagination-border-radius-lg:           var(--#{$prefix}border-radius) !default;
+
+$pagination-font-weight:                $font-weight-medium !default;
+
+$pagination-color:                      var(--#{$prefix}component-color) !default;
+$pagination-bg:                         transparent !default;
+$pagination-border-width:               0 !default;
+
+$pagination-focus-color:                var(--#{$prefix}component-hover-color) !default;
+$pagination-focus-bg:                   var(--#{$prefix}component-hover-bg) !default;
+
+$pagination-hover-color:                var(--#{$prefix}component-hover-color) !default;
+$pagination-hover-bg:                   var(--#{$prefix}component-hover-bg) !default;
+
+$pagination-active-color:               var(--#{$prefix}component-active-color) !default;
+$pagination-active-bg:                  var(--#{$prefix}component-active-bg) !default;
+
+$pagination-disabled-color:             var(--#{$prefix}component-disabled-color) !default;
+$pagination-disabled-bg:                transparent !default;
+
+$pagination-transition:                 color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out !default;
+
+
+// Placeholders
+
+$placeholder-opacity-max:               .35 !default;
+$placeholder-opacity-min:               .15 !default;
+
+
+// Cards
+
+$card-spacer-y:                         $spacer * 1.5 !default;
+$card-spacer-x:                         $spacer * 1.5 !default;
+$card-title-spacer-y:                   $card-spacer-y * .5 !default;
+$card-title-color:                      var(--#{$prefix}heading-color) !default;
+$card-img-overlay-padding:              $spacer * 1.5 !default;
+
+
+// Accordion
+
+$accordion-padding-y:                   1.25rem !default;
+$accordion-padding-x:                   0 !default;
+$accordion-bg:                          transparent !default;
+$accordion-border-radius:               0 !default;
+$accordion-inner-border-radius:         0 !default;
+
+$accordion-body-padding-y:              0 !default;
+$accordion-body-padding-x:              0 !default;
+$accordion-body-font-size:              $font-size-sm !default;
+
+$accordion-button-color:                var(--#{$prefix}heading-color) !default;
+$accordion-button-font-size:            $font-size-base !default;
+$accordion-button-font-weight:          $headings-font-weight !default;
+$accordion-button-active-color:         $accordion-button-color !default;
+$accordion-button-active-bg:            transparent !default;
+$accordion-transition:                  none !default;
+
+$accordion-icon-width:                  1em !default;
+$accordion-icon-color:                  $gray-900 !default;
+$accordion-icon-active-color:           $gray-900 !default;
+$accordion-button-icon:                 url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='#{$accordion-icon-color}'><path d='M3.8,7.9c0.4-0.4,1.1-0.4,1.5,0l6.7,6.7l6.7-6.7c0.4-0.4,1.1-0.4,1.5,0c0.4,0.4,0.4,1.1,0,1.5l-7.4,7.4c-0.4,0.4-1.1,0.4-1.5,0L3.8,9.4C3.3,9.1,3.3,8.4,3.8,7.9z'/></svg>") !default;
+$accordion-button-active-icon:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='#{$accordion-icon-active-color}'><path d='M3.8,7.9c0.4-0.4,1.1-0.4,1.5,0l6.7,6.7l6.7-6.7c0.4-0.4,1.1-0.4,1.5,0c0.4,0.4,0.4,1.1,0,1.5l-7.4,7.4c-0.4,0.4-1.1,0.4-1.5,0L3.8,9.4C3.3,9.1,3.3,8.4,3.8,7.9z'/></svg>") !default;
+$accordion-button-icon-alt:             url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='#{$accordion-icon-color}'><path d='M12 4.125c.483 0 .875.392.875.875v14c0 .483-.392.875-.875.875s-.875-.392-.875-.875V5c0-.483.392-.875.875-.875z'/><path d='M4.125 12c0-.483.392-.875.875-.875h14c.483 0 .875.392.875.875s-.392.875-.875.875H5c-.483 0-.875-.392-.875-.875z'/></svg>") !default;
+$accordion-button-active-icon-alt:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='#{$accordion-icon-active-color}'><path d='M4.125 12c0-.483.392-.875.875-.875h14c.483 0 .875.392.875.875s-.392.875-.875.875H5c-.483 0-.875-.392-.875-.875z'/></svg>") !default;
+
+
+// Tooltips
+
+$tooltip-padding-y:                     $spacer * .375 !default;
+$tooltip-padding-x:                     $spacer * .625 !default;
+$tooltip-border-radius:                 var(--#{$prefix}border-radius-sm) !default;
+$tooltip-opacity:                       1 !default;
+
+
+// Popovers
+
+$popover-border-color:                  var(--#{$prefix}light-border-subtle) !default;
+$popover-border-radius:                 var(--#{$prefix}border-radius) !default;
+$popover-header-padding-y:              $spacer * .75 !default;
+$popover-header-font-size:              $font-size-sm !default;
+$popover-header-bg:                     transparent !default;
+$popover-header-color:                  var(--#{$prefix}heading-color) !default;
+$popover-body-color:                    var(--#{$prefix}secondary-color) !default;
+
+
+// Toasts
+
+$toast-padding-x:                       .75rem !default;
+$toast-padding-y:                       .75rem !default;
+$toast-border-color:                    var(--#{$prefix}light-border-subtle) !default;
+$toast-background-color:                var(--#{$prefix}body-bg) !default;
+$toast-spacing:                         $spacer * 1.5 !default;
+$toast-header-color:                    var(--#{$prefix}heading-color) !default;
+$toast-header-background-color:         transparent !default;
+
+
+// Badges
+
+$badge-font-weight:                     $font-weight-medium !default;
+$badge-border-radius:                   .33em !default;
+
+
+// Modals
+
+$modal-inner-padding:                   $spacer * 1.5 !default;
+$modal-header-padding-y:                $modal-inner-padding * .875 !default;
+$modal-footer-margin-between:           $spacer * .75 !default;
+$modal-content-border-color:            var(--#{$prefix}border-color) !default;
+$modal-content-box-shadow-xs:           var(--#{$prefix}box-shadow) !default;
+$modal-content-box-shadow-sm-up:        var(--#{$prefix}box-shadow) !default;
+
+$modal-fade-transform:                  scale(.9) !default;
+$modal-transition:                      transform .2s ease-out !default;
+
+$modal-backdrop-bg:                     $gray-950 !default;
+$modal-backdrop-opacity:                .75 !default;
+
+
+// Alerts
+
+$alert-margin-bottom:                   1.25rem !default;
+$alert-link-font-weight:                $font-weight-semibold !default;
+
+
+// Progress bars
+
+$progress-border-radius:                $border-radius-pill !default;
+$progress-box-shadow:                   none !default;
+
+
+// List group
+
+$list-group-font-size:                  $font-size-sm !default;
+$list-group-bg:                         transparent !default;
+
+$list-group-item-padding-y:             $spacer * .625 !default;
+$list-group-item-padding-x:             $spacer * .75 !default;
+$list-group-item-transition:            color .2s ease-in-out, background-color .2s ease-in-out,  border-color .2s ease-in-out !default;
+
+$list-group-hover-color:                var(--#{$prefix}component-hover-color) !default;
+$list-group-hover-bg:                   var(--#{$prefix}component-hover-bg) !default;
+$list-group-active-color:               var(--#{$prefix}component-active-color) !default;
+$list-group-active-bg:                  var(--#{$prefix}component-active-bg) !default;
+$list-group-active-border-color:        var(--#{$prefix}border-color) !default;
+$list-group-disabled-color:             var(--#{$prefix}component-disabled-color) !default;
+
+$list-group-action-font-weight:         $font-weight-medium !default;
+$list-group-action-color:               var(--#{$prefix}component-color) !default;
+$list-group-action-hover-color:         $list-group-hover-color !default;
+$list-group-action-active-color:        $list-group-active-color !default;
+$list-group-action-active-bg:           $list-group-active-bg !default;
+
+$list-group-borderless-item-spacer:     .1875rem !default;
+
+
+// Image thumbnails
+
+$thumbnail-padding:                     .375rem !default;
+$thumbnail-border-radius:               var(--#{$prefix}border-radius-lg) !default;
+$thumbnail-box-shadow:                  none !default;
+
+
+// Figures
+
+$figure-caption-font-size:              $font-size-xs !default;
+
+
+// Breadcrumbs
+
+$breadcrumb-font-size:                  $font-size-sm !default;
+$breadcrumb-font-weight:                $font-weight-medium !default;
+$breadcrumb-item-padding-x:             .375rem !default;
+$breadcrumb-color:                      var(--#{$prefix}component-color) !default;
+$breadcrumb-hover-color:                var(--#{$prefix}component-hover-color) !default;
+$breadcrumb-active-color:               var(--#{$prefix}component-disabled-color) !default;
+$breadcrumb-divider-color:              $component-color !default;
+$breadcrumb-divider:                    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='#{$breadcrumb-divider-color}'><path d='M8.381 5.381c.342-.342.896-.342 1.237 0l6 6c.342.342.342.896 0 1.237l-6 6c-.342.342-.896.342-1.237 0s-.342-.896 0-1.237L13.763 12 8.381 6.619c-.342-.342-.342-.896 0-1.237z'/></svg>") !default;
+$breadcrumb-divider-flipped:            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='#{$breadcrumb-divider-color}'><path d='M15.3,5.4c0.3,0.3,0.3,0.9,0,1.2L9.9,12l5.4,5.4c0.3,0.3,0.3,0.9,0,1.2s-0.9,0.3-1.2,0l-6-6c-0.3-0.3-0.3-0.9,0-1.2l6-6C14.4,5,14.9,5,15.3,5.4L15.3,5.4z'/></svg>") !default;
+$breadcrumb-transition:                 color .2s ease-in-out !default;
+
+
+// Spinners
+
+$spinner-border-width:                  .15em !default;
+$spinner-border-width-sm:               .1em !default;
+
+
+// Close
+
+$btn-close-width:                       .75em !default;
+$btn-close-color:                       $gray-900 !default;
+$btn-close-opacity:                     .6 !default;
+$btn-close-hover-opacity:               .9 !default;
+$btn-close-focus-opacity:               1 !default;
+$btn-close-disabled-opacity:            .3 !default;
+$btn-close-transition:                  opacity .2s ease-in-out !default;
+
+
+// Offcanvas
+
+$offcanvas-horizontal-width:            350px !default;
+$offcanvas-vertical-height:             350px !default;
+
+
+// Code
+
+$pre-padding-y:                         $spacer * 1.25 !default;
+$pre-padding-x:                         $spacer !default;
+$pre-color:                             $white !default;
+$pre-bg:                                $gray-800 !default;
+$pre-border-radius:                     var(--#{$prefix}border-radius) !default;
+$kbd-bg:                                var(--#{$prefix}emphasis-color) !default;
+
+
+// Custom scrollbar
+
+$scrollbar-width:                       .1875rem !default;
+$scrollbar-track-width:                 .1875rem !default;
+$scrollbar-border-radius:               var(--#{$prefix}border-radius) !default;
+$scrollbar-bg:                          $gray-300 !default;
+$scrollbar-track-bg:                    $gray-100 !default;
+
+
+// Carousel
+
+$carousel-bullet-size:                  .5rem !default;
+$carousel-bullet-bg:                    $gray-300 !default;
+$carousel-bullet-active-bg:             $gray-800 !default;
+$carousel-bullet-opacity:               1 !default;
+$carousel-bullet-active-opacity:        1 !default;
+$carousel-bullet-border-radius:         50% !default;
+$carousel-bullet-gap:                   .75rem !default;
+$carousel-bullet-transition:            background-color .2s ease-in-out !default;
+
+$carousel-progressbar-size:             .25rem !default;
+$carousel-progressbar-border-radius:    $border-radius-pill !default;
+$carousel-progressbar-bg:               $gray-100 !default;
+$carousel-progressbar-fill-bg:          $gray-800 !default;
+
+$carousel-scrollbar-size:               .25rem !default;
+$carousel-scrollbar-border-radius:      $border-radius-pill !default;
+$carousel-scrollbar-bg:                 $gray-100 !default;
+$carousel-scrollbar-drag-bg:            $gray-800 !default;
diff --git a/resources/scss/components/_accordion.scss b/resources/scss/components/_accordion.scss
new file mode 100644
index 0000000..2372ada
--- /dev/null
+++ b/resources/scss/components/_accordion.scss
@@ -0,0 +1,88 @@
+// Override default Bootstrap's accordion component
+
+.accordion {
+  --#{$prefix}accordion-btn-font-size: #{$accordion-button-font-size};
+  --#{$prefix}accordion-btn-font-weight: #{$accordion-button-font-weight};
+  --#{$prefix}accordion-body-font-size: #{$accordion-body-font-size};
+}
+
+.accordion-button {
+  @include font-size(var(--#{$prefix}accordion-btn-font-size));
+  font-weight: var(--#{$prefix}accordion-btn-font-weight);
+
+  &:focus-visible {
+    @include box-shadow($focus-ring-box-shadow);
+  }
+
+  &:not(.collapsed) {
+    box-shadow: none;
+  }
+}
+
+.accordion-item {
+  border: 0;
+  border-bottom: var(--#{$prefix}accordion-border-width) solid var(--#{$prefix}accordion-border-color);
+}
+
+.accordion-body {
+  padding-bottom: var(--#{$prefix}accordion-btn-padding-y);
+  @include font-size(var(--#{$prefix}accordion-body-font-size));
+}
+
+
+// Alternative button icon
+
+.accordion-alt-icon {
+  --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-alt)};
+  --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-alt)};
+}
+
+
+// Update accordion / collapse button label text
+
+[data-label-collapsed] {
+  &::before {
+    content: attr(data-label-expanded);
+  }
+
+  &.collapsed::before,
+  .collapsed > &::before {
+    content: attr(data-label-collapsed);
+  }
+}
+
+
+// Collapse toggle icon
+
+.collapse-toggle-icon {
+  :not(.collapsed) > & {
+    transform: rotate(180deg);
+  }
+}
+
+
+// Hiding collapse toggle
+
+.hiding-collapse-toggle:not(.collapsed) {
+  display: none;
+}
+
+
+// Dark mode
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .accordion:not([data-bs-theme="light"]) {
+      .accordion-button::after {
+        --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)};
+        --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)};
+      }
+    }
+    .accordion-alt-icon:not([data-bs-theme="light"]) {
+      .accordion-button::after {
+        --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-alt-dark)};
+        --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-alt-dark)};
+      }
+    }
+  }
+}
diff --git a/resources/scss/components/_alert.scss b/resources/scss/components/_alert.scss
new file mode 100644
index 0000000..19fb1cc
--- /dev/null
+++ b/resources/scss/components/_alert.scss
@@ -0,0 +1,17 @@
+// Override close button color and size inside alert
+
+.alert .btn-close {
+  --#{$prefix}btn-close-size: .6875em;
+  --#{$prefix}btn-close-opacity: .75;
+  --#{$prefix}btn-close-hover-opacity: 1;
+
+  padding: $alert-padding-y * 1.375 $alert-padding-x;
+}
+
+@each $color, $value in map-remove($theme-colors, "secondary", "dark", "light") {
+  .alert-#{$color} .btn-close {
+    --#{$prefix}btn-close-bg: #{escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{adjust-color($value, $lightness: -5%)}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>"))};
+
+    filter: none;
+  }
+}
diff --git a/resources/scss/components/_breadcrumb.scss b/resources/scss/components/_breadcrumb.scss
new file mode 100644
index 0000000..5c84b25
--- /dev/null
+++ b/resources/scss/components/_breadcrumb.scss
@@ -0,0 +1,45 @@
+// Override Bootstrap's breadcrumb component
+
+.breadcrumb {
+  --#{$prefix}breadcrumb-font-weight: #{$breadcrumb-font-weight};
+  --#{$prefix}breadcrumb-color: #{$breadcrumb-color};
+  --#{$prefix}breadcrumb-hover-color: #{$breadcrumb-hover-color};
+
+  flex-direction: row;
+  gap: 0;
+  font-weight: var(--#{$prefix}breadcrumb-font-weight);
+}
+
+.breadcrumb-item {
+  > a {
+    color: var(--#{$prefix}breadcrumb-color);
+    text-decoration: none;
+    transition: $breadcrumb-transition;
+
+    &:hover,
+    &:focus-visible {
+      color: var(--#{$prefix}breadcrumb-hover-color);
+    }
+  }
+
+  + .breadcrumb-item::before {
+    width: 1.125em;
+    height: 1.125em;
+    padding-right: 0;
+    margin-right: var(--#{$prefix}breadcrumb-item-padding-x);
+    line-height: 2em;
+  }
+}
+
+
+// Dark mode
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .breadcrumb:not([data-bs-theme="light"]) {
+      .breadcrumb-item + .breadcrumb-item::before {
+        content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-dark)) #{"/* rtl:"} var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped-dark)) #{"*/"};
+      }
+    }
+  }
+}
diff --git a/resources/scss/components/_buttons.scss b/resources/scss/components/_buttons.scss
new file mode 100644
index 0000000..7b2bc97
--- /dev/null
+++ b/resources/scss/components/_buttons.scss
@@ -0,0 +1,284 @@
+// Override Bootstrap's base button class
+
+.btn {
+  --#{$prefix}btn-active-border-color: transparent;
+  --#{$prefix}btn-disabled-border-color: transparent;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  &:focus-visible {
+    box-shadow: $focus-ring-box-shadow;
+  }
+
+  // Fix chevron icons vertical aligment
+  &:not(.btn-icon) [class*=" #{$icon-prefix}chevron"],
+  &:not(.btn-icon) [class^="#{$icon-prefix}chevron"] {
+    margin-top: .125rem;
+  }
+}
+
+
+// Override solid buttons
+/* stylelint-disable */
+@each $color, $value in map-remove($theme-colors, "secondary", "dark", "light") {
+  .btn-#{$color} {
+    --#{$prefix}btn-hover-bg: #{adjust-color($value, $lightness: -10%)};
+    --#{$prefix}btn-active-bg: #{adjust-color($value, $lightness: -10%)};
+    --#{$prefix}btn-hover-border-color: #{adjust-color($value, $lightness: -10%)};
+    --#{$prefix}btn-active-border-color: #{adjust-color($value, $lightness: -10%)};
+  }
+}
+/* stylelint-enable */
+
+.btn-secondary {
+  --#{$prefix}btn-color: #{$gray-700};
+  --#{$prefix}btn-bg: #{$gray-100};
+  --#{$prefix}btn-border-color: #{$gray-100};
+  --#{$prefix}btn-hover-color: #{$gray-900};
+  --#{$prefix}btn-hover-bg: #{$gray-200};
+  --#{$prefix}btn-hover-border-color: #{$gray-200};
+  --#{$prefix}btn-active-color: #{$gray-700};
+  --#{$prefix}btn-active-bg: #{$gray-200};
+  --#{$prefix}btn-active-border-color: #{$gray-200};
+  --#{$prefix}btn-disabled-color: #{$gray-700};
+  --#{$prefix}btn-disabled-bg: #{$gray-100};
+  --#{$prefix}btn-disabled-border-color: #{$gray-100};
+}
+
+.btn-dark {
+  --#{$prefix}btn-hover-bg: #{$gray-950};
+  --#{$prefix}btn-hover-border-color: #{$gray-950};
+  --#{$prefix}btn-active-bg: #{$gray-950};
+  --#{$prefix}btn-active-border-color: #{$gray-950};
+}
+
+.btn-light {
+  --#{$prefix}btn-color: #{$gray-900};
+  --#{$prefix}btn-hover-color: #{$gray-900};
+  --#{$prefix}btn-hover-bg: #{$gray-200};
+  --#{$prefix}btn-hover-border-color: #{$gray-200};
+  --#{$prefix}btn-active-color: #{$gray-900};
+  --#{$prefix}btn-active-bg: #{$gray-200};
+  --#{$prefix}btn-active-border-color: #{$gray-200};
+}
+
+.btn-link {
+  font-weight: $btn-font-weight;
+}
+
+
+// Override outline buttons
+
+.btn-outline-secondary {
+  --#{$prefix}btn-color: #{$gray-700};
+  --#{$prefix}btn-border-color: #{$gray-200};
+  --#{$prefix}btn-hover-color: #{$gray-900};
+  --#{$prefix}btn-hover-bg: transparent;
+  --#{$prefix}btn-hover-border-color: #{$gray-500};
+  --#{$prefix}btn-active-color: #{$gray-900};
+  --#{$prefix}btn-active-bg: transparent;
+  --#{$prefix}btn-active-border-color: #{$gray-900};
+  --#{$prefix}btn-disabled-color: #{$gray-700};
+  --#{$prefix}btn-disabled-border-color: #{$gray-200};
+}
+
+
+// Ghost button
+
+.btn-ghost {
+  background-color: transparent;
+  border-color: transparent;
+
+  &:hover,
+  &:focus-visible,
+  &.show {
+    background-color: var(--#{$prefix}btn-bg);
+    border-color: var(--#{$prefix}btn-border-color);
+  }
+
+  &.active {
+    background-color: var(--#{$prefix}btn-active-bg);
+    border-color: var(--#{$prefix}btn-active-border-color);
+  }
+}
+
+
+// Icon button
+
+.btn-icon {
+  --#{$prefix}btn-size: #{$btn-icon-size};
+
+  flex-shrink: 0;
+  width: var(--#{$prefix}btn-size);
+  height: var(--#{$prefix}btn-size);
+  padding: 0;
+
+  &.btn-lg {
+    --#{$prefix}btn-size: #{$btn-icon-size-lg};
+  }
+
+  &.btn-sm {
+    --#{$prefix}btn-size: #{$btn-icon-size-sm};
+  }
+}
+
+
+// Market button
+
+.btn-market {
+  --#{$prefix}btn-padding-y: .625rem;
+  --#{$prefix}btn-padding-x: 1rem;
+  --#{$prefix}btn-border-width: 0;
+
+  &.btn-lg {
+    --#{$prefix}btn-padding-y: .75rem;
+    --#{$prefix}btn-padding-x: 1.125rem;
+  }
+}
+
+
+// Color button
+
+.btn-color {
+  --#{$prefix}btn-active-border-color: var(--#{$prefix}tertiary-color);
+
+  display: inline-block;
+  flex-shrink: 0;
+  width: 1em;
+  height: 1em;
+  padding: .125rem;
+  @include border-radius(50%);
+
+  &::before {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    content: "";
+    background-color: currentcolor;
+    @include border-radius(50%);
+  }
+}
+
+
+// Image button
+
+.btn-image {
+  --#{$prefix}btn-active-border-color: var(--#{$prefix}component-active-color);
+}
+
+
+// Back to top button
+
+.btn-scroll-top {
+  --#{$prefix}btn-padding-x: .75rem;
+  --#{$prefix}btn-padding-y: #{calc($btn-padding-y-sm + var(--#{$prefix}border-width))};
+
+  position: relative;
+  @include font-size($font-size-base * .625);
+  text-transform: uppercase;
+  visibility: hidden;
+  opacity: 0;
+  transition: transform .25s ease-in-out, opacity .25s, visibility .25s;
+  transform: scale(0);
+
+  &.show {
+    visibility: visible;
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+
+// Sort button
+
+[data-sort] {
+  display: inline-flex;
+  align-items: center;
+
+  &::after {
+    width: 1.25em;
+    margin-top: .125em;
+    font-size: 1.25em;
+    content: "\2195";
+  }
+
+  &.asc::after {
+    content: "\2191";
+    transform: scale(.75);
+  }
+
+  &.desc::after {
+    content: "\2193";
+    transform: scale(.75);
+  }
+}
+
+
+// Revoke Bootstrap badge inside button fix
+
+.btn .badge {
+  top: 0;
+}
+
+
+// Floating buttons
+
+.floating-buttons {
+  transform: translateX(50%) rotate(-90deg);
+}
+
+
+// Dark mode
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .btn-secondary:not([data-bs-theme="light"]) {
+      --#{$prefix}btn-color: #{$gray-200};
+      --#{$prefix}btn-bg: #{$gray-700};
+      --#{$prefix}btn-border-color: #{$gray-700};
+      --#{$prefix}btn-hover-color: #{$white};
+      --#{$prefix}btn-hover-bg: #{$gray-600};
+      --#{$prefix}btn-hover-border-color: #{$gray-600};
+      --#{$prefix}btn-active-color: #{$gray-200};
+      --#{$prefix}btn-active-bg: #{$gray-600};
+      --#{$prefix}btn-active-border-color: #{$gray-600};
+      --#{$prefix}btn-disabled-color: #{$gray-200};
+      --#{$prefix}btn-disabled-bg: #{$gray-700};
+      --#{$prefix}btn-disabled-border-color: #{$gray-700};
+    }
+
+    .btn-dark:not([data-bs-theme="light"]) {
+      @extend .btn-light;
+    }
+
+    .btn-link:not([data-bs-theme="light"]) {
+      --#{$prefix}btn-disabled-color: #{$btn-link-disabled-color-dark};
+    }
+
+    .btn-outline-secondary:not([data-bs-theme="light"]) {
+      --#{$prefix}btn-color: #{$gray-200};
+      --#{$prefix}btn-border-color: #{$gray-700};
+      --#{$prefix}btn-hover-color: #{$white};
+      --#{$prefix}btn-hover-border-color: #{$gray-400};
+      --#{$prefix}btn-active-color: #{$white};
+      --#{$prefix}btn-active-border-color: #{$white};
+      --#{$prefix}btn-disabled-color: #{$gray-200};
+      --#{$prefix}btn-disabled-border-color: #{$gray-700};
+    }
+
+    .btn-outline-dark:not([data-bs-theme="light"]) {
+      --#{$prefix}btn-color: #{$gray-50};
+      --#{$prefix}btn-border-color: #{$gray-50};
+      --#{$prefix}btn-hover-color: #{$gray-900};
+      --#{$prefix}btn-hover-bg: #{$white};
+      --#{$prefix}btn-hover-border-color: #{$white};
+      --#{$prefix}btn-active-color: #{$gray-900};
+      --#{$prefix}btn-active-bg: #{$white};
+      --#{$prefix}btn-active-border-color: #{$white};
+      --#{$prefix}btn-disabled-color: #{$gray-50};
+      --#{$prefix}btn-disabled-border-color: #{$gray-50};
+    }
+  }
+}
diff --git a/resources/scss/components/_card.scss b/resources/scss/components/_card.scss
new file mode 100644
index 0000000..6cc2355
--- /dev/null
+++ b/resources/scss/components/_card.scss
@@ -0,0 +1,149 @@
+// Extend default Bootstrap's card compopnent
+
+// Header navs
+
+.card-header-nav-underline {
+  --#{$prefix}nav-link-padding-y: calc(1.25 * var(--#{$prefix}card-cap-padding-y));
+
+  margin: calc(-1 * var(--#{$prefix}card-cap-padding-y)) calc(-.125 * var(--#{$prefix}card-cap-padding-x));
+}
+
+.card-header-tabs {
+  --#{$prefix}nav-tabs-padding: var(--#{$prefix}card-cap-padding-y);
+
+  margin: calc(-1 * var(--#{$prefix}card-cap-padding-y)) calc(-1 * var(--#{$prefix}card-cap-padding-x));
+  @include border-bottom-radius(0);
+}
+
+
+// Shop product card
+
+.product-card {
+  position: relative;
+
+  .product-card-details {
+    display: none;
+  }
+
+  &.hover-effect-opacity .hover-effect-target {
+    transition: none;
+  }
+
+  &:hover,
+  &:has(.select-card-check:checked) {
+    @include media-breakpoint-up(lg) {
+      z-index: 2;
+      box-shadow: var(--#{$prefix}box-shadow);
+    }
+  }
+
+  &:hover .product-card-button,
+  .count-input:not(.collapsed) .product-card-button {
+    @extend .btn-primary;
+
+    &:hover {
+      color: $white;
+    }
+  }
+
+  &:hover {
+    @include media-breakpoint-up(lg) {
+      .product-card-details {
+        display: block;
+      }
+    }
+
+    .hover-effect-underline {
+      text-decoration: underline !important;
+      text-decoration-thickness: var(--#{$prefix}underline-thickness) !important;
+    }
+
+    .count-input .form-control,
+    [data-decrement] {
+      transition: visibility .2s ease-in-out, opacity .2s ease-in-out;
+    }
+
+    .count-input:not(.collapsed) {
+      [data-count-input-value] {
+        display: none;
+      }
+
+      [data-increment] > i {
+        display: inline-flex;
+      }
+    }
+
+    .count-input.collapsed {
+      [data-increment] {
+        border-radius: var(--#{$prefix}border-radius-sm) !important;
+      }
+    }
+  }
+
+  &:not(:hover) {
+    .count-input .form-control,
+    [data-decrement] {
+      visibility: hidden;
+      opacity: 0;
+    }
+
+    .count-input:not(.collapsed) {
+      [data-count-input-value] {
+        display: inline;
+      }
+      [data-increment] > i {
+        display: none;
+      }
+    }
+
+    [data-increment] {
+      border-radius: var(--#{$prefix}border-radius-sm) !important;
+    }
+  }
+}
+
+
+// Animated category card
+
+.category-card-body,
+.category-card-title {
+  transition: transform .35s ease-in-out;
+  transform-origin: top center;
+  will-change: transform;
+}
+
+.category-card-list {
+  position: absolute;
+  opacity: 0;
+  transition: transform .35s ease-in-out, opacity .35s ease-in-out;
+  will-change: transform, opacity;
+}
+
+.category-card {
+  position: relative;
+  overflow: hidden;
+
+  &:hover {
+    .category-card-body {
+      transform: scale(.67);
+    }
+    .category-card-title,
+    .category-card-list {
+      transform: scale(1.45);
+    }
+    .category-card-list {
+      opacity: 1;
+    }
+  }
+}
+
+
+// Dark mode
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .product-card:hover .product-card-button {
+      @extend .btn-primary;
+    }
+  }
+}
diff --git a/resources/scss/components/_carousel.scss b/resources/scss/components/_carousel.scss
new file mode 100644
index 0000000..e4d4c9b
--- /dev/null
+++ b/resources/scss/components/_carousel.scss
@@ -0,0 +1,138 @@
+// Carousel (slider) component
+// based on https://swiperjs.com/
+
+
+// Pagination
+
+// Navigation (Prev/next buttons)
+
+.swiper-button-lock {
+  display: none !important;
+}
+
+
+// Bullets
+
+.swiper-pagination-bullets {
+  --swiper-pagination-bottom: 1.5rem;
+  --swiper-pagination-right: 1.5rem;
+  --swiper-pagination-bullet-inactive-color: #{$carousel-bullet-bg};
+  --swiper-pagination-color: #{$carousel-bullet-active-bg};
+  --swiper-pagination-bullet-border-radius: #{$carousel-bullet-border-radius};
+  --swiper-pagination-bullet-inactive-opacity: #{$carousel-bullet-opacity};
+  --swiper-pagination-bullet-opacity: #{$carousel-bullet-active-opacity};
+  --swiper-pagination-bullet-horizontal-gap: #{$carousel-bullet-gap * .5};
+  --swiper-pagination-bullet-vertical-gap: #{$carousel-bullet-gap * .5};
+  --swiper-pagination-bullet-transition: #{$carousel-bullet-transition};
+}
+
+.swiper-pagination-bullet {
+  transition: var(--swiper-pagination-bullet-transition);
+}
+
+
+// Progress bar
+
+.swiper-pagination-progressbar {
+  --swiper-pagination-progressbar-size: #{$carousel-progressbar-size};
+  --swiper-pagination-progressbar-border-radius: #{$carousel-progressbar-border-radius};
+  --swiper-pagination-progressbar-bg-color: #{$carousel-progressbar-bg};
+  --swiper-pagination-color: #{$carousel-progressbar-fill-bg};
+
+  overflow: hidden;
+  @include border-radius(var(--swiper-pagination-progressbar-border-radius));
+}
+
+
+// Scrollbar
+
+.swiper-scrollbar {
+  --swiper-scrollbar-bottom: .25rem;
+  --swiper-scrollbar-right: .25rem;
+  --swiper-scrollbar-size: #{$carousel-scrollbar-size};
+  --swiper-scrollbar-border-radius: #{$carousel-scrollbar-border-radius};
+  --swiper-scrollbar-bg-color: #{$carousel-scrollbar-bg};
+  --swiper-scrollbar-drag-bg-color: #{$carousel-scrollbar-drag-bg};
+
+  display: none;
+
+  &.swiper-scrollbar-horizontal,
+  &.swiper-scrollbar-vertical {
+    display: block;
+  }
+}
+
+
+// Thumbnails
+
+.swiper-thumbs {
+  --swiper-thumbnail-border-width: var(--#{$prefix}border-width);
+  --swiper-thumbnail-border-color: var(--#{$prefix}border-color);
+  --swiper-thumbnail-active-border-color: var(--#{$prefix}component-active-color);
+  --swiper-thumbnail-border-radius: var(--#{$prefix}border-radius);
+  --swiper-thumbnail-opacity: .5;
+  --swiper-thumbnail-active-opacity: 1;
+}
+
+.swiper-thumb-img {
+  opacity: var(--swiper-thumbnail-opacity);
+  transition: opacity .2s ease-in-out;
+  @include border-radius(var(--swiper-thumbnail-border-radius));
+}
+
+.swiper-thumb {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: auto;
+  height: auto;
+  cursor: pointer;
+  border: var(--swiper-thumbnail-border-width) solid var(--swiper-thumbnail-border-color);
+  @include border-radius(var(--swiper-thumbnail-border-radius));
+  transition: border-color .2s ease-in-out;
+
+  &:hover,
+  &.active,
+  &.swiper-slide-thumb-active {
+    .swiper-thumb-img {
+      opacity: var(--swiper-thumbnail-active-opacity);
+    }
+  }
+
+  &.active,
+  &.swiper-slide-thumb-active {
+    border-color: var(--swiper-thumbnail-active-border-color);
+  }
+}
+
+
+// Load swiper nicely
+
+.swiper-load {
+  visibility: hidden;
+
+  &.swiper-initialized {
+    visibility: visible;
+  }
+}
+
+
+// Dark mode
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .swiper-pagination-bullets:not([data-bs-theme="light"]) {
+      --swiper-pagination-bullet-inactive-color: #{$carousel-bullet-bg-dark};
+      --swiper-pagination-color: #{$carousel-bullet-active-bg-dark};
+    }
+    .swiper-pagination-progressbar:not([data-bs-theme="light"]) {
+      --swiper-pagination-progressbar-bg-color: #{$carousel-progressbar-bg-dark};
+      --swiper-pagination-color: #{$carousel-progressbar-fill-bg-dark};
+    }
+    .swiper-scrollbar:not([data-bs-theme="light"]) {
+      --swiper-scrollbar-bg-color: #{$carousel-scrollbar-bg-dark};
+      --swiper-scrollbar-drag-bg-color: #{$carousel-scrollbar-drag-bg-dark};
+    }
+  }
+}
+
diff --git a/resources/scss/components/_close.scss b/resources/scss/components/_close.scss
new file mode 100644
index 0000000..ae21edc
--- /dev/null
+++ b/resources/scss/components/_close.scss
@@ -0,0 +1,21 @@
+// Close button
+// It is used to dismiss alerts, modals, etc.
+
+.btn-close {
+  --#{$prefix}btn-close-size: #{$btn-close-width};
+
+  width: var(--#{$prefix}btn-close-size);
+  height: var(--#{$prefix}btn-close-size);
+  background-size: var(--#{$prefix}btn-close-size) auto;
+  transition: $btn-close-transition;
+
+  &:focus {
+    outline: 0;
+    box-shadow: none;
+  }
+
+  &:focus-visible {
+    box-shadow: var(--#{$prefix}btn-close-focus-shadow);
+    opacity: var(--#{$prefix}btn-close-focus-opacity);
+  }
+}
diff --git a/resources/scss/components/_date-picker.scss b/resources/scss/components/_date-picker.scss
new file mode 100644
index 0000000..00e514d
--- /dev/null
+++ b/resources/scss/components/_date-picker.scss
@@ -0,0 +1,224 @@
+// Date / time picker
+// based on https://github.com/flatpickr/flatpickr
+
+// Reboot plugin's styles
+/* stylelint-disable selector-class-pattern, selector-no-qualifying-type */
+.flatpickr-calendar {
+  width: 325px;
+  padding: 0 .5rem;
+  border: $dropdown-border-width solid $dropdown-border-color;
+  @include border-radius($dropdown-border-radius);
+  box-shadow: $dropdown-box-shadow;
+
+  &::before,
+  &::after {
+    display: none;
+  }
+}
+
+.flatpickr-innerContainer {
+  padding-bottom: 1rem;
+}
+
+.flatpickr-months {
+  padding: .75rem 0;
+
+  svg {
+    vertical-align: top;
+  }
+
+  .flatpickr-prev-month,
+  .flatpickr-next-month {
+    top: .75rem;
+
+    svg {
+      fill: var(--#{$prefix}heading-color) !important;
+    }
+  }
+}
+
+span.flatpickr-weekday,
+.flatpickr-time .flatpickr-time-separator {
+  color: var(--#{$prefix}gray-600);
+}
+.flatpickr-current-month .flatpickr-monthDropdown-months {
+  padding: .25rem;
+  appearance: none;
+}
+.numInputWrapper,
+.numInput,
+.flatpickr-current-month .flatpickr-monthDropdown-months {
+  color: var(--#{$prefix}heading-color) !important;
+}
+.numInputWrapper:hover,
+.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
+  background-color: var(--#{$prefix}component-hover-bg);
+}
+.numInput:hover {
+  background-color: transparent !important;
+}
+
+.flatpickr-day {
+  height: 38px;
+  line-height: 37px;
+  color: var(--#{$prefix}body-color);
+  @include border-radius(var(--#{$prefix}border-radius));
+
+  &:hover,
+  &:focus {
+    &:not(.flatpickr-disabled):not(.today):not(.selected):not(.startRange):not(.endRange) {
+      color: var(--#{$prefix}component-active-color);
+      background-color: var(--#{$prefix}component-active-bg);
+      border-color: var(--#{$prefix}component-active-bg);
+    }
+  }
+
+  &.today {
+    font-weight: $font-weight-medium;
+    background-color: transparent !important;
+    border-color: var(--#{$prefix}component-active-color) !important;
+
+    &:not(.startRange):not(.endRange):not(.selected) {
+      color: var(--#{$prefix}component-active-color) !important;
+    }
+
+    &.selected {
+      color: $white !important;
+    }
+
+    &:hover {
+      background-color: transparent;
+    }
+  }
+
+  &.selected {
+    font-weight: $font-weight-medium;
+    background-color: var(--#{$prefix}component-active-color) !important;
+    border-color: var(--#{$prefix}component-active-color) !important;
+  }
+
+  &.flatpickr-disabled {
+    color: var(--#{$prefix}tertiary-color) !important;
+    text-decoration: line-through;
+  }
+
+  &.prevMonthDay,
+  &.nextMonthDay {
+    color: var(--#{$prefix}tertiary-color);
+  }
+
+  &.inRange {
+    background-color: var(--#{$prefix}component-active-bg) !important;
+    border-color: var(--#{$prefix}component-active-bg) !important;
+    box-shadow: -5px 0 0 var(--#{$prefix}component-active-bg), 5px 0 0 var(--#{$prefix}component-active-bg);
+  }
+
+  &.startRange,
+  &.endRange,
+  &.endRange.seleced,
+  &.endRange:hover {
+    background-color: var(--#{$prefix}component-active-color) !important;
+    border-color: var(--#{$prefix}component-active-color) !important;
+  }
+}
+
+.flatpickr-day.selected.endRange,
+.flatpickr-day.startRange.endRange,
+.flatpickr-day.endRange.endRange {
+  border-radius: 0;
+  @include border-radius(0 $border-radius $border-radius 0);
+}
+
+.flatpickr-day.selected.startRange,
+.flatpickr-day.startRange.startRange,
+.flatpickr-day.endRange.startRange {
+  border-radius: 0;
+  @include border-radius($border-radius 0 0 $border-radius);
+}
+
+.flatpickr-day.selected.startRange.endRange,
+.flatpickr-day.startRange.startRange.endRange,
+.flatpickr-day.endRange.startRange.endRange {
+  @include border-radius($border-radius);
+}
+
+.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
+.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
+.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
+  box-shadow: -10px 0 0 var(--#{$prefix}component-active-color);
+}
+
+.flatpickr-time {
+  .flatpickr-am-pm {
+    color: var(--#{$prefix}emphasis-color);
+  }
+
+  input:hover,
+  input::selection,
+  input:focus,
+  .flatpickr-am-pm:hover,
+  .flatpickr-am-pm:focus {
+    background-color: transparent;
+  }
+
+  input.flatpickr-hour {
+    font-weight: $font-weight-normal;
+  }
+}
+
+.flatpickr-calendar.hasTime {
+  .flatpickr-time {
+    height: 3.5rem;
+    max-height: 3.5rem;
+    padding: .5rem 0;
+    line-height: 3.5rem;
+    border: 0;
+
+    .numInputWrapper {
+      line-height: 2.5rem;
+    }
+  }
+
+  .flatpickr-innerContainer + .flatpickr-time {
+    border-top: $border-width solid var(--#{$prefix}border-color);
+  }
+}
+
+.numInputWrapper span {
+  border-color: var(--#{$prefix}border-color);
+
+  &.arrowUp::after {
+    border-bottom-color: var(--#{$prefix}component-color) !important;
+  }
+
+  &.arrowDown::after {
+    border-top-color: var(--#{$prefix}component-color) !important;
+  }
+
+  &:hover {
+    background: var(--#{$prefix}border-color);
+  }
+}
+
+
+// Dark color mode
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .flatpickr-calendar {
+      background: $dropdown-dark-bg;
+      border-color: $dropdown-dark-border-color;
+      box-shadow: $dropdown-dark-box-shadow;
+    }
+    .flatpickr-day {
+      &.startRange,
+      &.endRange,
+      &.startRange.selected,
+      &.selected,
+      &.selected.today {
+        color: $dark !important;
+      }
+    }
+  }
+}
+/* stylelint-enable selector-class-pattern, selector-no-qualifying-type */
diff --git a/resources/scss/components/_dropdown.scss b/resources/scss/components/_dropdown.scss
new file mode 100644
index 0000000..cf53d2d
--- /dev/null
+++ b/resources/scss/components/_dropdown.scss
@@ -0,0 +1,188 @@
+// Override default Bootstrap's dropdown component
+
+// Dropdown toggle
+
+.dropdown-toggle {
+  display: flex;
+  align-items: center;
+
+  @if $enable-caret {
+    &::after {
+      flex-shrink: 0;
+      width: $caret-width;
+      height: $caret-width;
+      margin-right: -.25rem;
+      content: "";
+      background-color: currentcolor;
+      border: 0 !important;
+      -webkit-mask: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M8.7,13.7c0.4-0.4,1.1-0.4,1.5,0l6,6l6-6c0.4-0.4,1.1-0.4,1.5,0s0.4,1.1,0,1.5l-6.7,6.7c-0.4,0.4-1.1,0.4-1.5,0l-6.7-6.7C8.3,14.6,8.3,14.1,8.7,13.7z'/></svg>")) no-repeat 50% 50%; // stylelint-disable-line property-no-vendor-prefix
+      mask: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M8.7,13.7c0.4-0.4,1.1-0.4,1.5,0l6,6l6-6c0.4-0.4,1.1-0.4,1.5,0s0.4,1.1,0,1.5l-6.7,6.7c-0.4,0.4-1.1,0.4-1.5,0l-6.7-6.7C8.3,14.6,8.3,14.1,8.7,13.7z'/></svg>")) no-repeat 50% 50%;
+      -webkit-mask-size: cover; // stylelint-disable-line property-no-vendor-prefix
+      mask-size: cover;
+    }
+  }
+}
+
+@if $enable-caret {
+  .dropup .dropdown-toggle::after {
+    -webkit-mask: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M15.3,13.3c0.4-0.4,1.1-0.4,1.5,0l6.7,6.7c0.4,0.4,0.4,1.1,0,1.5s-1.1,0.4-1.5,0l-6-6l-6,6c-0.4,0.4-1.1,0.4-1.5,0s-0.4-1.1,0-1.5L15.3,13.3z'/></svg>")) no-repeat 50% 50%; // stylelint-disable-line property-no-vendor-prefix
+    mask: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M15.3,13.3c0.4-0.4,1.1-0.4,1.5,0l6.7,6.7c0.4,0.4,0.4,1.1,0,1.5s-1.1,0.4-1.5,0l-6-6l-6,6c-0.4,0.4-1.1,0.4-1.5,0s-0.4-1.1,0-1.5L15.3,13.3z'/></svg>")) no-repeat 50% 50%;
+  }
+
+  .dropend .dropdown-toggle::after {
+    -webkit-mask: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M12.7,9.7c0.4-0.4,1.1-0.4,1.5,0l6.7,6.7c0.4,0.4,0.4,1.1,0,1.5l-6.7,6.7c-0.4,0.4-1.1,0.4-1.5,0s-0.4-1.1,0-1.5l6-6l-6-6C12.3,10.6,12.3,10.1,12.7,9.7L12.7,9.7z'/></svg>")) no-repeat 50% 50%; // stylelint-disable-line property-no-vendor-prefix
+    mask: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M12.7,9.7c0.4-0.4,1.1-0.4,1.5,0l6.7,6.7c0.4,0.4,0.4,1.1,0,1.5l-6.7,6.7c-0.4,0.4-1.1,0.4-1.5,0s-0.4-1.1,0-1.5l6-6l-6-6C12.3,10.6,12.3,10.1,12.7,9.7L12.7,9.7z'/></svg>")) no-repeat 50% 50%;
+  }
+
+  [dir="rtl"] .dropend .dropdown-toggle::after {
+    transform: rotate(180deg);
+  }
+
+  .dropstart .dropdown-toggle {
+    &::before {
+      flex-shrink: 0;
+      width: $caret-width;
+      height: $caret-width;
+      margin-left: -.25rem;
+      content: "";
+      background-color: currentcolor;
+      border: 0 !important;
+      -webkit-mask: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M19.3,9.7c0.4,0.4,0.4,1.1,0,1.5L13.5,17l6,6c0.4,0.4,0.4,1.1,0,1.5s-1.1,0.4-1.5,0l-6.7-6.7c-0.4-0.4-0.4-1.1,0-1.5L18,9.7C18.4,9.3,18.9,9.3,19.3,9.7L19.3,9.7z'/></svg>")) no-repeat 50% 50%; // stylelint-disable-line property-no-vendor-prefix
+      mask: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M19.3,9.7c0.4,0.4,0.4,1.1,0,1.5L13.5,17l6,6c0.4,0.4,0.4,1.1,0,1.5s-1.1,0.4-1.5,0l-6.7-6.7c-0.4-0.4-0.4-1.1,0-1.5L18,9.7C18.4,9.3,18.9,9.3,19.3,9.7L19.3,9.7z'/></svg>")) no-repeat 50% 50%;
+      -webkit-mask-size: cover; // stylelint-disable-line property-no-vendor-prefix
+      mask-size: cover;
+    }
+  }
+
+  [dir="rtl"] .dropstart .dropdown-toggle::before {
+    transform: rotate(180deg);
+  }
+
+  .dropdown-toggle-split {
+    &::after,
+    &::before {
+      margin: 0 -.25rem;
+    }
+  }
+}
+
+
+// Highlight dropdown-toggle with specific "filter-select" class if there is any checkbox checked inside dropdown-menu
+
+.dropdown:has(:checked) .filter-select {
+  --#{$prefix}btn-border-color: #{$gray-900};
+  --#{$prefix}btn-hover-border-color: #{$gray-900};
+}
+
+
+// Dropdown menu
+
+.dropdown-menu {
+  --#{$prefix}dropdown-item-border-radius: #{$dropdown-item-border-radius};
+  --#{$prefix}dropdown-item-spacer: #{$dropdown-item-spacer};
+
+  padding-bottom: calc(var(--#{$prefix}dropdown-padding-y) - var(--#{$prefix}dropdown-item-spacer));
+
+  &.show {
+    animation: fade-in .15s ease-in-out;
+  }
+
+  &::before,
+  &::after {
+    position: absolute;
+    display: block;
+    content: "";
+  }
+}
+
+.dropdown,
+.dropup {
+  .dropdown-menu {
+    margin: {
+      top: var(--#{$prefix}dropdown-spacer) !important;
+      bottom: var(--#{$prefix}dropdown-spacer) !important;
+    }
+
+    &::before,
+    &::after {
+      left: 0;
+      width: 100%;
+      height: calc(var(--#{$prefix}dropdown-spacer) * 1.5);
+    }
+    &::before {
+      bottom: 100%;
+    }
+    &::after {
+      top: 100%;
+    }
+  }
+}
+
+.dropstart,
+.dropend {
+  .dropdown-menu {
+    margin: {
+      right: var(--#{$prefix}dropdown-spacer) !important;
+      left: var(--#{$prefix}dropdown-spacer) !important;
+    }
+
+    &::before,
+    &::after {
+      top: 0;
+      width: calc(var(--#{$prefix}dropdown-spacer) * 2);
+      height: 100%;
+    }
+    &::before {
+      left: calc(var(--#{$prefix}dropdown-spacer) * -2);
+    }
+    &::after {
+      left: 100%;
+    }
+  }
+}
+
+.dropdown-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: var(--#{$prefix}dropdown-item-spacer);
+  @include border-radius(var(--#{$prefix}dropdown-item-border-radius));
+  transition: $dropdown-link-transition;
+
+  &.show,
+  [data-bs-toggle].show > &,
+  [data-bs-toggle]:hover > &,
+  &:active {
+    color: var(--#{$prefix}dropdown-link-hover-color);
+    background-color: var(--#{$prefix}dropdown-link-hover-bg);
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: $focus-ring-box-shadow;
+  }
+
+  &.dropdown-toggle::after {
+    margin-left: auto;
+  }
+
+  .item-active-indicator {
+    display: none;
+  }
+
+  &.active .item-active-indicator {
+    display: flex;
+    padding-left: .5rem;
+  }
+}
+
+
+// Dark mode
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .dropdown:not([data-bs-theme="light"]):has(:checked) .filter-select {
+      --#{$prefix}btn-border-color: #{$white};
+      --#{$prefix}btn-hover-border-color: #{$white};
+    }
+  }
+}
diff --git a/resources/scss/components/_forms.scss b/resources/scss/components/_forms.scss
new file mode 100644
index 0000000..f249ab1
--- /dev/null
+++ b/resources/scss/components/_forms.scss
@@ -0,0 +1,493 @@
+// Extend default Bootstrap's .form-control / .form-select classes
+
+.form-control,
+.form-select {
+  --#{$prefix}form-control-bg: #{$input-bg};
+  --#{$prefix}form-control-border-color: #{$input-border-color};
+  --#{$prefix}form-control-focus-bg: #{$input-focus-bg};
+  --#{$prefix}form-control-focus-border-color: #{$input-focus-border-color};
+
+  background-color: var(--#{$prefix}form-control-bg);
+  border-color: var(--#{$prefix}form-control-border-color);
+
+  &:focus {
+    background-color: var(--#{$prefix}form-control-focus-bg);
+    border-color: var(--#{$prefix}form-control-focus-border-color);
+  }
+
+  &:disabled {
+    border-style: dashed;
+  }
+}
+
+
+// Fix small select idicator position
+
+.form-select.form-select-sm {
+  background-position: right $form-select-padding-x-sm * .875 center;
+}
+
+
+// Remove default -webkit search input clear button
+
+.form-control {
+  &::-webkit-search-decoration,
+  &::-webkit-search-cancel-button,
+  &::-webkit-search-results-button,
+  &::-webkit-search-results-decoration {
+    display: none;
+  }
+}
+
+
+// Remove default -webkit time input icon
+
+.form-control::-webkit-calendar-picker-indicator {
+  background: none;
+}
+
+
+// Floating labels
+
+.form-floating > label::after {
+  background-color: transparent !important;
+}
+
+
+// Flush form select
+
+.form-select-flush {
+  background-position: right center;
+  border: 0;
+  border-bottom: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color) !important;
+  border-radius: 0;
+
+  &.form-select-lg {
+    background-size: 17px 13px;
+  }
+}
+
+
+// Absolutely positioned icon inside .form-control
+
+.form-icon-start {
+  padding-left: calc($input-padding-x + $input-border-width + $font-size-base + .375rem);
+
+  &.form-control-lg {
+    padding-left: calc($input-padding-x-lg + $input-border-width + $font-size-lg + .25rem);
+  }
+
+  &.form-control-sm {
+    padding-left: calc($input-padding-x-sm + $input-border-width + $font-size-sm);
+  }
+}
+
+.form-icon-end {
+  padding-right: calc($input-padding-x + $input-border-width + $font-size-base + .375rem);
+
+  &.form-control-lg {
+    padding-right: calc($input-padding-x-lg + $input-border-width + $font-size-lg + .25rem);
+  }
+
+  &.form-control-sm {
+    padding-right: calc($input-padding-x-sm + $input-border-width + $font-size-sm);
+  }
+}
+
+
+// Checkboxes and radios
+
+.form-check-label {
+  font-size: $form-label-font-size;
+}
+
+.form-check-input {
+  &:focus {
+    box-shadow: none;
+  }
+
+  &:focus-visible {
+    box-shadow: $focus-ring-box-shadow;
+  }
+
+  &:active {
+    background-color: transparent;
+    filter: none;
+  }
+}
+
+
+// Switch
+
+.form-switch {
+  min-height: $form-switch-height;
+  margin-bottom: $form-switch-margin-bottom;
+
+  .form-check-input {
+    height: $form-switch-height;
+    margin-top: 0;
+    background-color: $form-switch-bg-color;
+    border: 0 !important;
+
+    &:checked {
+      background-color: $form-switch-checked-bg-color !important;
+    }
+  }
+}
+
+
+// Password toggle
+
+.password-toggle {
+  position: relative;
+
+  .form-control {
+    padding-right: $input-padding-x * 2 + $input-font-size;
+  }
+}
+
+.password-toggle-button {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding: 0 $input-padding-x;
+  color: $password-toggle-button-color;
+  cursor: pointer;
+  transition: color .2s ease-in-out;
+
+  &:hover {
+    color: $password-toggle-button-hover-color;
+  }
+}
+
+
+// Count input
+
+.count-input {
+  display: inline-flex;
+  overflow: hidden;
+  background-color: $input-bg;
+  border: var(--#{$prefix}border-width) solid $input-border-color;
+  border-radius: $input-border-radius;
+  transform: translateZ(0);
+
+  .form-control {
+    width: $btn-icon-size;
+    padding: 0 .25rem;
+    font-weight: $font-weight-medium;
+    text-align: center;
+    /* stylelint-disable property-no-vendor-prefix */
+    -moz-appearance: textfield;
+    appearance: textfield;
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      margin: 0;
+      -webkit-appearance: none;
+    }
+    /* stylelint-enable property-no-vendor-prefix */
+    background-color: transparent;
+    border: 0;
+    border-radius: 0;
+  }
+
+  .btn {
+    border: 0;
+    border-radius: 0;
+  }
+
+  .btn:not(.btn-primary) {
+    --#{$prefix}btn-hover-color: var(--#{$prefix}component-hover-color);
+    --#{$prefix}btn-hover-bg: var(--#{$prefix}secondary-bg);
+    --#{$prefix}btn-active-bg: var(--#{$prefix}secondary-bg);
+  }
+
+  .btn-sm + .form-control {
+    width: $btn-icon-size-sm;
+  }
+
+  .btn-lg + .form-control {
+    width: $btn-icon-size-lg;
+  }
+
+  &.disabled {
+    background-color: $input-disabled-bg;
+    border-color: $input-disabled-border-color;
+    border-style: dashed;
+  }
+}
+
+.count-input-collapsible {
+  &.collapsed {
+    [data-decrement],
+    .form-control {
+      display: none;
+    }
+  }
+}
+
+
+// Range slider
+
+.range-slider {
+  --#{$prefix}range-slider-height: #{$range-slider-height};
+  --#{$prefix}range-slider-bg: #{$range-slider-bg};
+  --#{$prefix}range-slider-connect-bg: #{$range-slider-connect-bg};
+  --#{$prefix}range-slider-handle-size: #{$range-slider-handle-size};
+  --#{$prefix}range-slider-handle-bg: #{$range-slider-handle-bg};
+  --#{$prefix}range-slider-handle-active-bg: #{$range-slider-handle-active-bg};
+  --#{$prefix}range-slider-handle-border-width: #{$range-slider-handle-border-width};
+  --#{$prefix}range-slider-handle-border-color: #{$range-slider-handle-border-color};
+  --#{$prefix}range-slider-handle-border-radius: 50%;
+  --#{$prefix}range-slider-pips-color: var(--#{$prefix}body-color);
+  --#{$prefix}range-slider-pips-font-size: #{$range-slider-pips-font-size};
+  --#{$prefix}range-slider-pips-border-width: var(--#{$prefix}border-width);
+  --#{$prefix}range-slider-pips-border-color: #{adjust-color($border-color, $lightness: -6%)}; // stylelint-disable-line
+  --#{$prefix}range-slider-tooltip-padding-y: #{$tooltip-padding-y};
+  --#{$prefix}range-slider-tooltip-padding-x: #{$tooltip-padding-x};
+  --#{$prefix}range-slider-tooltip-bg: #{$range-slider-tooltip-bg};
+  --#{$prefix}range-slider-tooltip-color: #{$range-slider-tooltip-color};
+  --#{$prefix}range-slider-tooltip-font-size: #{$range-slider-tooltip-font-size};
+  --#{$prefix}range-slider-tooltip-border-radius: #{$tooltip-border-radius};
+}
+
+/* stylelint-disable selector-class-pattern */
+.range-slider-ui {
+  height: var(--#{$prefix}range-slider-height);
+  margin: 0;
+  margin: {
+    top: 2.25rem;
+    right: 0;
+    bottom: 1.75rem;
+    left: 0;
+  }
+  background-color: var(--#{$prefix}range-slider-bg);
+  border: 0;
+  box-shadow: none;
+
+  .noUi-connect {
+    background-color: var(--#{$prefix}range-slider-connect-bg);
+  }
+
+  .noUi-handle {
+    top: 50%;
+    width: var(--#{$prefix}range-slider-handle-size);
+    height: var(--#{$prefix}range-slider-handle-size);
+    margin-top: calc(var(--#{$prefix}range-slider-handle-size) * -.5);
+    background-color: var(--#{$prefix}range-slider-handle-bg);
+    border: var(--#{$prefix}range-slider-handle-border-width) solid var(--#{$prefix}range-slider-handle-border-color);
+    border-radius: var(--#{$prefix}range-slider-handle-border-radius);
+    box-shadow: none;
+
+    &::before,
+    &::after {
+      display: none;
+    }
+
+    &:active,
+    &:focus-visible {
+      background-color: var(--#{$prefix}range-slider-handle-active-bg);
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &:focus-visible {
+      box-shadow: $focus-ring-box-shadow;
+    }
+  }
+
+  .noUi-marker-normal {
+    display: none;
+  }
+
+  .noUi-marker-horizontal {
+    &.noUi-marker {
+      width: var(--#{$prefix}range-slider-pips-border-width);
+      background-color: var(--#{$prefix}range-slider-pips-border-color);
+    }
+
+    &.noUi-marker-large { height: .75rem; }
+  }
+
+  .noUi-value {
+    padding-top: .125rem;
+    font-size: var(--#{$prefix}range-slider-pips-font-size);
+    color: var(--#{$prefix}range-slider-pips-color);
+  }
+
+  .noUi-tooltip {
+    padding: var(--#{$prefix}range-slider-tooltip-padding-y) var(--#{$prefix}range-slider-tooltip-padding-x);
+    line-height: 1.2;
+    font: {
+      size: var(--#{$prefix}range-slider-tooltip-font-size);
+      weight: $font-weight-medium;
+    }
+    color: var(--#{$prefix}range-slider-tooltip-color);
+    background-color: var(--#{$prefix}range-slider-tooltip-bg);
+    border: 0;
+    @include border-radius(var(--#{$prefix}range-slider-tooltip-border-radius));
+  }
+}
+
+html:not([dir="rtl"]) .range-slider-ui.noUi-horizontal .noUi-handle {
+  right: calc(var(--#{$prefix}range-slider-handle-size) * -.5);
+}
+
+.noUi-txt-dir-rtl.noUi-horizontal .noUi-handle {
+  /* rtl:begin:ignore */
+  left: -.5rem;
+
+  /* rtl:end:ignore */
+}
+/* stylelint-enable selector-class-pattern */
+
+
+// Form validation
+
+.was-validated .form-control:valid,
+.form-control.is-valid,
+.was-validated .form-select:valid,
+.form-select.is-valid {
+  border-color: var(--#{$prefix}form-control-border-color);
+
+  &:focus {
+    border-color: var(--#{$prefix}form-control-focus-border-color);
+  }
+}
+
+.was-validated .password-toggle .form-control:valid,
+.password-toggle .form-control.is-valid,
+.was-validated .password-toggle .form-control:invalid,
+.password-toggle .form-control.is-invalid {
+  background-position: $form-select-feedback-icon-position;
+}
+
+.was-validated .form-check-input:valid,
+.form-check-input.is-valid {
+  border: $form-check-input-border;
+
+  &:checked {
+    background-color: $form-check-input-checked-bg-color;
+    border-color: $form-check-input-checked-border-color;
+  }
+
+  &:focus {
+    box-shadow: none;
+  }
+
+  ~ .form-check-label {
+    color: var(--#{$prefix}body-color);
+  }
+}
+
+.was-validated .form-switch .form-check-input:invalid,
+.form-switch .form-check-input.is-invalid {
+  background-color: var(--#{$prefix}form-invalid-color) !important;
+}
+
+.valid-tooltip {
+  color: var(--#{$prefix}form-valid-color);
+  background-color: var(--#{$prefix}success-bg-subtle);
+}
+
+.invalid-tooltip {
+  color: var(--#{$prefix}form-invalid-color);
+  background-color: var(--#{$prefix}danger-bg-subtle);
+}
+
+
+// Force formatted numeric input fileds RTL
+
+[data-input-format] {
+  direction: ltr;
+}
+
+
+// Dark mode
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .form-control:not([data-bs-theme="light"]),
+    .form-select:not([data-bs-theme="light"]) {
+      --#{$prefix}form-control-bg: #{$input-bg-dark};
+      --#{$prefix}form-control-border-color: #{$input-border-color-dark};
+      --#{$prefix}form-control-focus-bg: #{$input-focus-bg-dark};
+      --#{$prefix}form-control-focus-border-color: #{$input-focus-border-color-dark};
+    }
+
+    .form-select:not([data-bs-theme="light"]) option {
+      background-color: $dropdown-dark-bg;
+    }
+
+    .form-check-input:not([data-bs-theme="light"]) {
+      background-color: $form-check-input-bg-dark;
+      border: $form-check-input-border-dark;
+
+      &:checked {
+        background-color: $form-check-input-checked-bg-color-dark;
+        border-color: $form-check-input-checked-border-color-dark;
+
+        &[type="checkbox"] {
+          @if $enable-gradients {
+            --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image-dark)}, var(--#{$prefix}gradient);
+          } @else {
+            --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image-dark)};
+          }
+        }
+
+        &[type="radio"] {
+          @if $enable-gradients {
+            --#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image-dark)}, var(--#{$prefix}gradient);
+          } @else {
+            --#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image-dark)};
+          }
+        }
+      }
+
+      &[type="checkbox"]:indeterminate {
+        background-color: $form-check-input-indeterminate-bg-color-dark;
+        border-color: $form-check-input-indeterminate-border-color-dark;
+
+        @if $enable-gradients {
+          --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image-dark)}, var(--#{$prefix}gradient);
+        } @else {
+          --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image-dark)};
+        }
+      }
+    }
+
+
+    .was-validated .form-check-input:invalid,
+    .form-check-input.is-invalid {
+      border-color: var(--#{$prefix}form-invalid-border-color);
+    }
+
+    .form-switch:not([data-bs-theme="light"]) {
+      .form-check-input {
+        background-color: $form-switch-bg-color-dark;
+        border: 0;
+
+        &:checked {
+          background-color: $form-switch-checked-bg-color;
+        }
+
+        &:not(:checked):not(:focus) {
+          --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image)};
+        }
+      }
+    }
+
+    .count-input:not([data-bs-theme="light"]) {
+      background-color: $input-bg-dark;
+      border-color: $input-border-color-dark;
+    }
+
+    .input-group:not([data-bs-theme="light"]) .input-group-text {
+      border-color: $input-group-addon-border-color-dark;
+    }
+  }
+}
diff --git a/resources/scss/components/_image-zoom.scss b/resources/scss/components/_image-zoom.scss
new file mode 100644
index 0000000..13dd8df
--- /dev/null
+++ b/resources/scss/components/_image-zoom.scss
@@ -0,0 +1,23 @@
+// Image zoom on hover
+// based on https://github.com/imgix/drift
+
+[data-zoom]:hover {
+  cursor: crosshair;
+}
+
+.drift-zoom-pane {
+  background-color: var(--#{$prefix}body-bg);
+  border: $border-width solid var(--#{$prefix}border-color);
+  @include border-radius(var(--#{$prefix}border-radius-lg));
+}
+
+[dir="rtl"] .drift-zoom-pane img {
+  /* rtl:begin:ignore */
+  left: 0;
+
+  /* rtl:end:ignore */
+}
+
+.drift-inline {
+  z-index: 10;
+}
diff --git a/resources/scss/components/_lightbox.scss b/resources/scss/components/_lightbox.scss
new file mode 100644
index 0000000..5b15a26
--- /dev/null
+++ b/resources/scss/components/_lightbox.scss
@@ -0,0 +1,70 @@
+// Lightbox / gallery component
+// based on https://github.com/biati-digital/glightbox
+
+
+// Fix issue with sticky elements when Glightbox is open
+
+.glightbox-open {
+  overflow: clip;
+}
+
+/* stylelint-disable at-rule-no-vendor-prefix */
+@-moz-document url-prefix() {
+  .glightbox-open {
+    overflow: hidden;
+  }
+}
+/* stylelint-enable at-rule-no-vendor-prefix */
+
+
+// Remove shadow from Glightbox images
+
+.glightbox-clean .gslide-media {
+  box-shadow: none;
+}
+
+
+// Change backdrop (overlay) color
+
+.glightbox-mobile .goverlay,
+.goverlay {
+  background: var(--#{$prefix}body-bg);
+}
+
+
+// Override Glightbox buttons
+
+.glightbox-clean {
+  .gprev,
+  .gnext,
+  .gclose {
+    width: 2.5rem;
+    height: 2.5rem;
+    svg {
+      width: 1.25rem;
+    }
+    @include media-breakpoint-up(md) {
+      width: 3rem;
+      height: 3rem;
+      svg {
+        width: 1.5rem;
+      }
+    }
+    path {
+      fill: currentcolor;
+    }
+  }
+}
+
+.glightbox-clean .gclose {
+  opacity: 1;
+}
+
+.glightbox-button-hidden {
+  display: none;
+}
+
+.gbtn.focused {
+  outline: none;
+  box-shadow: 0 0 0 .25rem $focus-ring-color-dark;
+}
diff --git a/resources/scss/components/_list-group.scss b/resources/scss/components/_list-group.scss
new file mode 100644
index 0000000..749c98c
--- /dev/null
+++ b/resources/scss/components/_list-group.scss
@@ -0,0 +1,54 @@
+// Extend default Bootstrap's list group component
+
+.list-group {
+  --#{$prefix}list-group-font-size: #{$list-group-font-size};
+  --#{$prefix}list-group-action-font-weight: #{$list-group-action-font-weight};
+  --#{$prefix}list-group-borderless-item-spacer: #{$list-group-borderless-item-spacer};
+
+  gap: 0;
+  @include font-size(var(--#{$prefix}list-group-font-size));
+}
+
+.list-group-item-action {
+  font-weight: var(--#{$prefix}list-group-action-font-weight);
+  color: var(--#{$prefix}list-group-action-color);
+  transition: $list-group-item-transition;
+
+  &:hover,
+  &:focus-visible {
+    color: var(--#{$prefix}list-group-action-hover-color);
+    background-color: var(--#{$prefix}list-group-action-hover-bg);
+  }
+
+  &.active {
+    color: var(--#{$prefix}list-group-action-active-color);
+    background-color: var(--#{$prefix}list-group-action-active-bg);
+  }
+}
+
+
+// Borderless list group
+
+.list-group-borderless {
+  gap: var(--#{$prefix}list-group-borderless-item-spacer);
+  @include border-radius(0);
+
+  .list-group-item {
+    border: 0;
+
+    &:not(.rounded-pill) {
+      @include border-radius(var(--#{$prefix}list-group-border-radius) !important);
+    }
+
+    &.active {
+      margin-top: 0;
+    }
+  }
+}
+
+
+// Flush list group inside card
+
+.card > .list-group-flush {
+  --#{$prefix}list-group-item-padding-x: var(--#{$prefix}card-spacer-x);
+}
diff --git a/resources/scss/components/_nav.scss b/resources/scss/components/_nav.scss
new file mode 100644
index 0000000..7c53a58
--- /dev/null
+++ b/resources/scss/components/_nav.scss
@@ -0,0 +1,203 @@
+// Extend default Bootstrap's .nav, .nav-item, .nav-link classes
+
+.nav {
+  --#{$prefix}nav-link-line-height: #{$nav-link-line-height};
+  --#{$prefix}nav-link-active-color: #{$nav-link-active-color};
+
+  flex-direction: row;
+  gap: 0;
+}
+
+.nav-link {
+  display: flex;
+  align-items: center;
+
+  &.show {
+    color: var(--#{$prefix}nav-link-hover-color);
+  }
+
+  &.active {
+    color: var(--#{$prefix}nav-link-active-color);
+  }
+
+  &.disabled,
+  &:disabled {
+    color: var(--#{$prefix}nav-link-disabled-color);
+  }
+
+  &.text-body,
+  &.text-body-secondary,
+  &.text-body-tertiary {
+    &:hover,
+    &:focus-visible,
+    &.show {
+      color: var(--#{$prefix}nav-link-hover-color) !important;
+    }
+    &.active {
+      color: var(--#{$prefix}nav-link-active-color) !important;
+    }
+    &.disabled,
+    &:disabled {
+      color: var(--#{$prefix}nav-link-disabled-color) !important;
+    }
+  }
+}
+
+
+// Tabs
+
+.nav-tabs {
+  --#{$prefix}nav-tabs-padding: #{$nav-tabs-padding};
+  --#{$prefix}nav-tabs-bg: #{$nav-tabs-bg};
+  --#{$prefix}nav-tabs-link-hover-bg: #{$nav-tabs-link-hover-bg};
+  --#{$prefix}nav-tabs-link-active-box-shadow: #{$nav-tabs-link-active-box-shadow};
+
+  gap: var(--#{$prefix}nav-tabs-padding);
+  padding: var(--#{$prefix}nav-tabs-padding);
+  background-color: var(--#{$prefix}nav-tabs-bg);
+  @include border-radius(var(--#{$prefix}nav-tabs-border-radius));
+
+  .nav-item {
+    flex-grow: 1;
+    flex-basis: 0;
+    text-align: center;
+  }
+
+  .nav-link {
+    justify-content: center;
+    width: 100%;
+    line-height: var(--#{$prefix}nav-link-line-height);
+    @include border-radius(var(--#{$prefix}nav-tabs-border-radius));
+
+    &:hover,
+    &.show,
+    &:focus-visible {
+      background-color: var(--#{$prefix}nav-tabs-link-hover-bg);
+    }
+
+    &:focus-visible {
+      box-shadow: $nav-link-focus-box-shadow !important;
+    }
+
+    &.active {
+      background-color: var(--#{$prefix}nav-tabs-link-active-bg);
+      @include box-shadow(var(--#{$prefix}nav-tabs-link-active-box-shadow));
+    }
+
+    &.disabled,
+    &:disabled {
+      background: none;
+    }
+  }
+
+  &.flex-column .nav-link {
+    justify-content: start;
+  }
+
+  .dropdown-menu {
+    @include border-radius(var(--#{$prefix}dropdown-border-radius));
+  }
+}
+
+
+// Pills
+
+.nav-pills {
+  --#{$prefix}nav-pills-gap: #{$nav-pills-gap};
+  --#{$prefix}nav-pills-link-border-width: #{$nav-pills-link-border-width};
+  --#{$prefix}nav-pills-link-border-color: #{$nav-pills-link-border-color};
+  --#{$prefix}nav-pills-link-hover-color: #{$nav-pills-link-hover-color};
+  --#{$prefix}nav-pills-link-hover-border-color: #{$nav-pills-link-hover-border-color};
+  --#{$prefix}nav-pills-link-active-border-color: #{$nav-pills-link-active-border-color};
+  --#{$prefix}nav-pills-link-disabled-color: #{$nav-pills-link-disabled-color};
+  --#{$prefix}nav-pills-link-disabled-border-color: #{$nav-pills-link-border-color};
+
+  gap: var(--#{$prefix}nav-pills-gap);
+
+  .nav-link {
+    line-height: var(--#{$prefix}nav-link-line-height);
+    border: var(--#{$prefix}nav-pills-link-border-width) solid var(--#{$prefix}nav-pills-link-border-color);
+
+    &:hover,
+    &.show,
+    &:focus-visible {
+      color: var(--#{$prefix}nav-pills-link-hover-color);
+      border-color: var(--#{$prefix}nav-pills-link-hover-border-color);
+    }
+
+    &.active {
+      border-color: var(--#{$prefix}nav-pills-link-active-border-color);
+    }
+
+    &.disabled,
+    &:disabled {
+      color: var(--#{$prefix}nav-pills-link-disabled-color);
+      border-color: var(--#{$prefix}nav-pills-link-disabled-border-color);
+    }
+  }
+}
+
+
+// Underline
+
+.nav-underline {
+  gap: var(--#{$prefix}nav-underline-gap);
+
+  .nav-link {
+    line-height: var(--#{$prefix}nav-link-line-height);
+    border: 0;
+
+    @include underline(var(--#{$prefix}nav-underline-border-width), before);
+
+    &::before {
+      bottom: calc(var(--#{$prefix}nav-underline-border-width) * -1);
+    }
+
+    &.active {
+      font-weight: $nav-link-font-weight;
+      background-color: transparent;
+      @include underline-action(before);
+    }
+  }
+
+  &.flex-column .nav-link {
+    padding: calc(var(--#{$prefix}nav-link-padding-y) * .5) var(--#{$prefix}nav-link-padding-x);
+
+    &::before {
+      top: 0;
+      left: calc(var(--#{$prefix}nav-underline-border-width) * -1);
+      width: var(--#{$prefix}nav-underline-border-width);
+      height: 100%;
+      transform: scaleY(0);
+      transform-origin: bottom left;
+    }
+
+    &.active::before {
+      transform: scaleY(1);
+      transform-origin: top left;
+    }
+  }
+}
+
+
+// Fill and justify
+
+.nav-fill:not(.flex-column) .nav-link,
+.nav-justified:not(.flex-column) .nav-link {
+  justify-content: center;
+}
+
+
+// Dark mode
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .nav-tabs:not([data-bs-theme="light"]) {
+      .nav-link {
+        --#{$prefix}nav-tabs-link-hover-bg: #{$nav-tabs-link-hover-bg-dark};
+        --#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg-dark};
+        --#{$prefix}nav-tabs-link-active-box-shadow: #{$nav-tabs-link-active-box-shadow-dark};
+      }
+    }
+  }
+}
diff --git a/resources/scss/components/_navbar.scss b/resources/scss/components/_navbar.scss
new file mode 100644
index 0000000..61970d5
--- /dev/null
+++ b/resources/scss/components/_navbar.scss
@@ -0,0 +1,403 @@
+// Add new CSS variables to default Bootstrap's .navbar
+
+.navbar {
+  --#{$prefix}navbar-brand-font-weight: #{$navbar-brand-font-weight};
+}
+
+
+// Navbar brand
+
+.navbar-brand {
+  display: inline-flex;
+  align-items: center;
+  font-weight: var(--#{$prefix}navbar-brand-font-weight);
+}
+
+
+// Navbar nav
+
+.navbar-nav {
+  --#{$prefix}nav-link-font-size: #{$navbar-nav-link-font-size};
+  --#{$prefix}nav-link-underline-border-width: #{$navbar-nav-link-underline-border-width};
+
+  gap: 0;
+
+  > .nav-item > .nav-link {
+    padding: var(--#{$prefix}nav-link-padding-y) var(--#{$prefix}navbar-nav-link-padding-x);
+
+    @include underline(var(--#{$prefix}nav-link-underline-border-width), before);
+
+    &::before {
+      top: calc(var(--#{$prefix}nav-link-padding-y) * .75);
+      width: var(--#{$prefix}nav-link-underline-border-width);
+      height: calc(100% - var(--#{$prefix}nav-link-padding-y) * 1.5);
+      transform: scaleY(0);
+      transform-origin: bottom left;
+    }
+
+    &:hover,
+    &.show,
+    &:focus-visible,
+    &.active {
+      &::before {
+        transform: scaleY(1);
+        transform-origin: top left;
+      }
+    }
+
+    @if $enable-caret {
+      &.dropdown-toggle::after {
+        margin-left: auto;
+      }
+    }
+  }
+
+  &:hover {
+    > .nav-item > .nav-link.active:not(:hover):not(.show):not(:focus-visible) {
+      &::before {
+        transform: scaleY(0);
+        transform-origin: bottom left;
+      }
+    }
+  }
+
+  .dropdown-menu {
+    --#{$prefix}dropdown-box-shadow: none;
+    position: static;
+
+    @if $enable-caret {
+      .dropup .dropdown-toggle::after,
+      .dropend .dropdown-toggle::after,
+      .dropstart .dropdown-toggle::after {
+        -webkit-mask: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M8.7,13.7c0.4-0.4,1.1-0.4,1.5,0l6,6l6-6c0.4-0.4,1.1-0.4,1.5,0s0.4,1.1,0,1.5l-6.7,6.7c-0.4,0.4-1.1,0.4-1.5,0l-6.7-6.7C8.3,14.6,8.3,14.1,8.7,13.7z'/></svg>")) no-repeat 50% 50%; // stylelint-disable-line property-no-vendor-prefix
+        mask: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M8.7,13.7c0.4-0.4,1.1-0.4,1.5,0l6,6l6-6c0.4-0.4,1.1-0.4,1.5,0s0.4,1.1,0,1.5l-6.7,6.7c-0.4,0.4-1.1,0.4-1.5,0l-6.7-6.7C8.3,14.6,8.3,14.1,8.7,13.7z'/></svg>")) no-repeat 50% 50%;
+      }
+      .dropstart .dropdown-toggle {
+        &::before {
+          display: none;
+        }
+        &::after {
+          display: inline-block;
+          width: $caret-width;
+          height: $caret-width;
+          margin-right: -.125rem;
+          content: "";
+          background-color: currentcolor;
+          border: 0 !important;
+          -webkit-mask-size: cover; // stylelint-disable-line property-no-vendor-prefix
+          mask-size: cover;
+        }
+      }
+    }
+
+    .dropend .dropdown-menu,
+    .dropstart .dropdown-menu {
+      margin: var(--#{$prefix}dropdown-spacer) 0 !important;
+    }
+  }
+
+  .dropdown > .dropdown-menu,
+  .dropup > .dropdown-menu {
+    &::before,
+    &::after {
+      height: calc(var(--#{$prefix}dropdown-spacer) * 1.125);
+    }
+  }
+}
+
+[dir="rtl"] .navbar-nav .dropdown-menu {
+  .dropup .dropdown-toggle::after,
+  .dropend .dropdown-toggle::after,
+  .dropstart .dropdown-toggle::after {
+    -webkit-mask: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M15.3,13.3c0.4-0.4,1.1-0.4,1.5,0l6.7,6.7c0.4,0.4,0.4,1.1,0,1.5s-1.1,0.4-1.5,0l-6-6l-6,6c-0.4,0.4-1.1,0.4-1.5,0s-0.4-1.1,0-1.5L15.3,13.3z'/></svg>")) no-repeat 50% 50%; // stylelint-disable-line property-no-vendor-prefix
+    mask: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M15.3,13.3c0.4-0.4,1.1-0.4,1.5,0l6.7,6.7c0.4,0.4,0.4,1.1,0,1.5s-1.1,0.4-1.5,0l-6-6l-6,6c-0.4,0.4-1.1,0.4-1.5,0s-0.4-1.1,0-1.5L15.3,13.3z'/></svg>")) no-repeat 50% 50%;
+  }
+}
+
+
+// Fix nav inside dark navbar but light offcanvas
+
+@if $enable-dark-mode {
+  @include color-mode(light) {
+    .navbar-dark:not([data-bs-theme="dark"]) .offcanvas .navbar-nav {
+      --#{$prefix}nav-link-color: #{$navbar-light-color};
+      --#{$prefix}nav-link-hover-color: #{$navbar-light-hover-color};
+      --#{$prefix}navbar-active-color: #{$navbar-light-active-color};
+      --#{$prefix}nav-link-disabled-color: #{$navbar-light-disabled-color};
+    }
+  }
+}
+
+
+// Navbar toggler
+
+.navbar-toggler {
+  position: relative;
+  width: $navbar-toggler-bar-width + $navbar-toggler-padding-x * 2;
+  height: $navbar-toggler-bar-height * 3 + $navbar-toggler-bar-spacing * 2 + $navbar-toggler-padding-y * 2;
+}
+
+.navbar-toggler-icon {
+  top: 50%;
+  display: block;
+  margin-top: $navbar-toggler-bar-height * -.5;
+  transition-timing-function: cubic-bezier(.55, .055, .675, .19);
+  transition-duration: .075s;
+
+  &,
+  &::before,
+  &::after {
+    position: absolute;
+    width: $navbar-toggler-bar-width;
+    height: $navbar-toggler-bar-height;
+    background-color: var(--#{$prefix}navbar-color);
+    transition-property: transform;
+  }
+  &::before,
+  &::after {
+    display: block;
+    content: "";
+  }
+  &::before {
+    top: ($navbar-toggler-bar-spacing + $navbar-toggler-bar-height) * -1;
+    transition: top .075s .12s ease, opacity .075s ease, width .15s ease-in-out;
+  }
+  &::after {
+    right: 0;
+    bottom: ($navbar-toggler-bar-spacing + $navbar-toggler-bar-height) * -1;
+    transition: bottom .075s .12s ease, transform .075s cubic-bezier(.55, .055, .675, .19), width .15s ease-in-out;
+  }
+}
+
+.navbar-toggler:not(.active):not([aria-expanded="true"]):hover .navbar-toggler-icon {
+  &::before,
+  &::after {
+    width: $navbar-toggler-bar-width * .75;
+  }
+}
+
+.navbar-toggler.active,
+[aria-expanded="true"] {
+  .navbar-toggler-icon {
+    transition-delay: .12s;
+    transition-timing-function: cubic-bezier(.215, .61, .355, 1);
+    transform: rotate(45deg);
+    &::before,
+    &::after {
+      width: $navbar-toggler-bar-width;
+    }
+    &::before {
+      top: 0;
+      opacity: 0;
+      transition: top .075s ease, opacity .075s .12s ease;
+    }
+    &::after {
+      bottom: 0;
+      transition: bottom .075s ease, transform .075s .12s cubic-bezier(.215, .61, .355, 1);
+      transform: rotate(-90deg);
+    }
+  }
+}
+
+.navbar-stuck-hide.collapse {
+  display: block;
+}
+
+
+// Generate series of `.navbar-expand-*` responsive classes for configuring
+// where your navbar collapses.
+
+.navbar-expand {
+  @each $breakpoint in map-keys($grid-breakpoints) {
+    $next: breakpoint-next($breakpoint, $grid-breakpoints);
+    $infix: breakpoint-infix($next, $grid-breakpoints);
+    &#{$infix} {
+      @include media-breakpoint-up($next) {
+        .navbar-nav {
+          > .nav-item > .nav-link {
+            &::before {
+              top: auto;
+              bottom: calc(var(--#{$prefix}nav-link-padding-y) * .875);
+              left: var(--#{$prefix}navbar-nav-link-padding-x);
+              width: calc(100% - var(--#{$prefix}navbar-nav-link-padding-x) * 2);
+              height: var(--#{$prefix}nav-link-underline-border-width);
+              transform: scaleX(0);
+              transform-origin: bottom right;
+            }
+
+            @if $enable-caret {
+              &.dropdown-toggle::before {
+                width: calc(100% - $caret-width - $caret-spacing - var(--#{$prefix}navbar-nav-link-padding-x) * 2);
+              }
+            }
+
+            &:hover,
+            &.show,
+            &:focus-visible,
+            &.active {
+              @include underline-action(before);
+            }
+
+            @if $enable-caret {
+              &.dropdown-toggle::after {
+                margin-left: $caret-spacing;
+              }
+            }
+          }
+
+          &:hover {
+            > .nav-item > .nav-link.active:not(:hover):not(.show):not(:focus-visible) {
+              &::before {
+                transform: scaleX(0);
+                transform-origin: bottom right;
+              }
+            }
+          }
+
+
+          .dropdown-menu {
+            --#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
+
+            &.show {
+              animation: fade-up .25s ease-in-out;
+            }
+
+            @if $enable-caret {
+              .dropend .dropdown-toggle::after {
+                -webkit-mask: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M12.7,9.7c0.4-0.4,1.1-0.4,1.5,0l6.7,6.7c0.4,0.4,0.4,1.1,0,1.5l-6.7,6.7c-0.4,0.4-1.1,0.4-1.5,0s-0.4-1.1,0-1.5l6-6l-6-6C12.3,10.6,12.3,10.1,12.7,9.7L12.7,9.7z'/></svg>")) no-repeat 50% 50%; // stylelint-disable-line property-no-vendor-prefix
+                mask: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M12.7,9.7c0.4-0.4,1.1-0.4,1.5,0l6.7,6.7c0.4,0.4,0.4,1.1,0,1.5l-6.7,6.7c-0.4,0.4-1.1,0.4-1.5,0s-0.4-1.1,0-1.5l6-6l-6-6C12.3,10.6,12.3,10.1,12.7,9.7L12.7,9.7z'/></svg>")) no-repeat 50% 50%;
+              }
+              .dropstart .dropdown-toggle {
+                &::after {
+                  display: none;
+                }
+                &::before {
+                  display: inline-block;
+                  width: $caret-width;
+                  height: $caret-width;
+                  margin-left: -.25rem;
+                  content: "";
+                  background-color: currentcolor;
+                  border: 0 !important;
+                  -webkit-mask: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M19.3,9.7c0.4,0.4,0.4,1.1,0,1.5L13.5,17l6,6c0.4,0.4,0.4,1.1,0,1.5s-1.1,0.4-1.5,0l-6.7-6.7c-0.4-0.4-0.4-1.1,0-1.5L18,9.7C18.4,9.3,18.9,9.3,19.3,9.7L19.3,9.7z'/></svg>")) no-repeat 50% 50%; // stylelint-disable-line property-no-vendor-prefix
+                  mask: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M19.3,9.7c0.4,0.4,0.4,1.1,0,1.5L13.5,17l6,6c0.4,0.4,0.4,1.1,0,1.5s-1.1,0.4-1.5,0l-6.7-6.7c-0.4-0.4-0.4-1.1,0-1.5L18,9.7C18.4,9.3,18.9,9.3,19.3,9.7L19.3,9.7z'/></svg>")) no-repeat 50% 50%;
+                  -webkit-mask-size: cover; // stylelint-disable-line property-no-vendor-prefix
+                  mask-size: cover;
+                }
+              }
+            }
+
+            .dropend .dropdown-menu,
+            .dropstart .dropdown-menu {
+              margin: calc(var(--#{$prefix}dropdown-padding-y) * -1 + var(--#{$prefix}dropdown-border-width) * -1) var(--#{$prefix}dropdown-spacer) 0 var(--#{$prefix}dropdown-spacer) !important;
+            }
+          }
+        }
+
+        &.navbar-dark:not([data-bs-theme="dark"]) .offcanvas .navbar-nav {
+          --#{$prefix}nav-link-color: var(--#{$prefix}navbar-color);
+          --#{$prefix}nav-link-hover-color: var(--#{$prefix}navbar-hover-color);
+          --#{$prefix}navbar-active-color: #{$navbar-dark-active-color};
+          --#{$prefix}nav-link-disabled-color: var(--#{$prefix}navbar-disabled-color);
+        }
+
+        &:not(.navbar-stuck) .dropdown-menu-static {
+          display: block;
+          animation: none !important;
+        }
+
+        &.navbar-stuck {
+          .navbar-stuck-show {
+            display: block !important;
+          }
+          .navbar-stuck-hide:not(.collapse):not(.collapsing) {
+            display: none !important;
+          }
+          .navbar-stuck-hide.collapse:not(.show) {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+}
+
+
+// Sticky navbar
+
+.navbar-stuck {
+  animation: navbar-show .25s;
+}
+
+.navbar-sticky.is-stuck,
+.navbar-sticky.navbar-stuck {
+  &.navbar,
+  .navbar {
+    background-color: var(--#{$prefix}body-bg);
+    @include box-shadow($box-shadow);
+  }
+
+  &.rounded-pill:not(.form-control):not(.badge):not(.btn),
+  .rounded-pill:not(.form-control):not(.badge):not(.btn) {
+    border-radius: var(--#{$prefix}border-radius-lg) !important;
+    border: {
+      top-left-radius: 0 !important;
+      top-right-radius: 0 !important;
+    }
+  }
+}
+
+@keyframes navbar-show  {
+  from {
+    transform: translateY(-100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+.sticky-product-banner {
+
+  .sticky-product-banner-inner {
+    position: absolute;
+    width: 100%;
+    transition: transform .3s ease-in-out;
+    transform: translateY(0);
+  }
+
+  &:not(.is-stuck) .sticky-product-banner-inner {
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    clip: rect(0, 0, 0, 0) !important;
+    white-space: nowrap !important;
+    border: 0 !important;
+    transform: translateY(-100%);
+  }
+}
+
+
+// Dark mode
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .navbar:not([data-bs-theme="light"]) {
+      --#{$prefix}navbar-color: #{$navbar-dark-color};
+      --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
+      --#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
+      --#{$prefix}navbar-active-color: #{$navbar-dark-active-color};
+      --#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color};
+      --#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
+    }
+    .navbar-sticky.is-stuck,
+    .navbar-sticky.navbar-stuck {
+      &.navbar:not([data-bs-theme="light"]),
+      .navbar:not([data-bs-theme="light"]) {
+        background-color: var(--#{$prefix}body-bg);
+        @include box-shadow($box-shadow-dark);
+      }
+    }
+  }
+}
diff --git a/resources/scss/components/_pagination.scss b/resources/scss/components/_pagination.scss
new file mode 100644
index 0000000..6684da4
--- /dev/null
+++ b/resources/scss/components/_pagination.scss
@@ -0,0 +1,49 @@
+// Override Bootstrap's pagination component
+
+.pagination {
+  --#{$prefix}pagination-spacer: #{$pagination-spacer};
+  --#{$prefix}pagination-font-weight: #{$pagination-font-weight};
+
+  flex-direction: row;
+  gap: var(--#{$prefix}pagination-spacer);
+  margin-bottom: 0;
+}
+
+.page-link {
+  font-weight: var(--#{$prefix}pagination-font-weight);
+
+  &:hover,
+  &:focus,
+  &.active,
+  .active > & {
+    z-index: 0;
+  }
+
+  &:focus {
+    box-shadow: none;
+  }
+  &:focus-visible {
+    z-index: 4;
+    color: var(--#{$prefix}pagination-focus-color);
+    background-color: var(--#{$prefix}pagination-focus-bg);
+    outline: $pagination-focus-outline;
+    box-shadow: var(--#{$prefix}pagination-focus-box-shadow);
+  }
+
+  // Fix icon vertical aligment
+  [class*=" #{$icon-prefix}"],
+  [class^="#{$icon-prefix}"] {
+    margin-top: .125rem;
+  }
+}
+
+
+// Sizing
+
+.pagination-sm {
+  @include rfs($pagination-font-size-sm, --#{$prefix}pagination-font-size);
+}
+
+.pagination-lg {
+  @include rfs($pagination-font-size-lg, --#{$prefix}pagination-font-size);
+}
diff --git a/resources/scss/components/_popover.scss b/resources/scss/components/_popover.scss
new file mode 100644
index 0000000..9e67e00
--- /dev/null
+++ b/resources/scss/components/_popover.scss
@@ -0,0 +1,32 @@
+// Override default Bootstrap's popover component
+
+.popover {
+  --#{$prefix}popover-arrow-border: var(--#{$prefix}border-color);
+}
+
+.popover-header {
+  padding-bottom: 0;
+  margin-bottom: -$popover-body-padding-y * .5;
+  border-bottom: 0;
+}
+
+
+// Adding custom popover size that is applied via data-bs-custom-class="popover-sm"
+
+.popover-sm {
+  --#{$prefix}popover-max-width: #{$popover-max-width * .75};
+  --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x * .75};
+  --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y * .75};
+  @include rfs($font-size-xs, --#{$prefix}popover-font-size);
+}
+
+
+// Dark mode
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .popover:not([data-bs-theme="light"]) {
+      --#{$prefix}popover-box-shadow: #{$popover-box-shadow-dark};
+    }
+  }
+}
diff --git a/resources/scss/components/_progress.scss b/resources/scss/components/_progress.scss
new file mode 100644
index 0000000..7fee762
--- /dev/null
+++ b/resources/scss/components/_progress.scss
@@ -0,0 +1,5 @@
+// Override striped gradient for light progress bar
+
+.progress-bar-striped.bg-light {
+  @include gradient-striped(rgba($gray-900, .15), 45deg);
+}
diff --git a/resources/scss/components/_scrollbar.scss b/resources/scss/components/_scrollbar.scss
new file mode 100644
index 0000000..9117f07
--- /dev/null
+++ b/resources/scss/components/_scrollbar.scss
@@ -0,0 +1,100 @@
+// Custom scrollbar
+// based on https://github.com/grsmto/simplebar
+
+
+[data-simplebar] {
+  --#{$prefix}scrollbar-width: #{$scrollbar-width};
+  --#{$prefix}scrollbar-bg: #{$scrollbar-bg};
+  --#{$prefix}scrollbar-border-radius: #{$scrollbar-border-radius};
+  --#{$prefix}scrollbar-track-width: #{$scrollbar-track-width};
+  --#{$prefix}scrollbar-track-bg: #{$scrollbar-track-bg};
+}
+
+.simplebar-scrollbar {
+  &::before {
+    right: 0;
+    left: 0;
+    background-color: var(--#{$prefix}scrollbar-bg);
+    @include border-radius(var(--#{$prefix}scrollbar-border-radius));
+    opacity: 1 !important;
+    transition: none;
+  }
+}
+
+.simplebar-track {
+  overflow: initial;
+  background-color: var(--#{$prefix}scrollbar-track-bg);
+  @include border-radius(var(--#{$prefix}scrollbar-border-radius));
+  opacity: 0;
+  transition: opacity .15s ease-in-out;
+
+  &.simplebar-vertical {
+    right: calc(var(--#{$prefix}scrollbar-width) * .5);
+    width: var(--#{$prefix}scrollbar-track-width);
+    .simplebar-scrollbar {
+      left: 50%;
+      width: var(--#{$prefix}scrollbar-width);
+      margin-left: calc(var(--#{$prefix}scrollbar-width) * -.5);
+      &::before {
+        top: 0;
+        bottom: 0;
+      }
+    }
+  }
+
+  &.simplebar-horizontal {
+    bottom: calc(var(--#{$prefix}scrollbar-width) * .5);
+    height: var(--#{$prefix}scrollbar-track-width);
+    .simplebar-scrollbar {
+      top: 50%;
+      bottom: 0;
+      height: var(--#{$prefix}scrollbar-width);
+      margin-top: calc(var(--#{$prefix}scrollbar-width) * -.5);
+      &::before {
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+      }
+    }
+  }
+}
+
+.simplebar-wrapper:hover ~ .simplebar-track,
+[data-simplebar-auto-hide="false"] .simplebar-track {
+  opacity: 1;
+}
+
+[data-simplebar]:not(.simplebar-dragging) .simplebar-content-wrapper {
+  scroll-behavior: smooth;
+}
+
+
+// RTL support
+
+[dir="rtl"] .simplebar-track.simplebar-vertical {
+  /* rtl:begin:ignore */
+  right: auto;
+  left: 0;
+
+  /* rtl:end:ignore */
+}
+
+
+// Inside accordion item
+
+.accordion-item .simplebar-track.simplebar-vertical {
+  right: calc(var(--#{$prefix}scrollbar-width) * 2.25);
+}
+
+
+// Dark mode
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    [data-simplebar]:not([data-bs-theme="light"]) {
+      --#{$prefix}scrollbar-bg: #{$scrollbar-bg-dark};
+      --#{$prefix}scrollbar-track-bg: #{$scrollbar-track-bg-dark};
+    }
+  }
+}
diff --git a/resources/scss/components/_select-box.scss b/resources/scss/components/_select-box.scss
new file mode 100644
index 0000000..d429f98
--- /dev/null
+++ b/resources/scss/components/_select-box.scss
@@ -0,0 +1,288 @@
+// Single / multiple select with search and sorting, tags components
+// based on https://github.com/Choices-js/Choices
+
+// Reboot plugin's styles
+
+// stylelint-disable selector-class-pattern
+.choices {
+  margin-bottom: 0;
+}
+
+.choices[data-type*="select-one"] {
+  &::after {
+    display: none;
+  }
+
+  .form-select {
+    padding-right: 3.25rem;
+  }
+
+  .choices__button {
+    right: 0;
+    left: auto;
+    margin: {
+      right: 2rem;
+      left: 0;
+    }
+    background-size: 9px;
+    box-shadow: none !important;
+    opacity: .4;
+    transition: opacity .15s ease-in-out;
+
+    &:hover {
+      opacity: .8;
+    }
+  }
+}
+
+.filter-select:has(.choices__item:not(.choices__placeholder)) {
+  --#{$prefix}form-control-border-color: #{$input-focus-border-color};
+}
+
+.choices[data-type*="select-multiple"] .form-select,
+.choices[data-type*="text"] .form-select {
+  padding: $input-btn-padding-y $input-btn-padding-y ($input-btn-padding-y - .25rem) $input-btn-padding-y;
+  background-image: none;
+
+  &.form-select-lg {
+    padding: $input-btn-padding-y-lg $input-btn-padding-y-lg ($input-btn-padding-y-lg - .25rem) $input-btn-padding-y-lg;
+  }
+
+  &.form-select-sm {
+    padding: $input-btn-padding-y-sm $input-btn-padding-y-sm ($input-btn-padding-y-sm - .25rem) $input-btn-padding-y-sm;
+  }
+}
+
+.choices__placeholder {
+  color: $input-placeholder-color;
+  opacity: 1;
+}
+
+.is-focused .form-select {
+  border-color: var(--#{$prefix}form-control-focus-border-color);
+}
+
+.is-disabled .form-select {
+  color: $input-disabled-color;
+  background-color: $input-disabled-bg;
+  border-color: $input-disabled-border-color;
+  border-style: dashed;
+}
+
+.choices__list--dropdown,
+.choices__list[aria-expanded] {
+  z-index: 10;
+  padding: $dropdown-padding-y $dropdown-padding-x;
+  margin: $dropdown-spacer * 1.25 0 !important;
+  font-size: $dropdown-font-size;
+  background-color: $dropdown-bg;
+  border: $dropdown-border-width solid $dropdown-border-color !important;
+  @include border-radius($dropdown-border-radius !important);
+  @include box-shadow($dropdown-box-shadow !important);
+
+  .choices__placeholder {
+    display: none !important;
+  }
+
+  .choices__list {
+    max-height: 240px;
+  }
+}
+
+.choices__list--single {
+  display: flex;
+  padding: 0;
+
+  .choices__item {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+.choices__list--dropdown .choices__item,
+.choices__list[aria-expanded] .choices__item {
+  display: flex;
+  align-items: center;
+  padding: $dropdown-item-padding-y $dropdown-item-padding-x !important;
+  color: $dropdown-link-color;
+  @include border-radius($dropdown-item-border-radius !important);
+
+  &.is-highlighted {
+    color: $dropdown-link-active-color;
+    background-color: $dropdown-link-active-bg;
+  }
+}
+
+.choices .choices__input {
+  padding: {
+    top: .25rem;
+    right: 0;
+    bottom: .25rem;
+    left: .375rem;
+  }
+  margin: 0;
+  margin-bottom: .25rem;
+  color: $input-color;
+  background-color: transparent !important;
+
+  &::placeholder {
+    color: $input-placeholder-color;
+    opacity: 1;
+  }
+}
+
+.choices:not([data-type*="select-multiple"]):not([data-type*="text"]) .choices__input {
+  padding-left: 1.75rem !important;
+  margin: {
+    top: -.375rem !important;
+    bottom: $dropdown-spacer * 1.25 !important;
+  }
+  background: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 32 32' fill='#9ca3af'><path d='m21.6 20.4-3.8-3.8c1.2-1.5 2-3.5 2-5.6 0-4.9-4-8.9-8.9-8.9S2 6.1 2 11s4 8.9 8.9 8.9c2.1 0 4.1-.8 5.6-2l3.8 3.8c.3.3.9.3 1.2 0 .5-.4.5-1 .1-1.3M16.1 16l-.1.1c-1.3 1.2-3 2-5 2-3.9 0-7.1-3.2-7.1-7.1S7.1 3.9 11 3.9s7.1 3.2 7.1 7.1c0 1.9-.8 3.7-2 5'/></svg>")) no-repeat .125rem .75rem;
+  border-color: var(--#{$prefix}border-color) !important;
+}
+
+.choices__list--dropdown .choices__item--selectable,
+.choices__list[aria-expanded] .choices__item--selectable {
+  &::after {
+    flex-shrink: 0;
+    width: $dropdown-font-size * 1.5;
+    height: $dropdown-font-size * 1.5;
+    margin: {
+      top: .1875rem;
+      right: -.25rem;
+      left: auto;
+    }
+    content: "";
+    background-color: currentcolor;
+    opacity: 0;
+    -webkit-mask: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M20.619 5.381a.875.875 0 0 1 0 1.238l-11 11a.875.875 0 0 1-1.238 0l-5-5A.875.875 0 1 1 4.62 11.38L9 15.763 19.381 5.38a.875.875 0 0 1 1.238 0Z'/></svg>")) no-repeat 50% 50%; // stylelint-disable-line property-no-vendor-prefix
+    mask: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M20.619 5.381a.875.875 0 0 1 0 1.238l-11 11a.875.875 0 0 1-1.238 0l-5-5A.875.875 0 1 1 4.62 11.38L9 15.763 19.381 5.38a.875.875 0 0 1 1.238 0Z'/></svg>")) no-repeat 50% 50%;
+    -webkit-mask-size: cover; // stylelint-disable-line property-no-vendor-prefix
+    mask-size: cover;
+  }
+
+  &.is-highlighted::after {
+    opacity: .85;
+  }
+}
+
+.choices__heading {
+  padding: 1rem $dropdown-item-padding-x .75rem;
+  margin-bottom: $dropdown-spacer * 1.25;
+  font: {
+    size: $font-size-sm;
+    weight: $headings-font-weight;
+  }
+  color: var(--#{$prefix}heading-color);
+  border-color: var(--#{$prefix}border-color);
+}
+
+.choices.is-disabled .choices__list--multiple .choices__item,
+.choices__list--multiple .choices__item {
+  background-color: var(--#{$prefix}emphasis-color);
+  border-color: var(--#{$prefix}emphasis-color);
+  margin: {
+    right: .25rem;
+    bottom: .25rem;
+  }
+
+  .choices__button {
+    padding: {
+      right: .375rem;
+      left: 1rem;
+    }
+    margin: {
+      right: -.25rem;
+      left: .5rem;
+    }
+    border: {
+      right: 0;
+      left: 1px solid rgba($white, .3);
+    }
+  }
+
+  &.is-highlighted {
+    background-color: var(--#{$prefix}secondary-color);
+    border-color: var(--#{$prefix}secondary-color);
+  }
+}
+
+.choices.is-disabled .choices__list--multiple .choices__item {
+  opacity: .45;
+}
+
+
+// Validation
+
+.was-validated .choices:has(.form-select:invalid),
+.choices:has(.is-invalid) {
+  .form-select {
+    border-color: var(--#{$prefix}form-invalid-border-color);
+  }
+  ~ .invalid-feedback,
+  ~ .invalid-tooltip {
+    display: block;
+  }
+}
+.was-validated .choices:has(.form-select:valid),
+.choices:has(.is-valid) {
+  ~ .valid-feedback,
+  ~ .valid-tooltip {
+    display: block;
+  }
+}
+
+
+// Dark mode
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .choices[data-type*="select-one"] .choices__button {
+      background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==");
+    }
+
+    .choices.is-disabled .choices__list--multiple .choices__item,
+    .choices__list--multiple .choices__item {
+      color: $dark;
+
+      .choices__button {
+        background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==");
+        border-color: $gray-300;
+      }
+    }
+
+    .filter-select:has(.choices__item:not(.choices__placeholder)) {
+      --#{$prefix}form-control-border-color: #{$input-focus-border-color-dark};
+    }
+
+    .choices:has([data-bs-theme="light"]) {
+      .form-select {
+        --#{$prefix}form-control-bg: #{$input-bg};
+        --#{$prefix}form-control-border-color: #{$input-border-color};
+        --#{$prefix}form-control-focus-bg: #{$input-focus-bg};
+        --#{$prefix}form-control-focus-border-color: #{$input-focus-border-color};
+        --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator)};
+      }
+
+      .choices__button {
+        background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==");
+      }
+
+      .choices.is-disabled .choices__list--multiple .choices__item,
+      .choices__list--multiple .choices__item {
+        color: $white;
+
+        .choices__button {
+          background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==");
+          border-color: rgba($white, .3);
+        }
+      }
+
+      .filter-select:has(.choices__item:not(.choices__placeholder)) {
+        --#{$prefix}form-control-border-color: #{$input-focus-border-color};
+      }
+    }
+  }
+}
+// stylelint-enable selector-class-pattern
diff --git a/resources/scss/components/_tables.scss b/resources/scss/components/_tables.scss
new file mode 100644
index 0000000..8a5cfd5
--- /dev/null
+++ b/resources/scss/components/_tables.scss
@@ -0,0 +1,33 @@
+// Tables
+
+.table {
+  --#{$prefix}table-th-color: #{$table-th-color};
+
+  thead th,
+  tbody th {
+    color: var(--#{$prefix}table-th-color) !important;
+  }
+
+  &.table-dark th,
+  .table-dark th {
+    color: $white !important;
+  }
+}
+
+
+// Dark mode
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .table:not([data-bs-theme="light"]) {
+      --#{$prefix}table-striped-bg: #{$table-striped-bg-dark};
+      --#{$prefix}table-active-bg: #{$table-active-bg-dark};
+      --#{$prefix}table-hover-bg: #{$table-hover-bg-dark};
+    }
+
+    .table-dark {
+      --#{$prefix}table-bg: var(--#{$prefix}dark);
+      --#{$prefix}table-border-color: #{$table-border-color};
+    }
+  }
+}
diff --git a/resources/scss/components/_toasts.scss b/resources/scss/components/_toasts.scss
new file mode 100644
index 0000000..db50706
--- /dev/null
+++ b/resources/scss/components/_toasts.scss
@@ -0,0 +1,25 @@
+// Override default Bootstrap's toast component
+
+.toast {
+  padding: var(--#{$prefix}toast-padding-y) var(--#{$prefix}toast-padding-x);
+
+  .btn-close {
+    --#{$prefix}btn-close-size: .625em;
+    margin-top: .125rem;
+  }
+}
+
+.toast-header,
+.toast-body {
+  padding: 0;
+
+  .btn-close {
+    --#{$prefix}btn-close-size: .625em;
+    margin: .125rem 0 0;
+  }
+}
+
+.toast-header {
+  margin-bottom: var(--#{$prefix}toast-padding-y);
+  border: 0;
+}
diff --git a/resources/scss/components/_tooltip.scss b/resources/scss/components/_tooltip.scss
new file mode 100644
index 0000000..559bced
--- /dev/null
+++ b/resources/scss/components/_tooltip.scss
@@ -0,0 +1,8 @@
+// Adding custom tooltip size that is applied via data-bs-custom-class="tooltip-sm"
+
+.tooltip-sm {
+  --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x * .75};
+  --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y * .75};
+  @include rfs($font-size-xs, --#{$prefix}tooltip-font-size);
+  --#{$prefix}tooltip-border-radius: var(--#{$prefix}border-radius-xs);
+}
diff --git a/resources/scss/components/_type.scss b/resources/scss/components/_type.scss
new file mode 100644
index 0000000..0a9730a
--- /dev/null
+++ b/resources/scss/components/_type.scss
@@ -0,0 +1,62 @@
+// Typography related styles
+
+// Headings
+/* stylelint-disable @stylistic/selector-list-comma-newline-after */
+
+h1, .h1 {
+  line-height: $h1-line-height;
+}
+
+h2, .h2 {
+  line-height: $h2-line-height;
+}
+
+h3, .h3 {
+  line-height: $h3-line-height;
+}
+
+h4, .h4 {
+  line-height: $h4-line-height;
+}
+
+h5, .h5 {
+  line-height: $h4-line-height;
+}
+
+h6, .h6 {
+  line-height: $h4-line-height;
+}
+
+
+// Link inside headings
+
+h1, .h1, h2, .h2, h3, .h3,
+h4, .h4, h5, .h5, h6, .h6 {
+  a {
+    color: var(--#{$prefix}heading-color);
+    text-decoration: none;
+  }
+}
+/* stylelint-enable @stylistic/selector-list-comma-newline-after */
+
+
+// Blockquote
+
+.blockquote {
+  font-weight: $blockquote-font-weight;
+  color: $blockquote-color;
+}
+
+.blockquote-footer {
+  margin-top: -$blockquote-margin-y * .5;
+}
+
+
+// Inline list
+
+.list-inline {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: $spacer * .625 $list-inline-padding;
+  margin-bottom: $spacer * .75;
+}
diff --git a/resources/scss/theme.scss b/resources/scss/theme.scss
new file mode 100644
index 0000000..55a08d0
--- /dev/null
+++ b/resources/scss/theme.scss
@@ -0,0 +1,26 @@
+/*!
+ * Cartzilla | Multipurpose E-Commerce Bootstrap HTML Template
+ * Copyright 2024 Coderthemes
+ * Theme styles
+*/
+
+// User variables
+@import "user-variables";
+
+// // Configuration & utilities
+@import "fonts";
+@import "variables";
+@import "variables-dark";
+@import "utilities";
+
+// Bootstrap
+@import "bootstrap";
+
+// Layout, animations & components
+@import "root";
+@import "reboot";
+@import "animations";
+@import "components";
+
+// User custom styles
+@import "user";
diff --git a/resources/views/404/electronics.blade.php b/resources/views/404/electronics.blade.php
new file mode 100644
index 0000000..7fec3bc
--- /dev/null
+++ b/resources/views/404/electronics.blade.php
@@ -0,0 +1,116 @@
+@extends('layouts.base', ['title' => 'Electronics Store - 404 Error'])
+
+@section('content')
+    @include('layouts.partials/offcanvas')
+
+    @include('layouts.partials/navbar', ['wishlist' => true])
+
+    <main class="content-wrapper d-flex align-items-center justify-content-center">
+        <div class="container">
+            <!-- Error message -->
+            <section class="text-center py-5 px-2 px-sm-0 my-2 my-md-3 my-lg-4 my-xl-5 mx-auto" style="max-width: 636px">
+                <div class="pb-4 mb-3 mx-auto" style="max-width: 524px">
+                    <svg class="text-body-emphasis" viewbox="0 0 524 200" xmlns="http://www.w3.org/2000/svg">
+                        <path
+                            d="M0.422852 158.785C0.422852 159.89 1.31828 160.785 2.42285 160.785H88.4885V189C88.4885 190.105 89.3839 191 90.4885 191H128.607C129.711 191 130.607 190.105 130.607 189V160.785H150.423C151.527 160.785 152.423 159.89 152.423 158.785V128.127C152.423 127.022 151.527 126.127 150.423 126.127H130.607V11C130.607 9.89543 129.711 9 128.607 9H76.23C75.546 9 74.9094 9.34959 74.5423 9.92679L0.735186 125.991C0.531195 126.312 0.422852 126.684 0.422852 127.064V158.785ZM89.3789 55.5664H89.0558C88.37 55.5664 87.732 55.9178 87.3654 56.4975L44.4037 124.435C44.2922 124.611 44.233 124.816 44.233 125.024C44.233 125.633 44.7267 126.127 45.3356 126.127H89.3789V55.5664Z"
+                            fill="currentColor" fill-rule="evenodd"></path>
+                        <path
+                            d="M371.423 158.785C371.423 159.89 372.318 160.785 373.423 160.785H459.488V189C459.488 190.105 460.384 191 461.488 191H499.607C500.711 191 501.607 190.105 501.607 189V160.785H521.423C522.527 160.785 523.423 159.89 523.423 158.785V128.127C523.423 127.022 522.527 126.127 521.423 126.127H501.607V11C501.607 9.89543 500.711 9 499.607 9H447.23C446.546 9 445.909 9.34959 445.542 9.92679L371.735 125.991C371.531 126.312 371.423 126.684 371.423 127.064V158.785ZM460.379 55.5664H460.056C459.37 55.5664 458.732 55.9178 458.365 56.4975L415.404 124.435C415.292 124.611 415.233 124.816 415.233 125.024C415.233 125.633 415.727 126.127 416.336 126.127H460.379V55.5664Z"
+                            fill="currentColor" fill-rule="evenodd"></path>
+                        <path class="d-none d-block-dark"
+                            d="M316.912 38.6614V175.465C316.912 184.041 309.953 191 301.376 191H224.836C216.26 191 209.3 184.041 209.3 175.465V38.6614C209.3 30.0853 216.26 23.1261 224.836 23.1261H228.67C233.184 23.1261 236.842 19.4674 236.842 14.9541V14.9541C236.842 11.6657 239.508 9 242.796 9H283.438C286.726 9 289.392 11.6657 289.392 14.9541V14.9541C289.392 19.4674 293.05 23.1261 297.564 23.1261H301.398C309.963 23.1261 316.912 30.0853 316.912 38.6614Z"
+                            fill="#333d4c"></path>
+                        <path class="d-none d-block-dark"
+                            d="M215.812 176.426V37.711C215.812 33.2536 219.428 29.6374 223.885 29.6374H302.338C306.795 29.6374 310.411 33.2536 310.411 37.711V176.426C310.411 180.883 306.795 184.5 302.338 184.5H223.885C219.428 184.5 215.812 180.883 215.812 176.426Z"
+                            fill="#3f4958"></path>
+                        <path class="d-none-dark"
+                            d="M316.912 38.6614V175.465C316.912 184.041 309.953 191 301.376 191H224.836C216.26 191 209.3 184.041 209.3 175.465V38.6614C209.3 30.0853 216.26 23.1261 224.836 23.1261H228.67C233.184 23.1261 236.842 19.4674 236.842 14.9541C236.842 11.6657 239.508 9 242.796 9H283.438C286.726 9 289.392 11.6657 289.392 14.9541C289.392 19.4674 293.05 23.1261 297.564 23.1261H301.398C309.963 23.1261 316.912 30.0853 316.912 38.6614Z"
+                            fill="url(#paint0_linear_2927_3489)"></path>
+                        <path class="d-none-dark"
+                            d="M215.812 176.426V37.711C215.812 33.2536 219.428 29.6374 223.885 29.6374H302.338C306.795 29.6374 310.411 33.2536 310.411 37.711V176.426C310.411 180.883 306.795 184.5 302.338 184.5H223.885C219.428 184.5 215.812 180.883 215.812 176.426Z"
+                            fill="url(#paint1_linear_2927_3489)"></path>
+                        <path class="text-primary"
+                            d="M306.522 162.66V175.388C306.522 178.261 304.184 180.599 301.311 180.599H224.912C222.039 180.599 219.701 178.261 219.701 175.388V162.66H306.522Z"
+                            fill="currentColor"></path>
+                        <rect class="animate-blink text-primary" fill="currentColor" height="17.94" width="86.82" x="219.7"
+                            y="141"></rect>
+                        <defs>
+                            <lineargradient gradientunits="userSpaceOnUse" id="paint0_linear_2927_3489" x1="209.3"
+                                x2="316.912" y1="100" y2="100">
+                                <stop offset="0" stop-color="#accbee"></stop>
+                                <stop offset="1" stop-color="#e7f0fd"></stop>
+                            </lineargradient>
+                            <lineargradient gradientunits="userSpaceOnUse" id="paint1_linear_2927_3489" x1="263.111"
+                                x2="263.111" y1="184.5" y2="29.6374">
+                                <stop offset="0" stop-color="#d3e6f5"></stop>
+                                <stop offset="1" stop-color="#f0f7fc"></stop>
+                            </lineargradient>
+                        </defs>
+                    </svg>
+                </div>
+                <h1>Page not found</h1>
+                <p class="pb-3">The page you are looking for was moved, removed or might never existed.</p>
+                <a class="btn btn-lg btn-primary" href="{{ route('second', ['home', 'electronics']) }}">Go to homepage</a>
+            </section>
+            <!-- Banners -->
+            <section class="row g-3 g-lg-4">
+                <div class="col-md-7">
+                    <div
+                        class="position-relative d-flex flex-column flex-sm-row align-items-center h-100 rounded-5 overflow-hidden px-5 px-sm-0 pe-sm-4">
+                        <span class="position-absolute top-0 start-0 w-100 h-100 d-none-dark rtl-flip"
+                            style="background: linear-gradient(90deg, #accbee 0%, #e7f0fd 100%)"></span>
+                        <span class="position-absolute top-0 start-0 w-100 h-100 d-none d-block-dark rtl-flip"
+                            style="background: linear-gradient(90deg, #1b273a 0%, #1f2632 100%)"></span>
+                        <div
+                            class="position-relative z-1 text-center text-sm-start pt-4 pt-sm-0 ps-xl-4 mt-2 mt-sm-0 order-sm-2">
+                            <h2 class="h3 mb-2">iPhone 14</h2>
+                            <p class="fs-sm text-light-emphasis mb-sm-4">Apple iPhone 14 128GB Blue</p>
+                            <a class="btn btn-primary" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                From $899
+                                <i class="ci-arrow-up-right fs-base ms-1 me-n1"></i>
+                            </a>
+                        </div>
+                        <div class="position-relative z-1 w-100 align-self-end order-sm-1" style="max-width: 416px">
+                            <div class="ratio rtl-flip" style="--cz-aspect-ratio: calc(320 / 416 * 100%)">
+                                <img alt="iPhone 14" src="/img/shop/electronics/banners/iphone-1.png" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-md-5">
+                    <div
+                        class="position-relative d-flex flex-column align-items-center justify-content-between h-100 rounded-5 overflow-hidden pt-3">
+                        <span class="position-absolute top-0 start-0 w-100 h-100 d-none-dark rtl-flip"
+                            style="background: linear-gradient(90deg, #fdcbf1 0%, #fdcbf1 1%, #ffecfa 100%)"></span>
+                        <span class="position-absolute top-0 start-0 w-100 h-100 d-none d-block-dark rtl-flip"
+                            style="background: linear-gradient(90deg, #362131 0%, #322730 100%)"></span>
+                        <div class="position-relative z-1 text-center pt-3 mx-4">
+                            <i class="ci-apple text-body-emphasis fs-3 mb-3"></i>
+                            <p class="fs-sm text-light-emphasis mb-1">Deal of the week</p>
+                            <h2 class="h3 mb-4">iPad Pro M1</h2>
+                        </div>
+                        <a class="position-relative z-1 d-block w-100" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                            <div class="ratio rtl-flip" style="--cz-aspect-ratio: calc(159 / 525 * 100%)">
+                                <img alt="iPad" src="/img/shop/electronics/banners/ipad.png" width="525" />
+                            </div>
+                        </a>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </main>
+
+    <!-- Page footer -->
+    <footer class="footer pt-5 pb-4 mt-2 mt-md-3 mt-lg-4 mt-xl-5">
+        <div class="container text-center pb-sm-2 pb-md-3">
+            <p class="fs-sm mb-0">
+                &copy; All rights reserved. Made by <span class="animate-underline"><a
+                        class="animate-target text-dark-emphasis fw-medium text-decoration-none"
+                        href="https://coderthemes.com/" target="_blank" rel="noreferrer">Coderthemes</a></span>
+            </p>
+        </div>
+    </footer>
+@endsection
+
+@section('scripts')
+@endsection
diff --git a/resources/views/404/fashion.blade.php b/resources/views/404/fashion.blade.php
new file mode 100644
index 0000000..d06ffb4
--- /dev/null
+++ b/resources/views/404/fashion.blade.php
@@ -0,0 +1,1088 @@
+@extends('layouts.base', ['title' => 'Fashion Store - 404 Error'])
+
+@section('content')
+    @include('layouts.partials.offcanvas')
+
+    <!-- Search offcanvas -->
+    <div class="offcanvas offcanvas-top" id="searchBox" data-bs-backdrop="static" tabindex="-1">
+        <div class="offcanvas-header border-bottom p-0 py-lg-1">
+            <form class="container d-flex align-items-center">
+                <input type="search" class="form-control form-control-lg fs-lg border-0 rounded-0 py-3 ps-0"
+                    placeholder="Search the products" data-autofocus="offcanvas">
+                <button type="reset" class="btn-close fs-lg" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+            </form>
+        </div>
+        <div class="offcanvas-body px-0">
+            <div class="container text-center">
+                <svg class="text-body-tertiary opacity-60 mb-4" xmlns="http://www.w3.org/2000/svg" width="60"
+                    viewBox="0 0 512 512" fill="currentColor">
+                    <path
+                        d="M340.115,361.412l-16.98-16.98c-34.237,29.36-78.733,47.098-127.371,47.098C87.647,391.529,0,303.883,0,195.765S87.647,0,195.765,0s195.765,87.647,195.765,195.765c0,48.638-17.738,93.134-47.097,127.371l16.98,16.98l11.94-11.94c5.881-5.881,15.415-5.881,21.296,0l112.941,112.941c5.881,5.881,5.881,15.416,0,21.296l-45.176,45.176c-5.881,5.881-15.415,5.881-21.296,0L328.176,394.648c-5.881-5.881-5.881-15.416,0-21.296L340.115,361.412z M195.765,361.412c91.484,0,165.647-74.163,165.647-165.647S287.249,30.118,195.765,30.118S30.118,104.28,30.118,195.765S104.28,361.412,195.765,361.412z M360.12,384l91.645,91.645l23.88-23.88L384,360.12L360.12,384z M233.034,233.033c5.881-5.881,15.415-5.881,21.296,0c5.881,5.881,5.881,15.416,0,21.296c-32.345,32.345-84.786,32.345-117.131,0c-5.881-5.881-5.881-15.415,0-21.296c5.881-5.881,15.416-5.881,21.296,0C179.079,253.616,212.45,253.616,233.034,233.033zM135.529,180.706c-12.475,0-22.588-10.113-22.588-22.588c0-12.475,10.113-22.588,22.588-22.588c12.475,0,22.588,10.113,22.588,22.588C158.118,170.593,148.005,180.706,135.529,180.706z M256,180.706c-12.475,0-22.588-10.113-22.588-22.588c0-12.475,10.113-22.588,22.588-22.588s22.588,10.113,22.588,22.588C278.588,170.593,268.475,180.706,256,180.706z" />
+                </svg>
+                <h6 class="mb-2">Your search results will appear here</h6>
+                <p class="fs-sm mb-0">Start typing in the search field above to see instant search results.</p>
+            </div>
+        </div>
+    </div>
+
+    <!-- Topbar -->
+    <div class="alert alert-dismissible bg-dark text-white rounded-0 py-2 px-0 m-0 fade show" data-bs-theme="dark">
+      <div class="container position-relative d-flex min-w-0">
+        <div class="d-flex flex-nowrap align-items-center g-2 w-100 min-w-0 mx-auto mt-n1" style="max-width: 458px">
+          <div class="nav me-2">
+            <button type="button" class="nav-link fs-lg p-0" id="topbarPrev" aria-label="Prev">
+              <i class="ci-chevron-left"></i>
+            </button>
+          </div>
+          <div class="swiper fs-sm text-white" data-swiper='{
+            "spaceBetween": 24,
+            "loop": true,
+            "autoplay": {
+              "delay": 5000,
+              "disableOnInteraction": false
+            },
+            "navigation": {
+              "prevEl": "#topbarPrev",
+              "nextEl": "#topbarNext"
+            }
+          }'>
+            <div class="swiper-wrapper min-w-0">
+              <div class="swiper-slide text-truncate text-center">🎉 Free Shipping on orders over $250. <span class="d-none d-sm-inline">Don't miss a discount!</span></div>
+              <div class="swiper-slide text-truncate text-center">💰 Money back guarantee. <span class="d-none d-sm-inline">We return money within 30 days.</span></div>
+              <div class="swiper-slide text-truncate text-center">💪 Friendly 24/7 customer support. <span class="d-none d-sm-inline">We've got you covered!</span></div>
+            </div>
+          </div>
+          <div class="nav ms-2">
+            <button type="button" class="nav-link fs-lg p-0" id="topbarNext" aria-label="Next">
+              <i class="ci-chevron-right"></i>
+            </button>
+          </div>
+        </div>
+        <button type="button" class="btn-close position-static flex-shrink-0 p-1 ms-3 ms-md-n4" data-bs-dismiss="alert" aria-label="Close"></button>
+      </div>
+    </div>
+
+
+    <!-- Navigation bar (Page header) -->
+    <header class="navbar navbar-expand-lg navbar-sticky bg-body d-block z-fixed p-0" data-sticky-navbar='{"offset": 500}'>
+      <div class="container py-2 py-lg-3">
+        <div class="d-flex align-items-center gap-3">
+
+          <!-- Mobile offcanvas menu toggler (Hamburger) -->
+          <button type="button" class="navbar-toggler me-4 me-md-2" data-bs-toggle="offcanvas" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+
+          <!-- Country slect visible on screens > 768px wide (md breakpoint) -->
+          <div class="dropdown d-none d-md-block nav">
+            <a class="nav-link dropdown-toggle py-1 px-0" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="Country select: USA">
+              <div class="ratio ratio-1x1" style="width: 20px">
+                <img src="/img/flags/en-us.png" alt="USA">
+              </div>
+            </a>
+            <ul class="dropdown-menu fs-sm" style="--cz-dropdown-spacer: .5rem">
+              <li>
+                <a class="dropdown-item" href="#!">
+                  <img src="/img/flags/en-uk.png" class="flex-shrink-0 me-2" width="20" alt="United Kingdom">
+                  United Kingdom
+                </a>
+              </li>
+              <li>
+                <a class="dropdown-item" href="#!">
+                  <img src="/img/flags/fr.png" class="flex-shrink-0 me-2" width="20" alt="France">
+                  France
+                </a>
+              </li>
+              <li>
+                <a class="dropdown-item" href="#!">
+                  <img src="/img/flags/de.png" class="flex-shrink-0 me-2" width="20" alt="Deutschland">
+                  Deutschland
+                </a>
+              </li>
+              <li>
+                <a class="dropdown-item" href="#!">
+                  <img src="/img/flags/it.png" class="flex-shrink-0 me-2" width="20" alt="Italia">
+                  Italia
+                </a>
+              </li>
+            </ul>
+          </div>
+
+          <!-- City slect visible on screens > 768px wide (md breakpoint) -->
+          <div class="dropdown d-none d-md-block nav">
+            <a class="nav-link animate-underline dropdown-toggle fw-normal py-1 px-0" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+              <span class="animate-target">Washington</span>
+            </a>
+            <ul class="dropdown-menu fs-sm" style="--cz-dropdown-spacer: .5rem">
+              <li><a class="dropdown-item" href="#!">Chicago</a></li>
+              <li><a class="dropdown-item" href="#!">Los Angeles</a></li>
+              <li><a class="dropdown-item" href="#!">New York</a></li>
+              <li><a class="dropdown-item" href="#!">Philadelphia</a></li>
+            </ul>
+          </div>
+        </div>
+
+        <!-- Navbar brand (Logo) -->
+        <a class="navbar-brand fs-2 py-0 m-0 me-auto me-sm-n5" href="{{ route('second', ['home', 'fashion']) }}">Cartzilla</a>
+
+        <!-- Button group -->
+        <div class="d-flex align-items-center">
+
+          <!-- Navbar stuck nav toggler -->
+          <button type="button" class="navbar-toggler d-none navbar-stuck-show me-3" data-bs-toggle="collapse" data-bs-target="#stuckNav" aria-controls="stuckNav" aria-expanded="false" aria-label="Toggle navigation in navbar stuck state">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+
+          <!-- Theme switcher (light/dark/auto) -->
+          <div class="dropdown">
+            <button type="button" class="theme-switcher btn btn-icon btn-lg btn-outline-secondary fs-lg border-0 rounded-circle animate-scale" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Toggle theme (light)">
+              <span class="theme-icon-active d-flex animate-target">
+                <i class="ci-sun"></i>
+              </span>
+            </button>
+            <ul class="dropdown-menu" style="--cz-dropdown-min-width: 9rem">
+              <li>
+                <button type="button" class="dropdown-item active" data-bs-theme-value="light" aria-pressed="true">
+                  <span class="theme-icon d-flex fs-base me-2">
+                    <i class="ci-sun"></i>
+                  </span>
+                  <span class="theme-label">Light</span>
+                  <i class="item-active-indicator ci-check ms-auto"></i>
+                </button>
+              </li>
+              <li>
+                <button type="button" class="dropdown-item" data-bs-theme-value="dark" aria-pressed="false">
+                  <span class="theme-icon d-flex fs-base me-2">
+                    <i class="ci-moon"></i>
+                  </span>
+                  <span class="theme-label">Dark</span>
+                  <i class="item-active-indicator ci-check ms-auto"></i>
+                </button>
+              </li>
+              <li>
+                <button type="button" class="dropdown-item" data-bs-theme-value="auto" aria-pressed="false">
+                  <span class="theme-icon d-flex fs-base me-2">
+                    <i class="ci-auto"></i>
+                  </span>
+                  <span class="theme-label">Auto</span>
+                  <i class="item-active-indicator ci-check ms-auto"></i>
+                </button>
+              </li>
+            </ul>
+          </div>
+
+          <!-- Search toggle button visible on screens < 992px wide (lg breakpoint) -->
+          <button type="button" class="btn btn-icon btn-lg fs-xl btn-outline-secondary border-0 rounded-circle animate-shake d-lg-none" data-bs-toggle="offcanvas" data-bs-target="#searchBox" aria-controls="searchBox" aria-label="Toggle search bar">
+            <i class="ci-search animate-target"></i>
+          </button>
+
+          <!-- Account button visible on screens > 768px wide (md breakpoint) -->
+          <a class="btn btn-icon btn-lg fs-lg btn-outline-secondary border-0 rounded-circle animate-shake d-none d-md-inline-flex" href="{{ route('second', ['account', 'signin']) }}">
+            <i class="ci-user animate-target"></i>
+            <span class="visually-hidden">Account</span>
+          </a>
+
+          <!-- Wishlist button visible on screens > 768px wide (md breakpoint) -->
+          <a class="btn btn-icon btn-lg fs-lg btn-outline-secondary border-0 rounded-circle animate-pulse d-none d-md-inline-flex" href="#!">
+            <i class="ci-heart animate-target"></i>
+            <span class="visually-hidden">Wishlist</span>
+          </a>
+
+          <!-- Cart button -->
+          <button type="button" class="btn btn-icon btn-lg fs-xl btn-outline-secondary position-relative border-0 rounded-circle animate-scale" data-bs-toggle="offcanvas" data-bs-target="#shoppingCart" aria-controls="shoppingCart" aria-label="Shopping cart">
+            <span class="position-absolute top-0 start-100 badge fs-xs text-bg-primary rounded-pill mt-1 ms-n4 z-2" style="--cz-badge-padding-y: .25em; --cz-badge-padding-x: .42em">3</span>
+            <i class="ci-shopping-bag animate-target me-1"></i>
+          </button>
+        </div>
+      </div>
+
+      <!-- Main navigation that turns into offcanvas on screens < 992px wide (lg breakpoint) -->
+      <div class="collapse navbar-stuck-hide" id="stuckNav">
+        <nav class="offcanvas offcanvas-start" id="navbarNav" tabindex="-1" aria-labelledby="navbarNavLabel">
+          <div class="offcanvas-header py-3">
+            <h5 class="offcanvas-title" id="navbarNavLabel">Browse Cartzilla</h5>
+            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+          </div>
+
+          <!-- Country and City slects visible on screens < 768px wide (md breakpoint) -->
+          <div class="offcanvas-header gap-3 d-md-none pt-0 pb-3">
+            <div class="dropdown nav">
+              <a class="nav-link dropdown-toggle py-1 px-0" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="Country select: USA">
+                <div class="ratio ratio-1x1" style="width: 20px">
+                  <img src="/img/flags/en-us.png" alt="USA">
+                </div>
+              </a>
+              <ul class="dropdown-menu fs-sm" style="--cz-dropdown-spacer: .5rem">
+                <li>
+                  <a class="dropdown-item" href="#!">
+                    <img src="/img/flags/en-uk.png" class="flex-shrink-0 me-2" width="20" alt="United Kingdom">
+                    United Kingdom
+                  </a>
+                </li>
+                <li>
+                  <a class="dropdown-item" href="#!">
+                    <img src="/img/flags/fr.png" class="flex-shrink-0 me-2" width="20" alt="France">
+                    France
+                  </a>
+                </li>
+                <li>
+                  <a class="dropdown-item" href="#!">
+                    <img src="/img/flags/de.png" class="flex-shrink-0 me-2" width="20" alt="Deutschland">
+                    Deutschland
+                  </a>
+                </li>
+                <li>
+                  <a class="dropdown-item" href="#!">
+                    <img src="/img/flags/it.png" class="flex-shrink-0 me-2" width="20" alt="Italia">
+                    Italia
+                  </a>
+                </li>
+              </ul>
+            </div>
+            <div class="dropdown nav">
+              <a class="nav-link animate-underline dropdown-toggle fw-normal py-1 px-0" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <span class="animate-target">Washington</span>
+              </a>
+              <ul class="dropdown-menu fs-sm" style="--cz-dropdown-spacer: .5rem">
+                <li><a class="dropdown-item" href="#!">Chicago</a></li>
+                <li><a class="dropdown-item" href="#!">Los Angeles</a></li>
+                <li><a class="dropdown-item" href="#!">New York</a></li>
+                <li><a class="dropdown-item" href="#!">Philadelphia</a></li>
+              </ul>
+            </div>
+          </div>
+          <div class="offcanvas-body pt-1 pb-3 py-lg-0">
+            <div class="container pb-lg-2 px-0 px-lg-3">
+
+              <div class="position-relative d-lg-flex align-items-center justify-content-between">
+
+                <!-- Categories mega menu -->
+                <div class="navbar-nav">
+                  <div class="dropdown position-static pb-lg-2">
+                    <button type="button" class="nav-link animate-underline fw-semibold text-uppercase ps-0" data-bs-toggle="dropdown" data-bs-trigger="hover" data-bs-auto-close="outside" aria-expanded="false">
+                      <i class="ci-menu fs-lg me-2"></i>
+                      <span class="animate-target">Categories</span>
+                    </button>
+                    <div class="dropdown-menu w-100 p-4 px-xl-5" style="--cz-dropdown-spacer: .75rem">
+
+                      <!-- Nav tabs -->
+                      <ul class="nav nav-underline justify-content-lg-center mt-n2 mt-lg-0 mb-4" role="tablist">
+                        <li class="nav-item" role="presentation">
+                          <button type="button" class="nav-link text-uppercase active" id="womens-tab" data-bs-toggle="tab" data-bs-target="#womens-tab-pane" role="tab" aria-controls="womens-tab-pane" aria-selected="true">
+                            Women's
+                          </button>
+                        </li>
+                        <li class="nav-item" role="presentation">
+                          <button type="button" class="nav-link text-uppercase" id="mens-tab" data-bs-toggle="tab" data-bs-target="#mens-tab-pane" role="tab" aria-controls="mens-tab-pane" aria-selected="false">
+                            Men's
+                          </button>
+                        </li>
+                        <li class="nav-item" role="presentation">
+                          <button type="button" class="nav-link text-uppercase" id="kids-tab" data-bs-toggle="tab" data-bs-target="#kids-tab-pane" role="tab" aria-controls="kids-tab-pane" aria-selected="false">
+                            Kids'
+                          </button>
+                        </li>
+                      </ul>
+
+                      <!-- Tab panes -->
+                      <div class="tab-content pb-xl-4">
+
+                        <!-- Women's tab -->
+                        <div class="tab-pane fade show active" id="womens-tab-pane" role="tabpanel" aria-labelledby="womens-tab">
+                          <div class="row g-4">
+                            <div class="col-lg-2">
+                              <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2" href="{{ route('second', ['shop', 'catalog-fashion'])}}">
+                                <span class="animate-target">Clothing</span>
+                              </a>
+                              <ul class="nav flex-column gap-2 mt-0">
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Shirts &amp; Tops</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Coats &amp; Outerwear</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Underwear</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Sweatshirts</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Dresses</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Swimwear</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">View all</a>
+                                </li>
+                              </ul>
+                            </div>
+                            <div class="col-lg-2">
+                              <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2" href="{{ route('second', ['shop', 'catalog-fashion'])}}">
+                                <span class="animate-target">Shoes</span>
+                              </a>
+                              <ul class="nav flex-column gap-2 mt-0">
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Boots</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Sandals</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Heels</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Loafers</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Slippers</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Oxfords</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">View all</a>
+                                </li>
+                              </ul>
+                            </div>
+                            <div class="col-lg-2">
+                              <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2" href="{{ route('second', ['shop', 'catalog-fashion'])}}">
+                                <span class="animate-target">Accessories</span>
+                              </a>
+                              <ul class="nav flex-column gap-2 mt-0">
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Handbags</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Eyewear</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Hats</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Watches</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Jewelry</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Belts</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">View all</a>
+                                </li>
+                              </ul>
+                            </div>
+                            <div class="col-lg-2">
+                              <div class="h6 mb-2">Specialty Sizes</div>
+                              <ul class="nav flex-column gap-2 mt-0">
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Plus Size</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Petite</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Wide Shoes</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Narrow Shoes</a>
+                                </li>
+                              </ul>
+                            </div>
+                            <div class="col-lg-4 d-none d-lg-block" data-bs-theme="light">
+                              <div class="position-relative d-flex flex-column h-100 rounded-4 overflow-hidden p-4">
+                                <div class="position-relative d-flex flex-column justify-content-between h-100 z-2 pt-xl-2 ps-xl-2">
+                                  <div class="h4 lh-base">Women's<br>Heels<br>Collection</div>
+                                  <div>
+                                    <a class="btn btn-sm btn-dark stretched-link" href="{{ route('second', ['shop', 'catalog-fashion'])}}" data-bs-theme="light">Shop now</a>
+                                  </div>
+                                </div>
+                                <img src="/img/mega-menu/fashion/01.jpg" class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rtl-flip" alt="Image">
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+
+                        <!-- Men's tab -->
+                        <div class="tab-pane fade" id="mens-tab-pane" role="tabpanel" aria-labelledby="mens-tab">
+                          <div class="row g-4">
+                            <div class="col-lg-2">
+                              <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2" href="{{ route('second', ['shop', 'catalog-fashion'])}}">
+                                <span class="animate-target">Clothing</span>
+                              </a>
+                              <ul class="nav flex-column gap-2 mt-0">
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">T-Shirts</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Jeans</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Coats &amp; Outerwear</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Sweatshirts</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Underwear</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Pants</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">View all</a>
+                                </li>
+                              </ul>
+                            </div>
+                            <div class="col-lg-2">
+                              <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2" href="{{ route('second', ['shop', 'catalog-fashion'])}}">
+                                <span class="animate-target">Shoes</span>
+                              </a>
+                              <ul class="nav flex-column gap-2 mt-0">
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Sneakers</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Oxfords</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Loafers</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Sandals</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Boots</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Slippers</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">View all</a>
+                                </li>
+                              </ul>
+                            </div>
+                            <div class="col-lg-2">
+                              <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2" href="{{ route('second', ['shop', 'catalog-fashion'])}}">
+                                <span class="animate-target">Accessories</span>
+                              </a>
+                              <ul class="nav flex-column gap-2 mt-0">
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Backpacks</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Sunglasses</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Bags</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Watches</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Hats</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Belts</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">View all</a>
+                                </li>
+                              </ul>
+                            </div>
+                            <div class="col-lg-2">
+                              <div class="h6 mb-2">Specialty Shops</div>
+                              <ul class="nav flex-column gap-2 mt-0">
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Active Wear</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Sports Clothing</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Athletic Shoes</a>
+                                </li>
+                              </ul>
+                            </div>
+                            <div class="col-lg-4 d-none d-lg-block" data-bs-theme="dark">
+                              <div class="position-relative d-flex flex-column h-100 rounded-4 overflow-hidden p-4">
+                                <div class="position-relative d-flex flex-column justify-content-between h-100 z-2 pt-xl-2 ps-xl-2">
+                                  <div class="h4 lh-base">Men's<br>Sunglasses<br>Offers</div>
+                                  <div>
+                                    <a class="btn btn-sm btn-dark stretched-link" href="{{ route('second', ['shop', 'catalog-fashion'])}}" data-bs-theme="dark">Shop now</a>
+                                  </div>
+                                </div>
+                                <img src="/img/mega-menu/fashion/02.jpg" class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rtl-flip" alt="Image">
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+
+                        <!-- Kids' tab -->
+                        <div class="tab-pane fade" id="kids-tab-pane" role="tabpanel" aria-labelledby="kids-tab">
+                          <div class="row g-4">
+                            <div class="col-lg-2">
+                              <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2" href="{{ route('second', ['shop', 'catalog-fashion'])}}">
+                                <span class="animate-target">Boys</span>
+                              </a>
+                              <ul class="nav flex-column gap-2 mt-0">
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Pants</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Sneakers</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Coats &amp; Outerwear</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Sweatshirts</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Boots</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Shorts</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">View all</a>
+                                </li>
+                              </ul>
+                            </div>
+                            <div class="col-lg-2">
+                              <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2" href="{{ route('second', ['shop', 'catalog-fashion'])}}">
+                                <span class="animate-target">Girls</span>
+                              </a>
+                              <ul class="nav flex-column gap-2 mt-0">
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Shirts &amp; Tops</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Dresses</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Sneakers</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Hoodies</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Sandals</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Coats &amp; Outerwear</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">View all</a>
+                                </li>
+                              </ul>
+                            </div>
+                            <div class="col-lg-2">
+                              <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2" href="{{ route('second', ['shop', 'catalog-fashion'])}}">
+                                <span class="animate-target">Accessories</span>
+                              </a>
+                              <ul class="nav flex-column gap-2 mt-0">
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Backpacks</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Gloves</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Shoe Laces</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Scarves</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Hats</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Belts</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">View all</a>
+                                </li>
+                              </ul>
+                            </div>
+                            <div class="col-lg-2">
+                              <div class="h6 mb-2">Shop by Age</div>
+                              <ul class="nav flex-column gap-2 mt-0">
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Infant</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Toddler</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Little Kid</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Big Kid</a>
+                                </li>
+                              </ul>
+                            </div>
+                            <div class="col-lg-4 d-none d-lg-block" data-bs-theme="light">
+                              <div class="position-relative d-flex flex-column h-100 rounded-4 overflow-hidden p-4">
+                                <div class="position-relative d-flex flex-column justify-content-between h-100 z-2 pt-xl-2 ps-xl-2">
+                                  <div class="h4 lh-base">Kids'<br>Spring<br>Collection</div>
+                                  <div>
+                                    <a class="btn btn-sm btn-dark stretched-link" href="{{ route('second', ['shop', 'catalog-fashion'])}}" data-bs-theme="light">Shop now</a>
+                                  </div>
+                                </div>
+                                <img src="/img/mega-menu/fashion/03.jpg" class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rtl-flip" alt="Image">
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Navbar nav -->
+                <ul class="navbar-nav position-relative me-xl-n5">
+                  <li class="nav-item dropdown pb-lg-2 me-lg-n1 me-xl-0">
+                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Home</a>
+                    <ul class="dropdown-menu" style="--cz-dropdown-spacer: .75rem">
+                      <li class="hover-effect-opacity px-2 mx-n2">
+                        <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'electronics']) }} class="fw-medium">Electronics Store</span>
+                          <span class="d-block fs-xs text-body-secondary">Megamenu + Hero slider</span>
+                          <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2" style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                            <img class="position-relative z-2 d-none-dark" src="/img/mega-menu/demo-preview/electronics-light.jpg" alt="Electronics Store">
+                            <img class="position-relative z-2 d-none d-block-dark" src="/img/mega-menu/demo-preview/electronics-dark.jpg" alt="Electronics Store">
+                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark" style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark" style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                          </div>
+                        </a>
+                      </li>
+                      <li class="hover-effect-opacity px-2 mx-n2">
+                        <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'fashion']) }}">
+                          <span class="fw-medium">Fashion Store v.1</span>
+                          <span class="d-block fs-xs text-body-secondary">Hero promo slider</span>
+                          <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2" style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                            <img class="position-relative z-2 d-none-dark" src="/img/mega-menu/demo-preview/fashion-1-light.jpg" alt="Fashion Store v.1">
+                            <img class="position-relative z-2 d-none d-block-dark" src="/img/mega-menu/demo-preview/fashion-1-dark.jpg" alt="Fashion Store v.1">
+                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark" style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark" style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                          </div>
+                        </a>
+                      </li>
+                      <li class="hover-effect-opacity px-2 mx-n2">
+                        <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'fashion']) }}">
+                          <span class="fw-medium">Fashion Store v.2</span>
+                          <span class="d-block fs-xs text-body-secondary">Hero banner with hotspots</span>
+                          <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2" style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                            <img class="position-relative z-2 d-none-dark" src="/img/mega-menu/demo-preview/fashion-2-light.jpg" alt="Fashion Store v.2">
+                            <img class="position-relative z-2 d-none d-block-dark" src="/img/mega-menu/demo-preview/fashion-2-dark.jpg" alt="Fashion Store v.2">
+                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark" style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark" style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                          </div>
+                        </a>
+                      </li>
+                      <li class="hover-effect-opacity px-2 mx-n2">
+                        <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'furniture']) }} class="fw-medium">Furniture Store</span>
+                          <span class="d-block fs-xs text-body-secondary">Fancy product carousel</span>
+                          <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2" style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                            <img class="position-relative z-2 d-none-dark" src="/img/mega-menu/demo-preview/furniture-light.jpg" alt="Furniture Store">
+                            <img class="position-relative z-2 d-none d-block-dark" src="/img/mega-menu/demo-preview/furniture-dark.jpg" alt="Furniture Store">
+                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark" style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark" style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                          </div>
+                        </a>
+                      </li>
+                      <li class="hover-effect-opacity px-2 mx-n2">
+                        <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'grocery']) }} class="fw-medium">Grocery Store</span>
+                          <span class="d-block fs-xs text-body-secondary">Hero slider + Category cards</span>
+                          <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2" style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                            <img class="position-relative z-2 d-none-dark" src="/img/mega-menu/demo-preview/grocery-light.jpg" alt="Grocery Store">
+                            <img class="position-relative z-2 d-none d-block-dark" src="/img/mega-menu/demo-preview/grocery-dark.jpg" alt="Grocery Store">
+                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark" style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark" style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                          </div>
+                        </a>
+                      </li>
+                      <li class="hover-effect-opacity px-2 mx-n2">
+                        <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'marketplace']) }} class="fw-medium">Marketplace</span>
+                          <span class="d-block fs-xs text-body-secondary">Multi-vendor, digital goods</span>
+                          <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2" style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                            <img class="position-relative z-2 d-none-dark" src="/img/mega-menu/demo-preview/marketplace-light.jpg" alt="Marketplace">
+                            <img class="position-relative z-2 d-none d-block-dark" src="/img/mega-menu/demo-preview/marketplace-dark.jpg" alt="Marketplace">
+                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark" style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark" style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                          </div>
+                        </a>
+                      </li>
+                      <li class="hover-effect-opacity px-2 mx-n2">
+                        <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'single']) }}">
+                          <span class="fw-medium">Single Product Store</span>
+                          <span class="d-block fs-xs text-body-secondary">Single product / mono brand</span>
+                          <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2" style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                            <img class="position-relative z-2 d-none-dark" src="/img/mega-menu/demo-preview/single-store-light.jpg" alt="Single Product Store">
+                            <img class="position-relative z-2 d-none d-block-dark" src="/img/mega-menu/demo-preview/single-store-dark.jpg" alt="Single Product Store">
+                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark" style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark" style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                          </div>
+                        </a>
+                      </li>
+                    </ul>
+                  </li>
+                  <li class="nav-item dropdown position-static pb-lg-2 me-lg-n1 me-xl-0">
+                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Shop</a>
+                    <div class="dropdown-menu p-4" style="--cz-dropdown-spacer: .75rem">
+                      <div class="d-flex flex-column flex-lg-row gap-4">
+                        <div style="min-width: 190px">
+                          <div class="h6 mb-2">Electronics Store</div>
+                          <ul class="nav flex-column gap-2 mt-0">
+                            <li class="d-flex w-100 pt-1">
+                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'categories-electronics']) }}">Categories Page</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Catalog with Side Filters</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'product-general-electronics']) }}">Product General Info</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'product-details-electronics']) }}">Product Details</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'product-reviews-electronics']) }}">Product Reviews</a>
+                            </li>
+                          </ul>
+                          <div class="h6 pt-4 mb-2">Fashion Store</div>
+                          <ul class="nav flex-column gap-2 mt-0">
+                            <li class="d-flex w-100 pt-1">
+                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion'])}}">Catalog with Side Filters</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'product-fashion']) }}">Product Page</a>
+                            </li>
+                          </ul>
+                          <div class="h6 pt-4 mb-2">Furniture Store</div>
+                          <ul class="nav flex-column gap-2 mt-0">
+                            <li class="d-flex w-100 pt-1">
+                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-furniture']) }}">Catalog with Top Filters</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'product-furniture']) }}">Product Page</a>
+                            </li>
+                          </ul>
+                        </div>
+                        <div style="min-width: 190px">
+                          <div class="h6 mb-2">Grocery Store</div>
+                          <ul class="nav flex-column gap-2 mt-0">
+                            <li class="d-flex w-100 pt-1">
+                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-grocery']) }}">Catalog with Side Filters</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'product-grocery']) }}">Product Page</a>
+                            </li>
+                          </ul>
+                          <div class="h6 pt-4 mb-2">Marketplace</div>
+                          <ul class="nav flex-column gap-2 mt-0">
+                            <li class="d-flex w-100 pt-1">
+                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-marketplace']) }}">Catalog with Top Filters</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'product-marketplace']) }}">Digital Product Page</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['checkout', 'marketplace']) }}">Cart / Checkout</a>
+                            </li>
+                          </ul>
+                        </div>
+                        <div style="min-width: 190px">
+                          <div class="h6 mb-2">Checkout v.1</div>
+                          <ul class="nav flex-column gap-2 mt-0">
+                            <li class="d-flex w-100 pt-1">
+                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['checkout', 'v1-cart']) }}">Shopping Cart</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['checkout', 'v1-delivery-1']) }}">Delivery Info (Step 1)</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['checkout', 'v1-delivery-2']) }}">Delivery Info (Step 2)</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['checkout', 'v1-shipping']) }}">Shipping Address</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['checkout', 'v1-payment']) }}">Payment</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['checkout', 'v1-thankyou']) }}">Thank You Page</a>
+                            </li>
+                          </ul>
+                          <div class="h6 pt-4 mb-2">Checkout v.2</div>
+                          <ul class="nav flex-column gap-2 mt-0">
+                            <li class="d-flex w-100 pt-1">
+                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['checkout', 'v2-cart']) }}">Shopping Cart</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['checkout', 'v2-delivery']) }}">Delivery Info</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['checkout', 'v2-pickup']) }}">Pickup from Store</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['checkout', 'v2-thankyou']) }}">Thank You Page</a>
+                            </li>
+                          </ul>
+                        </div>
+                      </div>
+                    </div>
+                  </li>
+                  <li class="nav-item dropdown pb-lg-2 me-lg-n1 me-xl-0">
+                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" data-bs-auto-close="outside" aria-expanded="false">Account</a>
+                    <ul class="dropdown-menu" style="--cz-dropdown-spacer: .75rem">
+                      <li class="dropend">
+                        <a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Auth Pages</a>
+                        <ul class="dropdown-menu">
+                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'signin']) }}">Sign In</a></li>
+                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'signup']) }}">Sign Up</a></li>
+                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'password-recovery']) }}">Password Recovery</a></li>
+                        </ul>
+                      </li>
+                      <li class="dropend">
+                        <a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Shop User</a>
+                        <ul class="dropdown-menu">
+                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'orders']) }}">Orders History</a></li>
+                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'wishlist']) }}">Wishlist</a></li>
+                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'payment']) }}">Payment Methods</a></li>
+                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'reviews']) }}">My Reviews</a></li>
+                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'info']) }}">Personal Info</a></li>
+                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'addresses']) }}">Addresses</a></li>
+                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'notifications']) }}">Notifications</a></li>
+                        </ul>
+                      </li>
+                      <li class="dropend">
+                        <a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Marketplace User</a>
+                        <ul class="dropdown-menu">
+                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-dashboard']) }}">Dashboard</a></li>
+                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-products']) }}">Products</a></li>
+                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-sales']) }}">Sales</a></li>
+                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-payouts']) }}">Payouts</a></li>
+                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-purchases']) }}">Purchases</a></li>
+                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-favorites']) }}">Favorites</a></li>
+                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-settings']) }}">Settings</a></li>
+                        </ul>
+                      </li>
+                    </ul>
+                  </li>
+                  <li class="nav-item dropdown pb-lg-2 me-lg-n1 me-xl-0">
+                    <a class="nav-link dropdown-toggle active" aria-current="page" href="#" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" data-bs-auto-close="outside" aria-expanded="false">Pages</a>
+                    <ul class="dropdown-menu" style="--cz-dropdown-spacer: .75rem">
+                      <li class="dropend">
+                        <a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">About</a>
+                        <ul class="dropdown-menu">
+                          <li><a class="dropdown-item" href="{{ route('second', ['about', 'v1']) }}">About v.1</a></li>
+                          <li><a class="dropdown-item" href="{{ route('second', ['about', 'v2']) }}">About v.2</a></li>
+                        </ul>
+                      </li>
+                      <li class="dropend">
+                        <a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Blog</a>
+                        <ul class="dropdown-menu">
+                          <li><a class="dropdown-item" href="{{ route('second', ['blog', 'grid-v1']) }}">Grid View v.1</a></li>
+                          <li><a class="dropdown-item" href="{{ route('second', ['blog', 'grid-v2']) }}">Grid View v.2</a></li>
+                          <li><a class="dropdown-item" href="{{ route('second', ['blog', 'list']) }}">List View</a></li>
+                          <li><a class="dropdown-item" href="{{ route('second', ['blog', 'single-v1']) }}">Single Post v.1</a></li>
+                          <li><a class="dropdown-item" href="{{ route('second', ['blog', 'single-v2']) }}">Single Post v.2</a></li>
+                        </ul>
+                      </li>
+                      <li class="dropend">
+                        <a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Contact</a>
+                        <ul class="dropdown-menu">
+                          <li><a class="dropdown-item" href="{{ route('second', ['contact', 'v1']) }}">Contact v.1</a></li>
+                          <li><a class="dropdown-item" href="{{ route('second', ['contact', 'v2']) }}">Contact v.2</a></li>
+                          <li><a class="dropdown-item" href="{{ route('second', ['contact', 'v3']) }}">Contact v.3</a></li>
+                        </ul>
+                      </li>
+                      <li class="dropend">
+                        <a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Help Center</a>
+                        <ul class="dropdown-menu">
+                          <li><a class="dropdown-item" href="{{ route('second', ['help', 'topics-v1']) }}">Help Topics v.1</a></li>
+                          <li><a class="dropdown-item" href="{{ route('second', ['help', 'topics-v2']) }}">Help Topics v.2</a></li>
+                          <li><a class="dropdown-item" href="{{ route('second', ['help', 'single-article-v1']) }}">Help Single Article v.1</a></li>
+                          <li><a class="dropdown-item" href="{{ route('second', ['help', 'single-article-v2']) }}">Help Single Article v.2</a></li>
+                        </ul>
+                      </li>
+                      <li class="dropend">
+                        <a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">404 Error</a>
+                        <ul class="dropdown-menu">
+                          <li><a class="dropdown-item" href="{{ route('second', ['404', 'electronics']) }}">404 Electronics</a></li>
+                          <li><a class="dropdown-item" href="{{ route('second', ['404', 'fashion']) }}">404 Fashion</a></li>
+                          <li><a class="dropdown-item" href="{{ route('second', ['404', 'furniture']) }}">404 Furniture</a></li>
+                          <li><a class="dropdown-item" href="{{ route('second', ['404', 'grocery']) }}">404 Grocery</a></li>
+                        </ul>
+                      </li>
+                      <li><a class="dropdown-item" href="{{ route('any', 'terms-and-conditions')}}">Terms &amp; Conditions</a></li>
+                    </ul>
+                  </li>                  
+                </ul>
+
+                <!-- Search toggle visible on screens > 991px wide (lg breakpoint) -->
+                <button type="button" class="btn btn-outline-secondary justify-content-start w-100 px-3 mb-lg-2 ms-3 d-none d-lg-inline-flex" style="max-width: 240px" data-bs-toggle="offcanvas" data-bs-target="#searchBox" aria-controls="searchBox">
+                  <i class="ci-search fs-base ms-n1 me-2"></i>
+                  <span class="text-body-tertiary fw-normal">Search</span>
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <!-- Account and Wishlist buttons visible on screens < 768px wide (md breakpoint) -->
+          <div class="offcanvas-header border-top px-0 py-3 mt-3 d-md-none">
+            <div class="nav nav-justified w-100">
+              <a class="nav-link border-end" href="{{ route('second', ['account', 'signin']) }}">
+                <i class="ci-user fs-lg opacity-60 me-2"></i>
+                Account
+              </a>
+              <a class="nav-link" href="#!">
+                <i class="ci-heart fs-lg opacity-60 me-2"></i>
+                Wishlist
+              </a>
+            </div>
+          </div>
+        </nav>
+      </div>
+    </header>
+
+    <!-- 404 error message -->
+    <section class="container pt-3">
+        <div class="position-relative py-5">
+            <div class="row position-relative align-items-center justify-content-center z-2 py-xl-4">
+                <!-- Illustration -->
+                <div class="col-10 col-sm-7 col-md-6 col-lg-5 col-xxl-4 offset-lg-1 offset-xxl-2 order-md-2">
+                    <svg fill="none" viewbox="0 0 447 420" width="447" xmlns="http://www.w3.org/2000/svg">
+                        <g filter="url(#filter0_f_2921_40054)" opacity="0.05">
+                            <ellipse cx="223.5" cy="371" fill="#181D25" rx="193.5" ry="19"></ellipse>
+                        </g>
+                        <path class="d-none-dark" d="M44 374V97H403V374H44Z" fill="url(#paint0_linear_2921_40054)"></path>
+                        <path class="d-none d-block-dark" d="M44 374V97H403V374H44Z" fill="#394557"></path>
+                        <path class="d-none-dark"
+                            d="M387.803 74.034H232.968H208.083H46.3354L67.0016 85L44 97L208.083 96.8446H232.968L403.002 97L380.002 85L387.803 74.034Z"
+                            fill="url(#paint1_linear_2921_40054)"></path>
+                        <path class="d-none d-block-dark"
+                            d="M387.803 74.034H232.968H208.083H46.3354L67.0016 85L44 97L208.083 96.8446H232.968L403.002 97L380.002 85L387.803 74.034Z"
+                            fill="url(#paint0_linear_6256_34079)"></path>
+                        <path class="d-none-dark" d="M67 85V97H44L67 85Z" fill="#cad0d9"></path>
+                        <path class="d-none-dark" d="M380 85V97H403L380 85Z" fill="#cad0d9"></path>
+                        <path class="d-none d-block-dark" d="M67 85V97H44L67 85Z" fill="#303947"></path>
+                        <path class="d-none d-block-dark" d="M380 85V97H403L380 85Z" fill="#303947"></path>
+                        <path class="text-body-emphasis"
+                            d="M168 119.5C168 122.342 166.176 124.757 163.636 125.641C165.819 174.426 193.987 199.96 221.691 200.876C236.17 201.355 250.811 195.175 262.062 181.776C272.468 169.385 280.03 150.739 281.707 125.371C279.515 124.327 278 122.09 278 119.5C278 115.91 280.91 113 284.5 113C288.09 113 291 115.91 291 119.5C291 122.686 288.707 125.337 285.681 125.893C283.926 151.781 276.159 171.209 265.125 184.349C253.127 198.637 237.33 205.395 221.559 204.874C191.136 203.868 161.872 176.02 159.637 125.729C156.955 124.928 155 122.442 155 119.5C155 115.91 157.91 113 161.5 113C165.09 113 168 115.91 168 119.5Z"
+                            fill="currentColor" style="animation-duration: 1.75s"></path>
+                        <g clip-path="url(#clip0_2921_40054)">
+                            <path class="animate-down-up text-body-emphasis" clip-rule="evenodd"
+                                d="M85.5309 99.8036L81.1914 83.1734L105.747 6.60145L132.18 -0.295868L149.245 65.1031L161.632 61.8707L166.048 78.7935L153.661 82.0258L158.242 99.5826L138.052 104.851L133.471 87.2943L85.5309 99.8036ZM117.606 28.0932L118.386 27.8896L129.445 70.2697L102.378 77.3324L102.175 76.5521L117.606 28.0932Z"
+                                fill="currentColor" fill-rule="evenodd"></path>
+                            <path class="animate-down-up text-body-emphasis" clip-rule="evenodd"
+                                d="M218.542 111.74C210 110.26 203.002 106.91 197.546 101.692C192.125 96.4801 188.428 89.6344 186.456 81.1554C184.517 72.682 184.507 62.8824 186.425 51.7565C188.305 40.6582 191.546 31.4775 196.15 24.2144C200.787 16.9569 206.516 11.8098 213.335 8.77286C220.192 5.70843 227.878 4.89721 236.393 6.3392C244.907 7.78118 251.881 11.0752 257.314 16.2213C262.78 21.3729 266.508 28.1386 268.497 36.5182C270.491 44.8647 270.532 54.5843 268.619 65.677C266.728 76.8416 263.456 86.1024 258.802 93.4592C254.181 100.822 248.453 106.071 241.617 109.207C234.781 112.344 227.089 113.188 218.542 111.74ZM221.563 93.9002C227.394 94.8877 232.545 92.7441 237.017 87.4693C241.489 82.1945 244.701 73.6905 246.654 61.957C247.962 54.2379 248.255 47.6761 247.534 42.2717C246.847 36.873 245.281 32.6375 242.836 29.5652C240.425 26.4986 237.281 24.6371 233.405 23.9806C227.607 22.9987 222.478 25.112 218.018 30.3205C213.557 35.529 210.331 43.9115 208.34 55.4681C207.016 63.2866 206.689 69.945 207.36 75.4431C208.069 80.9138 209.643 85.2018 212.082 88.3071C214.527 91.3794 217.687 93.2437 221.563 93.9002Z"
+                                fill="currentColor" fill-rule="evenodd"
+                                style="animation-duration: 3s; animation-delay: .35s"></path>
+                            <path class="animate-down-up text-body-emphasis" clip-rule="evenodd"
+                                d="M290.23 71.3761L288.056 88.425L337.203 94.6927L334.908 112.692L355.606 115.331L357.902 97.3324L370.601 98.9519L372.813 81.603L360.114 79.9835L368.664 12.9377L341.566 9.4819L290.23 71.3761ZM345.356 33.9476L344.556 33.8455L312.169 73.0561L312.067 73.8561L339.815 77.3948L345.356 33.9476Z"
+                                fill="currentColor" fill-rule="evenodd"
+                                style="animation-duration: 3s; animation-delay: .75s"></path>
+                        </g>
+                        <defs>
+                            <filter color-interpolation-filters="sRGB" filterunits="userSpaceOnUse" height="98"
+                                id="filter0_f_2921_40054" width="447" x="0" y="322">
+                                <feflood flood-opacity="0" result="BackgroundImageFix"></feflood>
+                                <feblend in="SourceGraphic" in2="BackgroundImageFix" mode="normal" result="shape">
+                                </feblend>
+                                <fegaussianblur result="effect1_foregroundBlur_2921_40054" stddeviation="15">
+                                </fegaussianblur>
+                            </filter>
+                            <lineargradient gradientunits="userSpaceOnUse" id="paint0_linear_2921_40054" x1="195"
+                                x2="275" y1="125" y2="338">
+                                <stop offset="0" stop-color="#ffffff"></stop>
+                                <stop offset="1" stop-color="#eff5fd"></stop>
+                            </lineargradient>
+                            <lineargradient gradientunits="userSpaceOnUse" id="paint1_linear_2921_40054" x1="229.5"
+                                x2="229.5" y1="101.5" y2="74">
+                                <stop offset="0" stop-color="#9ca3af"></stop>
+                                <stop offset="1" stop-color="#d2d4d9"></stop>
+                            </lineargradient>
+                            <lineargradient gradientunits="userSpaceOnUse" id="paint0_linear_6256_34079" x1="229.5"
+                                x2="229.5" y1="101.5" y2="74">
+                                <stop offset="0" stop-color="#21262f"></stop>
+                                <stop offset="1" stop-color="#374150"></stop>
+                            </lineargradient>
+                            <clippath id="clip0_2921_40054">
+                                <rect fill="white" height="97" transform="translate(44)" width="359"></rect>
+                            </clippath>
+                        </defs>
+                    </svg>
+                </div>
+                <!-- Text -->
+                <div class="col-md-5 col-xxl-4 offset-md-1 order-md-1">
+                    <div class="text-center text-md-start px-4 px-sm-5 px-md-0">
+                        <h1 class="mb-sm-4">We lost that page...</h1>
+                        <p class="pb-2 pb-sm-3 pb-md-0 mb-4 mb-md-5">The page you are looking for was moved, removed or
+                            might never existed. Here some helpful links:</p>
+                        <div class="position-relative">
+                            <i class="ci-search position-absolute top-50 start-0 translate-middle-y fs-lg ms-3"></i>
+                            <input aria-label="Search" class="form-control form-control-lg form-icon-start"
+                                placeholder="What are you looking for..." type="search" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <span class="position-absolute top-0 start-0 w-100 h-100 rounded-5 d-none-dark rtl-flip"
+                style="background: linear-gradient(124deg, #e2daec -29.7%, #e4eefd 65.5%)"></span>
+            <span class="position-absolute top-0 start-0 w-100 h-100 rounded-5 d-none d-block-dark rtl-flip"
+                style="background: linear-gradient(124deg, #37343b -29.7%, #222a36 65.5%)"></span>
+        </div>
+    </section>
+    <!-- Links -->
+    <section class="container pt-4">
+        <div class="row row-cols-1 row-cols-md-3 g-3 g-lg-4">
+            <div class="col">
+                <div class="nav flex-column position-relative h-100 border rounded-5 p-4 pt-3">
+                    <a class="nav-link animate-underline stretched-link text-body-emphasis fw-semibold px-0 mb-1"
+                        href="{{ route('second', ['home', 'fashion']) }}">
+                        <span class="animate-target">Go to homepage</span>
+                        <i class="ci-chevron-right fs-base ms-1"></i>
+                    </a>
+                    <span class="fs-sm">Continue shopping from the homepage</span>
+                </div>
+            </div>
+            <div class="col">
+                <div class="nav flex-column position-relative h-100 border rounded-5 p-4 pt-3">
+                    <a class="nav-link animate-underline stretched-link text-body-emphasis fw-semibold px-0 mb-1"
+                        href="{{ route('second', ['shop', 'catalog-fashion'])}}">
+                        <span class="animate-target">Trending products</span>
+                        <i class="ci-chevron-right fs-base ms-1"></i>
+                    </a>
+                    <span class="fs-sm">Check out the trending products</span>
+                </div>
+            </div>
+            <div class="col">
+                <div class="nav flex-column position-relative h-100 border rounded-5 p-4 pt-3">
+                    <a class="nav-link animate-underline stretched-link text-body-emphasis fw-semibold px-0 mb-1"
+                        href="#!">
+                        <span class="animate-target">Help and support</span>
+                        <i class="ci-chevron-right fs-base ms-1"></i>
+                    </a>
+                    <span class="fs-sm">Our friendly team here to help</span>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Page footer -->
+    <footer class="footer pt-5 pb-4 mt-2 mt-md-3 mt-lg-4 mt-xl-5">
+      <div class="container text-center pb-sm-2 pb-md-3">
+        <p class="fs-sm mb-0">
+          &copy; All rights reserved. Made by <span class="animate-underline"><a class="animate-target text-dark-emphasis fw-medium text-decoration-none" href="https://coderthemes.com/" target="_blank" rel="noreferrer">Coderthemes</a></span>
+        </p>
+      </div>
+    </footer>
+    
+@endsection
+
+@section('scripts')
+@endsection
diff --git a/resources/views/404/furniture.blade.php b/resources/views/404/furniture.blade.php
new file mode 100644
index 0000000..0415a1d
--- /dev/null
+++ b/resources/views/404/furniture.blade.php
@@ -0,0 +1,103 @@
+@extends('layouts.base', ['title' => 'Furniture Store - 404 Error'])
+
+@section('content')
+    <!-- Shopping cart offcanvas (Empty state) -->
+    <div class="offcanvas offcanvas-end pb-sm-2 px-sm-2" id="shoppingCart" tabindex="-1" aria-labelledby="shoppingCartLabel"
+        style="width: 500px">
+        <div class="offcanvas-header py-3 pt-lg-4">
+            <h4 class="offcanvas-title" id="shoppingCartLabel">Shopping cart</h4>
+            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+        </div>
+        <div class="offcanvas-body text-center">
+            <svg class="d-block mx-auto mb-4" xmlns="http://www.w3.org/2000/svg" width="60" viewBox="0 0 29.5 30">
+                <path class="text-body-tertiary"
+                    d="M17.8 4c.4 0 .8-.3.8-.8v-2c0-.4-.3-.8-.8-.8-.4 0-.8.3-.8.8v2c0 .4.3.8.8.8zm3.2.6c.4.2.8 0 1-.4l.4-.9c.2-.4 0-.8-.4-1s-.8 0-1 .4l-.4.9c-.2.4 0 .9.4 1zm-7.5-.4c.2.4.6.6 1 .4s.6-.6.4-1l-.4-.9c-.2-.4-.6-.6-1-.4s-.6.6-.4 1l.4.9z"
+                    fill="currentColor" />
+                <path class="text-body-emphasis"
+                    d="M10.7 24.5c-1.5 0-2.8 1.2-2.8 2.8S9.2 30 10.7 30s2.8-1.2 2.8-2.8-1.2-2.7-2.8-2.7zm0 4c-.7 0-1.2-.6-1.2-1.2s.6-1.2 1.2-1.2 1.2.6 1.2 1.2-.5 1.2-1.2 1.2zm11.1-4c-1.5 0-2.8 1.2-2.8 2.8a2.73 2.73 0 0 0 2.8 2.8 2.73 2.73 0 0 0 2.8-2.8c0-1.6-1.3-2.8-2.8-2.8zm0 4c-.7 0-1.2-.6-1.2-1.2s.6-1.2 1.2-1.2 1.2.6 1.2 1.2-.6 1.2-1.2 1.2zM8.7 18h16c.3 0 .6-.2.7-.5l4-10c.2-.5-.2-1-.7-1H9.3c-.4 0-.8.3-.8.8s.4.7.8.7h18.3l-3.4 8.5H9.3L5.5 1C5.4.7 5.1.5 4.8.5h-4c-.5 0-.8.3-.8.7s.3.8.8.8h3.4l3.7 14.6a3.24 3.24 0 0 0-2.3 3.1C5.5 21.5 7 23 8.7 23h16c.4 0 .8-.3.8-.8s-.3-.8-.8-.8h-16a1.79 1.79 0 0 1-1.8-1.8c0-1 .9-1.6 1.8-1.6z"
+                    fill="currentColor" />
+            </svg>
+            <h6 class="mb-2">Your shopping cart is currently empty!</h6>
+            <p class="fs-sm mb-4">Explore our wide range of products and add items to your cart to proceed with your
+                purchase.</p>
+            <a class="btn btn-dark rounded-pill" href="{{ route('second', ['shop', 'catalog-furniture']) }}">Continue shopping</a>
+        </div>
+    </div>
+
+    @include('layouts.partials/navbar2')
+
+    <div class="container position-relative z-2 flex-grow-1">
+        <div class="row row-cols-1 row-cols-md-2 g-0 h-100">
+            <!-- 404 error page content -->
+            <div class="col d-flex flex-column align-items-center pt-5 pb-4 pb-sm-5 pe-md-5">
+                <div class="mt-auto" style="max-width: 480px">
+                    <svg class="text-dark-emphasis mb-4" fill="none" height="56" viewbox="0 0 188 56"
+                        width="188" xmlns="http://www.w3.org/2000/svg">
+                        <path
+                            d="M38.768 54.984c-.677.82-1.76 1.185-2.795.941s-1.842-1.054-2.081-2.09l-.105-22.102H14.933c-2.062 0-3.733-1.671-3.733-3.733V.933c0-.515.418-.933.933-.933h2.8c.49-.001.897.376.933.865l1.524 20.602h16.618L40.169.668c.118-.397.483-.67.898-.669h2.8c.283 0 .551.128.729.349s.245.51.183.787L39.22 26.149l.133 26.527c.16.819-.054 1.665-.585 2.308zM14.067 1.867h-1V25.2h2.728L14.067 1.867zm3.463 21.467l.138 1.867h15.236l.553-1.867H17.529zM41.764 1.867l-6.16 20.795-.753 2.538h2.669l5.185-23.333h-.941zm-4.241 51.164l-.026-25.964h-24.43V28c0 1.031.836 1.867 1.867 1.867h19.6c.435 0 .813.3.91.723l.267 22.825c.119.486.602.79 1.092.686s.809-.577.72-1.07z"
+                            fill="currentColor"></path>
+                        <path
+                            d="M171.768 54.984c-.677.82-1.761 1.185-2.796.941s-1.841-1.054-2.081-2.09l-1.104-22.102h-18.854c-2.061 0-3.733-1.671-3.733-3.733V.933c0-.515.418-.933.933-.933h2.8c.49-.001.898.376.934.865l1.523 20.602h16.619l6.16-20.798c.118-.397.483-.67.898-.669h2.8a.93.93 0 0 1 .911 1.136l-5.559 25.013 1.134 26.527c.16.819-.054 1.665-.585 2.308zM146.067 1.867h-1V25.2h2.728l-1.728-23.333zm3.462 21.467l.138 1.867h15.236l.553-1.867h-15.927zm24.235-21.467l-6.16 20.795-.753 2.538h2.669l5.185-23.333h-.941zm-3.241 51.164l-1.026-25.964h-24.43V28c0 1.031.836 1.867 1.866 1.867h19.6c.435 0 .813.3.91.723l1.267 22.825c.119.486.603.79 1.092.686s.809-.577.721-1.07z"
+                            fill="currentColor"></path>
+                        <g stroke="currentColor" stroke-width="2">
+                            <circle cx="94" cy="28" r="27"></circle>
+                            <circle cx="94" cy="28" r="22"></circle>
+                        </g>
+                        <circle cx="94" cy="28" fill="currentColor" r="2"></circle>
+                    </svg>
+                    <h1 class="h2 mb-sm-4">We lost that page ...</h1>
+                    <p class="pb-2 pb-sm-3 pb-md-0 mb-4 mb-md-5">The page you are looking for was moved, removed or might
+                        never existed. Here some helpful links:</p>
+                    <div class="position-relative">
+                        <i class="ci-search position-absolute top-50 start-0 translate-middle-y fs-lg ms-3"></i>
+                        <input aria-label="Search" class="form-control form-control-lg form-icon-start rounded-pill"
+                            placeholder="What are you looking for..." type="search" />
+                    </div>
+                    <ul class="list-unstyled gap-4 pt-4 pt-sm-5 mt-3 mt-sm-0 mt-xl-2 mb-0">
+                        <li class="nav flex-column mt-xl-2">
+                            <a class="nav-link animate-underline text-body-emphasis fw-semibold px-0 mb-1"
+                                href="{{ route('second', ['home', 'furniture']) }}">
+                                <span class="animate-target">Go to homepage</span>
+                                <i class="ci-chevron-right fs-base ms-1"></i>
+                            </a>
+                            <span class="fs-sm">Continue shopping from the homepage</span>
+                        </li>
+                        <li class="nav flex-column mt-xl-2">
+                            <a class="nav-link animate-underline text-body-emphasis fw-semibold px-0 mb-1"
+                                href="{{ route('second', ['shop', 'catalog-furniture']) }}">
+                                <span class="animate-target">Trending products</span>
+                                <i class="ci-chevron-right fs-base ms-1"></i>
+                            </a>
+                            <span class="fs-sm">Check out the trending products</span>
+                        </li>
+                        <li class="nav flex-column mt-xl-2">
+                            <a class="nav-link animate-underline text-body-emphasis fw-semibold px-0 mb-1" href="#!">
+                                <span class="animate-target">Help and support</span>
+                                <i class="ci-chevron-right fs-base ms-1"></i>
+                            </a>
+                            <span class="fs-sm">Our friendly team here to help</span>
+                        </li>
+                    </ul>
+                </div>
+                <!-- Footer -->
+                <footer class="w-100 mt-auto pt-5 pb-xl-2" style="max-width: 480px">
+                    <p class="fs-xs mb-0">
+                        © All rights reserved. Made by <span class="animate-underline"><a
+                                class="animate-target text-dark-emphasis fw-medium text-decoration-none"
+                                href="https://coderthemes.com/" rel="noreferrer" target="_blank">Coderthemes</a></span>
+                    </p>
+                </footer>
+            </div>
+            <!-- Cover image visible on screens > 768px wide (md breakpoint) -->
+            <div class="col d-none d-md-flex align-items-center justify-content-end">
+                <img alt="Chair" class="d-block px-4 px-lg-0 me-n4" src="/img/404/furniture.png" width="416" />
+            </div>
+        </div>
+    </div>
+    <!-- Background -->
+
+    <div class="position-absolute top-0 end-0 w-50 h-100 bg-body-tertiary d-none d-md-block"></div>    
+@endsection
+
+@section('scripts')
+@endsection
diff --git a/resources/views/404/grocery.blade.php b/resources/views/404/grocery.blade.php
new file mode 100644
index 0000000..cc73a67
--- /dev/null
+++ b/resources/views/404/grocery.blade.php
@@ -0,0 +1,353 @@
+@extends('layouts.base', ['title' => 'Grocery Store - 404 Error'])
+
+@section('content')
+    @include('layouts.partials/offcanvas2')
+
+    <!-- Delivey options offcanvas -->
+    <div class="offcanvas offcanvas-end pb-sm-2 px-sm-2" id="deliveryOptions" tabindex="-1"
+        aria-labelledby="deliveryOptionsLabel" style="width: 500px">
+
+        <!-- Header with nav tabs -->
+        <div class="offcanvas-header flex-column align-items-start py-3 pt-lg-4">
+            <div class="d-flex align-items-center justify-content-between w-100 pb-xl-1 mb-4">
+                <h4 class="offcanvas-title" id="deliveryOptionsLabel">Delivery options</h4>
+                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+            </div>
+            <ul class="nav nav-pills nav-justified w-100" role="tablist">
+                <li class="nav-item" role="presentation">
+                    <button type="button" class="nav-link active" id="delivery-tab" data-bs-toggle="tab"
+                        data-bs-target="#delivery-tab-pane" role="tab" aria-controls="delivery-tab-pane"
+                        aria-selected="true">
+                        <i class="ci-shopping-bag fs-base ms-n1 me-2"></i>
+                        Delivery
+                    </button>
+                </li>
+                <li class="nav-item" role="presentation">
+                    <button type="button" class="nav-link" id="pickup-tab" data-bs-toggle="tab"
+                        data-bs-target="#pickup-tab-pane" role="tab" aria-controls="pickup-tab-pane"
+                        aria-selected="false">
+                        <i class="ci-box fs-base ms-n1 me-2"></i>
+                        Pickup
+                    </button>
+                </li>
+            </ul>
+        </div>
+
+        <div class="offcanvas-body tab-content py-2 py-sm-3">
+
+            <!-- Delivery tab -->
+            <div class="tab-pane fade show active" id="delivery-tab-pane" role="tabpanel"
+                aria-labelledby="delivery-tab">
+
+                <!-- Address options collapse -->
+                <div class="collapse delivery-address show" id="deliveryAddressOptions">
+                    <div class="mt-n3">
+                        <div class="form-check border-bottom py-4 m-0">
+                            <input type="radio" class="form-check-input" id="address-1" name="delivery-address"
+                                checked>
+                            <label for="address-1" class="form-check-label text-dark-emphasis fw-semibold">567 Cherry Lane
+                                Apt B12 Sacramento, 95829</label>
+                        </div>
+                        <div class="form-check border-bottom py-4 m-0">
+                            <input type="radio" class="form-check-input" id="address-2" name="delivery-address">
+                            <div class="d-flex w-100">
+                                <label for="address-2" class="form-check-label text-dark-emphasis me-3">1901 Thornridge
+                                    Cir.
+                                    Shiloh, Hawaii, 81063</label>
+                                <button type="button" class="btn-close fs-sm ms-auto" data-bs-toggle="tooltip"
+                                    data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
+                                    aria-label="Remove"></button>
+                            </div>
+                        </div>
+                        <div class="form-check border-bottom py-4 m-0">
+                            <input type="radio" class="form-check-input" id="address-3" name="delivery-address">
+                            <div class="d-flex w-100">
+                                <label for="address-3" class="form-check-label text-dark-emphasis me-3">3517 W. Gray St.
+                                    Utica, Pennsylvania, 57867</label>
+                                <button type="button" class="btn-close fs-sm ms-auto" data-bs-toggle="tooltip"
+                                    data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
+                                    aria-label="Remove"></button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Add new address collapse -->
+                <div class="collapse delivery-address" id="deliveryAddressAdd">
+                    <div class="nav mb-4">
+                        <a class="nav-link animate-underline p-0" href=".delivery-address" data-bs-toggle="collapse"
+                            aria-expanded="true" aria-controls="deliveryAddressOptions deliveryAddressAdd">
+                            <i class="ci-chevron-left fs-lg ms-n1 me-1"></i>
+                            <span class="animate-target">Back to my addresses</span>
+                        </a>
+                    </div>
+                    <div class="d-flex align-items-center justify-content-between mb-3 mb-lg-4">
+                        <h5 class="h6 mb-0 me-3">Add an address to start ordering</h5>
+                        <a class="btn btn-sm btn-outline-primary rounded-pill" href="#!">
+                            <i class="ci-map-pin fs-base ms-n1 me-1"></i>
+                            Find on map
+                        </a>
+                    </div>
+                    <div class="mb-3 mb-lg-4">
+                        <label class="form-label">State *</label>
+                        <select class="form-select form-select-lg rounded-pill"
+                            data-select='{
+                "classNames": {
+                  "containerInner": ["form-select", "form-select-lg", "rounded-pill"]
+                }
+              }'
+                            aria-label="Large pill select">
+                            <option value="">Select state</option>
+                            <option value="Arizona">Arizona</option>
+                            <option value="California">California</option>
+                            <option value="Montana">Montana</option>
+                            <option value="Nevada">Nevada</option>
+                            <option value="New Mexico">New Mexico</option>
+                            <option value="Texas">Texas</option>
+                        </select>
+                    </div>
+                    <div class="mb-3 mb-lg-4">
+                        <label for="my-postcode" class="form-label">Postcode *</label>
+                        <input type="text" class="form-control form-control-lg rounded-pill" id="my-postcode">
+                    </div>
+                    <div class="mb-3 mb-lg-4">
+                        <label class="form-label">City *</label>
+                        <select class="form-select form-select-lg rounded-pill"
+                            data-select='{
+                "classNames": {
+                  "containerInner": ["form-select", "form-select-lg", "rounded-pill"]
+                }
+              }'
+                            aria-label="Large pill select">
+                            <option value="">Select city</option>
+                            <option value="Austin">Austin</option>
+                            <option value="Helena">Helena</option>
+                            <option value="Sacramento">Sacramento</option>
+                            <option value="Santa Fe">Santa Fe</option>
+                            <option value="Las Vegas">Las Vegas</option>
+                            <option value="Phoenix">Phoenix</option>
+                        </select>
+                    </div>
+                    <label for="my-address" class="form-label">Street address *</label>
+                    <input type="text" class="form-control form-control-lg rounded-pill" id="my-address">
+                </div>
+
+                <!-- Add address collapse toggle -->
+                <div class="nav">
+                    <a class="nav-link hiding-collapse-toggle animate-underline collapsed px-0 mt-4"
+                        href=".delivery-address" data-bs-toggle="collapse" aria-expanded="false"
+                        aria-controls="deliveryAddressOptions deliveryAddressAdd">
+                        <span class="animate-target">Add delivery address</span>
+                        <i class="ci-plus fs-base ms-1"></i>
+                    </a>
+                </div>
+            </div>
+
+            <!-- Pickup tab -->
+            <div class="tab-pane fade" id="pickup-tab-pane" role="tabpanel" aria-labelledby="pickup-tab">
+
+                <!-- Pickup store options collapse -->
+                <div class="collapse pickup-options show" id="pickupStoreOptions">
+                    <div class="mt-n3">
+                        <div class="form-check border-bottom py-4 m-0">
+                            <input type="radio" class="form-check-input" id="store-1" name="pickup-store" checked>
+                            <div>
+                                <div class="d-flex w-100 pb-2 mb-1">
+                                    <label for="store-1"
+                                        class="form-check-label text-dark-emphasis fw-semibold me-3">Sacramento
+                                        Supercenter</label>
+                                    <button type="button" class="btn-close fs-sm ms-auto" data-bs-toggle="tooltip"
+                                        data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
+                                        aria-label="Remove"></button>
+                                </div>
+                                <div class="fs-xs mb-2">8270 Delta Shores Cir S, Sacramento, CA 95832</div>
+                                <div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">07:00 - 22:00</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="form-check border-bottom py-4 m-0">
+                            <input type="radio" class="form-check-input" id="store-2" name="pickup-store">
+                            <div>
+                                <div class="d-flex w-100 pb-2 mb-1">
+                                    <label for="store-2"
+                                        class="form-check-label text-dark-emphasis fw-semibold me-3">West Sacramento
+                                        Supercenter</label>
+                                    <button type="button" class="btn-close fs-sm ms-auto" data-bs-toggle="tooltip"
+                                        data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
+                                        aria-label="Remove"></button>
+                                </div>
+                                <div class="fs-xs mb-2">755 Riverpoint Ct, West Sacramento, CA 95605</div>
+                                <div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">07:00 - 21:00</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="form-check border-bottom py-4 m-0">
+                            <input type="radio" class="form-check-input" id="store-3" name="pickup-store">
+                            <div>
+                                <div class="d-flex w-100 pb-2 mb-1">
+                                    <label for="store-3"
+                                        class="form-check-label text-dark-emphasis fw-semibold me-3">Rancho Cordova
+                                        Supercenter</label>
+                                    <button type="button" class="btn-close fs-sm ms-auto" data-bs-toggle="tooltip"
+                                        data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
+                                        aria-label="Remove"></button>
+                                </div>
+                                <div class="fs-xs mb-2">10655 Folsom Blvd, Rancho Cordova, CA 95670</div>
+                                <div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">08:00 - 23:00</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Add new pickup store collapse -->
+                <div class="collapse pickup-options" id="pickupStoreAdd">
+                    <div class="nav mb-4">
+                        <a class="nav-link animate-underline p-0" href=".pickup-options" data-bs-toggle="collapse"
+                            aria-expanded="true" aria-controls="pickupStoreOptions pickupStoreAdd">
+                            <i class="ci-chevron-left fs-lg ms-n1 me-1"></i>
+                            <span class="animate-target">Back to my stores</span>
+                        </a>
+                    </div>
+                    <div class="d-flex align-items-center justify-content-between mb-3 mb-lg-4">
+                        <h5 class="h6 mb-0 me-3">Select a suitable store</h5>
+                        <a class="btn btn-sm btn-outline-primary rounded-pill" href="#!">
+                            <i class="ci-map-pin fs-base ms-n1 me-1"></i>
+                            Find on map
+                        </a>
+                    </div>
+                    <div class="mb-3 mb-lg-4">
+                        <label class="form-label">State *</label>
+                        <select class="form-select form-select-lg rounded-pill"
+                            data-select='{
+                "classNames": {
+                  "containerInner": ["form-select", "form-select-lg", "rounded-pill"]
+                }
+              }'
+                            aria-label="Large pill select">
+                            <option value="">Select state</option>
+                            <option value="Arizona">Arizona</option>
+                            <option value="California" selected>California</option>
+                            <option value="Montana">Montana</option>
+                            <option value="Nevada">Nevada</option>
+                            <option value="New Mexico">New Mexico</option>
+                            <option value="Texas">Texas</option>
+                        </select>
+                    </div>
+                    <div class="mb-4">
+                        <label class="form-label">City *</label>
+                        <select class="form-select form-select-lg rounded-pill"
+                            data-select='{
+                "classNames": {
+                  "containerInner": ["form-select", "form-select-lg", "rounded-pill"]
+                }
+              }'
+                            aria-label="Large pill select">
+                            <option value="">Select city</option>
+                            <option value="Austin">Austin</option>
+                            <option value="Helena">Helena</option>
+                            <option value="Sacramento" selected>Sacramento</option>
+                            <option value="Santa Fe">Santa Fe</option>
+                            <option value="Las Vegas">Las Vegas</option>
+                            <option value="Phoenix">Phoenix</option>
+                        </select>
+                    </div>
+                    <div class="fs-xs fw-medium text-uppercase text-body-secondary">Found stores:</div>
+                    <div class="form-check border-bottom py-4 m-0">
+                        <input type="radio" class="form-check-input" id="store-4" name="found-store">
+                        <div>
+                            <label for="store-4"
+                                class="form-check-label text-dark-emphasis fw-semibold pb-2 mb-1">Sacramento
+                                Supercenter</label>
+                            <div class="fs-xs mb-2">8270 Delta Shores Cir S, Sacramento, CA 95832</div>
+                            <div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">07:00 - 22:00</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="form-check border-bottom py-4 m-0">
+                        <input type="radio" class="form-check-input" id="store-5" name="found-store">
+                        <div>
+                            <label for="store-5" class="form-check-label text-dark-emphasis fw-semibold pb-2 mb-1">West
+                                Sacramento Supercenter</label>
+                            <div class="fs-xs mb-2">755 Riverpoint Ct, West Sacramento, CA 95605</div>
+                            <div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">07:00 - 21:00</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="form-check border-bottom py-4 m-0">
+                        <input type="radio" class="form-check-input" id="store-6" name="found-store">
+                        <div>
+                            <label for="store-6" class="form-check-label text-dark-emphasis fw-semibold pb-2 mb-1">Rancho
+                                Cordova Supercenter</label>
+                            <div class="fs-xs mb-2">10655 Folsom Blvd, Rancho Cordova, CA 95670</div>
+                            <div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">08:00 - 23:00</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Add address collapse toggle -->
+                <div class="nav">
+                    <a class="nav-link hiding-collapse-toggle animate-underline collapsed px-0 mt-4"
+                        href=".pickup-options" data-bs-toggle="collapse" aria-expanded="false"
+                        aria-controls="pickupStoreOptions pickupStoreAdd">
+                        <span class="animate-target">Add store address</span>
+                        <i class="ci-plus fs-base ms-1"></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+
+        <!-- Footer -->
+        <div class="offcanvas-header">
+            <button type="button" class="btn btn-lg btn-primary w-100 rounded-pill">Confirm address</button>
+        </div>
+    </div>
+
+    <!-- Site menu offcanvas -->
+    @include('layouts.partials/menu-offcanvas')
+
+    @include('layouts.partials/checkout-navbar')
+
+    <!-- Page content -->
+    <main class="content-wrapper position-relative d-flex align-items-center justify-content-center overflow-hidden">
+        <section class="container position-relative z-2 py-5">
+            <div class="text-center px-2 px-sm-0 mx-auto" style="max-width: 636px">
+                <div class="position-relative mb-4 mb-sm-5 mx-auto" style="max-width: 542px">
+                    <div class="ratio ratio-1x1 position-absolute top-50 start-0 translate-middle-y">
+                        <img src="/img/404/grocery.png" class="animate-spin" alt="Lemon">
+                    </div>
+                    <svg class="text-dark-emphasis" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 542 182"
+                        fill="currentColor">
+                        <path
+                            d="M150 117h-19.8V2c0-1.1-.9-2-2-2H76c-.7 0-1.3.4-1.7.9L.7 116.9c-.2.3-.3.7-.3 1.1v31.7c0 1.1.9 2 2 2h85.8v28.2c0 1.1.9 2 2 2h38c1.1 0 2-.9 2-2v-28.2H150c1.1 0 2-.9 2-2V119c0-1.1-.9-2-2-2zm-60.9 0H45.2a1.11 1.11 0 0 1-1.1-1.1c0-.2.1-.4.2-.6l42.8-67.9c.4-.6 1-.9 1.7-.9h.3V117zm450.5 0h-19.8V2c0-1.1-.9-2-2-2h-52.2c-.7 0-1.3.4-1.7.9l-73.6 115.9c-.2.3-.3.7-.3 1.1v31.7c0 1.1.9 2 2 2h85.8v28.2c0 1.1.9 2 2 2h38c1.1 0 2-.9 2-2v-28.2h19.8c1.1 0 2-.9 2-2V119c0-1.1-.9-2-2-2zm-104.8 0a1.11 1.11 0 0 1-1.1-1.1c0-.2.1-.4.2-.6l42.8-67.9c.4-.6 1-.9 1.7-.9h.3V117h-43.9z" />
+                    </svg>
+                </div>
+                <div class="position-relative z-2">
+                    <h1 class="h3 pt-4">Whoops! That page is missing...</h1>
+                    <p class="pb-2 pb-sm-3 pb-md-0 mb-4 mb-md-5">The page you are looking for was moved, removed or might
+                        never existed.</p>
+                    <a class="btn btn-lg btn-outline-dark rounded-pill" href="{{ route('second', ['home', 'grocery']) }}">Go to homepage</a>
+                </div>
+            </div>
+        </section>
+        <img src="/img/404/grocery-bg-1.png"
+            class="animate-up-down position-absolute top-0 start-0 w-100 h-100 object-fit-cover" alt="Background image">
+        <img src="/img/404/grocery-bg-2.png"
+            class="animate-down-up position-absolute top-0 start-0 w-100 h-100 object-fit-cover" alt="Background image">
+    </main>
+
+    <!-- Page footer -->
+    <footer class="footer pb-4">
+        <div class="container text-center pb-sm-2 pb-md-3">
+            <p class="fs-sm mb-0">
+                &copy; All rights reserved. Made by <span class="animate-underline"><a
+                        class="animate-target text-dark-emphasis fw-medium text-decoration-none"
+                        href="https://coderthemes.com/" target="_blank" rel="noreferrer">Coderthemes</a></span>
+            </p>
+        </div>
+    </footer>
+@endsection
+
+@section('scripts')
+@endsection
diff --git a/resources/views/about/v1.blade.php b/resources/views/about/v1.blade.php
new file mode 100644
index 0000000..6cadd13
--- /dev/null
+++ b/resources/views/about/v1.blade.php
@@ -0,0 +1,538 @@
+@extends('layouts.landing', ['title' => 'About v.1'])
+
+@section('content')
+    @include('layouts.partials/navbar', ['wishlist' => true])
+
+    <!-- Page content -->
+    <main class="content-wrapper">
+
+        <!-- Breadcrumb -->
+        <nav class="container pt-3 my-3 my-md-4" aria-label="breadcrumb">
+            <ol class="breadcrumb">
+                <li class="breadcrumb-item"><a href="{{ route('second', ['home', 'electronics']) }}">Home</a></li>
+                <li class="breadcrumb-item active" aria-current="page">About</li>
+            </ol>
+        </nav>
+
+
+        <!-- Hero -->
+        <section class="container">
+            <div class="row">
+
+                <!-- Cover image -->
+                <div class="col-md-7 order-md-2 mb-4 mb-md-0">
+                    <div class="position-relative h-100">
+                        <div class="ratio ratio-16x9"></div>
+                        <img src="/img/about/v1/hero.jpg"
+                            class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rounded-5" alt="Image">
+                    </div>
+                </div>
+
+                <!-- Text + button -->
+                <div class="col-md-5 order-md-1">
+                    <div class="position-relative py-5 px-4 px-sm-5">
+                        <span class="position-absolute top-0 start-0 w-100 h-100 rounded-5 d-none-dark rtl-flip"
+                            style="background: linear-gradient(-90deg, #accbee 0%, #e7f0fd 100%)"></span>
+                        <span class="position-absolute top-0 start-0 w-100 h-100 rounded-5 d-none d-block-dark rtl-flip"
+                            style="background: linear-gradient(-90deg, #1b273a 0%, #1f2632 100%)"></span>
+                        <div class="position-relative z-1 py-md-2 py-lg-4 py-xl-5 px-xl-2 px-xxl-4 my-xxl-3">
+                            <h1 class="pb-1 pb-md-2 pb-lg-3">Cartzilla - More than a retailer</h1>
+                            <p class="text-dark-emphasis pb-sm-2 pb-lg-0 mb-4 mb-lg-5">Since 2015, we have been fulfilling
+                                the small dreams and big plans of millions of people. You can find literally everything
+                                here.</p>
+                            <a class="btn btn-lg btn-outline-dark animate-slide-down" href="#mission">
+                                Learn more
+                                <i class="ci-arrow-down fs-lg animate-target ms-2 me-n1"></i>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Stats -->
+        <section class="container py-5 mt-md-2 mt-lg-4">
+            <div class="row row-cols-2 row-cols-md-4 g-4">
+                <div class="col text-center">
+                    <div class="display-4 text-dark-emphasis mb-2">14k</div>
+                    <p class="fs-sm mb-0">products available for purchase</p>
+                </div>
+                <div class="col text-center">
+                    <div class="display-4 text-dark-emphasis mb-2">120m</div>
+                    <p class="fs-sm mb-0">users visited site from 2015</p>
+                </div>
+                <div class="col text-center">
+                    <div class="display-4 text-dark-emphasis mb-2">800+</div>
+                    <p class="fs-sm mb-0">employees around the world </p>
+                </div>
+                <div class="col text-center">
+                    <div class="display-4 text-dark-emphasis mb-2">92%</div>
+                    <p class="fs-sm mb-0">of our customers return</p>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- CEO quotation (Mission) -->
+        <section class="container pt-3 pt-sm-4 pt-lg-5 mt-lg-2 mt-xl-4 mt-xxl-5" id="mission"
+            style="scroll-margin-top: 60px">
+            <div class="text-center mx-auto" style="max-width: 690px">
+                <h2 class="text-body fs-sm fw-normal">Mission</h2>
+                <h3 class="h1 pb-2 pb-md-3 mx-auto" style="max-width: 400px">The best products at fair prices</h3>
+                <p class="fs-xl pb-2 pb-md-3 pb-lg-4">"We believe that things exist to make life easier, more pleasant and
+                    kinder. That's why the search for the right thing should be quick, convenient and enjoyable. We do not
+                    just sell household appliances and electronics, but comfort and accessibility."</p>
+                <img src="/img/about/v1/avatar.jpg" width="64" class="d-block rounded-circle mx-auto mb-3"
+                    alt="Avatar">
+                <h6 class="mb-0">William Lacker, Cartzilla CEO</h6>
+            </div>
+        </section>
+
+
+        <!-- Principles -->
+        <section class="container pt-5">
+            <div class="row pt-2 pt-sm-3 pt-md-4 pt-lg-5">
+                <div class="col-md-5 col-lg-6 pb-1 pb-sm-2 pb-md-0 mb-4 mb-md-0">
+                    <div class="ratio ratio-1x1">
+                        <img src="/img/about/v1/delivery.jpg" class="rounded-5" alt="Image">
+                    </div>
+                </div>
+                <div class="col-md-7 col-lg-6 pt-md-3 pt-xl-4 pt-xxl-5">
+                    <div class="ps-md-3 ps-lg-4 ps-xl-5 ms-xxl-4">
+                        <h2 class="text-body fs-sm fw-normal">Principles</h2>
+                        <h3 class="h1 pb-1 pb-sm-2 pb-lg-3">The main principles that will allow us to grow</h3>
+                        <p class="pb-xl-3">Cartzilla is a comprehensive solution to fulfill any customer's needs, serving
+                            as both the starting point and end destination of their search. It operates as a reliable
+                            assistant, dedicated to eliminating the need for any unpleasant compromises, making their dreams
+                            a reality, and empowering them to think big.</p>
+
+                        <!-- Accordion -->
+                        <div class="accordion accordion-alt-icon" id="principles">
+
+                            <!-- Item (expanded) -->
+                            <div class="accordion-item">
+                                <h3 class="accordion-header" id="headingFocus">
+                                    <button type="button" class="accordion-button animate-underline collapsed"
+                                        data-bs-toggle="collapse" data-bs-target="#focus" aria-expanded="false"
+                                        aria-controls="focus">
+                                        <span class="animate-target me-2">Customer focus</span>
+                                    </button>
+                                </h3>
+                                <div class="accordion-collapse collapse" id="focus" aria-labelledby="headingFocus"
+                                    data-bs-parent="#principles">
+                                    <div class="accordion-body">We prioritize understanding and anticipating our
+                                        customers' needs, delivering an exceptional and personalized experience from start
+                                        to finish.</div>
+                                </div>
+                            </div>
+
+                            <!-- Item -->
+                            <div class="accordion-item">
+                                <h3 class="accordion-header" id="headingReputation">
+                                    <button type="button" class="accordion-button animate-underline collapsed"
+                                        data-bs-toggle="collapse" data-bs-target="#reputation" aria-expanded="false"
+                                        aria-controls="reputation">
+                                        <span class="animate-target me-2">Betting on reputation</span>
+                                    </button>
+                                </h3>
+                                <div class="accordion-collapse collapse" id="reputation" aria-labelledby="headingReputation"
+                                    data-bs-parent="#principles">
+                                    <div class="accordion-body">We value a solid reputation built on integrity,
+                                        transparency, and quality - ensuring our customers trust and rely on our brand.
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Item -->
+                            <div class="accordion-item">
+                                <h3 class="accordion-header" id="headingFast">
+                                    <button type="button" class="accordion-button animate-underline collapsed"
+                                        data-bs-toggle="collapse" data-bs-target="#fast" aria-expanded="false"
+                                        aria-controls="fast">
+                                        <span class="animate-target me-2">Fast, convenient and enjoyable</span>
+                                    </button>
+                                </h3>
+                                <div class="accordion-collapse collapse" id="fast" aria-labelledby="headingFast"
+                                    data-bs-parent="#principles">
+                                    <div class="accordion-body">We've streamlined our process for speed, convenience, and
+                                        an enjoyable shopping experience, redefining online standards for our delighted
+                                        customers.</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Values (Carousel of icon boxes) -->
+        <section class="container-start pt-5">
+            <div class="row align-items-center g-0 pt-2 pt-sm-3 pt-md-4 pt-lg-5">
+                <div class="col-md-4 col-lg-3 pb-1 pb-md-0 pe-3 ps-md-0 mb-4 mb-md-0">
+                    <div class="d-flex flex-md-column align-items-end align-items-md-start">
+                        <div class="mb-md-5 me-3 me-md-0">
+                            <h2 class="text-body fs-sm fw-normal">Values</h2>
+                            <h3 class="h1 mb-0">Simple values to achieve goals</h3>
+                        </div>
+
+                        <!-- External slider prev/next buttons -->
+                        <div class="d-flex gap-2">
+                            <button type="button" id="prev-values"
+                                class="btn btn-icon btn-outline-secondary rounded-circle animate-slide-start me-1"
+                                aria-label="Prev">
+                                <i class="ci-chevron-left fs-xl animate-target"></i>
+                            </button>
+                            <button type="button" id="next-values"
+                                class="btn btn-icon btn-outline-secondary rounded-circle animate-slide-end"
+                                aria-label="Next">
+                                <i class="ci-chevron-right fs-xl animate-target"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="col-md-8 col-lg-9">
+                    <div class="ps-md-4 ps-lg-5">
+                        <div class="swiper"
+                            data-swiper='{
+                "slidesPerView": "auto",
+                "spaceBetween": 24,
+                "loop": true,
+                "navigation": {
+                  "prevEl": "#prev-values",
+                  "nextEl": "#next-values"
+                }
+              }'>
+                            <div class="swiper-wrapper">
+
+                                <!-- Item -->
+                                <div class="swiper-slide w-auto h-auto">
+                                    <div class="card h-100 rounded-4 px-3" style="max-width: 306px">
+                                        <div class="card-body py-5 px-3">
+                                            <div class="h4 h5 d-flex align-items-center">
+                                                <i class="ci-user-plus fs-4 me-3"></i>
+                                                People
+                                            </div>
+                                            <p class="mb-0">The most important value of the Company is people
+                                                (employees, partners, clients). Behind any success there is, first and
+                                                foremost, a specific person. It is he who creates the product, technology,
+                                                and innovation.</p>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <!-- Item -->
+                                <div class="swiper-slide w-auto h-auto">
+                                    <div class="card h-100 rounded-4 px-3" style="max-width: 306px">
+                                        <div class="card-body py-5 px-3">
+                                            <div class="h4 h5 d-flex align-items-center">
+                                                <i class="ci-shopping-bag fs-4 me-3"></i>
+                                                Service
+                                            </div>
+                                            <p class="mb-0">Care, attention, desire and ability to be helpful (to a
+                                                colleague in his department, other departments, clients, customers and all
+                                                other people who surround us).</p>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <!-- Item -->
+                                <div class="swiper-slide w-auto h-auto">
+                                    <div class="card h-100 rounded-4 px-3" style="max-width: 306px">
+                                        <div class="card-body py-5 px-3">
+                                            <div class="h4 h5 d-flex align-items-center">
+                                                <i class="ci-trending-up fs-4 me-3"></i>
+                                                Responsibility
+                                            </div>
+                                            <p class="mb-0">Responsibility is our key quality. We don't shift it to
+                                                external circumstances or other people. If we see something that could be
+                                                improved, we don't just criticize, but offer our own options.</p>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <!-- Item -->
+                                <div class="swiper-slide w-auto h-auto">
+                                    <div class="card h-100 rounded-4 px-3" style="max-width: 306px">
+                                        <div class="card-body py-5 px-3">
+                                            <div class="h4 h5 d-flex align-items-center">
+                                                <i class="ci-rocket fs-4 me-3"></i>
+                                                Innovation
+                                            </div>
+                                            <p class="mb-0">We foster a culture of continuous improvement and
+                                                innovation. Embracing change and staying ahead of the curve are essential
+                                                for our success. We encourage creative thinking, experimentation, and the
+                                                pursuit of new ideas.</p>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <!-- Item -->
+                                <div class="swiper-slide w-auto h-auto">
+                                    <div class="card h-100 rounded-4 px-3" style="max-width: 306px">
+                                        <div class="card-body py-5 px-3">
+                                            <div class="h4 h5 d-flex align-items-center">
+                                                <i class="ci-star fs-4 me-3"></i>
+                                                Leadership
+                                            </div>
+                                            <p class="mb-0">Cartzilla people are young, ambitious and energetic
+                                                individuals. With identified leadership qualities, with a desire to be the
+                                                best at what they do.</p>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <!-- Item -->
+                                <div class="swiper-slide w-auto h-auto">
+                                    <div class="card h-100 rounded-4 px-3" style="max-width: 306px">
+                                        <div class="card-body py-5 px-3">
+                                            <div class="h4 h5 d-flex align-items-center">
+                                                <i class="ci-leaf fs-4 me-3"></i>
+                                                Sustainability
+                                            </div>
+                                            <p class="mb-0">We are committed to minimizing our environmental impact and
+                                                promoting sustainable practices. From responsible sourcing to eco-friendly
+                                                packaging, we aim to make a positive contribution to the well-being of our
+                                                planet.</p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Video + Blog post -->
+        <section class="container pt-5 mt-2 mt-sm-3 mt-md-4 mt-lg-5">
+            <div class="row row-cols-1 row-cols-md-2 g-4">
+                <div class="col">
+                    <div class="position-relative h-100">
+                        <div class="ratio ratio-16x9"></div>
+                        <img src="/img/about/v1/video-cover.jpg"
+                            class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rounded-5" alt="Image">
+                        <div class="position-absolute start-0 bottom-0 d-flex align-items-end w-100 h-100 z-2 p-4">
+                            <a class="btn btn-lg btn-light rounded-pill m-md-2"
+                                href="https://www.youtube.com/watch?v=Sqqj_14wBxU" data-glightbox>
+                                <i class="ci-play fs-lg ms-n1 me-2"></i>
+                                Play
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                <div class="col">
+                    <div class="bg-body-tertiary rounded-5 py-5 px-4 px-sm-5">
+                        <div class="py-md-3 py-lg-4 py-xl-5 px-lg-4 px-xl-5 my-lg-2 my-xl-4 my-xxl-5">
+                            <h2 class="h3 pb-sm-1 pb-lg-2">The role of philanthropy in building a better world</h2>
+                            <p class="pb-sm-2 pb-lg-0 mb-4 mb-lg-5">Charitable contributions are a vital aspect of
+                                building a better world. These contributions come in various forms, including monetary
+                                donations...</p>
+                            <a class="btn btn-lg btn-outline-dark" href="#!">Learn more</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Open positions (Carousel of cards) -->
+        <section class="container py-5 mt-2 mb-1 my-sm-3 my-md-4 my-lg-5">
+            <div class="d-flex align-items-end justify-content-between pb-3 mb-1 mb-md-3">
+                <div class="me-4">
+                    <h2 class="text-body fs-sm fw-normal">Career</h2>
+                    <h3 class="h1 mb-0">Open positions</h3>
+                </div>
+
+                <!-- External slider prev/next buttons -->
+                <div class="d-flex justify-content-center justify-content-md-start gap-2">
+                    <button type="button" id="prev-positions"
+                        class="btn btn-icon btn-outline-secondary rounded-circle animate-slide-start me-1"
+                        aria-label="Prev">
+                        <i class="ci-chevron-left fs-xl animate-target"></i>
+                    </button>
+                    <button type="button" id="next-positions"
+                        class="btn btn-icon btn-outline-secondary rounded-circle animate-slide-end" aria-label="Next">
+                        <i class="ci-chevron-right fs-xl animate-target"></i>
+                    </button>
+                </div>
+            </div>
+
+            <!-- Slider -->
+            <div class="swiper"
+                data-swiper='{
+          "slidesPerView": 1,
+          "spaceBetween": 24,
+          "loop": true,
+          "navigation": {
+            "prevEl": "#prev-positions",
+            "nextEl": "#next-positions"
+          },
+          "breakpoints": {
+            "500": {
+              "slidesPerView": 2
+            },
+            "800": {
+              "slidesPerView": 3
+            },
+            "1080": {
+              "slidesPerView": 4
+            }
+          }
+        }'>
+                <div class="swiper-wrapper py-2">
+
+                    <!-- Item -->
+                    <div class="swiper-slide h-auto">
+                        <a class="card btn btn-outline-secondary w-100 h-100 align-items-start text-wrap text-start rounded-4 px-0 px-xl-2 py-4 py-xl-5"
+                            href="#!">
+                            <div class="card-body pb-0 pt-3 pt-xl-0">
+                                <span class="badge bg-info fs-xs rounded-pill">Full time</span>
+                                <h4 class="h5 py-3 my-2 my-xl-3">Supply Chain and Logistics Coordinator</h4>
+                            </div>
+                            <div
+                                class="card-footer w-100 bg-transparent border-0 text-body fs-sm fw-normal pt-0 pb-3 pb-xl-0">
+                                New York</div>
+                        </a>
+                    </div>
+
+                    <!-- Item -->
+                    <div class="swiper-slide h-auto">
+                        <a class="card btn btn-outline-secondary w-100 h-100 align-items-start text-wrap text-start rounded-4 px-0 px-xl-2 py-4 py-xl-5"
+                            href="#!">
+                            <div class="card-body pb-0 pt-3 pt-xl-0">
+                                <span class="badge bg-success fs-xs rounded-pill">Part time</span>
+                                <h4 class="h5 py-3 my-2 my-xl-3">Content Manager for Social Networks</h4>
+                            </div>
+                            <div
+                                class="card-footer w-100 bg-transparent border-0 text-body fs-sm fw-normal pt-0 pb-3 pb-xl-0">
+                                Remote</div>
+                        </a>
+                    </div>
+
+                    <!-- Item -->
+                    <div class="swiper-slide h-auto">
+                        <a class="card btn btn-outline-secondary w-100 h-100 align-items-start text-wrap text-start rounded-4 px-0 px-xl-2 py-4 py-xl-5"
+                            href="#!">
+                            <div class="card-body pb-0 pt-3 pt-xl-0">
+                                <span class="badge bg-info fs-xs rounded-pill">Full time</span>
+                                <h4 class="h5 py-3 my-2 my-xl-3">Customer Service Representative</h4>
+                            </div>
+                            <div
+                                class="card-footer w-100 bg-transparent border-0 text-body fs-sm fw-normal pt-0 pb-3 pb-xl-0">
+                                London</div>
+                        </a>
+                    </div>
+
+                    <!-- Item -->
+                    <div class="swiper-slide h-auto">
+                        <a class="card btn btn-outline-secondary w-100 h-100 align-items-start text-wrap text-start rounded-4 px-0 px-xl-2 py-4 py-xl-5"
+                            href="#!">
+                            <div class="card-body pb-0 pt-3 pt-xl-0">
+                                <span class="badge bg-warning fs-xs rounded-pill">Freelance</span>
+                                <h4 class="h5 py-3 my-2 my-xl-3">Data Analyst/Analytics Specialist</h4>
+                            </div>
+                            <div
+                                class="card-footer w-100 bg-transparent border-0 text-body fs-sm fw-normal pt-0 pb-3 pb-xl-0">
+                                Remote</div>
+                        </a>
+                    </div>
+
+                    <!-- Item -->
+                    <div class="swiper-slide h-auto">
+                        <a class="card btn btn-outline-secondary w-100 h-100 align-items-start text-wrap text-start rounded-4 px-0 px-xl-2 py-4 py-xl-5"
+                            href="#!">
+                            <div class="card-body pb-0 pt-3 pt-xl-0">
+                                <span class="badge bg-info fs-xs rounded-pill">Full time</span>
+                                <h4 class="h5 py-3 my-2 my-xl-3">E-commerce Manager/Director</h4>
+                            </div>
+                            <div
+                                class="card-footer w-100 bg-transparent border-0 text-body fs-sm fw-normal pt-0 pb-3 pb-xl-0">
+                                In house</div>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Subscription form + Vlog -->
+        <section class="bg-body-tertiary py-5">
+            <div class="container pt-sm-2 pt-md-3 pt-lg-4 pt-xl-5">
+                <div class="row">
+                    <div class="col-md-6 col-lg-5 mb-5 mb-md-0">
+                        <h2 class="h4 mb-2">Sign up to our newsletter</h2>
+                        <p class="text-body pb-2 pb-ms-3">Receive our latest updates about our products &amp; promotions
+                        </p>
+                        <form class="d-flex needs-validation pb-1 pb-sm-2 pb-md-3 pb-lg-0 mb-4 mb-lg-5" novalidate>
+                            <div class="position-relative w-100 me-2">
+                                <input type="email" class="form-control form-control-lg" placeholder="Your email"
+                                    required>
+                            </div>
+                            <button type="submit" class="btn btn-lg btn-primary">Subscribe</button>
+                        </form>
+                        <div class="d-flex gap-3">
+                            <a class="btn btn-icon btn-secondary rounded-circle" href="#!" aria-label="Instagram">
+                                <i class="ci-instagram fs-base"></i>
+                            </a>
+                            <a class="btn btn-icon btn-secondary rounded-circle" href="#!" aria-label="Facebook">
+                                <i class="ci-facebook fs-base"></i>
+                            </a>
+                            <a class="btn btn-icon btn-secondary rounded-circle" href="#!" aria-label="YouTube">
+                                <i class="ci-youtube fs-base"></i>
+                            </a>
+                            <a class="btn btn-icon btn-secondary rounded-circle" href="#!" aria-label="Telegram">
+                                <i class="ci-telegram fs-base"></i>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="col-md-6 col-lg-5 col-xl-4 offset-lg-1 offset-xl-2">
+                        <ul class="list-unstyled d-flex flex-column gap-4 ps-md-4 ps-lg-0 mb-3">
+                            <li class="nav flex-nowrap align-items-center position-relative">
+                                <img src="/img/home/electronics/vlog/01.jpg" class="rounded" width="140"
+                                    alt="Video cover">
+                                <div class="ps-3">
+                                    <div class="fs-xs text-body-secondary lh-sm mb-2">6:16</div>
+                                    <a class="nav-link fs-sm hover-effect-underline stretched-link p-0" href="#!">5
+                                        New Cool Gadgets You Must See on Cartzilla - Cheap Budget</a>
+                                </div>
+                            </li>
+                            <li class="nav flex-nowrap align-items-center position-relative">
+                                <img src="/img/home/electronics/vlog/02.jpg" class="rounded" width="140"
+                                    alt="Video cover">
+                                <div class="ps-3">
+                                    <div class="fs-xs text-body-secondary lh-sm mb-2">10:20</div>
+                                    <a class="nav-link fs-sm hover-effect-underline stretched-link p-0" href="#!">5
+                                        Super Useful Gadgets on Cartzilla You Must Have in 2023</a>
+                                </div>
+                            </li>
+                            <li class="nav flex-nowrap align-items-center position-relative">
+                                <img src="/img/home/electronics/vlog/03.jpg" class="rounded" width="140"
+                                    alt="Video cover">
+                                <div class="ps-3">
+                                    <div class="fs-xs text-body-secondary lh-sm mb-2">8:40</div>
+                                    <a class="nav-link fs-sm hover-effect-underline stretched-link p-0" href="#!">Top
+                                        5 New Amazing Gadgets on Cartzilla You Must See</a>
+                                </div>
+                            </li>
+                        </ul>
+                        <div class="nav ps-md-4 ps-lg-0">
+                            <a class="btn nav-link animate-underline text-decoration-none px-0" href="#!">
+                                <span class="animate-target">View all</span>
+                                <i class="ci-chevron-right fs-base ms-1"></i>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    @include('layouts.partials/footer')
+@endsection
+
+@section('scripts')
+@endsection
diff --git a/resources/views/about/v2.blade.php b/resources/views/about/v2.blade.php
new file mode 100644
index 0000000..a88a7bc
--- /dev/null
+++ b/resources/views/about/v2.blade.php
@@ -0,0 +1,461 @@
+@extends('layouts.landing', ['title' => 'About v.2'])
+
+@section('content')
+    <!-- Shopping cart offcanvas (Empty state) -->
+    <div class="offcanvas offcanvas-end pb-sm-2 px-sm-2" id="shoppingCart" tabindex="-1" aria-labelledby="shoppingCartLabel"
+        style="width: 500px">
+        <div class="offcanvas-header py-3 pt-lg-4">
+            <h4 class="offcanvas-title" id="shoppingCartLabel">Shopping cart</h4>
+            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+        </div>
+        <div class="offcanvas-body text-center">
+            <svg class="d-block mx-auto mb-4" xmlns="http://www.w3.org/2000/svg" width="60" viewBox="0 0 29.5 30">
+                <path class="text-body-tertiary"
+                    d="M17.8 4c.4 0 .8-.3.8-.8v-2c0-.4-.3-.8-.8-.8-.4 0-.8.3-.8.8v2c0 .4.3.8.8.8zm3.2.6c.4.2.8 0 1-.4l.4-.9c.2-.4 0-.8-.4-1s-.8 0-1 .4l-.4.9c-.2.4 0 .9.4 1zm-7.5-.4c.2.4.6.6 1 .4s.6-.6.4-1l-.4-.9c-.2-.4-.6-.6-1-.4s-.6.6-.4 1l.4.9z"
+                    fill="currentColor" />
+                <path class="text-body-emphasis"
+                    d="M10.7 24.5c-1.5 0-2.8 1.2-2.8 2.8S9.2 30 10.7 30s2.8-1.2 2.8-2.8-1.2-2.7-2.8-2.7zm0 4c-.7 0-1.2-.6-1.2-1.2s.6-1.2 1.2-1.2 1.2.6 1.2 1.2-.5 1.2-1.2 1.2zm11.1-4c-1.5 0-2.8 1.2-2.8 2.8a2.73 2.73 0 0 0 2.8 2.8 2.73 2.73 0 0 0 2.8-2.8c0-1.6-1.3-2.8-2.8-2.8zm0 4c-.7 0-1.2-.6-1.2-1.2s.6-1.2 1.2-1.2 1.2.6 1.2 1.2-.6 1.2-1.2 1.2zM8.7 18h16c.3 0 .6-.2.7-.5l4-10c.2-.5-.2-1-.7-1H9.3c-.4 0-.8.3-.8.8s.4.7.8.7h18.3l-3.4 8.5H9.3L5.5 1C5.4.7 5.1.5 4.8.5h-4c-.5 0-.8.3-.8.7s.3.8.8.8h3.4l3.7 14.6a3.24 3.24 0 0 0-2.3 3.1C5.5 21.5 7 23 8.7 23h16c.4 0 .8-.3.8-.8s-.3-.8-.8-.8h-16a1.79 1.79 0 0 1-1.8-1.8c0-1 .9-1.6 1.8-1.6z"
+                    fill="currentColor" />
+            </svg>
+            <h6 class="mb-2">Your shopping cart is currently empty!</h6>
+            <p class="fs-sm mb-4">Explore our wide range of products and add items to your cart to proceed with your
+                purchase.</p>
+            <a class="btn btn-dark rounded-pill" href="{{ route('second', ['shop', 'catalog-furniture']) }}">Continue shopping</a>
+        </div>
+    </div>
+
+    @include('layouts.partials/navbar2')
+
+    <!-- Page content -->
+    <main class="content-wrapper">
+
+        <!-- Hero (Video popup) -->
+        <section class="container pt-5 mt-1 mt-sm-2 mt-md-4 mt-lg-5">
+            <div class="text-center pb-2 pb-sm-3 pb-lg-0 pb-xxl-2 mx-auto mb-4 mb-lg-5" style="max-width: 650px">
+                <h1 class="text-body fs-xs fw-medium text-uppercase mb-sm-4">Welcome to Furniture</h1>
+                <h2 class="h1 mb-0">We believe that quality furniture is available to everyone</h2>
+            </div>
+            <div class="position-relative">
+                <div class="ratio" style="--cz-aspect-ratio: calc(672 / 1296 * 100%)">
+                    <img src="/img/about/v2/hero.jpg" class="rounded-5" alt="Image">
+                </div>
+                <a class="btn btn-lg btn-light rounded-pill position-absolute top-50 start-50 translate-middle z-2"
+                    href="https://www.youtube.com/watch?v=kkiJftHG3Wo" data-glightbox data-gallery="video">
+                    <i class="ci-play fs-lg ms-n1 me-2"></i>
+                    Play
+                </a>
+            </div>
+        </section>
+
+
+        <!-- Features -->
+        <section class="container pt-5 mt-1 mt-sm-3 mt-md-4 mt-lg-5">
+            <div class="row row-cols-1 row-cols-md-3 gy-3 gy-sm-4 gx-2 gx-lg-4">
+                <div class="col text-center">
+                    <svg class="d-block text-dark-emphasis mx-auto mb-3 mb-lg-4" xmlns="http://www.w3.org/2000/svg"
+                        width="64" height="64" viewBox="0 0 64 64" fill="currentColor">
+                        <path
+                            d="M62.189 9.902c0-.604-.604-1.208-1.208-1.208h-6.158-3.14l-1.69.121-1.57.242c-2.174.483-4.226 1.087-6.158 2.174s-3.623 2.294-5.072 3.864h-.121c-3.14 3.019-5.313 7.004-6.038 11.351l-.241 1.57-.121 1.691v3.14 5.796c-.604.845-1.087 1.691-1.57 2.536.121-1.328.121-2.536.241-3.864 0-.966.121-1.811.121-2.777v-1.449l-.121-1.449c-.241-1.811-.845-3.743-1.691-5.434a20.6 20.6 0 0 0-3.26-4.71c-2.657-2.777-6.279-4.709-10.143-5.434L12.8 15.82l-1.449-.121H8.574 3.019c-.604 0-1.208.604-1.208 1.208v5.555 2.777l.121 1.449.242 1.449C2.898 32 4.83 35.502 7.729 38.159c1.449 1.328 3.019 2.415 4.709 3.26s3.623 1.328 5.434 1.691l1.449.121h1.449c.966 0 1.811-.121 2.777-.121 1.57-.121 3.14-.121 4.709-.242-.362.604-.604 1.328-.966 1.932-1.449 3.381-2.294 7.004-2.294 10.506.966-3.502 2.294-6.642 3.985-9.66.966-1.811 2.174-3.623 3.381-5.313h5.675 3.14l1.691-.121 1.57-.242c2.174-.483 4.227-1.087 6.159-2.174s3.623-2.294 5.072-3.864h.121c3.14-3.019 5.313-7.004 6.038-11.351l.242-1.57.121-1.69v-3.14-6.279zM49.63 35.743c-1.691.966-3.623 1.449-5.555 1.811l-1.449.242-1.449.121h-3.019-3.864c.242-.242.483-.604.725-.845 2.174-2.657 4.589-5.192 7.004-7.728l7.366-7.728c-3.019 1.932-5.917 3.985-8.694 6.279-2.657 2.294-5.192 4.709-7.487 7.487v-2.536-3.019l.121-1.449.242-1.449c.362-1.932.845-3.864 1.811-5.555.845-1.691 2.053-3.381 3.381-4.83 1.449-1.328 3.019-2.415 4.709-3.381s3.623-1.449 5.555-1.811l1.449-.241 1.449-.121h3.019 4.951v4.951 3.019l-.121 1.57-.242 1.449c-.362 1.932-.845 3.864-1.811 5.555-.845 1.691-2.053 3.381-3.381 4.83-1.449 1.449-3.019 2.536-4.709 3.381zm-26.083 6.762c-.966 0-1.811-.121-2.777-.121l-1.328-.121-1.328-.242c-3.502-.724-6.641-2.536-9.057-5.072-1.208-1.328-2.174-2.657-3.019-4.226-.725-1.57-1.208-3.26-1.57-4.951l-.242-1.328-.121-1.328V22.34v-4.347h4.347 2.777 1.328l1.328.121c1.691.242 3.381.725 4.951 1.57 1.449 1.087 2.898 2.053 4.106 3.26 2.536 2.415 4.347 5.555 5.072 9.057l.241 1.328.121 1.328c.121.845.121 1.811.121 2.777.121 1.449.121 2.777.241 4.226-.241.483-.483.845-.724 1.328-1.328-.362-2.898-.362-4.468-.483zm-5.434-12.437c-1.449-.966-2.898-1.932-4.589-2.657.966 1.449 2.174 2.777 3.381 3.985 2.415 2.536 4.83 4.709 7.487 7.124 1.328 1.087 2.536 2.294 4.106 3.381-.725-1.691-1.57-3.26-2.657-4.589-2.174-2.898-4.709-5.193-7.728-7.245z" />
+                    </svg>
+                    <h3 class="h5">Eco-friendly</h3>
+                    <p class="fs-sm px-5 mb-md-0">Decorate your space with eco-friendly furniture with low VOCs,
+                        environmentally friendly materials and safe coatings.</p>
+                </div>
+                <div class="col text-center">
+                    <svg class="d-block text-dark-emphasis mx-auto mb-3 mb-lg-4" xmlns="http://www.w3.org/2000/svg"
+                        width="64" height="64" viewBox="0 0 64 64" fill="currentColor">
+                        <path
+                            d="M55.526 24.465l-.145-10.159-.094-5.08-.012-.635c-.016-.23-.016-.481-.061-.717-.06-.481-.22-.945-.413-1.384-.407-.875-1.061-1.625-1.868-2.136a4.99 4.99 0 0 0-2.699-.769l-2.548.061-15.238.437 15.238.437 2.532.069a3.93 3.93 0 0 1 2.088.71c.601.431 1.085 1.017 1.365 1.692.131.339.242.688.27 1.051.029.181.017.356.026.548l-.012.635-.094 5.08-.119 8.281c-3.476-.415-6.952-.651-10.428-.808-3.769-.185-7.537-.235-11.306-.255-3.769.023-7.537.073-11.306.258-3.471.158-6.941.392-10.412.803l-.131-9.156-.085-5.05c.009-1.448.949-2.849 2.313-3.435.691-.318 1.391-.355 2.28-.357l2.54-.066 15.239-.439-17.778-.505c-.425-.009-.83-.032-1.325-.006-.472.048-.941.145-1.388.317-1.798.674-3.123 2.475-3.216 4.432l-.105 5.109-.145 10.159-.111 10.159-.046 5.714c.011.242.006.518.048.774.054.523.214 1.031.415 1.516.421.967 1.122 1.802 1.996 2.394a5.52 5.52 0 0 0 2.985.937l1.885.008a219.85 219.85 0 0 0-2.615 7.372l-1.399 4.349-.166.552a2.42 2.42 0 0 0-.062 1.062c.109.703.567 1.362 1.196 1.705a2.42 2.42 0 0 0 2.973-.484c.144-.164.17-.207.235-.287l.177-.224c3.518-4.56 6.926-9.206 10.121-14.015l5.451.014 6.309-.017c3.205 4.808 6.615 9.457 10.14 14.017l.177.224c.065.081.092.123.235.287.753.837 2.009 1.035 2.971.484.629-.343 1.086-1.001 1.195-1.704a2.42 2.42 0 0 0-.062-1.061l-.166-.552-1.403-4.349a228.34 228.34 0 0 0-2.625-7.375l1.007-.003c.425-.003.814.01 1.383-.037.524-.067 1.042-.192 1.53-.396 1.966-.798 3.353-2.796 3.404-4.903l-.03-5.126-.112-10.159zM14.167 57.718l-.293.386c-.011.016-.023.027-.04.035-.035.018-.081.021-.114.004-.043-.018-.066-.046-.08-.095a.18.18 0 0 1-.002-.069l.153-.545 1.157-4.419c.65-2.627 1.271-5.264 1.822-7.92l7.761.02c-3.608 4.082-7.037 8.303-10.363 12.603zm34.91-4.704l1.155 4.42.153.544a.19.19 0 0 1-.002.07c-.014.049-.037.077-.081.096-.034.018-.08.015-.115-.004-.018-.008-.029-.019-.041-.035l-.294-.386c-3.321-4.302-6.749-8.521-10.35-12.607l7.309-.02.452-.001c.549 2.657 1.17 5.293 1.814 7.922zm4.528-18.39l-.05 5.033c-.051 1.297-.928 2.501-2.124 2.963-.626.251-1.14.252-2.08.235l-17.778-.047c-25.374.066 7.11-.017-17.761.043a3.42 3.42 0 0 1-1.802-.541 3.43 3.43 0 0 1-1.238-1.434c-.123-.294-.234-.599-.268-.92-.032-.162-.025-.312-.04-.492l-.046-5.714-.112-10.159-.011-.8c3.47.411 6.94.645 10.409.803 3.769.186 7.537.235 11.306.258 3.769-.02 7.537-.07 11.306-.255 3.475-.157 6.95-.393 10.425-.808l-.024 1.677-.112 10.159zm-14.693-23.94c-3.673-1.557-10.14-1.544-13.805 0 3.66 1.542 10.125 1.559 13.805 0zM25.107 28.829c3.647 1.537 10.114 1.564 13.805 0-3.697-1.567-10.167-1.533-13.805 0z" />
+                    </svg>
+                    <h3 class="h5">Unbeatable quality</h3>
+                    <p class="fs-sm px-5 mb-md-0">We choose raw materials from the best manufacturers, so our furniture and
+                        decor are of the highest quality at the best prices.</p>
+                </div>
+                <div class="col text-center">
+                    <svg class="d-block text-dark-emphasis mx-auto mb-3 mb-lg-4" xmlns="http://www.w3.org/2000/svg"
+                        width="64" height="64" viewBox="0 0 64 64" fill="currentColor">
+                        <path
+                            d="M5.36 29.423c.111 0 2.111 1 6.333 2.667l-.222 10.222c-.111 3.667-.111 7.334-.111 11a1.07 1.07 0 0 0 .778 1c.333.111 10 2.778 9.889 2.667.111 0 10 2.667 9.889 2.667h.111.111.111.111.111l9.889-2.667c.111 0 10-2.778 9.889-2.667a1.07 1.07 0 0 0 .778-1c-.111-3.667-.111-7.334-.111-11l-.222-10.222 6.222-2.667c.111 0 .111-.111.222-.111.222-.222.333-.667 0-.889l-7.111-7.556 5.556 7.667c-3.111 1-6.111 2-9.111 3.111l-9.111 3.333-5.333-6.334c6.222-2.556 12-5.111 18.112-7.889-6-2.778-11.889-5.333-18-7.889l5.333-6.333 9.111 3.333c3 1.111 6.111 2.111 9.111 3.111l-5.556 7.667c2.333-2.333 4.778-4.889 7.111-7.556 0 0 .111-.111.111-.222.111-.333 0-.667-.333-.889-3.222-1.444-6.445-2.778-9.778-4l-9.778-3.889c-.444-.222-.889 0-1.222.333l-5.778 7.111c-1.889-2.445-3.889-4.778-5.778-7.111-.333-.333-.778-.556-1.222-.333-3.222 1.222-6.556 2.556-9.778 3.889-3.778 1.444-7 2.778-10.222 4.222-.111 0-.222.111-.222.111-.222.222-.333.667 0 .889 2.111 2.333 4.333 4.667 6.334 6.778-.444.444-.444 1.222 0 1.556-2.111 2.111-4.222 4.444-6.334 6.778-.444.444-.222 1 .111 1.111zm6.556-7.556l9.889 3.556 3.778 1.333 4.778 2-5.333 6.334-9.111-3.333c-3-1.111-6.111-2.111-9.111-3.111 1.667-2.222 3.222-4.444 4.889-6.778 0-.111.111 0 .222 0zm1.445 30.667c0-3.111-.111-9.556-.445-19.889.778.333 1.445.667 2.222.889l9.778 3.889c.444.222.889 0 1.222-.333 1.778-2.111 3.556-4.333 5.222-6.444-.111 1.778-.111 3.556-.111 5.333l-.222 7.556-.222 13.778-8.556-2.333-8.889-2.444zm37.334 0l-9.111 2.444-8.556 2.333c0-5.778-.111-7.222-.222-13.778l-.222-7.556c-.111-1.778-.111-3.556-.111-5.333 1.778 2.111 3.445 4.333 5.222 6.444.333.333.778.556 1.222.333 3.222-1.222 6.556-2.556 9.778-3.889.778-.333 1.444-.556 2.222-.889l-.222 19.889zm.889-31.667c-5.334 1.556-9.111 2.778-13.556 4.333-2 .667-4 1.222-6 1.889l-9.556-3.667-7-2.556 7-2.556 9.556-3.667c1.889.667 3.778 1.222 5.667 1.889l14 4.445c0-.111-.111-.111-.111-.111zm-44.89-7.667l9.222-3.222 9.111-3.333 5.333 6.333c-1.556.667-3.111 1.222-4.667 1.889l-3.889 1.333-9.889 3.556c-.111 0-.222.111-.222.111l-5-6.667z" />
+                    </svg>
+                    <h3 class="h5">Delivery to your door</h3>
+                    <p class="fs-sm px-5 mb-md-0"> We will deliver to your door anywhere in the world. If you're not 100%
+                        satisfied, let us know within 30 days and we'll solve the problem.</p>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Image + Text -->
+        <section class="container pt-5 pb-5 mt-md-4 mt-xl-5 mb-xxl-3">
+            <h2 class="h1 text-center pt-xxl-3 mx-auto mb-2" style="max-width: 620px">
+                Design that inspires a better way to work
+            </h2>
+            <div class="row py-4 py-lg-5">
+                <div class="col-md-6 col-lg-7">
+                    <div class="position-relative h-100">
+                        <div class="ratio ratio-16x9"></div>
+                        <img src="/img/blog/grid/v2/01.jpg"
+                            class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rounded-5" alt="Image">
+                    </div>
+                </div>
+                <div class="col-md-6 col-lg-5">
+                    <div class="pt-4 py-md-5 my-lg-3 my-xl-4 my-xxl-5 ps-md-3 ps-lg-4 ps-xxl-5">
+                        <h3 class="mb-4">Decorate your space with eco-friendly furniture</h3>
+                        <p>Eco-friendly furniture help reduce your carbon footprint, but it also provides a healthier living
+                            environment for you and your loved ones. It crafted with sustainable materials such as bamboo,
+                            reclaimed wood, or recycled plastic.</p>
+                        <hr class="my-lg-5">
+                        <div class="d-flex gap-3">
+                            <span class="display-5 text-success-emphasis">75%</span>
+                            <span class="h6 pt-1 mb-0">our products are made of natural and eco-friendly materials</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row py-4 py-lg-5">
+                <div class="col-md-6 col-lg-7 order-md-2">
+                    <div class="position-relative h-100">
+                        <div class="ratio ratio-16x9"></div>
+                        <img src="/img/blog/grid/v2/02.jpg"
+                            class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rounded-5" alt="Image">
+                    </div>
+                </div>
+                <div class="col-md-6 col-lg-5 order-md-1">
+                    <div class="pt-4 py-md-5 my-lg-3 my-xl-4 my-xxl-5 pe-md-3 pe-lg-4 pe-xxl-5">
+                        <h3 class="mb-4">Quality in every detail</h3>
+                        <p>We always choose raw materials from the best manufacturers, so our furniture and decor are of the
+                            highest quality in every detail at the best prices.</p>
+                        <hr class="my-lg-5">
+                        <figure class="mb-0">
+                            <blockquote class="blockquote">
+                                <p class="fs-base">"Every Cartzilla project is an opportunity to create value for
+                                    homeowners on many levels. Working with materials from the best manufacturers is an
+                                    added bonus."</p>
+                            </blockquote>
+                            <figcaption class="blockquote-footer mb-0">William, Architect</figcaption>
+                        </figure>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Features -->
+        <section class="bg-dark py-5 mt-n2 mt-sm-0" data-bs-theme="dark">
+            <div class="container pt-1 pt-sm-2 pt-md-3 pb-md-2 pt-lg-4 pb-lg-3 pb-xl-4 pt-xl-5 pb-xxl-5 mt-xxl-3">
+                <div class="row">
+                    <div
+                        class="col-lg-3 d-flex flex-column flex-sm-row flex-lg-column align-items-center align-items-lg-start pb-3 mb-3 mb-md-4">
+                        <h2 class="h1 text-center text-sm-start mb-sm-0 mb-lg-5 me-sm-4 me-lg-0">Three defining features
+                        </h2>
+                        <a class="btn btn-lg btn-outline-light rounded-pill ms-sm-auto ms-lg-0"
+                            href="{{ route('second', ['shop', 'catalog-furniture']) }}">View catalog</a>
+                    </div>
+                    <div class="col-lg-9">
+                        <div class="overflow-auto" data-simplebar>
+                            <div class="d-flex gap-4">
+                                <div class="w-100" style="min-width: 230px">
+                                    <img src="/img/about/v2/feature01.jpg" class="d-block rounded-4 mb-4" alt="Image">
+                                    <h3 class="h5 pb-1 mb-2">Customer focus</h3>
+                                    <p class="text-body fs-sm mb-4">We give each client as much attention and time as
+                                        necessary to understand their wishes and get the perfect result that will satisfy
+                                        the client in full.</p>
+                                </div>
+                                <div class="w-100" style="min-width: 230px">
+                                    <img src="/img/about/v2/feature02.jpg" class="d-block rounded-4 mb-4" alt="Image">
+                                    <h3 class="h5 pb-1 mb-2">Attention to the details</h3>
+                                    <p class="text-body fs-sm mb-4">We are convinced that the devil is in the details, and
+                                        there are no insignificant details, so we carefully monitor everything - from the
+                                        supply and selection of high-quality wood to the finest work during the furniture
+                                        finishing.</p>
+                                </div>
+                                <div class="w-100" style="min-width: 230px">
+                                    <img src="/img/about/v2/feature03.jpg" class="d-block rounded-4 mb-4" alt="Image">
+                                    <h3 class="h5 pb-1 mb-2">Betting on reputation</h3>
+                                    <p class="text-body fs-sm mb-4">Responsible for the integrity, quality and adherence to
+                                        deadlines in the production of orders, because the professional reputation of the
+                                        workshop is crucial.</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Store locations + Map in lightbox -->
+        <section class="container pt-1 pt-sm-2 pt-md-3 pt-lg-4 pt-xl-5 mt-xxl-3">
+            <div class="row row-cols-1 row-cols-md-2 g-0 overflow-hidden rounded-5 mt-5">
+
+                <!-- Map -->
+                <div class="col position-relative">
+                    <div class="ratio ratio-4x3"></div>
+                    <img src="/img/blog/grid/v2/video01.jpg"
+                        class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover" alt="Image">
+                    <div class="position-absolute start-0 bottom-0 d-flex align-items-end w-100 h-100 z-2 p-4">
+                        <a class="btn btn-lg btn-light rounded-pill m-md-2"
+                            href="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d30908.594922615324!2d-73.07331970206108!3d40.788157341303005!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89e8483b8bffed93%3A0x53467ceb834b7397!2s396%20Lillian%20Blvd%2C%20Holbrook%2C%20NY%2011741%2C%20USA!5e0!3m2!1sen!2s!4v1706086459668!5m2!1sen!2s"
+                            data-glightbox="width: 100vw; height: 100vh;" data-gallery="map">
+                            <i class="ci-map fs-lg ms-n1 me-2"></i>
+                            Show on map
+                        </a>
+                    </div>
+                </div>
+
+                <!-- Contact details -->
+                <div class="col bg-body-tertiary order-md-1 py-5 px-4 px-xl-5">
+                    <div class="py-md-4 py-lg-5 px-md-4 px-lg-5">
+                        <h1 class="pb-2 pb-sm-3 pb-lg-0 mb-md-4 mb-lg-5">Our stores</h1>
+                        <ul class="list-unstyled pb-sm-2 mb-0">
+                            <li class="d-flex">
+                                <i class="ci-map-pin fs-lg mt-1"></i>
+                                <span class="ps-2 ms-1">New York 11741, USA<br>396 Lillian Bolavandy, Holbrook</span>
+                            </li>
+                            <li class="nav animate-underline">
+                                <i class="ci-phone fs-lg mt-1 pe-2 me-1"></i>
+                                <a class="nav-link animate-target fs-base fw-normal p-0"
+                                    href="tel:+15053753082">+1&nbsp;50&nbsp;537&nbsp;53&nbsp;082</a>
+                            </li>
+                            <li class="nav animate-underline">
+                                <i class="ci-mail fs-lg mt-1 pe-2 me-1"></i>
+                                <a class="nav-link animate-target fs-base fw-normal p-0"
+                                    href="mailto:info@cartzilla.com">info@cartzilla.com</a>
+                            </li>
+                        </ul>
+                        <hr>
+                        <ul class="list-unstyled pt-sm-2 mb-0">
+                            <li class="d-flex">
+                                <i class="ci-map-pin fs-lg mt-1"></i>
+                                <span class="ps-2 ms-1">California 32806, USA<br>514 S. Magnolia St., San Francisco</span>
+                            </li>
+                            <li class="nav animate-underline">
+                                <i class="ci-phone fs-lg mt-1 pe-2 me-1"></i>
+                                <a class="nav-link animate-target fs-base fw-normal p-0"
+                                    href="tel:+17825640030">+1&nbsp;78&nbsp;256&nbsp;40&nbsp;030</a>
+                            </li>
+                            <li class="nav animate-underline">
+                                <i class="ci-mail fs-lg mt-1 pe-2 me-1"></i>
+                                <a class="nav-link animate-target fs-base fw-normal p-0"
+                                    href="mailto:info@cartzilla.com">info@cartzilla.com</a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Blog grid -->
+        <section class="container py-5 my-2 my-sm-3 my-lg-4 my-xl-5">
+
+            <!-- Heading -->
+            <div class="d-flex align-items-center justify-content-between pb-3 mb-2 mb-sm-3 mt-xxl-3">
+                <h2 class="mb-0">Blog and news</h2>
+                <div class="nav ms-3">
+                    <a class="nav-link animate-underline px-0 py-2" href="{{ route('second', ['blog', 'grid-v2']) }}">
+                        <span class="animate-target">View all</span>
+                        <i class="ci-chevron-right fs-base ms-1"></i>
+                    </a>
+                </div>
+            </div>
+
+            <div class="row gy-5 mb-xxl-3">
+
+                <!-- Article -->
+                <article class="col-md-6">
+                    <a class="ratio d-flex hover-effect-scale rounded-4 overflow-hidden" href="#!"
+                        style="--cz-aspect-ratio: calc(500 / 636 * 100%)">
+                        <img src="/img/blog/grid/v2/15.jpg" class="hover-effect-target" alt="Image">
+                    </a>
+                    <div class="pt-4">
+                        <div class="nav pb-2 mb-1">
+                            <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Home decoration</a>
+                        </div>
+                        <h3 class="h5 mb-3">
+                            <a class="hover-effect-underline" href="#!">Decorate your home for the festive season in
+                                3 easy steps</a>
+                        </h3>
+                        <div class="nav align-items-center gap-2 fs-xs">
+                            <a class="nav-link text-body-secondary fs-xs fw-normal p-0" href="#!">Ava Johnson</a>
+                            <hr class="vr my-1 mx-1">
+                            <span class="text-body-secondary">September 11, 2024</span>
+                        </div>
+                    </div>
+                </article>
+                <div class="col-md-6">
+                    <div class="row row-cols-1 row-cols-sm-2 gy-5">
+
+                        <!-- Article -->
+                        <article class="col">
+                            <a class="ratio d-flex hover-effect-scale rounded-4 overflow-hidden" href="#!"
+                                style="--cz-aspect-ratio: calc(260 / 306 * 100%)">
+                                <img src="/img/blog/grid/v2/10.jpg" class="hover-effect-target" alt="Image">
+                            </a>
+                            <div class="pt-4">
+                                <div class="nav pb-2 mb-1">
+                                    <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Furniture</a>
+                                </div>
+                                <h3 class="h6 mb-3">
+                                    <a class="hover-effect-underline" href="#!">Furnishing your space: a guide to
+                                        choosing the perfect furniture pieces</a>
+                                </h3>
+                                <div class="nav align-items-center gap-2 fs-xs">
+                                    <a class="nav-link text-body-secondary fs-xs fw-normal p-0" href="#!">Oliver
+                                        Harris</a>
+                                    <hr class="vr my-1 mx-1">
+                                    <span class="text-body-secondary">September 5, 2024</span>
+                                </div>
+                            </div>
+                        </article>
+
+                        <!-- Article -->
+                        <article class="col">
+                            <a class="ratio d-flex hover-effect-scale rounded-4 overflow-hidden" href="#!"
+                                style="--cz-aspect-ratio: calc(260 / 306 * 100%)">
+                                <img src="/img/blog/grid/v2/11.jpg" class="hover-effect-target" alt="Image">
+                            </a>
+                            <div class="pt-4">
+                                <div class="nav pb-2 mb-1">
+                                    <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Interior
+                                        design</a>
+                                </div>
+                                <h3 class="h6 mb-3">
+                                    <a class="hover-effect-underline" href="#!">Transform your living space with
+                                        these chic interior design tips</a>
+                                </h3>
+                                <div class="nav align-items-center gap-2 fs-xs">
+                                    <a class="nav-link text-body-secondary fs-xs fw-normal p-0" href="#!">Ethan
+                                        Miller</a>
+                                    <hr class="vr my-1 mx-1">
+                                    <span class="text-body-secondary">August 23, 2024</span>
+                                </div>
+                            </div>
+                        </article>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <!-- Page footer -->
+    <footer class="footer bg-dark pb-4 py-lg-5" data-bs-theme="dark">
+        <div class="container pt-5 pt-lg-4 mt-sm-2 mt-md-3">
+            <div class="row pb-5">
+
+                <!-- Subscription + Social account links -->
+                <div class="col-md col-xl-8 order-md-2">
+                    <div class="text-center px-sm-4 mx-auto" style="max-width: 568px">
+                        <h3 class="pb-1 mb-2">Stay in touch with us</h3>
+                        <p class="fs-sm text-body pb-2 pb-sm-3">Receive the latest updates about our products &amp;
+                            promotions</p>
+                        <form class="needs-validation position-relative" novalidate>
+                            <input type="email" class="form-control form-control-lg rounded-pill text-start"
+                                placeholder="You email" aria-label="Your email address" required>
+                            <div class="invalid-tooltip bg-transparent p-0">Please enter you email address!</div>
+                            <button type="submit"
+                                class="btn btn-icon fs-xl btn-dark rounded-circle position-absolute top-0 end-0 mt-1 me-1"
+                                aria-label="Submit your email address" data-bs-theme="light">
+                                <i class="ci-arrow-up-right"></i>
+                            </button>
+                        </form>
+                        <div class="d-flex justify-content-center gap-2 pt-4 pt-md-5 mt-1 mt-md-0">
+                            <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
+                                data-bs-toggle="tooltip"
+                                data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-white p-0"></div></div>'
+                                title="YouTube" aria-label="Follow us on YouTube">
+                                <i class="ci-youtube"></i>
+                            </a>
+                            <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
+                                data-bs-toggle="tooltip"
+                                data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-white p-0"></div></div>'
+                                title="Facebook" aria-label="Follow us on Facebook">
+                                <i class="ci-facebook"></i>
+                            </a>
+                            <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
+                                data-bs-toggle="tooltip"
+                                data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-white p-0"></div></div>'
+                                title="Instagram" aria-label="Follow us on Instagram">
+                                <i class="ci-instagram"></i>
+                            </a>
+                            <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
+                                data-bs-toggle="tooltip"
+                                data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-white p-0"></div></div>'
+                                title="Telegram" aria-label="Follow us on Telegram">
+                                <i class="ci-telegram"></i>
+                            </a>
+                            <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
+                                data-bs-toggle="tooltip"
+                                data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-white p-0"></div></div>'
+                                title="Pinterest" aria-label="Follow us on Pinterest">
+                                <i class="ci-pinterest"></i>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Category links -->
+                <div class="col-md-auto col-xl-2 text-center order-md-1 pt-4 pt-md-0">
+                    <ul class="nav d-inline-flex flex-md-column justify-content-center align-items-center gap-md-2">
+                        <li class="animate-underline my-1 mx-2 m-md-0">
+                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Bedroom</a>
+                        </li>
+                        <li class="animate-underline my-1 mx-2 m-md-0">
+                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Living room</a>
+                        </li>
+                        <li class="animate-underline my-1 mx-2 m-md-0">
+                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Bathroom</a>
+                        </li>
+                        <li class="animate-underline my-1 mx-2 m-md-0">
+                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Decoration</a>
+                        </li>
+                        <li class="animate-underline my-1 mx-2 m-md-0">
+                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Kitchen</a>
+                        </li>
+                        <li class="animate-underline my-1 mx-2 m-md-0">
+                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Sale</a>
+                        </li>
+                    </ul>
+                </div>
+
+                <!-- Customer links -->
+                <div class="col-md-auto col-xl-2 text-center order-md-3 pt-3 pt-md-0">
+                    <ul class="nav d-inline-flex flex-md-column justify-content-center align-items-center gap-md-2">
+                        <li class="animate-underline my-1 mx-2 m-md-0">
+                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Shipping
+                                options</a>
+                        </li>
+                        <li class="animate-underline my-1 mx-2 m-md-0">
+                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Tracking a
+                                package</a>
+                        </li>
+                        <li class="animate-underline my-1 mx-2 m-md-0">
+                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Help center</a>
+                        </li>
+                        <li class="animate-underline my-1 mx-2 m-md-0">
+                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Contact us</a>
+                        </li>
+                        <li class="animate-underline my-1 mx-2 m-md-0">
+                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Product
+                                returns</a>
+                        </li>
+                        <li class="animate-underline my-1 mx-2 m-md-0">
+                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Locations</a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+
+            <!-- Copyright -->
+            <p class="fs-xs text-body text-center pt-lg-4 mt-n2 mt-md-0 mb-0">
+                &copy; All rights reserved. Made by <span class="animate-underline"><a
+                        class="animate-target text-white text-decoration-none" href="https://coderthemes.com/"
+                        target="_blank" rel="noreferrer">Coderthemes</a></span>
+            </p>
+        </div>
+    </footer>
+
+@endsection
+
+@section('scripts')
+@endsection
diff --git a/resources/views/account/addresses.blade.php b/resources/views/account/addresses.blade.php
new file mode 100644
index 0000000..47cd01e
--- /dev/null
+++ b/resources/views/account/addresses.blade.php
@@ -0,0 +1,283 @@
+@extends('layouts.account', ['title' => 'Account - Addresses'])
+
+@section('content')
+    <!-- Addresses content -->
+    <div class="col-lg-9">
+        <div class="ps-lg-3 ps-xl-0">
+
+            <!-- Page title -->
+            <h1 class="h2 mb-1 mb-sm-2">Addresses</h1>
+
+            <!-- Primary shipping address -->
+            <div class="border-bottom py-4">
+                <div class="nav flex-nowrap align-items-center justify-content-between pb-1 mb-3">
+                    <div class="d-flex align-items-center gap-3 me-4">
+                        <h2 class="h6 mb-0">Shipping address</h2>
+                        <span class="badge text-bg-info rounded-pill">Primary</span>
+                    </div>
+                    <a class="nav-link hiding-collapse-toggle text-decoration-underline p-0 collapsed" href=".primary-address"
+                        data-bs-toggle="collapse" aria-expanded="false"
+                        aria-controls="primaryAddressPreview primaryAddressEdit">Edit</a>
+                </div>
+                <div class="collapse primary-address show" id="primaryAddressPreview">
+                    <ul class="list-unstyled fs-sm m-0">
+                        <li>New York 11741, USA</li>
+                        <li>396 Lillian Bolavandy, Holbrook</li>
+                    </ul>
+                </div>
+                <div class="collapse primary-address" id="primaryAddressEdit">
+                    <form class="row g-3 g-sm-4 needs-validation" novalidate>
+                        <div class="col-sm-6">
+                            <div class="position-relative">
+                                <label class="form-label">Country</label>
+                                <select class="form-select" data-select='{"searchEnabled": true}'
+                                    aria-label="Select country" required>
+                                    <option value="">Select country...</option>
+                                    <optgroup label="Africa">
+                                        <option value="Nigeria">Nigeria</option>
+                                        <option value="South Africa">South Africa</option>
+                                        <option value="Kenya">Kenya</option>
+                                        <option value="Egypt">Egypt</option>
+                                        <option value="Ethiopia">Ethiopia</option>
+                                    </optgroup>
+                                    <optgroup label="Asia">
+                                        <option value="China">China</option>
+                                        <option value="India">India</option>
+                                        <option value="Japan">Japan</option>
+                                        <option value="South Korea">South Korea</option>
+                                        <option value="Saudi Arabia">Saudi Arabia</option>
+                                    </optgroup>
+                                    <optgroup label="Europe">
+                                        <option value="Germany">Germany</option>
+                                        <option value="France">France</option>
+                                        <option value="United Kingdom">United Kingdom</option>
+                                        <option value="Italy">Italy</option>
+                                        <option value="Spain">Spain</option>
+                                    </optgroup>
+                                    <optgroup label="North America">
+                                        <option value="United States" selected>United States</option>
+                                        <option value="Canada">Canada</option>
+                                        <option value="Mexico">Mexico</option>
+                                        <option value="Jamaica">Jamaica</option>
+                                        <option value="Costa Rica">Costa Rica</option>
+                                    </optgroup>
+                                    <optgroup label="South America">
+                                        <option value="Brazil">Brazil</option>
+                                        <option value="Argentina">Argentina</option>
+                                        <option value="Colombia">Colombia</option>
+                                        <option value="Chile">Chile</option>
+                                        <option value="Peru">Peru</option>
+                                    </optgroup>
+                                    <optgroup label="Oceania">
+                                        <option value="Australia">Australia</option>
+                                        <option value="New Zealand">New Zealand</option>
+                                        <option value="Papua New Guinea">Papua New Guinea</option>
+                                        <option value="Fiji">Fiji</option>
+                                        <option value="Solomon Islands">Solomon Islands</option>
+                                    </optgroup>
+                                </select>
+                                <div class="invalid-feedback">Please select your country!</div>
+                            </div>
+                        </div>
+                        <div class="col-sm-6">
+                            <div class="position-relative">
+                                <label class="form-label">City</label>
+                                <select class="form-select" data-select='{"searchEnabled": true}' aria-label="Select city"
+                                    required>
+                                    <option value="">Select city...</option>
+                                    <option value="Austin">Austin</option>
+                                    <option value="Charlotte">Charlotte</option>
+                                    <option value="Chicago">Chicago</option>
+                                    <option value="Columbus">Columbus</option>
+                                    <option value="Dallas">Dallas</option>
+                                    <option value="Houston">Houston</option>
+                                    <option value="Jacksonville">Jacksonville</option>
+                                    <option value="Los Angeles">Los Angeles</option>
+                                    <option value="New York" selected>New York</option>
+                                    <option value="Orlando">Orlando</option>
+                                    <option value="Philadelphia">Philadelphia</option>
+                                    <option value="Phoenix">Phoenix</option>
+                                    <option value="San Antonio">San Antonio</option>
+                                    <option value="San Diego">San Diego</option>
+                                    <option value="San Jose">San Jose</option>
+                                </select>
+                                <div class="invalid-feedback">Please select your city!</div>
+                            </div>
+                        </div>
+                        <div class="col-sm-4">
+                            <div class="position-relative">
+                                <label for="psa-zip" class="form-label">ZIP code</label>
+                                <input type="text" class="form-control" id="psa-zip" value="11741" required>
+                                <div class="invalid-feedback">Please enter your ZIP code!</div>
+                            </div>
+                        </div>
+                        <div class="col-sm-8">
+                            <div class="position-relative">
+                                <label for="psa-address" class="form-label">Address</label>
+                                <input type="text" class="form-control" id="psa-address"
+                                    value="396 Lillian Bolavandy, Holbrook" required>
+                                <div class="invalid-feedback">Please enter your address!</div>
+                            </div>
+                        </div>
+                        <div class="col-12">
+                            <div class="form-check mb-0">
+                                <input type="checkbox" class="form-check-input" id="set-primary-1" checked>
+                                <label for="set-primary-1" class="form-check-label">Set as primary
+                                    address</label>
+                            </div>
+                        </div>
+                        <div class="col-12">
+                            <div class="d-flex gap-3 pt-2 pt-sm-0">
+                                <button type="submit" class="btn btn-primary">Save changes</button>
+                                <button type="button" class="btn btn-secondary" data-bs-toggle="collapse"
+                                    data-bs-target=".primary-address" aria-expanded="true"
+                                    aria-controls="primaryAddressPreview primaryAddressEdit">Close</button>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </div>
+
+            <!-- Alternative shipping address -->
+            <div class="border-bottom py-4">
+                <div class="nav flex-nowrap align-items-center justify-content-between pb-1 mb-3">
+                    <div class="d-flex align-items-center gap-3 me-4">
+                        <h2 class="h6 mb-0">Alternative shipping address</h2>
+                    </div>
+                    <a class="nav-link hiding-collapse-toggle text-decoration-underline p-0 collapsed"
+                        href=".alternative-address" data-bs-toggle="collapse" aria-expanded="false"
+                        aria-controls="alternativeAddressPreview alternativeAddressEdit">Edit</a>
+                </div>
+                <div class="collapse alternative-address show" id="alternativeAddressPreview">
+                    <ul class="list-unstyled fs-sm m-0">
+                        <li>Florida 32806, USA</li>
+                        <li>514 S. Magnolia St., Orlando</li>
+                    </ul>
+                </div>
+                <div class="collapse alternative-address" id="alternativeAddressEdit">
+                    <form class="row g-3 g-sm-4 needs-validation" novalidate>
+                        <div class="col-sm-6">
+                            <div class="position-relative">
+                                <label class="form-label">Country</label>
+                                <select class="form-select" data-select='{"searchEnabled": true}'
+                                    aria-label="Select country" required>
+                                    <option value="">Select country...</option>
+                                    <optgroup label="Africa">
+                                        <option value="Nigeria">Nigeria</option>
+                                        <option value="South Africa">South Africa</option>
+                                        <option value="Kenya">Kenya</option>
+                                        <option value="Egypt">Egypt</option>
+                                        <option value="Ethiopia">Ethiopia</option>
+                                    </optgroup>
+                                    <optgroup label="Asia">
+                                        <option value="China">China</option>
+                                        <option value="India">India</option>
+                                        <option value="Japan">Japan</option>
+                                        <option value="South Korea">South Korea</option>
+                                        <option value="Saudi Arabia">Saudi Arabia</option>
+                                    </optgroup>
+                                    <optgroup label="Europe">
+                                        <option value="Germany">Germany</option>
+                                        <option value="France">France</option>
+                                        <option value="United Kingdom">United Kingdom</option>
+                                        <option value="Italy">Italy</option>
+                                        <option value="Spain">Spain</option>
+                                    </optgroup>
+                                    <optgroup label="North America">
+                                        <option value="United States" selected>United States</option>
+                                        <option value="Canada">Canada</option>
+                                        <option value="Mexico">Mexico</option>
+                                        <option value="Jamaica">Jamaica</option>
+                                        <option value="Costa Rica">Costa Rica</option>
+                                    </optgroup>
+                                    <optgroup label="South America">
+                                        <option value="Brazil">Brazil</option>
+                                        <option value="Argentina">Argentina</option>
+                                        <option value="Colombia">Colombia</option>
+                                        <option value="Chile">Chile</option>
+                                        <option value="Peru">Peru</option>
+                                    </optgroup>
+                                    <optgroup label="Oceania">
+                                        <option value="Australia">Australia</option>
+                                        <option value="New Zealand">New Zealand</option>
+                                        <option value="Papua New Guinea">Papua New Guinea</option>
+                                        <option value="Fiji">Fiji</option>
+                                        <option value="Solomon Islands">Solomon Islands</option>
+                                    </optgroup>
+                                </select>
+                                <div class="invalid-feedback">Please select your country!</div>
+                            </div>
+                        </div>
+                        <div class="col-sm-6">
+                            <div class="position-relative">
+                                <label class="form-label">City</label>
+                                <select class="form-select" data-select='{"searchEnabled": true}'
+                                    aria-label="Select city" required>
+                                    <option value="">Select city...</option>
+                                    <option value="Austin">Austin</option>
+                                    <option value="Charlotte">Charlotte</option>
+                                    <option value="Chicago">Chicago</option>
+                                    <option value="Columbus">Columbus</option>
+                                    <option value="Dallas">Dallas</option>
+                                    <option value="Houston">Houston</option>
+                                    <option value="Jacksonville">Jacksonville</option>
+                                    <option value="Los Angeles">Los Angeles</option>
+                                    <option value="New York">New York</option>
+                                    <option value="Orlando" selected>Orlando</option>
+                                    <option value="Philadelphia">Philadelphia</option>
+                                    <option value="Phoenix">Phoenix</option>
+                                    <option value="San Antonio">San Antonio</option>
+                                    <option value="San Diego">San Diego</option>
+                                    <option value="San Jose">San Jose</option>
+                                </select>
+                                <div class="invalid-feedback">Please select your city!</div>
+                            </div>
+                        </div>
+                        <div class="col-sm-4">
+                            <div class="position-relative">
+                                <label for="asa-zip" class="form-label">ZIP code</label>
+                                <input type="text" class="form-control" id="asa-zip" value="32806" required>
+                                <div class="invalid-feedback">Please enter your ZIP code!</div>
+                            </div>
+                        </div>
+                        <div class="col-sm-8">
+                            <div class="position-relative">
+                                <label for="asa-address" class="form-label">Address</label>
+                                <input type="text" class="form-control" id="asa-address" value="514 S. Magnolia St."
+                                    required>
+                                <div class="invalid-feedback">Please enter your address!</div>
+                            </div>
+                        </div>
+                        <div class="col-12">
+                            <div class="form-check mb-0">
+                                <input type="checkbox" class="form-check-input" id="set-primary-2">
+                                <label for="set-primary-2" class="form-check-label">Set as primary
+                                    address</label>
+                            </div>
+                        </div>
+                        <div class="col-12">
+                            <div class="d-flex gap-3 pt-2 pt-sm-0">
+                                <button type="submit" class="btn btn-primary">Save changes</button>
+                                <button type="button" class="btn btn-secondary" data-bs-toggle="collapse"
+                                    data-bs-target=".alternative-address" aria-expanded="true"
+                                    aria-controls="alternativeAddressPreview alternativeAddressEdit">Close</button>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </div>
+
+            <!-- Add address button -->
+            <div class="nav pt-4">
+                <a class="nav-link animate-underline fs-base px-0" href="#newAddressModal" data-bs-toggle="modal">
+                    <i class="ci-plus fs-lg ms-n1 me-2"></i>
+                    <span class="animate-target">Add address</span>
+                </a>
+            </div>
+        </div>
+    </div>
+    
+@endsection
+
+@section('scripts')
+@endsection
diff --git a/resources/views/account/info.blade.php b/resources/views/account/info.blade.php
new file mode 100644
index 0000000..93d2bbb
--- /dev/null
+++ b/resources/views/account/info.blade.php
@@ -0,0 +1,203 @@
+@extends('layouts.account', ['title' => 'Account - Personal Info'])
+
+@section('content')
+    <!-- Personal info content -->
+    <div class="col-lg-9">
+        <div class="ps-lg-3 ps-xl-0">
+            <!-- Page title -->
+            <h1 class="h2 mb-1 mb-sm-2">Personal info</h1>
+            <!-- Basic info -->
+            <div class="border-bottom py-4">
+                <div class="nav flex-nowrap align-items-center justify-content-between pb-1 mb-3">
+                    <h2 class="h6 mb-0">Basic info</h2>
+                    <a aria-controls="basicInfoPreview basicInfoEdit" aria-expanded="false"
+                        class="nav-link hiding-collapse-toggle text-decoration-underline p-0 collapsed"
+                        data-bs-toggle="collapse" href=".basic-info">Edit</a>
+                </div>
+                <div class="collapse basic-info show" id="basicInfoPreview">
+                    <ul class="list-unstyled fs-sm m-0">
+                        <li>Susan Gardner</li>
+                        <li>May 12, 1996</li>
+                        <li>English</li>
+                    </ul>
+                </div>
+                <div class="collapse basic-info" id="basicInfoEdit">
+                    <form class="row g-3 g-sm-4 needs-validation" novalidate="">
+                        <div class="col-sm-6">
+                            <label class="form-label" for="fn">First name</label>
+                            <div class="position-relative">
+                                <input class="form-control" id="fn" required="" type="text" value="Susan" />
+                                <div class="invalid-feedback">Please enter your first name!</div>
+                            </div>
+                        </div>
+                        <div class="col-sm-6">
+                            <label class="form-label" for="ln">Last name</label>
+                            <div class="position-relative">
+                                <input class="form-control" id="ln" required="" type="text" value="Gardner" />
+                                <div class="invalid-feedback">Please enter your last name!</div>
+                            </div>
+                        </div>
+                        <div class="col-sm-6">
+                            <label class="form-label" for="birthdate">Date of birth</label>
+                            <div class="position-relative">
+                                <input class="form-control form-icon-end"
+                                    data-datepicker='{
+                          "dateFormat": "F j, Y",
+                          "defaultDate": "May 15, 1996"
+                        }'
+                                    id="birthdate" placeholder="Choose date" type="text" />
+                                <i class="ci-calendar position-absolute top-50 end-0 translate-middle-y me-3"></i>
+                            </div>
+                        </div>
+                        <div class="col-sm-6">
+                            <label class="form-label">Language</label>
+                            <select class="form-select"
+                                data-select='{
+                        "placeholderValue": "Select language",
+                        "choices": [
+                          {
+                            "value": "",
+                            "label": "Select language",
+                            "placeholder": true
+                          },
+                          {
+                            "value": "English",
+                            "label": "&lt;div class=\"d-flex align-items-center\"&gt;&lt;img src=\"/img/flags/en-us.png\" class=\"flex-shrink-0 me-2\" width=\"20\" alt=\"English\"&gt; English&lt;/div&gt;",
+                            "selected": true
+                          },
+                          {
+                            "value": "Français",
+                            "label": "&lt;div class=\"d-flex align-items-center\"&gt;&lt;img src=\"/img/flags/fr.png\" class=\"flex-shrink-0 me-2\" width=\"20\" alt=\"Français\"&gt; Français&lt;/div&gt;"
+                          },
+                          {
+                            "value": "Deutsch",
+                            "label": "&lt;div class=\"d-flex align-items-center\"&gt;&lt;img src=\"/img/flags/de.png\" class=\"flex-shrink-0 me-2\" width=\"20\" alt=\"Deutsch\"&gt; Deutsch&lt;/div&gt;"
+                          },
+                          {
+                            "value": "Italiano",
+                            "label": "&lt;div class=\"d-flex align-items-center\"&gt;&lt;img src=\"/img/flags/it.png\" class=\"flex-shrink-0 me-2\" width=\"20\" alt=\"Italiano\"&gt; Italiano&lt;/div&gt;"
+                          }
+                        ]
+                      }'
+                                data-select-template="true"></select>
+                        </div>
+                        <div class="col-12">
+                            <div class="d-flex gap-3 pt-2 pt-sm-0">
+                                <button class="btn btn-primary" type="submit">Save changes</button>
+                                <button aria-controls="basicInfoPreview basicInfoEdit" aria-expanded="true"
+                                    class="btn btn-secondary" data-bs-target=".basic-info" data-bs-toggle="collapse"
+                                    type="button">Close</button>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </div>
+            <!-- Contact -->
+            <div class="border-bottom py-4">
+                <div class="nav flex-nowrap align-items-center justify-content-between pb-1 mb-3">
+                    <div class="d-flex align-items-center gap-3 me-4">
+                        <h2 class="h6 mb-0">Contact</h2>
+                    </div>
+                    <a aria-controls="contactInfoPreview contactInfoEdit" aria-expanded="false"
+                        class="nav-link hiding-collapse-toggle text-decoration-underline p-0 collapsed"
+                        data-bs-toggle="collapse" href=".contact-info">Edit</a>
+                </div>
+                <div class="collapse contact-info show" id="contactInfoPreview">
+                    <ul class="list-unstyled fs-sm m-0">
+                        <li class="mb-1">susan.gardner@email.com</li>
+                        <li>+1 (805) 348 95 72 <span class="text-success ms-1">Verified</span></li>
+                    </ul>
+                </div>
+                <div class="collapse contact-info" id="contactInfoEdit">
+                    <form class="row g-3 g-sm-4 needs-validation" novalidate="">
+                        <div class="col-sm-6">
+                            <label class="form-label" for="email">Email address</label>
+                            <div class="position-relative">
+                                <input class="form-control" id="email" required="" type="email"
+                                    value="susan.gardner@email.com" />
+                                <div class="invalid-feedback">Please enter a valid email address!</div>
+                            </div>
+                        </div>
+                        <div class="col-sm-6">
+                            <label class="form-label" for="phone">Phone number</label>
+                            <div class="position-relative">
+                                <input class="form-control"
+                                    data-input-format='{"numericOnly": true, "delimiters": ["+1 (", ")", " "], "blocks": [0, 3, 0, 3, 2, 2]}'
+                                    id="phone" placeholder="+1 (___) ___ __ __" required="" type="text"
+                                    value="+1 (805) 348 95 72" />
+                                <div class="invalid-feedback">Please enter your phone number!</div>
+                            </div>
+                        </div>
+                        <div class="col-12">
+                            <div class="d-flex gap-3 pt-2 pt-sm-0">
+                                <button class="btn btn-primary" type="submit">Save changes</button>
+                                <button aria-controls="contactInfoPreview contactInfoEdit" aria-expanded="true"
+                                    class="btn btn-secondary" data-bs-target=".contact-info" data-bs-toggle="collapse"
+                                    type="button">Close</button>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </div>
+            <!-- Password -->
+            <div class="border-bottom py-4">
+                <div class="nav flex-nowrap align-items-center justify-content-between pb-1 mb-3">
+                    <div class="d-flex align-items-center gap-3 me-4">
+                        <h2 class="h6 mb-0">Password</h2>
+                    </div>
+                    <a aria-controls="passChangePreview passChangeEdit" aria-expanded="false"
+                        class="nav-link hiding-collapse-toggle text-decoration-underline p-0 collapsed"
+                        data-bs-toggle="collapse" href=".password-change">Edit</a>
+                </div>
+                <div class="collapse password-change show" id="passChangePreview">
+                    <ul class="list-unstyled fs-sm m-0">
+                        <li>**************</li>
+                    </ul>
+                </div>
+                <div class="collapse password-change" id="passChangeEdit">
+                    <form class="row g-3 g-sm-4 needs-validation" novalidate="">
+                        <div class="col-sm-6">
+                            <label class="form-label" for="current-password">Current password</label>
+                            <div class="password-toggle">
+                                <input class="form-control" id="current-password"
+                                    placeholder="Enter your current password" required="" type="password" />
+                                <label aria-label="Show/hide password" class="password-toggle-button">
+                                    <input class="btn-check" type="checkbox" />
+                                </label>
+                            </div>
+                        </div>
+                        <div class="col-sm-6">
+                            <label class="form-label" for="new-password">New password</label>
+                            <div class="password-toggle">
+                                <input class="form-control" id="new-password" placeholder="Create new password"
+                                    required="" type="password" />
+                                <label aria-label="Show/hide password" class="password-toggle-button">
+                                    <input class="btn-check" type="checkbox" />
+                                </label>
+                            </div>
+                        </div>
+                        <div class="col-12">
+                            <div class="d-flex gap-3 pt-2 pt-sm-0">
+                                <button class="btn btn-primary" type="submit">Save changes</button>
+                                <button aria-controls="passChangePreview passChangeEdit" aria-expanded="true"
+                                    class="btn btn-secondary" data-bs-target=".password-change" data-bs-toggle="collapse"
+                                    type="button">Close</button>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </div>
+            <!-- Delete account -->
+            <div class="pt-3 mt-2 mt-sm-3">
+                <h2 class="h6">Delete account</h2>
+                <p class="fs-sm">When you delete your account, your public profile will be deactivated
+                    immediately. If you change your mind before the 14 days are up, sign in with your email and
+                    password, and we'll send you a link to reactivate your account.</p>
+                <a class="text-danger fs-sm fw-medium" href="#!">Delete account</a>
+            </div>
+        </div>
+    </div>
+@endsection
+
+@section('scripts')
+@endsection
diff --git a/resources/views/account/marketplace-dashboard.blade.php b/resources/views/account/marketplace-dashboard.blade.php
new file mode 100644
index 0000000..e5db9e6
--- /dev/null
+++ b/resources/views/account/marketplace-dashboard.blade.php
@@ -0,0 +1,328 @@
+@extends('layouts.marketplace', ['title' => 'Marketplace Account - Dashboard'])
+
+@section('content')
+    <!-- Dashboard content -->
+    <div class="col-lg-9 pt-2 pt-xl-3">
+        <!-- Header -->
+        <div class="d-flex align-items-center justify-content-between gap-3 pb-3 mb-2 mb-md-3">
+            <h1 class="h2 mb-0">Dashboard</h1>
+            <div class="position-relative" style="width: 190px">
+                <i class="ci-calendar position-absolute top-50 start-0 translate-middle-y z-1 ms-3"></i>
+                <select aria-label="Period select" class="form-select form-icon-start rounded-pill"
+                    data-select='{
+                  "classNames": {
+                    "containerInner": ["form-select", "form-icon-start", "rounded-pill"]
+                  },
+                  "removeItemButton": false
+                }'>
+                    <option value="Current">Current month</option>
+                    <option value="Last month">Last month</option>
+                    <option value="Last 3 months">Last 3 months</option>
+                    <option value="Last 6 months">Last 6 months</option>
+                    <option value="Last year">Last year</option>
+                </select>
+            </div>
+        </div>
+        <!-- Stats -->
+        <div class="row g-3 g-xl-4 pb-3 mb-2 mb-sm-3">
+            <div class="col-md-4 col-sm-6">
+                <div class="h-100 bg-success-subtle rounded-4 text-center p-4">
+                    <h2 class="fs-sm pb-2 mb-1">Earnings (before taxes)</h2>
+                    <div class="h2 pb-1 mb-2">$842.00</div>
+                    <p class="fs-sm text-body-secondary mb-0">Sales 01/09/2024 - 13/09/2024</p>
+                </div>
+            </div>
+            <div class="col-md-4 col-sm-6">
+                <div class="h-100 bg-info-subtle rounded-4 text-center p-4">
+                    <h2 class="fs-sm pb-2 mb-1">Your balance</h2>
+                    <div class="h2 pb-1 mb-2">$735.00</div>
+                    <p class="fs-sm text-body-secondary mb-0">To be paid on 15/09/2024</p>
+                </div>
+            </div>
+            <div class="col-md-4 col-sm-12">
+                <div class="h-100 bg-warning-subtle rounded-4 text-center p-4">
+                    <h2 class="fs-sm pb-2 mb-1">Lifetime earnings</h2>
+                    <div class="h2 pb-1 mb-2">$9,156.74</div>
+                    <p class="fs-sm text-body-secondary mb-0">Based on list price</p>
+                </div>
+            </div>
+        </div>
+        <!-- Earnings chart -->
+        <div class="pb-3 mb-2 mb-sm-3">
+            <div class="border rounded-4 py-4 px-3 px-sm-4">
+                <h2 class="h5 text-center text-sm-start mb-sm-4">Earnings history</h2>
+                <canvas
+                    data-chart='{
+                  "type": "line",
+                  "data": {
+                    "labels": ["22 Aug", "", "24 Aug", "", "26 Aug", "", "28 Aug", "", "30 Aug", "", "01 Sep", "", "03 Sep", "", "05 Sep"],
+                    "datasets": [
+                      {
+                        "label": "Sales, USD",
+                        "fill": true,
+                        "data": [0, 100, 200, 175, 100, 50, 75, 0, 0, 50, 50, 50, 0, 100, 0],
+                        "backgroundColor": "rgba(51,179,107,.1)",
+                        "borderWidth": 2,
+                        "borderColor": "rgba(51,179,107,.6)",
+                        "pointBackgroundColor": "#33b36b",
+                        "pointBorderWidth": 3,
+                        "pointBorderColor": "#33b36b",
+                        "pointHoverBorderColor": "#33b36b",
+                        "pointHoverBorderWidth": 6
+                      }
+                    ]
+                  },
+                  "options": {
+                    "responsive": true,
+                    "scales": {
+                      "y": {
+                        "beginAtZero": true,
+                        "border": {
+                          "color": "rgba(133,140,151,.18)"
+                        },
+                        "grid": {
+                          "color": "rgba(133,140,151,.18)"
+                        }
+                      },
+                      "x": {
+                        "border": {
+                          "color": "rgba(133,140,151,.18)"
+                        },
+                        "grid": {
+                          "color": "rgba(133,140,151,.18)"
+                        }
+                      }
+                    }
+                  }
+                }'></canvas>
+            </div>
+        </div>
+        <!-- Most recent sales -->
+        <div class="border rounded-4 py-4 px-3 px-sm-4">
+            <div
+                data-filter-list='{"searchClass": "product-search", "listClass": "product-list", "sortClass": "product-sort", "valueNames": ["product", "date", "tendered", "earning"]}'>
+                <div
+                    class="d-flex flex-column flex-sm-row align-items-center justify-content-between gap-3 mb-2 mb-sm-3 mb-md-4">
+                    <h2 class="h5 text-center text-sm-start mb-0">Most recent sales</h2>
+                    <div class="position-relative w-100" style="max-width: 250px">
+                        <i class="ci-search position-absolute top-50 start-0 translate-middle-y ms-3"></i>
+                        <input class="product-search form-control form-icon-start rounded-pill" placeholder="Search"
+                            type="search" />
+                    </div>
+                </div>
+                <table class="table align-middle fs-sm mb-0">
+                    <thead>
+                        <tr>
+                            <th class="ps-0" scope="col">
+                                <span class="fw-normal text-body">Product</span>
+                            </th>
+                            <th class="d-none d-md-table-cell" scope="col">
+                                <button class="btn fw-normal text-body product-sort p-0" data-sort="date"
+                                    type="button">Date</button>
+                            </th>
+                            <th class="d-none d-md-table-cell" scope="col">
+                                <span class="fw-normal text-body">Status</span>
+                            </th>
+                            <th class="text-end d-none d-sm-table-cell" scope="col">
+                                <button class="btn fw-normal text-body product-sort p-0 me-n2" data-sort="tendered"
+                                    type="button">Tendered</button>
+                            </th>
+                            <th class="text-end pe-0" scope="col">
+                                <button class="btn fw-normal text-body product-sort p-0 me-n2" data-sort="earning"
+                                    type="button">Earning</button>
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody class="product-list">
+                        <!-- Item -->
+                        <tr>
+                            <td class="py-3 ps-0">
+                                <div
+                                    class="d-flex align-items-start align-items-md-center hover-effect-scale position-relative">
+                                    <div class="ratio bg-body-secondary rounded-2 overflow-hidden flex-shrink-0"
+                                        style="--cz-aspect-ratio: calc(52 / 66 * 100%); width: 66px">
+                                        <img alt="Image" class="hover-effect-target"
+                                            src="/img/account/products/03.jpg" />
+                                    </div>
+                                    <div class="ps-2 ms-1">
+                                        <span
+                                            class="badge fs-xs text-info bg-info-subtle rounded-pill d-md-none mb-1">Pending</span>
+                                        <h6 class="product mb-1 mb-md-0">
+                                            <a class="fs-sm fw-medium hover-effect-underline stretched-link"
+                                                href="{{ route('second', ['shop', 'product-marketplace']) }}">iPhone
+                                                15 pro mockups</a>
+                                        </h6>
+                                        <div class="fs-body-emphasis d-sm-none mb-1">$19.00</div>
+                                        <div class="fs-body-emphasis d-md-none">June 30, 2024</div>
+                                    </div>
+                                </div>
+                            </td>
+                            <td class="d-none d-md-table-cell py-3">June 30, 2024<span
+                                    class="date visually-hidden">1719745200</span></td>
+                            <td class="d-none d-md-table-cell py-3">
+                                <span class="badge fs-xs text-info bg-info-subtle rounded-pill">Pending</span>
+                            </td>
+                            <td class="tendered text-end d-none d-sm-table-cell py-3">$19.00</td>
+                            <td class="earning text-end py-3 pe-0">$14.25</td>
+                        </tr>
+                        <!-- Item -->
+                        <tr>
+                            <td class="py-3 ps-0">
+                                <div
+                                    class="d-flex align-items-start align-items-md-center hover-effect-scale position-relative">
+                                    <div class="ratio bg-body-secondary rounded-2 overflow-hidden flex-shrink-0"
+                                        style="--cz-aspect-ratio: calc(52 / 66 * 100%); width: 66px">
+                                        <img alt="Image" class="hover-effect-target"
+                                            src="/img/account/products/04.jpg" />
+                                    </div>
+                                    <div class="ps-2 ms-1">
+                                        <span
+                                            class="badge fs-xs text-success bg-success-subtle rounded-pill d-md-none mb-1">Completed</span>
+                                        <h6 class="product mb-1 mb-md-0">
+                                            <a class="fs-sm fw-medium hover-effect-underline stretched-link"
+                                                href="{{ route('second', ['shop', 'product-marketplace']) }}">A
+                                                collection of colorful
+                                                items</a>
+                                        </h6>
+                                        <div class="fs-body-emphasis d-sm-none mb-1">$21.00</div>
+                                        <div class="fs-body-emphasis d-md-none">June 29, 2024</div>
+                                    </div>
+                                </div>
+                            </td>
+                            <td class="d-none d-md-table-cell py-3">June 29, 2024<span
+                                    class="date visually-hidden">1719658800</span></td>
+                            <td class="d-none d-md-table-cell py-3">
+                                <span class="badge fs-xs text-success bg-success-subtle rounded-pill">Completed</span>
+                            </td>
+                            <td class="tendered text-end d-none d-sm-table-cell py-3">$21.00</td>
+                            <td class="earning text-end py-3 pe-0">$15.75</td>
+                        </tr>
+                        <!-- Item -->
+                        <tr>
+                            <td class="py-3 ps-0">
+                                <div
+                                    class="d-flex align-items-start align-items-md-center hover-effect-scale position-relative">
+                                    <div class="ratio bg-body-secondary rounded-2 overflow-hidden flex-shrink-0"
+                                        style="--cz-aspect-ratio: calc(52 / 66 * 100%); width: 66px">
+                                        <img alt="Image" class="hover-effect-target"
+                                            src="/img/account/products/05.jpg" />
+                                    </div>
+                                    <div class="ps-2 ms-1">
+                                        <span
+                                            class="badge fs-xs text-success bg-success-subtle rounded-pill d-md-none mb-1">Completed</span>
+                                        <h6 class="product mb-1 mb-md-0">
+                                            <a class="fs-sm fw-medium hover-effect-underline stretched-link"
+                                                href="{{ route('second', ['shop', 'product-marketplace']) }}">House
+                                                plants website
+                                                template</a>
+                                        </h6>
+                                        <div class="fs-body-emphasis d-sm-none mb-1">$35.00</div>
+                                        <div class="fs-body-emphasis d-md-none">June 28, 2024</div>
+                                    </div>
+                                </div>
+                            </td>
+                            <td class="d-none d-md-table-cell py-3">June 28, 2024<span
+                                    class="date visually-hidden">1719572400</span></td>
+                            <td class="d-none d-md-table-cell py-3">
+                                <span class="badge fs-xs text-success bg-success-subtle rounded-pill">Completed</span>
+                            </td>
+                            <td class="tendered text-end d-none d-sm-table-cell py-3">$35.00</td>
+                            <td class="earning text-end py-3 pe-0">$26.25</td>
+                        </tr>
+                        <!-- Item -->
+                        <tr>
+                            <td class="py-3 ps-0">
+                                <div
+                                    class="d-flex align-items-start align-items-md-center hover-effect-scale position-relative">
+                                    <div class="ratio bg-body-secondary rounded-2 overflow-hidden flex-shrink-0"
+                                        style="--cz-aspect-ratio: calc(52 / 66 * 100%); width: 66px">
+                                        <img alt="Image" class="hover-effect-target"
+                                            src="/img/account/products/07.jpg" />
+                                    </div>
+                                    <div class="ps-2 ms-1">
+                                        <span
+                                            class="badge fs-xs text-success bg-success-subtle rounded-pill d-md-none mb-1">Completed</span>
+                                        <h6 class="product mb-1 mb-md-0">
+                                            <a class="fs-sm fw-medium hover-effect-underline stretched-link"
+                                                href="{{ route('second', ['shop', 'product-marketplace']) }}">A
+                                                stunning set of tablet pro
+                                                mockups</a>
+                                        </h6>
+                                        <div class="fs-body-emphasis d-sm-none mb-1">$18.00</div>
+                                        <div class="fs-body-emphasis d-md-none">June 27, 2024</div>
+                                    </div>
+                                </div>
+                            </td>
+                            <td class="d-none d-md-table-cell py-3">June 27, 2024<span
+                                    class="date visually-hidden">1719486000</span></td>
+                            <td class="d-none d-md-table-cell py-3">
+                                <span class="badge fs-xs text-success bg-success-subtle rounded-pill">Completed</span>
+                            </td>
+                            <td class="tendered text-end d-none d-sm-table-cell py-3">$18.00</td>
+                            <td class="earning text-end py-3 pe-0">$13.50</td>
+                        </tr>
+                        <!-- Item -->
+                        <tr>
+                            <td class="py-3 ps-0">
+                                <div
+                                    class="d-flex align-items-start align-items-md-center hover-effect-scale position-relative">
+                                    <div class="ratio bg-body-secondary rounded-2 overflow-hidden flex-shrink-0"
+                                        style="--cz-aspect-ratio: calc(52 / 66 * 100%); width: 66px">
+                                        <img alt="Image" class="hover-effect-target"
+                                            src="/img/account/products/08.jpg" />
+                                    </div>
+                                    <div class="ps-2 ms-1">
+                                        <span
+                                            class="badge fs-xs text-danger bg-danger-subtle rounded-pill d-md-none mb-1">Canceled</span>
+                                        <h6 class="product mb-1 mb-md-0">
+                                            <a class="fs-sm fw-medium hover-effect-underline stretched-link"
+                                                href="{{ route('second', ['shop', 'product-marketplace']) }}">Multi
+                                                device mockup PSD</a>
+                                        </h6>
+                                        <div class="fs-body-emphasis d-sm-none mb-1">$27.00</div>
+                                        <div class="fs-body-emphasis d-md-none">June 26, 2024</div>
+                                    </div>
+                                </div>
+                            </td>
+                            <td class="d-none d-md-table-cell py-3">June 26, 2024<span
+                                    class="date visually-hidden">1719399600</span></td>
+                            <td class="d-none d-md-table-cell py-3">
+                                <span class="badge fs-xs text-danger bg-danger-subtle rounded-pill">Canceled</span>
+                            </td>
+                            <td class="tendered text-end d-none d-sm-table-cell py-3">$27.00</td>
+                            <td class="earning text-end py-3 pe-0">$0.00</td>
+                        </tr>
+                    </tbody>
+                </table>
+                <!-- Pagination -->
+                <div class="d-flex align-items-center justify-content-between pt-4 gap-3">
+                    <div class="fs-sm">Showing <span class="fw-semibold">5</span> of <span
+                            class="fw-semibold">20</span><span class="d-none d-sm-inline"> results</span>
+                    </div>
+                    <nav aria-label="Pagination">
+                        <ul class="pagination">
+                            <li aria-current="page" class="page-item active">
+                                <span class="page-link">
+                                    1
+                                    <span class="visually-hidden">(current)</span>
+                                </span>
+                            </li>
+                            <li class="page-item">
+                                <a class="page-link" href="#">2</a>
+                            </li>
+                            <li class="page-item">
+                                <a class="page-link" href="#">3</a>
+                            </li>
+                            <li class="page-item">
+                                <a class="page-link" href="#">4</a>
+                            </li>
+                        </ul>
+                    </nav>
+                </div>
+            </div>
+        </div>
+    </div>
+@endsection
+
+@section('scripts')
+@endsection
diff --git a/resources/views/account/marketplace-favorites.blade.php b/resources/views/account/marketplace-favorites.blade.php
new file mode 100644
index 0000000..706db6e
--- /dev/null
+++ b/resources/views/account/marketplace-favorites.blade.php
@@ -0,0 +1,306 @@
+@extends('layouts.marketplace', ['title' => 'Marketplace Account - Favorites'])
+
+@section('content')
+    <div class="col-lg-9 pt-2 pt-xl-3">
+
+        <!-- Header -->
+        <div class="d-flex align-items-center justify-content-between gap-3 pb-3 mb-2 mb-md-3">
+            <h1 class="h2 mb-0">Favorites</h1>
+            <div style="width: 170px">
+                <select class="form-select rounded-pill"
+                    data-select='{
+                  "classNames": {
+                    "containerInner": ["form-select", "rounded-pill"]
+                  },
+                  "removeItemButton": false
+                }'
+                    aria-label="Period select">
+                    <option value="All">All products</option>
+                    <option value="Vectors">Vectors</option>
+                    <option value="Mockups">Mockups</option>
+                    <option value="Photos">Photos</option>
+                    <option value="3D">3D</option>
+                    <option value="AI images">AI images</option>
+                    <option value="Templates">Templates</option>
+                </select>
+            </div>
+        </div>
+
+        <!-- Products grid -->
+        <div class="row row-cols-2 row-cols-md-3 g-3 g-sm-4 g-lg-3 g-xl-4">
+
+            <!-- Product -->
+            <div class="col">
+                <div class="card h-100 animate-underline hover-effect-scale rounded-4 overflow-hidden">
+                    <div class="card-img-top position-relative bg-body-tertiary overflow-hidden">
+                        <a class="ratio d-block hover-effect-target" style="--cz-aspect-ratio: calc(220 / 304 * 100%)"
+                            href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                            <img src="/img/shop/marketplace/01.jpg" alt="Image">
+                        </a>
+                        <div
+                            class="position-absolute top-0 end-0 z-2 hover-effect-target pt-1 pt-sm-0 pe-1 pe-sm-0 mt-2 mt-sm-3 me-2 me-sm-3">
+                            <button type="button"
+                                class="btn btn-sm btn-icon btn-light text-danger bg-light border-0 rounded-circle animate-pulse"
+                                aria-label="Add to wishlist">
+                                <i class="ci-heart-filled animate-target fs-sm"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="card-body p-3">
+                        <div class="d-flex min-w-0 justify-content-between gap-2 gap-sm-3 mb-2">
+                            <h3 class="nav min-w-0 mb-0">
+                                <a class="nav-link text-truncate p-0" href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                                    <span class="text-truncate animate-target">Set of two badge identity cards</span>
+                                </a>
+                            </h3>
+                            <div class="h6 mb-0">$8</div>
+                        </div>
+                        <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
+                            <div class="nav align-items-center gap-1 fs-xs">
+                                <a class="nav-link fs-xs text-body gap-1 p-0" href="#!">
+                                    <div class="flex-shrink-0 border rounded-circle" style="width: 22px">
+                                        <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
+                                            <img src="/img/shop/marketplace/avatars/04.png" alt="Avatar">
+                                        </div>
+                                    </div>
+                                    Fireby
+                                </a>
+                                <div class="text-body-secondary">in</div>
+                                <a class="nav-link fs-xs text-body p-0" href="#!">Mockups</a>
+                            </div>
+                            <div class="fs-xs text-body-secondary">17 sales</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Product -->
+            <div class="col">
+                <div class="card h-100 animate-underline hover-effect-scale rounded-4 overflow-hidden">
+                    <div class="card-img-top position-relative bg-body-tertiary overflow-hidden">
+                        <a class="ratio d-block hover-effect-target" style="--cz-aspect-ratio: calc(220 / 304 * 100%)"
+                            href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                            <img src="/img/shop/marketplace/02.jpg" alt="Image">
+                        </a>
+                        <div
+                            class="position-absolute top-0 end-0 z-2 hover-effect-target pt-1 pt-sm-0 pe-1 pe-sm-0 mt-2 mt-sm-3 me-2 me-sm-3">
+                            <button type="button"
+                                class="btn btn-sm btn-icon btn-light text-danger bg-light border-0 rounded-circle animate-pulse"
+                                aria-label="Add to wishlist">
+                                <i class="ci-heart-filled animate-target fs-sm"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="card-body p-3">
+                        <div class="d-flex min-w-0 justify-content-between gap-2 gap-sm-3 mb-2">
+                            <h3 class="nav min-w-0 mb-0">
+                                <a class="nav-link text-truncate p-0" href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                                    <span class="text-truncate animate-target">Smart watches series 9 mockup</span>
+                                </a>
+                            </h3>
+                            <div class="h6 mb-0">$15</div>
+                        </div>
+                        <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
+                            <div class="nav align-items-center gap-1 fs-xs">
+                                <a class="nav-link fs-xs text-body gap-1 p-0" href="#!">
+                                    <div class="flex-shrink-0 border rounded-circle" style="width: 22px">
+                                        <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
+                                            <img src="/img/shop/marketplace/avatars/03.png" alt="Avatar">
+                                        </div>
+                                    </div>
+                                    MD Studio
+                                </a>
+                                <div class="text-body-secondary">in</div>
+                                <a class="nav-link fs-xs text-body p-0" href="#!">Mockups</a>
+                            </div>
+                            <div class="fs-xs text-body-secondary">132 sales</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Product -->
+            <div class="col">
+                <div class="card h-100 animate-underline hover-effect-scale rounded-4 overflow-hidden">
+                    <div class="card-img-top position-relative bg-body-tertiary overflow-hidden">
+                        <a class="ratio d-block hover-effect-target" style="--cz-aspect-ratio: calc(220 / 304 * 100%)"
+                            href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                            <img src="/img/shop/marketplace/03.jpg" alt="Image">
+                        </a>
+                        <div
+                            class="position-absolute top-0 end-0 z-2 hover-effect-target pt-1 pt-sm-0 pe-1 pe-sm-0 mt-2 mt-sm-3 me-2 me-sm-3">
+                            <button type="button"
+                                class="btn btn-sm btn-icon btn-light text-danger bg-light border-0 rounded-circle animate-pulse"
+                                aria-label="Add to wishlist">
+                                <i class="ci-heart-filled animate-target fs-sm"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="card-body p-3">
+                        <div class="d-flex min-w-0 justify-content-between gap-2 gap-sm-3 mb-2">
+                            <h3 class="nav min-w-0 mb-0">
+                                <a class="nav-link text-truncate p-0" href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                                    <span class="text-truncate animate-target">3D box mockup bold rebrand</span>
+                                </a>
+                            </h3>
+                            <div class="h6 mb-0">$16</div>
+                        </div>
+                        <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
+                            <div class="nav align-items-center gap-1 fs-xs">
+                                <a class="nav-link fs-xs text-body gap-1 p-0" href="#!">
+                                    <div class="flex-shrink-0 border rounded-circle" style="width: 22px">
+                                        <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
+                                            <img src="/img/shop/marketplace/avatars/02.png" alt="Avatar">
+                                        </div>
+                                    </div>
+                                    Magic FS
+                                </a>
+                                <div class="text-body-secondary">in</div>
+                                <a class="nav-link fs-xs text-body p-0" href="#!">Mockups</a>
+                            </div>
+                            <div class="fs-xs text-body-secondary">56 sales</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Product -->
+            <div class="col">
+                <div class="card h-100 animate-underline hover-effect-scale rounded-4 overflow-hidden">
+                    <div class="card-img-top position-relative bg-body-tertiary overflow-hidden">
+                        <a class="ratio d-block hover-effect-target" style="--cz-aspect-ratio: calc(220 / 304 * 100%)"
+                            href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                            <img src="/img/shop/marketplace/06.jpg" alt="Image">
+                        </a>
+                        <div
+                            class="position-absolute top-0 end-0 z-2 hover-effect-target pt-1 pt-sm-0 pe-1 pe-sm-0 mt-2 mt-sm-3 me-2 me-sm-3">
+                            <button type="button"
+                                class="btn btn-sm btn-icon btn-light text-danger bg-light border-0 rounded-circle animate-pulse"
+                                aria-label="Add to wishlist">
+                                <i class="ci-heart-filled animate-target fs-sm"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="card-body p-3">
+                        <div class="d-flex min-w-0 justify-content-between gap-2 gap-sm-3 mb-2">
+                            <h3 class="nav min-w-0 mb-0">
+                                <a class="nav-link text-truncate p-0" href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                                    <span class="text-truncate animate-target">Smartphone mockups for UI designs</span>
+                                </a>
+                            </h3>
+                            <div class="h6 mb-0">$18</div>
+                        </div>
+                        <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
+                            <div class="nav align-items-center gap-1 fs-xs">
+                                <a class="nav-link fs-xs text-body gap-1 p-0" href="#!">
+                                    <div class="flex-shrink-0 border rounded-circle" style="width: 22px">
+                                        <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
+                                            <img src="/img/shop/marketplace/avatars/03.png" alt="Avatar">
+                                        </div>
+                                    </div>
+                                    MD Studio
+                                </a>
+                                <div class="text-body-secondary">in</div>
+                                <a class="nav-link fs-xs text-body p-0" href="#!">Mockups</a>
+                            </div>
+                            <div class="fs-xs text-body-secondary">152 sales</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Product -->
+            <div class="col">
+                <div class="card h-100 animate-underline hover-effect-scale rounded-4 overflow-hidden">
+                    <div class="card-img-top position-relative bg-body-tertiary overflow-hidden">
+                        <a class="ratio d-block hover-effect-target" style="--cz-aspect-ratio: calc(220 / 304 * 100%)"
+                            href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                            <img src="/img/shop/marketplace/08.jpg" alt="Image">
+                        </a>
+                        <div
+                            class="position-absolute top-0 end-0 z-2 hover-effect-target pt-1 pt-sm-0 pe-1 pe-sm-0 mt-2 mt-sm-3 me-2 me-sm-3">
+                            <button type="button"
+                                class="btn btn-sm btn-icon btn-light text-danger bg-light border-0 rounded-circle animate-pulse"
+                                aria-label="Add to wishlist">
+                                <i class="ci-heart-filled animate-target fs-sm"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="card-body p-3">
+                        <div class="d-flex min-w-0 justify-content-between gap-2 gap-sm-3 mb-2">
+                            <h3 class="nav min-w-0 mb-0">
+                                <a class="nav-link text-truncate p-0" href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                                    <span class="text-truncate animate-target">iPhone 15 pro mockups</span>
+                                </a>
+                            </h3>
+                            <div class="h6 mb-0">$19</div>
+                        </div>
+                        <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
+                            <div class="nav align-items-center gap-1 fs-xs">
+                                <a class="nav-link fs-xs text-body gap-1 p-0" href="#!">
+                                    <div class="flex-shrink-0 border rounded-circle" style="width: 22px">
+                                        <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
+                                            <img src="/img/shop/marketplace/avatars/04.png" alt="Avatar">
+                                        </div>
+                                    </div>
+                                    Fireby
+                                </a>
+                                <div class="text-body-secondary">in</div>
+                                <a class="nav-link fs-xs text-body p-0" href="#!">Mockups</a>
+                            </div>
+                            <div class="fs-xs text-body-secondary">47 sales</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Product -->
+            <div class="col">
+                <div class="card h-100 animate-underline hover-effect-scale rounded-4 overflow-hidden">
+                    <div class="card-img-top position-relative bg-body-tertiary overflow-hidden">
+                        <a class="ratio d-block hover-effect-target" style="--cz-aspect-ratio: calc(220 / 304 * 100%)"
+                            href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                            <img src="/img/shop/marketplace/04.jpg" alt="Image">
+                        </a>
+                        <div
+                            class="position-absolute top-0 end-0 z-2 hover-effect-target pt-1 pt-sm-0 pe-1 pe-sm-0 mt-2 mt-sm-3 me-2 me-sm-3">
+                            <button type="button"
+                                class="btn btn-sm btn-icon btn-light text-danger bg-light border-0 rounded-circle animate-pulse"
+                                aria-label="Add to wishlist">
+                                <i class="ci-heart-filled animate-target fs-sm"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="card-body p-3">
+                        <div class="d-flex min-w-0 justify-content-between gap-2 gap-sm-3 mb-2">
+                            <h3 class="nav min-w-0 mb-0">
+                                <a class="nav-link text-truncate p-0" href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                                    <span class="text-truncate animate-target">Falling gift cards mockup</span>
+                                </a>
+                            </h3>
+                            <div class="h6 mb-0">$9</div>
+                        </div>
+                        <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
+                            <div class="nav align-items-center gap-1 fs-xs">
+                                <a class="nav-link fs-xs text-body gap-1 p-0" href="#!">
+                                    <div class="flex-shrink-0 border rounded-circle" style="width: 22px">
+                                        <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
+                                            <img src="/img/shop/marketplace/avatars/02.png" alt="Avatar">
+                                        </div>
+                                    </div>
+                                    Magic FS
+                                </a>
+                                <div class="text-body-secondary">in</div>
+                                <a class="nav-link fs-xs text-body p-0" href="#!">Mockups</a>
+                            </div>
+                            <div class="fs-xs text-body-secondary">34 sales</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+@endsection
+
+@section('scripts')
+@endsection
diff --git a/resources/views/account/marketplace-payouts.blade.php b/resources/views/account/marketplace-payouts.blade.php
new file mode 100644
index 0000000..eeaa54f
--- /dev/null
+++ b/resources/views/account/marketplace-payouts.blade.php
@@ -0,0 +1,211 @@
+@extends('layouts.marketplace', ['title' => 'Marketplace Account - Payouts'])
+
+@section('content')
+    <!-- Payouts content -->
+    <div class="col-lg-9 pt-2 pt-xl-3">
+        <!-- Page title -->
+        <h1 class="h2 pb-3 mb-2 mb-md-3">Payouts</h1>
+        <!-- Info alert -->
+        <div class="alert alert-info mb-2 mb-sm-3 mb-md-4" role="alert">
+            <div class="fw-semibold mb-2">Upcoming payout</div>
+            <p class="fs-sm mb-0">Your current earnings of <span class="fw-semibold">$735.00</span> will be sent to
+                you on September 2, 2024</p>
+        </div>
+        <!-- Payouts table -->
+        <div class="table-responsive"
+            data-filter-list='{"listClass": "payouts-list", "sortClass": "payouts-sort", "valueNames": ["amount", "date"]}'>
+            <table class="table align-middle fs-sm">
+                <thead>
+                    <tr>
+                        <th class="ps-0" scope="col">
+                            <button class="btn fw-normal text-body payouts-sort p-0" data-sort="amount"
+                                type="button">Amount</button>
+                        </th>
+                        <th scope="col">
+                            <span class="fw-normal text-body">Payout method</span>
+                        </th>
+                        <th scope="col">
+                            <button class="btn fw-normal text-body payouts-sort p-0" data-sort="date" type="button">Date
+                                processed</button>
+                        </th>
+                        <th scope="col">
+                            <span class="fw-normal text-body">Status</span>
+                        </th>
+                        <th class="pe-0" scope="col"></th>
+                    </tr>
+                </thead>
+                <tbody class="payouts-list">
+                    <tr>
+                        <td class="fw-medium py-3 ps-0">$1,233.84<span class="amount visually-hidden">123384</span></td>
+                        <td class="py-3">PayPal</td>
+                        <td class="py-3">August 16, 2024<span class="date visually-hidden">1723838358</span>
+                        </td>
+                        <td class="py-3">
+                            <span class="badge fs-xs text-info bg-info-subtle rounded-pill">In transit</span>
+                        </td>
+                        <td class="py-3 pe-0">
+                            <div class="nav justify-content-end">
+                                <a class="nav-link position-relative text-nowrap animate-underline py-1 px-0"
+                                    href="#!">
+                                    <i class="ci-file ms-n1 me-1"></i>
+                                    <span class="fs-xs animate-target">Export to CVS</span>
+                                </a>
+                            </div>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="fw-medium py-3 ps-0">$805.79<span class="amount visually-hidden">80579</span>
+                        </td>
+                        <td class="py-3">PayPal</td>
+                        <td class="py-3">August 2, 2024<span class="date visually-hidden">1722628758</span></td>
+                        <td class="py-3">
+                            <span class="badge fs-xs text-success bg-success-subtle rounded-pill">Deposited</span>
+                        </td>
+                        <td class="fpy-3 pe-0">
+                            <div class="nav justify-content-end">
+                                <a class="nav-link position-relative text-nowrap animate-underline py-1 px-0"
+                                    href="#!">
+                                    <i class="ci-file ms-n1 me-1"></i>
+                                    <span class="fs-xs animate-target">Export to CVS</span>
+                                </a>
+                            </div>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="fw-medium py-3 ps-0">$1,564.98<span class="amount visually-hidden">156498</span></td>
+                        <td class="py-3">Payoneer</td>
+                        <td class="py-3">July 16, 2024<span class="date visually-hidden">1721159958</span></td>
+                        <td class="py-3">
+                            <span class="badge fs-xs text-success bg-success-subtle rounded-pill">Deposited</span>
+                        </td>
+                        <td class="fpy-3 pe-0">
+                            <div class="nav justify-content-end">
+                                <a class="nav-link position-relative text-nowrap animate-underline py-1 px-0"
+                                    href="#!">
+                                    <i class="ci-file ms-n1 me-1"></i>
+                                    <span class="fs-xs animate-target">Export to CVS</span>
+                                </a>
+                            </div>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="fw-medium py-3 ps-0">$942.50<span class="amount visually-hidden">94250</span>
+                        </td>
+                        <td class="py-3">PayPal</td>
+                        <td class="py-3">July 2, 2024<span class="date visually-hidden">1719950358</span></td>
+                        <td class="py-3">
+                            <span class="badge fs-xs text-success bg-success-subtle rounded-pill">Deposited</span>
+                        </td>
+                        <td class="fpy-3 pe-0">
+                            <div class="nav justify-content-end">
+                                <a class="nav-link position-relative text-nowrap animate-underline py-1 px-0"
+                                    href="#!">
+                                    <i class="ci-file ms-n1 me-1"></i>
+                                    <span class="fs-xs animate-target">Export to CVS</span>
+                                </a>
+                            </div>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="fw-medium py-3 ps-0">$1,759.35<span class="amount visually-hidden">175935</span></td>
+                        <td class="py-3">Payoneer</td>
+                        <td class="py-3">June 16, 2024<span class="date visually-hidden">1718567958</span></td>
+                        <td class="py-3">
+                            <span class="badge fs-xs text-success bg-success-subtle rounded-pill">Deposited</span>
+                        </td>
+                        <td class="fpy-3 pe-0">
+                            <div class="nav justify-content-end">
+                                <a class="nav-link position-relative text-nowrap animate-underline py-1 px-0"
+                                    href="#!">
+                                    <i class="ci-file ms-n1 me-1"></i>
+                                    <span class="fs-xs animate-target">Export to CVS</span>
+                                </a>
+                            </div>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="fw-medium text-danger py-3 ps-0">$2,060.80<span
+                                class="amount visually-hidden">206080</span></td>
+                        <td class="py-3">Payoneer</td>
+                        <td class="py-3">June 2, 2024<span class="date visually-hidden">1717358358</span></td>
+                        <td class="py-3">
+                            <span class="badge fs-xs text-danger bg-danger-subtle rounded-pill">Returned</span>
+                        </td>
+                        <td class="fpy-3 pe-0">
+                            <div class="nav justify-content-end">
+                                <a class="nav-link position-relative text-nowrap animate-underline py-1 px-0"
+                                    href="#!">
+                                    <i class="ci-file ms-n1 me-1"></i>
+                                    <span class="fs-xs animate-target">Export to CVS</span>
+                                </a>
+                            </div>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="fw-medium py-3 ps-0">$493.26<span class="amount visually-hidden">49326</span>
+                        </td>
+                        <td class="py-3">SWIFT</td>
+                        <td class="py-3">May 16, 2024<span class="date visually-hidden">1715889558</span></td>
+                        <td class="py-3">
+                            <span class="badge fs-xs text-success bg-success-subtle rounded-pill">Deposited</span>
+                        </td>
+                        <td class="fpy-3 pe-0">
+                            <div class="nav justify-content-end">
+                                <a class="nav-link position-relative text-nowrap animate-underline py-1 px-0"
+                                    href="#!">
+                                    <i class="ci-file ms-n1 me-1"></i>
+                                    <span class="fs-xs animate-target">Export to CVS</span>
+                                </a>
+                            </div>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="fw-medium py-3 ps-0">$654.75<span class="amount visually-hidden">65475</span>
+                        </td>
+                        <td class="py-3">SWIFT</td>
+                        <td class="py-3">May 2, 2024<span class="date visually-hidden">1714679958</span></td>
+                        <td class="py-3">
+                            <span class="badge fs-xs text-success bg-success-subtle rounded-pill">Deposited</span>
+                        </td>
+                        <td class="fpy-3 pe-0">
+                            <div class="nav justify-content-end">
+                                <a class="nav-link position-relative text-nowrap animate-underline py-1 px-0"
+                                    href="#!">
+                                    <i class="ci-file ms-n1 me-1"></i>
+                                    <span class="fs-xs animate-target">Export to CVS</span>
+                                </a>
+                            </div>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+        <!-- Pagination -->
+        <div class="d-flex align-items-center justify-content-between pt-2 gap-3">
+            <div class="fs-sm">Showing <span class="fw-semibold">8</span> of <span class="fw-semibold">30</span><span
+                    class="d-none d-sm-inline"> results</span></div>
+            <nav aria-label="Pagination">
+                <ul class="pagination">
+                    <li aria-current="page" class="page-item active">
+                        <span class="page-link">
+                            1
+                            <span class="visually-hidden">(current)</span>
+                        </span>
+                    </li>
+                    <li class="page-item">
+                        <a class="page-link" href="#">2</a>
+                    </li>
+                    <li class="page-item">
+                        <a class="page-link" href="#">3</a>
+                    </li>
+                    <li class="page-item">
+                        <a class="page-link" href="#">4</a>
+                    </li>
+                </ul>
+            </nav>
+        </div>
+    </div>
+@endsection
+
+@section('scripts')
+@endsection
diff --git a/resources/views/account/marketplace-products.blade.php b/resources/views/account/marketplace-products.blade.php
new file mode 100644
index 0000000..0793924
--- /dev/null
+++ b/resources/views/account/marketplace-products.blade.php
@@ -0,0 +1,369 @@
+@extends('layouts.marketplace', ['title' => 'Marketplace Account - Products'])
+
+@section('content')
+    <!-- Sales content -->
+    <div class="col-lg-9 pt-2 pt-xl-3">
+        <div
+            data-filter-list='{"searchClass": "product-search", "listClass": "product-list", "sortClass": "product-sort", "valueNames": ["product", "status", "sales", "earnings"]}'>
+            <!-- Header -->
+            <div class="d-sm-flex align-items-center justify-content-between gap-3 pb-2 pb-sm-3 mb-md-2">
+                <h1 class="h2 text-nowrap mb-sm-0">Products (4)</h1>
+                <div class="position-relative w-100" style="max-width: 300px">
+                    <i class="ci-search position-absolute top-50 start-0 translate-middle-y ms-3"></i>
+                    <input class="product-search form-control form-icon-start rounded-pill" placeholder="Search"
+                        type="search" />
+                </div>
+            </div>
+            <!-- Sales list (table) -->
+            <table class="table align-middle fs-sm mb-0">
+                <thead>
+                    <tr>
+                        <th class="ps-0" scope="col">
+                            <span class="fw-normal text-body">Product</span>
+                        </th>
+                        <th class="d-none d-md-table-cell" scope="col">
+                            <span class="fw-normal text-body">Status</span>
+                        </th>
+                        <th class="text-end d-none d-md-table-cell" scope="col">
+                            <button class="btn fw-normal text-body product-sort p-0 me-n2" data-sort="sales"
+                                type="button">Sales</button>
+                        </th>
+                        <th class="text-end d-none d-sm-table-cell" scope="col">
+                            <button class="btn fw-normal text-body product-sort p-0 me-n2" data-sort="earnings"
+                                type="button">Earnings</button>
+                        </th>
+                        <th class="text-end ps-0 ps-sm-3 pe-0" scope="col">
+                            <span class="fw-normal text-body">Action</span>
+                        </th>
+                    </tr>
+                </thead>
+                <tbody class="product-list">
+                    <!-- Item -->
+                    <tr>
+                        <td class="py-3 ps-0">
+                            <div
+                                class="d-flex align-items-start align-items-md-center hover-effect-scale position-relative py-1">
+                                <div class="ratio bg-body-secondary rounded overflow-hidden flex-shrink-sm-0"
+                                    style="--cz-aspect-ratio: calc(110 / 142 * 100%); max-width: 142px">
+                                    <img alt="Image" class="hover-effect-target" src="/img/account/products/09.jpg" />
+                                </div>
+                                <div class="ps-2 ps-sm-3 ms-1">
+                                    <span
+                                        class="badge fs-xs text-success bg-success-subtle rounded-pill d-md-none mb-1">Active</span>
+                                    <h6 class="product mb-2">
+                                        <a class="fs-sm fw-medium hover-effect-underline stretched-link"
+                                            href="{{ route('second', ['shop', 'product-marketplace']) }}">iPhone 15 pro mockups</a>
+                                    </h6>
+                                    <div class="d-flex flex-md-column align-items-center align-items-md-start gap-2">
+                                        <div class="h6 mb-0 me-1 me-md-0">$19</div>
+                                        <div class="d-flex gap-2">
+                                            <div
+                                                class="d-flex align-items-center fs-xs text-body-emphasis bg-body-tertiary rounded-pill px-2 py-1">
+                                                <i class="ci-heart text-body-secondary me-1"></i>
+                                                13
+                                            </div>
+                                            <div
+                                                class="d-flex align-items-center fs-xs text-body-emphasis bg-body-tertiary rounded-pill px-2 py-1">
+                                                <i class="ci-message-circle text-body-secondary me-1"></i>
+                                                4
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="fs-xs text-nowrap d-md-none mt-2 mb-1"><span
+                                            class="text-body-secondary">Sales:</span> 47</div>
+                                    <div class="fs-xs text-nowrap d-sm-none"><span
+                                            class="text-body-secondary">Earnings:</span> $669.75</div>
+                                </div>
+                            </div>
+                        </td>
+                        <td class="d-none d-md-table-cell py-3">
+                            <span class="status badge fs-xs text-success bg-success-subtle rounded-pill">Active</span>
+                        </td>
+                        <td class="sales d-none d-md-table-cell text-end py-3">47</td>
+                        <td class="text-end d-none d-sm-table-cell py-3">$669.75<span
+                                class="earnings visually-hidden">66975</span></td>
+                        <td class="text-end py-3 ps-0 ps-sm-3 pe-0">
+                            <div class="dropdown">
+                                <button aria-expanded="false" aria-label="Settings"
+                                    class="btn btn-icon btn-ghost btn-sm btn-secondary rounded-circle"
+                                    data-bs-toggle="dropdown" type="button">
+                                    <i class="ci-more-vertical fs-base"></i>
+                                </button>
+                                <ul class="dropdown-menu dropdown-menu-end">
+                                    <li>
+                                        <a class="dropdown-item" href="#!">
+                                            <i class="ci-edit opacity-75 me-2"></i>
+                                            Edit
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a class="dropdown-item" href="#!">
+                                            <i class="ci-zap fs-base opacity-75 me-2"></i>
+                                            Promote
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a class="dropdown-item" href="#!">
+                                            <i class="ci-archive opacity-75 me-2"></i>
+                                            Move to archive
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a class="dropdown-item text-danger" href="#!">
+                                            <i class="ci-trash opacity-75 me-2"></i>
+                                            Delete
+                                        </a>
+                                    </li>
+                                </ul>
+                            </div>
+                        </td>
+                    </tr>
+                    <!-- Item -->
+                    <tr>
+                        <td class="py-3 ps-0">
+                            <div
+                                class="d-flex align-items-start align-items-md-center hover-effect-scale position-relative py-1">
+                                <div class="ratio bg-body-secondary rounded overflow-hidden flex-shrink-sm-0"
+                                    style="--cz-aspect-ratio: calc(110 / 142 * 100%); max-width: 142px">
+                                    <img alt="Image" class="hover-effect-target" src="/img/account/products/10.jpg" />
+                                </div>
+                                <div class="ps-2 ps-sm-3 ms-1">
+                                    <span
+                                        class="badge fs-xs text-success bg-success-subtle rounded-pill d-md-none mb-1">Active</span>
+                                    <h6 class="product mb-2">
+                                        <a class="fs-sm fw-medium hover-effect-underline stretched-link"
+                                            href="{{ route('second', ['shop', 'product-marketplace']) }}">3D box mockup bold rebrand</a>
+                                    </h6>
+                                    <div class="d-flex flex-md-column align-items-center align-items-md-start gap-2">
+                                        <div class="h6 mb-0 me-1 me-md-0">$16</div>
+                                        <div class="d-flex gap-2">
+                                            <div
+                                                class="d-flex align-items-center fs-xs text-body-emphasis bg-body-tertiary rounded-pill px-2 py-1">
+                                                <i class="ci-heart text-body-secondary me-1"></i>
+                                                25
+                                            </div>
+                                            <div
+                                                class="d-flex align-items-center fs-xs text-body-emphasis bg-body-tertiary rounded-pill px-2 py-1">
+                                                <i class="ci-message-circle text-body-secondary me-1"></i>
+                                                2
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="fs-xs text-nowrap d-md-none mt-2 mb-1"><span
+                                            class="text-body-secondary">Sales:</span> 56</div>
+                                    <div class="fs-xs text-nowrap d-sm-none"><span
+                                            class="text-body-secondary">Earnings:</span> $672.00</div>
+                                </div>
+                            </div>
+                        </td>
+                        <td class="d-none d-md-table-cell py-3">
+                            <span class="status badge fs-xs text-success bg-success-subtle rounded-pill">Active</span>
+                        </td>
+                        <td class="sales d-none d-md-table-cell text-end py-3">56</td>
+                        <td class="text-end d-none d-sm-table-cell py-3">$672.00<span
+                                class="earnings visually-hidden">67200</span></td>
+                        <td class="text-end py-3 ps-0 ps-sm-3 pe-0">
+                            <div class="dropdown">
+                                <button aria-expanded="false" aria-label="Settings"
+                                    class="btn btn-icon btn-ghost btn-sm btn-secondary rounded-circle"
+                                    data-bs-toggle="dropdown" type="button">
+                                    <i class="ci-more-vertical fs-base"></i>
+                                </button>
+                                <ul class="dropdown-menu dropdown-menu-end">
+                                    <li>
+                                        <a class="dropdown-item" href="#!">
+                                            <i class="ci-edit opacity-75 me-2"></i>
+                                            Edit
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a class="dropdown-item" href="#!">
+                                            <i class="ci-zap fs-base opacity-75 me-2"></i>
+                                            Promote
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a class="dropdown-item" href="#!">
+                                            <i class="ci-archive opacity-75 me-2"></i>
+                                            Move to archive
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a class="dropdown-item text-danger" href="#!">
+                                            <i class="ci-trash opacity-75 me-2"></i>
+                                            Delete
+                                        </a>
+                                    </li>
+                                </ul>
+                            </div>
+                        </td>
+                    </tr>
+                    <!-- Item -->
+                    <tr>
+                        <td class="py-3 ps-0">
+                            <div
+                                class="d-flex align-items-start align-items-md-center hover-effect-scale position-relative py-1">
+                                <div class="ratio bg-body-secondary rounded overflow-hidden flex-shrink-sm-0"
+                                    style="--cz-aspect-ratio: calc(110 / 142 * 100%); max-width: 142px">
+                                    <img alt="Image" class="hover-effect-target" src="/img/account/products/11.jpg" />
+                                </div>
+                                <div class="ps-2 ps-sm-3 ms-1">
+                                    <span
+                                        class="badge fs-xs text-success bg-success-subtle rounded-pill d-md-none mb-1">Active</span>
+                                    <h6 class="product mb-2">
+                                        <a class="fs-sm fw-medium hover-effect-underline stretched-link"
+                                            href="{{ route('second', ['shop', 'product-marketplace']) }}">Smartphone mockups for UI
+                                            designs</a>
+                                    </h6>
+                                    <div class="d-flex flex-md-column align-items-center align-items-md-start gap-2">
+                                        <div class="h6 mb-0 me-1 me-md-0">$18</div>
+                                        <div class="d-flex gap-2">
+                                            <div
+                                                class="d-flex align-items-center fs-xs text-body-emphasis bg-body-tertiary rounded-pill px-2 py-1">
+                                                <i class="ci-heart text-body-secondary me-1"></i>
+                                                36
+                                            </div>
+                                            <div
+                                                class="d-flex align-items-center fs-xs text-body-emphasis bg-body-tertiary rounded-pill px-2 py-1">
+                                                <i class="ci-message-circle text-body-secondary me-1"></i>
+                                                8
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="fs-xs text-nowrap d-md-none mt-2 mb-1"><span
+                                            class="text-body-secondary">Sales:</span> 152</div>
+                                    <div class="fs-xs text-nowrap d-sm-none"><span
+                                            class="text-body-secondary">Earnings:</span> $2,052.00</div>
+                                </div>
+                            </div>
+                        </td>
+                        <td class="d-none d-md-table-cell py-3">
+                            <span class="status badge fs-xs text-success bg-success-subtle rounded-pill">Active</span>
+                        </td>
+                        <td class="sales d-none d-md-table-cell text-end py-3">152</td>
+                        <td class="text-end d-none d-sm-table-cell py-3">$2,052.00<span
+                                class="earnings visually-hidden">205200</span></td>
+                        <td class="text-end py-3 ps-0 ps-sm-3 pe-0">
+                            <div class="dropdown">
+                                <button aria-expanded="false" aria-label="Settings"
+                                    class="btn btn-icon btn-ghost btn-sm btn-secondary rounded-circle"
+                                    data-bs-toggle="dropdown" type="button">
+                                    <i class="ci-more-vertical fs-base"></i>
+                                </button>
+                                <ul class="dropdown-menu dropdown-menu-end">
+                                    <li>
+                                        <a class="dropdown-item" href="#!">
+                                            <i class="ci-edit opacity-75 me-2"></i>
+                                            Edit
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a class="dropdown-item" href="#!">
+                                            <i class="ci-zap fs-base opacity-75 me-2"></i>
+                                            Promote
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a class="dropdown-item" href="#!">
+                                            <i class="ci-archive opacity-75 me-2"></i>
+                                            Move to archive
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a class="dropdown-item text-danger" href="#!">
+                                            <i class="ci-trash opacity-75 me-2"></i>
+                                            Delete
+                                        </a>
+                                    </li>
+                                </ul>
+                            </div>
+                        </td>
+                    </tr>
+                    <!-- Item -->
+                    <tr>
+                        <td class="py-3 ps-0">
+                            <div
+                                class="d-flex align-items-start align-items-md-center hover-effect-scale position-relative py-1">
+                                <div class="ratio bg-body-secondary rounded overflow-hidden flex-shrink-sm-0"
+                                    style="--cz-aspect-ratio: calc(110 / 142 * 100%); max-width: 142px">
+                                    <img alt="Image" class="hover-effect-target" src="/img/account/products/12.jpg" />
+                                </div>
+                                <div class="ps-2 ps-sm-3 ms-1">
+                                    <span
+                                        class="badge fs-xs text-warning bg-warning-subtle rounded-pill d-md-none mb-1">Archived</span>
+                                    <h6 class="product mb-2">
+                                        <a class="fs-sm fw-medium hover-effect-underline stretched-link"
+                                            href="{{ route('second', ['shop', 'product-marketplace']) }}">Multi device mockup PSD</a>
+                                    </h6>
+                                    <div class="d-flex flex-md-column align-items-center align-items-md-start gap-2">
+                                        <div class="h6 mb-0 me-1 me-md-0">$27</div>
+                                        <div class="d-flex gap-2">
+                                            <div
+                                                class="d-flex align-items-center fs-xs text-body-emphasis bg-body-tertiary rounded-pill px-2 py-1">
+                                                <i class="ci-heart text-body-secondary me-1"></i>
+                                                9
+                                            </div>
+                                            <div
+                                                class="d-flex align-items-center fs-xs text-body-emphasis bg-body-tertiary rounded-pill px-2 py-1">
+                                                <i class="ci-message-circle text-body-secondary me-1"></i>
+                                                12
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="fs-xs text-nowrap d-md-none mt-2 mb-1"><span
+                                            class="text-body-secondary">Sales:</span> 43</div>
+                                    <div class="fs-xs text-nowrap d-sm-none"><span
+                                            class="text-body-secondary">Earnings:</span> $870.75</div>
+                                </div>
+                            </div>
+                        </td>
+                        <td class="d-none d-md-table-cell py-3">
+                            <span class="status badge fs-xs text-warning bg-warning-subtle rounded-pill">Archived</span>
+                        </td>
+                        <td class="sales d-none d-md-table-cell text-end py-3">43</td>
+                        <td class="text-end d-none d-sm-table-cell py-3">$870.75<span
+                                class="earnings visually-hidden">87075</span></td>
+                        <td class="text-end py-3 ps-0 ps-sm-3 pe-0">
+                            <div class="dropdown">
+                                <button aria-expanded="false" aria-label="Settings"
+                                    class="btn btn-icon btn-ghost btn-sm btn-secondary rounded-circle"
+                                    data-bs-toggle="dropdown" type="button">
+                                    <i class="ci-more-vertical fs-base"></i>
+                                </button>
+                                <ul class="dropdown-menu dropdown-menu-end">
+                                    <li>
+                                        <a class="dropdown-item" href="#!">
+                                            <i class="ci-edit opacity-75 me-2"></i>
+                                            Edit
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a class="dropdown-item" href="#!">
+                                            <i class="ci-zap fs-base opacity-75 me-2"></i>
+                                            Promote
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a class="dropdown-item" href="#!">
+                                            <i class="ci-archive opacity-75 me-2"></i>
+                                            Move to archive
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a class="dropdown-item text-danger" href="#!">
+                                            <i class="ci-trash opacity-75 me-2"></i>
+                                            Delete
+                                        </a>
+                                    </li>
+                                </ul>
+                            </div>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+@endsection
+
+@section('scripts')
+@endsection
diff --git a/resources/views/account/marketplace-purchases.blade.php b/resources/views/account/marketplace-purchases.blade.php
new file mode 100644
index 0000000..3532ca6
--- /dev/null
+++ b/resources/views/account/marketplace-purchases.blade.php
@@ -0,0 +1,380 @@
+@extends('layouts.marketplace', ['title' => 'Marketplace Account - Purchases'])
+
+@section('content')
+    <!-- Purchases content -->
+    <div class="col-lg-9 pt-2 pt-xl-3">
+        <div
+            data-filter-list='{"searchClass": "product-search", "listClass": "product-list", "sortClass": "product-sort", "valueNames": ["product", "author", "category", "date", "license"]}'>
+            <!-- Header -->
+            <div class="d-sm-flex align-items-center justify-content-between gap-3 pb-2 pb-sm-3 mb-md-2">
+                <h1 class="h2 text-nowrap mb-sm-0">Purchases (6)</h1>
+                <div class="position-relative w-100" style="max-width: 300px">
+                    <i class="ci-search position-absolute top-50 start-0 translate-middle-y ms-3"></i>
+                    <input class="product-search form-control form-icon-start rounded-pill" placeholder="Search"
+                        type="search" />
+                </div>
+            </div>
+            <!-- Purchases list (table) -->
+            <table class="table align-middle fs-sm mb-0">
+                <thead>
+                    <tr>
+                        <th class="px-0 pe-sm-2" scope="col">
+                            <span class="fw-normal text-body">Product</span>
+                        </th>
+                        <th class="d-none d-md-table-cell" scope="col">
+                            <button class="btn fw-normal text-body product-sort p-0" data-sort="date"
+                                type="button">Purchase date</button>
+                        </th>
+                        <th class="d-none d-md-table-cell" scope="col">
+                            <span class="fw-normal text-body">License</span>
+                        </th>
+                        <th class="d-none d-sm-table-cell pe-0" scope="col"></th>
+                    </tr>
+                </thead>
+                <tbody class="product-list">
+                    <!-- Item -->
+                    <tr>
+                        <td class="py-3 px-0 pe-sm-2">
+                            <div class="d-none d-md-block d-xl-none" style="width: 350px"></div>
+                            <div class="d-none d-xl-block" style="width: 450px"></div>
+                            <div
+                                class="d-flex align-items-start align-items-md-center hover-effect-scale position-relative py-1">
+                                <div class="ratio bg-body-secondary rounded overflow-hidden flex-shrink-sm-0"
+                                    style="--cz-aspect-ratio: calc(110 / 142 * 100%); max-width: 142px">
+                                    <img alt="Image" class="hover-effect-target" src="/img/account/products/13.jpg" />
+                                </div>
+                                <div class="ps-2 ps-sm-3 ms-1">
+                                    <h6 class="product mb-2">
+                                        <a class="fs-sm fw-medium hover-effect-underline stretched-link"
+                                            href="{{ route('second', ['shop', 'product-marketplace']) }}">Smart watches series 9 mockup</a>
+                                    </h6>
+                                    <div class="d-flex align-items-center flex-wrap gap-1 fs-xs">
+                                        <div class="author d-flex align-items-center fs-xs fw-medium text-body gap-1 p-0">
+                                            <div class="flex-shrink-0 border rounded-circle" style="width: 22px">
+                                                <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
+                                                    <img alt="Avatar" src="/img/shop/marketplace/avatars/03.png" />
+                                                </div>
+                                            </div>
+                                            MD Studio
+                                        </div>
+                                        <div class="text-body-secondary">in</div>
+                                        <div class="category fs-xs fw-medium text-body">Mockups</div>
+                                    </div>
+                                    <!-- Visible on screens < 769px wide (md breakpoint) -->
+                                    <div class="fs-xs text-nowrap d-md-none mt-2 mb-1"><span
+                                            class="text-body-secondary">License:</span> <span
+                                            class="license">Standard</span></div>
+                                    <div class="fs-xs text-nowrap d-md-none"><span class="text-body-secondary">Date:</span>
+                                        July 28, 2024</div>
+                                    <!-- Visible on screens < 500px wide (sm breakpoint) -->
+                                    <button
+                                        class="btn btn-sm btn-secondary rounded-pill animate-scale position-relative z-2 d-sm-none mt-3"
+                                        type="button">
+                                        <i class="ci-download-cloud animate-target fs-sm ms-n1 me-1"></i>
+                                        Download
+                                    </button>
+                                </div>
+                            </div>
+                        </td>
+                        <!-- Visible on screens > 768px wide (md breakpoint) -->
+                        <td class="d-none d-md-table-cell py-3">July 28, 2024<span
+                                class="date visually-hidden">1722164400</span></td>
+                        <td class="d-none d-md-table-cell py-3">Standard</td>
+                        <!-- Visible on screens > 500px wide (sm breakpoint) -->
+                        <td class="d-none d-sm-table-cell text-end py-3 ps-0 ps-sm-3 pe-0" style="width: 120px">
+                            <button class="btn btn-sm btn-secondary rounded-pill animate-scale" type="button">
+                                <i class="ci-download-cloud animate-target fs-sm ms-n1 me-1"></i>
+                                Download
+                            </button>
+                        </td>
+                    </tr>
+                    <!-- Item -->
+                    <tr>
+                        <td class="py-3 px-0 pe-sm-2">
+                            <div class="d-none d-md-block d-xl-none" style="width: 350px"></div>
+                            <div class="d-none d-xl-block" style="width: 450px"></div>
+                            <div
+                                class="d-flex align-items-start align-items-md-center hover-effect-scale position-relative py-1">
+                                <div class="ratio bg-body-secondary rounded overflow-hidden flex-shrink-sm-0"
+                                    style="--cz-aspect-ratio: calc(110 / 142 * 100%); max-width: 142px">
+                                    <img alt="Image" class="hover-effect-target" src="/img/account/products/14.jpg" />
+                                </div>
+                                <div class="ps-2 ps-sm-3 ms-1">
+                                    <h6 class="product mb-2">
+                                        <a class="fs-sm fw-medium hover-effect-underline stretched-link"
+                                            href="{{ route('second', ['shop', 'product-marketplace']) }}">Gradient glassmorphism icons
+                                            set</a>
+                                    </h6>
+                                    <div class="d-flex align-items-center flex-wrap gap-1 fs-xs">
+                                        <div class="author d-flex align-items-center fs-xs fw-medium text-body gap-1 p-0">
+                                            <div class="flex-shrink-0 border rounded-circle" style="width: 22px">
+                                                <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
+                                                    <img alt="Avatar" src="/img/shop/marketplace/avatars/02.png" />
+                                                </div>
+                                            </div>
+                                            Magic FS
+                                        </div>
+                                        <div class="text-body-secondary">in</div>
+                                        <div class="category fs-xs fw-medium text-body">Vectors</div>
+                                    </div>
+                                    <!-- Visible on screens < 769px wide (md breakpoint) -->
+                                    <div class="fs-xs text-nowrap d-md-none mt-2 mb-1"><span
+                                            class="text-body-secondary">License:</span> <span
+                                            class="license">Standard</span></div>
+                                    <div class="fs-xs text-nowrap d-md-none"><span class="text-body-secondary">Date:</span>
+                                        July 5, 2024</div>
+                                    <!-- Visible on screens < 500px wide (sm breakpoint) -->
+                                    <button
+                                        class="btn btn-sm btn-secondary rounded-pill animate-scale position-relative z-2 d-sm-none mt-3"
+                                        type="button">
+                                        <i class="ci-download-cloud animate-target fs-sm ms-n1 me-1"></i>
+                                        Download
+                                    </button>
+                                </div>
+                            </div>
+                        </td>
+                        <!-- Visible on screens > 768px wide (md breakpoint) -->
+                        <td class="d-none d-md-table-cell py-3">July 5, 2024<span
+                                class="date visually-hidden">1720177200</span></td>
+                        <td class="d-none d-md-table-cell py-3">Standard</td>
+                        <!-- Visible on screens > 500px wide (sm breakpoint) -->
+                        <td class="d-none d-sm-table-cell text-end py-3 ps-0 ps-sm-3 pe-0" style="width: 120px">
+                            <button class="btn btn-sm btn-secondary rounded-pill animate-scale" type="button">
+                                <i class="ci-download-cloud animate-target fs-sm ms-n1 me-1"></i>
+                                Download
+                            </button>
+                        </td>
+                    </tr>
+                    <!-- Item -->
+                    <tr>
+                        <td class="py-3 px-0 pe-sm-2">
+                            <div class="d-none d-md-block d-xl-none" style="width: 350px"></div>
+                            <div class="d-none d-xl-block" style="width: 450px"></div>
+                            <div
+                                class="d-flex align-items-start align-items-md-center hover-effect-scale position-relative py-1">
+                                <div class="ratio bg-body-secondary rounded overflow-hidden flex-shrink-sm-0"
+                                    style="--cz-aspect-ratio: calc(110 / 142 * 100%); max-width: 142px">
+                                    <img alt="Image" class="hover-effect-target" src="/img/account/products/15.jpg" />
+                                </div>
+                                <div class="ps-2 ps-sm-3 ms-1">
+                                    <h6 class="product mb-2">
+                                        <a class="fs-sm fw-medium hover-effect-underline stretched-link"
+                                            href="{{ route('second', ['shop', 'product-marketplace']) }}">A stunning set of tablet pro
+                                            mockups</a>
+                                    </h6>
+                                    <div class="d-flex align-items-center flex-wrap gap-1 fs-xs">
+                                        <div class="author d-flex align-items-center fs-xs fw-medium text-body gap-1 p-0">
+                                            <div class="flex-shrink-0 border rounded-circle" style="width: 22px">
+                                                <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
+                                                    <img alt="Avatar" src="/img/shop/marketplace/avatars/04.png" />
+                                                </div>
+                                            </div>
+                                            Fireby
+                                        </div>
+                                        <div class="text-body-secondary">in</div>
+                                        <div class="category fs-xs fw-medium text-body">Mockups</div>
+                                    </div>
+                                    <!-- Visible on screens < 769px wide (md breakpoint) -->
+                                    <div class="fs-xs text-nowrap d-md-none mt-2 mb-1"><span
+                                            class="text-body-secondary">License:</span> <span
+                                            class="license">Extended</span></div>
+                                    <div class="fs-xs text-nowrap d-md-none"><span
+                                            class="text-body-secondary">Date:</span> May 30, 2024</div>
+                                    <!-- Visible on screens < 500px wide (sm breakpoint) -->
+                                    <button
+                                        class="btn btn-sm btn-secondary rounded-pill animate-scale position-relative z-2 d-sm-none mt-3"
+                                        type="button">
+                                        <i class="ci-download-cloud animate-target fs-sm ms-n1 me-1"></i>
+                                        Download
+                                    </button>
+                                </div>
+                            </div>
+                        </td>
+                        <!-- Visible on screens > 768px wide (md breakpoint) -->
+                        <td class="d-none d-md-table-cell py-3">May 30, 2024<span
+                                class="date visually-hidden">1717066800</span></td>
+                        <td class="d-none d-md-table-cell py-3">Extended</td>
+                        <!-- Visible on screens > 500px wide (sm breakpoint) -->
+                        <td class="d-none d-sm-table-cell text-end py-3 ps-0 ps-sm-3 pe-0" style="width: 120px">
+                            <button class="btn btn-sm btn-secondary rounded-pill animate-scale" type="button">
+                                <i class="ci-download-cloud animate-target fs-sm ms-n1 me-1"></i>
+                                Download
+                            </button>
+                        </td>
+                    </tr>
+                    <!-- Item -->
+                    <tr>
+                        <td class="py-3 px-0 pe-sm-2">
+                            <div class="d-none d-md-block d-xl-none" style="width: 350px"></div>
+                            <div class="d-none d-xl-block" style="width: 450px"></div>
+                            <div
+                                class="d-flex align-items-start align-items-md-center hover-effect-scale position-relative py-1">
+                                <div class="ratio bg-body-secondary rounded overflow-hidden flex-shrink-sm-0"
+                                    style="--cz-aspect-ratio: calc(110 / 142 * 100%); max-width: 142px">
+                                    <img alt="Image" class="hover-effect-target" src="/img/account/products/16.jpg" />
+                                </div>
+                                <div class="ps-2 ps-sm-3 ms-1">
+                                    <h6 class="product mb-2">
+                                        <a class="fs-sm fw-medium hover-effect-underline stretched-link"
+                                            href="{{ route('second', ['shop', 'product-marketplace']) }}">Isometric smartphone mockups</a>
+                                    </h6>
+                                    <div class="d-flex align-items-center flex-wrap gap-1 fs-xs">
+                                        <div class="author d-flex align-items-center fs-xs fw-medium text-body gap-1 p-0">
+                                            <div class="flex-shrink-0 border rounded-circle" style="width: 22px">
+                                                <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
+                                                    <img alt="Avatar" src="/img/shop/marketplace/avatars/03.png" />
+                                                </div>
+                                            </div>
+                                            MD Studio
+                                        </div>
+                                        <div class="text-body-secondary">in</div>
+                                        <div class="category fs-xs fw-medium text-body">Mockups</div>
+                                    </div>
+                                    <!-- Visible on screens < 769px wide (md breakpoint) -->
+                                    <div class="fs-xs text-nowrap d-md-none mt-2 mb-1"><span
+                                            class="text-body-secondary">License:</span> <span
+                                            class="license">Standard</span></div>
+                                    <div class="fs-xs text-nowrap d-md-none"><span
+                                            class="text-body-secondary">Date:</span> April 19, 2024</div>
+                                    <!-- Visible on screens < 500px wide (sm breakpoint) -->
+                                    <button
+                                        class="btn btn-sm btn-secondary rounded-pill animate-scale position-relative z-2 d-sm-none mt-3"
+                                        type="button">
+                                        <i class="ci-download-cloud animate-target fs-sm ms-n1 me-1"></i>
+                                        Download
+                                    </button>
+                                </div>
+                            </div>
+                        </td>
+                        <!-- Visible on screens > 768px wide (md breakpoint) -->
+                        <td class="d-none d-md-table-cell py-3">April 19, 2024<span
+                                class="date visually-hidden">1713524400</span></td>
+                        <td class="d-none d-md-table-cell py-3">Standard</td>
+                        <!-- Visible on screens > 500px wide (sm breakpoint) -->
+                        <td class="d-none d-sm-table-cell text-end py-3 ps-0 ps-sm-3 pe-0" style="width: 120px">
+                            <button class="btn btn-sm btn-secondary rounded-pill animate-scale" type="button">
+                                <i class="ci-download-cloud animate-target fs-sm ms-n1 me-1"></i>
+                                Download
+                            </button>
+                        </td>
+                    </tr>
+                    <!-- Item -->
+                    <tr>
+                        <td class="py-3 px-0 pe-sm-2">
+                            <div class="d-none d-md-block d-xl-none" style="width: 350px"></div>
+                            <div class="d-none d-xl-block" style="width: 450px"></div>
+                            <div
+                                class="d-flex align-items-start align-items-md-center hover-effect-scale position-relative py-1">
+                                <div class="ratio bg-body-secondary rounded overflow-hidden flex-shrink-sm-0"
+                                    style="--cz-aspect-ratio: calc(110 / 142 * 100%); max-width: 142px">
+                                    <img alt="Image" class="hover-effect-target" src="/img/account/products/17.jpg" />
+                                </div>
+                                <div class="ps-2 ps-sm-3 ms-1">
+                                    <h6 class="product mb-2">
+                                        <a class="fs-sm fw-medium hover-effect-underline stretched-link"
+                                            href="{{ route('second', ['shop', 'product-marketplace']) }}">House plants website template</a>
+                                    </h6>
+                                    <div class="d-flex align-items-center flex-wrap gap-1 fs-xs">
+                                        <div class="author d-flex align-items-center fs-xs fw-medium text-body gap-1 p-0">
+                                            <div class="flex-shrink-0 border rounded-circle" style="width: 22px">
+                                                <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
+                                                    <img alt="Avatar" src="/img/shop/marketplace/avatars/02.png" />
+                                                </div>
+                                            </div>
+                                            Magic FS
+                                        </div>
+                                        <div class="text-body-secondary">in</div>
+                                        <div class="category fs-xs fw-medium text-body">Templates</div>
+                                    </div>
+                                    <!-- Visible on screens < 769px wide (md breakpoint) -->
+                                    <div class="fs-xs text-nowrap d-md-none mt-2 mb-1"><span
+                                            class="text-body-secondary">License:</span> <span
+                                            class="license">Extended</span></div>
+                                    <div class="fs-xs text-nowrap d-md-none"><span
+                                            class="text-body-secondary">Date:</span> April 12, 2024</div>
+                                    <!-- Visible on screens < 500px wide (sm breakpoint) -->
+                                    <button
+                                        class="btn btn-sm btn-secondary rounded-pill animate-scale position-relative z-2 d-sm-none mt-3"
+                                        type="button">
+                                        <i class="ci-download-cloud animate-target fs-sm ms-n1 me-1"></i>
+                                        Download
+                                    </button>
+                                </div>
+                            </div>
+                        </td>
+                        <!-- Visible on screens > 768px wide (md breakpoint) -->
+                        <td class="d-none d-md-table-cell py-3">April 12, 2024<span
+                                class="date visually-hidden">1712919600</span></td>
+                        <td class="d-none d-md-table-cell py-3">Extended</td>
+                        <!-- Visible on screens > 500px wide (sm breakpoint) -->
+                        <td class="d-none d-sm-table-cell text-end py-3 ps-0 ps-sm-3 pe-0" style="width: 120px">
+                            <button class="btn btn-sm btn-secondary rounded-pill animate-scale" type="button">
+                                <i class="ci-download-cloud animate-target fs-sm ms-n1 me-1"></i>
+                                Download
+                            </button>
+                        </td>
+                    </tr>
+                    <!-- Item -->
+                    <tr>
+                        <td class="py-3 px-0 pe-sm-2">
+                            <div class="d-none d-md-block d-xl-none" style="width: 350px"></div>
+                            <div class="d-none d-xl-block" style="width: 450px"></div>
+                            <div
+                                class="d-flex align-items-start align-items-md-center hover-effect-scale position-relative py-1">
+                                <div class="ratio bg-body-secondary rounded overflow-hidden flex-shrink-sm-0"
+                                    style="--cz-aspect-ratio: calc(110 / 142 * 100%); max-width: 142px">
+                                    <img alt="Image" class="hover-effect-target" src="/img/account/products/18.jpg" />
+                                </div>
+                                <div class="ps-2 ps-sm-3 ms-1">
+                                    <h6 class="product mb-2">
+                                        <a class="fs-sm fw-medium hover-effect-underline stretched-link"
+                                            href="{{ route('second', ['shop', 'product-marketplace']) }}">A collection of colorful items</a>
+                                    </h6>
+                                    <div class="d-flex align-items-center flex-wrap gap-1 fs-xs">
+                                        <div class="author d-flex align-items-center fs-xs fw-medium text-body gap-1 p-0">
+                                            <div class="flex-shrink-0 border rounded-circle" style="width: 22px">
+                                                <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
+                                                    <img alt="Avatar" src="/img/shop/marketplace/avatars/04.png" />
+                                                </div>
+                                            </div>
+                                            Fireby
+                                        </div>
+                                        <div class="text-body-secondary">in</div>
+                                        <div class="category fs-xs fw-medium text-body">3D illustration</div>
+                                    </div>
+                                    <!-- Visible on screens < 769px wide (md breakpoint) -->
+                                    <div class="fs-xs text-nowrap d-md-none mt-2 mb-1"><span
+                                            class="text-body-secondary">License:</span> <span
+                                            class="license">Standard</span></div>
+                                    <div class="fs-xs text-nowrap d-md-none"><span
+                                            class="text-body-secondary">Date:</span> March 3, 2024</div>
+                                    <!-- Visible on screens < 500px wide (sm breakpoint) -->
+                                    <button
+                                        class="btn btn-sm btn-secondary rounded-pill animate-scale position-relative z-2 d-sm-none mt-3"
+                                        type="button">
+                                        <i class="ci-download-cloud animate-target fs-sm ms-n1 me-1"></i>
+                                        Download
+                                    </button>
+                                </div>
+                            </div>
+                        </td>
+                        <!-- Visible on screens > 768px wide (md breakpoint) -->
+                        <td class="d-none d-md-table-cell py-3">March 3, 2024<span
+                                class="date visually-hidden">1709467200</span></td>
+                        <td class="d-none d-md-table-cell py-3">Standard</td>
+                        <!-- Visible on screens > 500px wide (sm breakpoint) -->
+                        <td class="d-none d-sm-table-cell text-end py-3 ps-0 ps-sm-3 pe-0" style="width: 120px">
+                            <button class="btn btn-sm btn-secondary rounded-pill animate-scale" type="button">
+                                <i class="ci-download-cloud animate-target fs-sm ms-n1 me-1"></i>
+                                Download
+                            </button>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+@endsection
+
+@section('scripts')
+@endsection
diff --git a/resources/views/account/marketplace-sales.blade.php b/resources/views/account/marketplace-sales.blade.php
new file mode 100644
index 0000000..6ba3f64
--- /dev/null
+++ b/resources/views/account/marketplace-sales.blade.php
@@ -0,0 +1,324 @@
+@extends('layouts.marketplace', ['title' => 'Marketplace Account - Sales'])
+
+@section('content')
+    <!-- Sales content -->
+    <div class="col-lg-9 pt-2 pt-xl-3">
+        <div
+            data-filter-list='{"searchClass": "product-search", "listClass": "product-list", "sortClass": "product-sort", "valueNames": ["product", "date", "tendered", "earning"]}'>
+            <!-- Header -->
+            <div class="d-md-flex align-items-center justify-content-between gap-3 pb-2 pb-sm-3 mb-md-2">
+                <h1 class="h2 mb-md-0">Sales</h1>
+                <div class="d-flex flex-column flex-sm-row gap-2 gap-sm-3">
+                    <div class="position-relative w-100">
+                        <i class="ci-search position-absolute top-50 start-0 translate-middle-y ms-3"></i>
+                        <input class="product-search form-control form-icon-start rounded-pill" placeholder="Search"
+                            type="search" />
+                    </div>
+                    <div class="position-relative" style="min-width: 190px">
+                        <i class="ci-calendar position-absolute top-50 start-0 translate-middle-y z-1 ms-3"></i>
+                        <select aria-label="Period select" class="form-select form-icon-start rounded-pill"
+                            data-select='{
+                      "classNames": {
+                        "containerInner": ["form-select", "form-icon-start", "rounded-pill"]
+                      },
+                      "removeItemButton": false
+                    }'>
+                            <option value="Current">Current month</option>
+                            <option value="Last month">Last month</option>
+                            <option value="Last 3 months">Last 3 months</option>
+                            <option value="Last 6 months">Last 6 months</option>
+                            <option value="Last year">Last year</option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+            <!-- Sales list (table) -->
+            <table class="table align-middle fs-sm mb-0">
+                <thead>
+                    <tr>
+                        <th class="ps-0" scope="col">
+                            <span class="fw-normal text-body">Product</span>
+                        </th>
+                        <th class="d-none d-md-table-cell" scope="col">
+                            <button class="btn fw-normal text-body product-sort p-0" data-sort="date"
+                                type="button">Date</button>
+                        </th>
+                        <th class="d-none d-md-table-cell" scope="col">
+                            <span class="fw-normal text-body">Status</span>
+                        </th>
+                        <th class="text-end d-none d-sm-table-cell" scope="col">
+                            <button class="btn fw-normal text-body product-sort p-0 me-n2" data-sort="tendered"
+                                type="button">Tendered</button>
+                        </th>
+                        <th class="text-end pe-0" scope="col">
+                            <button class="btn fw-normal text-body product-sort p-0 me-n2" data-sort="earning"
+                                type="button">Earning</button>
+                        </th>
+                    </tr>
+                </thead>
+                <tbody class="product-list">
+                    <!-- Item -->
+                    <tr>
+                        <td class="py-3 ps-0">
+                            <div
+                                class="d-flex align-items-start align-items-md-center hover-effect-scale position-relative">
+                                <div class="ratio bg-body-secondary rounded-2 overflow-hidden flex-shrink-0"
+                                    style="--cz-aspect-ratio: calc(52 / 66 * 100%); width: 66px">
+                                    <img alt="Image" class="hover-effect-target" src="/img/account/products/01.jpg" />
+                                </div>
+                                <div class="ps-2 ms-1">
+                                    <span
+                                        class="badge fs-xs text-info bg-info-subtle rounded-pill d-md-none mb-1">Pending</span>
+                                    <h6 class="product mb-1 mb-md-0">
+                                        <a class="fs-sm fw-medium hover-effect-underline stretched-link"
+                                            href="{{ route('second', ['shop', 'product-marketplace']) }}">Smart watches series 9 mockup</a>
+                                    </h6>
+                                    <div class="fs-body-emphasis d-sm-none mb-1">$15.00</div>
+                                    <div class="fs-body-emphasis d-md-none">June 30, 2024</div>
+                                </div>
+                            </div>
+                        </td>
+                        <td class="d-none d-md-table-cell py-3">June 30, 2024<span
+                                class="date visually-hidden">1719745200</span></td>
+                        <td class="d-none d-md-table-cell py-3">
+                            <span class="badge fs-xs text-info bg-info-subtle rounded-pill">Pending</span>
+                        </td>
+                        <td class="tendered text-end d-none d-sm-table-cell py-3">$15.00</td>
+                        <td class="earning text-end py-3 pe-0">$11.25</td>
+                    </tr>
+                    <!-- Item -->
+                    <tr>
+                        <td class="py-3 ps-0">
+                            <div
+                                class="d-flex align-items-start align-items-md-center hover-effect-scale position-relative">
+                                <div class="ratio bg-body-secondary rounded-2 overflow-hidden flex-shrink-0"
+                                    style="--cz-aspect-ratio: calc(52 / 66 * 100%); width: 66px">
+                                    <img alt="Image" class="hover-effect-target" src="/img/account/products/02.jpg" />
+                                </div>
+                                <div class="ps-2 ms-1">
+                                    <span
+                                        class="badge fs-xs text-success bg-success-subtle rounded-pill d-md-none mb-1">Completed</span>
+                                    <h6 class="product mb-1 mb-md-0">
+                                        <a class="fs-sm fw-medium hover-effect-underline stretched-link"
+                                            href="{{ route('second', ['shop', 'product-marketplace']) }}">3D box mockup bold rebrand</a>
+                                    </h6>
+                                    <div class="fs-body-emphasis d-sm-none mb-1">$16.00</div>
+                                    <div class="fs-body-emphasis d-md-none">June 29, 2024</div>
+                                </div>
+                            </div>
+                        </td>
+                        <td class="d-none d-md-table-cell py-3">June 29, 2024<span
+                                class="date visually-hidden">1719658800</span></td>
+                        <td class="d-none d-md-table-cell py-3">
+                            <span class="badge fs-xs text-success bg-success-subtle rounded-pill">Completed</span>
+                        </td>
+                        <td class="tendered text-end d-none d-sm-table-cell py-3">$16.00</td>
+                        <td class="earning text-end py-3 pe-0">$12.00</td>
+                    </tr>
+                    <!-- Item -->
+                    <tr>
+                        <td class="py-3 ps-0">
+                            <div
+                                class="d-flex align-items-start align-items-md-center hover-effect-scale position-relative">
+                                <div class="ratio bg-body-secondary rounded-2 overflow-hidden flex-shrink-0"
+                                    style="--cz-aspect-ratio: calc(52 / 66 * 100%); width: 66px">
+                                    <img alt="Image" class="hover-effect-target" src="/img/account/products/03.jpg" />
+                                </div>
+                                <div class="ps-2 ms-1">
+                                    <span
+                                        class="badge fs-xs text-success bg-success-subtle rounded-pill d-md-none mb-1">Completed</span>
+                                    <h6 class="product mb-1 mb-md-0">
+                                        <a class="fs-sm fw-medium hover-effect-underline stretched-link"
+                                            href="{{ route('second', ['shop', 'product-marketplace']) }}">iPhone 15 pro mockups</a>
+                                    </h6>
+                                    <div class="fs-body-emphasis d-sm-none mb-1">$19.00</div>
+                                    <div class="fs-body-emphasis d-md-none">June 29, 2024</div>
+                                </div>
+                            </div>
+                        </td>
+                        <td class="d-none d-md-table-cell py-3">June 29, 2024<span
+                                class="date visually-hidden">1719658800</span></td>
+                        <td class="d-none d-md-table-cell py-3">
+                            <span class="badge fs-xs text-success bg-success-subtle rounded-pill">Completed</span>
+                        </td>
+                        <td class="tendered text-end d-none d-sm-table-cell py-3">$19.00</td>
+                        <td class="earning text-end py-3 pe-0">$14.25</td>
+                    </tr>
+                    <!-- Item -->
+                    <tr>
+                        <td class="py-3 ps-0">
+                            <div
+                                class="d-flex align-items-start align-items-md-center hover-effect-scale position-relative">
+                                <div class="ratio bg-body-secondary rounded-2 overflow-hidden flex-shrink-0"
+                                    style="--cz-aspect-ratio: calc(52 / 66 * 100%); width: 66px">
+                                    <img alt="Image" class="hover-effect-target" src="/img/account/products/04.jpg" />
+                                </div>
+                                <div class="ps-2 ms-1">
+                                    <span
+                                        class="badge fs-xs text-success bg-success-subtle rounded-pill d-md-none mb-1">Completed</span>
+                                    <h6 class="product mb-1 mb-md-0">
+                                        <a class="fs-sm fw-medium hover-effect-underline stretched-link"
+                                            href="{{ route('second', ['shop', 'product-marketplace']) }}">A collection of colorful items</a>
+                                    </h6>
+                                    <div class="fs-body-emphasis d-sm-none mb-1">$21.00</div>
+                                    <div class="fs-body-emphasis d-md-none">June 28, 2024</div>
+                                </div>
+                            </div>
+                        </td>
+                        <td class="d-none d-md-table-cell py-3">June 28, 2024<span
+                                class="date visually-hidden">1719572400</span></td>
+                        <td class="d-none d-md-table-cell py-3">
+                            <span class="badge fs-xs text-success bg-success-subtle rounded-pill">Completed</span>
+                        </td>
+                        <td class="tendered text-end d-none d-sm-table-cell py-3">$21.00</td>
+                        <td class="earning text-end py-3 pe-0">$15.75</td>
+                    </tr>
+                    <!-- Item -->
+                    <tr>
+                        <td class="py-3 ps-0">
+                            <div
+                                class="d-flex align-items-start align-items-md-center hover-effect-scale position-relative">
+                                <div class="ratio bg-body-secondary rounded-2 overflow-hidden flex-shrink-0"
+                                    style="--cz-aspect-ratio: calc(52 / 66 * 100%); width: 66px">
+                                    <img alt="Image" class="hover-effect-target" src="/img/account/products/05.jpg" />
+                                </div>
+                                <div class="ps-2 ms-1">
+                                    <span
+                                        class="badge fs-xs text-success bg-success-subtle rounded-pill d-md-none mb-1">Completed</span>
+                                    <h6 class="product mb-1 mb-md-0">
+                                        <a class="fs-sm fw-medium hover-effect-underline stretched-link"
+                                            href="{{ route('second', ['shop', 'product-marketplace']) }}">House plants website template</a>
+                                    </h6>
+                                    <div class="fs-body-emphasis d-sm-none mb-1">$35.00</div>
+                                    <div class="fs-body-emphasis d-md-none">June 27, 2024</div>
+                                </div>
+                            </div>
+                        </td>
+                        <td class="d-none d-md-table-cell py-3">June 27, 2024<span
+                                class="date visually-hidden">1719486000</span></td>
+                        <td class="d-none d-md-table-cell py-3">
+                            <span class="badge fs-xs text-success bg-success-subtle rounded-pill">Completed</span>
+                        </td>
+                        <td class="tendered text-end d-none d-sm-table-cell py-3">$35.00</td>
+                        <td class="earning text-end py-3 pe-0">$26.25</td>
+                    </tr>
+                    <!-- Item -->
+                    <tr>
+                        <td class="py-3 ps-0">
+                            <div
+                                class="d-flex align-items-start align-items-md-center hover-effect-scale position-relative">
+                                <div class="ratio bg-body-secondary rounded-2 overflow-hidden flex-shrink-0"
+                                    style="--cz-aspect-ratio: calc(52 / 66 * 100%); width: 66px">
+                                    <img alt="Image" class="hover-effect-target" src="/img/account/products/06.jpg" />
+                                </div>
+                                <div class="ps-2 ms-1">
+                                    <span
+                                        class="badge fs-xs text-success bg-success-subtle rounded-pill d-md-none mb-1">Completed</span>
+                                    <h6 class="product mb-1 mb-md-0">
+                                        <a class="fs-sm fw-medium hover-effect-underline stretched-link"
+                                            href="{{ route('second', ['shop', 'product-marketplace']) }}">Isometric smartphone mockups</a>
+                                    </h6>
+                                    <div class="fs-body-emphasis d-sm-none mb-1">$24.00</div>
+                                    <div class="fs-body-emphasis d-md-none">June 26, 2024</div>
+                                </div>
+                            </div>
+                        </td>
+                        <td class="d-none d-md-table-cell py-3">June 26, 2024<span
+                                class="date visually-hidden">1719399600</span></td>
+                        <td class="d-none d-md-table-cell py-3">
+                            <span class="badge fs-xs text-success bg-success-subtle rounded-pill">Completed</span>
+                        </td>
+                        <td class="tendered text-end d-none d-sm-table-cell py-3">$24.00</td>
+                        <td class="earning text-end py-3 pe-0">$18.00</td>
+                    </tr>
+                    <!-- Item -->
+                    <tr>
+                        <td class="py-3 ps-0">
+                            <div
+                                class="d-flex align-items-start align-items-md-center hover-effect-scale position-relative">
+                                <div class="ratio bg-body-secondary rounded-2 overflow-hidden flex-shrink-0"
+                                    style="--cz-aspect-ratio: calc(52 / 66 * 100%); width: 66px">
+                                    <img alt="Image" class="hover-effect-target" src="/img/account/products/07.jpg" />
+                                </div>
+                                <div class="ps-2 ms-1">
+                                    <span
+                                        class="badge fs-xs text-success bg-success-subtle rounded-pill d-md-none mb-1">Completed</span>
+                                    <h6 class="product mb-1 mb-md-0">
+                                        <a class="fs-sm fw-medium hover-effect-underline stretched-link"
+                                            href="{{ route('second', ['shop', 'product-marketplace']) }}">A stunning set of tablet pro
+                                            mockups</a>
+                                    </h6>
+                                    <div class="fs-body-emphasis d-sm-none mb-1">$18.00</div>
+                                    <div class="fs-body-emphasis d-md-none">June 26, 2024</div>
+                                </div>
+                            </div>
+                        </td>
+                        <td class="d-none d-md-table-cell py-3">June 26, 2024<span
+                                class="date visually-hidden">1719399600</span></td>
+                        <td class="d-none d-md-table-cell py-3">
+                            <span class="badge fs-xs text-success bg-success-subtle rounded-pill">Completed</span>
+                        </td>
+                        <td class="tendered text-end d-none d-sm-table-cell py-3">$18.00</td>
+                        <td class="earning text-end py-3 pe-0">$13.50</td>
+                    </tr>
+                    <!-- Item -->
+                    <tr>
+                        <td class="py-3 ps-0">
+                            <div
+                                class="d-flex align-items-start align-items-md-center hover-effect-scale position-relative">
+                                <div class="ratio bg-body-secondary rounded-2 overflow-hidden flex-shrink-0"
+                                    style="--cz-aspect-ratio: calc(52 / 66 * 100%); width: 66px">
+                                    <img alt="Image" class="hover-effect-target" src="/img/account/products/08.jpg" />
+                                </div>
+                                <div class="ps-2 ms-1">
+                                    <span
+                                        class="badge fs-xs text-danger bg-danger-subtle rounded-pill d-md-none mb-1">Canceled</span>
+                                    <h6 class="product mb-1 mb-md-0">
+                                        <a class="fs-sm fw-medium hover-effect-underline stretched-link"
+                                            href="{{ route('second', ['shop', 'product-marketplace']) }}">Multi device mockup PSD</a>
+                                    </h6>
+                                    <div class="fs-body-emphasis d-sm-none mb-1">$27.00</div>
+                                    <div class="fs-body-emphasis d-md-none">June 25, 2024</div>
+                                </div>
+                            </div>
+                        </td>
+                        <td class="d-none d-md-table-cell py-3">June 25, 2024<span
+                                class="date visually-hidden">1719313200</span></td>
+                        <td class="d-none d-md-table-cell py-3">
+                            <span class="badge fs-xs text-danger bg-danger-subtle rounded-pill">Canceled</span>
+                        </td>
+                        <td class="tendered text-end d-none d-sm-table-cell py-3">$27.00</td>
+                        <td class="earning text-end py-3 pe-0">$0.00</td>
+                    </tr>
+                </tbody>
+            </table>
+            <!-- Pagination -->
+            <div class="d-flex align-items-center justify-content-between pt-4 gap-3">
+                <div class="fs-sm">Showing <span class="fw-semibold">8</span> of <span
+                        class="fw-semibold">30</span><span class="d-none d-sm-inline"> results</span></div>
+                <nav aria-label="Pagination">
+                    <ul class="pagination">
+                        <li aria-current="page" class="page-item active">
+                            <span class="page-link">
+                                1
+                                <span class="visually-hidden">(current)</span>
+                            </span>
+                        </li>
+                        <li class="page-item">
+                            <a class="page-link" href="#">2</a>
+                        </li>
+                        <li class="page-item">
+                            <a class="page-link" href="#">3</a>
+                        </li>
+                        <li class="page-item">
+                            <a class="page-link" href="#">4</a>
+                        </li>
+                    </ul>
+                </nav>
+            </div>
+        </div>
+    </div>
+@endsection
+
+@section('scripts')
+@endsection
diff --git a/resources/views/account/marketplace-settings.blade.php b/resources/views/account/marketplace-settings.blade.php
new file mode 100644
index 0000000..9451379
--- /dev/null
+++ b/resources/views/account/marketplace-settings.blade.php
@@ -0,0 +1,285 @@
+@extends('layouts.marketplace', ['title' => 'Marketplace Account - Settings'])
+
+@section('content')
+    <!-- Account settings content -->
+    <div class="col-lg-9 pt-2 pt-xl-3">
+        <!-- Page title -->
+        <h1 class="h2 pb-1 pb-sm-2 pb-md-3">Settings</h1>
+        <!-- Nav tabs -->
+        <div class="overflow-auto mb-3">
+            <ul class="nav nav-pills flex-nowrap gap-2 text-nowrap pb-3" role="tablist">
+                <li class="nav-item" role="presentation">
+                    <button aria-controls="profile" aria-selected="true" class="nav-link active" data-bs-target="#profile"
+                        data-bs-toggle="pill" id="profile-tab" role="tab" type="button">
+                        Profile
+                    </button>
+                </li>
+                <li class="nav-item" role="presentation">
+                    <button aria-controls="security" aria-selected="false" class="nav-link" data-bs-target="#security"
+                        data-bs-toggle="pill" id="security-tab" role="tab" type="button">
+                        Security
+                    </button>
+                </li>
+                <li class="nav-item" role="presentation">
+                    <button aria-controls="payment" aria-selected="false" class="nav-link" data-bs-target="#payment"
+                        data-bs-toggle="pill" id="payment-tab" role="tab" type="button">
+                        Payment methods
+                    </button>
+                </li>
+                <li class="nav-item" role="presentation">
+                    <button aria-controls="notifications" aria-selected="false" class="nav-link"
+                        data-bs-target="#notifications" data-bs-toggle="pill" id="notifications-tab" role="tab"
+                        type="button">
+                        Notifications
+                    </button>
+                </li>
+            </ul>
+        </div>
+        <!-- Tabs content -->
+        <div class="tab-content">
+            <!-- Profile tab -->
+            <div aria-labelledby="profile-tab" class="tab-pane fade show active" id="profile" role="tabpanel">
+                <!-- Avatar -->
+                <div class="d-flex align-items-start align-items-sm-center pb-3 mb-3">
+                    <div class="ratio ratio-1x1 hover-effect-opacity border rounded-circle overflow-hidden"
+                        style="width: 112px">
+                        <img alt="Avatar" src="/img/account/avatar-lg.png" />
+                        <div
+                            class="hover-effect-target position-absolute top-0 start-0 d-flex align-items-center justify-content-center w-100 h-100 opacity-0">
+                            <button aria-label="Remove" class="btn btn-icon btn-sm btn-light position-relative z-2"
+                                type="button">
+                                <i class="ci-trash fs-base"></i>
+                            </button>
+                            <span class="position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 z-1"></span>
+                        </div>
+                    </div>
+                    <div class="ps-3 ps-sm-4">
+                        <p class="fs-sm" style="max-width: 400px">Your profile picture will appear on your
+                            profile and listings. PNG or JPG no bigger than 500px wide and tall.</p>
+                        <button class="btn btn-sm btn-secondary animate-rotate rounded-pill" type="button">
+                            <i class="ci-refresh-ccw animate-target fs-sm ms-n1 me-2"></i>
+                            Update picture
+                        </button>
+                    </div>
+                </div>
+                <!-- Settings form -->
+                <form class="needs-validation" novalidate="">
+                    <div class="row row-cols-1 row-cols-sm-2 g-4 mb-4">
+                        <div class="col position-relative">
+                            <label class="form-label fs-base" for="fn">First name *</label>
+                            <input class="form-control form-control-lg rounded-pill" id="fn" required=""
+                                type="text" value="Coderthemes" />
+                            <div class="invalid-tooltip bg-transparent p-0">Enter your first name!</div>
+                        </div>
+                        <div class="col position-relative">
+                            <label class="form-label fs-base" for="ln">Last name *</label>
+                            <input class="form-control form-control-lg rounded-pill" id="ln" required=""
+                                type="text" value="Studio" />
+                            <div class="invalid-tooltip bg-transparent p-0">Enter your last name!</div>
+                        </div>
+                        <div class="col position-relative">
+                            <label class="form-label d-flex align-items-center fs-base" for="email">Email
+                                address * <span class="badge text-danger bg-danger-subtle ms-2">Verify
+                                    email</span></label>
+                            <input class="form-control form-control-lg rounded-pill" id="email" required=""
+                                type="email" value="contact@coderthemes" />
+                            <div class="invalid-tooltip bg-transparent p-0">Enter a valid email address!</div>
+                        </div>
+                        <div class="col">
+                            <label class="form-label fs-base" for="display-name">Display name</label>
+                            <input class="form-control form-control-lg form-icon-end rounded-pill" id="display-name"
+                                type="text" value="Coderthemes" />
+                        </div>
+                    </div>
+                    <div class="pb-2 mb-3 mb-sm-4">
+                        <label class="form-label fs-base" for="description">Description</label>
+                        <textarea class="form-control form-control-lg rounded-5" id="description" rows="6">Digital products &amp; bespoke development</textarea>
+                    </div>
+                    <div class="pb-2 mb-4">
+                        <div class="form-check fs-lg m-0">
+                            <input class="form-check-input" id="allow-contact" type="checkbox" />
+                            <label class="form-check-label fs-base" for="allow-contact">Allow other users to
+                                contact you with work inquiries.</label>
+                        </div>
+                    </div>
+                    <div class="d-flex gap-3">
+                        <button class="btn btn-lg btn-primary rounded-pill" type="submit">Save changes</button>
+                        <button class="btn btn-lg btn-secondary rounded-pill" type="reset">Cancel</button>
+                    </div>
+                </form>
+            </div>
+            <!-- Security tab -->
+            <div aria-labelledby="security-tab" class="tab-pane fade" id="security" role="tabpanel">
+                <!-- Change password form -->
+                <form class="needs-validation" novalidate="">
+                    <div class="row row-cols-1 row-cols-sm-2 g-4 mb-4">
+                        <div class="col">
+                            <label class="form-label fs-base" for="current-password">Current password</label>
+                            <div class="password-toggle">
+                                <input class="form-control form-control-lg rounded-pill" id="current-password"
+                                    required="" type="password" />
+                                <div class="invalid-tooltip bg-transparent p-0">Incorrect password. Please try
+                                    again.</div>
+                                <label aria-label="Show/hide password" class="password-toggle-button">
+                                    <input class="btn-check" type="checkbox" />
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row row-cols-1 row-cols-sm-2 g-4 mb-4">
+                        <div class="col">
+                            <label class="form-label fs-base" for="new-password">New password <span
+                                    class="fs-sm fw-normal text-body-secondary">(Min 8 chars)</span></label>
+                            <div class="password-toggle">
+                                <input class="form-control form-control-lg rounded-pill" id="new-password" minlength="8"
+                                    required="" type="password" />
+                                <div class="invalid-tooltip bg-transparent p-0">Please ensure password is at least
+                                    8 characters long.</div>
+                                <label aria-label="Show/hide password" class="password-toggle-button">
+                                    <input class="btn-check" type="checkbox" />
+                                </label>
+                            </div>
+                        </div>
+                        <div class="col">
+                            <label class="form-label fs-base" for="confirm-new-password">Confirm new
+                                password</label>
+                            <div class="password-toggle">
+                                <input class="form-control form-control-lg rounded-pill" id="confirm-new-password"
+                                    minlength="8" required="" type="password" />
+                                <div class="invalid-tooltip bg-transparent p-0">Passwords do not match.</div>
+                                <label aria-label="Show/hide password" class="password-toggle-button">
+                                    <input class="btn-check" type="checkbox" />
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="d-flex gap-3">
+                        <button class="btn btn-lg btn-primary rounded-pill" type="submit">Update
+                            password</button>
+                        <button class="btn btn-lg btn-secondary rounded-pill" type="reset">Cancel</button>
+                    </div>
+                </form>
+                <!-- Delete account -->
+                <h2 class="h6 pt-5 mt-xl-2 pb-1 mb-2">Delete account</h2>
+                <p class="fs-sm">When you delete your account, your public profile will be deactivated
+                    immediately. If you change your mind before the 14 days are up, sign in with your email and
+                    password, and we'll send a link to reactivate account.</p>
+                <div class="form-check mb-3">
+                    <input class="form-check-input" id="confirm-deletion" type="checkbox" />
+                    <label class="form-check-label" for="confirm-deletion">Yes, I want to delete my
+                        account</label>
+                </div>
+                <a class="fs-sm fw-medium text-danger" href="#!">Delete account</a>
+            </div>
+            <!-- Payment methods tab -->
+            <div aria-labelledby="payment-tab" class="tab-pane fade" id="payment" role="tabpanel">
+                <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3 g-md-4 g-lg-3 g-xl-4">
+                    <div class="col">
+                        <div class="card h-100 rounded-4">
+                            <div class="card-body pb-3">
+                                <div class="d-flex align-items-start justify-content-between mb-4">
+                                    <img alt="Mastercard" class="m-n3" src="/img/payment-methods/mastercard.svg"
+                                        width="100" />
+                                    <span class="badge text-bg-info rounded-pill">Primary</span>
+                                </div>
+                                <div class="h6 mb-1">**** **** **** 8341</div>
+                                <div class="text-danger fs-xs">Expired 05/24</div>
+                            </div>
+                            <div class="card-footer d-flex gap-2 bg-transparent border-0 pt-0 pb-4">
+                                <button class="btn btn-sm btn-outline-secondary rounded-pill me-1"
+                                    type="button">Edit</button>
+                                <button class="btn btn-sm btn-outline-secondary rounded-pill"
+                                    type="button">Remove</button>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col">
+                        <div class="card h-100 rounded-4">
+                            <div class="card-body pb-3">
+                                <div class="d-flex align-items-start justify-content-between mb-4">
+                                    <img alt="Visa" class="d-none-dark m-n3"
+                                        src="/img/payment-methods/visa-light-mode.svg" width="100" />
+                                    <img alt="Visa" class="d-none d-block-dark m-n3"
+                                        src="/img/payment-methods/visa-dark-mode.svg" width="100" />
+                                    <div class="nav animate-underline">
+                                        <a class="nav-link animate-target fs-xs p-0" href="#!">Set as
+                                            primary</a>
+                                    </div>
+                                </div>
+                                <div class="h6 mb-1">**** **** **** 1276</div>
+                                <div class="text-body fs-xs">Expiration 01/27</div>
+                            </div>
+                            <div class="card-footer d-flex gap-2 bg-transparent border-0 pt-0 pb-4">
+                                <button class="btn btn-sm btn-outline-secondary rounded-pill me-1"
+                                    type="button">Edit</button>
+                                <button class="btn btn-sm btn-outline-secondary rounded-pill"
+                                    type="button">Remove</button>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col">
+                        <div class="card border-0 h-100">
+                            <span
+                                class="position-absolute top-0 start-0 w-100 h-100 border border-dashed border-secondary border-opacity-25 rounded-4 d-none-dark"></span>
+                            <span
+                                class="position-absolute top-0 start-0 w-100 h-100 border border-dashed border-light border-opacity-25 rounded-4 d-none d-block-dark"></span>
+                            <div
+                                class="card-body position-relative z-2 nav align-items-center justify-content-center py-5">
+                                <a class="nav-link animate-underline stretched-link min-w-0 fs-base px-0"
+                                    data-bs-toggle="modal" href="#addPaymentModal">
+                                    <i class="ci-plus fs-lg ms-n2 me-2"></i>
+                                    <span class="animate-target text-truncate">Add payment method</span>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- Notifications tab -->
+            <div aria-labelledby="notifications-tab" class="tab-pane fade" id="notifications" role="tabpanel">
+                <div class="vstack gap-4 pt-sm-1">
+                    <div class="form-check form-switch mb-0">
+                        <input checked="" class="form-check-input" id="product-sold" type="checkbox" />
+                        <label class="form-check-label ps-2" for="product-sold">
+                            <span class="d-block h6 mb-2">Product sold notifications</span>
+                            <span class="fs-sm">Send an email when someone purchased one of my product.</span>
+                        </label>
+                    </div>
+                    <div class="form-check form-switch mb-0">
+                        <input checked="" class="form-check-input" id="product-update" type="checkbox" />
+                        <label class="form-check-label ps-2" for="product-update">
+                            <span class="d-block h6 mb-2">Product update notifications</span>
+                            <span class="fs-sm">Send an email when a product I've purchased is updated.</span>
+                        </label>
+                    </div>
+                    <div class="form-check form-switch mb-0">
+                        <input class="form-check-input" id="surveys" type="checkbox" />
+                        <label class="form-check-label ps-2" for="surveys">
+                            <span class="d-block h6 mb-2">Surveys and tests</span>
+                            <span class="fs-sm">Receive invitations to participate in surveys, consultations, and
+                                tool testing.</span>
+                        </label>
+                    </div>
+                    <div class="form-check form-switch mb-0">
+                        <input checked="" class="form-check-input" id="product-review" type="checkbox" />
+                        <label class="form-check-label ps-2" for="product-review">
+                            <span class="d-block h6 mb-2">Product review notifications</span>
+                            <span class="fs-sm">Company news and cooperation offers.</span>
+                        </label>
+                    </div>
+                    <div class="form-check form-switch mb-0">
+                        <input class="form-check-input" id="daily-summary" type="checkbox" />
+                        <label class="form-check-label ps-2" for="daily-summary">
+                            <span class="d-block h6 mb-2">Daily summary emails</span>
+                            <span class="fs-sm">Send an email when someone leaves a review with his/her
+                                rating.</span>
+                        </label>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+@endsection
+
+@section('scripts')
+@endsection
diff --git a/resources/views/account/notifications.blade.php b/resources/views/account/notifications.blade.php
new file mode 100644
index 0000000..4b0682f
--- /dev/null
+++ b/resources/views/account/notifications.blade.php
@@ -0,0 +1,103 @@
+@extends('layouts.account', ['title' => 'Account - Notifications'])
+
+@section('content')
+    <!-- Notifications content -->
+    <div class="col-lg-9">
+        <div class="ps-lg-3 ps-xl-0">
+            <!-- Page title + Master switch -->
+            <div class="nav flex-nowrap align-items-center justify-content-between pb-3 mb-3 mb-lg-4">
+                <h1 class="h2 me-3 mb-0">Notifications</h1>
+                <div class="form-check form-switch nav-link animate-underline p-0 m-0"
+                    data-master-checkbox='{"container": "#notifications", "label": "Select all", "labelChecked": "Unselect all"}'>
+                    <label class="form-check-label animate-target me-5" for="notifications-master">Unselect
+                        all</label>
+                    <div class="ps-3">
+                        <input checked="" class="form-check-input" id="notifications-master" type="checkbox" />
+                    </div>
+                </div>
+            </div>
+            <!-- Notification switches list -->
+            <div class="vstack gap-4" id="notifications">
+                <div class="form-check form-switch mb-0">
+                    <input class="form-check-input" id="exclusive-offers" type="checkbox" />
+                    <label class="form-check-label ps-2" for="exclusive-offers">
+                        <span class="d-block h6 mb-2">Exclusive offers</span>
+                        <span class="fs-sm">Receive alerts about exclusive discounts, promotions, and special
+                            offers tailored just for you.</span>
+                    </label>
+                </div>
+                <div class="form-check form-switch mb-0">
+                    <input checked="" class="form-check-input" id="order-updates" type="checkbox" />
+                    <label class="form-check-label ps-2" for="order-updates">
+                        <span class="d-block h6 mb-2">Order updates</span>
+                        <span class="fs-sm">Stay informed about the status of your orders, including
+                            confirmations, shipping updates, and delivery notifications.</span>
+                    </label>
+                </div>
+                <div class="form-check form-switch mb-0">
+                    <input checked="" class="form-check-input" id="products-recommendations" type="checkbox" />
+                    <label class="form-check-label ps-2" for="products-recommendations">
+                        <span class="d-block h6 mb-2">Product recommendations</span>
+                        <span class="fs-sm">Get personalized recommendations based on your browsing and purchase
+                            history to discover new products you'll love.</span>
+                    </label>
+                </div>
+                <div class="form-check form-switch mb-0">
+                    <input class="form-check-input" id="restock" type="checkbox" />
+                    <label class="form-check-label ps-2" for="restock">
+                        <span class="d-block h6 mb-2">Restock notifications</span>
+                        <span class="fs-sm">Be the first to know when out-of-stock items are back in inventory,
+                            ensuring you never miss out on your favorite products.</span>
+                    </label>
+                </div>
+                <div class="form-check form-switch mb-0">
+                    <input class="form-check-input" id="events" type="checkbox" />
+                    <label class="form-check-label ps-2" for="events">
+                        <span class="d-block h6 mb-2">Event reminders</span>
+                        <span class="fs-sm">Receive reminders about upcoming sales events, flash sales, or product
+                            launches to make sure you're always in the loop.</span>
+                    </label>
+                </div>
+                <div class="form-check form-switch mb-0">
+                    <input checked="" class="form-check-input" id="account-security" type="checkbox" />
+                    <label class="form-check-label ps-2" for="account-security">
+                        <span class="d-block h6 mb-2">Account security alerts</span>
+                        <span class="fs-sm">Receive notifications about any suspicious account activity or changes
+                            to your login credentials for enhanced security.</span>
+                    </label>
+                </div>
+                <div class="form-check form-switch mb-0">
+                    <input class="form-check-input" id="support" type="checkbox" />
+                    <label class="form-check-label ps-2" for="support">
+                        <span class="d-block h6 mb-2">Customer support updates</span>
+                        <span class="fs-sm">Get updates on any inquiries or support tickets you've submitted,
+                            ensuring timely resolution of any issues.</span>
+                    </label>
+                </div>
+            </div>
+            <!-- Communication channels -->
+            <h2 class="h6 pt-5 mt-md-2">Communication channels</h2>
+            <div class="d-flex flex-column gap-2">
+                <div class="form-check">
+                    <input class="form-check-input" id="sms" type="checkbox" />
+                    <label class="form-check-label" for="sms">SMS</label>
+                </div>
+                <div class="form-check">
+                    <input class="form-check-input" id="whatsapp" type="checkbox" />
+                    <label class="form-check-label" for="whatsapp">Messages in WhatsApp</label>
+                </div>
+                <div class="form-check">
+                    <input checked="" class="form-check-input" id="email" type="checkbox" />
+                    <label class="form-check-label" for="email">Email</label>
+                </div>
+                <div class="form-check">
+                    <input class="form-check-input" id="push" type="checkbox" />
+                    <label class="form-check-label" for="push">App push notifications</label>
+                </div>
+            </div>
+        </div>
+    </div>
+@endsection
+
+@section('scripts')
+@endsection
diff --git a/resources/views/account/orders.blade.php b/resources/views/account/orders.blade.php
new file mode 100644
index 0000000..4eee6f3
--- /dev/null
+++ b/resources/views/account/orders.blade.php
@@ -0,0 +1,386 @@
+@extends('layouts.account', ['title' => 'Account - Orders History'])
+
+@section('content')
+    <!-- Orders content -->
+    <div class="col-lg-9">
+        <div class="ps-lg-3 ps-xl-0">
+            <!-- Page title + Sorting selects -->
+            <div class="row align-items-center pb-3 pb-md-4 mb-md-1 mb-lg-2">
+                <div class="col-md-4 col-xl-6 mb-3 mb-md-0">
+                    <h1 class="h2 me-3 mb-0">Orders</h1>
+                </div>
+                <div class="col-md-8 col-xl-6">
+                    <div class="row row-cols-1 row-cols-sm-2 g-3 g-xxl-4">
+                        <div class="col">
+                            <select aria-label="Status sorting" class="form-select"
+                                data-select='{
+                        "placeholderValue": "Select status",
+                        "choices": [
+                          {
+                            "value": "",
+                            "label": "Select status",
+                            "placeholder": true
+                          },
+                          {
+                            "value": "inprogress",
+                            "label": "&lt;div class=\"d-flex align-items-center text-nowrap\"&gt;&lt;span class=\"bg-info rounded-circle p-1 me-2\"&gt;&lt;/span&gt;In progress&lt;/div&gt;"
+                          },
+                          {
+                            "value": "delivered",
+                            "label": "&lt;div class=\"d-flex align-items-center text-nowrap\"&gt;&lt;span class=\"bg-success rounded-circle p-1 me-2\"&gt;&lt;/span&gt;Delivered&lt;/div&gt;"
+                          },
+                          {
+                            "value": "canceled",
+                            "label": "&lt;div class=\"d-flex align-items-center text-nowrap\"&gt;&lt;span class=\"bg-danger rounded-circle p-1 me-2\"&gt;&lt;/span&gt;Canceled&lt;/div&gt;"
+                          },
+                          {
+                            "value": "delayed",
+                            "label": "&lt;div class=\"d-flex align-items-center text-nowrap\"&gt;&lt;span class=\"bg-warning rounded-circle p-1 me-2\"&gt;&lt;/span&gt;Delayed&lt;/div&gt;"
+                          }
+                        ]
+                      }'
+                                data-select-template="true"></select>
+                        </div>
+                        <div class="col">
+                            <select aria-label="Timeframe sorting" class="form-select"
+                                data-select='{"removeItemButton": false}'>
+                                <option value="all-time">For all time</option>
+                                <option value="last-year">For last year</option>
+                                <option value="last-3-months">For last 3 months</option>
+                                <option value="last-30-days">For last 30 days</option>
+                                <option value="last-week">For last week</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- Sortable orders table -->
+            <div
+                data-filter-list='{"listClass": "orders-list", "sortClass": "orders-sort", "valueNames": ["date", "total"]}'>
+                <table class="table align-middle fs-sm text-nowrap">
+                    <thead>
+                        <tr>
+                            <th class="py-3 ps-0" scope="col">
+                                <span class="text-body fw-normal">Order <span class="d-none d-md-inline">#</span></span>
+                            </th>
+                            <th class="py-3 d-none d-md-table-cell" scope="col">
+                                <button class="btn orders-sort fw-normal text-body p-0" data-sort="date"
+                                    type="button">Order date</button>
+                            </th>
+                            <th class="py-3 d-none d-md-table-cell" scope="col">
+                                <span class="text-body fw-normal">Status</span>
+                            </th>
+                            <th class="py-3 d-none d-md-table-cell" scope="col">
+                                <button class="btn orders-sort fw-normal text-body p-0" data-sort="total"
+                                    type="button">Total</button>
+                            </th>
+                            <th class="py-3" scope="col"> </th>
+                        </tr>
+                    </thead>
+                    <tbody class="text-body-emphasis orders-list">
+                        <!-- Item -->
+                        <tr>
+                            <td class="fw-medium pt-2 pb-3 py-md-2 ps-0">
+                                <a aria-controls="orderDetails" aria-label="Show order details"
+                                    class="d-inline-block animate-underline text-body-emphasis text-decoration-none py-2"
+                                    data-bs-toggle="offcanvas" href="#orderDetails">
+                                    <span class="animate-target">78A6431D409</span>
+                                </a>
+                                <ul class="list-unstyled fw-normal text-body m-0 d-md-none">
+                                    <li>Feb 6, 2025</li>
+                                    <li class="d-flex align-items-center">
+                                        <span class="bg-info rounded-circle p-1 me-2"></span>
+                                        In progress
+                                    </li>
+                                    <li class="fw-medium text-body-emphasis">$2,105.90</li>
+                                </ul>
+                            </td>
+                            <td class="fw-medium py-3 d-none d-md-table-cell">
+                                Feb 6, 2025
+                                <span class="date d-none">25-02-06</span>
+                            </td>
+                            <td class="fw-medium py-3 d-none d-md-table-cell">
+                                <span class="d-flex align-items-center">
+                                    <span class="bg-info rounded-circle p-1 me-2"></span>
+                                    In progress
+                                </span>
+                            </td>
+                            <td class="fw-medium py-3 d-none d-md-table-cell">
+                                $2,105.90
+                                <span class="total d-none">210590</span>
+                            </td>
+                            <td class="py-3 pe-0">
+                                <span
+                                    class="d-flex align-items-center justify-content-end position-relative gap-1 gap-sm-2 ms-n2 ms-sm-0">
+                                    <span><img alt="Thumbnail" src="/img/shop/electronics/thumbs/20.png"
+                                            width="64" /></span>
+                                    <span><img alt="Thumbnail" src="/img/shop/electronics/thumbs/16.png"
+                                            width="64" /></span>
+                                    <span><img alt="Thumbnail" src="/img/shop/electronics/thumbs/15.png"
+                                            width="64" /></span>
+                                    <a aria-controls="orderDetails" aria-label="Show order details"
+                                        class="btn btn-icon btn-ghost btn-secondary stretched-link border-0"
+                                        data-bs-toggle="offcanvas" href="#orderDetails">
+                                        <i class="ci-chevron-right fs-lg"></i>
+                                    </a>
+                                </span>
+                            </td>
+                        </tr>
+                        <!-- Item -->
+                        <tr>
+                            <td class="fw-medium pt-2 pb-3 py-md-2 ps-0">
+                                <a aria-controls="orderDetails" aria-label="Show order details"
+                                    class="d-inline-block animate-underline text-body-emphasis text-decoration-none py-2"
+                                    data-bs-toggle="offcanvas" href="#orderDetails">
+                                    <span class="animate-target">47H76G09F33</span>
+                                </a>
+                                <ul class="list-unstyled fw-normal text-body m-0 d-md-none">
+                                    <li>Dec 12, 2024</li>
+                                    <li class="d-flex align-items-center">
+                                        <span class="bg-success rounded-circle p-1 me-2"></span>
+                                        Delivered
+                                    </li>
+                                    <li class="fw-medium text-body-emphasis">$360.75</li>
+                                </ul>
+                            </td>
+                            <td class="fw-medium py-3 d-none d-md-table-cell">
+                                Dec 12, 2024
+                                <span class="date d-none">24-12-12</span>
+                            </td>
+                            <td class="fw-medium py-3 d-none d-md-table-cell">
+                                <span class="d-flex align-items-center">
+                                    <span class="bg-success rounded-circle p-1 me-2"></span>
+                                    Delivered
+                                </span>
+                            </td>
+                            <td class="fw-medium py-3 d-none d-md-table-cell">
+                                $360.75
+                                <span class="total d-none">36075</span>
+                            </td>
+                            <td class="py-3 pe-0">
+                                <span
+                                    class="d-flex align-items-center justify-content-end position-relative gap-1 gap-sm-2 ms-n2 ms-sm-0">
+                                    <span><img alt="Thumbnail" src="/img/shop/electronics/thumbs/14.png"
+                                            width="64" /></span>
+                                    <a aria-controls="orderDetails" aria-label="Show order details"
+                                        class="btn btn-icon btn-ghost btn-secondary stretched-link border-0"
+                                        data-bs-toggle="offcanvas" href="#orderDetails">
+                                        <i class="ci-chevron-right fs-lg"></i>
+                                    </a>
+                                </span>
+                            </td>
+                        </tr>
+                        <!-- Item -->
+                        <tr>
+                            <td class="fw-medium pt-2 pb-3 py-md-2 ps-0">
+                                <a aria-controls="orderDetails" aria-label="Show order details"
+                                    class="d-inline-block animate-underline text-body-emphasis text-decoration-none py-2"
+                                    data-bs-toggle="offcanvas" href="#orderDetails">
+                                    <span class="animate-target">502TR872W2</span>
+                                </a>
+                                <ul class="list-unstyled fw-normal text-body m-0 d-md-none">
+                                    <li>Nov 7, 2024</li>
+                                    <li class="d-flex align-items-center">
+                                        <span class="bg-success rounded-circle p-1 me-2"></span>
+                                        Delivered
+                                    </li>
+                                    <li class="fw-medium text-body-emphasis">$4,268.00</li>
+                                </ul>
+                            </td>
+                            <td class="fw-medium py-3 d-none d-md-table-cell">
+                                Nov 7, 2024
+                                <span class="date d-none">24-11-07</span>
+                            </td>
+                            <td class="fw-medium py-3 d-none d-md-table-cell">
+                                <span class="d-flex align-items-center">
+                                    <span class="bg-success rounded-circle p-1 me-2"></span>
+                                    Delivered
+                                </span>
+                            </td>
+                            <td class="fw-medium py-3 d-none d-md-table-cell">
+                                $4,268.00
+                                <span class="total d-none">426800</span>
+                            </td>
+                            <td class="py-3 pe-0">
+                                <span
+                                    class="d-flex align-items-center justify-content-end position-relative gap-1 gap-sm-2 ms-n2 ms-sm-0">
+                                    <span><img alt="Thumbnail" src="/img/shop/electronics/thumbs/12.png"
+                                            width="64" /></span>
+                                    <span><img alt="Thumbnail" src="/img/shop/electronics/thumbs/13.png"
+                                            width="64" /></span>
+                                    <span><img alt="Thumbnail" src="/img/shop/electronics/thumbs/18.png"
+                                            width="64" /></span>
+                                    <span class="fw-medium me-1">+3</span>
+                                    <a aria-controls="orderDetails" aria-label="Show order details"
+                                        class="btn btn-icon btn-ghost btn-secondary stretched-link border-0"
+                                        data-bs-toggle="offcanvas" href="#orderDetails">
+                                        <i class="ci-chevron-right fs-lg"></i>
+                                    </a>
+                                </span>
+                            </td>
+                        </tr>
+                        <!-- Item -->
+                        <tr>
+                            <td class="fw-medium pt-2 pb-3 py-md-2 ps-0">
+                                <a aria-controls="orderDetails" aria-label="Show order details"
+                                    class="d-inline-block animate-underline text-body-emphasis text-decoration-none py-2"
+                                    data-bs-toggle="offcanvas" href="#orderDetails">
+                                    <span class="animate-target">34VB5540K83</span>
+                                </a>
+                                <ul class="list-unstyled fw-normal text-body m-0 d-md-none">
+                                    <li>Sep 15, 2024</li>
+                                    <li class="d-flex align-items-center">
+                                        <span class="bg-danger rounded-circle p-1 me-2"></span>
+                                        Canceled
+                                    </li>
+                                    <li class="fw-medium text-body-emphasis">$987.50</li>
+                                </ul>
+                            </td>
+                            <td class="fw-medium py-3 d-none d-md-table-cell">
+                                Sep 15, 2024
+                                <span class="date d-none">24-09-15</span>
+                            </td>
+                            <td class="fw-medium py-3 d-none d-md-table-cell">
+                                <span class="d-flex align-items-center">
+                                    <span class="bg-danger rounded-circle p-1 me-2"></span>
+                                    Canceled
+                                </span>
+                            </td>
+                            <td class="fw-medium py-3 d-none d-md-table-cell">
+                                $987.50
+                                <span class="total d-none">98750</span>
+                            </td>
+                            <td class="py-3 pe-0">
+                                <span
+                                    class="d-flex align-items-center justify-content-end position-relative gap-1 gap-sm-2 ms-n2 ms-sm-0">
+                                    <span><img alt="Thumbnail" src="/img/shop/electronics/thumbs/21.png"
+                                            width="64" /></span>
+                                    <span><img alt="Thumbnail" src="/img/shop/electronics/thumbs/11.png"
+                                            width="64" /></span>
+                                    <a aria-controls="orderDetails" aria-label="Show order details"
+                                        class="btn btn-icon btn-ghost btn-secondary stretched-link border-0"
+                                        data-bs-toggle="offcanvas" href="#orderDetails">
+                                        <i class="ci-chevron-right fs-lg"></i>
+                                    </a>
+                                </span>
+                            </td>
+                        </tr>
+                        <!-- Item -->
+                        <tr>
+                            <td class="fw-medium pt-2 pb-3 py-md-2 ps-0">
+                                <a aria-controls="orderDetails" aria-label="Show order details"
+                                    class="d-inline-block animate-underline text-body-emphasis text-decoration-none py-2"
+                                    data-bs-toggle="offcanvas" href="#orderDetails">
+                                    <span class="animate-target">112P45A90V2</span>
+                                </a>
+                                <ul class="list-unstyled fw-normal text-body m-0 d-md-none">
+                                    <li>May 12, 2024</li>
+                                    <li class="d-flex align-items-center">
+                                        <span class="bg-success rounded-circle p-1 me-2"></span>
+                                        Delivered
+                                    </li>
+                                    <li class="fw-medium text-body-emphasis">$53.00</li>
+                                </ul>
+                            </td>
+                            <td class="fw-medium py-3 d-none d-md-table-cell">
+                                May 12, 2024
+                                <span class="date d-none">24-05-12</span>
+                            </td>
+                            <td class="fw-medium py-3 d-none d-md-table-cell">
+                                <span class="d-flex align-items-center">
+                                    <span class="bg-success rounded-circle p-1 me-2"></span>
+                                    Delivered
+                                </span>
+                            </td>
+                            <td class="fw-medium py-3 d-none d-md-table-cell">
+                                $53.00
+                                <span class="total d-none">5300</span>
+                            </td>
+                            <td class="py-3 pe-0">
+                                <span
+                                    class="d-flex align-items-center justify-content-end position-relative gap-1 gap-sm-2 ms-n2 ms-sm-0">
+                                    <span><img alt="Thumbnail" src="/img/shop/electronics/thumbs/17.png"
+                                            width="64" /></span>
+                                    <a aria-controls="orderDetails" aria-label="Show order details"
+                                        class="btn btn-icon btn-ghost btn-secondary stretched-link border-0"
+                                        data-bs-toggle="offcanvas" href="#orderDetails">
+                                        <i class="ci-chevron-right fs-lg"></i>
+                                    </a>
+                                </span>
+                            </td>
+                        </tr>
+                        <!-- Item -->
+                        <tr>
+                            <td class="fw-medium pt-2 pb-3 py-md-2 ps-0">
+                                <a aria-controls="orderDetails" aria-label="Show order details"
+                                    class="d-inline-block animate-underline text-body-emphasis text-decoration-none py-2"
+                                    data-bs-toggle="offcanvas" href="#orderDetails">
+                                    <span class="animate-target">28BA67U0981</span>
+                                </a>
+                                <ul class="list-unstyled fw-normal text-body m-0 d-md-none">
+                                    <li>Apr 20, 2024</li>
+                                    <li class="d-flex align-items-center">
+                                        <span class="bg-danger rounded-circle p-1 me-2"></span>
+                                        Canceled
+                                    </li>
+                                    <li class="fw-medium text-body-emphasis">$1,029.50</li>
+                                </ul>
+                            </td>
+                            <td class="fw-medium py-3 d-none d-md-table-cell">
+                                Apr 20, 2024
+                                <span class="date d-none">24-04-20</span>
+                            </td>
+                            <td class="fw-medium py-3 d-none d-md-table-cell">
+                                <span class="d-flex align-items-center">
+                                    <span class="bg-danger rounded-circle p-1 me-2"></span>
+                                    Canceled
+                                </span>
+                            </td>
+                            <td class="fw-medium py-3 d-none d-md-table-cell">
+                                $1,029.50
+                                <span class="total d-none">102950</span>
+                            </td>
+                            <td class="py-3 pe-0">
+                                <span
+                                    class="d-flex align-items-center justify-content-end position-relative gap-1 gap-sm-2 ms-n2 ms-sm-0">
+                                    <span><img alt="Thumbnail" src="/img/shop/electronics/thumbs/19.png"
+                                            width="64" /></span>
+                                    <span><img alt="Thumbnail" src="/img/shop/electronics/thumbs/22.png"
+                                            width="64" /></span>
+                                    <a aria-controls="orderDetails" aria-label="Show order details"
+                                        class="btn btn-icon btn-ghost btn-secondary stretched-link border-0"
+                                        data-bs-toggle="offcanvas" href="#orderDetails">
+                                        <i class="ci-chevron-right fs-lg"></i>
+                                    </a>
+                                </span>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+            <!-- Pagination -->
+            <nav aria-label="Page navigation example" class="pt-3 pb-2 pb-sm-0 mt-2 mt-md-3">
+                <ul class="pagination">
+                    <li aria-current="page" class="page-item active">
+                        <span class="page-link">
+                            1
+                            <span class="visually-hidden">(current)</span>
+                        </span>
+                    </li>
+                    <li class="page-item">
+                        <a class="page-link" href="#">2</a>
+                    </li>
+                    <li class="page-item">
+                        <a class="page-link" href="#">3</a>
+                    </li>
+                    <li class="page-item">
+                        <a class="page-link" href="#">4</a>
+                    </li>
+                </ul>
+            </nav>
+        </div>
+    </div>
+@endsection
+
+@section('scripts')    
+@endsection
diff --git a/resources/views/account/password-recovery.blade.php b/resources/views/account/password-recovery.blade.php
new file mode 100644
index 0000000..11bf455
--- /dev/null
+++ b/resources/views/account/password-recovery.blade.php
@@ -0,0 +1,83 @@
+@extends('layouts.landing', ['title' => 'Account - Password Recovery'])
+
+@section('content')
+    <main class="content-wrapper w-100 px-3 ps-lg-5 pe-lg-4 mx-auto" style="max-width: 1920px">
+        <div class="d-lg-flex">
+            <!-- Login form + Footer -->
+            <div class="d-flex flex-column min-vh-100 w-100 py-4 mx-auto me-lg-5" style="max-width: 416px">
+                <!-- Logo -->
+                <header class="navbar align-items-center px-0 pb-4 mt-n2 mt-sm-0 mb-2 mb-md-3 mb-lg-4">
+                    <a class="navbar-brand pt-0" href="/">
+                        <span class="d-flex flex-shrink-0 text-primary me-2">
+                            <svg height="36" width="36" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M36 18.01c0 8.097-5.355 14.949-12.705 17.2a18.12 18.12 0 0 1-5.315.79C9.622 36 2.608 30.313.573 22.611.257 21.407.059 20.162 0 18.879v-1.758c.02-.395.059-.79.099-1.185.099-.908.277-1.817.514-2.686C2.687 5.628 9.682 0 18 0c5.572 0 10.551 2.528 13.871 6.517 1.502 1.797 2.648 3.91 3.359 6.201.494 1.659.771 3.436.771 5.292z"
+                                    fill="currentColor"></path>
+                                <g fill="#fff">
+                                    <path
+                                        d="M17.466 21.624c-.514 0-.988-.316-1.146-.829-.198-.632.138-1.303.771-1.501l7.666-2.469-1.205-8.254-13.317 4.621a1.19 1.19 0 0 1-1.521-.75 1.19 1.19 0 0 1 .751-1.521l13.89-4.818c.553-.197 1.166-.138 1.64.158a1.82 1.82 0 0 1 .85 1.284l1.344 9.183c.138.987-.494 1.994-1.482 2.33l-7.864 2.528-.375.04zm7.31.138c-.178-.632-.85-1.007-1.482-.81l-5.177 1.58c-2.331.79-3.28.02-3.418-.099l-6.56-8.412a4.25 4.25 0 0 0-4.406-1.758l-3.122.987c-.237.889-.415 1.777-.514 2.686l4.228-1.363a1.84 1.84 0 0 1 1.857.81l6.659 8.551c.751.948 2.015 1.323 3.359 1.323.909 0 1.857-.178 2.687-.474l5.078-1.54c.632-.178 1.008-.829.81-1.481z">
+                                    </path>
+                                    <use href="#czlogo"></use>
+                                    <use href="#czlogo" x="8.516" y="-2.172"></use>
+                                </g>
+                                <defs>
+                                    <path
+                                        d="M18.689 28.654a1.94 1.94 0 0 1-1.936 1.935 1.94 1.94 0 0 1-1.936-1.935 1.94 1.94 0 0 1 1.936-1.935 1.94 1.94 0 0 1 1.936 1.935z"
+                                        id="czlogo"></path>
+                                </defs>
+                            </svg>
+                        </span>
+                        Cartzilla
+                    </a>
+                    <div class="nav">
+                        <a class="nav-link fs-base animate-underline p-0"
+                            href="{{ route('second', ['account', 'signin']) }}">
+                            <i class="ci-chevron-left fs-lg ms-n1 me-1"></i>
+                            <span class="animate-target">Back to Sign In</span>
+                        </a>
+                    </div>
+                </header>
+                <h1 class="h2 mt-auto">Forgot password?</h1>
+                <p class="pb-2 pb-md-3">Enter the email address you used when you joined and we’ll send you instructions to
+                    reset your password</p>
+                <!-- Form -->
+                <form class="needs-validation pb-4 mb-3 mb-lg-4" novalidate="">
+                    <div class="position-relative mb-4">
+                        <i class="ci-mail position-absolute top-50 start-0 translate-middle-y fs-lg ms-3"></i>
+                        <input class="form-control form-control-lg form-icon-start" placeholder="Email address"
+                            required="" type="email" />
+                        <div class="invalid-tooltip bg-transparent py-0">Please enter a vaild email address!</div>
+                    </div>
+                    <button class="btn btn-lg btn-primary w-100" type="submit">Reset password</button>
+                </form>
+                <!-- Footer -->
+                <footer class="mt-auto">
+                    <div class="nav mb-4">
+                        <a class="nav-link text-decoration-underline p-0"
+                            href="{{ route('second', ['help', 'topics-v1']) }}">Need help?</a>
+                    </div>
+                    <p class="fs-xs mb-0">
+                        © All rights reserved. Made by <span class="animate-underline"><a
+                                class="animate-target text-dark-emphasis text-decoration-none"
+                                href="https://coderthemes.com/" rel="noreferrer" target="_blank">Coderthemes</a></span>
+                    </p>
+                </footer>
+            </div>
+            <!-- Cover image visible on screens > 992px wide -->
+            <div class="d-none d-lg-block w-100 py-4 ms-auto" style="max-width: 1034px">
+                <div class="d-flex flex-column justify-content-end h-100 rounded-5 overflow-hidden">
+                    <span class="position-absolute top-0 start-0 w-100 h-100 d-none-dark"
+                        style="background: linear-gradient(-90deg, #accbee 0%, #e7f0fd 100%)"></span>
+                    <span class="position-absolute top-0 start-0 w-100 h-100 d-none d-block-dark"
+                        style="background: linear-gradient(-90deg, #1b273a 0%, #1f2632 100%)"></span>
+                    <div class="ratio position-relative z-2" style="--cz-aspect-ratio: calc(1030 / 1032 * 100%)">
+                        <img alt="Girl" src="/img/account/cover.png" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+@endsection
+
+@section('scripts')
+@endsection
diff --git a/resources/views/account/payment.blade.php b/resources/views/account/payment.blade.php
new file mode 100644
index 0000000..a5cd0a6
--- /dev/null
+++ b/resources/views/account/payment.blade.php
@@ -0,0 +1,70 @@
+@extends('layouts.account', ['title' => 'Account - Payment Methods'])
+
+@section('content')
+    <!-- Payment methods content -->
+    <div class="col-lg-9">
+        <div class="ps-lg-3 ps-xl-0">
+            <!-- Page title -->
+            <h1 class="h2 pb-2 pb-md-3">Payment methods</h1>
+            <!-- Payment methods (Grid) -->
+            <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3 g-md-4 g-lg-3 g-xl-4">
+                <div class="col">
+                    <div class="card h-100">
+                        <div class="card-body pb-3">
+                            <div class="d-flex align-items-start justify-content-between mb-4">
+                                <img alt="Mastercard" class="m-n3" src="/img/payment-methods/mastercard.svg"
+                                    width="100" />
+                                <span class="badge text-bg-info rounded-pill">Primary</span>
+                            </div>
+                            <div class="h6 mb-1">**** **** **** 8341</div>
+                            <div class="text-danger fs-xs">Expired 05/24</div>
+                        </div>
+                        <div class="card-footer d-flex gap-3 bg-transparent border-0 pt-0 pb-4">
+                            <button class="btn btn-sm btn-outline-secondary" type="button">Edit</button>
+                            <button class="btn btn-sm btn-outline-secondary" type="button">Remove</button>
+                        </div>
+                    </div>
+                </div>
+                <div class="col">
+                    <div class="card h-100">
+                        <div class="card-body pb-3">
+                            <div class="d-flex align-items-start justify-content-between mb-4">
+                                <img alt="Visa" class="d-none-dark m-n3" src="/img/payment-methods/visa-light-mode.svg"
+                                    width="100" />
+                                <img alt="Visa" class="d-none d-block-dark m-n3"
+                                    src="/img/payment-methods/visa-dark-mode.svg" width="100" />
+                                <div class="nav animate-underline">
+                                    <a class="nav-link animate-target fs-xs p-0" href="#!">Set as primary</a>
+                                </div>
+                            </div>
+                            <div class="h6 mb-1">**** **** **** 1276</div>
+                            <div class="text-body fs-xs">Expiration 01/27</div>
+                        </div>
+                        <div class="card-footer d-flex gap-3 bg-transparent border-0 pt-0 pb-4">
+                            <button class="btn btn-sm btn-outline-secondary" type="button">Edit</button>
+                            <button class="btn btn-sm btn-outline-secondary" type="button">Remove</button>
+                        </div>
+                    </div>
+                </div>
+                <div class="col">
+                    <div class="card border-0 h-100">
+                        <span
+                            class="position-absolute top-0 start-0 w-100 h-100 border border-dashed border-secondary border-opacity-25 rounded d-none-dark"></span>
+                        <span
+                            class="position-absolute top-0 start-0 w-100 h-100 border border-dashed border-light border-opacity-25 rounded d-none d-block-dark"></span>
+                        <div class="card-body position-relative z-2 nav align-items-center justify-content-center py-5">
+                            <a class="nav-link animate-underline stretched-link min-w-0 fs-base px-0" data-bs-toggle="modal"
+                                href="#addPaymentModal">
+                                <i class="ci-plus fs-lg ms-n2 me-2"></i>
+                                <span class="animate-target text-truncate">Add payment method</span>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+@endsection
+
+@section('scripts')
+@endsection
diff --git a/resources/views/account/reviews.blade.php b/resources/views/account/reviews.blade.php
new file mode 100644
index 0000000..a6b81af
--- /dev/null
+++ b/resources/views/account/reviews.blade.php
@@ -0,0 +1,230 @@
+@extends('layouts.account', ['title' => 'Account - My Reviews'])
+
+@section('content')
+    <!-- Reviews content -->
+    <div class="col-lg-9">
+        <div class="ps-lg-3 ps-xl-0">
+            <!-- Page title + Sorting select -->
+            <div class="row align-items-center pb-2 mb-sm-1">
+                <div class="col-sm-6 col-md-7 col-xxl-8 mb-3 mb-md-0">
+                    <h1 class="h2 me-3 mb-0">My reviews</h1>
+                </div>
+                <div class="col-sm-6 col-md-5 col-xxl-4">
+                    <select aria-label="Wishlist sorting" class="form-select" data-select='{"removeItemButton": false}'>
+                        <option value="products-reviews">Products and reviews</option>
+                        <option value="reviews">My reviews</option>
+                        <option value="products">Products awaiting reviews</option>
+                    </select>
+                </div>
+            </div>
+            <!-- Review items (List) -->
+            <!-- Item -->
+            <div class="d-md-flex align-items-center justify-content-between gap-4 border-bottom py-3">
+                <div class="nav flex-nowrap position-relative align-items-center">
+                    <img alt="Image" class="d-block my-xl-1" src="/img/shop/electronics/thumbs/11.png" width="64" />
+                    <a class="nav-link stretched-link hover-effect-underline ps-3 p-0"
+                        href="{{ route('second', ['shop', 'product-general-electronics']) }}">Apple iPad 10.2" 2021 Wi-Fi 64 GB Space Gray
+                        (MK2K3RK/A)</a>
+                </div>
+                <div class="d-flex h6 fs-sm pt-2 pt-md-0 ps-3 ps-md-0 mb-2 mb-md-0">
+                    <div class="flex-shrink-0 d-md-none" style="width: 64px"></div>
+                    <svg class="text-warning flex-shrink-0 me-2" fill="currentColor" height="16" width="16"
+                        xmlns="http://www.w3.org/2000/svg">
+                        <path
+                            d="M1.333 9.667H7.5V16h-5c-.64 0-1.167-.527-1.167-1.167V9.667zm13.334 0v5.167c0 .64-.527 1.167-1.167 1.167h-5V9.667h6.167zM0 5.833V7.5c0 .64.527 1.167 1.167 1.167h.167H7.5v-1-3H1.167C.527 4.667 0 5.193 0 5.833zm14.833-1.166H8.5v3 1h6.167.167C15.473 8.667 16 8.14 16 7.5V5.833c0-.64-.527-1.167-1.167-1.167z">
+                        </path>
+                        <path
+                            d="M8 5.363a.5.5 0 0 1-.495-.573C7.752 3.123 9.054-.03 12.219-.03c1.807.001 2.447.977 2.447 1.813 0 1.486-2.069 3.58-6.667 3.58zM12.219.971c-2.388 0-3.295 2.27-3.595 3.377 1.884-.088 3.072-.565 3.756-.971.949-.563 1.287-1.193 1.287-1.595 0-.599-.747-.811-1.447-.811z">
+                        </path>
+                        <path
+                            d="M8.001 5.363c-4.598 0-6.667-2.094-6.667-3.58 0-.836.641-1.812 2.448-1.812 3.165 0 4.467 3.153 4.713 4.819a.5.5 0 0 1-.495.573zM3.782.971c-.7 0-1.448.213-1.448.812 0 .851 1.489 2.403 5.042 2.566C7.076 3.241 6.169.971 3.782.971z">
+                        </path>
+                    </svg>
+                    +100 bonuses for a review
+                </div>
+                <div class="d-flex pt-2 pt-md-0 ps-3 ps-md-0 mb-2 mb-md-0">
+                    <div class="d-md-none" style="width: 64px"></div>
+                    <button class="btn btn-secondary" data-bs-target="#reviewForm" data-bs-toggle="modal"
+                        type="button">Leave a review</button>
+                </div>
+            </div>
+            <!-- Item -->
+            <div class="d-md-flex align-items-center justify-content-between gap-4 border-bottom py-3">
+                <div class="nav flex-nowrap position-relative align-items-center">
+                    <img alt="Image" class="d-block my-xl-1" src="/img/shop/electronics/thumbs/12.png" width="64" />
+                    <a class="nav-link stretched-link hover-effect-underline ps-3 p-0"
+                        href="{{ route('second', ['shop', 'product-general-electronics']) }}">Laptop Apple MacBook Pro 13 M2</a>
+                </div>
+                <div
+                    class="position-relative d-flex align-items-center text-decoration-none min-w-0 pt-1 pt-md-0 ps-3 ps-md-0 mb-2 mb-md-0">
+                    <div class="flex-shrink-0 d-md-none" style="width: 64px"></div>
+                    <div class="h6 fs-sm text-body-secondary text-truncate p-0 me-3 me-sm-4 mb-0">+100 bonuses
+                        earned</div>
+                    <div class="d-flex gap-1 fs-sm me-2 me-sm-3">
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                    </div>
+                    <a aria-controls="reviewDetails" aria-label="Show review details"
+                        class="btn btn-icon btn-ghost btn-secondary stretched-link border-0" data-bs-toggle="offcanvas"
+                        href="#reviewDetails">
+                        <i class="ci-chevron-right fs-lg"></i>
+                    </a>
+                </div>
+            </div>
+            <!-- Item -->
+            <div class="d-md-flex align-items-center justify-content-between gap-4 border-bottom py-3">
+                <div class="nav flex-nowrap position-relative align-items-center">
+                    <img alt="Product thumb" class="d-block my-xl-1" src="/img/shop/electronics/thumbs/13.png"
+                        width="64" />
+                    <a class="nav-link stretched-link hover-effect-underline ps-3 p-0"
+                        href="{{ route('second', ['shop', 'product-general-electronics']) }}">Razer Opus X Mercury Headphones
+                        (RZ04-03760200-R3M1)</a>
+                </div>
+                <div class="d-flex pt-2 pt-md-0 ps-3 ps-md-0 mb-2 mb-md-0">
+                    <div class="d-md-none" style="width: 64px"></div>
+                    <button class="btn btn-secondary" data-bs-target="#reviewForm" data-bs-toggle="modal"
+                        type="button">Leave a review</button>
+                </div>
+            </div>
+            <!-- Item -->
+            <div class="d-md-flex align-items-center justify-content-between gap-4 border-bottom py-3">
+                <div class="nav flex-nowrap position-relative align-items-center">
+                    <img alt="Product thumb" class="d-block my-xl-1" src="/img/shop/electronics/thumbs/14.png"
+                        width="64" />
+                    <a class="nav-link stretched-link hover-effect-underline ps-3 p-0"
+                        href="{{ route('second', ['shop', 'product-general-electronics']) }}">3D virtual reality glasses VR Shinecon G10 for
+                        smartphones with a large screen</a>
+                </div>
+                <div class="d-flex pt-2 pt-md-0 ps-3 ps-md-0 mb-2 mb-md-0">
+                    <div class="d-md-none" style="width: 64px"></div>
+                    <button class="btn btn-secondary" data-bs-target="#reviewForm" data-bs-toggle="modal"
+                        type="button">Leave a review</button>
+                </div>
+            </div>
+            <!-- Item -->
+            <div class="d-md-flex align-items-center justify-content-between gap-4 border-bottom py-3">
+                <div class="nav flex-nowrap position-relative align-items-center">
+                    <img alt="Product thumb" class="d-block my-xl-1" src="/img/shop/electronics/thumbs/15.png"
+                        width="64" />
+                    <a class="nav-link stretched-link hover-effect-underline ps-3 p-0"
+                        href="{{ route('second', ['shop', 'product-general-electronics']) }}">Apple iPad Pro M2 2022 64 GB Space Gray</a>
+                </div>
+                <div class="d-flex h6 fs-sm pt-2 pt-md-0 ps-3 ps-md-0 mb-2 mb-md-0">
+                    <div class="flex-shrink-0 d-md-none" style="width: 64px"></div>
+                    <svg class="text-warning flex-shrink-0 me-2" fill="currentColor" height="16" width="16"
+                        xmlns="http://www.w3.org/2000/svg">
+                        <path
+                            d="M1.333 9.667H7.5V16h-5c-.64 0-1.167-.527-1.167-1.167V9.667zm13.334 0v5.167c0 .64-.527 1.167-1.167 1.167h-5V9.667h6.167zM0 5.833V7.5c0 .64.527 1.167 1.167 1.167h.167H7.5v-1-3H1.167C.527 4.667 0 5.193 0 5.833zm14.833-1.166H8.5v3 1h6.167.167C15.473 8.667 16 8.14 16 7.5V5.833c0-.64-.527-1.167-1.167-1.167z">
+                        </path>
+                        <path
+                            d="M8 5.363a.5.5 0 0 1-.495-.573C7.752 3.123 9.054-.03 12.219-.03c1.807.001 2.447.977 2.447 1.813 0 1.486-2.069 3.58-6.667 3.58zM12.219.971c-2.388 0-3.295 2.27-3.595 3.377 1.884-.088 3.072-.565 3.756-.971.949-.563 1.287-1.193 1.287-1.595 0-.599-.747-.811-1.447-.811z">
+                        </path>
+                        <path
+                            d="M8.001 5.363c-4.598 0-6.667-2.094-6.667-3.58 0-.836.641-1.812 2.448-1.812 3.165 0 4.467 3.153 4.713 4.819a.5.5 0 0 1-.495.573zM3.782.971c-.7 0-1.448.213-1.448.812 0 .851 1.489 2.403 5.042 2.566C7.076 3.241 6.169.971 3.782.971z">
+                        </path>
+                    </svg>
+                    +86 bonuses for a review
+                </div>
+                <div class="d-flex pt-2 pt-md-0 ps-3 ps-md-0 mb-2 mb-md-0">
+                    <div class="d-md-none" style="width: 64px"></div>
+                    <button class="btn btn-secondary" data-bs-target="#reviewForm" data-bs-toggle="modal"
+                        type="button">Leave a review</button>
+                </div>
+            </div>
+            <!-- Item -->
+            <div class="d-md-flex align-items-center justify-content-between gap-4 border-bottom py-3">
+                <div class="nav flex-nowrap position-relative align-items-center">
+                    <img alt="Product thumb" class="d-block my-xl-1" src="/img/shop/electronics/thumbs/16.png"
+                        width="64" />
+                    <a class="nav-link stretched-link hover-effect-underline ps-3 p-0"
+                        href="{{ route('second', ['shop', 'product-general-electronics']) }}">Mobile phone Apple iPhone 14 256GB
+                        Starlight</a>
+                </div>
+                <div class="d-flex pt-2 pt-md-0 ps-3 ps-md-0 mb-2 mb-md-0">
+                    <div class="d-md-none" style="width: 64px"></div>
+                    <button class="btn btn-secondary" data-bs-target="#reviewForm" data-bs-toggle="modal"
+                        type="button">Leave a review</button>
+                </div>
+            </div>
+            <!-- Item -->
+            <div class="d-md-flex align-items-center justify-content-between gap-4 border-bottom py-3">
+                <div class="nav flex-nowrap position-relative align-items-center">
+                    <img alt="Product thumb" class="d-block my-xl-1" src="/img/shop/electronics/thumbs/17.png"
+                        width="64" />
+                    <a class="nav-link stretched-link hover-effect-underline ps-3 p-0"
+                        href="{{ route('second', ['shop', 'product-general-electronics']) }}">Power Bank PBS 10000 mAh Black</a>
+                </div>
+                <div
+                    class="position-relative d-flex align-items-center text-decoration-none min-w-0 pt-1 pt-md-0 ps-3 ps-md-0 mb-2 mb-md-0">
+                    <div class="flex-shrink-0 d-md-none" style="width: 64px"></div>
+                    <div class="d-flex gap-1 fs-sm me-2 me-sm-3">
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star text-body-tertiary opacity-75"></i>
+                    </div>
+                    <a aria-controls="reviewDetails" aria-label="Show review details"
+                        class="btn btn-icon btn-ghost btn-secondary stretched-link border-0" data-bs-toggle="offcanvas"
+                        href="#reviewDetails">
+                        <i class="ci-chevron-right fs-lg"></i>
+                    </a>
+                </div>
+            </div>
+            <!-- Item -->
+            <div class="d-md-flex align-items-center justify-content-between gap-4 border-bottom py-3">
+                <div class="nav flex-nowrap position-relative align-items-center">
+                    <img alt="Product thumb" class="d-block my-xl-1" src="/img/shop/electronics/thumbs/18.png"
+                        width="64" />
+                    <a class="nav-link stretched-link hover-effect-underline ps-3 p-0"
+                        href="{{ route('second', ['shop', 'product-general-electronics']) }}">Apple iPhone 14 128GB Blue</a>
+                </div>
+                <div class="d-flex pt-2 pt-md-0 ps-3 ps-md-0 mb-2 mb-md-0">
+                    <div class="d-md-none" style="width: 64px"></div>
+                    <button class="btn btn-secondary" data-bs-target="#reviewForm" data-bs-toggle="modal"
+                        type="button">Leave a review</button>
+                </div>
+            </div>
+            <!-- Item -->
+            <div class="d-md-flex align-items-center justify-content-between gap-4 border-bottom py-3">
+                <div class="nav flex-nowrap position-relative align-items-center">
+                    <img alt="Product thumb" class="d-block my-xl-1" src="/img/shop/electronics/thumbs/19.png"
+                        width="64" />
+                    <a class="nav-link stretched-link hover-effect-underline ps-3 p-0"
+                        href="{{ route('second', ['shop', 'product-general-electronics']) }}">VRB01 Camera Nikon Max</a>
+                </div>
+                <div class="d-flex pt-2 pt-md-0 ps-3 ps-md-0 mb-2 mb-md-0">
+                    <div class="d-md-none" style="width: 64px"></div>
+                    <button class="btn btn-secondary" data-bs-target="#reviewForm" data-bs-toggle="modal"
+                        type="button">Leave a review</button>
+                </div>
+            </div>
+            <!-- Pagination -->
+            <nav aria-label="Page navigation example" class="pt-3 pb-2 pb-sm-0 mt-2 mt-md-3">
+                <ul class="pagination">
+                    <li aria-current="page" class="page-item active">
+                        <span class="page-link">
+                            1
+                            <span class="visually-hidden">(current)</span>
+                        </span>
+                    </li>
+                    <li class="page-item">
+                        <a class="page-link" href="#">2</a>
+                    </li>
+                    <li class="page-item">
+                        <a class="page-link" href="#">3</a>
+                    </li>
+                    <li class="page-item">
+                        <a class="page-link" href="#">4</a>
+                    </li>
+                </ul>
+            </nav>
+        </div>
+    </div>
+@endsection
+
+@section('scripts')
+@endsection
diff --git a/resources/views/account/signin.blade.php b/resources/views/account/signin.blade.php
new file mode 100644
index 0000000..a343a52
--- /dev/null
+++ b/resources/views/account/signin.blade.php
@@ -0,0 +1,120 @@
+@extends('layouts.landing', ['title' => 'Account - Sign In'])
+
+@section('content')
+    <main class="content-wrapper w-100 px-3 ps-lg-5 pe-lg-4 mx-auto" style="max-width: 1920px">
+        <div class="d-lg-flex">
+            <!-- Login form + Footer -->
+            <div class="d-flex flex-column min-vh-100 w-100 py-4 mx-auto me-lg-5" style="max-width: 416px">
+                <!-- Logo -->
+                <header class="navbar px-0 pb-4 mt-n2 mt-sm-0 mb-2 mb-md-3 mb-lg-4">
+                    <a class="navbar-brand pt-0" href="/">
+                        <span class="d-flex flex-shrink-0 text-primary me-2">
+                            <svg height="36" width="36" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M36 18.01c0 8.097-5.355 14.949-12.705 17.2a18.12 18.12 0 0 1-5.315.79C9.622 36 2.608 30.313.573 22.611.257 21.407.059 20.162 0 18.879v-1.758c.02-.395.059-.79.099-1.185.099-.908.277-1.817.514-2.686C2.687 5.628 9.682 0 18 0c5.572 0 10.551 2.528 13.871 6.517 1.502 1.797 2.648 3.91 3.359 6.201.494 1.659.771 3.436.771 5.292z"
+                                    fill="currentColor"></path>
+                                <g fill="#fff">
+                                    <path
+                                        d="M17.466 21.624c-.514 0-.988-.316-1.146-.829-.198-.632.138-1.303.771-1.501l7.666-2.469-1.205-8.254-13.317 4.621a1.19 1.19 0 0 1-1.521-.75 1.19 1.19 0 0 1 .751-1.521l13.89-4.818c.553-.197 1.166-.138 1.64.158a1.82 1.82 0 0 1 .85 1.284l1.344 9.183c.138.987-.494 1.994-1.482 2.33l-7.864 2.528-.375.04zm7.31.138c-.178-.632-.85-1.007-1.482-.81l-5.177 1.58c-2.331.79-3.28.02-3.418-.099l-6.56-8.412a4.25 4.25 0 0 0-4.406-1.758l-3.122.987c-.237.889-.415 1.777-.514 2.686l4.228-1.363a1.84 1.84 0 0 1 1.857.81l6.659 8.551c.751.948 2.015 1.323 3.359 1.323.909 0 1.857-.178 2.687-.474l5.078-1.54c.632-.178 1.008-.829.81-1.481z">
+                                    </path>
+                                    <use href="#czlogo"></use>
+                                    <use href="#czlogo" x="8.516" y="-2.172"></use>
+                                </g>
+                                <defs>
+                                    <path
+                                        d="M18.689 28.654a1.94 1.94 0 0 1-1.936 1.935 1.94 1.94 0 0 1-1.936-1.935 1.94 1.94 0 0 1 1.936-1.935 1.94 1.94 0 0 1 1.936 1.935z"
+                                        id="czlogo"></path>
+                                </defs>
+                            </svg>
+                        </span>
+                        Cartzilla
+                    </a>
+                </header>
+                <h1 class="h2 mt-auto">Welcome back</h1>
+                <div class="nav fs-sm mb-4">
+                    Don't have an account?
+                    <a class="nav-link text-decoration-underline p-0 ms-2"
+                        href="{{ route('second', ['account', 'signup']) }}">Create an account</a>
+                </div>
+                <!-- Form -->
+                <form class="needs-validation" novalidate="">
+                    <div class="position-relative mb-4">
+                        <input class="form-control form-control-lg" placeholder="Email" required="" type="email" />
+                        <div class="invalid-tooltip bg-transparent py-0">Enter a valid email address!</div>
+                    </div>
+                    <div class="mb-4">
+                        <div class="password-toggle">
+                            <input class="form-control form-control-lg" placeholder="Password" required=""
+                                type="password" />
+                            <div class="invalid-tooltip bg-transparent py-0">Password is incorrect!</div>
+                            <label aria-label="Show/hide password" class="password-toggle-button fs-lg">
+                                <input class="btn-check" type="checkbox" />
+                            </label>
+                        </div>
+                    </div>
+                    <div class="d-flex align-items-center justify-content-between mb-4">
+                        <div class="form-check me-2">
+                            <input class="form-check-input" id="remember-30" type="checkbox" />
+                            <label class="form-check-label" for="remember-30">Remember for 30 days</label>
+                        </div>
+                        <div class="nav">
+                            <a class="nav-link animate-underline p-0"
+                                href="{{ route('second', ['account', 'password-recovery']) }}">
+                                <span class="animate-target">Forgot password?</span>
+                            </a>
+                        </div>
+                    </div>
+                    <button class="btn btn-lg btn-primary w-100" type="submit">Sign In</button>
+                </form>
+                <!-- Divider -->
+                <div class="d-flex align-items-center my-4">
+                    <hr class="w-100 m-0" />
+                    <span class="text-body-emphasis fw-medium text-nowrap mx-4">or continue with</span>
+                    <hr class="w-100 m-0" />
+                </div>
+                <!-- Social login -->
+                <div class="d-flex flex-column flex-sm-row gap-3 pb-4 mb-3 mb-lg-4">
+                    <button class="btn btn-lg btn-outline-secondary w-100 px-2" type="button">
+                        <i class="ci-google ms-1 me-1"></i>
+                        Google
+                    </button>
+                    <button class="btn btn-lg btn-outline-secondary w-100 px-2" type="button">
+                        <i class="ci-facebook ms-1 me-1"></i>
+                        Facebook
+                    </button>
+                    <button class="btn btn-lg btn-outline-secondary w-100 px-2" type="button">
+                        <i class="ci-apple ms-1 me-1"></i>
+                        Apple
+                    </button>
+                </div>
+                <!-- Footer -->
+                <footer class="mt-auto">
+                    <div class="nav mb-4">
+                        <a class="nav-link text-decoration-underline p-0"
+                            href="{{ route('second', ['help', 'topics-v1']) }}">Need help?</a>
+                    </div>
+                    <p class="fs-xs mb-0">
+                        © All rights reserved. Made by <span class="animate-underline"><a
+                                class="animate-target text-dark-emphasis text-decoration-none"
+                                href="https://coderthemes.com/" rel="noreferrer" target="_blank">Coderthemes</a></span>
+                    </p>
+                </footer>
+            </div>
+            <!-- Cover image visible on screens > 992px wide (lg breakpoint) -->
+            <div class="d-none d-lg-block w-100 py-4 ms-auto" style="max-width: 1034px">
+                <div class="d-flex flex-column justify-content-end h-100 rounded-5 overflow-hidden">
+                    <span class="position-absolute top-0 start-0 w-100 h-100 d-none-dark"
+                        style="background: linear-gradient(-90deg, #accbee 0%, #e7f0fd 100%)"></span>
+                    <span class="position-absolute top-0 start-0 w-100 h-100 d-none d-block-dark"
+                        style="background: linear-gradient(-90deg, #1b273a 0%, #1f2632 100%)"></span>
+                    <div class="ratio position-relative z-2" style="--cz-aspect-ratio: calc(1030 / 1032 * 100%)">
+                        <img alt="Girl" src="/img/account/cover.png" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+@endsection
+
+@section('scripts')
+@endsection
diff --git a/resources/views/account/signup.blade.php b/resources/views/account/signup.blade.php
new file mode 100644
index 0000000..2c45efd
--- /dev/null
+++ b/resources/views/account/signup.blade.php
@@ -0,0 +1,269 @@
+@extends('layouts.landing', ['title' => 'Account - Sign Up'])
+
+@section('content')
+    <main class="content-wrapper w-100 px-3 ps-lg-5 pe-lg-4 mx-auto" style="max-width: 1920px">
+        <div class="d-lg-flex">
+            <!-- Login form + Footer -->
+            <div class="d-flex flex-column min-vh-100 w-100 py-4 mx-auto me-lg-5" style="max-width: 416px">
+                <!-- Logo -->
+                <header class="navbar px-0 pb-4 mt-n2 mt-sm-0 mb-2 mb-md-3 mb-lg-4">
+                    <a class="navbar-brand pt-0" href="/">
+                        <span class="d-flex flex-shrink-0 text-primary me-2">
+                            <svg height="36" width="36" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M36 18.01c0 8.097-5.355 14.949-12.705 17.2a18.12 18.12 0 0 1-5.315.79C9.622 36 2.608 30.313.573 22.611.257 21.407.059 20.162 0 18.879v-1.758c.02-.395.059-.79.099-1.185.099-.908.277-1.817.514-2.686C2.687 5.628 9.682 0 18 0c5.572 0 10.551 2.528 13.871 6.517 1.502 1.797 2.648 3.91 3.359 6.201.494 1.659.771 3.436.771 5.292z"
+                                    fill="currentColor"></path>
+                                <g fill="#fff">
+                                    <path
+                                        d="M17.466 21.624c-.514 0-.988-.316-1.146-.829-.198-.632.138-1.303.771-1.501l7.666-2.469-1.205-8.254-13.317 4.621a1.19 1.19 0 0 1-1.521-.75 1.19 1.19 0 0 1 .751-1.521l13.89-4.818c.553-.197 1.166-.138 1.64.158a1.82 1.82 0 0 1 .85 1.284l1.344 9.183c.138.987-.494 1.994-1.482 2.33l-7.864 2.528-.375.04zm7.31.138c-.178-.632-.85-1.007-1.482-.81l-5.177 1.58c-2.331.79-3.28.02-3.418-.099l-6.56-8.412a4.25 4.25 0 0 0-4.406-1.758l-3.122.987c-.237.889-.415 1.777-.514 2.686l4.228-1.363a1.84 1.84 0 0 1 1.857.81l6.659 8.551c.751.948 2.015 1.323 3.359 1.323.909 0 1.857-.178 2.687-.474l5.078-1.54c.632-.178 1.008-.829.81-1.481z">
+                                    </path>
+                                    <use href="#czlogo"></use>
+                                    <use href="#czlogo" x="8.516" y="-2.172"></use>
+                                </g>
+                                <defs>
+                                    <path
+                                        d="M18.689 28.654a1.94 1.94 0 0 1-1.936 1.935 1.94 1.94 0 0 1-1.936-1.935 1.94 1.94 0 0 1 1.936-1.935 1.94 1.94 0 0 1 1.936 1.935z"
+                                        id="czlogo"></path>
+                                </defs>
+                            </svg>
+                        </span>
+                        Cartzilla
+                    </a>
+                </header>
+                <h1 class="h2 mt-auto">Create an account</h1>
+                <div class="nav fs-sm mb-3 mb-lg-4">
+                    I already have an account
+                    <a class="nav-link text-decoration-underline p-0 ms-2"
+                        href="{{ route('second', ['account', 'signin']) }}">Sign in</a>
+                </div>
+                <div class="nav fs-sm mb-4 d-lg-none">
+                    <span class="me-2">Uncertain about creating an account?</span>
+                    <a aria-controls="benefits" class="nav-link text-decoration-underline p-0" data-bs-toggle="offcanvas"
+                        href="#benefits">Explore the Benefits</a>
+                </div>
+                <!-- Form -->
+                <form class="needs-validation" novalidate="">
+                    <div class="position-relative mb-4">
+                        <label class="form-label" for="register-email">Email</label>
+                        <input class="form-control form-control-lg" id="register-email" required="" type="email" />
+                        <div class="invalid-tooltip bg-transparent py-0">Enter a valid email address!</div>
+                    </div>
+                    <div class="mb-4">
+                        <label class="form-label" for="register-password">Password</label>
+                        <div class="password-toggle">
+                            <input class="form-control form-control-lg" id="register-password" minlength="8"
+                                placeholder="Minimum 8 characters" required="" type="password" />
+                            <div class="invalid-tooltip bg-transparent py-0">Password does not meet the required criteria!
+                            </div>
+                            <label aria-label="Show/hide password" class="password-toggle-button fs-lg">
+                                <input class="btn-check" type="checkbox" />
+                            </label>
+                        </div>
+                    </div>
+                    <div class="d-flex flex-column gap-2 mb-4">
+                        <div class="form-check">
+                            <input class="form-check-input" id="save-pass" type="checkbox" />
+                            <label class="form-check-label" for="save-pass">Save the password</label>
+                        </div>
+                        <div class="form-check">
+                            <input class="form-check-input" id="privacy" required="" type="checkbox" />
+                            <label class="form-check-label" for="privacy">I have read and accept the <a
+                                    class="text-dark-emphasis" href="#!">Privacy Policy</a></label>
+                        </div>
+                    </div>
+                    <button class="btn btn-lg btn-primary w-100" type="submit">
+                        Create an account
+                        <i class="ci-chevron-right fs-lg ms-1 me-n1"></i>
+                    </button>
+                </form>
+                <!-- Divider -->
+                <div class="d-flex align-items-center my-4">
+                    <hr class="w-100 m-0" />
+                    <span class="text-body-emphasis fw-medium text-nowrap mx-4">or continue with</span>
+                    <hr class="w-100 m-0" />
+                </div>
+                <!-- Social login -->
+                <div class="d-flex flex-column flex-sm-row gap-3 pb-4 mb-3 mb-lg-4">
+                    <button class="btn btn-lg btn-outline-secondary w-100 px-2" type="button">
+                        <i class="ci-google ms-1 me-1"></i>
+                        Google
+                    </button>
+                    <button class="btn btn-lg btn-outline-secondary w-100 px-2" type="button">
+                        <i class="ci-facebook ms-1 me-1"></i>
+                        Facebook
+                    </button>
+                    <button class="btn btn-lg btn-outline-secondary w-100 px-2" type="button">
+                        <i class="ci-apple ms-1 me-1"></i>
+                        Apple
+                    </button>
+                </div>
+                <!-- Footer -->
+                <footer class="mt-auto">
+                    <div class="nav mb-4">
+                        <a class="nav-link text-decoration-underline p-0"
+                            href="{{ route('second', ['help', 'topics-v1']) }}">Need help?</a>
+                    </div>
+                    <p class="fs-xs mb-0">
+                        © All rights reserved. Made by <span class="animate-underline"><a
+                                class="animate-target text-dark-emphasis text-decoration-none"
+                                href="https://coderthemes.com/" rel="noreferrer" target="_blank">Coderthemes</a></span>
+                    </p>
+                </footer>
+            </div>
+            <!-- Benefits section that turns into offcanvas on screens < 992px wide (lg breakpoint) -->
+            <div class="offcanvas-lg offcanvas-end w-100 py-lg-4 ms-auto" id="benefits" style="max-width: 1034px">
+                <div class="offcanvas-header justify-content-end position-relative z-2 p-3">
+                    <button aria-label="Close"
+                        class="btn btn-icon btn-outline-dark text-dark border-dark bg-transparent rounded-circle d-none-dark"
+                        data-bs-dismiss="offcanvas" data-bs-target="#benefits" type="button">
+                        <i class="ci-close fs-lg"></i>
+                    </button>
+                    <button aria-label="Close"
+                        class="btn btn-icon btn-outline-dark text-light border-light bg-transparent rounded-circle d-none d-inline-flex-dark"
+                        data-bs-dismiss="offcanvas" data-bs-target="#benefits" type="button">
+                        <i class="ci-close fs-lg"></i>
+                    </button>
+                </div>
+                <div class="position-absolute top-0 start-0 w-100 h-100 d-lg-none">
+                    <span class="position-absolute top-0 start-0 w-100 h-100 d-none-dark"
+                        style="background: linear-gradient(-90deg, #accbee 0%, #e7f0fd 100%)"></span>
+                    <span class="position-absolute top-0 start-0 w-100 h-100 d-none d-block-dark"
+                        style="background: linear-gradient(-90deg, #1b273a 0%, #1f2632 100%)"></span>
+                </div>
+                <div
+                    class="offcanvas-body position-relative z-2 d-lg-flex flex-column align-items-center justify-content-center h-100 pt-2 px-3 p-lg-0">
+                    <div class="position-absolute top-0 start-0 w-100 h-100 d-none d-lg-block">
+                        <span class="position-absolute top-0 start-0 w-100 h-100 rounded-5 d-none-dark"
+                            style="background: linear-gradient(-90deg, #accbee 0%, #e7f0fd 100%)"></span>
+                        <span class="position-absolute top-0 start-0 w-100 h-100 rounded-5 d-none d-block-dark"
+                            style="background: linear-gradient(-90deg, #1b273a 0%, #1f2632 100%)"></span>
+                    </div>
+                    <div class="position-relative z-2 w-100 text-center px-md-2 p-lg-5">
+                        <h2 class="h4 pb-3">Cartzilla account benefits</h2>
+                        <div class="mx-auto" style="max-width: 790px">
+                            <div class="row row-cols-1 row-cols-sm-2 g-3 g-md-4 g-lg-3 g-xl-4">
+                                <div class="col">
+                                    <div class="card h-100 bg-transparent border-0">
+                                        <span
+                                            class="position-absolute top-0 start-0 w-100 h-100 bg-white bg-opacity-25 border border-white border-opacity-50 rounded-4 d-none-dark"></span>
+                                        <span
+                                            class="position-absolute top-0 start-0 w-100 h-100 bg-white border rounded-4 d-none d-block-dark"
+                                            style="--cz-bg-opacity: .05"></span>
+                                        <div class="card-body position-relative z-2">
+                                            <div class="d-inline-flex position-relative text-info p-3">
+                                                <span
+                                                    class="position-absolute top-0 start-0 w-100 h-100 bg-white rounded-pill d-none-dark"></span>
+                                                <span
+                                                    class="position-absolute top-0 start-0 w-100 h-100 bg-body-secondary rounded-pill d-none d-block-dark"></span>
+                                                <i class="ci-mail position-relative z-2 fs-4 m-1"></i>
+                                            </div>
+                                            <h3 class="h6 pt-2 my-2">Subscribe to your favorite products</h3>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col">
+                                    <div class="card h-100 bg-transparent border-0">
+                                        <span
+                                            class="position-absolute top-0 start-0 w-100 h-100 bg-white bg-opacity-25 border border-white border-opacity-50 rounded-4 d-none-dark"></span>
+                                        <span
+                                            class="position-absolute top-0 start-0 w-100 h-100 bg-white border rounded-4 d-none d-block-dark"
+                                            style="--cz-bg-opacity: .05"></span>
+                                        <div class="card-body position-relative z-2">
+                                            <div class="d-inline-flex position-relative text-info p-3">
+                                                <span
+                                                    class="position-absolute top-0 start-0 w-100 h-100 bg-white rounded-pill d-none-dark"></span>
+                                                <span
+                                                    class="position-absolute top-0 start-0 w-100 h-100 bg-body-secondary rounded-pill d-none d-block-dark"></span>
+                                                <i class="ci-settings position-relative z-2 fs-4 m-1"></i>
+                                            </div>
+                                            <h3 class="h6 pt-2 my-2">View and manage your orders and wishlist</h3>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col">
+                                    <div class="card h-100 bg-transparent border-0">
+                                        <span
+                                            class="position-absolute top-0 start-0 w-100 h-100 bg-white bg-opacity-25 border border-white border-opacity-50 rounded-4 d-none-dark"></span>
+                                        <span
+                                            class="position-absolute top-0 start-0 w-100 h-100 bg-white border rounded-4 d-none d-block-dark"
+                                            style="--cz-bg-opacity: .05"></span>
+                                        <div class="card-body position-relative z-2">
+                                            <div class="d-inline-flex position-relative text-info p-3">
+                                                <span
+                                                    class="position-absolute top-0 start-0 w-100 h-100 bg-white rounded-pill d-none-dark"></span>
+                                                <span
+                                                    class="position-absolute top-0 start-0 w-100 h-100 bg-body-secondary rounded-pill d-none d-block-dark"></span>
+                                                <i class="ci-gift position-relative z-2 fs-4 m-1"></i>
+                                            </div>
+                                            <h3 class="h6 pt-2 my-2">Earn rewards for future purchases</h3>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col">
+                                    <div class="card h-100 bg-transparent border-0">
+                                        <span
+                                            class="position-absolute top-0 start-0 w-100 h-100 bg-white bg-opacity-25 border border-white border-opacity-50 rounded-4 d-none-dark"></span>
+                                        <span
+                                            class="position-absolute top-0 start-0 w-100 h-100 bg-white border rounded-4 d-none d-block-dark"
+                                            style="--cz-bg-opacity: .05"></span>
+                                        <div class="card-body position-relative z-2">
+                                            <div class="d-inline-flex position-relative text-info p-3">
+                                                <span
+                                                    class="position-absolute top-0 start-0 w-100 h-100 bg-white rounded-pill d-none-dark"></span>
+                                                <span
+                                                    class="position-absolute top-0 start-0 w-100 h-100 bg-body-secondary rounded-pill d-none d-block-dark"></span>
+                                                <i class="ci-percent position-relative z-2 fs-4 m-1"></i>
+                                            </div>
+                                            <h3 class="h6 pt-2 my-2">Receive exclusive offers and discounts</h3>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col">
+                                    <div class="card h-100 bg-transparent border-0">
+                                        <span
+                                            class="position-absolute top-0 start-0 w-100 h-100 bg-white bg-opacity-25 border border-white border-opacity-50 rounded-4 d-none-dark"></span>
+                                        <span
+                                            class="position-absolute top-0 start-0 w-100 h-100 bg-white border rounded-4 d-none d-block-dark"
+                                            style="--cz-bg-opacity: .05"></span>
+                                        <div class="card-body position-relative z-2">
+                                            <div class="d-inline-flex position-relative text-info p-3">
+                                                <span
+                                                    class="position-absolute top-0 start-0 w-100 h-100 bg-white rounded-pill d-none-dark"></span>
+                                                <span
+                                                    class="position-absolute top-0 start-0 w-100 h-100 bg-body-secondary rounded-pill d-none d-block-dark"></span>
+                                                <i class="ci-heart position-relative z-2 fs-4 m-1"></i>
+                                            </div>
+                                            <h3 class="h6 pt-2 my-2">Create multiple wishlists</h3>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col">
+                                    <div class="card h-100 bg-transparent border-0">
+                                        <span
+                                            class="position-absolute top-0 start-0 w-100 h-100 bg-white bg-opacity-25 border border-white border-opacity-50 rounded-4 d-none-dark"></span>
+                                        <span
+                                            class="position-absolute top-0 start-0 w-100 h-100 bg-white border rounded-4 d-none d-block-dark"
+                                            style="--cz-bg-opacity: .05"></span>
+                                        <div class="card-body position-relative z-2">
+                                            <div class="d-inline-flex position-relative text-info p-3">
+                                                <span
+                                                    class="position-absolute top-0 start-0 w-100 h-100 bg-white rounded-pill d-none-dark"></span>
+                                                <span
+                                                    class="position-absolute top-0 start-0 w-100 h-100 bg-body-secondary rounded-pill d-none d-block-dark"></span>
+                                                <i class="ci-pie-chart position-relative z-2 fs-4 m-1"></i>
+                                            </div>
+                                            <h3 class="h6 pt-2 my-2">Pay for purchases by installments</h3>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+@endsection
+
+@section('scripts')
+@endsection
diff --git a/resources/views/account/wishlist.blade.php b/resources/views/account/wishlist.blade.php
new file mode 100644
index 0000000..0531122
--- /dev/null
+++ b/resources/views/account/wishlist.blade.php
@@ -0,0 +1,327 @@
+@extends('layouts.account', ['title' => 'Account - Wishlist'])
+
+@section('content')
+    <!-- Wishlist content -->
+    <div class="col-lg-9">
+        <div class="ps-lg-3 ps-xl-0">
+            <!-- Page title + Add list button-->
+            <div class="d-flex align-items-center justify-content-between pb-3 mb-1 mb-sm-2 mb-md-3">
+                <h1 class="h2 me-3 mb-0">Wishlist</h1>
+                <div class="nav">
+                    <a class="nav-link animate-underline px-0 py-1 py-ms-2" data-bs-toggle="modal" href="#wishlistModal">
+                        <i class="ci-plus fs-base me-1"></i>
+                        <span class="animate-target">Add wishlist</span>
+                    </a>
+                </div>
+            </div>
+            <!-- Wishlist selector -->
+            <div class="border-bottom pb-4 mb-3">
+                <div class="row align-items-center justify-content-between">
+                    <div class="col-sm-7 col-md-8 col-xxl-9 d-flex align-items-center mb-3 mb-sm-0">
+                        <h5 class="me-2 mb-0">Interesting offers</h5>
+                        <div class="dropdown ms-auto ms-sm-0">
+                            <button aria-expanded="false" aria-haspopup="true" aria-label="Select wishlist"
+                                class="btn btn-icon btn-ghost btn-secondary border-0" data-bs-auto-close="outside"
+                                data-bs-toggle="dropdown" id="wishlist-selector" type="button">
+                                <i class="ci-more-vertical fs-xl"></i>
+                            </button>
+                            <div class="dropdown-menu dropdown-menu-end">
+                                <div class="d-flex flex-column gap-1 mb-2">
+                                    <div class="form-check">
+                                        <input checked="" class="form-check-input" id="wishlist-1" name="wishlist"
+                                            type="radio" />
+                                        <label class="form-check-label text-body" for="wishlist-1">Interesting
+                                            offers</label>
+                                    </div>
+                                    <div class="form-check">
+                                        <input class="form-check-input" id="wishlist-2" name="wishlist" type="radio" />
+                                        <label class="form-check-label text-body" for="wishlist-2">Top picks
+                                            collection</label>
+                                    </div>
+                                    <div class="form-check">
+                                        <input class="form-check-input" id="wishlist-3" name="wishlist" type="radio" />
+                                        <label class="form-check-label text-body" for="wishlist-3">Family
+                                            stuff</label>
+                                    </div>
+                                    <div class="form-check">
+                                        <input class="form-check-input" id="wishlist-4" name="wishlist" type="radio" />
+                                        <label class="form-check-label text-body" for="wishlist-4">My
+                                            must-haves</label>
+                                    </div>
+                                    <div class="form-check">
+                                        <input class="form-check-input" id="wishlist-5" name="wishlist" type="radio" />
+                                        <label class="form-check-label text-body" for="wishlist-5">For my
+                                            husband</label>
+                                    </div>
+                                </div>
+                                <button class="btn btn-sm btn-dark w-100"
+                                    onclick="document.getElementById('wishlist-selector').click()" type="button">Select
+                                    wishlist</button>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-sm-5 col-md-4 col-xxl-3">
+                        <select aria-label="Wishlist sorting" class="form-select" data-select='{"removeItemButton": false}'>
+                            <option value="date">By date added</option>
+                            <option value="price-ascend">By price ascending</option>
+                            <option value="price-descend">By price descending</option>
+                            <option value="rating">By rating</option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+            <!-- Master checkbox + Action buttons -->
+            <div class="nav align-items-center mb-4">
+                <div class="form-checkl nav-link animate-underline fs-lg ps-0 pe-2 py-2 mt-n1 me-4"
+                    data-master-checkbox='{"container": "#wishlistSelection", "label": "Select all", "labelChecked": "Unselect all", "showOnCheck": "#action-buttons"}'>
+                    <input checked="" class="form-check-input" id="wishlist-master" type="checkbox" />
+                    <label class="form-check-label animate-target mt-1 ms-2" for="wishlist-master">Unselect
+                        all</label>
+                </div>
+                <div class="d-flex flex-wrap" id="action-buttons">
+                    <a class="nav-link animate-underline px-0 pe-sm-2 py-2 me-4" href="#!">
+                        <i class="ci-shopping-cart fs-base me-2"></i>
+                        <span class="animate-target d-none d-md-inline">Add to cart</span>
+                    </a>
+                    <a class="nav-link animate-underline px-0 pe-sm-2 py-2 me-4" href="#!">
+                        <i class="ci-repeat fs-base me-2"></i>
+                        <span class="animate-target d-none d-md-inline">Relocate</span>
+                    </a>
+                    <a class="nav-link animate-underline px-0 py-2" href="#!">
+                        <i class="ci-trash fs-base me-1"></i>
+                        <span class="animate-target d-none d-md-inline">Remove selected</span>
+                    </a>
+                </div>
+            </div>
+            <!-- Wishlist items (Grid) -->
+            <div class="row row-cols-2 row-cols-md-3 g-4" id="wishlistSelection">
+                <!-- Item -->
+                <div class="col">
+                    <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+                        <div class="position-relative">
+                            <div class="position-absolute top-0 end-0 z-1 pt-1 pe-1 mt-2 me-2">
+                                <div class="form-check fs-lg">
+                                    <input checked="" class="form-check-input select-card-check" type="checkbox" />
+                                </div>
+                            </div>
+                            <a class="d-block rounded-top overflow-hidden p-3 p-sm-4"
+                                href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                <span
+                                    class="badge bg-danger position-absolute top-0 start-0 mt-2 ms-2 mt-lg-3 ms-lg-3">-21%</span>
+                                <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                                    <img alt="VR Glasses" src="/img/shop/electronics/01.png" />
+                                </div>
+                            </a>
+                        </div>
+                        <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                            <div class="d-flex align-items-center gap-2 mb-2">
+                                <div class="d-flex gap-1 fs-xs">
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star text-body-tertiary opacity-75"></i>
+                                </div>
+                                <span class="text-body-tertiary fs-xs">(123)</span>
+                            </div>
+                            <h3 class="pb-1 mb-2">
+                                <a class="d-block fs-sm fw-medium text-truncate"
+                                    href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                    <span class="animate-target">VRB01 Virtual Reality Glasses</span>
+                                </a>
+                            </h3>
+                            <div class="d-flex align-items-center justify-content-between">
+                                <div class="h5 lh-1 mb-0">$340.99 <del
+                                        class="text-body-tertiary fs-sm fw-normal">$430.00</del></div>
+                                <button aria-label="Add to Cart"
+                                    class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2"
+                                    type="button">
+                                    <i class="ci-shopping-cart fs-base animate-target"></i>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- Item -->
+                <div class="col">
+                    <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+                        <div class="position-relative">
+                            <div class="position-absolute top-0 end-0 z-1 pt-1 pe-1 mt-2 me-2">
+                                <div class="form-check fs-lg">
+                                    <input checked="" class="form-check-input select-card-check" type="checkbox" />
+                                </div>
+                            </div>
+                            <a class="d-block rounded-top overflow-hidden p-3 p-sm-4"
+                                href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                                    <img alt="iPhone 14" src="/img/shop/electronics/02.png" />
+                                </div>
+                            </a>
+                        </div>
+                        <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                            <div class="d-flex align-items-center gap-2 mb-2">
+                                <div class="d-flex gap-1 fs-xs">
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-half text-warning"></i>
+                                </div>
+                                <span class="text-body-tertiary fs-xs">(142)</span>
+                            </div>
+                            <h3 class="pb-1 mb-2">
+                                <a class="d-block fs-sm fw-medium text-truncate"
+                                    href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                    <span class="animate-target">Apple iPhone 14 128GB White</span>
+                                </a>
+                            </h3>
+                            <div class="d-flex align-items-center justify-content-between">
+                                <div class="h5 lh-1 mb-0">$899.00</div>
+                                <button aria-label="Add to Cart"
+                                    class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2"
+                                    type="button">
+                                    <i class="ci-shopping-cart fs-base animate-target"></i>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- Item -->
+                <div class="col">
+                    <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+                        <div class="position-relative">
+                            <div class="position-absolute top-0 end-0 z-1 pt-1 pe-1 mt-2 me-2">
+                                <div class="form-check fs-lg">
+                                    <input class="form-check-input select-card-check" type="checkbox" />
+                                </div>
+                            </div>
+                            <a class="d-block rounded-top overflow-hidden p-3 p-sm-4"
+                                href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                                    <img alt="Smart Watch" src="/img/shop/electronics/03.png" />
+                                </div>
+                            </a>
+                        </div>
+                        <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                            <div class="d-flex align-items-center gap-2 mb-2">
+                                <div class="d-flex gap-1 fs-xs">
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                </div>
+                                <span class="text-body-tertiary fs-xs">(67)</span>
+                            </div>
+                            <h3 class="pb-1 mb-2">
+                                <a class="d-block fs-sm fw-medium text-truncate"
+                                    href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                    <span class="animate-target">Smart Watch Series 7, White</span>
+                                </a>
+                            </h3>
+                            <div class="d-flex align-items-center justify-content-between">
+                                <div class="h5 lh-1 mb-0">$429.00</div>
+                                <button aria-label="Add to Cart"
+                                    class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2"
+                                    type="button">
+                                    <i class="ci-shopping-cart fs-base animate-target"></i>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- Item -->
+                <div class="col">
+                    <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+                        <div class="posittion-relative">
+                            <div class="position-absolute top-0 end-0 z-1 pt-1 pe-1 mt-2 me-2">
+                                <div class="form-check fs-lg">
+                                    <input class="form-check-input select-card-check" type="checkbox" />
+                                </div>
+                            </div>
+                            <a class="d-block rounded-top overflow-hidden p-3 p-sm-4"
+                                href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                                    <img alt="iPad Air" src="/img/shop/electronics/05.png" />
+                                </div>
+                            </a>
+                        </div>
+                        <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                            <div class="d-flex align-items-center gap-2 mb-2">
+                                <div class="d-flex gap-1 fs-xs">
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                </div>
+                                <span class="text-body-tertiary fs-xs">(12)</span>
+                            </div>
+                            <h3 class="pb-1 mb-2">
+                                <a class="d-block fs-sm fw-medium text-truncate"
+                                    href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                    <span class="animate-target">Tablet Apple iPad Air M1</span>
+                                </a>
+                            </h3>
+                            <div class="d-flex align-items-center justify-content-between">
+                                <div class="h5 lh-1 mb-0">$540.00</div>
+                                <button aria-label="Add to Cart"
+                                    class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2"
+                                    type="button">
+                                    <i class="ci-shopping-cart fs-base animate-target"></i>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- Item -->
+                <div class="col">
+                    <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+                        <div class="position-relative">
+                            <div class="position-absolute top-0 end-0 z-1 pt-1 pe-1 mt-2 me-2">
+                                <div class="form-check fs-lg">
+                                    <input class="form-check-input select-card-check" type="checkbox" />
+                                </div>
+                            </div>
+                            <a class="d-block rounded-top overflow-hidden p-3 p-sm-4"
+                                href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                                    <img alt="AirPods 2" src="/img/shop/electronics/06.png" />
+                                </div>
+                            </a>
+                        </div>
+                        <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                            <div class="d-flex align-items-center gap-2 mb-2">
+                                <div class="d-flex gap-1 fs-xs">
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star text-body-tertiary opacity-75"></i>
+                                </div>
+                                <span class="text-body-tertiary fs-xs">(78)</span>
+                            </div>
+                            <h3 class="pb-1 mb-2">
+                                <a class="d-block fs-sm fw-medium text-truncate"
+                                    href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                    <span class="animate-target">Headphones Apple AirPods 2 Pro</span>
+                                </a>
+                            </h3>
+                            <div class="d-flex align-items-center justify-content-between">
+                                <div class="h5 lh-1 mb-0">$224.00</div>
+                                <button aria-label="Add to Cart"
+                                    class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2"
+                                    type="button">
+                                    <i class="ci-shopping-cart fs-base animate-target"></i>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+@endsection
+
+@section('scripts')
+@endsection
diff --git a/resources/views/blog/grid-v1.blade.php b/resources/views/blog/grid-v1.blade.php
new file mode 100644
index 0000000..065acd4
--- /dev/null
+++ b/resources/views/blog/grid-v1.blade.php
@@ -0,0 +1,628 @@
+@extends('layouts.landing', ['title' => 'Blog Grid View v.1'])
+
+@section('content')
+
+   @include('layouts.partials/offcanvas')
+
+   @include('layouts.partials/navbar', ['wishlist' => True])
+
+    <main class="content-wrapper">
+
+        <!-- Breadcrumb -->
+        <nav class="container pt-3 my-3 my-md-4" aria-label="breadcrumb">
+            <ol class="breadcrumb">
+                <li class="breadcrumb-item"><a href="{{ route('second', ['home', 'electronics']) }}">Home</a></li>
+                <li class="breadcrumb-item active" aria-current="page">Blog</li>
+            </ol>
+        </nav>
+
+
+        <!-- Page title -->
+        <h1 class="h3 container mb-4">Our blog</h1>
+
+
+        <!-- Featured posts -->
+        <section class="container pb-5">
+            <div class="row gy-5 pb-5">
+
+                <!-- Article -->
+                <article class="col-md-6 col-lg-7">
+                    <a class="ratio d-flex hover-effect-scale rounded-4 overflow-hidden" href="{{ route('second', ['blog', 'single-v1']) }}"
+                        style="--cz-aspect-ratio: calc(484 / 746 * 100%)">
+                        <img src="/img/blog/grid/v1/01.jpg" class="hover-effect-target" alt="Image">
+                    </a>
+                    <div class="pt-4">
+                        <div class="nav align-items-center gap-2 pb-2 mt-n1 mb-1">
+                            <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Gadget reviews</a>
+                            <hr class="vr my-1 mx-1">
+                            <span class="text-body-tertiary fs-xs">October 13, 2024</span>
+                        </div>
+                        <h3 class="h5 mb-0">
+                            <a class="hover-effect-underline" href="{{ route('second', ['blog', 'single-v1']) }}">Discover how to maximize your
+                                productivity with these essential tech gadgets designed for the modern home office</a>
+                        </h3>
+                    </div>
+                </article>
+
+                <!-- Side list -->
+                <div class="col-md-6 col-lg-5 d-flex flex-column align-content-between gap-4">
+
+                    <!-- Article -->
+                    <article class="hover-effect-scale position-relative d-flex align-items-center ps-xl-4 mb-xl-1">
+                        <div class="w-100 pe-3 pe-sm-4 pe-lg-3 pe-xl-4">
+                            <div class="text-body-tertiary fs-xs pb-2 mb-1">October 10, 2024</div>
+                            <h3 class="h6 mb-2">
+                                <a class="hover-effect-underline stretched-link" href="{{ route('second', ['blog', 'single-v1']) }}">Digital digest:
+                                    News and views on the latest electronic products</a>
+                            </h3>
+                        </div>
+                        <div class="ratio w-100 rounded overflow-hidden"
+                            style="max-width: 196px; --cz-aspect-ratio: calc(140 / 196 * 100%)">
+                            <img src="/img/blog/grid/v1/02.jpg" class="hover-effect-target" alt="Image">
+                        </div>
+                    </article>
+
+                    <!-- Article -->
+                    <article class="hover-effect-scale position-relative d-flex align-items-center ps-xl-4 mb-xl-1">
+                        <div class="w-100 pe-3 pe-sm-4 pe-lg-3 pe-xl-4">
+                            <div class="text-body-tertiary fs-xs pb-2 mb-1">September 29, 2024</div>
+                            <h3 class="h6 mb-2">
+                                <a class="hover-effect-underline stretched-link" href="{{ route('second', ['blog', 'single-v1']) }}">Embracing
+                                    connections: How modern technology bridges gaps and builds communities</a>
+                            </h3>
+                        </div>
+                        <div class="ratio w-100 rounded overflow-hidden"
+                            style="max-width: 196px; --cz-aspect-ratio: calc(140 / 196 * 100%)">
+                            <img src="/img/blog/grid/v1/03.jpg" class="hover-effect-target" alt="Image">
+                        </div>
+                    </article>
+
+                    <!-- Article -->
+                    <article class="hover-effect-scale position-relative d-flex align-items-center ps-xl-4 mb-xl-1">
+                        <div class="w-100 pe-3 pe-sm-4 pe-lg-3 pe-xl-4">
+                            <div class="text-body-tertiary fs-xs pb-2 mb-1">September 17, 2024</div>
+                            <h3 class="h6 mb-2">
+                                <a class="hover-effect-underline stretched-link" href="{{ route('second', ['blog', 'single-v1']) }}">Transform your
+                                    home into a smart hub with the latest IoT</a>
+                            </h3>
+                        </div>
+                        <div class="ratio w-100 rounded overflow-hidden"
+                            style="max-width: 196px; --cz-aspect-ratio: calc(140 / 196 * 100%)">
+                            <img src="/img/blog/grid/v1/04.jpg" class="hover-effect-target" alt="Image">
+                        </div>
+                    </article>
+                </div>
+            </div>
+            <hr class="my-0 my-md-2 my-lg-4">
+        </section>
+
+
+        <!-- Posts grid + Sidebar -->
+        <section class="container pb-5 mb-2 mb-md-3 mb-lg-4 mb-xl-5">
+            <div class="row">
+
+                <!-- Posts grid -->
+                <div class="col-lg-8">
+                    <div class="row row-cols-1 row-cols-sm-2 gy-5">
+
+                        <!-- Article -->
+                        <article class="col">
+                            <a class="ratio d-flex hover-effect-scale rounded overflow-hidden" href="{{ route('second', ['blog', 'single-v1']) }}"
+                                style="--cz-aspect-ratio: calc(305 / 416 * 100%)">
+                                <img src="/img/blog/grid/v1/05.jpg" class="hover-effect-target" alt="Image">
+                            </a>
+                            <div class="pt-4">
+                                <div class="nav align-items-center gap-2 pb-2 mt-n1 mb-1">
+                                    <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Tech tips</a>
+                                    <hr class="vr my-1 mx-1">
+                                    <span class="text-body-tertiary fs-xs">September 11, 2024</span>
+                                </div>
+                                <h3 class="h5 mb-0">
+                                    <a class="hover-effect-underline" href="{{ route('second', ['blog', 'single-v1']) }}">Optimizing your workspace:
+                                        The guide to an efficient and minimalist desk setup</a>
+                                </h3>
+                            </div>
+                        </article>
+
+                        <!-- Article -->
+                        <article class="col">
+                            <a class="ratio d-flex hover-effect-scale rounded overflow-hidden" href="{{ route('second', ['blog', 'single-v1']) }}"
+                                style="--cz-aspect-ratio: calc(305 / 416 * 100%)">
+                                <img src="/img/blog/grid/v1/06.jpg" class="hover-effect-target" alt="Image">
+                            </a>
+                            <div class="pt-4">
+                                <div class="nav align-items-center gap-2 pb-2 mt-n1 mb-1">
+                                    <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Industry
+                                        trends</a>
+                                    <hr class="vr my-1 mx-1">
+                                    <span class="text-body-tertiary fs-xs">September 5, 2024</span>
+                                </div>
+                                <h3 class="h5 mb-0">
+                                    <a class="hover-effect-underline" href="{{ route('second', ['blog', 'single-v1']) }}">Exploring the skies: The
+                                        rise of drone photography and videography</a>
+                                </h3>
+                            </div>
+                        </article>
+
+                        <!-- Article -->
+                        <article class="col">
+                            <a class="ratio d-flex hover-effect-scale rounded overflow-hidden" href="{{ route('second', ['blog', 'single-v1']) }}"
+                                style="--cz-aspect-ratio: calc(305 / 416 * 100%)">
+                                <img src="/img/blog/grid/v1/07.jpg" class="hover-effect-target" alt="Image">
+                            </a>
+                            <div class="pt-4">
+                                <div class="nav align-items-center gap-2 pb-2 mt-n1 mb-1">
+                                    <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">IoT</a>
+                                    <hr class="vr my-1 mx-1">
+                                    <span class="text-body-tertiary fs-xs">August 23, 2024</span>
+                                </div>
+                                <h3 class="h5 mb-0">
+                                    <a class="hover-effect-underline" href="{{ route('second', ['blog', 'single-v1']) }}">Connecting the dots: How
+                                        IoT technology is transforming everyday life</a>
+                                </h3>
+                            </div>
+                        </article>
+
+                        <!-- Article -->
+                        <article class="col">
+                            <a class="ratio d-flex hover-effect-scale rounded overflow-hidden" href="{{ route('second', ['blog', 'single-v1']) }}"
+                                style="--cz-aspect-ratio: calc(305 / 416 * 100%)">
+                                <img src="/img/blog/grid/v1/08.jpg" class="hover-effect-target" alt="Image">
+                            </a>
+                            <div class="pt-4">
+                                <div class="nav align-items-center gap-2 pb-2 mt-n1 mb-1">
+                                    <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Buying
+                                        guides</a>
+                                    <hr class="vr my-1 mx-1">
+                                    <span class="text-body-tertiary fs-xs">August 18, 2024</span>
+                                </div>
+                                <h3 class="h5 mb-0">
+                                    <a class="hover-effect-underline" href="{{ route('second', ['blog', 'single-v1']) }}">How to find the best
+                                        deals and make secure transactions online</a>
+                                </h3>
+                            </div>
+                        </article>
+
+                        <!-- Article -->
+                        <article class="col">
+                            <a class="ratio d-flex hover-effect-scale rounded overflow-hidden" href="{{ route('second', ['blog', 'single-v1']) }}"
+                                style="--cz-aspect-ratio: calc(305 / 416 * 100%)">
+                                <img src="/img/blog/grid/v1/09.jpg" class="hover-effect-target" alt="Image">
+                            </a>
+                            <div class="pt-4">
+                                <div class="nav align-items-center gap-2 pb-2 mt-n1 mb-1">
+                                    <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Gadget
+                                        reviews</a>
+                                    <hr class="vr my-1 mx-1">
+                                    <span class="text-body-tertiary fs-xs">August 9, 2024</span>
+                                </div>
+                                <h3 class="h5 mb-0">
+                                    <a class="hover-effect-underline" href="{{ route('second', ['blog', 'single-v1']) }}">Top 10 electric kitchen
+                                        appliances for modern homes</a>
+                                </h3>
+                            </div>
+                        </article>
+
+                        <!-- Article -->
+                        <article class="col">
+                            <a class="ratio d-flex hover-effect-scale rounded overflow-hidden" href="{{ route('second', ['blog', 'single-v1']) }}"
+                                style="--cz-aspect-ratio: calc(305 / 416 * 100%)">
+                                <img src="/img/blog/grid/v1/10.jpg" class="hover-effect-target" alt="Image">
+                            </a>
+                            <div class="pt-4">
+                                <div class="nav align-items-center gap-2 pb-2 mt-n1 mb-1">
+                                    <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Gaming</a>
+                                    <hr class="vr my-1 mx-1">
+                                    <span class="text-body-tertiary fs-xs">July 27, 2024</span>
+                                </div>
+                                <h3 class="h5 mb-0">
+                                    <a class="hover-effect-underline" href="{{ route('second', ['blog', 'single-v1']) }}">Immersive worlds: A dive
+                                        into the latest VR gear and experiences</a>
+                                </h3>
+                            </div>
+                        </article>
+                    </div>
+
+
+                    <!-- Contributors' posts slider -->
+                    <div class="py-5 my-1 my-sm-2 my-md-3 my-lg-4 my-xl-5">
+                        <div class="d-flex align-items-center justify-content-between mb-4">
+                            <h2 class="h3 mb-0">Charitable contributions</h2>
+                            <div class="d-flex gap-2">
+                                <button type="button" id="prev-post"
+                                    class="btn btn-prev btn-icon btn-outline-secondary rounded-circle animate-slide-start me-1"
+                                    aria-label="Prev">
+                                    <i class="ci-chevron-left fs-lg animate-target"></i>
+                                </button>
+                                <button type="button" id="next-post"
+                                    class="btn btn-next btn-icon btn-outline-secondary rounded-circle animate-slide-end"
+                                    aria-label="Next">
+                                    <i class="ci-chevron-right fs-lg animate-target"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <div class="row row-cols-1 row-cols-md-2 g-0 overflow-hidden rounded-5">
+
+                            <!-- Binded images (controlled slider) -->
+                            <div class="col order-md-2 user-select-none">
+                                <div class="swiper h-100" id="images"
+                                    data-swiper='{
+                    "allowTouchMove": false,
+                    "loop": true,
+                    "effect": "fade"
+                  }'>
+                                    <div class="swiper-wrapper">
+                                        <div class="swiper-slide">
+                                            <div class="ratio ratio-16x9"></div>
+                                            <img src="/img/blog/grid/v1/slider01.jpg"
+                                                class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover"
+                                                alt="Image">
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="ratio ratio-16x9"></div>
+                                            <img src="/img/blog/grid/v1/slider02.jpg"
+                                                class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover"
+                                                alt="Image">
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Text slider -->
+                            <div class="col bg-dark order-md-1 py-5 px-4 px-sm-5" data-bs-theme="dark">
+                                <div class="swiper py-sm-2 py-md-3 my-xl-2 my-xxl-3"
+                                    data-swiper='{
+                    "spaceBetween": 40,
+                    "loop": true,
+                    "speed": 400,
+                    "controlSlider": "#images",
+                    "navigation": {
+                      "prevEl": "#prev-post",
+                      "nextEl": "#next-post"
+                    }
+                  }'>
+                                    <div class="swiper-wrapper">
+                                        <div class="swiper-slide">
+                                            <h3 class="h5">The role of philanthropy in building a better world</h3>
+                                            <p class="text-body fs-sm pb-4">Charitable contributions are a vital aspect of
+                                                building a better world. These contributions come in various forms,
+                                                including monetary donations, volunteering time, providing expertise...</p>
+                                            <a class="btn btn-outline-light" href="{{ route('second', ['blog', 'single-v1']) }}">Read more</a>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <h3 class="h5">Supporting communities through charitable giving</h3>
+                                            <p class="text-body fs-sm pb-4">Join us on a journey of generosity as we
+                                                spotlight the transformative power of charitable contributions. In this
+                                                section, we celebrate the stories of impact made possible by your...</p>
+                                            <a class="btn btn-outline-light" href="{{ route('second', ['blog', 'single-v1']) }}">Read more</a>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+
+                    <!-- Posts grid -->
+                    <div class="row row-cols-1 row-cols-sm-2 gy-5 pb-2 pb-sm-0">
+
+                        <!-- Article -->
+                        <article class="col">
+                            <a class="ratio d-flex hover-effect-scale rounded overflow-hidden" href="{{ route('second', ['blog', 'single-v1']) }}"
+                                style="--cz-aspect-ratio: calc(305 / 416 * 100%)">
+                                <img src="/img/blog/grid/v1/11.jpg" class="hover-effect-target" alt="Image">
+                            </a>
+                            <div class="pt-4">
+                                <div class="nav align-items-center gap-2 pb-2 mt-n1 mb-1">
+                                    <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Tech news</a>
+                                    <hr class="vr my-1 mx-1">
+                                    <span class="text-body-tertiary fs-xs">July 16, 2024</span>
+                                </div>
+                                <h3 class="h5 mb-0">
+                                    <a class="hover-effect-underline" href="{{ route('second', ['blog', 'single-v1']) }}">Tap, pay, and go:
+                                        Simplifying transactions with mobile payment solutions</a>
+                                </h3>
+                            </div>
+                        </article>
+
+                        <!-- Article -->
+                        <article class="col">
+                            <a class="ratio d-flex hover-effect-scale rounded overflow-hidden" href="{{ route('second', ['blog', 'single-v1']) }}"
+                                style="--cz-aspect-ratio: calc(305 / 416 * 100%)">
+                                <img src="/img/blog/grid/v1/12.jpg" class="hover-effect-target" alt="Image">
+                            </a>
+                            <div class="pt-4">
+                                <div class="nav align-items-center gap-2 pb-2 mt-n1 mb-1">
+                                    <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Industry
+                                        trends</a>
+                                    <hr class="vr my-1 mx-1">
+                                    <span class="text-body-tertiary fs-xs">July 8, 2024</span>
+                                </div>
+                                <h3 class="h5 mb-0">
+                                    <a class="hover-effect-underline" href="{{ route('second', ['blog', 'single-v1']) }}">The biggest prospects for
+                                        the smartphone electronics industry</a>
+                                </h3>
+                            </div>
+                        </article>
+
+                        <!-- Article -->
+                        <article class="col">
+                            <a class="ratio d-flex hover-effect-scale rounded overflow-hidden" href="{{ route('second', ['blog', 'single-v1']) }}"
+                                style="--cz-aspect-ratio: calc(305 / 416 * 100%)">
+                                <img src="/img/blog/grid/v1/13.jpg" class="hover-effect-target" alt="Image">
+                            </a>
+                            <div class="pt-4">
+                                <div class="nav align-items-center gap-2 pb-2 mt-n1 mb-1">
+                                    <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Product
+                                        reviews</a>
+                                    <hr class="vr my-1 mx-1">
+                                    <span class="text-body-tertiary fs-xs">June 27, 2024</span>
+                                </div>
+                                <h3 class="h5 mb-0">
+                                    <a class="hover-effect-underline" href="{{ route('second', ['blog', 'single-v1']) }}">Future engineers start
+                                        young: A review of the latest robotic kit for kids</a>
+                                </h3>
+                            </div>
+                        </article>
+
+                        <!-- Article -->
+                        <article class="col">
+                            <a class="ratio d-flex hover-effect-scale rounded overflow-hidden" href="{{ route('second', ['blog', 'single-v1']) }}"
+                                style="--cz-aspect-ratio: calc(305 / 416 * 100%)">
+                                <img src="/img/blog/grid/v1/14.jpg" class="hover-effect-target" alt="Image">
+                            </a>
+                            <div class="pt-4">
+                                <div class="nav align-items-center gap-2 pb-2 mt-n1 mb-1">
+                                    <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Buying
+                                        guides</a>
+                                    <hr class="vr my-1 mx-1">
+                                    <span class="text-body-tertiary fs-xs">June 19, 2024</span>
+                                </div>
+                                <h3 class="h5 mb-0">
+                                    <a class="hover-effect-underline" href="{{ route('second', ['blog', 'single-v1']) }}">A detailed guide to the
+                                        latest smartphones on the market</a>
+                                </h3>
+                            </div>
+                        </article>
+                    </div>
+                    <hr class="mt-4 mt-sm-5">
+
+                    <!-- Pagination -->
+                    <nav aria-label="Blog pages">
+                        <ul class="pagination pagination-lg">
+                            <li class="page-item active" aria-current="page">
+                                <span class="page-link">
+                                    1
+                                    <span class="visually-hidden">(current)</span>
+                                </span>
+                            </li>
+                            <li class="page-item">
+                                <a class="page-link" href="#">2</a>
+                            </li>
+                            <li class="page-item">
+                                <a class="page-link" href="#">3</a>
+                            </li>
+                            <li class="page-item">
+                                <a class="page-link" href="#">4</a>
+                            </li>
+                            <li class="page-item">
+                                <a class="page-link" href="#">5</a>
+                            </li>
+                        </ul>
+                    </nav>
+                </div>
+
+
+                <!-- Sticky sidebar that turns into offcanvas on screens < 992px wide (lg breakpoint) -->
+                <aside class="col-lg-4 col-xl-3 offset-xl-1" style="margin-top: -115px">
+                    <div class="offcanvas-lg offcanvas-end sticky-lg-top ps-lg-4 ps-xl-0" id="blogSidebar">
+                        <div class="d-none d-lg-block" style="height: 115px"></div>
+                        <div class="offcanvas-header py-3">
+                            <h5 class="offcanvas-title">Sidebar</h5>
+                            <button type="button" class="btn-close" data-bs-dismiss="offcanvas"
+                                data-bs-target="#blogSidebar" aria-label="Close"></button>
+                        </div>
+                        <div class="offcanvas-body d-block pt-2 py-lg-0">
+                            <h4 class="h6 mb-4">Blog categories</h4>
+                            <div class="d-flex flex-wrap gap-3">
+                                <a class="btn btn-outline-secondary px-3" href="#!">Gadget reviews</a>
+                                <a class="btn btn-outline-secondary px-3" href="#!">Tech news</a>
+                                <a class="btn btn-outline-secondary px-3" href="#!">Industry trends</a>
+                                <a class="btn btn-outline-secondary px-3" href="#!">Buying guides</a>
+                                <a class="btn btn-outline-secondary px-3" href="#!">Tech tips</a>
+                                <a class="btn btn-outline-secondary px-3" href="#!">Gaming</a>
+                                <a class="btn btn-outline-secondary px-3" href="#!">IoT</a>
+                            </div>
+                            <h4 class="h6 pt-5 mb-0">Trending posts</h4>
+                            <article
+                                class="hover-effect-scale position-relative d-flex align-items-center border-bottom py-4">
+                                <div class="w-100 pe-3">
+                                    <h3 class="h6 lh-base fs-sm mb-0">
+                                        <a class="hover-effect-underline stretched-link" href="{{ route('second', ['blog', 'single-v1']) }}">The
+                                            role of philanthropy in building a better world</a>
+                                    </h3>
+                                </div>
+                                <div class="ratio w-100" style="max-width: 86px; --cz-aspect-ratio: calc(64 / 86 * 100%)">
+                                    <img src="/img/blog/grid/v1/th01.jpg" class="rounded-2" alt="Image">
+                                </div>
+                            </article>
+                            <article
+                                class="hover-effect-scale position-relative d-flex align-items-center border-bottom py-4">
+                                <div class="w-100 pe-3">
+                                    <h3 class="h6 lh-base fs-sm mb-0">
+                                        <a class="hover-effect-underline stretched-link" href="{{ route('second', ['blog', 'single-v1']) }}">The
+                                            biggest prospects for the smart home electronics industry</a>
+                                    </h3>
+                                </div>
+                                <div class="ratio w-100" style="max-width: 86px; --cz-aspect-ratio: calc(64 / 86 * 100%)">
+                                    <img src="/img/blog/grid/v1/th02.jpg" class="rounded-2" alt="Image">
+                                </div>
+                            </article>
+                            <article class="hover-effect-scale position-relative d-flex align-items-center py-4">
+                                <div class="w-100 pe-3">
+                                    <h3 class="h6 lh-base fs-sm mb-0">
+                                        <a class="hover-effect-underline stretched-link"
+                                            href="{{ route('second', ['blog', 'single-v1']) }}">Behind-the-scenes stories from the world of
+                                            iPhones</a>
+                                    </h3>
+                                </div>
+                                <div class="ratio w-100" style="max-width: 86px; --cz-aspect-ratio: calc(64 / 86 * 100%)">
+                                    <img src="/img/blog/grid/v1/th03.jpg" class="rounded-2" alt="Image">
+                                </div>
+                            </article>
+                            <h4 class="h6 pt-4">Follow us</h4>
+                            <div class="d-flex gap-2 pb-2">
+                                <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
+                                    data-bs-toggle="tooltip"
+                                    data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-body p-0"></div></div>'
+                                    title="Instagram" aria-label="Follow us on Instagram">
+                                    <i class="ci-instagram"></i>
+                                </a>
+                                <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
+                                    data-bs-toggle="tooltip"
+                                    data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-body p-0"></div></div>'
+                                    title="X (Twitter)" aria-label="Follow us on X">
+                                    <i class="ci-x"></i>
+                                </a>
+                                <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
+                                    data-bs-toggle="tooltip"
+                                    data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-body p-0"></div></div>'
+                                    title="Facebook" aria-label="Follow us on Facebook">
+                                    <i class="ci-facebook"></i>
+                                </a>
+                                <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
+                                    data-bs-toggle="tooltip"
+                                    data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-body p-0"></div></div>'
+                                    title="Telegram" aria-label="Follow us on Telegram">
+                                    <i class="ci-telegram"></i>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </aside>
+            </div>
+        </section>
+
+
+        <!-- Video reviews -->
+        <section class="container pb-5 mb-1 mb-sm-2 mb-md-3 mb-lg-4 mb-xl-5">
+
+            <!-- Heading -->
+            <div class="d-flex align-items-center justify-content-between pb-2 pb-sm-3 mb-3">
+                <h2 class="h3 mb-0">Video reviews</h2>
+                <div class="nav ms-3">
+                    <a class="nav-link animate-underline px-0 py-2" href="#!">
+                        <span class="animate-target">View all</span>
+                        <i class="ci-chevron-right fs-base ms-1"></i>
+                    </a>
+                </div>
+            </div>
+
+            <!-- Video cards that turn into slider on screens < 992px wide (lg breakpoint) -->
+            <div class="swiper"
+                data-swiper='{
+          "slidesPerView": 1,
+          "spaceBetween": 24,
+          "pagination": {
+            "el": ".swiper-pagination",
+            "clickable": true
+          },
+          "breakpoints": {
+            "500": {
+              "slidesPerView": 2
+            },
+            "768": {
+              "slidesPerView": 3
+            },
+            "992": {
+              "slidesPerView": 4
+            }
+          }
+        }'>
+                <div class="swiper-wrapper">
+
+                    <!-- Article -->
+                    <article class="swiper-slide hover-effect-scale">
+                        <div class="ratio rounded overflow-hidden" style="--cz-aspect-ratio: calc(200 / 306 * 100%)">
+                            <div
+                                class="btn btn-icon btn-light position-absolute top-50 start-50 translate-middle z-2 rounded-circle pe-none">
+                                <i class="ci-play fs-base"></i>
+                            </div>
+                            <img src="/img/blog/grid/v1/video01.jpg" class="hover-effect-target" alt="Image">
+                        </div>
+                        <div class="pt-3 mt-1">
+                            <div class="text-body-tertiary fs-xs mb-2">06:12</div>
+                            <h3 class="h6 mb-0">
+                                <a class="hover-effect-underline stretched-link" href="#!">A comprehensive review of
+                                    the latest kitchen blenders on the market</a>
+                            </h3>
+                        </div>
+                    </article>
+
+                    <!-- Article -->
+                    <article class="swiper-slide hover-effect-scale">
+                        <div class="ratio rounded overflow-hidden" style="--cz-aspect-ratio: calc(200 / 306 * 100%)">
+                            <div
+                                class="btn btn-icon btn-light position-absolute top-50 start-50 translate-middle z-2 rounded-circle pe-none">
+                                <i class="ci-play fs-base"></i>
+                            </div>
+                            <img src="/img/blog/grid/v1/video04.jpg" class="hover-effect-target" alt="Image">
+                        </div>
+                        <div class="pt-3 mt-1">
+                            <div class="text-body-tertiary fs-xs mb-2">10:08</div>
+                            <h3 class="h6 mb-0">
+                                <a class="hover-effect-underline stretched-link" href="#!">Behind-the-scenes stories
+                                    from the world of iPhones</a>
+                            </h3>
+                        </div>
+                    </article>
+
+                    <!-- Article -->
+                    <article class="swiper-slide hover-effect-scale">
+                        <div class="ratio rounded overflow-hidden" style="--cz-aspect-ratio: calc(200 / 306 * 100%)">
+                            <div
+                                class="btn btn-icon btn-light position-absolute top-50 start-50 translate-middle z-2 rounded-circle pe-none">
+                                <i class="ci-play fs-base"></i>
+                            </div>
+                            <img src="/img/blog/grid/v1/video02.jpg" class="hover-effect-target" alt="Image">
+                        </div>
+                        <div class="pt-3 mt-1">
+                            <div class="text-body-tertiary fs-xs mb-2">04:56</div>
+                            <h3 class="h6 mb-0">
+                                <a class="hover-effect-underline stretched-link" href="#!">Exploring the latest best
+                                    smartwatch features for busy professionals</a>
+                            </h3>
+                        </div>
+                    </article>
+
+                    <!-- Article -->
+                    <article class="swiper-slide hover-effect-scale">
+                        <div class="ratio rounded overflow-hidden" style="--cz-aspect-ratio: calc(200 / 306 * 100%)">
+                            <div
+                                class="btn btn-icon btn-light position-absolute top-50 start-50 translate-middle z-2 rounded-circle pe-none">
+                                <i class="ci-play fs-base"></i>
+                            </div>
+                            <img src="/img/blog/grid/v1/video03.jpg" class="hover-effect-target" alt="Image">
+                        </div>
+                        <div class="pt-3 mt-1">
+                            <div class="text-body-tertiary fs-xs mb-2">03:27</div>
+                            <h3 class="h6 mb-0">
+                                <a class="hover-effect-underline stretched-link" href="#!">Taking to the skies with
+                                    the latest compact drone technology</a>
+                            </h3>
+                        </div>
+                    </article>
+                </div>
+
+                <!-- Pagination (Bullets) -->
+                <div class="swiper-pagination position-static mt-4"></div>
+            </div>
+        </section>
+    </main>
+
+    @include('layouts.partials/footer')
+    
+@endsection
+
+@section('scripts')
+@endsection
\ No newline at end of file
diff --git a/resources/views/blog/grid-v2.blade.php b/resources/views/blog/grid-v2.blade.php
new file mode 100644
index 0000000..f9f69fc
--- /dev/null
+++ b/resources/views/blog/grid-v2.blade.php
@@ -0,0 +1,640 @@
+@extends('layouts.landing', ['title' => 'Blog Grid View v.2'])
+
+@section('content')
+    <!-- Shopping cart offcanvas (Empty state) -->
+    <div class="offcanvas offcanvas-end pb-sm-2 px-sm-2" id="shoppingCart" tabindex="-1" aria-labelledby="shoppingCartLabel"
+        style="width: 500px">
+        <div class="offcanvas-header py-3 pt-lg-4">
+            <h4 class="offcanvas-title" id="shoppingCartLabel">Shopping cart</h4>
+            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+        </div>
+        <div class="offcanvas-body text-center">
+            <svg class="d-block mx-auto mb-4" xmlns="http://www.w3.org/2000/svg" width="60" viewBox="0 0 29.5 30">
+                <path class="text-body-tertiary"
+                    d="M17.8 4c.4 0 .8-.3.8-.8v-2c0-.4-.3-.8-.8-.8-.4 0-.8.3-.8.8v2c0 .4.3.8.8.8zm3.2.6c.4.2.8 0 1-.4l.4-.9c.2-.4 0-.8-.4-1s-.8 0-1 .4l-.4.9c-.2.4 0 .9.4 1zm-7.5-.4c.2.4.6.6 1 .4s.6-.6.4-1l-.4-.9c-.2-.4-.6-.6-1-.4s-.6.6-.4 1l.4.9z"
+                    fill="currentColor" />
+                <path class="text-body-emphasis"
+                    d="M10.7 24.5c-1.5 0-2.8 1.2-2.8 2.8S9.2 30 10.7 30s2.8-1.2 2.8-2.8-1.2-2.7-2.8-2.7zm0 4c-.7 0-1.2-.6-1.2-1.2s.6-1.2 1.2-1.2 1.2.6 1.2 1.2-.5 1.2-1.2 1.2zm11.1-4c-1.5 0-2.8 1.2-2.8 2.8a2.73 2.73 0 0 0 2.8 2.8 2.73 2.73 0 0 0 2.8-2.8c0-1.6-1.3-2.8-2.8-2.8zm0 4c-.7 0-1.2-.6-1.2-1.2s.6-1.2 1.2-1.2 1.2.6 1.2 1.2-.6 1.2-1.2 1.2zM8.7 18h16c.3 0 .6-.2.7-.5l4-10c.2-.5-.2-1-.7-1H9.3c-.4 0-.8.3-.8.8s.4.7.8.7h18.3l-3.4 8.5H9.3L5.5 1C5.4.7 5.1.5 4.8.5h-4c-.5 0-.8.3-.8.7s.3.8.8.8h3.4l3.7 14.6a3.24 3.24 0 0 0-2.3 3.1C5.5 21.5 7 23 8.7 23h16c.4 0 .8-.3.8-.8s-.3-.8-.8-.8h-16a1.79 1.79 0 0 1-1.8-1.8c0-1 .9-1.6 1.8-1.6z"
+                    fill="currentColor" />
+            </svg>
+            <h6 class="mb-2">Your shopping cart is currently empty!</h6>
+            <p class="fs-sm mb-4">Explore our wide range of products and add items to your cart to proceed with your
+                purchase.</p>
+            <a class="btn btn-dark rounded-pill" href="{{ route('second', ['shop', 'catalog-furniture']) }}">Continue shopping</a>
+        </div>
+    </div>
+
+    @include('layouts.partials/navbar2')
+
+    <main class="content-wrapper">
+
+        <!-- Featured post with video -->
+        <section class="container py-4 py-md-5 my-sm-3 my-md-0">
+            <div class="row row-cols-1 row-cols-md-2 g-0 overflow-hidden rounded-5">
+
+                <!-- Video -->
+                <div class="col position-relative">
+                    <div class="ratio ratio-4x3"></div>
+                    <img src="/img/blog/grid/v2/video01.jpg"
+                        class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover" alt="Image">
+                    <div class="position-absolute start-0 bottom-0 d-flex align-items-end w-100 h-100 z-2 p-4">
+                        <a class="btn btn-lg btn-light rounded-pill m-md-2"
+                            href="https://www.youtube.com/watch?v=X7lCwxswYnE" data-glightbox data-gallery="video1">
+                            <i class="ci-play fs-lg ms-n1 me-2"></i>
+                            Play
+                        </a>
+                    </div>
+                </div>
+
+                <!-- Title + text -->
+                <div class="col bg-dark py-5 px-4 px-xl-5" data-bs-theme="dark">
+                    <div class="py-md-4 py-lg-5 px-md-4 px-lg-5 my-xl-4 my-xxl-5">
+                        <div class="nav mb-3">
+                            <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Home decoration</a>
+                        </div>
+                        <h1>Decorate your home in easy steps</h1>
+                        <p class="text-body pb-sm-2 pb-lg-0 mb-4 mb-lg-5">Decorating your home can be a fun and creative
+                            process that transforms your living space.</p>
+                        <a class="btn btn-lg btn-outline-light rounded-pill" href="#!">Learn more</a>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Grid with filters -->
+        <section class="container pt-1 pt-md-2 pt-lg-3 pt-xl-4 pt-xxl-5">
+
+            <!-- Category filters -->
+            <nav class="overflow-x-auto mb-3" data-simplebar data-simplebar-auto-hide="false">
+                <ul class="nav nav-pills flex-nowrap text-nowrap py-3">
+                    <li class="nav-item">
+                        <a class="nav-link active" aria-current="page" href="#!">All</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#!">Home decoration</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#!">Furniture</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#!">Interior design</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#!">Lighting</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#!">Design trends</a>
+                    </li>
+                </ul>
+            </nav>
+
+            <!-- Posts grid -->
+            <div class="row row-cols-1 row-cols-sm-2 gy-5">
+
+                <!-- Article -->
+                <article class="col">
+                    <a class="ratio d-flex hover-effect-scale rounded-4 overflow-hidden" href="#!"
+                        style="--cz-aspect-ratio: calc(466 / 636 * 100%)">
+                        <img src="/img/blog/grid/v2/01.jpg" class="hover-effect-target" alt="Image">
+                    </a>
+                    <div class="pt-4">
+                        <div class="nav pb-2 mb-1">
+                            <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Interior design</a>
+                        </div>
+                        <h3 class="h5 mb-3">
+                            <a class="hover-effect-underline" href="#!">Creating a cozy and inviting home: Interior
+                                design ideas</a>
+                        </h3>
+                        <div class="nav align-items-center gap-2 fs-xs">
+                            <a class="nav-link text-body-secondary fs-xs fw-normal p-0" href="#!">Harry Mitchell</a>
+                            <hr class="vr my-1 mx-1">
+                            <span class="text-body-secondary">October 13, 2024</span>
+                        </div>
+                    </div>
+                </article>
+
+                <!-- Article -->
+                <article class="col">
+                    <a class="ratio d-flex hover-effect-scale rounded-4 overflow-hidden" href="#!"
+                        style="--cz-aspect-ratio: calc(466 / 636 * 100%)">
+                        <img src="/img/blog/grid/v2/02.jpg" class="hover-effect-target" alt="Image">
+                    </a>
+                    <div class="pt-4">
+                        <div class="nav pb-2 mb-1">
+                            <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Lighting</a>
+                        </div>
+                        <h3 class="h5 mb-3">
+                            <a class="hover-effect-underline" href="#!">Illuminate your space with these mesmerizing
+                                lighting ideas</a>
+                        </h3>
+                        <div class="nav align-items-center gap-2 fs-xs">
+                            <a class="nav-link text-body-secondary fs-xs fw-normal p-0" href="#!">Olivia Anderson</a>
+                            <hr class="vr my-1 mx-1">
+                            <span class="text-body-secondary">October 10, 2024</span>
+                        </div>
+                    </div>
+                </article>
+
+                <!-- Article -->
+                <article class="col">
+                    <a class="ratio d-flex hover-effect-scale rounded-4 overflow-hidden" href="#!"
+                        style="--cz-aspect-ratio: calc(466 / 636 * 100%)">
+                        <img src="/img/blog/grid/v2/03.jpg" class="hover-effect-target" alt="Image">
+                    </a>
+                    <div class="pt-4">
+                        <div class="nav pb-2 mb-1">
+                            <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Furniture</a>
+                        </div>
+                        <h3 class="h5 mb-3">
+                            <a class="hover-effect-underline" href="#!">Incorporating retro furniture in your
+                                interior
+                                design</a>
+                        </h3>
+                        <div class="nav align-items-center gap-2 fs-xs">
+                            <a class="nav-link text-body-secondary fs-xs fw-normal p-0" href="#!">Emily Davies</a>
+                            <hr class="vr my-1 mx-1">
+                            <span class="text-body-secondary">September 29, 2024</span>
+                        </div>
+                    </div>
+                </article>
+
+                <!-- Article -->
+                <article class="col">
+                    <a class="ratio d-flex hover-effect-scale rounded-4 overflow-hidden" href="#!"
+                        style="--cz-aspect-ratio: calc(466 / 636 * 100%)">
+                        <img src="/img/blog/grid/v2/04.jpg" class="hover-effect-target" alt="Image">
+                    </a>
+                    <div class="pt-4">
+                        <div class="nav pb-2 mb-1">
+                            <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Interior design</a>
+                        </div>
+                        <h3 class="h5 mb-3">
+                            <a class="hover-effect-underline" href="#!">Creating an eclectic interior design style
+                            </a>
+                        </h3>
+                        <div class="nav align-items-center gap-2 fs-xs">
+                            <a class="nav-link text-body-secondary fs-xs fw-normal p-0" href="#!">Mason Taylor</a>
+                            <hr class="vr my-1 mx-1">
+                            <span class="text-body-secondary">September 17, 2024</span>
+                        </div>
+                    </div>
+                </article>
+            </div>
+
+            <!-- Load more button -->
+            <div class="d-flex flex-column flex-sm-row justify-content-center pt-5">
+                <button type="button" class="btn btn-lg btn-outline-dark rounded-pill">Load more</button>
+            </div>
+        </section>
+
+
+        <!-- Featured in category posts (Carousel) -->
+        <section class="container py-5 mt-1 my-sm-2 my-md-3 my-lg-4 my-xl-5">
+            <div class="row py-2 py-xxl-3">
+                <div class="col-lg-3 pb-2 mb-4">
+                    <h2 class="text-center text-lg-start mb-lg-5">Retro elements in interior design</h2>
+
+                    <!-- External slider prev/next buttons -->
+                    <div class="d-flex justify-content-center justify-content-lg-start gap-2">
+                        <button type="button" id="prev"
+                            class="btn btn-lg btn-icon btn-outline-secondary rounded-circle animate-slide-start me-1"
+                            aria-label="Prev">
+                            <i class="ci-chevron-left fs-xl animate-target"></i>
+                        </button>
+                        <button type="button" id="next"
+                            class="btn btn-lg btn-icon btn-outline-secondary rounded-circle animate-slide-end"
+                            aria-label="Next">
+                            <i class="ci-chevron-right fs-xl animate-target"></i>
+                        </button>
+                    </div>
+                </div>
+                <div class="col-lg-9">
+
+                    <!-- Slider -->
+                    <div class="swiper"
+                        data-swiper='{
+              "slidesPerView": 1,
+              "spaceBetween": 24,
+              "navigation": {
+                "prevEl": "#prev",
+                "nextEl": "#next"
+              },
+              "scrollbar": {
+                "el": ".swiper-scrollbar"
+              },
+              "breakpoints": {
+                "500": {
+                  "slidesPerView": 2
+                },
+                "768": {
+                  "slidesPerView": 3
+                }
+              }
+            }'>
+                        <div class="swiper-wrapper pb-3 mb-2 mb-sm-3 mb-md-4">
+
+                            <!-- Article -->
+                            <article class="swiper-slide">
+                                <a class="ratio d-flex hover-effect-scale rounded-4 overflow-hidden" href="#!"
+                                    style="--cz-aspect-ratio: calc(260 / 306 * 100%)">
+                                    <img src="/img/blog/grid/v2/09.jpg" class="hover-effect-target" alt="Image">
+                                </a>
+                                <div class="pt-4">
+                                    <div class="nav pb-2 mb-1">
+                                        <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Home
+                                            decoration</a>
+                                    </div>
+                                    <h3 class="h6 mb-3">
+                                        <a class="hover-effect-underline" href="#!">Decorate your home for the
+                                            festive season in 3 easy steps</a>
+                                    </h3>
+                                    <div class="nav align-items-center gap-2 fs-xs">
+                                        <a class="nav-link text-body-secondary fs-xs fw-normal p-0" href="#!">Ava
+                                            Johnson</a>
+                                        <hr class="vr my-1 mx-1">
+                                        <span class="text-body-secondary">September 11, 2024</span>
+                                    </div>
+                                </div>
+                            </article>
+
+                            <!-- Article -->
+                            <article class="swiper-slide">
+                                <a class="ratio d-flex hover-effect-scale rounded-4 overflow-hidden" href="#!"
+                                    style="--cz-aspect-ratio: calc(260 / 306 * 100%)">
+                                    <img src="/img/blog/grid/v2/10.jpg" class="hover-effect-target" alt="Image">
+                                </a>
+                                <div class="pt-4">
+                                    <div class="nav pb-2 mb-1">
+                                        <a class="nav-link text-body fs-xs text-uppercase p-0"
+                                            href="#!">Furniture</a>
+                                    </div>
+                                    <h3 class="h6 mb-3">
+                                        <a class="hover-effect-underline" href="#!">Furnishing your space: a guide to
+                                            choosing the perfect furniture pieces</a>
+                                    </h3>
+                                    <div class="nav align-items-center gap-2 fs-xs">
+                                        <a class="nav-link text-body-secondary fs-xs fw-normal p-0" href="#!">Oliver
+                                            Harris</a>
+                                        <hr class="vr my-1 mx-1">
+                                        <span class="text-body-secondary">September 5, 2024</span>
+                                    </div>
+                                </div>
+                            </article>
+
+                            <!-- Article -->
+                            <article class="swiper-slide">
+                                <a class="ratio d-flex hover-effect-scale rounded-4 overflow-hidden" href="#!"
+                                    style="--cz-aspect-ratio: calc(260 / 306 * 100%)">
+                                    <img src="/img/blog/grid/v2/11.jpg" class="hover-effect-target" alt="Image">
+                                </a>
+                                <div class="pt-4">
+                                    <div class="nav pb-2 mb-1">
+                                        <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Interior
+                                            design</a>
+                                    </div>
+                                    <h3 class="h6 mb-3">
+                                        <a class="hover-effect-underline" href="#!">Transform your living space with
+                                            these chic interior design tips</a>
+                                    </h3>
+                                    <div class="nav align-items-center gap-2 fs-xs">
+                                        <a class="nav-link text-body-secondary fs-xs fw-normal p-0" href="#!">Ethan
+                                            Miller</a>
+                                        <hr class="vr my-1 mx-1">
+                                        <span class="text-body-secondary">August 23, 2024</span>
+                                    </div>
+                                </div>
+                            </article>
+
+                            <!-- Article -->
+                            <article class="swiper-slide">
+                                <a class="ratio d-flex hover-effect-scale rounded-4 overflow-hidden" href="#!"
+                                    style="--cz-aspect-ratio: calc(260 / 306 * 100%)">
+                                    <img src="/img/blog/grid/v2/12.jpg" class="hover-effect-target" alt="Image">
+                                </a>
+                                <div class="pt-4">
+                                    <div class="nav pb-2 mb-1">
+                                        <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Lighting</a>
+                                    </div>
+                                    <h3 class="h6 mb-3">
+                                        <a class="hover-effect-underline" href="#!">Brighten up your home with these
+                                            stunning lighting hacks</a>
+                                    </h3>
+                                    <div class="nav align-items-center gap-2 fs-xs">
+                                        <a class="nav-link text-body-secondary fs-xs fw-normal p-0" href="#!">Emily
+                                            Davies</a>
+                                        <hr class="vr my-1 mx-1">
+                                        <span class="text-body-secondary">August 18, 2024</span>
+                                    </div>
+                                </div>
+                            </article>
+
+                            <!-- Article -->
+                            <article class="swiper-slide">
+                                <a class="ratio d-flex hover-effect-scale rounded-4 overflow-hidden" href="#!"
+                                    style="--cz-aspect-ratio: calc(260 / 306 * 100%)">
+                                    <img src="/img/blog/grid/v2/13.jpg" class="hover-effect-target" alt="Image">
+                                </a>
+                                <div class="pt-4">
+                                    <div class="nav pb-2 mb-1">
+                                        <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Home
+                                            decoration</a>
+                                    </div>
+                                    <h3 class="h6 mb-3">
+                                        <a class="hover-effect-underline" href="#!">Elevate your space with trendy
+                                            home decoration ideas</a>
+                                    </h3>
+                                    <div class="nav align-items-center gap-2 fs-xs">
+                                        <a class="nav-link text-body-secondary fs-xs fw-normal p-0" href="#!">Olivia
+                                            Anderson</a>
+                                        <hr class="vr my-1 mx-1">
+                                        <span class="text-body-secondary">August 9, 2024</span>
+                                    </div>
+                                </div>
+                            </article>
+
+                            <!-- Article -->
+                            <article class="swiper-slide">
+                                <a class="ratio d-flex hover-effect-scale rounded-4 overflow-hidden" href="#!"
+                                    style="--cz-aspect-ratio: calc(260 / 306 * 100%)">
+                                    <img src="/img/blog/grid/v2/14.jpg" class="hover-effect-target" alt="Image">
+                                </a>
+                                <div class="pt-4">
+                                    <div class="nav pb-2 mb-1">
+                                        <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Design
+                                            trends</a>
+                                    </div>
+                                    <h3 class="h6 mb-3">
+                                        <a class="hover-effect-underline" href="#!">Discover the latest captivating
+                                            home design trends shaping spaces</a>
+                                    </h3>
+                                    <div class="nav align-items-center gap-2 fs-xs">
+                                        <a class="nav-link text-body-secondary fs-xs fw-normal p-0" href="#!">Harry
+                                            Mitchell</a>
+                                        <hr class="vr my-1 mx-1">
+                                        <span class="text-body-secondary">July 27, 2024</span>
+                                    </div>
+                                </div>
+                            </article>
+                        </div>
+
+                        <!-- Slider scrollbar -->
+                        <div class="swiper-scrollbar position-static" style="height: .125rem"></div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Featured post with video -->
+        <section class="bg-body-tertiary py-5">
+            <div class="container py-2 py-md-3 py-lg-4 py-xl-5">
+                <div class="row align-items-center">
+
+                    <!-- Video -->
+                    <div class="col-md-6 col-lg-7 col-xl-8 mb-4 mb-md-0">
+                        <div class="position-relative">
+                            <div class="ratio" style="--cz-aspect-ratio: calc(600 / 856 * 100%)">
+                                <img src="/img/blog/grid/v2/video02.jpg" class="rounded-5" alt="Image">
+                            </div>
+                            <div class="position-absolute start-0 bottom-0 d-flex align-items-end w-100 h-100 z-2 p-4">
+                                <a class="btn btn-lg btn-light rounded-pill m-md-2"
+                                    href="https://www.youtube.com/watch?v=Z1xX1Kt9NkU" data-glightbox
+                                    data-gallery="video2">
+                                    <i class="ci-play fs-lg ms-n1 me-2"></i>
+                                    Play
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Title + text -->
+                    <div class="col-md-6 col-lg-5 col-xl-4">
+                        <div class="ps-md-4 ps-lg-5">
+                            <div class="nav mb-3">
+                                <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Design trends</a>
+                            </div>
+                            <h1 class="mb-4 mb-lg-5">Interior design trends for French windows</h1>
+                            <a class="btn btn-lg btn-outline-dark rounded-pill" href="#!">Learn more</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Posts grid -->
+        <section class="container py-5 mb-1 my-sm-2 my-md-3 my-lg-4 my-xl-5">
+            <div class="row row-cols-1 row-cols-sm-2 gy-5 py-2 py-xxl-3">
+
+                <!-- Article -->
+                <article class="col">
+                    <a class="ratio d-flex hover-effect-scale rounded-4 overflow-hidden" href="#!"
+                        style="--cz-aspect-ratio: calc(466 / 636 * 100%)">
+                        <img src="/img/blog/grid/v2/05.jpg" class="hover-effect-target" alt="Image">
+                    </a>
+                    <div class="pt-4">
+                        <div class="nav pb-2 mb-1">
+                            <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Home decoration</a>
+                        </div>
+                        <h3 class="h5 mb-3">
+                            <a class="hover-effect-underline" href="#!">Unlock the secrets to stunning home
+                                decoration</a>
+                        </h3>
+                        <div class="nav align-items-center gap-2 fs-xs">
+                            <a class="nav-link text-body-secondary fs-xs fw-normal p-0" href="#!">Mason Taylor</a>
+                            <hr class="vr my-1 mx-1">
+                            <span class="text-body-secondary">July 16, 2024</span>
+                        </div>
+                    </div>
+                </article>
+
+                <!-- Article -->
+                <article class="col">
+                    <a class="ratio d-flex hover-effect-scale rounded-4 overflow-hidden" href="#!"
+                        style="--cz-aspect-ratio: calc(466 / 636 * 100%)">
+                        <img src="/img/blog/grid/v2/06.jpg" class="hover-effect-target" alt="Image">
+                    </a>
+                    <div class="pt-4">
+                        <div class="nav pb-2 mb-1">
+                            <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Furniture</a>
+                        </div>
+                        <h3 class="h5 mb-3">
+                            <a class="hover-effect-underline" href="#!">Maximizing small spaces: Furniture selection
+                                tips</a>
+                        </h3>
+                        <div class="nav align-items-center gap-2 fs-xs">
+                            <a class="nav-link text-body-secondary fs-xs fw-normal p-0" href="#!">Ava Johnson</a>
+                            <hr class="vr my-1 mx-1">
+                            <span class="text-body-secondary">July 8, 2024</span>
+                        </div>
+                    </div>
+                </article>
+
+                <!-- Article -->
+                <article class="col">
+                    <a class="ratio d-flex hover-effect-scale rounded-4 overflow-hidden" href="#!"
+                        style="--cz-aspect-ratio: calc(466 / 636 * 100%)">
+                        <img src="/img/blog/grid/v2/07.jpg" class="hover-effect-target" alt="Image">
+                    </a>
+                    <div class="pt-4">
+                        <div class="nav pb-2 mb-1">
+                            <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Interior design</a>
+                        </div>
+                        <h3 class="h5 mb-3">
+                            <a class="hover-effect-underline" href="#!">Feng shui your home: Interior design tips for
+                                positive energy</a>
+                        </h3>
+                        <div class="nav align-items-center gap-2 fs-xs">
+                            <a class="nav-link text-body-secondary fs-xs fw-normal p-0" href="#!">Emily Davies</a>
+                            <hr class="vr my-1 mx-1">
+                            <span class="text-body-secondary">June 27, 2024</span>
+                        </div>
+                    </div>
+                </article>
+
+                <!-- Article -->
+                <article class="col">
+                    <a class="ratio d-flex hover-effect-scale rounded-4 overflow-hidden" href="#!"
+                        style="--cz-aspect-ratio: calc(466 / 636 * 100%)">
+                        <img src="/img/blog/grid/v2/08.jpg" class="hover-effect-target" alt="Image">
+                    </a>
+                    <div class="pt-4">
+                        <div class="nav pb-2 mb-1">
+                            <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Design trends</a>
+                        </div>
+                        <h3 class="h5 mb-3">
+                            <a class="hover-effect-underline" href="#!">Minimalism made easy: Interior design for a
+                                simplistic lifestyle</a>
+                        </h3>
+                        <div class="nav align-items-center gap-2 fs-xs">
+                            <a class="nav-link text-body-secondary fs-xs fw-normal p-0" href="#!">Harry Mitchell</a>
+                            <hr class="vr my-1 mx-1">
+                            <span class="text-body-secondary">June 19, 2024</span>
+                        </div>
+                    </div>
+                </article>
+            </div>
+        </section>
+    </main>
+
+    <!-- Page footer -->
+    <footer class="footer bg-dark pb-4 py-lg-5" data-bs-theme="dark">
+        <div class="container pt-5 pt-lg-4 mt-sm-2 mt-md-3">
+            <div class="row pb-5">
+
+                <!-- Subscription + Social account links -->
+                <div class="col-md col-xl-8 order-md-2">
+                    <div class="text-center px-sm-4 mx-auto" style="max-width: 568px">
+                        <h3 class="pb-1 mb-2">Stay in touch with us</h3>
+                        <p class="fs-sm text-body pb-2 pb-sm-3">Receive the latest updates about our products &amp;
+                            promotions</p>
+                        <form class="needs-validation position-relative" novalidate>
+                            <input type="email" class="form-control form-control-lg rounded-pill text-start"
+                                placeholder="You email" aria-label="Your email address" required>
+                            <div class="invalid-tooltip bg-transparent p-0">Please enter you email address!</div>
+                            <button type="submit"
+                                class="btn btn-icon fs-xl btn-dark rounded-circle position-absolute top-0 end-0 mt-1 me-1"
+                                aria-label="Submit your email address" data-bs-theme="light">
+                                <i class="ci-arrow-up-right"></i>
+                            </button>
+                        </form>
+                        <div class="d-flex justify-content-center gap-2 pt-4 pt-md-5 mt-1 mt-md-0">
+                            <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
+                                data-bs-toggle="tooltip"
+                                data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-white p-0"></div></div>'
+                                title="YouTube" aria-label="Follow us on YouTube">
+                                <i class="ci-youtube"></i>
+                            </a>
+                            <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
+                                data-bs-toggle="tooltip"
+                                data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-white p-0"></div></div>'
+                                title="Facebook" aria-label="Follow us on Facebook">
+                                <i class="ci-facebook"></i>
+                            </a>
+                            <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
+                                data-bs-toggle="tooltip"
+                                data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-white p-0"></div></div>'
+                                title="Instagram" aria-label="Follow us on Instagram">
+                                <i class="ci-instagram"></i>
+                            </a>
+                            <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
+                                data-bs-toggle="tooltip"
+                                data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-white p-0"></div></div>'
+                                title="Telegram" aria-label="Follow us on Telegram">
+                                <i class="ci-telegram"></i>
+                            </a>
+                            <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
+                                data-bs-toggle="tooltip"
+                                data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-white p-0"></div></div>'
+                                title="Pinterest" aria-label="Follow us on Pinterest">
+                                <i class="ci-pinterest"></i>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Category links -->
+                <div class="col-md-auto col-xl-2 text-center order-md-1 pt-4 pt-md-0">
+                    <ul class="nav d-inline-flex flex-md-column justify-content-center align-items-center gap-md-2">
+                        <li class="animate-underline my-1 mx-2 m-md-0">
+                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Bedroom</a>
+                        </li>
+                        <li class="animate-underline my-1 mx-2 m-md-0">
+                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Living room</a>
+                        </li>
+                        <li class="animate-underline my-1 mx-2 m-md-0">
+                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Bathroom</a>
+                        </li>
+                        <li class="animate-underline my-1 mx-2 m-md-0">
+                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Decoration</a>
+                        </li>
+                        <li class="animate-underline my-1 mx-2 m-md-0">
+                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Kitchen</a>
+                        </li>
+                        <li class="animate-underline my-1 mx-2 m-md-0">
+                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Sale</a>
+                        </li>
+                    </ul>
+                </div>
+
+                <!-- Customer links -->
+                <div class="col-md-auto col-xl-2 text-center order-md-3 pt-3 pt-md-0">
+                    <ul class="nav d-inline-flex flex-md-column justify-content-center align-items-center gap-md-2">
+                        <li class="animate-underline my-1 mx-2 m-md-0">
+                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Shipping
+                                options</a>
+                        </li>
+                        <li class="animate-underline my-1 mx-2 m-md-0">
+                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Tracking a
+                                package</a>
+                        </li>
+                        <li class="animate-underline my-1 mx-2 m-md-0">
+                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Help center</a>
+                        </li>
+                        <li class="animate-underline my-1 mx-2 m-md-0">
+                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Contact us</a>
+                        </li>
+                        <li class="animate-underline my-1 mx-2 m-md-0">
+                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Product
+                                returns</a>
+                        </li>
+                        <li class="animate-underline my-1 mx-2 m-md-0">
+                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Locations</a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+
+            <!-- Copyright -->
+            <p class="fs-xs text-body text-center pt-lg-4 mt-n2 mt-md-0 mb-0">
+                &copy; All rights reserved. Made by <span class="animate-underline"><a
+                        class="animate-target text-white text-decoration-none" href="https://coderthemes.com/"
+                        target="_blank" rel="noreferrer">Coderthemes</a></span>
+            </p>
+        </div>
+    </footer>
+@endsection
+
+@section('scripts')    
+@endsection
diff --git a/resources/views/blog/list.blade.php b/resources/views/blog/list.blade.php
new file mode 100644
index 0000000..239da2e
--- /dev/null
+++ b/resources/views/blog/list.blade.php
@@ -0,0 +1,635 @@
+@extends('layouts.landing', ['title' => 'Blog List View'])
+
+@section('content')
+    @include('layouts.partials/offcanvas')
+
+    @include('layouts.partials/navbar', ['wishlist' => true])
+
+    <main class="content-wrapper">
+
+        <!-- Breadcrumb -->
+        <nav class="container pt-3 my-3 my-md-4" aria-label="breadcrumb">
+            <ol class="breadcrumb">
+                <li class="breadcrumb-item"><a href="{{ route('second', ['home', 'electronics']) }}">Home</a></li>
+                <li class="breadcrumb-item active" aria-current="page">Blog</li>
+            </ol>
+        </nav>
+
+
+        <!-- Page title -->
+        <h1 class="h3 container mb-4">Our blog</h1>
+
+
+        <!-- Featured posts -->
+        <section class="container pb-5">
+            <div class="row gy-5 pb-5">
+
+                <!-- Article -->
+                <article class="col-md-6">
+                    <a class="ratio d-flex hover-effect-scale rounded-4 overflow-hidden" href="{{ route('second', ['blog', 'single-v1']) }}"
+                        style="--cz-aspect-ratio: calc(500 / 636 * 100%)">
+                        <img src="/img/blog/list/01.jpg" class="hover-effect-target" alt="Image">
+                    </a>
+                    <div class="pt-4">
+                        <div class="nav align-items-center gap-2 pb-2 mt-n1 mb-1">
+                            <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Gadget reviews</a>
+                            <hr class="vr my-1 mx-1">
+                            <span class="text-body-tertiary fs-xs">October 13, 2024</span>
+                        </div>
+                        <h3 class="h5 mb-0">
+                            <a class="hover-effect-underline" href="{{ route('second', ['blog', 'single-v1']) }}">Discover how to maximize your
+                                productivity with these essential tech gadgets designed for the modern home office</a>
+                        </h3>
+                    </div>
+                </article>
+                <div class="col-md-6">
+                    <div class="row row-cols-1 row-cols-sm-2 gy-5">
+
+                        <!-- Article -->
+                        <article class="col">
+                            <a class="ratio ratio-1x1 d-flex hover-effect-scale rounded overflow-hidden"
+                                href="{{ route('second', ['blog', 'single-v1']) }}">
+                                <img src="/img/blog/list/02.jpg" class="hover-effect-target" alt="Image">
+                            </a>
+                            <div class="pt-4">
+                                <div class="nav align-items-center gap-2 pb-2 mt-n1 mb-1">
+                                    <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Tech news</a>
+                                    <hr class="vr my-1 mx-1">
+                                    <span class="text-body-tertiary fs-xs">October 10, 2024</span>
+                                </div>
+                                <h3 class="h5 mb-0">
+                                    <a class="hover-effect-underline" href="{{ route('second', ['blog', 'single-v1']) }}">News and views on the
+                                        latest electronic products</a>
+                                </h3>
+                            </div>
+                        </article>
+
+                        <!-- Article -->
+                        <article class="col">
+                            <a class="ratio ratio-1x1 d-flex hover-effect-scale rounded overflow-hidden"
+                                href="{{ route('second', ['blog', 'single-v1']) }}">
+                                <img src="/img/blog/list/03.jpg" class="hover-effect-target" alt="Image">
+                            </a>
+                            <div class="pt-4">
+                                <div class="nav align-items-center gap-2 pb-2 mt-n1 mb-1">
+                                    <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">IoT</a>
+                                    <hr class="vr my-1 mx-1">
+                                    <span class="text-body-tertiary fs-xs">September 17, 2024</span>
+                                </div>
+                                <h3 class="h5 mb-0">
+                                    <a class="hover-effect-underline" href="{{ route('second', ['blog', 'single-v1']) }}">Transform your home into a
+                                        smart hub with the latest IoT</a>
+                                </h3>
+                            </div>
+                        </article>
+                    </div>
+                </div>
+            </div>
+            <hr class="my-0 my-md-2 my-lg-4">
+        </section>
+
+
+        <!-- Posts list + Sidebar -->
+        <section class="container pb-5 mb-2 mb-md-3 mb-lg-4 mb-xl-5">
+            <div class="row">
+
+                <!-- Posts list -->
+                <div class="col-lg-8">
+                    <div class="d-flex flex-column gap-4 mt-n3">
+
+                        <!-- Article -->
+                        <article class="row align-items-start align-items-md-center gx-0 gy-4 pt-3">
+                            <div class="col-sm-5 pe-sm-4">
+                                <a class="ratio d-flex hover-effect-scale rounded overflow-hidden flex-md-shrink-0"
+                                    href="{{ route('second', ['blog', 'single-v1']) }}" style="--cz-aspect-ratio: calc(226 / 306 * 100%)">
+                                    <img src="/img/blog/list/04.jpg" class="hover-effect-target" alt="Image">
+                                </a>
+                            </div>
+                            <div class="col-sm-7">
+                                <div class="nav align-items-center gap-2 pb-2 mt-n1 mb-1">
+                                    <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Tech tips</a>
+                                    <hr class="vr my-1 mx-1">
+                                    <span class="text-body-tertiary fs-xs">September 11, 2024</span>
+                                </div>
+                                <h3 class="h5 mb-2 mb-md-3">
+                                    <a class="hover-effect-underline" href="{{ route('second', ['blog', 'single-v1']) }}">Optimizing your workspace:
+                                        The guide to an efficient and minimalist desk setup</a>
+                                </h3>
+                                <p class="mb-0">Creating an efficient and minimalist workspace is not just about
+                                    decluttering, it's about cultivating an environment that...</p>
+                            </div>
+                        </article>
+
+                        <!-- Article -->
+                        <article class="row align-items-start align-items-md-center gx-0 gy-4 pt-3">
+                            <div class="col-sm-5 pe-sm-4">
+                                <a class="ratio d-flex hover-effect-scale rounded overflow-hidden flex-md-shrink-0"
+                                    href="{{ route('second', ['blog', 'single-v1']) }}" style="--cz-aspect-ratio: calc(226 / 306 * 100%)">
+                                    <img src="/img/blog/list/05.jpg" class="hover-effect-target" alt="Image">
+                                </a>
+                            </div>
+                            <div class="col-sm-7">
+                                <div class="nav align-items-center gap-2 pb-2 mt-n1 mb-1">
+                                    <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Industry
+                                        trends</a>
+                                    <hr class="vr my-1 mx-1">
+                                    <span class="text-body-tertiary fs-xs">September 5, 2024</span>
+                                </div>
+                                <h3 class="h5 mb-2 mb-md-3">
+                                    <a class="hover-effect-underline" href="{{ route('second', ['blog', 'single-v1']) }}">Exploring the skies: The
+                                        rise of drone photography and videography</a>
+                                </h3>
+                                <p class="mb-0">In the dazzling realm of modern photography and videography, drones have
+                                    soared beyond mere gadgets to become...</p>
+                            </div>
+                        </article>
+
+                        <!-- Article -->
+                        <article class="row align-items-start align-items-md-center gx-0 gy-4 pt-3">
+                            <div class="col-sm-5 pe-sm-4">
+                                <a class="ratio d-flex hover-effect-scale rounded overflow-hidden flex-md-shrink-0"
+                                    href="{{ route('second', ['blog', 'single-v1']) }}" style="--cz-aspect-ratio: calc(226 / 306 * 100%)">
+                                    <img src="/img/blog/list/06.jpg" class="hover-effect-target" alt="Image">
+                                </a>
+                            </div>
+                            <div class="col-sm-7">
+                                <div class="nav align-items-center gap-2 pb-2 mt-n1 mb-1">
+                                    <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">IoT</a>
+                                    <hr class="vr my-1 mx-1">
+                                    <span class="text-body-tertiary fs-xs">August 23, 2024</span>
+                                </div>
+                                <h3 class="h5 mb-2 mb-md-3">
+                                    <a class="hover-effect-underline" href="{{ route('second', ['blog', 'single-v1']) }}">Connecting the dots: How
+                                        IoT technology is transforming everyday life</a>
+                                </h3>
+                                <p class="mb-0">In the ever-evolving landscape of technology, the Internet of Things
+                                    (IoT) stands out as a transformative force reshaping...</p>
+                            </div>
+                        </article>
+
+                        <!-- Article -->
+                        <article class="row align-items-start align-items-md-center gx-0 gy-4 pt-3">
+                            <div class="col-sm-5 pe-sm-4">
+                                <a class="ratio d-flex hover-effect-scale rounded overflow-hidden flex-md-shrink-0"
+                                    href="{{ route('second', ['blog', 'single-v1']) }}" style="--cz-aspect-ratio: calc(226 / 306 * 100%)">
+                                    <img src="/img/blog/list/07.jpg" class="hover-effect-target" alt="Image">
+                                </a>
+                            </div>
+                            <div class="col-sm-7">
+                                <div class="nav align-items-center gap-2 pb-2 mt-n1 mb-1">
+                                    <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Buying
+                                        guides</a>
+                                    <hr class="vr my-1 mx-1">
+                                    <span class="text-body-tertiary fs-xs">August 18, 2024</span>
+                                </div>
+                                <h3 class="h5 mb-2 mb-md-3">
+                                    <a class="hover-effect-underline" href="{{ route('second', ['blog', 'single-v1']) }}">How to find the best
+                                        deals and make secure transactions online</a>
+                                </h3>
+                                <p class="mb-0">This blog post will guide you through the dual objectives of snagging
+                                    great bargains and protecting your financial...</p>
+                            </div>
+                        </article>
+
+                        <!-- Article -->
+                        <article class="row align-items-start align-items-md-center gx-0 gy-4 pt-3">
+                            <div class="col-sm-5 pe-sm-4">
+                                <a class="ratio d-flex hover-effect-scale rounded overflow-hidden flex-md-shrink-0"
+                                    href="{{ route('second', ['blog', 'single-v1']) }}" style="--cz-aspect-ratio: calc(226 / 306 * 100%)">
+                                    <img src="/img/blog/list/08.jpg" class="hover-effect-target" alt="Image">
+                                </a>
+                            </div>
+                            <div class="col-sm-7">
+                                <div class="nav align-items-center gap-2 pb-2 mt-n1 mb-1">
+                                    <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Gadget
+                                        reviews</a>
+                                    <hr class="vr my-1 mx-1">
+                                    <span class="text-body-tertiary fs-xs">August 9, 2024</span>
+                                </div>
+                                <h3 class="h5 mb-2 mb-md-3">
+                                    <a class="hover-effect-underline" href="{{ route('second', ['blog', 'single-v1']) }}">Top 10 electric kitchen
+                                        appliances for modern homes</a>
+                                </h3>
+                                <p class="mb-0">Creating an efficient and stylish kitchen is a priority for many
+                                    homeowners. With the rise of technology, the modern home...</p>
+                            </div>
+                        </article>
+                    </div>
+
+
+                    <!-- Contributors' posts slider -->
+                    <div class="py-5 my-1 my-sm-2 my-md-3 my-lg-4 my-xl-5">
+                        <div class="d-flex align-items-center justify-content-between mb-4">
+                            <h2 class="h3 mb-0">Charitable contributions</h2>
+                            <div class="d-flex gap-2">
+                                <button type="button" id="prev-post"
+                                    class="btn btn-prev btn-icon btn-outline-secondary rounded-circle animate-slide-start me-1"
+                                    aria-label="Prev">
+                                    <i class="ci-chevron-left fs-lg animate-target"></i>
+                                </button>
+                                <button type="button" id="next-post"
+                                    class="btn btn-next btn-icon btn-outline-secondary rounded-circle animate-slide-end"
+                                    aria-label="Next">
+                                    <i class="ci-chevron-right fs-lg animate-target"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <div class="row row-cols-1 row-cols-md-2 g-0 overflow-hidden rounded-5">
+
+                            <!-- Binded images (controlled slider) -->
+                            <div class="col order-md-2 user-select-none">
+                                <div class="swiper h-100" id="images"
+                                    data-swiper='{
+                    "allowTouchMove": false,
+                    "loop": true,
+                    "effect": "fade"
+                  }'>
+                                    <div class="swiper-wrapper">
+                                        <div class="swiper-slide">
+                                            <div class="ratio ratio-16x9"></div>
+                                            <img src="/img/blog/grid/v1/slider01.jpg"
+                                                class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover"
+                                                alt="Image">
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="ratio ratio-16x9"></div>
+                                            <img src="/img/blog/grid/v1/slider02.jpg"
+                                                class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover"
+                                                alt="Image">
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Text slider -->
+                            <div class="col bg-dark order-md-1 py-5 px-4 px-sm-5" data-bs-theme="dark">
+                                <div class="swiper py-sm-2 py-md-3 my-xl-2 my-xxl-3"
+                                    data-swiper='{
+                    "spaceBetween": 40,
+                    "loop": true,
+                    "speed": 400,
+                    "controlSlider": "#images",
+                    "navigation": {
+                      "prevEl": "#prev-post",
+                      "nextEl": "#next-post"
+                    }
+                  }'>
+                                    <div class="swiper-wrapper">
+                                        <div class="swiper-slide">
+                                            <h3 class="h5">The role of philanthropy in building a better world</h3>
+                                            <p class="text-body fs-sm pb-4">Charitable contributions are a vital aspect of
+                                                building a better world. These contributions come in various forms,
+                                                including monetary donations, volunteering time, providing expertise...</p>
+                                            <a class="btn btn-outline-light" href="{{ route('second', ['blog', 'single-v1']) }}">Read more</a>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <h3 class="h5">Supporting communities through charitable giving</h3>
+                                            <p class="text-body fs-sm pb-4">Join us on a journey of generosity as we
+                                                spotlight the transformative power of charitable contributions. In this
+                                                section, we celebrate the stories of impact made possible by your...</p>
+                                            <a class="btn btn-outline-light" href="{{ route('second', ['blog', 'single-v1']) }}">Read more</a>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+
+                    <!-- Posts list -->
+                    <div class="d-flex flex-column gap-4 mt-n3 pb-2 pb-sm-0">
+
+                        <!-- Article -->
+                        <article class="row align-items-start align-items-md-center gx-0 gy-4 pt-3">
+                            <div class="col-sm-5 pe-sm-4">
+                                <a class="ratio d-flex hover-effect-scale rounded overflow-hidden flex-md-shrink-0"
+                                    href="{{ route('second', ['blog', 'single-v1']) }}" style="--cz-aspect-ratio: calc(226 / 306 * 100%)">
+                                    <img src="/img/blog/list/09.jpg" class="hover-effect-target" alt="Image">
+                                </a>
+                            </div>
+                            <div class="col-sm-7">
+                                <div class="nav align-items-center gap-2 pb-2 mt-n1 mb-1">
+                                    <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Gaming</a>
+                                    <hr class="vr my-1 mx-1">
+                                    <span class="text-body-tertiary fs-xs">July 27, 2024</span>
+                                </div>
+                                <h3 class="h5 mb-2 mb-md-3">
+                                    <a class="hover-effect-underline" href="{{ route('second', ['blog', 'single-v1']) }}">Immersive worlds: A dive
+                                        into the latest VR gear and experiences</a>
+                                </h3>
+                                <p class="mb-0">Immersive worlds have always captured the imagination, but now, with the
+                                    advent of advanced VR gear, they are becoming...</p>
+                            </div>
+                        </article>
+
+                        <!-- Article -->
+                        <article class="row align-items-start align-items-md-center gx-0 gy-4 pt-3">
+                            <div class="col-sm-5 pe-sm-4">
+                                <a class="ratio d-flex hover-effect-scale rounded overflow-hidden flex-md-shrink-0"
+                                    href="{{ route('second', ['blog', 'single-v1']) }}" style="--cz-aspect-ratio: calc(226 / 306 * 100%)">
+                                    <img src="/img/blog/list/10.jpg" class="hover-effect-target" alt="Image">
+                                </a>
+                            </div>
+                            <div class="col-sm-7">
+                                <div class="nav align-items-center gap-2 pb-2 mt-n1 mb-1">
+                                    <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Tech news</a>
+                                    <hr class="vr my-1 mx-1">
+                                    <span class="text-body-tertiary fs-xs">July 16, 2024</span>
+                                </div>
+                                <h3 class="h5 mb-2 mb-md-3">
+                                    <a class="hover-effect-underline" href="{{ route('second', ['blog', 'single-v1']) }}">Tap, pay, and go:
+                                        Simplifying transactions with mobile payment solutions</a>
+                                </h3>
+                                <p class="mb-0">In today's fast-paced world, the way we handle transactions is evolving
+                                    rapidly, and mobile payment solutions are at the...</p>
+                            </div>
+                        </article>
+
+                        <!-- Article -->
+                        <article class="row align-items-start align-items-md-center gx-0 gy-4 pt-3">
+                            <div class="col-sm-5 pe-sm-4">
+                                <a class="ratio d-flex hover-effect-scale rounded overflow-hidden flex-md-shrink-0"
+                                    href="{{ route('second', ['blog', 'single-v1']) }}" style="--cz-aspect-ratio: calc(226 / 306 * 100%)">
+                                    <img src="/img/blog/list/11.jpg" class="hover-effect-target" alt="Image">
+                                </a>
+                            </div>
+                            <div class="col-sm-7">
+                                <div class="nav align-items-center gap-2 pb-2 mt-n1 mb-1">
+                                    <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Product
+                                        reviews</a>
+                                    <hr class="vr my-1 mx-1">
+                                    <span class="text-body-tertiary fs-xs">June 27, 2024</span>
+                                </div>
+                                <h3 class="h5 mb-2 mb-md-3">
+                                    <a class="hover-effect-underline" href="{{ route('second', ['blog', 'single-v1']) }}">Future engineers start
+                                        young: A review of the latest robotic kit for kids</a>
+                                </h3>
+                                <p class="mb-0">The world of technology constantly evolves, and fostering a love for
+                                    innovation and engineering in young minds has never been...</p>
+                            </div>
+                        </article>
+
+                        <!-- Article -->
+                        <article class="row align-items-start align-items-md-center gx-0 gy-4 pt-3">
+                            <div class="col-sm-5 pe-sm-4">
+                                <a class="ratio d-flex hover-effect-scale rounded overflow-hidden flex-md-shrink-0"
+                                    href="{{ route('second', ['blog', 'single-v1']) }}" style="--cz-aspect-ratio: calc(226 / 306 * 100%)">
+                                    <img src="/img/blog/list/12.jpg" class="hover-effect-target" alt="Image">
+                                </a>
+                            </div>
+                            <div class="col-sm-7">
+                                <div class="nav align-items-center gap-2 pb-2 mt-n1 mb-1">
+                                    <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Buying
+                                        guides</a>
+                                    <hr class="vr my-1 mx-1">
+                                    <span class="text-body-tertiary fs-xs">June 19, 2024</span>
+                                </div>
+                                <h3 class="h5 mb-2 mb-md-3">
+                                    <a class="hover-effect-underline" href="{{ route('second', ['blog', 'single-v1']) }}">A detailed guide to the
+                                        latest smartphones on the market</a>
+                                </h3>
+                                <p class="mb-0">Keeping pace with the ever-evolving world of smartphones is a challenge
+                                    for consumers and tech enthusiasts alike...</p>
+                            </div>
+                        </article>
+                    </div>
+                    <hr class="mt-4 mt-sm-5">
+
+                    <!-- Pagination -->
+                    <nav aria-label="Blog pages">
+                        <ul class="pagination pagination-lg">
+                            <li class="page-item active" aria-current="page">
+                                <span class="page-link">
+                                    1
+                                    <span class="visually-hidden">(current)</span>
+                                </span>
+                            </li>
+                            <li class="page-item">
+                                <a class="page-link" href="#">2</a>
+                            </li>
+                            <li class="page-item">
+                                <a class="page-link" href="#">3</a>
+                            </li>
+                            <li class="page-item">
+                                <a class="page-link" href="#">4</a>
+                            </li>
+                            <li class="page-item">
+                                <a class="page-link" href="#">5</a>
+                            </li>
+                        </ul>
+                    </nav>
+                </div>
+
+
+                <!-- Sticky sidebar that turns into offcanvas on screens < 992px wide (lg breakpoint) -->
+                <aside class="col-lg-4 col-xl-3 offset-xl-1" style="margin-top: -115px">
+                    <div class="offcanvas-lg offcanvas-end sticky-lg-top ps-lg-4 ps-xl-0" id="blogSidebar">
+                        <div class="d-none d-lg-block" style="height: 115px"></div>
+                        <div class="offcanvas-header py-3">
+                            <h5 class="offcanvas-title">Sidebar</h5>
+                            <button type="button" class="btn-close" data-bs-dismiss="offcanvas"
+                                data-bs-target="#blogSidebar" aria-label="Close"></button>
+                        </div>
+                        <div class="offcanvas-body d-block pt-2 py-lg-0">
+                            <h4 class="h6 mb-4">Blog categories</h4>
+                            <div class="d-flex flex-wrap gap-3">
+                                <a class="btn btn-outline-secondary px-3" href="#!">Gadget reviews</a>
+                                <a class="btn btn-outline-secondary px-3" href="#!">Tech news</a>
+                                <a class="btn btn-outline-secondary px-3" href="#!">Industry trends</a>
+                                <a class="btn btn-outline-secondary px-3" href="#!">Buying guides</a>
+                                <a class="btn btn-outline-secondary px-3" href="#!">Tech tips</a>
+                                <a class="btn btn-outline-secondary px-3" href="#!">Gaming</a>
+                                <a class="btn btn-outline-secondary px-3" href="#!">IoT</a>
+                            </div>
+                            <h4 class="h6 pt-5 mb-0">Trending posts</h4>
+                            <article
+                                class="hover-effect-scale position-relative d-flex align-items-center border-bottom py-4">
+                                <div class="w-100 pe-3">
+                                    <h3 class="h6 lh-base fs-sm mb-0">
+                                        <a class="hover-effect-underline stretched-link" href="{{ route('second', ['blog', 'single-v1']) }}">The
+                                            role of philanthropy in building a better world</a>
+                                    </h3>
+                                </div>
+                                <div class="ratio w-100" style="max-width: 86px; --cz-aspect-ratio: calc(64 / 86 * 100%)">
+                                    <img src="/img/blog/grid/v1/th01.jpg" class="rounded-2" alt="Image">
+                                </div>
+                            </article>
+                            <article
+                                class="hover-effect-scale position-relative d-flex align-items-center border-bottom py-4">
+                                <div class="w-100 pe-3">
+                                    <h3 class="h6 lh-base fs-sm mb-0">
+                                        <a class="hover-effect-underline stretched-link" href="{{ route('second', ['blog', 'single-v1']) }}">The
+                                            biggest prospects for the smart home electronics industry</a>
+                                    </h3>
+                                </div>
+                                <div class="ratio w-100" style="max-width: 86px; --cz-aspect-ratio: calc(64 / 86 * 100%)">
+                                    <img src="/img/blog/grid/v1/th02.jpg" class="rounded-2" alt="Image">
+                                </div>
+                            </article>
+                            <article class="hover-effect-scale position-relative d-flex align-items-center py-4">
+                                <div class="w-100 pe-3">
+                                    <h3 class="h6 lh-base fs-sm mb-0">
+                                        <a class="hover-effect-underline stretched-link"
+                                            href="{{ route('second', ['blog', 'single-v1']) }}">Behind-the-scenes stories from the world of
+                                            iPhones</a>
+                                    </h3>
+                                </div>
+                                <div class="ratio w-100" style="max-width: 86px; --cz-aspect-ratio: calc(64 / 86 * 100%)">
+                                    <img src="/img/blog/grid/v1/th03.jpg" class="rounded-2" alt="Image">
+                                </div>
+                            </article>
+                            <h4 class="h6 pt-4">Follow us</h4>
+                            <div class="d-flex gap-2 pb-2">
+                                <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
+                                    data-bs-toggle="tooltip"
+                                    data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-body p-0"></div></div>'
+                                    title="Instagram" aria-label="Follow us on Instagram">
+                                    <i class="ci-instagram"></i>
+                                </a>
+                                <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
+                                    data-bs-toggle="tooltip"
+                                    data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-body p-0"></div></div>'
+                                    title="X (Twitter)" aria-label="Follow us on X">
+                                    <i class="ci-x"></i>
+                                </a>
+                                <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
+                                    data-bs-toggle="tooltip"
+                                    data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-body p-0"></div></div>'
+                                    title="Facebook" aria-label="Follow us on Facebook">
+                                    <i class="ci-facebook"></i>
+                                </a>
+                                <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
+                                    data-bs-toggle="tooltip"
+                                    data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-body p-0"></div></div>'
+                                    title="Telegram" aria-label="Follow us on Telegram">
+                                    <i class="ci-telegram"></i>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </aside>
+            </div>
+        </section>
+
+
+        <!-- Video reviews -->
+        <section class="container pb-5 mb-1 mb-sm-2 mb-md-3 mb-lg-4 mb-xl-5">
+
+            <!-- Heading -->
+            <div class="d-flex align-items-center justify-content-between pb-2 pb-sm-3 mb-3">
+                <h2 class="h3 mb-0">Video reviews</h2>
+                <div class="nav ms-3">
+                    <a class="nav-link animate-underline px-0 py-2" href="#!">
+                        <span class="animate-target">View all</span>
+                        <i class="ci-chevron-right fs-base ms-1"></i>
+                    </a>
+                </div>
+            </div>
+
+            <!-- Video cards that turn into slider on screens < 992px wide (lg breakpoint) -->
+            <div class="swiper"
+                data-swiper='{
+          "slidesPerView": 1,
+          "spaceBetween": 24,
+          "pagination": {
+            "el": ".swiper-pagination",
+            "clickable": true
+          },
+          "breakpoints": {
+            "500": {
+              "slidesPerView": 2
+            },
+            "768": {
+              "slidesPerView": 3
+            },
+            "992": {
+              "slidesPerView": 4
+            }
+          }
+        }'>
+                <div class="swiper-wrapper">
+
+                    <!-- Article -->
+                    <article class="swiper-slide hover-effect-scale">
+                        <div class="ratio rounded overflow-hidden" style="--cz-aspect-ratio: calc(200 / 306 * 100%)">
+                            <div
+                                class="btn btn-icon btn-light position-absolute top-50 start-50 translate-middle z-2 rounded-circle pe-none">
+                                <i class="ci-play fs-base"></i>
+                            </div>
+                            <img src="/img/blog/grid/v1/video01.jpg" class="hover-effect-target" alt="Image">
+                        </div>
+                        <div class="pt-3 mt-1">
+                            <div class="text-body-tertiary fs-xs mb-2">06:12</div>
+                            <h3 class="h6 mb-0">
+                                <a class="hover-effect-underline stretched-link" href="#!">A comprehensive review of
+                                    the latest kitchen blenders on the market</a>
+                            </h3>
+                        </div>
+                    </article>
+
+                    <!-- Article -->
+                    <article class="swiper-slide hover-effect-scale">
+                        <div class="ratio rounded overflow-hidden" style="--cz-aspect-ratio: calc(200 / 306 * 100%)">
+                            <div
+                                class="btn btn-icon btn-light position-absolute top-50 start-50 translate-middle z-2 rounded-circle pe-none">
+                                <i class="ci-play fs-base"></i>
+                            </div>
+                            <img src="/img/blog/grid/v1/video04.jpg" class="hover-effect-target" alt="Image">
+                        </div>
+                        <div class="pt-3 mt-1">
+                            <div class="text-body-tertiary fs-xs mb-2">10:08</div>
+                            <h3 class="h6 mb-0">
+                                <a class="hover-effect-underline stretched-link" href="#!">Behind-the-scenes stories
+                                    from the world of iPhones</a>
+                            </h3>
+                        </div>
+                    </article>
+
+                    <!-- Article -->
+                    <article class="swiper-slide hover-effect-scale">
+                        <div class="ratio rounded overflow-hidden" style="--cz-aspect-ratio: calc(200 / 306 * 100%)">
+                            <div
+                                class="btn btn-icon btn-light position-absolute top-50 start-50 translate-middle z-2 rounded-circle pe-none">
+                                <i class="ci-play fs-base"></i>
+                            </div>
+                            <img src="/img/blog/grid/v1/video02.jpg" class="hover-effect-target" alt="Image">
+                        </div>
+                        <div class="pt-3 mt-1">
+                            <div class="text-body-tertiary fs-xs mb-2">04:56</div>
+                            <h3 class="h6 mb-0">
+                                <a class="hover-effect-underline stretched-link" href="#!">Exploring the latest best
+                                    smartwatch features for busy professionals</a>
+                            </h3>
+                        </div>
+                    </article>
+
+                    <!-- Article -->
+                    <article class="swiper-slide hover-effect-scale">
+                        <div class="ratio rounded overflow-hidden" style="--cz-aspect-ratio: calc(200 / 306 * 100%)">
+                            <div
+                                class="btn btn-icon btn-light position-absolute top-50 start-50 translate-middle z-2 rounded-circle pe-none">
+                                <i class="ci-play fs-base"></i>
+                            </div>
+                            <img src="/img/blog/grid/v1/video03.jpg" class="hover-effect-target" alt="Image">
+                        </div>
+                        <div class="pt-3 mt-1">
+                            <div class="text-body-tertiary fs-xs mb-2">03:27</div>
+                            <h3 class="h6 mb-0">
+                                <a class="hover-effect-underline stretched-link" href="#!">Taking to the skies with
+                                    the latest compact drone technology</a>
+                            </h3>
+                        </div>
+                    </article>
+                </div>
+
+                <!-- Pagination (Bullets) -->
+                <div class="swiper-pagination position-static mt-4"></div>
+            </div>
+        </section>
+    </main>
+
+    @include('layouts.partials/footer')
+@endsection
+
+@section('scripts')
+@endsection
diff --git a/resources/views/blog/single-v1.blade.php b/resources/views/blog/single-v1.blade.php
new file mode 100644
index 0000000..8f4100b
--- /dev/null
+++ b/resources/views/blog/single-v1.blade.php
@@ -0,0 +1,387 @@
+@extends('layouts.landing', ['title' => 'Blog Single Post v.1'])
+
+@section('content')
+    @include('layouts.partials/offcanvas')
+
+    @include('layouts.partials/navbar', ['wishlist' => true])
+
+    <main class="content-wrapper">
+
+        <!-- Breadcrumb -->
+        <nav class="container pt-3 my-3 my-md-4" aria-label="breadcrumb">
+            <ol class="breadcrumb">
+                <li class="breadcrumb-item"><a href="{{ route('second', ['home', 'electronics']) }}">Home</a></li>
+                <li class="breadcrumb-item"><a href="{{ route('second', ['blog', 'grid-v1']) }}">Blog</a></li>
+                <li class="breadcrumb-item active" aria-current="page">Single post v.1</li>
+            </ol>
+        </nav>
+
+
+        <!-- Post content + Sidebar -->
+        <section class="container pb-5 mb-2 mb-md-3 mb-lg-4 mb-xl-5">
+            <div class="row">
+
+                <!-- Posts content -->
+                <div class="col-lg-8 position-relative z-2">
+
+                    <!-- Post title -->
+                    <h1 class="h3 mb-4">Payments made easy: How new technology will affect emerging E-commerce industry
+                        worldwide?</h1>
+
+                    <!-- Post meta -->
+                    <div class="nav align-items-center gap-2 border-bottom pb-4 mt-n1 mb-4">
+                        <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Tech news</a>
+                        <hr class="vr my-1 mx-1">
+                        <span class="text-body-tertiary fs-xs">July 16, 2024</span>
+                    </div>
+
+                    <p>The rise of technology has had a significant impact on the way we live our lives, and the world of
+                        E-commerce is no exception. As technology continues to evolve, it is changing the way we make
+                        payments, and this is having a significant impact on the E-commerce industry worldwide.</p>
+                    <figure class="figure w-100 py-3 py-md-4 mb-3">
+                        <div class="ratio" style="--cz-aspect-ratio: calc(599 / 856 * 100%)">
+                            <img src="/img/blog/post/main.jpg" class="rounded-4" alt="Image">
+                        </div>
+                        <figcaption class="figure-caption fs-sm pt-2">Image source Unsplash.com</figcaption>
+                    </figure>
+                    <p>One of the biggest trends in the E-Commerce industry is the rise of mobile payments. With the
+                        increasing popularity of smartphones, consumers are now able to make payments quickly and easily
+                        using mobile payment apps. This has made it easier for consumers to shop online, as they no longer
+                        have to enter their credit card information every time they make a purchase.</p>
+                    <p>Another trend that is shaping the E-Commerce industry is the rise of cryptocurrency. Cryptocurrency
+                        is a digital currency that uses encryption techniques to regulate the generation of units of
+                        currency and verify the transfer of funds. This technology has the potential to revolutionize the
+                        way we make payments, as it provides a secure and decentralized way to transfer funds.</p>
+                    <h2 class="h5 pt-3 pt-md-4 mb-md-4">Mobile payments, cryptocurrency and AI</h2>
+                    <p>In addition to mobile payments and cryptocurrency, there are other technologies that are shaping the
+                        future of E-Commerce. For example, biometric authentication is becoming more prevalent, and this
+                        technology could make it easier for consumers to make payments securely without having to enter a
+                        password.</p>
+                    <ul class="py-2">
+                        <li>The use of artificial intelligence (AI) is also becoming more common in the E-Commerce industry.
+                        </li>
+                        <li>AI can be used to personalize the shopping experience for consumers.</li>
+                        <li>Cryptocurrency adoption reduces transaction fees compared to traditional credit card payment.
+                        </li>
+                        <li>Mobile payments simplifies the checkout process, leading to higher conversion rates as customers
+                            can pay anytime, anywhere.</li>
+                    </ul>
+                    <p>All of these technologies have the potential to make payments easier and more secure, which is good
+                        news for both consumers and merchants. However, it is important to note that there are still
+                        challenges to overcome, such as security and privacy concerns, as well as the need for widespread
+                        adoption of these new technologies.</p>
+                    <h2 class="h5 pt-3 pt-md-4 mb-md-4">Technologies continue to evolve</h2>
+                    <p>The e-commerce industry stands at the forefront of technological evolution, constantly adapting and
+                        growing with every new wave of innovation. In recent years, three major technological advancements
+                        have significantly impacted this dynamic sector: mobile payments, cryptocurrency, and Artificial
+                        Intelligence (AI).</p>
+
+                    <!-- Slider -->
+                    <div class="position-relative py-3 py-md-4 px-5 mb-3">
+
+                        <!-- External slider prev/next buttons -->
+                        <button type="button" id="prev"
+                            class="btn btn-icon btn-outline-secondary rounded-circle animate-slide-start position-absolute top-50 start-0 translate-middle-y mt-n3"
+                            aria-label="Prev">
+                            <i class="ci-chevron-left fs-lg animate-target"></i>
+                        </button>
+                        <button type="button" id="next"
+                            class="btn btn-icon btn-outline-secondary rounded-circle animate-slide-end position-absolute top-50 end-0 translate-middle-y mt-n3"
+                            aria-label="Next">
+                            <i class="ci-chevron-right fs-lg animate-target"></i>
+                        </button>
+
+                        <div class="swiper px-3"
+                            data-swiper='{
+                "effect": "fade",
+                "loop": true,
+                "pagination": {
+                  "el": ".swiper-pagination",
+                  "clickable": true
+                },
+                "navigation": {
+                  "prevEl": "#prev",
+                  "nextEl": "#next"
+                }
+              }'>
+                            <div class="swiper-wrapper">
+                                <div class="swiper-slide">
+                                    <div class="ratio" style="--cz-aspect-ratio: calc(505 / 728 * 100%)">
+                                        <img src="/img/blog/post/slide01.jpg" class="rounded-4" alt="Image">
+                                    </div>
+                                </div>
+                                <div class="swiper-slide">
+                                    <div class="ratio" style="--cz-aspect-ratio: calc(505 / 728 * 100%)">
+                                        <img src="/img/blog/post/slide02.jpg" class="rounded-4" alt="Image">
+                                    </div>
+                                </div>
+                                <div class="swiper-slide">
+                                    <div class="ratio" style="--cz-aspect-ratio: calc(505 / 728 * 100%)">
+                                        <img src="/img/blog/post/slide03.jpg" class="rounded-4" alt="Image">
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Pagination (Bullets) -->
+                            <div class="swiper-pagination position-static mt-3"></div>
+                        </div>
+                    </div>
+
+                    <p>Mobile payments have revolutionized the e-commerce landscape by offering unparalleled convenience and
+                        speed. With just a few taps on a smartphone, consumers can complete transactions anytime and
+                        anywhere, bypassing the traditional hassles of cash or card payments.</p>
+                    <p>Cryptocurrency has emerged as a potent force, challenging conventional financial systems and offering
+                        a new paradigm for online transactions. With its decentralized nature and robust encryption,
+                        cryptocurrencies provide a level of security and anonymity previously unavailable to online
+                        shoppers.</p>
+
+                    <!-- Quotation -->
+                    <figure class="py-3 py-md-4">
+                        <blockquote class="blockquote">
+                            <p>This technology has the potential to revolutionize the way we make payments, as it provides a
+                                secure and decentralized way to transfer funds.</p>
+                        </blockquote>
+                        <figcaption class="blockquote-footer mb-0">Victor Blance, CEO Cartzilla</figcaption>
+                    </figure>
+
+                    <p>Perhaps the most transformative of all, AI has begun to personalize the online shopping experience in
+                        unprecedented ways. Through data analysis and machine learning, AI can predict user preferences,
+                        tailor recommendations, and offer customer service through intelligent chatbots. This not only
+                        enhances the user experience but also increases efficiency and sales for e-commerce businesses.
+                        Furthermore, AI is instrumental in fraud detection and prevention, using pattern recognition to
+                        identify and combat fraudulent activities.</p>
+                    <h2 class="h5 pt-3 pt-md-4 mb-md-4">Conclusion</h2>
+                    <p>As these technologies continue to evolve and interweave, the future of e-commerce looks not only more
+                        digital but also more secure, personalized, and accessible. The implications of these advancements
+                        extend beyond just consumer convenience, heralding a new era of digital commerce that is as exciting
+                        as it is unpredictable. The industry must stay agile and forward-thinking to harness these
+                        technologies' full potential and navigate the challenges they bring.</p>
+
+                    <!-- Tags + Sharing -->
+                    <div
+                        class="d-sm-flex align-items-center justify-content-between py-4 py-md-5 mt-n2 mt-md-n3 mb-2 mb-sm-3 mb-md-0">
+                        <div class="d-flex flex-wrap gap-2 mb-4 mb-sm-0 me-sm-4">
+                            <a class="btn btn-outline-secondary px-3 mt-1 me-1" href="#!">E-commerce</a>
+                            <a class="btn btn-outline-secondary px-3 mt-1 me-1" href="#!">Crypto</a>
+                            <a class="btn btn-outline-secondary px-3 mt-1 me-1" href="#!">AI</a>
+                            <a class="btn btn-outline-secondary px-3 mt-1 me-1" href="#!">Payments</a>
+                        </div>
+                        <div class="d-flex align-items-center gap-2">
+                            <div class="text-body-emphasis fs-sm fw-medium">Share:</div>
+                            <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
+                                data-bs-toggle="tooltip"
+                                data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-body p-0"></div></div>'
+                                title="X (Twitter)" aria-label="Follow us on X">
+                                <i class="ci-x"></i>
+                            </a>
+                            <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
+                                data-bs-toggle="tooltip"
+                                data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-body p-0"></div></div>'
+                                title="Facebook" aria-label="Follow us on Facebook">
+                                <i class="ci-facebook"></i>
+                            </a>
+                            <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
+                                data-bs-toggle="tooltip"
+                                data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-body p-0"></div></div>'
+                                title="Telegram" aria-label="Follow us on Telegram">
+                                <i class="ci-telegram"></i>
+                            </a>
+                        </div>
+                    </div>
+
+                    <!-- Subscription CTA -->
+                    <div
+                        class="d-sm-flex align-items-center justify-content-between bg-body-tertiary rounded-4 py-5 px-4 px-md-5">
+                        <div class="mb-4 mb-sm-0 me-sm-4">
+                            <h3 class="h5 mb-2">Sign up to our newsletter</h3>
+                            <p class="fs-sm mb-0">Receive our latest updates about our products &amp; promotions</p>
+                        </div>
+                        <button type="button" class="btn btn-dark">
+                            <i class="ci-mail fs-base ms-n1 me-2"></i>
+                            Subscribe
+                        </button>
+                    </div>
+
+
+                    <!-- Related articles -->
+                    <div class="pt-5 mt-2 mt-md-3 mt-lg-4 mt-xl-5">
+                        <h2 class="h3 pb-2 pb-sm-3">Related articles</h2>
+                        <div class="d-flex flex-column gap-4 mt-n3">
+
+                            <!-- Article -->
+                            <article class="row align-items-start align-items-md-center gx-0 gy-4 pt-3">
+                                <div class="col-sm-5 pe-sm-4">
+                                    <a class="ratio d-flex hover-effect-scale rounded overflow-hidden flex-md-shrink-0"
+                                        href="#!" style="--cz-aspect-ratio: calc(226 / 306 * 100%)">
+                                        <img src="/img/blog/list/06.jpg" class="hover-effect-target" alt="Image">
+                                    </a>
+                                </div>
+                                <div class="col-sm-7">
+                                    <div class="nav align-items-center gap-2 pb-2 mt-n1 mb-1">
+                                        <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">IoT</a>
+                                        <hr class="vr my-1 mx-1">
+                                        <span class="text-body-tertiary fs-xs">August 23, 2024</span>
+                                    </div>
+                                    <h3 class="h5 mb-2 mb-md-3">
+                                        <a class="hover-effect-underline" href="#!">Connecting the dots: How IoT
+                                            technology is transforming everyday life</a>
+                                    </h3>
+                                    <p class="mb-0">In the ever-evolving landscape of technology, the Internet of Things
+                                        (IoT) stands out as a transformative force reshaping...</p>
+                                </div>
+                            </article>
+
+                            <!-- Article -->
+                            <article class="row align-items-start align-items-md-center gx-0 gy-4 pt-3">
+                                <div class="col-sm-5 pe-sm-4">
+                                    <a class="ratio d-flex hover-effect-scale rounded overflow-hidden flex-md-shrink-0"
+                                        href="#!" style="--cz-aspect-ratio: calc(226 / 306 * 100%)">
+                                        <img src="/img/blog/list/07.jpg" class="hover-effect-target" alt="Image">
+                                    </a>
+                                </div>
+                                <div class="col-sm-7">
+                                    <div class="nav align-items-center gap-2 pb-2 mt-n1 mb-1">
+                                        <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Buying
+                                            guides</a>
+                                        <hr class="vr my-1 mx-1">
+                                        <span class="text-body-tertiary fs-xs">August 18, 2024</span>
+                                    </div>
+                                    <h3 class="h5 mb-2 mb-md-3">
+                                        <a class="hover-effect-underline" href="#!">How to find the best deals and
+                                            make secure transactions online</a>
+                                    </h3>
+                                    <p class="mb-0">This blog post will guide you through the dual objectives of snagging
+                                        great bargains and protecting your financial...</p>
+                                </div>
+                            </article>
+
+                            <!-- Article -->
+                            <article class="row align-items-start align-items-md-center gx-0 gy-4 pt-3">
+                                <div class="col-sm-5 pe-sm-4">
+                                    <a class="ratio d-flex hover-effect-scale rounded overflow-hidden flex-md-shrink-0"
+                                        href="#!" style="--cz-aspect-ratio: calc(226 / 306 * 100%)">
+                                        <img src="/img/blog/list/09.jpg" class="hover-effect-target" alt="Image">
+                                    </a>
+                                </div>
+                                <div class="col-sm-7">
+                                    <div class="nav align-items-center gap-2 pb-2 mt-n1 mb-1">
+                                        <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Gaming</a>
+                                        <hr class="vr my-1 mx-1">
+                                        <span class="text-body-tertiary fs-xs">July 27, 2024</span>
+                                    </div>
+                                    <h3 class="h5 mb-2 mb-md-3">
+                                        <a class="hover-effect-underline" href="#!">Immersive worlds: A dive into the
+                                            latest VR gear and experiences</a>
+                                    </h3>
+                                    <p class="mb-0">Immersive worlds have always captured the imagination, but now, with
+                                        the advent of advanced VR gear, they are becoming...</p>
+                                </div>
+                            </article>
+
+                            <!-- View all button -->
+                            <div class="nav">
+                                <a class="nav-link animate-underline px-0 py-2" href="#!">
+                                    <span class="animate-target">View all</span>
+                                    <i class="ci-chevron-right fs-base ms-1"></i>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+
+                <!-- Sticky sidebar that turns into offcanvas on screens < 992px wide (lg breakpoint) -->
+                <aside class="col-lg-4 col-xl-3 offset-xl-1" style="margin-top: -115px">
+                    <div class="offcanvas-lg offcanvas-end sticky-lg-top ps-lg-4 ps-xl-0" id="blogSidebar">
+                        <div class="d-none d-lg-block" style="height: 115px"></div>
+                        <div class="offcanvas-header py-3">
+                            <h5 class="offcanvas-title">Sidebar</h5>
+                            <button type="button" class="btn-close" data-bs-dismiss="offcanvas"
+                                data-bs-target="#blogSidebar" aria-label="Close"></button>
+                        </div>
+                        <div class="offcanvas-body d-block pt-2 py-lg-0">
+                            <h4 class="h6 mb-4">Blog categories</h4>
+                            <div class="d-flex flex-wrap gap-3">
+                                <a class="btn btn-outline-secondary px-3" href="#!">Gadget reviews</a>
+                                <a class="btn btn-outline-secondary px-3" href="#!">Tech news</a>
+                                <a class="btn btn-outline-secondary px-3" href="#!">Industry trends</a>
+                                <a class="btn btn-outline-secondary px-3" href="#!">Buying guides</a>
+                                <a class="btn btn-outline-secondary px-3" href="#!">Tech tips</a>
+                                <a class="btn btn-outline-secondary px-3" href="#!">Gaming</a>
+                                <a class="btn btn-outline-secondary px-3" href="#!">IoT</a>
+                            </div>
+                            <h4 class="h6 pt-5 mb-0">Trending posts</h4>
+                            <article
+                                class="hover-effect-scale position-relative d-flex align-items-center border-bottom py-4">
+                                <div class="w-100 pe-3">
+                                    <h3 class="h6 lh-base fs-sm mb-0">
+                                        <a class="hover-effect-underline stretched-link" href="#!">The role of
+                                            philanthropy in building a better world</a>
+                                    </h3>
+                                </div>
+                                <div class="ratio w-100" style="max-width: 86px; --cz-aspect-ratio: calc(64 / 86 * 100%)">
+                                    <img src="/img/blog/grid/v1/th01.jpg" class="rounded-2" alt="Image">
+                                </div>
+                            </article>
+                            <article
+                                class="hover-effect-scale position-relative d-flex align-items-center border-bottom py-4">
+                                <div class="w-100 pe-3">
+                                    <h3 class="h6 lh-base fs-sm mb-0">
+                                        <a class="hover-effect-underline stretched-link" href="#!">The biggest
+                                            prospects for the smart home electronics industry</a>
+                                    </h3>
+                                </div>
+                                <div class="ratio w-100" style="max-width: 86px; --cz-aspect-ratio: calc(64 / 86 * 100%)">
+                                    <img src="/img/blog/grid/v1/th02.jpg" class="rounded-2" alt="Image">
+                                </div>
+                            </article>
+                            <article class="hover-effect-scale position-relative d-flex align-items-center py-4">
+                                <div class="w-100 pe-3">
+                                    <h3 class="h6 lh-base fs-sm mb-0">
+                                        <a class="hover-effect-underline stretched-link" href="#!">Behind-the-scenes
+                                            stories from the world of iPhones</a>
+                                    </h3>
+                                </div>
+                                <div class="ratio w-100" style="max-width: 86px; --cz-aspect-ratio: calc(64 / 86 * 100%)">
+                                    <img src="/img/blog/grid/v1/th03.jpg" class="rounded-2" alt="Image">
+                                </div>
+                            </article>
+                            <h4 class="h6 pt-4">Follow us</h4>
+                            <div class="d-flex gap-2 pb-2">
+                                <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
+                                    data-bs-toggle="tooltip"
+                                    data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-body p-0"></div></div>'
+                                    title="Instagram" aria-label="Follow us on Instagram">
+                                    <i class="ci-instagram"></i>
+                                </a>
+                                <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
+                                    data-bs-toggle="tooltip"
+                                    data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-body p-0"></div></div>'
+                                    title="X (Twitter)" aria-label="Follow us on X">
+                                    <i class="ci-x"></i>
+                                </a>
+                                <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
+                                    data-bs-toggle="tooltip"
+                                    data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-body p-0"></div></div>'
+                                    title="Facebook" aria-label="Follow us on Facebook">
+                                    <i class="ci-facebook"></i>
+                                </a>
+                                <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
+                                    data-bs-toggle="tooltip"
+                                    data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-body p-0"></div></div>'
+                                    title="Telegram" aria-label="Follow us on Telegram">
+                                    <i class="ci-telegram"></i>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </aside>
+            </div>
+        </section>
+    </main>
+
+    @include('layouts.partials/footer')
+@endsection
+
+@section('scripts')
+@endsection
diff --git a/resources/views/blog/single-v2.blade.php b/resources/views/blog/single-v2.blade.php
new file mode 100644
index 0000000..a889d13
--- /dev/null
+++ b/resources/views/blog/single-v2.blade.php
@@ -0,0 +1,350 @@
+@extends('layouts.landing', ['title' => 'Blog Single Post v.2'])
+
+@section('content')
+    @include('layouts.partials/offcanvas')
+
+    @include('layouts.partials/navbar', ['wishlist' => true])
+
+    <!-- Page warpper -->
+    <main class="content-wrapper">
+
+        <!-- Post content + Sidebar sharing -->
+        <section class="container pb-5 mb-2 mb-md-3 mb-lg-4 mb-xl-5">
+            <div class="row">
+                <div class="col-lg-8 offset-lg-2">
+                    <!-- Breadcrumb -->
+                    <nav class="pt-3 my-3 my-md-4" aria-label="breadcrumb">
+                        <ol class="breadcrumb">
+                            <li class="breadcrumb-item"><a href="{{ route('second', ['home', 'electronics']) }}">Home</a></li>
+                            <li class="breadcrumb-item"><a href="{{ route('second', ['blog', 'grid-v1']) }}">Blog</a></li>
+                            <li class="breadcrumb-item active" aria-current="page">Single post v.2</li>
+                        </ol>
+                    </nav>
+
+                    <!-- Post title -->
+                    <h1 class="h3 mb-4">Payments made easy: How new technology will affect emerging E-commerce industry
+                        worldwide?</h1>
+
+                    <!-- Post meta -->
+                    <div class="nav align-items-center gap-2 border-bottom pb-4 mt-n1 mb-4">
+                        <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Tech news</a>
+                        <hr class="vr my-1 mx-1">
+                        <span class="text-body-tertiary fs-xs">July 16, 2024</span>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+
+                <!-- Post content -->
+                <div class="col-lg-8 offset-lg-2">
+                    <p>The rise of technology has had a significant impact on the way we live our lives, and the world of
+                        E-commerce is no exception. As technology continues to evolve, it is changing the way we make
+                        payments, and this is having a significant impact on the E-commerce industry worldwide.</p>
+                    <figure class="figure w-100 py-3 py-md-4 mb-3">
+                        <div class="ratio" style="--cz-aspect-ratio: calc(599 / 856 * 100%)">
+                            <img src="/img/blog/post/main.jpg" class="rounded-4" alt="Image">
+                        </div>
+                        <figcaption class="figure-caption fs-sm pt-2">Image source Unsplash.com</figcaption>
+                    </figure>
+                    <p>One of the biggest trends in the E-Commerce industry is the rise of mobile payments. With the
+                        increasing popularity of smartphones, consumers are now able to make payments quickly and easily
+                        using mobile payment apps. This has made it easier for consumers to shop online, as they no longer
+                        have to enter their credit card information every time they make a purchase.</p>
+                    <p>Another trend that is shaping the E-Commerce industry is the rise of cryptocurrency. Cryptocurrency
+                        is a digital currency that uses encryption techniques to regulate the generation of units of
+                        currency and verify the transfer of funds. This technology has the potential to revolutionize the
+                        way we make payments, as it provides a secure and decentralized way to transfer funds.</p>
+                    <h2 class="h5 pt-3 pt-md-4 mb-md-4">Mobile payments, cryptocurrency and AI</h2>
+                    <p>In addition to mobile payments and cryptocurrency, there are other technologies that are shaping the
+                        future of E-Commerce. For example, biometric authentication is becoming more prevalent, and this
+                        technology could make it easier for consumers to make payments securely without having to enter a
+                        password.</p>
+                    <ul class="py-2">
+                        <li>The use of artificial intelligence (AI) is also becoming more common in the E-Commerce industry.
+                        </li>
+                        <li>AI can be used to personalize the shopping experience for consumers.</li>
+                        <li>Cryptocurrency adoption reduces transaction fees compared to traditional credit card payment.
+                        </li>
+                        <li>Mobile payments simplifies the checkout process, leading to higher conversion rates as customers
+                            can pay anytime, anywhere.</li>
+                    </ul>
+                    <p>All of these technologies have the potential to make payments easier and more secure, which is good
+                        news for both consumers and merchants. However, it is important to note that there are still
+                        challenges to overcome, such as security and privacy concerns, as well as the need for widespread
+                        adoption of these new technologies.</p>
+                    <h2 class="h5 pt-3 pt-md-4 mb-md-4">Technologies continue to evolve</h2>
+                    <p>The e-commerce industry stands at the forefront of technological evolution, constantly adapting and
+                        growing with every new wave of innovation. In recent years, three major technological advancements
+                        have significantly impacted this dynamic sector: mobile payments, cryptocurrency, and Artificial
+                        Intelligence (AI).</p>
+
+                    <!-- Slider -->
+                    <div class="position-relative py-3 py-md-4 px-5 mb-3">
+
+                        <!-- External slider prev/next buttons -->
+                        <button type="button" id="prev"
+                            class="btn btn-icon btn-outline-secondary rounded-circle animate-slide-start position-absolute top-50 start-0 translate-middle-y mt-n3"
+                            aria-label="Prev">
+                            <i class="ci-chevron-left fs-lg animate-target"></i>
+                        </button>
+                        <button type="button" id="next"
+                            class="btn btn-icon btn-outline-secondary rounded-circle animate-slide-end position-absolute top-50 end-0 translate-middle-y mt-n3"
+                            aria-label="Next">
+                            <i class="ci-chevron-right fs-lg animate-target"></i>
+                        </button>
+
+                        <div class="swiper px-3"
+                            data-swiper='{
+                "effect": "fade",
+                "loop": true,
+                "pagination": {
+                  "el": ".swiper-pagination",
+                  "clickable": true
+                },
+                "navigation": {
+                  "prevEl": "#prev",
+                  "nextEl": "#next"
+                }
+              }'>
+                            <div class="swiper-wrapper">
+                                <div class="swiper-slide">
+                                    <div class="ratio" style="--cz-aspect-ratio: calc(505 / 728 * 100%)">
+                                        <img src="/img/blog/post/slide01.jpg" class="rounded-4" alt="Image">
+                                    </div>
+                                </div>
+                                <div class="swiper-slide">
+                                    <div class="ratio" style="--cz-aspect-ratio: calc(505 / 728 * 100%)">
+                                        <img src="/img/blog/post/slide02.jpg" class="rounded-4" alt="Image">
+                                    </div>
+                                </div>
+                                <div class="swiper-slide">
+                                    <div class="ratio" style="--cz-aspect-ratio: calc(505 / 728 * 100%)">
+                                        <img src="/img/blog/post/slide03.jpg" class="rounded-4" alt="Image">
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Pagination (Bullets) -->
+                            <div class="swiper-pagination position-static mt-3"></div>
+                        </div>
+                    </div>
+
+                    <p>Mobile payments have revolutionized the e-commerce landscape by offering unparalleled convenience and
+                        speed. With just a few taps on a smartphone, consumers can complete transactions anytime and
+                        anywhere, bypassing the traditional hassles of cash or card payments.</p>
+                    <p>Cryptocurrency has emerged as a potent force, challenging conventional financial systems and offering
+                        a new paradigm for online transactions. With its decentralized nature and robust encryption,
+                        cryptocurrencies provide a level of security and anonymity previously unavailable to online
+                        shoppers.</p>
+
+                    <!-- Quotation -->
+                    <figure class="py-3 py-md-4">
+                        <blockquote class="blockquote">
+                            <p>This technology has the potential to revolutionize the way we make payments, as it provides a
+                                secure and decentralized way to transfer funds.</p>
+                        </blockquote>
+                        <figcaption class="blockquote-footer mb-0">Victor Blance, CEO Cartzilla</figcaption>
+                    </figure>
+
+                    <p>Perhaps the most transformative of all, AI has begun to personalize the online shopping experience in
+                        unprecedented ways. Through data analysis and machine learning, AI can predict user preferences,
+                        tailor recommendations, and offer customer service through intelligent chatbots. This not only
+                        enhances the user experience but also increases efficiency and sales for e-commerce businesses.
+                        Furthermore, AI is instrumental in fraud detection and prevention, using pattern recognition to
+                        identify and combat fraudulent activities.</p>
+                    <h2 class="h5 pt-3 pt-md-4 mb-md-4">Conclusion</h2>
+                    <p>As these technologies continue to evolve and interweave, the future of e-commerce looks not only more
+                        digital but also more secure, personalized, and accessible. The implications of these advancements
+                        extend beyond just consumer convenience, heralding a new era of digital commerce that is as exciting
+                        as it is unpredictable. The industry must stay agile and forward-thinking to harness these
+                        technologies' full potential and navigate the challenges they bring.</p>
+
+                    <!-- Tags + Sharing -->
+                    <div
+                        class="d-sm-flex align-items-center justify-content-between py-4 py-md-5 mt-n2 mt-md-n3 mb-2 mb-sm-3 mb-md-0">
+                        <div class="d-flex flex-wrap gap-2 mb-4 mb-sm-0 me-sm-4">
+                            <a class="btn btn-outline-secondary px-3 mt-1 me-1" href="#!">E-commerce</a>
+                            <a class="btn btn-outline-secondary px-3 mt-1 me-1" href="#!">Crypto</a>
+                            <a class="btn btn-outline-secondary px-3 mt-1 me-1" href="#!">AI</a>
+                            <a class="btn btn-outline-secondary px-3 mt-1 me-1" href="#!">Payments</a>
+                        </div>
+
+                        <!-- Sharing visible on screens < 992px wide (lg breakpoint) -->
+                        <div class="d-flex d-lg-none align-items-center gap-2">
+                            <div class="text-body-emphasis fs-sm fw-medium">Share:</div>
+                            <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
+                                data-bs-toggle="tooltip"
+                                data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-body p-0"></div></div>'
+                                title="X (Twitter)" aria-label="Follow us on X">
+                                <i class="ci-x"></i>
+                            </a>
+                            <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
+                                data-bs-toggle="tooltip"
+                                data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-body p-0"></div></div>'
+                                title="Facebook" aria-label="Follow us on Facebook">
+                                <i class="ci-facebook"></i>
+                            </a>
+                            <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
+                                data-bs-toggle="tooltip"
+                                data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-body p-0"></div></div>'
+                                title="Telegram" aria-label="Follow us on Telegram">
+                                <i class="ci-telegram"></i>
+                            </a>
+                        </div>
+                    </div>
+
+                    <!-- Post navigation -->
+                    <div class="border-top pt-3 pt-md-4">
+                        <div class="nav flex-nowrap align-items-center justify-content-between gap-4 pt-3">
+                            <a class="nav-link flex-wrap flex-sm-nowrap justify-content-center position-relative w-50 p-0"
+                                href="#!" style="max-width: 330px">
+                                <div class="d-flex align-items-center mb-2 mb-sm-0">
+                                    <i class="ci-chevron-left fs-xl ms-n3 ms-sm-n1 me-2"></i>
+                                    <div class="ratio flex-shrink-0"
+                                        style="width: 86px; --cz-aspect-ratio: calc(64 / 86 * 100%)">
+                                        <img src="/img/blog/post/nav01.jpg" class="rounded-2" alt="Image">
+                                    </div>
+                                </div>
+                                <div
+                                    class="h6 fs-sm hover-effect-underline stretched-link text-center text-sm-start mb-0 ps-3">
+                                    How modern technology builds communities</div>
+                            </a>
+                            <a class="nav-link flex-wrap flex-sm-nowrap justify-content-center position-relative w-50 p-0"
+                                href="#!" style="max-width: 330px">
+                                <div class="d-flex align-items-center order-sm-2 mb-2 mb-sm-0">
+                                    <div class="ratio flex-shrink-0"
+                                        style="width: 86px; --cz-aspect-ratio: calc(64 / 86 * 100%)">
+                                        <img src="/img/blog/post/nav02.jpg" class="rounded-2" alt="Image">
+                                    </div>
+                                    <i class="ci-chevron-right fs-xl me-n3 me-sm-n1 ms-2"></i>
+                                </div>
+                                <div
+                                    class="h6 fs-sm hover-effect-underline stretched-link text-center text-sm-end order-sm-1 mb-0 pe-3">
+                                    Transform your home into a smart hub with the latest IoT</div>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+
+
+                <!-- Sharing sticky sidebar visible on screens > 991px wide (lg breakpoint) -->
+                <aside class="col-lg-2 d-none d-lg-block" style="margin-top: -115px">
+                    <div class="sticky-top" style="padding-top: 115px">
+                        <div class="d-flex flex-column align-items-center gap-2">
+                            <div class="text-body-emphasis fs-sm fw-medium">Share:</div>
+                            <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
+                                data-bs-toggle="tooltip" data-bs-placement="left"
+                                data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-body p-0"></div></div>'
+                                title="X (Twitter)" aria-label="Follow us on X">
+                                <i class="ci-x"></i>
+                            </a>
+                            <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
+                                data-bs-toggle="tooltip" data-bs-placement="left"
+                                data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-body p-0"></div></div>'
+                                title="Facebook" aria-label="Follow us on Facebook">
+                                <i class="ci-facebook"></i>
+                            </a>
+                            <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
+                                data-bs-toggle="tooltip" data-bs-placement="left"
+                                data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-body p-0"></div></div>'
+                                title="Telegram" aria-label="Follow us on Telegram">
+                                <i class="ci-telegram"></i>
+                            </a>
+                        </div>
+                    </div>
+                </aside>
+            </div>
+        </section>
+
+
+        <!-- Related articles that turn into slider on screens < 992px wide (lg breakpoint) -->
+        <section class="container pb-5 mb-1 mb-sm-2 mb-md-3 mb-lg-4 mb-xl-5">
+            <h2 class="h3 text-center pb-2 pb-sm-3">Related articles</h2>
+            <div class="swiper"
+                data-swiper='{
+          "slidesPerView": 1,
+          "spaceBetween": 24,
+          "pagination": {
+            "el": ".swiper-pagination",
+            "clickable": true
+          },
+          "breakpoints": {
+            "500": {
+              "slidesPerView": 2
+            },
+            "900": {
+              "slidesPerView": 3
+            }
+          }
+        }'>
+                <div class="swiper-wrapper">
+
+                    <!-- Article -->
+                    <article class="swiper-slide">
+                        <a class="ratio d-flex hover-effect-scale rounded overflow-hidden" href="#!"
+                            style="--cz-aspect-ratio: calc(305 / 416 * 100%)">
+                            <img src="/img/blog/grid/v1/07.jpg" class="hover-effect-target" alt="Image">
+                        </a>
+                        <div class="pt-4">
+                            <div class="nav align-items-center gap-2 pb-2 mt-n1 mb-1">
+                                <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">IoT</a>
+                                <hr class="vr my-1 mx-1">
+                                <span class="text-body-tertiary fs-xs">August 23, 2024</span>
+                            </div>
+                            <h3 class="h5 mb-0">
+                                <a class="hover-effect-underline" href="#!">Connecting the dots: How IoT technology
+                                    is transforming everyday life</a>
+                            </h3>
+                        </div>
+                    </article>
+
+                    <!-- Article -->
+                    <article class="swiper-slide">
+                        <a class="ratio d-flex hover-effect-scale rounded overflow-hidden" href="#!"
+                            style="--cz-aspect-ratio: calc(305 / 416 * 100%)">
+                            <img src="/img/blog/grid/v1/08.jpg" class="hover-effect-target" alt="Image">
+                        </a>
+                        <div class="pt-4">
+                            <div class="nav align-items-center gap-2 pb-2 mt-n1 mb-1">
+                                <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Buying guides</a>
+                                <hr class="vr my-1 mx-1">
+                                <span class="text-body-tertiary fs-xs">August 18, 2024</span>
+                            </div>
+                            <h3 class="h5 mb-0">
+                                <a class="hover-effect-underline" href="#!">How to find the best deals and make
+                                    secure transactions online</a>
+                            </h3>
+                        </div>
+                    </article>
+
+                    <!-- Article -->
+                    <article class="swiper-slide">
+                        <a class="ratio d-flex hover-effect-scale rounded overflow-hidden" href="#!"
+                            style="--cz-aspect-ratio: calc(305 / 416 * 100%)">
+                            <img src="/img/blog/grid/v1/10.jpg" class="hover-effect-target" alt="Image">
+                        </a>
+                        <div class="pt-4">
+                            <div class="nav align-items-center gap-2 pb-2 mt-n1 mb-1">
+                                <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Gaming</a>
+                                <hr class="vr my-1 mx-1">
+                                <span class="text-body-tertiary fs-xs">July 27, 2024</span>
+                            </div>
+                            <h3 class="h5 mb-0">
+                                <a class="hover-effect-underline" href="#!">Immersive worlds: A dive into the latest
+                                    VR gear and experiences</a>
+                            </h3>
+                        </div>
+                    </article>
+                </div>
+
+                <!-- Pagination (Bullets) -->
+                <div class="swiper-pagination position-static mt-4"></div>
+            </div>
+        </section>
+    </main>
+    
+    @include('layouts.partials/footer')
+@endsection
+
+@section('scripts')    
+@endsection
diff --git a/resources/views/checkout/marketplace.blade.php b/resources/views/checkout/marketplace.blade.php
new file mode 100644
index 0000000..27923f6
--- /dev/null
+++ b/resources/views/checkout/marketplace.blade.php
@@ -0,0 +1,854 @@
+@extends('layouts.landing', ['title' => 'Marketplace - Checkout'])
+
+@section('content')
+    <!-- Search offcanvas -->
+    <div class="offcanvas offcanvas-top" id="searchBox" data-bs-backdrop="static" tabindex="-1">
+        <div class="offcanvas-header border-bottom p-0 py-lg-1">
+            <form class="container d-flex align-items-center">
+                <input type="search" class="form-control form-control-lg fs-lg border-0 rounded-0 py-3 ps-0"
+                    placeholder="Search the products" data-autofocus="offcanvas">
+                <button type="reset" class="btn-close fs-lg" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+            </form>
+        </div>
+        <div class="offcanvas-body px-0">
+            <div class="container text-center">
+                <svg class="text-body-tertiary opacity-60 mb-4" xmlns="http://www.w3.org/2000/svg" width="60"
+                    viewBox="0 0 512 512" fill="currentColor">
+                    <path
+                        d="M340.115,361.412l-16.98-16.98c-34.237,29.36-78.733,47.098-127.371,47.098C87.647,391.529,0,303.883,0,195.765S87.647,0,195.765,0s195.765,87.647,195.765,195.765c0,48.638-17.738,93.134-47.097,127.371l16.98,16.98l11.94-11.94c5.881-5.881,15.415-5.881,21.296,0l112.941,112.941c5.881,5.881,5.881,15.416,0,21.296l-45.176,45.176c-5.881,5.881-15.415,5.881-21.296,0L328.176,394.648c-5.881-5.881-5.881-15.416,0-21.296L340.115,361.412z M195.765,361.412c91.484,0,165.647-74.163,165.647-165.647S287.249,30.118,195.765,30.118S30.118,104.28,30.118,195.765S104.28,361.412,195.765,361.412z M360.12,384l91.645,91.645l23.88-23.88L384,360.12L360.12,384z M233.034,233.033c5.881-5.881,15.415-5.881,21.296,0c5.881,5.881,5.881,15.416,0,21.296c-32.345,32.345-84.786,32.345-117.131,0c-5.881-5.881-5.881-15.415,0-21.296c5.881-5.881,15.416-5.881,21.296,0C179.079,253.616,212.45,253.616,233.034,233.033zM135.529,180.706c-12.475,0-22.588-10.113-22.588-22.588c0-12.475,10.113-22.588,22.588-22.588c12.475,0,22.588,10.113,22.588,22.588C158.118,170.593,148.005,180.706,135.529,180.706z M256,180.706c-12.475,0-22.588-10.113-22.588-22.588c0-12.475,10.113-22.588,22.588-22.588s22.588,10.113,22.588,22.588C278.588,170.593,268.475,180.706,256,180.706z" />
+                </svg>
+                <h6 class="mb-2">Your search results will appear here</h6>
+                <p class="fs-sm mb-0">Start typing in the search field above to see instant search results.</p>
+            </div>
+        </div>
+    </div>
+
+    <div class="offcanvas offcanvas-end pb-sm-2 px-sm-2" id="shoppingCart" tabindex="-1"
+        aria-labelledby="shoppingCartLabel" style="width: 500px">
+
+        <!-- Header -->
+        <div class="offcanvas-header flex-column align-items-start py-3 pt-lg-4">
+            <div class="d-flex align-items-center justify-content-between w-100">
+                <h4 class="offcanvas-title" id="shoppingCartLabel">Cart (3)</h4>
+                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+            </div>
+        </div>
+
+        <!-- Items -->
+        <div class="offcanvas-body d-flex flex-column gap-4 pt-2">
+
+            <!-- Item -->
+            <div class="d-flex align-items-center">
+                <a class="flex-sm-shrink-0" href="{{ route('second', ['shop', 'product-marketplace']) }}'" style="width: 142px">
+                    <div class="ratio bg-body-tertiary rounded overflow-hidden"
+                        style="--cz-aspect-ratio: calc(110 / 142 * 100%)">
+                        <img src="/img/home/marketplace/cart/01.jpg" alt="Thumbnail">
+                    </div>
+                </a>
+                <div class="w-100 min-w-0 ps-3">
+                    <h5 class="d-flex animate-underline mb-2">
+                        <a class="d-block fs-sm fw-medium text-truncate animate-target"
+                            href="{{ route('second', ['shop', 'product-marketplace']) }}'">Multi device mockup PSD</a>
+                    </h5>
+                    <div class="h6 pb-1 mb-2">$27</div>
+                    <div class="d-flex align-items-center justify-content-between gap-1">
+                        <div class="w-100" style="max-width: 185px">
+                            <select class="form-select form-select-sm rounded-pill"
+                                data-select='{
+                  "classNames": {
+                    "containerInner": ["form-select", "form-select-sm", "rounded-pill"]
+                  },
+                  "removeItemButton": false
+                }'
+                                aria-label="Small pill select">
+                                <option value="standard">Standard license</option>
+                                <option value="extended">Extended license</option>
+                            </select>
+                        </div>
+                        <button type="button" class="btn btn-icon btn-sm flex-shrink-0 fs-sm" data-bs-toggle="tooltip"
+                            data-bs-custom-class="tooltip-sm" data-bs-title="Remove" aria-label="Remove from cart">
+                            <i class="ci-trash fs-base"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Item -->
+            <div class="d-flex align-items-center">
+                <a class="flex-sm-shrink-0" href="{{ route('second', ['shop', 'product-marketplace']) }}'" style="width: 142px">
+                    <div class="ratio bg-body-tertiary rounded overflow-hidden"
+                        style="--cz-aspect-ratio: calc(110 / 142 * 100%)">
+                        <img src="/img/home/marketplace/cart/02.jpg" alt="Thumbnail">
+                    </div>
+                </a>
+                <div class="w-100 min-w-0 ps-3">
+                    <h5 class="d-flex animate-underline mb-2">
+                        <a class="d-block fs-sm fw-medium text-truncate animate-target"
+                            href="{{ route('second', ['shop', 'product-marketplace']) }}'">Isometric device mockups</a>
+                    </h5>
+                    <div class="h6 pb-1 mb-2">$12</div>
+                    <div class="d-flex align-items-center justify-content-between gap-2">
+                        <div class="w-100" style="max-width: 185px">
+                            <select class="form-select form-select-sm rounded-pill"
+                                data-select='{
+                  "classNames": {
+                    "containerInner": ["form-select", "form-select-sm", "rounded-pill"]
+                  },
+                  "removeItemButton": false
+                }'
+                                aria-label="Small pill select">
+                                <option value="standard">Standard license</option>
+                                <option value="extended">Extended license</option>
+                            </select>
+                        </div>
+                        <button type="button" class="btn btn-icon btn-sm flex-shrink-0 fs-sm" data-bs-toggle="tooltip"
+                            data-bs-custom-class="tooltip-sm" data-bs-title="Remove" aria-label="Remove from cart">
+                            <i class="ci-trash fs-base"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Item -->
+            <div class="d-flex align-items-center">
+                <a class="flex-sm-shrink-0" href="{{ route('second', ['shop', 'product-marketplace']) }}'" style="width: 142px">
+                    <div class="ratio bg-body-tertiary rounded overflow-hidden"
+                        style="--cz-aspect-ratio: calc(110 / 142 * 100%)">
+                        <img src="/img/home/marketplace/cart/03.jpg" alt="Thumbnail">
+                    </div>
+                </a>
+                <div class="w-100 min-w-0 ps-3">
+                    <h5 class="d-flex animate-underline mb-2">
+                        <a class="d-block fs-sm fw-medium text-truncate animate-target"
+                            href="{{ route('second', ['shop', 'product-marketplace']) }}'">Modern poster with abstract shapes</a>
+                    </h5>
+                    <div class="h6 pb-1 mb-2">$8</div>
+                    <div class="d-flex align-items-center justify-content-between gap-2">
+                        <div class="w-100" style="max-width: 185px">
+                            <select class="form-select form-select-sm rounded-pill"
+                                data-select='{
+                  "classNames": {
+                    "containerInner": ["form-select", "form-select-sm", "rounded-pill"]
+                  },
+                  "removeItemButton": false
+                }'
+                                aria-label="Small pill select">
+                                <option value="standard">Standard license</option>
+                                <option value="extended">Extended license</option>
+                            </select>
+                        </div>
+                        <button type="button" class="btn btn-icon btn-sm flex-shrink-0 fs-sm" data-bs-toggle="tooltip"
+                            data-bs-custom-class="tooltip-sm" data-bs-title="Remove" aria-label="Remove from cart">
+                            <i class="ci-trash fs-base"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Footer -->
+        <div class="offcanvas-header flex-column align-items-start">
+            <div class="d-flex align-items-center justify-content-between w-100 mb-3 mb-md-4">
+                <span class="text-light-emphasis">Subtotal:</span>
+                <span class="h6 mb-0">$47</span>
+            </div>
+            <a class="btn btn-lg btn-dark w-100 rounded-pill" href="{{ route('second', ['checkout', 'marketplace']) }}">Checkout</a>
+        </div>
+    </div>
+
+    <header class="navbar navbar-expand-lg bg-body navbar-sticky sticky-top z-fixed px-0" data-sticky-element>
+        <div class="container flex-nowrap">
+
+            <!-- Mobile offcanvas menu toggler (Hamburger) -->
+            <button type="button" class="navbar-toggler me-4 me-lg-0" data-bs-toggle="offcanvas"
+                data-bs-target="#navbarNav" aria-controls="navbarNav" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+
+            <!-- Navbar brand (Logo) -->
+            <a class="navbar-brand py-1 py-md-2 py-xl-1" href="{{ route('second', ['home', 'marketplace']) }}">
+                <span class="d-none d-sm-flex flex-shrink-0 text-primary me-2">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36">
+                        <path
+                            d="M36 18.01c0 8.097-5.355 14.949-12.705 17.2a18.12 18.12 0 0 1-5.315.79C9.622 36 2.608 30.313.573 22.611.257 21.407.059 20.162 0 18.879v-1.758c.02-.395.059-.79.099-1.185.099-.908.277-1.817.514-2.686C2.687 5.628 9.682 0 18 0c5.572 0 10.551 2.528 13.871 6.517 1.502 1.797 2.648 3.91 3.359 6.201.494 1.659.771 3.436.771 5.292z"
+                            fill="currentColor" />
+                        <g fill="#fff">
+                            <path
+                                d="M17.466 21.624c-.514 0-.988-.316-1.146-.829-.198-.632.138-1.303.771-1.501l7.666-2.469-1.205-8.254-13.317 4.621a1.19 1.19 0 0 1-1.521-.75 1.19 1.19 0 0 1 .751-1.521l13.89-4.818c.553-.197 1.166-.138 1.64.158a1.82 1.82 0 0 1 .85 1.284l1.344 9.183c.138.987-.494 1.994-1.482 2.33l-7.864 2.528-.375.04zm7.31.138c-.178-.632-.85-1.007-1.482-.81l-5.177 1.58c-2.331.79-3.28.02-3.418-.099l-6.56-8.412a4.25 4.25 0 0 0-4.406-1.758l-3.122.987c-.237.889-.415 1.777-.514 2.686l4.228-1.363a1.84 1.84 0 0 1 1.857.81l6.659 8.551c.751.948 2.015 1.323 3.359 1.323.909 0 1.857-.178 2.687-.474l5.078-1.54c.632-.178 1.008-.829.81-1.481z" />
+                            <use href="#czlogo" />
+                            <use href="#czlogo" x="8.516" y="-2.172" />
+                        </g>
+                        <defs>
+                            <path id="czlogo"
+                                d="M18.689 28.654a1.94 1.94 0 0 1-1.936 1.935 1.94 1.94 0 0 1-1.936-1.935 1.94 1.94 0 0 1 1.936-1.935 1.94 1.94 0 0 1 1.936 1.935z" />
+                        </defs>
+                    </svg>
+                </span>
+                Cartzilla
+            </a>
+
+            <!-- Main navigation that turns into offcanvas on screens < 992px wide (lg breakpoint) -->
+            <nav class="offcanvas offcanvas-start" id="navbarNav" tabindex="-1" aria-labelledby="navbarNavLabel">
+                <div class="offcanvas-header py-3">
+                    <h5 class="offcanvas-title" id="navbarNavLabel">Browse Cartzilla</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+                </div>
+                <div class="offcanvas-body pt-3 pb-4 py-lg-0 mx-lg-auto">
+                    <ul class="navbar-nav position-relative">
+                        <li class="nav-item dropdown py-lg-2 me-lg-n1 me-xl-0">
+                            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
+                                data-bs-trigger="hover" aria-expanded="false">Home</a>
+                            <ul class="dropdown-menu" style="--cz-dropdown-spacer: .875rem">
+                                <li class="hover-effect-opacity px-2 mx-n2">
+                                    <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'electronics']) }}">
+                                        <span class="fw-medium">Electronics Store</span>
+                                        <span class="d-block fs-xs text-body-secondary">Megamenu + Hero slider</span>
+                                        <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                            style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                            <img class="position-relative z-2 d-none-dark"
+                                                src="/img/mega-menu/demo-preview/electronics-light.jpg"
+                                                alt="Electronics Store">
+                                            <img class="position-relative z-2 d-none d-block-dark"
+                                                src="/img/mega-menu/demo-preview/electronics-dark.jpg"
+                                                alt="Electronics Store">
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                        </div>
+                                    </a>
+                                </li>
+                                <li class="hover-effect-opacity px-2 mx-n2">
+                                    <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'fashion-v1'])}}">
+                                        <span class="fw-medium">Fashion Store v.1</span>
+                                        <span class="d-block fs-xs text-body-secondary">Hero promo slider</span>
+                                        <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                            style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                            <img class="position-relative z-2 d-none-dark"
+                                                src="/img/mega-menu/demo-preview/fashion-1-light.jpg"
+                                                alt="Fashion Store v.1">
+                                            <img class="position-relative z-2 d-none d-block-dark"
+                                                src="/img/mega-menu/demo-preview/fashion-1-dark.jpg"
+                                                alt="Fashion Store v.1">
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                        </div>
+                                    </a>
+                                </li>
+                                <li class="hover-effect-opacity px-2 mx-n2">
+                                    <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'fashion-v2']) }}">
+                                        <span class="fw-medium">Fashion Store v.2</span>
+                                        <span class="d-block fs-xs text-body-secondary">Hero banner with hotspots</span>
+                                        <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                            style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                            <img class="position-relative z-2 d-none-dark"
+                                                src="/img/mega-menu/demo-preview/fashion-2-light.jpg"
+                                                alt="Fashion Store v.2">
+                                            <img class="position-relative z-2 d-none d-block-dark"
+                                                src="/img/mega-menu/demo-preview/fashion-2-dark.jpg"
+                                                alt="Fashion Store v.2">
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                        </div>
+                                    </a>
+                                </li>
+                                <li class="hover-effect-opacity px-2 mx-n2">
+                                    <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'furniture']) }}">
+                                        <span class="fw-medium">Furniture Store</span>
+                                        <span class="d-block fs-xs text-body-secondary">Fancy product carousel</span>
+                                        <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                            style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                            <img class="position-relative z-2 d-none-dark"
+                                                src="/img/mega-menu/demo-preview/furniture-light.jpg"
+                                                alt="Furniture Store">
+                                            <img class="position-relative z-2 d-none d-block-dark"
+                                                src="/img/mega-menu/demo-preview/furniture-dark.jpg"
+                                                alt="Furniture Store">
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                        </div>
+                                    </a>
+                                </li>
+                                <li class="hover-effect-opacity px-2 mx-n2">
+                                    <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'grocery']) }}">
+                                        <span class="fw-medium">Grocery Store</span>
+                                        <span class="d-block fs-xs text-body-secondary">Hero slider + Category cards</span>
+                                        <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                            style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                            <img class="position-relative z-2 d-none-dark"
+                                                src="/img/mega-menu/demo-preview/grocery-light.jpg" alt="Grocery Store">
+                                            <img class="position-relative z-2 d-none d-block-dark"
+                                                src="/img/mega-menu/demo-preview/grocery-dark.jpg" alt="Grocery Store">
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                        </div>
+                                    </a>
+                                </li>
+                                <li class="hover-effect-opacity px-2 mx-n2">
+                                    <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'marketplace']) }}">
+                                        <span class="fw-medium">Marketplace</span>
+                                        <span class="d-block fs-xs text-body-secondary">Multi-vendor, digital goods</span>
+                                        <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                            style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                            <img class="position-relative z-2 d-none-dark"
+                                                src="/img/mega-menu/demo-preview/marketplace-light.jpg" alt="Marketplace">
+                                            <img class="position-relative z-2 d-none d-block-dark"
+                                                src="/img/mega-menu/demo-preview/marketplace-dark.jpg" alt="Marketplace">
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                        </div>
+                                    </a>
+                                </li>
+                                <li class="hover-effect-opacity px-2 mx-n2">
+                                    <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'single-store']) }}">
+                                        <span class="fw-medium">Single Product Store</span>
+                                        <span class="d-block fs-xs text-body-secondary">Single product / mono brand</span>
+                                        <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                            style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                            <img class="position-relative z-2 d-none-dark"
+                                                src="/img/mega-menu/demo-preview/single-store-light.jpg"
+                                                alt="Single Product Store">
+                                            <img class="position-relative z-2 d-none d-block-dark"
+                                                src="/img/mega-menu/demo-preview/single-store-dark.jpg"
+                                                alt="Single Product Store">
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                        </div>
+                                    </a>
+                                </li>
+                            </ul>
+                        </li>
+                        <li class="nav-item dropdown position-static py-lg-2 me-lg-n1 me-xl-0">
+                            <a class="nav-link dropdown-toggle active" aria-current="page" href="#" role="button"
+                                data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Shop</a>
+                            <div class="dropdown-menu rounded-4 p-4" style="--cz-dropdown-spacer: .875rem">
+                                <div class="d-flex flex-column flex-lg-row gap-4">
+                                    <div style="min-width: 190px">
+                                        <div class="h6 mb-2">Electronics Store</div>
+                                        <ul class="nav flex-column gap-2 mt-0">
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'categories-electronics']) }}">Categories Page</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Catalog with Side Filters</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'product-general-electronics']) }}">Product General Info</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'product-details-electronics']) }}">Product Details</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'product-reviews-electronics']) }}">Product Reviews</a>
+                                            </li>
+                                        </ul>
+                                        <div class="h6 pt-4 mb-2">Fashion Store</div>
+                                        <ul class="nav flex-column gap-2 mt-0">
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Catalog with Side Filters</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'product-fashion']) }}">Product Page</a>
+                                            </li>
+                                        </ul>
+                                        <div class="h6 pt-4 mb-2">Furniture Store</div>
+                                        <ul class="nav flex-column gap-2 mt-0">
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'catalog-furniture']) }}">Catalog with Top Filters</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'product-furniture']) }}">Product Page</a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                    <div style="min-width: 190px">
+                                        <div class="h6 mb-2">Grocery Store</div>
+                                        <ul class="nav flex-column gap-2 mt-0">
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Catalog with Side Filters</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'product-grocery']) }}">Product Page</a>
+                                            </li>
+                                        </ul>
+                                        <div class="h6 pt-4 mb-2">Marketplace</div>
+                                        <ul class="nav flex-column gap-2 mt-0">
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'catalog-marketplace']) }}">Catalog with Top Filters</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'product-marketplace']) }}'">Digital Product Page</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'marketplace']) }}">Cart / Checkout</a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                    <div style="min-width: 190px">
+                                        <div class="h6 mb-2">Checkout v.1</div>
+                                        <ul class="nav flex-column gap-2 mt-0">
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'v1-cart']) }}">Shopping Cart</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'v1-delivery-1']) }}">Delivery Info (Step 1)</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'v1-delivery-2']) }}">Delivery Info (Step 2)</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'v1-shipping']) }}">Shipping Address</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'v1-payment']) }}">Payment</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'v1-thankyou']) }}">Thank You Page</a>
+                                            </li>
+                                        </ul>
+                                        <div class="h6 pt-4 mb-2">Checkout v.2</div>
+                                        <ul class="nav flex-column gap-2 mt-0">
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'v2-cart']) }}">Shopping Cart</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'v2-delivery']) }}">Delivery Info</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'v2-pickup']) }}">Pickup from Store</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'v2-thankyou']) }}">Thank You Page</a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+                        </li>
+                        <li class="nav-item dropdown py-lg-2 me-lg-n1 me-xl-0">
+                            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
+                                data-bs-trigger="hover" data-bs-auto-close="outside" aria-expanded="false">Account</a>
+                            <ul class="dropdown-menu" style="--cz-dropdown-spacer: .875rem">
+                                <li class="dropend">
+                                    <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Auth
+                                        Pages</a>
+                                    <ul class="dropdown-menu">
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'signin']) }}">Sign In</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'signup']) }}">Sign Up</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'password-recovery']) }}">Password
+                                                Recovery</a></li>
+                                    </ul>
+                                </li>
+                                <li class="dropend">
+                                    <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Shop
+                                        User</a>
+                                    <ul class="dropdown-menu">
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'orders']) }}">Orders History</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'wishlist']) }}">Wishlist</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'payment']) }}">Payment Methods</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'reviews']) }}">My Reviews</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'info']) }}">Personal Info</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'addresses']) }}">Addresses</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'notifications']) }}">Notifications</a>
+                                        </li>
+                                    </ul>
+                                </li>
+                                <li class="dropend">
+                                    <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                        aria-expanded="false">Marketplace User</a>
+                                    <ul class="dropdown-menu">
+                                        <li><a class="dropdown-item"
+                                                href="{{ route('second', ['account', 'marketplace-dashboard']) }}">Dashboard</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-products']) }}">Products</a>
+                                        </li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-sales']) }}">Sales</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-payouts']) }}">Payouts</a>
+                                        </li>
+                                        <li><a class="dropdown-item"
+                                                href="{{ route('second', ['account', 'marketplace-purchases']) }}">Purchases</a></li>
+                                        <li><a class="dropdown-item"
+                                                href="{{ route('second', ['account', 'marketplace-favorites']) }}">Favorites</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-settings']) }}">Settings</a>
+                                        </li>
+                                    </ul>
+                                </li>
+                            </ul>
+                        </li>
+                        <li class="nav-item dropdown py-lg-2 me-lg-n1 me-xl-0">
+                            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
+                                data-bs-trigger="hover" data-bs-auto-close="outside" aria-expanded="false">Pages</a>
+                            <ul class="dropdown-menu" style="--cz-dropdown-spacer: .875rem">
+                                <li class="dropend">
+                                    <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">About</a>
+                                    <ul class="dropdown-menu">
+                                        <li><a class="dropdown-item" href="{{ route('second', ['about', 'v1']) }}">About v.1</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['about', 'v2']) }}">About v.2</a></li>
+                                    </ul>
+                                </li>
+                                <li class="dropend">
+                                    <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Blog</a>
+                                    <ul class="dropdown-menu">
+                                        <li><a class="dropdown-item" href="{{ route('second', ['blog', 'grid-v1']) }}">Grid View v.1</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['blog', 'grid-v2']) }}">Grid View v.2</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['blog', 'list']) }}">List View</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['blog', 'single-v1']) }}">Single Post v.1</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['blog', 'single-v2']) }}">Single Post v.2</a></li>
+                                    </ul>
+                                </li>
+                                <li class="dropend">
+                                    <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                        aria-expanded="false">Contact</a>
+                                    <ul class="dropdown-menu">
+                                        <li><a class="dropdown-item" href="{{ route('second', ['contact', 'v1']) }}">Contact v.1</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['contact', 'v2']) }}">Contact v.2</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['contact', 'v3']) }}">Contact v.3</a></li>
+                                    </ul>
+                                </li>
+                                <li class="dropend">
+                                    <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Help
+                                        Center</a>
+                                    <ul class="dropdown-menu">
+                                        <li><a class="dropdown-item" href="{{ route('second', ['help', 'topics-v1']) }}">Help Topics v.1</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['help', 'topics-v2']) }}">Help Topics v.2</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['help', 'single-article-v1']) }}">Help Single
+                                                Article v.1</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['help', 'single-article-v2']) }}">Help Single
+                                                Article v.2</a></li>
+                                    </ul>
+                                </li>
+                                <li class="dropend">
+                                    <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">404
+                                        Error</a>
+                                    <ul class="dropdown-menu">
+                                        <li><a class="dropdown-item" href="{{ route('second', ['404', 'electronics']) }}">404 Electronics</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['404', 'fashion']) }}">404 Fashion</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['404', 'furniture']) }}">404 Furniture</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['404', 'grocery']) }}">404 Grocery</a></li>
+                                    </ul>
+                                </li>
+                                <li><a class="dropdown-item" href="{{ route('any', 'terms-and-conditions')}}">Terms &amp; Conditions</a>
+                                </li>
+                            </ul>
+                        </li>                        
+                    </ul>
+                </div>
+
+                <!-- Account button visible on screens < 768px wide (md breakpoint) -->
+                <div class="offcanvas-header nav border-top px-0 py-3 mt-3 d-md-none">
+                    <a class="nav-link justify-content-center w-100" href="{{ route('second', ['account', 'signin']) }}">
+                        <i class="ci-user fs-lg opacity-60 ms-n2 me-2"></i>
+                        Account
+                    </a>
+                </div>
+            </nav>
+
+            <!-- Button group -->
+            <div class="d-flex align-items-center">
+
+                <!-- Theme switcher (light/dark/auto) -->
+                <div class="dropdown">
+                    <button type="button"
+                        class="theme-switcher btn btn-icon btn-lg btn-outline-secondary fs-lg border-0 rounded-circle animate-scale"
+                        data-bs-toggle="dropdown" aria-expanded="false" aria-label="Toggle theme (light)">
+                        <span class="theme-icon-active d-flex animate-target">
+                            <i class="ci-sun"></i>
+                        </span>
+                    </button>
+                    <ul class="dropdown-menu" style="--cz-dropdown-min-width: 9rem">
+                        <li>
+                            <button type="button" class="dropdown-item active" data-bs-theme-value="light"
+                                aria-pressed="true">
+                                <span class="theme-icon d-flex fs-base me-2">
+                                    <i class="ci-sun"></i>
+                                </span>
+                                <span class="theme-label">Light</span>
+                                <i class="item-active-indicator ci-check ms-auto"></i>
+                            </button>
+                        </li>
+                        <li>
+                            <button type="button" class="dropdown-item" data-bs-theme-value="dark"
+                                aria-pressed="false">
+                                <span class="theme-icon d-flex fs-base me-2">
+                                    <i class="ci-moon"></i>
+                                </span>
+                                <span class="theme-label">Dark</span>
+                                <i class="item-active-indicator ci-check ms-auto"></i>
+                            </button>
+                        </li>
+                        <li>
+                            <button type="button" class="dropdown-item" data-bs-theme-value="auto"
+                                aria-pressed="false">
+                                <span class="theme-icon d-flex fs-base me-2">
+                                    <i class="ci-auto"></i>
+                                </span>
+                                <span class="theme-label">Auto</span>
+                                <i class="item-active-indicator ci-check ms-auto"></i>
+                            </button>
+                        </li>
+                    </ul>
+                </div>
+
+                <!-- Search toggle button -->
+                <button type="button"
+                    class="btn btn-icon btn-lg fs-xl btn-outline-secondary border-0 rounded-circle animate-shake"
+                    data-bs-toggle="offcanvas" data-bs-target="#searchBox" aria-controls="searchBox"
+                    aria-label="Toggle search bar">
+                    <i class="ci-search animate-target"></i>
+                </button>
+
+                <!-- Account button visible on screens > 768px wide (md breakpoint) -->
+                <a class="btn btn-icon btn-lg fs-lg btn-outline-secondary border-0 rounded-circle animate-shake d-none d-md-inline-flex"
+                    href="{{ route('second', ['account', 'signin']) }}">
+                    <i class="ci-user animate-target"></i>
+                    <span class="visually-hidden">Account</span>
+                </a>
+
+                <!-- Cart button -->
+                <button type="button"
+                    class="btn btn-icon btn-lg fs-xl btn-outline-secondary position-relative border-0 rounded-circle animate-scale"
+                    data-bs-toggle="offcanvas" data-bs-target="#shoppingCart" aria-controls="shoppingCart"
+                    aria-label="Shopping cart">
+                    <span class="position-absolute top-0 start-100 badge fs-xs text-bg-primary rounded-pill mt-1 ms-n4 z-2"
+                        style="--cz-badge-padding-y: .25em; --cz-badge-padding-x: .42em">3</span>
+                    <i class="ci-shopping-bag animate-target me-1"></i>
+                </button>
+            </div>
+        </div>
+    </header>
+
+    <main class="content-wrapper">
+        <div class="container pt-4 pt-md-5 pb-5 mt-sm-3 mt-md-0 mb-2 mb-md-3 mb-lg-4 mb-xl-5">
+            <div class="row">
+                <div class="col-xl-10 offset-xl-1">
+                    <h1 class="h3 pb-2 pb-md-3">Checkout</h1>
+                </div>
+            </div>
+            <div class="row">
+
+                <!-- Cart items -->
+                <div class="col-lg-6 col-xl-5 offset-xl-1 mb-5 mb-lg-0">
+                    <div class="vstack gap-4">
+
+                        <!-- Item -->
+                        <div class="d-flex align-items-center">
+                            <a class="flex-sm-shrink-0" href="{{ route('second', ['shop', 'product-marketplace']) }}'" style="width: 142px">
+                                <div class="ratio bg-body-tertiary rounded overflow-hidden"
+                                    style="--cz-aspect-ratio: calc(110 / 142 * 100%)">
+                                    <img src="/img/home/marketplace/cart/01.jpg" alt="Thumbnail">
+                                </div>
+                            </a>
+                            <div class="w-100 min-w-0 ps-3">
+                                <h5 class="d-flex animate-underline mb-2">
+                                    <a class="d-block fs-sm fw-medium text-truncate animate-target"
+                                        href="{{ route('second', ['shop', 'product-marketplace']) }}'">Multi device mockup PSD</a>
+                                </h5>
+                                <div class="h6 pb-1 mb-2">$27.00</div>
+                                <div class="d-flex align-items-center justify-content-between gap-1">
+                                    <div class="w-100" style="max-width: 185px">
+                                        <select class="form-select form-select-sm rounded-pill"
+                                            data-select='{
+                        "classNames": {
+                          "containerInner": ["form-select", "form-select-sm", "rounded-pill"]
+                        },
+                        "removeItemButton": false
+                      }'
+                                            aria-label="Small pill select">
+                                            <option value="standard">Standard license</option>
+                                            <option value="extended">Extended license</option>
+                                        </select>
+                                    </div>
+                                    <button type="button" class="btn btn-icon btn-sm flex-shrink-0 fs-sm"
+                                        data-bs-toggle="tooltip" data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
+                                        aria-label="Remove from cart">
+                                        <i class="ci-trash fs-base"></i>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Item -->
+                        <div class="d-flex align-items-center">
+                            <a class="flex-sm-shrink-0" href="{{ route('second', ['shop', 'product-marketplace']) }}'" style="width: 142px">
+                                <div class="ratio bg-body-tertiary rounded overflow-hidden"
+                                    style="--cz-aspect-ratio: calc(110 / 142 * 100%)">
+                                    <img src="/img/home/marketplace/cart/02.jpg" alt="Thumbnail">
+                                </div>
+                            </a>
+                            <div class="w-100 min-w-0 ps-3">
+                                <h5 class="d-flex animate-underline mb-2">
+                                    <a class="d-block fs-sm fw-medium text-truncate animate-target"
+                                        href="{{ route('second', ['shop', 'product-marketplace']) }}'">Isometric device mockups</a>
+                                </h5>
+                                <div class="h6 pb-1 mb-2">$12.00</div>
+                                <div class="d-flex align-items-center justify-content-between gap-2">
+                                    <div class="w-100" style="max-width: 185px">
+                                        <select class="form-select form-select-sm rounded-pill"
+                                            data-select='{
+                        "classNames": {
+                          "containerInner": ["form-select", "form-select-sm", "rounded-pill"]
+                        },
+                        "removeItemButton": false
+                      }'
+                                            aria-label="Small pill select">
+                                            <option value="standard">Standard license</option>
+                                            <option value="extended">Extended license</option>
+                                        </select>
+                                    </div>
+                                    <button type="button" class="btn btn-icon btn-sm flex-shrink-0 fs-sm"
+                                        data-bs-toggle="tooltip" data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
+                                        aria-label="Remove from cart">
+                                        <i class="ci-trash fs-base"></i>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Item -->
+                        <div class="d-flex align-items-center">
+                            <a class="flex-sm-shrink-0" href="{{ route('second', ['shop', 'product-marketplace']) }}'" style="width: 142px">
+                                <div class="ratio bg-body-tertiary rounded overflow-hidden"
+                                    style="--cz-aspect-ratio: calc(110 / 142 * 100%)">
+                                    <img src="/img/home/marketplace/cart/03.jpg" alt="Thumbnail">
+                                </div>
+                            </a>
+                            <div class="w-100 min-w-0 ps-3">
+                                <h5 class="d-flex animate-underline mb-2">
+                                    <a class="d-block fs-sm fw-medium text-truncate animate-target"
+                                        href="{{ route('second', ['shop', 'product-marketplace']) }}'">Modern poster with abstract shapes</a>
+                                </h5>
+                                <div class="h6 pb-1 mb-2">$8.00</div>
+                                <div class="d-flex align-items-center justify-content-between gap-2">
+                                    <div class="w-100" style="max-width: 185px">
+                                        <select class="form-select form-select-sm rounded-pill"
+                                            data-select='{
+                        "classNames": {
+                          "containerInner": ["form-select", "form-select-sm", "rounded-pill"]
+                        },
+                        "removeItemButton": false
+                      }'
+                                            aria-label="Small pill select">
+                                            <option value="standard">Standard license</option>
+                                            <option value="extended">Extended license</option>
+                                        </select>
+                                    </div>
+                                    <button type="button" class="btn btn-icon btn-sm flex-shrink-0 fs-sm"
+                                        data-bs-toggle="tooltip" data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
+                                        aria-label="Remove from cart">
+                                        <i class="ci-trash fs-base"></i>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+
+                <!-- Payment -->
+                <div class="col-lg-5 col-xl-4 offset-lg-1">
+                    <div class="form-check fs-xl">
+                        <input type="radio" class="form-check-input" id="card" name="payment" checked>
+                        <label for="card" class="form-check-label fs-base fw-medium text-body-emphasis ps-1">Pay by
+                            card</label>
+                    </div>
+                    <p class="fs-sm">Visa, Mastercard, Maestro, Discover</p>
+                    <div class="position-relative mb-3">
+                        <i class="ci-mail position-absolute top-50 start-0 translate-middle-y ms-3"></i>
+                        <input type="email" class="form-control form-icon-start rounded-pill"
+                            value="example@coderthemes" placeholder="Email address">
+                    </div>
+                    <div class="position-relative mb-3" data-input-format='{"creditCard": true}'>
+                        <input type="text" class="form-control form-icon-end rounded-pill"
+                            placeholder="Enter card number">
+                        <span class="position-absolute d-flex top-50 end-0 translate-middle-y fs-5 text-body-tertiary me-3"
+                            data-card-icon></span>
+                    </div>
+                    <div class="d-flex gap-3">
+                        <input type="text" class="form-control w-50 rounded-pill"
+                            data-input-format='{"date": true, "datePattern": ["m", "y"]}' placeholder="MM/YY">
+                        <input type="text" class="form-control w-50 rounded-pill" maxlength="4"
+                            data-input-format='{"numeral": true, "numeralPositiveOnly": true, "numeralThousandsGroupStyle": "none"}'
+                            placeholder="CVC">
+                    </div>
+                    <div class="form-check fs-xl mt-4">
+                        <input type="radio" class="form-check-input" id="paypal" name="payment">
+                        <label for="paypal"
+                            class="form-check-label fs-base fw-medium text-body-emphasis ps-1">PayPal</label>
+                    </div>
+                    <div class="d-flex align-items-center justify-content-between w-100 mt-4 mb-3">
+                        <span class="fs-sm">Estimated total:</span>
+                        <span class="h6 mb-0">$47</span>
+                    </div>
+                    <button type="button" class="btn btn-lg btn-dark w-100 rounded-pill">Pay $47</button>
+                    <div class="d-flex align-items-center justify-content-center fs-xs text-body-secondary mt-3">
+                        <i class="ci-lock me-1"></i>
+                        Your payment is secure
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    @include('layouts.partials/footer3')
+    
+@endsection
+
+@section('scripts')
+@endsection
diff --git a/resources/views/checkout/v1-cart.blade.php b/resources/views/checkout/v1-cart.blade.php
new file mode 100644
index 0000000..5118ca5
--- /dev/null
+++ b/resources/views/checkout/v1-cart.blade.php
@@ -0,0 +1,988 @@
+@extends('layouts.landing', ['title' => 'Checkout v.1 - Shopping Cart'])
+
+@section('content')
+    <!-- Authentication offcanvas -->
+    <div class="offcanvas offcanvas-end pb-sm-2 px-sm-2" id="authForm" tabindex="-1" aria-labelledby="authFormLabel"
+        style="width: 500px">
+        <div class="offcanvas-header flex-column align-items-start py-3 pt-lg-4">
+            <div class="d-flex align-items-center justify-content-between w-100 mb-3 mb-lg-4">
+                <h4 class="offcanvas-title" id="authFormLabel">Login to continue</h4>
+                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+            </div>
+            <ul class="nav nav-underline" role="tablist">
+                <li class="nav-item" role="presentation">
+                    <button type="button" class="nav-link" id="login-tab" data-bs-toggle="tab"
+                        data-bs-target="#login-tab-pane" role="tab" aria-controls="login-tab-pane"
+                        aria-selected="false">
+                        Login
+                    </button>
+                </li>
+                <li class="nav-item" role="presentation">
+                    <button type="button" class="nav-link active" id="register-tab" data-bs-toggle="tab"
+                        data-bs-target="#register-tab-pane" role="tab" aria-controls="register-tab-pane"
+                        aria-selected="true">
+                        Register
+                    </button>
+                </li>
+            </ul>
+        </div>
+        <div class="offcanvas-body tab-content pt-2">
+
+            <!-- Login form -->
+            <div class="tab-pane fade" id="login-tab-pane" role="tabpanel" aria-labelledby="login-tab">
+                <form class="needs-validation" novalidate>
+                    <div class="position-relative mb-4">
+                        <label for="login-email" class="form-label">Email</label>
+                        <input type="email" class="form-control form-control-lg" id="login-email" required>
+                        <div class="invalid-tooltip bg-transparent py-0">Enter a valid email address!</div>
+                    </div>
+                    <div class="mb-4">
+                        <label for="login-password" class="form-label">Password</label>
+                        <div class="password-toggle">
+                            <input type="password" class="form-control form-control-lg" id="login-password" required>
+                            <div class="invalid-tooltip bg-transparent py-0">Password is incorrect!</div>
+                            <label class="password-toggle-button fs-lg" aria-label="Show/hide password">
+                                <input type="checkbox" class="btn-check">
+                            </label>
+                        </div>
+                    </div>
+                    <div class="d-flex align-items-center justify-content-between mb-4">
+                        <div class="form-check me-2">
+                            <input type="checkbox" class="form-check-input" id="remember-30">
+                            <label for="remember-30" class="form-check-label">Remember for 30 days</label>
+                        </div>
+                        <div class="nav">
+                            <a class="nav-link animate-underline p-0" href="{{ route('second', ['account', 'password-recovery']) }}">
+                                <span class="animate-target">Forgot password?</span>
+                            </a>
+                        </div>
+                    </div>
+                    <button type="submit" class="btn btn-lg btn-primary w-100">
+                        Login to your account
+                        <i class="ci-chevron-right fs-lg ms-1 me-n1"></i>
+                    </button>
+                </form>
+            </div>
+
+            <!-- Register form -->
+            <div class="tab-pane fade show active" id="register-tab-pane" role="tabpanel" aria-labelledby="register-tab">
+                <form class="needs-validation" novalidate>
+                    <div class="position-relative mb-4">
+                        <label for="register-email" class="form-label">Email</label>
+                        <input type="email" class="form-control form-control-lg" id="register-email" required>
+                        <div class="invalid-tooltip bg-transparent py-0">Enter a valid email address!</div>
+                    </div>
+                    <div class="mb-4">
+                        <label for="register-password" class="form-label">Password</label>
+                        <div class="password-toggle">
+                            <input type="password" class="form-control form-control-lg" id="register-password"
+                                minlength="8" placeholder="Minimum 8 characters" required>
+                            <div class="invalid-tooltip bg-transparent py-0">Password does not meet the required criteria!
+                            </div>
+                            <label class="password-toggle-button fs-lg" aria-label="Show/hide password">
+                                <input type="checkbox" class="btn-check">
+                            </label>
+                        </div>
+                    </div>
+                    <div class="d-flex flex-column gap-2 mb-4">
+                        <div class="form-check">
+                            <input type="checkbox" class="form-check-input" id="save-pass">
+                            <label for="save-pass" class="form-check-label">Save the password</label>
+                        </div>
+                        <div class="form-check">
+                            <input type="checkbox" class="form-check-input" id="privacy" required>
+                            <label for="privacy" class="form-check-label">I have read and accept the <a
+                                    class="text-dark-emphasis" href="#!">Privacy Policy</a></label>
+                        </div>
+                    </div>
+                    <button type="submit" class="btn btn-lg btn-primary w-100">
+                        Create an account
+                        <i class="ci-chevron-right fs-lg ms-1 me-n1"></i>
+                    </button>
+                    <div class="pt-5">
+                        <h6>Cartzilla account benefits</h6>
+                        <ul class="list-unstyled d-flex flex-column gap-2 fs-sm mb-0">
+                            <li class="d-flex align-items-center pb-1">
+                                <div
+                                    class="d-flex align-items-center justify-content-center bg-body-tertiary rounded-circle p-2">
+                                    <i class="ci-mail fs-base text-dark-emphasis m-1"></i>
+                                </div>
+                                <div class="ps-2 ms-1">Subscribe to your favorite products</div>
+                            </li>
+                            <li class="d-flex align-items-center pb-1">
+                                <div
+                                    class="d-flex align-items-center justify-content-center bg-body-tertiary rounded-circle p-2">
+                                    <i class="ci-settings fs-base text-dark-emphasis m-1"></i>
+                                </div>
+                                <div class="ps-2 ms-1">View and manage your orders and withlist</div>
+                            </li>
+                            <li class="d-flex align-items-center pb-1">
+                                <div
+                                    class="d-flex align-items-center justify-content-center bg-body-tertiary rounded-circle p-2">
+                                    <i class="ci-gift fs-base text-dark-emphasis m-1"></i>
+                                </div>
+                                <div class="ps-2 ms-1">Earn rewards for future purchases</div>
+                            </li>
+                            <li class="d-flex align-items-center pb-1">
+                                <div
+                                    class="d-flex align-items-center justify-content-center bg-body-tertiary rounded-circle p-2">
+                                    <i class="ci-percent fs-base text-dark-emphasis m-1"></i>
+                                </div>
+                                <div class="ps-2 ms-1">Receive exclusive offers and discounts</div>
+                            </li>
+                            <li class="d-flex align-items-center pb-1">
+                                <div
+                                    class="d-flex align-items-center justify-content-center bg-body-tertiary rounded-circle p-2">
+                                    <i class="ci-heart fs-base text-dark-emphasis m-1"></i>
+                                </div>
+                                <div class="ps-2 ms-1">Create multiple wishlists</div>
+                            </li>
+                        </ul>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+
+    @include('layouts.partials/offcanvas')
+
+    @include('layouts.partials/navbar', ['wishlist' => true])
+
+    <main class="content-wrapper">
+
+        <!-- Breadcrumb -->
+        <nav class="container pt-3 my-3 my-md-4" aria-label="breadcrumb">
+            <ol class="breadcrumb">
+                <li class="breadcrumb-item"><a href="{{ route('second', ['home', 'electronics']) }}">Home</a></li>
+                <li class="breadcrumb-item"><a href="{{ route('second', ['shop', 'catalog-electronics']) }}'">Shop</a></li>
+                <li class="breadcrumb-item active" aria-current="page">Cart</li>
+            </ol>
+        </nav>
+
+
+        <!-- Items in the cart + Order summary -->
+        <section class="container pb-5 mb-2 mb-md-3 mb-lg-4 mb-xl-5">
+            <h1 class="h3 mb-4">Shopping cart</h1>
+            <div class="row">
+
+                <!-- Items list -->
+                <div class="col-lg-8">
+                    <div class="pe-lg-2 pe-xl-3 me-xl-3">
+                        <p class="fs-sm">Buy <span class="text-dark-emphasis fw-semibold">$183</span> more to get <span
+                                class="text-dark-emphasis fw-semibold">Free Shipping</span></p>
+                        <div class="progress w-100 overflow-visible mb-4" role="progressbar"
+                            aria-label="Free shipping progress" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"
+                            style="height: 4px">
+                            <div class="progress-bar bg-warning rounded-pill position-relative overflow-visible"
+                                style="width: 75%; height: 4px">
+                                <div class="position-absolute top-50 end-0 d-flex align-items-center justify-content-center translate-middle-y bg-body border border-warning rounded-circle me-n1"
+                                    style="width: 1.5rem; height: 1.5rem">
+                                    <i class="ci-star-filled text-warning"></i>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Table of items -->
+                        <table class="table position-relative z-2 mb-4">
+                            <thead>
+                                <tr>
+                                    <th scope="col" class="fs-sm fw-normal py-3 ps-0"><span
+                                            class="text-body">Product</span></th>
+                                    <th scope="col" class="text-body fs-sm fw-normal py-3 d-none d-xl-table-cell"><span
+                                            class="text-body">Price</span></th>
+                                    <th scope="col" class="text-body fs-sm fw-normal py-3 d-none d-md-table-cell"><span
+                                            class="text-body">Quantity</span></th>
+                                    <th scope="col" class="text-body fs-sm fw-normal py-3 d-none d-md-table-cell"><span
+                                            class="text-body">Total</span></th>
+                                    <th scope="col" class="py-0 px-0">
+                                        <div class="nav justify-content-end">
+                                            <button type="button"
+                                                class="nav-link d-inline-block text-decoration-underline text-nowrap py-3 px-0">Clear
+                                                cart</button>
+                                        </div>
+                                    </th>
+                                </tr>
+                            </thead>
+                            <tbody class="align-middle">
+
+                                <!-- Item -->
+                                <tr>
+                                    <td class="py-3 ps-0">
+                                        <div class="d-flex align-items-center">
+                                            <a class="flex-shrink-0" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                                <img src="/img/shop/electronics/thumbs/08.png" width="110"
+                                                    alt="iPhone 14">
+                                            </a>
+                                            <div class="w-100 min-w-0 ps-2 ps-xl-3">
+                                                <h5 class="d-flex animate-underline mb-2">
+                                                    <a class="d-block fs-sm fw-medium text-truncate animate-target"
+                                                        href="{{ route('second', ['shop', 'product-general-electronics']) }}">Apple iPhone 14
+                                                        128GB</a>
+                                                </h5>
+                                                <ul class="list-unstyled gap-1 fs-xs mb-0">
+                                                    <li><span class="text-body-secondary">Color:</span> <span
+                                                            class="text-dark-emphasis fw-medium">White</span></li>
+                                                    <li><span class="text-body-secondary">Model:</span> <span
+                                                            class="text-dark-emphasis fw-medium">128GB</span></li>
+                                                    <li class="d-xl-none"><span class="text-body-secondary">Price:</span>
+                                                        <span class="text-dark-emphasis fw-medium">$899.00</span></li>
+                                                </ul>
+                                                <div class="count-input rounded-2 d-md-none mt-3">
+                                                    <button type="button" class="btn btn-sm btn-icon" data-decrement
+                                                        aria-label="Decrement quantity">
+                                                        <i class="ci-minus"></i>
+                                                    </button>
+                                                    <input type="number" class="form-control form-control-sm"
+                                                        value="1" readonly>
+                                                    <button type="button" class="btn btn-sm btn-icon" data-increment
+                                                        aria-label="Increment quantity">
+                                                        <i class="ci-plus"></i>
+                                                    </button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </td>
+                                    <td class="h6 py-3 d-none d-xl-table-cell">$899.00</td>
+                                    <td class="py-3 d-none d-md-table-cell">
+                                        <div class="count-input">
+                                            <button type="button" class="btn btn-icon" data-decrement
+                                                aria-label="Decrement quantity">
+                                                <i class="ci-minus"></i>
+                                            </button>
+                                            <input type="number" class="form-control" value="1" readonly>
+                                            <button type="button" class="btn btn-icon" data-increment
+                                                aria-label="Increment quantity">
+                                                <i class="ci-plus"></i>
+                                            </button>
+                                        </div>
+                                    </td>
+                                    <td class="h6 py-3 d-none d-md-table-cell">$899.00</td>
+                                    <td class="text-end py-3 px-0">
+                                        <button type="button" class="btn-close fs-sm" data-bs-toggle="tooltip"
+                                            data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
+                                            aria-label="Remove from cart"></button>
+                                    </td>
+                                </tr>
+
+                                <!-- Item -->
+                                <tr>
+                                    <td class="py-3 ps-0">
+                                        <div class="d-flex align-items-center">
+                                            <a class="position-relative flex-shrink-0"
+                                                href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                                <span
+                                                    class="badge text-bg-danger position-absolute top-0 start-0">-10%</span>
+                                                <img src="/img/shop/electronics/thumbs/09.png" width="110"
+                                                    alt="iPad Pro">
+                                            </a>
+                                            <div class="w-100 min-w-0 ps-2 ps-xl-3">
+                                                <h5 class="d-flex animate-underline mb-2">
+                                                    <a class="d-block fs-sm fw-medium text-truncate animate-target"
+                                                        href="{{ route('second', ['shop', 'product-general-electronics']) }}">Tablet Apple iPad Pro
+                                                        M2</a>
+                                                </h5>
+                                                <ul class="list-unstyled gap-1 fs-xs mb-0">
+                                                    <li><span class="text-body-secondary">Color:</span> <span
+                                                            class="text-dark-emphasis fw-medium">Black</span></li>
+                                                    <li><span class="text-body-secondary">Model:</span> <span
+                                                            class="text-dark-emphasis fw-medium">256GB</span></li>
+                                                    <li class="d-xl-none"><span class="text-body-secondary">Price:</span>
+                                                        <span class="text-dark-emphasis fw-medium">$989.00 <del
+                                                                class="text-body-tertiary fw-normal">$1,099.00</del></span>
+                                                    </li>
+                                                </ul>
+                                                <div class="count-input rounded-2 d-md-none mt-3">
+                                                    <button type="button" class="btn btn-sm btn-icon" data-decrement
+                                                        aria-label="Decrement quantity">
+                                                        <i class="ci-minus"></i>
+                                                    </button>
+                                                    <input type="number" class="form-control form-control-sm"
+                                                        value="1" readonly>
+                                                    <button type="button" class="btn btn-sm btn-icon" data-increment
+                                                        aria-label="Increment quantity">
+                                                        <i class="ci-plus"></i>
+                                                    </button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </td>
+                                    <td class="h6 py-3 d-none d-xl-table-cell">$989.00 <del
+                                            class="text-body-tertiary fs-xs fw-normal">$1,099.00</del></td>
+                                    <td class="py-3 d-none d-md-table-cell">
+                                        <div class="count-input">
+                                            <button type="button" class="btn btn-icon" data-decrement
+                                                aria-label="Decrement quantity">
+                                                <i class="ci-minus"></i>
+                                            </button>
+                                            <input type="number" class="form-control" value="1" readonly>
+                                            <button type="button" class="btn btn-icon" data-increment
+                                                aria-label="Increment quantity">
+                                                <i class="ci-plus"></i>
+                                            </button>
+                                        </div>
+                                    </td>
+                                    <td class="h6 py-3 d-none d-md-table-cell">$989.00</td>
+                                    <td class="text-end py-3 px-0">
+                                        <button type="button" class="btn-close fs-sm" data-bs-toggle="tooltip"
+                                            data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
+                                            aria-label="Remove from cart"></button>
+                                    </td>
+                                </tr>
+
+                                <!-- Item -->
+                                <tr>
+                                    <td class="py-3 ps-0">
+                                        <div class="d-flex align-items-center">
+                                            <a class="flex-shrink-0" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                                <img src="/img/shop/electronics/thumbs/01.png" width="110"
+                                                    alt="Smart Watch">
+                                            </a>
+                                            <div class="w-100 min-w-0 ps-2 ps-xl-3">
+                                                <h5 class="d-flex animate-underline mb-2">
+                                                    <a class="d-block fs-sm fw-medium text-truncate animate-target"
+                                                        href="{{ route('second', ['shop', 'product-general-electronics']) }}">Smart Watch Series
+                                                        7</a>
+                                                </h5>
+                                                <ul class="list-unstyled gap-1 fs-xs mb-0">
+                                                    <li><span class="text-body-secondary">Color:</span> <span
+                                                            class="text-dark-emphasis fw-medium">White</span></li>
+                                                    <li><span class="text-body-secondary">Model:</span> <span
+                                                            class="text-dark-emphasis fw-medium">44 mm</span></li>
+                                                    <li class="d-xl-none"><span class="text-body-secondary">Price:</span>
+                                                        <span class="text-dark-emphasis fw-medium">$429.00</span></li>
+                                                </ul>
+                                                <div class="count-input rounded-2 d-md-none mt-3">
+                                                    <button type="button" class="btn btn-sm btn-icon" data-decrement
+                                                        aria-label="Decrement quantity">
+                                                        <i class="ci-minus"></i>
+                                                    </button>
+                                                    <input type="number" class="form-control form-control-sm"
+                                                        value="1" readonly>
+                                                    <button type="button" class="btn btn-sm btn-icon" data-increment
+                                                        aria-label="Increment quantity">
+                                                        <i class="ci-plus"></i>
+                                                    </button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </td>
+                                    <td class="h6 py-3 d-none d-xl-table-cell">$429.00</td>
+                                    <td class="py-3 d-none d-md-table-cell">
+                                        <div class="count-input">
+                                            <button type="button" class="btn btn-icon" data-decrement
+                                                aria-label="Decrement quantity">
+                                                <i class="ci-minus"></i>
+                                            </button>
+                                            <input type="number" class="form-control" value="1" readonly>
+                                            <button type="button" class="btn btn-icon" data-increment
+                                                aria-label="Increment quantity">
+                                                <i class="ci-plus"></i>
+                                            </button>
+                                        </div>
+                                    </td>
+                                    <td class="h6 py-3 d-none d-md-table-cell">$429.00</td>
+                                    <td class="text-end py-3 px-0">
+                                        <button type="button" class="btn-close fs-sm" data-bs-toggle="tooltip"
+                                            data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
+                                            aria-label="Remove from cart"></button>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+
+                        <div class="nav position-relative z-2 mb-4 mb-lg-0">
+                            <a class="nav-link animate-underline px-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}'">
+                                <i class="ci-chevron-left fs-lg me-1"></i>
+                                <span class="animate-target">Continue shopping</span>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+
+
+                <!-- Order summary (sticky sidebar) -->
+                <aside class="col-lg-4" style="margin-top: -100px">
+                    <div class="position-sticky top-0" style="padding-top: 100px">
+                        <div class="bg-body-tertiary rounded-5 p-4 mb-3">
+                            <div class="p-sm-2 p-lg-0 p-xl-2">
+                                <h5 class="border-bottom pb-4 mb-4">Order summary</h5>
+                                <ul class="list-unstyled fs-sm gap-3 mb-0">
+                                    <li class="d-flex justify-content-between">
+                                        Subtotal (3 items):
+                                        <span class="text-dark-emphasis fw-medium">$2,427.00</span>
+                                    </li>
+                                    <li class="d-flex justify-content-between">
+                                        Saving:
+                                        <span class="text-danger fw-medium">-$110.00</span>
+                                    </li>
+                                    <li class="d-flex justify-content-between">
+                                        Tax collected:
+                                        <span class="text-dark-emphasis fw-medium">$73.40</span>
+                                    </li>
+                                    <li class="d-flex justify-content-between">
+                                        Shipping:
+                                        <span class="text-dark-emphasis fw-medium">Calculated at checkout</span>
+                                    </li>
+                                </ul>
+                                <div class="border-top pt-4 mt-4">
+                                    <div class="d-flex justify-content-between mb-3">
+                                        <span class="fs-sm">Estimated total:</span>
+                                        <span class="h5 mb-0">$2,390.40</span>
+                                    </div>
+                                    <a class="btn btn-lg btn-primary w-100" href="{{ route('second', ['checkout', 'v1-delivery-1']) }}">
+                                        Proceed to checkout
+                                        <i class="ci-chevron-right fs-lg ms-1 me-n1"></i>
+                                    </a>
+                                    <div class="nav justify-content-center fs-sm mt-3">
+                                        <a class="nav-link text-decoration-underline p-0 me-1" href="#authForm"
+                                            data-bs-toggle="offcanvas" role="button">Create an account</a>
+                                        and get
+                                        <span class="text-dark-emphasis fw-medium ms-1">239 bonuses</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="accordion bg-body-tertiary rounded-5 p-4">
+                            <div class="accordion-item border-0">
+                                <h3 class="accordion-header" id="promoCodeHeading">
+                                    <button type="button"
+                                        class="accordion-button animate-underline collapsed py-0 ps-sm-2 ps-lg-0 ps-xl-2"
+                                        data-bs-toggle="collapse" data-bs-target="#promoCode" aria-expanded="false"
+                                        aria-controls="promoCode">
+                                        <i class="ci-percent fs-xl me-2"></i>
+                                        <span class="animate-target me-2">Apply promo code</span>
+                                    </button>
+                                </h3>
+                                <div class="accordion-collapse collapse" id="promoCode"
+                                    aria-labelledby="promoCodeHeading">
+                                    <div class="accordion-body pt-3 pb-2 ps-sm-2 px-lg-0 px-xl-2">
+                                        <form class="needs-validation d-flex gap-2" novalidate>
+                                            <div class="position-relative w-100">
+                                                <input type="text" class="form-control" placeholder="Enter promo code"
+                                                    required>
+                                                <div class="invalid-tooltip bg-transparent py-0">Enter a valid promo code!
+                                                </div>
+                                            </div>
+                                            <button type="submit" class="btn btn-dark">Apply</button>
+                                        </form>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </aside>
+            </div>
+        </section>
+
+
+        <!-- Trending products (Carousel) -->
+        <section class="container pb-4 pb-md-5 mb-2 mb-sm-0 mb-lg-2 mb-xl-4">
+            <h2 class="h3 border-bottom pb-4 mb-0">Trending products</h2>
+
+            <!-- Product carousel -->
+            <div class="position-relative mx-md-1">
+
+                <!-- External slider prev/next buttons visible on screens > 500px wide (sm breakpoint) -->
+                <button type="button"
+                    class="trending-prev btn btn-prev btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-start position-absolute top-50 start-0 z-2 translate-middle-y ms-n1 d-none d-sm-inline-flex"
+                    aria-label="Prev">
+                    <i class="ci-chevron-left fs-lg animate-target"></i>
+                </button>
+                <button type="button"
+                    class="trending-next btn btn-next btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-end position-absolute top-50 end-0 z-2 translate-middle-y me-n1 d-none d-sm-inline-flex"
+                    aria-label="Next">
+                    <i class="ci-chevron-right fs-lg animate-target"></i>
+                </button>
+
+                <!-- Slider -->
+                <div class="swiper py-4 px-sm-3"
+                    data-swiper='{
+            "slidesPerView": 2,
+            "spaceBetween": 24,
+            "loop": true,
+            "navigation": {
+              "prevEl": ".trending-prev",
+              "nextEl": ".trending-next"
+            },
+            "breakpoints": {
+              "768": {
+                "slidesPerView": 3
+              },
+              "992": {
+                "slidesPerView": 4
+              }
+            }
+          }'>
+                    <div class="swiper-wrapper">
+
+                        <!-- Item -->
+                        <div class="swiper-slide">
+                            <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+                                <div class="position-relative">
+                                    <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                                        <div class="d-flex flex-column gap-2">
+                                            <button type="button"
+                                                class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex"
+                                                aria-label="Add to Wishlist">
+                                                <i class="ci-heart fs-base animate-target"></i>
+                                            </button>
+                                            <button type="button"
+                                                class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex"
+                                                aria-label="Compare">
+                                                <i class="ci-refresh-cw fs-base animate-target"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                                        <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body"
+                                            data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                                            <i class="ci-more-vertical fs-lg"></i>
+                                        </button>
+                                        <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                                            <li>
+                                                <a class="dropdown-item" href="#!">
+                                                    <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                                                    Add to Wishlist
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a class="dropdown-item" href="#!">
+                                                    <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                                                    Compare
+                                                </a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                    <a class="d-block rounded-top overflow-hidden p-3 p-sm-4"
+                                        href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                        <span
+                                            class="badge bg-danger position-absolute top-0 start-0 mt-2 ms-2 mt-lg-3 ms-lg-3">-21%</span>
+                                        <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                                            <img src="/img/shop/electronics/01.png" alt="VR Glasses">
+                                        </div>
+                                    </a>
+                                </div>
+                                <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                                    <div class="d-flex align-items-center gap-2 mb-2">
+                                        <div class="d-flex gap-1 fs-xs">
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star text-body-tertiary opacity-75"></i>
+                                        </div>
+                                        <span class="text-body-tertiary fs-xs">(123)</span>
+                                    </div>
+                                    <h3 class="pb-1 mb-2">
+                                        <a class="d-block fs-sm fw-medium text-truncate"
+                                            href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                            <span class="animate-target">VRB01 Virtual Reality Glasses</span>
+                                        </a>
+                                    </h3>
+                                    <div class="d-flex align-items-center justify-content-between">
+                                        <div class="h5 lh-1 mb-0">$340.99 <del
+                                                class="text-body-tertiary fs-sm fw-normal">$430.00</del></div>
+                                        <button type="button"
+                                            class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2"
+                                            aria-label="Add to Cart">
+                                            <i class="ci-shopping-cart fs-base animate-target"></i>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Item -->
+                        <div class="swiper-slide">
+                            <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+                                <div class="position-relative">
+                                    <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                                        <div class="d-flex flex-column gap-2">
+                                            <button type="button"
+                                                class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex"
+                                                aria-label="Add to Wishlist">
+                                                <i class="ci-heart fs-base animate-target"></i>
+                                            </button>
+                                            <button type="button"
+                                                class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex"
+                                                aria-label="Compare">
+                                                <i class="ci-refresh-cw fs-base animate-target"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                                        <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body"
+                                            data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                                            <i class="ci-more-vertical fs-lg"></i>
+                                        </button>
+                                        <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                                            <li>
+                                                <a class="dropdown-item" href="#!">
+                                                    <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                                                    Add to Wishlist
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a class="dropdown-item" href="#!">
+                                                    <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                                                    Compare
+                                                </a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                    <a class="d-block rounded-top overflow-hidden p-3 p-sm-4"
+                                        href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                        <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                                            <img src="/img/shop/electronics/14.png" alt="iPhone 14">
+                                        </div>
+                                    </a>
+                                </div>
+                                <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                                    <div class="d-flex align-items-center gap-2 mb-2">
+                                        <div class="d-flex gap-1 fs-xs">
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-half text-warning"></i>
+                                        </div>
+                                        <span class="text-body-tertiary fs-xs">(142)</span>
+                                    </div>
+                                    <h3 class="pb-1 mb-2">
+                                        <a class="d-block fs-sm fw-medium text-truncate"
+                                            href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                            <span class="animate-target">Apple iPhone 14 128GB Blue</span>
+                                        </a>
+                                    </h3>
+                                    <div class="d-flex align-items-center justify-content-between">
+                                        <div class="h5 lh-1 mb-0">$899.00</div>
+                                        <button type="button"
+                                            class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2"
+                                            aria-label="Add to Cart">
+                                            <i class="ci-shopping-cart fs-base animate-target"></i>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Item -->
+                        <div class="swiper-slide">
+                            <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+                                <div class="position-relative">
+                                    <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                                        <div class="d-flex flex-column gap-2">
+                                            <button type="button"
+                                                class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex"
+                                                aria-label="Add to Wishlist">
+                                                <i class="ci-heart fs-base animate-target"></i>
+                                            </button>
+                                            <button type="button"
+                                                class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex"
+                                                aria-label="Compare">
+                                                <i class="ci-refresh-cw fs-base animate-target"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                                        <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body"
+                                            data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                                            <i class="ci-more-vertical fs-lg"></i>
+                                        </button>
+                                        <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                                            <li>
+                                                <a class="dropdown-item" href="#!">
+                                                    <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                                                    Add to Wishlist
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a class="dropdown-item" href="#!">
+                                                    <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                                                    Compare
+                                                </a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                    <a class="d-block rounded-top overflow-hidden p-3 p-sm-4"
+                                        href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                        <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                                            <img src="/img/shop/electronics/13.png" alt="Dualsense Edge">
+                                        </div>
+                                    </a>
+                                </div>
+                                <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                                    <div class="d-flex align-items-center gap-2 mb-2">
+                                        <div class="d-flex gap-1 fs-xs">
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                        </div>
+                                        <span class="text-body-tertiary fs-xs">(187)</span>
+                                    </div>
+                                    <h3 class="pb-1 mb-2">
+                                        <a class="d-block fs-sm fw-medium text-truncate"
+                                            href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                            <span class="animate-target">Sony Dualsense Edge Controller</span>
+                                        </a>
+                                    </h3>
+                                    <div class="d-flex align-items-center justify-content-between">
+                                        <div class="h5 lh-1 mb-0">$200.00</div>
+                                        <button type="button"
+                                            class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2"
+                                            aria-label="Add to Cart">
+                                            <i class="ci-shopping-cart fs-base animate-target"></i>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Item -->
+                        <div class="swiper-slide">
+                            <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+                                <div class="position-relative">
+                                    <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                                        <div class="d-flex flex-column gap-2">
+                                            <button type="button"
+                                                class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex"
+                                                aria-label="Add to Wishlist">
+                                                <i class="ci-heart fs-base animate-target"></i>
+                                            </button>
+                                            <button type="button"
+                                                class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex"
+                                                aria-label="Compare">
+                                                <i class="ci-refresh-cw fs-base animate-target"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                                        <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body"
+                                            data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                                            <i class="ci-more-vertical fs-lg"></i>
+                                        </button>
+                                        <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                                            <li>
+                                                <a class="dropdown-item" href="#!">
+                                                    <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                                                    Add to Wishlist
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a class="dropdown-item" href="#!">
+                                                    <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                                                    Compare
+                                                </a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                    <a class="d-block rounded-top overflow-hidden p-3 p-sm-4"
+                                        href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                        <span
+                                            class="badge bg-info position-absolute top-0 start-0 mt-2 ms-2 mt-lg-3 ms-lg-3">New</span>
+                                        <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                                            <img src="/img/shop/electronics/04.png" alt="MacBook">
+                                        </div>
+                                    </a>
+                                </div>
+                                <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                                    <div class="d-flex align-items-center gap-2 mb-2">
+                                        <div class="d-flex gap-1 fs-xs">
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-half text-warning"></i>
+                                        </div>
+                                        <span class="text-body-tertiary fs-xs">(51)</span>
+                                    </div>
+                                    <h3 class="pb-1 mb-2">
+                                        <a class="d-block fs-sm fw-medium text-truncate"
+                                            href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                            <span class="animate-target">Laptop Apple MacBook Pro 13 M2</span>
+                                        </a>
+                                    </h3>
+                                    <div class="d-flex align-items-center justify-content-between">
+                                        <div class="h5 lh-1 mb-0">$1,200.00</div>
+                                        <button type="button"
+                                            class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2"
+                                            aria-label="Add to Cart">
+                                            <i class="ci-shopping-cart fs-base animate-target"></i>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Item -->
+                        <div class="swiper-slide">
+                            <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+                                <div class="posittion-relative">
+                                    <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                                        <div class="d-flex flex-column gap-2">
+                                            <button type="button"
+                                                class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex"
+                                                aria-label="Add to Wishlist">
+                                                <i class="ci-heart fs-base animate-target"></i>
+                                            </button>
+                                            <button type="button"
+                                                class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex"
+                                                aria-label="Compare">
+                                                <i class="ci-refresh-cw fs-base animate-target"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                                        <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body"
+                                            data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                                            <i class="ci-more-vertical fs-lg"></i>
+                                        </button>
+                                        <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                                            <li>
+                                                <a class="dropdown-item" href="#!">
+                                                    <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                                                    Add to Wishlist
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a class="dropdown-item" href="#!">
+                                                    <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                                                    Compare
+                                                </a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                    <a class="d-block rounded-top overflow-hidden p-3 p-sm-4"
+                                        href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                        <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                                            <img src="/img/shop/electronics/08.png" alt="Bluetooth Headphones">
+                                        </div>
+                                    </a>
+                                </div>
+                                <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                                    <div class="d-flex align-items-center gap-2 mb-2">
+                                        <div class="d-flex gap-1 fs-xs">
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-half text-warning"></i>
+                                            <i class="ci-star text-body-tertiary opacity-75"></i>
+                                        </div>
+                                        <span class="text-body-tertiary fs-xs">(136)</span>
+                                    </div>
+                                    <h3 class="pb-1 mb-2">
+                                        <a class="d-block fs-sm fw-medium text-truncate"
+                                            href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                            <span class="animate-target">Wireless Bluetooth Headphones Sony</span>
+                                        </a>
+                                    </h3>
+                                    <div class="d-flex align-items-center justify-content-between">
+                                        <div class="h5 lh-1 mb-0">$299.00</div>
+                                        <button type="button"
+                                            class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2"
+                                            aria-label="Add to Cart">
+                                            <i class="ci-shopping-cart fs-base animate-target"></i>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- External slider prev/next buttons visible on screens < 500px wide (sm breakpoint) -->
+                <div class="d-flex justify-content-center gap-2 mt-n2 mb-3 pb-1 d-sm-none">
+                    <button type="button"
+                        class="trending-prev btn btn-prev btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-start me-1"
+                        aria-label="Prev">
+                        <i class="ci-chevron-left fs-lg animate-target"></i>
+                    </button>
+                    <button type="button"
+                        class="trending-next btn btn-next btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-end"
+                        aria-label="Next">
+                        <i class="ci-chevron-right fs-lg animate-target"></i>
+                    </button>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Subscription form + Vlog -->
+        <section class="bg-body-tertiary py-5">
+            <div class="container pt-sm-2 pt-md-3 pt-lg-4 pt-xl-5">
+                <div class="row">
+                    <div class="col-md-6 col-lg-5 mb-5 mb-md-0">
+                        <h2 class="h4 mb-2">Sign up to our newsletter</h2>
+                        <p class="text-body pb-2 pb-ms-3">Receive our latest updates about our products &amp; promotions
+                        </p>
+                        <form class="d-flex needs-validation pb-1 pb-sm-2 pb-md-3 pb-lg-0 mb-4 mb-lg-5" novalidate>
+                            <div class="position-relative w-100 me-2">
+                                <input type="email" class="form-control form-control-lg" placeholder="Your email"
+                                    required>
+                            </div>
+                            <button type="submit" class="btn btn-lg btn-primary">Subscribe</button>
+                        </form>
+                        <div class="d-flex gap-3">
+                            <a class="btn btn-icon btn-secondary rounded-circle" href="#!" aria-label="Instagram">
+                                <i class="ci-instagram fs-base"></i>
+                            </a>
+                            <a class="btn btn-icon btn-secondary rounded-circle" href="#!" aria-label="Facebook">
+                                <i class="ci-facebook fs-base"></i>
+                            </a>
+                            <a class="btn btn-icon btn-secondary rounded-circle" href="#!" aria-label="YouTube">
+                                <i class="ci-youtube fs-base"></i>
+                            </a>
+                            <a class="btn btn-icon btn-secondary rounded-circle" href="#!" aria-label="Telegram">
+                                <i class="ci-telegram fs-base"></i>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="col-md-6 col-lg-5 col-xl-4 offset-lg-1 offset-xl-2">
+                        <ul class="list-unstyled d-flex flex-column gap-4 ps-md-4 ps-lg-0 mb-3">
+                            <li class="nav flex-nowrap align-items-center position-relative">
+                                <img src="/img/home/electronics/vlog/01.jpg" class="rounded" width="140"
+                                    alt="Video cover">
+                                <div class="ps-3">
+                                    <div class="fs-xs text-body-secondary lh-sm mb-2">6:16</div>
+                                    <a class="nav-link fs-sm hover-effect-underline stretched-link p-0" href="#!">5
+                                        New Cool Gadgets You Must See on Cartzilla - Cheap Budget</a>
+                                </div>
+                            </li>
+                            <li class="nav flex-nowrap align-items-center position-relative">
+                                <img src="/img/home/electronics/vlog/02.jpg" class="rounded" width="140"
+                                    alt="Video cover">
+                                <div class="ps-3">
+                                    <div class="fs-xs text-body-secondary lh-sm mb-2">10:20</div>
+                                    <a class="nav-link fs-sm hover-effect-underline stretched-link p-0" href="#!">5
+                                        Super Useful Gadgets on Cartzilla You Must Have in 2023</a>
+                                </div>
+                            </li>
+                            <li class="nav flex-nowrap align-items-center position-relative">
+                                <img src="/img/home/electronics/vlog/03.jpg" class="rounded" width="140"
+                                    alt="Video cover">
+                                <div class="ps-3">
+                                    <div class="fs-xs text-body-secondary lh-sm mb-2">8:40</div>
+                                    <a class="nav-link fs-sm hover-effect-underline stretched-link p-0" href="#!">Top
+                                        5 New Amazing Gadgets on Cartzilla You Must See</a>
+                                </div>
+                            </li>
+                        </ul>
+                        <div class="nav ps-md-4 ps-lg-0">
+                            <a class="btn nav-link animate-underline text-decoration-none px-0" href="#!">
+                                <span class="animate-target">View all</span>
+                                <i class="ci-chevron-right fs-base ms-1"></i>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    @include('layouts.partials/footer')
+@endsection
+
+@section('scripts')
+@endsection
diff --git a/resources/views/checkout/v1-delivery-1.blade.php b/resources/views/checkout/v1-delivery-1.blade.php
new file mode 100644
index 0000000..14b5e08
--- /dev/null
+++ b/resources/views/checkout/v1-delivery-1.blade.php
@@ -0,0 +1,195 @@
+@extends('layouts.landing', ['title' => 'Checkout v.1 - Delivery Info Step 1'])
+
+@section('content')
+    <!-- Order preview offcanvas -->
+    <div class="offcanvas offcanvas-end pb-sm-2 px-sm-2" id="orderPreview" tabindex="-1" aria-labelledby="orderPreviewLabel"
+        style="width: 500px">
+        <div class="offcanvas-header py-3 pt-lg-4">
+            <h4 class="offcanvas-title" id="orderPreviewLabel">Your order</h4>
+            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+        </div>
+        <div class="offcanvas-body d-flex flex-column gap-3 py-2">
+
+            <!-- Item -->
+            <div class="d-flex align-items-center">
+                <a class="flex-shrink-0" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                    <img src="/img/shop/electronics/thumbs/08.png" width="110" alt="iPhone 14">
+                </a>
+                <div class="w-100 min-w-0 ps-2 ps-sm-3">
+                    <h5 class="d-flex animate-underline mb-2">
+                        <a class="d-block fs-sm fw-medium text-truncate animate-target"
+                            href="{{ route('second', ['shop', 'product-general-electronics']) }}">Apple iPhone 14 128GB White</a>
+                    </h5>
+                    <div class="h6 mb-0">$899.00</div>
+                    <div class="fs-xs pt-2">Qty: 1</div>
+                </div>
+            </div>
+
+            <!-- Item -->
+            <div class="d-flex align-items-center">
+                <a class="position-relative flex-shrink-0" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                    <span class="badge text-bg-danger position-absolute top-0 start-0">-10%</span>
+                    <img src="/img/shop/electronics/thumbs/09.png" width="110" alt="iPad Pro">
+                </a>
+                <div class="w-100 min-w-0 ps-2 ps-sm-3">
+                    <h5 class="d-flex animate-underline mb-2">
+                        <a class="d-block fs-sm fw-medium text-truncate animate-target"
+                            href="{{ route('second', ['shop', 'product-general-electronics']) }}">Tablet Apple iPad Pro M2</a>
+                    </h5>
+                    <div class="h6 mb-0">$989.00 <del class="text-body-tertiary fs-xs fw-normal">$1,099.00</del></div>
+                    <div class="fs-xs pt-2">Qty: 1</div>
+                </div>
+            </div>
+
+            <!-- Item -->
+            <div class="d-flex align-items-center">
+                <a class="flex-shrink-0" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                    <img src="/img/shop/electronics/thumbs/01.png" width="110" alt="Smart Watch">
+                </a>
+                <div class="w-100 min-w-0 ps-2 ps-sm-3">
+                    <h5 class="d-flex animate-underline mb-2">
+                        <a class="d-block fs-sm fw-medium text-truncate animate-target"
+                            href="{{ route('second', ['shop', 'product-general-electronics']) }}">Smart Watch Series 7, White</a>
+                    </h5>
+                    <div class="h6 mb-0">$429.00</div>
+                    <div class="fs-xs pt-2">Qty: 1</div>
+                </div>
+            </div>
+        </div>
+
+        <div class="offcanvas-header">
+            <a class="btn btn-lg btn-outline-secondary w-100" href="checkout-v1-cart']) }}">Edit cart</a>
+        </div>
+    </div>
+
+    @include('layouts.partials/offcanvas')
+
+    @include('layouts.partials/navbar', ['wishlist' => true])
+
+    <!-- Page content -->
+    <main class="content-wrapper">
+        <div class="container py-5">
+            <div class="row pt-1 pt-sm-3 pt-lg-4 pb-2 pb-md-3 pb-lg-4 pb-xl-5">
+
+                <!-- Delivery info (Step 1) -->
+                <div class="col-lg-8 col-xl-7 mb-5 mb-lg-0">
+                    <div class="d-flex flex-column gap-5 pe-lg-4 pe-xl-0">
+                        <div class="d-flex align-items-start">
+                            <div class="d-flex align-items-center justify-content-center bg-primary text-white rounded-circle fs-sm fw-semibold lh-1 flex-shrink-0"
+                                style="width: 2rem; height: 2rem; margin-top: -.125rem">1</div>
+                            <div class="w-100 ps-3 ps-md-4">
+                                <h1 class="h5 mb-md-4">Delivery information</h1>
+                                <div class="ms-n5 ms-sm-0">
+                                    <p class="fs-sm mb-md-4">Add your Postcode to see the delivery and collection options
+                                        available in your area.</p>
+                                    <div class="d-flex flex-column flex-md-row align-items-md-end gap-3 gap-xl-4">
+                                        <div class="w-100">
+                                            <label for="postcode" class="form-label">Postcode</label>
+                                            <input type="text" class="form-control form-control-lg" id="postcode"
+                                                placeholder="e.g. H1 1AG">
+                                        </div>
+                                        <a class="btn btn-lg btn-primary" href="{{ route('second', ['checkout', 'v1-delivery-2']) }}">
+                                            Calculate cost and availability
+                                            <i class="ci-chevron-right fs-lg ms-1 me-n1"></i>
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="d-flex align-items-start">
+                            <div class="d-flex align-items-center justify-content-center bg-body-secondary text-body-secondary rounded-circle fs-sm fw-semibold lh-1 flex-shrink-0"
+                                style="width: 2rem; height: 2rem; margin-top: -.125rem">2</div>
+                            <h2 class="h5 text-body-secondary ps-3 ps-md-4 mb-0">Shipping address</h2>
+                        </div>
+                        <div class="d-flex align-items-start">
+                            <div class="d-flex align-items-center justify-content-center bg-body-secondary text-body-secondary rounded-circle fs-sm fw-semibold lh-1 flex-shrink-0"
+                                style="width: 2rem; height: 2rem; margin-top: -.125rem">3</div>
+                            <h2 class="h5 text-body-secondary ps-3 ps-md-4 mb-0">Payment</h2>
+                        </div>
+                    </div>
+                </div>
+
+
+                <!-- Order summary (sticky sidebar) -->
+                <aside class="col-lg-4 offset-xl-1" style="margin-top: -100px">
+                    <div class="position-sticky top-0" style="padding-top: 100px">
+                        <div class="bg-body-tertiary rounded-5 p-4 mb-3">
+                            <div class="p-sm-2 p-lg-0 p-xl-2">
+                                <div class="border-bottom pb-4 mb-4">
+                                    <div class="d-flex align-items-center justify-content-between mb-4">
+                                        <h5 class="mb-0">Order summary</h5>
+                                        <div class="nav">
+                                            <a class="nav-link text-decoration-underline p-0"
+                                                href="{{ route('second', ['checkout', 'v1-cart']) }}">Edit</a>
+                                        </div>
+                                    </div>
+                                    <a class="d-flex align-items-center gap-2 text-decoration-none" href="#orderPreview"
+                                        data-bs-toggle="offcanvas">
+                                        <div class="ratio ratio-1x1" style="max-width: 64px">
+                                            <img src="/img/shop/electronics/thumbs/08.png" class="d-block p-1"
+                                                alt="iPhone">
+                                        </div>
+                                        <div class="ratio ratio-1x1" style="max-width: 64px">
+                                            <img src="/img/shop/electronics/thumbs/09.png" class="d-block p-1"
+                                                alt="iPad Pro">
+                                        </div>
+                                        <div class="ratio ratio-1x1" style="max-width: 64px">
+                                            <img src="/img/shop/electronics/thumbs/01.png" class="d-block p-1"
+                                                alt="Smart Watch">
+                                        </div>
+                                        <i class="ci-chevron-right text-body fs-xl p-0 ms-auto"></i>
+                                    </a>
+                                </div>
+                                <ul class="list-unstyled fs-sm gap-3 mb-0">
+                                    <li class="d-flex justify-content-between">
+                                        Subtotal (3 items):
+                                        <span class="text-dark-emphasis fw-medium">$2,427.00</span>
+                                    </li>
+                                    <li class="d-flex justify-content-between">
+                                        Saving:
+                                        <span class="text-danger fw-medium">-$110.00</span>
+                                    </li>
+                                    <li class="d-flex justify-content-between">
+                                        Tax collected:
+                                        <span class="text-dark-emphasis fw-medium">$73.40</span>
+                                    </li>
+                                    <li class="d-flex justify-content-between">
+                                        Shipping:
+                                        <span class="text-dark-emphasis fw-medium">Calculated at checkout</span>
+                                    </li>
+                                </ul>
+                                <div class="border-top pt-4 mt-4">
+                                    <div class="d-flex justify-content-between mb-3">
+                                        <span class="fs-sm">Estimated total:</span>
+                                        <span class="h5 mb-0">$2,390.40</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="bg-body-tertiary rounded-5 p-4">
+                            <div class="d-flex align-items-center px-sm-2 px-lg-0 px-xl-2">
+                                <svg class="text-warning flex-shrink-0" xmlns="http://www.w3.org/2000/svg" width="16"
+                                    height="16" fill="currentColor">
+                                    <path
+                                        d="M1.333 9.667H7.5V16h-5c-.64 0-1.167-.527-1.167-1.167V9.667zm13.334 0v5.167c0 .64-.527 1.167-1.167 1.167h-5V9.667h6.167zM0 5.833V7.5c0 .64.527 1.167 1.167 1.167h.167H7.5v-1-3H1.167C.527 4.667 0 5.193 0 5.833zm14.833-1.166H8.5v3 1h6.167.167C15.473 8.667 16 8.14 16 7.5V5.833c0-.64-.527-1.167-1.167-1.167z" />
+                                    <path
+                                        d="M8 5.363a.5.5 0 0 1-.495-.573C7.752 3.123 9.054-.03 12.219-.03c1.807.001 2.447.977 2.447 1.813 0 1.486-2.069 3.58-6.667 3.58zM12.219.971c-2.388 0-3.295 2.27-3.595 3.377 1.884-.088 3.072-.565 3.756-.971.949-.563 1.287-1.193 1.287-1.595 0-.599-.747-.811-1.447-.811z" />
+                                    <path
+                                        d="M8.001 5.363c-4.598 0-6.667-2.094-6.667-3.58 0-.836.641-1.812 2.448-1.812 3.165 0 4.467 3.153 4.713 4.819a.5.5 0 0 1-.495.573zM3.782.971c-.7 0-1.448.213-1.448.812 0 .851 1.489 2.403 5.042 2.566C7.076 3.241 6.169.971 3.782.971z" />
+                                </svg>
+                                <div class="text-dark-emphasis fs-sm ps-2 ms-1">Congratulations! You have earned <span
+                                        class="fw-semibold">239 bonuses</span></div>
+                            </div>
+                        </div>
+                    </div>
+                </aside>
+            </div>
+        </div>
+    </main>
+
+    @include('layouts.partials/footer')
+
+@endsection
+
+@section('scripts')
+@endsection
diff --git a/resources/views/checkout/v1-delivery-2.blade.php b/resources/views/checkout/v1-delivery-2.blade.php
new file mode 100644
index 0000000..0eb5a03
--- /dev/null
+++ b/resources/views/checkout/v1-delivery-2.blade.php
@@ -0,0 +1,628 @@
+@extends('layouts.landing', ['title' => 'Checkout v.1 - Delivery Info Step 2'])
+
+@section('content')
+    <!-- Order preview offcanvas -->
+    <div class="offcanvas offcanvas-end pb-sm-2 px-sm-2" id="orderPreview" tabindex="-1" aria-labelledby="orderPreviewLabel"
+        style="width: 500px">
+        <div class="offcanvas-header py-3 pt-lg-4">
+            <h4 class="offcanvas-title" id="orderPreviewLabel">Your order</h4>
+            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+        </div>
+        <div class="offcanvas-body d-flex flex-column gap-3 py-2">
+
+            <!-- Item -->
+            <div class="d-flex align-items-center">
+                <a class="flex-shrink-0" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                    <img src="/img/shop/electronics/thumbs/08.png" width="110" alt="iPhone 14">
+                </a>
+                <div class="w-100 min-w-0 ps-2 ps-sm-3">
+                    <h5 class="d-flex animate-underline mb-2">
+                        <a class="d-block fs-sm fw-medium text-truncate animate-target"
+                            href="{{ route('second', ['shop', 'product-general-electronics']) }}">Apple iPhone 14 128GB White</a>
+                    </h5>
+                    <div class="h6 mb-0">$899.00</div>
+                    <div class="fs-xs pt-2">Qty: 1</div>
+                </div>
+            </div>
+
+            <!-- Item -->
+            <div class="d-flex align-items-center">
+                <a class="position-relative flex-shrink-0" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                    <span class="badge text-bg-danger position-absolute top-0 start-0">-10%</span>
+                    <img src="/img/shop/electronics/thumbs/09.png" width="110" alt="iPad Pro">
+                </a>
+                <div class="w-100 min-w-0 ps-2 ps-sm-3">
+                    <h5 class="d-flex animate-underline mb-2">
+                        <a class="d-block fs-sm fw-medium text-truncate animate-target"
+                            href="{{ route('second', ['shop', 'product-general-electronics']) }}">Tablet Apple iPad Pro M2</a>
+                    </h5>
+                    <div class="h6 mb-0">$989.00 <del class="text-body-tertiary fs-xs fw-normal">$1,099.00</del></div>
+                    <div class="fs-xs pt-2">Qty: 1</div>
+                </div>
+            </div>
+
+            <!-- Item -->
+            <div class="d-flex align-items-center">
+                <a class="flex-shrink-0" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                    <img src="/img/shop/electronics/thumbs/01.png" width="110" alt="Smart Watch">
+                </a>
+                <div class="w-100 min-w-0 ps-2 ps-sm-3">
+                    <h5 class="d-flex animate-underline mb-2">
+                        <a class="d-block fs-sm fw-medium text-truncate animate-target"
+                            href="{{ route('second', ['shop', 'product-general-electronics']) }}">Smart Watch Series 7, White</a>
+                    </h5>
+                    <div class="h6 mb-0">$429.00</div>
+                    <div class="fs-xs pt-2">Qty: 1</div>
+                </div>
+            </div>
+        </div>
+
+        <div class="offcanvas-header">
+            <a class="btn btn-lg btn-outline-secondary w-100" href="{{ route('second', ['checkout', 'v1-cart']) }}">Edit cart</a>
+        </div>
+    </div>
+
+    @include('layouts.partials/offcanvas')
+
+    @include('layouts.partials/navbar', ['wishlist' => true])
+
+    <main class="content-wrapper">
+        <div class="container py-5">
+            <div class="row pt-1 pt-sm-3 pt-lg-4 pb-2 pb-md-3 pb-lg-4 pb-xl-5">
+
+                <!-- Delivery info (Step 1) -->
+                <div class="col-lg-8 col-xl-7 mb-5 mb-lg-0">
+                    <div class="d-flex flex-column gap-5 pe-lg-4 pe-xl-0">
+                        <div class="d-flex align-items-start">
+                            <div class="d-flex align-items-center justify-content-center bg-primary text-white rounded-circle fs-sm fw-semibold lh-1 flex-shrink-0"
+                                style="width: 2rem; height: 2rem; margin-top: -.125rem">1</div>
+                            <div class="flex-grow-0 flex-shrink-0 ps-3 ps-md-4" style="width: calc(100% - 2rem)">
+                                <h1 class="h5 mb-md-4">Delivery information</h1>
+                                <div class="ms-n5 ms-sm-0">
+                                    <p class="fs-sm mb-2">Add your Postcode to see the delivery and collection options
+                                        available in your area.</p>
+                                    <p class="fs-sm mb-4">
+                                        <span class="text-dark-emphasis fw-semibold me-1">15006</span>
+                                        <a class="text-body" href="{{ route('second', ['checkout', 'v1-delivery-1']) }}">Edit</a>
+                                    </p>
+                                    <h3 class="h6 border-bottom pb-4 mb-0">Choose shipping method</h3>
+                                    <div class="mb-lg-4" id="shippingMethod" role="list">
+
+                                        <!-- Courier delivery option -->
+                                        <div class="border-bottom">
+                                            <div class="form-check mb-0" role="listitem" data-bs-toggle="collapse"
+                                                data-bs-target="#courier" aria-expanded="true" aria-controls="courier">
+                                                <label
+                                                    class="form-check-label d-flex align-items-center text-dark-emphasis fw-semibold py-4">
+                                                    <input type="radio" class="form-check-input fs-base me-2 me-sm-3"
+                                                        name="payment-method" checked>
+                                                    Courier delivery
+                                                    <span class="fw-normal ms-auto">$16.50</span>
+                                                </label>
+                                            </div>
+                                            <div class="collapse show" id="courier" data-bs-parent="#shippingMethod">
+                                                <div class="pb-4 ps-3 ms-2 ms-sm-3">
+                                                    <p class="fs-sm">Choose a courier delivery time convenient for you:</p>
+                                                    <div class="d-flex justify-content-start">
+                                                        <button type="button"
+                                                            class="btn btn-icon btn-sm btn-outline-secodary ms-n2"
+                                                            id="courierTimePrev" aria-label="Prev">
+                                                            <i class="ci-chevron-left fs-lg"></i>
+                                                        </button>
+                                                        <div class="swiper swiper-load pt-2"
+                                                            data-swiper='{
+                                "slidesPerView": 2,
+                                "spaceBetween": 12,
+                                "navigation": {
+                                  "prevEl": "#courierTimePrev",
+                                  "nextEl": "#courierTimeNext"
+                                },
+                                "breakpoints": {
+                                  "600": {
+                                    "slidesPerView": 3,
+                                    "spaceBetween": 16
+                                  },
+                                  "768": {
+                                    "slidesPerView": 4,
+                                    "spaceBetween": 16
+                                  },
+                                  "991": {
+                                    "slidesPerView": 3,
+                                    "spaceBetween": 16
+                                  },
+                                  "1100": {
+                                    "slidesPerView": 4,
+                                    "spaceBetween": 12
+                                  },
+                                  "1250": {
+                                    "slidesPerView": 4,
+                                    "spaceBetween": 24
+                                  }
+                                }
+                              }'>
+                                                            <div class="swiper-wrapper">
+                                                                <div class="swiper-slide text-center">
+                                                                    <div class="h6 fs-sm pb-2 mb-0">Monday, 13</div>
+                                                                    <div class="py-1 my-1">
+                                                                        <input type="radio" class="btn-check"
+                                                                            name="courier-time" id="c-mon-1" checked>
+                                                                        <label for="c-mon-1"
+                                                                            class="btn btn-outline-secondary w-100 rounded-pill">12:00
+                                                                            - 15:00</label>
+                                                                    </div>
+                                                                    <div class="py-1 my-1">
+                                                                        <input type="radio" class="btn-check"
+                                                                            name="courier-time" id="c-mon-2">
+                                                                        <label for="c-mon-2"
+                                                                            class="btn btn-outline-secondary w-100 rounded-pill">17:00
+                                                                            - 20:00</label>
+                                                                    </div>
+                                                                </div>
+                                                                <div class="swiper-slide text-center">
+                                                                    <div class="h6 fs-sm pb-2 mb-0">Tuesday, 14</div>
+                                                                    <div class="py-1 my-1">
+                                                                        <input type="radio" class="btn-check"
+                                                                            name="courier-time" id="c-tue-1">
+                                                                        <label for="c-tue-1"
+                                                                            class="btn btn-outline-secondary w-100 rounded-pill">09:00
+                                                                            - 12:00</label>
+                                                                    </div>
+                                                                    <div class="py-1 my-1">
+                                                                        <input type="radio" class="btn-check"
+                                                                            name="courier-time" id="c-tue-2">
+                                                                        <label for="c-tue-2"
+                                                                            class="btn btn-outline-secondary w-100 rounded-pill">14:00
+                                                                            - 19:00</label>
+                                                                    </div>
+                                                                </div>
+                                                                <div class="swiper-slide text-center">
+                                                                    <div class="h6 fs-sm pb-2 mb-0">Wednesday, 15</div>
+                                                                    <div class="py-1 my-1">
+                                                                        <input type="radio" class="btn-check"
+                                                                            name="courier-time" id="c-wed-1">
+                                                                        <label for="c-wed-1"
+                                                                            class="btn btn-outline-secondary w-100 rounded-pill">09:00
+                                                                            - 12:00</label>
+                                                                    </div>
+                                                                    <div class="py-1 my-1">
+                                                                        <input type="radio" class="btn-check"
+                                                                            name="courier-time" id="c-wed-2">
+                                                                        <label for="c-wed-2"
+                                                                            class="btn btn-outline-secondary w-100 rounded-pill">14:00
+                                                                            - 19:00</label>
+                                                                    </div>
+                                                                </div>
+                                                                <div class="swiper-slide text-center">
+                                                                    <div class="h6 fs-sm pb-2 mb-0">Thursday, 16</div>
+                                                                    <div class="py-1 my-1">
+                                                                        <input type="radio" class="btn-check"
+                                                                            name="courier-time" id="c-thu-1">
+                                                                        <label for="c-thu-1"
+                                                                            class="btn btn-outline-secondary w-100 rounded-pill">12:00
+                                                                            - 15:00</label>
+                                                                    </div>
+                                                                    <div class="py-1 my-1">
+                                                                        <input type="radio" class="btn-check"
+                                                                            name="courier-time" id="c-thu-2">
+                                                                        <label for="c-thu-2"
+                                                                            class="btn btn-outline-secondary w-100 rounded-pill">17:00
+                                                                            - 20:00</label>
+                                                                    </div>
+                                                                </div>
+                                                                <div class="swiper-slide text-center">
+                                                                    <div class="h6 fs-sm pb-2 mb-0">Friday, 17</div>
+                                                                    <div class="py-1 my-1">
+                                                                        <input type="radio" class="btn-check"
+                                                                            name="courier-time" id="c-fri-1">
+                                                                        <label for="c-fri-1"
+                                                                            class="btn btn-outline-secondary w-100 rounded-pill">09:00
+                                                                            - 12:00</label>
+                                                                    </div>
+                                                                    <div class="py-1 my-1">
+                                                                        <input type="radio" class="btn-check"
+                                                                            name="courier-time" id="c-fri-2">
+                                                                        <label for="c-fri-2"
+                                                                            class="btn btn-outline-secondary w-100 rounded-pill">14:00
+                                                                            - 19:00</label>
+                                                                    </div>
+                                                                </div>
+                                                                <div class="swiper-slide text-center">
+                                                                    <div class="h6 fs-sm pb-2 mb-0">Saturday, 18</div>
+                                                                    <div class="py-1 my-1">
+                                                                        <input type="radio" class="btn-check"
+                                                                            name="courier-time" id="c-sat-1">
+                                                                        <label for="c-sat-1"
+                                                                            class="btn btn-outline-secondary w-100 rounded-pill">09:00
+                                                                            - 11:00</label>
+                                                                    </div>
+                                                                    <div class="py-1 my-1">
+                                                                        <input type="radio" class="btn-check"
+                                                                            name="courier-time" id="c-sat-2">
+                                                                        <label for="c-sat-2"
+                                                                            class="btn btn-outline-secondary w-100 rounded-pill">13:00
+                                                                            - 15:00</label>
+                                                                    </div>
+                                                                </div>
+                                                                <div class="swiper-slide text-center">
+                                                                    <div class="h6 fs-sm pb-2 mb-0">Sunday, 19</div>
+                                                                    <div class="py-1 my-1">
+                                                                        <input type="radio" class="btn-check"
+                                                                            name="courier-time" id="c-sun-1">
+                                                                        <label for="c-sun-1"
+                                                                            class="btn btn-outline-secondary w-100 rounded-pill">09:00
+                                                                            - 11:00</label>
+                                                                    </div>
+                                                                    <div class="py-1 my-1">
+                                                                        <input type="radio" class="btn-check"
+                                                                            name="courier-time" id="c-sun-2">
+                                                                        <label for="c-sun-2"
+                                                                            class="btn btn-outline-secondary w-100 rounded-pill">13:00
+                                                                            - 15:00</label>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <button type="button"
+                                                            class="btn btn-icon btn-sm btn-outline-secodary me-n2"
+                                                            id="courierTimeNext" aria-label="Next">
+                                                            <i class="ci-chevron-right fs-lg"></i>
+                                                        </button>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+
+                                        <!-- Pickup from store option -->
+                                        <div class="border-bottom">
+                                            <div class="form-check mb-0" role="listitem" data-bs-toggle="collapse"
+                                                data-bs-target="#pickup" aria-expanded="false" aria-controls="pickup">
+                                                <label
+                                                    class="form-check-label d-flex align-items-center text-dark-emphasis fw-semibold py-4">
+                                                    <input type="radio" class="form-check-input fs-base me-2 me-sm-3"
+                                                        name="payment-method">
+                                                    Pickup from store
+                                                    <span class="fw-normal ms-auto">Free</span>
+                                                </label>
+                                            </div>
+                                            <div class="collapse" id="pickup" data-bs-parent="#shippingMethod">
+                                                <div class="pb-4 ps-3 ms-2 ms-sm-3">
+                                                    <p class="fs-sm mb-2">Choose a store nearby:</p>
+                                                    <div class="w-100 mb-4" style="max-width: 300px">
+                                                        <select class="form-select"
+                                                            data-select='{
+                                "removeItemButton": false,
+                                "choices": [
+                                  {
+                                    "value": "Cartzilla Supercenter",
+                                    "label": "<span class=\"text-dark-emphasis fw-medium\">Cartzilla Supercenter</span>",
+                                    "customProperties": {
+                                      "address": "<span class=\"d-block text-body-secondary fs-xs fw-normal\">755 Riverpoint Ct, West Sacramento</span>",
+                                      "selected": "<span class=\"text-dark-emphasis fw-medium\">Cartzilla Supercenter</span>"
+                                    }
+                                  },
+                                  {
+                                    "value": "Cartzilla Electronics",
+                                    "label": "<span class=\"text-dark-emphasis fw-medium\">Cartzilla Electronics</span>",
+                                    "customProperties": {
+                                      "address": "<span class=\"d-block text-body-secondary fs-xs fw-normal\">8270 Delta Shores Cir S, Sacramento</span>",
+                                      "selected": "<span class=\"text-dark-emphasis fw-medium\">Cartzilla Electronics</span>"
+                                    }
+                                  },
+                                  {
+                                    "value": "Cartzilla Great Mall",
+                                    "label": "<span class=\"text-dark-emphasis fw-medium\">Cartzilla Great Mall</span>",
+                                    "customProperties": {
+                                      "address": "<span class=\"d-block text-body-secondary fs-xs fw-normal\">10655 Folsom Blvd, Sacramento</span>",
+                                      "selected": "<span class=\"text-dark-emphasis fw-medium\">Cartzilla Great Mall</span>"
+                                    }
+                                  }
+                                ]
+                              }'
+                                                            data-select-template="true"></select>
+                                                    </div>
+                                                    <p class="fs-sm">Choose a pickup time convenient for you:</p>
+                                                    <div class="d-flex justify-content-start">
+                                                        <button type="button"
+                                                            class="btn btn-icon btn-sm btn-outline-secodary ms-n2"
+                                                            id="pickupTimePrev" aria-label="Prev">
+                                                            <i class="ci-chevron-left fs-lg"></i>
+                                                        </button>
+                                                        <div class="swiper swiper-load pt-2"
+                                                            data-swiper='{
+                                "slidesPerView": 2,
+                                "spaceBetween": 12,
+                                "navigation": {
+                                  "prevEl": "#pickupTimePrev",
+                                  "nextEl": "#pickupTimeNext"
+                                },
+                                "breakpoints": {
+                                  "600": {
+                                    "slidesPerView": 3,
+                                    "spaceBetween": 16
+                                  },
+                                  "768": {
+                                    "slidesPerView": 4,
+                                    "spaceBetween": 16
+                                  },
+                                  "991": {
+                                    "slidesPerView": 3,
+                                    "spaceBetween": 16
+                                  },
+                                  "1100": {
+                                    "slidesPerView": 4,
+                                    "spaceBetween": 12
+                                  },
+                                  "1250": {
+                                    "slidesPerView": 4,
+                                    "spaceBetween": 24
+                                  }
+                                }
+                              }'>
+                                                            <div class="swiper-wrapper">
+                                                                <div class="swiper-slide text-center">
+                                                                    <div class="h6 fs-sm pb-2 mb-0">Monday, 13</div>
+                                                                    <div class="py-1 my-1">
+                                                                        <input type="radio" class="btn-check"
+                                                                            name="pickup-time" id="p-mon-1" checked>
+                                                                        <label for="p-mon-1"
+                                                                            class="btn btn-outline-secondary w-100 rounded-pill">12:00
+                                                                            - 15:00</label>
+                                                                    </div>
+                                                                    <div class="py-1 my-1">
+                                                                        <input type="radio" class="btn-check"
+                                                                            name="pickup-time" id="p-mon-2">
+                                                                        <label for="p-mon-2"
+                                                                            class="btn btn-outline-secondary w-100 rounded-pill">17:00
+                                                                            - 20:00</label>
+                                                                    </div>
+                                                                </div>
+                                                                <div class="swiper-slide text-center">
+                                                                    <div class="h6 fs-sm pb-2 mb-0">Tuesday, 14</div>
+                                                                    <div class="py-1 my-1">
+                                                                        <input type="radio" class="btn-check"
+                                                                            name="pickup-time" id="p-tue-1">
+                                                                        <label for="p-tue-1"
+                                                                            class="btn btn-outline-secondary w-100 rounded-pill">09:00
+                                                                            - 12:00</label>
+                                                                    </div>
+                                                                    <div class="py-1 my-1">
+                                                                        <input type="radio" class="btn-check"
+                                                                            name="pickup-time" id="p-tue-2">
+                                                                        <label for="p-tue-2"
+                                                                            class="btn btn-outline-secondary w-100 rounded-pill">14:00
+                                                                            - 19:00</label>
+                                                                    </div>
+                                                                </div>
+                                                                <div class="swiper-slide text-center">
+                                                                    <div class="h6 fs-sm pb-2 mb-0">Wednesday, 15</div>
+                                                                    <div class="py-1 my-1">
+                                                                        <input type="radio" class="btn-check"
+                                                                            name="pickup-time" id="p-wed-1">
+                                                                        <label for="p-wed-1"
+                                                                            class="btn btn-outline-secondary w-100 rounded-pill">09:00
+                                                                            - 12:00</label>
+                                                                    </div>
+                                                                    <div class="py-1 my-1">
+                                                                        <input type="radio" class="btn-check"
+                                                                            name="pickup-time" id="p-wed-2">
+                                                                        <label for="p-wed-2"
+                                                                            class="btn btn-outline-secondary w-100 rounded-pill">14:00
+                                                                            - 19:00</label>
+                                                                    </div>
+                                                                </div>
+                                                                <div class="swiper-slide text-center">
+                                                                    <div class="h6 fs-sm pb-2 mb-0">Thursday, 16</div>
+                                                                    <div class="py-1 my-1">
+                                                                        <input type="radio" class="btn-check"
+                                                                            name="pickup-time" id="p-thu-1">
+                                                                        <label for="p-thu-1"
+                                                                            class="btn btn-outline-secondary w-100 rounded-pill">12:00
+                                                                            - 15:00</label>
+                                                                    </div>
+                                                                    <div class="py-1 my-1">
+                                                                        <input type="radio" class="btn-check"
+                                                                            name="pickup-time" id="p-thu-2">
+                                                                        <label for="p-thu-2"
+                                                                            class="btn btn-outline-secondary w-100 rounded-pill">17:00
+                                                                            - 20:00</label>
+                                                                    </div>
+                                                                </div>
+                                                                <div class="swiper-slide text-center">
+                                                                    <div class="h6 fs-sm pb-2 mb-0">Friday, 17</div>
+                                                                    <div class="py-1 my-1">
+                                                                        <input type="radio" class="btn-check"
+                                                                            name="pickup-time" id="p-fri-1">
+                                                                        <label for="p-fri-1"
+                                                                            class="btn btn-outline-secondary w-100 rounded-pill">09:00
+                                                                            - 12:00</label>
+                                                                    </div>
+                                                                    <div class="py-1 my-1">
+                                                                        <input type="radio" class="btn-check"
+                                                                            name="pickup-time" id="p-fri-2">
+                                                                        <label for="p-fri-2"
+                                                                            class="btn btn-outline-secondary w-100 rounded-pill">14:00
+                                                                            - 19:00</label>
+                                                                    </div>
+                                                                </div>
+                                                                <div class="swiper-slide text-center">
+                                                                    <div class="h6 fs-sm pb-2 mb-0">Saturday, 18</div>
+                                                                    <div class="py-1 my-1">
+                                                                        <input type="radio" class="btn-check"
+                                                                            name="pickup-time" id="p-sat-1">
+                                                                        <label for="p-sat-1"
+                                                                            class="btn btn-outline-secondary w-100 rounded-pill">09:00
+                                                                            - 11:00</label>
+                                                                    </div>
+                                                                    <div class="py-1 my-1">
+                                                                        <input type="radio" class="btn-check"
+                                                                            name="pickup-time" id="p-sat-2">
+                                                                        <label for="p-sat-2"
+                                                                            class="btn btn-outline-secondary w-100 rounded-pill">13:00
+                                                                            - 15:00</label>
+                                                                    </div>
+                                                                </div>
+                                                                <div class="swiper-slide text-center">
+                                                                    <div class="h6 fs-sm pb-2 mb-0">Sunday, 19</div>
+                                                                    <div class="py-1 my-1">
+                                                                        <input type="radio" class="btn-check"
+                                                                            name="pickup-time" id="p-sun-1">
+                                                                        <label for="p-sun-1"
+                                                                            class="btn btn-outline-secondary w-100 rounded-pill">09:00
+                                                                            - 11:00</label>
+                                                                    </div>
+                                                                    <div class="py-1 my-1">
+                                                                        <input type="radio" class="btn-check"
+                                                                            name="pickup-time" id="p-sun-2">
+                                                                        <label for="p-sun-2"
+                                                                            class="btn btn-outline-secondary w-100 rounded-pill">13:00
+                                                                            - 15:00</label>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <button type="button"
+                                                            class="btn btn-icon btn-sm btn-outline-secodary me-n2"
+                                                            id="pickupTimeNext" aria-label="Next">
+                                                            <i class="ci-chevron-right fs-lg"></i>
+                                                        </button>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+
+                                        <!-- Local shipping option -->
+                                        <div class="border-bottom">
+                                            <div class="form-check mb-0" role="listitem" data-bs-toggle="collapse"
+                                                data-bs-target="#shipping" aria-expanded="false"
+                                                aria-controls="shipping">
+                                                <label
+                                                    class="form-check-label d-flex align-items-center text-dark-emphasis fw-semibold py-4">
+                                                    <input type="radio" class="form-check-input fs-base me-2 me-sm-3"
+                                                        name="payment-method">
+                                                    Local shipping
+                                                    <span class="fw-normal ms-auto">$23.40</span>
+                                                </label>
+                                            </div>
+                                            <div class="collapse" id="shipping" data-bs-parent="#shippingMethod">
+                                                <div class="pb-4 ps-3 ms-2 ms-sm-3">
+                                                    <div class="alert d-flex align-items-center alert-info mb-3"
+                                                        role="alert">
+                                                        <i class="ci-info fs-lg me-2"></i>
+                                                        <div class="fs-sm">Local shipping can take up to <span
+                                                                class="text-info-emphasis fw-semibold">5</span> business
+                                                            days.</div>
+                                                    </div>
+                                                    <p class="fs-sm mb-0">Estimated date of delivery - <span
+                                                            class="text-body-emphasis fw-medium">March 15, 2024</span></p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <a class="btn btn-lg btn-primary w-100 d-none d-lg-flex"
+                                        href="{{ route('second', ['checkout', 'v1-shipping']) }}">
+                                        Continue
+                                        <i class="ci-chevron-right fs-lg ms-1 me-n1"></i>
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Shipping address -->
+                        <div class="d-flex align-items-start">
+                            <div class="d-flex align-items-center justify-content-center bg-body-secondary text-body-secondary rounded-circle fs-sm fw-semibold lh-1 flex-shrink-0"
+                                style="width: 2rem; height: 2rem; margin-top: -.125rem">2</div>
+                            <h2 class="h5 text-body-secondary ps-3 ps-md-4 mb-0">Shipping address</h2>
+                        </div>
+
+                        <!-- Payment -->
+                        <div class="d-flex align-items-start">
+                            <div class="d-flex align-items-center justify-content-center bg-body-secondary text-body-secondary rounded-circle fs-sm fw-semibold lh-1 flex-shrink-0"
+                                style="width: 2rem; height: 2rem; margin-top: -.125rem">3</div>
+                            <h2 class="h5 text-body-secondary ps-3 ps-md-4 mb-0">Payment</h2>
+                        </div>
+                    </div>
+                </div>
+
+
+                <!-- Order summary (sticky sidebar) -->
+                <aside class="col-lg-4 offset-xl-1" style="margin-top: -100px">
+                    <div class="position-sticky top-0" style="padding-top: 100px">
+                        <div class="bg-body-tertiary rounded-5 p-4 mb-3">
+                            <div class="p-sm-2 p-lg-0 p-xl-2">
+                                <div class="border-bottom pb-4 mb-4">
+                                    <div class="d-flex align-items-center justify-content-between mb-4">
+                                        <h5 class="mb-0">Order summary</h5>
+                                        <div class="nav">
+                                            <a class="nav-link text-decoration-underline p-0"
+                                                href="{{ route('second', ['checkout', 'v1-cart']) }}">Edit</a>
+                                        </div>
+                                    </div>
+                                    <a class="d-flex align-items-center gap-2 text-decoration-none" href="#orderPreview"
+                                        data-bs-toggle="offcanvas">
+                                        <div class="ratio ratio-1x1" style="max-width: 64px">
+                                            <img src="/img/shop/electronics/thumbs/08.png" class="d-block p-1"
+                                                alt="iPhone">
+                                        </div>
+                                        <div class="ratio ratio-1x1" style="max-width: 64px">
+                                            <img src="/img/shop/electronics/thumbs/09.png" class="d-block p-1"
+                                                alt="iPad Pro">
+                                        </div>
+                                        <div class="ratio ratio-1x1" style="max-width: 64px">
+                                            <img src="/img/shop/electronics/thumbs/01.png" class="d-block p-1"
+                                                alt="Smart Watch">
+                                        </div>
+                                        <i class="ci-chevron-right text-body fs-xl p-0 ms-auto"></i>
+                                    </a>
+                                </div>
+                                <ul class="list-unstyled fs-sm gap-3 mb-0">
+                                    <li class="d-flex justify-content-between">
+                                        Subtotal (3 items):
+                                        <span class="text-dark-emphasis fw-medium">$2,427.00</span>
+                                    </li>
+                                    <li class="d-flex justify-content-between">
+                                        Saving:
+                                        <span class="text-danger fw-medium">-$110.00</span>
+                                    </li>
+                                    <li class="d-flex justify-content-between">
+                                        Tax collected:
+                                        <span class="text-dark-emphasis fw-medium">$73.40</span>
+                                    </li>
+                                    <li class="d-flex justify-content-between">
+                                        Shipping:
+                                        <span class="text-dark-emphasis fw-medium">$16.50</span>
+                                    </li>
+                                </ul>
+                                <div class="border-top pt-4 mt-4">
+                                    <div class="d-flex justify-content-between mb-3">
+                                        <span class="fs-sm">Estimated total:</span>
+                                        <span class="h5 mb-0">$2,406.90</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="bg-body-tertiary rounded-5 p-4">
+                            <div class="d-flex align-items-center px-sm-2 px-lg-0 px-xl-2">
+                                <svg class="text-warning flex-shrink-0" xmlns="http://www.w3.org/2000/svg" width="16"
+                                    height="16" fill="currentColor">
+                                    <path
+                                        d="M1.333 9.667H7.5V16h-5c-.64 0-1.167-.527-1.167-1.167V9.667zm13.334 0v5.167c0 .64-.527 1.167-1.167 1.167h-5V9.667h6.167zM0 5.833V7.5c0 .64.527 1.167 1.167 1.167h.167H7.5v-1-3H1.167C.527 4.667 0 5.193 0 5.833zm14.833-1.166H8.5v3 1h6.167.167C15.473 8.667 16 8.14 16 7.5V5.833c0-.64-.527-1.167-1.167-1.167z" />
+                                    <path
+                                        d="M8 5.363a.5.5 0 0 1-.495-.573C7.752 3.123 9.054-.03 12.219-.03c1.807.001 2.447.977 2.447 1.813 0 1.486-2.069 3.58-6.667 3.58zM12.219.971c-2.388 0-3.295 2.27-3.595 3.377 1.884-.088 3.072-.565 3.756-.971.949-.563 1.287-1.193 1.287-1.595 0-.599-.747-.811-1.447-.811z" />
+                                    <path
+                                        d="M8.001 5.363c-4.598 0-6.667-2.094-6.667-3.58 0-.836.641-1.812 2.448-1.812 3.165 0 4.467 3.153 4.713 4.819a.5.5 0 0 1-.495.573zM3.782.971c-.7 0-1.448.213-1.448.812 0 .851 1.489 2.403 5.042 2.566C7.076 3.241 6.169.971 3.782.971z" />
+                                </svg>
+                                <div class="text-dark-emphasis fs-sm ps-2 ms-1">Congratulations! You have earned <span
+                                        class="fw-semibold">240 bonuses</span></div>
+                            </div>
+                        </div>
+                    </div>
+                </aside>
+            </div>
+        </div>
+    </main>
+
+    @include('layouts.partials/footer')
+@endsection
+
+@section('scripts')
+@endsection
diff --git a/resources/views/checkout/v1-payment.blade.php b/resources/views/checkout/v1-payment.blade.php
new file mode 100644
index 0000000..de992ec
--- /dev/null
+++ b/resources/views/checkout/v1-payment.blade.php
@@ -0,0 +1,374 @@
+@extends('layouts.landing', ['title' => 'Checkout v.1 - Shipping Address'])
+
+@section('content')
+    <!-- Order preview offcanvas -->
+    <div class="offcanvas offcanvas-end pb-sm-2 px-sm-2" id="orderPreview" tabindex="-1" aria-labelledby="orderPreviewLabel"
+        style="width: 500px">
+        <div class="offcanvas-header py-3 pt-lg-4">
+            <h4 class="offcanvas-title" id="orderPreviewLabel">Your order</h4>
+            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+        </div>
+        <div class="offcanvas-body d-flex flex-column gap-3 py-2">
+
+            <!-- Item -->
+            <div class="d-flex align-items-center">
+                <a class="flex-shrink-0" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                    <img src="/img/shop/electronics/thumbs/08.png" width="110" alt="iPhone 14">
+                </a>
+                <div class="w-100 min-w-0 ps-2 ps-sm-3">
+                    <h5 class="d-flex animate-underline mb-2">
+                        <a class="d-block fs-sm fw-medium text-truncate animate-target"
+                            href="{{ route('second', ['shop', 'product-general-electronics']) }}">Apple iPhone 14 128GB White</a>
+                    </h5>
+                    <div class="h6 mb-0">$899.00</div>
+                    <div class="fs-xs pt-2">Qty: 1</div>
+                </div>
+            </div>
+
+            <!-- Item -->
+            <div class="d-flex align-items-center">
+                <a class="position-relative flex-shrink-0" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                    <span class="badge text-bg-danger position-absolute top-0 start-0">-10%</span>
+                    <img src="/img/shop/electronics/thumbs/09.png" width="110" alt="iPad Pro">
+                </a>
+                <div class="w-100 min-w-0 ps-2 ps-sm-3">
+                    <h5 class="d-flex animate-underline mb-2">
+                        <a class="d-block fs-sm fw-medium text-truncate animate-target"
+                            href="{{ route('second', ['shop', 'product-general-electronics']) }}">Tablet Apple iPad Pro M2</a>
+                    </h5>
+                    <div class="h6 mb-0">$989.00 <del class="text-body-tertiary fs-xs fw-normal">$1,099.00</del></div>
+                    <div class="fs-xs pt-2">Qty: 1</div>
+                </div>
+            </div>
+
+            <!-- Item -->
+            <div class="d-flex align-items-center">
+                <a class="flex-shrink-0" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                    <img src="/img/shop/electronics/thumbs/01.png" width="110" alt="Smart Watch">
+                </a>
+                <div class="w-100 min-w-0 ps-2 ps-sm-3">
+                    <h5 class="d-flex animate-underline mb-2">
+                        <a class="d-block fs-sm fw-medium text-truncate animate-target"
+                            href="{{ route('second', ['shop', 'product-general-electronics']) }}">Smart Watch Series 7, White</a>
+                    </h5>
+                    <div class="h6 mb-0">$429.00</div>
+                    <div class="fs-xs pt-2">Qty: 1</div>
+                </div>
+            </div>
+        </div>
+
+        <div class="offcanvas-header">
+            <a class="btn btn-lg btn-outline-secondary w-100" href="{{ route('second', ['checkout', 'v1-cart']) }}">Edit cart</a>
+        </div>
+    </div>
+
+    @include('layouts.partials/offcanvas')
+
+    @include('layouts.partials/navbar', ['wishlist' => true])
+
+    <main class="content-wrapper">
+        <div class="container py-5">
+            <div class="row pt-1 pt-sm-3 pt-lg-4 pb-2 pb-md-3 pb-lg-4 pb-xl-5">
+                <div class="col-lg-8 col-xl-7 position-relative z-2 mb-5 mb-lg-0">
+                    <div class="accordion d-flex flex-column gap-5 pe-lg-4 pe-xl-0" id="checkout">
+
+                        <!-- Delivery info overview + Edit button -->
+                        <div class="accordion-item d-flex align-items-start border-0">
+                            <div class="d-flex align-items-center justify-content-center bg-body-secondary text-dark-emphasis rounded-circle flex-shrink-0"
+                                style="width: 2rem; height: 2rem; margin-top: -.125rem">
+                                <i class="ci-check fs-base"></i>
+                            </div>
+                            <div class="w-100 ps-3 ps-md-4">
+                                <div class="d-flex align-items-center">
+                                    <h2 class="accordion-header h5 mb-0 me-3" id="deliveryInfoHeading">
+                                        <span class="d-none d-lg-inline">Delivery information</span>
+                                        <button type="button" class="accordion-button collapsed fs-5 d-lg-none py-1"
+                                            data-bs-toggle="collapse" data-bs-target="#deliveryInfo" aria-expanded="false"
+                                            aria-controls="deliveryInfo">
+                                            <span class="me-2">Delivery information</span>
+                                        </button>
+                                    </h2>
+                                    <div class="nav ms-auto">
+                                        <a class="nav-link text-decoration-underline p-0"
+                                            href="{{ route('second', ['checkout', 'v1-delivery-2']) }}">Edit</a>
+                                    </div>
+                                </div>
+                                <div class="accordion-collapse collapse d-lg-block" id="deliveryInfo"
+                                    aria-labelledby="deliveryInfoHeading" data-bs-parent="#checkout">
+                                    <div class="accordion-body p-0 pt-3 pt-md-4">
+                                        <h3 class="fs-sm mb-2">Postcode</h3>
+                                        <p class="fs-sm">15006</p>
+                                        <h3 class="fs-sm mb-2">Estimated delivery date</h3>
+                                        <div class="d-flex align-items-center fs-sm">
+                                            Monday, 13
+                                            <span class="opacity-40 mx-2">|</span>
+                                            12:00 - 16:00
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+
+                        <!-- Shipping address overview + Edit button -->
+                        <div class="accordion-item d-flex align-items-start border-0">
+                            <div class="d-flex align-items-center justify-content-center bg-body-secondary text-dark-emphasis rounded-circle flex-shrink-0"
+                                style="width: 2rem; height: 2rem; margin-top: -.125rem">
+                                <i class="ci-check fs-base"></i>
+                            </div>
+                            <div class="w-100 ps-3 ps-md-4">
+                                <div class="d-flex align-items-center">
+                                    <h2 class="accordion-header h5 mb-0 me-3" id="shippingAddressHeading">
+                                        <span class="d-none d-lg-inline">Shipping address</span>
+                                        <button type="button" class="accordion-button collapsed fs-5 d-lg-none py-1"
+                                            data-bs-toggle="collapse" data-bs-target="#shippingAddress"
+                                            aria-expanded="false" aria-controls="shippingAddress">
+                                            <span class="me-2">Shipping address</span>
+                                        </button>
+                                    </h2>
+                                    <div class="nav ms-auto">
+                                        <a class="nav-link text-decoration-underline p-0"
+                                            href="{{ route('second', ['checkout', 'v1-shipping']) }}">Edit</a>
+                                    </div>
+                                </div>
+                                <div class="accordion-collapse collapse d-lg-block" id="shippingAddress"
+                                    aria-labelledby="shippingAddressHeading" data-bs-parent="#checkout">
+                                    <ul class="accordion-body list-unstyled fs-sm p-0 pt-3 pt-md-4 mb-0">
+                                        <li>Jane Cooper</li>
+                                        <li>jane.cooper@email.com</li>
+                                        <li>(215) 555-1234</li>
+                                        <li>Pennsylvania 15006</li>
+                                        <li>567 Cherry Lane Apt B12 Harrisburg</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+
+
+                        <!-- Payment method -->
+                        <div class="d-flex align-items-start">
+                            <div class="d-flex align-items-center justify-content-center bg-primary text-white rounded-circle fs-sm fw-semibold lh-1 flex-shrink-0"
+                                style="width: 2rem; height: 2rem; margin-top: -.125rem">3</div>
+                            <div class="w-100 ps-3 ps-md-4">
+                                <h2 class="h5 mb-0">Payment</h2>
+                                <div class="mb-4" id="paymentMethod" role="list">
+
+                                    <!-- Cash on delivery -->
+                                    <div class="mt-4">
+                                        <div class="form-check mb-0" role="listitem" data-bs-toggle="collapse"
+                                            data-bs-target="#cash" aria-expanded="false" aria-controls="cash">
+                                            <label class="form-check-label w-100 text-dark-emphasis fw-semibold">
+                                                <input type="radio" class="form-check-input fs-base me-2 me-sm-3"
+                                                    name="payment-method">
+                                                Cash on delivery
+                                            </label>
+                                        </div>
+                                        <div class="collapse" id="cash" data-bs-parent="#paymentMethod">
+                                            <div class="d-sm-flex align-items-center pt-3 pt-sm-4 pb-2 ps-3 ms-2 ms-sm-3">
+                                                <span class="fs-sm me-3">I would require a change from:</span>
+                                                <div class="input-group mt-2 mt-sm-0" style="max-width: 150px">
+                                                    <span class="input-group-text">
+                                                        <i class="ci-dollar-sign"></i>
+                                                    </span>
+                                                    <input type="number" class="form-control"
+                                                        aria-label="Amount (to the nearest dollar)">
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <!-- Credit card -->
+                                    <div class="mt-4">
+                                        <div class="form-check mb-0" role="listitem" data-bs-toggle="collapse"
+                                            data-bs-target="#card" aria-expanded="true" aria-controls="card">
+                                            <label
+                                                class="form-check-label d-flex align-items-center text-dark-emphasis fw-semibold">
+                                                <input type="radio" class="form-check-input fs-base me-2 me-sm-3"
+                                                    name="payment-method" checked>
+                                                Credit or debit card
+                                                <span class="d-none d-sm-flex gap-2 ms-3">
+                                                    <img src="/img/payment-methods/amex.svg"
+                                                        class="d-block bg-info rounded-1" width="36" alt="Amex">
+                                                    <img src="/img/payment-methods/visa-light-mode.svg"
+                                                        class="d-none-dark" width="36" alt="Visa">
+                                                    <img src="/img/payment-methods/visa-dark-mode.svg"
+                                                        class="d-none d-block-dark" width="36" alt="Visa">
+                                                    <img src="/img/payment-methods/mastercard.svg" width="36"
+                                                        alt="Mastercard">
+                                                    <img src="/img/payment-methods/maestro.svg" width="36"
+                                                        alt="Maestro">
+                                                </span>
+                                            </label>
+                                        </div>
+                                        <div class="collapse show" id="card" data-bs-parent="#paymentMethod">
+                                            <form class="needs-validation pt-4 pb-2 ps-3 ms-2 ms-sm-3" novalidate>
+                                                <div class="position-relative mb-3 mb-sm-4"
+                                                    data-input-format='{"creditCard": true}'>
+                                                    <input type="text"
+                                                        class="form-control form-control-lg form-icon-end"
+                                                        placeholder="Card number" required>
+                                                    <span
+                                                        class="position-absolute d-flex top-50 end-0 translate-middle-y fs-5 text-body-tertiary me-3"
+                                                        data-card-icon></span>
+                                                </div>
+                                                <div class="row row-cols-1 row-cols-sm-2 g-3 g-sm-4">
+                                                    <div class="col">
+                                                        <input type="text" class="form-control form-control-lg"
+                                                            data-input-format='{"date": true, "datePattern": ["m", "y"]}'
+                                                            placeholder="MM/YY">
+                                                    </div>
+                                                    <div class="col">
+                                                        <input type="text" class="form-control form-control-lg"
+                                                            maxlength="4"
+                                                            data-input-format='{"numeral": true, "numeralPositiveOnly": true, "numeralThousandsGroupStyle": "none"}'
+                                                            placeholder="CVC">
+                                                    </div>
+                                                </div>
+                                            </form>
+                                        </div>
+                                    </div>
+
+                                    <!-- PayPal -->
+                                    <div class="mt-4">
+                                        <div class="form-check mb-0" role="listitem" data-bs-toggle="collapse"
+                                            data-bs-target="#paypal" aria-expanded="false" aria-controls="paypal">
+                                            <label
+                                                class="form-check-label d-flex align-items-center text-dark-emphasis fw-semibold">
+                                                <input type="radio" class="form-check-input fs-base me-2 me-sm-3"
+                                                    name="payment-method">
+                                                PayPal
+                                                <img src="/img/payment-methods/paypal-icon.svg" class="ms-3"
+                                                    width="16" alt="PayPal">
+                                            </label>
+                                        </div>
+                                        <div class="collapse" id="paypal" data-bs-parent="#paymentMethod"></div>
+                                    </div>
+
+                                    <!-- Google Pay -->
+                                    <div class="mt-4">
+                                        <div class="form-check mb-0" role="listitem" data-bs-toggle="collapse"
+                                            data-bs-target="#googlepay" aria-expanded="false" aria-controls="googlepay">
+                                            <label
+                                                class="form-check-label d-flex align-items-center text-dark-emphasis fw-semibold">
+                                                <input type="radio" class="form-check-input fs-base me-2 me-sm-3"
+                                                    name="payment-method">
+                                                Google Pay
+                                                <img src="/img/payment-methods/google-icon.svg" class="ms-3"
+                                                    width="20" alt="Google Pay">
+                                            </label>
+                                        </div>
+                                        <div class="collapse" id="googlepay" data-bs-parent="#paymentMethod"></div>
+                                    </div>
+                                </div>
+
+                                <!-- Add promo code button -->
+                                <div class="nav pb-3 mb-2 mb-sm-3">
+                                    <a class="nav-link animate-underline p-0" href="#!">
+                                        <i class="ci-plus-circle fs-xl ms-a me-2"></i>
+                                        <span class="animate-target">Add a promo code or a gift card</span>
+                                    </a>
+                                </div>
+
+                                <!-- Additional comments -->
+                                <textarea class="form-control form-control-lg mb-4" rows="3" placeholder="Additional comments"></textarea>
+
+                                <div class="form-check mb-lg-4">
+                                    <input type="checkbox" class="form-check-input" id="accept-terms">
+                                    <label for="accept-terms" class="form-check-label nav align-items-center">
+                                        I accept the
+                                        <a class="nav-link text-decoration-underline fw-normal ms-1 p-0"
+                                            href="{{ route('any', 'terms-and-conditions')}}">Terms and Conditions</a>
+                                    </label>
+                                </div>
+
+                                <!-- Pay button visible on screens > 991px wide (lg breakpoint) -->
+                                <a class="btn btn-lg btn-primary w-100 d-none d-lg-flex"
+                                    href="{{ route('second', ['checkout', 'v1-thankyou']) }}">Pay $2,406.90</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+
+                <!-- Order summary (sticky sidebar) -->
+                <aside class="col-lg-4 offset-xl-1" style="margin-top: -100px">
+                    <div class="position-sticky top-0" style="padding-top: 100px">
+                        <div class="bg-body-tertiary rounded-5 p-4 mb-3">
+                            <div class="p-sm-2 p-lg-0 p-xl-2">
+                                <div class="border-bottom pb-4 mb-4">
+                                    <div class="d-flex align-items-center justify-content-between mb-4">
+                                        <h5 class="mb-0">Order summary</h5>
+                                        <div class="nav">
+                                            <a class="nav-link text-decoration-underline p-0"
+                                                href="{{ route('second', ['checkout', 'v1-cart']) }}">Edit</a>
+                                        </div>
+                                    </div>
+                                    <a class="d-flex align-items-center gap-2 text-decoration-none" href="#orderPreview"
+                                        data-bs-toggle="offcanvas">
+                                        <div class="ratio ratio-1x1" style="max-width: 64px">
+                                            <img src="/img/shop/electronics/thumbs/08.png" class="d-block p-1"
+                                                alt="iPhone">
+                                        </div>
+                                        <div class="ratio ratio-1x1" style="max-width: 64px">
+                                            <img src="/img/shop/electronics/thumbs/09.png" class="d-block p-1"
+                                                alt="iPad Pro">
+                                        </div>
+                                        <div class="ratio ratio-1x1" style="max-width: 64px">
+                                            <img src="/img/shop/electronics/thumbs/01.png" class="d-block p-1"
+                                                alt="Smart Watch">
+                                        </div>
+                                        <i class="ci-chevron-right text-body fs-xl p-0 ms-auto"></i>
+                                    </a>
+                                </div>
+                                <ul class="list-unstyled fs-sm gap-3 mb-0">
+                                    <li class="d-flex justify-content-between">
+                                        Subtotal (3 items):
+                                        <span class="text-dark-emphasis fw-medium">$2,427.00</span>
+                                    </li>
+                                    <li class="d-flex justify-content-between">
+                                        Saving:
+                                        <span class="text-danger fw-medium">-$110.00</span>
+                                    </li>
+                                    <li class="d-flex justify-content-between">
+                                        Tax collected:
+                                        <span class="text-dark-emphasis fw-medium">$73.40</span>
+                                    </li>
+                                    <li class="d-flex justify-content-between">
+                                        Shipping:
+                                        <span class="text-dark-emphasis fw-medium">$16.50</span>
+                                    </li>
+                                </ul>
+                                <div class="border-top pt-4 mt-4">
+                                    <div class="d-flex justify-content-between mb-3">
+                                        <span class="fs-sm">Estimated total:</span>
+                                        <span class="h5 mb-0">$2,406.90</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="bg-body-tertiary rounded-5 p-4">
+                            <div class="d-flex align-items-center px-sm-2 px-lg-0 px-xl-2">
+                                <svg class="text-warning flex-shrink-0" xmlns="http://www.w3.org/2000/svg" width="16"
+                                    height="16" fill="currentColor">
+                                    <path
+                                        d="M1.333 9.667H7.5V16h-5c-.64 0-1.167-.527-1.167-1.167V9.667zm13.334 0v5.167c0 .64-.527 1.167-1.167 1.167h-5V9.667h6.167zM0 5.833V7.5c0 .64.527 1.167 1.167 1.167h.167H7.5v-1-3H1.167C.527 4.667 0 5.193 0 5.833zm14.833-1.166H8.5v3 1h6.167.167C15.473 8.667 16 8.14 16 7.5V5.833c0-.64-.527-1.167-1.167-1.167z" />
+                                    <path
+                                        d="M8 5.363a.5.5 0 0 1-.495-.573C7.752 3.123 9.054-.03 12.219-.03c1.807.001 2.447.977 2.447 1.813 0 1.486-2.069 3.58-6.667 3.58zM12.219.971c-2.388 0-3.295 2.27-3.595 3.377 1.884-.088 3.072-.565 3.756-.971.949-.563 1.287-1.193 1.287-1.595 0-.599-.747-.811-1.447-.811z" />
+                                    <path
+                                        d="M8.001 5.363c-4.598 0-6.667-2.094-6.667-3.58 0-.836.641-1.812 2.448-1.812 3.165 0 4.467 3.153 4.713 4.819a.5.5 0 0 1-.495.573zM3.782.971c-.7 0-1.448.213-1.448.812 0 .851 1.489 2.403 5.042 2.566C7.076 3.241 6.169.971 3.782.971z" />
+                                </svg>
+                                <div class="text-dark-emphasis fs-sm ps-2 ms-1">Congratulations! You have earned <span
+                                        class="fw-semibold">240 bonuses</span></div>
+                            </div>
+                        </div>
+                    </div>
+                </aside>
+            </div>
+        </div>
+    </main>
+
+    @include('layouts.partials/footer')
+@endsection
+
+@section('scripts')
+@endsection
diff --git a/resources/views/checkout/v1-shipping.blade.php b/resources/views/checkout/v1-shipping.blade.php
new file mode 100644
index 0000000..234bbc9
--- /dev/null
+++ b/resources/views/checkout/v1-shipping.blade.php
@@ -0,0 +1,301 @@
+@extends('layouts.landing', ['title' => 'Checkout v.1 - Shipping Address'])
+
+@section('content')
+    <!-- Order preview offcanvas -->
+    <div class="offcanvas offcanvas-end pb-sm-2 px-sm-2" id="orderPreview" tabindex="-1" aria-labelledby="orderPreviewLabel"
+        style="width: 500px">
+        <div class="offcanvas-header py-3 pt-lg-4">
+            <h4 class="offcanvas-title" id="orderPreviewLabel">Your order</h4>
+            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+        </div>
+        <div class="offcanvas-body d-flex flex-column gap-3 py-2">
+
+            <!-- Item -->
+            <div class="d-flex align-items-center">
+                <a class="flex-shrink-0" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                    <img src="/img/shop/electronics/thumbs/08.png" width="110" alt="iPhone 14">
+                </a>
+                <div class="w-100 min-w-0 ps-2 ps-sm-3">
+                    <h5 class="d-flex animate-underline mb-2">
+                        <a class="d-block fs-sm fw-medium text-truncate animate-target"
+                            href="{{ route('second', ['shop', 'product-general-electronics']) }}">Apple iPhone 14 128GB White</a>
+                    </h5>
+                    <div class="h6 mb-0">$899.00</div>
+                    <div class="fs-xs pt-2">Qty: 1</div>
+                </div>
+            </div>
+
+            <!-- Item -->
+            <div class="d-flex align-items-center">
+                <a class="position-relative flex-shrink-0" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                    <span class="badge text-bg-danger position-absolute top-0 start-0">-10%</span>
+                    <img src="/img/shop/electronics/thumbs/09.png" width="110" alt="iPad Pro">
+                </a>
+                <div class="w-100 min-w-0 ps-2 ps-sm-3">
+                    <h5 class="d-flex animate-underline mb-2">
+                        <a class="d-block fs-sm fw-medium text-truncate animate-target"
+                            href="{{ route('second', ['shop', 'product-general-electronics']) }}">Tablet Apple iPad Pro M2</a>
+                    </h5>
+                    <div class="h6 mb-0">$989.00 <del class="text-body-tertiary fs-xs fw-normal">$1,099.00</del></div>
+                    <div class="fs-xs pt-2">Qty: 1</div>
+                </div>
+            </div>
+
+            <!-- Item -->
+            <div class="d-flex align-items-center">
+                <a class="flex-shrink-0" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                    <img src="/img/shop/electronics/thumbs/01.png" width="110" alt="Smart Watch">
+                </a>
+                <div class="w-100 min-w-0 ps-2 ps-sm-3">
+                    <h5 class="d-flex animate-underline mb-2">
+                        <a class="d-block fs-sm fw-medium text-truncate animate-target"
+                            href="{{ route('second', ['shop', 'product-general-electronics']) }}">Smart Watch Series 7, White</a>
+                    </h5>
+                    <div class="h6 mb-0">$429.00</div>
+                    <div class="fs-xs pt-2">Qty: 1</div>
+                </div>
+            </div>
+        </div>
+
+        <div class="offcanvas-header">
+            <a class="btn btn-lg btn-outline-secondary w-100" href="{{ route('second', ['checkout', 'v1-cart']) }}">Edit cart</a>
+        </div>
+    </div>
+
+    @include('layouts.partials/offcanvas')
+
+    @include('layouts.partials/navbar', ['wishlist' => true])
+
+    <!-- Page content -->
+    <main class="content-wrapper">
+        <div class="container py-5">
+            <div class="row pt-1 pt-sm-3 pt-lg-4 pb-2 pb-md-3 pb-lg-4 pb-xl-5">
+                <div class="col-lg-8 col-xl-7 mb-5 mb-lg-0">
+                    <div class="accordion d-flex flex-column gap-5 pe-lg-4 pe-xl-0" id="checkout">
+
+                        <!-- Delivery info overview + Edit button -->
+                        <div class="accordion-item d-flex align-items-start border-0">
+                            <div class="d-flex align-items-center justify-content-center bg-body-secondary text-dark-emphasis rounded-circle flex-shrink-0"
+                                style="width: 2rem; height: 2rem; margin-top: -.125rem">
+                                <i class="ci-check fs-base"></i>
+                            </div>
+                            <div class="w-100 ps-3 ps-md-4">
+                                <div class="d-flex align-items-center">
+                                    <h2 class="accordion-header h5 mb-0 me-3" id="deliveryInfoHeading">
+                                        <span class="d-none d-lg-inline">Delivery information</span>
+                                        <button type="button" class="accordion-button collapsed fs-5 d-lg-none py-1"
+                                            data-bs-toggle="collapse" data-bs-target="#deliveryInfo" aria-expanded="false"
+                                            aria-controls="deliveryInfo">
+                                            <span class="me-2">Delivery information</span>
+                                        </button>
+                                    </h2>
+                                    <div class="nav ms-auto">
+                                        <a class="nav-link text-decoration-underline p-0"
+                                            href="{{ route('second', ['checkout', 'v1-delivery-2']) }}">Edit</a>
+                                    </div>
+                                </div>
+                                <div class="accordion-collapse collapse d-lg-block" id="deliveryInfo"
+                                    aria-labelledby="deliveryInfoHeading" data-bs-parent="#checkout">
+                                    <div class="accordion-body p-0 pt-3 pt-md-4">
+                                        <h3 class="fs-sm mb-2">Postcode</h3>
+                                        <p class="fs-sm">15006</p>
+                                        <h3 class="fs-sm mb-2">Estimated delivery date</h3>
+                                        <div class="d-flex align-items-center fs-sm">
+                                            Monday, 13
+                                            <span class="opacity-40 mx-2">|</span>
+                                            12:00 - 16:00
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+
+                        <!-- Shipping address form -->
+                        <div class="d-flex align-items-start">
+                            <div class="d-flex align-items-center justify-content-center bg-primary text-white rounded-circle fs-sm fw-semibold lh-1 flex-shrink-0"
+                                style="width: 2rem; height: 2rem; margin-top: -.125rem">2</div>
+                            <div class="w-100 ps-3 ps-md-4">
+                                <h1 class="h5 mb-md-4">Shipping address</h1>
+                                <form class="needs-validation" novalidate>
+                                    <div class="row row-cols-1 row-cols-sm-2 g-3 g-sm-4 mb-4">
+                                        <div class="col">
+                                            <label for="shipping-fn" class="form-label">First name <span
+                                                    class="text-danger">*</span></label>
+                                            <input type="text" class="form-control form-control-lg" id="shipping-fn"
+                                                required>
+                                        </div>
+                                        <div class="col">
+                                            <label for="shipping-ln" class="form-label">Last name <span
+                                                    class="text-danger">*</span></label>
+                                            <input type="text" class="form-control form-control-lg" id="shipping-ln"
+                                                required>
+                                        </div>
+                                        <div class="col">
+                                            <label for="shipping-email" class="form-label">Email address <span
+                                                    class="text-danger">*</span></label>
+                                            <input type="email" class="form-control form-control-lg"
+                                                id="shipping-email" required>
+                                        </div>
+                                        <div class="col">
+                                            <label for="shipping-mobile" class="form-label">Mobile number</label>
+                                            <input type="text" class="form-control form-control-lg"
+                                                id="shipping-mobile">
+                                        </div>
+                                        <div class="col">
+                                            <label class="form-label">City <span class="text-danger">*</span></label>
+                                            <select class="form-select"
+                                                data-select='{
+                          "searchEnabled": true,
+                          "classNames": {
+                            "containerInner": ["form-select", "form-select-lg"]
+                          }
+                        }'
+                                                required>
+                                                <option value="">Select your city</option>
+                                                <option value="New York City">New York City</option>
+                                                <option value="Los Angeles">Los Angeles</option>
+                                                <option value="Chicago">Chicago</option>
+                                                <option value="Houston">Houston</option>
+                                                <option value="Phoenix">Phoenix</option>
+                                                <option value="Philadelphia">Philadelphia</option>
+                                                <option value="San Antonio">San Antonio</option>
+                                                <option value="San Diego">San Diego</option>
+                                                <option value="Dallas">Dallas</option>
+                                                <option value="San Jose">San Jose</option>
+                                                <option value="Austin">Austin</option>
+                                                <option value="Seattle">Seattle</option>
+                                            </select>
+                                        </div>
+                                        <div class="col">
+                                            <label for="shipping-postcode" class="form-label">Postcode <span
+                                                    class="text-danger">*</span></label>
+                                            <input type="text" class="form-control form-control-lg"
+                                                id="shipping-postcode" required>
+                                        </div>
+                                    </div>
+                                    <div class="mb-3">
+                                        <label for="shipping-address" class="form-label">House / apartment number and
+                                            street
+                                            address <span class="text-danger">*</span></label>
+                                        <input type="text" class="form-control form-control-lg" id="shipping-address"
+                                            required>
+                                    </div>
+                                    <div class="nav mb-4">
+                                        <a class="nav-link px-0" href="#!">
+                                            Add address line
+                                            <i class="ci-plus fs-base ms-1"></i>
+                                        </a>
+                                    </div>
+                                    <h3 class="h6">
+                                        Billing address
+                                        <i class="ci-info text-body-secondary align-middle ms-2" data-bs-toggle="popover"
+                                            data-bs-trigger="hover" data-bs-custom-class="popover-sm"
+                                            data-bs-content="Uncheck the checkbox below if your Billing address should be different from your Shipping address."></i>
+                                    </h3>
+                                    <div class="form-check mb-lg-4">
+                                        <input type="checkbox" class="form-check-input" id="same-address" checked>
+                                        <label for="same-address" class="form-check-label">Same as delivery
+                                            address</label>
+                                    </div>
+                                    <a class="btn btn-lg btn-primary w-100 d-none d-lg-flex"
+                                        href="{{ route('second', ['checkout', 'v1-payment']) }}">
+                                        Continue
+                                        <i class="ci-chevron-right fs-lg ms-1 me-n1"></i>
+                                    </a>
+                                </form>
+                            </div>
+                        </div>
+
+                        <!-- Payment -->
+                        <div class="d-flex align-items-start">
+                            <div class="d-flex align-items-center justify-content-center bg-body-secondary text-body-secondary rounded-circle fs-sm fw-semibold lh-1 flex-shrink-0"
+                                style="width: 2rem; height: 2rem; margin-top: -.125rem">3</div>
+                            <h2 class="h5 text-body-secondary ps-3 ps-md-4 mb-0">Payment</h2>
+                        </div>
+                    </div>
+                </div>
+
+
+                <!-- Order summary (sticky sidebar) -->
+                <aside class="col-lg-4 offset-xl-1" style="margin-top: -100px">
+                    <div class="position-sticky top-0" style="padding-top: 100px">
+                        <div class="bg-body-tertiary rounded-5 p-4 mb-3">
+                            <div class="p-sm-2 p-lg-0 p-xl-2">
+                                <div class="border-bottom pb-4 mb-4">
+                                    <div class="d-flex align-items-center justify-content-between mb-4">
+                                        <h5 class="mb-0">Order summary</h5>
+                                        <div class="nav">
+                                            <a class="nav-link text-decoration-underline p-0"
+                                                href="{{ route('second', ['checkout', 'v1-cart']) }}">Edit</a>
+                                        </div>
+                                    </div>
+                                    <a class="d-flex align-items-center gap-2 text-decoration-none" href="#orderPreview"
+                                        data-bs-toggle="offcanvas">
+                                        <div class="ratio ratio-1x1" style="max-width: 64px">
+                                            <img src="/img/shop/electronics/thumbs/08.png" class="d-block p-1"
+                                                alt="iPhone">
+                                        </div>
+                                        <div class="ratio ratio-1x1" style="max-width: 64px">
+                                            <img src="/img/shop/electronics/thumbs/09.png" class="d-block p-1"
+                                                alt="iPad Pro">
+                                        </div>
+                                        <div class="ratio ratio-1x1" style="max-width: 64px">
+                                            <img src="/img/shop/electronics/thumbs/01.png" class="d-block p-1"
+                                                alt="Smart Watch">
+                                        </div>
+                                        <i class="ci-chevron-right text-body fs-xl p-0 ms-auto"></i>
+                                    </a>
+                                </div>
+                                <ul class="list-unstyled fs-sm gap-3 mb-0">
+                                    <li class="d-flex justify-content-between">
+                                        Subtotal (3 items):
+                                        <span class="text-dark-emphasis fw-medium">$2,427.00</span>
+                                    </li>
+                                    <li class="d-flex justify-content-between">
+                                        Saving:
+                                        <span class="text-danger fw-medium">-$110.00</span>
+                                    </li>
+                                    <li class="d-flex justify-content-between">
+                                        Tax collected:
+                                        <span class="text-dark-emphasis fw-medium">$73.40</span>
+                                    </li>
+                                    <li class="d-flex justify-content-between">
+                                        Shipping:
+                                        <span class="text-dark-emphasis fw-medium">$16.50</span>
+                                    </li>
+                                </ul>
+                                <div class="border-top pt-4 mt-4">
+                                    <div class="d-flex justify-content-between mb-3">
+                                        <span class="fs-sm">Estimated total:</span>
+                                        <span class="h5 mb-0">$2,406.90</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="bg-body-tertiary rounded-5 p-4">
+                            <div class="d-flex align-items-center px-sm-2 px-lg-0 px-xl-2">
+                                <svg class="text-warning flex-shrink-0" xmlns="http://www.w3.org/2000/svg" width="16"
+                                    height="16" fill="currentColor">
+                                    <path
+                                        d="M1.333 9.667H7.5V16h-5c-.64 0-1.167-.527-1.167-1.167V9.667zm13.334 0v5.167c0 .64-.527 1.167-1.167 1.167h-5V9.667h6.167zM0 5.833V7.5c0 .64.527 1.167 1.167 1.167h.167H7.5v-1-3H1.167C.527 4.667 0 5.193 0 5.833zm14.833-1.166H8.5v3 1h6.167.167C15.473 8.667 16 8.14 16 7.5V5.833c0-.64-.527-1.167-1.167-1.167z" />
+                                    <path
+                                        d="M8 5.363a.5.5 0 0 1-.495-.573C7.752 3.123 9.054-.03 12.219-.03c1.807.001 2.447.977 2.447 1.813 0 1.486-2.069 3.58-6.667 3.58zM12.219.971c-2.388 0-3.295 2.27-3.595 3.377 1.884-.088 3.072-.565 3.756-.971.949-.563 1.287-1.193 1.287-1.595 0-.599-.747-.811-1.447-.811z" />
+                                    <path
+                                        d="M8.001 5.363c-4.598 0-6.667-2.094-6.667-3.58 0-.836.641-1.812 2.448-1.812 3.165 0 4.467 3.153 4.713 4.819a.5.5 0 0 1-.495.573zM3.782.971c-.7 0-1.448.213-1.448.812 0 .851 1.489 2.403 5.042 2.566C7.076 3.241 6.169.971 3.782.971z" />
+                                </svg>
+                                <div class="text-dark-emphasis fs-sm ps-2 ms-1">Congratulations! You have earned <span
+                                        class="fw-semibold">240 bonuses</span></div>
+                            </div>
+                        </div>
+                    </div>
+                </aside>
+            </div>
+        </div>
+    </main>
+
+    @include('layouts.partials/footer')
+@endsection
+
+@section('scripts')
+@endsection
diff --git a/resources/views/checkout/v1-thankyou.blade.php b/resources/views/checkout/v1-thankyou.blade.php
new file mode 100644
index 0000000..66ab692
--- /dev/null
+++ b/resources/views/checkout/v1-thankyou.blade.php
@@ -0,0 +1,244 @@
+@extends('layouts.landing', ['title' => 'Checkout v.1 - Thank You Page'])
+
+@section('content')
+    @include('layouts.partials/offcanvas')
+
+    @include('layouts.partials/navbar', ['wishlist' => true])
+
+    <main class="content-wrapper">
+        <div class="row row-cols-1 row-cols-lg-2 g-0 mx-auto" style="max-width: 1920px">
+
+            <!-- Tank you content column -->
+            <div class="col d-flex flex-column justify-content-center py-5 px-xl-4 px-xxl-5">
+                <div class="w-100 pt-sm-2 pt-md-3 pt-lg-4 pb-lg-4 pb-xl-5 px-3 px-sm-4 pe-lg-0 ps-lg-5 mx-auto ms-lg-auto me-lg-4"
+                    style="max-width: 740px">
+                    <div class="d-flex align-items-sm-center border-bottom pb-4 pb-md-5">
+                        <div class="d-flex align-items-center justify-content-center bg-success text-white rounded-circle flex-shrink-0"
+                            style="width: 3rem; height: 3rem; margin-top: -.125rem">
+                            <i class="ci-check fs-4"></i>
+                        </div>
+                        <div class="w-100 ps-3">
+                            <div class="fs-sm mb-1">Order #234000</div>
+                            <div class="d-sm-flex align-items-center">
+                                <h1 class="h4 mb-0 me-3">Thank you for your order!</h1>
+                                <div class="nav mt-2 mt-sm-0 ms-auto">
+                                    <a class="nav-link text-decoration-underline p-0" href="#!">Track order</a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="d-flex flex-column gap-4 pt-3 pb-5 mt-3">
+                        <div>
+                            <h3 class="h6 mb-2">Delivery</h3>
+                            <p class="fs-sm mb-0">567 Cherry Souse Lane Sacramento, 95829</p>
+                        </div>
+                        <div>
+                            <h3 class="h6 mb-2">Time</h3>
+                            <p class="fs-sm mb-0">Sunday, May 9, 12:00 - 14:00</p>
+                        </div>
+                        <div>
+                            <h3 class="h6 mb-2">Payment</h3>
+                            <p class="fs-sm mb-0">Visa: **** **** **** 8395</p>
+                        </div>
+                    </div>
+                    <div class="bg-success rounded px-4 py-4" style="--cz-bg-opacity: .2">
+                        <div class="py-3">
+                            <h2 class="h4 text-center pb-2 mb-1">🎉 Congratulations! 30% off your new purchase!</h2>
+                            <p class="fs-sm text-center mb-4">Use the coupon now or look for it in your personal account.
+                            </p>
+                            <div class="d-flex gap-2 mx-auto" style="max-width: 500px">
+                                <input type="text" class="form-control border-white border-opacity-10 w-100"
+                                    id="couponCode" value="30%SALEOFF" readonly>
+                                <button type="button" class="btn btn-dark" data-copy-text-from="#couponCode">Copy
+                                    coupon</button>
+                            </div>
+                        </div>
+                    </div>
+                    <p class="fs-sm pt-4 pt-md-5 mt-2 mt-sm-3 mt-md-0 mb-0">Need help?<a class="fw-medium ms-2"
+                            href="#!">Contact us</a></p>
+                </div>
+            </div>
+
+
+            <!-- Related products -->
+            <div class="col pt-sm-3 p-md-5 ps-lg-5 py-lg-4 pe-lg-4 p-xxl-5">
+                <div class="position-relative d-flex align-items-center h-100 py-5 px-3 px-sm-4 px-xl-5">
+                    <span
+                        class="position-absolute top-0 start-0 w-100 h-100 bg-body-tertiary rounded-5 d-none d-md-block"></span>
+                    <span class="position-absolute top-0 start-0 w-100 h-100 bg-body-tertiary d-md-none"></span>
+                    <div class="position-relative w-100 z-2 mx-auto pb-2 pb-sm-3 pb-md-0" style="max-width: 636px">
+                        <h2 class="h4 text-center pb-3">You may also like</h2>
+                        <div class="row row-cols-2 g-3 g-sm-4 mb-4">
+
+                            <!-- Item -->
+                            <div class="col">
+                                <div
+                                    class="product-card animate-underline hover-effect-opacity bg-body rounded shadow-none">
+                                    <div class="position-relative">
+                                        <div
+                                            class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                                            <div class="d-flex flex-column gap-2">
+                                                <button type="button"
+                                                    class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex"
+                                                    aria-label="Add to Wishlist">
+                                                    <i class="ci-heart fs-base animate-target"></i>
+                                                </button>
+                                                <button type="button"
+                                                    class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex"
+                                                    aria-label="Compare">
+                                                    <i class="ci-refresh-cw fs-base animate-target"></i>
+                                                </button>
+                                            </div>
+                                        </div>
+                                        <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                                            <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body"
+                                                data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                                                <i class="ci-more-vertical fs-lg"></i>
+                                            </button>
+                                            <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                                                <li>
+                                                    <a class="dropdown-item" href="#!">
+                                                        <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                                                        Add to Wishlist
+                                                    </a>
+                                                </li>
+                                                <li>
+                                                    <a class="dropdown-item" href="#!">
+                                                        <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                                                        Compare
+                                                    </a>
+                                                </li>
+                                            </ul>
+                                        </div>
+                                        <a class="d-block rounded-top overflow-hidden p-3 p-sm-4"
+                                            href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                            <span
+                                                class="badge bg-danger position-absolute top-0 start-0 mt-2 ms-2 mt-lg-3 ms-lg-3">-21%</span>
+                                            <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                                                <img src="/img/shop/electronics/01.png" alt="VR Glasses">
+                                            </div>
+                                        </a>
+                                    </div>
+                                    <div class="w-100 min-w-0 px-2 pb-2 px-sm-3 pb-sm-3">
+                                        <div class="d-flex align-items-center gap-2 mb-2">
+                                            <div class="d-flex gap-1 fs-xs">
+                                                <i class="ci-star-filled text-warning"></i>
+                                                <i class="ci-star-filled text-warning"></i>
+                                                <i class="ci-star-filled text-warning"></i>
+                                                <i class="ci-star-filled text-warning"></i>
+                                                <i class="ci-star text-body-tertiary opacity-75"></i>
+                                            </div>
+                                            <span class="text-body-tertiary fs-xs">(123)</span>
+                                        </div>
+                                        <h3 class="pb-1 mb-2">
+                                            <a class="d-block fs-sm fw-medium text-truncate"
+                                                href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                                <span class="animate-target">VRB01 Virtual Reality Glasses</span>
+                                            </a>
+                                        </h3>
+                                        <div class="d-flex align-items-center justify-content-between">
+                                            <div class="h5 lh-1 mb-0">$340.99 <del
+                                                    class="text-body-tertiary fs-sm fw-normal">$430.00</del></div>
+                                            <button type="button"
+                                                class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2"
+                                                aria-label="Add to Cart">
+                                                <i class="ci-shopping-cart fs-base animate-target"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Item -->
+                            <div class="col">
+                                <div
+                                    class="product-card animate-underline hover-effect-opacity bg-body rounded shadow-none">
+                                    <div class="position-relative">
+                                        <div
+                                            class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                                            <div class="d-flex flex-column gap-2">
+                                                <button type="button"
+                                                    class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex"
+                                                    aria-label="Add to Wishlist">
+                                                    <i class="ci-heart fs-base animate-target"></i>
+                                                </button>
+                                                <button type="button"
+                                                    class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex"
+                                                    aria-label="Compare">
+                                                    <i class="ci-refresh-cw fs-base animate-target"></i>
+                                                </button>
+                                            </div>
+                                        </div>
+                                        <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                                            <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body"
+                                                data-bs-toggle="dropdown" aria-expanded="false"
+                                                aria-label="More actions">
+                                                <i class="ci-more-vertical fs-lg"></i>
+                                            </button>
+                                            <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                                                <li>
+                                                    <a class="dropdown-item" href="#!">
+                                                        <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                                                        Add to Wishlist
+                                                    </a>
+                                                </li>
+                                                <li>
+                                                    <a class="dropdown-item" href="#!">
+                                                        <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                                                        Compare
+                                                    </a>
+                                                </li>
+                                            </ul>
+                                        </div>
+                                        <a class="d-block rounded-top overflow-hidden p-3 p-sm-4"
+                                            href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                            <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                                                <img src="/img/shop/electronics/14.png" alt="iPhone 14">
+                                            </div>
+                                        </a>
+                                    </div>
+                                    <div class="w-100 min-w-0 px-2 pb-2 px-sm-3 pb-sm-3">
+                                        <div class="d-flex align-items-center gap-2 mb-2">
+                                            <div class="d-flex gap-1 fs-xs">
+                                                <i class="ci-star-filled text-warning"></i>
+                                                <i class="ci-star-filled text-warning"></i>
+                                                <i class="ci-star-filled text-warning"></i>
+                                                <i class="ci-star-filled text-warning"></i>
+                                                <i class="ci-star-half text-warning"></i>
+                                            </div>
+                                            <span class="text-body-tertiary fs-xs">(142)</span>
+                                        </div>
+                                        <h3 class="pb-1 mb-2">
+                                            <a class="d-block fs-sm fw-medium text-truncate"
+                                                href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                                <span class="animate-target">Apple iPhone 14 128GB Blue</span>
+                                            </a>
+                                        </h3>
+                                        <div class="d-flex align-items-center justify-content-between">
+                                            <div class="h5 lh-1 mb-0">$899.00</div>
+                                            <button type="button"
+                                                class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2"
+                                                aria-label="Add to Cart">
+                                                <i class="ci-shopping-cart fs-base animate-target"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <a class="btn btn-lg btn-primary w-100" href="{{ route('second', ['shop', 'catalog-electronics']) }}">
+                            Continue shopping
+                            <i class="ci-chevron-right fs-lg ms-1 me-n1"></i>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    @include('layouts.partials/footer')
+@endsection
+
+@section('scripts')
+@endsection
diff --git a/resources/views/checkout/v2-cart.blade.php b/resources/views/checkout/v2-cart.blade.php
new file mode 100644
index 0000000..91aca34
--- /dev/null
+++ b/resources/views/checkout/v2-cart.blade.php
@@ -0,0 +1,711 @@
+@extends('layouts.landing', ['title' => 'Checkout v.2 - Shopping Cart'])
+
+@section('content')
+    @include('layouts.partials/offcanvas')
+
+    <!-- Delivey options offcanvas -->
+    <div class="offcanvas offcanvas-end pb-sm-2 px-sm-2" id="deliveryOptions" tabindex="-1"
+        aria-labelledby="deliveryOptionsLabel" style="width: 500px">
+
+        <!-- Header with nav tabs -->
+        <div class="offcanvas-header flex-column align-items-start py-3 pt-lg-4">
+            <div class="d-flex align-items-center justify-content-between w-100 pb-xl-1 mb-4">
+                <h4 class="offcanvas-title" id="deliveryOptionsLabel">Delivery options</h4>
+                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+            </div>
+            <ul class="nav nav-pills nav-justified w-100" role="tablist">
+                <li class="nav-item" role="presentation">
+                    <button type="button" class="nav-link active" id="delivery-tab" data-bs-toggle="tab"
+                        data-bs-target="#delivery-tab-pane" role="tab" aria-controls="delivery-tab-pane"
+                        aria-selected="true">
+                        <i class="ci-shopping-bag fs-base ms-n1 me-2"></i>
+                        Delivery
+                    </button>
+                </li>
+                <li class="nav-item" role="presentation">
+                    <button type="button" class="nav-link" id="pickup-tab" data-bs-toggle="tab"
+                        data-bs-target="#pickup-tab-pane" role="tab" aria-controls="pickup-tab-pane"
+                        aria-selected="false">
+                        <i class="ci-box fs-base ms-n1 me-2"></i>
+                        Pickup
+                    </button>
+                </li>
+            </ul>
+        </div>
+
+        <div class="offcanvas-body tab-content py-2 py-sm-3">
+
+            <!-- Delivery tab -->
+            <div class="tab-pane fade show active" id="delivery-tab-pane" role="tabpanel" aria-labelledby="delivery-tab">
+
+                <!-- Address options collapse -->
+                <div class="collapse delivery-address show" id="deliveryAddressOptions">
+                    <div class="mt-n3">
+                        <div class="form-check border-bottom py-4 m-0">
+                            <input type="radio" class="form-check-input" id="address-1" name="delivery-address" checked>
+                            <label for="address-1" class="form-check-label text-dark-emphasis fw-semibold">567 Cherry Lane
+                                Apt B12 Sacramento, 95829</label>
+                        </div>
+                        <div class="form-check border-bottom py-4 m-0">
+                            <input type="radio" class="form-check-input" id="address-2" name="delivery-address">
+                            <div class="d-flex w-100">
+                                <label for="address-2" class="form-check-label text-dark-emphasis me-3">1901 Thornridge Cir.
+                                    Shiloh, Hawaii, 81063</label>
+                                <button type="button" class="btn-close fs-sm ms-auto" data-bs-toggle="tooltip"
+                                    data-bs-custom-class="tooltip-sm" data-bs-title="Remove" aria-label="Remove"></button>
+                            </div>
+                        </div>
+                        <div class="form-check border-bottom py-4 m-0">
+                            <input type="radio" class="form-check-input" id="address-3" name="delivery-address">
+                            <div class="d-flex w-100">
+                                <label for="address-3" class="form-check-label text-dark-emphasis me-3">3517 W. Gray St.
+                                    Utica, Pennsylvania, 57867</label>
+                                <button type="button" class="btn-close fs-sm ms-auto" data-bs-toggle="tooltip"
+                                    data-bs-custom-class="tooltip-sm" data-bs-title="Remove" aria-label="Remove"></button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Add new address collapse -->
+                <div class="collapse delivery-address" id="deliveryAddressAdd">
+                    <div class="nav mb-4">
+                        <a class="nav-link animate-underline p-0" href=".delivery-address" data-bs-toggle="collapse"
+                            aria-expanded="true" aria-controls="deliveryAddressOptions deliveryAddressAdd">
+                            <i class="ci-chevron-left fs-lg ms-n1 me-1"></i>
+                            <span class="animate-target">Back to my addresses</span>
+                        </a>
+                    </div>
+                    <div class="d-flex align-items-center justify-content-between mb-3 mb-lg-4">
+                        <h5 class="h6 mb-0 me-3">Add an address to start ordering</h5>
+                        <a class="btn btn-sm btn-outline-primary rounded-pill" href="#!">
+                            <i class="ci-map-pin fs-base ms-n1 me-1"></i>
+                            Find on map
+                        </a>
+                    </div>
+                    <div class="mb-3 mb-lg-4">
+                        <label class="form-label">State *</label>
+                        <select class="form-select form-select-lg rounded-pill"
+                            data-select='{
+                "classNames": {
+                  "containerInner": ["form-select", "form-select-lg", "rounded-pill"]
+                }
+              }'
+                            aria-label="Large pill select">
+                            <option value="">Select state</option>
+                            <option value="Arizona">Arizona</option>
+                            <option value="California">California</option>
+                            <option value="Montana">Montana</option>
+                            <option value="Nevada">Nevada</option>
+                            <option value="New Mexico">New Mexico</option>
+                            <option value="Texas">Texas</option>
+                        </select>
+                    </div>
+                    <div class="mb-3 mb-lg-4">
+                        <label for="my-postcode" class="form-label">Postcode *</label>
+                        <input type="text" class="form-control form-control-lg rounded-pill" id="my-postcode">
+                    </div>
+                    <div class="mb-3 mb-lg-4">
+                        <label class="form-label">City *</label>
+                        <select class="form-select form-select-lg rounded-pill"
+                            data-select='{
+                "classNames": {
+                  "containerInner": ["form-select", "form-select-lg", "rounded-pill"]
+                }
+              }'
+                            aria-label="Large pill select">
+                            <option value="">Select city</option>
+                            <option value="Austin">Austin</option>
+                            <option value="Helena">Helena</option>
+                            <option value="Sacramento">Sacramento</option>
+                            <option value="Santa Fe">Santa Fe</option>
+                            <option value="Las Vegas">Las Vegas</option>
+                            <option value="Phoenix">Phoenix</option>
+                        </select>
+                    </div>
+                    <label for="my-address" class="form-label">Street address *</label>
+                    <input type="text" class="form-control form-control-lg rounded-pill" id="my-address">
+                </div>
+
+                <!-- Add address collapse toggle -->
+                <div class="nav">
+                    <a class="nav-link hiding-collapse-toggle animate-underline collapsed px-0 mt-4"
+                        href=".delivery-address" data-bs-toggle="collapse" aria-expanded="false"
+                        aria-controls="deliveryAddressOptions deliveryAddressAdd">
+                        <span class="animate-target">Add delivery address</span>
+                        <i class="ci-plus fs-base ms-1"></i>
+                    </a>
+                </div>
+            </div>
+
+            <!-- Pickup tab -->
+            <div class="tab-pane fade" id="pickup-tab-pane" role="tabpanel" aria-labelledby="pickup-tab">
+
+                <!-- Pickup store options collapse -->
+                <div class="collapse pickup-options show" id="pickupStoreOptions">
+                    <div class="mt-n3">
+                        <div class="form-check border-bottom py-4 m-0">
+                            <input type="radio" class="form-check-input" id="store-1" name="pickup-store" checked>
+                            <div>
+                                <div class="d-flex w-100 pb-2 mb-1">
+                                    <label for="store-1"
+                                        class="form-check-label text-dark-emphasis fw-semibold me-3">Sacramento
+                                        Supercenter</label>
+                                    <button type="button" class="btn-close fs-sm ms-auto" data-bs-toggle="tooltip"
+                                        data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
+                                        aria-label="Remove"></button>
+                                </div>
+                                <div class="fs-xs mb-2">8270 Delta Shores Cir S, Sacramento, CA 95832</div>
+                                <div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">07:00 - 22:00</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="form-check border-bottom py-4 m-0">
+                            <input type="radio" class="form-check-input" id="store-2" name="pickup-store">
+                            <div>
+                                <div class="d-flex w-100 pb-2 mb-1">
+                                    <label for="store-2"
+                                        class="form-check-label text-dark-emphasis fw-semibold me-3">West Sacramento
+                                        Supercenter</label>
+                                    <button type="button" class="btn-close fs-sm ms-auto" data-bs-toggle="tooltip"
+                                        data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
+                                        aria-label="Remove"></button>
+                                </div>
+                                <div class="fs-xs mb-2">755 Riverpoint Ct, West Sacramento, CA 95605</div>
+                                <div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">07:00 - 21:00</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="form-check border-bottom py-4 m-0">
+                            <input type="radio" class="form-check-input" id="store-3" name="pickup-store">
+                            <div>
+                                <div class="d-flex w-100 pb-2 mb-1">
+                                    <label for="store-3"
+                                        class="form-check-label text-dark-emphasis fw-semibold me-3">Rancho Cordova
+                                        Supercenter</label>
+                                    <button type="button" class="btn-close fs-sm ms-auto" data-bs-toggle="tooltip"
+                                        data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
+                                        aria-label="Remove"></button>
+                                </div>
+                                <div class="fs-xs mb-2">10655 Folsom Blvd, Rancho Cordova, CA 95670</div>
+                                <div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">08:00 - 23:00</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Add new pickup store collapse -->
+                <div class="collapse pickup-options" id="pickupStoreAdd">
+                    <div class="nav mb-4">
+                        <a class="nav-link animate-underline p-0" href=".pickup-options" data-bs-toggle="collapse"
+                            aria-expanded="true" aria-controls="pickupStoreOptions pickupStoreAdd">
+                            <i class="ci-chevron-left fs-lg ms-n1 me-1"></i>
+                            <span class="animate-target">Back to my stores</span>
+                        </a>
+                    </div>
+                    <div class="d-flex align-items-center justify-content-between mb-3 mb-lg-4">
+                        <h5 class="h6 mb-0 me-3">Select a suitable store</h5>
+                        <a class="btn btn-sm btn-outline-primary rounded-pill" href="#!">
+                            <i class="ci-map-pin fs-base ms-n1 me-1"></i>
+                            Find on map
+                        </a>
+                    </div>
+                    <div class="mb-3 mb-lg-4">
+                        <label class="form-label">State *</label>
+                        <select class="form-select form-select-lg rounded-pill"
+                            data-select='{
+                "classNames": {
+                  "containerInner": ["form-select", "form-select-lg", "rounded-pill"]
+                }
+              }'
+                            aria-label="Large pill select">
+                            <option value="">Select state</option>
+                            <option value="Arizona">Arizona</option>
+                            <option value="California" selected>California</option>
+                            <option value="Montana">Montana</option>
+                            <option value="Nevada">Nevada</option>
+                            <option value="New Mexico">New Mexico</option>
+                            <option value="Texas">Texas</option>
+                        </select>
+                    </div>
+                    <div class="mb-4">
+                        <label class="form-label">City *</label>
+                        <select class="form-select form-select-lg rounded-pill"
+                            data-select='{
+                "classNames": {
+                  "containerInner": ["form-select", "form-select-lg", "rounded-pill"]
+                }
+              }'
+                            aria-label="Large pill select">
+                            <option value="">Select city</option>
+                            <option value="Austin">Austin</option>
+                            <option value="Helena">Helena</option>
+                            <option value="Sacramento" selected>Sacramento</option>
+                            <option value="Santa Fe">Santa Fe</option>
+                            <option value="Las Vegas">Las Vegas</option>
+                            <option value="Phoenix">Phoenix</option>
+                        </select>
+                    </div>
+                    <div class="fs-xs fw-medium text-uppercase text-body-secondary">Found stores:</div>
+                    <div class="form-check border-bottom py-4 m-0">
+                        <input type="radio" class="form-check-input" id="store-4" name="found-store">
+                        <div>
+                            <label for="store-4"
+                                class="form-check-label text-dark-emphasis fw-semibold pb-2 mb-1">Sacramento
+                                Supercenter</label>
+                            <div class="fs-xs mb-2">8270 Delta Shores Cir S, Sacramento, CA 95832</div>
+                            <div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">07:00 - 22:00</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="form-check border-bottom py-4 m-0">
+                        <input type="radio" class="form-check-input" id="store-5" name="found-store">
+                        <div>
+                            <label for="store-5" class="form-check-label text-dark-emphasis fw-semibold pb-2 mb-1">West
+                                Sacramento Supercenter</label>
+                            <div class="fs-xs mb-2">755 Riverpoint Ct, West Sacramento, CA 95605</div>
+                            <div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">07:00 - 21:00</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="form-check border-bottom py-4 m-0">
+                        <input type="radio" class="form-check-input" id="store-6" name="found-store">
+                        <div>
+                            <label for="store-6" class="form-check-label text-dark-emphasis fw-semibold pb-2 mb-1">Rancho
+                                Cordova Supercenter</label>
+                            <div class="fs-xs mb-2">10655 Folsom Blvd, Rancho Cordova, CA 95670</div>
+                            <div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">08:00 - 23:00</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Add address collapse toggle -->
+                <div class="nav">
+                    <a class="nav-link hiding-collapse-toggle animate-underline collapsed px-0 mt-4"
+                        href=".pickup-options" data-bs-toggle="collapse" aria-expanded="false"
+                        aria-controls="pickupStoreOptions pickupStoreAdd">
+                        <span class="animate-target">Add store address</span>
+                        <i class="ci-plus fs-base ms-1"></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+
+        <!-- Footer -->
+        <div class="offcanvas-header">
+            <button type="button" class="btn btn-lg btn-primary w-100 rounded-pill">Confirm address</button>
+        </div>
+    </div>
+
+    <!-- Site menu offcanvas -->
+    @include('layouts.partials/menu-offcanvas')
+
+    @include('layouts.partials/checkout-navbar')
+
+    <main class="content-wrapper">
+
+        <!-- Breadcrumb -->
+        <nav class="container pt-1 pt-md-0 my-3 my-md-4" aria-label="breadcrumb">
+            <ol class="breadcrumb mb-0">
+                <li class="breadcrumb-item"><a href="{{ route('second', ['home', 'grocery']) }}">Home</a></li>
+                <li class="breadcrumb-item"><a href="{{ route('second', ['shop', 'catalog-grocery']) }}">Shop</a></li>
+                <li class="breadcrumb-item active" aria-current="page">Cart</li>
+            </ol>
+        </nav>
+
+
+        <!-- Items in the cart + Order summary -->
+        <section class="container pb-5 mb-2 mb-md-3 mb-lg-4 mb-xl-5">
+            <h1 class="h3 mb-4">Shopping cart</h1>
+            <div class="row">
+
+                <!-- Items list + Delivery / pickup tabs -->
+                <div class="col-lg-8">
+                    <div class="pe-lg-2 pe-xl-3 me-xl-3">
+
+                        <!-- Delivery / pickup tabs -->
+                        <ul class="nav nav-pills nav-justified flex-nowrap flex-column flex-sm-row pb-md-2 mb-4"
+                            role="tablist">
+                            <li class="nav-item" role="presentation">
+                                <button type="button"
+                                    class="nav-link justify-content-start text-start p-3 px-md-4 px-lg-3 px-xl-4 rounded-4 active"
+                                    id="cart-delivery-tab" data-bs-toggle="pill" data-bs-target="#delivery"
+                                    role="tab" aria-controls="delivery" aria-selected="true">
+                                    <span
+                                        class="d-flex align-items-center justify-content-center flex-shrink-0 bg-success-subtle text-dark-emphasis rounded-circle"
+                                        style="width: 3rem; height: 3rem">
+                                        <i class="ci-shopping-bag fs-xl"></i>
+                                    </span>
+                                    <span class="ps-3">
+                                        <span class="h6 d-block mb-1">Delivery</span>
+                                        <span class="fs-xs fw-normal text-body lh-base">All products are available</span>
+                                    </span>
+                                </button>
+                            </li>
+                            <li class="nav-item" role="presentation">
+                                <button type="button"
+                                    class="nav-link justify-content-start text-start p-3 px-md-4 px-lg-3 px-xl-4 rounded-4"
+                                    id="cart-pickup-tab" data-bs-toggle="pill" data-bs-target="#pickup" role="tab"
+                                    aria-controls="pickup" aria-selected="false">
+                                    <span
+                                        class="d-flex align-items-center justify-content-center flex-shrink-0 bg-info-subtle text-dark-emphasis rounded-circle"
+                                        style="width: 3rem; height: 3rem">
+                                        <i class="ci-package fs-xl"></i>
+                                    </span>
+                                    <span class="ps-3">
+                                        <span class="h6 d-block mb-1">Pickup</span>
+                                        <span class="fs-xs fw-normal text-body lh-base">All products are available</span>
+                                    </span>
+                                </button>
+                            </li>
+                        </ul>
+
+
+                        <!-- Table of items -->
+                        <table class="table position-relative z-2 mb-4">
+                            <thead>
+                                <tr>
+                                    <th scope="col" class="fs-sm fw-normal py-3 ps-0"><span
+                                            class="text-body">Product</span></th>
+                                    <th scope="col" class="text-body fs-sm fw-normal py-3 d-none d-xl-table-cell"><span
+                                            class="text-body">Price</span></th>
+                                    <th scope="col" class="text-body fs-sm fw-normal py-3 d-none d-md-table-cell"><span
+                                            class="text-body">Quantity</span></th>
+                                    <th scope="col" class="text-body fs-sm fw-normal py-3 d-none d-md-table-cell"><span
+                                            class="text-body">Total</span></th>
+                                    <th scope="col" class="py-0 px-0">
+                                        <div class="nav justify-content-end">
+                                            <button type="button"
+                                                class="nav-link d-inline-block text-decoration-underline text-nowrap py-3 px-0">Clear
+                                                cart</button>
+                                        </div>
+                                    </th>
+                                </tr>
+                            </thead>
+                            <tbody class="align-middle">
+
+                                <!-- Item -->
+                                <tr>
+                                    <td class="py-3 ps-0">
+                                        <div class="d-flex align-items-center">
+                                            <a class="position-relative flex-shrink-0" href="{{ route('second', ['shop', 'product-grocery']) }}">
+                                                <span
+                                                    class="badge text-bg-danger position-absolute top-0 start-0">-$2.79</span>
+                                                <img src="/img/shop/grocery/thumbs/01.png" width="110"
+                                                    alt="Thumbnail">
+                                            </a>
+                                            <div class="ps-2 ps-xl-3">
+                                                <h5 class="lh-sm mb-2">
+                                                    <a class="hover-effect-underline fs-sm fw-medium"
+                                                        href="{{ route('second', ['shop', 'product-grocery']) }}">Fresh orange Klementina, Spain</a>
+                                                </h5>
+                                                <ul class="list-unstyled gap-1 fs-xs mb-0">
+                                                    <li><span class="text-body-secondary">Portion:</span> <span
+                                                            class="text-dark-emphasis fw-medium">1kg</span></li>
+                                                    <li class="d-xl-none"><span class="text-body-secondary">Price:</span>
+                                                        <span class="text-dark-emphasis fw-medium">$3.12 <del
+                                                                class="text-body-tertiary fw-normal">$4.05</del></span>
+                                                    </li>
+                                                </ul>
+                                                <div class="count-input rounded-pill d-md-none mt-3">
+                                                    <button type="button" class="btn btn-sm btn-icon" data-decrement
+                                                        aria-label="Decrement quantity">
+                                                        <i class="ci-minus"></i>
+                                                    </button>
+                                                    <input type="number" class="form-control form-control-sm"
+                                                        value="3" readonly>
+                                                    <button type="button" class="btn btn-sm btn-icon" data-increment
+                                                        aria-label="Increment quantity">
+                                                        <i class="ci-plus"></i>
+                                                    </button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </td>
+                                    <td class="h6 py-3 d-none d-xl-table-cell">$3.12 <del
+                                            class="text-body-tertiary fs-sm fw-normal">$4.05</del></td>
+                                    <td class="py-3 d-none d-md-table-cell">
+                                        <div class="count-input rounded-pill">
+                                            <button type="button" class="btn btn-icon" data-decrement
+                                                aria-label="Decrement quantity">
+                                                <i class="ci-minus"></i>
+                                            </button>
+                                            <input type="number" class="form-control" value="3" readonly>
+                                            <button type="button" class="btn btn-icon" data-increment
+                                                aria-label="Increment quantity">
+                                                <i class="ci-plus"></i>
+                                            </button>
+                                        </div>
+                                    </td>
+                                    <td class="h6 py-3 d-none d-md-table-cell">$9.36</td>
+                                    <td class="text-end py-3 px-0">
+                                        <button type="button" class="btn-close fs-sm" data-bs-toggle="tooltip"
+                                            data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
+                                            aria-label="Remove from cart"></button>
+                                    </td>
+                                </tr>
+
+                                <!-- Item -->
+                                <tr>
+                                    <td class="py-3 ps-0">
+                                        <div class="d-flex align-items-center">
+                                            <a class="flex-shrink-0" href="{{ route('second', ['shop', 'product-grocery']) }}">
+                                                <img src="/img/shop/grocery/thumbs/02.png" width="110"
+                                                    alt="Thumbnail">
+                                            </a>
+                                            <div class="ps-2 ps-xl-3">
+                                                <h5 class="lh-sm mb-2">
+                                                    <a class="hover-effect-underline fs-sm fw-medium"
+                                                        href="{{ route('second', ['shop', 'product-grocery']) }}">Pesto sauce Barilla with basil,
+                                                        Italy</a>
+                                                </h5>
+                                                <ul class="list-unstyled gap-1 fs-xs mb-0">
+                                                    <li><span class="text-body-secondary">Portion:</span> <span
+                                                            class="text-dark-emphasis fw-medium">200g</span></li>
+                                                    <li class="d-xl-none"><span class="text-body-secondary">Price:</span>
+                                                        <span class="text-dark-emphasis fw-medium">$3.95</span>
+                                                    </li>
+                                                </ul>
+                                                <div class="count-input rounded-pill d-md-none mt-3">
+                                                    <button type="button" class="btn btn-sm btn-icon" data-decrement
+                                                        aria-label="Decrement quantity">
+                                                        <i class="ci-minus"></i>
+                                                    </button>
+                                                    <input type="number" class="form-control form-control-sm"
+                                                        value="1" readonly>
+                                                    <button type="button" class="btn btn-sm btn-icon" data-increment
+                                                        aria-label="Increment quantity">
+                                                        <i class="ci-plus"></i>
+                                                    </button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </td>
+                                    <td class="h6 py-3 d-none d-xl-table-cell">$3.95</td>
+                                    <td class="py-3 d-none d-md-table-cell">
+                                        <div class="count-input rounded-pill">
+                                            <button type="button" class="btn btn-icon" data-decrement
+                                                aria-label="Decrement quantity">
+                                                <i class="ci-minus"></i>
+                                            </button>
+                                            <input type="number" class="form-control" value="1" readonly>
+                                            <button type="button" class="btn btn-icon" data-increment
+                                                aria-label="Increment quantity">
+                                                <i class="ci-plus"></i>
+                                            </button>
+                                        </div>
+                                    </td>
+                                    <td class="h6 py-3 d-none d-md-table-cell">$3.95</td>
+                                    <td class="text-end py-3 px-0">
+                                        <button type="button" class="btn-close fs-sm" data-bs-toggle="tooltip"
+                                            data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
+                                            aria-label="Remove from cart"></button>
+                                    </td>
+                                </tr>
+
+                                <!-- Item -->
+                                <tr>
+                                    <td class="py-3 ps-0">
+                                        <div class="d-flex align-items-center">
+                                            <a class="flex-shrink-0" href="{{ route('second', ['shop', 'product-grocery']) }}">
+                                                <img src="/img/shop/grocery/thumbs/03.png" width="110"
+                                                    alt="Thumbnail">
+                                            </a>
+                                            <div class="ps-2 ps-xl-3">
+                                                <h5 class="lh-sm mb-2">
+                                                    <a class="hover-effect-underline fs-sm fw-medium"
+                                                        href="{{ route('second', ['shop', 'product-grocery']) }}">Steak salmon fillet with
+                                                        rosmary</a>
+                                                </h5>
+                                                <ul class="list-unstyled gap-1 fs-xs mb-0">
+                                                    <li><span class="text-body-secondary">Portion:</span> <span
+                                                            class="text-dark-emphasis fw-medium">1kg</span></li>
+                                                    <li class="d-xl-none"><span class="text-body-secondary">Price:</span>
+                                                        <span class="text-dark-emphasis fw-medium">$27.00</span>
+                                                    </li>
+                                                </ul>
+                                                <div class="count-input rounded-pill d-md-none mt-3">
+                                                    <button type="button" class="btn btn-sm btn-icon" data-decrement
+                                                        aria-label="Decrement quantity">
+                                                        <i class="ci-minus"></i>
+                                                    </button>
+                                                    <input type="number" class="form-control form-control-sm"
+                                                        value="2" readonly>
+                                                    <button type="button" class="btn btn-sm btn-icon" data-increment
+                                                        aria-label="Increment quantity">
+                                                        <i class="ci-plus"></i>
+                                                    </button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </td>
+                                    <td class="h6 py-3 d-none d-xl-table-cell">$27.00</td>
+                                    <td class="py-3 d-none d-md-table-cell">
+                                        <div class="count-input rounded-pill">
+                                            <button type="button" class="btn btn-icon" data-decrement
+                                                aria-label="Decrement quantity">
+                                                <i class="ci-minus"></i>
+                                            </button>
+                                            <input type="number" class="form-control" value="2" readonly>
+                                            <button type="button" class="btn btn-icon" data-increment
+                                                aria-label="Increment quantity">
+                                                <i class="ci-plus"></i>
+                                            </button>
+                                        </div>
+                                    </td>
+                                    <td class="h6 py-3 d-none d-md-table-cell">$54.00</td>
+                                    <td class="text-end py-3 px-0">
+                                        <button type="button" class="btn-close fs-sm" data-bs-toggle="tooltip"
+                                            data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
+                                            aria-label="Remove from cart"></button>
+                                    </td>
+                                </tr>
+
+                                <!-- Item -->
+                                <tr>
+                                    <td class="py-3 ps-0">
+                                        <div class="d-flex align-items-center">
+                                            <a class="flex-shrink-0" href="{{ route('second', ['shop', 'product-grocery']) }}">
+                                                <img src="/img/shop/grocery/thumbs/04.png" width="110"
+                                                    alt="Thumbnail">
+                                            </a>
+                                            <div class="ps-2 ps-xl-3">
+                                                <h5 class="lh-sm mb-2">
+                                                    <a class="hover-effect-underline fs-sm fw-medium"
+                                                        href="{{ route('second', ['shop', 'product-grocery']) }}">Sprite soda lemon lime, can</a>
+                                                </h5>
+                                                <ul class="list-unstyled gap-1 fs-xs mb-0">
+                                                    <li><span class="text-body-secondary">Portion:</span> <span
+                                                            class="text-dark-emphasis fw-medium">330ml</span></li>
+                                                    <li class="d-xl-none"><span
+                                                            class="text-body-secondary">Price:</span>
+                                                        <span class="text-dark-emphasis fw-medium">$0.80</span>
+                                                    </li>
+                                                </ul>
+                                                <div class="count-input rounded-pill d-md-none mt-3">
+                                                    <button type="button" class="btn btn-sm btn-icon" data-decrement
+                                                        aria-label="Decrement quantity">
+                                                        <i class="ci-minus"></i>
+                                                    </button>
+                                                    <input type="number" class="form-control form-control-sm"
+                                                        value="2" readonly>
+                                                    <button type="button" class="btn btn-sm btn-icon" data-increment
+                                                        aria-label="Increment quantity">
+                                                        <i class="ci-plus"></i>
+                                                    </button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </td>
+                                    <td class="h6 py-3 d-none d-xl-table-cell">$0.80</td>
+                                    <td class="py-3 d-none d-md-table-cell">
+                                        <div class="count-input rounded-pill">
+                                            <button type="button" class="btn btn-icon" data-decrement
+                                                aria-label="Decrement quantity">
+                                                <i class="ci-minus"></i>
+                                            </button>
+                                            <input type="number" class="form-control" value="2" readonly>
+                                            <button type="button" class="btn btn-icon" data-increment
+                                                aria-label="Increment quantity">
+                                                <i class="ci-plus"></i>
+                                            </button>
+                                        </div>
+                                    </td>
+                                    <td class="h6 py-3 d-none d-md-table-cell">$1.60</td>
+                                    <td class="text-end py-3 px-0">
+                                        <button type="button" class="btn-close fs-sm" data-bs-toggle="tooltip"
+                                            data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
+                                            aria-label="Remove from cart"></button>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+
+                        <div class="nav position-relative z-2 mb-4 mb-lg-0">
+                            <a class="nav-link animate-underline px-0" href="{{ route('second', ['shop', 'catalog-grocery']) }}">
+                                <i class="ci-chevron-left fs-lg me-1"></i>
+                                <span class="animate-target">Continue shopping</span>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+
+
+                <!-- Order summary (sticky sidebar) -->
+                <aside class="col-lg-4" style="margin-top: -115px">
+                    <div class="position-sticky top-0" style="padding-top: 115px">
+                        <div class="alert alert-success text-dark-emphasis fs-sm border-0 rounded-4 mb-4"
+                            role="alert">
+                            Congratulations 🎉 You have added more than <span class="fw-semibold">$50</span> to your cart.
+                            <span class="fw-semibold">Delivery is free</span> for you!
+                        </div>
+                        <h2 class="h5 border-bottom pb-4 mb-4 me-3">Order summary</h2>
+                        <div class="tab-content">
+
+                            <!-- Delivery tab -->
+                            <div class="tab-pane show active" id="delivery" role="tabpanel"
+                                aria-labelledby="cart-delivery-tab">
+                                <ul class="list-unstyled fs-sm gap-3 mb-0">
+                                    <li class="d-flex justify-content-between">
+                                        Subtotal (8 items):
+                                        <span class="text-dark-emphasis fw-medium">$71.70</span>
+                                    </li>
+                                    <li class="d-flex justify-content-between">
+                                        Saving:
+                                        <span class="text-danger fw-medium">-$2.79</span>
+                                    </li>
+                                    <li class="d-flex justify-content-between">
+                                        Delivery:
+                                        <span class="text-dark-emphasis fw-medium">Free</span>
+                                    </li>
+                                </ul>
+                                <div class="border-top pt-4 mt-4">
+                                    <div class="d-flex justify-content-between mb-3">
+                                        <span class="fs-sm">Estimated total:</span>
+                                        <span class="h5 mb-0">$68.91</span>
+                                    </div>
+                                    <a class="btn btn-lg btn-primary w-100 rounded-pill"
+                                        href="{{ route('second', ['checkout', 'v2-delivery']) }}'">
+                                        Proceed to checkout
+                                        <i class="ci-chevron-right fs-lg ms-1 me-n1"></i>
+                                    </a>
+                                </div>
+                            </div>
+
+                            <!-- Pickup tab -->
+                            <div class="tab-pane" id="pickup" role="tabpanel" aria-labelledby="cart-pickup-tab">
+                                <ul class="list-unstyled fs-sm gap-3 mb-0">
+                                    <li class="d-flex justify-content-between">
+                                        Subtotal (8 items):
+                                        <span class="text-dark-emphasis fw-medium">$71.70</span>
+                                    </li>
+                                    <li class="d-flex justify-content-between">
+                                        Saving:
+                                        <span class="text-danger fw-medium">-$2.79</span>
+                                    </li>
+                                </ul>
+                                <div class="border-top pt-4 mt-4">
+                                    <div class="d-flex justify-content-between mb-3">
+                                        <span class="fs-sm">Estimated total:</span>
+                                        <span class="h5 mb-0">$68.91</span>
+                                    </div>
+                                    <a class="btn btn-lg btn-primary w-100 rounded-pill" href="{{ route('second', ['checkout', 'v2-pickup']) }}">
+                                        Proceed to checkout
+                                        <i class="ci-chevron-right fs-lg ms-1 me-n1"></i>
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </aside>
+            </div>
+        </section>
+    </main>
+
+    @include('layouts.partials/footer2')
+@endsection
+
+@section('scripts')
+@endsection
diff --git a/resources/views/checkout/v2-delivery.blade.php b/resources/views/checkout/v2-delivery.blade.php
new file mode 100644
index 0000000..c575070
--- /dev/null
+++ b/resources/views/checkout/v2-delivery.blade.php
@@ -0,0 +1,710 @@
+@extends('layouts.landing', ['title' => 'Checkout v.2 - Shopping Cart'])
+
+@section('content')
+    @include('layouts.partials/offcanvas')
+
+    <!-- Delivey options offcanvas -->
+    <div class="offcanvas offcanvas-end pb-sm-2 px-sm-2" id="deliveryOptions" tabindex="-1"
+        aria-labelledby="deliveryOptionsLabel" style="width: 500px">
+
+        <!-- Header with nav tabs -->
+        <div class="offcanvas-header flex-column align-items-start py-3 pt-lg-4">
+            <div class="d-flex align-items-center justify-content-between w-100 pb-xl-1 mb-4">
+                <h4 class="offcanvas-title" id="deliveryOptionsLabel">Delivery options</h4>
+                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+            </div>
+            <ul class="nav nav-pills nav-justified w-100" role="tablist">
+                <li class="nav-item" role="presentation">
+                    <button type="button" class="nav-link active" id="delivery-tab" data-bs-toggle="tab"
+                        data-bs-target="#delivery-tab-pane" role="tab" aria-controls="delivery-tab-pane"
+                        aria-selected="true">
+                        <i class="ci-shopping-bag fs-base ms-n1 me-2"></i>
+                        Delivery
+                    </button>
+                </li>
+                <li class="nav-item" role="presentation">
+                    <button type="button" class="nav-link" id="pickup-tab" data-bs-toggle="tab"
+                        data-bs-target="#pickup-tab-pane" role="tab" aria-controls="pickup-tab-pane"
+                        aria-selected="false">
+                        <i class="ci-box fs-base ms-n1 me-2"></i>
+                        Pickup
+                    </button>
+                </li>
+            </ul>
+        </div>
+
+        <div class="offcanvas-body tab-content py-2 py-sm-3">
+
+            <!-- Delivery tab -->
+            <div class="tab-pane fade show active" id="delivery-tab-pane" role="tabpanel" aria-labelledby="delivery-tab">
+
+                <!-- Address options collapse -->
+                <div class="collapse delivery-address show" id="deliveryAddressOptions">
+                    <div class="mt-n3">
+                        <div class="form-check border-bottom py-4 m-0">
+                            <input type="radio" class="form-check-input" id="address-1" name="delivery-address" checked>
+                            <label for="address-1" class="form-check-label text-dark-emphasis fw-semibold">567 Cherry Lane
+                                Apt B12 Sacramento, 95829</label>
+                        </div>
+                        <div class="form-check border-bottom py-4 m-0">
+                            <input type="radio" class="form-check-input" id="address-2" name="delivery-address">
+                            <div class="d-flex w-100">
+                                <label for="address-2" class="form-check-label text-dark-emphasis me-3">1901 Thornridge Cir.
+                                    Shiloh, Hawaii, 81063</label>
+                                <button type="button" class="btn-close fs-sm ms-auto" data-bs-toggle="tooltip"
+                                    data-bs-custom-class="tooltip-sm" data-bs-title="Remove" aria-label="Remove"></button>
+                            </div>
+                        </div>
+                        <div class="form-check border-bottom py-4 m-0">
+                            <input type="radio" class="form-check-input" id="address-3" name="delivery-address">
+                            <div class="d-flex w-100">
+                                <label for="address-3" class="form-check-label text-dark-emphasis me-3">3517 W. Gray St.
+                                    Utica, Pennsylvania, 57867</label>
+                                <button type="button" class="btn-close fs-sm ms-auto" data-bs-toggle="tooltip"
+                                    data-bs-custom-class="tooltip-sm" data-bs-title="Remove" aria-label="Remove"></button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Add new address collapse -->
+                <div class="collapse delivery-address" id="deliveryAddressAdd">
+                    <div class="nav mb-4">
+                        <a class="nav-link animate-underline p-0" href=".delivery-address" data-bs-toggle="collapse"
+                            aria-expanded="true" aria-controls="deliveryAddressOptions deliveryAddressAdd">
+                            <i class="ci-chevron-left fs-lg ms-n1 me-1"></i>
+                            <span class="animate-target">Back to my addresses</span>
+                        </a>
+                    </div>
+                    <div class="d-flex align-items-center justify-content-between mb-3 mb-lg-4">
+                        <h5 class="h6 mb-0 me-3">Add an address to start ordering</h5>
+                        <a class="btn btn-sm btn-outline-primary rounded-pill" href="#!">
+                            <i class="ci-map-pin fs-base ms-n1 me-1"></i>
+                            Find on map
+                        </a>
+                    </div>
+                    <div class="mb-3 mb-lg-4">
+                        <label class="form-label">State *</label>
+                        <select class="form-select form-select-lg rounded-pill"
+                            data-select='{
+                "classNames": {
+                  "containerInner": ["form-select", "form-select-lg", "rounded-pill"]
+                }
+              }'
+                            aria-label="Large pill select">
+                            <option value="">Select state</option>
+                            <option value="Arizona">Arizona</option>
+                            <option value="California">California</option>
+                            <option value="Montana">Montana</option>
+                            <option value="Nevada">Nevada</option>
+                            <option value="New Mexico">New Mexico</option>
+                            <option value="Texas">Texas</option>
+                        </select>
+                    </div>
+                    <div class="mb-3 mb-lg-4">
+                        <label for="my-postcode" class="form-label">Postcode *</label>
+                        <input type="text" class="form-control form-control-lg rounded-pill" id="my-postcode">
+                    </div>
+                    <div class="mb-3 mb-lg-4">
+                        <label class="form-label">City *</label>
+                        <select class="form-select form-select-lg rounded-pill"
+                            data-select='{
+                "classNames": {
+                  "containerInner": ["form-select", "form-select-lg", "rounded-pill"]
+                }
+              }'
+                            aria-label="Large pill select">
+                            <option value="">Select city</option>
+                            <option value="Austin">Austin</option>
+                            <option value="Helena">Helena</option>
+                            <option value="Sacramento">Sacramento</option>
+                            <option value="Santa Fe">Santa Fe</option>
+                            <option value="Las Vegas">Las Vegas</option>
+                            <option value="Phoenix">Phoenix</option>
+                        </select>
+                    </div>
+                    <label for="my-address" class="form-label">Street address *</label>
+                    <input type="text" class="form-control form-control-lg rounded-pill" id="my-address">
+                </div>
+
+                <!-- Add address collapse toggle -->
+                <div class="nav">
+                    <a class="nav-link hiding-collapse-toggle animate-underline collapsed px-0 mt-4"
+                        href=".delivery-address" data-bs-toggle="collapse" aria-expanded="false"
+                        aria-controls="deliveryAddressOptions deliveryAddressAdd">
+                        <span class="animate-target">Add delivery address</span>
+                        <i class="ci-plus fs-base ms-1"></i>
+                    </a>
+                </div>
+            </div>
+
+            <!-- Pickup tab -->
+            <div class="tab-pane fade" id="pickup-tab-pane" role="tabpanel" aria-labelledby="pickup-tab">
+
+                <!-- Pickup store options collapse -->
+                <div class="collapse pickup-options show" id="pickupStoreOptions">
+                    <div class="mt-n3">
+                        <div class="form-check border-bottom py-4 m-0">
+                            <input type="radio" class="form-check-input" id="store-1" name="pickup-store" checked>
+                            <div>
+                                <div class="d-flex w-100 pb-2 mb-1">
+                                    <label for="store-1"
+                                        class="form-check-label text-dark-emphasis fw-semibold me-3">Sacramento
+                                        Supercenter</label>
+                                    <button type="button" class="btn-close fs-sm ms-auto" data-bs-toggle="tooltip"
+                                        data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
+                                        aria-label="Remove"></button>
+                                </div>
+                                <div class="fs-xs mb-2">8270 Delta Shores Cir S, Sacramento, CA 95832</div>
+                                <div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">07:00 - 22:00</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="form-check border-bottom py-4 m-0">
+                            <input type="radio" class="form-check-input" id="store-2" name="pickup-store">
+                            <div>
+                                <div class="d-flex w-100 pb-2 mb-1">
+                                    <label for="store-2"
+                                        class="form-check-label text-dark-emphasis fw-semibold me-3">West Sacramento
+                                        Supercenter</label>
+                                    <button type="button" class="btn-close fs-sm ms-auto" data-bs-toggle="tooltip"
+                                        data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
+                                        aria-label="Remove"></button>
+                                </div>
+                                <div class="fs-xs mb-2">755 Riverpoint Ct, West Sacramento, CA 95605</div>
+                                <div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">07:00 - 21:00</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="form-check border-bottom py-4 m-0">
+                            <input type="radio" class="form-check-input" id="store-3" name="pickup-store">
+                            <div>
+                                <div class="d-flex w-100 pb-2 mb-1">
+                                    <label for="store-3"
+                                        class="form-check-label text-dark-emphasis fw-semibold me-3">Rancho Cordova
+                                        Supercenter</label>
+                                    <button type="button" class="btn-close fs-sm ms-auto" data-bs-toggle="tooltip"
+                                        data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
+                                        aria-label="Remove"></button>
+                                </div>
+                                <div class="fs-xs mb-2">10655 Folsom Blvd, Rancho Cordova, CA 95670</div>
+                                <div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">08:00 - 23:00</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Add new pickup store collapse -->
+                <div class="collapse pickup-options" id="pickupStoreAdd">
+                    <div class="nav mb-4">
+                        <a class="nav-link animate-underline p-0" href=".pickup-options" data-bs-toggle="collapse"
+                            aria-expanded="true" aria-controls="pickupStoreOptions pickupStoreAdd">
+                            <i class="ci-chevron-left fs-lg ms-n1 me-1"></i>
+                            <span class="animate-target">Back to my stores</span>
+                        </a>
+                    </div>
+                    <div class="d-flex align-items-center justify-content-between mb-3 mb-lg-4">
+                        <h5 class="h6 mb-0 me-3">Select a suitable store</h5>
+                        <a class="btn btn-sm btn-outline-primary rounded-pill" href="#!">
+                            <i class="ci-map-pin fs-base ms-n1 me-1"></i>
+                            Find on map
+                        </a>
+                    </div>
+                    <div class="mb-3 mb-lg-4">
+                        <label class="form-label">State *</label>
+                        <select class="form-select form-select-lg rounded-pill"
+                            data-select='{
+                "classNames": {
+                  "containerInner": ["form-select", "form-select-lg", "rounded-pill"]
+                }
+              }'
+                            aria-label="Large pill select">
+                            <option value="">Select state</option>
+                            <option value="Arizona">Arizona</option>
+                            <option value="California" selected>California</option>
+                            <option value="Montana">Montana</option>
+                            <option value="Nevada">Nevada</option>
+                            <option value="New Mexico">New Mexico</option>
+                            <option value="Texas">Texas</option>
+                        </select>
+                    </div>
+                    <div class="mb-4">
+                        <label class="form-label">City *</label>
+                        <select class="form-select form-select-lg rounded-pill"
+                            data-select='{
+                "classNames": {
+                  "containerInner": ["form-select", "form-select-lg", "rounded-pill"]
+                }
+              }'
+                            aria-label="Large pill select">
+                            <option value="">Select city</option>
+                            <option value="Austin">Austin</option>
+                            <option value="Helena">Helena</option>
+                            <option value="Sacramento" selected>Sacramento</option>
+                            <option value="Santa Fe">Santa Fe</option>
+                            <option value="Las Vegas">Las Vegas</option>
+                            <option value="Phoenix">Phoenix</option>
+                        </select>
+                    </div>
+                    <div class="fs-xs fw-medium text-uppercase text-body-secondary">Found stores:</div>
+                    <div class="form-check border-bottom py-4 m-0">
+                        <input type="radio" class="form-check-input" id="store-4" name="found-store">
+                        <div>
+                            <label for="store-4"
+                                class="form-check-label text-dark-emphasis fw-semibold pb-2 mb-1">Sacramento
+                                Supercenter</label>
+                            <div class="fs-xs mb-2">8270 Delta Shores Cir S, Sacramento, CA 95832</div>
+                            <div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">07:00 - 22:00</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="form-check border-bottom py-4 m-0">
+                        <input type="radio" class="form-check-input" id="store-5" name="found-store">
+                        <div>
+                            <label for="store-5" class="form-check-label text-dark-emphasis fw-semibold pb-2 mb-1">West
+                                Sacramento Supercenter</label>
+                            <div class="fs-xs mb-2">755 Riverpoint Ct, West Sacramento, CA 95605</div>
+                            <div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">07:00 - 21:00</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="form-check border-bottom py-4 m-0">
+                        <input type="radio" class="form-check-input" id="store-6" name="found-store">
+                        <div>
+                            <label for="store-6" class="form-check-label text-dark-emphasis fw-semibold pb-2 mb-1">Rancho
+                                Cordova Supercenter</label>
+                            <div class="fs-xs mb-2">10655 Folsom Blvd, Rancho Cordova, CA 95670</div>
+                            <div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">08:00 - 23:00</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Add address collapse toggle -->
+                <div class="nav">
+                    <a class="nav-link hiding-collapse-toggle animate-underline collapsed px-0 mt-4"
+                        href=".pickup-options" data-bs-toggle="collapse" aria-expanded="false"
+                        aria-controls="pickupStoreOptions pickupStoreAdd">
+                        <span class="animate-target">Add store address</span>
+                        <i class="ci-plus fs-base ms-1"></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+
+        <!-- Footer -->
+        <div class="offcanvas-header">
+            <button type="button" class="btn btn-lg btn-primary w-100 rounded-pill">Confirm address</button>
+        </div>
+    </div>
+
+    <!-- Site menu offcanvas -->
+    @include('layouts.partials/menu-offcanvas')
+
+    @include('layouts.partials/checkout-navbar')
+
+    <!-- Page content -->
+    <main class="content-wrapper">
+
+        <!-- Breadcrumb -->
+        <nav class="container pt-1 pt-md-0 my-3 my-md-4" aria-label="breadcrumb">
+            <ol class="breadcrumb mb-0">
+                <li class="breadcrumb-item"><a href="{{ route('second', ['home', 'grocery']) }}">Home</a></li>
+                <li class="breadcrumb-item"><a href="{{ route('second', ['shop', 'catalog-grocery']) }}">Shop</a></li>
+                <li class="breadcrumb-item active" aria-current="page">Cart</li>
+            </ol>
+        </nav>
+
+
+        <!-- Items in the cart + Order summary -->
+        <section class="container pb-5 mb-2 mb-md-3 mb-lg-4 mb-xl-5">
+            <h1 class="h3 mb-4">Shopping cart</h1>
+            <div class="row">
+
+                <!-- Items list + Delivery / pickup tabs -->
+                <div class="col-lg-8">
+                    <div class="pe-lg-2 pe-xl-3 me-xl-3">
+
+                        <!-- Delivery / pickup tabs -->
+                        <ul class="nav nav-pills nav-justified flex-nowrap flex-column flex-sm-row pb-md-2 mb-4"
+                            role="tablist">
+                            <li class="nav-item" role="presentation">
+                                <button type="button"
+                                    class="nav-link justify-content-start text-start p-3 px-md-4 px-lg-3 px-xl-4 rounded-4 active"
+                                    id="cart-delivery-tab" data-bs-toggle="pill" data-bs-target="#delivery"
+                                    role="tab" aria-controls="delivery" aria-selected="true">
+                                    <span
+                                        class="d-flex align-items-center justify-content-center flex-shrink-0 bg-success-subtle text-dark-emphasis rounded-circle"
+                                        style="width: 3rem; height: 3rem">
+                                        <i class="ci-shopping-bag fs-xl"></i>
+                                    </span>
+                                    <span class="ps-3">
+                                        <span class="h6 d-block mb-1">Delivery</span>
+                                        <span class="fs-xs fw-normal text-body lh-base">All products are available</span>
+                                    </span>
+                                </button>
+                            </li>
+                            <li class="nav-item" role="presentation">
+                                <button type="button"
+                                    class="nav-link justify-content-start text-start p-3 px-md-4 px-lg-3 px-xl-4 rounded-4"
+                                    id="cart-pickup-tab" data-bs-toggle="pill" data-bs-target="#pickup" role="tab"
+                                    aria-controls="pickup" aria-selected="false">
+                                    <span
+                                        class="d-flex align-items-center justify-content-center flex-shrink-0 bg-info-subtle text-dark-emphasis rounded-circle"
+                                        style="width: 3rem; height: 3rem">
+                                        <i class="ci-package fs-xl"></i>
+                                    </span>
+                                    <span class="ps-3">
+                                        <span class="h6 d-block mb-1">Pickup</span>
+                                        <span class="fs-xs fw-normal text-body lh-base">All products are available</span>
+                                    </span>
+                                </button>
+                            </li>
+                        </ul>
+
+
+                        <!-- Table of items -->
+                        <table class="table position-relative z-2 mb-4">
+                            <thead>
+                                <tr>
+                                    <th scope="col" class="fs-sm fw-normal py-3 ps-0"><span
+                                            class="text-body">Product</span></th>
+                                    <th scope="col" class="text-body fs-sm fw-normal py-3 d-none d-xl-table-cell"><span
+                                            class="text-body">Price</span></th>
+                                    <th scope="col" class="text-body fs-sm fw-normal py-3 d-none d-md-table-cell"><span
+                                            class="text-body">Quantity</span></th>
+                                    <th scope="col" class="text-body fs-sm fw-normal py-3 d-none d-md-table-cell"><span
+                                            class="text-body">Total</span></th>
+                                    <th scope="col" class="py-0 px-0">
+                                        <div class="nav justify-content-end">
+                                            <button type="button"
+                                                class="nav-link d-inline-block text-decoration-underline text-nowrap py-3 px-0">Clear
+                                                cart</button>
+                                        </div>
+                                    </th>
+                                </tr>
+                            </thead>
+                            <tbody class="align-middle">
+
+                                <!-- Item -->
+                                <tr>
+                                    <td class="py-3 ps-0">
+                                        <div class="d-flex align-items-center">
+                                            <a class="position-relative flex-shrink-0" href="{{ route('second', ['shop', 'product-grocery']) }}">
+                                                <span
+                                                    class="badge text-bg-danger position-absolute top-0 start-0">-$2.79</span>
+                                                <img src="/img/shop/grocery/thumbs/01.png" width="110"
+                                                    alt="Thumbnail">
+                                            </a>
+                                            <div class="ps-2 ps-xl-3">
+                                                <h5 class="lh-sm mb-2">
+                                                    <a class="hover-effect-underline fs-sm fw-medium"
+                                                        href="{{ route('second', ['shop', 'product-grocery']) }}">Fresh orange Klementina, Spain</a>
+                                                </h5>
+                                                <ul class="list-unstyled gap-1 fs-xs mb-0">
+                                                    <li><span class="text-body-secondary">Portion:</span> <span
+                                                            class="text-dark-emphasis fw-medium">1kg</span></li>
+                                                    <li class="d-xl-none"><span class="text-body-secondary">Price:</span>
+                                                        <span class="text-dark-emphasis fw-medium">$3.12 <del
+                                                                class="text-body-tertiary fw-normal">$4.05</del></span>
+                                                    </li>
+                                                </ul>
+                                                <div class="count-input rounded-pill d-md-none mt-3">
+                                                    <button type="button" class="btn btn-sm btn-icon" data-decrement
+                                                        aria-label="Decrement quantity">
+                                                        <i class="ci-minus"></i>
+                                                    </button>
+                                                    <input type="number" class="form-control form-control-sm"
+                                                        value="3" readonly>
+                                                    <button type="button" class="btn btn-sm btn-icon" data-increment
+                                                        aria-label="Increment quantity">
+                                                        <i class="ci-plus"></i>
+                                                    </button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </td>
+                                    <td class="h6 py-3 d-none d-xl-table-cell">$3.12 <del
+                                            class="text-body-tertiary fs-sm fw-normal">$4.05</del></td>
+                                    <td class="py-3 d-none d-md-table-cell">
+                                        <div class="count-input rounded-pill">
+                                            <button type="button" class="btn btn-icon" data-decrement
+                                                aria-label="Decrement quantity">
+                                                <i class="ci-minus"></i>
+                                            </button>
+                                            <input type="number" class="form-control" value="3" readonly>
+                                            <button type="button" class="btn btn-icon" data-increment
+                                                aria-label="Increment quantity">
+                                                <i class="ci-plus"></i>
+                                            </button>
+                                        </div>
+                                    </td>
+                                    <td class="h6 py-3 d-none d-md-table-cell">$9.36</td>
+                                    <td class="text-end py-3 px-0">
+                                        <button type="button" class="btn-close fs-sm" data-bs-toggle="tooltip"
+                                            data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
+                                            aria-label="Remove from cart"></button>
+                                    </td>
+                                </tr>
+
+                                <!-- Item -->
+                                <tr>
+                                    <td class="py-3 ps-0">
+                                        <div class="d-flex align-items-center">
+                                            <a class="flex-shrink-0" href="{{ route('second', ['shop', 'product-grocery']) }}">
+                                                <img src="/img/shop/grocery/thumbs/02.png" width="110"
+                                                    alt="Thumbnail">
+                                            </a>
+                                            <div class="ps-2 ps-xl-3">
+                                                <h5 class="lh-sm mb-2">
+                                                    <a class="hover-effect-underline fs-sm fw-medium"
+                                                        href="{{ route('second', ['shop', 'product-grocery']) }}">Pesto sauce Barilla with basil,
+                                                        Italy</a>
+                                                </h5>
+                                                <ul class="list-unstyled gap-1 fs-xs mb-0">
+                                                    <li><span class="text-body-secondary">Portion:</span> <span
+                                                            class="text-dark-emphasis fw-medium">200g</span></li>
+                                                    <li class="d-xl-none"><span class="text-body-secondary">Price:</span>
+                                                        <span class="text-dark-emphasis fw-medium">$3.95</span></li>
+                                                </ul>
+                                                <div class="count-input rounded-pill d-md-none mt-3">
+                                                    <button type="button" class="btn btn-sm btn-icon" data-decrement
+                                                        aria-label="Decrement quantity">
+                                                        <i class="ci-minus"></i>
+                                                    </button>
+                                                    <input type="number" class="form-control form-control-sm"
+                                                        value="1" readonly>
+                                                    <button type="button" class="btn btn-sm btn-icon" data-increment
+                                                        aria-label="Increment quantity">
+                                                        <i class="ci-plus"></i>
+                                                    </button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </td>
+                                    <td class="h6 py-3 d-none d-xl-table-cell">$3.95</td>
+                                    <td class="py-3 d-none d-md-table-cell">
+                                        <div class="count-input rounded-pill">
+                                            <button type="button" class="btn btn-icon" data-decrement
+                                                aria-label="Decrement quantity">
+                                                <i class="ci-minus"></i>
+                                            </button>
+                                            <input type="number" class="form-control" value="1" readonly>
+                                            <button type="button" class="btn btn-icon" data-increment
+                                                aria-label="Increment quantity">
+                                                <i class="ci-plus"></i>
+                                            </button>
+                                        </div>
+                                    </td>
+                                    <td class="h6 py-3 d-none d-md-table-cell">$3.95</td>
+                                    <td class="text-end py-3 px-0">
+                                        <button type="button" class="btn-close fs-sm" data-bs-toggle="tooltip"
+                                            data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
+                                            aria-label="Remove from cart"></button>
+                                    </td>
+                                </tr>
+
+                                <!-- Item -->
+                                <tr>
+                                    <td class="py-3 ps-0">
+                                        <div class="d-flex align-items-center">
+                                            <a class="flex-shrink-0" href="{{ route('second', ['shop', 'product-grocery']) }}">
+                                                <img src="/img/shop/grocery/thumbs/03.png" width="110"
+                                                    alt="Thumbnail">
+                                            </a>
+                                            <div class="ps-2 ps-xl-3">
+                                                <h5 class="lh-sm mb-2">
+                                                    <a class="hover-effect-underline fs-sm fw-medium"
+                                                        href="{{ route('second', ['shop', 'product-grocery']) }}">Steak salmon fillet with
+                                                        rosmary</a>
+                                                </h5>
+                                                <ul class="list-unstyled gap-1 fs-xs mb-0">
+                                                    <li><span class="text-body-secondary">Portion:</span> <span
+                                                            class="text-dark-emphasis fw-medium">1kg</span></li>
+                                                    <li class="d-xl-none"><span class="text-body-secondary">Price:</span>
+                                                        <span class="text-dark-emphasis fw-medium">$27.00</span></li>
+                                                </ul>
+                                                <div class="count-input rounded-pill d-md-none mt-3">
+                                                    <button type="button" class="btn btn-sm btn-icon" data-decrement
+                                                        aria-label="Decrement quantity">
+                                                        <i class="ci-minus"></i>
+                                                    </button>
+                                                    <input type="number" class="form-control form-control-sm"
+                                                        value="2" readonly>
+                                                    <button type="button" class="btn btn-sm btn-icon" data-increment
+                                                        aria-label="Increment quantity">
+                                                        <i class="ci-plus"></i>
+                                                    </button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </td>
+                                    <td class="h6 py-3 d-none d-xl-table-cell">$27.00</td>
+                                    <td class="py-3 d-none d-md-table-cell">
+                                        <div class="count-input rounded-pill">
+                                            <button type="button" class="btn btn-icon" data-decrement
+                                                aria-label="Decrement quantity">
+                                                <i class="ci-minus"></i>
+                                            </button>
+                                            <input type="number" class="form-control" value="2" readonly>
+                                            <button type="button" class="btn btn-icon" data-increment
+                                                aria-label="Increment quantity">
+                                                <i class="ci-plus"></i>
+                                            </button>
+                                        </div>
+                                    </td>
+                                    <td class="h6 py-3 d-none d-md-table-cell">$54.00</td>
+                                    <td class="text-end py-3 px-0">
+                                        <button type="button" class="btn-close fs-sm" data-bs-toggle="tooltip"
+                                            data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
+                                            aria-label="Remove from cart"></button>
+                                    </td>
+                                </tr>
+
+                                <!-- Item -->
+                                <tr>
+                                    <td class="py-3 ps-0">
+                                        <div class="d-flex align-items-center">
+                                            <a class="flex-shrink-0" href="{{ route('second', ['shop', 'product-grocery']) }}">
+                                                <img src="/img/shop/grocery/thumbs/04.png" width="110"
+                                                    alt="Thumbnail">
+                                            </a>
+                                            <div class="ps-2 ps-xl-3">
+                                                <h5 class="lh-sm mb-2">
+                                                    <a class="hover-effect-underline fs-sm fw-medium"
+                                                        href="{{ route('second', ['shop', 'product-grocery']) }}">Sprite soda lemon lime, can</a>
+                                                </h5>
+                                                <ul class="list-unstyled gap-1 fs-xs mb-0">
+                                                    <li><span class="text-body-secondary">Portion:</span> <span
+                                                            class="text-dark-emphasis fw-medium">330ml</span></li>
+                                                    <li class="d-xl-none"><span
+                                                            class="text-body-secondary">Price:</span> <span
+                                                            class="text-dark-emphasis fw-medium">$0.80</span></li>
+                                                </ul>
+                                                <div class="count-input rounded-pill d-md-none mt-3">
+                                                    <button type="button" class="btn btn-sm btn-icon" data-decrement
+                                                        aria-label="Decrement quantity">
+                                                        <i class="ci-minus"></i>
+                                                    </button>
+                                                    <input type="number" class="form-control form-control-sm"
+                                                        value="2" readonly>
+                                                    <button type="button" class="btn btn-sm btn-icon" data-increment
+                                                        aria-label="Increment quantity">
+                                                        <i class="ci-plus"></i>
+                                                    </button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </td>
+                                    <td class="h6 py-3 d-none d-xl-table-cell">$0.80</td>
+                                    <td class="py-3 d-none d-md-table-cell">
+                                        <div class="count-input rounded-pill">
+                                            <button type="button" class="btn btn-icon" data-decrement
+                                                aria-label="Decrement quantity">
+                                                <i class="ci-minus"></i>
+                                            </button>
+                                            <input type="number" class="form-control" value="2" readonly>
+                                            <button type="button" class="btn btn-icon" data-increment
+                                                aria-label="Increment quantity">
+                                                <i class="ci-plus"></i>
+                                            </button>
+                                        </div>
+                                    </td>
+                                    <td class="h6 py-3 d-none d-md-table-cell">$1.60</td>
+                                    <td class="text-end py-3 px-0">
+                                        <button type="button" class="btn-close fs-sm" data-bs-toggle="tooltip"
+                                            data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
+                                            aria-label="Remove from cart"></button>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+
+                        <div class="nav position-relative z-2 mb-4 mb-lg-0">
+                            <a class="nav-link animate-underline px-0" href="{{ route('second', ['shop', 'catalog-grocery']) }}">
+                                <i class="ci-chevron-left fs-lg me-1"></i>
+                                <span class="animate-target">Continue shopping</span>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+
+
+                <!-- Order summary (sticky sidebar) -->
+                <aside class="col-lg-4" style="margin-top: -115px">
+                    <div class="position-sticky top-0" style="padding-top: 115px">
+                        <div class="alert alert-success text-dark-emphasis fs-sm border-0 rounded-4 mb-4"
+                            role="alert">
+                            Congratulations 🎉 You have added more than <span class="fw-semibold">$50</span> to your cart.
+                            <span class="fw-semibold">Delivery is free</span> for you!
+                        </div>
+                        <h2 class="h5 border-bottom pb-4 mb-4 me-3">Order summary</h2>
+                        <div class="tab-content">
+
+                            <!-- Delivery tab -->
+                            <div class="tab-pane show active" id="delivery" role="tabpanel"
+                                aria-labelledby="cart-delivery-tab">
+                                <ul class="list-unstyled fs-sm gap-3 mb-0">
+                                    <li class="d-flex justify-content-between">
+                                        Subtotal (8 items):
+                                        <span class="text-dark-emphasis fw-medium">$71.70</span>
+                                    </li>
+                                    <li class="d-flex justify-content-between">
+                                        Saving:
+                                        <span class="text-danger fw-medium">-$2.79</span>
+                                    </li>
+                                    <li class="d-flex justify-content-between">
+                                        Delivery:
+                                        <span class="text-dark-emphasis fw-medium">Free</span>
+                                    </li>
+                                </ul>
+                                <div class="border-top pt-4 mt-4">
+                                    <div class="d-flex justify-content-between mb-3">
+                                        <span class="fs-sm">Estimated total:</span>
+                                        <span class="h5 mb-0">$68.91</span>
+                                    </div>
+                                    <a class="btn btn-lg btn-primary w-100 rounded-pill"
+                                        href="{{ route('second', ['checkout', 'v2-delivery']) }}">
+                                        Proceed to checkout
+                                        <i class="ci-chevron-right fs-lg ms-1 me-n1"></i>
+                                    </a>
+                                </div>
+                            </div>
+
+                            <!-- Pickup tab -->
+                            <div class="tab-pane" id="pickup" role="tabpanel" aria-labelledby="cart-pickup-tab">
+                                <ul class="list-unstyled fs-sm gap-3 mb-0">
+                                    <li class="d-flex justify-content-between">
+                                        Subtotal (8 items):
+                                        <span class="text-dark-emphasis fw-medium">$71.70</span>
+                                    </li>
+                                    <li class="d-flex justify-content-between">
+                                        Saving:
+                                        <span class="text-danger fw-medium">-$2.79</span>
+                                    </li>
+                                </ul>
+                                <div class="border-top pt-4 mt-4">
+                                    <div class="d-flex justify-content-between mb-3">
+                                        <span class="fs-sm">Estimated total:</span>
+                                        <span class="h5 mb-0">$68.91</span>
+                                    </div>
+                                    <a class="btn btn-lg btn-primary w-100 rounded-pill" href="{{ route('second', ['checkout', 'v2-pickup']) }}">
+                                        Proceed to checkout
+                                        <i class="ci-chevron-right fs-lg ms-1 me-n1"></i>
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </aside>
+            </div>
+        </section>
+    </main>
+
+    @include('layouts.partials/footer2')
+
+@endsection
+
+@section('scripts')
+@endsection
diff --git a/resources/views/checkout/v2-pickup.blade.php b/resources/views/checkout/v2-pickup.blade.php
new file mode 100644
index 0000000..35a600e
--- /dev/null
+++ b/resources/views/checkout/v2-pickup.blade.php
@@ -0,0 +1,683 @@
+@extends('layouts.landing', ['title' => 'Checkout v.2 - Pickup from Store'])
+
+@section('content')
+    @include('layouts.partials/offcanvas')
+
+    <!-- Delivey options offcanvas -->
+    <div class="offcanvas offcanvas-end pb-sm-2 px-sm-2" id="deliveryOptions" tabindex="-1"
+        aria-labelledby="deliveryOptionsLabel" style="width: 500px">
+
+        <!-- Header with nav tabs -->
+        <div class="offcanvas-header flex-column align-items-start py-3 pt-lg-4">
+            <div class="d-flex align-items-center justify-content-between w-100 pb-xl-1 mb-4">
+                <h4 class="offcanvas-title" id="deliveryOptionsLabel">Delivery options</h4>
+                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+            </div>
+            <ul class="nav nav-pills nav-justified w-100" role="tablist">
+                <li class="nav-item" role="presentation">
+                    <button type="button" class="nav-link" id="delivery-tab" data-bs-toggle="tab"
+                        data-bs-target="#delivery-tab-pane" role="tab" aria-controls="delivery-tab-pane"
+                        aria-selected="false">
+                        <i class="ci-shopping-bag fs-base ms-n1 me-2"></i>
+                        Delivery
+                    </button>
+                </li>
+                <li class="nav-item" role="presentation">
+                    <button type="button" class="nav-link active" id="pickup-tab" data-bs-toggle="tab"
+                        data-bs-target="#pickup-tab-pane" role="tab" aria-controls="pickup-tab-pane"
+                        aria-selected="true">
+                        <i class="ci-box fs-base ms-n1 me-2"></i>
+                        Pickup
+                    </button>
+                </li>
+            </ul>
+        </div>
+
+        <div class="offcanvas-body tab-content py-2 py-sm-3">
+
+            <!-- Delivery tab -->
+            <div class="tab-pane fade" id="delivery-tab-pane" role="tabpanel" aria-labelledby="delivery-tab">
+
+                <!-- Address options collapse -->
+                <div class="collapse delivery-address show" id="deliveryAddressOptions">
+                    <div class="mt-n3">
+                        <div class="form-check border-bottom py-4 m-0">
+                            <input type="radio" class="form-check-input" id="address-1" name="delivery-address" checked>
+                            <label for="address-1" class="form-check-label text-dark-emphasis fw-semibold">567 Cherry Lane
+                                Apt B12 Sacramento, 95829</label>
+                        </div>
+                        <div class="form-check border-bottom py-4 m-0">
+                            <input type="radio" class="form-check-input" id="address-2" name="delivery-address">
+                            <div class="d-flex w-100">
+                                <label for="address-2" class="form-check-label text-dark-emphasis me-3">1901 Thornridge Cir.
+                                    Shiloh, Hawaii, 81063</label>
+                                <button type="button" class="btn-close fs-sm ms-auto" data-bs-toggle="tooltip"
+                                    data-bs-custom-class="tooltip-sm" data-bs-title="Remove" aria-label="Remove"></button>
+                            </div>
+                        </div>
+                        <div class="form-check border-bottom py-4 m-0">
+                            <input type="radio" class="form-check-input" id="address-3" name="delivery-address">
+                            <div class="d-flex w-100">
+                                <label for="address-3" class="form-check-label text-dark-emphasis me-3">3517 W. Gray St.
+                                    Utica, Pennsylvania, 57867</label>
+                                <button type="button" class="btn-close fs-sm ms-auto" data-bs-toggle="tooltip"
+                                    data-bs-custom-class="tooltip-sm" data-bs-title="Remove" aria-label="Remove"></button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Add new address collapse -->
+                <div class="collapse delivery-address" id="deliveryAddressAdd">
+                    <div class="nav mb-4">
+                        <a class="nav-link animate-underline p-0" href=".delivery-address" data-bs-toggle="collapse"
+                            aria-expanded="true" aria-controls="deliveryAddressOptions deliveryAddressAdd">
+                            <i class="ci-chevron-left fs-lg ms-n1 me-1"></i>
+                            <span class="animate-target">Back to my addresses</span>
+                        </a>
+                    </div>
+                    <div class="d-flex align-items-center justify-content-between mb-3 mb-lg-4">
+                        <h5 class="h6 mb-0 me-3">Add an address to start ordering</h5>
+                        <a class="btn btn-sm btn-outline-primary rounded-pill" href="#!">
+                            <i class="ci-map-pin fs-base ms-n1 me-1"></i>
+                            Find on map
+                        </a>
+                    </div>
+                    <div class="mb-3 mb-lg-4">
+                        <label class="form-label">State *</label>
+                        <select class="form-select form-select-lg rounded-pill"
+                            data-select='{
+                "classNames": {
+                  "containerInner": ["form-select", "form-select-lg", "rounded-pill"]
+                }
+              }'
+                            aria-label="Large pill select">
+                            <option value="">Select state</option>
+                            <option value="Arizona">Arizona</option>
+                            <option value="California">California</option>
+                            <option value="Montana">Montana</option>
+                            <option value="Nevada">Nevada</option>
+                            <option value="New Mexico">New Mexico</option>
+                            <option value="Texas">Texas</option>
+                        </select>
+                    </div>
+                    <div class="mb-3 mb-lg-4">
+                        <label for="my-postcode" class="form-label">Postcode *</label>
+                        <input type="text" class="form-control form-control-lg rounded-pill" id="my-postcode">
+                    </div>
+                    <div class="mb-3 mb-lg-4">
+                        <label class="form-label">City *</label>
+                        <select class="form-select form-select-lg rounded-pill"
+                            data-select='{
+                "classNames": {
+                  "containerInner": ["form-select", "form-select-lg", "rounded-pill"]
+                }
+              }'
+                            aria-label="Large pill select">
+                            <option value="">Select city</option>
+                            <option value="Austin">Austin</option>
+                            <option value="Helena">Helena</option>
+                            <option value="Sacramento">Sacramento</option>
+                            <option value="Santa Fe">Santa Fe</option>
+                            <option value="Las Vegas">Las Vegas</option>
+                            <option value="Phoenix">Phoenix</option>
+                        </select>
+                    </div>
+                    <label for="my-address" class="form-label">Street address *</label>
+                    <input type="text" class="form-control form-control-lg rounded-pill" id="my-address">
+                </div>
+
+                <!-- Add address collapse toggle -->
+                <div class="nav">
+                    <a class="nav-link hiding-collapse-toggle animate-underline collapsed px-0 mt-4"
+                        href=".delivery-address" data-bs-toggle="collapse" aria-expanded="false"
+                        aria-controls="deliveryAddressOptions deliveryAddressAdd">
+                        <span class="animate-target">Add delivery address</span>
+                        <i class="ci-plus fs-base ms-1"></i>
+                    </a>
+                </div>
+            </div>
+
+            <!-- Pickup tab -->
+            <div class="tab-pane fade show active" id="pickup-tab-pane" role="tabpanel" aria-labelledby="pickup-tab">
+
+                <!-- Pickup store options collapse -->
+                <div class="collapse pickup-options show" id="pickupStoreOptions">
+                    <div class="mt-n3">
+                        <div class="form-check border-bottom py-4 m-0">
+                            <input type="radio" class="form-check-input" id="store-1" name="pickup-store" checked>
+                            <div>
+                                <div class="d-flex w-100 pb-2 mb-1">
+                                    <label for="store-1"
+                                        class="form-check-label text-dark-emphasis fw-semibold me-3">Sacramento
+                                        Supercenter</label>
+                                    <button type="button" class="btn-close fs-sm ms-auto" data-bs-toggle="tooltip"
+                                        data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
+                                        aria-label="Remove"></button>
+                                </div>
+                                <div class="fs-xs mb-2">8270 Delta Shores Cir S, Sacramento, CA 95832</div>
+                                <div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">07:00 - 22:00</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="form-check border-bottom py-4 m-0">
+                            <input type="radio" class="form-check-input" id="store-2" name="pickup-store">
+                            <div>
+                                <div class="d-flex w-100 pb-2 mb-1">
+                                    <label for="store-2"
+                                        class="form-check-label text-dark-emphasis fw-semibold me-3">West Sacramento
+                                        Supercenter</label>
+                                    <button type="button" class="btn-close fs-sm ms-auto" data-bs-toggle="tooltip"
+                                        data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
+                                        aria-label="Remove"></button>
+                                </div>
+                                <div class="fs-xs mb-2">755 Riverpoint Ct, West Sacramento, CA 95605</div>
+                                <div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">07:00 - 21:00</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="form-check border-bottom py-4 m-0">
+                            <input type="radio" class="form-check-input" id="store-3" name="pickup-store">
+                            <div>
+                                <div class="d-flex w-100 pb-2 mb-1">
+                                    <label for="store-3"
+                                        class="form-check-label text-dark-emphasis fw-semibold me-3">Rancho Cordova
+                                        Supercenter</label>
+                                    <button type="button" class="btn-close fs-sm ms-auto" data-bs-toggle="tooltip"
+                                        data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
+                                        aria-label="Remove"></button>
+                                </div>
+                                <div class="fs-xs mb-2">10655 Folsom Blvd, Rancho Cordova, CA 95670</div>
+                                <div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">08:00 - 23:00</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Add new pickup store collapse -->
+                <div class="collapse pickup-options" id="pickupStoreAdd">
+                    <div class="nav mb-4">
+                        <a class="nav-link animate-underline p-0" href=".pickup-options" data-bs-toggle="collapse"
+                            aria-expanded="true" aria-controls="pickupStoreOptions pickupStoreAdd">
+                            <i class="ci-chevron-left fs-lg ms-n1 me-1"></i>
+                            <span class="animate-target">Back to my stores</span>
+                        </a>
+                    </div>
+                    <div class="d-flex align-items-center justify-content-between mb-3 mb-lg-4">
+                        <h5 class="h6 mb-0 me-3">Select a suitable store</h5>
+                        <a class="btn btn-sm btn-outline-primary rounded-pill" href="#!">
+                            <i class="ci-map-pin fs-base ms-n1 me-1"></i>
+                            Find on map
+                        </a>
+                    </div>
+                    <div class="mb-3 mb-lg-4">
+                        <label class="form-label">State *</label>
+                        <select class="form-select form-select-lg rounded-pill"
+                            data-select='{
+                "classNames": {
+                  "containerInner": ["form-select", "form-select-lg", "rounded-pill"]
+                }
+              }'
+                            aria-label="Large pill select">
+                            <option value="">Select state</option>
+                            <option value="Arizona">Arizona</option>
+                            <option value="California" selected>California</option>
+                            <option value="Montana">Montana</option>
+                            <option value="Nevada">Nevada</option>
+                            <option value="New Mexico">New Mexico</option>
+                            <option value="Texas">Texas</option>
+                        </select>
+                    </div>
+                    <div class="mb-4">
+                        <label class="form-label">City *</label>
+                        <select class="form-select form-select-lg rounded-pill"
+                            data-select='{
+                "classNames": {
+                  "containerInner": ["form-select", "form-select-lg", "rounded-pill"]
+                }
+              }'
+                            aria-label="Large pill select">
+                            <option value="">Select city</option>
+                            <option value="Austin">Austin</option>
+                            <option value="Helena">Helena</option>
+                            <option value="Sacramento" selected>Sacramento</option>
+                            <option value="Santa Fe">Santa Fe</option>
+                            <option value="Las Vegas">Las Vegas</option>
+                            <option value="Phoenix">Phoenix</option>
+                        </select>
+                    </div>
+                    <div class="fs-xs fw-medium text-uppercase text-body-secondary">Found stores:</div>
+                    <div class="form-check border-bottom py-4 m-0">
+                        <input type="radio" class="form-check-input" id="store-4" name="found-store">
+                        <div>
+                            <label for="store-4"
+                                class="form-check-label text-dark-emphasis fw-semibold pb-2 mb-1">Sacramento
+                                Supercenter</label>
+                            <div class="fs-xs mb-2">8270 Delta Shores Cir S, Sacramento, CA 95832</div>
+                            <div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">07:00 - 22:00</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="form-check border-bottom py-4 m-0">
+                        <input type="radio" class="form-check-input" id="store-5" name="found-store">
+                        <div>
+                            <label for="store-5" class="form-check-label text-dark-emphasis fw-semibold pb-2 mb-1">West
+                                Sacramento Supercenter</label>
+                            <div class="fs-xs mb-2">755 Riverpoint Ct, West Sacramento, CA 95605</div>
+                            <div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">07:00 - 21:00</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="form-check border-bottom py-4 m-0">
+                        <input type="radio" class="form-check-input" id="store-6" name="found-store">
+                        <div>
+                            <label for="store-6" class="form-check-label text-dark-emphasis fw-semibold pb-2 mb-1">Rancho
+                                Cordova Supercenter</label>
+                            <div class="fs-xs mb-2">10655 Folsom Blvd, Rancho Cordova, CA 95670</div>
+                            <div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">08:00 - 23:00</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Add address collapse toggle -->
+                <div class="nav">
+                    <a class="nav-link hiding-collapse-toggle animate-underline collapsed px-0 mt-4"
+                        href=".pickup-options" data-bs-toggle="collapse" aria-expanded="false"
+                        aria-controls="pickupStoreOptions pickupStoreAdd">
+                        <span class="animate-target">Add store address</span>
+                        <i class="ci-plus fs-base ms-1"></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+
+        <!-- Footer -->
+        <div class="offcanvas-header">
+            <button type="button" class="btn btn-lg btn-primary w-100 rounded-pill">Confirm address</button>
+        </div>
+    </div>
+
+
+    <!-- Delivery date and time offcanvas -->
+    <div class="offcanvas offcanvas-end pb-sm-2 px-sm-2" id="deliveryDateTime" tabindex="-1"
+        aria-labelledby="deliveryDateTimeLabel" style="width: 500px">
+
+        <!-- Header with nav tabs -->
+        <div class="offcanvas-header py-3 pt-lg-4">
+            <h4 class="offcanvas-title" id="deliveryDateTimeLabel">Schedule date and time</h4>
+            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+        </div>
+
+        <!-- Body -->
+        <div class="offcanvas-body py-3">
+
+            <!-- Day -->
+            <div class="d-flex justify-content-between gap-3 overflow-auto pb-3">
+                <div class="text-center">
+                    <div class="fs-sm pb-1 mb-2">Mon</div>
+                    <input type="radio" class="btn-check" name="day" id="mon">
+                    <label class="btn btn-icon btn-lg btn-outline-secondary fs-sm rounded-circle"
+                        for="mon">24</label>
+                </div>
+                <div class="text-center">
+                    <div class="fs-sm pb-1 mb-2">Tue</div>
+                    <input type="radio" class="btn-check" name="day" id="tue">
+                    <label class="btn btn-icon btn-lg btn-outline-secondary fs-sm rounded-circle"
+                        for="tue">25</label>
+                </div>
+                <div class="text-center">
+                    <div class="fs-sm pb-1 mb-2">Wed</div>
+                    <input type="radio" class="btn-check" name="day" id="wed" checked>
+                    <label class="btn btn-icon btn-lg btn-outline-secondary fs-sm rounded-circle"
+                        for="wed">26</label>
+                </div>
+                <div class="text-center">
+                    <div class="fs-sm pb-1 mb-2">Thu</div>
+                    <input type="radio" class="btn-check" name="day" id="thu">
+                    <label class="btn btn-icon btn-lg btn-outline-secondary fs-sm rounded-circle"
+                        for="thu">27</label>
+                </div>
+                <div class="text-center">
+                    <div class="fs-sm pb-1 mb-2">Fri</div>
+                    <input type="radio" class="btn-check" name="day" id="fri">
+                    <label class="btn btn-icon btn-lg btn-outline-secondary fs-sm rounded-circle"
+                        for="fri">28</label>
+                </div>
+                <div class="text-center">
+                    <div class="fs-sm pb-1 mb-2">Sat</div>
+                    <input type="radio" class="btn-check" name="day" id="sat">
+                    <label class="btn btn-icon btn-lg btn-outline-secondary fs-sm rounded-circle"
+                        for="sat">29</label>
+                </div>
+                <div class="text-center">
+                    <div class="fs-sm pb-1 mb-2">Sun</div>
+                    <input type="radio" class="btn-check" name="day" id="sun">
+                    <label class="btn btn-icon btn-lg btn-outline-secondary fs-sm rounded-circle"
+                        for="sun">30</label>
+                </div>
+            </div>
+
+            <!-- Time -->
+            <div class="form-check border-bottom py-4 m-0">
+                <input type="radio" class="form-check-input" id="pickup-time-1" name="pickup-time">
+                <div class="d-flex w-100">
+                    <label for="pickup-time-1" class="form-check-label text-dark-emphasis fw-semibold me-3">08:00 -
+                        10:00</label>
+                    <span class="fs-sm ms-auto">Free</span>
+                </div>
+            </div>
+            <div class="form-check border-bottom py-4 m-0">
+                <input type="radio" class="form-check-input" id="pickup-time-2" name="pickup-time" checked>
+                <div class="d-flex w-100">
+                    <label for="pickup-time-2" class="form-check-label text-dark-emphasis fw-semibold me-3">10:00 -
+                        12:00</label>
+                    <span class="fs-sm ms-auto">Free</span>
+                </div>
+            </div>
+            <div class="form-check border-bottom py-4 m-0">
+                <input type="radio" class="form-check-input" id="pickup-time-3" name="pickup-time">
+                <div class="d-flex w-100">
+                    <label for="pickup-time-3" class="form-check-label text-dark-emphasis fw-semibold me-3">12:00 -
+                        14:00</label>
+                    <span class="fs-sm ms-auto">Free</span>
+                </div>
+            </div>
+            <div class="form-check border-bottom py-4 m-0">
+                <input type="radio" class="form-check-input" id="pickup-time-4" name="pickup-time">
+                <div class="d-flex w-100">
+                    <label for="pickup-time-4" class="form-check-label text-dark-emphasis fw-semibold me-3">14:00 -
+                        16:00</label>
+                    <span class="fs-sm ms-auto">Free</span>
+                </div>
+            </div>
+            <div class="form-check border-bottom py-4 m-0">
+                <input type="radio" class="form-check-input" id="pickup-time-5" name="pickup-time">
+                <div class="d-flex w-100">
+                    <label for="pickup-time-5" class="form-check-label text-dark-emphasis fw-semibold me-3">16:00 -
+                        18:00</label>
+                    <span class="fs-sm ms-auto">Free</span>
+                </div>
+            </div>
+            <div class="form-check border-bottom py-4 m-0">
+                <input type="radio" class="form-check-input" id="pickup-time-6" name="pickup-time">
+                <div class="d-flex w-100">
+                    <label for="pickup-time-6" class="form-check-label text-dark-emphasis fw-semibold me-3">18:00 -
+                        20:00</label>
+                    <span class="fs-sm ms-auto">Free</span>
+                </div>
+            </div>
+            <div class="form-check border-bottom py-4 m-0">
+                <input type="radio" class="form-check-input" id="pickup-time-7" name="pickup-time">
+                <div class="d-flex w-100">
+                    <label for="pickup-time-7" class="form-check-label text-dark-emphasis fw-semibold me-3">20:00 -
+                        22:00</label>
+                    <span class="fs-sm ms-auto">Free</span>
+                </div>
+            </div>
+        </div>
+
+        <!-- Footer -->
+        <div class="offcanvas-header">
+            <button type="button" class="btn btn-lg btn-primary w-100 rounded-pill">Confirm date and time</button>
+        </div>
+    </div>
+
+
+    <!-- Site menu offcanvas -->
+    @include('layouts.partials/menu-offcanvas')
+
+    @include('layouts.partials/checkout-navbar')
+
+    <main class="content-wrapper">
+
+        <!-- Breadcrumb -->
+        <nav class="container pt-1 pt-md-0 my-3 my-md-4" aria-label="breadcrumb">
+            <ol class="breadcrumb mb-0">
+                <li class="breadcrumb-item"><a href="{{ route('second', ['home', 'grocery']) }}">Home</a></li>
+                <li class="breadcrumb-item"><a href="{{ route('second', ['shop', 'catalog-grocery']) }}">Shop</a></li>
+                <li class="breadcrumb-item"><a href="{{ route('second', ['checkout', 'v2-cart']) }}">Cart</a></li>
+                <li class="breadcrumb-item active" aria-current="page">Checkout</li>
+            </ol>
+        </nav>
+
+
+        <!-- Checkout form + Order summary -->
+        <section class="container pb-5 mb-2 mb-md-3 mb-lg-4 mb-xl-5">
+            <h1 class="h3 mb-4">Checkout</h1>
+            <div class="row">
+
+                <!-- Checkout form -->
+                <div class="col-lg-8 col-xl-7 mb-5 mb-lg-0">
+
+                    <!-- Pickup store section -->
+                    <h2 class="h5 mb-4">Pickup from the store</h2>
+                    <div class="d-flex align-items-start justify-content-between">
+                        <div class="d-flex align-items-start fs-sm me-3">
+                            <i class="ci-map-pin fs-base text-primary me-2"></i>
+                            <div>
+                                <div class="h6 fs-sm mb-2">Sacramento Supercenter</div>
+                                8270 Delta Shores Cir S, Sacramento, CA 95832
+                            </div>
+                        </div>
+                        <div class="nav">
+                            <a class="nav-link text-decoration-underline text-nowrap p-0" href="#deliveryOptions"
+                                data-bs-toggle="offcanvas" aria-controls="deliveryOptions">Change store</a>
+                        </div>
+                    </div>
+
+                    <!-- Pickup date and time section -->
+                    <h2 class="h5 mt-5 mb-4">Pickup date and time</h2>
+                    <div class="d-flex flex-wrap gap-3">
+                        <div>
+                            <input type="radio" class="btn-check" name="date" id="today" checked>
+                            <label class="btn btn-outline-secondary rounded-pill" for="today">Today</label>
+                        </div>
+                        <div>
+                            <input type="radio" class="btn-check" name="date" id="tomorrow">
+                            <label class="btn btn-outline-secondary rounded-pill" for="tomorrow">Tomorrow</label>
+                        </div>
+                        <div>
+                            <input type="radio" class="btn-check" name="date" id="other-date">
+                            <label class="btn btn-outline-secondary rounded-pill" for="other-date"
+                                data-bs-toggle="offcanvas" data-bs-target="#deliveryDateTime"
+                                aria-controls="deliveryDateTime">Other date</label>
+                        </div>
+                    </div>
+                    <div class="fs-sm mt-4">Closest time of receipt</div>
+                    <div class="d-flex flex-wrap gap-3 mt-3">
+                        <div>
+                            <input type="radio" class="btn-check" name="time" id="time-1" checked>
+                            <label class="btn btn-outline-secondary rounded-pill" for="time-1">10:00 - 12:00</label>
+                        </div>
+                        <div>
+                            <input type="radio" class="btn-check" name="time" id="time-2">
+                            <label class="btn btn-outline-secondary rounded-pill" for="time-2">12:00 - 14:00</label>
+                        </div>
+                        <div>
+                            <input type="radio" class="btn-check" name="time" id="time-3">
+                            <label class="btn btn-outline-secondary rounded-pill" for="time-3">14:00 - 16:00</label>
+                        </div>
+                        <div>
+                            <input type="radio" class="btn-check" name="time" id="time-4">
+                            <label class="btn btn-outline-secondary rounded-pill" for="time-4">16:00 - 18:00</label>
+                        </div>
+                        <div>
+                            <input type="radio" class="btn-check" name="time" id="time-5">
+                            <label class="btn btn-outline-secondary rounded-pill" for="time-5">18:00 - 20:00</label>
+                        </div>
+                    </div>
+
+                    <!-- Payment method section -->
+                    <h2 class="h5 mt-5 mb-0">Payment method</h2>
+                    <div id="paymentMethod" role="list">
+
+                        <!-- Upon receipt -->
+                        <div class="mt-4">
+                            <div class="form-check mb-0" role="listitem" data-bs-toggle="collapse"
+                                data-bs-target="#upon-receipt" aria-expanded="true" aria-controls="upon-receipt">
+                                <label class="form-check-label text-dark-emphasis fw-semibold">
+                                    <input type="radio" class="form-check-input fs-base me-2 me-sm-3"
+                                        name="payment-method" checked>
+                                    Upon receipt
+                                </label>
+                            </div>
+                            <div class="collapse show" id="upon-receipt" data-bs-parent="#paymentMethod"></div>
+                        </div>
+
+                        <!-- Credit card -->
+                        <div class="mt-4">
+                            <div class="form-check mb-0" role="listitem" data-bs-toggle="collapse"
+                                data-bs-target="#card" aria-expanded="false" aria-controls="card">
+                                <label class="form-check-label d-flex align-items-center text-dark-emphasis fw-semibold">
+                                    <input type="radio" class="form-check-input fs-base me-2 me-sm-3"
+                                        name="payment-method">
+                                    Credit or debit card
+                                    <span class="d-none d-sm-flex gap-2 ms-3">
+                                        <img src="/img/payment-methods/amex.svg" class="d-block bg-info rounded-1"
+                                            width="36" alt="Amex">
+                                        <img src="/img/payment-methods/visa-light-mode.svg" class="d-none-dark"
+                                            width="36" alt="Visa">
+                                        <img src="/img/payment-methods/visa-dark-mode.svg" class="d-none d-block-dark"
+                                            width="36" alt="Visa">
+                                        <img src="/img/payment-methods/mastercard.svg" width="36"
+                                            alt="Mastercard">
+                                        <img src="/img/payment-methods/maestro.svg" width="36" alt="Maestro">
+                                    </span>
+                                </label>
+                            </div>
+                            <div class="collapse" id="card" data-bs-parent="#paymentMethod">
+                                <form class="needs-validation pt-4 pb-2 ps-3 ms-2 ms-sm-3" novalidate>
+                                    <div class="position-relative mb-3 mb-sm-4"
+                                        data-input-format='{"creditCard": true}'>
+                                        <input type="text"
+                                            class="form-control form-control-lg form-icon-end rounded-pill"
+                                            placeholder="Card number" required>
+                                        <span
+                                            class="position-absolute d-flex top-50 end-0 translate-middle-y fs-5 text-body-tertiary me-3"
+                                            data-card-icon></span>
+                                    </div>
+                                    <div class="row row-cols-1 row-cols-sm-2 g-3 g-sm-4">
+                                        <div class="col">
+                                            <input type="text" class="form-control form-control-lg rounded-pill"
+                                                data-input-format='{"date": true, "datePattern": ["m", "y"]}'
+                                                placeholder="MM/YY">
+                                        </div>
+                                        <div class="col">
+                                            <input type="text" class="form-control form-control-lg rounded-pill"
+                                                maxlength="4"
+                                                data-input-format='{"numeral": true, "numeralPositiveOnly": true, "numeralThousandsGroupStyle": "none"}'
+                                                placeholder="CVC">
+                                        </div>
+                                    </div>
+                                </form>
+                            </div>
+                        </div>
+
+                        <!-- PayPal -->
+                        <div class="mt-4">
+                            <div class="form-check mb-0" role="listitem" data-bs-toggle="collapse"
+                                data-bs-target="#paypal" aria-expanded="false" aria-controls="paypal">
+                                <label class="form-check-label d-flex align-items-center text-dark-emphasis fw-semibold">
+                                    <input type="radio" class="form-check-input fs-base me-2 me-sm-3"
+                                        name="payment-method">
+                                    PayPal
+                                    <img src="/img/payment-methods/paypal-icon.svg" class="ms-3" width="16"
+                                        alt="PayPal">
+                                </label>
+                            </div>
+                            <div class="collapse" id="paypal" data-bs-parent="#paymentMethod"></div>
+                        </div>
+
+                        <!-- Google Pay -->
+                        <div class="mt-4">
+                            <div class="form-check mb-0" role="listitem" data-bs-toggle="collapse"
+                                data-bs-target="#googlepay" aria-expanded="false" aria-controls="googlepay">
+                                <label class="form-check-label d-flex align-items-center text-dark-emphasis fw-semibold">
+                                    <input type="radio" class="form-check-input fs-base me-2 me-sm-3"
+                                        name="payment-method">
+                                    Google Pay
+                                    <img src="/img/payment-methods/google-icon.svg" class="ms-3" width="20"
+                                        alt="Google Pay">
+                                </label>
+                            </div>
+                            <div class="collapse" id="googlepay" data-bs-parent="#paymentMethod"></div>
+                        </div>
+                    </div>
+
+                    <!-- Packaging section -->
+                    <h2 class="h5 mt-5 mb-4">Packaging</h2>
+                    <div class="alert alert-success text-dark-emphasis fs-sm border-0 rounded-4 mb-4" role="alert">
+                        We are eco-friendly company 🍏, so we use as little plastic as possible.
+                    </div>
+                    <div class="d-flex flex-column gap-3">
+                        <div class="form-check m-0">
+                            <input type="radio" class="form-check-input" id="bags" name="packaging">
+                            <label for="bags" class="form-check-label text-dark-emphasis fw-medium">Branded bags
+                                <span class="text-body-secondary">(absorbent polyester)</span></label>
+                        </div>
+                        <div class="form-check m-0">
+                            <input type="radio" class="form-check-input" id="eco" name="packaging">
+                            <label for="eco" class="form-check-label text-dark-emphasis fw-medium">Eco-friendly
+                                packaging <span class="text-body-secondary">(cardboard packaging)</span></label>
+                        </div>
+                    </div>
+                </div>
+
+
+                <!-- Order summary (sticky sidebar) -->
+                <aside class="col-lg-4 offset-xl-1" style="margin-top: -115px">
+                    <div class="position-sticky top-0" style="padding-top: 115px">
+                        <div class="d-flex align-items-center justify-content-between border-bottom pb-4 mb-4">
+                            <h2 class="h5 mb-0 me-3">Order summary</h2>
+                            <div class="nav">
+                                <a class="nav-link text-decoration-underline p-0" href="{{ route('second', ['checkout', 'v2-cart']) }}">Edit</a>
+                            </div>
+                        </div>
+                        <ul class="list-unstyled fs-sm gap-3 mb-0">
+                            <li class="d-flex justify-content-between">
+                                Subtotal (8 items):
+                                <span class="text-dark-emphasis fw-medium">$71.70</span>
+                            </li>
+                            <li class="d-flex justify-content-between">
+                                Saving:
+                                <span class="text-danger fw-medium">-$2.79</span>
+                            </li>
+                        </ul>
+                        <div class="border-top pt-4 mt-4">
+                            <div class="d-flex justify-content-between mb-4">
+                                <span class="fs-sm">Estimated total:</span>
+                                <span class="h5 mb-0">$68.91</span>
+                            </div>
+                            <div class="alert d-flex alert-warning fs-sm rounded-4 mb-4" role="alert">
+                                <i class="ci-info fs-lg pe-1 mt-1 me-2"></i>
+                                <div>There is a weighted product in the cart. The actual amount may differ from the
+                                    indicated amount.</div>
+                            </div>
+                            <div class="mb-4">
+                                <label for="order-note" class="form-label">Order note</label>
+                                <textarea class="form-control rounded-5" id="order-note" rows="3"></textarea>
+                            </div>
+                            <div class="form-check mb-4">
+                                <input type="checkbox" class="form-check-input" id="age">
+                                <label for="age" class="form-check-label">The order has products with age
+                                    restrictions. I confirm that <span class="fw-semibold">I am at least 18 years
+                                        old.</span></label>
+                            </div>
+                            <a class="btn btn-lg btn-primary w-100 rounded-pill" href="{{ route('second', ['checkout', 'v2-thankyou']) }}">
+                                Confirm the order
+                                <i class="ci-chevron-right fs-lg ms-1 me-n1"></i>
+                            </a>
+                        </div>
+                    </div>
+                </aside>
+            </div>
+        </section>
+    </main>
+
+    @include('layouts.partials/footer2')
+@endsection
+
+@section('scripts')
+@endsection
diff --git a/resources/views/checkout/v2-thankyou.blade.php b/resources/views/checkout/v2-thankyou.blade.php
new file mode 100644
index 0000000..9f59f5e
--- /dev/null
+++ b/resources/views/checkout/v2-thankyou.blade.php
@@ -0,0 +1,603 @@
+@extends('layouts.landing', ['title' => 'Checkout v.2 - Thank You Page'])
+
+@section('content')
+    @include('layouts.partials/offcanvas2')
+
+    <!-- Delivey options offcanvas -->
+    <div class="offcanvas offcanvas-end pb-sm-2 px-sm-2" id="deliveryOptions" tabindex="-1"
+        aria-labelledby="deliveryOptionsLabel" style="width: 500px">
+
+        <!-- Header with nav tabs -->
+        <div class="offcanvas-header flex-column align-items-start py-3 pt-lg-4">
+            <div class="d-flex align-items-center justify-content-between w-100 pb-xl-1 mb-4">
+                <h4 class="offcanvas-title" id="deliveryOptionsLabel">Delivery options</h4>
+                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+            </div>
+            <ul class="nav nav-pills nav-justified w-100" role="tablist">
+                <li class="nav-item" role="presentation">
+                    <button type="button" class="nav-link active" id="delivery-tab" data-bs-toggle="tab"
+                        data-bs-target="#delivery-tab-pane" role="tab" aria-controls="delivery-tab-pane"
+                        aria-selected="true">
+                        <i class="ci-shopping-bag fs-base ms-n1 me-2"></i>
+                        Delivery
+                    </button>
+                </li>
+                <li class="nav-item" role="presentation">
+                    <button type="button" class="nav-link" id="pickup-tab" data-bs-toggle="tab"
+                        data-bs-target="#pickup-tab-pane" role="tab" aria-controls="pickup-tab-pane"
+                        aria-selected="false">
+                        <i class="ci-box fs-base ms-n1 me-2"></i>
+                        Pickup
+                    </button>
+                </li>
+            </ul>
+        </div>
+
+        <div class="offcanvas-body tab-content py-2 py-sm-3">
+
+            <!-- Delivery tab -->
+            <div class="tab-pane fade show active" id="delivery-tab-pane" role="tabpanel" aria-labelledby="delivery-tab">
+
+                <!-- Address options collapse -->
+                <div class="collapse delivery-address show" id="deliveryAddressOptions">
+                    <div class="mt-n3">
+                        <div class="form-check border-bottom py-4 m-0">
+                            <input type="radio" class="form-check-input" id="address-1" name="delivery-address" checked>
+                            <label for="address-1" class="form-check-label text-dark-emphasis fw-semibold">567 Cherry Lane
+                                Apt B12 Sacramento, 95829</label>
+                        </div>
+                        <div class="form-check border-bottom py-4 m-0">
+                            <input type="radio" class="form-check-input" id="address-2" name="delivery-address">
+                            <div class="d-flex w-100">
+                                <label for="address-2" class="form-check-label text-dark-emphasis me-3">1901 Thornridge Cir.
+                                    Shiloh, Hawaii, 81063</label>
+                                <button type="button" class="btn-close fs-sm ms-auto" data-bs-toggle="tooltip"
+                                    data-bs-custom-class="tooltip-sm" data-bs-title="Remove" aria-label="Remove"></button>
+                            </div>
+                        </div>
+                        <div class="form-check border-bottom py-4 m-0">
+                            <input type="radio" class="form-check-input" id="address-3" name="delivery-address">
+                            <div class="d-flex w-100">
+                                <label for="address-3" class="form-check-label text-dark-emphasis me-3">3517 W. Gray St.
+                                    Utica, Pennsylvania, 57867</label>
+                                <button type="button" class="btn-close fs-sm ms-auto" data-bs-toggle="tooltip"
+                                    data-bs-custom-class="tooltip-sm" data-bs-title="Remove" aria-label="Remove"></button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Add new address collapse -->
+                <div class="collapse delivery-address" id="deliveryAddressAdd">
+                    <div class="nav mb-4">
+                        <a class="nav-link animate-underline p-0" href=".delivery-address" data-bs-toggle="collapse"
+                            aria-expanded="true" aria-controls="deliveryAddressOptions deliveryAddressAdd">
+                            <i class="ci-chevron-left fs-lg ms-n1 me-1"></i>
+                            <span class="animate-target">Back to my addresses</span>
+                        </a>
+                    </div>
+                    <div class="d-flex align-items-center justify-content-between mb-3 mb-lg-4">
+                        <h5 class="h6 mb-0 me-3">Add an address to start ordering</h5>
+                        <a class="btn btn-sm btn-outline-primary rounded-pill" href="#!">
+                            <i class="ci-map-pin fs-base ms-n1 me-1"></i>
+                            Find on map
+                        </a>
+                    </div>
+                    <div class="mb-3 mb-lg-4">
+                        <label class="form-label">State *</label>
+                        <select class="form-select form-select-lg rounded-pill"
+                            data-select='{
+                "classNames": {
+                  "containerInner": ["form-select", "form-select-lg", "rounded-pill"]
+                }
+              }'
+                            aria-label="Large pill select">
+                            <option value="">Select state</option>
+                            <option value="Arizona">Arizona</option>
+                            <option value="California">California</option>
+                            <option value="Montana">Montana</option>
+                            <option value="Nevada">Nevada</option>
+                            <option value="New Mexico">New Mexico</option>
+                            <option value="Texas">Texas</option>
+                        </select>
+                    </div>
+                    <div class="mb-3 mb-lg-4">
+                        <label for="my-postcode" class="form-label">Postcode *</label>
+                        <input type="text" class="form-control form-control-lg rounded-pill" id="my-postcode">
+                    </div>
+                    <div class="mb-3 mb-lg-4">
+                        <label class="form-label">City *</label>
+                        <select class="form-select form-select-lg rounded-pill"
+                            data-select='{
+                "classNames": {
+                  "containerInner": ["form-select", "form-select-lg", "rounded-pill"]
+                }
+              }'
+                            aria-label="Large pill select">
+                            <option value="">Select city</option>
+                            <option value="Austin">Austin</option>
+                            <option value="Helena">Helena</option>
+                            <option value="Sacramento">Sacramento</option>
+                            <option value="Santa Fe">Santa Fe</option>
+                            <option value="Las Vegas">Las Vegas</option>
+                            <option value="Phoenix">Phoenix</option>
+                        </select>
+                    </div>
+                    <label for="my-address" class="form-label">Street address *</label>
+                    <input type="text" class="form-control form-control-lg rounded-pill" id="my-address">
+                </div>
+
+                <!-- Add address collapse toggle -->
+                <div class="nav">
+                    <a class="nav-link hiding-collapse-toggle animate-underline collapsed px-0 mt-4"
+                        href=".delivery-address" data-bs-toggle="collapse" aria-expanded="false"
+                        aria-controls="deliveryAddressOptions deliveryAddressAdd">
+                        <span class="animate-target">Add delivery address</span>
+                        <i class="ci-plus fs-base ms-1"></i>
+                    </a>
+                </div>
+            </div>
+
+            <!-- Pickup tab -->
+            <div class="tab-pane fade" id="pickup-tab-pane" role="tabpanel" aria-labelledby="pickup-tab">
+
+                <!-- Pickup store options collapse -->
+                <div class="collapse pickup-options show" id="pickupStoreOptions">
+                    <div class="mt-n3">
+                        <div class="form-check border-bottom py-4 m-0">
+                            <input type="radio" class="form-check-input" id="store-1" name="pickup-store" checked>
+                            <div>
+                                <div class="d-flex w-100 pb-2 mb-1">
+                                    <label for="store-1"
+                                        class="form-check-label text-dark-emphasis fw-semibold me-3">Sacramento
+                                        Supercenter</label>
+                                    <button type="button" class="btn-close fs-sm ms-auto" data-bs-toggle="tooltip"
+                                        data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
+                                        aria-label="Remove"></button>
+                                </div>
+                                <div class="fs-xs mb-2">8270 Delta Shores Cir S, Sacramento, CA 95832</div>
+                                <div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">07:00 - 22:00</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="form-check border-bottom py-4 m-0">
+                            <input type="radio" class="form-check-input" id="store-2" name="pickup-store">
+                            <div>
+                                <div class="d-flex w-100 pb-2 mb-1">
+                                    <label for="store-2"
+                                        class="form-check-label text-dark-emphasis fw-semibold me-3">West Sacramento
+                                        Supercenter</label>
+                                    <button type="button" class="btn-close fs-sm ms-auto" data-bs-toggle="tooltip"
+                                        data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
+                                        aria-label="Remove"></button>
+                                </div>
+                                <div class="fs-xs mb-2">755 Riverpoint Ct, West Sacramento, CA 95605</div>
+                                <div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">07:00 - 21:00</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="form-check border-bottom py-4 m-0">
+                            <input type="radio" class="form-check-input" id="store-3" name="pickup-store">
+                            <div>
+                                <div class="d-flex w-100 pb-2 mb-1">
+                                    <label for="store-3"
+                                        class="form-check-label text-dark-emphasis fw-semibold me-3">Rancho Cordova
+                                        Supercenter</label>
+                                    <button type="button" class="btn-close fs-sm ms-auto" data-bs-toggle="tooltip"
+                                        data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
+                                        aria-label="Remove"></button>
+                                </div>
+                                <div class="fs-xs mb-2">10655 Folsom Blvd, Rancho Cordova, CA 95670</div>
+                                <div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">08:00 - 23:00</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Add new pickup store collapse -->
+                <div class="collapse pickup-options" id="pickupStoreAdd">
+                    <div class="nav mb-4">
+                        <a class="nav-link animate-underline p-0" href=".pickup-options" data-bs-toggle="collapse"
+                            aria-expanded="true" aria-controls="pickupStoreOptions pickupStoreAdd">
+                            <i class="ci-chevron-left fs-lg ms-n1 me-1"></i>
+                            <span class="animate-target">Back to my stores</span>
+                        </a>
+                    </div>
+                    <div class="d-flex align-items-center justify-content-between mb-3 mb-lg-4">
+                        <h5 class="h6 mb-0 me-3">Select a suitable store</h5>
+                        <a class="btn btn-sm btn-outline-primary rounded-pill" href="#!">
+                            <i class="ci-map-pin fs-base ms-n1 me-1"></i>
+                            Find on map
+                        </a>
+                    </div>
+                    <div class="mb-3 mb-lg-4">
+                        <label class="form-label">State *</label>
+                        <select class="form-select form-select-lg rounded-pill"
+                            data-select='{
+                "classNames": {
+                  "containerInner": ["form-select", "form-select-lg", "rounded-pill"]
+                }
+              }'
+                            aria-label="Large pill select">
+                            <option value="">Select state</option>
+                            <option value="Arizona">Arizona</option>
+                            <option value="California" selected>California</option>
+                            <option value="Montana">Montana</option>
+                            <option value="Nevada">Nevada</option>
+                            <option value="New Mexico">New Mexico</option>
+                            <option value="Texas">Texas</option>
+                        </select>
+                    </div>
+                    <div class="mb-4">
+                        <label class="form-label">City *</label>
+                        <select class="form-select form-select-lg rounded-pill"
+                            data-select='{
+                "classNames": {
+                  "containerInner": ["form-select", "form-select-lg", "rounded-pill"]
+                }
+              }'
+                            aria-label="Large pill select">
+                            <option value="">Select city</option>
+                            <option value="Austin">Austin</option>
+                            <option value="Helena">Helena</option>
+                            <option value="Sacramento" selected>Sacramento</option>
+                            <option value="Santa Fe">Santa Fe</option>
+                            <option value="Las Vegas">Las Vegas</option>
+                            <option value="Phoenix">Phoenix</option>
+                        </select>
+                    </div>
+                    <div class="fs-xs fw-medium text-uppercase text-body-secondary">Found stores:</div>
+                    <div class="form-check border-bottom py-4 m-0">
+                        <input type="radio" class="form-check-input" id="store-4" name="found-store">
+                        <div>
+                            <label for="store-4"
+                                class="form-check-label text-dark-emphasis fw-semibold pb-2 mb-1">Sacramento
+                                Supercenter</label>
+                            <div class="fs-xs mb-2">8270 Delta Shores Cir S, Sacramento, CA 95832</div>
+                            <div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">07:00 - 22:00</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="form-check border-bottom py-4 m-0">
+                        <input type="radio" class="form-check-input" id="store-5" name="found-store">
+                        <div>
+                            <label for="store-5" class="form-check-label text-dark-emphasis fw-semibold pb-2 mb-1">West
+                                Sacramento Supercenter</label>
+                            <div class="fs-xs mb-2">755 Riverpoint Ct, West Sacramento, CA 95605</div>
+                            <div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">07:00 - 21:00</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="form-check border-bottom py-4 m-0">
+                        <input type="radio" class="form-check-input" id="store-6" name="found-store">
+                        <div>
+                            <label for="store-6" class="form-check-label text-dark-emphasis fw-semibold pb-2 mb-1">Rancho
+                                Cordova Supercenter</label>
+                            <div class="fs-xs mb-2">10655 Folsom Blvd, Rancho Cordova, CA 95670</div>
+                            <div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">08:00 - 23:00</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Add address collapse toggle -->
+                <div class="nav">
+                    <a class="nav-link hiding-collapse-toggle animate-underline collapsed px-0 mt-4"
+                        href=".pickup-options" data-bs-toggle="collapse" aria-expanded="false"
+                        aria-controls="pickupStoreOptions pickupStoreAdd">
+                        <span class="animate-target">Add store address</span>
+                        <i class="ci-plus fs-base ms-1"></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+
+        <!-- Footer -->
+        <div class="offcanvas-header">
+            <button type="button" class="btn btn-lg btn-primary w-100 rounded-pill">Confirm address</button>
+        </div>
+    </div>
+
+    <!-- Site menu offcanvas -->
+    @include('layouts.partials/menu-offcanvas')
+
+    @include('layouts.partials/checkout-navbar')
+
+    <!-- Page content -->
+    <main class="content-wrapper">
+
+        <!-- Thank you message -->
+        <section class="container pt-3 pt-sm-4 pb-5 mb-2 mb-md-3 mb-lg-4 mb-xl-5">
+            <div class="position-relative overflow-hidden rounded-5 p-4 p-sm-5"
+                style="background-color: var(--cz-success-border-subtle)">
+                <div class="position-relative z-2 text-center py-4 py-md-5 my-md-2 my-lg-5 mx-auto"
+                    style="max-width: 536px">
+                    <h1 class="pt-xl-4 mb-4">Thank you for your order!</h1>
+                    <p class="text-dark-emphasis pb-3 pb-sm-4">Your order <span class="fw-semibold">#234000</span>
+                        accepted and will be processed shortly. Expect our courier <span class="fw-semibold">today (Sunday,
+                            May 9) at 12:00 - 14:00.</span></p>
+                    <a class="btn btn-lg btn-dark rounded-pill mb-xl-4" href="{{ route('second', ['shop', 'catalog-grocery']) }}">Continue
+                        shopping</a>
+                </div>
+                <img src="/img/shop/grocery/thankyou-bg-1.png"
+                    class="animate-up-down position-absolute top-0 start-0 w-100 h-100 object-fit-cover"
+                    alt="Background image">
+                <img src="/img/shop/grocery/thankyou-bg-2.png"
+                    class="animate-down-up position-absolute top-0 start-0 w-100 h-100 object-fit-cover"
+                    alt="Background image">
+            </div>
+        </section>
+
+
+        <!-- Similar products carousel -->
+        <section class="container pb-5 mb-2 mb-md-3 mb-lg-4 mb-xl-5">
+            <h2 class="h3 text-center mb-4">You may also like</h2>
+            <!-- Slider -->
+            <div class="swiper"
+                data-swiper='{
+          "slidesPerView": 2,
+          "spaceBetween": 24,
+          "pagination": {
+            "el": ".swiper-pagination",
+            "clickable": true
+          },
+          "breakpoints": {
+            "500": {
+              "slidesPerView": 3
+            },
+            "768": {
+              "slidesPerView": 4
+            },
+            "1100": {
+              "slidesPerView": 5
+            }
+          }
+        }'>
+                <div class="swiper-wrapper">
+
+                    <!-- Product -->
+                    <div class="swiper-slide h-auto">
+                        <div class="card product-card h-100 bg-transparent border-0 shadow-none">
+                            <div class="position-relative z-2">
+                                <span
+                                    class="badge text-bg-danger position-absolute top-0 start-0 z-2 mt-1 mt-sm-2 ms-1 ms-sm-2">-30%</span>
+                                <button type="button"
+                                    class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                    aria-label="Add to Wishlist">
+                                    <i class="ci-heart animate-target"></i>
+                                </button>
+                                <a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
+                                    <div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
+                                        <img src="/img/shop/grocery/02.png" alt="Image">
+                                    </div>
+                                </a>
+                                <div class="position-absolute w-100 start-0 bottom-0">
+                                    <div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
+                                        <div
+                                            class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
+                                            <button type="button" class="btn btn-icon btn-sm btn-primary" data-decrement
+                                                aria-label="Decrement quantity">
+                                                <i class="ci-minus fs-sm"></i>
+                                            </button>
+                                            <input type="number"
+                                                class="form-control form-control-sm bg-primary text-white w-100"
+                                                value="0" min="0" readonly>
+                                            <button type="button"
+                                                class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
+                                                data-increment aria-label="Increment quantity">
+                                                <span data-count-input-value></span>
+                                                <i class="ci-plus fs-sm"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
+                                <div class="h6 mb-2">$3.12 <del
+                                        class="fs-sm fw-normal text-body-tertiary ms-1">$4.05</del></div>
+                                <h3 class="fs-sm lh-base mb-0">
+                                    <a class="hover-effect-underline fw-normal" href="{{ route('second', ['shop', 'product-grocery']) }}">Fresh
+                                        orange Klementina, Spain</a>
+                                </h3>
+                            </div>
+                            <div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">1kg</div>
+                        </div>
+                    </div>
+
+                    <!-- Product -->
+                    <div class="swiper-slide h-auto">
+                        <div class="card product-card h-100 bg-transparent border-0 shadow-none">
+                            <div class="position-relative z-2">
+                                <button type="button"
+                                    class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                    aria-label="Add to Wishlist">
+                                    <i class="ci-heart animate-target"></i>
+                                </button>
+                                <a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
+                                    <div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
+                                        <img src="/img/shop/grocery/03.png" alt="Image">
+                                    </div>
+                                </a>
+                                <div class="position-absolute w-100 start-0 bottom-0">
+                                    <div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
+                                        <div
+                                            class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
+                                            <button type="button" class="btn btn-icon btn-sm btn-primary" data-decrement
+                                                aria-label="Decrement quantity">
+                                                <i class="ci-minus fs-sm"></i>
+                                            </button>
+                                            <input type="number"
+                                                class="form-control form-control-sm bg-primary text-white w-100"
+                                                value="0" min="0" readonly>
+                                            <button type="button"
+                                                class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
+                                                data-increment aria-label="Increment quantity">
+                                                <span data-count-input-value></span>
+                                                <i class="ci-plus fs-sm"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
+                                <div class="h6 mb-2">$0.80</div>
+                                <h3 class="fs-sm lh-base mb-0">
+                                    <a class="hover-effect-underline fw-normal" href="{{ route('second', ['shop', 'product-grocery']) }}">Pepsi
+                                        soda classic, can</a>
+                                </h3>
+                            </div>
+                            <div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">330ml</div>
+                        </div>
+                    </div>
+
+                    <!-- Product -->
+                    <div class="swiper-slide h-auto">
+                        <div class="card product-card h-100 bg-transparent border-0 shadow-none">
+                            <div class="position-relative z-2">
+                                <button type="button"
+                                    class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                    aria-label="Add to Wishlist">
+                                    <i class="ci-heart animate-target"></i>
+                                </button>
+                                <a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
+                                    <div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
+                                        <img src="/img/shop/grocery/04.png" alt="Image">
+                                    </div>
+                                </a>
+                                <div class="position-absolute w-100 start-0 bottom-0">
+                                    <div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
+                                        <div
+                                            class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
+                                            <button type="button" class="btn btn-icon btn-sm btn-primary" data-decrement
+                                                aria-label="Decrement quantity">
+                                                <i class="ci-minus fs-sm"></i>
+                                            </button>
+                                            <input type="number"
+                                                class="form-control form-control-sm bg-primary text-white w-100"
+                                                value="0" min="0" readonly>
+                                            <button type="button"
+                                                class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
+                                                data-increment aria-label="Increment quantity">
+                                                <span data-count-input-value></span>
+                                                <i class="ci-plus fs-sm"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
+                                <div class="h6 mb-2">$2.99</div>
+                                <h3 class="fs-sm lh-base mb-0">
+                                    <a class="hover-effect-underline fw-normal"
+                                        href="{{ route('second', ['shop', 'product-grocery']) }}">Mozzarella mini cheese Granaloro</a>
+                                </h3>
+                            </div>
+                            <div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">250g</div>
+                        </div>
+                    </div>
+
+                    <!-- Product -->
+                    <div class="swiper-slide h-auto">
+                        <div class="card product-card h-100 bg-transparent border-0 shadow-none">
+                            <div class="position-relative z-2">
+                                <button type="button"
+                                    class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                    aria-label="Add to Wishlist">
+                                    <i class="ci-heart animate-target"></i>
+                                </button>
+                                <a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
+                                    <div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
+                                        <img src="/img/shop/grocery/05.png" alt="Image">
+                                    </div>
+                                </a>
+                                <div class="position-absolute w-100 start-0 bottom-0">
+                                    <div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
+                                        <div
+                                            class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
+                                            <button type="button" class="btn btn-icon btn-sm btn-primary" data-decrement
+                                                aria-label="Decrement quantity">
+                                                <i class="ci-minus fs-sm"></i>
+                                            </button>
+                                            <input type="number"
+                                                class="form-control form-control-sm bg-primary text-white w-100"
+                                                value="0" min="0" readonly>
+                                            <button type="button"
+                                                class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
+                                                data-increment aria-label="Increment quantity">
+                                                <span data-count-input-value></span>
+                                                <i class="ci-plus fs-sm"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
+                                <div class="h6 mb-2">$1.24</div>
+                                <h3 class="fs-sm lh-base mb-0">
+                                    <a class="hover-effect-underline fw-normal" href="{{ route('second', ['shop', 'product-grocery']) }}">Coconut,
+                                        Indonesia</a>
+                                </h3>
+                            </div>
+                            <div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">1 coconut</div>
+                        </div>
+                    </div>
+
+                    <!-- Product -->
+                    <div class="swiper-slide h-auto">
+                        <div class="card product-card h-100 bg-transparent border-0 shadow-none">
+                            <div class="position-relative z-2">
+                                <button type="button"
+                                    class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                    aria-label="Add to Wishlist">
+                                    <i class="ci-heart animate-target"></i>
+                                </button>
+                                <a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
+                                    <div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
+                                        <img src="/img/shop/grocery/06.png" alt="Image">
+                                    </div>
+                                </a>
+                                <div class="position-absolute w-100 start-0 bottom-0">
+                                    <div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
+                                        <div
+                                            class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
+                                            <button type="button" class="btn btn-icon btn-sm btn-primary" data-decrement
+                                                aria-label="Decrement quantity">
+                                                <i class="ci-minus fs-sm"></i>
+                                            </button>
+                                            <input type="number"
+                                                class="form-control form-control-sm bg-primary text-white w-100"
+                                                value="0" min="0" readonly>
+                                            <button type="button"
+                                                class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
+                                                data-increment aria-label="Increment quantity">
+                                                <span data-count-input-value></span>
+                                                <i class="ci-plus fs-sm"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
+                                <div class="h6 mb-2">$3.95</div>
+                                <h3 class="fs-sm lh-base mb-0">
+                                    <a class="hover-effect-underline fw-normal" href="{{ route('second', ['shop', 'product-grocery']) }}">Pesto
+                                        sauce Barilla with parmesan and basil</a>
+                                </h3>
+                            </div>
+                            <div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">200g</div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Pagination (Bullets) -->
+                <div class="swiper-pagination position-static mt-3"></div>
+            </div>
+        </section>
+    </main>
+
+    @include('layouts.partials/footer2')
+@endsection
+
+@section('scripts')
+@endsection
diff --git a/resources/views/contact/v1.blade.php b/resources/views/contact/v1.blade.php
new file mode 100644
index 0000000..9d0eef7
--- /dev/null
+++ b/resources/views/contact/v1.blade.php
@@ -0,0 +1,1841 @@
+@extends('layouts.landing', ['title' => 'Contact v.1'])
+
+@section('content')
+    <div class="offcanvas offcanvas-end pb-sm-2 px-sm-2" id="shoppingCart" tabindex="-1" aria-labelledby="shoppingCartLabel"
+        style="width: 500px">
+
+        <!-- Header -->
+        <div class="offcanvas-header flex-column align-items-start py-3 pt-lg-4">
+            <div class="d-flex align-items-center justify-content-between w-100 mb-3 mb-lg-4">
+                <h4 class="offcanvas-title" id="shoppingCartLabel">Shopping cart</h4>
+                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+            </div>
+            <p class="fs-sm">Buy <span class="text-dark-emphasis fw-semibold">$53</span> more to get <span
+                    class="text-dark-emphasis fw-semibold">Free Shipping</span></p>
+            <div class="progress w-100" role="progressbar" aria-label="Free shipping progress" aria-valuenow="78"
+                aria-valuemin="0" aria-valuemax="100" style="height: 4px">
+                <div class="progress-bar bg-dark rounded-pill d-none-dark" style="width: 78%"></div>
+                <div class="progress-bar bg-light rounded-pill d-none d-block-dark" style="width: 78%"></div>
+            </div>
+        </div>
+
+        <!-- Items -->
+        <div class="offcanvas-body d-flex flex-column gap-4 pt-2">
+
+            <!-- Item -->
+            <div class="d-flex align-items-center">
+                <a class="flex-shrink-0" href="{{ route('second', ['shop', 'product-fashion']) }}">
+                    <img src="/img/shop/fashion/thumbs/07.png" class="bg-body-tertiary rounded" width="110"
+                        alt="Thumbnail">
+                </a>
+                <div class="w-100 min-w-0 ps-3">
+                    <h5 class="d-flex animate-underline mb-2">
+                        <a class="d-block fs-sm fw-medium text-truncate animate-target"
+                            href="{{ route('second', ['shop', 'product-fashion']) }}">Leather sneakers with golden laces</a>
+                    </h5>
+                    <div class="h6 pb-1 mb-2">$74.00</div>
+                    <div class="d-flex align-items-center justify-content-between">
+                        <div class="count-input rounded-2">
+                            <button type="button" class="btn btn-icon btn-sm" data-decrement
+                                aria-label="Decrement quantity">
+                                <i class="ci-minus"></i>
+                            </button>
+                            <input type="number" class="form-control form-control-sm" value="1" readonly>
+                            <button type="button" class="btn btn-icon btn-sm" data-increment
+                                aria-label="Increment quantity">
+                                <i class="ci-plus"></i>
+                            </button>
+                        </div>
+                        <button type="button" class="btn-close fs-sm" data-bs-toggle="tooltip"
+                            data-bs-custom-class="tooltip-sm" data-bs-title="Remove" aria-label="Remove from cart"></button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Item -->
+            <div class="d-flex align-items-center">
+                <a class="flex-shrink-0" href="{{ route('second', ['shop', 'product-fashion']) }}">
+                    <img src="/img/shop/fashion/thumbs/08.png" class="bg-body-tertiary rounded" width="110"
+                        alt="Thumbnail">
+                </a>
+                <div class="w-100 min-w-0 ps-3">
+                    <h5 class="d-flex animate-underline mb-2">
+                        <a class="d-block fs-sm fw-medium text-truncate animate-target"
+                            href="{{ route('second', ['shop', 'product-fashion']) }}">Classic cotton men's shirt</a>
+                    </h5>
+                    <div class="h6 pb-1 mb-2">$27.00</div>
+                    <div class="d-flex align-items-center justify-content-between">
+                        <div class="count-input rounded-2">
+                            <button type="button" class="btn btn-icon btn-sm" data-decrement
+                                aria-label="Decrement quantity">
+                                <i class="ci-minus"></i>
+                            </button>
+                            <input type="number" class="form-control form-control-sm" value="1" readonly>
+                            <button type="button" class="btn btn-icon btn-sm" data-increment
+                                aria-label="Increment quantity">
+                                <i class="ci-plus"></i>
+                            </button>
+                        </div>
+                        <button type="button" class="btn-close fs-sm" data-bs-toggle="tooltip"
+                            data-bs-custom-class="tooltip-sm" data-bs-title="Remove" aria-label="Remove from cart"></button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Item -->
+            <div class="d-flex align-items-center">
+                <a class="flex-shrink-0" href="{{ route('second', ['shop', 'product-fashion']) }}">
+                    <img src="/img/shop/fashion/thumbs/09.png" class="bg-body-tertiary rounded" width="110"
+                        alt="Thumbnail">
+                </a>
+                <div class="w-100 min-w-0 ps-3">
+                    <h5 class="d-flex animate-underline mb-2">
+                        <a class="d-block fs-sm fw-medium text-truncate animate-target"
+                            href="{{ route('second', ['shop', 'product-fashion']) }}">Polarized sunglasses for men</a>
+                    </h5>
+                    <div class="h6 pb-1 mb-2">$96.00 <del class="text-body-tertiary fs-xs fw-normal">112.00</del></div>
+                    <div class="d-flex align-items-center justify-content-between">
+                        <div class="count-input rounded-2">
+                            <button type="button" class="btn btn-icon btn-sm" data-decrement
+                                aria-label="Decrement quantity">
+                                <i class="ci-minus"></i>
+                            </button>
+                            <input type="number" class="form-control form-control-sm" value="1" readonly>
+                            <button type="button" class="btn btn-icon btn-sm" data-increment
+                                aria-label="Increment quantity">
+                                <i class="ci-plus"></i>
+                            </button>
+                        </div>
+                        <button type="button" class="btn-close fs-sm" data-bs-toggle="tooltip"
+                            data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
+                            aria-label="Remove from cart"></button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Footer -->
+        <div class="offcanvas-header flex-column align-items-start">
+            <div class="d-flex align-items-center justify-content-between w-100 mb-3 mb-md-4">
+                <span class="text-light-emphasis">Subtotal:</span>
+                <span class="h6 mb-0">$197.00</span>
+            </div>
+            <div class="d-flex w-100 gap-3">
+                <a class="btn btn-lg btn-secondary w-100" href="#!">View cart</a>
+                <a class="btn btn-lg btn-dark w-100" href="#!">Checkout</a>
+            </div>
+        </div>
+    </div>
+
+    <div class="offcanvas offcanvas-top" id="searchBox" data-bs-backdrop="static" tabindex="-1">
+        <div class="offcanvas-header border-bottom p-0 py-lg-1">
+            <form class="container d-flex align-items-center">
+                <input type="search" class="form-control form-control-lg fs-lg border-0 rounded-0 py-3 ps-0"
+                    placeholder="Search the products" data-autofocus="offcanvas">
+                <button type="reset" class="btn-close fs-lg" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+            </form>
+        </div>
+        <div class="offcanvas-body px-0">
+            <div class="container text-center">
+                <svg class="text-body-tertiary opacity-60 mb-4" xmlns="http://www.w3.org/2000/svg" width="60"
+                    viewBox="0 0 512 512" fill="currentColor">
+                    <path
+                        d="M340.115,361.412l-16.98-16.98c-34.237,29.36-78.733,47.098-127.371,47.098C87.647,391.529,0,303.883,0,195.765S87.647,0,195.765,0s195.765,87.647,195.765,195.765c0,48.638-17.738,93.134-47.097,127.371l16.98,16.98l11.94-11.94c5.881-5.881,15.415-5.881,21.296,0l112.941,112.941c5.881,5.881,5.881,15.416,0,21.296l-45.176,45.176c-5.881,5.881-15.415,5.881-21.296,0L328.176,394.648c-5.881-5.881-5.881-15.416,0-21.296L340.115,361.412z M195.765,361.412c91.484,0,165.647-74.163,165.647-165.647S287.249,30.118,195.765,30.118S30.118,104.28,30.118,195.765S104.28,361.412,195.765,361.412z M360.12,384l91.645,91.645l23.88-23.88L384,360.12L360.12,384z M233.034,233.033c5.881-5.881,15.415-5.881,21.296,0c5.881,5.881,5.881,15.416,0,21.296c-32.345,32.345-84.786,32.345-117.131,0c-5.881-5.881-5.881-15.415,0-21.296c5.881-5.881,15.416-5.881,21.296,0C179.079,253.616,212.45,253.616,233.034,233.033zM135.529,180.706c-12.475,0-22.588-10.113-22.588-22.588c0-12.475,10.113-22.588,22.588-22.588c12.475,0,22.588,10.113,22.588,22.588C158.118,170.593,148.005,180.706,135.529,180.706z M256,180.706c-12.475,0-22.588-10.113-22.588-22.588c0-12.475,10.113-22.588,22.588-22.588s22.588,10.113,22.588,22.588C278.588,170.593,268.475,180.706,256,180.706z" />
+                </svg>
+                <h6 class="mb-2">Your search results will appear here</h6>
+                <p class="fs-sm mb-0">Start typing in the search field above to see instant search results.</p>
+            </div>
+        </div>
+    </div>
+
+
+    <div class="alert alert-dismissible bg-dark text-white rounded-0 py-2 px-0 m-0 fade show" data-bs-theme="dark">
+        <div class="container position-relative d-flex min-w-0">
+            <div class="d-flex flex-nowrap align-items-center g-2 w-100 min-w-0 mx-auto mt-n1" style="max-width: 458px">
+                <div class="nav me-2">
+                    <button type="button" class="nav-link fs-lg p-0" id="topbarPrev" aria-label="Prev">
+                        <i class="ci-chevron-left"></i>
+                    </button>
+                </div>
+                <div class="swiper fs-sm text-white"
+                    data-swiper='{
+            "spaceBetween": 24,
+            "loop": true,
+            "autoplay": {
+              "delay": 5000,
+              "disableOnInteraction": false
+            },
+            "navigation": {
+              "prevEl": "#topbarPrev",
+              "nextEl": "#topbarNext"
+            }
+          }'>
+                    <div class="swiper-wrapper min-w-0">
+                        <div class="swiper-slide text-truncate text-center">🎉 Free Shipping on orders over $250. <span
+                                class="d-none d-sm-inline">Don't miss a discount!</span></div>
+                        <div class="swiper-slide text-truncate text-center">💰 Money back guarantee. <span
+                                class="d-none d-sm-inline">We return money within 30 days.</span></div>
+                        <div class="swiper-slide text-truncate text-center">💪 Friendly 24/7 customer support. <span
+                                class="d-none d-sm-inline">We've got you covered!</span></div>
+                    </div>
+                </div>
+                <div class="nav ms-2">
+                    <button type="button" class="nav-link fs-lg p-0" id="topbarNext" aria-label="Next">
+                        <i class="ci-chevron-right"></i>
+                    </button>
+                </div>
+            </div>
+            <button type="button" class="btn-close position-static flex-shrink-0 p-1 ms-3 ms-md-n4"
+                data-bs-dismiss="alert" aria-label="Close"></button>
+        </div>
+    </div>
+
+    <header class="navbar navbar-expand-lg navbar-sticky bg-body d-block z-fixed p-0"
+        data-sticky-navbar='{"offset": 500}'>
+        <div class="container py-2 py-lg-3">
+            <div class="d-flex align-items-center gap-3">
+
+                <!-- Mobile offcanvas menu toggler (Hamburger) -->
+                <button type="button" class="navbar-toggler me-4 me-md-2" data-bs-toggle="offcanvas"
+                    data-bs-target="#navbarNav" aria-controls="navbarNav" aria-label="Toggle navigation">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+
+                <!-- Country slect visible on screens > 768px wide (md breakpoint) -->
+                <div class="dropdown d-none d-md-block nav">
+                    <a class="nav-link dropdown-toggle py-1 px-0" href="#" data-bs-toggle="dropdown"
+                        aria-haspopup="true" aria-expanded="false" aria-label="Country select: USA">
+                        <div class="ratio ratio-1x1" style="width: 20px">
+                            <img src="/img/flags/en-us.png" alt="USA">
+                        </div>
+                    </a>
+                    <ul class="dropdown-menu fs-sm" style="--cz-dropdown-spacer: .5rem">
+                        <li>
+                            <a class="dropdown-item" href="#!">
+                                <img src="/img/flags/en-uk.png" class="flex-shrink-0 me-2" width="20"
+                                    alt="United Kingdom">
+                                United Kingdom
+                            </a>
+                        </li>
+                        <li>
+                            <a class="dropdown-item" href="#!">
+                                <img src="/img/flags/fr.png" class="flex-shrink-0 me-2" width="20" alt="France">
+                                France
+                            </a>
+                        </li>
+                        <li>
+                            <a class="dropdown-item" href="#!">
+                                <img src="/img/flags/de.png" class="flex-shrink-0 me-2" width="20"
+                                    alt="Deutschland">
+                                Deutschland
+                            </a>
+                        </li>
+                        <li>
+                            <a class="dropdown-item" href="#!">
+                                <img src="/img/flags/it.png" class="flex-shrink-0 me-2" width="20" alt="Italia">
+                                Italia
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+
+                <!-- City slect visible on screens > 768px wide (md breakpoint) -->
+                <div class="dropdown d-none d-md-block nav">
+                    <a class="nav-link animate-underline dropdown-toggle fw-normal py-1 px-0" href="#"
+                        data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        <span class="animate-target">Washington</span>
+                    </a>
+                    <ul class="dropdown-menu fs-sm" style="--cz-dropdown-spacer: .5rem">
+                        <li><a class="dropdown-item" href="#!">Chicago</a></li>
+                        <li><a class="dropdown-item" href="#!">Los Angeles</a></li>
+                        <li><a class="dropdown-item" href="#!">New York</a></li>
+                        <li><a class="dropdown-item" href="#!">Philadelphia</a></li>
+                    </ul>
+                </div>
+            </div>
+
+            <!-- Navbar brand (Logo) -->
+            <a class="navbar-brand fs-2 py-0 m-0 me-auto me-sm-n5"
+                href="{{ route('second', ['home', 'fashion-v1']) }}">Cartzilla</a>
+
+            <!-- Button group -->
+            <div class="d-flex align-items-center">
+
+                <!-- Navbar stuck nav toggler -->
+                <button type="button" class="navbar-toggler d-none navbar-stuck-show me-3" data-bs-toggle="collapse"
+                    data-bs-target="#stuckNav" aria-controls="stuckNav" aria-expanded="false"
+                    aria-label="Toggle navigation in navbar stuck state">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+
+                <!-- Theme switcher (light/dark/auto) -->
+                <div class="dropdown">
+                    <button type="button"
+                        class="theme-switcher btn btn-icon btn-lg btn-outline-secondary fs-lg border-0 rounded-circle animate-scale"
+                        data-bs-toggle="dropdown" aria-expanded="false" aria-label="Toggle theme (light)">
+                        <span class="theme-icon-active d-flex animate-target">
+                            <i class="ci-sun"></i>
+                        </span>
+                    </button>
+                    <ul class="dropdown-menu" style="--cz-dropdown-min-width: 9rem">
+                        <li>
+                            <button type="button" class="dropdown-item active" data-bs-theme-value="light"
+                                aria-pressed="true">
+                                <span class="theme-icon d-flex fs-base me-2">
+                                    <i class="ci-sun"></i>
+                                </span>
+                                <span class="theme-label">Light</span>
+                                <i class="item-active-indicator ci-check ms-auto"></i>
+                            </button>
+                        </li>
+                        <li>
+                            <button type="button" class="dropdown-item" data-bs-theme-value="dark"
+                                aria-pressed="false">
+                                <span class="theme-icon d-flex fs-base me-2">
+                                    <i class="ci-moon"></i>
+                                </span>
+                                <span class="theme-label">Dark</span>
+                                <i class="item-active-indicator ci-check ms-auto"></i>
+                            </button>
+                        </li>
+                        <li>
+                            <button type="button" class="dropdown-item" data-bs-theme-value="auto"
+                                aria-pressed="false">
+                                <span class="theme-icon d-flex fs-base me-2">
+                                    <i class="ci-auto"></i>
+                                </span>
+                                <span class="theme-label">Auto</span>
+                                <i class="item-active-indicator ci-check ms-auto"></i>
+                            </button>
+                        </li>
+                    </ul>
+                </div>
+
+                <!-- Search toggle button visible on screens < 992px wide (lg breakpoint) -->
+                <button type="button"
+                    class="btn btn-icon btn-lg fs-xl btn-outline-secondary border-0 rounded-circle animate-shake d-lg-none"
+                    data-bs-toggle="offcanvas" data-bs-target="#searchBox" aria-controls="searchBox"
+                    aria-label="Toggle search bar">
+                    <i class="ci-search animate-target"></i>
+                </button>
+
+                <!-- Account button visible on screens > 768px wide (md breakpoint) -->
+                <a class="btn btn-icon btn-lg fs-lg btn-outline-secondary border-0 rounded-circle animate-shake d-none d-md-inline-flex"
+                    href="{{ route('second', ['account', 'signin']) }}">
+                    <i class="ci-user animate-target"></i>
+                    <span class="visually-hidden">Account</span>
+                </a>
+
+                <!-- Wishlist button visible on screens > 768px wide (md breakpoint) -->
+                <a class="btn btn-icon btn-lg fs-lg btn-outline-secondary border-0 rounded-circle animate-pulse d-none d-md-inline-flex"
+                    href="#!">
+                    <i class="ci-heart animate-target"></i>
+                    <span class="visually-hidden">Wishlist</span>
+                </a>
+
+                <!-- Cart button -->
+                <button type="button"
+                    class="btn btn-icon btn-lg fs-xl btn-outline-secondary position-relative border-0 rounded-circle animate-scale"
+                    data-bs-toggle="offcanvas" data-bs-target="#shoppingCart" aria-controls="shoppingCart"
+                    aria-label="Shopping cart">
+                    <span class="position-absolute top-0 start-100 badge fs-xs text-bg-primary rounded-pill mt-1 ms-n4 z-2"
+                        style="--cz-badge-padding-y: .25em; --cz-badge-padding-x: .42em">3</span>
+                    <i class="ci-shopping-bag animate-target me-1"></i>
+                </button>
+            </div>
+        </div>
+
+        <!-- Main navigation that turns into offcanvas on screens < 992px wide (lg breakpoint) -->
+        <div class="collapse navbar-stuck-hide" id="stuckNav">
+            <nav class="offcanvas offcanvas-start" id="navbarNav" tabindex="-1" aria-labelledby="navbarNavLabel">
+                <div class="offcanvas-header py-3">
+                    <h5 class="offcanvas-title" id="navbarNavLabel">Browse Cartzilla</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+                </div>
+
+                <!-- Country and City slects visible on screens < 768px wide (md breakpoint) -->
+                <div class="offcanvas-header gap-3 d-md-none pt-0 pb-3">
+                    <div class="dropdown nav">
+                        <a class="nav-link dropdown-toggle py-1 px-0" href="#" data-bs-toggle="dropdown"
+                            aria-haspopup="true" aria-expanded="false" aria-label="Country select: USA">
+                            <div class="ratio ratio-1x1" style="width: 20px">
+                                <img src="/img/flags/en-us.png" alt="USA">
+                            </div>
+                        </a>
+                        <ul class="dropdown-menu fs-sm" style="--cz-dropdown-spacer: .5rem">
+                            <li>
+                                <a class="dropdown-item" href="#!">
+                                    <img src="/img/flags/en-uk.png" class="flex-shrink-0 me-2" width="20"
+                                        alt="United Kingdom">
+                                    United Kingdom
+                                </a>
+                            </li>
+                            <li>
+                                <a class="dropdown-item" href="#!">
+                                    <img src="/img/flags/fr.png" class="flex-shrink-0 me-2" width="20"
+                                        alt="France">
+                                    France
+                                </a>
+                            </li>
+                            <li>
+                                <a class="dropdown-item" href="#!">
+                                    <img src="/img/flags/de.png" class="flex-shrink-0 me-2" width="20"
+                                        alt="Deutschland">
+                                    Deutschland
+                                </a>
+                            </li>
+                            <li>
+                                <a class="dropdown-item" href="#!">
+                                    <img src="/img/flags/it.png" class="flex-shrink-0 me-2" width="20"
+                                        alt="Italia">
+                                    Italia
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="dropdown nav">
+                        <a class="nav-link animate-underline dropdown-toggle fw-normal py-1 px-0" href="#"
+                            data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            <span class="animate-target">Washington</span>
+                        </a>
+                        <ul class="dropdown-menu fs-sm" style="--cz-dropdown-spacer: .5rem">
+                            <li><a class="dropdown-item" href="#!">Chicago</a></li>
+                            <li><a class="dropdown-item" href="#!">Los Angeles</a></li>
+                            <li><a class="dropdown-item" href="#!">New York</a></li>
+                            <li><a class="dropdown-item" href="#!">Philadelphia</a></li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="offcanvas-body pt-1 pb-3 py-lg-0">
+                    <div class="container pb-lg-2 px-0 px-lg-3">
+
+                        <div class="position-relative d-lg-flex align-items-center justify-content-between">
+
+                            <!-- Categories mega menu -->
+                            <div class="navbar-nav">
+                                <div class="dropdown position-static pb-lg-2">
+                                    <button type="button"
+                                        class="nav-link animate-underline fw-semibold text-uppercase ps-0"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover" data-bs-auto-close="outside"
+                                        aria-expanded="false">
+                                        <i class="ci-menu fs-lg me-2"></i>
+                                        <span class="animate-target">Categories</span>
+                                    </button>
+                                    <div class="dropdown-menu w-100 p-4 px-xl-5" style="--cz-dropdown-spacer: .75rem">
+
+                                        <!-- Nav tabs -->
+                                        <ul class="nav nav-underline justify-content-lg-center mt-n2 mt-lg-0 mb-4"
+                                            role="tablist">
+                                            <li class="nav-item" role="presentation">
+                                                <button type="button" class="nav-link text-uppercase active"
+                                                    id="womens-tab" data-bs-toggle="tab"
+                                                    data-bs-target="#womens-tab-pane" role="tab"
+                                                    aria-controls="womens-tab-pane" aria-selected="true">
+                                                    Women's
+                                                </button>
+                                            </li>
+                                            <li class="nav-item" role="presentation">
+                                                <button type="button" class="nav-link text-uppercase" id="mens-tab"
+                                                    data-bs-toggle="tab" data-bs-target="#mens-tab-pane" role="tab"
+                                                    aria-controls="mens-tab-pane" aria-selected="false">
+                                                    Men's
+                                                </button>
+                                            </li>
+                                            <li class="nav-item" role="presentation">
+                                                <button type="button" class="nav-link text-uppercase" id="kids-tab"
+                                                    data-bs-toggle="tab" data-bs-target="#kids-tab-pane" role="tab"
+                                                    aria-controls="kids-tab-pane" aria-selected="false">
+                                                    Kids'
+                                                </button>
+                                            </li>
+                                        </ul>
+
+                                        <!-- Tab panes -->
+                                        <div class="tab-content pb-xl-4">
+
+                                            <!-- Women's tab -->
+                                            <div class="tab-pane fade show active" id="womens-tab-pane" role="tabpanel"
+                                                aria-labelledby="womens-tab">
+                                                <div class="row g-4">
+                                                    <div class="col-lg-2">
+                                                        <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
+                                                            href="{{ route('second', ['shop', 'catalog-fashion']) }}">
+                                                            <span class="animate-target">Clothing</span>
+                                                        </a>
+                                                        <ul class="nav flex-column gap-2 mt-0">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Shirts
+                                                                    &amp; Tops</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Coats
+                                                                    &amp;
+                                                                    Outerwear</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Underwear</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sweatshirts</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Dresses</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Swimwear</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">View
+                                                                    all</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="col-lg-2">
+                                                        <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
+                                                            href="{{ route('second', ['shop', 'catalog-fashion']) }}">
+                                                            <span class="animate-target">Shoes</span>
+                                                        </a>
+                                                        <ul class="nav flex-column gap-2 mt-0">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Boots</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sandals</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Heels</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Loafers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Slippers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Oxfords</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">View
+                                                                    all</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="col-lg-2">
+                                                        <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
+                                                            href="{{ route('second', ['shop', 'catalog-fashion']) }}">
+                                                            <span class="animate-target">Accessories</span>
+                                                        </a>
+                                                        <ul class="nav flex-column gap-2 mt-0">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Handbags</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Eyewear</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Hats</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Watches</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Jewelry</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Belts</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">View
+                                                                    all</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="col-lg-2">
+                                                        <div class="h6 mb-2">Specialty Sizes</div>
+                                                        <ul class="nav flex-column gap-2 mt-0">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Plus
+                                                                    Size</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Petite</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Wide
+                                                                    Shoes</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Narrow
+                                                                    Shoes</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="col-lg-4 d-none d-lg-block" data-bs-theme="light">
+                                                        <div
+                                                            class="position-relative d-flex flex-column h-100 rounded-4 overflow-hidden p-4">
+                                                            <div
+                                                                class="position-relative d-flex flex-column justify-content-between h-100 z-2 pt-xl-2 ps-xl-2">
+                                                                <div class="h4 lh-base">Women's<br>Heels<br>Collection
+                                                                </div>
+                                                                <div>
+                                                                    <a class="btn btn-sm btn-dark stretched-link"
+                                                                        href="{{ route('second', ['shop', 'catalog-fashion']) }}"
+                                                                        data-bs-theme="light">Shop now</a>
+                                                                </div>
+                                                            </div>
+                                                            <img src="/img/mega-menu/fashion/01.jpg"
+                                                                class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rtl-flip"
+                                                                alt="Image">
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+
+                                            <!-- Men's tab -->
+                                            <div class="tab-pane fade" id="mens-tab-pane" role="tabpanel"
+                                                aria-labelledby="mens-tab">
+                                                <div class="row g-4">
+                                                    <div class="col-lg-2">
+                                                        <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
+                                                            href="{{ route('second', ['shop', 'catalog-fashion']) }}">
+                                                            <span class="animate-target">Clothing</span>
+                                                        </a>
+                                                        <ul class="nav flex-column gap-2 mt-0">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">T-Shirts</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Jeans</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Coats
+                                                                    &amp;
+                                                                    Outerwear</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sweatshirts</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Underwear</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Pants</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">View
+                                                                    all</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="col-lg-2">
+                                                        <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
+                                                            href="{{ route('second', ['shop', 'catalog-fashion']) }}">
+                                                            <span class="animate-target">Shoes</span>
+                                                        </a>
+                                                        <ul class="nav flex-column gap-2 mt-0">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sneakers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Oxfords</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Loafers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sandals</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Boots</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Slippers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">View
+                                                                    all</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="col-lg-2">
+                                                        <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
+                                                            href="{{ route('second', ['shop', 'catalog-fashion']) }}">
+                                                            <span class="animate-target">Accessories</span>
+                                                        </a>
+                                                        <ul class="nav flex-column gap-2 mt-0">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Backpacks</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sunglasses</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Bags</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Watches</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Hats</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Belts</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">View
+                                                                    all</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="col-lg-2">
+                                                        <div class="h6 mb-2">Specialty Shops</div>
+                                                        <ul class="nav flex-column gap-2 mt-0">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Active
+                                                                    Wear</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sports
+                                                                    Clothing</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Athletic
+                                                                    Shoes</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="col-lg-4 d-none d-lg-block" data-bs-theme="dark">
+                                                        <div
+                                                            class="position-relative d-flex flex-column h-100 rounded-4 overflow-hidden p-4">
+                                                            <div
+                                                                class="position-relative d-flex flex-column justify-content-between h-100 z-2 pt-xl-2 ps-xl-2">
+                                                                <div class="h4 lh-base">Men's<br>Sunglasses<br>Offers
+                                                                </div>
+                                                                <div>
+                                                                    <a class="btn btn-sm btn-dark stretched-link"
+                                                                        href="{{ route('second', ['shop', 'catalog-fashion']) }}"
+                                                                        data-bs-theme="dark">Shop now</a>
+                                                                </div>
+                                                            </div>
+                                                            <img src="/img/mega-menu/fashion/02.jpg"
+                                                                class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rtl-flip"
+                                                                alt="Image">
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+
+                                            <!-- Kids' tab -->
+                                            <div class="tab-pane fade" id="kids-tab-pane" role="tabpanel"
+                                                aria-labelledby="kids-tab">
+                                                <div class="row g-4">
+                                                    <div class="col-lg-2">
+                                                        <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
+                                                            href="{{ route('second', ['shop', 'catalog-fashion']) }}">
+                                                            <span class="animate-target">Boys</span>
+                                                        </a>
+                                                        <ul class="nav flex-column gap-2 mt-0">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Pants</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sneakers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Coats
+                                                                    &amp;
+                                                                    Outerwear</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sweatshirts</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Boots</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Shorts</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">View
+                                                                    all</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="col-lg-2">
+                                                        <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
+                                                            href="{{ route('second', ['shop', 'catalog-fashion']) }}">
+                                                            <span class="animate-target">Girls</span>
+                                                        </a>
+                                                        <ul class="nav flex-column gap-2 mt-0">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Shirts
+                                                                    &amp; Tops</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Dresses</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sneakers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Hoodies</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sandals</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Coats
+                                                                    &amp;
+                                                                    Outerwear</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">View
+                                                                    all</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="col-lg-2">
+                                                        <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
+                                                            href="{{ route('second', ['shop', 'catalog-fashion']) }}">
+                                                            <span class="animate-target">Accessories</span>
+                                                        </a>
+                                                        <ul class="nav flex-column gap-2 mt-0">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Backpacks</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Gloves</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Shoe
+                                                                    Laces</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Scarves</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Hats</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Belts</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">View
+                                                                    all</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="col-lg-2">
+                                                        <div class="h6 mb-2">Shop by Age</div>
+                                                        <ul class="nav flex-column gap-2 mt-0">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Infant</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Toddler</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Little
+                                                                    Kid</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Big
+                                                                    Kid</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="col-lg-4 d-none d-lg-block" data-bs-theme="light">
+                                                        <div
+                                                            class="position-relative d-flex flex-column h-100 rounded-4 overflow-hidden p-4">
+                                                            <div
+                                                                class="position-relative d-flex flex-column justify-content-between h-100 z-2 pt-xl-2 ps-xl-2">
+                                                                <div class="h4 lh-base">Kids'<br>Spring<br>Collection
+                                                                </div>
+                                                                <div>
+                                                                    <a class="btn btn-sm btn-dark stretched-link"
+                                                                        href="{{ route('second', ['shop', 'catalog-fashion']) }}"
+                                                                        data-bs-theme="light">Shop now</a>
+                                                                </div>
+                                                            </div>
+                                                            <img src="/img/mega-menu/fashion/03.jpg"
+                                                                class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rtl-flip"
+                                                                alt="Image">
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Navbar nav -->
+                            <ul class="navbar-nav position-relative me-xl-n5">
+                                <li class="nav-item dropdown pb-lg-2 me-lg-n1 me-xl-0">
+                                    <a class="nav-link dropdown-toggle" href="#" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Home</a>
+                                    <ul class="dropdown-menu" style="--cz-dropdown-spacer: .75rem">
+                                        <li class="hover-effect-opacity px-2 mx-n2">
+                                            <a class="dropdown-item d-block mb-0"
+                                                href="{{ route('second', ['home', 'electronics']) }}">
+                                                <span class="fw-medium">Electronics Store</span>
+                                                <span class="d-block fs-xs text-body-secondary">Megamenu + Hero
+                                                    slider</span>
+                                                <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                                    style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                                    <img class="position-relative z-2 d-none-dark"
+                                                        src="/img/mega-menu/demo-preview/electronics-light.jpg"
+                                                        alt="Electronics Store">
+                                                    <img class="position-relative z-2 d-none d-block-dark"
+                                                        src="/img/mega-menu/demo-preview/electronics-dark.jpg"
+                                                        alt="Electronics Store">
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                        style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                        style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="hover-effect-opacity px-2 mx-n2">
+                                            <a class="dropdown-item d-block mb-0"
+                                                href="{{ route('second', ['home', 'fashion-v1']) }}">
+                                                <span class="fw-medium">Fashion Store v.1</span>
+                                                <span class="d-block fs-xs text-body-secondary">Hero promo slider</span>
+                                                <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                                    style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                                    <img class="position-relative z-2 d-none-dark"
+                                                        src="/img/mega-menu/demo-preview/fashion-1-light.jpg"
+                                                        alt="Fashion Store v.1">
+                                                    <img class="position-relative z-2 d-none d-block-dark"
+                                                        src="/img/mega-menu/demo-preview/fashion-1-dark.jpg"
+                                                        alt="Fashion Store v.1">
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                        style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                        style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="hover-effect-opacity px-2 mx-n2">
+                                            <a class="dropdown-item d-block mb-0"
+                                                href="{{ route('second', ['home', 'fashion-v2']) }}">
+                                                <span class="fw-medium">Fashion Store v.2</span>
+                                                <span class="d-block fs-xs text-body-secondary">Hero banner with
+                                                    hotspots</span>
+                                                <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                                    style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                                    <img class="position-relative z-2 d-none-dark"
+                                                        src="/img/mega-menu/demo-preview/fashion-2-light.jpg"
+                                                        alt="Fashion Store v.2">
+                                                    <img class="position-relative z-2 d-none d-block-dark"
+                                                        src="/img/mega-menu/demo-preview/fashion-2-dark.jpg"
+                                                        alt="Fashion Store v.2">
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                        style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                        style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="hover-effect-opacity px-2 mx-n2">
+                                            <a class="dropdown-item d-block mb-0"
+                                                href="{{ route('second', ['home', 'furniture']) }}
+                                                <span class="fw-medium">Furniture
+                                                Store</span>
+                                                <span class="d-block fs-xs text-body-secondary">Fancy product
+                                                    carousel</span>
+                                                <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                                    style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                                    <img class="position-relative z-2 d-none-dark"
+                                                        src="/img/mega-menu/demo-preview/furniture-light.jpg"
+                                                        alt="Furniture Store">
+                                                    <img class="position-relative z-2 d-none d-block-dark"
+                                                        src="/img/mega-menu/demo-preview/furniture-dark.jpg"
+                                                        alt="Furniture Store">
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                        style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                        style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="hover-effect-opacity px-2 mx-n2">
+                                            <a class="dropdown-item d-block mb-0"
+                                                href="{{ route('second', ['home', 'grocery']) }}
+                                                <span class="fw-medium">Grocery
+                                                Store</span>
+                                                <span class="d-block fs-xs text-body-secondary">Hero slider + Category
+                                                    cards</span>
+                                                <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                                    style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                                    <img class="position-relative z-2 d-none-dark"
+                                                        src="/img/mega-menu/demo-preview/grocery-light.jpg"
+                                                        alt="Grocery Store">
+                                                    <img class="position-relative z-2 d-none d-block-dark"
+                                                        src="/img/mega-menu/demo-preview/grocery-dark.jpg"
+                                                        alt="Grocery Store">
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                        style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                        style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="hover-effect-opacity px-2 mx-n2">
+                                            <a class="dropdown-item d-block mb-0"
+                                                href="{{ route('second', ['home', 'marketplace']) }}
+                                                <span class="fw-medium">Marketplace</span>
+                                                <span class="d-block fs-xs text-body-secondary">Multi-vendor, digital
+                                                    goods</span>
+                                                <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                                    style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                                    <img class="position-relative z-2 d-none-dark"
+                                                        src="/img/mega-menu/demo-preview/marketplace-light.jpg"
+                                                        alt="Marketplace">
+                                                    <img class="position-relative z-2 d-none d-block-dark"
+                                                        src="/img/mega-menu/demo-preview/marketplace-dark.jpg"
+                                                        alt="Marketplace">
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                        style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                        style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="hover-effect-opacity px-2 mx-n2">
+                                            <a class="dropdown-item d-block mb-0"
+                                                href="{{ route('second', ['home', 'single-store']) }}">
+                                                <span class="fw-medium">Single Product Store</span>
+                                                <span class="d-block fs-xs text-body-secondary">Single product / mono
+                                                    brand</span>
+                                                <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                                    style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                                    <img class="position-relative z-2 d-none-dark"
+                                                        src="/img/mega-menu/demo-preview/single-store-light.jpg"
+                                                        alt="Single Product Store">
+                                                    <img class="position-relative z-2 d-none d-block-dark"
+                                                        src="/img/mega-menu/demo-preview/single-store-dark.jpg"
+                                                        alt="Single Product Store">
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                        style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                        style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                                </div>
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </li>
+                                <li class="nav-item dropdown position-static pb-lg-2 me-lg-n1 me-xl-0">
+                                    <a class="nav-link dropdown-toggle" href="#" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Shop</a>
+                                    <div class="dropdown-menu p-4" style="--cz-dropdown-spacer: .75rem">
+                                        <div class="d-flex flex-column flex-lg-row gap-4">
+                                            <div style="min-width: 190px">
+                                                <div class="h6 mb-2">Electronics Store</div>
+                                                <ul class="nav flex-column gap-2 mt-0">
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'categories-electronics']) }}">Categories
+                                                            Page</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'catalog-electronics']) }}">Catalog
+                                                            with Side
+                                                            Filters</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'product-general-electronics']) }}">Product
+                                                            General
+                                                            Info</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'product-details-electronics']) }}">Product
+                                                            Details</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'product-reviews-electronics']) }}">Product
+                                                            Reviews</a>
+                                                    </li>
+                                                </ul>
+                                                <div class="h6 pt-4 mb-2">Fashion Store</div>
+                                                <ul class="nav flex-column gap-2 mt-0">
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'catalog-fashion']) }}">Catalog
+                                                            with Side Filters</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'product-fashion']) }}">Product
+                                                            Page</a>
+                                                    </li>
+                                                </ul>
+                                                <div class="h6 pt-4 mb-2">Furniture Store</div>
+                                                <ul class="nav flex-column gap-2 mt-0">
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'catalog-furniture']) }}">Catalog
+                                                            with Top
+                                                            Filters</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'product-furniture']) }}">Product
+                                                            Page</a>
+                                                    </li>
+                                                </ul>
+                                            </div>
+                                            <div style="min-width: 190px">
+                                                <div class="h6 mb-2">Grocery Store</div>
+                                                <ul class="nav flex-column gap-2 mt-0">
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'catalog-grocery']) }}">Catalog
+                                                            with Side Filters</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'product-grocery']) }}">Product
+                                                            Page</a>
+                                                    </li>
+                                                </ul>
+                                                <div class="h6 pt-4 mb-2">Marketplace</div>
+                                                <ul class="nav flex-column gap-2 mt-0">
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'catalog-marketplace']) }}">Catalog
+                                                            with Top
+                                                            Filters</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'product-marketplace']) }}">Digital
+                                                            Product Page</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'marketplace']) }}">Cart
+                                                            / Checkout</a>
+                                                    </li>
+                                                </ul>
+                                            </div>
+                                            <div style="min-width: 190px">
+                                                <div class="h6 mb-2">Checkout v.1</div>
+                                                <ul class="nav flex-column gap-2 mt-0">
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'v1-cart']) }}">Shopping
+                                                            Cart</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'v1-delivery-1']) }}">Delivery
+                                                            Info (Step 1)</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'v1-delivery-2']) }}">Delivery
+                                                            Info (Step 2)</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'v1-shipping']) }}">Shipping
+                                                            Address</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'v1-payment']) }}">Payment</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'v1-thankyou']) }}">Thank
+                                                            You Page</a>
+                                                    </li>
+                                                </ul>
+                                                <div class="h6 pt-4 mb-2">Checkout v.2</div>
+                                                <ul class="nav flex-column gap-2 mt-0">
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'v2-cart']) }}">Shopping
+                                                            Cart</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'v2-delivery']) }}">Delivery
+                                                            Info</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'v2-pickup']) }}">Pickup
+                                                            from Store</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'v2-thankyou']) }}">Thank
+                                                            You Page</a>
+                                                    </li>
+                                                </ul>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </li>
+                                <li class="nav-item dropdown pb-lg-2 me-lg-n1 me-xl-0">
+                                    <a class="nav-link dropdown-toggle" href="#" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover" data-bs-auto-close="outside"
+                                        aria-expanded="false">Account</a>
+                                    <ul class="dropdown-menu" style="--cz-dropdown-spacer: .75rem">
+                                        <li class="dropend">
+                                            <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                                aria-expanded="false">Auth Pages</a>
+                                            <ul class="dropdown-menu">
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'signin']) }}">Sign In</a>
+                                                </li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'signup']) }}">Sign Up</a>
+                                                </li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'password-recovery']) }}">Password
+                                                        Recovery</a></li>
+                                            </ul>
+                                        </li>
+                                        <li class="dropend">
+                                            <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                                aria-expanded="false">Shop User</a>
+                                            <ul class="dropdown-menu">
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'orders']) }}">Orders
+                                                        History</a></li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'wishlist']) }}">Wishlist</a>
+                                                </li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'payment']) }}">Payment
+                                                        Methods</a></li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'reviews']) }}">My
+                                                        Reviews</a>
+                                                </li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'info']) }}">Personal
+                                                        Info</a>
+                                                </li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'addresses']) }}">Addresses</a>
+                                                </li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'notifications']) }}">Notifications</a>
+                                                </li>
+                                            </ul>
+                                        </li>
+                                        <li class="dropend">
+                                            <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                                aria-expanded="false">Marketplace User</a>
+                                            <ul class="dropdown-menu">
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'marketplace-dashboard']) }}">Dashboard</a>
+                                                </li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'marketplace-products']) }}">Products</a>
+                                                </li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'marketplace-sales']) }}">Sales</a>
+                                                </li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'marketplace-payouts']) }}">Payouts</a>
+                                                </li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'marketplace-purchases']) }}">Purchases</a>
+                                                </li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'marketplace-favorites']) }}">Favorites</a>
+                                                </li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'marketplace-settings']) }}">Settings</a>
+                                                </li>
+                                            </ul>
+                                        </li>
+                                    </ul>
+                                </li>
+                                <li class="nav-item dropdown pb-lg-2 me-lg-n1 me-xl-0">
+                                    <a class="nav-link dropdown-toggle active" aria-current="page" href="#"
+                                        role="button" data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                        data-bs-auto-close="outside" aria-expanded="false">Pages</a>
+                                    <ul class="dropdown-menu" style="--cz-dropdown-spacer: .75rem">
+                                        <li class="dropend">
+                                            <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                                aria-expanded="false">About</a>
+                                            <ul class="dropdown-menu">
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['about', 'v1']) }}">About v.1</a></li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['about', 'v2']) }}">About v.2</a></li>
+                                            </ul>
+                                        </li>
+                                        <li class="dropend">
+                                            <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                                aria-expanded="false">Blog</a>
+                                            <ul class="dropdown-menu">
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['blog', 'grid-v1']) }}">Grid View
+                                                        v.1</a>
+                                                </li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['blog', 'grid-v2']) }}">Grid View
+                                                        v.2</a>
+                                                </li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['blog', 'list']) }}">List View</a>
+                                                </li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['blog', 'single-v1']) }}">Single Post
+                                                        v.1</a></li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['blog', 'single-v2']) }}">Single Post
+                                                        v.2</a></li>
+                                            </ul>
+                                        </li>
+                                        <li class="dropend">
+                                            <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                                aria-expanded="false">Contact</a>
+                                            <ul class="dropdown-menu">
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['contact', 'v1']) }}">Contact v.1</a>
+                                                </li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['contact', 'v2']) }}">Contact v.2</a>
+                                                </li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['contact', 'v3']) }}">Contact v.3</a>
+                                                </li>
+                                            </ul>
+                                        </li>
+                                        <li class="dropend">
+                                            <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                                aria-expanded="false">Help Center</a>
+                                            <ul class="dropdown-menu">
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['help', 'topics-v1']) }}">Help Topics
+                                                        v.1</a></li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['help', 'topics-v2']) }}">Help Topics
+                                                        v.2</a></li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['help', 'single-article-v1']) }}">Help
+                                                        Single Article v.1</a></li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['help', 'single-article-v2']) }}">Help
+                                                        Single Article v.2</a></li>
+                                            </ul>
+                                        </li>
+                                        <li class="dropend">
+                                            <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                                aria-expanded="false">404 Error</a>
+                                            <ul class="dropdown-menu">
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['404', 'electronics']) }}">404
+                                                        Electronics</a></li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['404', 'fashion']) }}">404 Fashion</a>
+                                                </li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['404', 'furniture']) }}">404
+                                                        Furniture</a>
+                                                </li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['404', 'grocery']) }}">404 Grocery</a>
+                                                </li>
+                                            </ul>
+                                        </li>
+                                        <li><a class="dropdown-item"
+                                                href="{{ route('any', 'terms-and-conditions') }}">Terms &amp;
+                                                Conditions</a></li>
+                                    </ul>
+                                </li>
+                            </ul>
+
+                            <!-- Search toggle visible on screens > 991px wide (lg breakpoint) -->
+                            <button type="button"
+                                class="btn btn-outline-secondary justify-content-start w-100 px-3 mb-lg-2 ms-3 d-none d-lg-inline-flex"
+                                style="max-width: 240px" data-bs-toggle="offcanvas" data-bs-target="#searchBox"
+                                aria-controls="searchBox">
+                                <i class="ci-search fs-base ms-n1 me-2"></i>
+                                <span class="text-body-tertiary fw-normal">Search</span>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Account and Wishlist buttons visible on screens < 768px wide (md breakpoint) -->
+                <div class="offcanvas-header border-top px-0 py-3 mt-3 d-md-none">
+                    <div class="nav nav-justified w-100">
+                        <a class="nav-link border-end" href="{{ route('second', ['account', 'signin']) }}">
+                            <i class="ci-user fs-lg opacity-60 me-2"></i>
+                            Account
+                        </a>
+                        <a class="nav-link" href="#!">
+                            <i class="ci-heart fs-lg opacity-60 me-2"></i>
+                            Wishlist
+                        </a>
+                    </div>
+                </div>
+            </nav>
+        </div>
+    </header>
+
+    <!-- Page content -->
+    <main class="content-wrapper">
+
+
+        <!-- Page title -->
+        <section class="position-relative bg-body-tertiary py-4">
+            <img src="/img/contact/title-bg.png"
+                class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rtl-flip" alt="Background image">
+            <div class="container position-relative z-2 py-4 py-md-5 my-lg-3 my-xl-4 my-xxl-5">
+                <div class="row pt-lg-2 pb-2 pb-sm-3 pb-lg-4">
+                    <div class="col-9 col-md-8 col-lg-6">
+                        <h1 class="display-4 mb-lg-4">Contact us</h1>
+                        <p class="mb-0">Feel free to contact us and we will be happy to help you!</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Contact details -->
+        <section class="container pt-5 mt-2 mt-sm-3 mt-lg-4 mt-xl-5 mb-n3">
+            <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 g-4 pt-lg-2 pt-xl-0">
+
+                <!-- Location -->
+                <div class="col">
+                    <div class="d-flex align-items-center">
+                        <i class="ci-map-pin fs-lg text-dark-emphasis"></i>
+                        <h3 class="h6 ps-2 ms-1 mb-0">Store location</h3>
+                    </div>
+                    <hr class="text-dark-emphasis opacity-50 my-3 my-md-4">
+                    <ul class="list-unstyled">
+                        <li>New York 11741, USA</li>
+                        <li>396 Lillian Bolavandy, Holbrook</li>
+                    </ul>
+                </div>
+
+                <!-- Phones -->
+                <div class="col">
+                    <div class="d-flex align-items-center">
+                        <i class="ci-phone-outgoing fs-lg text-dark-emphasis"></i>
+                        <h3 class="h6 ps-2 ms-1 mb-0">Call us directly</h3>
+                    </div>
+                    <hr class="text-dark-emphasis opacity-50 my-3 my-md-4">
+                    <ul class="list-unstyled">
+                        <li>Customers: 1 50 537 53 082</li>
+                        <li>Franchise: 1 50 537 53 000</li>
+                    </ul>
+                </div>
+
+                <!-- Emails -->
+                <div class="col">
+                    <div class="d-flex align-items-center">
+                        <i class="ci-mail fs-lg text-dark-emphasis"></i>
+                        <h3 class="h6 ps-2 ms-1 mb-0">Send a message</h3>
+                    </div>
+                    <hr class="text-dark-emphasis opacity-50 my-3 my-md-4">
+                    <ul class="list-unstyled">
+                        <li>Customers: help@cartzilla.com</li>
+                        <li>Franchise: franchise@catzilla.com</li>
+                    </ul>
+                </div>
+
+                <!-- Working hours -->
+                <div class="col">
+                    <div class="d-flex align-items-center">
+                        <i class="ci-clock fs-lg text-dark-emphasis"></i>
+                        <h3 class="h6 ps-2 ms-1 mb-0">Working hours</h3>
+                    </div>
+                    <hr class="text-dark-emphasis opacity-50 my-3 my-md-4">
+                    <ul class="list-unstyled">
+                        <li>Mon - Fri 8:00 - 18:00</li>
+                        <li>Sut - Sun 10:00 - 16:00</li>
+                    </ul>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Support / Help center -->
+        <section class="container py-5 my-2 my-sm-3 my-lg-4 my-xl-5">
+            <div class="d-sm-flex align-items-center justify-content-between py-xxl-3">
+                <div class="mb-4 mb-sm-0 me-sm-4">
+                    <h2 class="h3">Looking for support?</h2>
+                    <p class="mb-0">We might already have what you're looking for. See our FAQs or head to our dedicated
+                        Help Center.</p>
+                </div>
+                <a class="btn btn-lg btn-outline-dark" href="#!">Help center</a>
+            </div>
+        </section>
+
+
+        <!-- Map -->
+        <section class="position-relative bg-body-tertiary">
+            <a class="position-absolute top-50 start-50 translate-middle z-2 mt-lg-n4"
+                href="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d30908.594922615324!2d-73.07331970206108!3d40.788157341303005!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89e8483b8bffed93%3A0x53467ceb834b7397!2s396%20Lillian%20Blvd%2C%20Holbrook%2C%20NY%2011741%2C%20USA!5e0!3m2!1sen!2s!4v1706086459668!5m2!1sen!2"
+                style="width: 50px" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="hover"
+                data-bs-content="Click to view the map" data-glightbox="width: 100vw; height: 100vh;"
+                data-gallery="map" aria-label="Toggle map">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42.5 54.6">
+                    <path
+                        d="M42.5 19.2C42.5 8.1 33.2-.7 22 0 12.4.7 4.7 8.5 4.2 18c-.2 2.7.3 5.3 1.1 7.7h0s3.4 10.4 17.4 25c.4.4 1 .4 1.4 0 13.6-13.3 17.4-25 17.4-25h0c.6-2 1-4.2 1-6.5z"
+                        fill="#ffffff" />
+                    <g fill="#222934">
+                        <path
+                            d="M20.4 31.8c-4.5 0-8.1-3.6-8.1-8.1s3.6-8.1 8.1-8.1 8.1 3.6 8.1 8.1-3.7 8.1-8.1 8.1zm0-14.2a6.06 6.06 0 0 0-6.1 6.1 6.06 6.06 0 0 0 6.1 6.1c3.3 0 6.1-2.7 6.1-6.1s-2.8-6.1-6.1-6.1z" />
+                        <circle cx="20.4" cy="23.7" r="3" />
+                        <path
+                            d="M20.4 54.5c-.6 0-1.1-.2-1.4-.6C5 39.3 1.5 29 1.4 28.5a21.92 21.92 0 0 1-1.2-8c.6-10.1 8.6-18.3 18.7-19C24.6 1.1 30 3 34.1 6.9c4.1 3.8 6.4 9.2 6.4 14.8 0 2.4-.4 4.7-1.2 6.9-.1.5-4 12-17.6 25.3-.3.4-.8.6-1.3.6zm-17-26.2c.8 2 4.9 11.6 17 24.2 13.2-13 17-24.5 17.1-24.6.7-2 1.1-4.1 1.1-6.3 0-5-2.1-9.9-5.8-13.3-3.7-3.5-8.6-5.2-13.7-4.8-9.1.6-16.4 8-16.9 17.1-.1 2.5.2 5 1.1 7.3l.1.4z" />
+                    </g>
+                </svg>
+            </a>
+            <img src="/img/contact/map.jpg" class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover"
+                alt="Map">
+            <div class="d-none d-xxl-block" style="height: 600px"></div>
+            <div class="d-none d-xl-block d-xxl-none" style="height: 500px"></div>
+            <div class="d-none d-lg-block d-xl-none" style="height: 420px"></div>
+            <div class="d-none d-md-block d-lg-none" style="height: 350px"></div>
+            <div class="d-md-none" style="height: 300px"></div>
+            <span class="position-absolute top-0 start-0 z-1 w-100 h-100 bg-body opacity-25"></span>
+        </section>
+
+
+        <!-- FAQ accordion -->
+        <section class="container pt-5 mt-2 mt-sm-3 mt-lg-4 mt-xl-5">
+            <h2 class="text-center pt-xxl-3 pb-lg-2 pb-xl-3">Popular questions</h2>
+            <div class="row justify-content-center">
+                <div class="col-md-10 col-lg-9 col-xl-8">
+
+                    <!-- Accordion -->
+                    <div class="accordion accordion-alt-icon" id="faq">
+
+                        <!-- Question -->
+                        <div class="accordion-item">
+                            <h3 class="accordion-header" id="faqHeading-1">
+                                <button type="button" class="accordion-button hover-effect-underline collapsed"
+                                    data-bs-toggle="collapse" data-bs-target="#faqCollapse-1" aria-expanded="false"
+                                    aria-controls="faqCollapse-1">
+                                    <span class="me-2">How long will delivery take?</span>
+                                </button>
+                            </h3>
+                            <div class="accordion-collapse collapse" id="faqCollapse-1" aria-labelledby="faqHeading-1"
+                                data-bs-parent="#faq">
+                                <div class="accordion-body">Delivery times vary based on your location and the chosen
+                                    shipping method. Generally, our standard delivery takes up to 5 days, while our Express
+                                    Delivery ensures your order reaches you within 1 day. Please note that these times may
+                                    be subject to occasional variations due to unforeseen circumstances, but we do our best
+                                    to meet these estimates.</div>
+                            </div>
+                        </div>
+
+                        <!-- Question -->
+                        <div class="accordion-item">
+                            <h3 class="accordion-header" id="faqHeading-2">
+                                <button type="button" class="accordion-button hover-effect-underline collapsed"
+                                    data-bs-toggle="collapse" data-bs-target="#faqCollapse-2" aria-expanded="false"
+                                    aria-controls="faqCollapse-2">
+                                    <span class="me-2">What payment methods do you accept?</span>
+                                </button>
+                            </h3>
+                            <div class="accordion-collapse collapse" id="faqCollapse-2" aria-labelledby="faqHeading-2"
+                                data-bs-parent="#faq">
+                                <div class="accordion-body">We offer a range of secure payment options to provide you with
+                                    flexibility and convenience. Accepted methods include major credit/debit cards, PayPal,
+                                    and other secure online payment gateways. You can find the complete list of accepted
+                                    payment methods during the checkout process.</div>
+                            </div>
+                        </div>
+
+                        <!-- Question -->
+                        <div class="accordion-item">
+                            <h3 class="accordion-header" id="faqHeading-3">
+                                <button type="button" class="accordion-button hover-effect-underline collapsed"
+                                    data-bs-toggle="collapse" data-bs-target="#faqCollapse-3" aria-expanded="false"
+                                    aria-controls="faqCollapse-3">
+                                    <span class="me-2">Do you ship internationally?</span>
+                                </button>
+                            </h3>
+                            <div class="accordion-collapse collapse" id="faqCollapse-3" aria-labelledby="faqHeading-3"
+                                data-bs-parent="#faq">
+                                <div class="accordion-body">Yes, we proudly offer international shipping to cater to our
+                                    global customer base. Shipping costs and delivery times will be automatically calculated
+                                    at the checkout based on your selected destination. Please note that any customs duties
+                                    or taxes applicable in your country are the responsibility of the customer.</div>
+                            </div>
+                        </div>
+
+                        <!-- Question -->
+                        <div class="accordion-item">
+                            <h3 class="accordion-header" id="faqHeading-4">
+                                <button type="button" class="accordion-button hover-effect-underline collapsed"
+                                    data-bs-toggle="collapse" data-bs-target="#faqCollapse-4" aria-expanded="false"
+                                    aria-controls="faqCollapse-4">
+                                    <span class="me-2">Do I need an account to place an order?</span>
+                                </button>
+                            </h3>
+                            <div class="accordion-collapse collapse" id="faqCollapse-4" aria-labelledby="faqHeading-4"
+                                data-bs-parent="#faq">
+                                <div class="accordion-body">While you can place an order as a guest, creating an account
+                                    comes with added benefits. By having an account, you can easily track your orders,
+                                    manage your preferences, and enjoy a quicker checkout process for future purchases. It
+                                    also allows us to provide you with personalized recommendations and exclusive offers.
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Question -->
+                        <div class="accordion-item">
+                            <h3 class="accordion-header" id="faqHeading-5">
+                                <button type="button" class="accordion-button hover-effect-underline collapsed"
+                                    data-bs-toggle="collapse" data-bs-target="#faqCollapse-5" aria-expanded="false"
+                                    aria-controls="faqCollapse-5">
+                                    <span class="me-2">How can I track my order?</span>
+                                </button>
+                            </h3>
+                            <div class="accordion-collapse collapse" id="faqCollapse-5" aria-labelledby="faqHeading-5"
+                                data-bs-parent="#faq">
+                                <div class="accordion-body">Once your order is dispatched, you will receive a confirmation
+                                    email containing a unique tracking number. You can use this tracking number on our
+                                    website to monitor the real-time status of your shipment. Additionally, logging into
+                                    your account will grant you access to a comprehensive order history, including tracking
+                                    information.</div>
+                            </div>
+                        </div>
+
+                        <!-- Question -->
+                        <div class="accordion-item">
+                            <h3 class="accordion-header" id="faqHeading-6">
+                                <button type="button" class="accordion-button hover-effect-underline collapsed"
+                                    data-bs-toggle="collapse" data-bs-target="#faqCollapse-6" aria-expanded="false"
+                                    aria-controls="faqCollapse-6">
+                                    <span class="me-2">What are the product refund conditions?</span>
+                                </button>
+                            </h3>
+                            <div class="accordion-collapse collapse" id="faqCollapse-6" aria-labelledby="faqHeading-6"
+                                data-bs-parent="#faq">
+                                <div class="accordion-body">Our refund policy is designed to ensure customer satisfaction.
+                                    Details can be found in our [refund policy page](insert link). In essence, we accept
+                                    returns within [insert number] days of receiving the product, provided it is in its
+                                    original condition with all tags and packaging intact. Refunds are processed promptly
+                                    once the returned item is inspected and approved.</div>
+                            </div>
+                        </div>
+
+                        <!-- Question -->
+                        <div class="accordion-item">
+                            <h3 class="accordion-header" id="faqHeading-7">
+                                <button type="button" class="accordion-button hover-effect-underline collapsed"
+                                    data-bs-toggle="collapse" data-bs-target="#faqCollapse-7" aria-expanded="false"
+                                    aria-controls="faqCollapse-7">
+                                    <span class="me-2">Do I need to create an account to shop with you?</span>
+                                </button>
+                            </h3>
+                            <div class="accordion-collapse collapse" id="faqCollapse-7" aria-labelledby="faqHeading-7"
+                                data-bs-parent="#faq">
+                                <div class="accordion-body">While guest checkout is available for your convenience,
+                                    creating an account enhances your overall shopping experience. With an account, you can
+                                    easily track your order status, save multiple shipping addresses, and enjoy a
+                                    streamlined checkout process. Moreover, account holders receive early access to
+                                    promotions and exclusive offers. Signing up is quick and hassle-free!</div>
+                            </div>
+                        </div>
+
+                        <!-- Question -->
+                        <div class="accordion-item">
+                            <h3 class="accordion-header" id="faqHeading-8">
+                                <button type="button" class="accordion-button hover-effect-underline collapsed"
+                                    data-bs-toggle="collapse" data-bs-target="#faqCollapse-8" aria-expanded="false"
+                                    aria-controls="faqCollapse-8">
+                                    <span class="me-2">Is there a minimum order value for free shipping?</span>
+                                </button>
+                            </h3>
+                            <div class="accordion-collapse collapse" id="faqCollapse-8" aria-labelledby="faqHeading-8"
+                                data-bs-parent="#faq">
+                                <div class="accordion-body">Yes, we offer free shipping on orders exceeding $250. Orders
+                                    below this threshold are subject to standard shipping fees, which will be displayed
+                                    during the checkout process.</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Instagram feed -->
+        <section class="container pt-5 mt-2 mt-sm-3 mt-lg-4 mt-xl-5">
+            <div class="text-center pt-xxl-3 pb-2 pb-md-3">
+                <h2 class="pb-2 mb-1">
+                    <span class="animate-underline">
+                        <a class="animate-target text-dark-emphasis text-decoration-none" href="#!">#cartzilla</a>
+                    </span>
+                </h2>
+                <p>Find more inspiration on our Instagram</p>
+            </div>
+            <div class="overflow-x-auto pb-3 mb-n3" data-simplebar>
+                <div class="d-flex gap-2 gap-md-3 gap-lg-4" style="min-width: 700px">
+                    <a class="hover-effect-scale hover-effect-opacity position-relative w-100 overflow-hidden"
+                        href="#!">
+                        <span
+                            class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
+                        <i
+                            class="ci-instagram hover-effect-target fs-4 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
+                        <div class="hover-effect-target ratio ratio-1x1">
+                            <img src="/img/instagram/01.jpg" alt="Instagram image">
+                        </div>
+                    </a>
+                    <a class="hover-effect-scale hover-effect-opacity position-relative w-100 overflow-hidden"
+                        href="#!">
+                        <span
+                            class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
+                        <i
+                            class="ci-instagram hover-effect-target fs-4 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
+                        <div class="hover-effect-target ratio ratio-1x1">
+                            <img src="/img/instagram/02.jpg" alt="Instagram image">
+                        </div>
+                    </a>
+                    <a class="hover-effect-scale hover-effect-opacity position-relative w-100 overflow-hidden"
+                        href="#!">
+                        <span
+                            class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
+                        <i
+                            class="ci-instagram hover-effect-target fs-4 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
+                        <div class="hover-effect-target ratio ratio-1x1">
+                            <img src="/img/instagram/03.jpg" alt="Instagram image">
+                        </div>
+                    </a>
+                    <a class="hover-effect-scale hover-effect-opacity position-relative w-100 overflow-hidden"
+                        href="#!">
+                        <span
+                            class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
+                        <i
+                            class="ci-instagram hover-effect-target fs-4 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
+                        <div class="hover-effect-target ratio ratio-1x1">
+                            <img src="/img/instagram/04.jpg" alt="Instagram image">
+                        </div>
+                    </a>
+                    <a class="hover-effect-scale hover-effect-opacity position-relative w-100 overflow-hidden"
+                        href="#!">
+                        <span
+                            class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
+                        <i
+                            class="ci-instagram hover-effect-target fs-4 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
+                        <div class="hover-effect-target ratio ratio-1x1">
+                            <img src="/img/instagram/05.jpg" alt="Instagram image">
+                        </div>
+                    </a>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    @include('layouts.partials.footer3')
+@endsection
+
+@section('scripts')
+@endsection
diff --git a/resources/views/contact/v2.blade.php b/resources/views/contact/v2.blade.php
new file mode 100644
index 0000000..58d2ae0
--- /dev/null
+++ b/resources/views/contact/v2.blade.php
@@ -0,0 +1,410 @@
+@extends('layouts.landing', ['title' => 'Contact v.2'])
+
+@section('content')
+    <!-- Shopping cart offcanvas (Empty state) -->
+    <div class="offcanvas offcanvas-end pb-sm-2 px-sm-2" id="shoppingCart" tabindex="-1" aria-labelledby="shoppingCartLabel"
+        style="width: 500px">
+        <div class="offcanvas-header py-3 pt-lg-4">
+            <h4 class="offcanvas-title" id="shoppingCartLabel">Shopping cart</h4>
+            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+        </div>
+        <div class="offcanvas-body text-center">
+            <svg class="d-block mx-auto mb-4" xmlns="http://www.w3.org/2000/svg" width="60" viewBox="0 0 29.5 30">
+                <path class="text-body-tertiary"
+                    d="M17.8 4c.4 0 .8-.3.8-.8v-2c0-.4-.3-.8-.8-.8-.4 0-.8.3-.8.8v2c0 .4.3.8.8.8zm3.2.6c.4.2.8 0 1-.4l.4-.9c.2-.4 0-.8-.4-1s-.8 0-1 .4l-.4.9c-.2.4 0 .9.4 1zm-7.5-.4c.2.4.6.6 1 .4s.6-.6.4-1l-.4-.9c-.2-.4-.6-.6-1-.4s-.6.6-.4 1l.4.9z"
+                    fill="currentColor" />
+                <path class="text-body-emphasis"
+                    d="M10.7 24.5c-1.5 0-2.8 1.2-2.8 2.8S9.2 30 10.7 30s2.8-1.2 2.8-2.8-1.2-2.7-2.8-2.7zm0 4c-.7 0-1.2-.6-1.2-1.2s.6-1.2 1.2-1.2 1.2.6 1.2 1.2-.5 1.2-1.2 1.2zm11.1-4c-1.5 0-2.8 1.2-2.8 2.8a2.73 2.73 0 0 0 2.8 2.8 2.73 2.73 0 0 0 2.8-2.8c0-1.6-1.3-2.8-2.8-2.8zm0 4c-.7 0-1.2-.6-1.2-1.2s.6-1.2 1.2-1.2 1.2.6 1.2 1.2-.6 1.2-1.2 1.2zM8.7 18h16c.3 0 .6-.2.7-.5l4-10c.2-.5-.2-1-.7-1H9.3c-.4 0-.8.3-.8.8s.4.7.8.7h18.3l-3.4 8.5H9.3L5.5 1C5.4.7 5.1.5 4.8.5h-4c-.5 0-.8.3-.8.7s.3.8.8.8h3.4l3.7 14.6a3.24 3.24 0 0 0-2.3 3.1C5.5 21.5 7 23 8.7 23h16c.4 0 .8-.3.8-.8s-.3-.8-.8-.8h-16a1.79 1.79 0 0 1-1.8-1.8c0-1 .9-1.6 1.8-1.6z"
+                    fill="currentColor" />
+            </svg>
+            <h6 class="mb-2">Your shopping cart is currently empty!</h6>
+            <p class="fs-sm mb-4">Explore our wide range of products and add items to your cart to proceed with your
+                purchase.</p>
+            <a class="btn btn-dark rounded-pill" href="{{ route('second', ['shop', 'catalog-furniture']) }}">Continue shopping</a>
+        </div>
+    </div>
+
+    @include('layouts.partials/navbar2')
+
+    <!-- Page content -->
+    <main class="content-wrapper">
+
+        <!-- Contact forms -->
+        <section class="bg-body-tertiary pb-1 pb-sm-3 pb-md-4 pb-lg-5" style="margin-top: -110px; padding-top: 110px">
+            <div class="container py-5 mb-xxl-3">
+
+                <!-- Page title -->
+                <h1 class="text-center pb-2 pb-sm-3 mt-lg-3 mt-xl-4">Contact our specialists</h1>
+
+                <!-- Nav pills -->
+                <ul class="nav nav-pills justify-content-center pb-2 pb-sm-3 mb-3" role="tablist">
+                    <li class="nav-item" role="presentation">
+                        <button type="button" class="nav-link active" id="customers-tab" data-bs-toggle="pill"
+                            data-bs-target="#customers" role="tab" aria-controls="customers" aria-selected="true">
+                            <i class="ci-shopping-bag fs-base me-2 ms-n1"></i>
+                            For Customers
+                        </button>
+                    </li>
+                    <li class="nav-item" role="presentation">
+                        <button class="nav-link" id="retailers-tab" data-bs-toggle="pill" data-bs-target="#retailers"
+                            type="button" role="tab" aria-controls="retailers" aria-selected="false">
+                            <i class="ci-box fs-base me-2 ms-n1"></i>
+                            For Retailers
+                        </button>
+                    </li>
+                </ul>
+
+                <!-- Forms wrapper -->
+                <div class="row justify-content-center">
+                    <div class="col-md-11 col-lg-9 col-xl-8">
+                        <div class="tab-content bg-body rounded-5 py-3 py-sm-4 px-4 px-sm-5">
+                            <p class="text-center py-3 mx-auto" style="max-width: 450px">Fill out the form below and we
+                                will reply within 24 hours. You may also directly reach out to us at <a
+                                    class="text-decoration-none" href="mailto:info@cartzilla.com">info@cartzilla.com</a>
+                            </p>
+
+                            <!-- Customers form -->
+                            <div class="tab-pane fade show active" id="customers" role="tabpanel"
+                                aria-labelledby="customers-tab">
+                                <form class="needs-validation" novalidate>
+                                    <div class="row g-4">
+                                        <div class="col-md-6 position-relative">
+                                            <label for="fn" class="form-label">First name *</label>
+                                            <input type="text" class="form-control form-control-lg rounded-pill"
+                                                id="fn" required>
+                                            <div class="invalid-tooltip bg-transparent z-0 py-0 ps-3">Enter your first
+                                                name!</div>
+                                        </div>
+                                        <div class="col-md-6 position-relative">
+                                            <label for="ln" class="form-label">Last name *</label>
+                                            <input type="text" class="form-control form-control-lg rounded-pill"
+                                                id="ln" required>
+                                            <div class="invalid-tooltip bg-transparent z-0 py-0 ps-3">Enter your last name!
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6 position-relative">
+                                            <label for="email" class="form-label">Email *</label>
+                                            <input type="email" class="form-control form-control-lg rounded-pill"
+                                                id="email" required>
+                                            <div class="invalid-tooltip bg-transparent z-0 py-0 ps-3">Enter your email
+                                                address!</div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <label for="phone" class="form-label">Phone number</label>
+                                            <input type="tel" class="form-control form-control-lg rounded-pill"
+                                                id="phone"
+                                                data-input-format='{"numericOnly": true, "delimiters": ["+1 ", " ", " "], "blocks": [0, 3, 3, 2]}'
+                                                placeholder="+1 ___ ___ __">
+                                        </div>
+                                        <div class="col-12 position-relative">
+                                            <label class="form-label">Subject *</label>
+                                            <select class="form-select form-select-lg rounded-pill"
+                                                data-select='{
+                          "classNames": {
+                            "containerInner": ["form-select", "form-select-lg", "rounded-pill"]
+                          }
+                        }'
+                                                required>
+                                                <option value="">Select subject</option>
+                                                <option value="General inquiry">General inquiry</option>
+                                                <option value="Order status">Order status</option>
+                                                <option value="Product information">Product information</option>
+                                                <option value="Technical support">Technical support</option>
+                                                <option value="Website feedback">Website feedback</option>
+                                                <option value="Account assistance">Account assistance</option>
+                                                <option value="Security concerns">Security concerns</option>
+                                            </select>
+                                            <div class="invalid-tooltip bg-transparent z-0 py-0 ps-3">Select the subject of
+                                                your message!</div>
+                                        </div>
+                                        <div class="col-12 position-relative">
+                                            <label for="message" class="form-label">Message *</label>
+                                            <textarea class="form-control form-control-lg rounded-6" id="message" rows="5" required></textarea>
+                                            <div class="invalid-tooltip bg-transparent z-0 py-0 ps-3">Write your message!
+                                            </div>
+                                        </div>
+                                        <div class="col-12 text-center pt-2 pb-3">
+                                            <button type="submit" class="btn btn-lg btn-dark rounded-pill">Send
+                                                message</button>
+                                        </div>
+                                    </div>
+                                </form>
+                            </div>
+
+                            <!-- Retailers form -->
+                            <div class="tab-pane fade" id="retailers" role="tabpanel" aria-labelledby="retailers-tab">
+                                <form class="needs-validation" novalidate>
+                                    <div class="row g-4">
+                                        <div class="col-md-6 position-relative">
+                                            <label for="company" class="form-label">Company name *</label>
+                                            <input type="text" class="form-control form-control-lg rounded-pill"
+                                                id="company" required>
+                                            <div class="invalid-tooltip bg-transparent py-0 ps-3">Enter your company name!
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6 position-relative">
+                                            <label for="person" class="form-label">Contact person *</label>
+                                            <input type="text" class="form-control form-control-lg rounded-pill"
+                                                id="person" required>
+                                            <div class="invalid-tooltip bg-transparent py-0 ps-3">Enter contact person
+                                                name!</div>
+                                        </div>
+                                        <div class="col-md-6 position-relative">
+                                            <label for="email-r" class="form-label">Email *</label>
+                                            <input type="email" class="form-control form-control-lg rounded-pill"
+                                                id="email-r" required>
+                                            <div class="invalid-tooltip bg-transparent py-0 ps-3">Enter company email
+                                                address!</div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <label for="phone-r" class="form-label">Phone number</label>
+                                            <input type="tel" class="form-control form-control-lg rounded-pill"
+                                                id="phone-r"
+                                                data-input-format='{"numericOnly": true, "delimiters": ["+1 ", " ", " "], "blocks": [0, 3, 3, 2]}'
+                                                placeholder="+1 ___ ___ __">
+                                        </div>
+                                        <div class="col-md-6 position-relative">
+                                            <label for="website" class="form-label">Website</label>
+                                            <input type="text" class="form-control form-control-lg rounded-pill"
+                                                id="website">
+                                        </div>
+                                        <div class="col-md-6 position-relative">
+                                            <label class="form-label">Subject *</label>
+                                            <select class="form-select form-select-lg rounded-pill"
+                                                data-select='{
+                          "classNames": {
+                            "containerInner": ["form-select", "form-select-lg", "rounded-pill"]
+                          }
+                        }'
+                                                required>
+                                                <option value="">Select subject</option>
+                                                <option value="General inquiry">General inquiry</option>
+                                                <option value="Product information">Product information</option>
+                                                <option value="Technical support">Technical support</option>
+                                                <option value="Account assistance">Affiliation program</option>
+                                                <option value="Security concerns">Marketing and promotions</option>
+                                                <option value="Security concerns">Press and media inquiries</option>
+                                            </select>
+                                            <div class="invalid-tooltip bg-transparent z-0 py-0 ps-3">Select the subject of
+                                                your message!</div>
+                                        </div>
+                                        <div class="col-12 position-relative">
+                                            <label for="message-r" class="form-label">Message *</label>
+                                            <textarea class="form-control form-control-lg rounded-6" id="message-r" rows="5" required></textarea>
+                                            <div class="invalid-tooltip bg-transparent py-0 ps-3">Write your message!</div>
+                                        </div>
+                                        <div class="col-12 text-center pt-2 pb-3">
+                                            <button type="submit" class="btn btn-lg btn-dark rounded-pill">Send
+                                                message</button>
+                                        </div>
+                                    </div>
+                                </form>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Contact info -->
+        <section class="container pt-5 mt-xxl-3">
+            <div class="row row-cols-1 row-cols-sm-3 gy-4 gy-sm-0 pt-1 pt-sm-2 pt-md-3 pt-lg-4 pt-xl-5">
+                <div class="col text-center mb-2 mb-sm-0">
+                    <i
+                        class="ci-phone-outgoing bg-dark text-white fs-4 rounded-circle p-3 mb-3 d-inline-flex d-none-dark"></i>
+                    <i
+                        class="ci-phone-outgoing bg-body-secondary text-white fs-4 rounded-circle p-3 mb-3 d-none d-inline-flex-dark"></i>
+                    <h3 class="text-body fs-sm fw-normal mb-2">Call us directly</h3>
+                    <div class="nav animate-underline justify-content-center">
+                        <a class="nav-link animate-target text-dark-emphasis fs-base p-0"
+                            href="tel:+15053753082">+1&nbsp;50&nbsp;537&nbsp;53&nbsp;082</a>
+                    </div>
+                </div>
+                <div class="col text-center mb-2 mb-sm-0">
+                    <i class="ci-mail bg-dark text-white fs-4 rounded-circle p-3 mb-3 d-inline-flex d-none-dark"></i>
+                    <i
+                        class="ci-mail bg-body-secondary text-white fs-4 rounded-circle p-3 mb-3 d-none d-inline-flex-dark"></i>
+                    <h3 class="text-body fs-sm fw-normal mb-2">Send us a message</h3>
+                    <div class="nav animate-underline justify-content-center">
+                        <a class="nav-link animate-target text-dark-emphasis fs-base p-0"
+                            href="mailto:info@cartzilla.com">info@cartzilla.com</a>
+                    </div>
+                </div>
+                <div class="col text-center">
+                    <i
+                        class="ci-help-circle bg-dark text-white fs-4 rounded-circle p-3 mb-3 d-inline-flex d-none-dark"></i>
+                    <i
+                        class="ci-help-circle bg-body-secondary text-white fs-4 rounded-circle p-3 mb-3 d-none d-inline-flex-dark"></i>
+                    <h3 class="text-body fs-sm fw-normal mb-2">Looking for support?</h3>
+                    <div class="nav animate-underline justify-content-center">
+                        <a class="nav-link animate-target text-dark-emphasis fs-base p-0" href="#!">Help Center</a>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Store locations + Map in lightbox -->
+        <section class="container py-1 py-sm-2 py-md-3 py-lg-4 py-xl-5 my-xxl-3">
+            <div class="row row-cols-1 row-cols-md-2 g-0 overflow-hidden rounded-5 my-5">
+
+                <!-- Map -->
+                <div class="col position-relative">
+                    <div class="ratio ratio-4x3"></div>
+                    <img src="/img/blog/grid/v2/video01.jpg"
+                        class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover" alt="Image">
+                </div>
+
+                <!-- Contact details -->
+                <div class="col bg-body-tertiary order-md-1 py-5 px-4 px-xl-5">
+                    <div class="py-md-4 py-lg-5 px-md-4 px-lg-5">
+                        <h1 class="pb-2 pb-sm-3 pb-lg-0 mb-md-4 mb-lg-5">Our stores</h1>
+                        <ul class="list-unstyled pb-sm-2 mb-0">
+                            <li class="lh-lg">New York 11741, USA<br>396 Lillian Bolavandy, Holbrook</li>
+                            <li class="nav">
+                                <a class="nav-link animate-underline fw-semibold px-0"
+                                    href="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d30908.594922615324!2d-73.07331970206108!3d40.788157341303005!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89e8483b8bffed93%3A0x53467ceb834b7397!2s396%20Lillian%20Blvd%2C%20Holbrook%2C%20NY%2011741%2C%20USA!5e0!3m2!1sen!2s!4v1706086459668!5m2!1sen!2s"
+                                    data-glightbox="width: 100vw; height: 100vh;" data-gallery="map1">
+                                    <span class="animate-target">Show on map</span>
+                                    <i class="ci-chevron-right fs-lg ms-2" style="margin-top: .1875rem"></i>
+                                </a>
+                            </li>
+                        </ul>
+                        <hr>
+                        <ul class="list-unstyled pb-sm-2 mb-0">
+                            <li class="lh-lg pt-2">California 32806, USA<br>514 S. Magnolia St., San Francisco</li>
+                            <li class="nav">
+                                <a class="nav-link animate-underline fw-semibold px-0"
+                                    href="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3152.541405538252!2d-122.43545002315028!3d37.80078581065977!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808580da2de92663%3A0x343ead1106a153fa!2sMagnolia%20St%2C%20San%20Francisco%2C%20CA%2094123%2C%20USA!5e0!3m2!1sen!2s!4v1706785415174!5m2!1sen!2s"
+                                    data-glightbox="width: 100vw; height: 100vh;" data-gallery="map2">
+                                    <span class="animate-target">Show on map</span>
+                                    <i class="ci-chevron-right fs-lg ms-2" style="margin-top: .1875rem"></i>
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <footer class="footer bg-dark pb-4 py-lg-5" data-bs-theme="dark">
+        <div class="container pt-5 pt-lg-4 mt-sm-2 mt-md-3">
+            <div class="row pb-5">
+
+                <!-- Subscription + Social account links -->
+                <div class="col-md col-xl-8 order-md-2">
+                    <div class="text-center px-sm-4 mx-auto" style="max-width: 568px">
+                        <h3 class="pb-1 mb-2">Stay in touch with us</h3>
+                        <p class="fs-sm text-body pb-2 pb-sm-3">Receive the latest updates about our products &amp;
+                            promotions</p>
+                        <form class="needs-validation position-relative" novalidate>
+                            <input type="email" class="form-control form-control-lg rounded-pill text-start"
+                                placeholder="You email" aria-label="Your email address" required>
+                            <div class="invalid-tooltip bg-transparent p-0">Please enter you email address!</div>
+                            <button type="submit"
+                                class="btn btn-icon fs-xl btn-dark rounded-circle position-absolute top-0 end-0 mt-1 me-1"
+                                aria-label="Submit your email address" data-bs-theme="light">
+                                <i class="ci-arrow-up-right"></i>
+                            </button>
+                        </form>
+                        <div class="d-flex justify-content-center gap-2 pt-4 pt-md-5 mt-1 mt-md-0">
+                            <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
+                                data-bs-toggle="tooltip"
+                                data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-white p-0"></div></div>'
+                                title="YouTube" aria-label="Follow us on YouTube">
+                                <i class="ci-youtube"></i>
+                            </a>
+                            <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
+                                data-bs-toggle="tooltip"
+                                data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-white p-0"></div></div>'
+                                title="Facebook" aria-label="Follow us on Facebook">
+                                <i class="ci-facebook"></i>
+                            </a>
+                            <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
+                                data-bs-toggle="tooltip"
+                                data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-white p-0"></div></div>'
+                                title="Instagram" aria-label="Follow us on Instagram">
+                                <i class="ci-instagram"></i>
+                            </a>
+                            <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
+                                data-bs-toggle="tooltip"
+                                data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-white p-0"></div></div>'
+                                title="Telegram" aria-label="Follow us on Telegram">
+                                <i class="ci-telegram"></i>
+                            </a>
+                            <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
+                                data-bs-toggle="tooltip"
+                                data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-white p-0"></div></div>'
+                                title="Pinterest" aria-label="Follow us on Pinterest">
+                                <i class="ci-pinterest"></i>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Category links -->
+                <div class="col-md-auto col-xl-2 text-center order-md-1 pt-4 pt-md-0">
+                    <ul class="nav d-inline-flex flex-md-column justify-content-center align-items-center gap-md-2">
+                        <li class="animate-underline my-1 mx-2 m-md-0">
+                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Bedroom</a>
+                        </li>
+                        <li class="animate-underline my-1 mx-2 m-md-0">
+                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Living room</a>
+                        </li>
+                        <li class="animate-underline my-1 mx-2 m-md-0">
+                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Bathroom</a>
+                        </li>
+                        <li class="animate-underline my-1 mx-2 m-md-0">
+                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Decoration</a>
+                        </li>
+                        <li class="animate-underline my-1 mx-2 m-md-0">
+                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Kitchen</a>
+                        </li>
+                        <li class="animate-underline my-1 mx-2 m-md-0">
+                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Sale</a>
+                        </li>
+                    </ul>
+                </div>
+
+                <!-- Customer links -->
+                <div class="col-md-auto col-xl-2 text-center order-md-3 pt-3 pt-md-0">
+                    <ul class="nav d-inline-flex flex-md-column justify-content-center align-items-center gap-md-2">
+                        <li class="animate-underline my-1 mx-2 m-md-0">
+                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Shipping
+                                options</a>
+                        </li>
+                        <li class="animate-underline my-1 mx-2 m-md-0">
+                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Tracking a
+                                package</a>
+                        </li>
+                        <li class="animate-underline my-1 mx-2 m-md-0">
+                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Help center</a>
+                        </li>
+                        <li class="animate-underline my-1 mx-2 m-md-0">
+                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Contact us</a>
+                        </li>
+                        <li class="animate-underline my-1 mx-2 m-md-0">
+                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Product
+                                returns</a>
+                        </li>
+                        <li class="animate-underline my-1 mx-2 m-md-0">
+                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Locations</a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+
+            <!-- Copyright -->
+            <p class="fs-xs text-body text-center pt-lg-4 mt-n2 mt-md-0 mb-0">
+                &copy; All rights reserved. Made by <span class="animate-underline"><a
+                        class="animate-target text-white text-decoration-none" href="https://coderthemes.com/"
+                        target="_blank" rel="noreferrer">Coderthemes</a></span>
+            </p>
+        </div>
+    </footer>
+@endsection
+
+@section('scripts')
+@endsection
diff --git a/resources/views/contact/v3.blade.php b/resources/views/contact/v3.blade.php
new file mode 100644
index 0000000..20e9d0d
--- /dev/null
+++ b/resources/views/contact/v3.blade.php
@@ -0,0 +1,290 @@
+@extends('layouts.landing', ['title' => 'Contact v.3'])
+
+@section('content')
+    <!-- Shopping cart offcanvas (Empty state) -->
+    <div class="offcanvas offcanvas-end pb-sm-2 px-sm-2" id="shoppingCart" tabindex="-1" aria-labelledby="shoppingCartLabel"
+        style="width: 500px">
+        <div class="offcanvas-header py-3 pt-lg-4">
+            <h4 class="offcanvas-title" id="shoppingCartLabel">Shopping cart</h4>
+            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+        </div>
+        <div class="offcanvas-body text-center">
+            <svg class="d-block mx-auto mb-4" xmlns="http://www.w3.org/2000/svg" width="60" viewBox="0 0 29.5 30">
+                <path class="text-body-tertiary"
+                    d="M17.8 4c.4 0 .8-.3.8-.8v-2c0-.4-.3-.8-.8-.8-.4 0-.8.3-.8.8v2c0 .4.3.8.8.8zm3.2.6c.4.2.8 0 1-.4l.4-.9c.2-.4 0-.8-.4-1s-.8 0-1 .4l-.4.9c-.2.4 0 .9.4 1zm-7.5-.4c.2.4.6.6 1 .4s.6-.6.4-1l-.4-.9c-.2-.4-.6-.6-1-.4s-.6.6-.4 1l.4.9z"
+                    fill="currentColor" />
+                <path class="text-body-emphasis"
+                    d="M10.7 24.5c-1.5 0-2.8 1.2-2.8 2.8S9.2 30 10.7 30s2.8-1.2 2.8-2.8-1.2-2.7-2.8-2.7zm0 4c-.7 0-1.2-.6-1.2-1.2s.6-1.2 1.2-1.2 1.2.6 1.2 1.2-.5 1.2-1.2 1.2zm11.1-4c-1.5 0-2.8 1.2-2.8 2.8a2.73 2.73 0 0 0 2.8 2.8 2.73 2.73 0 0 0 2.8-2.8c0-1.6-1.3-2.8-2.8-2.8zm0 4c-.7 0-1.2-.6-1.2-1.2s.6-1.2 1.2-1.2 1.2.6 1.2 1.2-.6 1.2-1.2 1.2zM8.7 18h16c.3 0 .6-.2.7-.5l4-10c.2-.5-.2-1-.7-1H9.3c-.4 0-.8.3-.8.8s.4.7.8.7h18.3l-3.4 8.5H9.3L5.5 1C5.4.7 5.1.5 4.8.5h-4c-.5 0-.8.3-.8.7s.3.8.8.8h3.4l3.7 14.6a3.24 3.24 0 0 0-2.3 3.1C5.5 21.5 7 23 8.7 23h16c.4 0 .8-.3.8-.8s-.3-.8-.8-.8h-16a1.79 1.79 0 0 1-1.8-1.8c0-1 .9-1.6 1.8-1.6z"
+                    fill="currentColor" />
+            </svg>
+            <h6 class="mb-2">Your shopping cart is currently empty!</h6>
+            <p class="fs-sm mb-4">Explore our wide range of products and add items to your cart to proceed with your
+                purchase.</p>
+            <a class="btn btn-dark rounded-pill" href="{{ route('second', ['shop', 'catalog-furniture']) }}">Continue shopping</a>
+        </div>
+    </div>
+
+    @include('layouts.partials/navbar2')
+
+    <main class="content-wrapper">
+        <div class="container py-5 mb-2 mb-sm-3 mb-md-4 mb-lg-5 mt-lg-3 mt-xl-4">
+
+            <!-- Page title -->
+            <h1 class="text-center">Contact us</h1>
+            <p class="text-center pb-2 pb-sm-3">Fill out the form below and we will reply within 24 hours</p>
+
+
+            <!-- Form + Image -->
+            <section class="row row-cols-1 row-cols-md-2 g-0 overflow-hidden rounded-5">
+
+                <!-- Contact form -->
+                <div class="col bg-body-tertiary py-5 px-4 px-xl-5">
+                    <form class="needs-validation py-md-2 px-md-1 px-lg-3 mx-lg-3" novalidate>
+                        <div class="position-relative mb-4">
+                            <label for="name" class="form-label">Name *</label>
+                            <input type="text" class="form-control form-control-lg rounded-pill" id="name"
+                                required>
+                            <div class="invalid-tooltip bg-transparent z-0 py-0 ps-3">Enter your name!</div>
+                        </div>
+                        <div class="position-relative mb-4">
+                            <label for="email" class="form-label">Email *</label>
+                            <input type="email" class="form-control form-control-lg rounded-pill" id="email"
+                                required>
+                            <div class="invalid-tooltip bg-transparent z-0 py-0 ps-3">Enter your email address!</div>
+                        </div>
+                        <div class="position-relative mb-4">
+                            <label class="form-label">Subject *</label>
+                            <select class="form-select form-select-lg rounded-pill"
+                                data-select='{
+                  "classNames": {
+                    "containerInner": ["form-select", "form-select-lg", "rounded-pill"]
+                  }
+                }'
+                                required>
+                                <option value="">Select subject</option>
+                                <option value="General inquiry">General inquiry</option>
+                                <option value="Order status">Order status</option>
+                                <option value="Product information">Product information</option>
+                                <option value="Technical support">Technical support</option>
+                                <option value="Website feedback">Website feedback</option>
+                                <option value="Account assistance">Account assistance</option>
+                                <option value="Security concerns">Security concerns</option>
+                            </select>
+                            <div class="invalid-tooltip bg-transparent z-0 py-0 ps-3">Select the subject of your message!
+                            </div>
+                        </div>
+                        <div class="position-relative mb-4">
+                            <label for="message" class="form-label">Message *</label>
+                            <textarea class="form-control form-control-lg rounded-6" id="message" rows="5" required></textarea>
+                            <div class="invalid-tooltip bg-transparent z-0 py-0 ps-3">Write your message!</div>
+                        </div>
+                        <div class="pt-2">
+                            <button type="submit" class="btn btn-lg btn-dark rounded-pill">Send message</button>
+                        </div>
+                    </form>
+                </div>
+
+                <!-- Image -->
+                <div class="col position-relative">
+                    <img src="/img/contact/form-image.jpg"
+                        class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover" alt="Image">
+                </div>
+            </section>
+
+
+            <!-- Contacts -->
+            <section class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 g-4 pt-5 pb-3 pb-md-4 pb-lg-3 mt-lg-0 mt-xxl-4">
+                <div class="col text-center pt-1 pt-sm-2 pt-md-3">
+                    <div
+                        class="position-relative d-inline-block bg-body-tertiary text-dark-emphasis fs-xl rounded-circle p-4 mb-3">
+                        <i class="ci-phone-outgoing position-absolute top-50 start-50 translate-middle"></i>
+                    </div>
+                    <h3 class="h6">Call us directly</h3>
+                    <ul class="list-unstyled m-0">
+                        <li class="nav animate-underline justify-content-center">
+                            Customers:
+                            <a class="nav-link animate-target fs-base ms-1 p-0"
+                                href="tel:+15053753082">+1&nbsp;50&nbsp;537&nbsp;53&nbsp;082</a>
+                        </li>
+                        <li class="nav animate-underline justify-content-center">
+                            Franchise:
+                            <a class="nav-link animate-target fs-base ms-1 p-0"
+                                href="tel:+15053753000">+1&nbsp;50&nbsp;537&nbsp;53&nbsp;000</a>
+                        </li>
+                    </ul>
+                </div>
+                <div class="col text-center pt-1 pt-sm-2 pt-md-3">
+                    <div
+                        class="position-relative d-inline-block bg-body-tertiary text-dark-emphasis fs-xl rounded-circle p-4 mb-3">
+                        <i class="ci-mail position-absolute top-50 start-50 translate-middle"></i>
+                    </div>
+                    <h3 class="h6">Send a message</h3>
+                    <ul class="list-unstyled m-0">
+                        <li class="nav animate-underline justify-content-center">
+                            Customers:
+                            <a class="nav-link animate-target fs-base ms-1 p-0"
+                                href="mailto:info@cartzilla.com">info@cartzilla.com</a>
+                        </li>
+                        <li class="nav animate-underline justify-content-center">
+                            Franchise:
+                            <a class="nav-link animate-target fs-base ms-1 p-0"
+                                href="mailto:franchise@cartzilla.com">franchise@cartzilla.com</a>
+                        </li>
+                    </ul>
+                </div>
+                <div class="col text-center pt-1 pt-sm-2 pt-md-3">
+                    <div
+                        class="position-relative d-inline-block bg-body-tertiary text-dark-emphasis fs-xl rounded-circle p-4 mb-3">
+                        <i class="ci-map-pin position-absolute top-50 start-50 translate-middle"></i>
+                    </div>
+                    <h3 class="h6">Store location</h3>
+                    <ul class="list-unstyled m-0">
+                        <li>New York 11741, USA</li>
+                        <li>396 Lillian Bolavandy, Holbrook</li>
+                    </ul>
+                </div>
+                <div class="col text-center pt-1 pt-sm-2 pt-md-3">
+                    <div
+                        class="position-relative d-inline-block bg-body-tertiary text-dark-emphasis fs-xl rounded-circle p-4 mb-3">
+                        <i class="ci-clock position-absolute top-50 start-50 translate-middle"></i>
+                    </div>
+                    <h3 class="h6">Working hours</h3>
+                    <ul class="list-unstyled m-0">
+                        <li>Mon - Fri 8:00 - 18:00</li>
+                        <li>Sut - Sun 10:00 - 16:00</li>
+                    </ul>
+                </div>
+            </section>
+
+            <hr class="my-lg-5">
+
+
+            <!-- Help center CTA -->
+            <section class="text-center pb-xxl-3 pt-4 pt-lg-3">
+                <h2 class="pt-md-2 pt-lg-0">Looking for support?</h2>
+                <p class="pb-2 pb-sm-3">We might already have what you're looking for. See our FAQs or head to our
+                    dedicated Help Center.</p>
+                <a class="btn btn-lg btn-outline-dark rounded-pill" href="#!">Help Center</a>
+            </section>
+        </div>
+    </main>
+
+    <footer class="footer bg-dark pb-4 py-lg-5" data-bs-theme="dark">
+        <div class="container pt-5 pt-lg-4 mt-sm-2 mt-md-3">
+            <div class="row pb-5">
+
+                <!-- Subscription + Social account links -->
+                <div class="col-md col-xl-8 order-md-2">
+                    <div class="text-center px-sm-4 mx-auto" style="max-width: 568px">
+                        <h3 class="pb-1 mb-2">Stay in touch with us</h3>
+                        <p class="fs-sm text-body pb-2 pb-sm-3">Receive the latest updates about our products &amp;
+                            promotions</p>
+                        <form class="needs-validation position-relative" novalidate>
+                            <input type="email" class="form-control form-control-lg rounded-pill text-start"
+                                placeholder="You email" aria-label="Your email address" required>
+                            <div class="invalid-tooltip bg-transparent p-0">Please enter you email address!</div>
+                            <button type="submit"
+                                class="btn btn-icon fs-xl btn-dark rounded-circle position-absolute top-0 end-0 mt-1 me-1"
+                                aria-label="Submit your email address" data-bs-theme="light">
+                                <i class="ci-arrow-up-right"></i>
+                            </button>
+                        </form>
+                        <div class="d-flex justify-content-center gap-2 pt-4 pt-md-5 mt-1 mt-md-0">
+                            <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
+                                data-bs-toggle="tooltip"
+                                data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-white p-0"></div></div>'
+                                title="YouTube" aria-label="Follow us on YouTube">
+                                <i class="ci-youtube"></i>
+                            </a>
+                            <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
+                                data-bs-toggle="tooltip"
+                                data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-white p-0"></div></div>'
+                                title="Facebook" aria-label="Follow us on Facebook">
+                                <i class="ci-facebook"></i>
+                            </a>
+                            <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
+                                data-bs-toggle="tooltip"
+                                data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-white p-0"></div></div>'
+                                title="Instagram" aria-label="Follow us on Instagram">
+                                <i class="ci-instagram"></i>
+                            </a>
+                            <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
+                                data-bs-toggle="tooltip"
+                                data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-white p-0"></div></div>'
+                                title="Telegram" aria-label="Follow us on Telegram">
+                                <i class="ci-telegram"></i>
+                            </a>
+                            <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
+                                data-bs-toggle="tooltip"
+                                data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-white p-0"></div></div>'
+                                title="Pinterest" aria-label="Follow us on Pinterest">
+                                <i class="ci-pinterest"></i>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Category links -->
+                <div class="col-md-auto col-xl-2 text-center order-md-1 pt-4 pt-md-0">
+                    <ul class="nav d-inline-flex flex-md-column justify-content-center align-items-center gap-md-2">
+                        <li class="animate-underline my-1 mx-2 m-md-0">
+                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Bedroom</a>
+                        </li>
+                        <li class="animate-underline my-1 mx-2 m-md-0">
+                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Living room</a>
+                        </li>
+                        <li class="animate-underline my-1 mx-2 m-md-0">
+                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Bathroom</a>
+                        </li>
+                        <li class="animate-underline my-1 mx-2 m-md-0">
+                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Decoration</a>
+                        </li>
+                        <li class="animate-underline my-1 mx-2 m-md-0">
+                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Kitchen</a>
+                        </li>
+                        <li class="animate-underline my-1 mx-2 m-md-0">
+                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Sale</a>
+                        </li>
+                    </ul>
+                </div>
+
+                <!-- Customer links -->
+                <div class="col-md-auto col-xl-2 text-center order-md-3 pt-3 pt-md-0">
+                    <ul class="nav d-inline-flex flex-md-column justify-content-center align-items-center gap-md-2">
+                        <li class="animate-underline my-1 mx-2 m-md-0">
+                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Shipping
+                                options</a>
+                        </li>
+                        <li class="animate-underline my-1 mx-2 m-md-0">
+                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Tracking a
+                                package</a>
+                        </li>
+                        <li class="animate-underline my-1 mx-2 m-md-0">
+                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Help center</a>
+                        </li>
+                        <li class="animate-underline my-1 mx-2 m-md-0">
+                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Contact us</a>
+                        </li>
+                        <li class="animate-underline my-1 mx-2 m-md-0">
+                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Product
+                                returns</a>
+                        </li>
+                        <li class="animate-underline my-1 mx-2 m-md-0">
+                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Locations</a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+
+            <!-- Copyright -->
+            <p class="fs-xs text-body text-center pt-lg-4 mt-n2 mt-md-0 mb-0">
+                &copy; All rights reserved. Made by <span class="animate-underline"><a
+                        class="animate-target text-white text-decoration-none" href="https://coderthemes.com/"
+                        target="_blank" rel="noreferrer">Coderthemes</a></span>
+            </p>
+        </div>
+    </footer>
+@endsection
+
+@section('scripts')
+@endsection
diff --git a/resources/views/help/single-article-v1.blade.php b/resources/views/help/single-article-v1.blade.php
new file mode 100644
index 0000000..6f46cda
--- /dev/null
+++ b/resources/views/help/single-article-v1.blade.php
@@ -0,0 +1,223 @@
+@extends('layouts.landing', ['title' => 'Help Single Article v.1'])
+
+@section('content')
+    @include('layouts.partials/offcanvas')
+
+    @include('layouts.partials/navbar', ['wishlist' => true])
+
+    <main class="content-wrapper">
+
+        <!-- Hero -->
+        <section class="container pt-3 pt-sm-4">
+            <div class="position-relative px-4 px-sm-5 px-xl-0 py-5">
+                <span class="position-absolute top-0 start-0 w-100 h-100 rounded-5 d-none-dark rtl-flip"
+                    style="background: linear-gradient(-90deg, #accbee 0%, #e7f0fd 100%)"></span>
+                <span class="position-absolute top-0 start-0 w-100 h-100 rounded-5 d-none d-block-dark rtl-flip"
+                    style="background: linear-gradient(-90deg, #1b273a 0%, #1f2632 100%)"></span>
+                <div class="position-relative z-1">
+                    <h1 class="h2 text-center pt-md-2 pt-lg-3 pt-xl-4 mb-4">How can we help?</h1>
+                    <div class="position-relative mx-auto mb-4" style="max-width: 545px">
+                        <i class="ci-search position-absolute top-50 start-0 translate-middle-y text-body fs-lg ms-3"></i>
+                        <input type="search" class="form-control form-control-lg form-icon-start"
+                            placeholder="What do you need help with?" aria-label="Search field">
+                    </div>
+                    <div class="row justify-content-center g-4 pt-2 pt-sm-3 pb-md-2 pb-lg-3 pb-xl-4">
+                        <div class="col-6 col-md-3 col-xl-2 text-center">
+                            <div class="position-relative d-inline-block">
+                                <div class="position-relative d-inline-flex justify-content-center align-items-center text-body-emphasis"
+                                    style="width: 48px; height: 48px">
+                                    <span
+                                        class="position-absolute top-0 start-0 w-100 h-100 bg-white bg-opacity-50 rounded-circle d-none-dark"></span>
+                                    <span
+                                        class="position-absolute top-0 start-0 w-100 h-100 bg-white bg-opacity-10 rounded-circle d-none d-block-dark"></span>
+                                    <i class="ci-delivery position-relative z-1 fs-xl"></i>
+                                </div>
+                                <h3 class="text-dark fs-sm fw-medium pt-1 mt-2 mb-0">
+                                    <a class="hover-effect-underline stretched-link text-decoration-none"
+                                        href="#!">Track your order</a>
+                                </h3>
+                            </div>
+                        </div>
+                        <div class="col-6 col-md-3 col-xl-2 text-center">
+                            <div class="position-relative d-inline-block">
+                                <div class="position-relative d-inline-flex justify-content-center align-items-center text-body-emphasis"
+                                    style="width: 48px; height: 48px">
+                                    <span
+                                        class="position-absolute top-0 start-0 w-100 h-100 bg-white bg-opacity-50 rounded-circle d-none-dark"></span>
+                                    <span
+                                        class="position-absolute top-0 start-0 w-100 h-100 bg-white bg-opacity-10 rounded-circle d-none d-block-dark"></span>
+                                    <i class="ci-shopping-bag position-relative z-1 fs-xl"></i>
+                                </div>
+                                <h3 class="text-dark fs-sm fw-medium pt-1 mt-2 mb-0">
+                                    <a class="hover-effect-underline stretched-link text-decoration-none"
+                                        href="#!">Edit or cancel order</a>
+                                </h3>
+                            </div>
+                        </div>
+                        <div class="col-6 col-md-3 col-xl-2 text-center">
+                            <div class="position-relative d-inline-block">
+                                <div class="position-relative d-inline-flex justify-content-center align-items-center text-body-emphasis"
+                                    style="width: 48px; height: 48px">
+                                    <span
+                                        class="position-absolute top-0 start-0 w-100 h-100 bg-white bg-opacity-50 rounded-circle d-none-dark"></span>
+                                    <span
+                                        class="position-absolute top-0 start-0 w-100 h-100 bg-white bg-opacity-10 rounded-circle d-none d-block-dark"></span>
+                                    <i class="ci-refresh-cw position-relative z-1 fs-xl"></i>
+                                </div>
+                                <h3 class="text-dark fs-sm fw-medium pt-1 mt-2 mb-0">
+                                    <a class="hover-effect-underline stretched-link text-decoration-none"
+                                        href="#!">Returns &amp; refunds</a>
+                                </h3>
+                            </div>
+                        </div>
+                        <div class="col-6 col-md-3 col-xl-2 text-center">
+                            <div class="position-relative d-inline-block">
+                                <div class="position-relative d-inline-flex justify-content-center align-items-center text-body-emphasis"
+                                    style="width: 48px; height: 48px">
+                                    <span
+                                        class="position-absolute top-0 start-0 w-100 h-100 bg-white bg-opacity-50 rounded-circle d-none-dark"></span>
+                                    <span
+                                        class="position-absolute top-0 start-0 w-100 h-100 bg-white bg-opacity-10 rounded-circle d-none d-block-dark"></span>
+                                    <i class="ci-gift position-relative z-1 fs-xl"></i>
+                                </div>
+                                <h3 class="text-dark fs-sm fw-medium pt-1 mt-2 mb-0">
+                                    <a class="hover-effect-underline stretched-link text-decoration-none" href="#!">My
+                                        bonus account</a>
+                                </h3>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Page content -->
+        <section class="container pb-5 mb-1 mb-sm-2 mb-md-3 mb-lg-4 mb-xl-5">
+
+            <!-- Breadcrumb -->
+            <nav class="pt-3 my-3 my-md-4" aria-label="breadcrumb">
+                <ol class="breadcrumb">
+                    <li class="breadcrumb-item"><a href="{{ route('second', ['help', 'topics-v1']) }}">Help center</a></li>
+                    <li class="breadcrumb-item"><a href="#!">Returns &amp; refunds</a></li>
+                    <li class="breadcrumb-item active" aria-current="page">What is your returns policy?</li>
+                </ol>
+            </nav>
+
+            <div class="row">
+
+                <!-- Sticky sidebar with related articles -->
+                <aside class="col-lg-4 order-lg-2 pb-3 mb-3 mb-md-4" style="margin-top: -115px">
+                    <div class="sticky-md-top ps-lg-4 ms-xl-3" style="padding-top: 115px;">
+                        <h4 class="h5 mb-4 d-none d-lg-block">Articles in this section</h4>
+                        <div class="position-relative py-1 py-sm-2 px-3 px-sm-4 p-lg-0">
+                            <span class="position-absolute top-0 start-0 w-100 h-100 border rounded-4 d-lg-none"></span>
+                            <button type="button"
+                                class="btn btn-lg btn-outline-secondary position-relative z-1 w-100 justify-content-start border-0 px-0 d-lg-none"
+                                data-bs-toggle="collapse" data-bs-target="#articles" aria-expanded="false"
+                                aria-controls="articles">
+                                <i class="ci-menu fs-lg me-2"></i>
+                                Articles in this section
+                                <i class="ci-chevron-down fs-lg ms-auto"></i>
+                            </button>
+                            <div class="collapse position-relative z-1 d-lg-block" id="articles">
+                                <ul class="nav flex-column gap-3 pt-2 pb-3 pt-lg-0">
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0" href="#!">What is your
+                                            returns policy?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0" href="#!">I paid with
+                                            Afterpay, how do returns work?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0" href="#!">What happens
+                                            to my refund if I return 45 days?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0" href="#!">How do I
+                                            return something to you?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0" href="#!">Can I return
+                                            an exchange instead of a refund?</a>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </aside>
+
+
+                <!-- Article -->
+                <div class="col-lg-8 order-lg-1">
+                    <h2 class="pb-2 pb-sm-3 pb-lg-4">What is your returns policy?</h2>
+                    <p class="h6"><span class="text-body-secondary">Last Updated:</span> June 26, 2024</p>
+                    <p>At Cartzilla, we strive to ensure your complete satisfaction with every purchase. If, for any reason,
+                        you are not entirely pleased with your order, we've got you covered with our Returns Policy. You may
+                        return eligible items within 30 days of the delivery date.</p>
+                    <h3 class="h4 pt-3 pt-sm-4">1. Pack the goods</h3>
+                    <ul>
+                        <li>Check if your product is eligible for return.</li>
+                        <li>Put the new product in its original packaging without any signs of use. If the product consists
+                            of several parts, you must return the entire set. Make sure that nothing is lost and that you
+                            return the product in the complete set in which you received it.</li>
+                        <li>If you purchased a product with a gift, you must return the entire set (product and gift).
+                            Otherwise, the nominal value of the gift will be deducted from the refund amount.</li>
+                        <li>It is not necessary to send a cheque.</li>
+                    </ul>
+                    <h3 class="h4 pt-3 pt-sm-4">2. Where to bring the goods</h3>
+                    <p>You can return the goods to the service department or Cartzilla return point.</p>
+                    <ul class="pb-3 pb-sm-4">
+                        <li>Service departments at Cartzilla points of delivery. Here, we will immediately check the goods
+                            and, if everything is in order, agree on a return policy on the spot. You can bring any goods
+                            here. Simple goods, such as clothes and shoes. Complex goods: smartphones, washing machines,
+                            microwaves, power tools. The examination is carried out by a technical specialist. If long-term
+                            diagnostics are required, the goods will be sent to a service centre.</li>
+                        <li>Returns acceptance points at Cartzilla pick-up points. Here, our employee will conduct a visual
+                            inspection of your goods. The decision regarding the goods is made after the goods are delivered
+                            to the service department. The details will be agreed with you. The examination is carried out
+                            within 14 days.</li>
+                    </ul>
+                    <div class="ratio ratio-4x3 mb-3">
+                        <img src="/img/help/single.jpg" class="rounded-5" alt="Image">
+                    </div>
+                    <h3 class="h4 pt-3 pt-sm-4">3. How will I get a refund for the goods?</h3>
+                    <p>You can provide your bank card details for a refund when making a refund in your personal account on
+                        the website or in a paper return form. Please indicate the card number and full name of the bank
+                        card holder in English on the return form.</p>
+                    <p>Usually, the money is refunded in 3-5 days after the decision to refund is made.</p>
+                    <div class="py-2 py-sm-3 mt-n3">
+                        <hr>
+                    </div>
+                    <h4 class="h5 mb-4">Was this information helpful?</h4>
+                    <div class="d-flex gap-3 pb-3 mb-4">
+                        <button type="button" class="btn btn-outline-secondary">
+                            <i class="ci-thumbs-up fs-base me-1 ms-n1"></i>
+                            Yes
+                        </button>
+                        <button type="button" class="btn btn-outline-secondary">
+                            <i class="ci-thumbs-down fs-base me-1 ms-n1"></i>
+                            No
+                        </button>
+                    </div>
+
+                    <!-- Contact CTA -->
+                    <div class="border rounded-4 p-4">
+                        <div class="d-sm-flex align-items-center justify-content-between text-center text-sm-start p-md-3">
+                            <div class="me-sm-3 me-md-4">
+                                <h3 class="h4 pb-1 mb-2">Can't find the answer to a question?</h3>
+                                <p class="pb-2 pb-sm-0 mb-sm-0">Get in touch with our support team.</p>
+                            </div>
+                            <a class="btn btn-lg btn-primary" href="#!">Contact us</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    @include('layouts.partials/footer')
+@endsection
+
+@section('scripts')
+@endsection
diff --git a/resources/views/help/single-article-v2.blade.php b/resources/views/help/single-article-v2.blade.php
new file mode 100644
index 0000000..9640898
--- /dev/null
+++ b/resources/views/help/single-article-v2.blade.php
@@ -0,0 +1,166 @@
+@extends('layouts.landing', ['title' => 'Help Single Article v.2'])
+
+@section('content')
+    @include('layouts.partials/offcanvas')
+
+    @include('layouts.partials/navbar', ['wishlist' => true])
+
+    <main class="content-wrapper">
+
+        <!-- Hero -->
+        <section class="container pt-3 pt-sm-4">
+            <div class="position-relative">
+                <span class="position-absolute top-0 start-0 w-100 h-100 rounded-5 d-none-dark rtl-flip"
+                    style="background: linear-gradient(-90deg, #accbee 0%, #e7f0fd 100%)"></span>
+                <span class="position-absolute top-0 start-0 w-100 h-100 rounded-5 d-none d-block-dark rtl-flip"
+                    style="background: linear-gradient(-90deg, #1b273a 0%, #1f2632 100%)"></span>
+                <div class="row align-items-center position-relative z-1">
+                    <div class="col-lg-7 col-xl-5 offset-xl-1 py-5">
+                        <div class="px-4 px-sm-5 px-xl-0 pe-lg-4">
+                            <h1 class="text-center text-sm-start mb-4">How can we help?</h1>
+                            <form class="d-flex flex-column flex-sm-row gap-2">
+                                <input type="search" class="form-control form-control-lg"
+                                    placeholder="What do you need help with?" aria-label="Search field">
+                                <button type="submit" class="btn btn-lg btn-primary px-3">
+                                    <i class="ci-search fs-lg ms-n2 ms-sm-0"></i>
+                                    <span class="ms-2 d-sm-none">Search</span>
+                                </button>
+                            </form>
+                            <div class="nav gap-2 pt-3 pt-sm-4 mt-1 mt-sm-0">
+                                <span class="nav-link text-body-secondary pe-none p-0 me-1">Common topics:</span>
+                                <a class="nav-link text-body-emphasis text-decoration-underline p-0 me-1"
+                                    href="#!">payments</a>
+                                <a class="nav-link text-body-emphasis text-decoration-underline p-0 me-1"
+                                    href="#!">refunds</a>
+                                <a class="nav-link text-body-emphasis text-decoration-underline p-0 me-1"
+                                    href="#!">delivery</a>
+                                <a class="nav-link text-body-emphasis text-decoration-underline p-0 me-1"
+                                    href="#!">dashboard</a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-lg-5 offset-xl-1 d-none d-lg-block">
+                        <div class="ratio rtl-flip" style="--cz-aspect-ratio: calc(356 / 526 * 100%)">
+                            <img src="/img/help/hero-light.png" class="d-none-dark" alt="Image">
+                            <img src="/img/help/hero-dark.png" class="d-none d-block-dark" alt="Image">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Help topics -->
+        <section class="container py-5">
+            <div class="row g-0 pt-md-2 pt-xl-4">
+                <div class="col-md-4 col-lg-3 pb-2 pb-sm-3 pb-md-0 mb-4 mb-md-0">
+                    <h2 class="h5 border-bottom pb-3 pb-sm-4 mb-0">Help topics</h2>
+
+                    <!-- Nav in format of list group -->
+                    <nav class="list-group list-group-borderless pt-4 pe-md-4">
+                        <a class="list-group-item list-group-item-action d-flex align-items-center active"
+                            href="{{ route('second', ['help', 'topics-v2']) }}">
+                            <i class="ci-delivery fs-base opacity-75 me-2"></i>
+                            Delivery
+                        </a>
+                        <a class="list-group-item list-group-item-action d-flex align-items-center"
+                            href="{{ route('second', ['help', 'topics-v2']) }}">
+                            <i class="ci-refresh-cw fs-base opacity-75 me-2"></i>
+                            Returns &amp; refunds
+                        </a>
+                        <a class="list-group-item list-group-item-action d-flex align-items-center"
+                            href="{{ route('second', ['help', 'topics-v2']) }}">
+                            <i class="ci-credit-card fs-base opacity-75 me-2"></i>
+                            Payment options
+                        </a>
+                        <a class="list-group-item list-group-item-action d-flex align-items-center"
+                            href="{{ route('second', ['help', 'topics-v2']) }}">
+                            <i class="ci-shopping-bag fs-base opacity-75 me-2"></i>
+                            Order issues
+                        </a>
+                        <a class="list-group-item list-group-item-action d-flex align-items-center"
+                            href="{{ route('second', ['help', 'topics-v2']) }}">
+                            <i class="ci-archive fs-base opacity-75 me-2"></i>
+                            Products &amp; stock
+                        </a>
+                        <a class="list-group-item list-group-item-action d-flex align-items-center"
+                            href="{{ route('second', ['help', 'topics-v2']) }}">
+                            <i class="ci-settings fs-base opacity-75 me-2"></i>
+                            Managing account
+                        </a>
+                    </nav>
+                </div>
+
+                <!-- Article content -->
+                <div class="col-md-8 col-lg-9">
+                    <div class="d-flex align-items-start border-bottom ps-md-4 pb-3 pb-sm-4">
+                        <a class="btn btn-sm btn-outline-secondary border-0 p-0 pe-2" href="{{ route('second', ['help', 'topics-v2']) }}"
+                            aria-label="Back to main topic">
+                            <i class="ci-chevron-left fs-4"></i>
+                        </a>
+                        <h2 class="h5 d-flex min-w-0 mb-0">
+                            <span class="d-md-none">How does courier delivery work?</span>
+                            <span class="text-truncate d-none d-md-inline">How does courier delivery work?</span>
+                        </h2>
+                    </div>
+                    <div class="position-relative">
+                        <div class="position-absolute top-0 start-0 h-100 border-start d-none d-md-block"></div>
+                        <div class="row g-0">
+                            <div class="col-xl-11 col-xxl-10 pt-4 ps-md-4">
+                                <p class="fs-sm">To avail of the convenience of Cartzilla courier delivery, please note
+                                    that this service is currently available exclusively in specific cities and regions. To
+                                    check whether Cartzilla courier delivery is an option for your location, refer to the
+                                    information provided on the product page (don't forget to specify the settlement) or
+                                    find details in the delivery block when confirming your order on the website.</p>
+                                <p class="fs-sm">It's crucial to ensure that the recipient of the order is available to
+                                    answer the courier's call during the specified delivery time. In case of unsuccessful
+                                    communication or unavailability, the order will be returned to the warehouse. This step
+                                    is taken to maintain the efficiency of the delivery process and minimize any
+                                    inconvenience caused.</p>
+                                <p class="fs-sm">The cost of Cartzilla courier delivery varies based on factors such as
+                                    location, total weight, and dimensions of the order. Typically, the delivery fee falls
+                                    within the range of $5 to $15. It's important to note that the exact cost of delivery is
+                                    calculated at the time of placing your order. Therefore, it's advisable to exercise
+                                    caution and ensure that the delivery city is specified accurately to avoid any
+                                    discrepancies.</p>
+                                <p class="fs-sm">When opting for Cartzilla courier delivery, you have the flexibility to
+                                    choose between paying for your order in cash or using a payment card. However, please be
+                                    aware that payment by card upon receipt may have certain restrictions or conditions that
+                                    you should be mindful of. These details are typically outlined during the checkout
+                                    process, providing you with transparency and clarity regarding your payment options for
+                                    a seamless delivery experience.</p>
+                                <div class="pt-4">
+                                    <h4 class="fs-sm pb-1">Was this information helpful?</h4>
+                                    <div class="d-flex gap-3">
+                                        <button type="button" class="btn btn-outline-secondary">
+                                            <i class="ci-thumbs-up fs-base me-1 ms-n1"></i>
+                                            Yes
+                                        </button>
+                                        <button type="button" class="btn btn-outline-secondary">
+                                            <i class="ci-thumbs-down fs-base me-1 ms-n1"></i>
+                                            No
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Contact CTA -->
+            <div class="pt-4 pb-1 pb-sm-3 pb-md-4 pb-xl-5 mt-2 mt-sm-3">
+                <h3 class="fs-sm pb-sm-1">Can't find an answer to your question?</h3>
+                <a class="btn btn-lg btn-primary" href="#!">Contact us</a>
+            </div>
+        </section>
+
+
+    </main>
+
+    @include('layouts.partials/footer')
+    
+@endsection
+
+@section('scripts')
+@endsection
diff --git a/resources/views/help/topics-v1.blade.php b/resources/views/help/topics-v1.blade.php
new file mode 100644
index 0000000..b0cd829
--- /dev/null
+++ b/resources/views/help/topics-v1.blade.php
@@ -0,0 +1,697 @@
+@extends('layouts.landing', ['title' => 'Help Topics v.1'])
+
+@section('content')
+    @include('layouts.partials/offcanvas')
+
+    @include('layouts.partials/navbar', ['wishlist' => true])
+
+    <main class="content-wrapper">
+
+        <!-- Hero -->
+        <section class="container pt-3 pt-sm-4">
+            <div class="position-relative px-4 px-sm-5 px-xl-0 py-5">
+                <span class="position-absolute top-0 start-0 w-100 h-100 rounded-5 d-none-dark rtl-flip"
+                    style="background: linear-gradient(-90deg, #accbee 0%, #e7f0fd 100%)"></span>
+                <span class="position-absolute top-0 start-0 w-100 h-100 rounded-5 d-none d-block-dark rtl-flip"
+                    style="background: linear-gradient(-90deg, #1b273a 0%, #1f2632 100%)"></span>
+                <div class="position-relative z-1">
+                    <h1 class="h2 text-center pt-md-2 pt-lg-3 pt-xl-4 mb-4">How can we help?</h1>
+                    <div class="position-relative mx-auto mb-4" style="max-width: 545px">
+                        <i class="ci-search position-absolute top-50 start-0 translate-middle-y text-body fs-lg ms-3"></i>
+                        <input type="search" class="form-control form-control-lg form-icon-start"
+                            placeholder="What do you need help with?" aria-label="Search field">
+                    </div>
+                    <div class="row justify-content-center g-4 pt-2 pt-sm-3 pb-md-2 pb-lg-3 pb-xl-4">
+                        <div class="col-6 col-md-3 col-xl-2 text-center">
+                            <div class="position-relative d-inline-block">
+                                <div class="position-relative d-inline-flex justify-content-center align-items-center text-body-emphasis"
+                                    style="width: 48px; height: 48px">
+                                    <span
+                                        class="position-absolute top-0 start-0 w-100 h-100 bg-white bg-opacity-50 rounded-circle d-none-dark"></span>
+                                    <span
+                                        class="position-absolute top-0 start-0 w-100 h-100 bg-white bg-opacity-10 rounded-circle d-none d-block-dark"></span>
+                                    <i class="ci-delivery position-relative z-1 fs-xl"></i>
+                                </div>
+                                <h3 class="text-dark fs-sm fw-medium pt-1 mt-2 mb-0">
+                                    <a class="hover-effect-underline stretched-link text-decoration-none"
+                                        href="{{ route('second', ['help', 'single-article-v1']) }}">Track your order</a>
+                                </h3>
+                            </div>
+                        </div>
+                        <div class="col-6 col-md-3 col-xl-2 text-center">
+                            <div class="position-relative d-inline-block">
+                                <div class="position-relative d-inline-flex justify-content-center align-items-center text-body-emphasis"
+                                    style="width: 48px; height: 48px">
+                                    <span
+                                        class="position-absolute top-0 start-0 w-100 h-100 bg-white bg-opacity-50 rounded-circle d-none-dark"></span>
+                                    <span
+                                        class="position-absolute top-0 start-0 w-100 h-100 bg-white bg-opacity-10 rounded-circle d-none d-block-dark"></span>
+                                    <i class="ci-shopping-bag position-relative z-1 fs-xl"></i>
+                                </div>
+                                <h3 class="text-dark fs-sm fw-medium pt-1 mt-2 mb-0">
+                                    <a class="hover-effect-underline stretched-link text-decoration-none"
+                                        href="{{ route('second', ['help', 'single-article-v1']) }}">Edit or cancel order</a>
+                                </h3>
+                            </div>
+                        </div>
+                        <div class="col-6 col-md-3 col-xl-2 text-center">
+                            <div class="position-relative d-inline-block">
+                                <div class="position-relative d-inline-flex justify-content-center align-items-center text-body-emphasis"
+                                    style="width: 48px; height: 48px">
+                                    <span
+                                        class="position-absolute top-0 start-0 w-100 h-100 bg-white bg-opacity-50 rounded-circle d-none-dark"></span>
+                                    <span
+                                        class="position-absolute top-0 start-0 w-100 h-100 bg-white bg-opacity-10 rounded-circle d-none d-block-dark"></span>
+                                    <i class="ci-refresh-cw position-relative z-1 fs-xl"></i>
+                                </div>
+                                <h3 class="text-dark fs-sm fw-medium pt-1 mt-2 mb-0">
+                                    <a class="hover-effect-underline stretched-link text-decoration-none"
+                                        href="{{ route('second', ['help', 'single-article-v1']) }}">Returns &amp; refunds</a>
+                                </h3>
+                            </div>
+                        </div>
+                        <div class="col-6 col-md-3 col-xl-2 text-center">
+                            <div class="position-relative d-inline-block">
+                                <div class="position-relative d-inline-flex justify-content-center align-items-center text-body-emphasis"
+                                    style="width: 48px; height: 48px">
+                                    <span
+                                        class="position-absolute top-0 start-0 w-100 h-100 bg-white bg-opacity-50 rounded-circle d-none-dark"></span>
+                                    <span
+                                        class="position-absolute top-0 start-0 w-100 h-100 bg-white bg-opacity-10 rounded-circle d-none d-block-dark"></span>
+                                    <i class="ci-gift position-relative z-1 fs-xl"></i>
+                                </div>
+                                <h3 class="text-dark fs-sm fw-medium pt-1 mt-2 mb-0">
+                                    <a class="hover-effect-underline stretched-link text-decoration-none"
+                                        href="{{ route('second', ['help', 'single-article-v1']) }}">My bonus account</a>
+                                </h3>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Category cards -->
+        <section class="container pt-4">
+            <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-4 g-sm-3 g-md-4">
+
+                <!-- Category -->
+                <div class="col">
+                    <div class="card h-100 bg-body-tertiary border-0 p-md-2">
+                        <div class="card-body">
+                            <h3 class="h5 d-flex mb-4">
+                                <i class="ci-delivery fs-xl pe-1 mt-1 me-2"></i>
+                                Delivery
+                            </h3>
+                            <ul class="nav flex-column gap-3">
+                                <li>
+                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                        href="{{ route('second', ['help', 'single-article-v1']) }}">Can I track my order in real-time?</a>
+                                </li>
+                                <li>
+                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                        href="{{ route('second', ['help', 'single-article-v1']) }}">Is there an option for express delivery?</a>
+                                </li>
+                                <li>
+                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                        href="{{ route('second', ['help', 'single-article-v1']) }}">Will my parcel be charged customs charges?</a>
+                                </li>
+                                <li>
+                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                        href="{{ route('second', ['help', 'single-article-v1']) }}">Do you offer international delivery?</a>
+                                </li>
+                                <li>
+                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                        href="{{ route('second', ['help', 'single-article-v1']) }}">Why does my statement have a recurring
+                                        charge?</a>
+                                </li>
+                            </ul>
+                        </div>
+                        <div class="card-footer nav bg-transparent border-0 pt-0">
+                            <a class="nav-link animate-underline px-0 py-2" href="#!">
+                                <span class="animate-target">View all</span>
+                                <i class="ci-chevron-right fs-base ms-1"></i>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Category -->
+                <div class="col">
+                    <div class="card h-100 bg-body-tertiary border-0 p-md-2">
+                        <div class="card-body">
+                            <h3 class="h5 d-flex mb-4">
+                                <i class="ci-refresh-cw fs-xl pe-1 mt-1 me-2"></i>
+                                Returns &amp; refunds
+                            </h3>
+                            <ul class="nav flex-column gap-3">
+                                <li>
+                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                        href="{{ route('second', ['help', 'single-article-v1']) }}">What is your returns policy?</a>
+                                </li>
+                                <li>
+                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                        href="{{ route('second', ['help', 'single-article-v1']) }}">I paid with Afterpay, how do returns work?</a>
+                                </li>
+                                <li>
+                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                        href="{{ route('second', ['help', 'single-article-v1']) }}">What happens to my refund if I return 45
+                                        days?</a>
+                                </li>
+                                <li>
+                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                        href="{{ route('second', ['help', 'single-article-v1']) }}">How do I return something to you?</a>
+                                </li>
+                                <li>
+                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                        href="{{ route('second', ['help', 'single-article-v1']) }}">Can I return an exchange instead of a refund?</a>
+                                </li>
+                            </ul>
+                        </div>
+                        <div class="card-footer nav bg-transparent border-0 pt-0">
+                            <a class="nav-link animate-underline px-0 py-2" href="#!">
+                                <span class="animate-target">View all</span>
+                                <i class="ci-chevron-right fs-base ms-1"></i>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Category -->
+                <div class="col">
+                    <div class="card h-100 bg-body-tertiary border-0 p-md-2">
+                        <div class="card-body">
+                            <h3 class="h5 d-flex mb-4">
+                                <i class="ci-credit-card fs-xl pe-1 mt-1 me-2"></i>
+                                Payment options
+                            </h3>
+                            <ul class="nav flex-column gap-3">
+                                <li>
+                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                        href="{{ route('second', ['help', 'single-article-v1']) }}">How do I place an order?</a>
+                                </li>
+                                <li>
+                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                        href="{{ route('second', ['help', 'single-article-v1']) }}">My payment was declined, what should I do?</a>
+                                </li>
+                                <li>
+                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                        href="{{ route('second', ['help', 'single-article-v1']) }}">When will I be charged for my order?</a>
+                                </li>
+                                <li>
+                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                        href="{{ route('second', ['help', 'single-article-v1']) }}">How do I pay using Google Pay?</a>
+                                </li>
+                                <li>
+                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                        href="{{ route('second', ['help', 'single-article-v1']) }}">How do I use my Gift Voucher to pay for an
+                                        order?</a>
+                                </li>
+                            </ul>
+                        </div>
+                        <div class="card-footer nav bg-transparent border-0 pt-0">
+                            <a class="nav-link animate-underline px-0 py-2" href="#!">
+                                <span class="animate-target">View all</span>
+                                <i class="ci-chevron-right fs-base ms-1"></i>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Category -->
+                <div class="col">
+                    <div class="card h-100 bg-body-tertiary border-0 p-md-2">
+                        <div class="card-body">
+                            <h3 class="h5 d-flex mb-4">
+                                <i class="ci-shopping-bag fs-xl pe-1 mt-1 me-2"></i>
+                                Order issues
+                            </h3>
+                            <ul class="nav flex-column gap-3">
+                                <li>
+                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                        href="{{ route('second', ['help', 'single-article-v1']) }}">Can I amend my order after I've placed it?</a>
+                                </li>
+                                <li>
+                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                        href="{{ route('second', ['help', 'single-article-v1']) }}">I've received a faulty item, what should I
+                                        do?</a>
+                                </li>
+                                <li>
+                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                        href="{{ route('second', ['help', 'single-article-v1']) }}">I've received an incorrect item, what do I
+                                        do?</a>
+                                </li>
+                                <li>
+                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                        href="{{ route('second', ['help', 'single-article-v1']) }}">I've bought a gift voucher, can I cancel or
+                                        return it?</a>
+                                </li>
+                                <li>
+                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                        href="{{ route('second', ['help', 'single-article-v1']) }}">What if isn't right on my customs invoice?</a>
+                                </li>
+                            </ul>
+                        </div>
+                        <div class="card-footer nav bg-transparent border-0 pt-0">
+                            <a class="nav-link animate-underline px-0 py-2" href="#!">
+                                <span class="animate-target">View all</span>
+                                <i class="ci-chevron-right fs-base ms-1"></i>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Category -->
+                <div class="col">
+                    <div class="card h-100 bg-body-tertiary border-0 p-md-2">
+                        <div class="card-body">
+                            <h3 class="h5 d-flex mb-4">
+                                <i class="ci-archive fs-xl pe-1 mt-1 me-2"></i>
+                                Products &amp; stock
+                            </h3>
+                            <ul class="nav flex-column gap-3">
+                                <li>
+                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                        href="{{ route('second', ['help', 'single-article-v1']) }}">Where can I find your size guide?</a>
+                                </li>
+                                <li>
+                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                        href="{{ route('second', ['help', 'single-article-v1']) }}">Where can I find your care instructions?</a>
+                                </li>
+                                <li>
+                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                        href="{{ route('second', ['help', 'single-article-v1']) }}">Can you tell me more about Collusion?</a>
+                                </li>
+                                <li>
+                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                        href="{{ route('second', ['help', 'single-article-v1']) }}">How do I change my Fit Assistant
+                                        Information?</a>
+                                </li>
+                                <li>
+                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                        href="{{ route('second', ['help', 'single-article-v1']) }}">What are your adhesive product guidelines?</a>
+                                </li>
+                            </ul>
+                        </div>
+                        <div class="card-footer nav bg-transparent border-0 pt-0">
+                            <a class="nav-link animate-underline px-0 py-2" href="#!">
+                                <span class="animate-target">View all</span>
+                                <i class="ci-chevron-right fs-base ms-1"></i>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Category -->
+                <div class="col">
+                    <div class="card h-100 bg-body-tertiary border-0 p-md-2">
+                        <div class="card-body">
+                            <h3 class="h5 d-flex mb-4">
+                                <i class="ci-settings fs-xl pe-1 mt-1 me-2"></i>
+                                Managing account
+                            </h3>
+                            <ul class="nav flex-column gap-3">
+                                <li>
+                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                        href="{{ route('second', ['help', 'single-article-v1']) }}">How do I create an account?</a>
+                                </li>
+                                <li>
+                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                        href="{{ route('second', ['help', 'single-article-v1']) }}">I'm having trouble signing into my account.</a>
+                                </li>
+                                <li>
+                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                        href="{{ route('second', ['help', 'single-article-v1']) }}">I'm having problems using your App.</a>
+                                </li>
+                                <li>
+                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                        href="{{ route('second', ['help', 'single-article-v1']) }}">Do I need to create an account to shop with
+                                        you?</a>
+                                </li>
+                                <li>
+                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                        href="{{ route('second', ['help', 'single-article-v1']) }}">I'd like to delete my account what should I
+                                        do?</a>
+                                </li>
+                            </ul>
+                        </div>
+                        <div class="card-footer nav bg-transparent border-0 pt-0">
+                            <a class="nav-link animate-underline px-0 py-2" href="#!">
+                                <span class="animate-target">View all</span>
+                                <i class="ci-chevron-right fs-base ms-1"></i>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Popular articles (Carousel) -->
+        <section class="container py-5 mt-1 mt-sm-2 mt-md-3 mt-lg-4 mt-xl-5">
+            <h2 class="text-center pb-2 pb-sm-3 pb-lg-4">Popular articles</h2>
+
+            <!-- Nav pills -->
+            <div class="row g-0 overflow-x-auto pb-3 mb-2 mb-md-3 mb-lg-4">
+                <div class="col-auto mx-auto">
+                    <ul class="nav nav-pills flex-nowrap text-nowrap">
+                        <li class="nav-item">
+                            <a class="nav-link rounded active" aria-current="page" href="#!">Delivery</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link rounded" href="#!">Returns &amp; refunds</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link rounded" href="#!">Payment</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link rounded" href="#!">Order issues</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link rounded" href="#!">Products &amp; stock</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link rounded" href="#!">Account</a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+
+            <!-- Carousel -->
+            <div class="position-relative pb-xl-2 mx-2 mx-sm-0">
+                <div class="swiper"
+                    data-swiper='{
+            "slidesPerView": 1,
+            "spaceBetween": 24,
+            "loop": true,
+            "autoHeight": true,
+            "navigation": {
+              "prevEl": ".btn-prev",
+              "nextEl": ".btn-next"
+            },
+            "breakpoints": {
+              "500": {
+                "slidesPerView": 2
+              },
+              "992": {
+                "slidesPerView": 3
+              }
+            }
+          }'>
+                    <div class="swiper-wrapper">
+
+                        <!-- Article -->
+                        <article class="swiper-slide">
+                            <a class="ratio d-flex hover-effect-scale rounded overflow-hidden"
+                                href="{{ route('second', ['help', 'single-article-v1']) }}" style="--cz-aspect-ratio: calc(306 / 416 * 100%)">
+                                <img src="/img/help/article01.jpg" class="hover-effect-target" alt="Image">
+                            </a>
+                            <div class="pt-4">
+                                <div class="text-body-tertiary fs-xs pb-2 mt-n1 mb-1">October 2, 2024</div>
+                                <h3 class="h5 mb-0">
+                                    <a class="hover-effect-underline" href="{{ route('second', ['help', 'single-article-v1']) }}">When should I
+                                        place an order to ensure Express Delivery?</a>
+                                </h3>
+                            </div>
+                        </article>
+
+                        <!-- Article -->
+                        <article class="swiper-slide">
+                            <a class="ratio d-flex hover-effect-scale rounded overflow-hidden"
+                                href="{{ route('second', ['help', 'single-article-v1']) }}" style="--cz-aspect-ratio: calc(306 / 416 * 100%)">
+                                <img src="/img/help/article02.jpg" class="hover-effect-target" alt="Image">
+                            </a>
+                            <div class="pt-4">
+                                <div class="text-body-tertiary fs-xs pb-2 mt-n1 mb-1">July 17, 2024</div>
+                                <h3 class="h5 mb-0">
+                                    <a class="hover-effect-underline" href="{{ route('second', ['help', 'single-article-v1']) }}">Why does my
+                                        statement have a recurring delivery charge?</a>
+                                </h3>
+                            </div>
+                        </article>
+
+                        <!-- Article -->
+                        <article class="swiper-slide">
+                            <a class="ratio d-flex hover-effect-scale rounded overflow-hidden"
+                                href="{{ route('second', ['help', 'single-article-v1']) }}" style="--cz-aspect-ratio: calc(306 / 416 * 100%)">
+                                <img src="/img/help/article03.jpg" class="hover-effect-target" alt="Image">
+                            </a>
+                            <div class="pt-4">
+                                <div class="text-body-tertiary fs-xs pb-2 mt-n1 mb-1">June 13, 2024</div>
+                                <h3 class="h5 mb-0">
+                                    <a class="hover-effect-underline" href="{{ route('second', ['help', 'single-article-v1']) }}">How can I find
+                                        information about your international delivery?</a>
+                                </h3>
+                            </div>
+                        </article>
+
+                        <!-- Article -->
+                        <article class="swiper-slide">
+                            <a class="ratio d-flex hover-effect-scale rounded overflow-hidden"
+                                href="{{ route('second', ['help', 'single-article-v1']) }}" style="--cz-aspect-ratio: calc(306 / 416 * 100%)">
+                                <img src="/img/help/article04.jpg" class="hover-effect-target" alt="Image">
+                            </a>
+                            <div class="pt-4">
+                                <div class="text-body-tertiary fs-xs pb-2 mt-n1 mb-1">May 30, 2024</div>
+                                <h3 class="h5 mb-0">
+                                    <a class="hover-effect-underline" href="{{ route('second', ['help', 'single-article-v1']) }}">Will my parcel be
+                                        charged additional customs charges?</a>
+                                </h3>
+                            </div>
+                        </article>
+                    </div>
+                </div>
+
+                <!-- Prev button -->
+                <div class="position-absolute top-50 start-0 z-2 translate-middle hover-effect-target mt-n5">
+                    <button type="button"
+                        class="btn btn-prev btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-start"
+                        aria-label="Prev">
+                        <i class="ci-chevron-left fs-lg animate-target"></i>
+                    </button>
+                </div>
+
+                <!-- Next button -->
+                <div class="position-absolute top-50 start-100 z-2 translate-middle hover-effect-target mt-n5">
+                    <button type="button"
+                        class="btn btn-next btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-end"
+                        aria-label="Next">
+                        <i class="ci-chevron-right fs-lg animate-target"></i>
+                    </button>
+                </div>
+            </div>
+        </section>
+
+        <hr class="my-0 my-sm-2 my-md-3 my-lg-4">
+
+        <!-- FAQ (Accordion) -->
+        <section class="container py-5 mb-1 mb-sm-2 mb-md-3 mb-lg-4 mb-xl-5">
+            <div class="row pt-xl-2">
+                <div class="col-md-4 col-xl-3 mb-4 mb-md-0" style="margin-top: -120px">
+                    <div class="sticky-md-top text-center text-md-start pe-md-4 pe-lg-5 pe-xl-0"
+                        style="padding-top: 120px;">
+                        <h2>Popular FAQs</h2>
+                        <p class="pb-2 pb-md-3">Still have unanswered questions and need to get in touch?</p>
+                        <a class="btn btn-lg btn-primary" href="#!">Contact us</a>
+                    </div>
+                </div>
+                <div class="col-md-8 offset-xl-1">
+
+                    <!-- Accordion of questions -->
+                    <div class="accordion" id="faq">
+
+                        <!-- Question -->
+                        <div class="accordion-item">
+                            <h3 class="accordion-header" id="faqHeading-1">
+                                <button type="button" class="accordion-button hover-effect-underline collapsed"
+                                    data-bs-toggle="collapse" data-bs-target="#faqCollapse-1" aria-expanded="false"
+                                    aria-controls="faqCollapse-1">
+                                    <span class="me-2">How long will delivery take?</span>
+                                </button>
+                            </h3>
+                            <div class="accordion-collapse collapse" id="faqCollapse-1" aria-labelledby="faqHeading-1"
+                                data-bs-parent="#faq">
+                                <div class="accordion-body">Delivery times vary based on your location and the chosen
+                                    shipping method. Generally, our standard delivery takes up to 5 days, while our Express
+                                    Delivery ensures your order reaches you within 1 day. Please note that these times may
+                                    be subject to occasional variations due to unforeseen circumstances, but we do our best
+                                    to meet these estimates.</div>
+                            </div>
+                        </div>
+
+                        <!-- Question -->
+                        <div class="accordion-item">
+                            <h3 class="accordion-header" id="faqHeading-2">
+                                <button type="button" class="accordion-button hover-effect-underline collapsed"
+                                    data-bs-toggle="collapse" data-bs-target="#faqCollapse-2" aria-expanded="false"
+                                    aria-controls="faqCollapse-2">
+                                    <span class="me-2">What payment methods do you accept?</span>
+                                </button>
+                            </h3>
+                            <div class="accordion-collapse collapse" id="faqCollapse-2" aria-labelledby="faqHeading-2"
+                                data-bs-parent="#faq">
+                                <div class="accordion-body">We offer a range of secure payment options to provide you with
+                                    flexibility and convenience. Accepted methods include major credit/debit cards, PayPal,
+                                    and other secure online payment gateways. You can find the complete list of accepted
+                                    payment methods during the checkout process.</div>
+                            </div>
+                        </div>
+
+                        <!-- Question -->
+                        <div class="accordion-item">
+                            <h3 class="accordion-header" id="faqHeading-3">
+                                <button type="button" class="accordion-button hover-effect-underline collapsed"
+                                    data-bs-toggle="collapse" data-bs-target="#faqCollapse-3" aria-expanded="false"
+                                    aria-controls="faqCollapse-3">
+                                    <span class="me-2">Do you ship internationally?</span>
+                                </button>
+                            </h3>
+                            <div class="accordion-collapse collapse" id="faqCollapse-3" aria-labelledby="faqHeading-3"
+                                data-bs-parent="#faq">
+                                <div class="accordion-body">Yes, we proudly offer international shipping to cater to our
+                                    global customer base. Shipping costs and delivery times will be automatically calculated
+                                    at the checkout based on your selected destination. Please note that any customs duties
+                                    or taxes applicable in your country are the responsibility of the customer.</div>
+                            </div>
+                        </div>
+
+                        <!-- Question -->
+                        <div class="accordion-item">
+                            <h3 class="accordion-header" id="faqHeading-4">
+                                <button type="button" class="accordion-button hover-effect-underline collapsed"
+                                    data-bs-toggle="collapse" data-bs-target="#faqCollapse-4" aria-expanded="false"
+                                    aria-controls="faqCollapse-4">
+                                    <span class="me-2">Do I need an account to place an order?</span>
+                                </button>
+                            </h3>
+                            <div class="accordion-collapse collapse" id="faqCollapse-4" aria-labelledby="faqHeading-4"
+                                data-bs-parent="#faq">
+                                <div class="accordion-body">While you can place an order as a guest, creating an account
+                                    comes with added benefits. By having an account, you can easily track your orders,
+                                    manage your preferences, and enjoy a quicker checkout process for future purchases. It
+                                    also allows us to provide you with personalized recommendations and exclusive offers.
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Question -->
+                        <div class="accordion-item">
+                            <h3 class="accordion-header" id="faqHeading-5">
+                                <button type="button" class="accordion-button hover-effect-underline collapsed"
+                                    data-bs-toggle="collapse" data-bs-target="#faqCollapse-5" aria-expanded="false"
+                                    aria-controls="faqCollapse-5">
+                                    <span class="me-2">How can I track my order?</span>
+                                </button>
+                            </h3>
+                            <div class="accordion-collapse collapse" id="faqCollapse-5" aria-labelledby="faqHeading-5"
+                                data-bs-parent="#faq">
+                                <div class="accordion-body">Once your order is dispatched, you will receive a confirmation
+                                    email containing a unique tracking number. You can use this tracking number on our
+                                    website to monitor the real-time status of your shipment. Additionally, logging into
+                                    your account will grant you access to a comprehensive order history, including tracking
+                                    information.</div>
+                            </div>
+                        </div>
+
+                        <!-- Question -->
+                        <div class="accordion-item">
+                            <h3 class="accordion-header" id="faqHeading-6">
+                                <button type="button" class="accordion-button hover-effect-underline collapsed"
+                                    data-bs-toggle="collapse" data-bs-target="#faqCollapse-6" aria-expanded="false"
+                                    aria-controls="faqCollapse-6">
+                                    <span class="me-2">What are the product refund conditions?</span>
+                                </button>
+                            </h3>
+                            <div class="accordion-collapse collapse" id="faqCollapse-6" aria-labelledby="faqHeading-6"
+                                data-bs-parent="#faq">
+                                <div class="accordion-body">Our refund policy is designed to ensure customer satisfaction.
+                                    Details can be found in our [refund policy page](insert link). In essence, we accept
+                                    returns within [insert number] days of receiving the product, provided it is in its
+                                    original condition with all tags and packaging intact. Refunds are processed promptly
+                                    once the returned item is inspected and approved.</div>
+                            </div>
+                        </div>
+
+                        <!-- Question -->
+                        <div class="accordion-item">
+                            <h3 class="accordion-header" id="faqHeading-7">
+                                <button type="button" class="accordion-button hover-effect-underline collapsed"
+                                    data-bs-toggle="collapse" data-bs-target="#faqCollapse-7" aria-expanded="false"
+                                    aria-controls="faqCollapse-7">
+                                    <span class="me-2">Where can I find your size guide?</span>
+                                </button>
+                            </h3>
+                            <div class="accordion-collapse collapse" id="faqCollapse-7" aria-labelledby="faqHeading-7"
+                                data-bs-parent="#faq">
+                                <div class="accordion-body">Our comprehensive size guide is conveniently located on each
+                                    product page to assist you in choosing the right fit. Additionally, you can find the
+                                    size guide in the main menu under "Size Guide." We recommend referring to these
+                                    resources to ensure your selected items match your preferred sizing.</div>
+                            </div>
+                        </div>
+
+                        <!-- Question -->
+                        <div class="accordion-item">
+                            <h3 class="accordion-header" id="faqHeading-8">
+                                <button type="button" class="accordion-button hover-effect-underline collapsed"
+                                    data-bs-toggle="collapse" data-bs-target="#faqCollapse-8" aria-expanded="false"
+                                    aria-controls="faqCollapse-8">
+                                    <span class="me-2">Do I need to create an account to shop with you?</span>
+                                </button>
+                            </h3>
+                            <div class="accordion-collapse collapse" id="faqCollapse-8" aria-labelledby="faqHeading-8"
+                                data-bs-parent="#faq">
+                                <div class="accordion-body">While guest checkout is available for your convenience,
+                                    creating an account enhances your overall shopping experience. With an account, you can
+                                    easily track your order status, save multiple shipping addresses, and enjoy a
+                                    streamlined checkout process. Moreover, account holders receive early access to
+                                    promotions and exclusive offers. Signing up is quick and hassle-free!</div>
+                            </div>
+                        </div>
+
+                        <!-- Question -->
+                        <div class="accordion-item">
+                            <h3 class="accordion-header" id="faqHeading-9">
+                                <button type="button" class="accordion-button hover-effect-underline collapsed"
+                                    data-bs-toggle="collapse" data-bs-target="#faqCollapse-9" aria-expanded="false"
+                                    aria-controls="faqCollapse-9">
+                                    <span class="me-2">Is there a minimum order value for free shipping?</span>
+                                </button>
+                            </h3>
+                            <div class="accordion-collapse collapse" id="faqCollapse-9" aria-labelledby="faqHeading-9"
+                                data-bs-parent="#faq">
+                                <div class="accordion-body">Yes, we offer free shipping on orders exceeding $250. Orders
+                                    below this threshold are subject to standard shipping fees, which will be displayed
+                                    during the checkout process.</div>
+                            </div>
+                        </div>
+
+                        <!-- Question -->
+                        <div class="accordion-item">
+                            <h3 class="accordion-header" id="faqHeading-10">
+                                <button type="button" class="accordion-button hover-effect-underline collapsed"
+                                    data-bs-toggle="collapse" data-bs-target="#faqCollapse-10" aria-expanded="false"
+                                    aria-controls="faqCollapse-10">
+                                    <span class="me-2">Can I modify or cancel my order after placing it?</span>
+                                </button>
+                            </h3>
+                            <div class="accordion-collapse collapse" id="faqCollapse-10" aria-labelledby="faqHeading-10"
+                                data-bs-parent="#faq">
+                                <div class="accordion-body">Once an order is confirmed, our system processes it promptly to
+                                    ensure timely dispatch. Therefore, modifications or cancellations are challenging after
+                                    this point. However, please contact our customer support as soon as possible, and we
+                                    will do our best to assist you based on the order status.</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    @include('layouts.partials/footer')
+@endsection
+
+@section('scripts')
+@endsection
diff --git a/resources/views/help/topics-v2.blade.php b/resources/views/help/topics-v2.blade.php
new file mode 100644
index 0000000..4306694
--- /dev/null
+++ b/resources/views/help/topics-v2.blade.php
@@ -0,0 +1,882 @@
+@extends('layouts.landing', ['title' => 'Help Topics v.2'])
+
+@section('content')
+    @include('layouts.partials/offcanvas')
+
+    @include('layouts.partials/navbar', ['wishlist' => true])
+
+    <main class="content-wrapper">
+
+        <!-- Hero -->
+        <section class="container pt-3 pt-sm-4">
+            <div class="position-relative">
+                <span class="position-absolute top-0 start-0 w-100 h-100 rounded-5 d-none-dark rtl-flip"
+                    style="background: linear-gradient(-90deg, #accbee 0%, #e7f0fd 100%)"></span>
+                <span class="position-absolute top-0 start-0 w-100 h-100 rounded-5 d-none d-block-dark rtl-flip"
+                    style="background: linear-gradient(-90deg, #1b273a 0%, #1f2632 100%)"></span>
+                <div class="row align-items-center position-relative z-1">
+                    <div class="col-lg-7 col-xl-5 offset-xl-1 py-5">
+                        <div class="px-4 px-sm-5 px-xl-0 pe-lg-4">
+                            <h1 class="text-center text-sm-start mb-4">How can we help?</h1>
+                            <form class="d-flex flex-column flex-sm-row gap-2">
+                                <input type="search" class="form-control form-control-lg"
+                                    placeholder="What do you need help with?" aria-label="Search field">
+                                <button type="submit" class="btn btn-lg btn-primary px-3">
+                                    <i class="ci-search fs-lg ms-n2 ms-sm-0"></i>
+                                    <span class="ms-2 d-sm-none">Search</span>
+                                </button>
+                            </form>
+                            <div class="nav gap-2 pt-3 pt-sm-4 mt-1 mt-sm-0">
+                                <span class="nav-link text-body-secondary pe-none p-0 me-1">Common topics:</span>
+                                <a class="nav-link text-body-emphasis text-decoration-underline p-0 me-1"
+                                    href="{{ route('second', ['help', 'single-article-v2']) }}">payments</a>
+                                <a class="nav-link text-body-emphasis text-decoration-underline p-0 me-1"
+                                    href="{{ route('second', ['help', 'single-article-v2']) }}">refunds</a>
+                                <a class="nav-link text-body-emphasis text-decoration-underline p-0 me-1"
+                                    href="{{ route('second', ['help', 'single-article-v2']) }}">delivery</a>
+                                <a class="nav-link text-body-emphasis text-decoration-underline p-0 me-1"
+                                    href="{{ route('second', ['help', 'single-article-v2']) }}">dashboard</a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-lg-5 offset-xl-1 d-none d-lg-block">
+                        <div class="ratio rtl-flip" style="--cz-aspect-ratio: calc(356 / 526 * 100%)">
+                            <img src="/img/help/hero-light.png" class="d-none-dark" alt="Image">
+                            <img src="/img/help/hero-dark.png" class="d-none d-block-dark" alt="Image">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Help topics -->
+        <section class="container py-5">
+            <div class="row g-0 pt-md-2 pt-xl-4">
+                <div class="col-md-4 col-lg-3 pb-2 pb-sm-3 pb-md-0 mb-4 mb-md-0">
+                    <h2 class="h5 border-bottom pb-3 pb-sm-4 mb-0">Help topics</h2>
+
+                    <!-- Nav tabs in format of list group -->
+                    <div class="list-group list-group-borderless pt-4 pe-md-4" role="tablist">
+                        <a class="list-group-item list-group-item-action d-flex align-items-center active" href="#delivery"
+                            data-bs-toggle="list" role="tab" aria-controls="delivery" id="delivery-tab"
+                            aria-selected="true">
+                            <i class="ci-delivery fs-base opacity-75 me-2"></i>
+                            Delivery
+                        </a>
+                        <a class="list-group-item list-group-item-action d-flex align-items-center" href="#returns"
+                            data-bs-toggle="list" role="tab" aria-controls="returns" id="returns-tab"
+                            aria-selected="false" tabindex="-1">
+                            <i class="ci-refresh-cw fs-base opacity-75 me-2"></i>
+                            Returns &amp; refunds
+                        </a>
+                        <a class="list-group-item list-group-item-action d-flex align-items-center" href="#payment"
+                            data-bs-toggle="list" role="tab" aria-controls="payment" id="payment-tab"
+                            aria-selected="false" tabindex="-1">
+                            <i class="ci-credit-card fs-base opacity-75 me-2"></i>
+                            Payment options
+                        </a>
+                        <a class="list-group-item list-group-item-action d-flex align-items-center" href="#order"
+                            data-bs-toggle="list" role="tab" aria-controls="order" id="order-tab" aria-selected="false"
+                            tabindex="-1">
+                            <i class="ci-shopping-bag fs-base opacity-75 me-2"></i>
+                            Order issues
+                        </a>
+                        <a class="list-group-item list-group-item-action d-flex align-items-center" href="#stock"
+                            data-bs-toggle="list" role="tab" aria-controls="stock" id="stock-tab" aria-selected="false"
+                            tabindex="-1">
+                            <i class="ci-archive fs-base opacity-75 me-2"></i>
+                            Products &amp; stock
+                        </a>
+                        <a class="list-group-item list-group-item-action d-flex align-items-center" href="#account"
+                            data-bs-toggle="list" role="tab" aria-controls="account" id="account-tab"
+                            aria-selected="false" tabindex="-1">
+                            <i class="ci-settings fs-base opacity-75 me-2"></i>
+                            Managing account
+                        </a>
+                    </div>
+
+                </div>
+                <div class="col-md-8 col-lg-9">
+
+                    <!-- Tabs with links -->
+                    <div class="tab-content">
+
+                        <!-- Delivery tab -->
+                        <div class="tab-pane show active" id="delivery" role="tabpanel" aria-labelledby="delivery-tab">
+                            <div class="d-flex border-bottom ps-md-4 pb-3 pb-sm-4">
+                                <h2 class="h5 mb-0">Delivery</h2>
+                            </div>
+                            <div class="position-relative">
+                                <div class="position-absolute top-0 start-0 h-100 border-start d-none d-md-block"></div>
+                                <ul class="nav flex-column gap-3 pt-4 ps-md-4">
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">How does courier delivery work?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">What happens if I'm not available to receive
+                                            the delivery?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">Can I track my order in real-time?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">Is there an option for express delivery?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">Will my parcel be charged customs
+                                            charges?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">Are there any restrictions on shipping
+                                            certain products internationally?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">Can I request a specific delivery time?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">How can I cancel or modify my order before
+                                            it's shipped?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">What is your policy on lost or damaged items
+                                            during delivery?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">How are shipping costs calculated?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">Are there any additional fees for expedited
+                                            delivery services?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">Can I schedule a return pick-up for a
+                                            product?</a>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+
+                        <!-- Returns tab -->
+                        <div class="tab-pane" id="returns" role="tabpanel" aria-labelledby="returns-tab">
+                            <div class="d-flex border-bottom ps-md-4 pb-3 pb-sm-4">
+                                <h2 class="h5 mb-0">Returns &amp; refunds</h2>
+                            </div>
+                            <div class="position-relative">
+                                <div class="position-absolute top-0 start-0 h-100 border-start d-none d-md-block"></div>
+                                <ul class="nav flex-column gap-3 pt-4 ps-md-4">
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">How do I initiate a return for a
+                                            product?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">What is your return policy?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">Can I exchange a product instead of getting
+                                            a refund?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">How long does it take to process a
+                                            refund?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">What should I do if my returned item is
+                                            damaged or defective?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">Are there any items that are not eligible
+                                            for returns?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">Can I return a gift that was purchased for
+                                            me?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">Is there a restocking fee for returned
+                                            items?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">How can I track the status of my return?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">What do I do if I receive the wrong item in
+                                            my order?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">Are shipping costs refundable for returned
+                                            items?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">Do you provide return labels for
+                                            international customers?</a>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+
+                        <!-- Payment tab -->
+                        <div class="tab-pane" id="payment" role="tabpanel" aria-labelledby="payment-tab">
+                            <div class="d-flex border-bottom ps-md-4 pb-3 pb-sm-4">
+                                <h2 class="h5 mb-0">Payment options</h2>
+                            </div>
+                            <div class="position-relative">
+                                <div class="position-absolute top-0 start-0 h-100 border-start d-none d-md-block"></div>
+                                <ul class="nav flex-column gap-3 pt-4 ps-md-4">
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">What payment methods do you accept?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">Can I change the payment method after
+                                            placing an order?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">Are my credit card details secure on your
+                                            website?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">Do you offer installment payment
+                                            options?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">How do I use a promo code or gift card
+                                            during checkout?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">Are there any additional fees for using
+                                            certain payment methods?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">Can I split the payment between two
+                                            different cards?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">What currencies do you accept for
+                                            international orders?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">Is it safe to save my payment information
+                                            for future purchases?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">Why was my payment declined?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">How can I request a refund for an
+                                            overcharged amount?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">Do you offer cash-on-delivery (COD) as a
+                                            payment option?</a>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+
+                        <!-- Order tab -->
+                        <div class="tab-pane" id="order" role="tabpanel" aria-labelledby="order-tab">
+                            <div class="d-flex border-bottom ps-md-4 pb-3 pb-sm-4">
+                                <h2 class="h5 mb-0">Order issues</h2>
+                            </div>
+                            <div class="position-relative">
+                                <div class="position-absolute top-0 start-0 h-100 border-start d-none d-md-block"></div>
+                                <ul class="nav flex-column gap-3 pt-4 ps-md-4">
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">How can I track the status of my order?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">What should I do if my order is delayed?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">Can I cancel my order after it has been
+                                            placed?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">What happens if an item in my order is out
+                                            of stock?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">How do I add or remove items from my
+                                            existing order?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">Do you offer expedited shipping options?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">My tracking information is not updating;
+                                            what should I do?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">Can I change the shipping address for my
+                                            order?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">What if my order is missing items or is
+                                            incomplete?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">How do I report a problem with my delivered
+                                            package?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">Can I request a gift receipt with my
+                                            order?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">Are there any restrictions on shipping to
+                                            certain locations?</a>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+
+                        <!-- Stock tab -->
+                        <div class="tab-pane" id="stock" role="tabpanel" aria-labelledby="stock-tab">
+                            <div class="d-flex border-bottom ps-md-4 pb-3 pb-sm-4">
+                                <h2 class="h5 mb-0">Products &amp; stock</h2>
+                            </div>
+                            <div class="position-relative">
+                                <div class="position-absolute top-0 start-0 h-100 border-start d-none d-md-block"></div>
+                                <ul class="nav flex-column gap-3 pt-4 ps-md-4">
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">How often is your product inventory
+                                            updated?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">Can I pre-order items that are out of
+                                            stock?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">Are your products authentic and
+                                            original?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">What should I do if an item I want is out of
+                                            stock?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">Do you restock popular or sold-out
+                                            items?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">Can I modify or customize a product before
+                                            purchasing?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">Are there any warranties on your
+                                            products?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">How do I sign up for product restock
+                                            notifications?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">Can I review products on your website?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">What is the difference between in-stock and
+                                            pre-order items?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">Are the product images on your website
+                                            accurate representations?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">Do you offer bulk or wholesale
+                                            discounts?</a>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+
+                        <!-- Account tab -->
+                        <div class="tab-pane" id="account" role="tabpanel" aria-labelledby="account-tab">
+                            <div class="d-flex border-bottom ps-md-4 pb-3 pb-sm-4">
+                                <h2 class="h5 mb-0">Managing account</h2>
+                            </div>
+                            <div class="position-relative">
+                                <div class="position-absolute top-0 start-0 h-100 border-start d-none d-md-block"></div>
+                                <ul class="nav flex-column gap-3 pt-4 ps-md-4">
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">How do I create an account on your
+                                            website?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">Can I change my email address associated
+                                            with my account?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">What should I do if I forgot my
+                                            password?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">How can I update my personal information on
+                                            my account?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">Is my account information secure on your
+                                            website?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">Can I have multiple shipping addresses saved
+                                            in my account?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">How do I unsubscribe from newsletters or
+                                            promotional emails?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">Can I delete my account, and what happens to
+                                            my order history?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">How do I check the status of my recent
+                                            orders?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">Do you offer a guest checkout option without
+                                            creating an account?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">How can I subscribe or unsubscribe from SMS
+                                            notifications?</a>
+                                    </li>
+                                    <li>
+                                        <a class="nav-link hover-effect-underline fw-normal p-0"
+                                            href="{{ route('second', ['help', 'single-article-v2']) }}">What benefits come with creating an account
+                                            on your website?</a>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Contact CTA -->
+            <div class="pt-4 pb-1 pb-sm-3 pb-md-4 pb-xl-5 mt-2 mt-sm-3">
+                <h3 class="fs-sm pb-sm-1">Can't find an answer to your question?</h3>
+                <a class="btn btn-lg btn-primary" href="#!">Contact us</a>
+            </div>
+        </section>
+
+
+        <!-- Popular articles (Carousel) -->
+        <section class="bg-body-tertiary py-5">
+            <div class="container py-1 py-sm-2 py-md-3 py-lg-4 py-xl-5">
+                <h2 class="text-center pb-2 pb-sm-3 pb-lg-4">Popular articles</h2>
+
+                <!-- Nav pills -->
+                <div class="row g-0 overflow-x-auto pb-3 mb-2 mb-md-3 mb-lg-4">
+                    <div class="col-auto mx-auto">
+                        <ul class="nav nav-pills flex-nowrap text-nowrap">
+                            <li class="nav-item">
+                                <a class="nav-link rounded active" aria-current="page" href="#!">Delivery</a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link rounded" href="#!">Returns &amp; refunds</a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link rounded" href="#!">Payment</a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link rounded" href="#!">Order issues</a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link rounded" href="#!">Products &amp; stock</a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link rounded" href="#!">Account</a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+
+                <!-- Carousel -->
+                <div class="position-relative mx-2 mx-sm-0">
+                    <div class="swiper"
+                        data-swiper='{
+              "slidesPerView": 1,
+              "spaceBetween": 24,
+              "loop": true,
+              "autoHeight": true,
+              "navigation": {
+                "prevEl": ".btn-prev",
+                "nextEl": ".btn-next"
+              },
+              "breakpoints": {
+                "500": {
+                  "slidesPerView": 2
+                },
+                "992": {
+                  "slidesPerView": 3
+                }
+              }
+            }'>
+                        <div class="swiper-wrapper">
+
+                            <!-- Article -->
+                            <article class="swiper-slide">
+                                <a class="ratio d-flex hover-effect-scale rounded overflow-hidden"
+                                    href="{{ route('second', ['help', 'single-article-v2']) }}" style="--cz-aspect-ratio: calc(306 / 416 * 100%)">
+                                    <img src="/img/help/article01.jpg" class="hover-effect-target" alt="Image">
+                                </a>
+                                <div class="pt-4">
+                                    <div class="text-body-tertiary fs-xs pb-2 mt-n1 mb-1">October 2, 2024</div>
+                                    <h3 class="h5 mb-0">
+                                        <a class="hover-effect-underline" href="{{ route('second', ['help', 'single-article-v2']) }}">When should I
+                                            place an order to ensure Express Delivery?</a>
+                                    </h3>
+                                </div>
+                            </article>
+
+                            <!-- Article -->
+                            <article class="swiper-slide">
+                                <a class="ratio d-flex hover-effect-scale rounded overflow-hidden"
+                                    href="{{ route('second', ['help', 'single-article-v2']) }}" style="--cz-aspect-ratio: calc(306 / 416 * 100%)">
+                                    <img src="/img/help/article02.jpg" class="hover-effect-target" alt="Image">
+                                </a>
+                                <div class="pt-4">
+                                    <div class="text-body-tertiary fs-xs pb-2 mt-n1 mb-1">July 17, 2024</div>
+                                    <h3 class="h5 mb-0">
+                                        <a class="hover-effect-underline" href="{{ route('second', ['help', 'single-article-v2']) }}">Why does my
+                                            statement have a recurring delivery charge?</a>
+                                    </h3>
+                                </div>
+                            </article>
+
+                            <!-- Article -->
+                            <article class="swiper-slide">
+                                <a class="ratio d-flex hover-effect-scale rounded overflow-hidden"
+                                    href="{{ route('second', ['help', 'single-article-v2']) }}" style="--cz-aspect-ratio: calc(306 / 416 * 100%)">
+                                    <img src="/img/help/article03.jpg" class="hover-effect-target" alt="Image">
+                                </a>
+                                <div class="pt-4">
+                                    <div class="text-body-tertiary fs-xs pb-2 mt-n1 mb-1">June 13, 2024</div>
+                                    <h3 class="h5 mb-0">
+                                        <a class="hover-effect-underline" href="{{ route('second', ['help', 'single-article-v2']) }}">How can I
+                                            find information about your international delivery?</a>
+                                    </h3>
+                                </div>
+                            </article>
+
+                            <!-- Article -->
+                            <article class="swiper-slide">
+                                <a class="ratio d-flex hover-effect-scale rounded overflow-hidden"
+                                    href="{{ route('second', ['help', 'single-article-v2']) }}" style="--cz-aspect-ratio: calc(306 / 416 * 100%)">
+                                    <img src="/img/help/article04.jpg" class="hover-effect-target" alt="Image">
+                                </a>
+                                <div class="pt-4">
+                                    <div class="text-body-tertiary fs-xs pb-2 mt-n1 mb-1">May 30, 2024</div>
+                                    <h3 class="h5 mb-0">
+                                        <a class="hover-effect-underline" href="{{ route('second', ['help', 'single-article-v2']) }}">Will my
+                                            parcel be charged additional customs charges?</a>
+                                    </h3>
+                                </div>
+                            </article>
+                        </div>
+                    </div>
+
+                    <!-- Prev button -->
+                    <div class="position-absolute top-50 start-0 z-2 translate-middle hover-effect-target mt-n5">
+                        <button type="button"
+                            class="btn btn-prev btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-start"
+                            aria-label="Prev">
+                            <i class="ci-chevron-left fs-lg animate-target"></i>
+                        </button>
+                    </div>
+
+                    <!-- Next button -->
+                    <div class="position-absolute top-50 start-100 z-2 translate-middle hover-effect-target mt-n5">
+                        <button type="button"
+                            class="btn btn-next btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-end"
+                            aria-label="Next">
+                            <i class="ci-chevron-right fs-lg animate-target"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- FAQ (Accordion) -->
+        <section class="container py-5">
+            <div class="row py-1 py-sm-2 py-md-3 py-lg-4 py-xl-5">
+                <div class="col-md-4 col-xl-3 mb-4 mb-md-0" style="margin-top: -120px">
+                    <div class="sticky-md-top text-center text-md-start pe-md-4 pe-lg-5 pe-xl-0"
+                        style="padding-top: 120px;">
+                        <h2>Popular FAQs</h2>
+                        <p class="pb-2 pb-md-3">Still have unanswered questions and need to get in touch?</p>
+                        <a class="btn btn-lg btn-primary" href="#!">Contact us</a>
+                    </div>
+                </div>
+                <div class="col-md-8 offset-xl-1">
+
+                    <!-- Accordion of questions -->
+                    <div class="accordion" id="faq">
+
+                        <!-- Question -->
+                        <div class="accordion-item">
+                            <h3 class="accordion-header" id="faqHeading-1">
+                                <button type="button" class="accordion-button hover-effect-underline collapsed"
+                                    data-bs-toggle="collapse" data-bs-target="#faqCollapse-1" aria-expanded="false"
+                                    aria-controls="faqCollapse-1">
+                                    <span class="me-2">How long will delivery take?</span>
+                                </button>
+                            </h3>
+                            <div class="accordion-collapse collapse" id="faqCollapse-1" aria-labelledby="faqHeading-1"
+                                data-bs-parent="#faq">
+                                <div class="accordion-body">Delivery times vary based on your location and the chosen
+                                    shipping method. Generally, our standard delivery takes up to 5 days, while our Express
+                                    Delivery ensures your order reaches you within 1 day. Please note that these times may
+                                    be subject to occasional variations due to unforeseen circumstances, but we do our best
+                                    to meet these estimates.</div>
+                            </div>
+                        </div>
+
+                        <!-- Question -->
+                        <div class="accordion-item">
+                            <h3 class="accordion-header" id="faqHeading-2">
+                                <button type="button" class="accordion-button hover-effect-underline collapsed"
+                                    data-bs-toggle="collapse" data-bs-target="#faqCollapse-2" aria-expanded="false"
+                                    aria-controls="faqCollapse-2">
+                                    <span class="me-2">What payment methods do you accept?</span>
+                                </button>
+                            </h3>
+                            <div class="accordion-collapse collapse" id="faqCollapse-2" aria-labelledby="faqHeading-2"
+                                data-bs-parent="#faq">
+                                <div class="accordion-body">We offer a range of secure payment options to provide you with
+                                    flexibility and convenience. Accepted methods include major credit/debit cards, PayPal,
+                                    and other secure online payment gateways. You can find the complete list of accepted
+                                    payment methods during the checkout process.</div>
+                            </div>
+                        </div>
+
+                        <!-- Question -->
+                        <div class="accordion-item">
+                            <h3 class="accordion-header" id="faqHeading-3">
+                                <button type="button" class="accordion-button hover-effect-underline collapsed"
+                                    data-bs-toggle="collapse" data-bs-target="#faqCollapse-3" aria-expanded="false"
+                                    aria-controls="faqCollapse-3">
+                                    <span class="me-2">Do you ship internationally?</span>
+                                </button>
+                            </h3>
+                            <div class="accordion-collapse collapse" id="faqCollapse-3" aria-labelledby="faqHeading-3"
+                                data-bs-parent="#faq">
+                                <div class="accordion-body">Yes, we proudly offer international shipping to cater to our
+                                    global customer base. Shipping costs and delivery times will be automatically calculated
+                                    at the checkout based on your selected destination. Please note that any customs duties
+                                    or taxes applicable in your country are the responsibility of the customer.</div>
+                            </div>
+                        </div>
+
+                        <!-- Question -->
+                        <div class="accordion-item">
+                            <h3 class="accordion-header" id="faqHeading-4">
+                                <button type="button" class="accordion-button hover-effect-underline collapsed"
+                                    data-bs-toggle="collapse" data-bs-target="#faqCollapse-4" aria-expanded="false"
+                                    aria-controls="faqCollapse-4">
+                                    <span class="me-2">Do I need an account to place an order?</span>
+                                </button>
+                            </h3>
+                            <div class="accordion-collapse collapse" id="faqCollapse-4" aria-labelledby="faqHeading-4"
+                                data-bs-parent="#faq">
+                                <div class="accordion-body">While you can place an order as a guest, creating an account
+                                    comes with added benefits. By having an account, you can easily track your orders,
+                                    manage your preferences, and enjoy a quicker checkout process for future purchases. It
+                                    also allows us to provide you with personalized recommendations and exclusive offers.
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Question -->
+                        <div class="accordion-item">
+                            <h3 class="accordion-header" id="faqHeading-5">
+                                <button type="button" class="accordion-button hover-effect-underline collapsed"
+                                    data-bs-toggle="collapse" data-bs-target="#faqCollapse-5" aria-expanded="false"
+                                    aria-controls="faqCollapse-5">
+                                    <span class="me-2">How can I track my order?</span>
+                                </button>
+                            </h3>
+                            <div class="accordion-collapse collapse" id="faqCollapse-5" aria-labelledby="faqHeading-5"
+                                data-bs-parent="#faq">
+                                <div class="accordion-body">Once your order is dispatched, you will receive a confirmation
+                                    email containing a unique tracking number. You can use this tracking number on our
+                                    website to monitor the real-time status of your shipment. Additionally, logging into
+                                    your account will grant you access to a comprehensive order history, including tracking
+                                    information.</div>
+                            </div>
+                        </div>
+
+                        <!-- Question -->
+                        <div class="accordion-item">
+                            <h3 class="accordion-header" id="faqHeading-6">
+                                <button type="button" class="accordion-button hover-effect-underline collapsed"
+                                    data-bs-toggle="collapse" data-bs-target="#faqCollapse-6" aria-expanded="false"
+                                    aria-controls="faqCollapse-6">
+                                    <span class="me-2">What are the product refund conditions?</span>
+                                </button>
+                            </h3>
+                            <div class="accordion-collapse collapse" id="faqCollapse-6" aria-labelledby="faqHeading-6"
+                                data-bs-parent="#faq">
+                                <div class="accordion-body">Our refund policy is designed to ensure customer satisfaction.
+                                    Details can be found in our [refund policy page](insert link). In essence, we accept
+                                    returns within [insert number] days of receiving the product, provided it is in its
+                                    original condition with all tags and packaging intact. Refunds are processed promptly
+                                    once the returned item is inspected and approved.</div>
+                            </div>
+                        </div>
+
+                        <!-- Question -->
+                        <div class="accordion-item">
+                            <h3 class="accordion-header" id="faqHeading-7">
+                                <button type="button" class="accordion-button hover-effect-underline collapsed"
+                                    data-bs-toggle="collapse" data-bs-target="#faqCollapse-7" aria-expanded="false"
+                                    aria-controls="faqCollapse-7">
+                                    <span class="me-2">Where can I find your size guide?</span>
+                                </button>
+                            </h3>
+                            <div class="accordion-collapse collapse" id="faqCollapse-7" aria-labelledby="faqHeading-7"
+                                data-bs-parent="#faq">
+                                <div class="accordion-body">Our comprehensive size guide is conveniently located on each
+                                    product page to assist you in choosing the right fit. Additionally, you can find the
+                                    size guide in the main menu under "Size Guide." We recommend referring to these
+                                    resources to ensure your selected items match your preferred sizing.</div>
+                            </div>
+                        </div>
+
+                        <!-- Question -->
+                        <div class="accordion-item">
+                            <h3 class="accordion-header" id="faqHeading-8">
+                                <button type="button" class="accordion-button hover-effect-underline collapsed"
+                                    data-bs-toggle="collapse" data-bs-target="#faqCollapse-8" aria-expanded="false"
+                                    aria-controls="faqCollapse-8">
+                                    <span class="me-2">Do I need to create an account to shop with you?</span>
+                                </button>
+                            </h3>
+                            <div class="accordion-collapse collapse" id="faqCollapse-8" aria-labelledby="faqHeading-8"
+                                data-bs-parent="#faq">
+                                <div class="accordion-body">While guest checkout is available for your convenience,
+                                    creating an account enhances your overall shopping experience. With an account, you can
+                                    easily track your order status, save multiple shipping addresses, and enjoy a
+                                    streamlined checkout process. Moreover, account holders receive early access to
+                                    promotions and exclusive offers. Signing up is quick and hassle-free!</div>
+                            </div>
+                        </div>
+
+                        <!-- Question -->
+                        <div class="accordion-item">
+                            <h3 class="accordion-header" id="faqHeading-9">
+                                <button type="button" class="accordion-button hover-effect-underline collapsed"
+                                    data-bs-toggle="collapse" data-bs-target="#faqCollapse-9" aria-expanded="false"
+                                    aria-controls="faqCollapse-9">
+                                    <span class="me-2">Is there a minimum order value for free shipping?</span>
+                                </button>
+                            </h3>
+                            <div class="accordion-collapse collapse" id="faqCollapse-9" aria-labelledby="faqHeading-9"
+                                data-bs-parent="#faq">
+                                <div class="accordion-body">Yes, we offer free shipping on orders exceeding $250. Orders
+                                    below this threshold are subject to standard shipping fees, which will be displayed
+                                    during the checkout process.</div>
+                            </div>
+                        </div>
+
+                        <!-- Question -->
+                        <div class="accordion-item">
+                            <h3 class="accordion-header" id="faqHeading-10">
+                                <button type="button" class="accordion-button hover-effect-underline collapsed"
+                                    data-bs-toggle="collapse" data-bs-target="#faqCollapse-10" aria-expanded="false"
+                                    aria-controls="faqCollapse-10">
+                                    <span class="me-2">Can I modify or cancel my order after placing it?</span>
+                                </button>
+                            </h3>
+                            <div class="accordion-collapse collapse" id="faqCollapse-10" aria-labelledby="faqHeading-10"
+                                data-bs-parent="#faq">
+                                <div class="accordion-body">Once an order is confirmed, our system processes it promptly to
+                                    ensure timely dispatch. Therefore, modifications or cancellations are challenging after
+                                    this point. However, please contact our customer support as soon as possible, and we
+                                    will do our best to assist you based on the order status.</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    @include('layouts.partials/footer')
+@endsection
+
+@section('scripts')
+@endsection
diff --git a/resources/views/home/electronics.blade.php b/resources/views/home/electronics.blade.php
new file mode 100644
index 0000000..a89188d
--- /dev/null
+++ b/resources/views/home/electronics.blade.php
@@ -0,0 +1,1960 @@
+@extends('layouts.landing', ['title' => 'Electronics Store'])
+
+@section('content')
+    @include('layouts.partials/offcanvas')
+
+    @include('layouts.partials/navbar', ['wishlist' => true])
+
+    <main class="content-wrapper">
+
+        <!-- Hero slider -->
+        <section class="container pt-4">
+            <div class="row">
+                <div class="col-lg-9 offset-lg-3">
+                    <div class="position-relative">
+                        <span class="position-absolute top-0 start-0 w-100 h-100 rounded-5 d-none-dark rtl-flip"
+                            style="background: linear-gradient(90deg, #accbee 0%, #e7f0fd 100%)"></span>
+                        <span class="position-absolute top-0 start-0 w-100 h-100 rounded-5 d-none d-block-dark rtl-flip"
+                            style="background: linear-gradient(90deg, #1b273a 0%, #1f2632 100%)"></span>
+                        <div class="row justify-content-center position-relative z-2">
+                            <div class="col-xl-5 col-xxl-4 offset-xxl-1 d-flex align-items-center mt-xl-n3">
+
+                                <!-- Text content master slider -->
+                                <div class="swiper px-5 pe-xl-0 ps-xxl-0 me-xl-n5"
+                                    data-swiper='{
+                    "spaceBetween": 64,
+                    "loop": true,
+                    "speed": 400,
+                    "controlSlider": "#sliderImages",
+                    "autoplay": {
+                      "delay": 5500,
+                      "disableOnInteraction": false
+                    },
+                    "scrollbar": {
+                      "el": ".swiper-scrollbar"
+                    }
+                  }'>
+                                    <div class="swiper-wrapper">
+                                        <div class="swiper-slide text-center text-xl-start pt-5 py-xl-5">
+                                            <p class="text-body">Feel the real quality sound</p>
+                                            <h2 class="display-4 pb-2 pb-xl-4">Headphones ProMax</h2>
+                                            <a class="btn btn-lg btn-primary" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                                Shop now
+                                                <i class="ci-arrow-up-right fs-lg ms-2 me-n1"></i>
+                                            </a>
+                                        </div>
+                                        <div class="swiper-slide text-center text-xl-start pt-5 py-xl-5">
+                                            <p class="text-body">Deal of the week</p>
+                                            <h2 class="display-4 pb-2 pb-xl-4">Powerful iPad Pro M2</h2>
+                                            <a class="btn btn-lg btn-primary" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                                Shop now
+                                                <i class="ci-arrow-up-right fs-lg ms-2 me-n1"></i>
+                                            </a>
+                                        </div>
+                                        <div class="swiper-slide text-center text-xl-start pt-5 py-xl-5">
+                                            <p class="text-body">Virtual reality glasses</p>
+                                            <h2 class="display-4 pb-2 pb-xl-4">Experience New Reality</h2>
+                                            <a class="btn btn-lg btn-primary" href="{{ route('second', ['shop', 'catalog-electronics']) }}">
+                                                Shop now
+                                                <i class="ci-arrow-up-right fs-lg ms-2 me-n1"></i>
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="col-9 col-sm-7 col-md-6 col-lg-5 col-xl-7">
+
+                                <!-- Binded images (controlled slider) -->
+                                <div class="swiper user-select-none" id="sliderImages"
+                                    data-swiper='{
+                    "allowTouchMove": false,
+                    "loop": true,
+                    "effect": "fade",
+                    "fadeEffect": {
+                      "crossFade": true
+                    }
+                  }'>
+                                    <div class="swiper-wrapper">
+                                        <div class="swiper-slide d-flex justify-content-end">
+                                            <div class="ratio rtl-flip"
+                                                style="max-width: 495px; --cz-aspect-ratio: calc(537 / 495 * 100%)">
+                                                <img src="/img/home/electronics/hero-slider/01.png" alt="Image">
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide d-flex justify-content-end">
+                                            <div class="ratio rtl-flip"
+                                                style="max-width: 495px; --cz-aspect-ratio: calc(537 / 495 * 100%)">
+                                                <img src="/img/home/electronics/hero-slider/02.png" alt="Image">
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide d-flex justify-content-end">
+                                            <div class="ratio rtl-flip"
+                                                style="max-width: 495px; --cz-aspect-ratio: calc(537 / 495 * 100%)">
+                                                <img src="/img/home/electronics/hero-slider/03.png" alt="Image">
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Scrollbar -->
+                        <div class="row justify-content-center" data-bs-theme="dark">
+                            <div class="col-xxl-10">
+                                <div class="position-relative mx-5 mx-xxl-0">
+                                    <div class="swiper-scrollbar mb-4"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Features -->
+        <section class="container pt-5 mt-1 mt-sm-3 mt-lg-4">
+            <div class="row row-cols-2 row-cols-md-4 g-4">
+
+                <!-- Item -->
+                <div class="col">
+                    <div class="d-flex flex-column flex-xxl-row align-items-center">
+                        <div class="d-flex text-dark-emphasis bg-body-tertiary rounded-circle p-4 mb-3 mb-xxl-0">
+                            <i class="ci-delivery fs-2 m-xxl-1"></i>
+                        </div>
+                        <div class="text-center text-xxl-start ps-xxl-3">
+                            <h3 class="h6 mb-1">Free Shipping &amp; Returns</h3>
+                            <p class="fs-sm mb-0">For all orders over $199.00</p>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Item -->
+                <div class="col">
+                    <div class="d-flex flex-column flex-xxl-row align-items-center">
+                        <div class="d-flex text-dark-emphasis bg-body-tertiary rounded-circle p-4 mb-3 mb-xxl-0">
+                            <i class="ci-credit-card fs-2 m-xxl-1"></i>
+                        </div>
+                        <div class="text-center text-xxl-start ps-xxl-3">
+                            <h3 class="h6 mb-1">Secure Payment</h3>
+                            <p class="fs-sm mb-0">We ensure secure payment</p>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Item -->
+                <div class="col">
+                    <div class="d-flex flex-column flex-xxl-row align-items-center">
+                        <div class="d-flex text-dark-emphasis bg-body-tertiary rounded-circle p-4 mb-3 mb-xxl-0">
+                            <i class="ci-refresh-cw fs-2 m-xxl-1"></i>
+                        </div>
+                        <div class="text-center text-xxl-start ps-xxl-3">
+                            <h3 class="h6 mb-1">Money Back Guarantee</h3>
+                            <p class="fs-sm mb-0">Returning money 30 days</p>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Item -->
+                <div class="col">
+                    <div class="d-flex flex-column flex-xxl-row align-items-center">
+                        <div class="d-flex text-dark-emphasis bg-body-tertiary rounded-circle p-4 mb-3 mb-xxl-0">
+                            <i class="ci-chat fs-2 m-xxl-1"></i>
+                        </div>
+                        <div class="text-center text-xxl-start ps-xxl-3">
+                            <h3 class="h6 mb-1">24/7 Customer Support</h3>
+                            <p class="fs-sm mb-0">Friendly customer support</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- New arrivals (List) -->
+        <section class="container pt-5 mt-1 mt-sm-2 mt-md-3 mt-lg-4">
+            <h2 class="h3 pb-2 pb-sm-3">New arrivals</h2>
+            <div class="row">
+
+                <!-- Banner -->
+                <div class="col-lg-4" data-bs-theme="dark">
+                    <div class="d-flex flex-column align-items-center justify-content-end h-100 text-center overflow-hidden rounded-5 px-4 px-lg-3 pt-4 pb-5"
+                        style="background: #1d2c41 url(/img/home/electronics/banner/background.jpg) center/cover no-repeat">
+                        <div class="ratio animate-up-down position-relative z-2 me-lg-4"
+                            style="max-width: 320px; margin-bottom: -19%; --cz-aspect-ratio: calc(690 / 640 * 100%)">
+                            <img src="/img/home/electronics/banner/laptop.png" alt="Laptop">
+                        </div>
+                        <h3 class="display-2 mb-2">MacBook</h3>
+                        <p class="text-body fw-medium mb-4">Be Pro Anywhere</p>
+                        <a class="btn btn-sm btn-primary" href="#!">
+                            From $1,199
+                            <i class="ci-arrow-up-right fs-base ms-1 me-n1"></i>
+                        </a>
+                    </div>
+                </div>
+
+                <!-- Product list -->
+                <div class="col-sm-6 col-lg-4 d-flex flex-column gap-3 pt-4 py-lg-4">
+
+                    <!-- Item -->
+                    <div class="position-relative animate-underline d-flex align-items-center ps-xl-3">
+                        <div class="ratio ratio-1x1 flex-shrink-0" style="width: 110px">
+                            <img src="/img/shop/electronics/thumbs/01.png" alt="Smart Watch">
+                        </div>
+                        <div class="w-100 min-w-0 ps-2 ps-sm-3">
+                            <div class="d-flex align-items-center gap-2 mb-2">
+                                <div class="d-flex gap-1 fs-xs">
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                </div>
+                                <span class="text-body-tertiary fs-xs">45</span>
+                            </div>
+                            <h4 class="mb-2">
+                                <a class="stretched-link d-block fs-sm fw-medium text-truncate"
+                                    href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                    <span class="animate-target">Smart Watch Series 7, White</span>
+                                </a>
+                            </h4>
+                            <div class="h5 mb-0">$449.00</div>
+                        </div>
+                    </div>
+
+                    <!-- Item -->
+                    <div class="position-relative animate-underline d-flex align-items-center ps-xl-3">
+                        <div class="ratio ratio-1x1 flex-shrink-0" style="width: 110px">
+                            <img src="/img/shop/electronics/thumbs/03.png" width="110" alt="VR Glasses">
+                        </div>
+                        <div class="w-100 min-w-0 ps-2 ps-sm-3">
+                            <div class="d-flex align-items-center gap-2 mb-2">
+                                <div class="d-flex gap-1 fs-xs">
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-half text-warning"></i>
+                                    <i class="ci-star text-body-tertiary opacity-75"></i>
+                                </div>
+                                <span class="text-body-tertiary fs-xs">123</span>
+                            </div>
+                            <h4 class="mb-2">
+                                <a class="stretched-link d-block fs-sm fw-medium text-truncate"
+                                    href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                    <span class="animate-target">VRB01 Virtual Reality Glasses</span>
+                                </a>
+                            </h4>
+                            <div class="h5 mb-0">$340.99</div>
+                        </div>
+                    </div>
+
+                    <!-- Item -->
+                    <div class="position-relative animate-underline d-flex align-items-center ps-xl-3">
+                        <div class="ratio ratio-1x1 flex-shrink-0" style="width: 110px">
+                            <img src="/img/shop/electronics/thumbs/05.png" width="110"
+                                alt="Bluetooth Headphones">
+                        </div>
+                        <div class="w-100 min-w-0 ps-2 ps-sm-3">
+                            <div class="d-flex align-items-center gap-2 mb-2">
+                                <div class="d-flex gap-1 fs-xs">
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star text-body-tertiary opacity-75"></i>
+                                </div>
+                                <span class="text-body-tertiary fs-xs">34</span>
+                            </div>
+                            <h4 class="mb-2">
+                                <a class="stretched-link d-block fs-sm fw-medium text-truncate"
+                                    href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                    <span class="animate-target">Wireless Bluetooth Headphones Sony</span>
+                                </a>
+                            </h4>
+                            <div class="h5 mb-0">$357.00</div>
+                        </div>
+                    </div>
+
+                    <!-- Item -->
+                    <div class="position-relative animate-underline d-flex align-items-center ps-xl-3">
+                        <div class="ratio ratio-1x1 flex-shrink-0" style="width: 110px">
+                            <img src="/img/shop/electronics/thumbs/07.png" width="110" alt="MacBook">
+                        </div>
+                        <div class="w-100 min-w-0 ps-2 ps-sm-3">
+                            <div class="d-flex align-items-center gap-2 mb-2">
+                                <div class="d-flex gap-1 fs-xs">
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                </div>
+                                <span class="text-body-tertiary fs-xs">34</span>
+                            </div>
+                            <h4 class="mb-2">
+                                <a class="stretched-link d-block fs-sm fw-medium text-truncate"
+                                    href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                    <span class="animate-target">Laptop Apple MacBook Pro 13 M2</span>
+                                </a>
+                            </h4>
+                            <div class="h5 mb-0">$1,200.00</div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Product list -->
+                <div class="col-sm-6 col-lg-4 d-flex flex-column gap-3 pt-3 py-lg-4">
+
+                    <!-- Item -->
+                    <div class="position-relative animate-underline d-flex align-items-center ps-xl-3">
+                        <div class="ratio ratio-1x1 flex-shrink-0" style="width: 110px">
+                            <img src="/img/shop/electronics/thumbs/02.png" width="110" alt="iPad Pro">
+                        </div>
+                        <div class="w-100 min-w-0 ps-2 ps-sm-3">
+                            <div class="d-flex align-items-center gap-2 mb-2">
+                                <div class="d-flex gap-1 fs-xs">
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star text-body-tertiary opacity-75"></i>
+                                </div>
+                                <span class="text-body-tertiary fs-xs">126</span>
+                            </div>
+                            <h4 class="mb-2">
+                                <a class="stretched-link d-block fs-sm fw-medium text-truncate"
+                                    href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                    <span class="animate-target">Tablet Apple iPad Air M1</span>
+                                </a>
+                            </h4>
+                            <div class="h5 mb-0">$540.00</div>
+                        </div>
+                    </div>
+
+                    <!-- Item -->
+                    <div class="position-relative animate-underline d-flex align-items-center ps-xl-3">
+                        <div class="ratio ratio-1x1 flex-shrink-0" style="width: 110px">
+                            <img src="/img/shop/electronics/thumbs/04.png" width="110" alt="AirPods 2 Pro">
+                        </div>
+                        <div class="w-100 min-w-0 ps-2 ps-sm-3">
+                            <div class="d-flex align-items-center gap-2 mb-2">
+                                <div class="d-flex gap-1 fs-xs">
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                </div>
+                                <span class="text-body-tertiary fs-xs">340</span>
+                            </div>
+                            <h4 class="mb-2">
+                                <a class="stretched-link d-block fs-sm fw-medium text-truncate"
+                                    href="{{ route('second', ['shop', 'product-general-electronics']) }}"><span class="animate-target">Headphones
+                                        Apple AirPods 2 Pro</span></a>
+                            </h4>
+                            <div class="h5 mb-0">$209.99 <del class="text-body-tertiary fs-sm fw-normal">$356.00</del>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Item -->
+                    <div class="position-relative animate-underline d-flex align-items-center ps-xl-3">
+                        <div class="ratio ratio-1x1 flex-shrink-0" style="width: 110px">
+                            <img src="/img/shop/electronics/thumbs/06.png" width="110" alt="Power Bank">
+                        </div>
+                        <div class="w-100 min-w-0 ps-2 ps-sm-3">
+                            <div class="d-flex align-items-center gap-2 mb-2">
+                                <div class="d-flex gap-1 fs-xs">
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star text-body-tertiary opacity-75"></i>
+                                </div>
+                                <span class="text-body-tertiary fs-xs">29</span>
+                            </div>
+                            <h4 class="mb-2">
+                                <a class="stretched-link d-block fs-sm fw-medium text-truncate"
+                                    href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                    <span class="animate-target">Power Bank PBS 10000 mAh Black</span>
+                                </a>
+                            </h4>
+                            <div class="h5 mb-0">$49.99</div>
+                        </div>
+                    </div>
+
+                    <!-- Item -->
+                    <div class="position-relative animate-underline d-flex align-items-center ps-xl-3">
+                        <div class="ratio ratio-1x1 flex-shrink-0" style="width: 110px">
+                            <img src="/img/shop/electronics/thumbs/08.png" width="110" alt="iPhone 14">
+                        </div>
+                        <div class="w-100 min-w-0 ps-2 ps-sm-3">
+                            <div class="d-flex align-items-center gap-2 mb-2">
+                                <div class="d-flex gap-1 fs-xs">
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                </div>
+                                <span class="text-body-tertiary fs-xs">12</span>
+                            </div>
+                            <h4 class="mb-2">
+                                <a class="stretched-link d-block fs-sm fw-medium text-truncate"
+                                    href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                    <span class="animate-target">Apple iPhone 14 128GB White</span>
+                                </a>
+                            </h4>
+                            <div class="h5 mb-0">$899.00 <del class="text-body-tertiary fs-sm fw-normal">$958.00</del>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Trending products (Grid) -->
+        <section class="container pt-5 mt-2 mt-sm-3 mt-lg-4">
+
+            <!-- Heading -->
+            <div class="d-flex align-items-center justify-content-between border-bottom pb-3 pb-md-4">
+                <h2 class="h3 mb-0">Trending products</h2>
+                <div class="nav ms-3">
+                    <a class="nav-link animate-underline px-0 py-2" href="{{ route('second', ['shop', 'catalog-electronics']) }}">
+                        <span class="animate-target">View all</span>
+                        <i class="ci-chevron-right fs-base ms-1"></i>
+                    </a>
+                </div>
+            </div>
+
+            <!-- Product grid -->
+            <div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 g-4 pt-4">
+
+                <!-- Item -->
+                <div class="col">
+                    <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+                        <div class="position-relative">
+                            <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                                <div class="d-flex flex-column gap-2">
+                                    <button type="button"
+                                        class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex"
+                                        aria-label="Add to Wishlist">
+                                        <i class="ci-heart fs-base animate-target"></i>
+                                    </button>
+                                    <button type="button"
+                                        class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex"
+                                        aria-label="Compare">
+                                        <i class="ci-refresh-cw fs-base animate-target"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                                <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body"
+                                    data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                                    <i class="ci-more-vertical fs-lg"></i>
+                                </button>
+                                <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                                    <li>
+                                        <a class="dropdown-item" href="#!">
+                                            <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                                            Add to Wishlist
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a class="dropdown-item" href="#!">
+                                            <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                                            Compare
+                                        </a>
+                                    </li>
+                                </ul>
+                            </div>
+                            <a class="d-block rounded-top overflow-hidden p-3 p-sm-4"
+                                href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                <span
+                                    class="badge bg-danger position-absolute top-0 start-0 mt-2 ms-2 mt-lg-3 ms-lg-3">-21%</span>
+                                <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                                    <img src="/img/shop/electronics/01.png" alt="VR Glasses">
+                                </div>
+                            </a>
+                        </div>
+                        <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                            <div class="d-flex align-items-center gap-2 mb-2">
+                                <div class="d-flex gap-1 fs-xs">
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star text-body-tertiary opacity-75"></i>
+                                </div>
+                                <span class="text-body-tertiary fs-xs">(123)</span>
+                            </div>
+                            <h3 class="pb-1 mb-2">
+                                <a class="d-block fs-sm fw-medium text-truncate"
+                                    href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                    <span class="animate-target">VRB01 Virtual Reality Glasses</span>
+                                </a>
+                            </h3>
+                            <div class="d-flex align-items-center justify-content-between">
+                                <div class="h5 lh-1 mb-0">$340.99 <del
+                                        class="text-body-tertiary fs-sm fw-normal">$430.00</del></div>
+                                <button type="button"
+                                    class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2"
+                                    aria-label="Add to Cart">
+                                    <i class="ci-shopping-cart fs-base animate-target"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <div
+                            class="product-card-details position-absolute top-100 start-0 w-100 bg-body rounded-bottom shadow mt-n2 p-3 pt-1">
+                            <span class="position-absolute top-0 start-0 w-100 bg-body mt-n2 py-2"></span>
+                            <ul class="list-unstyled d-flex flex-column gap-2 m-0">
+                                <li class="d-flex align-items-center">
+                                    <span class="fs-xs">Display:</span>
+                                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                                    <span class="text-dark-emphasis fs-xs fw-medium text-end">OLED 1440x1600</span>
+                                </li>
+                                <li class="d-flex align-items-center">
+                                    <span class="fs-xs">Graphics:</span>
+                                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                                    <span class="text-dark-emphasis fs-xs fw-medium text-end">Adreno 540</span>
+                                </li>
+                                <li class="d-flex align-items-center">
+                                    <span class="fs-xs">Sound:</span>
+                                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                                    <span class="text-dark-emphasis fs-xs fw-medium text-end">2x3.5mm jack</span>
+                                </li>
+                                <li class="d-flex align-items-center">
+                                    <span class="fs-xs">Input:</span>
+                                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                                    <span class="text-dark-emphasis fs-xs fw-medium text-end">4 built-in cameras</span>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Item -->
+                <div class="col">
+                    <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+                        <div class="position-relative">
+                            <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                                <div class="d-flex flex-column gap-2">
+                                    <button type="button"
+                                        class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex"
+                                        aria-label="Add to Wishlist">
+                                        <i class="ci-heart fs-base animate-target"></i>
+                                    </button>
+                                    <button type="button"
+                                        class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex"
+                                        aria-label="Compare">
+                                        <i class="ci-refresh-cw fs-base animate-target"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                                <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body"
+                                    data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                                    <i class="ci-more-vertical fs-lg"></i>
+                                </button>
+                                <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                                    <li>
+                                        <a class="dropdown-item" href="#!">
+                                            <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                                            Add to Wishlist
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a class="dropdown-item" href="#!">
+                                            <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                                            Compare
+                                        </a>
+                                    </li>
+                                </ul>
+                            </div>
+                            <a class="d-block rounded-top overflow-hidden p-3 p-sm-4"
+                                href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                                    <img src="/img/shop/electronics/02.png" alt="iPhone 14">
+                                </div>
+                            </a>
+                        </div>
+                        <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                            <div class="d-flex align-items-center gap-2 mb-2">
+                                <div class="d-flex gap-1 fs-xs">
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-half text-warning"></i>
+                                </div>
+                                <span class="text-body-tertiary fs-xs">(142)</span>
+                            </div>
+                            <h3 class="pb-1 mb-2">
+                                <a class="d-block fs-sm fw-medium text-truncate"
+                                    href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                    <span class="animate-target">Apple iPhone 14 128GB White</span>
+                                </a>
+                            </h3>
+                            <div class="d-flex align-items-center justify-content-between">
+                                <div class="h5 lh-1 mb-0">$899.00</div>
+                                <button type="button"
+                                    class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2"
+                                    aria-label="Add to Cart">
+                                    <i class="ci-shopping-cart fs-base animate-target"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <div
+                            class="product-card-details position-absolute top-100 start-0 w-100 bg-body rounded-bottom shadow mt-n2 p-3 pt-1">
+                            <span class="position-absolute top-0 start-0 w-100 bg-body mt-n2 py-2"></span>
+                            <ul class="list-unstyled d-flex flex-column gap-2 m-0">
+                                <li class="d-flex align-items-center">
+                                    <span class="fs-xs">Display:</span>
+                                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                                    <span class="text-dark-emphasis fs-xs fw-medium text-end">6.1" XDR</span>
+                                </li>
+                                <li class="d-flex align-items-center">
+                                    <span class="fs-xs">Capacity:</span>
+                                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                                    <span class="text-dark-emphasis fs-xs fw-medium text-end">128 GB</span>
+                                </li>
+                                <li class="d-flex align-items-center">
+                                    <span class="fs-xs">Chip:</span>
+                                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                                    <span class="text-dark-emphasis fs-xs fw-medium text-end">A15 Bionic</span>
+                                </li>
+                                <li class="d-flex align-items-center">
+                                    <span class="fs-xs">Camera:</span>
+                                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                                    <span class="text-dark-emphasis fs-xs fw-medium text-end">12 + 12 MP</span>
+                                </li>
+                                <li class="d-flex align-items-center">
+                                    <span class="fs-xs">Weight:</span>
+                                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                                    <span class="text-dark-emphasis fs-xs fw-medium text-end">172 grams</span>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Item -->
+                <div class="col">
+                    <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+                        <div class="position-relative">
+                            <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                                <div class="d-flex flex-column gap-2">
+                                    <button type="button"
+                                        class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex"
+                                        aria-label="Add to Wishlist">
+                                        <i class="ci-heart fs-base animate-target"></i>
+                                    </button>
+                                    <button type="button"
+                                        class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex"
+                                        aria-label="Compare">
+                                        <i class="ci-refresh-cw fs-base animate-target"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                                <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body"
+                                    data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                                    <i class="ci-more-vertical fs-lg"></i>
+                                </button>
+                                <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                                    <li>
+                                        <a class="dropdown-item" href="#!">
+                                            <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                                            Add to Wishlist
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a class="dropdown-item" href="#!">
+                                            <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                                            Compare
+                                        </a>
+                                    </li>
+                                </ul>
+                            </div>
+                            <a class="d-block rounded-top overflow-hidden p-3 p-sm-4"
+                                href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                                    <img src="/img/shop/electronics/03.png" alt="Smart Watch">
+                                </div>
+                            </a>
+                        </div>
+                        <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                            <div class="d-flex align-items-center gap-2 mb-2">
+                                <div class="d-flex gap-1 fs-xs">
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                </div>
+                                <span class="text-body-tertiary fs-xs">(67)</span>
+                            </div>
+                            <h3 class="pb-1 mb-2">
+                                <a class="d-block fs-sm fw-medium text-truncate"
+                                    href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                    <span class="animate-target">Smart Watch Series 7, White</span>
+                                </a>
+                            </h3>
+                            <div class="d-flex align-items-center justify-content-between">
+                                <div class="h5 lh-1 mb-0">$429.00</div>
+                                <button type="button"
+                                    class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2"
+                                    aria-label="Add to Cart">
+                                    <i class="ci-shopping-cart fs-base animate-target"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <div
+                            class="product-card-details position-absolute top-100 start-0 w-100 bg-body rounded-bottom shadow mt-n2 p-3 pt-1">
+                            <span class="position-absolute top-0 start-0 w-100 bg-body mt-n2 py-2"></span>
+                            <ul class="list-unstyled d-flex flex-column gap-2 m-0">
+                                <li class="d-flex align-items-center">
+                                    <span class="fs-xs">Display:</span>
+                                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                                    <span class="text-dark-emphasis fs-xs fw-medium text-end">45mm OLED</span>
+                                </li>
+                                <li class="d-flex align-items-center">
+                                    <span class="fs-xs">Chip:</span>
+                                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                                    <span class="text-dark-emphasis fs-xs fw-medium text-end">64-bit Dual-core</span>
+                                </li>
+                                <li class="d-flex align-items-center">
+                                    <span class="fs-xs">Connectivity:</span>
+                                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                                    <span class="text-dark-emphasis fs-xs fw-medium text-end">Wi-Fi, Bluetooth</span>
+                                </li>
+                                <li class="d-flex align-items-center">
+                                    <span class="fs-xs">Power:</span>
+                                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                                    <span class="text-dark-emphasis fs-xs fw-medium text-end">Lithium-ion battery</span>
+                                </li>
+                                <li class="d-flex align-items-center">
+                                    <span class="fs-xs">Weight:</span>
+                                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                                    <span class="text-dark-emphasis fs-xs fw-medium text-end">37.0 grams</span>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Item -->
+                <div class="col">
+                    <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+                        <div class="position-relative">
+                            <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                                <div class="d-flex flex-column gap-2">
+                                    <button type="button"
+                                        class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex"
+                                        aria-label="Add to Wishlist">
+                                        <i class="ci-heart fs-base animate-target"></i>
+                                    </button>
+                                    <button type="button"
+                                        class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex"
+                                        aria-label="Compare">
+                                        <i class="ci-refresh-cw fs-base animate-target"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                                <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body"
+                                    data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                                    <i class="ci-more-vertical fs-lg"></i>
+                                </button>
+                                <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                                    <li>
+                                        <a class="dropdown-item" href="#!">
+                                            <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                                            Add to Wishlist
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a class="dropdown-item" href="#!">
+                                            <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                                            Compare
+                                        </a>
+                                    </li>
+                                </ul>
+                            </div>
+                            <a class="d-block rounded-top overflow-hidden p-3 p-sm-4"
+                                href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                <span
+                                    class="badge bg-info position-absolute top-0 start-0 mt-2 ms-2 mt-lg-3 ms-lg-3">New</span>
+                                <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                                    <img src="/img/shop/electronics/04.png" alt="MacBook">
+                                </div>
+                            </a>
+                        </div>
+                        <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                            <div class="d-flex align-items-center gap-2 mb-2">
+                                <div class="d-flex gap-1 fs-xs">
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-half text-warning"></i>
+                                </div>
+                                <span class="text-body-tertiary fs-xs">(51)</span>
+                            </div>
+                            <h3 class="pb-1 mb-2">
+                                <a class="d-block fs-sm fw-medium text-truncate"
+                                    href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                    <span class="animate-target">Laptop Apple MacBook Pro 13 M2</span>
+                                </a>
+                            </h3>
+                            <div class="d-flex align-items-center justify-content-between">
+                                <div class="h5 lh-1 mb-0">$1,200.00</div>
+                                <button type="button"
+                                    class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2"
+                                    aria-label="Add to Cart">
+                                    <i class="ci-shopping-cart fs-base animate-target"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <div
+                            class="product-card-details position-absolute top-100 start-0 w-100 bg-body rounded-bottom shadow mt-n2 p-3 pt-1">
+                            <span class="position-absolute top-0 start-0 w-100 bg-body mt-n2 py-2"></span>
+                            <ul class="list-unstyled d-flex flex-column gap-2 m-0">
+                                <li class="d-flex align-items-center">
+                                    <span class="fs-xs">Chip:</span>
+                                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                                    <span class="text-dark-emphasis fs-xs fw-medium text-end">Apple M2</span>
+                                </li>
+                                <li class="d-flex align-items-center">
+                                    <span class="fs-xs">Memory:</span>
+                                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                                    <span class="text-dark-emphasis fs-xs fw-medium text-end">8 GB unified</span>
+                                </li>
+                                <li class="d-flex align-items-center">
+                                    <span class="fs-xs">Storage:</span>
+                                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                                    <span class="text-dark-emphasis fs-xs fw-medium text-end">256 GB SSD</span>
+                                </li>
+                                <li class="d-flex align-items-center">
+                                    <span class="fs-xs">Display:</span>
+                                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                                    <span class="text-dark-emphasis fs-xs fw-medium text-end">13.3-inch Retina</span>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Item -->
+                <div class="col">
+                    <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+                        <div class="posittion-relative">
+                            <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                                <div class="d-flex flex-column gap-2">
+                                    <button type="button"
+                                        class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex"
+                                        aria-label="Add to Wishlist">
+                                        <i class="ci-heart fs-base animate-target"></i>
+                                    </button>
+                                    <button type="button"
+                                        class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex"
+                                        aria-label="Compare">
+                                        <i class="ci-refresh-cw fs-base animate-target"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                                <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body"
+                                    data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                                    <i class="ci-more-vertical fs-lg"></i>
+                                </button>
+                                <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                                    <li>
+                                        <a class="dropdown-item" href="#!">
+                                            <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                                            Add to Wishlist
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a class="dropdown-item" href="#!">
+                                            <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                                            Compare
+                                        </a>
+                                    </li>
+                                </ul>
+                            </div>
+                            <a class="d-block rounded-top overflow-hidden p-3 p-sm-4"
+                                href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                                    <img src="/img/shop/electronics/05.png" alt="iPad Air">
+                                </div>
+                            </a>
+                        </div>
+                        <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                            <div class="d-flex align-items-center gap-2 mb-2">
+                                <div class="d-flex gap-1 fs-xs">
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                </div>
+                                <span class="text-body-tertiary fs-xs">(12)</span>
+                            </div>
+                            <h3 class="pb-1 mb-2">
+                                <a class="d-block fs-sm fw-medium text-truncate"
+                                    href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                    <span class="animate-target">Tablet Apple iPad Air M1</span>
+                                </a>
+                            </h3>
+                            <div class="d-flex align-items-center justify-content-between">
+                                <div class="h5 lh-1 mb-0">$540.00</div>
+                                <button type="button"
+                                    class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2"
+                                    aria-label="Add to Cart">
+                                    <i class="ci-shopping-cart fs-base animate-target"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <div
+                            class="product-card-details position-absolute top-100 start-0 w-100 bg-body rounded-bottom shadow mt-n2 p-3 pt-1">
+                            <span class="position-absolute top-0 start-0 w-100 bg-body mt-n2 py-2"></span>
+                            <ul class="list-unstyled d-flex flex-column gap-2 m-0">
+                                <li class="d-flex align-items-center">
+                                    <span class="fs-xs">Display:</span>
+                                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                                    <span class="text-dark-emphasis fs-xs fw-medium text-end">10.9" LED</span>
+                                </li>
+                                <li class="d-flex align-items-center">
+                                    <span class="fs-xs">Capacity:</span>
+                                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                                    <span class="text-dark-emphasis fs-xs fw-medium text-end">64 GB</span>
+                                </li>
+                                <li class="d-flex align-items-center">
+                                    <span class="fs-xs">Chip:</span>
+                                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                                    <span class="text-dark-emphasis fs-xs fw-medium text-end">Apple M1</span>
+                                </li>
+                                <li class="d-flex align-items-center">
+                                    <span class="fs-xs">Camera:</span>
+                                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                                    <span class="text-dark-emphasis fs-xs fw-medium text-end">12 MP Wide</span>
+                                </li>
+                                <li class="d-flex align-items-center">
+                                    <span class="fs-xs">Weight:</span>
+                                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                                    <span class="text-dark-emphasis fs-xs fw-medium text-end">462 grams</span>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Item -->
+                <div class="col">
+                    <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+                        <div class="position-relative">
+                            <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                                <div class="d-flex flex-column gap-2">
+                                    <button type="button"
+                                        class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex"
+                                        aria-label="Add to Wishlist">
+                                        <i class="ci-heart fs-base animate-target"></i>
+                                    </button>
+                                    <button type="button"
+                                        class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex"
+                                        aria-label="Compare">
+                                        <i class="ci-refresh-cw fs-base animate-target"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                                <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body"
+                                    data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                                    <i class="ci-more-vertical fs-lg"></i>
+                                </button>
+                                <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                                    <li>
+                                        <a class="dropdown-item" href="#!">
+                                            <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                                            Add to Wishlist
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a class="dropdown-item" href="#!">
+                                            <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                                            Compare
+                                        </a>
+                                    </li>
+                                </ul>
+                            </div>
+                            <a class="d-block rounded-top overflow-hidden p-3 p-sm-4"
+                                href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                                    <img src="/img/shop/electronics/06.png" alt="AirPods 2">
+                                </div>
+                            </a>
+                        </div>
+                        <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                            <div class="d-flex align-items-center gap-2 mb-2">
+                                <div class="d-flex gap-1 fs-xs">
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star text-body-tertiary opacity-75"></i>
+                                </div>
+                                <span class="text-body-tertiary fs-xs">(78)</span>
+                            </div>
+                            <h3 class="pb-1 mb-2">
+                                <a class="d-block fs-sm fw-medium text-truncate"
+                                    href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                    <span class="animate-target">Headphones Apple AirPods 2 Pro</span>
+                                </a>
+                            </h3>
+                            <div class="d-flex align-items-center justify-content-between">
+                                <div class="h5 lh-1 mb-0">$224.00</div>
+                                <button type="button"
+                                    class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2"
+                                    aria-label="Add to Cart">
+                                    <i class="ci-shopping-cart fs-base animate-target"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <div
+                            class="product-card-details position-absolute top-100 start-0 w-100 bg-body rounded-bottom shadow mt-n2 p-3 pt-1">
+                            <span class="position-absolute top-0 start-0 w-100 bg-body mt-n2 py-2"></span>
+                            <ul class="list-unstyled d-flex flex-column gap-2 m-0">
+                                <li class="d-flex align-items-center">
+                                    <span class="fs-xs">Audio:</span>
+                                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                                    <span class="text-dark-emphasis fs-xs fw-medium text-end">Noise Cancellation</span>
+                                </li>
+                                <li class="d-flex align-items-center">
+                                    <span class="fs-xs">Sensors:</span>
+                                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                                    <span class="text-dark-emphasis fs-xs fw-medium text-end">Touch control</span>
+                                </li>
+                                <li class="d-flex align-items-center">
+                                    <span class="fs-xs">Chip:</span>
+                                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                                    <span class="text-dark-emphasis fs-xs fw-medium text-end">Apple H2</span>
+                                </li>
+                                <li class="d-flex align-items-center">
+                                    <span class="fs-xs">Weight:</span>
+                                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                                    <span class="text-dark-emphasis fs-xs fw-medium text-end">50.8 grams</span>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Item -->
+                <div class="col">
+                    <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+                        <div class="posittion-relative">
+                            <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                                <div class="d-flex flex-column gap-2">
+                                    <button type="button"
+                                        class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex"
+                                        aria-label="Add to Wishlist">
+                                        <i class="ci-heart fs-base animate-target"></i>
+                                    </button>
+                                    <button type="button"
+                                        class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex"
+                                        aria-label="Compare">
+                                        <i class="ci-refresh-cw fs-base animate-target"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                                <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body"
+                                    data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                                    <i class="ci-more-vertical fs-lg"></i>
+                                </button>
+                                <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                                    <li>
+                                        <a class="dropdown-item" href="#!">
+                                            <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                                            Add to Wishlist
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a class="dropdown-item" href="#!">
+                                            <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                                            Compare
+                                        </a>
+                                    </li>
+                                </ul>
+                            </div>
+                            <a class="d-block rounded-top overflow-hidden p-3 p-sm-4"
+                                href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                                    <img src="/img/shop/electronics/07.png" alt="iPad Pro">
+                                </div>
+                            </a>
+                        </div>
+                        <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                            <div class="d-flex align-items-center gap-2 mb-2">
+                                <div class="d-flex gap-1 fs-xs">
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-half text-warning"></i>
+                                </div>
+                                <span class="text-body-tertiary fs-xs">(49)</span>
+                            </div>
+                            <h3 class="pb-1 mb-2">
+                                <a class="d-block fs-sm fw-medium text-truncate"
+                                    href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                    <span class="animate-target">Tablet Apple iPad Pro M1</span>
+                                </a>
+                            </h3>
+                            <div class="d-flex align-items-center justify-content-between">
+                                <div class="h5 lh-1 mb-0">$739.00</div>
+                                <button type="button"
+                                    class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2"
+                                    aria-label="Add to Cart">
+                                    <i class="ci-shopping-cart fs-base animate-target"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <div
+                            class="product-card-details position-absolute top-100 start-0 w-100 bg-body rounded-bottom shadow mt-n2 p-3 pt-1">
+                            <span class="position-absolute top-0 start-0 w-100 bg-body mt-n2 py-2"></span>
+                            <ul class="list-unstyled d-flex flex-column gap-2 m-0">
+                                <li class="d-flex align-items-center">
+                                    <span class="fs-xs">Display:</span>
+                                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                                    <span class="text-dark-emphasis fs-xs fw-medium text-end">11" LED</span>
+                                </li>
+                                <li class="d-flex align-items-center">
+                                    <span class="fs-xs">Capacity:</span>
+                                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                                    <span class="text-dark-emphasis fs-xs fw-medium text-end">128 GB</span>
+                                </li>
+                                <li class="d-flex align-items-center">
+                                    <span class="fs-xs">Chip:</span>
+                                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                                    <span class="text-dark-emphasis fs-xs fw-medium text-end">Apple M1</span>
+                                </li>
+                                <li class="d-flex align-items-center">
+                                    <span class="fs-xs">Camera:</span>
+                                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                                    <span class="text-dark-emphasis fs-xs fw-medium text-end">12 MP Wide</span>
+                                </li>
+                                <li class="d-flex align-items-center">
+                                    <span class="fs-xs">Weight:</span>
+                                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                                    <span class="text-dark-emphasis fs-xs fw-medium text-end">470 grams</span>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Item -->
+                <div class="col">
+                    <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+                        <div class="posittion-relative">
+                            <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                                <div class="d-flex flex-column gap-2">
+                                    <button type="button"
+                                        class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex"
+                                        aria-label="Add to Wishlist">
+                                        <i class="ci-heart fs-base animate-target"></i>
+                                    </button>
+                                    <button type="button"
+                                        class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex"
+                                        aria-label="Compare">
+                                        <i class="ci-refresh-cw fs-base animate-target"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                                <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body"
+                                    data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                                    <i class="ci-more-vertical fs-lg"></i>
+                                </button>
+                                <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                                    <li>
+                                        <a class="dropdown-item" href="#!">
+                                            <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                                            Add to Wishlist
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a class="dropdown-item" href="#!">
+                                            <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                                            Compare
+                                        </a>
+                                    </li>
+                                </ul>
+                            </div>
+                            <a class="d-block rounded-top overflow-hidden p-3 p-sm-4"
+                                href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                                    <img src="/img/shop/electronics/08.png" alt="Bluetooth Headphones">
+                                </div>
+                            </a>
+                        </div>
+                        <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                            <div class="d-flex align-items-center gap-2 mb-2">
+                                <div class="d-flex gap-1 fs-xs">
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-half text-warning"></i>
+                                    <i class="ci-star text-body-tertiary opacity-75"></i>
+                                </div>
+                                <span class="text-body-tertiary fs-xs">(136)</span>
+                            </div>
+                            <h3 class="pb-1 mb-2">
+                                <a class="d-block fs-sm fw-medium text-truncate"
+                                    href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                    <span class="animate-target">Wireless Bluetooth Headphones Sony</span>
+                                </a>
+                            </h3>
+                            <div class="d-flex align-items-center justify-content-between">
+                                <div class="h5 lh-1 mb-0">$299.00</div>
+                                <button type="button"
+                                    class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2"
+                                    aria-label="Add to Cart">
+                                    <i class="ci-shopping-cart fs-base animate-target"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <div
+                            class="product-card-details position-absolute top-100 start-0 w-100 bg-body rounded-bottom shadow mt-n2 p-3 pt-1">
+                            <span class="position-absolute top-0 start-0 w-100 bg-body mt-n2 py-2"></span>
+                            <ul class="list-unstyled d-flex flex-column gap-2 m-0">
+                                <li class="d-flex align-items-center">
+                                    <span class="fs-xs">Audio:</span>
+                                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                                    <span class="text-dark-emphasis fs-xs fw-medium text-end">Noise Cancellation</span>
+                                </li>
+                                <li class="d-flex align-items-center">
+                                    <span class="fs-xs">Connectivity:</span>
+                                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                                    <span class="text-dark-emphasis fs-xs fw-medium text-end">Bluetooth, 3.5mm jack</span>
+                                </li>
+                                <li class="d-flex align-items-center">
+                                    <span class="fs-xs">Material:</span>
+                                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                                    <span class="text-dark-emphasis fs-xs fw-medium text-end">Leather, Plastic</span>
+                                </li>
+                                <li class="d-flex align-items-center">
+                                    <span class="fs-xs">Weight:</span>
+                                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                                    <span class="text-dark-emphasis fs-xs fw-medium text-end">185 grams</span>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Sale Banner (CTA) -->
+        <section class="container pt-5 mt-sm-2 mt-md-3 mt-lg-4">
+            <div class="row g-0">
+                <div class="col-md-3 mb-n4 mb-md-0">
+                    <div class="position-relative d-flex flex-column align-items-center justify-content-center h-100 py-5">
+                        <div class="position-absolute top-0 start-0 w-100 h-100 d-none d-md-block">
+                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded-5 d-none-dark"
+                                style="background-color: #accbee"></span>
+                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded-5 d-none d-block-dark"
+                                style="background-color: #1b273a"></span>
+                        </div>
+                        <div class="position-absolute top-0 start-0 w-100 h-100 d-md-none">
+                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded-top-5 d-none-dark"
+                                style="background: linear-gradient(90deg, #accbee 0%, #e7f0fd 100%)"></span>
+                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded-top-5 d-none d-block-dark"
+                                style="background: linear-gradient(90deg, #1b273a 0%, #1f2632 100%)"></span>
+                        </div>
+                        <div class="position-relative z-1 display-1 text-dark-emphasis text-nowrap mb-0">
+                            20
+                            <span class="d-inline-block ms-n2">
+                                <span class="d-block fs-1">%</span>
+                                <span class="d-block fs-5">OFF</span>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-md-9 position-relative">
+                    <div class="position-absolute top-0 start-0 h-100 overflow-hidden rounded-pill z-2 d-none d-md-block"
+                        style="color: var(--cz-body-bg); margin-left: -2px">
+                        <svg width="4" height="436" viewBox="0 0 4 436" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M2 0L1.99998 436" stroke="currentColor" stroke-width="3" stroke-dasharray="8 12"
+                                stroke-linecap="round" />
+                        </svg>
+                    </div>
+                    <div class="position-relative">
+                        <span class="position-absolute top-0 start-0 w-100 h-100 rounded-5 d-none-dark rtl-flip"
+                            style="background: linear-gradient(90deg, #accbee 0%, #e7f0fd 100%)"></span>
+                        <span class="position-absolute top-0 start-0 w-100 h-100 rounded-5 d-none d-block-dark rtl-flip"
+                            style="background: linear-gradient(90deg, #1b273a 0%, #1f2632 100%)"></span>
+                        <div class="row align-items-center position-relative z-2">
+                            <div class="col-md-6 mb-3 mb-md-0">
+                                <div class="text-center text-md-start py-md-5 px-4 ps-md-5 pe-md-0 me-md-n5">
+                                    <h3 class="text-uppercase fw-bold ps-xxl-3 pb-2 mb-1">Seasonal weekly sale 2024</h3>
+                                    <p class="text-body-emphasis ps-xxl-3 mb-0">Use code <span
+                                            class="d-inline-block fw-semibold bg-white text-dark rounded-pill py-1 px-2">Sale
+                                            2024</span> to get best offer</p>
+                                </div>
+                            </div>
+                            <div class="col-md-6 d-flex justify-content-center justify-content-md-end pb-5 pb-md-0">
+                                <div class="me-xxl-4">
+                                    <img src="/img/home/electronics/banner/camera.png" class="d-block rtl-flip"
+                                        width="420" alt="Camera">
+                                    <div class="d-none d-lg-block" style="margin-bottom: -9%"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="d-none d-lg-block" style="padding-bottom: 3%"></div>
+        </section>
+
+
+        <!-- Special offers (Carousel) -->
+        <section class="container pt-5 mt-2 mt-sm-3 mt-lg-4">
+
+            <!-- Heading + Countdown -->
+            <div class="d-flex align-items-start align-items-md-center justify-content-between border-bottom pb-3 pb-md-4">
+                <div class="d-md-flex align-items-center">
+                    <h2 class="h3 pe-3 me-3 mb-md-0">Special offers for you</h2>
+
+                    <!-- Replace "demoDate" inside data-countdown-date attribute with the real date, ex: "10/15/2025 12:00:00" -->
+                    <div class="d-flex align-items-center" data-countdown-date="demoDate">
+                        <div class="btn btn-primary pe-none px-2">
+                            <span data-days></span>
+                            <span>d</span>
+                        </div>
+                        <div class="animate-blinking text-body-tertiary fs-lg fw-medium mx-2">:</div>
+                        <div class="btn btn-primary pe-none px-2">
+                            <span data-hours></span>
+                            <span>h</span>
+                        </div>
+                        <div class="animate-blinking text-body-tertiary fs-lg fw-medium mx-2">:</div>
+                        <div class="btn btn-primary pe-none px-2">
+                            <span data-minutes></span>
+                            <span>m</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="nav ms-3">
+                    <a class="nav-link animate-underline px-0 py-2" href="{{ route('second', ['shop', 'catalog-electronics']) }}">
+                        <span class="animate-target text-nowrap">View all</span>
+                        <i class="ci-chevron-right fs-base ms-1"></i>
+                    </a>
+                </div>
+            </div>
+
+            <!-- Product carousel -->
+            <div class="position-relative mx-md-1">
+
+                <!-- External slider prev/next buttons visible on screens > 500px wide (sm breakpoint) -->
+                <button type="button"
+                    class="offers-prev btn btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-start position-absolute top-50 start-0 z-2 translate-middle-y ms-n1 d-none d-sm-inline-flex"
+                    aria-label="Prev">
+                    <i class="ci-chevron-left fs-lg animate-target"></i>
+                </button>
+                <button type="button"
+                    class="offers-next btn btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-end position-absolute top-50 end-0 z-2 translate-middle-y me-n1 d-none d-sm-inline-flex"
+                    aria-label="Next">
+                    <i class="ci-chevron-right fs-lg animate-target"></i>
+                </button>
+
+                <!-- Slider -->
+                <div class="swiper py-4 px-sm-3"
+                    data-swiper='{
+            "slidesPerView": 2,
+            "spaceBetween": 24,
+            "loop": true,
+            "navigation": {
+              "prevEl": ".offers-prev",
+              "nextEl": ".offers-next"
+            },
+            "breakpoints": {
+              "768": {
+                "slidesPerView": 3
+              },
+              "992": {
+                "slidesPerView": 4
+              }
+            }
+          }'>
+                    <div class="swiper-wrapper">
+
+                        <!-- Item -->
+                        <div class="swiper-slide">
+                            <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+                                <div class="position-relative">
+                                    <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                                        <div class="d-flex flex-column gap-2">
+                                            <button type="button"
+                                                class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex"
+                                                aria-label="Add to Wishlist">
+                                                <i class="ci-heart fs-base animate-target"></i>
+                                            </button>
+                                            <button type="button"
+                                                class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex"
+                                                aria-label="Compare">
+                                                <i class="ci-refresh-cw fs-base animate-target"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                                        <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body"
+                                            data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                                            <i class="ci-more-vertical fs-lg"></i>
+                                        </button>
+                                        <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                                            <li>
+                                                <a class="dropdown-item" href="#!">
+                                                    <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                                                    Add to Wishlist
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a class="dropdown-item" href="#!">
+                                                    <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                                                    Compare
+                                                </a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                    <a class="d-block rounded-top overflow-hidden p-3 p-sm-4"
+                                        href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                        <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                                            <img src="/img/shop/electronics/09.png" alt="Wireless Buds">
+                                        </div>
+                                    </a>
+                                </div>
+                                <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                                    <div class="d-flex align-items-center gap-2 mb-2">
+                                        <div class="d-flex gap-1 fs-xs">
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-half text-warning"></i>
+                                        </div>
+                                        <span class="text-body-tertiary fs-xs">(14)</span>
+                                    </div>
+                                    <h3 class="pb-1 mb-2">
+                                        <a class="d-block fs-sm fw-medium text-truncate"
+                                            href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                            <span class="animate-target">Xiaomi Wireless Buds Pro</span>
+                                        </a>
+                                    </h3>
+                                    <div class="d-flex align-items-center justify-content-between pb-2 mb-1">
+                                        <div class="h5 lh-1 mb-0">$129.99 <del
+                                                class="text-body-tertiary fs-sm fw-normal">$156.00</del></div>
+                                        <button type="button"
+                                            class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2"
+                                            aria-label="Add to Cart">
+                                            <i class="ci-shopping-cart fs-base animate-target"></i>
+                                        </button>
+                                    </div>
+                                    <div class="progress mb-2" role="progressbar" aria-label="Available in stock"
+                                        aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"
+                                        style="height: 4px">
+                                        <div class="progress-bar rounded-pill" style="width: 25%"></div>
+                                    </div>
+                                    <div class="text-body-secondary fs-sm">Available: <span
+                                            class="text-dark-emphasis fw-medium">112</span></div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Item -->
+                        <div class="swiper-slide">
+                            <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+                                <div class="position-relative">
+                                    <div
+                                        class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                                        <div class="d-flex flex-column gap-2">
+                                            <button type="button"
+                                                class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex"
+                                                aria-label="Add to Wishlist">
+                                                <i class="ci-heart fs-base animate-target"></i>
+                                            </button>
+                                            <button type="button"
+                                                class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex"
+                                                aria-label="Compare">
+                                                <i class="ci-refresh-cw fs-base animate-target"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                                        <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body"
+                                            data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                                            <i class="ci-more-vertical fs-lg"></i>
+                                        </button>
+                                        <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                                            <li>
+                                                <a class="dropdown-item" href="#!">
+                                                    <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                                                    Add to Wishlist
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a class="dropdown-item" href="#!">
+                                                    <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                                                    Compare
+                                                </a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                    <a class="d-block rounded-top overflow-hidden p-3 p-sm-4"
+                                        href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                        <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                                            <img src="/img/shop/electronics/03.png" alt="Smart Watch">
+                                        </div>
+                                    </a>
+                                </div>
+                                <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                                    <div class="d-flex align-items-center gap-2 mb-2">
+                                        <div class="d-flex gap-1 fs-xs">
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                        </div>
+                                        <span class="text-body-tertiary fs-xs">(138)</span>
+                                    </div>
+                                    <h3 class="pb-1 mb-2">
+                                        <a class="d-block fs-sm fw-medium text-truncate"
+                                            href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                            <span class="animate-target">Smart Watch Series 7, White</span>
+                                        </a>
+                                    </h3>
+                                    <div class="d-flex align-items-center justify-content-between pb-2 mb-1">
+                                        <div class="h5 lh-1 mb-0">$429.00 <del
+                                                class="text-body-tertiary fs-sm fw-normal">$486.00</del></div>
+                                        <button type="button"
+                                            class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2"
+                                            aria-label="Add to Cart">
+                                            <i class="ci-shopping-cart fs-base animate-target"></i>
+                                        </button>
+                                    </div>
+                                    <div class="progress mb-2" role="progressbar" aria-label="Available in stock"
+                                        aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"
+                                        style="height: 4px">
+                                        <div class="progress-bar rounded-pill" style="width: 50%"></div>
+                                    </div>
+                                    <div class="text-body-secondary fs-sm">Available: <span
+                                            class="text-dark-emphasis fw-medium">45</span></div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Item -->
+                        <div class="swiper-slide">
+                            <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+                                <div class="position-relative">
+                                    <div
+                                        class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                                        <div class="d-flex flex-column gap-2">
+                                            <button type="button"
+                                                class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex"
+                                                aria-label="Add to Wishlist">
+                                                <i class="ci-heart fs-base animate-target"></i>
+                                            </button>
+                                            <button type="button"
+                                                class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex"
+                                                aria-label="Compare">
+                                                <i class="ci-refresh-cw fs-base animate-target"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                                        <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body"
+                                            data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                                            <i class="ci-more-vertical fs-lg"></i>
+                                        </button>
+                                        <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                                            <li>
+                                                <a class="dropdown-item" href="#!">
+                                                    <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                                                    Add to Wishlist
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a class="dropdown-item" href="#!">
+                                                    <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                                                    Compare
+                                                </a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                    <a class="d-block rounded-top overflow-hidden p-3 p-sm-4"
+                                        href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                        <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                                            <img src="/img/shop/electronics/11.png" alt="Nikon Camera">
+                                        </div>
+                                    </a>
+                                </div>
+                                <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                                    <div class="d-flex align-items-center gap-2 mb-2">
+                                        <div class="d-flex gap-1 fs-xs">
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star text-body-tertiary opacity-75"></i>
+                                        </div>
+                                        <span class="text-body-tertiary fs-xs">(64)</span>
+                                    </div>
+                                    <h3 class="pb-1 mb-2">
+                                        <a class="d-block fs-sm fw-medium text-truncate"
+                                            href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                            <span class="animate-target">VRB01 Camera Nikon Max</span>
+                                        </a>
+                                    </h3>
+                                    <div class="d-flex align-items-center justify-content-between pb-2 mb-1">
+                                        <div class="h5 lh-1 mb-0">$652.00 <del
+                                                class="text-body-tertiary fs-sm fw-normal">$785.00</del></div>
+                                        <button type="button"
+                                            class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2"
+                                            aria-label="Add to Cart">
+                                            <i class="ci-shopping-cart fs-base animate-target"></i>
+                                        </button>
+                                    </div>
+                                    <div class="progress mb-2" role="progressbar" aria-label="Available in stock"
+                                        aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"
+                                        style="height: 4px">
+                                        <div class="progress-bar rounded-pill" style="width: 75%"></div>
+                                    </div>
+                                    <div class="text-body-secondary fs-sm">Available: <span
+                                            class="text-dark-emphasis fw-medium">13</span></div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Item -->
+                        <div class="swiper-slide">
+                            <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+                                <div class="position-relative">
+                                    <div
+                                        class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                                        <div class="d-flex flex-column gap-2">
+                                            <button type="button"
+                                                class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex"
+                                                aria-label="Add to Wishlist">
+                                                <i class="ci-heart fs-base animate-target"></i>
+                                            </button>
+                                            <button type="button"
+                                                class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex"
+                                                aria-label="Compare">
+                                                <i class="ci-refresh-cw fs-base animate-target"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                                        <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body"
+                                            data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                                            <i class="ci-more-vertical fs-lg"></i>
+                                        </button>
+                                        <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                                            <li>
+                                                <a class="dropdown-item" href="#!">
+                                                    <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                                                    Add to Wishlist
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a class="dropdown-item" href="#!">
+                                                    <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                                                    Compare
+                                                </a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                    <a class="d-block rounded-top overflow-hidden p-3 p-sm-4"
+                                        href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                        <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                                            <img src="/img/shop/electronics/10.png" alt="iPhone 14">
+                                        </div>
+                                    </a>
+                                </div>
+                                <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                                    <div class="d-flex align-items-center gap-2 mb-2">
+                                        <div class="d-flex gap-1 fs-xs">
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-half text-warning"></i>
+                                            <i class="ci-star text-body-tertiary opacity-75"></i>
+                                        </div>
+                                        <span class="text-body-tertiary fs-xs">(51)</span>
+                                    </div>
+                                    <h3 class="pb-1 mb-2">
+                                        <a class="d-block fs-sm fw-medium text-truncate"
+                                            href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                            <span class="animate-target">Apple iPhone 14 128GB Blue</span>
+                                        </a>
+                                    </h3>
+                                    <div class="d-flex align-items-center justify-content-between pb-2 mb-1">
+                                        <div class="h5 lh-1 mb-0">$652.00 <del
+                                                class="text-body-tertiary fs-sm fw-normal">$785.00</del></div>
+                                        <button type="button"
+                                            class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2"
+                                            aria-label="Add to Cart">
+                                            <i class="ci-shopping-cart fs-base animate-target"></i>
+                                        </button>
+                                    </div>
+                                    <div class="progress mb-2" role="progressbar" aria-label="Available in stock"
+                                        aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"
+                                        style="height: 4px">
+                                        <div class="progress-bar rounded-pill" style="width: 25%"></div>
+                                    </div>
+                                    <div class="text-body-secondary fs-sm">Available: <span
+                                            class="text-dark-emphasis fw-medium">7</span></div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Item -->
+                        <div class="swiper-slide">
+                            <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+                                <div class="position-relative">
+                                    <div
+                                        class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                                        <div class="d-flex flex-column gap-2">
+                                            <button type="button"
+                                                class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex"
+                                                aria-label="Add to Wishlist">
+                                                <i class="ci-heart fs-base animate-target"></i>
+                                            </button>
+                                            <button type="button"
+                                                class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex"
+                                                aria-label="Compare">
+                                                <i class="ci-refresh-cw fs-base animate-target"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                                        <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body"
+                                            data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                                            <i class="ci-more-vertical fs-lg"></i>
+                                        </button>
+                                        <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                                            <li>
+                                                <a class="dropdown-item" href="#!">
+                                                    <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                                                    Add to Wishlist
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a class="dropdown-item" href="#!">
+                                                    <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                                                    Compare
+                                                </a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                    <a class="d-block rounded-top overflow-hidden p-3 p-sm-4"
+                                        href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                        <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                                            <img src="/img/shop/electronics/01.png" alt="VR Glasses">
+                                        </div>
+                                    </a>
+                                </div>
+                                <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                                    <div class="d-flex align-items-center gap-2 mb-2">
+                                        <div class="d-flex gap-1 fs-xs">
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-half text-warning"></i>
+                                        </div>
+                                        <span class="text-body-tertiary fs-xs">(19)</span>
+                                    </div>
+                                    <h3 class="pb-1 mb-2">
+                                        <a class="d-block fs-sm fw-medium text-truncate"
+                                            href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                                            <span class="animate-target">VRB01 Virtual Reality Glasses</span>
+                                        </a>
+                                    </h3>
+                                    <div class="d-flex align-items-center justify-content-between pb-2 mb-1">
+                                        <div class="h5 lh-1 mb-0">$340.99 <del
+                                                class="text-body-tertiary fs-sm fw-normal">$430.00</del></div>
+                                        <button type="button"
+                                            class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2"
+                                            aria-label="Add to Cart">
+                                            <i class="ci-shopping-cart fs-base animate-target"></i>
+                                        </button>
+                                    </div>
+                                    <div class="progress mb-2" role="progressbar" aria-label="Available in stock"
+                                        aria-valuenow="33" aria-valuemin="0" aria-valuemax="100"
+                                        style="height: 4px">
+                                        <div class="progress-bar rounded-pill" style="width: 33%"></div>
+                                    </div>
+                                    <div class="text-body-secondary fs-sm">Available: <span
+                                            class="text-dark-emphasis fw-medium">16</span></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- External slider prev/next buttons visible on screens < 500px wide (sm breakpoint) -->
+                <div class="d-flex justify-content-center gap-2 mt-n2 mb-3 pb-1 d-sm-none">
+                    <button type="button"
+                        class="offers-prev btn btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-start me-1"
+                        aria-label="Prev">
+                        <i class="ci-chevron-left fs-lg animate-target"></i>
+                    </button>
+                    <button type="button"
+                        class="offers-next btn btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-end"
+                        aria-label="Next">
+                        <i class="ci-chevron-right fs-lg animate-target"></i>
+                    </button>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Brands -->
+        <section class="container pt-4 pt-md-5 pb-5 mt-sm-2 mb-2 mb-sm-3 mb-md-4 mb-lg-5">
+            <div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-6 g-3 g-md-4 g-lg-3 g-xl-4">
+                <div class="col">
+                    <a class="btn btn-outline-secondary w-100 rounded-4 p-3" href="{{ route('second', ['shop', 'catalog-electronics']) }}">
+                        <img src="/img/shop/electronics/brands/apple-light-mode.svg" class="d-none-dark"
+                            alt="Apple">
+                        <img src="/img/shop/electronics/brands/apple-dark-mode.svg" class="d-none d-block-dark"
+                            alt="Apple">
+                    </a>
+                </div>
+                <div class="col">
+                    <a class="btn btn-outline-secondary w-100 rounded-4 p-3" href="{{ route('second', ['shop', 'catalog-electronics']) }}">
+                        <img src="/img/shop/electronics/brands/motorola-light-mode.svg" class="d-none-dark"
+                            alt="Apple">
+                        <img src="/img/shop/electronics/brands/motorola-dark-mode.svg" class="d-none d-block-dark"
+                            alt="Apple">
+                    </a>
+                </div>
+                <div class="col">
+                    <a class="btn btn-outline-secondary w-100 rounded-4 p-3" href="{{ route('second', ['shop', 'catalog-electronics']) }}">
+                        <img src="/img/shop/electronics/brands/canon-light-mode.svg" class="d-none-dark"
+                            alt="Apple">
+                        <img src="/img/shop/electronics/brands/canon-dark-mode.svg" class="d-none d-block-dark"
+                            alt="Apple">
+                    </a>
+                </div>
+                <div class="col">
+                    <a class="btn btn-outline-secondary w-100 rounded-4 p-3" href="{{ route('second', ['shop', 'catalog-electronics']) }}">
+                        <img src="/img/shop/electronics/brands/samsung-light-mode.svg" class="d-none-dark"
+                            alt="Apple">
+                        <img src="/img/shop/electronics/brands/samsung-dark-mode.svg" class="d-none d-block-dark"
+                            alt="Apple">
+                    </a>
+                </div>
+                <div class="col">
+                    <a class="btn btn-outline-secondary w-100 rounded-4 p-3" href="{{ route('second', ['shop', 'catalog-electronics']) }}">
+                        <img src="/img/shop/electronics/brands/sony-light-mode.svg" class="d-none-dark"
+                            alt="Apple">
+                        <img src="/img/shop/electronics/brands/sony-dark-mode.svg" class="d-none d-block-dark"
+                            alt="Apple">
+                    </a>
+                </div>
+                <div class="col">
+                    <a class="btn btn-outline-secondary w-100 h-100 rounded-4 p-3"
+                        href="{{ route('second', ['shop', 'categories-electronics']) }}">
+                        All brands
+                        <i class="ci-plus-circle fs-base ms-2"></i>
+                    </a>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Subscription form + Vlog -->
+        <section class="bg-body-tertiary py-5">
+            <div class="container pt-sm-2 pt-md-3 pt-lg-4 pt-xl-5">
+                <div class="row">
+                    <div class="col-md-6 col-lg-5 mb-5 mb-md-0">
+                        <h2 class="h4 mb-2">Sign up to our newsletter</h2>
+                        <p class="text-body pb-2 pb-ms-3">Receive our latest updates about our products &amp; promotions
+                        </p>
+                        <form class="d-flex needs-validation pb-1 pb-sm-2 pb-md-3 pb-lg-0 mb-4 mb-lg-5" novalidate>
+                            <div class="position-relative w-100 me-2">
+                                <input type="email" class="form-control form-control-lg" placeholder="Your email"
+                                    required>
+                            </div>
+                            <button type="submit" class="btn btn-lg btn-primary">Subscribe</button>
+                        </form>
+                        <div class="d-flex gap-3">
+                            <a class="btn btn-icon btn-secondary rounded-circle" href="#!"
+                                aria-label="Instagram">
+                                <i class="ci-instagram fs-base"></i>
+                            </a>
+                            <a class="btn btn-icon btn-secondary rounded-circle" href="#!" aria-label="Facebook">
+                                <i class="ci-facebook fs-base"></i>
+                            </a>
+                            <a class="btn btn-icon btn-secondary rounded-circle" href="#!" aria-label="YouTube">
+                                <i class="ci-youtube fs-base"></i>
+                            </a>
+                            <a class="btn btn-icon btn-secondary rounded-circle" href="#!" aria-label="Telegram">
+                                <i class="ci-telegram fs-base"></i>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="col-md-6 col-lg-5 col-xl-4 offset-lg-1 offset-xl-2">
+                        <ul class="list-unstyled d-flex flex-column gap-4 ps-md-4 ps-lg-0 mb-3">
+                            <li class="nav flex-nowrap align-items-center position-relative">
+                                <img src="/img/home/electronics/vlog/01.jpg" class="rounded" width="140"
+                                    alt="Video cover">
+                                <div class="ps-3">
+                                    <div class="fs-xs text-body-secondary lh-sm mb-2">6:16</div>
+                                    <a class="nav-link fs-sm hover-effect-underline stretched-link p-0" href="#!">5
+                                        New Cool Gadgets You Must See on Cartzilla - Cheap Budget</a>
+                                </div>
+                            </li>
+                            <li class="nav flex-nowrap align-items-center position-relative">
+                                <img src="/img/home/electronics/vlog/02.jpg" class="rounded" width="140"
+                                    alt="Video cover">
+                                <div class="ps-3">
+                                    <div class="fs-xs text-body-secondary lh-sm mb-2">10:20</div>
+                                    <a class="nav-link fs-sm hover-effect-underline stretched-link p-0" href="#!">5
+                                        Super Useful Gadgets on Cartzilla You Must Have in 2023</a>
+                                </div>
+                            </li>
+                            <li class="nav flex-nowrap align-items-center position-relative">
+                                <img src="/img/home/electronics/vlog/03.jpg" class="rounded" width="140"
+                                    alt="Video cover">
+                                <div class="ps-3">
+                                    <div class="fs-xs text-body-secondary lh-sm mb-2">8:40</div>
+                                    <a class="nav-link fs-sm hover-effect-underline stretched-link p-0"
+                                        href="#!">Top 5 New Amazing Gadgets on Cartzilla You Must See</a>
+                                </div>
+                            </li>
+                        </ul>
+                        <div class="nav ps-md-4 ps-lg-0">
+                            <a class="btn nav-link animate-underline text-decoration-none px-0" href="#!">
+                                <span class="animate-target">View all</span>
+                                <i class="ci-chevron-right fs-base ms-1"></i>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    @include('layouts.partials/footer')
+@endsection
+
+@section('scripts')
+@endsection
diff --git a/resources/views/home/fashion-v1.blade.php b/resources/views/home/fashion-v1.blade.php
new file mode 100644
index 0000000..bfef74d
--- /dev/null
+++ b/resources/views/home/fashion-v1.blade.php
@@ -0,0 +1,2228 @@
+@extends('layouts.landing', ['title' => 'Fashion Store v.1'])
+
+@section('content')
+    <div class="offcanvas offcanvas-end pb-sm-2 px-sm-2" id="shoppingCart" tabindex="-1" aria-labelledby="shoppingCartLabel"
+        style="width: 500px">
+
+        <!-- Header -->
+        <div class="offcanvas-header flex-column align-items-start py-3 pt-lg-4">
+            <div class="d-flex align-items-center justify-content-between w-100 mb-3 mb-lg-4">
+                <h4 class="offcanvas-title" id="shoppingCartLabel">Shopping cart</h4>
+                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+            </div>
+            <p class="fs-sm">Buy <span class="text-dark-emphasis fw-semibold">$53</span> more to get <span
+                    class="text-dark-emphasis fw-semibold">Free Shipping</span></p>
+            <div class="progress w-100" role="progressbar" aria-label="Free shipping progress" aria-valuenow="78"
+                aria-valuemin="0" aria-valuemax="100" style="height: 4px">
+                <div class="progress-bar bg-dark rounded-pill d-none-dark" style="width: 78%"></div>
+                <div class="progress-bar bg-light rounded-pill d-none d-block-dark" style="width: 78%"></div>
+            </div>
+        </div>
+
+        <!-- Items -->
+        <div class="offcanvas-body d-flex flex-column gap-4 pt-2">
+
+            <!-- Item -->
+            <div class="d-flex align-items-center">
+                <a class="flex-shrink-0" href="{{ route('second', ['shop', 'product-fashion']) }}">
+                    <img src="/img/shop/fashion/thumbs/07.png" class="bg-body-tertiary rounded" width="110"
+                        alt="Thumbnail">
+                </a>
+                <div class="w-100 min-w-0 ps-3">
+                    <h5 class="d-flex animate-underline mb-2">
+                        <a class="d-block fs-sm fw-medium text-truncate animate-target"
+                            href="{{ route('second', ['shop', 'product-fashion']) }}">Leather sneakers with golden laces</a>
+                    </h5>
+                    <div class="h6 pb-1 mb-2">$74.00</div>
+                    <div class="d-flex align-items-center justify-content-between">
+                        <div class="count-input rounded-2">
+                            <button type="button" class="btn btn-icon btn-sm" data-decrement
+                                aria-label="Decrement quantity">
+                                <i class="ci-minus"></i>
+                            </button>
+                            <input type="number" class="form-control form-control-sm" value="1" readonly>
+                            <button type="button" class="btn btn-icon btn-sm" data-increment
+                                aria-label="Increment quantity">
+                                <i class="ci-plus"></i>
+                            </button>
+                        </div>
+                        <button type="button" class="btn-close fs-sm" data-bs-toggle="tooltip"
+                            data-bs-custom-class="tooltip-sm" data-bs-title="Remove" aria-label="Remove from cart"></button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Item -->
+            <div class="d-flex align-items-center">
+                <a class="flex-shrink-0" href="{{ route('second', ['shop', 'product-fashion']) }}">
+                    <img src="/img/shop/fashion/thumbs/08.png" class="bg-body-tertiary rounded" width="110"
+                        alt="Thumbnail">
+                </a>
+                <div class="w-100 min-w-0 ps-3">
+                    <h5 class="d-flex animate-underline mb-2">
+                        <a class="d-block fs-sm fw-medium text-truncate animate-target"
+                            href="{{ route('second', ['shop', 'product-fashion']) }}">Classic cotton men's shirt</a>
+                    </h5>
+                    <div class="h6 pb-1 mb-2">$27.00</div>
+                    <div class="d-flex align-items-center justify-content-between">
+                        <div class="count-input rounded-2">
+                            <button type="button" class="btn btn-icon btn-sm" data-decrement
+                                aria-label="Decrement quantity">
+                                <i class="ci-minus"></i>
+                            </button>
+                            <input type="number" class="form-control form-control-sm" value="1" readonly>
+                            <button type="button" class="btn btn-icon btn-sm" data-increment
+                                aria-label="Increment quantity">
+                                <i class="ci-plus"></i>
+                            </button>
+                        </div>
+                        <button type="button" class="btn-close fs-sm" data-bs-toggle="tooltip"
+                            data-bs-custom-class="tooltip-sm" data-bs-title="Remove" aria-label="Remove from cart"></button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Item -->
+            <div class="d-flex align-items-center">
+                <a class="flex-shrink-0" href="{{ route('second', ['shop', 'product-fashion']) }}">
+                    <img src="/img/shop/fashion/thumbs/09.png" class="bg-body-tertiary rounded" width="110"
+                        alt="Thumbnail">
+                </a>
+                <div class="w-100 min-w-0 ps-3">
+                    <h5 class="d-flex animate-underline mb-2">
+                        <a class="d-block fs-sm fw-medium text-truncate animate-target"
+                            href="{{ route('second', ['shop', 'product-fashion']) }}">Polarized sunglasses for men</a>
+                    </h5>
+                    <div class="h6 pb-1 mb-2">$96.00 <del class="text-body-tertiary fs-xs fw-normal">112.00</del></div>
+                    <div class="d-flex align-items-center justify-content-between">
+                        <div class="count-input rounded-2">
+                            <button type="button" class="btn btn-icon btn-sm" data-decrement
+                                aria-label="Decrement quantity">
+                                <i class="ci-minus"></i>
+                            </button>
+                            <input type="number" class="form-control form-control-sm" value="1" readonly>
+                            <button type="button" class="btn btn-icon btn-sm" data-increment
+                                aria-label="Increment quantity">
+                                <i class="ci-plus"></i>
+                            </button>
+                        </div>
+                        <button type="button" class="btn-close fs-sm" data-bs-toggle="tooltip"
+                            data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
+                            aria-label="Remove from cart"></button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Footer -->
+        <div class="offcanvas-header flex-column align-items-start">
+            <div class="d-flex align-items-center justify-content-between w-100 mb-3 mb-md-4">
+                <span class="text-light-emphasis">Subtotal:</span>
+                <span class="h6 mb-0">$197.00</span>
+            </div>
+            <div class="d-flex w-100 gap-3">
+                <a class="btn btn-lg btn-secondary w-100" href="#!">View cart</a>
+                <a class="btn btn-lg btn-dark w-100" href="#!">Checkout</a>
+            </div>
+        </div>
+    </div>
+
+    <div class="offcanvas offcanvas-top" id="searchBox" data-bs-backdrop="static" tabindex="-1">
+        <div class="offcanvas-header border-bottom p-0 py-lg-1">
+            <form class="container d-flex align-items-center">
+                <input type="search" class="form-control form-control-lg fs-lg border-0 rounded-0 py-3 ps-0"
+                    placeholder="Search the products" data-autofocus="offcanvas">
+                <button type="reset" class="btn-close fs-lg" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+            </form>
+        </div>
+        <div class="offcanvas-body px-0">
+            <div class="container text-center">
+                <svg class="text-body-tertiary opacity-60 mb-4" xmlns="http://www.w3.org/2000/svg" width="60"
+                    viewBox="0 0 512 512" fill="currentColor">
+                    <path
+                        d="M340.115,361.412l-16.98-16.98c-34.237,29.36-78.733,47.098-127.371,47.098C87.647,391.529,0,303.883,0,195.765S87.647,0,195.765,0s195.765,87.647,195.765,195.765c0,48.638-17.738,93.134-47.097,127.371l16.98,16.98l11.94-11.94c5.881-5.881,15.415-5.881,21.296,0l112.941,112.941c5.881,5.881,5.881,15.416,0,21.296l-45.176,45.176c-5.881,5.881-15.415,5.881-21.296,0L328.176,394.648c-5.881-5.881-5.881-15.416,0-21.296L340.115,361.412z M195.765,361.412c91.484,0,165.647-74.163,165.647-165.647S287.249,30.118,195.765,30.118S30.118,104.28,30.118,195.765S104.28,361.412,195.765,361.412z M360.12,384l91.645,91.645l23.88-23.88L384,360.12L360.12,384z M233.034,233.033c5.881-5.881,15.415-5.881,21.296,0c5.881,5.881,5.881,15.416,0,21.296c-32.345,32.345-84.786,32.345-117.131,0c-5.881-5.881-5.881-15.415,0-21.296c5.881-5.881,15.416-5.881,21.296,0C179.079,253.616,212.45,253.616,233.034,233.033zM135.529,180.706c-12.475,0-22.588-10.113-22.588-22.588c0-12.475,10.113-22.588,22.588-22.588c12.475,0,22.588,10.113,22.588,22.588C158.118,170.593,148.005,180.706,135.529,180.706z M256,180.706c-12.475,0-22.588-10.113-22.588-22.588c0-12.475,10.113-22.588,22.588-22.588s22.588,10.113,22.588,22.588C278.588,170.593,268.475,180.706,256,180.706z" />
+                </svg>
+                <h6 class="mb-2">Your search results will appear here</h6>
+                <p class="fs-sm mb-0">Start typing in the search field above to see instant search results.</p>
+            </div>
+        </div>
+    </div>
+
+    <div class="alert alert-dismissible bg-dark text-white rounded-0 py-2 px-0 m-0 fade show" data-bs-theme="dark">
+        <div class="container position-relative d-flex min-w-0">
+            <div class="d-flex flex-nowrap align-items-center g-2 w-100 min-w-0 mx-auto mt-n1" style="max-width: 458px">
+                <div class="nav me-2">
+                    <button type="button" class="nav-link fs-lg p-0" id="topbarPrev" aria-label="Prev">
+                        <i class="ci-chevron-left"></i>
+                    </button>
+                </div>
+                <div class="swiper fs-sm text-white"
+                    data-swiper='{
+            "spaceBetween": 24,
+            "loop": true,
+            "autoplay": {
+              "delay": 5000,
+              "disableOnInteraction": false
+            },
+            "navigation": {
+              "prevEl": "#topbarPrev",
+              "nextEl": "#topbarNext"
+            }
+          }'>
+                    <div class="swiper-wrapper min-w-0">
+                        <div class="swiper-slide text-truncate text-center">🎉 Free Shipping on orders over $250. <span
+                                class="d-none d-sm-inline">Don't miss a discount!</span></div>
+                        <div class="swiper-slide text-truncate text-center">💰 Money back guarantee. <span
+                                class="d-none d-sm-inline">We return money within 30 days.</span></div>
+                        <div class="swiper-slide text-truncate text-center">💪 Friendly 24/7 customer support. <span
+                                class="d-none d-sm-inline">We've got you covered!</span></div>
+                    </div>
+                </div>
+                <div class="nav ms-2">
+                    <button type="button" class="nav-link fs-lg p-0" id="topbarNext" aria-label="Next">
+                        <i class="ci-chevron-right"></i>
+                    </button>
+                </div>
+            </div>
+            <button type="button" class="btn-close position-static flex-shrink-0 p-1 ms-3 ms-md-n4"
+                data-bs-dismiss="alert" aria-label="Close"></button>
+        </div>
+    </div>
+
+    <header class="navbar navbar-expand-lg navbar-sticky bg-body d-block z-fixed p-0" data-sticky-navbar='{"offset": 500}'>
+      <div class="container py-2 py-lg-3">
+        <div class="d-flex align-items-center gap-3">
+
+          <!-- Mobile offcanvas menu toggler (Hamburger) -->
+          <button type="button" class="navbar-toggler me-4 me-md-2" data-bs-toggle="offcanvas" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+
+          <!-- Country slect visible on screens > 768px wide (md breakpoint) -->
+          <div class="dropdown d-none d-md-block nav">
+            <a class="nav-link dropdown-toggle py-1 px-0" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="Country select: USA">
+              <div class="ratio ratio-1x1" style="width: 20px">
+                <img src="/img/flags/en-us.png" alt="USA">
+              </div>
+            </a>
+            <ul class="dropdown-menu fs-sm" style="--cz-dropdown-spacer: .5rem">
+              <li>
+                <a class="dropdown-item" href="#!">
+                  <img src="/img/flags/en-uk.png" class="flex-shrink-0 me-2" width="20" alt="United Kingdom">
+                  United Kingdom
+                </a>
+              </li>
+              <li>
+                <a class="dropdown-item" href="#!">
+                  <img src="/img/flags/fr.png" class="flex-shrink-0 me-2" width="20" alt="France">
+                  France
+                </a>
+              </li>
+              <li>
+                <a class="dropdown-item" href="#!">
+                  <img src="/img/flags/de.png" class="flex-shrink-0 me-2" width="20" alt="Deutschland">
+                  Deutschland
+                </a>
+              </li>
+              <li>
+                <a class="dropdown-item" href="#!">
+                  <img src="/img/flags/it.png" class="flex-shrink-0 me-2" width="20" alt="Italia">
+                  Italia
+                </a>
+              </li>
+            </ul>
+          </div>
+
+          <!-- City slect visible on screens > 768px wide (md breakpoint) -->
+          <div class="dropdown d-none d-md-block nav">
+            <a class="nav-link animate-underline dropdown-toggle fw-normal py-1 px-0" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+              <span class="animate-target">Washington</span>
+            </a>
+            <ul class="dropdown-menu fs-sm" style="--cz-dropdown-spacer: .5rem">
+              <li><a class="dropdown-item" href="#!">Chicago</a></li>
+              <li><a class="dropdown-item" href="#!">Los Angeles</a></li>
+              <li><a class="dropdown-item" href="#!">New York</a></li>
+              <li><a class="dropdown-item" href="#!">Philadelphia</a></li>
+            </ul>
+          </div>
+        </div>
+
+        <!-- Navbar brand (Logo) -->
+        <a class="navbar-brand fs-2 py-0 m-0 me-auto me-sm-n5" href="/">Cartzilla</a>
+
+        <!-- Button group -->
+        <div class="d-flex align-items-center">
+
+          <!-- Navbar stuck nav toggler -->
+          <button type="button" class="navbar-toggler d-none navbar-stuck-show me-3" data-bs-toggle="collapse" data-bs-target="#stuckNav" aria-controls="stuckNav" aria-expanded="false" aria-label="Toggle navigation in navbar stuck state">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+
+          <!-- Theme switcher (light/dark/auto) -->
+          <div class="dropdown">
+            <button type="button" class="theme-switcher btn btn-icon btn-lg btn-outline-secondary fs-lg border-0 rounded-circle animate-scale" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Toggle theme (light)">
+              <span class="theme-icon-active d-flex animate-target">
+                <i class="ci-sun"></i>
+              </span>
+            </button>
+            <ul class="dropdown-menu" style="--cz-dropdown-min-width: 9rem">
+              <li>
+                <button type="button" class="dropdown-item active" data-bs-theme-value="light" aria-pressed="true">
+                  <span class="theme-icon d-flex fs-base me-2">
+                    <i class="ci-sun"></i>
+                  </span>
+                  <span class="theme-label">Light</span>
+                  <i class="item-active-indicator ci-check ms-auto"></i>
+                </button>
+              </li>
+              <li>
+                <button type="button" class="dropdown-item" data-bs-theme-value="dark" aria-pressed="false">
+                  <span class="theme-icon d-flex fs-base me-2">
+                    <i class="ci-moon"></i>
+                  </span>
+                  <span class="theme-label">Dark</span>
+                  <i class="item-active-indicator ci-check ms-auto"></i>
+                </button>
+              </li>
+              <li>
+                <button type="button" class="dropdown-item" data-bs-theme-value="auto" aria-pressed="false">
+                  <span class="theme-icon d-flex fs-base me-2">
+                    <i class="ci-auto"></i>
+                  </span>
+                  <span class="theme-label">Auto</span>
+                  <i class="item-active-indicator ci-check ms-auto"></i>
+                </button>
+              </li>
+            </ul>
+          </div>
+
+          <!-- Search toggle button visible on screens < 992px wide (lg breakpoint) -->
+          <button type="button" class="btn btn-icon btn-lg fs-xl btn-outline-secondary border-0 rounded-circle animate-shake d-lg-none" data-bs-toggle="offcanvas" data-bs-target="#searchBox" aria-controls="searchBox" aria-label="Toggle search bar">
+            <i class="ci-search animate-target"></i>
+          </button>
+
+          <!-- Account button visible on screens > 768px wide (md breakpoint) -->
+          <a class="btn btn-icon btn-lg fs-lg btn-outline-secondary border-0 rounded-circle animate-shake d-none d-md-inline-flex" href="{{ route('second', ['account', 'signin']) }}">
+            <i class="ci-user animate-target"></i>
+            <span class="visually-hidden">Account</span>
+          </a>
+
+          <!-- Wishlist button visible on screens > 768px wide (md breakpoint) -->
+          <a class="btn btn-icon btn-lg fs-lg btn-outline-secondary border-0 rounded-circle animate-pulse d-none d-md-inline-flex" href="#!">
+            <i class="ci-heart animate-target"></i>
+            <span class="visually-hidden">Wishlist</span>
+          </a>
+
+          <!-- Cart button -->
+          <button type="button" class="btn btn-icon btn-lg fs-xl btn-outline-secondary position-relative border-0 rounded-circle animate-scale" data-bs-toggle="offcanvas" data-bs-target="#shoppingCart" aria-controls="shoppingCart" aria-label="Shopping cart">
+            <span class="position-absolute top-0 start-100 badge fs-xs text-bg-primary rounded-pill mt-1 ms-n4 z-2" style="--cz-badge-padding-y: .25em; --cz-badge-padding-x: .42em">3</span>
+            <i class="ci-shopping-bag animate-target me-1"></i>
+          </button>
+        </div>
+      </div>
+
+      <!-- Main navigation that turns into offcanvas on screens < 992px wide (lg breakpoint) -->
+      <div class="collapse navbar-stuck-hide" id="stuckNav">
+        <nav class="offcanvas offcanvas-start" id="navbarNav" tabindex="-1" aria-labelledby="navbarNavLabel">
+          <div class="offcanvas-header py-3">
+            <h5 class="offcanvas-title" id="navbarNavLabel">Browse Cartzilla</h5>
+            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+          </div>
+
+          <!-- Country and City slects visible on screens < 768px wide (md breakpoint) -->
+          <div class="offcanvas-header gap-3 d-md-none pt-0 pb-3">
+            <div class="dropdown nav">
+              <a class="nav-link dropdown-toggle py-1 px-0" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="Country select: USA">
+                <div class="ratio ratio-1x1" style="width: 20px">
+                  <img src="/img/flags/en-us.png" alt="USA">
+                </div>
+              </a>
+              <ul class="dropdown-menu fs-sm" style="--cz-dropdown-spacer: .5rem">
+                <li>
+                  <a class="dropdown-item" href="#!">
+                    <img src="/img/flags/en-uk.png" class="flex-shrink-0 me-2" width="20" alt="United Kingdom">
+                    United Kingdom
+                  </a>
+                </li>
+                <li>
+                  <a class="dropdown-item" href="#!">
+                    <img src="/img/flags/fr.png" class="flex-shrink-0 me-2" width="20" alt="France">
+                    France
+                  </a>
+                </li>
+                <li>
+                  <a class="dropdown-item" href="#!">
+                    <img src="/img/flags/de.png" class="flex-shrink-0 me-2" width="20" alt="Deutschland">
+                    Deutschland
+                  </a>
+                </li>
+                <li>
+                  <a class="dropdown-item" href="#!">
+                    <img src="/img/flags/it.png" class="flex-shrink-0 me-2" width="20" alt="Italia">
+                    Italia
+                  </a>
+                </li>
+              </ul>
+            </div>
+            <div class="dropdown nav">
+              <a class="nav-link animate-underline dropdown-toggle fw-normal py-1 px-0" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <span class="animate-target">Washington</span>
+              </a>
+              <ul class="dropdown-menu fs-sm" style="--cz-dropdown-spacer: .5rem">
+                <li><a class="dropdown-item" href="#!">Chicago</a></li>
+                <li><a class="dropdown-item" href="#!">Los Angeles</a></li>
+                <li><a class="dropdown-item" href="#!">New York</a></li>
+                <li><a class="dropdown-item" href="#!">Philadelphia</a></li>
+              </ul>
+            </div>
+          </div>
+          <div class="offcanvas-body pt-1 pb-3 py-lg-0">
+            <div class="container pb-lg-2 px-0 px-lg-3">
+
+              <div class="position-relative d-lg-flex align-items-center justify-content-between">
+
+                <!-- Categories mega menu -->
+                <div class="navbar-nav">
+                  <div class="dropdown position-static pb-lg-2">
+                    <button type="button" class="nav-link animate-underline fw-semibold text-uppercase ps-0" data-bs-toggle="dropdown" data-bs-trigger="hover" data-bs-auto-close="outside" aria-expanded="false">
+                      <i class="ci-menu fs-lg me-2"></i>
+                      <span class="animate-target">Categories</span>
+                    </button>
+                    <div class="dropdown-menu w-100 p-4 px-xl-5" style="--cz-dropdown-spacer: .75rem">
+
+                      <!-- Nav tabs -->
+                      <ul class="nav nav-underline justify-content-lg-center mt-n2 mt-lg-0 mb-4" role="tablist">
+                        <li class="nav-item" role="presentation">
+                          <button type="button" class="nav-link text-uppercase active" id="womens-tab" data-bs-toggle="tab" data-bs-target="#womens-tab-pane" role="tab" aria-controls="womens-tab-pane" aria-selected="true">
+                            Women's
+                          </button>
+                        </li>
+                        <li class="nav-item" role="presentation">
+                          <button type="button" class="nav-link text-uppercase" id="mens-tab" data-bs-toggle="tab" data-bs-target="#mens-tab-pane" role="tab" aria-controls="mens-tab-pane" aria-selected="false">
+                            Men's
+                          </button>
+                        </li>
+                        <li class="nav-item" role="presentation">
+                          <button type="button" class="nav-link text-uppercase" id="kids-tab" data-bs-toggle="tab" data-bs-target="#kids-tab-pane" role="tab" aria-controls="kids-tab-pane" aria-selected="false">
+                            Kids'
+                          </button>
+                        </li>
+                      </ul>
+
+                      <!-- Tab panes -->
+                      <div class="tab-content pb-xl-4">
+
+                        <!-- Women's tab -->
+                        <div class="tab-pane fade show active" id="womens-tab-pane" role="tabpanel" aria-labelledby="womens-tab">
+                          <div class="row g-4">
+                            <div class="col-lg-2">
+                              <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2" href="{{ route('second', ['shop', 'catalog-fashion']) }}">
+                                <span class="animate-target">Clothing</span>
+                              </a>
+                              <ul class="nav flex-column gap-2 mt-0">
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Shirts &amp; Tops</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Coats &amp; Outerwear</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Underwear</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sweatshirts</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Dresses</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Swimwear</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">View all</a>
+                                </li>
+                              </ul>
+                            </div>
+                            <div class="col-lg-2">
+                              <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2" href="{{ route('second', ['shop', 'catalog-fashion']) }}">
+                                <span class="animate-target">Shoes</span>
+                              </a>
+                              <ul class="nav flex-column gap-2 mt-0">
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Boots</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sandals</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Heels</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Loafers</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Slippers</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Oxfords</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">View all</a>
+                                </li>
+                              </ul>
+                            </div>
+                            <div class="col-lg-2">
+                              <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2" href="{{ route('second', ['shop', 'catalog-fashion']) }}">
+                                <span class="animate-target">Accessories</span>
+                              </a>
+                              <ul class="nav flex-column gap-2 mt-0">
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Handbags</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Eyewear</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Hats</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Watches</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Jewelry</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Belts</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">View all</a>
+                                </li>
+                              </ul>
+                            </div>
+                            <div class="col-lg-2">
+                              <div class="h6 mb-2">Specialty Sizes</div>
+                              <ul class="nav flex-column gap-2 mt-0">
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Plus Size</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Petite</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Wide Shoes</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Narrow Shoes</a>
+                                </li>
+                              </ul>
+                            </div>
+                            <div class="col-lg-4 d-none d-lg-block" data-bs-theme="light">
+                              <div class="position-relative d-flex flex-column h-100 rounded-4 overflow-hidden p-4">
+                                <div class="position-relative d-flex flex-column justify-content-between h-100 z-2 pt-xl-2 ps-xl-2">
+                                  <div class="h4 lh-base">Women's<br>Heels<br>Collection</div>
+                                  <div>
+                                    <a class="btn btn-sm btn-dark stretched-link" href="{{ route('second', ['shop', 'catalog-fashion']) }}" data-bs-theme="light">Shop now</a>
+                                  </div>
+                                </div>
+                                <img src="/img/mega-menu/fashion/01.jpg" class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rtl-flip" alt="Image">
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+
+                        <!-- Men's tab -->
+                        <div class="tab-pane fade" id="mens-tab-pane" role="tabpanel" aria-labelledby="mens-tab">
+                          <div class="row g-4">
+                            <div class="col-lg-2">
+                              <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2" href="{{ route('second', ['shop', 'catalog-fashion']) }}">
+                                <span class="animate-target">Clothing</span>
+                              </a>
+                              <ul class="nav flex-column gap-2 mt-0">
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">T-Shirts</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Jeans</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Coats &amp; Outerwear</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sweatshirts</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Underwear</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Pants</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">View all</a>
+                                </li>
+                              </ul>
+                            </div>
+                            <div class="col-lg-2">
+                              <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2" href="{{ route('second', ['shop', 'catalog-fashion']) }}">
+                                <span class="animate-target">Shoes</span>
+                              </a>
+                              <ul class="nav flex-column gap-2 mt-0">
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sneakers</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Oxfords</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Loafers</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sandals</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Boots</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Slippers</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">View all</a>
+                                </li>
+                              </ul>
+                            </div>
+                            <div class="col-lg-2">
+                              <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2" href="{{ route('second', ['shop', 'catalog-fashion']) }}">
+                                <span class="animate-target">Accessories</span>
+                              </a>
+                              <ul class="nav flex-column gap-2 mt-0">
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Backpacks</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sunglasses</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Bags</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Watches</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Hats</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Belts</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">View all</a>
+                                </li>
+                              </ul>
+                            </div>
+                            <div class="col-lg-2">
+                              <div class="h6 mb-2">Specialty Shops</div>
+                              <ul class="nav flex-column gap-2 mt-0">
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Active Wear</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sports Clothing</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Athletic Shoes</a>
+                                </li>
+                              </ul>
+                            </div>
+                            <div class="col-lg-4 d-none d-lg-block" data-bs-theme="dark">
+                              <div class="position-relative d-flex flex-column h-100 rounded-4 overflow-hidden p-4">
+                                <div class="position-relative d-flex flex-column justify-content-between h-100 z-2 pt-xl-2 ps-xl-2">
+                                  <div class="h4 lh-base">Men's<br>Sunglasses<br>Offers</div>
+                                  <div>
+                                    <a class="btn btn-sm btn-dark stretched-link" href="{{ route('second', ['shop', 'catalog-fashion']) }}" data-bs-theme="dark">Shop now</a>
+                                  </div>
+                                </div>
+                                <img src="/img/mega-menu/fashion/02.jpg" class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rtl-flip" alt="Image">
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+
+                        <!-- Kids' tab -->
+                        <div class="tab-pane fade" id="kids-tab-pane" role="tabpanel" aria-labelledby="kids-tab">
+                          <div class="row g-4">
+                            <div class="col-lg-2">
+                              <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2" href="{{ route('second', ['shop', 'catalog-fashion']) }}">
+                                <span class="animate-target">Boys</span>
+                              </a>
+                              <ul class="nav flex-column gap-2 mt-0">
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Pants</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sneakers</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Coats &amp; Outerwear</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sweatshirts</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Boots</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Shorts</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">View all</a>
+                                </li>
+                              </ul>
+                            </div>
+                            <div class="col-lg-2">
+                              <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2" href="{{ route('second', ['shop', 'catalog-fashion']) }}">
+                                <span class="animate-target">Girls</span>
+                              </a>
+                              <ul class="nav flex-column gap-2 mt-0">
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Shirts &amp; Tops</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Dresses</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sneakers</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Hoodies</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sandals</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Coats &amp; Outerwear</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">View all</a>
+                                </li>
+                              </ul>
+                            </div>
+                            <div class="col-lg-2">
+                              <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2" href="{{ route('second', ['shop', 'catalog-fashion']) }}">
+                                <span class="animate-target">Accessories</span>
+                              </a>
+                              <ul class="nav flex-column gap-2 mt-0">
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Backpacks</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Gloves</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Shoe Laces</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Scarves</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Hats</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Belts</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">View all</a>
+                                </li>
+                              </ul>
+                            </div>
+                            <div class="col-lg-2">
+                              <div class="h6 mb-2">Shop by Age</div>
+                              <ul class="nav flex-column gap-2 mt-0">
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Infant</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Toddler</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Little Kid</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Big Kid</a>
+                                </li>
+                              </ul>
+                            </div>
+                            <div class="col-lg-4 d-none d-lg-block" data-bs-theme="light">
+                              <div class="position-relative d-flex flex-column h-100 rounded-4 overflow-hidden p-4">
+                                <div class="position-relative d-flex flex-column justify-content-between h-100 z-2 pt-xl-2 ps-xl-2">
+                                  <div class="h4 lh-base">Kids'<br>Spring<br>Collection</div>
+                                  <div>
+                                    <a class="btn btn-sm btn-dark stretched-link" href="{{ route('second', ['shop', 'catalog-fashion']) }}" data-bs-theme="light">Shop now</a>
+                                  </div>
+                                </div>
+                                <img src="/img/mega-menu/fashion/03.jpg" class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rtl-flip" alt="Image">
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Navbar nav -->
+                <ul class="navbar-nav position-relative me-xl-n5">
+                  <li class="nav-item dropdown pb-lg-2 me-lg-n1 me-xl-0">
+                    <a class="nav-link dropdown-toggle active" aria-current="page" href="#" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Home</a>
+                    <ul class="dropdown-menu" style="--cz-dropdown-spacer: .75rem">
+                      <li class="hover-effect-opacity px-2 mx-n2">
+                        <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'electronics']) }}">
+                          <span class="fw-medium">Electronics Store</span>
+                          <span class="d-block fs-xs text-body-secondary">Megamenu + Hero slider</span>
+                          <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2" style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                            <img class="position-relative z-2 d-none-dark" src="/img/mega-menu/demo-preview/electronics-light.jpg" alt="Electronics Store">
+                            <img class="position-relative z-2 d-none d-block-dark" src="/img/mega-menu/demo-preview/electronics-dark.jpg" alt="Electronics Store">
+                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark" style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark" style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                          </div>
+                        </a>
+                      </li>
+                      <li class="hover-effect-opacity px-2 mx-n2">
+                        <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'fashion-v1']) }}">
+                          <span class="fw-medium">Fashion Store v.1</span>
+                          <span class="d-block fs-xs text-body-secondary">Hero promo slider</span>
+                          <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2" style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                            <img class="position-relative z-2 d-none-dark" src="/img/mega-menu/demo-preview/fashion-1-light.jpg" alt="Fashion Store v.1">
+                            <img class="position-relative z-2 d-none d-block-dark" src="/img/mega-menu/demo-preview/fashion-1-dark.jpg" alt="Fashion Store v.1">
+                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark" style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark" style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                          </div>
+                        </a>
+                      </li>
+                      <li class="hover-effect-opacity px-2 mx-n2">
+                        <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'fashion-v2']) }}">
+                          <span class="fw-medium">Fashion Store v.2</span>
+                          <span class="d-block fs-xs text-body-secondary">Hero banner with hotspots</span>
+                          <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2" style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                            <img class="position-relative z-2 d-none-dark" src="/img/mega-menu/demo-preview/fashion-2-light.jpg" alt="Fashion Store v.2">
+                            <img class="position-relative z-2 d-none d-block-dark" src="/img/mega-menu/demo-preview/fashion-2-dark.jpg" alt="Fashion Store v.2">
+                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark" style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark" style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                          </div>
+                        </a>
+                      </li>
+                      <li class="hover-effect-opacity px-2 mx-n2">
+                        <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'furniture']) }}">
+                          <span class="fw-medium">Furniture Store</span>
+                          <span class="d-block fs-xs text-body-secondary">Fancy product carousel</span>
+                          <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2" style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                            <img class="position-relative z-2 d-none-dark" src="/img/mega-menu/demo-preview/furniture-light.jpg" alt="Furniture Store">
+                            <img class="position-relative z-2 d-none d-block-dark" src="/img/mega-menu/demo-preview/furniture-dark.jpg" alt="Furniture Store">
+                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark" style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark" style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                          </div>
+                        </a>
+                      </li>
+                      <li class="hover-effect-opacity px-2 mx-n2">
+                        <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'grocery']) }}">
+                          <span class="fw-medium">Grocery Store</span>
+                          <span class="d-block fs-xs text-body-secondary">Hero slider + Category cards</span>
+                          <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2" style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                            <img class="position-relative z-2 d-none-dark" src="/img/mega-menu/demo-preview/grocery-light.jpg" alt="Grocery Store">
+                            <img class="position-relative z-2 d-none d-block-dark" src="/img/mega-menu/demo-preview/grocery-dark.jpg" alt="Grocery Store">
+                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark" style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark" style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                          </div>
+                        </a>
+                      </li>
+                      <li class="hover-effect-opacity px-2 mx-n2">
+                        <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'marketplace']) }}">
+                          <span class="fw-medium">Marketplace</span>
+                          <span class="d-block fs-xs text-body-secondary">Multi-vendor, digital goods</span>
+                          <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2" style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                            <img class="position-relative z-2 d-none-dark" src="/img/mega-menu/demo-preview/marketplace-light.jpg" alt="Marketplace">
+                            <img class="position-relative z-2 d-none d-block-dark" src="/img/mega-menu/demo-preview/marketplace-dark.jpg" alt="Marketplace">
+                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark" style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark" style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                          </div>
+                        </a>
+                      </li>
+                      <li class="hover-effect-opacity px-2 mx-n2">
+                        <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'single-store']) }}">
+                          <span class="fw-medium">Single Product Store</span>
+                          <span class="d-block fs-xs text-body-secondary">Single product / mono brand</span>
+                          <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2" style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                            <img class="position-relative z-2 d-none-dark" src="/img/mega-menu/demo-preview/single-store-light.jpg" alt="Single Product Store">
+                            <img class="position-relative z-2 d-none d-block-dark" src="/img/mega-menu/demo-preview/single-store-dark.jpg" alt="Single Product Store">
+                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark" style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark" style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                          </div>
+                        </a>
+                      </li>
+                    </ul>
+                  </li>
+                  <li class="nav-item dropdown position-static pb-lg-2 me-lg-n1 me-xl-0">
+                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Shop</a>
+                    <div class="dropdown-menu p-4" style="--cz-dropdown-spacer: .75rem">
+                      <div class="d-flex flex-column flex-lg-row gap-4">
+                        <div style="min-width: 190px">
+                          <div class="h6 mb-2">Electronics Store</div>
+                          <ul class="nav flex-column gap-2 mt-0">
+                            <li class="d-flex w-100 pt-1">
+                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'categories-electronics']) }}">Categories Page</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Catalog with Side Filters</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'product-general-electronics']) }}">Product General Info</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'product-details-electronics']) }}">Product Details</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'product-reviews-electronics']) }}">Product Reviews</a>
+                            </li>
+                          </ul>
+                          <div class="h6 pt-4 mb-2">Fashion Store</div>
+                          <ul class="nav flex-column gap-2 mt-0">
+                            <li class="d-flex w-100 pt-1">
+                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Catalog with Side Filters</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'product-fashion']) }}">Product Page</a>
+                            </li>
+                          </ul>
+                          <div class="h6 pt-4 mb-2">Furniture Store</div>
+                          <ul class="nav flex-column gap-2 mt-0">
+                            <li class="d-flex w-100 pt-1">
+                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-furniture']) }}">Catalog with Top Filters</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'product-furniture']) }}">Product Page</a>
+                            </li>
+                          </ul>
+                        </div>
+                        <div style="min-width: 190px">
+                          <div class="h6 mb-2">Grocery Store</div>
+                          <ul class="nav flex-column gap-2 mt-0">
+                            <li class="d-flex w-100 pt-1">
+                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-grocery']) }}">Catalog with Side Filters</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'product-grocery']) }}">Product Page</a>
+                            </li>
+                          </ul>
+                          <div class="h6 pt-4 mb-2">Marketplace</div>
+                          <ul class="nav flex-column gap-2 mt-0">
+                            <li class="d-flex w-100 pt-1">
+                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-marketplace']) }}">Catalog with Top Filters</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'product-marketplace']) }}">Digital Product Page</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['checkout', 'marketplace']) }}">Cart / Checkout</a>
+                            </li>
+                          </ul>
+                        </div>
+                        <div style="min-width: 190px">
+                          <div class="h6 mb-2">Checkout v.1</div>
+                          <ul class="nav flex-column gap-2 mt-0">
+                            <li class="d-flex w-100 pt-1">
+                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['checkout', 'v1-cart']) }}">Shopping Cart</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['checkout', 'v1-delivery-1']) }}">Delivery Info (Step 1)</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['checkout', 'v1-delivery-2']) }}">Delivery Info (Step 2)</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['checkout', 'v1-shipping']) }}">Shipping Address</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['checkout', 'v1-payment']) }}">Payment</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['checkout', 'v1-thankyou']) }}">Thank You Page</a>
+                            </li>
+                          </ul>
+                          <div class="h6 pt-4 mb-2">Checkout v.2</div>
+                          <ul class="nav flex-column gap-2 mt-0">
+                            <li class="d-flex w-100 pt-1">
+                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['checkout', 'v2-cart']) }}">Shopping Cart</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['checkout', 'v2-delivery']) }}">Delivery Info</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['checkout', 'v2-pickup']) }}">Pickup from Store</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                              <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['checkout', 'v2-thankyou']) }}">Thank You Page</a>
+                            </li>
+                          </ul>
+                        </div>
+                      </div>
+                    </div>
+                  </li>
+                  <li class="nav-item dropdown pb-lg-2 me-lg-n1 me-xl-0">
+                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" data-bs-auto-close="outside" aria-expanded="false">Account</a>
+                    <ul class="dropdown-menu" style="--cz-dropdown-spacer: .75rem">
+                      <li class="dropend">
+                        <a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Auth Pages</a>
+                        <ul class="dropdown-menu">
+                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'signin']) }}">Sign In</a></li>
+                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'signup']) }}">Sign Up</a></li>
+                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'password-recovery']) }}">Password Recovery</a></li>
+                        </ul>
+                      </li>
+                      <li class="dropend">
+                        <a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Shop User</a>
+                        <ul class="dropdown-menu">
+                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'orders']) }}">Orders History</a></li>
+                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'wishlist']) }}">Wishlist</a></li>
+                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'payment']) }}">Payment Methods</a></li>
+                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'reviews']) }}">My Reviews</a></li>
+                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'info']) }}">Personal Info</a></li>
+                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'addresses']) }}">Addresses</a></li>
+                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'notifications']) }}">Notifications</a></li>
+                        </ul>
+                      </li>
+                      <li class="dropend">
+                        <a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Marketplace User</a>
+                        <ul class="dropdown-menu">
+                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-dashboard']) }}">Dashboard</a></li>
+                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-products']) }}">Products</a></li>
+                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-sales']) }}">Sales</a></li>
+                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-payouts']) }}">Payouts</a></li>
+                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-purchases']) }}">Purchases</a></li>
+                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-favorites']) }}">Favorites</a></li>
+                          <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-settings']) }}">Settings</a></li>
+                        </ul>
+                      </li>
+                    </ul>
+                  </li>
+                  <li class="nav-item dropdown pb-lg-2 me-lg-n1 me-xl-0">
+                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" data-bs-auto-close="outside" aria-expanded="false">Pages</a>
+                    <ul class="dropdown-menu" style="--cz-dropdown-spacer: .75rem">
+                      <li class="dropend">
+                        <a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">About</a>
+                        <ul class="dropdown-menu">
+                          <li><a class="dropdown-item" href="{{ route('second', ['about', 'v1']) }}">About v.1</a></li>
+                          <li><a class="dropdown-item" href="{{ route('second', ['about', 'v2']) }}">About v.2</a></li>
+                        </ul>
+                      </li>
+                      <li class="dropend">
+                        <a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Blog</a>
+                        <ul class="dropdown-menu">
+                          <li><a class="dropdown-item" href="{{ route('second', ['blog', 'grid-v1']) }}">Grid View v.1</a></li>
+                          <li><a class="dropdown-item" href="{{ route('second', ['blog', 'grid-v2']) }}">Grid View v.2</a></li>
+                          <li><a class="dropdown-item" href="{{ route('second', ['blog', 'list']) }}">List View</a></li>
+                          <li><a class="dropdown-item" href="{{ route('second', ['blog', 'single-v1']) }}">Single Post v.1</a></li>
+                          <li><a class="dropdown-item" href="{{ route('second', ['blog', 'single-v2']) }}">Single Post v.2</a></li>
+                        </ul>
+                      </li>
+                      <li class="dropend">
+                        <a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Contact</a>
+                        <ul class="dropdown-menu">
+                          <li><a class="dropdown-item" href="{{ route('second', ['contact', 'v1']) }}">Contact v.1</a></li>
+                          <li><a class="dropdown-item" href="{{ route('second', ['contact', 'v2']) }}">Contact v.2</a></li>
+                          <li><a class="dropdown-item" href="{{ route('second', ['contact', 'v3']) }}">Contact v.3</a></li>
+                        </ul>
+                      </li>
+                      <li class="dropend">
+                        <a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Help Center</a>
+                        <ul class="dropdown-menu">
+                          <li><a class="dropdown-item" href="{{ route('second', ['help', 'topics-v1']) }}">Help Topics v.1</a></li>
+                          <li><a class="dropdown-item" href="{{ route('second', ['help', 'topics-v2']) }}">Help Topics v.2</a></li>
+                          <li><a class="dropdown-item" href="{{ route('second', ['help', 'single-article-v1']) }}">Help Single Article v.1</a></li>
+                          <li><a class="dropdown-item" href="{{ route('second', ['help', 'single-article-v2']) }}">Help Single Article v.2</a></li>
+                        </ul>
+                      </li>
+                      <li class="dropend">
+                        <a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">404 Error</a>
+                        <ul class="dropdown-menu">
+                          <li><a class="dropdown-item" href="{{ route('second', ['404', 'electronics']) }}">404 Electronics</a></li>
+                          <li><a class="dropdown-item" href="{{ route('second', ['404', 'fashion']) }}">404 Fashion</a></li>
+                          <li><a class="dropdown-item" href="{{ route('second', ['404', 'furniture']) }}">404 Furniture</a></li>
+                          <li><a class="dropdown-item" href="{{ route('second', ['404', 'grocery']) }}">404 Grocery</a></li>
+                        </ul>
+                      </li>
+                      <li><a class="dropdown-item" href="{{ route('any', 'terms-and-conditions')}}">Terms &amp; Conditions</a></li>
+                    </ul>
+                  </li>                  
+                </ul>
+
+                <!-- Search toggle visible on screens > 991px wide (lg breakpoint) -->
+                <button type="button" class="btn btn-outline-secondary justify-content-start w-100 px-3 mb-lg-2 ms-3 d-none d-lg-inline-flex" style="max-width: 240px" data-bs-toggle="offcanvas" data-bs-target="#searchBox" aria-controls="searchBox">
+                  <i class="ci-search fs-base ms-n1 me-2"></i>
+                  <span class="text-body-tertiary fw-normal">Search</span>
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <!-- Account and Wishlist buttons visible on screens < 768px wide (md breakpoint) -->
+          <div class="offcanvas-header border-top px-0 py-3 mt-3 d-md-none">
+            <div class="nav nav-justified w-100">
+              <a class="nav-link border-end" href="{{ route('second', ['account', 'signin']) }}">
+                <i class="ci-user fs-lg opacity-60 me-2"></i>
+                Account
+              </a>
+              <a class="nav-link" href="#!">
+                <i class="ci-heart fs-lg opacity-60 me-2"></i>
+                Wishlist
+              </a>
+            </div>
+          </div>
+        </nav>
+      </div>
+    </header>
+
+    <main class="content-wrapper">
+
+        <!-- Hero slider -->
+        <section class="bg-body-tertiary">
+            <div class="container">
+                <div class="row">
+
+                    <!-- Titles master slider -->
+                    <div class="col-md-6 col-lg-5 d-flex flex-column">
+                        <div class="py-4 mt-auto">
+                            <div class="swiper pb-1 pt-3 pt-sm-4 py-md-4 py-lg-3"
+                                data-swiper='{
+                  "spaceBetween": 24,
+                  "loop": true,
+                  "speed": 400,
+                  "controlSlider": "#heroImages",
+                  "pagination": {
+                    "el": "#sliderBullets",
+                    "clickable": true
+                  },
+                  "autoplay": {
+                    "delay": 5500,
+                    "disableOnInteraction": false
+                  }
+                }'>
+                                <div class="swiper-wrapper align-items-center">
+
+                                    <!-- Item -->
+                                    <div class="swiper-slide text-center text-md-start">
+                                        <p class="fs-xl mb-2 mb-lg-3 mb-xl-4">The new warm collection</p>
+                                        <h2 class="display-4 text-uppercase mb-4 mb-xl-5">New fall <br
+                                                class="d-none d-md-inline">season 2024</h2>
+                                        <a class="btn btn-lg btn-outline-dark" href="{{ route('second', ['shop', 'catalog-fashion']) }}">
+                                            Shop now
+                                            <i class="ci-arrow-up-right fs-lg ms-2 me-n1"></i>
+                                        </a>
+                                    </div>
+
+                                    <!-- Item -->
+                                    <div class="swiper-slide text-center text-md-start">
+                                        <p class="fs-xl mb-2 mb-lg-3 mb-xl-4">Ready for the party?</p>
+                                        <h2 class="display-4 text-uppercase mb-4 mb-xl-5">Choose outfits for parties</h2>
+                                        <a class="btn btn-lg btn-outline-dark" href="{{ route('second', ['shop', 'catalog-fashion']) }}">
+                                            Shop now
+                                            <i class="ci-arrow-up-right fs-lg ms-2 me-n1"></i>
+                                        </a>
+                                    </div>
+
+                                    <!-- Item -->
+                                    <div class="swiper-slide text-center text-md-start">
+                                        <p class="fs-xl mb-2 mb-lg-3 mb-xl-4">Shades of gray for your look</p>
+                                        <h2 class="display-4 text-uppercase mb-4 mb-xl-5">-50% on gray Collection</h2>
+                                        <a class="btn btn-lg btn-outline-dark" href="{{ route('second', ['shop', 'catalog-fashion']) }}">
+                                            Shop now
+                                            <i class="ci-arrow-up-right fs-lg ms-2 me-n1"></i>
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Slider bullets (pagination) -->
+                        <div
+                            class="d-flex justify-content-center justify-content-md-start pb-4 pb-xl-5 mt-n1 mt-md-auto mb-md-3 mb-lg-4">
+                            <div class="swiper-pagination position-static w-auto pb-1" id="sliderBullets"></div>
+                        </div>
+                    </div>
+
+                    <!-- Linked images (controlled slider) -->
+                    <div class="col-md-6 col-lg-7 align-self-end">
+                        <div class="position-relative ms-md-n4">
+                            <div class="ratio" style="--cz-aspect-ratio: calc(662 / 770 * 100%)"></div>
+                            <div class="swiper position-absolute top-0 start-0 w-100 h-100 user-select-none"
+                                id="heroImages"
+                                data-swiper='{
+                  "allowTouchMove": false,
+                  "loop": true,
+                  "effect": "fade",
+                  "fadeEffect": {
+                    "crossFade": true
+                  }
+                }'>
+                                <div class="swiper-wrapper">
+                                    <div class="swiper-slide">
+                                        <img src="/img/home/fashion/v1/hero-slider/01.png" class="rtl-flip"
+                                            alt="Image">
+                                    </div>
+                                    <div class="swiper-slide">
+                                        <img src="/img/home/fashion/v1/hero-slider/02.png" class="rtl-flip"
+                                            alt="Image">
+                                    </div>
+                                    <div class="swiper-slide">
+                                        <img src="/img/home/fashion/v1/hero-slider/03.png" class="rtl-flip"
+                                            alt="Image">
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Popular products carousel -->
+        <section class="container py-5 my-2 my-sm-3 my-lg-4 my-xl-5">
+            <div class="row align-items-lg-center py-xxl-3">
+
+                <!-- Products -->
+                <div class="col-md-6 col-xl-5 offset-xl-1 order-md-2 mb-4 mb-md-0">
+                    <div class="ps-md-3 ps-lg-4 ps-xl-0">
+                        <div class="d-flex align-items-center justify-content-between pb-4 mb-md-1 mb-lg-2 mb-xl-3">
+                            <h2 class="me-3 mb-0">Popular products</h2>
+
+                            <!-- Slider prev/next buttons -->
+                            <div class="d-flex gap-2">
+                                <button type="button"
+                                    class="btn btn-icon btn-outline-secondary animate-slide-start rounded-circle me-1"
+                                    id="popularPrev" aria-label="Prev">
+                                    <i class="ci-chevron-left fs-lg animate-target"></i>
+                                </button>
+                                <button type="button"
+                                    class="btn btn-icon btn-outline-secondary animate-slide-end rounded-circle"
+                                    id="popularNext" aria-label="Next">
+                                    <i class="ci-chevron-right fs-lg animate-target"></i>
+                                </button>
+                            </div>
+                        </div>
+
+                        <!-- Products master slider -->
+                        <div class="swiper"
+                            data-swiper='{
+                "spaceBetween": 24,
+                "loop": true,
+                "speed": 400,
+                "controlSlider": "#sliderImages",
+                "navigation": {
+                  "prevEl": "#popularPrev",
+                  "nextEl": "#popularNext"
+                }
+              }'>
+                            <div class="swiper-wrapper">
+
+                                <!-- Products list slide -->
+                                <div class="swiper-slide">
+                                    <div class="d-flex flex-column gap-3 gap-lg-4">
+                                        <div
+                                            class="d-flex align-items-center position-relative bg-body-tertiary rounded overflow-hidden animate-underline">
+                                            <img src="/img/shop/fashion/thumbs/01.png" width="110" alt="Thumbnail">
+                                            <div class="nav flex-column gap-2 min-w-0 p-3">
+                                                <a class="nav-link text-dark-emphasis stretched-link w-100 min-w-0 p-0"
+                                                    href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                                    <span class="animate-target text-truncate">Short jacket in long-pile
+                                                        faux fur</span>
+                                                </a>
+                                                <div class="h6 mb-0">$218.00</div>
+                                            </div>
+                                        </div>
+                                        <div
+                                            class="d-flex align-items-center position-relative bg-body-tertiary rounded overflow-hidden animate-underline">
+                                            <img src="/img/shop/fashion/thumbs/02.png" width="110" alt="Thumbnail">
+                                            <div class="nav flex-column gap-2 min-w-0 p-3">
+                                                <a class="nav-link text-dark-emphasis stretched-link w-100 min-w-0 p-0"
+                                                    href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                                    <span class="animate-target text-truncate">Women's walking shoes tennis
+                                                        sneakers</span>
+                                                </a>
+                                                <div class="h6 mb-0">$54.99</div>
+                                            </div>
+                                        </div>
+                                        <div
+                                            class="d-flex align-items-center position-relative bg-body-tertiary rounded overflow-hidden animate-underline">
+                                            <img src="/img/shop/fashion/thumbs/03.png" width="110" alt="Thumbnail">
+                                            <div class="nav flex-column gap-2 min-w-0 p-3">
+                                                <a class="nav-link text-dark-emphasis stretched-link w-100 min-w-0 p-0"
+                                                    href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                                    <span class="animate-target text-truncate">Classic aviator sunglasses
+                                                        for women</span>
+                                                </a>
+                                                <div class="h6 mb-0">$76.00</div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <!-- Products list slide -->
+                                <div class="swiper-slide">
+                                    <div class="d-flex flex-column gap-3 gap-lg-4">
+                                        <div
+                                            class="d-flex align-items-center position-relative bg-body-tertiary rounded overflow-hidden animate-underline">
+                                            <img src="/img/shop/fashion/thumbs/04.png" width="110" alt="Thumbnail">
+                                            <div class="nav flex-column gap-2 min-w-0 p-3">
+                                                <a class="nav-link text-dark-emphasis stretched-link w-100 min-w-0 p-0"
+                                                    href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                                    <span class="animate-target text-truncate">Vintage oversized wool
+                                                        blazer jacket</span>
+                                                </a>
+                                                <div class="h6 mb-0">$174.00</div>
+                                            </div>
+                                        </div>
+                                        <div
+                                            class="d-flex align-items-center position-relative bg-body-tertiary rounded overflow-hidden animate-underline">
+                                            <img src="/img/shop/fashion/thumbs/05.png" width="110" alt="Thumbnail">
+                                            <div class="nav flex-column gap-2 min-w-0 p-3">
+                                                <a class="nav-link text-dark-emphasis stretched-link w-100 min-w-0 p-0"
+                                                    href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                                    <span class="animate-target text-truncate">Classic pilot style
+                                                        polarized sunglasses</span>
+                                                </a>
+                                                <div class="h6 mb-0">$93.00</div>
+                                            </div>
+                                        </div>
+                                        <div
+                                            class="d-flex align-items-center position-relative bg-body-tertiary rounded overflow-hidden animate-underline">
+                                            <img src="/img/shop/fashion/thumbs/06.png" width="110" alt="Thumbnail">
+                                            <div class="nav flex-column gap-2 min-w-0 p-3">
+                                                <a class="nav-link text-dark-emphasis stretched-link w-100 min-w-0 p-0"
+                                                    href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                                    <span class="animate-target text-truncate">Cotton dress straight-leg
+                                                        pants</span>
+                                                </a>
+                                                <div class="h6 mb-0">$65.00</div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Complete look images (controlled slider) -->
+                <div class="col-md-6 order-md-1">
+                    <div class="swiper user-select-none" id="sliderImages"
+                        data-swiper='{
+              "allowTouchMove": false,
+              "loop": true,
+              "effect": "fade",
+              "fadeEffect": {
+                "crossFade": true
+              }
+            }'>
+                        <div class="swiper-wrapper">
+                            <div class="swiper-slide">
+                                <div class="ratio d-none d-md-block" style="--cz-aspect-ratio: calc(720 / 636 * 100%)">
+                                </div>
+                                <div class="ratio ratio-4x3 d-md-none"></div>
+                                <img src="/img/home/fashion/v1/popular/01.jpg"
+                                    class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rounded-5"
+                                    alt="Image">
+                            </div>
+                            <div class="swiper-slide">
+                                <div class="ratio d-none d-md-block" style="--cz-aspect-ratio: calc(720 / 636 * 100%)">
+                                </div>
+                                <div class="ratio ratio-4x3 d-md-none"></div>
+                                <img src="/img/home/fashion/v1/popular/02.jpg"
+                                    class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rounded-5"
+                                    style="object-position: center top" alt="Image">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Featured products -->
+        <section class="container pb-5 mb-2 mb-sm-3 mb-lg-4 mb-xl-5">
+            <h2 class="text-center pb-2 pb-sm-3">This week's highlights</h2>
+
+            <!-- Nav pills -->
+            <div class="row g-0 overflow-x-auto pb-2 pb-sm-3 mb-3">
+                <div class="col-auto pb-1 pb-sm-0 mx-auto">
+                    <ul class="nav nav-pills flex-nowrap text-nowrap">
+                        <li class="nav-item">
+                            <a class="nav-link active" aria-current="page" href="#!">Best sellers</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="#!">New arrivals</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="#!">Sale items</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="#!">Top rated</a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+
+            <!-- Products grid -->
+            <div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 gy-4 gy-md-5 pb-xxl-3">
+
+                <!-- Item -->
+                <div class="col mb-2 mb-sm-3 mb-md-0">
+                    <div class="animate-underline hover-effect-opacity">
+                        <div class="position-relative mb-3">
+                            <span
+                                class="badge text-bg-danger position-absolute top-0 start-0 z-2 mt-2 mt-sm-3 ms-2 ms-sm-3">Sale</span>
+                            <button type="button"
+                                class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                aria-label="Add to Wishlist">
+                                <i class="ci-heart animate-target"></i>
+                            </button>
+                            <a class="d-flex bg-body-tertiary rounded p-3" href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                <div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
+                                    <img src="/img/shop/fashion/01.png" alt="Image">
+                                </div>
+                            </a>
+                            <div
+                                class="hover-effect-target position-absolute start-0 bottom-0 w-100 z-2 opacity-0 pb-2 pb-sm-3 px-2 px-sm-3">
+                                <div
+                                    class="d-flex align-items-center justify-content-center gap-2 gap-xl-3 bg-body rounded-2 p-2">
+                                    <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">XS</span>
+                                    <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">S</span>
+                                    <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">M</span>
+                                    <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">L</span>
+                                    <div class="nav">
+                                        <a class="nav-link fs-xs text-body-tertiary py-1 px-2"
+                                            href="{{ route('second', ['shop', 'product-fashion']) }}">+3</a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="nav mb-2">
+                            <a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
+                                href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                <span class="text-truncate">Denim midi skirt with pockets</span>
+                            </a>
+                        </div>
+                        <div class="h6 mb-2">$126.50 <del class="fs-sm fw-normal text-body-tertiary">$156.00</del></div>
+                        <div class="position-relative">
+                            <div class="hover-effect-target fs-xs text-body-secondary opacity-100">+1 color</div>
+                            <div class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
+                                <input type="radio" class="btn-check" name="colors-1" id="color-1-1" checked>
+                                <label for="color-1-1" class="btn btn-color fs-base" style="color: #284971">
+                                    <span class="visually-hidden">Dark denim</span>
+                                </label>
+                                <input type="radio" class="btn-check" name="colors-1" id="color-1-2">
+                                <label for="color-1-2" class="btn btn-color fs-base" style="color: #8b9bc4">
+                                    <span class="visually-hidden">Light denim</span>
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Item -->
+                <div class="col mb-2 mb-sm-3 mb-md-0">
+                    <div class="animate-underline hover-effect-opacity">
+                        <div class="position-relative mb-3">
+                            <button type="button"
+                                class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                aria-label="Add to Wishlist">
+                                <i class="ci-heart animate-target"></i>
+                            </button>
+                            <a class="d-flex bg-body-tertiary rounded p-3" href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                <div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
+                                    <img src="/img/shop/fashion/08.png" alt="Image">
+                                </div>
+                            </a>
+                            <div
+                                class="hover-effect-target position-absolute start-0 bottom-0 w-100 z-2 opacity-0 pb-2 pb-sm-3 px-2 px-sm-3">
+                                <div
+                                    class="d-flex align-items-center justify-content-center gap-2 gap-xl-3 bg-body rounded-2 p-2">
+                                    <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">6.5</span>
+                                    <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">7</span>
+                                    <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">7.5</span>
+                                    <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">8</span>
+                                    <div class="nav">
+                                        <a class="nav-link fs-xs text-body-tertiary py-1 px-2"
+                                            href="{{ route('second', ['shop', 'product-fashion']) }}">+3</a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="nav mb-2">
+                            <a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
+                                href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                <span class="text-truncate">Leather sneakers with golden laces</span>
+                            </a>
+                        </div>
+                        <div class="h6 mb-2">$74.00</div>
+                        <div class="position-relative">
+                            <div class="hover-effect-target fs-xs text-body-secondary opacity-100">+2 colors</div>
+                            <div class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
+                                <input type="radio" class="btn-check" name="colors-8" id="color-8-1" checked>
+                                <label for="color-8-1" class="btn btn-color fs-base" style="color: #b1aa9b">
+                                    <span class="visually-hidden">Cream</span>
+                                </label>
+                                <input type="radio" class="btn-check" name="colors-8" id="color-8-2">
+                                <label for="color-8-2" class="btn btn-color fs-base" style="color: #496c33">
+                                    <span class="visually-hidden">Dark green</span>
+                                </label>
+                                <input type="radio" class="btn-check" name="colors-8" id="color-8-3">
+                                <label for="color-8-3" class="btn btn-color fs-base" style="color: #364254">
+                                    <span class="visually-hidden">Black</span>
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Item -->
+                <div class="col mb-2 mb-sm-3 mb-md-0">
+                    <div class="animate-underline hover-effect-opacity">
+                        <div class="position-relative mb-3">
+                            <button type="button"
+                                class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                aria-label="Add to Wishlist">
+                                <i class="ci-heart animate-target"></i>
+                            </button>
+                            <a class="d-flex bg-body-tertiary rounded p-3" href="#!">
+                                <div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
+                                    <img src="/img/shop/fashion/11.png" alt="Image">
+                                </div>
+                            </a>
+                            <div
+                                class="hover-effect-target position-absolute start-0 bottom-0 w-100 z-2 opacity-0 pb-2 pb-sm-3 px-2 px-sm-3">
+                                <div
+                                    class="d-flex align-items-center justify-content-center gap-2 gap-xl-3 bg-body rounded-2 p-2">
+                                    <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">S</span>
+                                    <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">M</span>
+                                    <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">L</span>
+                                    <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">XL</span>
+                                    <div class="nav">
+                                        <a class="nav-link fs-xs text-body-tertiary py-1 px-2" href="#!">+1</a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="nav mb-2">
+                            <a class="nav-link animate-target min-w-0 text-dark-emphasis p-0" href="#!">
+                                <span class="text-truncate">Warm sweatshirts without a hoodie</span>
+                            </a>
+                        </div>
+                        <div class="h6 mb-2">$32.99</div>
+                        <div class="position-relative">
+                            <div class="hover-effect-target fs-xs text-body-secondary opacity-100">+2 colors</div>
+                            <div class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
+                                <input type="radio" class="btn-check" name="colors-11" id="color-11-1" checked>
+                                <label for="color-11-1" class="btn btn-color fs-base" style="color: #42675f">
+                                    <span class="visually-hidden">Green</span>
+                                </label>
+                                <input type="radio" class="btn-check" name="colors-11" id="color-11-2">
+                                <label for="color-11-2" class="btn btn-color fs-base" style="color: #476585">
+                                    <span class="visually-hidden">Blue</span>
+                                </label>
+                                <input type="radio" class="btn-check" name="colors-11" id="color-11-3">
+                                <label for="color-11-3" class="btn btn-color fs-base" style="color: #724c74">
+                                    <span class="visually-hidden">Purple</span>
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Item -->
+                <div class="col mb-2 mb-sm-3 mb-md-0">
+                    <div class="animate-underline hover-effect-opacity">
+                        <div class="position-relative mb-3">
+                            <button type="button"
+                                class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                aria-label="Add to Wishlist">
+                                <i class="ci-heart animate-target"></i>
+                            </button>
+                            <a class="d-flex bg-body-tertiary rounded p-3" href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                <div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
+                                    <img src="/img/shop/fashion/04.png" alt="Image">
+                                </div>
+                            </a>
+                        </div>
+                        <div class="nav mb-2">
+                            <a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
+                                href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                <span class="text-truncate">Knitted bag with a wooden handle</span>
+                            </a>
+                        </div>
+                        <div class="h6 mb-2">$105.00</div>
+                        <div class="position-relative">
+                            <div class="hover-effect-target fs-xs text-body-secondary opacity-100">+1 color</div>
+                            <div class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
+                                <input type="radio" class="btn-check" name="colors-4" id="color-4-1" checked>
+                                <label for="color-4-1" class="btn btn-color fs-base" style="color: #e7ddb4">
+                                    <span class="visually-hidden">Beige</span>
+                                </label>
+                                <input type="radio" class="btn-check" name="colors-4" id="color-4-2">
+                                <label for="color-4-2" class="btn btn-color fs-base" style="color: #8b9bc4">
+                                    <span class="visually-hidden">Blue</span>
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Item -->
+                <div class="col mb-2 mb-sm-3 mb-md-0">
+                    <div class="animate-underline hover-effect-opacity">
+                        <div class="position-relative mb-3">
+                            <button type="button"
+                                class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                aria-label="Add to Wishlist">
+                                <i class="ci-heart animate-target"></i>
+                            </button>
+                            <a class="d-flex bg-body-tertiary rounded p-3" href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                <div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
+                                    <img src="/img/shop/fashion/09.png" alt="Image">
+                                </div>
+                            </a>
+                            <div
+                                class="hover-effect-target position-absolute start-0 bottom-0 w-100 z-2 opacity-0 pb-2 pb-sm-3 px-2 px-sm-3">
+                                <div
+                                    class="d-flex align-items-center justify-content-center gap-2 gap-xl-3 bg-body rounded-2 p-2">
+                                    <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">XS</span>
+                                    <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">S</span>
+                                    <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">M</span>
+                                    <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">L</span>
+                                    <div class="nav">
+                                        <a class="nav-link fs-xs text-body-tertiary py-1 px-2"
+                                            href="{{ route('second', ['shop', 'product-fashion']) }}">+3</a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="nav mb-2">
+                            <a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
+                                href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                <span class="text-truncate">White cotton blouse with necklace</span>
+                            </a>
+                        </div>
+                        <div class="h6 mb-2">$38.50</div>
+                        <div class="position-relative">
+                            <div class="hover-effect-target fs-xs text-body-secondary opacity-100">+1 color</div>
+                            <div class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
+                                <input type="radio" class="btn-check" name="colors-9" id="color-9-1" checked>
+                                <label for="color-9-1" class="btn btn-color fs-base" style="color: #e0e5eb">
+                                    <span class="visually-hidden">White</span>
+                                </label>
+                                <input type="radio" class="btn-check" name="colors-9" id="color-9-2">
+                                <label for="color-9-2" class="btn btn-color fs-base" style="color: #364254">
+                                    <span class="visually-hidden">Black</span>
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Item -->
+                <div class="col mb-2 mb-sm-3 mb-md-0">
+                    <div class="animate-underline hover-effect-opacity">
+                        <div class="position-relative mb-3">
+                            <button type="button"
+                                class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                aria-label="Add to Wishlist">
+                                <i class="ci-heart animate-target"></i>
+                            </button>
+                            <a class="d-flex bg-body-tertiary rounded p-3" href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                <div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
+                                    <img src="/img/shop/fashion/10.png" alt="Image">
+                                </div>
+                            </a>
+                        </div>
+                        <div class="nav mb-2">
+                            <a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
+                                href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                <span class="text-truncate">Leather handbag for women</span>
+                            </a>
+                        </div>
+                        <div class="h6 mb-2">$140.00</div>
+                        <div class="position-relative">
+                            <div class="hover-effect-target fs-xs text-body-secondary opacity-100">+2 colors</div>
+                            <div class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
+                                <input type="radio" class="btn-check" name="colors-10" id="color-10-1" checked>
+                                <label for="color-10-1" class="btn btn-color fs-base" style="color: #869286">
+                                    <span class="visually-hidden">Olive</span>
+                                </label>
+                                <input type="radio" class="btn-check" name="colors-10" id="color-10-2">
+                                <label for="color-10-2" class="btn btn-color fs-base" style="color: #364254">
+                                    <span class="visually-hidden">Black</span>
+                                </label>
+                                <input type="radio" class="btn-check" name="colors-10" id="color-10-3">
+                                <label for="color-10-3" class="btn btn-color fs-base" style="color: #526f99">
+                                    <span class="visually-hidden">Blue</span>
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Item -->
+                <div class="col mb-2 mb-sm-3 mb-md-0">
+                    <div class="animate-underline hover-effect-opacity">
+                        <div class="position-relative mb-3">
+                            <span
+                                class="badge text-bg-danger position-absolute top-0 start-0 z-2 mt-2 mt-sm-3 ms-2 ms-sm-3">-17%</span>
+                            <button type="button"
+                                class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                aria-label="Add to Wishlist">
+                                <i class="ci-heart animate-target"></i>
+                            </button>
+                            <a class="d-flex bg-body-tertiary rounded p-3" href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                <div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
+                                    <img src="/img/shop/fashion/05.png" alt="Image">
+                                </div>
+                            </a>
+                        </div>
+                        <div class="nav mb-2">
+                            <a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
+                                href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                <span class="text-truncate">Polarized sunglasses for men</span>
+                            </a>
+                        </div>
+                        <div class="h6 mb-2">$96.00 <del class="fs-sm fw-normal text-body-tertiary">$112.00</del></div>
+                        <div class="position-relative">
+                            <div class="hover-effect-target fs-xs text-body-secondary opacity-100">+2 colors</div>
+                            <div class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
+                                <input type="radio" class="btn-check" name="colors-5" id="color-5-1" checked>
+                                <label for="color-5-1" class="btn btn-color fs-base" style="color: #8cc4ac">
+                                    <span class="visually-hidden">Green</span>
+                                </label>
+                                <input type="radio" class="btn-check" name="colors-5" id="color-5-2">
+                                <label for="color-5-2" class="btn btn-color fs-base" style="color: #8cb7c4">
+                                    <span class="visually-hidden">Blue</span>
+                                </label>
+                                <input type="radio" class="btn-check" name="colors-5" id="color-5-3">
+                                <label for="color-5-3" class="btn btn-color fs-base" style="color: #ccb782">
+                                    <span class="visually-hidden">Brown</span>
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Item -->
+                <div class="col mb-2 mb-sm-3 mb-md-0">
+                    <div class="animate-underline hover-effect-opacity">
+                        <div class="position-relative mb-3">
+                            <button type="button"
+                                class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                aria-label="Add to Wishlist">
+                                <i class="ci-heart animate-target"></i>
+                            </button>
+                            <a class="d-flex bg-body-tertiary rounded p-3" href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                <div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
+                                    <img src="/img/shop/fashion/06.png" alt="Image">
+                                </div>
+                            </a>
+                            <div
+                                class="hover-effect-target position-absolute start-0 bottom-0 w-100 z-2 opacity-0 pb-2 pb-sm-3 px-2 px-sm-3">
+                                <div
+                                    class="d-flex align-items-center justify-content-center gap-2 gap-xl-3 bg-body rounded-2 p-2">
+                                    <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">M</span>
+                                    <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">L</span>
+                                    <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">XL</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="nav mb-2">
+                            <a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
+                                href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                <span class="text-truncate">Classic cotton men's shirt</span>
+                            </a>
+                        </div>
+                        <div class="h6 mb-2">$27.00</div>
+                        <div class="position-relative">
+                            <div class="hover-effect-target fs-xs text-body-secondary opacity-100">+3 colors</div>
+                            <div class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
+                                <input type="radio" class="btn-check" name="colors-6" id="color-6-1" checked>
+                                <label for="color-6-1" class="btn btn-color fs-base" style="color: #c1cde7">
+                                    <span class="visually-hidden">Blue</span>
+                                </label>
+                                <input type="radio" class="btn-check" name="colors-6" id="color-6-2">
+                                <label for="color-6-2" class="btn btn-color fs-base" style="color: #526f99">
+                                    <span class="visually-hidden">Dark blue</span>
+                                </label>
+                                <input type="radio" class="btn-check" name="colors-6" id="color-6-3">
+                                <label for="color-6-3" class="btn btn-color fs-base" style="color: #e0e5eb">
+                                    <span class="visually-hidden">White</span>
+                                </label>
+                                <input type="radio" class="btn-check" name="colors-6" id="color-6-4">
+                                <label for="color-6-4" class="btn btn-color fs-base" style="color: #364254">
+                                    <span class="visually-hidden">Black</span>
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Special collection carousel -->
+        <section class="container pb-5 mb-2 mb-sm-3 mb-lg-4 mb-xl-5">
+            <div class="d-md-none text-center pb-3 mb-3">
+                <p class="mb-2">New arrivals</p>
+                <h2 class="mb-0">Meet the Cartzilla collection</h2>
+            </div>
+            <div class="row align-items-center pb-xxl-3">
+
+                <!-- Preview images (controlled slider) -->
+                <div class="col-md-7 order-md-2 mb-4 mb-md-0">
+                    <div class="swiper user-select-none" id="previewImages"
+                        data-swiper='{
+              "allowTouchMove": false,
+              "loop": true,
+              "effect": "fade",
+              "fadeEffect": {
+                "crossFade": true
+              }
+            }'>
+                        <div class="swiper-wrapper">
+                            <div class="swiper-slide">
+                                <div class="ratio" style="--cz-aspect-ratio: calc(720 / 746 * 100%)">
+                                    <img src="/img/home/fashion/v1/collection/01.jpg" class="rounded-5" alt="Image">
+                                </div>
+                            </div>
+                            <div class="swiper-slide">
+                                <div class="ratio" style="--cz-aspect-ratio: calc(720 / 746 * 100%)">
+                                    <img src="/img/home/fashion/v1/collection/02.jpg" class="rounded-5" alt="Image">
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Products master slider -->
+                <div class="col-md-5 order-md-1 text-center">
+                    <div class="d-none d-md-block pb-3 mb-2 mb-lg-3 mx-auto" style="max-width: 306px">
+                        <p class="mb-2">New arrivals</p>
+                        <h2 class="mb-0">Meet the Cartzilla collection</h2>
+                    </div>
+                    <div class="d-flex align-items-center justify-content-center">
+
+                        <!-- Prev button -->
+                        <button type="button"
+                            class="btn btn-icon btn-outline-secondary animate-slide-start rounded-circle mt-n5"
+                            id="collectionPrev" aria-label="Prev">
+                            <i class="ci-chevron-left fs-lg animate-target"></i>
+                        </button>
+
+                        <!-- Slider -->
+                        <div class="swiper mx-3 mx-lg-4"
+                            data-swiper='{
+                "spaceBetween": 24,
+                "loop": true,
+                "speed": 400,
+                "controlSlider": "#previewImages",
+                "navigation": {
+                  "prevEl": "#collectionPrev",
+                  "nextEl": "#collectionNext"
+                }
+              }'
+                            style="max-width: 306px">
+                            <div class="swiper-wrapper">
+
+                                <!-- Item -->
+                                <div class="swiper-slide">
+                                    <div class="animate-underline hover-effect-opacity">
+                                        <a class="d-flex bg-body-tertiary rounded p-3 mb-3"
+                                            href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                            <div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
+                                                <img src="/img/shop/fashion/03.png" alt="Image">
+                                            </div>
+                                        </a>
+                                        <div class="nav justify-content-center mb-2">
+                                            <a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
+                                                href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                                <span class="text-truncate">Sneakers with a massive sole</span>
+                                            </a>
+                                        </div>
+                                        <div class="h6 mb-0">$86.50</div>
+                                    </div>
+                                </div>
+
+                                <!-- Item -->
+                                <div class="swiper-slide">
+                                    <div class="animate-underline hover-effect-opacity">
+                                        <a class="d-flex bg-body-tertiary rounded p-3 mb-3"
+                                            href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                            <div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
+                                                <img src="/img/shop/fashion/12.png" alt="Image">
+                                            </div>
+                                        </a>
+                                        <div class="nav justify-content-center mb-2">
+                                            <a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
+                                                href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                                <span class="text-truncate">Single breasted oversized blazer</span>
+                                            </a>
+                                        </div>
+                                        <div class="h6 mb-0">$113.99</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Next button -->
+                        <button type="button"
+                            class="btn btn-icon btn-outline-secondary animate-slide-end rounded-circle mt-n5"
+                            id="collectionNext" aria-label="Next">
+                            <i class="ci-chevron-right fs-lg animate-target"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Brands -->
+        <section class="container pb-5 mb-1 mb-sm-3 mb-lg-4 mb-xl-5">
+            <div class="swiper my-md-3"
+                data-swiper='{
+          "slidesPerView": 2,
+          "pagination": {
+            "el": ".swiper-pagination",
+            "clickable": true
+          },
+          "breakpoints": {
+            "500": {
+              "slidesPerView": 3
+            },
+            "768": {
+              "slidesPerView": 4,
+              "spaceBetween": 12
+            },
+            "992": {
+              "slidesPerView": 5,
+              "spaceBetween": 20
+            },
+            "1200": {
+              "slidesPerView": 6,
+              "spaceBetween": 24
+            }
+          }
+        }'>
+                <div class="swiper-wrapper">
+
+                    <!-- Item -->
+                    <a class="swiper-slide text-body" href="#!" aria-label="Brooks">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 196 64" fill="currentColor">
+                            <path fill-rule="evenodd"
+                                d="M67.948 22.154c.155.003.33-.006.515-.016 1.226-.065 2.921-.155 2.515 3.051-.516 4.184-1.79 4.467-2.733 4.677l-.041.009-.06.014c-.209-.027-.342-.088-.454-.14l-.132-.056-14.174-7.832c-.665-.346-.79.119-.587.392l8.016 8.616c-11.176 1.731-20.193 11.654-20.528 12.14-.378.442-.414.798.098.783h11.046c2.662-6.303 14.636-11.3 16.422-11.259.603-.041 2.599.067 1.76 4.699-.802 4.647-3.082 5.146-4.203 5.189-.696-.042-1.088-.47-.978-1.371l1.368-6.951c-1.264.535-4.65 2.105-5.376 2.643l-.782 4.797c-.156.683-.631.761-1.235.859l-.134.022c-.759.171-1.258 1.493-.098 1.468l3.652-.192h.001 0 0l.061-.004a110 110 0 0 1 2.388.202l1.034.092c3.464.212 8.382-1.108 9.286-6.853.272-1.609-.013-4.535-3.03-5.776-.332-.008-.261-.294-.098-.294.194 0 3.864-1.498 4.301-5.189.635-4.818-3.965-5.305-5.669-5.189l-4.496.196-.794-.034c-.858-.04-1.965-.091-2.92-.064-.919-.036-1.096 1.392 0 1.371.756.021 1.149.485 1.075 1.273l-.391 2.252 4.301 2.448 1.075-5.972zM120.538 20c-2.894.034-9.024 3.246-10.557 11.553-1.603 8.397 1.248 12.466 6.06 12.727 4.738.168 9.3-3.83 11.046-11.161 1.675-7.374-2.315-13.085-6.549-13.119zm-.754 4.735c-1.744.021-5.374 1.981-6.311 7.052-.921 5.125.768 7.609 3.59 7.768 2.835.103 5.537-2.338 6.543-6.812 1.021-4.501-1.343-7.987-3.822-8.008zM102.259 20c-2.944.034-9.073 3.246-10.655 11.553-1.554 8.397 1.297 12.466 6.06 12.727 4.787.168 9.348-3.83 11.046-11.161 1.724-7.374-2.266-13.085-6.451-13.119zm-.78 4.735c-1.744.021-5.374 1.981-6.311 7.052-.921 5.125.768 7.609 3.59 7.768 2.836.102 5.538-2.338 6.543-6.812 1.021-4.501-1.342-7.987-3.821-8.008zm41.249 19.055c.9.194 3.018.576 4.496.49 1.699-.046 6.254-1.175 8.016-6.266 1.453-4.417-1.398-7.273-2.053-7.832-.064-.059-.157-.142-.273-.245-1.023-.912-3.814-3.401-3.833-4.944.021-1.513 1.196-3.138 3.031-3.133 1.871-.005 2.477 2.493 2.834 4.797.106.835.963 1.123 1.076.392l.879-4.699c.041-.46.005-.638-.195-.783h-.001c-.94-.641-1.724-1.176-4.105-1.174-2.465.07-5.85 1.819-6.94 4.014-1.851 3.795-.086 7.051.587 7.832.752.788 3.421 3.329 3.421 3.329.933 1.134 2.25 3.206.489 6.07a3.18 3.18 0 0 1-1.236 1.062c-.498.24-1.049.347-1.599.309-.893-.059-2.319-.201-2.444-5.874-.016-1.251-1.372-1.465-1.759 0l-.88 4.993c-.051-.169-.117-.332-.196-.489l-4.007-13.413 1.564-1.86c3.444-4.117 5.047-4.331 5.865-4.308 1 .055.751-1.309.099-1.273-.321-.018-.857-.009-1.365 0-.491.009-.957.017-1.178 0-.27.018-.954.009-1.665 0h-1.854c-.771-.036-.95 1.32.098 1.273 1.019-.023.806 1.189.391 1.664l-6.061 7.245c-.153.17-.474.098-.391-.196l1.271-7.245c.215-.884 1.07-1.421 1.857-1.469.78-.023.675-1.309 0-1.273-1.236-.027-2.346.026-3.179.066l-.731.032-.816-.034c-.86-.04-1.958-.09-2.898-.064-.932-.036-.968 1.356.097 1.371.789-.015 1.038.485.978 1.273l-3.324 18.112c-.169.691-.654.762-1.341.863l-.125.019c-.674.171-1.173 1.493 0 1.468l3.526-.185h0l.189-.011c.227.014.639.03 1.111.049h.001c.995.04 2.254.09 2.602.147.557-.011.878-1.046.098-1.273-.859-.273-1.393-.666-1.271-1.566l1.564-8.028h.88l2.444 8.322.021.133.001.002c.108.657.161.975-.511 1.039-.815.109-.958 1.287-.098 1.273.78.015 2.561-.057 3.421-.099l.463.027h0c.768.047 1.79.11 2.665.072.074.007.139.004.195.001.037-.002.071-.003.099-.001zM81.633 33.315h1.271l1.564 9.986c.057.326.2.504.489.489h5.474c.831.015.759-1.233 0-1.371-.81-.149-1.093-.684-1.271-1.567L88.183 34c-.2-1.296-1.02-1.653-1.955-1.666-.275.013-.205-.273 0-.294.151.021 5.212-1.3 5.572-6.168.424-4.841-4.244-5.305-5.963-5.189a172.57 172.57 0 0 1-4.496.196l-.789-.034h0c-.847-.04-1.936-.091-2.828-.064-1.004-.036-1.181 1.392-.098 1.371.771.021 1.162.485 1.075 1.273l-3.324 18.112c-.143.685-.619.761-1.236.86l-.132.021c-.745.171-1.243 1.493-.098 1.468l3.715-.196c.236.014.652.03 1.128.049 1.009.04 2.288.09 2.684.147.487-.011.806-1.046 0-1.273-.832-.272-1.367-.666-1.271-1.566l1.466-7.733zm2.053-11.161a11.27 11.27 0 0 0 .333-.001c1.191-.014 2.793-.034 2.6 3.428-.204 3.983-1.898 6.107-4.692 6.07l1.76-9.497z" />
+                        </svg>
+                    </a>
+
+                    <!-- Item -->
+                    <a class="swiper-slide text-body" href="#!" aria-label="Fila">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 196 64" fill="currentColor">
+                            <path
+                                d="M91.079 41.202c0 1.904-1.653 3.448-3.691 3.448s-3.692-1.544-3.692-3.448V23.753c0-1.904 1.653-3.448 3.692-3.448s3.691 1.543 3.691 3.448v17.449zM61.692 27.277c-2.039 0-3.692-1.544-3.692-3.448s1.653-3.448 3.692-3.448h15.907c2.038 0 3.691 1.544 3.691 3.448s-1.653 3.448-3.691 3.448H61.692zm14.847 8.915c2.038 0 3.691-1.544 3.691-3.448s-1.653-3.448-3.691-3.448H61.774c-2.039 0-3.691 1.543-3.691 3.448v8.458c0 1.904 1.653 3.448 3.691 3.448s3.692-1.544 3.692-3.448v-5.029l11.073.02zm55.224 8.486c3.249 0 5.883-2.499 5.883-5.534 0-1.138-.371-2.195-1.005-3.073l-9.531-14.5c-.657-.946-1.799-1.572-3.097-1.572-1.339 0-2.511.666-3.158 1.663l-10.301 15.501h-9.523V23.829c0-1.905-1.653-3.448-3.692-3.448s-3.691 1.544-3.691 3.448v17.372c0 1.904 1.653 3.448 3.691 3.448h13.582c1.673.018 3.344-.858 4.568-2.649l8.524-12.762 5.71 8.495-7.994.019c-2.038 0-3.691 1.543-3.691 3.448s1.653 3.448 3.691 3.448l10.034.029z" />
+                        </svg>
+                    </a>
+
+                    <!-- Item -->
+                    <a class="swiper-slide text-body" href="#!" aria-label="Zara">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 196 64" fill="currentColor">
+                            <path
+                                d="M137.486 48.905l-13.038-35.881-.008-.024h-.258l-2.685 7.374-4.887 13.424-.012-.011c-1.694-1.494-4.084-2.428-7.094-2.776l-.918-.095.911-.117c4.964-.892 8.3-4.025 8.3-7.801 0-5.177-4.871-8.791-11.849-8.791H91.429v.262h4.219v26.752L85.402 13.024 85.393 13h-.257l-2.685 7.374-10.355 28.439-.064.007a11.2 11.2 0 0 1-.525.052c-.26.02-.519.033-.779.033H60.264L80.153 14.47l.148-.259H55.976v10.652h.258c.046-5.189 3.069-10.394 9.748-10.394h8.058L54 49.163h26.997V38.957h-.258c-.035 4.522-2.6 8.818-8.177 9.788l-.177.03 4.247-11.67H88.53l4.287 11.8h-4.229v.258h16.6v-.258h-4.247V31.106h4.901c4.987 0 7.848 2.227 7.848 6.109v3.157c0 .348.023.857.049 1.282v.015l-2.634 7.234h-3.441v.258h7.123v-.258h-3.404l2.399-6.587.007.102.066.594.064.393c.4 2.429 1.33 4.215 2.762 5.307l.206.149c1.088.756 2.439 1.139 4.02 1.139 2.093 0 3.489-.522 4.642-1.75l-.151-.142c-1.062.98-1.953 1.377-3.07 1.377-1.902 0-2.898-2.307-2.898-4.581V40.48c.01-1.098-.162-2.189-.509-3.231l-.047-.137v-.005h8.703l4.287 11.8h-4.229v.258H142v-.258l-4.514-.002zM76.727 36.848l5.861-16.097 5.848 16.097h-11.71zm24.216-6V14.47h3.741c4.998 0 7.636 2.97 7.636 8.584 0 5.972-1.515 7.793-6.478 7.793h-4.899zm17.83 6l-.026-.064a8 8 0 0 0-1.659-2.531l-.245-.245-.026-.025 4.814-13.232 5.849 16.097h-8.707z" />
+                        </svg>
+                    </a>
+
+                    <!-- Item -->
+                    <a class="swiper-slide text-body" href="#!" aria-label="New Balance">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 196 64" fill="currentColor">
+                            <path
+                                d="M79.909 30.295l10.34-.366-.522.907-9.818-.542zm-1.261 2.158l10.364-.366-.51.91-9.854-.544zm-1.224 2.17l10.351-.361-.509.904-9.842-.543zm-1.224 2.17l10.364-.367-.534.909-9.831-.542zm9.837-17.287l13.197-.466.037 1.196-13.235-.73zm1.258-2.195l11.855-.413.037 1.09-11.893-.677zm1.208-2.133l10.563-.345.051.93-10.614-.585zm1.233-2.158l9.259-.307.037.852-9.295-.545zM90.881 11h8.053l.012.425L90.881 11zM74.976 38.962l10.339-.372-.211.372H74.976zm30.478-27.893h14.901c5.791.012 7.033 3.443 6.289 6.799-.821 3.695-4.971 6.367-7.357 6.91 4.275 1.382 4.275 4.146 3.379 7.206s-5.666 6.91-10.984 6.91H91.624l-.025-.593 6.151-.221c.124 0 .124-.148.037-.161l-6.213-.343-.049-1.38 7.444-.264c.149 0 .124-.16.037-.172l-7.519-.415-.038-1.255 8.749-.305c.149 0 .112-.173.025-.185l-8.823-.487-.05-1.144 10.102-.356c.137 0 .1-.148.026-.16l-10.165-.561-.037-1.022 11.408-.404c.149 0 .087-.16.025-.173l-21.474-1.184 22.668-.801c.185-.012.099-.173.012-.185L82.44 25.939l22.704-.814c.149 0 .125-.16.025-.16L83.695 23.78l22.666-.802c.15 0 .162-.173.026-.173L84.913 21.62l22.63-.753c.15 0 .136-.136.025-.148l-7.381-.407.758-1.302 7.854-.278c.149 0 .161-.148 0-.16l-7.369-.419.745-1.318 7.854-.273c.161 0 .161-.136 0-.148l-7.394-.408.732-1.261 7.867-.257c.087 0 .112-.136.012-.148l-7.406-.434.758-1.316 7.854-.261c.125 0 .125-.123.037-.123l-7.456-.393.422-.743zm-1.352 21.43h6.164c4.324 0 6.611-6.12 1.889-6.12h-4.573l-3.48 6.12zm10.563-10.514c1.887 0 3.379-1.876 3.579-2.616s.098-2.418-2.884-2.517h-2.336l-2.933 5.133h4.574zm23.893 21.419c2.389 0 4.375 1.986 4.375 4.358 0 .308-.032.539-.11 1.016h-6.545c.295.986 1.21 1.679 2.233 1.679.808 0 1.396-.323 1.846-1.031h2.265c-.512 1.679-2.234 2.91-4.048 2.91-.587.002-1.169-.11-1.712-.332a4.45 4.45 0 0 1-1.452-.961c-.415-.412-.744-.902-.968-1.441s-.338-1.117-.335-1.7c0-2.479 2.001-4.497 4.451-4.497zm.031 1.87c-1.147 0-2.078.739-2.372 1.894h4.699c-.279-1.17-1.178-1.894-2.327-1.894zm-25.059-.767v-.692h2.064v8.321h-1.893v-1.093c-.79.893-1.628 1.145-2.729 1.145-2.497 0-4.182-2.085-4.182-4.41 0-2.464 1.904-4.358 4.138-4.358 1.008 0 1.951.394 2.602 1.087zm-4.15 5.161a2.61 2.61 0 0 0 3.678 0c.487-.484.761-1.141.761-1.826s-.274-1.342-.761-1.826a2.61 2.61 0 0 0-3.678 0 2.57 2.57 0 0 0 0 3.652zm-54.472-5.247c.714-.724 1.365-1.017 2.218-1.017 1.163 0 2.295.693 2.776 1.709.326.678.419 1.247.419 2.449v4.574h-2.063v-4.173c0-1.047-.155-2.68-1.582-2.68-1.52 0-1.613 1.741-1.613 2.834v4.02H53v-8.532h1.908v.816zm10.661-1.016a4.41 4.41 0 0 1 4.374 4.358c0 .308-.031.539-.109 1.016h-6.545c.295.986 1.21 1.679 2.233 1.679.807 0 1.396-.323 1.846-1.031h2.264c-.512 1.679-2.233 2.91-4.048 2.91-.587.002-1.169-.111-1.712-.333a4.45 4.45 0 0 1-1.452-.961c-.415-.412-.744-.902-.968-1.441a4.39 4.39 0 0 1-.335-1.7c0-2.479 2.001-4.497 4.451-4.497zm.032 1.87c-1.148 0-2.079.739-2.373 1.894h4.7c-.279-1.17-1.179-1.894-2.327-1.894zm40.344 6.854h-2.062v-11.38h2.062v11.38zm12.873-7.708c.713-.724 1.365-1.017 2.218-1.017 1.164 0 2.296.693 2.776 1.709.326.678.419 1.247.419 2.449v4.574h-2.063v-4.173c0-1.047-.155-2.68-1.582-2.68-1.52 0-1.612 1.741-1.612 2.834v4.02h-2.064v-8.532h1.908v.816zm12.563 2.033c-.512-.862-1.055-1.17-2.001-1.17-1.365 0-2.388 1.093-2.388 2.586 0 1.479 1.069 2.587 2.512 2.587.776 0 1.395-.385 1.877-1.124h2.326c-.279.754-.435 1.031-.869 1.509-.429.468-.951.842-1.533 1.099a4.63 4.63 0 0 1-1.848.395c-2.497 0-4.529-2.033-4.529-4.496 0-2.449 2.017-4.435 4.529-4.435 1.986 0 3.614 1.217 4.25 3.049h-2.326zm-55.014-2.848l1.461 5.205 1.762-5.205h1.706l-2.751 8.531h-1.387l-1.628-5.528-1.675 5.528h-1.322l-2.869-8.531h1.82l1.746 5.205 1.477-5.205h1.66zm9.91.895c.651-.693 1.594-1.087 2.602-1.087 2.234 0 4.138 1.894 4.138 4.358 0 2.325-1.684 4.41-4.182 4.41-1.101 0-1.939-.252-2.73-1.145v1.093h-1.892v-11.38h2.063V44.5zm.473 5.168a2.61 2.61 0 0 0 3.678 0c.488-.484.762-1.141.762-1.826s-.274-1.342-.762-1.826a2.61 2.61 0 0 0-3.678 0c-.488.484-.762 1.141-.762 1.826s.274 1.342.762 1.826zm13.692-5.161v-.692h2.063v8.321h-1.892v-1.093c-.791.893-1.629 1.145-2.73 1.145-2.497 0-4.182-2.085-4.182-4.41 0-2.464 1.905-4.358 4.138-4.358 1.008 0 1.951.394 2.602 1.087zm-4.15 5.161a2.61 2.61 0 0 0 3.678 0c.488-.484.762-1.141.762-1.826s-.274-1.342-.762-1.826a2.61 2.61 0 0 0-3.678 0c-.488.484-.762 1.141-.762 1.826s.274 1.342.762 1.826z" />
+                        </svg>
+                    </a>
+
+                    <!-- Item -->
+                    <a class="swiper-slide text-body" href="#!" aria-label="Puma">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 196 64" fill="currentColor">
+                            <path
+                                d="M82.282 40.849c0 .669.556 1.211 1.211 1.226.658-.015 1.214-.557 1.214-1.226L84.713 19h7.141v24.085c0 1.18-.938 2.144-2.111 2.144H77.249c-1.165 0-2.114-.963-2.114-2.144V19h7.148l-.002 21.849zM96.607 19h10.818 10.821c1.28 0 2.324 1.049 2.324 2.352v23.877h-7.154V23.327c-.006-.671-.552-1.203-1.213-1.203s-1.202.519-1.21 1.184v21.921h-7.127V23.308c-.015-.665-.55-1.184-1.218-1.184s-1.204.531-1.209 1.203v21.902h-7.155V21.352c0-1.303 1.043-2.352 2.323-2.352zm-32.248 3.124a1.23 1.23 0 0 1 1.21 1.249v10.786c.005.726-.58 1.231-1.21 1.231h-1.214V22.124h1.214zm-1.214 16.513h7.221c1.297 0 2.343-1.054 2.343-2.362V21.362c0-1.307-1.007-2.362-2.297-2.362H56v26.229h7.145v-6.591zm69.42-15.319v12.077h-2.428V23.337a1.21 1.21 0 0 1 1.211-1.199c.666 0 1.2.512 1.217 1.18zm0 15.326v6.585h7.145V21.352c0-1.303-1.043-2.352-2.326-2.352h-12.065c-1.28 0-2.323 1.049-2.323 2.352v23.877h7.141v-6.585h2.428z" />
+                        </svg>
+                    </a>
+
+                    <!-- Item -->
+                    <a class="swiper-slide text-body" href="#!" aria-label="Dior">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 196 64" fill="currentColor">
+                            <path
+                                d="M56.667 14.837l-1.71-.087-.705-.139-.141-.262c0-.244.176-.348.529-.348h17.684c8.287 0 14.105 2.492 17.49 7.494 1.939 2.893 2.909 6.327 2.909 10.301a18.67 18.67 0 0 1-.97 6.013c-.74 2.039-1.763 3.835-3.085 5.439-1.446 1.69-3.209 2.998-5.237 3.956-2.169.976-4.602 1.481-7.334 1.481h-22.55c-.37 0-.547-.122-.547-.331 0-.227.265-.348.758-.348l4.32-.261c.67-.088 1.146-.28 1.375-.541l.441-.61c.159-.418.247-1.045.265-1.899V17.05c0-1.081-.617-1.743-1.816-2.005l-1.676-.209zm9.521.471l-.124.697v30.693c0 .348.071.592.212.68l.705.104h2.327l5.395-.192c1.446-.157 2.68-.383 3.65-.697.965-.348 1.868-.841 2.68-1.463.705-.575 1.428-1.395 2.222-2.44 1.322-1.708 2.274-3.887 2.856-6.553.352-1.742.529-3.433.529-5.054 0-1.429-.212-2.963-.652-4.619-.617-2.388-1.552-4.479-2.874-6.257-2.556-3.451-6.753-5.159-12.553-5.159h-3.579c-.405-.036-.67.052-.793.261zm30.008 33.116c-.035-.209.141-.296.529-.296l1.234-.035c.67-.087 1.076-.313 1.234-.662l.229-1.255V36.048c0-.383-.141-.68-.406-.854l-.917-.088-1.234.332-.67-.035c-.088-.209.176-.401.793-.575 1.463-.383 2.751-.871 3.844-1.481.67-.383 1.146-.593 1.357-.68l.529-.052c.177.034.265.383.265 1.01v12.758c0 .609.141 1.046.406 1.307.317.314 1.058.471 2.204.471.405 0 .616.088.652.279 0 .158-.123.21-.335.21h-9.398c-.212.001-.317-.086-.317-.225zm41.609-12.549c-.864.889-1.445 1.934-1.763 3.189v7.408c0 .662.229 1.133.705 1.429l1.076.191 1.128.122c.265.035.371.088.371.227l-.052.122-.3.088h-9.433c-.282 0-.44-.088-.44-.227l.264-.209 1.587-.122c.616-.105 1.005-.313 1.216-.627l.265-.784V36.223l-.177-.767-.299-.174c-.088-.087-.229-.139-.441-.174-.264-.017-.582.035-.916.174l-.899.244-.512-.122c-.088-.122-.053-.209.07-.261l.758-.314c1.728-.505 3.121-1.028 4.091-1.568l1.199-.645.529.034.211.436v3.834c1.323-2.126 2.381-3.433 3.104-3.869.44-.261.864-.471 1.181-.557l.617-.052c.388-.035.829.087 1.322.401.67.383 1.023.958 1.058 1.69.035.611-.142 1.082-.529 1.447-.353.296-.706.384-1.023.296-.299-.052-.529-.174-.687-.348l-.494-.609c-.388-.558-.758-.733-1.198-.575-.514.138-1.042.522-1.589 1.132zm-36.848-14.327c-.653 0-1.182.227-1.622.662-.476.436-.705.993-.671 1.639-.035.61.194 1.133.671 1.569.44.436.969.662 1.622.662.616 0 1.163-.227 1.604-.662s.687-.958.687-1.569a2.25 2.25 0 0 0-.687-1.639c-.441-.436-.988-.662-1.604-.662zm9.344 13.908a8.07 8.07 0 0 1 2.38-2.091 7.87 7.87 0 0 1 2.575-.959l3.262-.191c1.18.052 2.274.279 3.262.714 2.38 1.046 3.878 2.964 4.442 5.752.582 2.824.089 5.212-1.464 7.146-1.321 1.638-3.067 2.684-5.271 3.137-2.309.506-4.46.348-6.4-.435-2.522-1.011-4.055-3.016-4.549-5.944-.441-2.771.141-5.124 1.763-7.129zm10.331-.784c-1.075-1.185-2.433-1.708-4.073-1.569-1.586.157-2.802 1.028-3.596 2.684-.722 1.499-.988 3.33-.722 5.491.193 2.144.881 3.852 1.991 5.159 1.182 1.377 2.522 1.952 4.02 1.691a4.76 4.76 0 0 0 3.474-2.527c.74-1.429 1.004-3.277.828-5.63-.211-2.353-.828-4.097-1.922-5.299zm-24.559.767v.174l-.388-.244v.087l.035.157h-.053v-.332h.018l.352.262v-.262h.071l-.035.157z" />
+                        </svg>
+                    </a>
+                </div>
+
+                <!-- Pagination (Bullets) -->
+                <div class="swiper-pagination position-static mt-3"></div>
+            </div>
+        </section>
+
+
+        <!-- Reviews carousel -->
+        <section class="bg-body-tertiary py-5">
+            <div class="container py-1 py-sm-2 py-md-3 py-lg-4 py-xl-5">
+                <h2 class="text-center pb-2 pb-md-3 pb-lg-4 pt-xxl-3">Happy customers</h2>
+                <div class="position-relative pb-xxl-3">
+
+                    <!-- External slider prev/next buttons visible on screens > 500px wide (sm breakpoint) -->
+                    <button type="button"
+                        class="btn btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-start position-absolute top-50 start-0 z-2 translate-middle d-none d-sm-inline-flex mt-n4"
+                        id="reviewsPrev" aria-label="Prev">
+                        <i class="ci-chevron-left fs-lg animate-target"></i>
+                    </button>
+                    <button type="button"
+                        class="btn btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-end position-absolute top-50 start-100 z-2 translate-middle d-none d-sm-inline-flex mt-n4"
+                        id="reviewsNext" aria-label="Next">
+                        <i class="ci-chevron-right fs-lg animate-target"></i>
+                    </button>
+
+                    <!-- Slider -->
+                    <div class="swiper"
+                        data-swiper='{
+              "slidesPerView": 1,
+              "spaceBetween": 24,
+              "loop": true,
+              "navigation": {
+                "prevEl": "#reviewsPrev",
+                "nextEl": "#reviewsNext"
+              },
+              "pagination": {
+                "el": ".swiper-pagination",
+                "clickable": true
+              },
+              "breakpoints": {
+                "600": {
+                  "slidesPerView": 2
+                },
+                "992": {
+                  "slidesPerView": 3
+                }
+              }
+            }'>
+                        <div class="swiper-wrapper">
+
+                            <!-- Review -->
+                            <div class="swiper-slide h-auto">
+                                <div class="card h-100 border-0 rounded-4 p-sm-2">
+                                    <div class="card-body">
+                                        <div class="d-flex align-items-center mb-3">
+                                            <div class="ratio ratio-1x1 flex-shrink-0" style="max-width: 80px">
+                                                <img src="/img/home/fashion/v1/reviews/01.png" width="80"
+                                                    alt="Image">
+                                            </div>
+                                            <div class="ps-2 ms-1">
+                                                <div class="d-flex gap-1 fs-xs pb-2 mb-1">
+                                                    <i class="ci-star-filled text-warning"></i>
+                                                    <i class="ci-star-filled text-warning"></i>
+                                                    <i class="ci-star-filled text-warning"></i>
+                                                    <i class="ci-star-filled text-warning"></i>
+                                                    <i class="ci-star-filled text-warning"></i>
+                                                </div>
+                                                <h3 class="h6 mb-0">Victoria Gardner</h3>
+                                            </div>
+                                        </div>
+                                        <p class="mb-0">Very satisfied with the bag! A wonderful shopper, not too big and
+                                            not too small, but as it should be 🔥 The bag looks more expensive than it
+                                            costs.</p>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Review -->
+                            <div class="swiper-slide h-auto">
+                                <div class="card h-100 border-0 rounded-4 p-sm-2">
+                                    <div class="card-body">
+                                        <div class="d-flex align-items-center mb-3">
+                                            <div class="ratio ratio-1x1 flex-shrink-0" style="max-width: 80px">
+                                                <img src="/img/home/fashion/v1/reviews/02.png" width="80"
+                                                    alt="Image">
+                                            </div>
+                                            <div class="ps-2 ms-1">
+                                                <div class="d-flex gap-1 fs-xs pb-2 mb-1">
+                                                    <i class="ci-star-filled text-warning"></i>
+                                                    <i class="ci-star-filled text-warning"></i>
+                                                    <i class="ci-star-filled text-warning"></i>
+                                                    <i class="ci-star-filled text-warning"></i>
+                                                    <i class="ci-star-filled text-warning"></i>
+                                                </div>
+                                                <h3 class="h6 mb-0">Alexandra D.</h3>
+                                            </div>
+                                        </div>
+                                        <p class="mb-0">A wonderful compact bag, holds a lot of things, good tailoring,
+                                            smooth seams, strong fittings, good quality.</p>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Review -->
+                            <div class="swiper-slide h-auto">
+                                <div class="card h-100 border-0 rounded-4 p-sm-2">
+                                    <div class="card-body">
+                                        <div class="d-flex align-items-center mb-3">
+                                            <div class="ratio ratio-1x1 flex-shrink-0" style="max-width: 80px">
+                                                <img src="/img/home/fashion/v1/reviews/03.png" width="80"
+                                                    alt="Image">
+                                            </div>
+                                            <div class="ps-2 ms-1">
+                                                <div class="d-flex gap-1 fs-xs pb-2 mb-1">
+                                                    <i class="ci-star-filled text-warning"></i>
+                                                    <i class="ci-star-filled text-warning"></i>
+                                                    <i class="ci-star-filled text-warning"></i>
+                                                    <i class="ci-star-filled text-warning"></i>
+                                                    <i class="ci-star-filled text-warning"></i>
+                                                </div>
+                                                <h3 class="h6 mb-0">Jenny Wilson</h3>
+                                            </div>
+                                        </div>
+                                        <p class="mb-0">Elegant blouse and the color is very nice, the seams are neat. 🛍
+                                            Excellent quality fabric, for summer weather is very good because the fabric is
+                                            light and does not stick to the body.</p>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Review -->
+                            <div class="swiper-slide h-auto">
+                                <div class="card h-100 border-0 rounded-4 p-sm-2">
+                                    <div class="card-body">
+                                        <div class="d-flex align-items-center mb-3">
+                                            <div class="ratio ratio-1x1 flex-shrink-0" style="max-width: 80px">
+                                                <img src="/img/home/fashion/v1/reviews/04.png" width="80"
+                                                    alt="Image">
+                                            </div>
+                                            <div class="ps-2 ms-1">
+                                                <div class="d-flex gap-1 fs-xs pb-2 mb-1">
+                                                    <i class="ci-star-filled text-warning"></i>
+                                                    <i class="ci-star-filled text-warning"></i>
+                                                    <i class="ci-star-filled text-warning"></i>
+                                                    <i class="ci-star-filled text-warning"></i>
+                                                    <i class="ci-star text-body-tertiary opacity-75"></i>
+                                                </div>
+                                                <h3 class="h6 mb-0">Kristin Watson</h3>
+                                            </div>
+                                        </div>
+                                        <p class="mb-0">The quality is impeccable, sturdy yet stylish. They provide
+                                            excellent support, comfortable for all-day wear. The massive design adds a
+                                            unique edge to any outfit.</p>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Review -->
+                            <div class="swiper-slide h-auto">
+                                <div class="card h-100 border-0 rounded-4 p-sm-2">
+                                    <div class="card-body">
+                                        <div class="d-flex align-items-center mb-3">
+                                            <div class="ratio ratio-1x1 flex-shrink-0" style="max-width: 80px">
+                                                <img src="/img/home/fashion/v1/reviews/05.png" width="80"
+                                                    alt="Image">
+                                            </div>
+                                            <div class="ps-2 ms-1">
+                                                <div class="d-flex gap-1 fs-xs pb-2 mb-1">
+                                                    <i class="ci-star-filled text-warning"></i>
+                                                    <i class="ci-star-filled text-warning"></i>
+                                                    <i class="ci-star-filled text-warning"></i>
+                                                    <i class="ci-star-filled text-warning"></i>
+                                                    <i class="ci-star-filled text-warning"></i>
+                                                </div>
+                                                <h3 class="h6 mb-0">Daniel Adams</h3>
+                                            </div>
+                                        </div>
+                                        <p class="mb-0">These sunglasses are a game-changer! Not only do they offer
+                                            superior protection from the sun, but they also elevate my style.</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Pagination (Bullets) -->
+                        <div class="swiper-pagination position-static pt-3 mt-sm-1 mt-md-2 mt-lg-3"></div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Instagram feed -->
+        <section class="container pt-5 mt-1 mt-sm-2 mt-md-3 mt-lg-4 mt-xl-5">
+            <div class="text-center pt-xxl-3 pb-2 pb-md-3">
+                <h2 class="pb-2 mb-1">
+                    <span class="animate-underline">
+                        <a class="animate-target text-dark-emphasis text-decoration-none" href="#!">#cartzilla</a>
+                    </span>
+                </h2>
+                <p>Find more inspiration on our Instagram</p>
+            </div>
+            <div class="overflow-x-auto pb-3 mb-n3" data-simplebar>
+                <div class="d-flex gap-2 gap-md-3 gap-lg-4" style="min-width: 700px">
+                    <a class="hover-effect-scale hover-effect-opacity position-relative w-100 overflow-hidden"
+                        href="#!">
+                        <span
+                            class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
+                        <i
+                            class="ci-instagram hover-effect-target fs-4 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
+                        <div class="hover-effect-target ratio ratio-1x1">
+                            <img src="/img/instagram/01.jpg" alt="Instagram image">
+                        </div>
+                    </a>
+                    <a class="hover-effect-scale hover-effect-opacity position-relative w-100 overflow-hidden"
+                        href="#!">
+                        <span
+                            class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
+                        <i
+                            class="ci-instagram hover-effect-target fs-4 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
+                        <div class="hover-effect-target ratio ratio-1x1">
+                            <img src="/img/instagram/02.jpg" alt="Instagram image">
+                        </div>
+                    </a>
+                    <a class="hover-effect-scale hover-effect-opacity position-relative w-100 overflow-hidden"
+                        href="#!">
+                        <span
+                            class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
+                        <i
+                            class="ci-instagram hover-effect-target fs-4 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
+                        <div class="hover-effect-target ratio ratio-1x1">
+                            <img src="/img/instagram/03.jpg" alt="Instagram image">
+                        </div>
+                    </a>
+                    <a class="hover-effect-scale hover-effect-opacity position-relative w-100 overflow-hidden"
+                        href="#!">
+                        <span
+                            class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
+                        <i
+                            class="ci-instagram hover-effect-target fs-4 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
+                        <div class="hover-effect-target ratio ratio-1x1">
+                            <img src="/img/instagram/04.jpg" alt="Instagram image">
+                        </div>
+                    </a>
+                    <a class="hover-effect-scale hover-effect-opacity position-relative w-100 overflow-hidden"
+                        href="#!">
+                        <span
+                            class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
+                        <i
+                            class="ci-instagram hover-effect-target fs-4 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
+                        <div class="hover-effect-target ratio ratio-1x1">
+                            <img src="/img/instagram/05.jpg" alt="Instagram image">
+                        </div>
+                    </a>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    @include('layouts.partials/footer2')
+@endsection
+
+@section('scripts')    
+@endsection
diff --git a/resources/views/home/fashion-v2.blade.php b/resources/views/home/fashion-v2.blade.php
new file mode 100644
index 0000000..3ceb865
--- /dev/null
+++ b/resources/views/home/fashion-v2.blade.php
@@ -0,0 +1,2582 @@
+@extends('layouts.landing', ['title' => 'Fashion Store v.2'])
+
+@section('content')
+    <div class="offcanvas offcanvas-end pb-sm-2 px-sm-2" id="shoppingCart" tabindex="-1" aria-labelledby="shoppingCartLabel"
+        style="width: 500px">
+
+        <!-- Header -->
+        <div class="offcanvas-header flex-column align-items-start py-3 pt-lg-4">
+            <div class="d-flex align-items-center justify-content-between w-100 mb-3 mb-lg-4">
+                <h4 class="offcanvas-title" id="shoppingCartLabel">Shopping cart</h4>
+                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+            </div>
+            <p class="fs-sm">Buy <span class="text-dark-emphasis fw-semibold">$53</span> more to get <span
+                    class="text-dark-emphasis fw-semibold">Free Shipping</span></p>
+            <div class="progress w-100" role="progressbar" aria-label="Free shipping progress" aria-valuenow="78"
+                aria-valuemin="0" aria-valuemax="100" style="height: 4px">
+                <div class="progress-bar bg-dark rounded-pill d-none-dark" style="width: 78%"></div>
+                <div class="progress-bar bg-light rounded-pill d-none d-block-dark" style="width: 78%"></div>
+            </div>
+        </div>
+
+        <!-- Items -->
+        <div class="offcanvas-body d-flex flex-column gap-4 pt-2">
+
+            <!-- Item -->
+            <div class="d-flex align-items-center">
+                <a class="flex-shrink-0" href="{{ route('second', ['shop', 'product-fashion']) }}">
+                    <img src="/img/shop/fashion/thumbs/07.png" class="bg-body-tertiary rounded" width="110"
+                        alt="Thumbnail">
+                </a>
+                <div class="w-100 min-w-0 ps-3">
+                    <h5 class="d-flex animate-underline mb-2">
+                        <a class="d-block fs-sm fw-medium text-truncate animate-target"
+                            href="{{ route('second', ['shop', 'product-fashion']) }}">Leather sneakers with golden laces</a>
+                    </h5>
+                    <div class="h6 pb-1 mb-2">$74.00</div>
+                    <div class="d-flex align-items-center justify-content-between">
+                        <div class="count-input rounded-2">
+                            <button type="button" class="btn btn-icon btn-sm" data-decrement
+                                aria-label="Decrement quantity">
+                                <i class="ci-minus"></i>
+                            </button>
+                            <input type="number" class="form-control form-control-sm" value="1" readonly>
+                            <button type="button" class="btn btn-icon btn-sm" data-increment
+                                aria-label="Increment quantity">
+                                <i class="ci-plus"></i>
+                            </button>
+                        </div>
+                        <button type="button" class="btn-close fs-sm" data-bs-toggle="tooltip"
+                            data-bs-custom-class="tooltip-sm" data-bs-title="Remove" aria-label="Remove from cart"></button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Item -->
+            <div class="d-flex align-items-center">
+                <a class="flex-shrink-0" href="{{ route('second', ['shop', 'product-fashion']) }}">
+                    <img src="/img/shop/fashion/thumbs/08.png" class="bg-body-tertiary rounded" width="110"
+                        alt="Thumbnail">
+                </a>
+                <div class="w-100 min-w-0 ps-3">
+                    <h5 class="d-flex animate-underline mb-2">
+                        <a class="d-block fs-sm fw-medium text-truncate animate-target"
+                            href="{{ route('second', ['shop', 'product-fashion']) }}">Classic cotton men's shirt</a>
+                    </h5>
+                    <div class="h6 pb-1 mb-2">$27.00</div>
+                    <div class="d-flex align-items-center justify-content-between">
+                        <div class="count-input rounded-2">
+                            <button type="button" class="btn btn-icon btn-sm" data-decrement
+                                aria-label="Decrement quantity">
+                                <i class="ci-minus"></i>
+                            </button>
+                            <input type="number" class="form-control form-control-sm" value="1" readonly>
+                            <button type="button" class="btn btn-icon btn-sm" data-increment
+                                aria-label="Increment quantity">
+                                <i class="ci-plus"></i>
+                            </button>
+                        </div>
+                        <button type="button" class="btn-close fs-sm" data-bs-toggle="tooltip"
+                            data-bs-custom-class="tooltip-sm" data-bs-title="Remove" aria-label="Remove from cart"></button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Item -->
+            <div class="d-flex align-items-center">
+                <a class="flex-shrink-0" href="{{ route('second', ['shop', 'product-fashion']) }}">
+                    <img src="/img/shop/fashion/thumbs/09.png" class="bg-body-tertiary rounded" width="110"
+                        alt="Thumbnail">
+                </a>
+                <div class="w-100 min-w-0 ps-3">
+                    <h5 class="d-flex animate-underline mb-2">
+                        <a class="d-block fs-sm fw-medium text-truncate animate-target"
+                            href="{{ route('second', ['shop', 'product-fashion']) }}">Polarized sunglasses for men</a>
+                    </h5>
+                    <div class="h6 pb-1 mb-2">$96.00 <del class="text-body-tertiary fs-xs fw-normal">112.00</del></div>
+                    <div class="d-flex align-items-center justify-content-between">
+                        <div class="count-input rounded-2">
+                            <button type="button" class="btn btn-icon btn-sm" data-decrement
+                                aria-label="Decrement quantity">
+                                <i class="ci-minus"></i>
+                            </button>
+                            <input type="number" class="form-control form-control-sm" value="1" readonly>
+                            <button type="button" class="btn btn-icon btn-sm" data-increment
+                                aria-label="Increment quantity">
+                                <i class="ci-plus"></i>
+                            </button>
+                        </div>
+                        <button type="button" class="btn-close fs-sm" data-bs-toggle="tooltip"
+                            data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
+                            aria-label="Remove from cart"></button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Footer -->
+        <div class="offcanvas-header flex-column align-items-start">
+            <div class="d-flex align-items-center justify-content-between w-100 mb-3 mb-md-4">
+                <span class="text-light-emphasis">Subtotal:</span>
+                <span class="h6 mb-0">$197.00</span>
+            </div>
+            <div class="d-flex w-100 gap-3">
+                <a class="btn btn-lg btn-secondary w-100" href="#!">View cart</a>
+                <a class="btn btn-lg btn-dark w-100" href="#!">Checkout</a>
+            </div>
+        </div>
+    </div>
+
+    <div class="offcanvas offcanvas-top" id="searchBox" data-bs-backdrop="static" tabindex="-1">
+        <div class="offcanvas-header border-bottom p-0 py-lg-1">
+            <form class="container d-flex align-items-center">
+                <input type="search" class="form-control form-control-lg fs-lg border-0 rounded-0 py-3 ps-0"
+                    placeholder="Search the products" data-autofocus="offcanvas">
+                <button type="reset" class="btn-close fs-lg" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+            </form>
+        </div>
+        <div class="offcanvas-body px-0">
+            <div class="container text-center">
+                <svg class="text-body-tertiary opacity-60 mb-4" xmlns="http://www.w3.org/2000/svg" width="60"
+                    viewBox="0 0 512 512" fill="currentColor">
+                    <path
+                        d="M340.115,361.412l-16.98-16.98c-34.237,29.36-78.733,47.098-127.371,47.098C87.647,391.529,0,303.883,0,195.765S87.647,0,195.765,0s195.765,87.647,195.765,195.765c0,48.638-17.738,93.134-47.097,127.371l16.98,16.98l11.94-11.94c5.881-5.881,15.415-5.881,21.296,0l112.941,112.941c5.881,5.881,5.881,15.416,0,21.296l-45.176,45.176c-5.881,5.881-15.415,5.881-21.296,0L328.176,394.648c-5.881-5.881-5.881-15.416,0-21.296L340.115,361.412z M195.765,361.412c91.484,0,165.647-74.163,165.647-165.647S287.249,30.118,195.765,30.118S30.118,104.28,30.118,195.765S104.28,361.412,195.765,361.412z M360.12,384l91.645,91.645l23.88-23.88L384,360.12L360.12,384z M233.034,233.033c5.881-5.881,15.415-5.881,21.296,0c5.881,5.881,5.881,15.416,0,21.296c-32.345,32.345-84.786,32.345-117.131,0c-5.881-5.881-5.881-15.415,0-21.296c5.881-5.881,15.416-5.881,21.296,0C179.079,253.616,212.45,253.616,233.034,233.033zM135.529,180.706c-12.475,0-22.588-10.113-22.588-22.588c0-12.475,10.113-22.588,22.588-22.588c12.475,0,22.588,10.113,22.588,22.588C158.118,170.593,148.005,180.706,135.529,180.706z M256,180.706c-12.475,0-22.588-10.113-22.588-22.588c0-12.475,10.113-22.588,22.588-22.588s22.588,10.113,22.588,22.588C278.588,170.593,268.475,180.706,256,180.706z" />
+                </svg>
+                <h6 class="mb-2">Your search results will appear here</h6>
+                <p class="fs-sm mb-0">Start typing in the search field above to see instant search results.</p>
+            </div>
+        </div>
+    </div>
+
+    <div class="alert alert-dismissible bg-dark text-white rounded-0 py-2 px-0 m-0 fade show" data-bs-theme="dark">
+        <div class="container position-relative d-flex min-w-0">
+            <div class="d-flex flex-nowrap align-items-center g-2 w-100 min-w-0 mx-auto mt-n1" style="max-width: 458px">
+                <div class="nav me-2">
+                    <button type="button" class="nav-link fs-lg p-0" id="topbarPrev" aria-label="Prev">
+                        <i class="ci-chevron-left"></i>
+                    </button>
+                </div>
+                <div class="swiper fs-sm text-white"
+                    data-swiper='{
+            "spaceBetween": 24,
+            "loop": true,
+            "autoplay": {
+              "delay": 5000,
+              "disableOnInteraction": false
+            },
+            "navigation": {
+              "prevEl": "#topbarPrev",
+              "nextEl": "#topbarNext"
+            }
+          }'>
+                    <div class="swiper-wrapper min-w-0">
+                        <div class="swiper-slide text-truncate text-center">🎉 Free Shipping on orders over $250. <span
+                                class="d-none d-sm-inline">Don't miss a discount!</span></div>
+                        <div class="swiper-slide text-truncate text-center">💰 Money back guarantee. <span
+                                class="d-none d-sm-inline">We return money within 30 days.</span></div>
+                        <div class="swiper-slide text-truncate text-center">💪 Friendly 24/7 customer support. <span
+                                class="d-none d-sm-inline">We've got you covered!</span></div>
+                    </div>
+                </div>
+                <div class="nav ms-2">
+                    <button type="button" class="nav-link fs-lg p-0" id="topbarNext" aria-label="Next">
+                        <i class="ci-chevron-right"></i>
+                    </button>
+                </div>
+            </div>
+            <button type="button" class="btn-close position-static flex-shrink-0 p-1 ms-3 ms-md-n4"
+                data-bs-dismiss="alert" aria-label="Close"></button>
+        </div>
+    </div>
+
+    <header class="navbar navbar-expand-lg navbar-sticky bg-body d-block z-fixed p-0"
+        data-sticky-navbar='{"offset": 500}'>
+        <div class="container py-2 py-lg-3">
+            <div class="d-flex align-items-center gap-3">
+
+                <!-- Mobile offcanvas menu toggler (Hamburger) -->
+                <button type="button" class="navbar-toggler me-4 me-md-2" data-bs-toggle="offcanvas"
+                    data-bs-target="#navbarNav" aria-controls="navbarNav" aria-label="Toggle navigation">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+
+                <!-- Country slect visible on screens > 768px wide (md breakpoint) -->
+                <div class="dropdown d-none d-md-block nav">
+                    <a class="nav-link dropdown-toggle py-1 px-0" href="#" data-bs-toggle="dropdown"
+                        aria-haspopup="true" aria-expanded="false" aria-label="Country select: USA">
+                        <div class="ratio ratio-1x1" style="width: 20px">
+                            <img src="/img/flags/en-us.png" alt="USA">
+                        </div>
+                    </a>
+                    <ul class="dropdown-menu fs-sm" style="--cz-dropdown-spacer: .5rem">
+                        <li>
+                            <a class="dropdown-item" href="#!">
+                                <img src="/img/flags/en-uk.png" class="flex-shrink-0 me-2" width="20"
+                                    alt="United Kingdom">
+                                United Kingdom
+                            </a>
+                        </li>
+                        <li>
+                            <a class="dropdown-item" href="#!">
+                                <img src="/img/flags/fr.png" class="flex-shrink-0 me-2" width="20" alt="France">
+                                France
+                            </a>
+                        </li>
+                        <li>
+                            <a class="dropdown-item" href="#!">
+                                <img src="/img/flags/de.png" class="flex-shrink-0 me-2" width="20"
+                                    alt="Deutschland">
+                                Deutschland
+                            </a>
+                        </li>
+                        <li>
+                            <a class="dropdown-item" href="#!">
+                                <img src="/img/flags/it.png" class="flex-shrink-0 me-2" width="20" alt="Italia">
+                                Italia
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+
+                <!-- City slect visible on screens > 768px wide (md breakpoint) -->
+                <div class="dropdown d-none d-md-block nav">
+                    <a class="nav-link animate-underline dropdown-toggle fw-normal py-1 px-0" href="#"
+                        data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        <span class="animate-target">Washington</span>
+                    </a>
+                    <ul class="dropdown-menu fs-sm" style="--cz-dropdown-spacer: .5rem">
+                        <li><a class="dropdown-item" href="#!">Chicago</a></li>
+                        <li><a class="dropdown-item" href="#!">Los Angeles</a></li>
+                        <li><a class="dropdown-item" href="#!">New York</a></li>
+                        <li><a class="dropdown-item" href="#!">Philadelphia</a></li>
+                    </ul>
+                </div>
+            </div>
+
+            <!-- Navbar brand (Logo) -->
+            <a class="navbar-brand fs-2 py-0 m-0 me-auto me-sm-n5" href="/">Cartzilla</a>
+
+            <!-- Button group -->
+            <div class="d-flex align-items-center">
+
+                <!-- Navbar stuck nav toggler -->
+                <button type="button" class="navbar-toggler d-none navbar-stuck-show me-3" data-bs-toggle="collapse"
+                    data-bs-target="#stuckNav" aria-controls="stuckNav" aria-expanded="false"
+                    aria-label="Toggle navigation in navbar stuck state">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+
+                <!-- Theme switcher (light/dark/auto) -->
+                <div class="dropdown">
+                    <button type="button"
+                        class="theme-switcher btn btn-icon btn-lg btn-outline-secondary fs-lg border-0 rounded-circle animate-scale"
+                        data-bs-toggle="dropdown" aria-expanded="false" aria-label="Toggle theme (light)">
+                        <span class="theme-icon-active d-flex animate-target">
+                            <i class="ci-sun"></i>
+                        </span>
+                    </button>
+                    <ul class="dropdown-menu" style="--cz-dropdown-min-width: 9rem">
+                        <li>
+                            <button type="button" class="dropdown-item active" data-bs-theme-value="light"
+                                aria-pressed="true">
+                                <span class="theme-icon d-flex fs-base me-2">
+                                    <i class="ci-sun"></i>
+                                </span>
+                                <span class="theme-label">Light</span>
+                                <i class="item-active-indicator ci-check ms-auto"></i>
+                            </button>
+                        </li>
+                        <li>
+                            <button type="button" class="dropdown-item" data-bs-theme-value="dark"
+                                aria-pressed="false">
+                                <span class="theme-icon d-flex fs-base me-2">
+                                    <i class="ci-moon"></i>
+                                </span>
+                                <span class="theme-label">Dark</span>
+                                <i class="item-active-indicator ci-check ms-auto"></i>
+                            </button>
+                        </li>
+                        <li>
+                            <button type="button" class="dropdown-item" data-bs-theme-value="auto"
+                                aria-pressed="false">
+                                <span class="theme-icon d-flex fs-base me-2">
+                                    <i class="ci-auto"></i>
+                                </span>
+                                <span class="theme-label">Auto</span>
+                                <i class="item-active-indicator ci-check ms-auto"></i>
+                            </button>
+                        </li>
+                    </ul>
+                </div>
+
+                <!-- Search toggle button visible on screens < 992px wide (lg breakpoint) -->
+                <button type="button"
+                    class="btn btn-icon btn-lg fs-xl btn-outline-secondary border-0 rounded-circle animate-shake d-lg-none"
+                    data-bs-toggle="offcanvas" data-bs-target="#searchBox" aria-controls="searchBox"
+                    aria-label="Toggle search bar">
+                    <i class="ci-search animate-target"></i>
+                </button>
+
+                <!-- Account button visible on screens > 768px wide (md breakpoint) -->
+                <a class="btn btn-icon btn-lg fs-lg btn-outline-secondary border-0 rounded-circle animate-shake d-none d-md-inline-flex"
+                    href="{{ route('second', ['account', 'signin']) }}">
+                    <i class="ci-user animate-target"></i>
+                    <span class="visually-hidden">Account</span>
+                </a>
+
+                <!-- Wishlist button visible on screens > 768px wide (md breakpoint) -->
+                <a class="btn btn-icon btn-lg fs-lg btn-outline-secondary border-0 rounded-circle animate-pulse d-none d-md-inline-flex"
+                    href="#!">
+                    <i class="ci-heart animate-target"></i>
+                    <span class="visually-hidden">Wishlist</span>
+                </a>
+
+                <!-- Cart button -->
+                <button type="button"
+                    class="btn btn-icon btn-lg fs-xl btn-outline-secondary position-relative border-0 rounded-circle animate-scale"
+                    data-bs-toggle="offcanvas" data-bs-target="#shoppingCart" aria-controls="shoppingCart"
+                    aria-label="Shopping cart">
+                    <span class="position-absolute top-0 start-100 badge fs-xs text-bg-primary rounded-pill mt-1 ms-n4 z-2"
+                        style="--cz-badge-padding-y: .25em; --cz-badge-padding-x: .42em">3</span>
+                    <i class="ci-shopping-bag animate-target me-1"></i>
+                </button>
+            </div>
+        </div>
+
+        <!-- Main navigation that turns into offcanvas on screens < 992px wide (lg breakpoint) -->
+        <div class="collapse navbar-stuck-hide" id="stuckNav">
+            <nav class="offcanvas offcanvas-start" id="navbarNav" tabindex="-1" aria-labelledby="navbarNavLabel">
+                <div class="offcanvas-header py-3">
+                    <h5 class="offcanvas-title" id="navbarNavLabel">Browse Cartzilla</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+                </div>
+
+                <!-- Country and City slects visible on screens < 768px wide (md breakpoint) -->
+                <div class="offcanvas-header gap-3 d-md-none pt-0 pb-3">
+                    <div class="dropdown nav">
+                        <a class="nav-link dropdown-toggle py-1 px-0" href="#" data-bs-toggle="dropdown"
+                            aria-haspopup="true" aria-expanded="false" aria-label="Country select: USA">
+                            <div class="ratio ratio-1x1" style="width: 20px">
+                                <img src="/img/flags/en-us.png" alt="USA">
+                            </div>
+                        </a>
+                        <ul class="dropdown-menu fs-sm" style="--cz-dropdown-spacer: .5rem">
+                            <li>
+                                <a class="dropdown-item" href="#!">
+                                    <img src="/img/flags/en-uk.png" class="flex-shrink-0 me-2" width="20"
+                                        alt="United Kingdom">
+                                    United Kingdom
+                                </a>
+                            </li>
+                            <li>
+                                <a class="dropdown-item" href="#!">
+                                    <img src="/img/flags/fr.png" class="flex-shrink-0 me-2" width="20"
+                                        alt="France">
+                                    France
+                                </a>
+                            </li>
+                            <li>
+                                <a class="dropdown-item" href="#!">
+                                    <img src="/img/flags/de.png" class="flex-shrink-0 me-2" width="20"
+                                        alt="Deutschland">
+                                    Deutschland
+                                </a>
+                            </li>
+                            <li>
+                                <a class="dropdown-item" href="#!">
+                                    <img src="/img/flags/it.png" class="flex-shrink-0 me-2" width="20"
+                                        alt="Italia">
+                                    Italia
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="dropdown nav">
+                        <a class="nav-link animate-underline dropdown-toggle fw-normal py-1 px-0" href="#"
+                            data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            <span class="animate-target">Washington</span>
+                        </a>
+                        <ul class="dropdown-menu fs-sm" style="--cz-dropdown-spacer: .5rem">
+                            <li><a class="dropdown-item" href="#!">Chicago</a></li>
+                            <li><a class="dropdown-item" href="#!">Los Angeles</a></li>
+                            <li><a class="dropdown-item" href="#!">New York</a></li>
+                            <li><a class="dropdown-item" href="#!">Philadelphia</a></li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="offcanvas-body pt-1 pb-3 py-lg-0">
+                    <div class="container pb-lg-2 px-0 px-lg-3">
+
+                        <div class="position-relative d-lg-flex align-items-center justify-content-between">
+
+                            <!-- Categories mega menu -->
+                            <div class="navbar-nav">
+                                <div class="dropdown position-static pb-lg-2">
+                                    <button type="button"
+                                        class="nav-link animate-underline fw-semibold text-uppercase ps-0"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover" data-bs-auto-close="outside"
+                                        aria-expanded="false">
+                                        <i class="ci-menu fs-lg me-2"></i>
+                                        <span class="animate-target">Categories</span>
+                                    </button>
+                                    <div class="dropdown-menu w-100 p-4 px-xl-5" style="--cz-dropdown-spacer: .75rem">
+
+                                        <!-- Nav tabs -->
+                                        <ul class="nav nav-underline justify-content-lg-center mt-n2 mt-lg-0 mb-4"
+                                            role="tablist">
+                                            <li class="nav-item" role="presentation">
+                                                <button type="button" class="nav-link text-uppercase active"
+                                                    id="womens-tab" data-bs-toggle="tab"
+                                                    data-bs-target="#womens-tab-pane" role="tab"
+                                                    aria-controls="womens-tab-pane" aria-selected="true">
+                                                    Women's
+                                                </button>
+                                            </li>
+                                            <li class="nav-item" role="presentation">
+                                                <button type="button" class="nav-link text-uppercase" id="mens-tab"
+                                                    data-bs-toggle="tab" data-bs-target="#mens-tab-pane" role="tab"
+                                                    aria-controls="mens-tab-pane" aria-selected="false">
+                                                    Men's
+                                                </button>
+                                            </li>
+                                            <li class="nav-item" role="presentation">
+                                                <button type="button" class="nav-link text-uppercase" id="kids-tab"
+                                                    data-bs-toggle="tab" data-bs-target="#kids-tab-pane" role="tab"
+                                                    aria-controls="kids-tab-pane" aria-selected="false">
+                                                    Kids'
+                                                </button>
+                                            </li>
+                                        </ul>
+
+                                        <!-- Tab panes -->
+                                        <div class="tab-content pb-xl-4">
+
+                                            <!-- Women's tab -->
+                                            <div class="tab-pane fade show active" id="womens-tab-pane" role="tabpanel"
+                                                aria-labelledby="womens-tab">
+                                                <div class="row g-4">
+                                                    <div class="col-lg-2">
+                                                        <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
+                                                            href="{{ route('second', ['shop', 'catalog-fashion']) }}">
+                                                            <span class="animate-target">Clothing</span>
+                                                        </a>
+                                                        <ul class="nav flex-column gap-2 mt-0">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Shirts &amp; Tops</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Coats &amp;
+                                                                    Outerwear</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Underwear</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sweatshirts</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Dresses</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Swimwear</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">View all</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="col-lg-2">
+                                                        <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
+                                                            href="{{ route('second', ['shop', 'catalog-fashion']) }}">
+                                                            <span class="animate-target">Shoes</span>
+                                                        </a>
+                                                        <ul class="nav flex-column gap-2 mt-0">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Boots</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sandals</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Heels</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Loafers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Slippers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Oxfords</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">View all</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="col-lg-2">
+                                                        <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
+                                                            href="{{ route('second', ['shop', 'catalog-fashion']) }}">
+                                                            <span class="animate-target">Accessories</span>
+                                                        </a>
+                                                        <ul class="nav flex-column gap-2 mt-0">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Handbags</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Eyewear</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Hats</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Watches</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Jewelry</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Belts</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">View all</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="col-lg-2">
+                                                        <div class="h6 mb-2">Specialty Sizes</div>
+                                                        <ul class="nav flex-column gap-2 mt-0">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Plus Size</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Petite</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Wide Shoes</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Narrow Shoes</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="col-lg-4 d-none d-lg-block" data-bs-theme="light">
+                                                        <div
+                                                            class="position-relative d-flex flex-column h-100 rounded-4 overflow-hidden p-4">
+                                                            <div
+                                                                class="position-relative d-flex flex-column justify-content-between h-100 z-2 pt-xl-2 ps-xl-2">
+                                                                <div class="h4 lh-base">Women's<br>Heels<br>Collection
+                                                                </div>
+                                                                <div>
+                                                                    <a class="btn btn-sm btn-dark stretched-link"
+                                                                        href="{{ route('second', ['shop', 'catalog-fashion']) }}"
+                                                                        data-bs-theme="light">Shop now</a>
+                                                                </div>
+                                                            </div>
+                                                            <img src="/img/mega-menu/fashion/01.jpg"
+                                                                class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rtl-flip"
+                                                                alt="Image">
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+
+                                            <!-- Men's tab -->
+                                            <div class="tab-pane fade" id="mens-tab-pane" role="tabpanel"
+                                                aria-labelledby="mens-tab">
+                                                <div class="row g-4">
+                                                    <div class="col-lg-2">
+                                                        <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
+                                                            href="{{ route('second', ['shop', 'catalog-fashion']) }}">
+                                                            <span class="animate-target">Clothing</span>
+                                                        </a>
+                                                        <ul class="nav flex-column gap-2 mt-0">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">T-Shirts</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Jeans</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Coats &amp;
+                                                                    Outerwear</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sweatshirts</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Underwear</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Pants</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">View all</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="col-lg-2">
+                                                        <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
+                                                            href="{{ route('second', ['shop', 'catalog-fashion']) }}">
+                                                            <span class="animate-target">Shoes</span>
+                                                        </a>
+                                                        <ul class="nav flex-column gap-2 mt-0">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sneakers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Oxfords</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Loafers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sandals</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Boots</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Slippers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">View all</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="col-lg-2">
+                                                        <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
+                                                            href="{{ route('second', ['shop', 'catalog-fashion']) }}">
+                                                            <span class="animate-target">Accessories</span>
+                                                        </a>
+                                                        <ul class="nav flex-column gap-2 mt-0">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Backpacks</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sunglasses</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Bags</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Watches</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Hats</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Belts</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">View all</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="col-lg-2">
+                                                        <div class="h6 mb-2">Specialty Shops</div>
+                                                        <ul class="nav flex-column gap-2 mt-0">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Active Wear</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sports Clothing</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Athletic Shoes</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="col-lg-4 d-none d-lg-block" data-bs-theme="dark">
+                                                        <div
+                                                            class="position-relative d-flex flex-column h-100 rounded-4 overflow-hidden p-4">
+                                                            <div
+                                                                class="position-relative d-flex flex-column justify-content-between h-100 z-2 pt-xl-2 ps-xl-2">
+                                                                <div class="h4 lh-base">Men's<br>Sunglasses<br>Offers</div>
+                                                                <div>
+                                                                    <a class="btn btn-sm btn-dark stretched-link"
+                                                                        href="{{ route('second', ['shop', 'catalog-fashion']) }}"
+                                                                        data-bs-theme="dark">Shop now</a>
+                                                                </div>
+                                                            </div>
+                                                            <img src="/img/mega-menu/fashion/02.jpg"
+                                                                class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rtl-flip"
+                                                                alt="Image">
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+
+                                            <!-- Kids' tab -->
+                                            <div class="tab-pane fade" id="kids-tab-pane" role="tabpanel"
+                                                aria-labelledby="kids-tab">
+                                                <div class="row g-4">
+                                                    <div class="col-lg-2">
+                                                        <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
+                                                            href="{{ route('second', ['shop', 'catalog-fashion']) }}">
+                                                            <span class="animate-target">Boys</span>
+                                                        </a>
+                                                        <ul class="nav flex-column gap-2 mt-0">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Pants</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sneakers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Coats &amp;
+                                                                    Outerwear</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sweatshirts</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Boots</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Shorts</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">View all</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="col-lg-2">
+                                                        <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
+                                                            href="{{ route('second', ['shop', 'catalog-fashion']) }}">
+                                                            <span class="animate-target">Girls</span>
+                                                        </a>
+                                                        <ul class="nav flex-column gap-2 mt-0">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Shirts &amp; Tops</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Dresses</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sneakers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Hoodies</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sandals</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Coats &amp;
+                                                                    Outerwear</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">View all</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="col-lg-2">
+                                                        <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
+                                                            href="{{ route('second', ['shop', 'catalog-fashion']) }}">
+                                                            <span class="animate-target">Accessories</span>
+                                                        </a>
+                                                        <ul class="nav flex-column gap-2 mt-0">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Backpacks</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Gloves</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Shoe Laces</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Scarves</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Hats</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Belts</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">View all</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="col-lg-2">
+                                                        <div class="h6 mb-2">Shop by Age</div>
+                                                        <ul class="nav flex-column gap-2 mt-0">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Infant</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Toddler</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Little Kid</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Big Kid</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="col-lg-4 d-none d-lg-block" data-bs-theme="light">
+                                                        <div
+                                                            class="position-relative d-flex flex-column h-100 rounded-4 overflow-hidden p-4">
+                                                            <div
+                                                                class="position-relative d-flex flex-column justify-content-between h-100 z-2 pt-xl-2 ps-xl-2">
+                                                                <div class="h4 lh-base">Kids'<br>Spring<br>Collection</div>
+                                                                <div>
+                                                                    <a class="btn btn-sm btn-dark stretched-link"
+                                                                        href="{{ route('second', ['shop', 'catalog-fashion']) }}"
+                                                                        data-bs-theme="light">Shop now</a>
+                                                                </div>
+                                                            </div>
+                                                            <img src="/img/mega-menu/fashion/03.jpg"
+                                                                class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rtl-flip"
+                                                                alt="Image">
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Navbar nav -->
+                            <ul class="navbar-nav position-relative me-xl-n5">
+                                <li class="nav-item dropdown pb-lg-2 me-lg-n1 me-xl-0">
+                                    <a class="nav-link dropdown-toggle active" aria-current="page" href="#"
+                                        role="button" data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                        aria-expanded="false">Home</a>
+                                    <ul class="dropdown-menu" style="--cz-dropdown-spacer: .75rem">
+                                        <li class="hover-effect-opacity px-2 mx-n2">
+                                            <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'electronics']) }}">
+                                                <span class="fw-medium">Electronics Store</span>
+                                                <span class="d-block fs-xs text-body-secondary">Megamenu + Hero
+                                                    slider</span>
+                                                <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                                    style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                                    <img class="position-relative z-2 d-none-dark"
+                                                        src="/img/mega-menu/demo-preview/electronics-light.jpg"
+                                                        alt="Electronics Store">
+                                                    <img class="position-relative z-2 d-none d-block-dark"
+                                                        src="/img/mega-menu/demo-preview/electronics-dark.jpg"
+                                                        alt="Electronics Store">
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                        style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                        style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="hover-effect-opacity px-2 mx-n2">
+                                            <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'fashion-v1']) }}">
+                                                <span class="fw-medium">Fashion Store v.1</span>
+                                                <span class="d-block fs-xs text-body-secondary">Hero promo slider</span>
+                                                <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                                    style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                                    <img class="position-relative z-2 d-none-dark"
+                                                        src="/img/mega-menu/demo-preview/fashion-1-light.jpg"
+                                                        alt="Fashion Store v.1">
+                                                    <img class="position-relative z-2 d-none d-block-dark"
+                                                        src="/img/mega-menu/demo-preview/fashion-1-dark.jpg"
+                                                        alt="Fashion Store v.1">
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                        style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                        style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="hover-effect-opacity px-2 mx-n2">
+                                            <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'fashion-v2']) }}">
+                                                <span class="fw-medium">Fashion Store v.2</span>
+                                                <span class="d-block fs-xs text-body-secondary">Hero banner with
+                                                    hotspots</span>
+                                                <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                                    style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                                    <img class="position-relative z-2 d-none-dark"
+                                                        src="/img/mega-menu/demo-preview/fashion-2-light.jpg"
+                                                        alt="Fashion Store v.2">
+                                                    <img class="position-relative z-2 d-none d-block-dark"
+                                                        src="/img/mega-menu/demo-preview/fashion-2-dark.jpg"
+                                                        alt="Fashion Store v.2">
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                        style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                        style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="hover-effect-opacity px-2 mx-n2">
+                                            <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'furniture']) }}">
+                                                <span class="fw-medium">Furniture Store</span>
+                                                <span class="d-block fs-xs text-body-secondary">Fancy product
+                                                    carousel</span>
+                                                <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                                    style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                                    <img class="position-relative z-2 d-none-dark"
+                                                        src="/img/mega-menu/demo-preview/furniture-light.jpg"
+                                                        alt="Furniture Store">
+                                                    <img class="position-relative z-2 d-none d-block-dark"
+                                                        src="/img/mega-menu/demo-preview/furniture-dark.jpg"
+                                                        alt="Furniture Store">
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                        style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                        style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="hover-effect-opacity px-2 mx-n2">
+                                            <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'grocery']) }}">
+                                                <span class="fw-medium">Grocery Store</span>
+                                                <span class="d-block fs-xs text-body-secondary">Hero slider + Category
+                                                    cards</span>
+                                                <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                                    style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                                    <img class="position-relative z-2 d-none-dark"
+                                                        src="/img/mega-menu/demo-preview/grocery-light.jpg"
+                                                        alt="Grocery Store">
+                                                    <img class="position-relative z-2 d-none d-block-dark"
+                                                        src="/img/mega-menu/demo-preview/grocery-dark.jpg"
+                                                        alt="Grocery Store">
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                        style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                        style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="hover-effect-opacity px-2 mx-n2">
+                                            <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'marketplace']) }}">
+                                                <span class="fw-medium">Marketplace</span>
+                                                <span class="d-block fs-xs text-body-secondary">Multi-vendor, digital
+                                                    goods</span>
+                                                <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                                    style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                                    <img class="position-relative z-2 d-none-dark"
+                                                        src="/img/mega-menu/demo-preview/marketplace-light.jpg"
+                                                        alt="Marketplace">
+                                                    <img class="position-relative z-2 d-none d-block-dark"
+                                                        src="/img/mega-menu/demo-preview/marketplace-dark.jpg"
+                                                        alt="Marketplace">
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                        style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                        style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="hover-effect-opacity px-2 mx-n2">
+                                            <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'single-store']) }}">
+                                                <span class="fw-medium">Single Product Store</span>
+                                                <span class="d-block fs-xs text-body-secondary">Single product / mono
+                                                    brand</span>
+                                                <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                                    style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                                    <img class="position-relative z-2 d-none-dark"
+                                                        src="/img/mega-menu/demo-preview/single-store-light.jpg"
+                                                        alt="Single Product Store">
+                                                    <img class="position-relative z-2 d-none d-block-dark"
+                                                        src="/img/mega-menu/demo-preview/single-store-dark.jpg"
+                                                        alt="Single Product Store">
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                        style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                        style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                                </div>
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </li>
+                                <li class="nav-item dropdown position-static pb-lg-2 me-lg-n1 me-xl-0">
+                                    <a class="nav-link dropdown-toggle" href="#" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Shop</a>
+                                    <div class="dropdown-menu p-4" style="--cz-dropdown-spacer: .75rem">
+                                        <div class="d-flex flex-column flex-lg-row gap-4">
+                                            <div style="min-width: 190px">
+                                                <div class="h6 mb-2">Electronics Store</div>
+                                                <ul class="nav flex-column gap-2 mt-0">
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'categories-electronics']) }}">Categories Page</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'catalog-electronics']) }}">Catalog with Side
+                                                            Filters</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'product-general-electronics']) }}">Product General
+                                                            Info</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'product-details-electronics']) }}">Product
+                                                            Details</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'product-reviews-electronics']) }}">Product
+                                                            Reviews</a>
+                                                    </li>
+                                                </ul>
+                                                <div class="h6 pt-4 mb-2">Fashion Store</div>
+                                                <ul class="nav flex-column gap-2 mt-0">
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'catalog-fashion']) }}">Catalog with Side Filters</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'product-fashion']) }}">Product Page</a>
+                                                    </li>
+                                                </ul>
+                                                <div class="h6 pt-4 mb-2">Furniture Store</div>
+                                                <ul class="nav flex-column gap-2 mt-0">
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'catalog-furniture']) }}">Catalog with Top Filters</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'product-furniture']) }}">Product Page</a>
+                                                    </li>
+                                                </ul>
+                                            </div>
+                                            <div style="min-width: 190px">
+                                                <div class="h6 mb-2">Grocery Store</div>
+                                                <ul class="nav flex-column gap-2 mt-0">
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'catalog-grocery']) }}">Catalog with Side Filters</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'product-grocery']) }}">Product Page</a>
+                                                    </li>
+                                                </ul>
+                                                <div class="h6 pt-4 mb-2">Marketplace</div>
+                                                <ul class="nav flex-column gap-2 mt-0">
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'catalog-marketplace']) }}">Catalog with Top
+                                                            Filters</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'product-marketplace']) }}">Digital Product Page</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'marketplace']) }}">Cart / Checkout</a>
+                                                    </li>
+                                                </ul>
+                                            </div>
+                                            <div style="min-width: 190px">
+                                                <div class="h6 mb-2">Checkout v.1</div>
+                                                <ul class="nav flex-column gap-2 mt-0">
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'v1-cart']) }}">Shopping Cart</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'v1-delivery-1']) }}">Delivery Info (Step 1)</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'v1-delivery-2']) }}">Delivery Info (Step 2)</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'v1-shipping']) }}">Shipping Address</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'v1-payment']) }}">Payment</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'v1-thankyou']) }}">Thank You Page</a>
+                                                    </li>
+                                                </ul>
+                                                <div class="h6 pt-4 mb-2">Checkout v.2</div>
+                                                <ul class="nav flex-column gap-2 mt-0">
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'v2-cart']) }}">Shopping Cart</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'v2-delivery']) }}">Delivery Info</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'v2-pickup']) }}">Pickup from Store</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'v2-thankyou']) }}">Thank You Page</a>
+                                                    </li>
+                                                </ul>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </li>
+                                <li class="nav-item dropdown pb-lg-2 me-lg-n1 me-xl-0">
+                                    <a class="nav-link dropdown-toggle" href="#" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover" data-bs-auto-close="outside"
+                                        aria-expanded="false">Account</a>
+                                    <ul class="dropdown-menu" style="--cz-dropdown-spacer: .75rem">
+                                        <li class="dropend">
+                                            <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                                aria-expanded="false">Auth Pages</a>
+                                            <ul class="dropdown-menu">
+                                                <li><a class="dropdown-item" href="{{ route('second', ['account', 'signin']) }}">Sign In</a></li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['account', 'signup']) }}">Sign Up</a></li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'password-recovery']) }}">Password Recovery</a></li>
+                                            </ul>
+                                        </li>
+                                        <li class="dropend">
+                                            <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                                aria-expanded="false">Shop User</a>
+                                            <ul class="dropdown-menu">
+                                                <li><a class="dropdown-item" href="{{ route('second', ['account', 'orders']) }}">Orders
+                                                        History</a></li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['account', 'wishlist']) }}">Wishlist</a>
+                                                </li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['account', 'payment']) }}">Payment
+                                                        Methods</a></li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['account', 'reviews']) }}">My Reviews</a>
+                                                </li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['account', 'info']) }}">Personal Info</a>
+                                                </li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['account', 'addresses']) }}">Addresses</a>
+                                                </li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'notifications']) }}">Notifications</a></li>
+                                            </ul>
+                                        </li>
+                                        <li class="dropend">
+                                            <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                                aria-expanded="false">Marketplace User</a>
+                                            <ul class="dropdown-menu">
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'marketplace-dashboard']) }}">Dashboard</a></li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'marketplace-products']) }}">Products</a></li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'marketplace-sales']) }}">Sales</a></li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'marketplace-payouts']) }}">Payouts</a></li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'marketplace-purchases']) }}">Purchases</a></li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'marketplace-favorites']) }}">Favorites</a></li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'marketplace-settings']) }}">Settings</a></li>
+                                            </ul>
+                                        </li>
+                                    </ul>
+                                </li>
+                                <li class="nav-item dropdown pb-lg-2 me-lg-n1 me-xl-0">
+                                    <a class="nav-link dropdown-toggle" href="#" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover" data-bs-auto-close="outside"
+                                        aria-expanded="false">Pages</a>
+                                    <ul class="dropdown-menu" style="--cz-dropdown-spacer: .75rem">
+                                        <li class="dropend">
+                                            <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                                aria-expanded="false">About</a>
+                                            <ul class="dropdown-menu">
+                                                <li><a class="dropdown-item" href="{{ route('second', ['about', 'v1']) }}">About v.1</a></li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['about', 'v2']) }}">About v.2</a></li>
+                                            </ul>
+                                        </li>
+                                        <li class="dropend">
+                                            <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                                aria-expanded="false">Blog</a>
+                                            <ul class="dropdown-menu">
+                                                <li><a class="dropdown-item" href="{{ route('second', ['blog', 'grid-v1']) }}">Grid View v.1</a>
+                                                </li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['blog', 'grid-v2']) }}">Grid View v.2</a>
+                                                </li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['blog', 'list']) }}">List View</a></li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['blog', 'single-v1']) }}">Single Post
+                                                        v.1</a></li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['blog', 'single-v2']) }}">Single Post
+                                                        v.2</a></li>
+                                            </ul>
+                                        </li>
+                                        <li class="dropend">
+                                            <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                                aria-expanded="false">Contact</a>
+                                            <ul class="dropdown-menu">
+                                                <li><a class="dropdown-item" href="{{ route('second', ['contact', 'v1']) }}">Contact v.1</a></li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['contact', 'v2']) }}">Contact v.2</a></li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['contact', 'v3']) }}">Contact v.3</a></li>
+                                            </ul>
+                                        </li>
+                                        <li class="dropend">
+                                            <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                                aria-expanded="false">Help Center</a>
+                                            <ul class="dropdown-menu">
+                                                <li><a class="dropdown-item" href="{{ route('second', ['help', 'topics-v1']) }}">Help Topics
+                                                        v.1</a></li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['help', 'topics-v2']) }}">Help Topics
+                                                        v.2</a></li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['help', 'single-article-v1']) }}">Help
+                                                        Single Article v.1</a></li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['help', 'single-article-v2']) }}">Help
+                                                        Single Article v.2</a></li>
+                                            </ul>
+                                        </li>
+                                        <li class="dropend">
+                                            <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                                aria-expanded="false">404 Error</a>
+                                            <ul class="dropdown-menu">
+                                                <li><a class="dropdown-item" href="{{ route('second', ['404', 'electronics']) }}">404
+                                                        Electronics</a></li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['404', 'fashion']) }}">404 Fashion</a>
+                                                </li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['404', 'furniture']) }}">404 Furniture</a>
+                                                </li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['404', 'grocery']) }}">404 Grocery</a>
+                                                </li>
+                                            </ul>
+                                        </li>
+                                        <li><a class="dropdown-item" href="{{ route('any', 'terms-and-conditions')}}">Terms &amp;
+                                                Conditions</a></li>
+                                    </ul>
+                                </li>                                
+                            </ul>
+
+                            <!-- Search toggle visible on screens > 991px wide (lg breakpoint) -->
+                            <button type="button"
+                                class="btn btn-outline-secondary justify-content-start w-100 px-3 mb-lg-2 ms-3 d-none d-lg-inline-flex"
+                                style="max-width: 240px" data-bs-toggle="offcanvas" data-bs-target="#searchBox"
+                                aria-controls="searchBox">
+                                <i class="ci-search fs-base ms-n1 me-2"></i>
+                                <span class="text-body-tertiary fw-normal">Search</span>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Account and Wishlist buttons visible on screens < 768px wide (md breakpoint) -->
+                <div class="offcanvas-header border-top px-0 py-3 mt-3 d-md-none">
+                    <div class="nav nav-justified w-100">
+                        <a class="nav-link border-end" href="{{ route('second', ['account', 'signin']) }}">
+                            <i class="ci-user fs-lg opacity-60 me-2"></i>
+                            Account
+                        </a>
+                        <a class="nav-link" href="#!">
+                            <i class="ci-heart fs-lg opacity-60 me-2"></i>
+                            Wishlist
+                        </a>
+                    </div>
+                </div>
+            </nav>
+        </div>
+    </header>
+
+    <main class="content-wrapper">
+
+        <!-- Hero banner with hotspots -->
+        <section class="container pt-2 pt-lg-3">
+            <div class="position-relative rounded-5 overflow-hidden">
+                <div class="row align-items-center position-relative z-2">
+                    <div class="col-md-5 col-lg-4 offset-lg-1 text-center text-md-start mb-4 mb-md-0">
+                        <div class="pt-5 pt-md-0 px-4 px-sm-5 pe-md-0 ps-md-5 ps-lg-0">
+                            <p class="fs-xl mb-lg-4">The new stylish collection</p>
+                            <h1 class="display-4 text-uppercase mb-4 mb-lg-5">New fall <span class="text-nowrap">season
+                                    2024</span></h1>
+                            <a class="btn btn-lg btn-dark" href="{{ route('second', ['shop', 'catalog-fashion']) }}">
+                                Shop now
+                                <i class="ci-arrow-up-right fs-lg ms-2 me-n1"></i>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="col-md-7 mt-md-n5">
+                        <div class="d-flex justify-content-center justify-content-md-end">
+                            <div class="position-relative w-100 rtl-flip" style="max-width: 636px">
+                                <a class="btn btn-icon btn-light rounded-circle shadow position-absolute z-2"
+                                    href="#!" style="top: 30%; left: 46%" data-bs-toggle="popover"
+                                    data-bs-html="true" data-bs-trigger="focus" data-bs-placement="right"
+                                    data-bs-custom-class="popover-sm"
+                                    data-bs-content='
+                    <div class="d-flex align-items-start position-relative">
+                      <img src="/img/home/fashion/v2/hero/hotspot01.png" width="64" alt="Image">
+                      <div class="nav flex-column pt-2 ps-2 ms-1">
+                        <a class="nav-link hover-effect-underline stretched-link p-0 mb-2" href="{{ route('second', ['shop', 'product-fashion']) }}">Women beige trench coat</a>
+                        <div class="h6 mb-0">120.00</div>
+                      </div>
+                    </div>
+                  '
+                                    tabindex="1" aria-label="Hotspot">
+                                    <i class="ci-plus fs-base"></i>
+                                </a>
+                                <a class="btn btn-icon btn-light rounded-circle shadow position-absolute z-2"
+                                    href="#!" style="top: 51%; left: 26%" data-bs-toggle="popover"
+                                    data-bs-html="true" data-bs-trigger="focus" data-bs-placement="left"
+                                    data-bs-custom-class="popover-sm"
+                                    data-bs-content='
+                    <div class="d-flex align-items-start position-relative">
+                      <img src="/img/home/fashion/v2/hero/hotspot02.png" width="64" alt="Image">
+                      <div class="nav flex-column pt-2 ps-2 ms-1">
+                        <a class="nav-link hover-effect-underline stretched-link p-0 mb-2" href="{{ route('second', ['shop', 'product-fashion']) }}">White cotton blouset</a>
+                        <div class="h6 mb-0">38.50</div>
+                      </div>
+                    </div>
+                  '
+                                    tabindex="1" aria-label="Hotspot">
+                                    <i class="ci-plus fs-base"></i>
+                                </a>
+                                <a class="btn btn-icon btn-light rounded-circle shadow position-absolute z-2"
+                                    href="#!" style="top: 81%; left: 40%" data-bs-toggle="popover"
+                                    data-bs-html="true" data-bs-trigger="focus" data-bs-placement="left"
+                                    data-bs-custom-class="popover-sm"
+                                    data-bs-content='
+                    <div class="d-flex align-items-start position-relative">
+                      <img src="/img/home/fashion/v2/hero/hotspot03.png" width="64" alt="Image">
+                      <div class="nav flex-column pt-2 ps-2 ms-1">
+                        <a class="nav-link hover-effect-underline stretched-link p-0 mb-2" href="{{ route('second', ['shop', 'product-fashion']) }}">Brown corduroy pants</a>
+                        <div class="h6 mb-0">64.99</div>
+                      </div>
+                    </div>
+                  '
+                                    tabindex="1" aria-label="Hotspot">
+                                    <i class="ci-plus fs-base"></i>
+                                </a>
+                                <div class="ratio" style="--cz-aspect-ratio: calc(648 / 636 * 100%)">
+                                    <img src="/img/home/fashion/v2/hero/image.png" alt="Image">
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <span class="position-absolute top-0 start-0 w-100 h-100 d-none-dark rtl-flip"
+                    style="background: linear-gradient(102deg, #dad4ec 0%, #f3e7e9 80.43%)"></span>
+                <span class="position-absolute top-0 start-0 w-100 h-100 d-none d-block-dark rtl-flip"
+                    style="background: linear-gradient(102deg, #2a2735 0%, #312a2b 80.43%)"></span>
+            </div>
+        </section>
+
+
+        <!-- Categories that turns into carousel on screen < 992px (lg breackpoint) -->
+        <section class="container pt-4">
+            <div class="swiper"
+                data-swiper='{
+          "slidesPerView": 1,
+          "spaceBetween": 24,
+          "pagination": {
+            "el": ".swiper-pagination",
+            "clickable": true
+          },
+          "breakpoints": {
+            "680": {
+              "slidesPerView": 2
+            },
+            "992": {
+              "slidesPerView": 3
+            }
+          }
+        }'>
+                <div class="swiper-wrapper">
+
+                    <!-- Category -->
+                    <div class="swiper-slide">
+                        <div class="hover-effect-opacity position-relative">
+                            <div class="d-flex justify-content-between position-relative z-2 ps-2 ps-xl-3">
+                                <div class="d-flex flex-column min-w-0 p-3">
+                                    <h2 class="h5 text-nowrap pt-2 pt-xl-3">For men</h2>
+                                    <ul class="nav flex-column gap-2 mt-n1">
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sports suits</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-fashion']) }}">Trousers</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-fashion']) }}">Jackets and coats</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-fashion']) }}">Shirts</a>
+                                        </li>
+                                    </ul>
+                                    <div class="nav hover-effect-target opacity-0 pb-2 pb-xl-3 mt-auto">
+                                        <a class="nav-link animate-underline text-body-emphasis text-nowrap p-0"
+                                            href="{{ route('second', ['shop', 'catalog-fashion']) }}">
+                                            <span class="animate-target">Shop now</span>
+                                            <i class="ci-arrow-up-right fs-base ms-1"></i>
+                                        </a>
+                                    </div>
+                                </div>
+                                <div class="ratio w-100 align-self-end"
+                                    style="max-width: 220px; --cz-aspect-ratio: calc(305 / 220 * 100%)">
+                                    <img src="/img/home/fashion/v2/categories/01.png" alt="Image">
+                                </div>
+                            </div>
+                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded-5 d-none-dark"
+                                style="background: linear-gradient(124deg, #e2daec -29.7%, #e4eefd 65.5%)"></span>
+                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded-5 d-none d-block-dark"
+                                style="background: linear-gradient(124deg, #37343b -29.7%, #222a36 65.5%)"></span>
+                        </div>
+                    </div>
+
+                    <!-- Category -->
+                    <div class="swiper-slide">
+                        <div class="hover-effect-opacity position-relative">
+                            <div class="d-flex justify-content-between position-relative z-2 ps-2 ps-xl-3">
+                                <div class="d-flex flex-column min-w-0 p-3">
+                                    <h2 class="h5 text-nowrap pt-2 pt-xl-3">For women</h2>
+                                    <ul class="nav flex-column gap-2 mt-n1">
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-fashion']) }}">Dresses</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-fashion']) }}">Pants and jeans</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-fashion']) }}">Shirts and blouses</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sweatshirts</a>
+                                        </li>
+                                    </ul>
+                                    <div class="nav hover-effect-target opacity-0 pb-2 pb-xl-3 mt-auto">
+                                        <a class="nav-link animate-underline text-body-emphasis text-nowrap p-0"
+                                            href="{{ route('second', ['shop', 'catalog-fashion']) }}">
+                                            <span class="animate-target">Shop now</span>
+                                            <i class="ci-arrow-up-right fs-base ms-1"></i>
+                                        </a>
+                                    </div>
+                                </div>
+                                <div class="ratio w-100 align-self-end rtl-flip"
+                                    style="max-width: 220px; --cz-aspect-ratio: calc(305 / 220 * 100%)">
+                                    <img src="/img/home/fashion/v2/categories/02.png" alt="Image">
+                                </div>
+                            </div>
+                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded-5 d-none-dark"
+                                style="background: linear-gradient(119deg, #e9e0eb 0%, #f8eff1 52.24%)"></span>
+                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded-5 d-none d-block-dark"
+                                style="background: linear-gradient(119deg, #2f2c3a 0%, #372e2f 52.24%)"></span>
+                        </div>
+                    </div>
+
+                    <!-- Category -->
+                    <div class="swiper-slide">
+                        <div class="hover-effect-opacity position-relative">
+                            <div class="d-flex justify-content-between position-relative z-2 ps-2 ps-xl-3">
+                                <div class="d-flex flex-column min-w-0 p-3">
+                                    <h2 class="h5 text-nowrap pt-2 pt-xl-3">Accessories</h2>
+                                    <ul class="nav flex-column gap-2 mt-n1">
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-fashion']) }}">Caps and hats</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sunglasses</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-fashion']) }}">Handbags</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-fashion']) }}">Jewelry</a>
+                                        </li>
+                                    </ul>
+                                    <div class="nav hover-effect-target opacity-0 pb-2 pb-xl-3 mt-auto">
+                                        <a class="nav-link animate-underline text-body-emphasis text-nowrap p-0"
+                                            href="{{ route('second', ['shop', 'catalog-fashion']) }}">
+                                            <span class="animate-target">Shop now</span>
+                                            <i class="ci-arrow-up-right fs-base ms-1"></i>
+                                        </a>
+                                    </div>
+                                </div>
+                                <div class="ratio w-100 align-self-end rtl-flip"
+                                    style="max-width: 220px; --cz-aspect-ratio: calc(305 / 220 * 100%)">
+                                    <img src="/img/home/fashion/v2/categories/03.png" alt="Image">
+                                </div>
+                            </div>
+                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded-5 d-none-dark"
+                                style="background: linear-gradient(118deg, #e9e8e8 0%, #e2ecea 51.13%)"></span>
+                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded-5 d-none d-block-dark"
+                                style="background: linear-gradient(118deg, #323232 0%, #252928 51.13%)"></span>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Pagination (Bullets) -->
+                <div class="swiper-pagination position-static mt-3 mt-sm-4"></div>
+            </div>
+        </section>
+
+
+        <!-- Featured products -->
+        <section class="container pt-5 mt-2 mt-sm-3 mt-lg-4 mt-xl-5">
+            <h2 class="text-center pb-2 pb-sm-3">This week's highlights</h2>
+
+            <!-- Nav pills -->
+            <div class="row g-0 overflow-x-auto pb-2 pb-sm-3 mb-3">
+                <div class="col-auto pb-1 pb-sm-0 mx-auto">
+                    <ul class="nav nav-pills flex-nowrap text-nowrap">
+                        <li class="nav-item">
+                            <a class="nav-link active" aria-current="page" href="#!">Best sellers</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="#!">New arrivals</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="#!">Sale items</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="#!">Top rated</a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+
+            <!-- Products grid -->
+            <div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 gy-4 gy-md-5">
+
+                <!-- Item -->
+                <div class="col mb-2 mb-sm-3 mb-md-0">
+                    <div class="animate-underline hover-effect-opacity">
+                        <div class="position-relative mb-3">
+                            <span
+                                class="badge text-bg-danger position-absolute top-0 start-0 z-2 mt-2 mt-sm-3 ms-2 ms-sm-3">Sale</span>
+                            <button type="button"
+                                class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                aria-label="Add to Wishlist">
+                                <i class="ci-heart animate-target"></i>
+                            </button>
+                            <a class="d-flex bg-body-tertiary rounded p-3" href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                <div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
+                                    <img src="/img/shop/fashion/01.png" alt="Image">
+                                </div>
+                            </a>
+                            <div
+                                class="hover-effect-target position-absolute start-0 bottom-0 w-100 z-2 opacity-0 pb-2 pb-sm-3 px-2 px-sm-3">
+                                <div
+                                    class="d-flex align-items-center justify-content-center gap-2 gap-xl-3 bg-body rounded-2 p-2">
+                                    <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">XS</span>
+                                    <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">S</span>
+                                    <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">M</span>
+                                    <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">L</span>
+                                    <div class="nav">
+                                        <a class="nav-link fs-xs text-body-tertiary py-1 px-2"
+                                            href="{{ route('second', ['shop', 'product-fashion']) }}">+3</a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="nav mb-2">
+                            <a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
+                                href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                <span class="text-truncate">Denim midi skirt with pockets</span>
+                            </a>
+                        </div>
+                        <div class="h6 mb-2">$126.50 <del class="fs-sm fw-normal text-body-tertiary">$156.00</del></div>
+                        <div class="position-relative">
+                            <div class="hover-effect-target fs-xs text-body-secondary opacity-100">+1 color</div>
+                            <div class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
+                                <input type="radio" class="btn-check" name="colors-1" id="color-1-1" checked>
+                                <label for="color-1-1" class="btn btn-color fs-base" style="color: #284971">
+                                    <span class="visually-hidden">Dark denim</span>
+                                </label>
+                                <input type="radio" class="btn-check" name="colors-1" id="color-1-2">
+                                <label for="color-1-2" class="btn btn-color fs-base" style="color: #8b9bc4">
+                                    <span class="visually-hidden">Light denim</span>
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Item -->
+                <div class="col mb-2 mb-sm-3 mb-md-0">
+                    <div class="animate-underline hover-effect-opacity">
+                        <div class="position-relative mb-3">
+                            <button type="button"
+                                class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                aria-label="Add to Wishlist">
+                                <i class="ci-heart animate-target"></i>
+                            </button>
+                            <a class="d-flex bg-body-tertiary rounded p-3" href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                <div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
+                                    <img src="/img/shop/fashion/05.png" alt="Image">
+                                </div>
+                            </a>
+                        </div>
+                        <div class="nav mb-2">
+                            <a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
+                                href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                <span class="text-truncate">Polarized sunglasses for men</span>
+                            </a>
+                        </div>
+                        <div class="h6 mb-2">$112.00</div>
+                        <div class="position-relative">
+                            <div class="hover-effect-target fs-xs text-body-secondary opacity-100">+2 colors</div>
+                            <div class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
+                                <input type="radio" class="btn-check" name="colors-5" id="color-5-1" checked>
+                                <label for="color-5-1" class="btn btn-color fs-base" style="color: #8cc4ac">
+                                    <span class="visually-hidden">Green</span>
+                                </label>
+                                <input type="radio" class="btn-check" name="colors-5" id="color-5-2">
+                                <label for="color-5-2" class="btn btn-color fs-base" style="color: #8cb7c4">
+                                    <span class="visually-hidden">Blue</span>
+                                </label>
+                                <input type="radio" class="btn-check" name="colors-5" id="color-5-3">
+                                <label for="color-5-3" class="btn btn-color fs-base" style="color: #ccb782">
+                                    <span class="visually-hidden">Brown</span>
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Item -->
+                <div class="col mb-2 mb-sm-3 mb-md-0">
+                    <div class="animate-underline hover-effect-opacity">
+                        <div class="position-relative mb-3">
+                            <button type="button"
+                                class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                aria-label="Add to Wishlist">
+                                <i class="ci-heart animate-target"></i>
+                            </button>
+                            <a class="d-flex bg-body-tertiary rounded p-3" href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                <div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
+                                    <img src="/img/shop/fashion/02.png" alt="Image">
+                                </div>
+                            </a>
+                            <div
+                                class="hover-effect-target position-absolute start-0 bottom-0 w-100 z-2 opacity-0 pb-2 pb-sm-3 px-2 px-sm-3">
+                                <div
+                                    class="d-flex align-items-center justify-content-center gap-2 gap-xl-3 bg-body rounded-2 p-2">
+                                    <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">S</span>
+                                    <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">M</span>
+                                    <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">L</span>
+                                    <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">XL</span>
+                                    <div class="nav">
+                                        <a class="nav-link fs-xs text-body-tertiary py-1 px-2"
+                                            href="{{ route('second', ['shop', 'product-fashion']) }}">+1</a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="nav mb-2">
+                            <a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
+                                href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                <span class="text-truncate">Cotton lace blouse with necklace</span>
+                            </a>
+                        </div>
+                        <div class="h6 mb-2">$54.00</div>
+                        <div class="position-relative">
+                            <div class="hover-effect-target fs-xs text-body-secondary opacity-100">+2 colors</div>
+                            <div class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
+                                <input type="radio" class="btn-check" name="colors-2" id="color-2-1" checked>
+                                <label for="color-2-1" class="btn btn-color fs-base" style="color: #dcb1b1">
+                                    <span class="visually-hidden">Pink</span>
+                                </label>
+                                <input type="radio" class="btn-check" name="colors-2" id="color-2-2">
+                                <label for="color-2-2" class="btn btn-color fs-base" style="color: #ced6f0">
+                                    <span class="visually-hidden">Blue</span>
+                                </label>
+                                <input type="radio" class="btn-check" name="colors-2" id="color-2-3">
+                                <label for="color-2-3" class="btn btn-color fs-base" style="color: #e1e0cf">
+                                    <span class="visually-hidden">Mustard</span>
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Item -->
+                <div class="col mb-2 mb-sm-3 mb-md-0">
+                    <div class="animate-underline hover-effect-opacity">
+                        <div class="position-relative mb-3">
+                            <button type="button"
+                                class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                aria-label="Add to Wishlist">
+                                <i class="ci-heart animate-target"></i>
+                            </button>
+                            <a class="d-flex bg-body-tertiary rounded p-3" href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                <div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
+                                    <img src="/img/shop/fashion/04.png" alt="Image">
+                                </div>
+                            </a>
+                        </div>
+                        <div class="nav mb-2">
+                            <a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
+                                href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                <span class="text-truncate">Knitted bag with a wooden handle</span>
+                            </a>
+                        </div>
+                        <div class="h6 mb-2">$105.00</div>
+                        <div class="position-relative">
+                            <div class="hover-effect-target fs-xs text-body-secondary opacity-100">+1 color</div>
+                            <div class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
+                                <input type="radio" class="btn-check" name="colors-4" id="color-4-1" checked>
+                                <label for="color-4-1" class="btn btn-color fs-base" style="color: #e7ddb4">
+                                    <span class="visually-hidden">Beige</span>
+                                </label>
+                                <input type="radio" class="btn-check" name="colors-4" id="color-4-2">
+                                <label for="color-4-2" class="btn btn-color fs-base" style="color: #8b9bc4">
+                                    <span class="visually-hidden">Blue</span>
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Banner -->
+                <div class="col-12 col-md-8 col-lg-6 mb-2 mb-sm-3 mb-md-0">
+                    <div class="position-relative bg-body-tertiary text-center rounded-4 p-4 p-sm-5 py-md-4 py-xl-5">
+                        <p class="fs-xs text-body-secondary mb-1">Sweatshirts</p>
+                        <h2 class="h4 mb-4">Colors for your mood</h2>
+                        <div class="swiper user-select-none mb-4"
+                            data-swiper='{
+                "allowTouchMove": false,
+                "loop": true,
+                "effect": "fade",
+                "autoplay": {
+                  "delay": 1500,
+                  "disableOnInteraction": false
+                }
+              }'
+                            style="max-width: 342px">
+                            <div class="swiper-wrapper">
+                                <div class="swiper-slide">
+                                    <div class="ratio" style="--cz-aspect-ratio: calc(230 / 342 * 100%)">
+                                        <img src="/img/shop/fashion/banner01.png" alt="Image">
+                                    </div>
+                                </div>
+                                <div class="swiper-slide">
+                                    <div class="ratio" style="--cz-aspect-ratio: calc(230 / 342 * 100%)">
+                                        <img src="/img/shop/fashion/banner02.png" alt="Image">
+                                    </div>
+                                </div>
+                                <div class="swiper-slide">
+                                    <div class="ratio" style="--cz-aspect-ratio: calc(230 / 342 * 100%)">
+                                        <img src="/img/shop/fashion/banner03.png" alt="Image">
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <a class="btn btn-sm btn-dark stretched-link" href="{{ route('second', ['shop', 'product-fashion']) }}">Shop now</a>
+                    </div>
+                </div>
+
+                <!-- Item -->
+                <div class="col mb-2 mb-sm-3 mb-md-0">
+                    <div class="animate-underline hover-effect-opacity">
+                        <div class="position-relative mb-3">
+                            <button type="button"
+                                class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                aria-label="Add to Wishlist">
+                                <i class="ci-heart animate-target"></i>
+                            </button>
+                            <a class="d-flex bg-body-tertiary rounded p-3" href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                <div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
+                                    <img src="/img/shop/fashion/03.png" alt="Image">
+                                </div>
+                            </a>
+                            <div
+                                class="hover-effect-target position-absolute start-0 bottom-0 w-100 z-2 opacity-0 pb-2 pb-sm-3 px-2 px-sm-3">
+                                <div
+                                    class="d-flex align-items-center justify-content-center gap-2 gap-xl-3 bg-body rounded-2 p-2">
+                                    <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">6</span>
+                                    <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">6.5</span>
+                                    <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">7</span>
+                                    <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">7.5</span>
+                                    <div class="nav">
+                                        <a class="nav-link fs-xs text-body-tertiary py-1 px-2"
+                                            href="{{ route('second', ['shop', 'product-fashion']) }}">+4</a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="nav mb-2">
+                            <a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
+                                href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                <span class="text-truncate">Sneakers with a massive sole</span>
+                            </a>
+                        </div>
+                        <div class="h6 mb-2">$86.50</div>
+                        <div class="position-relative">
+                            <div class="hover-effect-target fs-xs text-body-secondary opacity-100">+1 color</div>
+                            <div class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
+                                <input type="radio" class="btn-check" name="colors-3" id="color-3-1" checked>
+                                <label for="color-3-1" class="btn btn-color fs-base" style="color: #e0e5eb">
+                                    <span class="visually-hidden">White</span>
+                                </label>
+                                <input type="radio" class="btn-check" name="colors-3" id="color-3-2">
+                                <label for="color-3-2" class="btn btn-color fs-base" style="color: #364254">
+                                    <span class="visually-hidden">Black</span>
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Item -->
+                <div class="col mb-2 mb-sm-3 mb-md-0">
+                    <div class="animate-underline hover-effect-opacity">
+                        <div class="position-relative mb-3">
+                            <button type="button"
+                                class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                aria-label="Add to Wishlist">
+                                <i class="ci-heart animate-target"></i>
+                            </button>
+                            <a class="d-flex bg-body-tertiary rounded p-3" href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                <div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
+                                    <img src="/img/shop/fashion/06.png" alt="Image">
+                                </div>
+                            </a>
+                            <div
+                                class="hover-effect-target position-absolute start-0 bottom-0 w-100 z-2 opacity-0 pb-2 pb-sm-3 px-2 px-sm-3">
+                                <div
+                                    class="d-flex align-items-center justify-content-center gap-2 gap-xl-3 bg-body rounded-2 p-2">
+                                    <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">M</span>
+                                    <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">L</span>
+                                    <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">XL</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="nav mb-2">
+                            <a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
+                                href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                <span class="text-truncate">Classic cotton men's shirt</span>
+                            </a>
+                        </div>
+                        <div class="h6 mb-2">$27.00</div>
+                        <div class="position-relative">
+                            <div class="hover-effect-target fs-xs text-body-secondary opacity-100">+3 colors</div>
+                            <div class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
+                                <input type="radio" class="btn-check" name="colors-6" id="color-6-1" checked>
+                                <label for="color-6-1" class="btn btn-color fs-base" style="color: #c1cde7">
+                                    <span class="visually-hidden">Blue</span>
+                                </label>
+                                <input type="radio" class="btn-check" name="colors-6" id="color-6-2">
+                                <label for="color-6-2" class="btn btn-color fs-base" style="color: #526f99">
+                                    <span class="visually-hidden">Dark blue</span>
+                                </label>
+                                <input type="radio" class="btn-check" name="colors-6" id="color-6-3">
+                                <label for="color-6-3" class="btn btn-color fs-base" style="color: #e0e5eb">
+                                    <span class="visually-hidden">White</span>
+                                </label>
+                                <input type="radio" class="btn-check" name="colors-6" id="color-6-4">
+                                <label for="color-6-4" class="btn btn-color fs-base" style="color: #364254">
+                                    <span class="visually-hidden">Black</span>
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Special offers carousel -->
+        <section class="container pt-5 mt-2 mt-sm-3 mt-lg-4 mt-xl-5">
+            <h3 class="text-center pt-xxl-2 pb-2 pb-md-3">Special offers for you</h3>
+            <div class="position-relative px-4 px-md-3 px-lg-4">
+                <div class="row position-relative z-2 justify-content-center">
+
+                    <!-- Products master slider -->
+                    <div
+                        class="col-md-4 col-xl-5 order-md-2 d-flex justify-content-center justify-content-md-end py-4 py-md-3 py-lg-4">
+                        <div class="swiper m-0"
+                            data-swiper='{
+                "spaceBetween": 24,
+                "loop": true,
+                "speed": 400,
+                "controlSlider": ["#previewImages", "#backgrounds"],
+                "pagination": {
+                  "el": "#bullets",
+                  "clickable": true
+                },
+                "navigation": {
+                  "prevEl": "#offerPrev",
+                  "nextEl": "#offerNext"
+                }
+              }'
+                            style="max-width: 416px">
+                            <div class="swiper-wrapper">
+
+                                <!-- Item -->
+                                <div class="swiper-slide h-auto">
+                                    <div class="card animate-underline h-100 rounded-5 border-0">
+                                        <div class="pt-3 px-3">
+                                            <span
+                                                class="badge text-bg-danger position-absolute top-0 start-0 z-2 mt-2 mt-sm-3 ms-2 ms-sm-3">-30%</span>
+                                            <img src="/img/home/fashion/v2/offers-slider/product01.png" alt="Image">
+                                        </div>
+                                        <div class="card-body text-center py-3">
+                                            <div
+                                                class="d-flex justify-content-center min-w-0 fs-sm fw-medium text-dark-emphasis mb-2">
+                                                <span class="animate-target text-truncate">Polarized sunglasses for
+                                                    men</span>
+                                            </div>
+                                            <div class="h6 mb-3">$56.00 <del
+                                                    class="fs-sm fw-normal text-body-tertiary">$80.00</del></div>
+                                            <a class="btn btn-sm btn-dark stretched-link"
+                                                href="{{ route('second', ['shop', 'product-fashion']) }}">Shop now</a>
+                                        </div>
+
+                                        <!-- Replace "demoDate" inside data-countdown-date attribute with the real date, ex: "10/15/2025 12:00:00" -->
+                                        <div class="card-footer d-flex align-items-center justify-content-center bg-transparent border-0 pb-4"
+                                            data-countdown-date="demoDate">
+                                            <div class="btn btn-secondary pe-none px-2">
+                                                <span data-days></span>
+                                                <span>d</span>
+                                            </div>
+                                            <div class="animate-blinking text-body-tertiary fs-lg fw-medium mx-2">:</div>
+                                            <div class="btn btn-secondary pe-none px-2">
+                                                <span data-hours></span>
+                                                <span>h</span>
+                                            </div>
+                                            <div class="animate-blinking text-body-tertiary fs-lg fw-medium mx-2">:</div>
+                                            <div class="btn btn-secondary pe-none px-2">
+                                                <span data-minutes></span>
+                                                <span>m</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <!-- Item -->
+                                <div class="swiper-slide h-auto">
+                                    <div class="card animate-underline h-100 rounded-5 border-0">
+                                        <div class="pt-3 px-3">
+                                            <span
+                                                class="badge text-bg-danger position-absolute top-0 start-0 z-2 mt-2 mt-sm-3 ms-2 ms-sm-3">-17%</span>
+                                            <img src="/img/home/fashion/v2/offers-slider/product02.png" alt="Image">
+                                        </div>
+                                        <div class="card-body text-center py-3">
+                                            <div
+                                                class="d-flex justify-content-center min-w-0 fs-sm fw-medium text-dark-emphasis mb-2">
+                                                <span class="animate-target text-truncate">Fashionalble women fedora
+                                                    hat</span>
+                                            </div>
+                                            <div class="h6 mb-3">$43.00 <del
+                                                    class="fs-sm fw-normal text-body-tertiary">$50.00</del></div>
+                                            <a class="btn btn-sm btn-dark stretched-link"
+                                                href="{{ route('second', ['shop', 'product-fashion']) }}">Shop now</a>
+                                        </div>
+
+                                        <!-- Replace "demoDate" inside data-countdown-date attribute with the real date, ex: "10/15/2025 12:00:00" -->
+                                        <div class="card-footer d-flex align-items-center justify-content-center bg-transparent border-0 pb-4"
+                                            data-countdown-date="demoDate">
+                                            <div class="btn btn-secondary pe-none px-2">
+                                                <span data-days></span>
+                                                <span>d</span>
+                                            </div>
+                                            <div class="animate-blinking text-body-tertiary fs-lg fw-medium mx-2">:</div>
+                                            <div class="btn btn-secondary pe-none px-2">
+                                                <span data-hours></span>
+                                                <span>h</span>
+                                            </div>
+                                            <div class="animate-blinking text-body-tertiary fs-lg fw-medium mx-2">:</div>
+                                            <div class="btn btn-secondary pe-none px-2">
+                                                <span data-minutes></span>
+                                                <span>m</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Slider pagination (bullets) -->
+                    <div class="swiper-pagination position-static d-md-none mt-n3 mb-2" id="bullets"></div>
+
+                    <!-- Preview images (controlled slider) -->
+                    <div class="col-sm-9 col-md-8 col-xl-7 order-md-1 align-self-end">
+                        <div class="swiper user-select-none" id="previewImages"
+                            data-swiper='{
+                "allowTouchMove": false,
+                "loop": true,
+                "effect": "fade",
+                "fadeEffect": {
+                  "crossFade": true
+                }
+              }'>
+                            <div class="swiper-wrapper">
+                                <div class="swiper-slide">
+                                    <div class="ratio" style="--cz-aspect-ratio: calc(542 / 718 * 100%)">
+                                        <img src="/img/home/fashion/v2/offers-slider/preview01.png" alt="Image">
+                                    </div>
+                                </div>
+                                <div class="swiper-slide">
+                                    <div class="ratio" style="--cz-aspect-ratio: calc(542 / 718 * 100%)">
+                                        <img src="/img/home/fashion/v2/offers-slider/preview02.png" alt="Image">
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Backgrounds (controlled slider) -->
+                <div class="swiper position-absolute top-0 start-0 w-100 h-100 user-select-none" id="backgrounds"
+                    data-swiper='{
+            "allowTouchMove": false,
+            "loop": true,
+            "effect": "fade",
+            "fadeEffect": {
+              "crossFade": true
+            }
+          }'>
+                    <div class="swiper-wrapper">
+                        <div class="swiper-slide">
+                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded-5 d-none-dark"
+                                style="background-color: #dceee7"></span>
+                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded-5 d-none d-block-dark"
+                                style="background-color: #1b282c"></span>
+                        </div>
+                        <div class="swiper-slide">
+                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded-5 d-none-dark"
+                                style="background-color: #dddad7"></span>
+                            <span class="position-absolute top-0 start-0 w-100 h-100 rounded-5 d-none d-block-dark"
+                                style="background-color: #272729"></span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Slider prev/next buttons -->
+            <div class="d-none d-md-flex justify-content-center gap-2 pt-3 mt-2 mt-lg-3">
+                <button type="button"
+                    class="btn btn-icon btn-outline-secondary animate-slide-start rounded-circle me-1" id="offerPrev"
+                    aria-label="Prev">
+                    <i class="ci-chevron-left fs-lg animate-target"></i>
+                </button>
+                <button type="button" class="btn btn-icon btn-outline-secondary animate-slide-end rounded-circle"
+                    id="offerNext" aria-label="Next">
+                    <i class="ci-chevron-right fs-lg animate-target"></i>
+                </button>
+            </div>
+        </section>
+
+
+        <!-- Brands -->
+        <section class="container pt-5 mt-2 mt-sm-3 mt-lg-4 mt-xl-5">
+            <h3 class="text-center pb-2 pb-md-3">Shop by brand</h3>
+            <div class="row justify-content-center">
+                <div class="col-sm-10 col-md-12">
+                    <div class="row g-0 border rounded-5 overflow-hidden">
+                        <div class="col-8 col-md-4 d-flex flex-column border-end">
+                            <a class="hover-effect-opacity position-relative d-block text-body border-bottom"
+                                href="#!">
+                                <img class="position-relative z-1 d-none-dark"
+                                    src="/img/home/fashion/v2/brands/zara-light.svg" alt="Zara">
+                                <img class="position-relative z-1 d-none d-block-dark"
+                                    src="/img/home/fashion/v2/brands/zara-dark.svg" alt="Zara">
+                                <span
+                                    class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-body-tertiary opacity-0"></span>
+                            </a>
+                            <a class="hover-effect-opacity position-relative d-block h-100 text-body" href="#!">
+                                <img class="position-relative z-1 d-none-dark"
+                                    src="/img/home/fashion/v2/brands/brooks-light.svg" alt="Brooks">
+                                <img class="position-relative z-1 d-none d-block-dark"
+                                    src="/img/home/fashion/v2/brands/brooks-dark.svg" alt="Brooks">
+                                <span
+                                    class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-body-tertiary opacity-0"></span>
+                            </a>
+                        </div>
+                        <div class="col-4 col-md-2 d-flex">
+                            <div class="d-flex flex-column w-100">
+                                <a class="hover-effect-opacity position-relative d-block border-bottom text-body"
+                                    href="#!">
+                                    <img class="position-relative z-1 d-none-dark"
+                                        src="/img/home/fashion/v2/brands/fila-light.svg" alt="Fila">
+                                    <img class="position-relative z-1 d-none d-block-dark"
+                                        src="/img/home/fashion/v2/brands/fila-dark.svg" alt="Fila">
+                                    <span
+                                        class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-body-tertiary opacity-0"></span>
+                                </a>
+                                <a class="hover-effect-opacity position-relative d-block h-100 text-body"
+                                    href="#!">
+                                    <img class="position-relative z-1 d-none-dark"
+                                        src="/img/home/fashion/v2/brands/adidas-light.svg" alt="Adidas">
+                                    <img class="position-relative z-1 d-none d-block-dark"
+                                        src="/img/home/fashion/v2/brands/adidas-dark.svg" alt="Adidas">
+                                    <span
+                                        class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-body-tertiary opacity-0"></span>
+                                </a>
+                            </div>
+                            <hr class="vr d-none d-md-block m-0">
+                        </div>
+                        <hr class="d-md-none m-0">
+                        <div class="col-8 col-md-4">
+                            <div class="row row-cols-2 g-0 border-bottom border-end">
+                                <div class="col">
+                                    <a class="hover-effect-opacity position-relative d-block text-body" href="#!">
+                                        <img class="position-relative z-1 d-none-dark"
+                                            src="/img/home/fashion/v2/brands/hermes-light.svg" alt="Hermes">
+                                        <img class="position-relative z-1 d-none d-block-dark"
+                                            src="/img/home/fashion/v2/brands/hermes-dark.svg" alt="Hermes">
+                                        <span
+                                            class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-body-tertiary opacity-0"></span>
+                                    </a>
+                                </div>
+                                <div class="col border-start">
+                                    <a class="hover-effect-opacity position-relative d-block h-100 text-body"
+                                        href="#!">
+                                        <img class="position-relative z-1 d-none-dark"
+                                            src="/img/home/fashion/v2/brands/dior-light.svg" alt="Dior">
+                                        <img class="position-relative z-1 d-none d-block-dark"
+                                            src="/img/home/fashion/v2/brands/dior-dark.svg" alt="Dior">
+                                        <span
+                                            class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-body-tertiary opacity-0"></span>
+                                    </a>
+                                </div>
+                            </div>
+                            <a class="hover-effect-opacity position-relative d-block h-100 border-end text-body"
+                                href="#!">
+                                <img class="position-relative z-1 d-none-dark"
+                                    src="/img/home/fashion/v2/brands/newbalance-light.svg" alt="New Balance">
+                                <img class="position-relative z-1 d-none d-block-dark"
+                                    src="/img/home/fashion/v2/brands/newbalance-dark.svg" alt="New Balance">
+                                <span
+                                    class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-body-tertiary opacity-0"></span>
+                            </a>
+                        </div>
+                        <div class="col-4 col-md-2">
+                            <a class="hover-effect-opacity position-relative d-block text-body border-bottom"
+                                href="#!">
+                                <img class="position-relative z-1 d-none-dark"
+                                    src="/img/home/fashion/v2/brands/puma-light.svg" alt="Puma">
+                                <img class="position-relative z-1 d-none d-block-dark"
+                                    src="/img/home/fashion/v2/brands/puma-dark.svg" alt="Puma">
+                                <span
+                                    class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-body-tertiary opacity-0"></span>
+                            </a>
+                            <a class="hover-effect-opacity position-relative d-block text-body" href="#!">
+                                <img class="position-relative z-1 d-none-dark"
+                                    src="/img/home/fashion/v2/brands/hm-light.svg" alt="H & M">
+                                <img class="position-relative z-1 d-none d-block-dark"
+                                    src="/img/home/fashion/v2/brands/hm-dark.svg" alt="H & M">
+                                <span
+                                    class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-body-tertiary opacity-0"></span>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Instagram feed -->
+        <section class="container pt-5 mt-2 mt-sm-3 mt-lg-4 mt-xl-5">
+            <div class="text-center pb-2 pb-md-3">
+                <h2 class="pb-2 mb-1">
+                    <span class="animate-underline">
+                        <a class="animate-target text-dark-emphasis text-decoration-none" href="#!">#cartzilla</a>
+                    </span>
+                </h2>
+                <p>Find more inspiration on our Instagram</p>
+            </div>
+            <div class="overflow-x-auto pb-3 mb-n3" data-simplebar>
+                <div class="d-flex gap-2 gap-md-3 gap-lg-4" style="min-width: 700px">
+                    <a class="hover-effect-scale hover-effect-opacity position-relative w-100 overflow-hidden"
+                        href="#!">
+                        <span
+                            class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
+                        <i
+                            class="ci-instagram hover-effect-target fs-4 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
+                        <div class="hover-effect-target ratio ratio-1x1">
+                            <img src="/img/instagram/01.jpg" alt="Instagram image">
+                        </div>
+                    </a>
+                    <a class="hover-effect-scale hover-effect-opacity position-relative w-100 overflow-hidden"
+                        href="#!">
+                        <span
+                            class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
+                        <i
+                            class="ci-instagram hover-effect-target fs-4 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
+                        <div class="hover-effect-target ratio ratio-1x1">
+                            <img src="/img/instagram/02.jpg" alt="Instagram image">
+                        </div>
+                    </a>
+                    <a class="hover-effect-scale hover-effect-opacity position-relative w-100 overflow-hidden"
+                        href="#!">
+                        <span
+                            class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
+                        <i
+                            class="ci-instagram hover-effect-target fs-4 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
+                        <div class="hover-effect-target ratio ratio-1x1">
+                            <img src="/img/instagram/03.jpg" alt="Instagram image">
+                        </div>
+                    </a>
+                    <a class="hover-effect-scale hover-effect-opacity position-relative w-100 overflow-hidden"
+                        href="#!">
+                        <span
+                            class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
+                        <i
+                            class="ci-instagram hover-effect-target fs-4 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
+                        <div class="hover-effect-target ratio ratio-1x1">
+                            <img src="/img/instagram/04.jpg" alt="Instagram image">
+                        </div>
+                    </a>
+                    <a class="hover-effect-scale hover-effect-opacity position-relative w-100 overflow-hidden"
+                        href="#!">
+                        <span
+                            class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
+                        <i
+                            class="ci-instagram hover-effect-target fs-4 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
+                        <div class="hover-effect-target ratio ratio-1x1">
+                            <img src="/img/instagram/05.jpg" alt="Instagram image">
+                        </div>
+                    </a>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <footer class="footer pt-5 pb-4">
+        <div class="container pt-sm-2 pt-md-3 pt-lg-4">
+            <div class="row pb-5 mb-lg-3">
+
+                <!-- Columns with links that are turned into accordion on screens < 500px wide (sm breakpoint) -->
+                <div class="col-md-8 col-xl-7 pb-2 pb-md-0 mb-4 mb-md-0 mt-n3 mt-sm-0">
+                    <div class="accordion" id="footerLinks">
+                        <div class="row row-cols-1 row-cols-sm-3">
+                            <div class="accordion-item col border-0">
+                                <h6 class="accordion-header" id="categoriesHeading">
+                                    <span class="text-dark-emphasis d-none d-sm-block">Categories</span>
+                                    <button type="button" class="accordion-button collapsed py-3 d-sm-none"
+                                        data-bs-toggle="collapse" data-bs-target="#categoriesLinks"
+                                        aria-expanded="false" aria-controls="categoriesLinks">Categories</button>
+                                </h6>
+                                <div class="accordion-collapse collapse d-sm-block" id="categoriesLinks"
+                                    aria-labelledby="categoriesHeading" data-bs-parent="#footerLinks">
+                                    <ul class="nav flex-column gap-2 pt-sm-3 pb-3 pb-sm-0 mt-n1 mb-1 mb-sm-0">
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">For women</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">For men</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Home clothes</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Accessories</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Sale</a>
+                                        </li>
+                                    </ul>
+                                </div>
+                                <hr class="d-sm-none my-0">
+                            </div>
+                            <div class="accordion-item col border-0">
+                                <h6 class="accordion-header" id="accountHeading">
+                                    <span class="text-dark-emphasis d-none d-sm-block">Account</span>
+                                    <button type="button" class="accordion-button collapsed py-3 d-sm-none"
+                                        data-bs-toggle="collapse" data-bs-target="#accountLinks" aria-expanded="false"
+                                        aria-controls="accountLinks">Account</button>
+                                </h6>
+                                <div class="accordion-collapse collapse d-sm-block" id="accountLinks"
+                                    aria-labelledby="accountHeading" data-bs-parent="#footerLinks">
+                                    <ul class="nav flex-column gap-2 pt-sm-3 pb-3 pb-sm-0 mt-n1 mb-1 mb-sm-0">
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Your account</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Shipping &amp; policies</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Refunds &amp; replacements</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Order tracking</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Delivery info</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Taxes &amp; fees</a>
+                                        </li>
+                                    </ul>
+                                </div>
+                                <hr class="d-sm-none my-0">
+                            </div>
+                            <div class="accordion-item col border-0">
+                                <h6 class="accordion-header" id="customerHeading">
+                                    <span class="text-dark-emphasis d-none d-sm-block">Customer service</span>
+                                    <button type="button" class="accordion-button collapsed py-3 d-sm-none"
+                                        data-bs-toggle="collapse" data-bs-target="#customerLinks"
+                                        aria-expanded="false" aria-controls="customerLinks">Customer service</button>
+                                </h6>
+                                <div class="accordion-collapse collapse d-sm-block" id="customerLinks"
+                                    aria-labelledby="customerHeading" data-bs-parent="#footerLinks">
+                                    <ul class="nav flex-column gap-2 pt-sm-3 pb-3 pb-sm-0 mt-n1 mb-1 mb-sm-0">
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Payment methods</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Money back guarantee</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Refunds &amp; replacements</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Product returns</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Support center</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Shipping</a>
+                                        </li>
+                                    </ul>
+                                </div>
+                                <hr class="d-sm-none my-0">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Subscription -->
+                <div class="col-md-4 offset-xl-1">
+                    <h6 class="mb-4">Join us and stay up to date</h6>
+                    <form class="needs-validation" novalidate>
+                        <div class="form-check form-check-inline">
+                            <input type="checkbox" class="form-check-input" id="check-woman" checked>
+                            <label for="check-woman" class="form-check-label">Woman</label>
+                        </div>
+                        <div class="form-check form-check-inline">
+                            <input type="checkbox" class="form-check-input" id="check-man">
+                            <label for="check-man" class="form-check-label">Man</label>
+                        </div>
+                        <div class="form-check form-check-inline">
+                            <input type="checkbox" class="form-check-input" id="check-sale">
+                            <label for="check-sale" class="form-check-label">Sale</label>
+                        </div>
+                        <div class="position-relative mt-3">
+                            <input type="email" class="form-control form-control-lg bg-image-none text-start"
+                                placeholder="Enter email" aria-label="Your email address" required>
+                            <div class="invalid-tooltip bg-transparent p-0">Please enter you email address!</div>
+                            <button type="submit"
+                                class="btn btn-icon btn-ghost fs-xl btn-secondary border-0 position-absolute top-0 end-0 mt-1 me-1"
+                                aria-label="Submit your email address">
+                                <i class="ci-arrow-up-right"></i>
+                            </button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+
+            <!-- Social account links -->
+            <div class="d-flex justify-content-center justify-content-lg-start gap-2 mt-n2 mt-md-0">
+                <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!" data-bs-toggle="tooltip"
+                    data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-body p-0"></div></div>'
+                    title="YouTube" aria-label="Follow us on YouTube">
+                    <i class="ci-youtube"></i>
+                </a>
+                <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!" data-bs-toggle="tooltip"
+                    data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-body p-0"></div></div>'
+                    title="Facebook" aria-label="Follow us on Facebook">
+                    <i class="ci-facebook"></i>
+                </a>
+                <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!" data-bs-toggle="tooltip"
+                    data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-body p-0"></div></div>'
+                    title="Instagram" aria-label="Follow us on Instagram">
+                    <i class="ci-instagram"></i>
+                </a>
+                <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!" data-bs-toggle="tooltip"
+                    data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-body p-0"></div></div>'
+                    title="Telegram" aria-label="Follow us on Telegram">
+                    <i class="ci-telegram"></i>
+                </a>
+                <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!" data-bs-toggle="tooltip"
+                    data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-body p-0"></div></div>'
+                    title="Pinterest" aria-label="Follow us on Pinterest">
+                    <i class="ci-pinterest"></i>
+                </a>
+            </div>
+
+            <!-- Copyright + Payment methods -->
+            <div class="d-lg-flex align-items-center border-top pt-4 mt-3">
+                <div class="d-flex gap-2 gap-sm-3 justify-content-center ms-lg-auto mb-3 mb-md-4 mb-lg-0 order-lg-2">
+                    <div>
+                        <img src="/img/payment-methods/visa-light-mode.svg" class="d-none-dark" alt="Visa">
+                        <img src="/img/payment-methods/visa-dark-mode.svg" class="d-none d-block-dark" alt="Visa">
+                    </div>
+                    <div>
+                        <img src="/img/payment-methods/paypal-light-mode.svg" class="d-none-dark" alt="PayPal">
+                        <img src="/img/payment-methods/paypal-dark-mode.svg" class="d-none d-block-dark"
+                            alt="PayPal">
+                    </div>
+                    <div>
+                        <img src="/img/payment-methods/mastercard.svg" alt="Mastercard">
+                    </div>
+                    <div>
+                        <img src="/img/payment-methods/google-pay-light-mode.svg" class="d-none-dark"
+                            alt="Google Pay">
+                        <img src="/img/payment-methods/google-pay-dark-mode.svg" class="d-none d-block-dark"
+                            alt="Google Pay">
+                    </div>
+                    <div>
+                        <img src="/img/payment-methods/apple-pay-light-mode.svg" class="d-none-dark" alt="Apple Pay">
+                        <img src="/img/payment-methods/apple-pay-dark-mode.svg" class="d-none d-block-dark"
+                            alt="Apple Pay">
+                    </div>
+                </div>
+                <div class="d-md-flex justify-content-center order-lg-1">
+                    <ul class="nav justify-content-center gap-4 order-md-3 mb-4 mb-md-0">
+                        <li class="animate-underline">
+                            <a class="nav-link fs-xs fw-normal p-0 animate-target" href="#!">Privacy</a>
+                        </li>
+                        <li class="animate-underline">
+                            <a class="nav-link fs-xs fw-normal p-0 animate-target" href="#!">Affiliates</a>
+                        </li>
+                        <li class="animate-underline">
+                            <a class="nav-link fs-xs fw-normal p-0 animate-target" href="#!">Terms of use</a>
+                        </li>
+                    </ul>
+                    <div class="vr text-body-secondary opacity-25 mx-4 d-none d-md-inline-block order-md-2"></div>
+                    <p class="fs-xs text-center text-lg-start mb-0 order-md-1">
+                        &copy; All rights reserved. Made by <span class="animate-underline"><a
+                                class="animate-target text-dark-emphasis text-decoration-none"
+                                href="https://coderthemes.com/" target="_blank" rel="noreferrer">Coderthemes
+                                Studio</a></span>
+                    </p>
+                </div>
+            </div>
+        </div>
+    </footer>
+@endsection
+
+@section('scripts')
+@endsection
diff --git a/resources/views/home/furniture.blade.php b/resources/views/home/furniture.blade.php
new file mode 100644
index 0000000..b03f29a
--- /dev/null
+++ b/resources/views/home/furniture.blade.php
@@ -0,0 +1,1199 @@
+@extends('layouts.landing', ['title' => 'Furniture Store'])
+
+@section('content')
+
+    <div class="offcanvas offcanvas-end pb-sm-2 px-sm-2" id="shoppingCart" tabindex="-1" aria-labelledby="shoppingCartLabel"
+        style="width: 500px">
+        <div class="offcanvas-header py-3 pt-lg-4">
+            <h4 class="offcanvas-title" id="shoppingCartLabel">Shopping cart</h4>
+            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+        </div>
+        <div class="offcanvas-body text-center">
+            <svg class="d-block mx-auto mb-4" xmlns="http://www.w3.org/2000/svg" width="60" viewBox="0 0 29.5 30">
+                <path class="text-body-tertiary"
+                    d="M17.8 4c.4 0 .8-.3.8-.8v-2c0-.4-.3-.8-.8-.8-.4 0-.8.3-.8.8v2c0 .4.3.8.8.8zm3.2.6c.4.2.8 0 1-.4l.4-.9c.2-.4 0-.8-.4-1s-.8 0-1 .4l-.4.9c-.2.4 0 .9.4 1zm-7.5-.4c.2.4.6.6 1 .4s.6-.6.4-1l-.4-.9c-.2-.4-.6-.6-1-.4s-.6.6-.4 1l.4.9z"
+                    fill="currentColor" />
+                <path class="text-body-emphasis"
+                    d="M10.7 24.5c-1.5 0-2.8 1.2-2.8 2.8S9.2 30 10.7 30s2.8-1.2 2.8-2.8-1.2-2.7-2.8-2.7zm0 4c-.7 0-1.2-.6-1.2-1.2s.6-1.2 1.2-1.2 1.2.6 1.2 1.2-.5 1.2-1.2 1.2zm11.1-4c-1.5 0-2.8 1.2-2.8 2.8a2.73 2.73 0 0 0 2.8 2.8 2.73 2.73 0 0 0 2.8-2.8c0-1.6-1.3-2.8-2.8-2.8zm0 4c-.7 0-1.2-.6-1.2-1.2s.6-1.2 1.2-1.2 1.2.6 1.2 1.2-.6 1.2-1.2 1.2zM8.7 18h16c.3 0 .6-.2.7-.5l4-10c.2-.5-.2-1-.7-1H9.3c-.4 0-.8.3-.8.8s.4.7.8.7h18.3l-3.4 8.5H9.3L5.5 1C5.4.7 5.1.5 4.8.5h-4c-.5 0-.8.3-.8.7s.3.8.8.8h3.4l3.7 14.6a3.24 3.24 0 0 0-2.3 3.1C5.5 21.5 7 23 8.7 23h16c.4 0 .8-.3.8-.8s-.3-.8-.8-.8h-16a1.79 1.79 0 0 1-1.8-1.8c0-1 .9-1.6 1.8-1.6z"
+                    fill="currentColor" />
+            </svg>
+            <h6 class="mb-2">Your shopping cart is currently empty!</h6>
+            <p class="fs-sm mb-4">Explore our wide range of products and add items to your cart to proceed with your
+                purchase.</p>
+            <a class="btn btn-dark rounded-pill" href="{{ route('second', ['shop', 'catalog-furniture']) }}">Continue shopping</a>
+        </div>
+    </div>
+
+    @include('layouts.partials/navbar2')
+
+    <main class="content-wrapper">
+
+        <!-- Hero slider -->
+        <section class="bg-body-tertiary min-vh-100 d-flex align-items-center overflow-hidden"
+            style="margin-top: -110px; padding-top: 110px">
+            <div class="container h-100 py-5 my-md-2 my-lg-3 my-xl-4 mb-xxl-5">
+                <h1 class="display-4 text-center mx-auto mb-4" style="max-width: 680px">Everything You Need for a Modern
+                    Interior</h1>
+                <div class="row align-items-center justify-content-center gx-3 gx-sm-4 mb-3 mb-sm-4">
+
+                    <!-- Prev slide preview (controlled slider) -->
+                    <div class="col-lg-1 col-xl-2 d-none d-lg-flex justify-content-end">
+                        <div class="position-relative user-select-none" style="width: 262px">
+                            <span
+                                class="position-absolute top-0 start-0 w-100 h-100 bg-white opacity-50 rounded-circle d-none-dark"></span>
+                            <span
+                                class="position-absolute top-0 start-0 w-100 h-100 bg-white rounded-circle d-none-dark d-none d-block-dark"
+                                style="opacity: .05"></span>
+                            <div class="swiper position-relative z-2 opacity-60 rounded-circle pe-none" id="thumbsPrev"
+                                data-swiper='{
+                  "allowTouchMove": false,
+                  "loop": true,
+                  "effect": "coverflow",
+                  "coverflowEffect": {
+                    "rotate": 0,
+                    "scale": 1.3,
+                    "depth": -200,
+                    "stretch": -100,
+                    "slideShadows": false
+                  }
+                }'>
+                                <div class="swiper-wrapper">
+                                    <div class="swiper-slide">
+                                        <div class="ratio ratio-1x1">
+                                            <img src="/img/home/furniture/hero-slider/th04.png" alt="Thumbnail">
+                                        </div>
+                                    </div>
+                                    <div class="swiper-slide">
+                                        <div class="ratio ratio-1x1">
+                                            <img src="/img/home/furniture/hero-slider/th01.png" alt="Thumbnail">
+                                        </div>
+                                    </div>
+                                    <div class="swiper-slide">
+                                        <div class="ratio ratio-1x1">
+                                            <img src="/img/home/furniture/hero-slider/th02.png" alt="Thumbnail">
+                                        </div>
+                                    </div>
+                                    <div class="swiper-slide">
+                                        <div class="ratio ratio-1x1">
+                                            <img src="/img/home/furniture/hero-slider/th03.png" alt="Thumbnail">
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Prev button -->
+                    <div class="col-auto col-sm-1 order-1 order-lg-2 d-flex align-items-center justify-content-center">
+                        <button type="button"
+                            class="btn-prev btn btn-lg btn-icon btn-outline-secondary rounded-circle animate-slide-start"
+                            aria-label="Prev">
+                            <i class="ci-chevron-left fs-xl animate-target"></i>
+                        </button>
+                    </div>
+
+                    <!-- Main slider -->
+                    <div class="col-sm-10 col-lg-8 col-xl-6 order-3">
+                        <div class="swiper user-select-none rounded-pill"
+                            data-swiper='{
+                "loop": true,
+                "grabCursor": true,
+                "speed": 600,
+                "controlSlider": ["#thumbsPrev", "#thumbsNext", "#captions"],
+                "effect": "coverflow",
+                "coverflowEffect": {
+                  "rotate": 0,
+                  "scale": 1.3,
+                  "depth": -200,
+                  "stretch": -100,
+                  "slideShadows": false
+                },
+                "navigation": {
+                  "prevEl": ".btn-prev",
+                  "nextEl": ".btn-next"
+                }
+              }'>
+                            <div class="swiper-wrapper">
+                                <div class="swiper-slide" data-swiper-binded="#description1">
+                                    <div class="ratio" style="--cz-aspect-ratio: calc(400 / 636 * 100%)">
+                                        <img src="/img/home/furniture/hero-slider/01.png" alt="Image">
+                                    </div>
+                                </div>
+                                <div class="swiper-slide" data-swiper-binded="#description2">
+                                    <div class="ratio" style="--cz-aspect-ratio: calc(400 / 636 * 100%)">
+                                        <img src="/img/home/furniture/hero-slider/02.png" alt="Image">
+                                    </div>
+                                </div>
+                                <div class="swiper-slide" data-swiper-binded="#description3">
+                                    <div class="ratio" style="--cz-aspect-ratio: calc(400 / 636 * 100%)">
+                                        <img src="/img/home/furniture/hero-slider/03.png" alt="Image">
+                                    </div>
+                                </div>
+                                <div class="swiper-slide" data-swiper-binded="#description4">
+                                    <div class="ratio" style="--cz-aspect-ratio: calc(400 / 636 * 100%)">
+                                        <img src="/img/home/furniture/hero-slider/04.png" alt="Image">
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Next button -->
+                    <div
+                        class="col-auto col-sm-1 order-2 order-sm-3 order-lg-4 d-flex align-items-center justify-content-center">
+                        <button type="button"
+                            class="btn-next btn btn-lg btn-icon btn-outline-secondary rounded-circle animate-slide-end"
+                            aria-label="Next">
+                            <i class="ci-chevron-right fs-xl animate-target"></i>
+                        </button>
+                    </div>
+
+                    <!-- Next slide preview (controlled slider) -->
+                    <div class="col-lg-1 col-xl-2 order-lg-5 d-none d-lg-block">
+                        <div class="position-relative user-select-none" style="width: 262px">
+                            <span
+                                class="position-absolute top-0 start-0 w-100 h-100 bg-white opacity-50 rounded-circle d-none-dark"></span>
+                            <span
+                                class="position-absolute top-0 start-0 w-100 h-100 bg-white rounded-circle d-none-dark d-none d-block-dark"
+                                style="opacity: .05"></span>
+                            <div class="swiper position-relative z-2 opacity-60 rounded-circle pe-none" id="thumbsNext"
+                                data-swiper='{
+                  "allowTouchMove": false,
+                  "loop": true,
+                  "effect": "coverflow",
+                  "coverflowEffect": {
+                    "rotate": 0,
+                    "scale": 1.3,
+                    "depth": -200,
+                    "stretch": -100,
+                    "slideShadows": false
+                  }
+                }'>
+                                <div class="swiper-wrapper">
+                                    <div class="swiper-slide">
+                                        <div class="ratio ratio-1x1">
+                                            <img src="/img/home/furniture/hero-slider/th02.png" alt="Thumbnail">
+                                        </div>
+                                    </div>
+                                    <div class="swiper-slide">
+                                        <div class="ratio ratio-1x1">
+                                            <img src="/img/home/furniture/hero-slider/th03.png" alt="Thumbnail">
+                                        </div>
+                                    </div>
+                                    <div class="swiper-slide">
+                                        <div class="ratio ratio-1x1">
+                                            <img src="/img/home/furniture/hero-slider/th04.png" alt="Thumbnail">
+                                        </div>
+                                    </div>
+                                    <div class="swiper-slide">
+                                        <div class="ratio ratio-1x1">
+                                            <img src="/img/home/furniture/hero-slider/th01.png" alt="Thumbnail">
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Linked captions (controlled slider) -->
+                <div class="swiper" id="captions"
+                    data-swiper='{
+            "allowTouchMove": false,
+            "loop": true,
+            "effect": "fade"
+          }'>
+                    <div class="swiper-wrapper">
+                        <div class="swiper-slide bg-body-tertiary text-center">
+                            <h3 class="text-secondary-emphasis fs-base fw-normal mb-2">Navy blue low sofa for relaxation
+                            </h3>
+                            <p class="h4 mb-4">$1,250.00</p>
+                            <a class="btn btn-lg btn-dark rounded-pill" href="{{ route('second', ['shop', 'product-furniture']) }}">
+                                Shop now
+                                <i class="ci-chevron-right fs-lg ms-2 me-n2"></i>
+                            </a>
+                        </div>
+                        <div class="swiper-slide bg-body-tertiary text-center">
+                            <h3 class="text-secondary-emphasis fs-base fw-normal mb-2">Armchair with wooden legs 70x120 cm
+                            </h3>
+                            <p class="h4 mb-4">$269.99</p>
+                            <a class="btn btn-lg btn-dark rounded-pill" href="{{ route('second', ['shop', 'product-furniture']) }}">
+                                Shop now
+                                <i class="ci-chevron-right fs-lg ms-2 me-n2"></i>
+                            </a>
+                        </div>
+                        <div class="swiper-slide bg-body-tertiary text-center">
+                            <h3 class="text-secondary-emphasis fs-base fw-normal mb-2">Bed frame light gray 140x200 cm</h3>
+                            <p class="h4 mb-4">$760.00</p>
+                            <a class="btn btn-lg btn-dark rounded-pill" href="{{ route('second', ['shop', 'product-furniture']) }}">
+                                Shop now
+                                <i class="ci-chevron-right fs-lg ms-2 me-n2"></i>
+                            </a>
+                        </div>
+                        <div class="swiper-slide bg-body-tertiary text-center">
+                            <h3 class="text-secondary-emphasis fs-base fw-normal mb-2">Blue armchair with iron legs</h3>
+                            <p class="h4 mb-4">$220.00</p>
+                            <a class="btn btn-lg btn-dark rounded-pill" href="{{ route('second', ['shop', 'product-furniture']) }}">
+                                Shop now
+                                <i class="ci-chevron-right fs-lg ms-2 me-n2"></i>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Categories -->
+        <section class="container py-5 my-2 my-sm-3 mb-md-2 mt-lg-4 my-xl-5">
+            <div class="overflow-x-auto pt-xxl-3" data-simplebar data-simplebar-auto-hide="false">
+                <div class="row flex-nowrap flex-md-wrap justify-content-md-center g-0 gap-4 gap-md-0">
+
+                    <!-- Category -->
+                    <div class="col col-md-4 col-lg-3 col-xl-2 mb-4">
+                        <div class="category-card w-100 text-center px-1 px-lg-2 px-xxl-3 mx-auto"
+                            style="min-width: 165px">
+                            <div class="category-card-body">
+                                <a class="d-block text-decoration-none" href="{{ route('second', ['shop', 'catalog-furniture']) }}">
+                                    <div class="bg-body-tertiary rounded-pill mb-3 mx-auto" style="max-width: 164px">
+                                        <div class="ratio ratio-1x1">
+                                            <img src="/img/home/furniture/categories/01.png" class="rounded-pill"
+                                                alt="Image">
+                                        </div>
+                                    </div>
+                                    <h3 class="category-card-title h6 text-truncate">Bedroom</h3>
+                                </a>
+                                <ul class="category-card-list nav w-100 flex-column gap-1 pt-3">
+                                    <li class="w-100">
+                                        <a class="nav-link justify-content-center min-w-0 w-100 fw-normal hover-effect-underline p-0"
+                                            href="{{ route('second', ['shop', 'catalog-furniture']) }}">
+                                            <span class="text-truncate">Beds and mattresses</span>
+                                        </a>
+                                    </li>
+                                    <li class="w-100">
+                                        <a class="nav-link justify-content-center min-w-0 w-100 fw-normal hover-effect-underline p-0"
+                                            href="{{ route('second', ['shop', 'catalog-furniture']) }}">
+                                            <span class="text-truncate">Dressing tables</span>
+                                        </a>
+                                    </li>
+                                    <li class="w-100">
+                                        <a class="nav-link justify-content-center min-w-0 w-100 fw-normal hover-effect-underline p-0"
+                                            href="{{ route('second', ['shop', 'catalog-furniture']) }}">
+                                            <span class="text-truncate">Pillowcases</span>
+                                        </a>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Category -->
+                    <div class="col col-md-4 col-lg-3 col-xl-2 mb-4">
+                        <div class="category-card w-100 text-center px-1 px-lg-2 px-xxl-3 mx-auto"
+                            style="min-width: 165px">
+                            <div class="category-card-body">
+                                <a class="d-block text-decoration-none" href="{{ route('second', ['shop', 'catalog-furniture']) }}">
+                                    <div class="bg-body-tertiary rounded-pill mb-3 mx-auto" style="max-width: 164px">
+                                        <div class="ratio ratio-1x1">
+                                            <img src="/img/home/furniture/categories/02.png" class="rounded-pill"
+                                                alt="Image">
+                                        </div>
+                                    </div>
+                                    <h3 class="category-card-title h6 text-truncate">Living room</h3>
+                                </a>
+                                <ul class="category-card-list nav w-100 flex-column gap-1 pt-3">
+                                    <li class="w-100">
+                                        <a class="nav-link justify-content-center min-w-0 w-100 fw-normal hover-effect-underline p-0"
+                                            href="{{ route('second', ['shop', 'catalog-furniture']) }}">
+                                            <span class="text-truncate">Bookcases and storage</span>
+                                        </a>
+                                    </li>
+                                    <li class="w-100">
+                                        <a class="nav-link justify-content-center min-w-0 w-100 fw-normal hover-effect-underline p-0"
+                                            href="{{ route('second', ['shop', 'catalog-furniture']) }}">
+                                            <span class="text-truncate">Coffee tables</span>
+                                        </a>
+                                    </li>
+                                    <li class="w-100">
+                                        <a class="nav-link justify-content-center min-w-0 w-100 fw-normal hover-effect-underline p-0"
+                                            href="{{ route('second', ['shop', 'catalog-furniture']) }}">
+                                            <span class="text-truncate">Cabinets</span>
+                                        </a>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Category -->
+                    <div class="col col-md-4 col-lg-3 col-xl-2 mb-4">
+                        <div class="category-card w-100 text-center px-1 px-lg-2 px-xxl-3 mx-auto"
+                            style="min-width: 165px">
+                            <div class="category-card-body">
+                                <a class="d-block text-decoration-none" href="{{ route('second', ['shop', 'catalog-furniture']) }}">
+                                    <div class="bg-body-tertiary rounded-pill mb-3 mx-auto" style="max-width: 164px">
+                                        <div class="ratio ratio-1x1">
+                                            <img src="/img/home/furniture/categories/03.png" class="rounded-pill"
+                                                alt="Image">
+                                        </div>
+                                    </div>
+                                    <h3 class="category-card-title h6 text-truncate">Bathroom</h3>
+                                </a>
+                                <ul class="category-card-list nav w-100 flex-column gap-1 pt-3">
+                                    <li class="w-100">
+                                        <a class="nav-link justify-content-center min-w-0 w-100 fw-normal hover-effect-underline p-0"
+                                            href="{{ route('second', ['shop', 'catalog-furniture']) }}">
+                                            <span class="text-truncate">Mirrors</span>
+                                        </a>
+                                    </li>
+                                    <li class="w-100">
+                                        <a class="nav-link justify-content-center min-w-0 w-100 fw-normal hover-effect-underline p-0"
+                                            href="{{ route('second', ['shop', 'catalog-furniture']) }}">
+                                            <span class="text-truncate">Bathroom rugs</span>
+                                        </a>
+                                    </li>
+                                    <li class="w-100">
+                                        <a class="nav-link justify-content-center min-w-0 w-100 fw-normal hover-effect-underline p-0"
+                                            href="{{ route('second', ['shop', 'catalog-furniture']) }}">
+                                            <span class="text-truncate">Bathrobes and slippers</span>
+                                        </a>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Category -->
+                    <div class="col col-md-4 col-lg-3 col-xl-2 mb-4">
+                        <div class="category-card w-100 text-center px-1 px-lg-2 px-xxl-3 mx-auto"
+                            style="min-width: 165px">
+                            <div class="category-card-body">
+                                <a class="d-block text-decoration-none" href="{{ route('second', ['shop', 'catalog-furniture']) }}">
+                                    <div class="bg-body-tertiary rounded-pill mb-3 mx-auto" style="max-width: 164px">
+                                        <div class="ratio ratio-1x1">
+                                            <img src="/img/home/furniture/categories/04.png" class="rounded-pill"
+                                                alt="Image">
+                                        </div>
+                                    </div>
+                                    <h3 class="category-card-title h6 text-truncate">Decoration</h3>
+                                </a>
+                                <ul class="category-card-list nav w-100 flex-column gap-1 pt-3">
+                                    <li class="w-100">
+                                        <a class="nav-link justify-content-center min-w-0 w-100 fw-normal hover-effect-underline p-0"
+                                            href="{{ route('second', ['shop', 'catalog-furniture']) }}">
+                                            <span class="text-truncate">Flowerpots</span>
+                                        </a>
+                                    </li>
+                                    <li class="w-100">
+                                        <a class="nav-link justify-content-center min-w-0 w-100 fw-normal hover-effect-underline p-0"
+                                            href="{{ route('second', ['shop', 'catalog-furniture']) }}">
+                                            <span class="text-truncate">Glassware</span>
+                                        </a>
+                                    </li>
+                                    <li class="w-100">
+                                        <a class="nav-link justify-content-center min-w-0 w-100 fw-normal hover-effect-underline p-0"
+                                            href="{{ route('second', ['shop', 'catalog-furniture']) }}">
+                                            <span class="text-truncate">Home fragrance</span>
+                                        </a>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Category -->
+                    <div class="col col-md-4 col-lg-3 col-xl-2 mb-4">
+                        <div class="category-card w-100 text-center px-1 px-lg-2 px-xxl-3 mx-auto"
+                            style="min-width: 165px">
+                            <div class="category-card-body">
+                                <a class="d-block text-decoration-none" href="{{ route('second', ['shop', 'catalog-furniture']) }}">
+                                    <div class="bg-body-tertiary rounded-pill mb-3 mx-auto" style="max-width: 164px">
+                                        <div class="ratio ratio-1x1">
+                                            <img src="/img/home/furniture/categories/05.png" class="rounded-pill"
+                                                alt="Image">
+                                        </div>
+                                    </div>
+                                    <h3 class="category-card-title h6 text-truncate">Office</h3>
+                                </a>
+                                <ul class="category-card-list nav w-100 flex-column gap-1 pt-3">
+                                    <li class="w-100">
+                                        <a class="nav-link justify-content-center min-w-0 w-100 fw-normal hover-effect-underline p-0"
+                                            href="{{ route('second', ['shop', 'catalog-furniture']) }}">
+                                            <span class="text-truncate">Desks and bureaus</span>
+                                        </a>
+                                    </li>
+                                    <li class="w-100">
+                                        <a class="nav-link justify-content-center min-w-0 w-100 fw-normal hover-effect-underline p-0"
+                                            href="{{ route('second', ['shop', 'catalog-furniture']) }}">
+                                            <span class="text-truncate">Office chairs</span>
+                                        </a>
+                                    </li>
+                                    <li class="w-100">
+                                        <a class="nav-link justify-content-center min-w-0 w-100 fw-normal hover-effect-underline p-0"
+                                            href="{{ route('second', ['shop', 'catalog-furniture']) }}">
+                                            <span class="text-truncate">Filing cabinets</span>
+                                        </a>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Category -->
+                    <div class="col col-md-4 col-lg-3 col-xl-2 mb-4">
+                        <div class="category-card w-100 text-center px-1 px-lg-2 px-xxl-3 mx-auto"
+                            style="min-width: 165px">
+                            <div class="category-card-body">
+                                <a class="d-block text-decoration-none" href="{{ route('second', ['shop', 'catalog-furniture']) }}">
+                                    <div class="bg-body-tertiary rounded-pill mb-3 mx-auto" style="max-width: 164px">
+                                        <div class="ratio ratio-1x1">
+                                            <img src="/img/home/furniture/categories/06.png" class="rounded-pill"
+                                                alt="Image">
+                                        </div>
+                                    </div>
+                                    <h3 class="category-card-title h6 text-truncate">Kitchen</h3>
+                                </a>
+                                <ul class="category-card-list nav w-100 flex-column gap-1 pt-3">
+                                    <li class="w-100">
+                                        <a class="nav-link justify-content-center min-w-0 w-100 fw-normal hover-effect-underline p-0"
+                                            href="{{ route('second', ['shop', 'catalog-furniture']) }}">
+                                            <span class="text-truncate">Cupboards</span>
+                                        </a>
+                                    </li>
+                                    <li class="w-100">
+                                        <a class="nav-link justify-content-center min-w-0 w-100 fw-normal hover-effect-underline p-0"
+                                            href="{{ route('second', ['shop', 'catalog-furniture']) }}">
+                                            <span class="text-truncate">Chest of drawers</span>
+                                        </a>
+                                    </li>
+                                    <li class="w-100">
+                                        <a class="nav-link justify-content-center min-w-0 w-100 fw-normal hover-effect-underline p-0"
+                                            href="{{ route('second', ['shop', 'catalog-furniture']) }}">
+                                            <span class="text-truncate">Dining tables</span>
+                                        </a>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Popular products carousel -->
+        <section class="container pb-5 mt-md-n2 mb-2 mb-sm-3 mb-md-4 mb-xl-5">
+
+            <!-- Heading -->
+            <div class="d-flex align-items-center justify-content-between border-bottom pb-3 pb-md-4">
+                <h2 class="h3 mb-0">Popular products</h2>
+                <div class="nav ms-3">
+                    <a class="nav-link animate-underline px-0 py-2" href="{{ route('second', ['shop', 'catalog-furniture']) }}">
+                        <span class="animate-target">View all</span>
+                        <i class="ci-chevron-right fs-base ms-1"></i>
+                    </a>
+                </div>
+            </div>
+
+            <!-- Product carousel -->
+            <div class="position-relative pb-xxl-3">
+
+                <!-- External slider prev/next buttons visible on screens > 500px wide (sm breakpoint) -->
+                <button type="button"
+                    class="popular-prev btn btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-start position-absolute top-50 start-0 z-2 translate-middle mt-n5 d-none d-sm-inline-flex"
+                    aria-label="Prev">
+                    <i class="ci-chevron-left fs-lg animate-target"></i>
+                </button>
+                <button type="button"
+                    class="popular-next btn btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-end position-absolute top-50 start-100 z-2 translate-middle mt-n5 d-none d-sm-inline-flex"
+                    aria-label="Next">
+                    <i class="ci-chevron-right fs-lg animate-target"></i>
+                </button>
+
+                <!-- Slider -->
+                <div class="swiper pt-3 pt-sm-4"
+                    data-swiper='{
+            "slidesPerView": 2,
+            "spaceBetween": 24,
+            "loop": true,
+            "navigation": {
+              "prevEl": ".popular-prev",
+              "nextEl": ".popular-next"
+            },
+            "breakpoints": {
+              "768": {
+                "slidesPerView": 3
+              },
+              "992": {
+                "slidesPerView": 4
+              }
+            }
+          }'>
+                    <div class="swiper-wrapper">
+
+                        <!-- Item -->
+                        <div class="swiper-slide">
+                            <div class="animate-underline">
+                                <a class="hover-effect-opacity ratio ratio-1x1 d-block mb-3"
+                                    href="{{ route('second', ['shop', 'product-furniture']) }}">
+                                    <img src="/img/shop/furniture/04.png" class="hover-effect-target opacity-100"
+                                        alt="Product">
+                                    <img src="/img/shop/furniture/04-hover.jpg"
+                                        class="position-absolute top-0 start-0 hover-effect-target opacity-0 rounded-4"
+                                        alt="Room">
+                                </a>
+                                <div class="d-flex gap-2 mb-3">
+                                    <input type="radio" class="btn-check" name="colors-4" id="color-4-1" checked>
+                                    <label for="color-4-1" class="btn btn-color fs-base" style="color: #384043">
+                                        <span class="visually-hidden">Dark gray</span>
+                                    </label>
+                                    <input type="radio" class="btn-check" name="colors-4" id="color-4-2">
+                                    <label for="color-4-2" class="btn btn-color fs-base" style="color: #bdc5da">
+                                        <span class="visually-hidden">Light gray</span>
+                                    </label>
+                                    <input type="radio" class="btn-check" name="colors-4" id="color-4-3">
+                                    <label for="color-4-3" class="btn btn-color fs-base" style="color: #526f99">
+                                        <span class="visually-hidden">Bluish gray</span>
+                                    </label>
+                                </div>
+                                <h3 class="mb-2">
+                                    <a class="d-block fs-sm fw-medium text-truncate" href="{{ route('second', ['shop', 'product-furniture']) }}">
+                                        <span class="animate-target">Bed frame light gray 140x200 cm</span>
+                                    </a>
+                                </h3>
+                                <div class="h6">$760.00</div>
+                                <div class="d-flex gap-2">
+                                    <button type="button" class="btn btn-dark w-100 rounded-pill px-3">Add to
+                                        cart</button>
+                                    <button type="button" class="btn btn-icon btn-secondary rounded-circle animate-pulse"
+                                        aria-label="Add to wishlist">
+                                        <i class="ci-heart fs-base animate-target"></i>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Item -->
+                        <div class="swiper-slide">
+                            <div class="animate-underline">
+                                <a class="hover-effect-opacity ratio ratio-1x1 d-block mb-3"
+                                    href="{{ route('second', ['shop', 'product-furniture']) }}">
+                                    <img src="/img/shop/furniture/05.png" class="hover-effect-target opacity-100"
+                                        alt="Product">
+                                    <img src="/img/shop/furniture/05-hover.jpg"
+                                        class="position-absolute top-0 start-0 hover-effect-target opacity-0 rounded-4"
+                                        alt="Room">
+                                </a>
+                                <div class="d-flex gap-2 mb-3">
+                                    <input type="radio" class="btn-check" name="colors-5" id="color-5-1" checked>
+                                    <label for="color-5-1" class="btn btn-color fs-base" style="color: #3a94b5">
+                                        <span class="visually-hidden">Blue</span>
+                                    </label>
+                                    <input type="radio" class="btn-check" name="colors-5" id="color-5-2">
+                                    <label for="color-5-2" class="btn btn-color fs-base" style="color: #777d7E">
+                                        <span class="visually-hidden">Gray</span>
+                                    </label>
+                                </div>
+                                <h3 class="mb-2">
+                                    <a class="d-block fs-sm fw-medium text-truncate" href="{{ route('second', ['shop', 'product-furniture']) }}">
+                                        <span class="animate-target">Blue armchair with iron legs</span>
+                                    </a>
+                                </h3>
+                                <div class="h6">$220.00</div>
+                                <div class="d-flex gap-2">
+                                    <button type="button" class="btn btn-dark w-100 rounded-pill px-3">Add to
+                                        cart</button>
+                                    <button type="button" class="btn btn-icon btn-secondary rounded-circle animate-pulse"
+                                        aria-label="Add to wishlist">
+                                        <i class="ci-heart fs-base animate-target"></i>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Item -->
+                        <div class="swiper-slide">
+                            <div class="animate-underline">
+                                <a class="hover-effect-opacity ratio ratio-1x1 d-block mb-3"
+                                    href="{{ route('second', ['shop', 'product-furniture']) }}">
+                                    <div class="position-absolute top-0 start-0 z-2 mt-2 mt-sm-3 ms-2 ms-sm-3">
+                                        <span class="badge text-bg-danger">-13%</span>
+                                    </div>
+                                    <img src="/img/shop/furniture/06.png" class="hover-effect-target opacity-100"
+                                        alt="Product">
+                                    <img src="/img/shop/furniture/06-hover.jpg"
+                                        class="position-absolute top-0 start-0 hover-effect-target opacity-0 rounded-4"
+                                        alt="Room">
+                                </a>
+                                <div class="d-flex gap-2 mb-3">
+                                    <input type="radio" class="btn-check" name="colors-6" id="color-6-1" checked>
+                                    <label for="color-6-1" class="btn btn-color fs-base" style="color: #bdaB9e">
+                                        <span class="visually-hidden">Beige</span>
+                                    </label>
+                                    <input type="radio" class="btn-check" name="colors-6" id="color-6-2">
+                                    <label for="color-6-2" class="btn btn-color fs-base" style="color: #d65c46">
+                                        <span class="visually-hidden">Terracotta</span>
+                                    </label>
+                                    <input type="radio" class="btn-check" name="colors-6" id="color-6-3">
+                                    <label for="color-6-3" class="btn btn-color fs-base" style="color: #e0e5eb">
+                                        <span class="visually-hidden">White</span>
+                                    </label>
+                                </div>
+                                <h3 class="mb-2">
+                                    <a class="d-block fs-sm fw-medium text-truncate" href="{{ route('second', ['shop', 'product-furniture']) }}">
+                                        <span class="animate-target">Loft-style lamp 120x80 cm</span>
+                                    </a>
+                                </h3>
+                                <div class="h6">$140.00 <del class="fs-sm fw-normal text-body-tertiary">$160.00</del>
+                                </div>
+                                <div class="d-flex gap-2">
+                                    <button type="button" class="btn btn-dark w-100 rounded-pill px-3">Add to
+                                        cart</button>
+                                    <button type="button" class="btn btn-icon btn-secondary rounded-circle animate-pulse"
+                                        aria-label="Add to wishlist">
+                                        <i class="ci-heart fs-base animate-target"></i>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Item -->
+                        <div class="swiper-slide">
+                            <div class="animate-underline">
+                                <a class="hover-effect-opacity ratio ratio-1x1 d-block mb-3"
+                                    href="{{ route('second', ['shop', 'product-furniture']) }}">
+                                    <img src="/img/shop/furniture/08.png" class="hover-effect-target opacity-100"
+                                        alt="Product">
+                                    <img src="/img/shop/furniture/08-hover.jpg"
+                                        class="position-absolute top-0 start-0 hover-effect-target opacity-0 rounded-4"
+                                        alt="Room">
+                                </a>
+                                <div class="d-flex gap-2 mb-3">
+                                    <input type="radio" class="btn-check" name="colors-8" id="color-8-1" checked>
+                                    <label for="color-8-1" class="btn btn-color fs-base" style="color: #305853">
+                                        <span class="visually-hidden">Green</span>
+                                    </label>
+                                    <input type="radio" class="btn-check" name="colors-8" id="color-8-2">
+                                    <label for="color-8-2" class="btn btn-color fs-base" style="color: #34598f">
+                                        <span class="visually-hidden">Blue</span>
+                                    </label>
+                                </div>
+                                <h3 class="mb-2">
+                                    <a class="d-block fs-sm fw-medium text-truncate" href="{{ route('second', ['shop', 'product-furniture']) }}">
+                                        <span class="animate-target">Armchair with wooden legs 60x100 cm</span>
+                                    </a>
+                                </h3>
+                                <div class="h6">$320.50</div>
+                                <div class="d-flex gap-2">
+                                    <button type="button" class="btn btn-dark w-100 rounded-pill px-3">Add to
+                                        cart</button>
+                                    <button type="button" class="btn btn-icon btn-secondary rounded-circle animate-pulse"
+                                        aria-label="Add to wishlist">
+                                        <i class="ci-heart fs-base animate-target"></i>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Item -->
+                        <div class="swiper-slide">
+                            <div class="animate-underline">
+                                <a class="hover-effect-opacity ratio ratio-1x1 d-block mb-3"
+                                    href="{{ route('second', ['shop', 'product-furniture']) }}">
+                                    <img src="/img/shop/furniture/02.png" class="hover-effect-target opacity-100"
+                                        alt="Product">
+                                    <img src="/img/shop/furniture/02-hover.jpg"
+                                        class="position-absolute top-0 start-0 hover-effect-target opacity-0 rounded-4"
+                                        alt="Room">
+                                </a>
+                                <div class="d-flex gap-2 mb-3">
+                                    <input type="radio" class="btn-check" name="colors-2" id="color-2-1" checked>
+                                    <label for="color-2-1" class="btn btn-color fs-base" style="color: #6a6f7b">
+                                        <span class="visually-hidden">Gray</span>
+                                    </label>
+                                    <input type="radio" class="btn-check" name="colors-2" id="color-2-2">
+                                    <label for="color-2-2" class="btn btn-color fs-base" style="color: #373b42">
+                                        <span class="visually-hidden">Dark gray</span>
+                                    </label>
+                                    <input type="radio" class="btn-check" name="colors-2" id="color-2-3">
+                                    <label for="color-2-3" class="btn btn-color fs-base" style="color: #216aae">
+                                        <span class="visually-hidden">Blue</span>
+                                    </label>
+                                    <input type="radio" class="btn-check" name="colors-2" id="color-2-4">
+                                    <label for="color-2-4" class="btn btn-color fs-base" style="color: #187c1c">
+                                        <span class="visually-hidden">Green</span>
+                                    </label>
+                                </div>
+                                <h3 class="mb-2">
+                                    <a class="d-block fs-sm fw-medium text-truncate" href="{{ route('second', ['shop', 'product-furniture']) }}">
+                                        <span class="animate-target">Decorative flowerpot with a plant</span>
+                                    </a>
+                                </h3>
+                                <div class="h6">$107.50</div>
+                                <div class="d-flex gap-2">
+                                    <button type="button" class="btn btn-dark w-100 rounded-pill px-3">Add to
+                                        cart</button>
+                                    <button type="button" class="btn btn-icon btn-secondary rounded-circle animate-pulse"
+                                        aria-label="Add to wishlist">
+                                        <i class="ci-heart fs-base animate-target"></i>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Item -->
+                        <div class="swiper-slide">
+                            <div class="animate-underline">
+                                <a class="hover-effect-opacity ratio ratio-1x1 d-block mb-3"
+                                    href="{{ route('second', ['shop', 'product-furniture']) }}">
+                                    <img src="/img/shop/furniture/07.png" class="hover-effect-target opacity-100"
+                                        alt="Product">
+                                    <img src="/img/shop/furniture/07-hover.jpg"
+                                        class="position-absolute top-0 start-0 hover-effect-target opacity-0 rounded-4"
+                                        alt="Room">
+                                </a>
+                                <div class="d-flex gap-2 mb-3">
+                                    <input type="radio" class="btn-check" name="colors-7" id="color-7-1" checked>
+                                    <label for="color-7-1" class="btn btn-color fs-base" style="color: #71706c">
+                                        <span class="visually-hidden">Dark gray</span>
+                                    </label>
+                                    <input type="radio" class="btn-check" name="colors-7" id="color-7-2">
+                                    <label for="color-7-2" class="btn btn-color fs-base" style="color: #c1c3b8">
+                                        <span class="visually-hidden">Light gray</span>
+                                    </label>
+                                </div>
+                                <h3 class="mb-2">
+                                    <a class="d-block fs-sm fw-medium text-truncate" href="{{ route('second', ['shop', 'product-furniture']) }}">
+                                        <span class="animate-target">Chair with a cushion for the legs</span>
+                                    </a>
+                                </h3>
+                                <div class="h6">$435.00</div>
+                                <div class="d-flex gap-2">
+                                    <button type="button" class="btn btn-dark w-100 rounded-pill px-3">Add to
+                                        cart</button>
+                                    <button type="button" class="btn btn-icon btn-secondary rounded-circle animate-pulse"
+                                        aria-label="Add to wishlist">
+                                        <i class="ci-heart fs-base animate-target"></i>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- External slider prev/next buttons visible on screens < 500px wide (sm breakpoint) -->
+            <div class="d-flex justify-content-center gap-2 mt-1 pt-4 d-sm-none">
+                <button type="button"
+                    class="popular-prev btn btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-start me-1"
+                    aria-label="Prev">
+                    <i class="ci-chevron-left fs-lg animate-target"></i>
+                </button>
+                <button type="button"
+                    class="popular-next btn btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-end"
+                    aria-label="Next">
+                    <i class="ci-chevron-right fs-lg animate-target"></i>
+                </button>
+            </div>
+        </section>
+
+
+        <!-- Gallery -->
+        <section class="container pb-5 mb-sm-2 mb-md-3 mb-lg-4 mb-xl-5">
+            <h2 class="h3 pb-3">Interior design and inspiration</h2>
+
+            <!-- Nav pills -->
+            <nav class="overflow-x-auto mb-3" data-simplebar data-simplebar-auto-hide="false">
+                <ul class="nav nav-pills flex-nowrap text-nowrap pb-3">
+                    <li class="nav-item">
+                        <a class="nav-link active" aria-current="page" href="#!">Living room</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#!">Bedroom</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#!">Kitchen</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#!">Decoration</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#!">Office</a>
+                    </li>
+                </ul>
+            </nav>
+
+            <!-- Grid -->
+            <div class="row g-4 g-sm-3 g-lg-4 mb-xxl-3">
+                <div class="col-sm-5 d-flex flex-column gap-4 gap-sm-3 gap-lg-4">
+
+                    <!-- Item with hotspots -->
+                    <div class="ratio" id="hotspots" style="--cz-aspect-ratio: calc(500 / 526 * 100%)">
+                        <!-- Hide when the direction is set to RTL -->
+                        <a class="btn btn-icon btn-sm btn-light rounded-circle shadow position-absolute z-2 d-none-rtl"
+                            href="#!" style="top: 63.4%; left: 75.8%" data-bs-toggle="popover" data-bs-html="true"
+                            data-bs-trigger="focus" data-bs-placement="top" data-bs-custom-class="popover-sm"
+                            data-bs-content='
+                <div class="d-flex align-items-start position-relative">
+                  <img src="/img/home/furniture/gallery/hotspot01.png" width="64" alt="Image">
+                  <div class="nav flex-column pt-2 ps-2 ms-1">
+                    <a class="nav-link hover-effect-underline stretched-link p-0 mb-2" href="{{ route('second', ['shop', 'product-furniture']) }}">Indigo coushy low sofa</a>
+                    <div class="h6 mb-0">$856.00</div>
+                  </div>
+                </div>
+              '
+                            tabindex="1" aria-label="Hotspot">
+                            <i class="ci-plus fs-sm"></i>
+                        </a>
+                        <!-- Show when the direction is set to RTL -->
+                        <a class="btn btn-icon btn-sm btn-light rounded-circle shadow position-absolute z-2 d-none d-flex-rtl"
+                            href="#!" style="top: 63.4%; right: 18.5%" data-bs-toggle="popover" data-bs-html="true"
+                            data-bs-trigger="focus" data-bs-placement="top" data-bs-custom-class="popover-sm"
+                            data-bs-content='
+                <div class="d-flex align-items-start position-relative">
+                  <img src="/img/home/furniture/gallery/hotspot01.png" width="64" alt="Image">
+                  <div class="nav flex-column pt-2 ps-2 ms-1">
+                    <a class="nav-link hover-effect-underline stretched-link p-0 mb-2" href="{{ route('second', ['shop', 'product-furniture']) }}">Indigo coushy low sofa</a>
+                    <div class="h6 mb-0">$856.00</div>
+                  </div>
+                </div>
+              '
+                            tabindex="1" aria-label="Hotspot">
+                            <i class="ci-plus fs-sm"></i>
+                        </a>
+                        <!-- Hide when the direction is set to RTL -->
+                        <a class="btn btn-icon btn-sm btn-light rounded-circle shadow position-absolute z-2 d-none-rtl"
+                            href="#!" style="top: 60.2%; left: 15.7%" data-bs-toggle="popover" data-bs-html="true"
+                            data-bs-trigger="focus" data-bs-placement="bottom" data-bs-custom-class="popover-sm"
+                            data-bs-content='
+                <div class="d-flex align-items-start position-relative">
+                  <img src="/img/home/furniture/gallery/hotspot02.png" width="64" alt="Image">
+                  <div class="nav flex-column pt-2 ps-2 ms-1">
+                    <a class="nav-link hover-effect-underline stretched-link p-0 mb-2" href="{{ route('second', ['shop', 'product-furniture']) }}">Ergonomic beige armchair</a>
+                    <div class="h6 mb-0">$235.00</div>
+                  </div>
+                </div>
+              '
+                            tabindex="1" aria-label="Hotspot">
+                            <i class="ci-plus fs-sm"></i>
+                        </a>
+                        <!-- Show when the direction is set to RTL -->
+                        <a class="btn btn-icon btn-sm btn-light rounded-circle shadow position-absolute z-2 d-none d-flex-rtl"
+                            href="#!" style="top: 60%; right: 78%" data-bs-toggle="popover" data-bs-html="true"
+                            data-bs-trigger="focus" data-bs-placement="bottom" data-bs-custom-class="popover-sm"
+                            data-bs-content='
+                <div class="d-flex align-items-start position-relative">
+                  <img src="/img/home/furniture/gallery/hotspot02.png" width="64" alt="Image">
+                  <div class="nav flex-column pt-2 ps-2 ms-1">
+                    <a class="nav-link hover-effect-underline stretched-link p-0 mb-2" href="{{ route('second', ['shop', 'product-furniture']) }}">Ergonomic beige armchair</a>
+                    <div class="h6 mb-0">$235.00</div>
+                  </div>
+                </div>
+              '
+                            tabindex="1" aria-label="Hotspot">
+                            <i class="ci-plus fs-sm"></i>
+                        </a>
+                        <a class="btn btn-icon btn-sm btn-light rounded-circle shadow position-absolute z-2 start-50 translate-middle-x"
+                            href="#!" style="top: 25.8%" data-bs-toggle="popover" data-bs-html="true"
+                            data-bs-trigger="focus" data-bs-placement="top" data-bs-custom-class="popover-sm"
+                            data-bs-content='
+                <div class="d-flex align-items-start position-relative">
+                  <img src="/img/home/furniture/gallery/hotspot03.png" width="64" alt="Image">
+                  <div class="nav flex-column pt-2 ps-2 ms-1">
+                    <a class="nav-link hover-effect-underline stretched-link p-0 mb-2" href="{{ route('second', ['shop', 'product-furniture']) }}">Waves modern painting</a>
+                    <div class="h6 mb-0">$74.99</div>
+                  </div>
+                </div>
+              '
+                            tabindex="1" aria-label="Hotspot">
+                            <i class="ci-plus fs-sm"></i>
+                        </a>
+                        <img src="/img/home/furniture/gallery/01.jpg" class="rounded-5" alt="Image">
+                    </div>
+
+                    <!-- Item -->
+                    <div class="ratio" style="--cz-aspect-ratio: calc(529 / 526 * 100%)">
+                        <img src="/img/home/furniture/gallery/02.jpg" class="rounded-5" alt="Image">
+                    </div>
+                </div>
+                <div class="col-sm-7 d-flex flex-column gap-4 gap-sm-3 gap-lg-4">
+
+                    <!-- Item -->
+                    <div class="ratio" style="--cz-aspect-ratio: calc(664 / 746 * 100%)">
+                        <img src="/img/home/furniture/gallery/03.jpg" class="rounded-5" alt="Image">
+                    </div>
+
+                    <!-- Item -->
+                    <div class="ratio" style="--cz-aspect-ratio: calc(365 / 746 * 100%)">
+                        <img src="/img/home/furniture/gallery/04.jpg" class="rounded-5" alt="Image">
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Features -->
+        <section class="container pb-5 mb-sm-2 mb-md-3 mb-lg-4 mb-xl-5">
+            <div class="row row-cols-1 row-cols-md-3 gy-3 gy-sm-4 gx-2 gx-lg-4 mb-xxl-3">
+                <div class="col text-center">
+                    <svg class="d-block text-dark-emphasis mx-auto mb-3 mb-lg-4" xmlns="http://www.w3.org/2000/svg"
+                        width="64" height="64" viewBox="0 0 64 64" fill="currentColor">
+                        <path
+                            d="M62.189 9.902c0-.604-.604-1.208-1.208-1.208h-6.158-3.14l-1.69.121-1.57.242c-2.174.483-4.226 1.087-6.158 2.174s-3.623 2.294-5.072 3.864h-.121c-3.14 3.019-5.313 7.004-6.038 11.351l-.241 1.57-.121 1.691v3.14 5.796c-.604.845-1.087 1.691-1.57 2.536.121-1.328.121-2.536.241-3.864 0-.966.121-1.811.121-2.777v-1.449l-.121-1.449c-.241-1.811-.845-3.743-1.691-5.434a20.6 20.6 0 0 0-3.26-4.71c-2.657-2.777-6.279-4.709-10.143-5.434L12.8 15.82l-1.449-.121H8.574 3.019c-.604 0-1.208.604-1.208 1.208v5.555 2.777l.121 1.449.242 1.449C2.898 32 4.83 35.502 7.729 38.159c1.449 1.328 3.019 2.415 4.709 3.26s3.623 1.328 5.434 1.691l1.449.121h1.449c.966 0 1.811-.121 2.777-.121 1.57-.121 3.14-.121 4.709-.242-.362.604-.604 1.328-.966 1.932-1.449 3.381-2.294 7.004-2.294 10.506.966-3.502 2.294-6.642 3.985-9.66.966-1.811 2.174-3.623 3.381-5.313h5.675 3.14l1.691-.121 1.57-.242c2.174-.483 4.227-1.087 6.159-2.174s3.623-2.294 5.072-3.864h.121c3.14-3.019 5.313-7.004 6.038-11.351l.242-1.57.121-1.69v-3.14-6.279zM49.63 35.743c-1.691.966-3.623 1.449-5.555 1.811l-1.449.242-1.449.121h-3.019-3.864c.242-.242.483-.604.725-.845 2.174-2.657 4.589-5.192 7.004-7.728l7.366-7.728c-3.019 1.932-5.917 3.985-8.694 6.279-2.657 2.294-5.192 4.709-7.487 7.487v-2.536-3.019l.121-1.449.242-1.449c.362-1.932.845-3.864 1.811-5.555.845-1.691 2.053-3.381 3.381-4.83 1.449-1.328 3.019-2.415 4.709-3.381s3.623-1.449 5.555-1.811l1.449-.241 1.449-.121h3.019 4.951v4.951 3.019l-.121 1.57-.242 1.449c-.362 1.932-.845 3.864-1.811 5.555-.845 1.691-2.053 3.381-3.381 4.83-1.449 1.449-3.019 2.536-4.709 3.381zm-26.083 6.762c-.966 0-1.811-.121-2.777-.121l-1.328-.121-1.328-.242c-3.502-.724-6.641-2.536-9.057-5.072-1.208-1.328-2.174-2.657-3.019-4.226-.725-1.57-1.208-3.26-1.57-4.951l-.242-1.328-.121-1.328V22.34v-4.347h4.347 2.777 1.328l1.328.121c1.691.242 3.381.725 4.951 1.57 1.449 1.087 2.898 2.053 4.106 3.26 2.536 2.415 4.347 5.555 5.072 9.057l.241 1.328.121 1.328c.121.845.121 1.811.121 2.777.121 1.449.121 2.777.241 4.226-.241.483-.483.845-.724 1.328-1.328-.362-2.898-.362-4.468-.483zm-5.434-12.437c-1.449-.966-2.898-1.932-4.589-2.657.966 1.449 2.174 2.777 3.381 3.985 2.415 2.536 4.83 4.709 7.487 7.124 1.328 1.087 2.536 2.294 4.106 3.381-.725-1.691-1.57-3.26-2.657-4.589-2.174-2.898-4.709-5.193-7.728-7.245z" />
+                    </svg>
+                    <h3 class="h5">Eco-friendly</h3>
+                    <p class="fs-sm px-5 mb-md-0">Decorate your space with eco-friendly furniture with low VOCs,
+                        environmentally friendly materials and safe coatings.</p>
+                </div>
+                <div class="col text-center">
+                    <svg class="d-block text-dark-emphasis mx-auto mb-3 mb-lg-4" xmlns="http://www.w3.org/2000/svg"
+                        width="64" height="64" viewBox="0 0 64 64" fill="currentColor">
+                        <path
+                            d="M55.526 24.465l-.145-10.159-.094-5.08-.012-.635c-.016-.23-.016-.481-.061-.717-.06-.481-.22-.945-.413-1.384-.407-.875-1.061-1.625-1.868-2.136a4.99 4.99 0 0 0-2.699-.769l-2.548.061-15.238.437 15.238.437 2.532.069a3.93 3.93 0 0 1 2.088.71c.601.431 1.085 1.017 1.365 1.692.131.339.242.688.27 1.051.029.181.017.356.026.548l-.012.635-.094 5.08-.119 8.281c-3.476-.415-6.952-.651-10.428-.808-3.769-.185-7.537-.235-11.306-.255-3.769.023-7.537.073-11.306.258-3.471.158-6.941.392-10.412.803l-.131-9.156-.085-5.05c.009-1.448.949-2.849 2.313-3.435.691-.318 1.391-.355 2.28-.357l2.54-.066 15.239-.439-17.778-.505c-.425-.009-.83-.032-1.325-.006-.472.048-.941.145-1.388.317-1.798.674-3.123 2.475-3.216 4.432l-.105 5.109-.145 10.159-.111 10.159-.046 5.714c.011.242.006.518.048.774.054.523.214 1.031.415 1.516.421.967 1.122 1.802 1.996 2.394a5.52 5.52 0 0 0 2.985.937l1.885.008a219.85 219.85 0 0 0-2.615 7.372l-1.399 4.349-.166.552a2.42 2.42 0 0 0-.062 1.062c.109.703.567 1.362 1.196 1.705a2.42 2.42 0 0 0 2.973-.484c.144-.164.17-.207.235-.287l.177-.224c3.518-4.56 6.926-9.206 10.121-14.015l5.451.014 6.309-.017c3.205 4.808 6.615 9.457 10.14 14.017l.177.224c.065.081.092.123.235.287.753.837 2.009 1.035 2.971.484.629-.343 1.086-1.001 1.195-1.704a2.42 2.42 0 0 0-.062-1.061l-.166-.552-1.403-4.349a228.34 228.34 0 0 0-2.625-7.375l1.007-.003c.425-.003.814.01 1.383-.037.524-.067 1.042-.192 1.53-.396 1.966-.798 3.353-2.796 3.404-4.903l-.03-5.126-.112-10.159zM14.167 57.718l-.293.386c-.011.016-.023.027-.04.035-.035.018-.081.021-.114.004-.043-.018-.066-.046-.08-.095a.18.18 0 0 1-.002-.069l.153-.545 1.157-4.419c.65-2.627 1.271-5.264 1.822-7.92l7.761.02c-3.608 4.082-7.037 8.303-10.363 12.603zm34.91-4.704l1.155 4.42.153.544a.19.19 0 0 1-.002.07c-.014.049-.037.077-.081.096-.034.018-.08.015-.115-.004-.018-.008-.029-.019-.041-.035l-.294-.386c-3.321-4.302-6.749-8.521-10.35-12.607l7.309-.02.452-.001c.549 2.657 1.17 5.293 1.814 7.922zm4.528-18.39l-.05 5.033c-.051 1.297-.928 2.501-2.124 2.963-.626.251-1.14.252-2.08.235l-17.778-.047c-25.374.066 7.11-.017-17.761.043a3.42 3.42 0 0 1-1.802-.541 3.43 3.43 0 0 1-1.238-1.434c-.123-.294-.234-.599-.268-.92-.032-.162-.025-.312-.04-.492l-.046-5.714-.112-10.159-.011-.8c3.47.411 6.94.645 10.409.803 3.769.186 7.537.235 11.306.258 3.769-.02 7.537-.07 11.306-.255 3.475-.157 6.95-.393 10.425-.808l-.024 1.677-.112 10.159zm-14.693-23.94c-3.673-1.557-10.14-1.544-13.805 0 3.66 1.542 10.125 1.559 13.805 0zM25.107 28.829c3.647 1.537 10.114 1.564 13.805 0-3.697-1.567-10.167-1.533-13.805 0z" />
+                    </svg>
+                    <h3 class="h5">Unbeatable quality</h3>
+                    <p class="fs-sm px-5 mb-md-0">We choose raw materials from the best manufacturers, so our furniture and
+                        decor are of the highest quality at the best prices.</p>
+                </div>
+                <div class="col text-center">
+                    <svg class="d-block text-dark-emphasis mx-auto mb-3 mb-lg-4" xmlns="http://www.w3.org/2000/svg"
+                        width="64" height="64" viewBox="0 0 64 64" fill="currentColor">
+                        <path
+                            d="M5.36 29.423c.111 0 2.111 1 6.333 2.667l-.222 10.222c-.111 3.667-.111 7.334-.111 11a1.07 1.07 0 0 0 .778 1c.333.111 10 2.778 9.889 2.667.111 0 10 2.667 9.889 2.667h.111.111.111.111.111l9.889-2.667c.111 0 10-2.778 9.889-2.667a1.07 1.07 0 0 0 .778-1c-.111-3.667-.111-7.334-.111-11l-.222-10.222 6.222-2.667c.111 0 .111-.111.222-.111.222-.222.333-.667 0-.889l-7.111-7.556 5.556 7.667c-3.111 1-6.111 2-9.111 3.111l-9.111 3.333-5.333-6.334c6.222-2.556 12-5.111 18.112-7.889-6-2.778-11.889-5.333-18-7.889l5.333-6.333 9.111 3.333c3 1.111 6.111 2.111 9.111 3.111l-5.556 7.667c2.333-2.333 4.778-4.889 7.111-7.556 0 0 .111-.111.111-.222.111-.333 0-.667-.333-.889-3.222-1.444-6.445-2.778-9.778-4l-9.778-3.889c-.444-.222-.889 0-1.222.333l-5.778 7.111c-1.889-2.445-3.889-4.778-5.778-7.111-.333-.333-.778-.556-1.222-.333-3.222 1.222-6.556 2.556-9.778 3.889-3.778 1.444-7 2.778-10.222 4.222-.111 0-.222.111-.222.111-.222.222-.333.667 0 .889 2.111 2.333 4.333 4.667 6.334 6.778-.444.444-.444 1.222 0 1.556-2.111 2.111-4.222 4.444-6.334 6.778-.444.444-.222 1 .111 1.111zm6.556-7.556l9.889 3.556 3.778 1.333 4.778 2-5.333 6.334-9.111-3.333c-3-1.111-6.111-2.111-9.111-3.111 1.667-2.222 3.222-4.444 4.889-6.778 0-.111.111 0 .222 0zm1.445 30.667c0-3.111-.111-9.556-.445-19.889.778.333 1.445.667 2.222.889l9.778 3.889c.444.222.889 0 1.222-.333 1.778-2.111 3.556-4.333 5.222-6.444-.111 1.778-.111 3.556-.111 5.333l-.222 7.556-.222 13.778-8.556-2.333-8.889-2.444zm37.334 0l-9.111 2.444-8.556 2.333c0-5.778-.111-7.222-.222-13.778l-.222-7.556c-.111-1.778-.111-3.556-.111-5.333 1.778 2.111 3.445 4.333 5.222 6.444.333.333.778.556 1.222.333 3.222-1.222 6.556-2.556 9.778-3.889.778-.333 1.444-.556 2.222-.889l-.222 19.889zm.889-31.667c-5.334 1.556-9.111 2.778-13.556 4.333-2 .667-4 1.222-6 1.889l-9.556-3.667-7-2.556 7-2.556 9.556-3.667c1.889.667 3.778 1.222 5.667 1.889l14 4.445c0-.111-.111-.111-.111-.111zm-44.89-7.667l9.222-3.222 9.111-3.333 5.333 6.333c-1.556.667-3.111 1.222-4.667 1.889l-3.889 1.333-9.889 3.556c-.111 0-.222.111-.222.111l-5-6.667z" />
+                    </svg>
+                    <h3 class="h5">Delivery to your door</h3>
+                    <p class="fs-sm px-5 mb-md-0"> We will deliver to your door anywhere in the world. If you're not 100%
+                        satisfied, let us know within 30 days and we'll solve the problem.</p>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Featured product with video -->
+        <section class="container">
+            <div class="row row-cols-1 row-cols-md-2 g-0 overflow-hidden rounded-5">
+
+                <!-- Video -->
+                <div class="col position-relative">
+                    <div class="ratio ratio-1x1 d-none d-md-block"></div>
+                    <div class="ratio ratio-4x3 d-md-none"></div>
+                    <div class="position-absolute top-0 start-0 w-100 h-100 bg-body-secondary"></div>
+                    <img src="/img/home/furniture/featured-product.png"
+                        class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover z-1" alt="Image">
+                    <div class="position-absolute start-0 bottom-0 d-flex align-items-end w-100 h-100 z-2 p-4">
+                        <a class="btn btn-lg btn-light rounded-pill m-md-2"
+                            href="https://www.youtube.com/watch?v=Z1xX1Kt9NkU" data-glightbox data-gallery="video">
+                            <i class="ci-play fs-lg ms-n1 me-2"></i>
+                            Play
+                        </a>
+                    </div>
+                </div>
+
+                <!-- Featured product -->
+                <div class="col d-flex align-items-center justify-content-center bg-dark py-5 px-4 px-md-5"
+                    data-bs-theme="dark">
+                    <div class="text-center py-md-2 py-lg-3 py-xl-4" style="max-width: 400px">
+                        <div class="fs-xs fw-medium text-body text-uppercase mb-3">Best deal</div>
+                        <h2 class="h4 pb-lg-2 pb-xl-0 mb-4 mb-xl-5">Scandinavian green chair with wooden legs 60x100 cm
+                        </h2>
+                        <div class="d-inline-flex pb-lg-2 pb-xl-0 mb-4 mb-xl-5">
+                            <img src="/img/home/furniture/featured-product-thumbnail.jpg" class="rounded"
+                                width="162" alt="Product">
+                        </div>
+                        <div class="h3 pb-2 pb-md-3">$357.00</div>
+                        <a class="btn btn-lg btn-outline-light rounded-pill" href="{{ route('second', ['shop', 'product-furniture']) }}">Shop
+                            now</a>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Blog grid -->
+        <section class="container py-5 my-2 my-sm-3 my-lg-4 my-xl-5">
+
+            <!-- Heading -->
+            <div class="d-flex align-items-center justify-content-between pb-3 mb-2 mb-sm-3 mt-xxl-3">
+                <h2 class="h3 mb-0">Blog and news</h2>
+                <div class="nav ms-3">
+                    <a class="nav-link animate-underline px-0 py-2" href="{{ route('second', ['blog', 'grid-v2']) }}">
+                        <span class="animate-target">View all</span>
+                        <i class="ci-chevron-right fs-base ms-1"></i>
+                    </a>
+                </div>
+            </div>
+
+            <div class="row gy-5 mb-xxl-3">
+
+                <!-- Article -->
+                <article class="col-md-6">
+                    <a class="ratio d-flex hover-effect-scale rounded-4 overflow-hidden" href="#!"
+                        style="--cz-aspect-ratio: calc(500 / 636 * 100%)">
+                        <img src="/img/blog/grid/v2/01.jpg" class="hover-effect-target" alt="Image">
+                    </a>
+                    <div class="pt-4">
+                        <div class="nav pb-2 mb-1">
+                            <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Interior design</a>
+                        </div>
+                        <h3 class="h5 mb-3">
+                            <a class="hover-effect-underline" href="#!">Decorate your home for the festive season in
+                                3 easy steps</a>
+                        </h3>
+                        <div class="nav align-items-center gap-2 fs-xs">
+                            <a class="nav-link text-body-secondary fs-xs fw-normal p-0" href="#!">Ava Johnson</a>
+                            <hr class="vr my-1 mx-1">
+                            <span class="text-body-secondary">September 11, 2024</span>
+                        </div>
+                    </div>
+                </article>
+                <div class="col-md-6">
+                    <div class="row row-cols-1 row-cols-sm-2 gy-5">
+
+                        <!-- Article -->
+                        <article class="col">
+                            <a class="ratio d-flex hover-effect-scale rounded-4 overflow-hidden" href="#!"
+                                style="--cz-aspect-ratio: calc(260 / 306 * 100%)">
+                                <img src="/img/blog/grid/v2/11.jpg" class="hover-effect-target" alt="Image">
+                            </a>
+                            <div class="pt-4">
+                                <div class="nav pb-2 mb-1">
+                                    <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Interior
+                                        design</a>
+                                </div>
+                                <h3 class="h6 mb-3">
+                                    <a class="hover-effect-underline" href="#!">Transform your living space with
+                                        these chic interior design tips</a>
+                                </h3>
+                                <div class="nav align-items-center gap-2 fs-xs">
+                                    <a class="nav-link text-body-secondary fs-xs fw-normal p-0" href="#!">Ethan
+                                        Miller</a>
+                                    <hr class="vr my-1 mx-1">
+                                    <span class="text-body-secondary">September 5, 2024</span>
+                                </div>
+                            </div>
+                        </article>
+
+                        <!-- Article -->
+                        <article class="col">
+                            <a class="ratio d-flex hover-effect-scale rounded-4 overflow-hidden" href="#!"
+                                style="--cz-aspect-ratio: calc(260 / 306 * 100%)">
+                                <img src="/img/blog/grid/v2/10.jpg" class="hover-effect-target" alt="Image">
+                            </a>
+                            <div class="pt-4">
+                                <div class="nav pb-2 mb-1">
+                                    <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Furniture</a>
+                                </div>
+                                <h3 class="h6 mb-3">
+                                    <a class="hover-effect-underline" href="#!">Furnishing your space: a guide to
+                                        choosing the perfect furniture pieces</a>
+                                </h3>
+                                <div class="nav align-items-center gap-2 fs-xs">
+                                    <a class="nav-link text-body-secondary fs-xs fw-normal p-0" href="#!">Oliver
+                                        Harris</a>
+                                    <hr class="vr my-1 mx-1">
+                                    <span class="text-body-secondary">August 23, 2024</span>
+                                </div>
+                            </div>
+                        </article>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <footer class="footer bg-dark pb-4 py-lg-5" data-bs-theme="dark">
+      <div class="container pt-5 pt-lg-4 mt-sm-2 mt-md-3">
+        <div class="row pb-5">
+
+          <!-- Subscription + Social account links -->
+          <div class="col-md col-xl-8 order-md-2">
+            <div class="text-center px-sm-4 mx-auto" style="max-width: 568px">
+              <h3 class="pb-1 mb-2">Stay in touch with us</h3>
+              <p class="fs-sm text-body pb-2 pb-sm-3">Receive the latest updates about our products &amp; promotions</p>
+              <form class="needs-validation position-relative" novalidate>
+                <input type="email" class="form-control form-control-lg rounded-pill text-start" placeholder="You email" aria-label="Your email address" required>
+                <div class="invalid-tooltip bg-transparent p-0">Please enter you email address!</div>
+                <button type="submit" class="btn btn-icon fs-xl btn-dark rounded-circle position-absolute top-0 end-0 mt-1 me-1" aria-label="Submit your email address" data-bs-theme="light">
+                  <i class="ci-arrow-up-right"></i>
+                </button>
+              </form>
+              <div class="d-flex justify-content-center gap-2 pt-4 pt-md-5 mt-1 mt-md-0">
+                <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!" data-bs-toggle="tooltip" data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-white p-0"></div></div>' title="YouTube" aria-label="Follow us on YouTube">
+                  <i class="ci-youtube"></i>
+                </a>
+                <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!" data-bs-toggle="tooltip" data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-white p-0"></div></div>' title="Facebook" aria-label="Follow us on Facebook">
+                  <i class="ci-facebook"></i>
+                </a>
+                <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!" data-bs-toggle="tooltip" data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-white p-0"></div></div>' title="Instagram" aria-label="Follow us on Instagram">
+                  <i class="ci-instagram"></i>
+                </a>
+                <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!" data-bs-toggle="tooltip" data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-white p-0"></div></div>' title="Telegram" aria-label="Follow us on Telegram">
+                  <i class="ci-telegram"></i>
+                </a>
+                <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!" data-bs-toggle="tooltip" data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-white p-0"></div></div>' title="Pinterest" aria-label="Follow us on Pinterest">
+                  <i class="ci-pinterest"></i>
+                </a>
+              </div>
+            </div>
+          </div>
+
+          <!-- Category links -->
+          <div class="col-md-auto col-xl-2 text-center order-md-1 pt-4 pt-md-0">
+            <ul class="nav d-inline-flex flex-md-column justify-content-center align-items-center gap-md-2">
+              <li class="animate-underline my-1 mx-2 m-md-0">
+                <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Bedroom</a>
+              </li>
+              <li class="animate-underline my-1 mx-2 m-md-0">
+                <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Living room</a>
+              </li>
+              <li class="animate-underline my-1 mx-2 m-md-0">
+                <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Bathroom</a>
+              </li>
+              <li class="animate-underline my-1 mx-2 m-md-0">
+                <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Decoration</a>
+              </li>
+              <li class="animate-underline my-1 mx-2 m-md-0">
+                <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Kitchen</a>
+              </li>
+              <li class="animate-underline my-1 mx-2 m-md-0">
+                <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Sale</a>
+              </li>
+            </ul>
+          </div>
+
+          <!-- Customer links -->
+          <div class="col-md-auto col-xl-2 text-center order-md-3 pt-3 pt-md-0">
+            <ul class="nav d-inline-flex flex-md-column justify-content-center align-items-center gap-md-2">
+              <li class="animate-underline my-1 mx-2 m-md-0">
+                <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Shipping options</a>
+              </li>
+              <li class="animate-underline my-1 mx-2 m-md-0">
+                <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Tracking a package</a>
+              </li>
+              <li class="animate-underline my-1 mx-2 m-md-0">
+                <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Help center</a>
+              </li>
+              <li class="animate-underline my-1 mx-2 m-md-0">
+                <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Contact us</a>
+              </li>
+              <li class="animate-underline my-1 mx-2 m-md-0">
+                <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Product returns</a>
+              </li>
+              <li class="animate-underline my-1 mx-2 m-md-0">
+                <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Locations</a>
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        <!-- Copyright -->
+        <p class="fs-xs text-body text-center pt-lg-4 mt-n2 mt-md-0 mb-0">
+          &copy; All rights reserved. Made by <span class="animate-underline"><a class="animate-target text-white text-decoration-none" href="https://coderthemes.com/" target="_blank" rel="noreferrer">Coderthemes</a></span>
+        </p>
+      </div>
+    </footer>
+    
+@endsection
+
+@section('scripts')    
+@endsection
diff --git a/resources/views/home/grocery.blade.php b/resources/views/home/grocery.blade.php
new file mode 100644
index 0000000..cc8faef
--- /dev/null
+++ b/resources/views/home/grocery.blade.php
@@ -0,0 +1,2014 @@
+@extends('layouts.landing', ['title' => 'Grocery Store'])
+
+@section('content')
+    @include('layouts.partials/offcanvas2')
+
+    <div class="offcanvas offcanvas-end pb-sm-2 px-sm-2" id="deliveryOptions" tabindex="-1"
+        aria-labelledby="deliveryOptionsLabel" style="width: 500px">
+
+        <!-- Header with nav tabs -->
+        <div class="offcanvas-header flex-column align-items-start py-3 pt-lg-4">
+            <div class="d-flex align-items-center justify-content-between w-100 pb-xl-1 mb-4">
+                <h4 class="offcanvas-title" id="deliveryOptionsLabel">Delivery options</h4>
+                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+            </div>
+            <ul class="nav nav-pills nav-justified w-100" role="tablist">
+                <li class="nav-item" role="presentation">
+                    <button type="button" class="nav-link active" id="delivery-tab" data-bs-toggle="tab"
+                        data-bs-target="#delivery-tab-pane" role="tab" aria-controls="delivery-tab-pane"
+                        aria-selected="true">
+                        <i class="ci-shopping-bag fs-base ms-n1 me-2"></i>
+                        Delivery
+                    </button>
+                </li>
+                <li class="nav-item" role="presentation">
+                    <button type="button" class="nav-link" id="pickup-tab" data-bs-toggle="tab"
+                        data-bs-target="#pickup-tab-pane" role="tab" aria-controls="pickup-tab-pane"
+                        aria-selected="false">
+                        <i class="ci-box fs-base ms-n1 me-2"></i>
+                        Pickup
+                    </button>
+                </li>
+            </ul>
+        </div>
+
+        <div class="offcanvas-body tab-content py-2 py-sm-3">
+
+            <!-- Delivery tab -->
+            <div class="tab-pane fade show active" id="delivery-tab-pane" role="tabpanel" aria-labelledby="delivery-tab">
+
+                <!-- Address options collapse -->
+                <div class="collapse delivery-address show" id="deliveryAddressOptions">
+                    <div class="mt-n3">
+                        <div class="form-check border-bottom py-4 m-0">
+                            <input type="radio" class="form-check-input" id="address-1" name="delivery-address" checked>
+                            <label for="address-1" class="form-check-label text-dark-emphasis fw-semibold">567 Cherry Lane
+                                Apt B12 Sacramento, 95829</label>
+                        </div>
+                        <div class="form-check border-bottom py-4 m-0">
+                            <input type="radio" class="form-check-input" id="address-2" name="delivery-address">
+                            <div class="d-flex w-100">
+                                <label for="address-2" class="form-check-label text-dark-emphasis me-3">1901 Thornridge
+                                    Cir. Shiloh, Hawaii, 81063</label>
+                                <button type="button" class="btn-close fs-sm ms-auto" data-bs-toggle="tooltip"
+                                    data-bs-custom-class="tooltip-sm" data-bs-title="Remove" aria-label="Remove"></button>
+                            </div>
+                        </div>
+                        <div class="form-check border-bottom py-4 m-0">
+                            <input type="radio" class="form-check-input" id="address-3" name="delivery-address">
+                            <div class="d-flex w-100">
+                                <label for="address-3" class="form-check-label text-dark-emphasis me-3">3517 W. Gray St.
+                                    Utica, Pennsylvania, 57867</label>
+                                <button type="button" class="btn-close fs-sm ms-auto" data-bs-toggle="tooltip"
+                                    data-bs-custom-class="tooltip-sm" data-bs-title="Remove" aria-label="Remove"></button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Add new address collapse -->
+                <div class="collapse delivery-address" id="deliveryAddressAdd">
+                    <div class="nav mb-4">
+                        <a class="nav-link animate-underline p-0" href=".delivery-address" data-bs-toggle="collapse"
+                            aria-expanded="true" aria-controls="deliveryAddressOptions deliveryAddressAdd">
+                            <i class="ci-chevron-left fs-lg ms-n1 me-1"></i>
+                            <span class="animate-target">Back to my addresses</span>
+                        </a>
+                    </div>
+                    <div class="d-flex align-items-center justify-content-between mb-3 mb-lg-4">
+                        <h5 class="h6 mb-0 me-3">Add an address to start ordering</h5>
+                        <a class="btn btn-sm btn-outline-primary rounded-pill" href="#!">
+                            <i class="ci-map-pin fs-base ms-n1 me-1"></i>
+                            Find on map
+                        </a>
+                    </div>
+                    <div class="mb-3 mb-lg-4">
+                        <label class="form-label">State *</label>
+                        <select class="form-select form-select-lg rounded-pill"
+                            data-select='{
+                "classNames": {
+                  "containerInner": ["form-select", "form-select-lg", "rounded-pill"]
+                }
+              }'
+                            aria-label="Large pill select">
+                            <option value="">Select state</option>
+                            <option value="Arizona">Arizona</option>
+                            <option value="California">California</option>
+                            <option value="Montana">Montana</option>
+                            <option value="Nevada">Nevada</option>
+                            <option value="New Mexico">New Mexico</option>
+                            <option value="Texas">Texas</option>
+                        </select>
+                    </div>
+                    <div class="mb-3 mb-lg-4">
+                        <label for="my-postcode" class="form-label">Postcode *</label>
+                        <input type="text" class="form-control form-control-lg rounded-pill" id="my-postcode">
+                    </div>
+                    <div class="mb-3 mb-lg-4">
+                        <label class="form-label">City *</label>
+                        <select class="form-select form-select-lg rounded-pill"
+                            data-select='{
+                "classNames": {
+                  "containerInner": ["form-select", "form-select-lg", "rounded-pill"]
+                }
+              }'
+                            aria-label="Large pill select">
+                            <option value="">Select city</option>
+                            <option value="Austin">Austin</option>
+                            <option value="Helena">Helena</option>
+                            <option value="Sacramento">Sacramento</option>
+                            <option value="Santa Fe">Santa Fe</option>
+                            <option value="Las Vegas">Las Vegas</option>
+                            <option value="Phoenix">Phoenix</option>
+                        </select>
+                    </div>
+                    <label for="my-address" class="form-label">Street address *</label>
+                    <input type="text" class="form-control form-control-lg rounded-pill" id="my-address">
+                </div>
+
+                <!-- Add address collapse toggle -->
+                <div class="nav">
+                    <a class="nav-link hiding-collapse-toggle animate-underline collapsed px-0 mt-4"
+                        href=".delivery-address" data-bs-toggle="collapse" aria-expanded="false"
+                        aria-controls="deliveryAddressOptions deliveryAddressAdd">
+                        <span class="animate-target">Add delivery address</span>
+                        <i class="ci-plus fs-base ms-1"></i>
+                    </a>
+                </div>
+            </div>
+
+            <!-- Pickup tab -->
+            <div class="tab-pane fade" id="pickup-tab-pane" role="tabpanel" aria-labelledby="pickup-tab">
+
+                <!-- Pickup store options collapse -->
+                <div class="collapse pickup-options show" id="pickupStoreOptions">
+                    <div class="mt-n3">
+                        <div class="form-check border-bottom py-4 m-0">
+                            <input type="radio" class="form-check-input" id="store-1" name="pickup-store" checked>
+                            <div>
+                                <div class="d-flex w-100 pb-2 mb-1">
+                                    <label for="store-1"
+                                        class="form-check-label text-dark-emphasis fw-semibold me-3">Sacramento
+                                        Supercenter</label>
+                                    <button type="button" class="btn-close fs-sm ms-auto" data-bs-toggle="tooltip"
+                                        data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
+                                        aria-label="Remove"></button>
+                                </div>
+                                <div class="fs-xs mb-2">8270 Delta Shores Cir S, Sacramento, CA 95832</div>
+                                <div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">07:00 - 22:00</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="form-check border-bottom py-4 m-0">
+                            <input type="radio" class="form-check-input" id="store-2" name="pickup-store">
+                            <div>
+                                <div class="d-flex w-100 pb-2 mb-1">
+                                    <label for="store-2"
+                                        class="form-check-label text-dark-emphasis fw-semibold me-3">West Sacramento
+                                        Supercenter</label>
+                                    <button type="button" class="btn-close fs-sm ms-auto" data-bs-toggle="tooltip"
+                                        data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
+                                        aria-label="Remove"></button>
+                                </div>
+                                <div class="fs-xs mb-2">755 Riverpoint Ct, West Sacramento, CA 95605</div>
+                                <div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">07:00 - 21:00</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="form-check border-bottom py-4 m-0">
+                            <input type="radio" class="form-check-input" id="store-3" name="pickup-store">
+                            <div>
+                                <div class="d-flex w-100 pb-2 mb-1">
+                                    <label for="store-3"
+                                        class="form-check-label text-dark-emphasis fw-semibold me-3">Rancho Cordova
+                                        Supercenter</label>
+                                    <button type="button" class="btn-close fs-sm ms-auto" data-bs-toggle="tooltip"
+                                        data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
+                                        aria-label="Remove"></button>
+                                </div>
+                                <div class="fs-xs mb-2">10655 Folsom Blvd, Rancho Cordova, CA 95670</div>
+                                <div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">08:00 - 23:00</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Add new pickup store collapse -->
+                <div class="collapse pickup-options" id="pickupStoreAdd">
+                    <div class="nav mb-4">
+                        <a class="nav-link animate-underline p-0" href=".pickup-options" data-bs-toggle="collapse"
+                            aria-expanded="true" aria-controls="pickupStoreOptions pickupStoreAdd">
+                            <i class="ci-chevron-left fs-lg ms-n1 me-1"></i>
+                            <span class="animate-target">Back to my stores</span>
+                        </a>
+                    </div>
+                    <div class="d-flex align-items-center justify-content-between mb-3 mb-lg-4">
+                        <h5 class="h6 mb-0 me-3">Select a suitable store</h5>
+                        <a class="btn btn-sm btn-outline-primary rounded-pill" href="#!">
+                            <i class="ci-map-pin fs-base ms-n1 me-1"></i>
+                            Find on map
+                        </a>
+                    </div>
+                    <div class="mb-3 mb-lg-4">
+                        <label class="form-label">State *</label>
+                        <select class="form-select form-select-lg rounded-pill"
+                            data-select='{
+                "classNames": {
+                  "containerInner": ["form-select", "form-select-lg", "rounded-pill"]
+                }
+              }'
+                            aria-label="Large pill select">
+                            <option value="">Select state</option>
+                            <option value="Arizona">Arizona</option>
+                            <option value="California" selected>California</option>
+                            <option value="Montana">Montana</option>
+                            <option value="Nevada">Nevada</option>
+                            <option value="New Mexico">New Mexico</option>
+                            <option value="Texas">Texas</option>
+                        </select>
+                    </div>
+                    <div class="mb-4">
+                        <label class="form-label">City *</label>
+                        <select class="form-select form-select-lg rounded-pill"
+                            data-select='{
+                "classNames": {
+                  "containerInner": ["form-select", "form-select-lg", "rounded-pill"]
+                }
+              }'
+                            aria-label="Large pill select">
+                            <option value="">Select city</option>
+                            <option value="Austin">Austin</option>
+                            <option value="Helena">Helena</option>
+                            <option value="Sacramento" selected>Sacramento</option>
+                            <option value="Santa Fe">Santa Fe</option>
+                            <option value="Las Vegas">Las Vegas</option>
+                            <option value="Phoenix">Phoenix</option>
+                        </select>
+                    </div>
+                    <div class="fs-xs fw-medium text-uppercase text-body-secondary">Found stores:</div>
+                    <div class="form-check border-bottom py-4 m-0">
+                        <input type="radio" class="form-check-input" id="store-4" name="found-store">
+                        <div>
+                            <label for="store-4"
+                                class="form-check-label text-dark-emphasis fw-semibold pb-2 mb-1">Sacramento
+                                Supercenter</label>
+                            <div class="fs-xs mb-2">8270 Delta Shores Cir S, Sacramento, CA 95832</div>
+                            <div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">07:00 - 22:00</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="form-check border-bottom py-4 m-0">
+                        <input type="radio" class="form-check-input" id="store-5" name="found-store">
+                        <div>
+                            <label for="store-5" class="form-check-label text-dark-emphasis fw-semibold pb-2 mb-1">West
+                                Sacramento Supercenter</label>
+                            <div class="fs-xs mb-2">755 Riverpoint Ct, West Sacramento, CA 95605</div>
+                            <div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">07:00 - 21:00</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="form-check border-bottom py-4 m-0">
+                        <input type="radio" class="form-check-input" id="store-6" name="found-store">
+                        <div>
+                            <label for="store-6" class="form-check-label text-dark-emphasis fw-semibold pb-2 mb-1">Rancho
+                                Cordova Supercenter</label>
+                            <div class="fs-xs mb-2">10655 Folsom Blvd, Rancho Cordova, CA 95670</div>
+                            <div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">08:00 - 23:00</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Add address collapse toggle -->
+                <div class="nav">
+                    <a class="nav-link hiding-collapse-toggle animate-underline collapsed px-0 mt-4"
+                        href=".pickup-options" data-bs-toggle="collapse" aria-expanded="false"
+                        aria-controls="pickupStoreOptions pickupStoreAdd">
+                        <span class="animate-target">Add store address</span>
+                        <i class="ci-plus fs-base ms-1"></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+
+        <!-- Footer -->
+        <div class="offcanvas-header">
+            <button type="button" class="btn btn-lg btn-primary w-100 rounded-pill">Confirm address</button>
+        </div>
+    </div>
+
+    @include('layouts.partials/menu-offcanvas')
+
+    <header class="navbar navbar-expand navbar-sticky sticky-top d-block bg-body z-fixed py-1 py-lg-0 py-xl-1 px-0" data-sticky-element>
+        <div class="container justify-content-start py-2 py-lg-3">
+
+            <!-- Offcanvas menu toggler (Hamburger) -->
+            <button type="button" class="navbar-toggler d-block flex-shrink-0 me-3 me-sm-4" data-bs-toggle="offcanvas"
+                data-bs-target="#navbarNav" aria-controls="navbarNav" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+
+            <!-- Navbar brand (Logo) -->
+            <a class="navbar-brand fs-2 p-0 pe-lg-2 pe-xxl-0 me-0 me-sm-3 me-md-4 me-xxl-5"
+                href="/">Cartzilla</a>
+
+            <!-- Categories dropdown visible on screens > 991px wide (lg breakpoint) -->
+            <div class="dropdown d-none d-lg-block w-100 me-4" style="max-width: 200px">
+                <button type="button" class="btn btn-lg btn-secondary w-100 border-0 rounded-pill"
+                    data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    <i class="ci-grid fs-lg me-2 ms-n1"></i>
+                    Categories
+                    <i class="ci-chevron-down fs-lg me-2 ms-auto me-n1"></i>
+                </button>
+                <div class="dropdown-menu rounded-4 p-4" style="--cz-dropdown-spacer: .75rem; margin-left: -75px">
+                    <div class="d-flex gap-4">
+                        <div style="min-width: 170px">
+                            <div class="h6">Bakery &amp; bread</div>
+                            <ul class="nav flex-column gap-2 mt-n2">
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery'])}}">Shop all</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery'])}}">Bread</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery'])}}">Pastries</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery'])}}">Bakery cookies</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery'])}}">Cupcakes</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery'])}}">Buns &amp; rolls</a>
+                                </li>
+                            </ul>
+                            <div class="h6 pt-4">Meat products</div>
+                            <ul class="nav flex-column gap-2 mt-n2">
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery'])}}">Shop all</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery'])}}">Fresh meat</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery'])}}">Processed meat</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery'])}}">Seafood</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery'])}}">Poultry products</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery'])}}">Prepared meat</a>
+                                </li>
+                            </ul>
+                        </div>
+                        <div style="min-width: 170px">
+                            <div class="h6">Vegetables</div>
+                            <ul class="nav flex-column gap-2 mt-n2">
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery'])}}">Shop all</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery'])}}">Leafy greens</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery'])}}">Root vegetables</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery'])}}">Allium vegetables</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery'])}}">Peppers and tomatoes</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery'])}}">Cruciferous</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery'])}}">Seasonal squashes</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery'])}}">Beans, peas &amp; lentils</a>
+                                </li>
+                            </ul>
+                            <div class="h6 pt-4">Sauces and ketchup</div>
+                            <ul class="nav flex-column gap-2 mt-n2">
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery'])}}">Shop all</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery'])}}">Tomato-based sauces</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery'])}}">Salad dressing</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery'])}}">Hot sauces</a>
+                                </li>
+                            </ul>
+                        </div>
+                        <div style="min-width: 170px">
+                            <div class="h6">Fresh fruits</div>
+                            <ul class="nav flex-column gap-2 mt-n2">
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery'])}}">Shop all</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery'])}}">Citrus fruits</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery'])}}">Berries</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery'])}}">Tropical fruits</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery'])}}">Stone fruits</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery'])}}">Exotic fruits</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery'])}}">Melons</a>
+                                </li>
+                            </ul>
+                            <div class="h6 pt-4">Italian dinner</div>
+                            <ul class="nav flex-column gap-2 mt-n2">
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery'])}}">Shop all</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery'])}}">Pasta &amp; sauces</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery'])}}">Italian cheese</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery'])}}">Italian meats</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery'])}}">Desserts &amp; beverages</a>
+                                </li>
+                            </ul>
+                        </div>
+                        <div style="min-width: 170px">
+                            <div class="h6">Beverages</div>
+                            <ul class="nav flex-column gap-2 mt-n2">
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery'])}}">Shop all</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery'])}}">Soft drinks</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery'])}}">Juices</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery'])}}">Sports &amp; energy drinks</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery'])}}">Tea and coffee</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery'])}}">Alcoholic beverages</a>
+                                </li>
+                            </ul>
+                            <div class="h6 pt-4">Dairy &amp; eggs</div>
+                            <ul class="nav flex-column gap-2 mt-n2">
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery'])}}">Shop all</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery'])}}">Chees</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery'])}}">Milk &amp; yogurt</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery'])}}">Sour cream</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery'])}}">Eggs</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery'])}}">Butter &amp; margarine</a>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Search bar visible on screens > 768px wide (md breakpoint) -->
+            <div class="position-relative w-100 d-none d-md-block me-3 me-xl-4">
+                <input type="search" class="form-control form-control-lg rounded-pill" placeholder="Search for products"
+                    aria-label="Search">
+                <button type="button"
+                    class="btn btn-icon btn-ghost fs-lg btn-secondary text-bo border-0 position-absolute top-0 end-0 rounded-circle mt-1 me-1"
+                    aria-label="Search button">
+                    <i class="ci-search"></i>
+                </button>
+            </div>
+
+            <!-- Delivery options toggle visible on screens > 1200px wide (xl breakpoint) -->
+            <div class="nav me-4 me-xxl-5 d-none d-xl-block">
+                <a class="nav-link flex-column align-items-start animate-underline p-0" href="#deliveryOptions"
+                    data-bs-toggle="offcanvas" aria-controls="deliveryOptions">
+                    <div class="h6 fs-sm mb-0">Delivery</div>
+                    <div class="d-flex align-items-center fs-sm fw-normal text-body">
+                        <span class="animate-target text-nowrap">Set your address</span>
+                        <i class="ci-chevron-down fs-base ms-1"></i>
+                    </div>
+                </a>
+            </div>
+
+            <!-- Button group -->
+            <div class="d-flex align-items-center gap-md-1 gap-lg-2 ms-auto">
+
+                <!-- Theme switcher (light/dark/auto) -->
+                <div class="dropdown">
+                    <button type="button"
+                        class="theme-switcher btn btn-icon btn-outline-secondary fs-lg border-0 rounded-circle animate-scale"
+                        data-bs-toggle="dropdown" aria-expanded="false" aria-label="Toggle theme (light)">
+                        <span class="theme-icon-active d-flex animate-target">
+                            <i class="ci-sun"></i>
+                        </span>
+                    </button>
+                    <ul class="dropdown-menu" style="--cz-dropdown-min-width: 9rem">
+                        <li>
+                            <button type="button" class="dropdown-item active" data-bs-theme-value="light"
+                                aria-pressed="true">
+                                <span class="theme-icon d-flex fs-base me-2">
+                                    <i class="ci-sun"></i>
+                                </span>
+                                <span class="theme-label">Light</span>
+                                <i class="item-active-indicator ci-check ms-auto"></i>
+                            </button>
+                        </li>
+                        <li>
+                            <button type="button" class="dropdown-item" data-bs-theme-value="dark"
+                                aria-pressed="false">
+                                <span class="theme-icon d-flex fs-base me-2">
+                                    <i class="ci-moon"></i>
+                                </span>
+                                <span class="theme-label">Dark</span>
+                                <i class="item-active-indicator ci-check ms-auto"></i>
+                            </button>
+                        </li>
+                        <li>
+                            <button type="button" class="dropdown-item" data-bs-theme-value="auto"
+                                aria-pressed="false">
+                                <span class="theme-icon d-flex fs-base me-2">
+                                    <i class="ci-auto"></i>
+                                </span>
+                                <span class="theme-label">Auto</span>
+                                <i class="item-active-indicator ci-check ms-auto"></i>
+                            </button>
+                        </li>
+                    </ul>
+                </div>
+
+                <!-- Search toggle button visible on screens < 768px wide (md breakpoint) -->
+                <button type="button"
+                    class="btn btn-icon fs-xl btn-outline-secondary border-0 rounded-circle animate-shake d-md-none"
+                    data-bs-toggle="collapse" data-bs-target="#searchBar" aria-controls="searchBar"
+                    aria-label="Toggle search bar">
+                    <i class="ci-search animate-target"></i>
+                </button>
+
+                <!-- Delivery options button visible on screens < 1200px wide (xl breakpoint) -->
+                <button type="button"
+                    class="btn btn-icon fs-lg btn-outline-secondary border-0 rounded-circle animate-scale d-xl-none"
+                    data-bs-toggle="offcanvas" data-bs-target="#deliveryOptions" aria-controls="deliveryOptions"
+                    aria-label="Toggle delivery options offcanvas">
+                    <i class="ci-map-pin animate-target"></i>
+                </button>
+
+                <!-- Account button visible on screens > 768px wide (md breakpoint) -->
+                <a class="btn btn-icon fs-lg btn-outline-secondary border-0 rounded-circle animate-shake d-none d-md-inline-flex"
+                    href="{{ route('second', ['account', 'signin']) }}">
+                    <i class="ci-user animate-target"></i>
+                    <span class="visually-hidden">Account</span>
+                </a>
+
+                <!-- Cart button -->
+                <button type="button"
+                    class="btn btn-icon fs-xl btn-outline-secondary position-relative border-0 rounded-circle animate-scale"
+                    data-bs-toggle="offcanvas" data-bs-target="#shoppingCart" aria-controls="shoppingCart"
+                    aria-label="Shopping cart">
+                    <span class="position-absolute top-0 start-100 badge fs-xs text-bg-primary rounded-pill ms-n3 z-2"
+                        style="--cz-badge-padding-y: .25em; --cz-badge-padding-x: .42em">8</span>
+                    <i class="ci-shopping-cart animate-target"></i>
+                </button>
+            </div>
+        </div>
+
+        <!-- Search collapse available on screens < 768px wide (md breakpoint) -->
+        <div class="collapse d-md-none" id="searchBar">
+            <div class="container pt-2 pb-3">
+                <div class="position-relative">
+                    <i class="ci-search position-absolute top-50 translate-middle-y d-flex fs-lg ms-3"></i>
+                    <input type="search" class="form-control form-icon-start rounded-pill"
+                        placeholder="Search for products" data-autofocus="collapse">
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <section class="border-top">
+        <div class="container py-lg-1">
+            <div class="overflow-auto" data-simplebar>
+                <div class="nav flex-nowrap justify-content-between gap-4 py-2">
+                    <a class="nav-link align-items-center animate-underline gap-2 p-0" href="{{ route('second', ['shop', 'catalog-grocery'])}}">
+                        <span class="d-flex align-items-center justify-content-center bg-body-tertiary rounded-circle"
+                            style="width: 40px; height: 40px">
+                            <i class="ci-percent text-primary fs-xl"></i>
+                        </span>
+                        <span class="d-block animate-target fw-semibold text-nowrap ms-1">Weekly sale</span>
+                    </a>
+                    <a class="nav-link align-items-center animate-underline gap-2 p-0" href="{{ route('second', ['shop', 'catalog-grocery'])}}">
+                        <span class="d-flex align-items-center justify-content-center bg-body-tertiary rounded-circle"
+                            style="width: 40px; height: 40px">
+                            <img src="/img/mega-menu/grocery/th01.png" width="30" alt="Image">
+                        </span>
+                        <span class="d-block animate-target fw-semibold text-nowrap ms-1">Vegetables</span>
+                    </a>
+                    <a class="nav-link align-items-center animate-underline gap-2 p-0" href="{{ route('second', ['shop', 'catalog-grocery'])}}">
+                        <span class="d-flex align-items-center justify-content-center bg-body-tertiary rounded-circle"
+                            style="width: 40px; height: 40px">
+                            <img src="/img/mega-menu/grocery/th02.png" width="30" alt="Image">
+                        </span>
+                        <span class="d-block animate-target fw-semibold text-nowrap ms-1">Easter is coming</span>
+                    </a>
+                    <a class="nav-link align-items-center animate-underline gap-2 m-0" href="{{ route('second', ['shop', 'catalog-grocery'])}}">
+                        <span class="d-flex align-items-center justify-content-center bg-body-tertiary rounded-circle"
+                            style="width: 40px; height: 40px">
+                            <img src="/img/mega-menu/grocery/th03.png" width="30" alt="Image">
+                        </span>
+                        <span class="d-block animate-target fw-semibold text-nowrap ms-1">Poultry meat</span>
+                    </a>
+                    <a class="nav-link align-items-center animate-underline gap-2 p-0" href="{{ route('second', ['shop', 'catalog-grocery'])}}">
+                        <span class="d-flex align-items-center justify-content-center bg-body-tertiary rounded-circle"
+                            style="width: 40px; height: 40px">
+                            <img src="/img/mega-menu/grocery/th04.png" width="30" alt="Image">
+                        </span>
+                        <span class="d-block animate-target fw-semibold text-nowrap ms-1">Fresh fruits</span>
+                    </a>
+                    <a class="nav-link align-items-center animate-underline gap-2 p-0" href="{{ route('second', ['shop', 'catalog-grocery'])}}">
+                        <span class="d-flex align-items-center justify-content-center bg-body-tertiary rounded-circle"
+                            style="width: 40px; height: 40px">
+                            <img src="/img/mega-menu/grocery/th05.png" width="30" alt="Image">
+                        </span>
+                        <span class="d-block animate-target fw-semibold text-nowrap ms-1">St. Patrick's day</span>
+                    </a>
+                    <a class="nav-link align-items-center animate-underline gap-2 p-0" href="{{ route('second', ['shop', 'catalog-grocery'])}}">
+                        <span class="d-flex align-items-center justify-content-center bg-body-tertiary rounded-circle"
+                            style="width: 40px; height: 40px">
+                            <img src="/img/mega-menu/grocery/th06.png" width="30" alt="Image">
+                        </span>
+                        <span class="d-block animate-target fw-semibold text-nowrap ms-1">Exotic fruits</span>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <main class="content-wrapper">
+
+        <!-- Hero slider -->
+        <section class="position-relative">
+            <div class="swiper position-absolute top-0 start-0 w-100 h-100"
+                data-swiper='{
+          "effect": "fade",
+          "loop": true,
+          "speed": 400,
+          "pagination": {
+            "el": ".swiper-pagination",
+            "clickable": true
+          },
+          "autoplay": {
+            "delay": 5500,
+            "disableOnInteraction": false
+          }
+        }'
+                data-bs-theme="dark">
+                <div class="swiper-wrapper">
+
+                    <!-- Slide -->
+                    <div class="swiper-slide" style="background-color: #6dafca">
+                        <div class="position-absolute d-flex align-items-center w-100 h-100 z-2">
+                            <div class="container mt-lg-n4">
+                                <div class="row">
+                                    <div class="col-9 col-sm-8 col-md-7 col-lg-6">
+                                        <p class="fs-sm text-white mb-lg-4">🔥 Free shipping - order over
+                                            <strong>50$</strong>
+                                        </p>
+                                        <h2 class="display-4 pb-2 pb-md-3 pb-lg-4">Healthy Food Available to Everyone</h2>
+                                        <a class="btn btn-lg btn-outline-light rounded-pill"
+                                            href="{{ route('second', ['shop', 'catalog-grocery'])}}">Shop now</a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <img src="/img/home/grocery/hero-slider/01.jpg"
+                            class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rtl-flip"
+                            alt="Image">
+                    </div>
+
+                    <!-- Slide -->
+                    <div class="swiper-slide" style="background-color: #5a7978">
+                        <div class="position-absolute d-flex align-items-center w-100 h-100 z-2">
+                            <div class="container mt-lg-n4">
+                                <div class="row">
+                                    <div class="col-12 col-sm-10 col-md-7 col-lg-6">
+                                        <p class="fs-sm text-white mb-lg-4">🥚 Organic products to your table</p>
+                                        <h2 class="display-4 pb-2 pb-md-3 pb-lg-4">Organic eggs from home-grown chicken
+                                        </h2>
+                                        <a class="btn btn-lg btn-outline-light rounded-pill"
+                                            href="{{ route('second', ['shop', 'catalog-grocery'])}}">Shop now</a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <img src="/img/home/grocery/hero-slider/02.jpg"
+                            class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rtl-flip"
+                            alt="Image">
+                    </div>
+
+                    <!-- Slide -->
+                    <div class="swiper-slide" style="background-color: #f99c03">
+                        <div class="position-absolute d-flex align-items-center w-100 h-100 z-2">
+                            <div class="container mt-lg-n4">
+                                <div class="row">
+                                    <div class="col-9 col-sm-8 col-md-7 col-lg-6">
+                                        <p class="fs-sm text-white mb-lg-4">🥝 Only natural ingredients</p>
+                                        <h2 class="display-4 pb-2 pb-md-3 pb-lg-4">Enjoy refreshing summer drink</h2>
+                                        <a class="btn btn-lg btn-outline-light rounded-pill"
+                                            href="{{ route('second', ['shop', 'catalog-grocery'])}}">Shop now</a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <img src="/img/home/grocery/hero-slider/03.jpg"
+                            class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rtl-flip"
+                            alt="Image">
+                    </div>
+                </div>
+
+                <!-- Slider pagination (Bullets) -->
+                <div class="swiper-pagination pb-sm-2"></div>
+            </div>
+            <div class="d-md-none" style="height: 380px"></div>
+            <div class="d-none d-md-block d-lg-none" style="height: 420px"></div>
+            <div class="d-none d-lg-block d-xl-none" style="height: 500px"></div>
+            <div class="d-none d-xl-block d-xxl-none" style="height: 560px"></div>
+            <div class="d-none d-xxl-block" style="height: 624px"></div>
+        </section>
+
+
+        <!-- Featured categories that turns into carousel on screen < 992px (lg breackpoint) -->
+        <section class="container pt-4 pb-5 mb-2 mb-sm-3 mb-lg-4 mb-xl-5">
+            <div class="swiper"
+                data-swiper='{
+          "slidesPerView": 1,
+          "spaceBetween": 24,
+          "pagination": {
+            "el": ".swiper-pagination",
+            "clickable": true
+          },
+          "breakpoints": {
+            "680": {
+              "slidesPerView": 2
+            },
+            "992": {
+              "slidesPerView": 3
+            }
+          }
+        }'>
+                <div class="swiper-wrapper">
+
+                    <!-- Category -->
+                    <div class="swiper-slide h-auto">
+                        <div
+                            class="position-relative d-flex justify-content-between align-items-center h-100 bg-primary-subtle rounded-5 overflow-hidden ps-2 ps-xl-3">
+                            <div class="d-flex flex-column pt-4 px-3 pb-3">
+                                <p class="fs-xs pb-2 mb-1">124 products</p>
+                                <h2 class="h5 mb-2 mb-xxl-3">Only fresh fish to your table</h2>
+                                <div class="nav">
+                                    <a class="nav-link animate-underline stretched-link text-body-emphasis text-nowrap px-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery'])}}">
+                                        <span class="animate-target">Shop now</span>
+                                        <i class="ci-chevron-right fs-base ms-1"></i>
+                                    </a>
+                                </div>
+                            </div>
+                            <div class="ratio w-100 align-self-end rtl-flip"
+                                style="max-width: 216px; --cz-aspect-ratio: calc(240 / 216 * 100%)">
+                                <img src="/img/home/grocery/featured/01.png" alt="Image">
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Category -->
+                    <div class="swiper-slide h-auto">
+                        <div
+                            class="position-relative d-flex justify-content-between align-items-center h-100 bg-success-subtle rounded-5 overflow-hidden ps-2 ps-xl-3">
+                            <div class="d-flex flex-column pt-4 px-3 pb-3">
+                                <p class="fs-xs pb-2 mb-1">97 products</p>
+                                <h2 class="h5 mb-2 mb-xxl-3">Products for Easter table</h2>
+                                <div class="nav">
+                                    <a class="nav-link animate-underline stretched-link text-body-emphasis text-nowrap px-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery'])}}">
+                                        <span class="animate-target">Shop now</span>
+                                        <i class="ci-chevron-right fs-base ms-1"></i>
+                                    </a>
+                                </div>
+                            </div>
+                            <div class="ratio w-100 align-self-end rtl-flip"
+                                style="max-width: 216px; --cz-aspect-ratio: calc(240 / 216 * 100%)">
+                                <img src="/img/home/grocery/featured/02.png" alt="Image">
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Category -->
+                    <div class="swiper-slide h-auto">
+                        <div
+                            class="position-relative d-flex justify-content-between align-items-center h-100 bg-info-subtle rounded-5 overflow-hidden ps-2 ps-xl-3">
+                            <div class="d-flex flex-column pt-4 px-3 pb-3">
+                                <p class="fs-xs pb-2 mb-1">28 products</p>
+                                <h2 class="h5 mb-2 mb-xxl-3">Berries from the garden</h2>
+                                <div class="nav">
+                                    <a class="nav-link animate-underline stretched-link text-body-emphasis text-nowrap px-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery'])}}">
+                                        <span class="animate-target">Shop now</span>
+                                        <i class="ci-chevron-right fs-base ms-1"></i>
+                                    </a>
+                                </div>
+                            </div>
+                            <div class="ratio w-100 align-self-end rtl-flip"
+                                style="max-width: 216px; --cz-aspect-ratio: calc(240 / 216 * 100%)">
+                                <img src="/img/home/grocery/featured/03.png" alt="Image">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Slider pagination (Bullets) -->
+                <div class="swiper-pagination position-static mt-3 mt-sm-4"></div>
+            </div>
+        </section>
+
+
+        <!-- Categories + Popular products -->
+        <section class="container pb-5 mb-2 mb-sm-3 mb-lg-4 mb-xl-5">
+            <div class="row">
+
+                <!-- Categories list -->
+                <div class="col-lg-3 pb-2 pb-sm-3 pb-md-4 mb-5 mb-lg-0">
+                    <h2 class="h3 border-bottom pb-3 pb-md-4 mb-4">Categories</h2>
+                    <div class="row nav g-3 g-sm-4">
+                        <div class="col-sm-6 col-md-4 col-lg-12 d-flex">
+                            <div class="position-relative d-flex min-w-0 align-items-center">
+                                <div class="d-flex flex-shrink-0 align-items-center justify-content-center bg-body-tertiary rounded-circle"
+                                    style="width: 56px; height: 56px">
+                                    <img src="/img/shop/grocery/categories/01.png" width="40" alt="Image">
+                                </div>
+                                <div class="min-w-0 ps-3">
+                                    <a class="nav-link animate-underline stretched-link fs-base fw-semibold p-0 mb-1"
+                                        href="{{ route('second', ['shop', 'catalog-grocery'])}}">
+                                        <span class="animate-target text-truncate">Bakery &amp; bread</span>
+                                    </a>
+                                    <div class="fs-xs fw-normal text-body-secondary">230 products</div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-sm-6 col-md-4 col-lg-12 d-flex">
+                            <div class="position-relative d-flex min-w-0 align-items-center">
+                                <div class="d-flex flex-shrink-0 align-items-center justify-content-center bg-body-tertiary rounded-circle"
+                                    style="width: 56px; height: 56px">
+                                    <img src="/img/shop/grocery/categories/02.png" width="40" alt="Image">
+                                </div>
+                                <div class="min-w-0 ps-3">
+                                    <a class="nav-link animate-underline stretched-link fs-base fw-semibold p-0 mb-1"
+                                        href="{{ route('second', ['shop', 'catalog-grocery'])}}">
+                                        <span class="animate-target text-truncate">Vegetables</span>
+                                    </a>
+                                    <div class="fs-xs fw-normal text-body-secondary">180 products</div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-sm-6 col-md-4 col-lg-12 d-flex">
+                            <div class="position-relative d-flex min-w-0 align-items-center">
+                                <div class="d-flex flex-shrink-0 align-items-center justify-content-center bg-body-tertiary rounded-circle"
+                                    style="width: 56px; height: 56px">
+                                    <img src="/img/shop/grocery/categories/03.png" width="40" alt="Image">
+                                </div>
+                                <div class="min-w-0 ps-3">
+                                    <a class="nav-link animate-underline stretched-link fs-base fw-semibold p-0 mb-1"
+                                        href="{{ route('second', ['shop', 'catalog-grocery'])}}">
+                                        <span class="animate-target text-truncate">Fresh fruits</span>
+                                    </a>
+                                    <div class="fs-xs fw-normal text-body-secondary">205 products</div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-sm-6 col-md-4 col-lg-12 d-flex">
+                            <div class="position-relative d-flex min-w-0 align-items-center">
+                                <div class="d-flex flex-shrink-0 align-items-center justify-content-center bg-body-tertiary rounded-circle"
+                                    style="width: 56px; height: 56px">
+                                    <img src="/img/shop/grocery/categories/04.png" width="40" alt="Image">
+                                </div>
+                                <div class="min-w-0 ps-3">
+                                    <a class="nav-link animate-underline stretched-link fs-base fw-semibold p-0 mb-1"
+                                        href="{{ route('second', ['shop', 'catalog-grocery'])}}">
+                                        <span class="animate-target text-truncate">Meet Italian dinner</span>
+                                    </a>
+                                    <div class="fs-xs fw-normal text-body-secondary">309 products</div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-sm-6 col-md-4 col-lg-12 d-flex">
+                            <div class="position-relative d-flex min-w-0 align-items-center">
+                                <div class="d-flex flex-shrink-0 align-items-center justify-content-center bg-body-tertiary rounded-circle"
+                                    style="width: 56px; height: 56px">
+                                    <img src="/img/shop/grocery/categories/05.png" width="40" alt="Image">
+                                </div>
+                                <div class="min-w-0 ps-3">
+                                    <a class="nav-link animate-underline stretched-link fs-base fw-semibold p-0 mb-1"
+                                        href="{{ route('second', ['shop', 'catalog-grocery'])}}">
+                                        <span class="animate-target text-truncate">Beverages</span>
+                                    </a>
+                                    <div class="fs-xs fw-normal text-body-secondary">372 products</div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-sm-6 col-md-4 col-lg-12 d-flex">
+                            <div class="position-relative d-flex min-w-0 align-items-center">
+                                <div class="d-flex flex-shrink-0 align-items-center justify-content-center bg-body-tertiary rounded-circle"
+                                    style="width: 56px; height: 56px">
+                                    <img src="/img/shop/grocery/categories/06.png" width="40" alt="Image">
+                                </div>
+                                <div class="min-w-0 ps-3">
+                                    <a class="nav-link animate-underline stretched-link fs-base fw-semibold p-0 mb-1"
+                                        href="{{ route('second', ['shop', 'catalog-grocery'])}}">
+                                        <span class="animate-target text-truncate">Meat products</span>
+                                    </a>
+                                    <div class="fs-xs fw-normal text-body-secondary">124 products</div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-sm-6 col-md-4 col-lg-12 d-flex">
+                            <div class="position-relative d-flex min-w-0 align-items-center">
+                                <div class="d-flex flex-shrink-0 align-items-center justify-content-center bg-body-tertiary rounded-circle"
+                                    style="width: 56px; height: 56px">
+                                    <img src="/img/shop/grocery/categories/07.png" width="40" alt="Image">
+                                </div>
+                                <div class="min-w-0 ps-3">
+                                    <a class="nav-link animate-underline stretched-link fs-base fw-semibold p-0 mb-1"
+                                        href="{{ route('second', ['shop', 'catalog-grocery'])}}">
+                                        <span class="animate-target text-truncate">Sauces and ketchup</span>
+                                    </a>
+                                    <div class="fs-xs fw-normal text-body-secondary">219 products</div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-sm-6 col-md-4 col-lg-12 d-flex">
+                            <div class="position-relative d-flex min-w-0 align-items-center">
+                                <div class="d-flex flex-shrink-0 align-items-center justify-content-center bg-body-tertiary rounded-circle"
+                                    style="width: 56px; height: 56px">
+                                    <img src="/img/shop/grocery/categories/08.png" width="40" alt="Image">
+                                </div>
+                                <div class="min-w-0 ps-3">
+                                    <a class="nav-link animate-underline stretched-link fs-base fw-semibold p-0 mb-1"
+                                        href="{{ route('second', ['shop', 'catalog-grocery'])}}">
+                                        <span class="animate-target text-truncate">Dairy and eggs</span>
+                                    </a>
+                                    <div class="fs-xs fw-normal text-body-secondary">146 products</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="col-lg-9">
+                    <div
+                        class="d-flex align-items-center justify-content-between border-bottom pb-3 pb-md-4 mb-3 mb-lg-4">
+                        <h2 class="h3 mb-0">Popular products</h2>
+                        <div class="nav ms-3">
+                            <a class="nav-link animate-underline px-0 py-2" href="{{ route('second', ['shop', 'catalog-grocery'])}}">
+                                <span class="animate-target">View all</span>
+                                <i class="ci-chevron-right fs-base ms-1"></i>
+                            </a>
+                        </div>
+                    </div>
+
+                    <!-- Products grid -->
+                    <div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-3 row-cols-xl-4 g-4">
+
+                        <!-- Item -->
+                        <div class="col">
+                            <div class="card product-card h-100 bg-transparent border-0 shadow-none">
+                                <div class="position-relative z-2">
+                                    <button type="button"
+                                        class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                        aria-label="Add to Wishlist">
+                                        <i class="ci-heart animate-target"></i>
+                                    </button>
+                                    <a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
+                                        <div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
+                                            <img src="/img/shop/grocery/01.png" alt="Image">
+                                        </div>
+                                    </a>
+                                    <div class="position-absolute w-100 start-0 bottom-0">
+                                        <div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
+                                            <div
+                                                class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
+                                                <button type="button" class="btn btn-icon btn-sm btn-primary"
+                                                    data-decrement aria-label="Decrement quantity">
+                                                    <i class="ci-minus fs-sm"></i>
+                                                </button>
+                                                <input type="number"
+                                                    class="form-control form-control-sm bg-primary text-white w-100"
+                                                    value="0" min="0" readonly>
+                                                <button type="button"
+                                                    class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
+                                                    data-increment aria-label="Increment quantity">
+                                                    <span data-count-input-value></span>
+                                                    <i class="ci-plus fs-sm"></i>
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
+                                    <div class="h6 mb-2">$2.15</div>
+                                    <h3 class="fs-sm lh-base mb-0">
+                                        <a class="hover-effect-underline fw-normal"
+                                            href="{{ route('second', ['shop', 'product-grocery']) }}">Muesli Fitness Energy, gluten free</a>
+                                    </h3>
+                                </div>
+                                <div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">500g</div>
+                            </div>
+                        </div>
+
+                        <!-- Item -->
+                        <div class="col">
+                            <div class="card product-card h-100 bg-transparent border-0 shadow-none">
+                                <div class="position-relative z-2">
+                                    <span
+                                        class="badge text-bg-danger position-absolute top-0 start-0 z-2 mt-1 mt-sm-2 ms-1 ms-sm-2">-30%</span>
+                                    <button type="button"
+                                        class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                        aria-label="Add to Wishlist">
+                                        <i class="ci-heart animate-target"></i>
+                                    </button>
+                                    <a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
+                                        <div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
+                                            <img src="/img/shop/grocery/02.png" alt="Image">
+                                        </div>
+                                    </a>
+                                    <div class="position-absolute w-100 start-0 bottom-0">
+                                        <div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
+                                            <div
+                                                class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
+                                                <button type="button" class="btn btn-icon btn-sm btn-primary"
+                                                    data-decrement aria-label="Decrement quantity">
+                                                    <i class="ci-minus fs-sm"></i>
+                                                </button>
+                                                <input type="number"
+                                                    class="form-control form-control-sm bg-primary text-white w-100"
+                                                    value="0" min="0" readonly>
+                                                <button type="button"
+                                                    class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
+                                                    data-increment aria-label="Increment quantity">
+                                                    <span data-count-input-value></span>
+                                                    <i class="ci-plus fs-sm"></i>
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
+                                    <div class="h6 mb-2">$3.12 <del
+                                            class="fs-sm fw-normal text-body-tertiary ms-1">$4.05</del></div>
+                                    <h3 class="fs-sm lh-base mb-0">
+                                        <a class="hover-effect-underline fw-normal"
+                                            href="{{ route('second', ['shop', 'product-grocery']) }}">Fresh orange Klementina, Spain</a>
+                                    </h3>
+                                </div>
+                                <div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">1kg</div>
+                            </div>
+                        </div>
+
+                        <!-- Item -->
+                        <div class="col">
+                            <div class="card product-card h-100 bg-transparent border-0 shadow-none">
+                                <div class="position-relative z-2">
+                                    <button type="button"
+                                        class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                        aria-label="Add to Wishlist">
+                                        <i class="ci-heart animate-target"></i>
+                                    </button>
+                                    <a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
+                                        <div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
+                                            <img src="/img/shop/grocery/03.png" alt="Image">
+                                        </div>
+                                    </a>
+                                    <div class="position-absolute w-100 start-0 bottom-0">
+                                        <div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
+                                            <div
+                                                class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
+                                                <button type="button" class="btn btn-icon btn-sm btn-primary"
+                                                    data-decrement aria-label="Decrement quantity">
+                                                    <i class="ci-minus fs-sm"></i>
+                                                </button>
+                                                <input type="number"
+                                                    class="form-control form-control-sm bg-primary text-white w-100"
+                                                    value="0" min="0" readonly>
+                                                <button type="button"
+                                                    class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
+                                                    data-increment aria-label="Increment quantity">
+                                                    <span data-count-input-value></span>
+                                                    <i class="ci-plus fs-sm"></i>
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
+                                    <div class="h6 mb-2">$0.80</div>
+                                    <h3 class="fs-sm lh-base mb-0">
+                                        <a class="hover-effect-underline fw-normal"
+                                            href="{{ route('second', ['shop', 'product-grocery']) }}">Pepsi soda classic, can</a>
+                                    </h3>
+                                </div>
+                                <div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">330ml</div>
+                            </div>
+                        </div>
+
+                        <!-- Item -->
+                        <div class="col">
+                            <div class="card product-card h-100 bg-transparent border-0 shadow-none">
+                                <div class="position-relative z-2">
+                                    <button type="button"
+                                        class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                        aria-label="Add to Wishlist">
+                                        <i class="ci-heart animate-target"></i>
+                                    </button>
+                                    <a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
+                                        <div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
+                                            <img src="/img/shop/grocery/04.png" alt="Image">
+                                        </div>
+                                    </a>
+                                    <div class="position-absolute w-100 start-0 bottom-0">
+                                        <div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
+                                            <div
+                                                class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
+                                                <button type="button" class="btn btn-icon btn-sm btn-primary"
+                                                    data-decrement aria-label="Decrement quantity">
+                                                    <i class="ci-minus fs-sm"></i>
+                                                </button>
+                                                <input type="number"
+                                                    class="form-control form-control-sm bg-primary text-white w-100"
+                                                    value="0" min="0" readonly>
+                                                <button type="button"
+                                                    class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
+                                                    data-increment aria-label="Increment quantity">
+                                                    <span data-count-input-value></span>
+                                                    <i class="ci-plus fs-sm"></i>
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
+                                    <div class="h6 mb-2">$2.99</div>
+                                    <h3 class="fs-sm lh-base mb-0">
+                                        <a class="hover-effect-underline fw-normal"
+                                            href="{{ route('second', ['shop', 'product-grocery']) }}">Mozzarella mini cheese Granaloro</a>
+                                    </h3>
+                                </div>
+                                <div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">250g</div>
+                            </div>
+                        </div>
+
+                        <!-- Item -->
+                        <div class="col">
+                            <div class="card product-card h-100 bg-transparent border-0 shadow-none">
+                                <div class="position-relative z-2">
+                                    <button type="button"
+                                        class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                        aria-label="Add to Wishlist">
+                                        <i class="ci-heart animate-target"></i>
+                                    </button>
+                                    <a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
+                                        <div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
+                                            <img src="/img/shop/grocery/05.png" alt="Image">
+                                        </div>
+                                    </a>
+                                    <div class="position-absolute w-100 start-0 bottom-0">
+                                        <div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
+                                            <div
+                                                class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
+                                                <button type="button" class="btn btn-icon btn-sm btn-primary"
+                                                    data-decrement aria-label="Decrement quantity">
+                                                    <i class="ci-minus fs-sm"></i>
+                                                </button>
+                                                <input type="number"
+                                                    class="form-control form-control-sm bg-primary text-white w-100"
+                                                    value="0" min="0" readonly>
+                                                <button type="button"
+                                                    class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
+                                                    data-increment aria-label="Increment quantity">
+                                                    <span data-count-input-value></span>
+                                                    <i class="ci-plus fs-sm"></i>
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
+                                    <div class="h6 mb-2">$1.24</div>
+                                    <h3 class="fs-sm lh-base mb-0">
+                                        <a class="hover-effect-underline fw-normal"
+                                            href="{{ route('second', ['shop', 'product-grocery']) }}">Coconut, Indonesia</a>
+                                    </h3>
+                                </div>
+                                <div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">1 coconut</div>
+                            </div>
+                        </div>
+
+                        <!-- Item -->
+                        <div class="col">
+                            <div class="card product-card h-100 bg-transparent border-0 shadow-none">
+                                <div class="position-relative z-2">
+                                    <button type="button"
+                                        class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                        aria-label="Add to Wishlist">
+                                        <i class="ci-heart animate-target"></i>
+                                    </button>
+                                    <a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
+                                        <div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
+                                            <img src="/img/shop/grocery/06.png" alt="Image">
+                                        </div>
+                                    </a>
+                                    <div class="position-absolute w-100 start-0 bottom-0">
+                                        <div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
+                                            <div
+                                                class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
+                                                <button type="button" class="btn btn-icon btn-sm btn-primary"
+                                                    data-decrement aria-label="Decrement quantity">
+                                                    <i class="ci-minus fs-sm"></i>
+                                                </button>
+                                                <input type="number"
+                                                    class="form-control form-control-sm bg-primary text-white w-100"
+                                                    value="0" min="0" readonly>
+                                                <button type="button"
+                                                    class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
+                                                    data-increment aria-label="Increment quantity">
+                                                    <span data-count-input-value></span>
+                                                    <i class="ci-plus fs-sm"></i>
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
+                                    <div class="h6 mb-2">$3.95</div>
+                                    <h3 class="fs-sm lh-base mb-0">
+                                        <a class="hover-effect-underline fw-normal"
+                                            href="{{ route('second', ['shop', 'product-grocery']) }}">Pesto sauce Barilla with parmesan and
+                                            basil</a>
+                                    </h3>
+                                </div>
+                                <div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">200g</div>
+                            </div>
+                        </div>
+
+                        <!-- Item -->
+                        <div class="col">
+                            <div class="card product-card h-100 bg-transparent border-0 shadow-none">
+                                <div class="position-relative z-2">
+                                    <button type="button"
+                                        class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                        aria-label="Add to Wishlist">
+                                        <i class="ci-heart animate-target"></i>
+                                    </button>
+                                    <a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
+                                        <div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
+                                            <img src="/img/shop/grocery/07.png" alt="Image">
+                                        </div>
+                                    </a>
+                                    <div class="position-absolute w-100 start-0 bottom-0">
+                                        <div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
+                                            <div
+                                                class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
+                                                <button type="button" class="btn btn-icon btn-sm btn-primary"
+                                                    data-decrement aria-label="Decrement quantity">
+                                                    <i class="ci-minus fs-sm"></i>
+                                                </button>
+                                                <input type="number"
+                                                    class="form-control form-control-sm bg-primary text-white w-100"
+                                                    value="0" min="0" readonly>
+                                                <button type="button"
+                                                    class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
+                                                    data-increment aria-label="Increment quantity">
+                                                    <span data-count-input-value></span>
+                                                    <i class="ci-plus fs-sm"></i>
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
+                                    <div class="h6 mb-2">$1.99</div>
+                                    <h3 class="fs-sm lh-base mb-0">
+                                        <a class="hover-effect-underline fw-normal"
+                                            href="{{ route('second', ['shop', 'product-grocery']) }}">Fresh mango, Spain</a>
+                                    </h3>
+                                </div>
+                                <div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">1 mango</div>
+                            </div>
+                        </div>
+
+                        <!-- Item -->
+                        <div class="col">
+                            <div class="card product-card h-100 bg-transparent border-0 shadow-none">
+                                <div class="position-relative z-2">
+                                    <button type="button"
+                                        class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                        aria-label="Add to Wishlist">
+                                        <i class="ci-heart animate-target"></i>
+                                    </button>
+                                    <a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
+                                        <div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
+                                            <img src="/img/shop/grocery/08.png" alt="Image">
+                                        </div>
+                                    </a>
+                                    <div class="position-absolute w-100 start-0 bottom-0">
+                                        <div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
+                                            <div
+                                                class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
+                                                <button type="button" class="btn btn-icon btn-sm btn-primary"
+                                                    data-decrement aria-label="Decrement quantity">
+                                                    <i class="ci-minus fs-sm"></i>
+                                                </button>
+                                                <input type="number"
+                                                    class="form-control form-control-sm bg-primary text-white w-100"
+                                                    value="0" min="0" readonly>
+                                                <button type="button"
+                                                    class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
+                                                    data-increment aria-label="Increment quantity">
+                                                    <span data-count-input-value></span>
+                                                    <i class="ci-plus fs-sm"></i>
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
+                                    <div class="h6 mb-2">$2.40</div>
+                                    <h3 class="fs-sm lh-base mb-0">
+                                        <a class="hover-effect-underline fw-normal"
+                                            href="{{ route('second', ['shop', 'product-grocery']) }}">Fresh green asparagus, bunch</a>
+                                    </h3>
+                                </div>
+                                <div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">300g</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Lifestyle categories that turns into carousel on screen < 992px (lg breackpoint) -->
+        <section class="container pb-5 mb-2 mb-sm-3 mb-lg-4 mb-xl-5">
+            <h2 class="h3 text-center pb-1 pb-sm-2 pb-md-3 pb-lg-0 mb-4 mb-lg-5">Shop by lifestyle</h2>
+            <div class="swiper pb-lg-2"
+                data-swiper='{
+          "slidesPerView": 1,
+          "spaceBetween": 24,
+          "pagination": {
+            "el": ".swiper-pagination",
+            "clickable": true
+          },
+          "breakpoints": {
+            "500": {
+              "slidesPerView": 2
+            },
+            "768": {
+              "slidesPerView": 3
+            },
+            "992": {
+              "slidesPerView": 4
+            }
+          }
+        }'>
+                <div class="swiper-wrapper">
+
+                    <!-- Category -->
+                    <div class="swiper-slide text-center">
+                        <div
+                            class="position-relative d-inline-block text-dark-emphasis bg-warning-subtle rounded-circle p-5 mb-4">
+                            <svg class="m-2" xmlns="http://www.w3.org/2000/svg" width="76" height="76"
+                                viewBox="0 0 76 76" fill="none">
+                                <path
+                                    d="M62.631 13.369l-7.214 7.214M20.583 55.417l-7.214 7.214M38 51.037c0-11.315-13.926-11.315-13.926-11.315s0 13.926 11.315 13.926H38m0-2.611v2.611m0-2.611c0-11.315 13.926-11.315 13.926-11.315s0 13.926-11.315 13.926H38m0-14.222c0-11.315-13.926-11.315-13.926-11.315s0 13.926 11.315 13.926H38m0-2.611v2.611m0-2.611c0-11.315 13.926-11.315 13.926-11.315s0 13.926-11.315 13.926H38m0 18.585v-6.967M72.833 38c0 19.238-15.595 34.833-34.833 34.833S3.167 57.238 3.167 38 18.762 3.167 38 3.167 72.833 18.762 72.833 38zM38 15.378s9.847 9.849 1.846 17.849L38 35.074l-1.846-1.847C28.153 25.227 38 15.378 38 15.378z"
+                                    stroke="currentColor" stroke-width="2.5" stroke-miterlimit="10"
+                                    stroke-linecap="round" stroke-linejoin="round" />
+                            </svg>
+                        </div>
+                        <h3 class="h5 mb-2">
+                            <a class="animate-underline stretched-link" href="{{ route('second', ['shop', 'catalog-grocery'])}}">
+                                <span class="animate-target">Gluten-Free</span>
+                            </a>
+                        </h3>
+                        <p class="fs-sm mb-0">Foods that don't contain gluten</p>
+                    </div>
+
+                    <!-- Category -->
+                    <div class="swiper-slide text-center">
+                        <div
+                            class="position-relative d-inline-block text-dark-emphasis bg-success-subtle rounded-circle p-5 mb-4">
+                            <svg class="m-2" xmlns="http://www.w3.org/2000/svg" width="76" height="76"
+                                viewBox="0 0 76 76" fill="none">
+                                <g stroke="currentColor" stroke-width="2.5" stroke-miterlimit="10">
+                                    <g stroke-linecap="round" stroke-linejoin="round">
+                                        <path
+                                            d="M16.842 37.347c5.205 6.789 12.251 18.802 12.251 36.436h17.812c0-17.634 7.066-29.648 12.251-36.436m-7.599-3.958c-3.048 4.71-6.452 10.984-9.084 18.565V32.142" />
+                                        <path d="M33.547 32.162v19.811c-2.632-7.56-6.036-13.834-9.104-18.584" />
+                                    </g>
+                                    <path
+                                        d="M62.502 15.577c-.079 0-.139.02-.218.02-1.029-5.086-5.522-8.926-10.905-8.926-1.405 0-2.731.297-3.958.752-1.979-3.127-5.423-5.205-9.401-5.205-3.958 0-7.422 2.098-9.401 5.205-1.227-.475-2.553-.752-3.958-.752-5.403 0-9.896 3.84-10.905 8.926-.079 0-.139-.02-.218-.02-6.155 0-11.281 4.988-11.281 11.143s5.126 11.143 11.281 11.143c3.76 0 7.046-1.88 9.045-4.73.673.158 1.366.277 2.078.277 2.692 0 5.067-1.207 6.709-3.107 1.623 1.88 3.978 3.107 6.65 3.107s5.027-1.227 6.65-3.107c1.643 1.88 4.018 3.107 6.709 3.107.712 0 1.405-.099 2.078-.277 2.019 2.85 5.304 4.73 9.045 4.73 6.155 0 11.281-4.987 11.281-11.143s-5.126-11.143-11.281-11.143z"
+                                        stroke-linejoin="round" />
+                                </g>
+                            </svg>
+                        </div>
+                        <h3 class="h5 mb-2">
+                            <a class="animate-underline stretched-link" href="{{ route('second', ['shop', 'catalog-grocery'])}}">
+                                <span class="animate-target">Vegan</span>
+                            </a>
+                        </h3>
+                        <p class="fs-sm mb-0">Vegetable based goodness</p>
+                    </div>
+
+                    <!-- Category -->
+                    <div class="swiper-slide text-center">
+                        <div
+                            class="position-relative d-inline-block text-dark-emphasis bg-info-subtle rounded-circle p-5 mb-4">
+                            <svg class="m-2" xmlns="http://www.w3.org/2000/svg" width="76" height="76"
+                                viewBox="0 0 76 76" fill="none">
+                                <path d="M9.5 72.8336C9.5 72.8336 9.875 42.7074 38 34.8336" stroke="currentColor"
+                                    stroke-width="2.5" stroke-miterlimit="10" stroke-linecap="round" />
+                                <path
+                                    d="M11.1264 58.4427C7.13273 49.8272 -11.3834 1.3653 66.3117 6.74996C67.4008 6.74996 68.49 7.82689 68.8531 8.90382C70.6684 18.9552 74.6621 64.1863 13.6678 59.8786C12.2156 59.8786 11.4895 59.5196 11.1264 58.4427Z"
+                                    stroke="currentColor" stroke-width="2.5" stroke-miterlimit="10" />
+                            </svg>
+                        </div>
+                        <h3 class="h5 mb-2">
+                            <a class="animate-underline stretched-link" href="{{ route('second', ['shop', 'catalog-grocery'])}}">
+                                <span class="animate-target">Plant based</span>
+                            </a>
+                        </h3>
+                        <p class="fs-sm mb-0">Based on herbal ingredients</p>
+                    </div>
+
+                    <!-- Category -->
+                    <div class="swiper-slide text-center">
+                        <div
+                            class="position-relative d-inline-block text-dark-emphasis bg-danger-subtle rounded-circle p-5 mb-4">
+                            <svg class="m-2" xmlns="http://www.w3.org/2000/svg" width="76" height="76"
+                                viewBox="0 0 76 76" fill="none" stroke="currentColor" stroke-width="2.5"
+                                stroke-miterlimit="10" stroke-linejoin="round">
+                                <path
+                                    d="M58.59 33.535c-2.219-3.028-3.595-6.515-4.043-10.133-1.227-9.91-7.437-16.42-6.862-15.718-4.878-5.956-14.1-6.035-19.083-.163-4.128 4.863-6.442 10.345-7.191 16.12-.454 3.502-1.759 6.871-3.919 9.785-3.034 4.093-4.824 9.13-4.824 14.577 0 13.7 11.607 24.962 25.584 24.829 13.876-.132 25.083-11.198 25.083-24.829 0-5.399-1.758-10.395-4.744-14.469z" />
+                                <path
+                                    d="M48.871 48.815c0 5.885-4.867 10.655-10.871 10.655S27.129 54.7 27.129 48.815 31.996 34.495 38 34.495s10.871 8.435 10.871 14.32z" />
+                            </svg>
+                        </div>
+                        <h3 class="h5 mb-2">
+                            <a class="animate-underline stretched-link" href="{{ route('second', ['shop', 'catalog-grocery'])}}">
+                                <span class="animate-target">Keto</span>
+                            </a>
+                        </h3>
+                        <p class="fs-sm mb-0">Good fats served in food</p>
+                    </div>
+                </div>
+
+                <!-- Slider pagination (Bullets) -->
+                <div class="swiper-pagination position-static mt-3 mt-sm-4"></div>
+            </div>
+        </section>
+
+
+        <!-- Banner + Special products -->
+        <section class="container pt-xl-2 pb-5 mb-2 mb-sm-3 mb-lg-4 mb-xl-5">
+            <div class="row">
+
+                <!-- Banner -->
+                <div class="col-sm-5 col-md-4 col-lg-3 mb-5 mb-sm-0">
+                    <div class="pe-lg-2 pe-xl-4">
+                        <div class="rounded-4 overflow-hidden" style="background-color: #a6cddc"
+                            data-bs-theme="light">
+                            <div class="pt-3 px-3 mt-3 mx-3">
+                                <h4 class="mb-2 mb-xl-3">Make breakfast healthy and easy</h4>
+                                <div class="nav">
+                                    <a class="nav-link animate-underline stretched-link px-0" href="#!">
+                                        <span class="animate-target">Shop now</span>
+                                        <i class="ci-chevron-right fs-base mt-1 ms-1"></i>
+                                    </a>
+                                </div>
+                            </div>
+                            <div class="ratio mt-n2" style="--cz-aspect-ratio: calc(240 / 282 * 100%)">
+                                <img src="/img/shop/grocery/banner.jpg" alt="Banner">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Special products carousel -->
+                <div class="col-sm-7 col-md-8 col-lg-9">
+                    <div
+                        class="d-flex align-items-center justify-content-between border-bottom pb-3 pb-md-4 mb-3 mb-lg-4">
+                        <h2 class="h3 mb-0">Special products</h2>
+                        <div class="nav ms-3">
+                            <a class="nav-link animate-underline px-0 py-2" href="{{ route('second', ['shop', 'catalog-grocery'])}}">
+                                <span class="animate-target text-nowrap">View all</span>
+                                <i class="ci-chevron-right fs-base ms-1"></i>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="swiper"
+                        data-swiper='{
+              "slidesPerView": 2,
+              "spaceBetween": 24,
+              "pagination": {
+                "el": ".swiper-pagination",
+                "clickable": true
+              },
+              "breakpoints": {
+                "840": {
+                  "slidesPerView": 3
+                },
+                "992": {
+                  "slidesPerView": 4
+                }
+              }
+            }'>
+                        <div class="swiper-wrapper">
+
+                            <!-- Product -->
+                            <div class="swiper-slide h-auto">
+                                <div class="card product-card h-100 bg-transparent border-0 shadow-none">
+                                    <div class="position-relative z-2">
+                                        <button type="button"
+                                            class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                            aria-label="Add to Wishlist">
+                                            <i class="ci-heart animate-target"></i>
+                                        </button>
+                                        <a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
+                                            <div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
+                                                <img src="/img/shop/grocery/09.png" alt="Image">
+                                            </div>
+                                        </a>
+                                        <div class="position-absolute w-100 start-0 bottom-0">
+                                            <div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
+                                                <div
+                                                    class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
+                                                    <button type="button" class="btn btn-icon btn-sm btn-primary"
+                                                        data-decrement aria-label="Decrement quantity">
+                                                        <i class="ci-minus fs-sm"></i>
+                                                    </button>
+                                                    <input type="number"
+                                                        class="form-control form-control-sm bg-primary text-white w-100"
+                                                        value="0" min="0" readonly>
+                                                    <button type="button"
+                                                        class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
+                                                        data-increment aria-label="Increment quantity">
+                                                        <span data-count-input-value></span>
+                                                        <i class="ci-plus fs-sm"></i>
+                                                    </button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
+                                        <div class="h6 mb-2">$18.60</div>
+                                        <h3 class="fs-sm lh-base mb-0">
+                                            <a class="hover-effect-underline fw-normal"
+                                                href="{{ route('second', ['shop', 'product-grocery']) }}">Pure virgin olive oil Basso</a>
+                                        </h3>
+                                    </div>
+                                    <div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">1000ml</div>
+                                </div>
+                            </div>
+
+                            <!-- Product -->
+                            <div class="swiper-slide h-auto">
+                                <div class="card product-card h-100 bg-transparent border-0 shadow-none">
+                                    <div class="position-relative z-2">
+                                        <button type="button"
+                                            class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                            aria-label="Add to Wishlist">
+                                            <i class="ci-heart animate-target"></i>
+                                        </button>
+                                        <a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
+                                            <div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
+                                                <img src="/img/shop/grocery/10.png" alt="Image">
+                                            </div>
+                                        </a>
+                                        <div class="position-absolute w-100 start-0 bottom-0">
+                                            <div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
+                                                <div
+                                                    class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
+                                                    <button type="button" class="btn btn-icon btn-sm btn-primary"
+                                                        data-decrement aria-label="Decrement quantity">
+                                                        <i class="ci-minus fs-sm"></i>
+                                                    </button>
+                                                    <input type="number"
+                                                        class="form-control form-control-sm bg-primary text-white w-100"
+                                                        value="0" min="0" readonly>
+                                                    <button type="button"
+                                                        class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
+                                                        data-increment aria-label="Increment quantity">
+                                                        <span data-count-input-value></span>
+                                                        <i class="ci-plus fs-sm"></i>
+                                                    </button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
+                                        <div class="h6 mb-2">$9.15</div>
+                                        <h3 class="fs-sm lh-base mb-0">
+                                            <a class="hover-effect-underline fw-normal"
+                                                href="{{ route('second', ['shop', 'product-grocery']) }}">Fresh pork butt steaks with rosemary</a>
+                                        </h3>
+                                    </div>
+                                    <div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">500g</div>
+                                </div>
+                            </div>
+
+                            <!-- Product -->
+                            <div class="swiper-slide h-auto">
+                                <div class="card product-card h-100 bg-transparent border-0 shadow-none">
+                                    <div class="position-relative z-2">
+                                        <button type="button"
+                                            class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                            aria-label="Add to Wishlist">
+                                            <i class="ci-heart animate-target"></i>
+                                        </button>
+                                        <a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
+                                            <div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
+                                                <img src="/img/shop/grocery/11.png" alt="Image">
+                                            </div>
+                                        </a>
+                                        <div class="position-absolute w-100 start-0 bottom-0">
+                                            <div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
+                                                <div
+                                                    class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
+                                                    <button type="button" class="btn btn-icon btn-sm btn-primary"
+                                                        data-decrement aria-label="Decrement quantity">
+                                                        <i class="ci-minus fs-sm"></i>
+                                                    </button>
+                                                    <input type="number"
+                                                        class="form-control form-control-sm bg-primary text-white w-100"
+                                                        value="0" min="0" readonly>
+                                                    <button type="button"
+                                                        class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
+                                                        data-increment aria-label="Increment quantity">
+                                                        <span data-count-input-value></span>
+                                                        <i class="ci-plus fs-sm"></i>
+                                                    </button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
+                                        <div class="h6 mb-2">$3.40</div>
+                                        <h3 class="fs-sm lh-base mb-0">
+                                            <a class="hover-effect-underline fw-normal"
+                                                href="{{ route('second', ['shop', 'product-grocery']) }}">Fresh red grapefruit</a>
+                                        </h3>
+                                    </div>
+                                    <div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">1kg</div>
+                                </div>
+                            </div>
+
+                            <!-- Product -->
+                            <div class="swiper-slide h-auto">
+                                <div class="card product-card h-100 bg-transparent border-0 shadow-none">
+                                    <div class="position-relative z-2">
+                                        <button type="button"
+                                            class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                            aria-label="Add to Wishlist">
+                                            <i class="ci-heart animate-target"></i>
+                                        </button>
+                                        <a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
+                                            <div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
+                                                <img src="/img/shop/grocery/12.png" alt="Image">
+                                            </div>
+                                        </a>
+                                        <div class="position-absolute w-100 start-0 bottom-0">
+                                            <div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
+                                                <div
+                                                    class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
+                                                    <button type="button" class="btn btn-icon btn-sm btn-primary"
+                                                        data-decrement aria-label="Decrement quantity">
+                                                        <i class="ci-minus fs-sm"></i>
+                                                    </button>
+                                                    <input type="number"
+                                                        class="form-control form-control-sm bg-primary text-white w-100"
+                                                        value="0" min="0" readonly>
+                                                    <button type="button"
+                                                        class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
+                                                        data-increment aria-label="Increment quantity">
+                                                        <span data-count-input-value></span>
+                                                        <i class="ci-plus fs-sm"></i>
+                                                    </button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
+                                        <div class="h6 mb-2">$2.59</div>
+                                        <h3 class="fs-sm lh-base mb-0">
+                                            <a class="hover-effect-underline fw-normal"
+                                                href="{{ route('second', ['shop', 'product-grocery']) }}">Soft creme cheese with greens Exquisa</a>
+                                        </h3>
+                                    </div>
+                                    <div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">150g</div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Slider pagination (Bullets) -->
+                        <div class="swiper-pagination position-static mt-3 mt-sm-4"></div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Recipes -->
+        <section class="container pb-5 mb-2 mb-sm-3 mb-lg-4">
+            <h2 class="h3 mb-4">Recipes</h2>
+            <div class="row">
+
+                <!-- Recipes list -->
+                <div class="col-lg-5 mb-4 mb-lg-0">
+                    <div class="d-flex flex-column gap-1 gap-md-2">
+
+                        <!-- Recipe -->
+                        <div class="position-relative d-flex align-items-start align-items-sm-center mb-4">
+                            <div class="ratio" style="--cz-aspect-ratio: calc(140 / 196 * 100%); max-width: 196px">
+                                <img src="/img/home/grocery/recipes/01.jpg" class="rounded" alt="Image">
+                            </div>
+                            <div class="ps-3 ps-xl-4">
+                                <h3 class="fs-base fw-medium lh-base mb-2 mb-xl-3">
+                                    <a class="hover-effect-underline stretched-link" href="#!">Garden salad with a
+                                        mix of lettuce, cucumber and tomato</a>
+                                </h3>
+                                <div class="d-flex gap-3 gap-xl-4 fs-sm text-body-secondary">
+                                    <div class="d-flex align-items-center text-nowrap">
+                                        <i class="ci-clock fs-base me-2"></i>
+                                        30 min
+                                    </div>
+                                    <div class="d-flex align-items-center text-nowrap">
+                                        <i class="ci-zap fs-base me-2"></i>
+                                        Easy
+                                    </div>
+                                    <div class="d-flex align-items-center text-nowrap">
+                                        <i class="ci-food fs-base me-2"></i>
+                                        4 por
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Recipe -->
+                        <div class="position-relative d-flex align-items-start align-items-sm-center mb-4">
+                            <div class="ratio" style="--cz-aspect-ratio: calc(140 / 196 * 100%); max-width: 196px">
+                                <img src="/img/home/grocery/recipes/02.jpg" class="rounded" alt="Image">
+                            </div>
+                            <div class="ps-3 ps-xl-4">
+                                <h3 class="fs-base fw-medium lh-base mb-2 mb-xl-3">
+                                    <a class="hover-effect-underline stretched-link" href="#!">Raspberry fresh
+                                        lemonade with lemon, strawberry syrup and mint</a>
+                                </h3>
+                                <div class="d-flex gap-3 gap-xl-4 fs-sm text-body-secondary">
+                                    <div class="d-flex align-items-center text-nowrap">
+                                        <i class="ci-clock fs-base me-2"></i>
+                                        50 min
+                                    </div>
+                                    <div class="d-flex align-items-center text-nowrap">
+                                        <i class="ci-zap fs-base me-2"></i>
+                                        Hard
+                                    </div>
+                                    <div class="d-flex align-items-center text-nowrap">
+                                        <i class="ci-food fs-base me-2"></i>
+                                        8 por
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Recipe -->
+                        <div class="position-relative d-flex align-items-start align-items-sm-center mb-4">
+                            <div class="ratio" style="--cz-aspect-ratio: calc(140 / 196 * 100%); max-width: 196px">
+                                <img src="/img/home/grocery/recipes/03.jpg" class="rounded" alt="Image">
+                            </div>
+                            <div class="ps-3 ps-xl-4">
+                                <h3 class="fs-base fw-medium lh-base mb-2 mb-xl-3">
+                                    <a class="hover-effect-underline stretched-link" href="#!">Penne pasta with
+                                        spinach and zucchini in a creamy sauce</a>
+                                </h3>
+                                <div class="d-flex gap-3 gap-xl-4 fs-sm text-body-secondary">
+                                    <div class="d-flex align-items-center text-nowrap">
+                                        <i class="ci-clock fs-base me-2"></i>
+                                        25 min
+                                    </div>
+                                    <div class="d-flex align-items-center text-nowrap">
+                                        <i class="ci-zap fs-base me-2"></i>
+                                        Easy
+                                    </div>
+                                    <div class="d-flex align-items-center text-nowrap">
+                                        <i class="ci-food fs-base me-2"></i>
+                                        2 por
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="nav mt-n2 mt-lg-n1 mt-xxl-0">
+                        <a class="nav-link animate-underline px-0 py-2" href="#!">
+                            <span class="animate-target text-nowrap">View all</span>
+                            <i class="ci-chevron-right fs-base ms-1"></i>
+                        </a>
+                    </div>
+                </div>
+
+                <!-- Book -->
+                <div class="col-lg-7">
+                    <div class="border rounded-5 p-4">
+                        <div
+                            class="d-sm-flex align-items-start align-items-md-center align-items-lg-start align-items-xl-center p-md-2 p-lg-0 p-xl-2 p-xxl-3">
+                            <a class="ratio d-block w-100 mb-4 mb-sm-0" href="#!"
+                                style="--cz-aspect-ratio: calc(404 / 286 * 100%); max-width: 286px">
+                                <img src="/img/home/grocery/recipes/book-cover.jpg" class="rounded-4"
+                                    alt="Book cover">
+                            </a>
+                            <div class="w-100 ps-sm-4 ms-md-2 ms-lg-0 ms-xl-2 ms-xxl-3">
+                                <span class="badge bg-body-secondary text-body-emphasis rounded-pill mb-3">Cookbook</span>
+                                <h3 class="h4 mb-2">The Best in Gastronomy</h3>
+                                <div class="fs-sm mb-3">Author: <span class="text-dark-emphasis fw-medium">Dana
+                                        Chambers</span></div>
+                                <p class="fs-sm pb-1 pb-xl-3">An exquisite cookbook that takes readers on a culinary
+                                    journey around the world. With stunning photography and detailed instructions ...</p>
+                                <div class="h4">$12.40</div>
+                                <a class="btn btn-dark rounded-pill" href="#!">
+                                    Shop book
+                                    <i class="ci-chevron-right fs-base ms-1 me-n1"></i>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- CTA banners -->
+        <section class="container pb-5 mb-2 mb-sm-3 mb-lg-4 mb-xl-5">
+            <div class="row">
+
+                <!-- Mobile app CTA -->
+                <div class="col-lg-7 mb-4 mb-lg-0">
+                    <div
+                        class="d-flex flex-column flex-sm-row align-items-center h-100 bg-body-tertiary rounded-5 overflow-hidden">
+                        <div class="order-sm-2 text-center text-sm-start pt-4 px-4 pb-2 pb-sm-4 mt-3 mt-sm-0">
+                            <h2 class="h4 mb-4">Make online shop easier with our Cartzilla App</h2>
+                            <div
+                                class="d-flex flex-sm-wrap justify-content-center justify-content-sm-start gap-2 gap-sm-3">
+                                <a class="btn btn-market btn-lg btn-light rounded-pill flex-shrink-0" href="#!"
+                                    aria-label="Download on Google Play">
+                                    <svg class="flex-shrink-0 ms-n1 me-2" xmlns="http://www.w3.org/2000/svg"
+                                        width="24" height="24" viewBox="0 0 24 24" fill="none">
+                                        <path
+                                            d="M19.665 10.561l-3.251-1.878-3.329 3.329 3.328 3.329 3.263-1.884c.509-.309.812-.849.812-1.444s-.304-1.135-.823-1.451z"
+                                            fill="#ffce00" />
+                                        <path
+                                            d="M13.085 12.011L4.018 2.879a1.71 1.71 0 0 0-.507 1.216v15.804a1.71 1.71 0 0 0 .507 1.217l9.067-9.105z"
+                                            fill="#01daff" />
+                                        <path
+                                            d="M13.086 12.011l3.329-3.329.005-.005-4.46-2.568L6.08 2.654c-.529-.327-1.171-.338-1.712-.034a2.54 2.54 0 0 0-.349.259l9.067 9.132z"
+                                            fill="#00f076" />
+                                        <path
+                                            d="M4.019 21.116c.113.101.225.18.349.259.27.146.552.225.834.225.304 0 .597-.09.867-.248l5.891-3.439 4.46-2.568-.005-.005-3.329-3.329-9.067 9.104z"
+                                            fill="#f63448" />
+                                    </svg>
+                                    <svg class="flex-shrink-0" xmlns="http://www.w3.org/2000/svg" width="77"
+                                        height="24" viewBox="0 0 77 24" fill="currentColor">
+                                        <path
+                                            d="M24.575 9.45c-2.184 0-3.914 1.704-3.914 4.071 0 2.272 1.729 4.071 3.914 4.071s3.914-1.704 3.914-4.071c0-2.461-1.729-4.071-3.914-4.071zm0 6.438c-1.183 0-2.184-1.041-2.184-2.462s1.001-2.462 2.184-2.462 2.184.947 2.184 2.462c0 1.42-1.001 2.462-2.184 2.462zM16.11 9.45c-2.184 0-3.914 1.704-3.914 4.071 0 2.272 1.729 4.071 3.914 4.071s3.914-1.704 3.914-4.071c0-2.461-1.729-4.071-3.914-4.071zm0 6.438c-1.183 0-2.184-1.041-2.184-2.462s1.001-2.462 2.184-2.462 2.184.947 2.184 2.462c0 1.42-1.001 2.462-2.184 2.462zM6.007 10.681v1.704h3.914c-.091.947-.455 1.704-.91 2.177-.546.568-1.456 1.231-3.004 1.231-2.457 0-4.278-1.988-4.278-4.544s1.911-4.544 4.278-4.544c1.274 0 2.275.568 3.004 1.231l1.183-1.231C9.193 5.757 7.918 5 6.098 5 2.822 5 0 7.84 0 11.249s2.822 6.249 6.098 6.249c1.82 0 3.095-.568 4.187-1.799 1.092-1.136 1.456-2.745 1.456-3.976 0-.379 0-.757-.091-1.041H6.007zm41.322 1.325c-.364-.947-1.274-2.556-3.277-2.556s-3.641 1.61-3.641 4.071c0 2.272 1.638 4.071 3.823 4.071 1.729 0 2.822-1.136 3.186-1.799l-1.274-.947c-.455.663-1.001 1.136-1.911 1.136s-1.456-.379-1.911-1.231l5.188-2.272-.182-.473zm-5.279 1.326c0-1.515 1.183-2.367 2.002-2.367.637 0 1.274.379 1.456.852l-3.459 1.515zm-4.278 3.882h1.729V5.379h-1.729v11.834zm-2.73-6.911c-.455-.473-1.183-.947-2.093-.947-1.911 0-3.732 1.799-3.732 4.071s1.729 3.976 3.732 3.976c.91 0 1.638-.473 2.002-.947h.091v.568c0 1.515-.819 2.367-2.093 2.367-1.001 0-1.729-.757-1.911-1.42l-1.456.663C30.036 19.675 31.128 21 33.039 21c2.002 0 3.641-1.231 3.641-4.166V9.639h-1.638v.663zm-2.002 5.586c-1.183 0-2.184-1.041-2.184-2.462s1.001-2.462 2.184-2.462 2.093 1.041 2.093 2.462-.91 2.462-2.093 2.462zM55.247 5.379h-4.096v11.834h1.729v-4.45h2.367c1.911 0 3.732-1.42 3.732-3.692s-1.82-3.692-3.732-3.692zm.091 5.681h-2.457V6.988h2.457c1.274 0 2.002 1.136 2.002 1.988-.091 1.041-.819 2.083-2.002 2.083zm10.467-1.704c-1.274 0-2.549.568-3.004 1.799l1.547.663c.364-.663.91-.852 1.547-.852.91 0 1.729.568 1.82 1.515v.095c-.273-.189-1.001-.473-1.729-.473-1.638 0-3.277.947-3.277 2.651 0 1.609 1.365 2.651 2.821 2.651 1.183 0 1.729-.568 2.184-1.136h.091v.947h1.638v-4.544c-.182-2.083-1.729-3.314-3.641-3.314zm-.182 6.533c-.546 0-1.365-.284-1.365-1.041 0-.947 1.001-1.231 1.82-1.231.728 0 1.092.189 1.547.379-.182 1.136-1.092 1.894-2.002 1.894zm9.557-6.249l-1.911 5.112h-.091l-2.002-5.112h-1.82l3.004 7.195-1.729 3.976h1.729L77 9.639h-1.82zm-15.291 7.574h1.729V5.379h-1.729v11.834z" />
+                                    </svg>
+                                </a>
+                                <a class="btn btn-market btn-lg btn-light rounded-pill flex-shrink-0" href="#!"
+                                    aria-label="Download on App Store">
+                                    <i class="ci-apple lead ms-n1 me-2"></i>
+                                    <svg class="flex-shrink-0" xmlns="http://www.w3.org/2000/svg" width="77"
+                                        height="24" viewBox="0 0 77 24" fill="currentColor">
+                                        <path
+                                            d="M40.713 15.797c.701-.624 1.055-1.431 1.055-2.427 0-.806-.242-1.486-.733-2.032-.483-.546-1.232-1.02-2.255-1.423-.838-.324-1.418-.625-1.732-.901a1.41 1.41 0 0 1-.548-1.138 1.39 1.39 0 0 1 .475-1.059c.379-.316.91-.482 1.579-.482.854 0 1.611.182 2.288.538l.483-1.518c-.717-.372-1.619-.553-2.699-.553-1.216 0-2.191.308-2.924.917a2.94 2.94 0 0 0-1.103 2.356c0 1.463 1.039 2.577 3.142 3.344.765.277 1.313.577 1.643.901a1.63 1.63 0 0 1 .491 1.194c0 .53-.201.957-.604 1.273-.395.316-.959.474-1.675.474-.999 0-1.917-.245-2.755-.727l-.443 1.557c.773.482 1.796.727 3.077.727 1.386 0 2.465-.34 3.238-1.02zm-31.706.846h2.03L7.195 4.966H4.826L1 16.644h1.974l1.055-3.431h3.867l1.112 3.431zM6.558 8.729l1.007 3.044H4.367l.991-3.044.564-2.198h.04l.596 2.198zm13.122 6.997c.797-.83 1.192-1.961 1.192-3.392 0-1.289-.338-2.316-1.031-3.107-.677-.783-1.514-1.178-2.529-1.178-1.289 0-2.255.506-2.892 1.51h-.032l-.105-1.336h-1.675l.072 2.767v9.068h1.909v-4.42c.499.798 1.313 1.194 2.449 1.194 1.047 0 1.933-.364 2.642-1.107zm-1.313-5.353c.379.53.564 1.202.564 2.024 0 .893-.201 1.605-.604 2.15-.403.538-.959.814-1.675.814-.612 0-1.112-.213-1.49-.633s-.572-.941-.572-1.55v-1.407c0-.15.032-.34.089-.569a2.11 2.11 0 0 1 .749-1.202c.387-.3.814-.459 1.281-.459a1.96 1.96 0 0 1 1.659.83zm12.366 1.961c0 1.431-.395 2.562-1.192 3.392-.709.743-1.595 1.107-2.642 1.107-1.136 0-1.949-.395-2.449-1.194v4.42H22.54v-9.068l-.072-2.767h1.675l.105 1.336h.032c.636-1.004 1.603-1.51 2.892-1.51 1.015 0 1.853.395 2.529 1.178.693.791 1.031 1.818 1.031 3.107zm-1.941.063c0-.822-.185-1.494-.564-2.024a1.96 1.96 0 0 0-1.659-.83c-.467 0-.894.158-1.281.459-.379.308-.628.704-.749 1.202-.056.229-.089.419-.089.569v1.407c0 .609.193 1.131.572 1.55s.878.633 1.49.633c.717 0 1.281-.277 1.676-.814.411-.546.604-1.257.604-2.15zM48.083 9.63h-2.102v4.087c0 1.036.37 1.557 1.112 1.557.338 0 .62-.032.846-.087l.056 1.423c-.379.134-.87.206-1.482.206-.757 0-1.337-.229-1.764-.68s-.636-1.21-.636-2.269V9.623h-1.248V8.223h1.249V6.681l1.869-.553v2.095h2.102V9.63zm8.329 5.922c.749-.83 1.128-1.89 1.128-3.186 0-1.257-.362-2.285-1.096-3.075-.765-.822-1.78-1.233-3.037-1.233-1.305 0-2.344.419-3.117 1.249-.765.83-1.152 1.897-1.152 3.202 0 1.249.37 2.285 1.12 3.099s1.756 1.225 3.013 1.225c1.305 0 2.352-.427 3.142-1.281zm-1.353-5.131c.338.553.508 1.21.508 1.984s-.177 1.439-.524 2.008c-.419.68-.991 1.02-1.716 1.02-.741 0-1.321-.332-1.732-1.004-.338-.546-.508-1.21-.508-1.984 0-.799.161-1.471.508-2.024.395-.672.983-1.004 1.748-1.004.741 0 1.313.332 1.716 1.004zm8.683-.553c-.185-.032-.387-.047-.604-.047-.669 0-1.192.245-1.555.743-.314.435-.475.996-.475 1.66v4.419h-1.909v-5.771l-.056-2.649h1.659l.072 1.613h.056c.201-.553.516-1.004.951-1.336.427-.3.886-.451 1.377-.451a4.09 4.09 0 0 1 .475.032l.008 1.787zm8.451 3.012c.048-.229.072-.514.072-.846 0-1.051-.258-1.929-.765-2.656-.628-.901-1.571-1.352-2.803-1.352-1.257 0-2.255.451-2.997 1.352-.709.846-1.063 1.905-1.063 3.17 0 1.289.379 2.324 1.136 3.091s1.804 1.154 3.133 1.154c1.104 0 2.062-.174 2.876-.522l-.298-1.297c-.693.261-1.466.395-2.312.395-.765 0-1.386-.198-1.869-.585-.532-.435-.806-1.075-.83-1.905h5.719zm-2.119-2.767c.258.403.387.886.371 1.439l-3.963-.008c.056-.561.25-1.051.564-1.455a1.82 1.82 0 0 1 1.514-.759c.677 0 1.184.261 1.514.783z" />
+                                    </svg>
+                                </a>
+                            </div>
+                        </div>
+                        <div class="ratio align-self-sm-end order-sm-1 rtl-flip"
+                            style="--cz-aspect-ratio: calc(284 / 330 * 100%); max-width: 330px">
+                            <img src="/img/home/grocery/banner01.png" alt="Image">
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Feedback CTA -->
+                <div class="col-lg-5">
+                    <div class="d-flex align-items-center h-100 bg-body-tertiary rounded-5 overflow-hidden">
+                        <div class="ratio align-self-end rtl-flip"
+                            style="--cz-aspect-ratio: calc(284 / 244 * 100%); max-width: 244px">
+                            <img src="/img/home/grocery/banner02.png" alt="Image">
+                        </div>
+                        <div class="p-4">
+                            <h2 class="h4 mb-sm-4">We'd love to hear what you think!</h2>
+                            <div class="nav mt-n2 mt-sm-n1 mt-lg-0">
+                                <a class="nav-link animate-underline px-0 py-2" href="#!">
+                                    <span class="animate-target text-nowrap">Give a feedback</span>
+                                    <i class="ci-chevron-right fs-base ms-1"></i>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    @include('layouts.partials/footer2')
+@endsection
+
+@section('scripts')
+@endsection
diff --git a/resources/views/home/marketplace.blade.php b/resources/views/home/marketplace.blade.php
new file mode 100644
index 0000000..17f24d9
--- /dev/null
+++ b/resources/views/home/marketplace.blade.php
@@ -0,0 +1,1579 @@
+@extends('layouts.landing', ['title' => 'Marketplace'])
+
+@section('content')
+    <div class="offcanvas offcanvas-top" id="searchBox" data-bs-backdrop="static" tabindex="-1">
+        <div class="offcanvas-header border-bottom p-0 py-lg-1">
+            <form class="container d-flex align-items-center">
+                <input type="search" class="form-control form-control-lg fs-lg border-0 rounded-0 py-3 ps-0"
+                    placeholder="Search the products" data-autofocus="offcanvas">
+                <button type="reset" class="btn-close fs-lg" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+            </form>
+        </div>
+        <div class="offcanvas-body px-0">
+            <div class="container text-center">
+                <svg class="text-body-tertiary opacity-60 mb-4" xmlns="http://www.w3.org/2000/svg" width="60"
+                    viewBox="0 0 512 512" fill="currentColor">
+                    <path
+                        d="M340.115,361.412l-16.98-16.98c-34.237,29.36-78.733,47.098-127.371,47.098C87.647,391.529,0,303.883,0,195.765S87.647,0,195.765,0s195.765,87.647,195.765,195.765c0,48.638-17.738,93.134-47.097,127.371l16.98,16.98l11.94-11.94c5.881-5.881,15.415-5.881,21.296,0l112.941,112.941c5.881,5.881,5.881,15.416,0,21.296l-45.176,45.176c-5.881,5.881-15.415,5.881-21.296,0L328.176,394.648c-5.881-5.881-5.881-15.416,0-21.296L340.115,361.412z M195.765,361.412c91.484,0,165.647-74.163,165.647-165.647S287.249,30.118,195.765,30.118S30.118,104.28,30.118,195.765S104.28,361.412,195.765,361.412z M360.12,384l91.645,91.645l23.88-23.88L384,360.12L360.12,384z M233.034,233.033c5.881-5.881,15.415-5.881,21.296,0c5.881,5.881,5.881,15.416,0,21.296c-32.345,32.345-84.786,32.345-117.131,0c-5.881-5.881-5.881-15.415,0-21.296c5.881-5.881,15.416-5.881,21.296,0C179.079,253.616,212.45,253.616,233.034,233.033zM135.529,180.706c-12.475,0-22.588-10.113-22.588-22.588c0-12.475,10.113-22.588,22.588-22.588c12.475,0,22.588,10.113,22.588,22.588C158.118,170.593,148.005,180.706,135.529,180.706z M256,180.706c-12.475,0-22.588-10.113-22.588-22.588c0-12.475,10.113-22.588,22.588-22.588s22.588,10.113,22.588,22.588C278.588,170.593,268.475,180.706,256,180.706z" />
+                </svg>
+                <h6 class="mb-2">Your search results will appear here</h6>
+                <p class="fs-sm mb-0">Start typing in the search field above to see instant search results.</p>
+            </div>
+        </div>
+    </div>
+
+    <div class="offcanvas offcanvas-end pb-sm-2 px-sm-2" id="shoppingCart" tabindex="-1"
+        aria-labelledby="shoppingCartLabel" style="width: 500px">
+
+        <!-- Header -->
+        <div class="offcanvas-header flex-column align-items-start py-3 pt-lg-4">
+            <div class="d-flex align-items-center justify-content-between w-100">
+                <h4 class="offcanvas-title" id="shoppingCartLabel">Cart (3)</h4>
+                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+            </div>
+        </div>
+
+        <!-- Items -->
+        <div class="offcanvas-body d-flex flex-column gap-4 pt-2">
+
+            <!-- Item -->
+            <div class="d-flex align-items-center">
+                <a class="flex-sm-shrink-0" href="{{ route('second', ['shop', 'product-marketplace']) }}" style="width: 142px">
+                    <div class="ratio bg-body-tertiary rounded overflow-hidden"
+                        style="--cz-aspect-ratio: calc(110 / 142 * 100%)">
+                        <img src="/img/home/marketplace/cart/01.jpg" alt="Thumbnail">
+                    </div>
+                </a>
+                <div class="w-100 min-w-0 ps-3">
+                    <h5 class="d-flex animate-underline mb-2">
+                        <a class="d-block fs-sm fw-medium text-truncate animate-target"
+                            href="{{ route('second', ['shop', 'product-marketplace']) }}">Multi device mockup PSD</a>
+                    </h5>
+                    <div class="h6 pb-1 mb-2">$27</div>
+                    <div class="d-flex align-items-center justify-content-between gap-1">
+                        <div class="w-100" style="max-width: 185px">
+                            <select class="form-select form-select-sm rounded-pill"
+                                data-select='{
+                  "classNames": {
+                    "containerInner": ["form-select", "form-select-sm", "rounded-pill"]
+                  },
+                  "removeItemButton": false
+                }'
+                                aria-label="Small pill select">
+                                <option value="standard">Standard license</option>
+                                <option value="extended">Extended license</option>
+                            </select>
+                        </div>
+                        <button type="button" class="btn btn-icon btn-sm flex-shrink-0 fs-sm" data-bs-toggle="tooltip"
+                            data-bs-custom-class="tooltip-sm" data-bs-title="Remove" aria-label="Remove from cart">
+                            <i class="ci-trash fs-base"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Item -->
+            <div class="d-flex align-items-center">
+                <a class="flex-sm-shrink-0" href="{{ route('second', ['shop', 'product-marketplace']) }}" style="width: 142px">
+                    <div class="ratio bg-body-tertiary rounded overflow-hidden"
+                        style="--cz-aspect-ratio: calc(110 / 142 * 100%)">
+                        <img src="/img/home/marketplace/cart/02.jpg" alt="Thumbnail">
+                    </div>
+                </a>
+                <div class="w-100 min-w-0 ps-3">
+                    <h5 class="d-flex animate-underline mb-2">
+                        <a class="d-block fs-sm fw-medium text-truncate animate-target"
+                            href="{{ route('second', ['shop', 'product-marketplace']) }}">Isometric device mockups</a>
+                    </h5>
+                    <div class="h6 pb-1 mb-2">$12</div>
+                    <div class="d-flex align-items-center justify-content-between gap-2">
+                        <div class="w-100" style="max-width: 185px">
+                            <select class="form-select form-select-sm rounded-pill"
+                                data-select='{
+                  "classNames": {
+                    "containerInner": ["form-select", "form-select-sm", "rounded-pill"]
+                  },
+                  "removeItemButton": false
+                }'
+                                aria-label="Small pill select">
+                                <option value="standard">Standard license</option>
+                                <option value="extended">Extended license</option>
+                            </select>
+                        </div>
+                        <button type="button" class="btn btn-icon btn-sm flex-shrink-0 fs-sm" data-bs-toggle="tooltip"
+                            data-bs-custom-class="tooltip-sm" data-bs-title="Remove" aria-label="Remove from cart">
+                            <i class="ci-trash fs-base"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Item -->
+            <div class="d-flex align-items-center">
+                <a class="flex-sm-shrink-0" href="{{ route('second', ['shop', 'product-marketplace']) }}" style="width: 142px">
+                    <div class="ratio bg-body-tertiary rounded overflow-hidden"
+                        style="--cz-aspect-ratio: calc(110 / 142 * 100%)">
+                        <img src="/img/home/marketplace/cart/03.jpg" alt="Thumbnail">
+                    </div>
+                </a>
+                <div class="w-100 min-w-0 ps-3">
+                    <h5 class="d-flex animate-underline mb-2">
+                        <a class="d-block fs-sm fw-medium text-truncate animate-target"
+                            href="{{ route('second', ['shop', 'product-marketplace']) }}">Modern poster with abstract shapes</a>
+                    </h5>
+                    <div class="h6 pb-1 mb-2">$8</div>
+                    <div class="d-flex align-items-center justify-content-between gap-2">
+                        <div class="w-100" style="max-width: 185px">
+                            <select class="form-select form-select-sm rounded-pill"
+                                data-select='{
+                  "classNames": {
+                    "containerInner": ["form-select", "form-select-sm", "rounded-pill"]
+                  },
+                  "removeItemButton": false
+                }'
+                                aria-label="Small pill select">
+                                <option value="standard">Standard license</option>
+                                <option value="extended">Extended license</option>
+                            </select>
+                        </div>
+                        <button type="button" class="btn btn-icon btn-sm flex-shrink-0 fs-sm" data-bs-toggle="tooltip"
+                            data-bs-custom-class="tooltip-sm" data-bs-title="Remove" aria-label="Remove from cart">
+                            <i class="ci-trash fs-base"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Footer -->
+        <div class="offcanvas-header flex-column align-items-start">
+            <div class="d-flex align-items-center justify-content-between w-100 mb-3 mb-md-4">
+                <span class="text-light-emphasis">Subtotal:</span>
+                <span class="h6 mb-0">$47</span>
+            </div>
+            <a class="btn btn-lg btn-dark w-100 rounded-pill" href="{{ route('second', ['checkout', 'marketplace']) }}">Checkout</a>
+        </div>
+    </div>
+
+    <header class="navbar navbar-expand-lg navbar-sticky z-fixed px-0" data-sticky-navbar='{"offset": 800}'>
+        <div class="container flex-nowrap">
+
+            <!-- Mobile offcanvas menu toggler (Hamburger) -->
+            <button type="button" class="navbar-toggler me-4 me-lg-0" data-bs-toggle="offcanvas"
+                data-bs-target="#navbarNav" aria-controls="navbarNav" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+
+            <!-- Navbar brand (Logo) -->
+            <a class="navbar-brand py-1 py-md-2 py-xl-1" href="/">
+                <span class="d-none d-sm-flex flex-shrink-0 text-primary me-2">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36">
+                        <path
+                            d="M36 18.01c0 8.097-5.355 14.949-12.705 17.2a18.12 18.12 0 0 1-5.315.79C9.622 36 2.608 30.313.573 22.611.257 21.407.059 20.162 0 18.879v-1.758c.02-.395.059-.79.099-1.185.099-.908.277-1.817.514-2.686C2.687 5.628 9.682 0 18 0c5.572 0 10.551 2.528 13.871 6.517 1.502 1.797 2.648 3.91 3.359 6.201.494 1.659.771 3.436.771 5.292z"
+                            fill="currentColor" />
+                        <g fill="#fff">
+                            <path
+                                d="M17.466 21.624c-.514 0-.988-.316-1.146-.829-.198-.632.138-1.303.771-1.501l7.666-2.469-1.205-8.254-13.317 4.621a1.19 1.19 0 0 1-1.521-.75 1.19 1.19 0 0 1 .751-1.521l13.89-4.818c.553-.197 1.166-.138 1.64.158a1.82 1.82 0 0 1 .85 1.284l1.344 9.183c.138.987-.494 1.994-1.482 2.33l-7.864 2.528-.375.04zm7.31.138c-.178-.632-.85-1.007-1.482-.81l-5.177 1.58c-2.331.79-3.28.02-3.418-.099l-6.56-8.412a4.25 4.25 0 0 0-4.406-1.758l-3.122.987c-.237.889-.415 1.777-.514 2.686l4.228-1.363a1.84 1.84 0 0 1 1.857.81l6.659 8.551c.751.948 2.015 1.323 3.359 1.323.909 0 1.857-.178 2.687-.474l5.078-1.54c.632-.178 1.008-.829.81-1.481z" />
+                            <use href="#czlogo" />
+                            <use href="#czlogo" x="8.516" y="-2.172" />
+                        </g>
+                        <defs>
+                            <path id="czlogo"
+                                d="M18.689 28.654a1.94 1.94 0 0 1-1.936 1.935 1.94 1.94 0 0 1-1.936-1.935 1.94 1.94 0 0 1 1.936-1.935 1.94 1.94 0 0 1 1.936 1.935z" />
+                        </defs>
+                    </svg>
+                </span>
+                Cartzilla
+            </a>
+
+            <!-- Main navigation that turns into offcanvas on screens < 992px wide (lg breakpoint) -->
+            <nav class="offcanvas offcanvas-start" id="navbarNav" tabindex="-1" aria-labelledby="navbarNavLabel">
+                <div class="offcanvas-header py-3">
+                    <h5 class="offcanvas-title" id="navbarNavLabel">Browse Cartzilla</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+                </div>
+                <div class="offcanvas-body pt-3 pb-4 py-lg-0 mx-lg-auto">
+                    <ul class="navbar-nav position-relative">
+                        <li class="nav-item dropdown py-lg-2 me-lg-n1 me-xl-0">
+                            <a class="nav-link dropdown-toggle active" aria-current="page" href="#" role="button"
+                                data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Home</a>
+                            <ul class="dropdown-menu" style="--cz-dropdown-spacer: .875rem">
+                                <li class="hover-effect-opacity px-2 mx-n2">
+                                    <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'electronics']) }}">
+                                        <span class="fw-medium">Electronics Store</span>
+                                        <span class="d-block fs-xs text-body-secondary">Megamenu + Hero slider</span>
+                                        <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                            style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                            <img class="position-relative z-2 d-none-dark"
+                                                src="/img/mega-menu/demo-preview/electronics-light.jpg"
+                                                alt="Electronics Store">
+                                            <img class="position-relative z-2 d-none d-block-dark"
+                                                src="/img/mega-menu/demo-preview/electronics-dark.jpg"
+                                                alt="Electronics Store">
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                        </div>
+                                    </a>
+                                </li>
+                                <li class="hover-effect-opacity px-2 mx-n2">
+                                    <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'fashion-v1']) }}>
+                                        <span class="fw-medium">Fashion Store v.1</span>
+                                        <span class="d-block fs-xs text-body-secondary">Hero promo slider</span>
+                                        <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                            style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                            <img class="position-relative z-2 d-none-dark"
+                                                src="/img/mega-menu/demo-preview/fashion-1-light.jpg"
+                                                alt="Fashion Store v.1">
+                                            <img class="position-relative z-2 d-none d-block-dark"
+                                                src="/img/mega-menu/demo-preview/fashion-1-dark.jpg"
+                                                alt="Fashion Store v.1">
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                        </div>
+                                    </a>
+                                </li>
+                                <li class="hover-effect-opacity px-2 mx-n2">
+                                    <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'fashion-v2']) }}>
+                                        <span class="fw-medium">Fashion Store v.2</span>
+                                        <span class="d-block fs-xs text-body-secondary">Hero banner with hotspots</span>
+                                        <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                            style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                            <img class="position-relative z-2 d-none-dark"
+                                                src="/img/mega-menu/demo-preview/fashion-2-light.jpg"
+                                                alt="Fashion Store v.2">
+                                            <img class="position-relative z-2 d-none d-block-dark"
+                                                src="/img/mega-menu/demo-preview/fashion-2-dark.jpg"
+                                                alt="Fashion Store v.2">
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                        </div>
+                                    </a>
+                                </li>
+                                <li class="hover-effect-opacity px-2 mx-n2">
+                                    <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'furniture']) }}>
+                                        <span class="fw-medium">Furniture Store</span>
+                                        <span class="d-block fs-xs text-body-secondary">Fancy product carousel</span>
+                                        <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                            style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                            <img class="position-relative z-2 d-none-dark"
+                                                src="/img/mega-menu/demo-preview/furniture-light.jpg"
+                                                alt="Furniture Store">
+                                            <img class="position-relative z-2 d-none d-block-dark"
+                                                src="/img/mega-menu/demo-preview/furniture-dark.jpg"
+                                                alt="Furniture Store">
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                        </div>
+                                    </a>
+                                </li>
+                                <li class="hover-effect-opacity px-2 mx-n2">
+                                    <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'grocery']) }}>
+                                        <span class="fw-medium">Grocery Store</span>
+                                        <span class="d-block fs-xs text-body-secondary">Hero slider + Category cards</span>
+                                        <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                            style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                            <img class="position-relative z-2 d-none-dark"
+                                                src="/img/mega-menu/demo-preview/grocery-light.jpg" alt="Grocery Store">
+                                            <img class="position-relative z-2 d-none d-block-dark"
+                                                src="/img/mega-menu/demo-preview/grocery-dark.jpg" alt="Grocery Store">
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                        </div>
+                                    </a>
+                                </li>
+                                <li class="hover-effect-opacity px-2 mx-n2">
+                                    <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'marketplace']) }}">
+                                        <span class="fw-medium">Marketplace</span>
+                                        <span class="d-block fs-xs text-body-secondary">Multi-vendor, digital goods</span>
+                                        <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                            style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                            <img class="position-relative z-2 d-none-dark"
+                                                src="/img/mega-menu/demo-preview/marketplace-light.jpg" alt="Marketplace">
+                                            <img class="position-relative z-2 d-none d-block-dark"
+                                                src="/img/mega-menu/demo-preview/marketplace-dark.jpg" alt="Marketplace">
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                        </div>
+                                    </a>
+                                </li>
+                                <li class="hover-effect-opacity px-2 mx-n2">
+                                    <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'single-store']) }}>
+                                        <span class="fw-medium">Single Product Store</span>
+                                        <span class="d-block fs-xs text-body-secondary">Single product / mono brand</span>
+                                        <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                            style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                            <img class="position-relative z-2 d-none-dark"
+                                                src="/img/mega-menu/demo-preview/single-store-light.jpg"
+                                                alt="Single Product Store">
+                                            <img class="position-relative z-2 d-none d-block-dark"
+                                                src="/img/mega-menu/demo-preview/single-store-dark.jpg"
+                                                alt="Single Product Store">
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                        </div>
+                                    </a>
+                                </li>
+                            </ul>
+                        </li>
+                        <li class="nav-item dropdown position-static py-lg-2 me-lg-n1 me-xl-0">
+                            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
+                                data-bs-trigger="hover" aria-expanded="false">Shop</a>
+                            <div class="dropdown-menu rounded-4 p-4" style="--cz-dropdown-spacer: .875rem">
+                                <div class="d-flex flex-column flex-lg-row gap-4">
+                                    <div style="min-width: 190px">
+                                        <div class="h6 mb-2">Electronics Store</div>
+                                        <ul class="nav flex-column gap-2 mt-0">
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'categories-electronics']) }}">Categories Page</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Catalog with Side Filters</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'product-general-electronics']) }}">Product General Info</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'product-details-electronics']) }}">Product Details</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'product-reviews-electronics']) }}">Product Reviews</a>
+                                            </li>
+                                        </ul>
+                                        <div class="h6 pt-4 mb-2">Fashion Store</div>
+                                        <ul class="nav flex-column gap-2 mt-0">
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Catalog with Side Filters</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'product-fashion']) }}">Product Page</a>
+                                            </li>
+                                        </ul>
+                                        <div class="h6 pt-4 mb-2">Furniture Store</div>
+                                        <ul class="nav flex-column gap-2 mt-0">
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'catalog-furniture']) }}">Catalog with Top Filters</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'product-furniture']) }}">Product Page</a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                    <div style="min-width: 190px">
+                                        <div class="h6 mb-2">Grocery Store</div>
+                                        <ul class="nav flex-column gap-2 mt-0">
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Catalog with Side Filters</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'product-grocery']) }}">Product Page</a>
+                                            </li>
+                                        </ul>
+                                        <div class="h6 pt-4 mb-2">Marketplace</div>
+                                        <ul class="nav flex-column gap-2 mt-0">
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'catalog-marketplace']) }}">Catalog with Top Filters</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'product-marketplace']) }}">Digital Product Page</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'marketplace']) }}">Cart / Checkout</a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                    <div style="min-width: 190px">
+                                        <div class="h6 mb-2">Checkout v.1</div>
+                                        <ul class="nav flex-column gap-2 mt-0">
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'v1-cart']) }}">Shopping Cart</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'v1-delivery-1']) }}">Delivery Info (Step 1)</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'v1-delivery-2']) }}">Delivery Info (Step 2)</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'v1-shipping']) }}">Shipping Address</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'v1-payment']) }}">Payment</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'v1-thankyou']) }}">Thank You Page</a>
+                                            </li>
+                                        </ul>
+                                        <div class="h6 pt-4 mb-2">Checkout v.2</div>
+                                        <ul class="nav flex-column gap-2 mt-0">
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'v2-cart']) }}">Shopping Cart</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'v2-delivery']) }}">Delivery Info</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'v2-pickup']) }}">Pickup from Store</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'v2-thankyou']) }}">Thank You Page</a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+                        </li>
+                        <li class="nav-item dropdown py-lg-2 me-lg-n1 me-xl-0">
+                            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
+                                data-bs-trigger="hover" data-bs-auto-close="outside" aria-expanded="false">Account</a>
+                            <ul class="dropdown-menu" style="--cz-dropdown-spacer: .875rem">
+                                <li class="dropend">
+                                    <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Auth
+                                        Pages</a>
+                                    <ul class="dropdown-menu">
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'signin']) }}">Sign In</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'signup']) }}">Sign Up</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'password-recovery']) }}">Password
+                                                Recovery</a></li>
+                                    </ul>
+                                </li>
+                                <li class="dropend">
+                                    <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Shop
+                                        User</a>
+                                    <ul class="dropdown-menu">
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'orders']) }}">Orders History</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'wishlist']) }}">Wishlist</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'payment']) }}">Payment Methods</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'reviews']) }}">My Reviews</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'info']) }}">Personal Info</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'addresses']) }}">Addresses</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'notifications']) }}">Notifications</a>
+                                        </li>
+                                    </ul>
+                                </li>
+                                <li class="dropend">
+                                    <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                        aria-expanded="false">Marketplace User</a>
+                                    <ul class="dropdown-menu">
+                                        <li><a class="dropdown-item"
+                                                href="{{ route('second', ['account', 'marketplace-dashboard']) }}">Dashboard</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-products']) }}">Products</a>
+                                        </li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-sales']) }}">Sales</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-payouts']) }}">Payouts</a>
+                                        </li>
+                                        <li><a class="dropdown-item"
+                                                href="{{ route('second', ['account', 'marketplace-purchases']) }}">Purchases</a></li>
+                                        <li><a class="dropdown-item"
+                                                href="{{ route('second', ['account', 'marketplace-favorites']) }}">Favorites</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-settings']) }}">Settings</a>
+                                        </li>
+                                    </ul>
+                                </li>
+                            </ul>
+                        </li>
+                        <li class="nav-item dropdown py-lg-2 me-lg-n1 me-xl-0">
+                            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
+                                data-bs-trigger="hover" data-bs-auto-close="outside" aria-expanded="false">Pages</a>
+                            <ul class="dropdown-menu" style="--cz-dropdown-spacer: .875rem">
+                                <li class="dropend">
+                                    <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">About</a>
+                                    <ul class="dropdown-menu">
+                                        <li><a class="dropdown-item" href="{{ route('second', ['about', 'v1']) }}">About v.1</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['about', 'v2']) }}">About v.2</a></li>
+                                    </ul>
+                                </li>
+                                <li class="dropend">
+                                    <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Blog</a>
+                                    <ul class="dropdown-menu">
+                                        <li><a class="dropdown-item" href="{{ route('second', ['blog', 'grid-v1']) }}">Grid View v.1</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['blog', 'grid-v2']) }}">Grid View v.2</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['blog', 'list']) }}">List View</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['blog', 'single-v1']) }}">Single Post v.1</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['blog', 'single-v2']) }}">Single Post v.2</a></li>
+                                    </ul>
+                                </li>
+                                <li class="dropend">
+                                    <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                        aria-expanded="false">Contact</a>
+                                    <ul class="dropdown-menu">
+                                        <li><a class="dropdown-item" href="{{ route('second', ['contact', 'v1']) }}">Contact v.1</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['contact', 'v2']) }}">Contact v.2</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['contact', 'v3']) }}">Contact v.3</a></li>
+                                    </ul>
+                                </li>
+                                <li class="dropend">
+                                    <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Help
+                                        Center</a>
+                                    <ul class="dropdown-menu">
+                                        <li><a class="dropdown-item" href="{{ route('second', ['help', 'topics-v1']) }}">Help Topics v.1</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['help', 'topics-v2']) }}">Help Topics v.2</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['help', 'single-article-v1']) }}">Help Single
+                                                Article v.1</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['help', 'single-article-v2']) }}">Help Single
+                                                Article v.2</a></li>
+                                    </ul>
+                                </li>
+                                <li class="dropend">
+                                    <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">404
+                                        Error</a>
+                                    <ul class="dropdown-menu">
+                                        <li><a class="dropdown-item" href="{{ route('second', ['404', 'electronics']) }}">404 Electronics</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['404', 'fashion']) }}">404 Fashion</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['404', 'furniture']) }}">404 Furniture</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['404', 'grocery']) }}">404 Grocery</a></li>
+                                    </ul>
+                                </li>
+                                <li><a class="dropdown-item" href="{{ route('any', 'terms-and-conditions')}}">Terms &amp; Conditions</a>
+                                </li>
+                            </ul>
+                        </li>                        
+                    </ul>
+                </div>
+
+                <!-- Account button visible on screens < 768px wide (md breakpoint) -->
+                <div class="offcanvas-header nav border-top px-0 py-3 mt-3 d-md-none">
+                    <a class="nav-link justify-content-center w-100" href="{{ route('second', ['account', 'signin']) }}">
+                        <i class="ci-user fs-lg opacity-60 ms-n2 me-2"></i>
+                        Account
+                    </a>
+                </div>
+            </nav>
+
+            <!-- Button group -->
+            <div class="d-flex align-items-center">
+
+                <!-- Theme switcher (light/dark/auto) -->
+                <div class="dropdown">
+                    <button type="button"
+                        class="theme-switcher btn btn-icon btn-lg btn-outline-secondary fs-lg border-0 rounded-circle animate-scale"
+                        data-bs-toggle="dropdown" aria-expanded="false" aria-label="Toggle theme (light)">
+                        <span class="theme-icon-active d-flex animate-target">
+                            <i class="ci-sun"></i>
+                        </span>
+                    </button>
+                    <ul class="dropdown-menu" style="--cz-dropdown-min-width: 9rem">
+                        <li>
+                            <button type="button" class="dropdown-item active" data-bs-theme-value="light"
+                                aria-pressed="true">
+                                <span class="theme-icon d-flex fs-base me-2">
+                                    <i class="ci-sun"></i>
+                                </span>
+                                <span class="theme-label">Light</span>
+                                <i class="item-active-indicator ci-check ms-auto"></i>
+                            </button>
+                        </li>
+                        <li>
+                            <button type="button" class="dropdown-item" data-bs-theme-value="dark"
+                                aria-pressed="false">
+                                <span class="theme-icon d-flex fs-base me-2">
+                                    <i class="ci-moon"></i>
+                                </span>
+                                <span class="theme-label">Dark</span>
+                                <i class="item-active-indicator ci-check ms-auto"></i>
+                            </button>
+                        </li>
+                        <li>
+                            <button type="button" class="dropdown-item" data-bs-theme-value="auto"
+                                aria-pressed="false">
+                                <span class="theme-icon d-flex fs-base me-2">
+                                    <i class="ci-auto"></i>
+                                </span>
+                                <span class="theme-label">Auto</span>
+                                <i class="item-active-indicator ci-check ms-auto"></i>
+                            </button>
+                        </li>
+                    </ul>
+                </div>
+
+                <!-- Search toggle button -->
+                <button type="button"
+                    class="btn btn-icon btn-lg fs-xl btn-outline-secondary border-0 rounded-circle animate-shake"
+                    data-bs-toggle="offcanvas" data-bs-target="#searchBox" aria-controls="searchBox"
+                    aria-label="Toggle search bar">
+                    <i class="ci-search animate-target"></i>
+                </button>
+
+                <!-- Account button visible on screens > 768px wide (md breakpoint) -->
+                <a class="btn btn-icon btn-lg fs-lg btn-outline-secondary border-0 rounded-circle animate-shake d-none d-md-inline-flex"
+                    href="{{ route('second', ['account', 'signin']) }}">
+                    <i class="ci-user animate-target"></i>
+                    <span class="visually-hidden">Account</span>
+                </a>
+
+                <!-- Cart button -->
+                <button type="button"
+                    class="btn btn-icon btn-lg fs-xl btn-outline-secondary position-relative border-0 rounded-circle animate-scale"
+                    data-bs-toggle="offcanvas" data-bs-target="#shoppingCart" aria-controls="shoppingCart"
+                    aria-label="Shopping cart">
+                    <span class="position-absolute top-0 start-100 badge fs-xs text-bg-primary rounded-pill mt-1 ms-n4 z-2"
+                        style="--cz-badge-padding-y: .25em; --cz-badge-padding-x: .42em">3</span>
+                    <i class="ci-shopping-bag animate-target me-1"></i>
+                </button>
+            </div>
+        </div>
+    </header>
+
+    <main class="content-wrapper">
+
+        <!-- Hero -->
+        <section class="position-relative pb-5" style="margin-top: -76px; padding-top: 76px">
+            <div class="container position-relative z-1 py-md-3 py-lg-4 py-xl-5">
+
+                <!-- Title -->
+                <div class="row pt-4 pt-sm-5 pb-4 pb-md-5 my-2 mt-sm-0 mb-sm-3 mb-md-0 mb-xl-2 mb-xxl-4">
+                    <div class="col-xl-10 pt-xxl-2">
+                        <h1 class="display-3 mb-md-4">High-quality design resources tailored for busy creatives</h1>
+                        <p class="fs-lg mb-0">Discover top-notch 3D and vector illustrations, photos images, designs and
+                            mockups.</p>
+                    </div>
+                </div>
+
+                <!-- Categories -->
+                <div class="row row-cols-2 row-cols-sm-3 row-cols-lg-6 g-4 g-lg-3 g-xl-4 pb-2 mb-4">
+                    <div class="col">
+                        <a class="vstack position-relative animate-underline hover-effect-scale rounded-4 overflow-hidden text-dark-emphasis fw-medium text-decoration-none"
+                            href="{{ route('second', ['shop', 'catalog-marketplace']) }}">
+                            <div class="ratio z-2 overflow-hidden" style="--cz-aspect-ratio: calc(130 / 196 * 100%)">
+                                <img src="/img/home/marketplace/categories/01.jpg" class="hover-effect-target"
+                                    alt="Image">
+                            </div>
+                            <div class="position-relative z-2 text-center py-3">
+                                <div class="animate-target d-inline">Vecrots</div>
+                            </div>
+                            <span class="position-absolute top-0 start-0 w-100 h-100 bg-white d-none-dark"></span>
+                            <span class="position-absolute top-0 start-0 w-100 h-100 bg-white d-none d-block-dark"
+                                style="opacity: .07"></span>
+                        </a>
+                    </div>
+                    <div class="col">
+                        <a class="vstack position-relative animate-underline hover-effect-scale rounded-4 overflow-hidden text-dark-emphasis fw-medium text-decoration-none"
+                            href="{{ route('second', ['shop', 'catalog-marketplace']) }}">
+                            <div class="ratio z-2 overflow-hidden" style="--cz-aspect-ratio: calc(130 / 196 * 100%)">
+                                <img src="/img/home/marketplace/categories/02.jpg" class="hover-effect-target"
+                                    alt="Image">
+                            </div>
+                            <div class="position-relative z-2 text-center py-3">
+                                <div class="animate-target d-inline">Photos</div>
+                            </div>
+                            <span class="position-absolute top-0 start-0 w-100 h-100 bg-white d-none-dark"></span>
+                            <span class="position-absolute top-0 start-0 w-100 h-100 bg-white d-none d-block-dark"
+                                style="opacity: .07"></span>
+                        </a>
+                    </div>
+                    <div class="col">
+                        <a class="vstack position-relative animate-underline hover-effect-scale rounded-4 overflow-hidden text-dark-emphasis fw-medium text-decoration-none"
+                            href="{{ route('second', ['shop', 'catalog-marketplace']) }}">
+                            <div class="ratio z-2 overflow-hidden" style="--cz-aspect-ratio: calc(130 / 196 * 100%)">
+                                <img src="/img/home/marketplace/categories/03.jpg" class="hover-effect-target"
+                                    alt="Image">
+                            </div>
+                            <div class="position-relative z-2 text-center py-3">
+                                <div class="animate-target d-inline">3D illustrations</div>
+                            </div>
+                            <span class="position-absolute top-0 start-0 w-100 h-100 bg-white d-none-dark"></span>
+                            <span class="position-absolute top-0 start-0 w-100 h-100 bg-white d-none d-block-dark"
+                                style="opacity: .07"></span>
+                        </a>
+                    </div>
+                    <div class="col">
+                        <a class="vstack position-relative animate-underline hover-effect-scale rounded-4 overflow-hidden text-dark-emphasis fw-medium text-decoration-none"
+                            href="{{ route('second', ['shop', 'catalog-marketplace']) }}">
+                            <div class="ratio z-2 overflow-hidden" style="--cz-aspect-ratio: calc(130 / 196 * 100%)">
+                                <img src="/img/home/marketplace/categories/04.jpg" class="hover-effect-target"
+                                    alt="Image">
+                            </div>
+                            <div class="position-relative z-2 text-center py-3">
+                                <div class="animate-target d-inline">AI images</div>
+                            </div>
+                            <span class="position-absolute top-0 start-0 w-100 h-100 bg-white d-none-dark"></span>
+                            <span class="position-absolute top-0 start-0 w-100 h-100 bg-white d-none d-block-dark"
+                                style="opacity: .07"></span>
+                        </a>
+                    </div>
+                    <div class="col">
+                        <a class="vstack position-relative animate-underline hover-effect-scale rounded-4 overflow-hidden text-dark-emphasis fw-medium text-decoration-none"
+                            href="{{ route('second', ['shop', 'catalog-marketplace']) }}">
+                            <div class="ratio z-2 overflow-hidden" style="--cz-aspect-ratio: calc(130 / 196 * 100%)">
+                                <img src="/img/home/marketplace/categories/05.jpg" class="hover-effect-target"
+                                    alt="Image">
+                            </div>
+                            <div class="position-relative z-2 text-center py-3">
+                                <div class="animate-target d-inline">Templates</div>
+                            </div>
+                            <span class="position-absolute top-0 start-0 w-100 h-100 bg-white d-none-dark"></span>
+                            <span class="position-absolute top-0 start-0 w-100 h-100 bg-white d-none d-block-dark"
+                                style="opacity: .07"></span>
+                        </a>
+                    </div>
+                    <div class="col">
+                        <a class="vstack position-relative animate-underline hover-effect-scale rounded-4 overflow-hidden text-dark-emphasis fw-medium text-decoration-none"
+                            href="{{ route('second', ['shop', 'catalog-marketplace']) }}">
+                            <div class="ratio z-2 overflow-hidden" style="--cz-aspect-ratio: calc(130 / 196 * 100%)">
+                                <img src="/img/home/marketplace/categories/06.jpg" class="hover-effect-target"
+                                    alt="Image">
+                            </div>
+                            <div class="position-relative z-2 text-center py-3">
+                                <div class="animate-target d-inline">Mockups</div>
+                            </div>
+                            <span class="position-absolute top-0 start-0 w-100 h-100 bg-white d-none-dark"></span>
+                            <span class="position-absolute top-0 start-0 w-100 h-100 bg-white d-none d-block-dark"
+                                style="opacity: .07"></span>
+                        </a>
+                    </div>
+                </div>
+
+                <!-- Formats -->
+                <div class="d-sm-flex align-items-center gap-4 pb-2 pb-sm-4">
+                    <h2 class="fs-sm fw-medium mb-sm-0">Browse by most popular formats</h2>
+                    <div class="d-flex gap-3">
+                        <a class="ratio ratio-1x1 d-flex flex-shrink-0" href="#!" style="width: 20px">
+                            <img src="/img/home/marketplace/formats/figma.png" alt="Figma">
+                        </a>
+                        <a class="ratio ratio-1x1 d-flex flex-shrink-0" href="#!" style="width: 20px">
+                            <img src="/img/home/marketplace/formats/framer.png" alt="Framer">
+                        </a>
+                        <a class="ratio ratio-1x1 d-flex flex-shrink-0" href="#!" style="width: 20px">
+                            <img src="/img/home/marketplace/formats/illustrator.png" alt="Illustrator">
+                        </a>
+                        <a class="ratio ratio-1x1 d-flex flex-shrink-0" href="#!" style="width: 20px">
+                            <img src="/img/home/marketplace/formats/webflow.png" alt="Webflow">
+                        </a>
+                        <a class="ratio ratio-1x1 d-flex flex-shrink-0" href="#!" style="width: 20px">
+                            <img src="/img/home/marketplace/formats/photoshop.png" alt="Photoshop">
+                        </a>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Background -->
+            <div class="position-absolute top-0 start-0 w-100 h-100 d-none-dark"
+                style="background: linear-gradient(90deg, rgba(203,201,233, .6) 0%, rgba(227,232,251, .6) 50%, rgba(255,224,244, .6) 100%)">
+            </div>
+            <div class="position-absolute top-0 start-0 w-100 h-100 d-none d-block-dark"
+                style="background: linear-gradient(90deg, rgba(51,51,59, .6) 0%, rgba(44,48,62, .6) 50%, rgba(57,43,52, .6) 100%)">
+            </div>
+        </section>
+
+
+        <!-- Latest products carousel -->
+        <section class="container pt-2 pt-sm-3 pt-md-4 pt-lg-5 pb-5 my-xxl-3">
+            <div class="d-flex align-items-center justify-content-between gap-4 pt-5 pb-3 mb-1 mb-sm-2 mb-md-3">
+                <h2 class="h3 mb-0">Latest products</h2>
+
+                <!-- Prev/next buttons -->
+                <div class="d-flex gap-2">
+                    <button type="button"
+                        class="btn btn-icon btn-outline-secondary animate-slide-start bg-body rounded-circle me-1"
+                        id="prod-prev" aria-label="Prev">
+                        <i class="ci-chevron-left fs-lg animate-target"></i>
+                    </button>
+                    <button type="button"
+                        class="btn btn-icon btn-outline-secondary animate-slide-end bg-body rounded-circle" id="prod-next"
+                        aria-label="Next">
+                        <i class="ci-chevron-right fs-lg animate-target"></i>
+                    </button>
+                </div>
+            </div>
+
+            <!-- Carousel -->
+            <div class="swiper"
+                data-swiper='{
+          "slidesPerView": 1,
+          "spaceBetween": 24,
+          "loop": true,
+          "navigation": {
+            "prevEl": "#prod-prev",
+            "nextEl": "#prod-next"
+          },
+          "breakpoints": {
+            "600": {
+              "slidesPerView": 2
+            }
+          }
+        }'>
+                <div class="swiper-wrapper">
+
+                    <!-- Product -->
+                    <div class="swiper-slide">
+                        <div
+                            class="card animate-underline hover-effect-opacity hover-effect-scale rounded-4 overflow-hidden">
+                            <div class="card-img-top position-relative bg-body-tertiary overflow-hidden">
+                                <a class="ratio d-block hover-effect-target"
+                                    style="--cz-aspect-ratio: calc(220 / 304 * 100%)"
+                                    href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                                    <img src="/img/home/marketplace/products/01.jpg" alt="Image">
+                                </a>
+                                <div
+                                    class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 pt-1 pt-sm-0 pe-1 pe-sm-0 mt-2 mt-sm-3 me-2 me-sm-3">
+                                    <button type="button"
+                                        class="btn btn-sm btn-icon btn-light bg-light border-0 rounded-circle animate-pulse"
+                                        aria-label="Add to wishlist">
+                                        <i class="ci-heart animate-target fs-sm"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="card-body p-3">
+                                <div class="d-flex min-w-0 justify-content-between gap-3 mb-2">
+                                    <h3 class="nav min-w-0 mb-0">
+                                        <a class="nav-link fs-base text-truncate p-0"
+                                            href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                                            <span class="text-truncate animate-target">Gradient 3D abstract shape
+                                                illustration</span>
+                                        </a>
+                                    </h3>
+                                    <div class="h5 mb-0">$20</div>
+                                </div>
+                                <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
+                                    <div class="nav align-items-center gap-1 fs-xs">
+                                        <a class="nav-link fs-xs text-body gap-1 p-0"
+                                            href="{{ route('second', ['shop', 'catalog-marketplace']) }}">
+                                            <div class="flex-shrink-0 border rounded-circle" style="width: 22px">
+                                                <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
+                                                    <img src="/img/shop/marketplace/avatars/01.png" alt="Avatar">
+                                                </div>
+                                            </div>
+                                            Coderthemes
+                                        </a>
+                                        <div class="text-body-secondary">in</div>
+                                        <a class="nav-link fs-xs text-body p-0"
+                                            href="{{ route('second', ['shop', 'catalog-marketplace']) }}">Vectors</a>
+                                    </div>
+                                    <div class="fs-xs text-body-secondary">5 sales</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Product -->
+                    <div class="swiper-slide">
+                        <div
+                            class="card animate-underline hover-effect-opacity hover-effect-scale rounded-4 overflow-hidden">
+                            <div class="card-img-top position-relative bg-body-tertiary overflow-hidden">
+                                <a class="ratio d-block hover-effect-target"
+                                    style="--cz-aspect-ratio: calc(220 / 304 * 100%)"
+                                    href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                                    <img src="/img/home/marketplace/products/02.jpg" alt="Image">
+                                </a>
+                                <div
+                                    class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 pt-1 pt-sm-0 pe-1 pe-sm-0 mt-2 mt-sm-3 me-2 me-sm-3">
+                                    <button type="button"
+                                        class="btn btn-sm btn-icon btn-light bg-light border-0 rounded-circle animate-pulse"
+                                        aria-label="Add to wishlist">
+                                        <i class="ci-heart animate-target fs-sm"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="card-body p-3">
+                                <div class="d-flex min-w-0 justify-content-between gap-2 gap-sm-3 mb-2">
+                                    <h3 class="nav min-w-0 mb-0">
+                                        <a class="nav-link fs-base text-truncate p-0"
+                                            href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                                            <span class="text-truncate animate-target">Beautiful gaming wallpaper 4K
+                                                perfect for gaming monitors</span>
+                                        </a>
+                                    </h3>
+                                    <div class="h5 mb-0">$13</div>
+                                </div>
+                                <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
+                                    <div class="nav align-items-center gap-1 fs-xs">
+                                        <a class="nav-link fs-xs text-body gap-1 p-0"
+                                            href="{{ route('second', ['shop', 'catalog-marketplace']) }}">
+                                            <div class="flex-shrink-0 border rounded-circle" style="width: 22px">
+                                                <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
+                                                    <img src="/img/shop/marketplace/avatars/02.png" alt="Avatar">
+                                                </div>
+                                            </div>
+                                            Magic FS
+                                        </a>
+                                        <div class="text-body-secondary">in</div>
+                                        <a class="nav-link fs-xs text-body p-0" href="{{ route('second', ['shop', 'catalog-marketplace']) }}">AI
+                                            images</a>
+                                    </div>
+                                    <div class="fs-xs text-body-secondary">17 sales</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Product -->
+                    <div class="swiper-slide">
+                        <div
+                            class="card animate-underline hover-effect-opacity hover-effect-scale rounded-4 overflow-hidden">
+                            <div class="card-img-top position-relative bg-body-tertiary overflow-hidden">
+                                <a class="ratio d-block hover-effect-target"
+                                    style="--cz-aspect-ratio: calc(220 / 304 * 100%)"
+                                    href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                                    <img src="/img/home/marketplace/products/03.jpg" alt="Image">
+                                </a>
+                                <div
+                                    class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 pt-1 pt-sm-0 pe-1 pe-sm-0 mt-2 mt-sm-3 me-2 me-sm-3">
+                                    <button type="button"
+                                        class="btn btn-sm btn-icon btn-light bg-light border-0 rounded-circle animate-pulse"
+                                        aria-label="Add to wishlist">
+                                        <i class="ci-heart animate-target fs-sm"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="card-body p-3">
+                                <div class="d-flex min-w-0 justify-content-between gap-2 gap-sm-3 mb-2">
+                                    <h3 class="nav min-w-0 mb-0">
+                                        <a class="nav-link fs-base text-truncate p-0"
+                                            href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                                            <span class="text-truncate animate-target">Glass effect 3D illustartion Cinema
+                                                4D</span>
+                                        </a>
+                                    </h3>
+                                    <div class="h5 mb-0">$16</div>
+                                </div>
+                                <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
+                                    <div class="nav align-items-center gap-1 fs-xs">
+                                        <a class="nav-link fs-xs text-body gap-1 p-0"
+                                            href="{{ route('second', ['shop', 'catalog-marketplace']) }}">
+                                            <div class="flex-shrink-0 border rounded-circle" style="width: 22px">
+                                                <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
+                                                    <img src="/img/shop/marketplace/avatars/03.png" alt="Avatar">
+                                                </div>
+                                            </div>
+                                            MD Studio
+                                        </a>
+                                        <div class="text-body-secondary">in</div>
+                                        <a class="nav-link fs-xs text-body p-0" href="{{ route('second', ['shop', 'catalog-marketplace']) }}">3D
+                                            illustartions</a>
+                                    </div>
+                                    <div class="fs-xs text-body-secondary">24 sales</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Design resources grid -->
+        <section class="container pt-2 pt-sm-3 pt-md-4 pt-lg-5 pb-5 my-xxl-3">
+            <div class="d-md-flex align-items-center justify-content-between gap-4 mb-1 mb-sm-2 mb-md-3">
+                <h2 class="h3">Explore design resources</h2>
+                <div class="overflow-x-auto pb-3">
+                    <ul class="nav nav-pills flex-nowrap gap-2 text-nowrap">
+                        <li class="nav-item me-1">
+                            <a class="nav-link active" href="#!">Best sellers</a>
+                        </li>
+                        <li class="nav-item me-1">
+                            <a class="nav-link" href="#!">New arrivals</a>
+                        </li>
+                        <li class="nav-item me-1">
+                            <a class="nav-link" href="#!">Sale items</a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+
+            <!-- Products grid -->
+            <div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 g-3 g-sm-4 g-lg-3 g-xl-4">
+
+                <!-- Product -->
+                <div class="col">
+                    <div
+                        class="card h-100 animate-underline hover-effect-opacity hover-effect-scale rounded-4 overflow-hidden">
+                        <div class="card-img-top position-relative bg-body-tertiary overflow-hidden">
+                            <a class="ratio d-block hover-effect-target" style="--cz-aspect-ratio: calc(220 / 304 * 100%)"
+                                href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                                <img src="/img/shop/marketplace/12.jpg" alt="Image">
+                            </a>
+                            <div
+                                class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 pt-1 pt-sm-0 pe-1 pe-sm-0 mt-2 mt-sm-3 me-2 me-sm-3">
+                                <button type="button"
+                                    class="btn btn-sm btn-icon btn-light bg-light border-0 rounded-circle animate-pulse"
+                                    aria-label="Add to wishlist">
+                                    <i class="ci-heart animate-target fs-sm"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <div class="card-body p-3">
+                            <div class="d-flex min-w-0 justify-content-between gap-2 gap-sm-3 mb-2">
+                                <h3 class="nav min-w-0 mb-0">
+                                    <a class="nav-link text-truncate p-0" href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                                        <span class="text-truncate animate-target">Gradient glassmorphism icons set</span>
+                                    </a>
+                                </h3>
+                                <div class="h6 mb-0">$34</div>
+                            </div>
+                            <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
+                                <div class="nav align-items-center gap-1 fs-xs">
+                                    <a class="nav-link fs-xs text-body gap-1 p-0" href="{{ route('second', ['shop', 'catalog-marketplace']) }}">
+                                        <div class="flex-shrink-0 border rounded-circle" style="width: 22px">
+                                            <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
+                                                <img src="/img/shop/marketplace/avatars/02.png" alt="Avatar">
+                                            </div>
+                                        </div>
+                                        Magic FS
+                                    </a>
+                                    <div class="text-body-secondary">in</div>
+                                    <a class="nav-link fs-xs text-body p-0"
+                                        href="{{ route('second', ['shop', 'catalog-marketplace']) }}">Vectors</a>
+                                </div>
+                                <div class="fs-xs text-body-secondary">119 sales</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Product -->
+                <div class="col">
+                    <div
+                        class="card h-100 animate-underline hover-effect-opacity hover-effect-scale rounded-4 overflow-hidden">
+                        <div class="card-img-top position-relative bg-body-tertiary overflow-hidden">
+                            <a class="ratio d-block hover-effect-target" style="--cz-aspect-ratio: calc(220 / 304 * 100%)"
+                                href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                                <img src="/img/shop/marketplace/02.jpg" alt="Image">
+                            </a>
+                            <div
+                                class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 pt-1 pt-sm-0 pe-1 pe-sm-0 mt-2 mt-sm-3 me-2 me-sm-3">
+                                <button type="button"
+                                    class="btn btn-sm btn-icon btn-light bg-light border-0 rounded-circle animate-pulse"
+                                    aria-label="Add to wishlist">
+                                    <i class="ci-heart animate-target fs-sm"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <div class="card-body p-3">
+                            <div class="d-flex min-w-0 justify-content-between gap-2 gap-sm-3 mb-2">
+                                <h3 class="nav min-w-0 mb-0">
+                                    <a class="nav-link text-truncate p-0" href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                                        <span class="text-truncate animate-target">Smart watches series 9 mockup</span>
+                                    </a>
+                                </h3>
+                                <div class="h6 mb-0">$15</div>
+                            </div>
+                            <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
+                                <div class="nav align-items-center gap-1 fs-xs">
+                                    <a class="nav-link fs-xs text-body gap-1 p-0" href="{{ route('second', ['shop', 'catalog-marketplace']) }}">
+                                        <div class="flex-shrink-0 border rounded-circle" style="width: 22px">
+                                            <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
+                                                <img src="/img/shop/marketplace/avatars/03.png" alt="Avatar">
+                                            </div>
+                                        </div>
+                                        MD Studio
+                                    </a>
+                                    <div class="text-body-secondary">in</div>
+                                    <a class="nav-link fs-xs text-body p-0"
+                                        href="{{ route('second', ['shop', 'catalog-marketplace']) }}">Mockups</a>
+                                </div>
+                                <div class="fs-xs text-body-secondary">132 sales</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Product -->
+                <div class="col">
+                    <div
+                        class="card h-100 animate-underline hover-effect-opacity hover-effect-scale rounded-4 overflow-hidden">
+                        <div class="card-img-top position-relative bg-body-tertiary overflow-hidden">
+                            <a class="ratio d-block hover-effect-target" style="--cz-aspect-ratio: calc(220 / 304 * 100%)"
+                                href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                                <img src="/img/shop/marketplace/09.jpg" alt="Image">
+                            </a>
+                            <div
+                                class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 pt-1 pt-sm-0 pe-1 pe-sm-0 mt-2 mt-sm-3 me-2 me-sm-3">
+                                <button type="button"
+                                    class="btn btn-sm btn-icon btn-light bg-light border-0 rounded-circle animate-pulse"
+                                    aria-label="Add to wishlist">
+                                    <i class="ci-heart animate-target fs-sm"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <div class="card-body p-3">
+                            <div class="d-flex min-w-0 justify-content-between gap-2 gap-sm-3 mb-2">
+                                <h3 class="nav min-w-0 mb-0">
+                                    <a class="nav-link text-truncate p-0" href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                                        <span class="text-truncate animate-target">A collection of colorful items</span>
+                                    </a>
+                                </h3>
+                                <div class="h6 mb-0">$21</div>
+                            </div>
+                            <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
+                                <div class="nav align-items-center gap-1 fs-xs">
+                                    <a class="nav-link fs-xs text-body gap-1 p-0" href="{{ route('second', ['shop', 'catalog-marketplace']) }}">
+                                        <div class="flex-shrink-0 border rounded-circle" style="width: 22px">
+                                            <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
+                                                <img src="/img/shop/marketplace/avatars/04.png" alt="Avatar">
+                                            </div>
+                                        </div>
+                                        Fireby
+                                    </a>
+                                    <div class="text-body-secondary">in</div>
+                                    <a class="nav-link fs-xs text-body p-0" href="{{ route('second', ['shop', 'catalog-marketplace']) }}">3D
+                                        illustration</a>
+                                </div>
+                                <div class="fs-xs text-body-secondary">78 sales</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Product -->
+                <div class="col">
+                    <div
+                        class="card h-100 animate-underline hover-effect-opacity hover-effect-scale rounded-4 overflow-hidden">
+                        <div class="card-img-top position-relative bg-body-tertiary overflow-hidden">
+                            <a class="ratio d-block hover-effect-target" style="--cz-aspect-ratio: calc(220 / 304 * 100%)"
+                                href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                                <img src="/img/shop/marketplace/13.jpg" alt="Image">
+                            </a>
+                            <div
+                                class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 pt-1 pt-sm-0 pe-1 pe-sm-0 mt-2 mt-sm-3 me-2 me-sm-3">
+                                <button type="button"
+                                    class="btn btn-sm btn-icon btn-light bg-light border-0 rounded-circle animate-pulse"
+                                    aria-label="Add to wishlist">
+                                    <i class="ci-heart animate-target fs-sm"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <div class="card-body p-3">
+                            <div class="d-flex min-w-0 justify-content-between gap-2 gap-sm-3 mb-2">
+                                <h3 class="nav min-w-0 mb-0">
+                                    <a class="nav-link text-truncate p-0" href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                                        <span class="text-truncate animate-target">Multi device mockup PSD</span>
+                                    </a>
+                                </h3>
+                                <div class="h6 mb-0">$27</div>
+                            </div>
+                            <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
+                                <div class="nav align-items-center gap-1 fs-xs">
+                                    <a class="nav-link fs-xs text-body gap-1 p-0" href="{{ route('second', ['shop', 'catalog-marketplace']) }}">
+                                        <div class="flex-shrink-0 border rounded-circle" style="width: 22px">
+                                            <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
+                                                <img src="/img/shop/marketplace/avatars/01.png" alt="Avatar">
+                                            </div>
+                                        </div>
+                                        Coderthemes
+                                    </a>
+                                    <div class="text-body-secondary">in</div>
+                                    <a class="nav-link fs-xs text-body p-0"
+                                        href="{{ route('second', ['shop', 'catalog-marketplace']) }}">Mockups</a>
+                                </div>
+                                <div class="fs-xs text-body-secondary">43 sales</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Product -->
+                <div class="col">
+                    <div
+                        class="card h-100 animate-underline hover-effect-opacity hover-effect-scale rounded-4 overflow-hidden">
+                        <div class="card-img-top position-relative bg-body-tertiary overflow-hidden">
+                            <a class="ratio d-block hover-effect-target" style="--cz-aspect-ratio: calc(220 / 304 * 100%)"
+                                href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                                <img src="/img/shop/marketplace/14.jpg" alt="Image">
+                            </a>
+                            <div
+                                class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 pt-1 pt-sm-0 pe-1 pe-sm-0 mt-2 mt-sm-3 me-2 me-sm-3">
+                                <button type="button"
+                                    class="btn btn-sm btn-icon btn-light bg-light border-0 rounded-circle animate-pulse"
+                                    aria-label="Add to wishlist">
+                                    <i class="ci-heart animate-target fs-sm"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <div class="card-body p-3">
+                            <div class="d-flex min-w-0 justify-content-between gap-2 gap-sm-3 mb-2">
+                                <h3 class="nav min-w-0 mb-0">
+                                    <a class="nav-link text-truncate p-0" href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                                        <span class="text-truncate animate-target">Gradient UI/UX landing page</span>
+                                    </a>
+                                </h3>
+                                <div class="h6 mb-0">$30</div>
+                            </div>
+                            <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
+                                <div class="nav align-items-center gap-1 fs-xs">
+                                    <a class="nav-link fs-xs text-body gap-1 p-0" href="{{ route('second', ['shop', 'catalog-marketplace']) }}">
+                                        <div class="flex-shrink-0 border rounded-circle" style="width: 22px">
+                                            <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
+                                                <img src="/img/shop/marketplace/avatars/04.png" alt="Avatar">
+                                            </div>
+                                        </div>
+                                        Fireby
+                                    </a>
+                                    <div class="text-body-secondary">in</div>
+                                    <a class="nav-link fs-xs text-body p-0"
+                                        href="{{ route('second', ['shop', 'catalog-marketplace']) }}">Templates</a>
+                                </div>
+                                <div class="fs-xs text-body-secondary">247 sales</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Product -->
+                <div class="col">
+                    <div
+                        class="card h-100 animate-underline hover-effect-opacity hover-effect-scale rounded-4 overflow-hidden">
+                        <div class="card-img-top position-relative bg-body-tertiary overflow-hidden">
+                            <a class="ratio d-block hover-effect-target"
+                                style="--cz-aspect-ratio: calc(220 / 304 * 100%)" href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                                <img src="/img/shop/marketplace/03.jpg" alt="Image">
+                            </a>
+                            <div
+                                class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 pt-1 pt-sm-0 pe-1 pe-sm-0 mt-2 mt-sm-3 me-2 me-sm-3">
+                                <button type="button"
+                                    class="btn btn-sm btn-icon btn-light bg-light border-0 rounded-circle animate-pulse"
+                                    aria-label="Add to wishlist">
+                                    <i class="ci-heart animate-target fs-sm"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <div class="card-body p-3">
+                            <div class="d-flex min-w-0 justify-content-between gap-2 gap-sm-3 mb-2">
+                                <h3 class="nav min-w-0 mb-0">
+                                    <a class="nav-link text-truncate p-0" href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                                        <span class="text-truncate animate-target">3D box mockup bold rebrand</span>
+                                    </a>
+                                </h3>
+                                <div class="h6 mb-0">$16</div>
+                            </div>
+                            <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
+                                <div class="nav align-items-center gap-1 fs-xs">
+                                    <a class="nav-link fs-xs text-body gap-1 p-0" href="{{ route('second', ['shop', 'catalog-marketplace']) }}">
+                                        <div class="flex-shrink-0 border rounded-circle" style="width: 22px">
+                                            <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
+                                                <img src="/img/shop/marketplace/avatars/01.png" alt="Avatar">
+                                            </div>
+                                        </div>
+                                        Coderthemes
+                                    </a>
+                                    <div class="text-body-secondary">in</div>
+                                    <a class="nav-link fs-xs text-body p-0"
+                                        href="{{ route('second', ['shop', 'catalog-marketplace']) }}">Mockups</a>
+                                </div>
+                                <div class="fs-xs text-body-secondary">56 sales</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Product -->
+                <div class="col">
+                    <div
+                        class="card h-100 animate-underline hover-effect-opacity hover-effect-scale rounded-4 overflow-hidden">
+                        <div class="card-img-top position-relative bg-body-tertiary overflow-hidden">
+                            <a class="ratio d-block hover-effect-target"
+                                style="--cz-aspect-ratio: calc(220 / 304 * 100%)" href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                                <img src="/img/shop/marketplace/06.jpg" alt="Image">
+                            </a>
+                            <div
+                                class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 pt-1 pt-sm-0 pe-1 pe-sm-0 mt-2 mt-sm-3 me-2 me-sm-3">
+                                <button type="button"
+                                    class="btn btn-sm btn-icon btn-light bg-light border-0 rounded-circle animate-pulse"
+                                    aria-label="Add to wishlist">
+                                    <i class="ci-heart animate-target fs-sm"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <div class="card-body p-3">
+                            <div class="d-flex min-w-0 justify-content-between gap-2 gap-sm-3 mb-2">
+                                <h3 class="nav min-w-0 mb-0">
+                                    <a class="nav-link text-truncate p-0" href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                                        <span class="text-truncate animate-target">A stunning set of tablet pro
+                                            mockups</span>
+                                    </a>
+                                </h3>
+                                <div class="h6 mb-0">$18</div>
+                            </div>
+                            <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
+                                <div class="nav align-items-center gap-1 fs-xs">
+                                    <a class="nav-link fs-xs text-body gap-1 p-0" href="{{ route('second', ['shop', 'catalog-marketplace']) }}">
+                                        <div class="flex-shrink-0 border rounded-circle" style="width: 22px">
+                                            <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
+                                                <img src="/img/shop/marketplace/avatars/03.png" alt="Avatar">
+                                            </div>
+                                        </div>
+                                        MD Studio
+                                    </a>
+                                    <div class="text-body-secondary">in</div>
+                                    <a class="nav-link fs-xs text-body p-0"
+                                        href="{{ route('second', ['shop', 'catalog-marketplace']) }}">Mockups</a>
+                                </div>
+                                <div class="fs-xs text-body-secondary">33 sales</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Product -->
+                <div class="col">
+                    <div
+                        class="card h-100 animate-underline hover-effect-opacity hover-effect-scale rounded-4 overflow-hidden">
+                        <div class="card-img-top position-relative bg-body-tertiary overflow-hidden">
+                            <a class="ratio d-block hover-effect-target"
+                                style="--cz-aspect-ratio: calc(220 / 304 * 100%)" href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                                <img src="/img/shop/marketplace/18.jpg" alt="Image">
+                            </a>
+                            <div
+                                class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 pt-1 pt-sm-0 pe-1 pe-sm-0 mt-2 mt-sm-3 me-2 me-sm-3">
+                                <button type="button"
+                                    class="btn btn-sm btn-icon btn-light bg-light border-0 rounded-circle animate-pulse"
+                                    aria-label="Add to wishlist">
+                                    <i class="ci-heart animate-target fs-sm"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <div class="card-body p-3">
+                            <div class="d-flex min-w-0 justify-content-between gap-2 gap-sm-3 mb-2">
+                                <h3 class="nav min-w-0 mb-0">
+                                    <a class="nav-link text-truncate p-0" href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                                        <span class="text-truncate animate-target">House plants website template</span>
+                                    </a>
+                                </h3>
+                                <div class="h6 mb-0">$35</div>
+                            </div>
+                            <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
+                                <div class="nav align-items-center gap-1 fs-xs">
+                                    <a class="nav-link fs-xs text-body gap-1 p-0" href="{{ route('second', ['shop', 'catalog-marketplace']) }}">
+                                        <div class="flex-shrink-0 border rounded-circle" style="width: 22px">
+                                            <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
+                                                <img src="/img/shop/marketplace/avatars/02.png" alt="Avatar">
+                                            </div>
+                                        </div>
+                                        Magic FS
+                                    </a>
+                                    <div class="text-body-secondary">in</div>
+                                    <a class="nav-link fs-xs text-body p-0"
+                                        href="{{ route('second', ['shop', 'catalog-marketplace']) }}">Templates</a>
+                                </div>
+                                <div class="fs-xs text-body-secondary">192 sales</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- View all button -->
+            <div class="text-center pt-3 mt-2 mt-sm-3">
+                <a class="btn btn-lg btn-dark rounded-pill animate-slide-end" href="{{ route('second', ['shop', 'catalog-marketplace']) }}">
+                    Explore all resources
+                    <i class="ci-chevron-right animate-target fs-lg ms-1 me-n1"></i>
+                </a>
+            </div>
+        </section>
+
+
+        <!-- Collections -->
+        <section class="container py-2 py-sm-3 py-md-4 py-lg-5 my-xxl-3">
+            <h2 class="h3 pb-1 pb-sm-2 pb-md-3">Best collections</h2>
+            <div class="row row-cols-2 row-cols-md-4 gy-4 gx-3 gx-sm-4 gx-md-3 gx-xl-4">
+
+                <!-- Collection -->
+                <div class="col">
+                    <div class="position-relative animate-underline">
+                        <div class="ratio bg-body-tertiary rounded overflow-hidden mb-1"
+                            style="--cz-aspect-ratio: calc(160 / 306 * 100%)">
+                            <img src="/img/home/marketplace/collections/01.jpg" alt="Image">
+                        </div>
+                        <div class="d-flex gap-1">
+                            <div class="ratio bg-body-tertiary rounded overflow-hidden"
+                                style="--cz-aspect-ratio: calc(160 / 151 * 100%)">
+                                <img src="/img/home/marketplace/collections/02.jpg" alt="Image">
+                            </div>
+                            <div class="ratio bg-body-tertiary rounded overflow-hidden"
+                                style="--cz-aspect-ratio: calc(160 / 151 * 100%)">
+                                <img src="/img/home/marketplace/collections/03.jpg" alt="Image">
+                            </div>
+                        </div>
+                        <div class="d-flex min-w-0 justify-content-between gap-2 gap-sm-3 pt-3">
+                            <h3 class="nav min-w-0 mb-0">
+                                <a class="nav-link fs-base text-truncate stretched-link p-0"
+                                    href="{{ route('second', ['shop', 'catalog-marketplace']) }}">
+                                    <span class="text-truncate animate-target">Vectors</span>
+                                </a>
+                            </h3>
+                            <button type="button"
+                                class="btn btn-sm btn-icon btn-light bg-transparent border-0 rounded-0 animate-pulse position-relative z-3"
+                                aria-label="Add to wishlist">
+                                <i class="ci-heart animate-target fs-sm"></i>
+                            </button>
+                        </div>
+                        <div class="fs-xs text-body-secondary">546 resources</div>
+                    </div>
+                </div>
+
+                <!-- Collection -->
+                <div class="col">
+                    <div class="position-relative animate-underline">
+                        <div class="ratio bg-body-tertiary rounded overflow-hidden mb-1"
+                            style="--cz-aspect-ratio: calc(160 / 306 * 100%)">
+                            <img src="/img/home/marketplace/collections/04.jpg" alt="Image">
+                        </div>
+                        <div class="d-flex gap-1">
+                            <div class="ratio bg-body-tertiary rounded overflow-hidden"
+                                style="--cz-aspect-ratio: calc(160 / 151 * 100%)">
+                                <img src="/img/home/marketplace/collections/05.jpg" alt="Image">
+                            </div>
+                            <div class="ratio bg-body-tertiary rounded overflow-hidden"
+                                style="--cz-aspect-ratio: calc(160 / 151 * 100%)">
+                                <img src="/img/home/marketplace/collections/06.jpg" alt="Image">
+                            </div>
+                        </div>
+                        <div class="d-flex min-w-0 justify-content-between gap-2 gap-sm-3 pt-3">
+                            <h3 class="nav min-w-0 mb-0">
+                                <a class="nav-link fs-base text-truncate stretched-link p-0"
+                                    href="{{ route('second', ['shop', 'catalog-marketplace']) }}">
+                                    <span class="text-truncate animate-target">Glass effect</span>
+                                </a>
+                            </h3>
+                            <button type="button"
+                                class="btn btn-sm btn-icon btn-light bg-transparent border-0 rounded-0 animate-pulse position-relative z-3"
+                                aria-label="Add to wishlist">
+                                <i class="ci-heart animate-target fs-sm"></i>
+                            </button>
+                        </div>
+                        <div class="fs-xs text-body-secondary">112 resources</div>
+                    </div>
+                </div>
+
+                <!-- Collection -->
+                <div class="col">
+                    <div class="position-relative animate-underline">
+                        <div class="ratio bg-body-tertiary rounded overflow-hidden mb-1"
+                            style="--cz-aspect-ratio: calc(160 / 306 * 100%)">
+                            <img src="/img/home/marketplace/collections/07.jpg" alt="Image">
+                        </div>
+                        <div class="d-flex gap-1">
+                            <div class="ratio bg-body-tertiary rounded overflow-hidden"
+                                style="--cz-aspect-ratio: calc(160 / 151 * 100%)">
+                                <img src="/img/home/marketplace/collections/08.jpg" alt="Image">
+                            </div>
+                            <div class="ratio bg-body-tertiary rounded overflow-hidden"
+                                style="--cz-aspect-ratio: calc(160 / 151 * 100%)">
+                                <img src="/img/home/marketplace/collections/09.jpg" alt="Image">
+                            </div>
+                        </div>
+                        <div class="d-flex min-w-0 justify-content-between gap-2 gap-sm-3 pt-3">
+                            <h3 class="nav min-w-0 mb-0">
+                                <a class="nav-link fs-base text-truncate stretched-link p-0"
+                                    href="{{ route('second', ['shop', 'catalog-marketplace']) }}">
+                                    <span class="text-truncate animate-target">Device mockups</span>
+                                </a>
+                            </h3>
+                            <button type="button"
+                                class="btn btn-sm btn-icon btn-light bg-transparent border-0 rounded-0 animate-pulse position-relative z-3"
+                                aria-label="Add to wishlist">
+                                <i class="ci-heart animate-target fs-sm"></i>
+                            </button>
+                        </div>
+                        <div class="fs-xs text-body-secondary">305 resources</div>
+                    </div>
+                </div>
+
+                <!-- Collection -->
+                <div class="col">
+                    <div class="position-relative animate-underline">
+                        <div class="ratio bg-body-tertiary rounded overflow-hidden mb-1"
+                            style="--cz-aspect-ratio: calc(160 / 306 * 100%)">
+                            <img src="/img/home/marketplace/collections/10.jpg" alt="Image">
+                        </div>
+                        <div class="d-flex gap-1">
+                            <div class="ratio bg-body-tertiary rounded overflow-hidden"
+                                style="--cz-aspect-ratio: calc(160 / 151 * 100%)">
+                                <img src="/img/home/marketplace/collections/11.jpg" alt="Image">
+                            </div>
+                            <div class="ratio bg-body-tertiary rounded overflow-hidden"
+                                style="--cz-aspect-ratio: calc(160 / 151 * 100%)">
+                                <img src="/img/home/marketplace/collections/12.jpg" alt="Image">
+                            </div>
+                        </div>
+                        <div class="d-flex min-w-0 justify-content-between gap-2 gap-sm-3 pt-3">
+                            <h3 class="nav min-w-0 mb-0">
+                                <a class="nav-link fs-base text-truncate stretched-link p-0"
+                                    href="{{ route('second', ['shop', 'catalog-marketplace']) }}">
+                                    <span class="text-truncate animate-target">Mockup resources</span>
+                                </a>
+                            </h3>
+                            <button type="button"
+                                class="btn btn-sm btn-icon btn-light bg-transparent border-0 rounded-0 animate-pulse position-relative z-3"
+                                aria-label="Add to wishlist">
+                                <i class="ci-heart animate-target fs-sm"></i>
+                            </button>
+                        </div>
+                        <div class="fs-xs text-body-secondary">289 resources</div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- View all button -->
+            <div class="text-center pt-3 mt-2 mt-sm-3 pb-5">
+                <a class="btn btn-lg btn-dark rounded-pill animate-slide-end" href="#!">
+                    Explore all collections
+                    <i class="ci-chevron-right animate-target fs-lg ms-1 me-n1"></i>
+                </a>
+            </div>
+        </section>
+    </main> 
+
+    @include('layouts.partials/footer3')
+@endsection
+
+@section('scripts')
+@endsection
diff --git a/resources/views/home/single-store.blade.php b/resources/views/home/single-store.blade.php
new file mode 100644
index 0000000..979bc5c
--- /dev/null
+++ b/resources/views/home/single-store.blade.php
@@ -0,0 +1,1135 @@
+@extends('layouts.landing', ['title' => 'Single Product Store'])
+
+@section('content')
+    <div class="offcanvas offcanvas-end pb-sm-2 px-sm-2" id="shoppingCart" tabindex="-1" aria-labelledby="shoppingCartLabel"
+        style="width: 500px">
+        <div class="offcanvas-header py-3 pt-lg-4">
+            <h4 class="offcanvas-title" id="shoppingCartLabel">Shopping cart</h4>
+            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+        </div>
+        <div class="offcanvas-body text-center">
+            <svg class="d-block mx-auto mb-4" xmlns="http://www.w3.org/2000/svg" width="60" viewBox="0 0 29.5 30">
+                <path class="text-body-tertiary"
+                    d="M17.8 4c.4 0 .8-.3.8-.8v-2c0-.4-.3-.8-.8-.8-.4 0-.8.3-.8.8v2c0 .4.3.8.8.8zm3.2.6c.4.2.8 0 1-.4l.4-.9c.2-.4 0-.8-.4-1s-.8 0-1 .4l-.4.9c-.2.4 0 .9.4 1zm-7.5-.4c.2.4.6.6 1 .4s.6-.6.4-1l-.4-.9c-.2-.4-.6-.6-1-.4s-.6.6-.4 1l.4.9z"
+                    fill="currentColor" />
+                <path class="text-body-emphasis"
+                    d="M10.7 24.5c-1.5 0-2.8 1.2-2.8 2.8S9.2 30 10.7 30s2.8-1.2 2.8-2.8-1.2-2.7-2.8-2.7zm0 4c-.7 0-1.2-.6-1.2-1.2s.6-1.2 1.2-1.2 1.2.6 1.2 1.2-.5 1.2-1.2 1.2zm11.1-4c-1.5 0-2.8 1.2-2.8 2.8a2.73 2.73 0 0 0 2.8 2.8 2.73 2.73 0 0 0 2.8-2.8c0-1.6-1.3-2.8-2.8-2.8zm0 4c-.7 0-1.2-.6-1.2-1.2s.6-1.2 1.2-1.2 1.2.6 1.2 1.2-.6 1.2-1.2 1.2zM8.7 18h16c.3 0 .6-.2.7-.5l4-10c.2-.5-.2-1-.7-1H9.3c-.4 0-.8.3-.8.8s.4.7.8.7h18.3l-3.4 8.5H9.3L5.5 1C5.4.7 5.1.5 4.8.5h-4c-.5 0-.8.3-.8.7s.3.8.8.8h3.4l3.7 14.6a3.24 3.24 0 0 0-2.3 3.1C5.5 21.5 7 23 8.7 23h16c.4 0 .8-.3.8-.8s-.3-.8-.8-.8h-16a1.79 1.79 0 0 1-1.8-1.8c0-1 .9-1.6 1.8-1.6z"
+                    fill="currentColor" />
+            </svg>
+            <h6 class="mb-2">Your shopping cart is currently empty!</h6>
+            <p class="fs-sm mb-4">Add item(s) to the cart to proceed with your purchase.</p>
+            <button type="button" class="btn btn-dark rounded-pill" data-bs-dismiss="offcanvas" aria-label="Close">Continue
+                shopping</button>
+        </div>
+    </div>
+
+    <header class="navbar-sticky sticky-top container z-fixed px-2 mt-3" data-sticky-element>
+        <div class="navbar navbar-expand-lg flex-nowrap bg-body rounded-pill shadow ps-0 mx-1">
+            <div class="position-absolute top-0 start-0 w-100 h-100 bg-dark rounded-pill z-0 d-none d-block-dark"></div>
+
+            <!-- Mobile offcanvas menu toggler (Hamburger) -->
+            <button type="button" class="navbar-toggler ms-3" data-bs-toggle="offcanvas" data-bs-target="#navbarNav"
+                aria-controls="navbarNav" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+
+            <!-- Navbar brand (Logo) -->
+            <a class="navbar-brand position-relative z-1 ms-4 ms-sm-5 ms-lg-4 me-2 me-sm-0 me-lg-3"
+                href="/">Cartzilla</a>
+
+            <!-- Main navigation that turns into offcanvas on screens < 992px wide (lg breakpoint) -->
+            <nav class="offcanvas offcanvas-start" id="navbarNav" tabindex="-1" aria-labelledby="navbarNavLabel">
+                <div class="offcanvas-header py-3">
+                    <h5 class="offcanvas-title" id="navbarNavLabel">Browse Cartzilla</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+                </div>
+                <div class="offcanvas-body pt-3 pb-4 py-lg-0 mx-lg-auto">
+                    <ul class="navbar-nav position-relative">
+                        <li class="nav-item dropdown me-lg-n1 me-xl-0">
+                            <a class="nav-link dropdown-toggle fs-sm active" aria-current="page" href="#"
+                                role="button" data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                aria-expanded="false">Home</a>
+                            <ul class="dropdown-menu" style="--cz-dropdown-spacer: 1rem">
+                                <li class="hover-effect-opacity px-2 mx-n2">
+                                    <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'electronics']) }}">
+                                        <span class="fw-medium">Electronics Store</span>
+                                        <span class="d-block fs-xs text-body-secondary">Megamenu + Hero slider</span>
+                                        <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                            style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                            <img class="position-relative z-2 d-none-dark"
+                                                src="/img/mega-menu/demo-preview/electronics-light.jpg"
+                                                alt="Electronics Store">
+                                            <img class="position-relative z-2 d-none d-block-dark"
+                                                src="/img/mega-menu/demo-preview/electronics-dark.jpg"
+                                                alt="Electronics Store">
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                        </div>
+                                    </a>
+                                </li>
+                                <li class="hover-effect-opacity px-2 mx-n2">
+                                    <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'fashion-v1']) }}">
+                                        <span class="fw-medium">Fashion Store v.1</span>
+                                        <span class="d-block fs-xs text-body-secondary">Hero promo slider</span>
+                                        <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                            style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                            <img class="position-relative z-2 d-none-dark"
+                                                src="/img/mega-menu/demo-preview/fashion-1-light.jpg"
+                                                alt="Fashion Store v.1">
+                                            <img class="position-relative z-2 d-none d-block-dark"
+                                                src="/img/mega-menu/demo-preview/fashion-1-dark.jpg"
+                                                alt="Fashion Store v.1">
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                        </div>
+                                    </a>
+                                </li>
+                                <li class="hover-effect-opacity px-2 mx-n2">
+                                    <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'fashion-v2']) }}">
+                                        <span class="fw-medium">Fashion Store v.2</span>
+                                        <span class="d-block fs-xs text-body-secondary">Hero banner with hotspots</span>
+                                        <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                            style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                            <img class="position-relative z-2 d-none-dark"
+                                                src="/img/mega-menu/demo-preview/fashion-2-light.jpg"
+                                                alt="Fashion Store v.2">
+                                            <img class="position-relative z-2 d-none d-block-dark"
+                                                src="/img/mega-menu/demo-preview/fashion-2-dark.jpg"
+                                                alt="Fashion Store v.2">
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                        </div>
+                                    </a>
+                                </li>
+                                <li class="hover-effect-opacity px-2 mx-n2">
+                                    <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'furniture']) }}">
+                                        <span class="fw-medium">Furniture Store</span>
+                                        <span class="d-block fs-xs text-body-secondary">Fancy product carousel</span>
+                                        <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                            style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                            <img class="position-relative z-2 d-none-dark"
+                                                src="/img/mega-menu/demo-preview/furniture-light.jpg"
+                                                alt="Furniture Store">
+                                            <img class="position-relative z-2 d-none d-block-dark"
+                                                src="/img/mega-menu/demo-preview/furniture-dark.jpg"
+                                                alt="Furniture Store">
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                        </div>
+                                    </a>
+                                </li>
+                                <li class="hover-effect-opacity px-2 mx-n2">
+                                    <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'grocery']) }}">
+                                        <span class="fw-medium">Grocery Store</span>
+                                        <span class="d-block fs-xs text-body-secondary">Hero slider + Category cards</span>
+                                        <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                            style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                            <img class="position-relative z-2 d-none-dark"
+                                                src="/img/mega-menu/demo-preview/grocery-light.jpg" alt="Grocery Store">
+                                            <img class="position-relative z-2 d-none d-block-dark"
+                                                src="/img/mega-menu/demo-preview/grocery-dark.jpg" alt="Grocery Store">
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                        </div>
+                                    </a>
+                                </li>
+                                <li class="hover-effect-opacity px-2 mx-n2">
+                                    <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'marketplace']) }}">
+                                        <span class="fw-medium">Marketplace</span>
+                                        <span class="d-block fs-xs text-body-secondary">Multi-vendor, digital goods</span>
+                                        <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                            style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                            <img class="position-relative z-2 d-none-dark"
+                                                src="/img/mega-menu/demo-preview/marketplace-light.jpg" alt="Marketplace">
+                                            <img class="position-relative z-2 d-none d-block-dark"
+                                                src="/img/mega-menu/demo-preview/marketplace-dark.jpg" alt="Marketplace">
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                        </div>
+                                    </a>
+                                </li>
+                                <li class="hover-effect-opacity px-2 mx-n2">
+                                    <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'single-store']) }}">
+                                        <span class="fw-medium">Single Product Store</span>
+                                        <span class="d-block fs-xs text-body-secondary">Single product / mono brand</span>
+                                        <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                            style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                            <img class="position-relative z-2 d-none-dark"
+                                                src="/img/mega-menu/demo-preview/single-store-light.jpg"
+                                                alt="Single Product Store">
+                                            <img class="position-relative z-2 d-none d-block-dark"
+                                                src="/img/mega-menu/demo-preview/single-store-dark.jpg"
+                                                alt="Single Product Store">
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                        </div>
+                                    </a>
+                                </li>
+                            </ul>
+                        </li>
+                        <li class="nav-item dropdown position-static me-lg-n1 me-xl-0">
+                            <a class="nav-link dropdown-toggle fs-sm" href="#" role="button"
+                                data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Shop</a>
+                            <div class="dropdown-menu p-4" style="--cz-dropdown-spacer: 1rem">
+                                <div class="d-flex flex-column flex-lg-row gap-4">
+                                    <div style="min-width: 190px">
+                                        <div class="h6 mb-2">Electronics Store</div>
+                                        <ul class="nav flex-column gap-2 mt-0">
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'categories-electronics']) }}">Categories Page</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Catalog with Side Filters</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'product-general-electronics']) }}">Product General Info</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'product-details-electronics']) }}">Product Details</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'product-reviews-electronics']) }}">Product Reviews</a>
+                                            </li>
+                                        </ul>
+                                        <div class="h6 pt-4 mb-2">Fashion Store</div>
+                                        <ul class="nav flex-column gap-2 mt-0">
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Catalog with Side Filters</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'product-fashion']) }}">Product Page</a>
+                                            </li>
+                                        </ul>
+                                        <div class="h6 pt-4 mb-2">Furniture Store</div>
+                                        <ul class="nav flex-column gap-2 mt-0">
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'catalog-furniture']) }}">Catalog with Top Filters</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'product-furniture']) }}">Product Page</a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                    <div style="min-width: 190px">
+                                        <div class="h6 mb-2">Grocery Store</div>
+                                        <ul class="nav flex-column gap-2 mt-0">
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Catalog with Side Filters</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'product-grocery']) }}">Product Page</a>
+                                            </li>
+                                        </ul>
+                                        <div class="h6 pt-4 mb-2">Marketplace</div>
+                                        <ul class="nav flex-column gap-2 mt-0">
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'catalog-marketplace']) }}">Catalog with Top Filters</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'product-marketplace']) }}">Digital Product Page</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'marketplace']) }}">Cart / Checkout</a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                    <div style="min-width: 190px">
+                                        <div class="h6 mb-2">Checkout v.1</div>
+                                        <ul class="nav flex-column gap-2 mt-0">
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'v1-cart']) }}">Shopping Cart</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'v1-delivery-1']) }}">Delivery Info (Step 1)</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'v1-delivery-2']) }}">Delivery Info (Step 2)</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'v1-shipping']) }}">Shipping Address</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'v1-payment']) }}">Payment</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'v1-thankyou']) }}">Thank You Page</a>
+                                            </li>
+                                        </ul>
+                                        <div class="h6 pt-4 mb-2">Checkout v.2</div>
+                                        <ul class="nav flex-column gap-2 mt-0">
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'v2-cart']) }}">Shopping Cart</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'v2-delivery']) }}">Delivery Info</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'v2-pickup']) }}">Pickup from Store</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'v2-thankyou']) }}">Thank You Page</a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+                        </li>
+                        <li class="nav-item dropdown me-lg-n1 me-xl-0">
+                            <a class="nav-link dropdown-toggle fs-sm" href="#" role="button"
+                                data-bs-toggle="dropdown" data-bs-trigger="hover" data-bs-auto-close="outside"
+                                aria-expanded="false">Account</a>
+                            <ul class="dropdown-menu" style="--cz-dropdown-spacer: 1rem">
+                                <li class="dropend">
+                                    <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Auth
+                                        Pages</a>
+                                    <ul class="dropdown-menu">
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'signin']) }}">Sign In</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'signup']) }}">Sign Up</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'password-recovery']) }}">Password
+                                                Recovery</a></li>
+                                    </ul>
+                                </li>
+                                <li class="dropend">
+                                    <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Shop
+                                        User</a>
+                                    <ul class="dropdown-menu">
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'orders']) }}">Orders History</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'wishlist']) }}">Wishlist</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'payment']) }}">Payment Methods</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'reviews']) }}">My Reviews</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'info']) }}">Personal Info</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'addresses']) }}">Addresses</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'notifications']) }}">Notifications</a>
+                                        </li>
+                                    </ul>
+                                </li>
+                                <li class="dropend">
+                                    <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                        aria-expanded="false">Marketplace User</a>
+                                    <ul class="dropdown-menu">
+                                        <li><a class="dropdown-item"
+                                                href="{{ route('second', ['account', 'marketplace-dashboard']) }}">Dashboard</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-products']) }}">Products</a>
+                                        </li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-sales']) }}">Sales</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-payouts']) }}">Payouts</a>
+                                        </li>
+                                        <li><a class="dropdown-item"
+                                                href="{{ route('second', ['account', 'marketplace-purchases']) }}">Purchases</a></li>
+                                        <li><a class="dropdown-item"
+                                                href="{{ route('second', ['account', 'marketplace-favorites']) }}">Favorites</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-settings']) }}">Settings</a>
+                                        </li>
+                                    </ul>
+                                </li>
+                            </ul>
+                        </li>
+                        <li class="nav-item dropdown me-lg-n1 me-xl-0">
+                            <a class="nav-link dropdown-toggle fs-sm" href="#" role="button"
+                                data-bs-toggle="dropdown" data-bs-trigger="hover" data-bs-auto-close="outside"
+                                aria-expanded="false">Pages</a>
+                            <ul class="dropdown-menu" style="--cz-dropdown-spacer: 1rem">
+                                <li class="dropend">
+                                    <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">About</a>
+                                    <ul class="dropdown-menu">
+                                        <li><a class="dropdown-item" href="{{ route('second', ['about', 'v1']) }}">About v.1</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['about', 'v2']) }}">About v.2</a></li>
+                                    </ul>
+                                </li>
+                                <li class="dropend">
+                                    <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Blog</a>
+                                    <ul class="dropdown-menu">
+                                        <li><a class="dropdown-item" href="{{ route('second', ['blog', 'grid-v1']) }}">Grid View v.1</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['blog', 'grid-v2']) }}">Grid View v.2</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['blog', 'list']) }}">List View</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['blog', 'single-v1']) }}">Single Post v.1</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['blog', 'single-v2']) }}">Single Post v.2</a></li>
+                                    </ul>
+                                </li>
+                                <li class="dropend">
+                                    <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                        aria-expanded="false">Contact</a>
+                                    <ul class="dropdown-menu">
+                                        <li><a class="dropdown-item" href="{{ route('second', ['contact', 'v1']) }}">Contact v.1</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['contact', 'v2']) }}">Contact v.2</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['contact', 'v3']) }}">Contact v.3</a></li>
+                                    </ul>
+                                </li>
+                                <li class="dropend">
+                                    <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Help
+                                        Center</a>
+                                    <ul class="dropdown-menu">
+                                        <li><a class="dropdown-item" href="{{ route('second', ['help', 'topics-v1']) }}">Help Topics v.1</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['help', 'topics-v2']) }}">Help Topics v.2</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['help', 'single-article-v1']) }}">Help Single
+                                                Article v.1</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['help', 'single-article-v2']) }}">Help Single
+                                                Article v.2</a></li>
+                                    </ul>
+                                </li>
+                                <li class="dropend">
+                                    <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">404
+                                        Error</a>
+                                    <ul class="dropdown-menu">
+                                        <li><a class="dropdown-item" href="{{ route('second', ['404', 'electronics']) }}">404 Electronics</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['404', 'fashion']) }}">404 Fashion</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['404', 'furniture']) }}">404 Furniture</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['404', 'grocery']) }}">404 Grocery</a></li>
+                                    </ul>
+                                </li>
+                                <li><a class="dropdown-item" href="{{ route('any', 'terms-and-conditions')}}">Terms &amp; Conditions</a>
+                                </li>
+                            </ul>
+                        </li>
+                        
+                    </ul>
+                </div>
+            </nav>
+
+            <!-- Button group -->
+            <div class="d-flex gap-sm-1 position-relative z-1">
+
+                <!-- Theme switcher (light/dark/auto) -->
+                <div class="dropdown me-1">
+                    <button type="button"
+                        class="theme-switcher btn btn-icon btn-outline-secondary fs-lg border-0 rounded-circle animate-scale"
+                        data-bs-toggle="dropdown" data-bs-display="dynamic" aria-expanded="false"
+                        aria-label="Toggle theme (light)">
+                        <span class="theme-icon-active d-flex animate-target">
+                            <i class="ci-sun"></i>
+                        </span>
+                    </button>
+                    <ul class="dropdown-menu start-50 translate-middle-x"
+                        style="--cz-dropdown-min-width: 9rem; --cz-dropdown-spacer: 1rem">
+                        <li>
+                            <button type="button" class="dropdown-item active" data-bs-theme-value="light"
+                                aria-pressed="true">
+                                <span class="theme-icon d-flex fs-base me-2">
+                                    <i class="ci-sun"></i>
+                                </span>
+                                <span class="theme-label">Light</span>
+                                <i class="item-active-indicator ci-check ms-auto"></i>
+                            </button>
+                        </li>
+                        <li>
+                            <button type="button" class="dropdown-item" data-bs-theme-value="dark"
+                                aria-pressed="false">
+                                <span class="theme-icon d-flex fs-base me-2">
+                                    <i class="ci-moon"></i>
+                                </span>
+                                <span class="theme-label">Dark</span>
+                                <i class="item-active-indicator ci-check ms-auto"></i>
+                            </button>
+                        </li>
+                        <li>
+                            <button type="button" class="dropdown-item" data-bs-theme-value="auto"
+                                aria-pressed="false">
+                                <span class="theme-icon d-flex fs-base me-2">
+                                    <i class="ci-auto"></i>
+                                </span>
+                                <span class="theme-label">Auto</span>
+                                <i class="item-active-indicator ci-check ms-auto"></i>
+                            </button>
+                        </li>
+                    </ul>
+                </div>
+
+                <!-- Cart button -->
+                <button type="button" class="btn btn-warning rounded-pill" data-bs-toggle="offcanvas"
+                    data-bs-target="#shoppingCart" aria-controls="shoppingCart" aria-label="Shopping cart">
+                    Cart (0)
+                </button>
+            </div>
+        </div>
+    </header>
+
+    <main class="content-wrapper">
+
+        <!-- Hero image section -->
+        <section class="position-relative bg-body-tertiary overflow-hidden"
+            style="border-bottom-right-radius: 48px; border-bottom-left-radius: 48px; margin-top: -80px; padding-top: 80px">
+
+            <!-- Content -->
+            <div class="container position-relative z-1 pt-5 pb-4 pb-sm-5">
+                <div class="row py-md-4 py-lg-5 mt-xl-2 mb-xl-5">
+                    <div class="col-lg-6 pt-xxl-4">
+                        <h1 class="d-flex flex-column text-white text-uppercase fst-italic pb-lg-3 mb-lg-4"
+                            style="font-weight: 800">
+                            <span class="d-none d-lg-block" style="font-size: 120px">Modern</span>
+                            <span class="d-none d-lg-block" style="font-size: 120px">Reliable</span>
+                            <span class="d-none d-lg-block" style="font-size: 120px">Fresh</span>
+                            <span class="d-none d-md-block d-lg-none" style="font-size: 80px">Modern</span>
+                            <span class="d-none d-md-block d-lg-none" style="font-size: 80px">Reliable</span>
+                            <span class="d-none d-md-block d-lg-none" style="font-size: 80px">Fresh</span>
+                            <span class="d-md-none" style="font-size: 60px">Modern</span>
+                            <span class="d-md-none" style="font-size: 60px">Reliable</span>
+                            <span class="d-md-none" style="font-size: 60px">Fresh</span>
+                        </h1>
+                    </div>
+                    <div class="col-lg-6 d-flex justify-content-end pt-4">
+                        <div class="vstack justify-content-end align-items-end gap-2 gap-lg-3">
+                            <div class="d-flex align-items-center text-white rounded-pill bg-white bg-opacity-25 border border-white border-opacity-25 px-3 px-sm-4 mb-1"
+                                style="padding: 14px 0; box-shadow: 0 12px 12px -4px rgba(0,0,0, .05); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px)">
+                                <i class="ci-sun fs-5 me-2"></i>
+                                <div class="fw-medium">12 hours of hot comfort</div>
+                            </div>
+                            <div class="d-flex align-items-center text-white rounded-pill bg-white bg-opacity-25 border border-white border-opacity-25 px-3 px-sm-4 mb-1"
+                                style="padding: 14px 0; box-shadow: 0 12px 12px -4px rgba(0,0,0, .05); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px)">
+                                <svg class="me-2" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+                                    fill="currentColor">
+                                    <path
+                                        d="M9.396 13.337l-.755-.757V8.34l3.607-2.14 2.325.622c.054.014.108.021.162.021.276 0 .529-.184.603-.464.089-.333-.109-.676-.442-.765l-1.146-.307.93-.552c.297-.176.395-.56.219-.856s-.56-.395-.856-.219l-.883.524.274-1.083c.085-.335-.118-.675-.453-.759s-.675.118-.759.452l-.579 2.29-3.002 1.782V3.423l1.72-1.697c.246-.242.248-.638.006-.884S9.729.594 9.483.836l-.842.831V.625C8.641.28 8.361 0 8.016 0s-.625.28-.625.625v1.042L6.549.836c-.246-.242-.641-.24-.884.006s-.24.641.006.884l1.72 1.697v3.466L4.389 5.116l-.612-2.337c-.088-.334-.429-.534-.763-.446s-.534.429-.446.763l.293 1.117-.902-.533c-.297-.176-.68-.077-.856.22s-.077.68.22.856l.915.541-1.125.284c-.335.084-.537.424-.453.759.072.283.326.472.606.472.051 0 .102-.006.153-.019L3.768 6.2 6.79 7.985 3.748 9.79l-2.321-.614c-.334-.088-.676.111-.764.444s.111.676.444.764l1.133.3-.889.527c-.297.176-.395.56-.219.856.117.197.325.306.538.306.108 0 .218-.028.318-.088l.871-.517-.292 1.1c-.089.334.11.676.444.764a.64.64 0 0 0 .161.021c.277 0 .529-.185.604-.465l.618-2.331L7.39 9.079v3.495l-1.72 1.697c-.246.242-.248.638-.006.884.122.124.284.186.445.186a.62.62 0 0 0 .439-.18l.842-.831v1.042c0 .345.28.625.625.625s.625-.28.625-.625V14.35l.807.81a.62.62 0 0 0 .443.184.62.62 0 0 0 .441-.182c.244-.244.245-.639.002-.884l-.937-.94zm5.177-4.159l-2.277.609-1.588-.938c-.297-.176-.68-.077-.856.22s-.077.68.22.856l1.56.922.622 2.374c.074.281.327.467.604.467a.62.62 0 0 0 .159-.021c.334-.088.534-.429.446-.763l-.303-1.154.911.538a.62.62 0 0 0 .317.087c.214 0 .422-.11.539-.307.176-.297.077-.68-.22-.856l-.905-.534 1.092-.292c.333-.089.531-.432.442-.765s-.432-.531-.765-.442z" />
+                                </svg>
+                                <div class="fw-medium">24 hours of ice-cold refreshment</div>
+                            </div>
+                            <div class="d-flex align-items-center text-white rounded-pill bg-white bg-opacity-25 border border-white border-opacity-25 px-3 px-sm-4 mb-1"
+                                style="padding: 14px 0; box-shadow: 0 12px 12px -4px rgba(0,0,0, .05); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px)">
+                                <i class="ci-leaf fs-5 me-2"></i>
+                                <div class="fw-medium">The quality free from harmful chemicals</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Foreground image -->
+            <img src="/img/home/single-product/hero/foreground.png"
+                class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover z-2 d-none d-md-block"
+                alt="Foreground image">
+
+            <!-- Background image -->
+            <img src="/img/home/single-product/hero/background.jpg"
+                class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover" alt="Background image">
+        </section>
+
+
+        <!-- Features -->
+        <section class="container pt-2 pt-sm-3 pt-md-4 pt-lg-5 pb-5 my-xxl-3">
+            <div class="row justify-content-center pt-5 pb-4 pb-lg-5 mb-md-3 mb-lg-0">
+                <div class="col-lg-6 text-center">
+                    <h2 class="display-4 mb-0">The clever choice for modern hydration</h2>
+                </div>
+            </div>
+            <div class="row align-items-center justify-content-center pb-3 pb-lg-0 mb-4 mb-lg-5">
+                <div class="col-md-4 mb-4 mb-md-0">
+                    <div class="vstack gap-4 gap-lg-5">
+                        <div class="vstack align-items-center gap-2 text-center">
+                            <svg class="text-dark-emphasis mb-xl-2" xmlns="http://www.w3.org/2000/svg" width="48"
+                                height="49" fill="currentColor">
+                                <path
+                                    d="M25.745 31.172l-.944-.947v-5.3l4.509-2.675 2.907.778c.068.018.136.027.203.027a.78.78 0 0 0 .754-.579.78.78 0 0 0-.553-.957l-1.432-.383 1.163-.69a.781.781 0 1 0-.797-1.344l-1.104.655.343-1.354a.781.781 0 0 0-1.515-.383l-.724 2.862-3.753 2.227v-4.33l2.15-2.121a.781.781 0 1 0-1.097-1.112l-1.053 1.038v-1.303a.781.781 0 1 0-1.562 0v1.303l-1.053-1.039a.781.781 0 1 0-1.097 1.112l2.15 2.121v4.333l-3.752-2.217-.765-2.921a.781.781 0 0 0-1.512.396l.366 1.396-1.127-.666a.781.781 0 1 0-.795 1.345l1.144.676-1.407.355a.78.78 0 0 0-.566.949.78.78 0 0 0 .757.59.8.8 0 0 0 .192-.024l2.936-.741 3.777 2.231-3.803 2.257-2.901-.767a.781.781 0 1 0-.399 1.511l1.417.375-1.111.659a.78.78 0 0 0 .797 1.343l1.089-.646-.365 1.375a.78.78 0 1 0 1.511.401l.773-2.914 3.746-2.223v4.369l-2.15 2.121a.78.78 0 1 0 1.098 1.112l1.053-1.038v1.303a.781.781 0 1 0 1.563 0v-1.281l1.009 1.012a.78.78 0 1 0 1.107-1.103l-1.172-1.175zm6.471-5.2l-2.846.762-1.985-1.172a.781.781 0 1 0-.795 1.345l1.95 1.152.777 2.968a.78.78 0 1 0 1.512-.396l-.378-1.443 1.139.673a.78.78 0 0 0 .795-1.345l-1.131-.668 1.365-.366a.781.781 0 1 0-.404-1.509z" />
+                            </svg>
+                            <h3 class="h6 mb-0">24 Hours cold drink</h3>
+                            <p class="mb-0">Your drinks stay at the perfect temperature</p>
+                        </div>
+                        <div class="vstack align-items-center gap-2 text-center">
+                            <svg class="text-dark-emphasis mb-xl-2" xmlns="http://www.w3.org/2000/svg" width="48"
+                                height="49" fill="currentColor">
+                                <path
+                                    d="M23.78 16.14c-.361.005-.676.182-.865.486l-1.787 2.778a.78.78 0 0 1-1.077.234.78.78 0 0 1-.234-1.078l1.777-2.763a2.58 2.58 0 0 1 2.164-1.217c.889-.012 1.713.422 2.201 1.162l3.035 4.624.457-2.5a.78.78 0 0 1 .907-.627.78.78 0 0 1 .627.907l-.493 2.696c-.205 1.127-1.192 1.92-2.3 1.92-.139 0-.279-.012-.42-.038l-2.692-.522a.78.78 0 0 1-.617-.914.78.78 0 0 1 .914-.617l2.238.434-2.958-4.506a1.02 1.02 0 0 0-.877-.46zm-1.826 13.562h-5.359a1.02 1.02 0 0 1-.906-.526.98.98 0 0 1 .028-1.014l3.172-5.145.458 2.573a.78.78 0 0 0 .767.643c.045 0 .091-.004.138-.012a.78.78 0 0 0 .631-.904l-.509-2.86c-.226-1.269-1.441-2.117-2.709-1.893l-2.741.469a.78.78 0 0 0-.637.9.78.78 0 0 0 .9.637l2.401-.411-3.195 5.184c-.498.801-.522 1.77-.065 2.592a2.56 2.56 0 0 0 2.269 1.327h5.359a.78.78 0 0 0 .78-.78.78.78 0 0 0-.78-.78zm12.045-5.222c.016-.441-.32-.802-.75-.817-.196-.007-4.823-.146-7.527 2.558-1.033 1.032-1.553 2.153-1.545 3.332.005.787.245 1.43.454 1.877-.447.562-.871 1.16-1.27 1.795a.78.78 0 0 0 .246 1.075c.129.081.272.12.414.12a.78.78 0 0 0 .661-.365c1.436-2.287 3.135-3.988 5.194-5.199a.78.78 0 0 0 .276-1.067.78.78 0 0 0-1.067-.276c-1.185.698-2.281 1.562-3.279 2.586-.04-.173-.067-.358-.069-.554-.005-.756.351-1.482 1.088-2.219 1.634-1.633 4.292-2.002 5.596-2.082-.078 1.302-.443 3.955-2.084 5.595-.596.596-1.205.951-1.809 1.055a.78.78 0 0 0 .131 1.548.78.78 0 0 0 .133-.011c.928-.159 1.819-.66 2.648-1.489 2.561-2.561 2.572-6.846 2.56-7.459z" />
+                            </svg>
+                            <h3 class="h6 mb-0">Eco-friendly and safe</h3>
+                            <p class="mb-0">The highest-quality free from harmful chemicals</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-8 col-sm-6 col-md-4 mb-4 mb-md-0">
+                    <div class="ratio" style="--cz-aspect-ratio: calc(465 / 416 * 100%)">
+                        <img src="/img/home/single-product/01.png" alt="Image">
+                    </div>
+                </div>
+                <div class="col-md-4">
+                    <div class="vstack gap-4 gap-lg-5">
+                        <div class="vstack align-items-center gap-2 text-center">
+                            <svg class="text-dark-emphasis mb-xl-2" xmlns="http://www.w3.org/2000/svg" width="48"
+                                height="49" fill="none" stroke="currentColor" stroke-width="1.868"
+                                stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round">
+                                <path
+                                    d="M15.781 15.89L33 33.109m-3.1-3.064c-1.147 1.84-3.186 3.064-5.51 3.064-3.586 0-6.494-2.915-6.494-6.511v-.199c0-1.467 1.198-3.613 2.566-5.584m1.888-2.517l2.041-2.408s6.494 7.095 6.494 10.509v.199l-.013.419" />
+                            </svg>
+                            <h3 class="h6 mb-0">Leak-proof cap</h3>
+                            <p class="mb-0">Bottle without worrying about leaks</p>
+                        </div>
+                        <div class="vstack align-items-center gap-2 text-center">
+                            <svg class="text-dark-emphasis mb-xl-2" xmlns="http://www.w3.org/2000/svg" width="48"
+                                height="49" fill="currentColor">
+                                <path
+                                    d="M29.82 24.539c-1.292 0-2.344 1.051-2.344 2.344s1.051 2.344 2.344 2.344h3.32c.013 0 .026-.001.039-.002l.039.002a.78.78 0 0 0 .781-.781v-6.133a3.12 3.12 0 0 0-1.295-2.531l-2.658-4.36a.78.78 0 0 0-1.079-.257l-1.96 1.216-.884-1.496a.78.78 0 0 0-1.078-.27l-7.526 4.574h-1.176a.78.78 0 0 1-.781-.762.78.78 0 0 1 .781-.762h1.445a.78.78 0 1 0 0-1.562h-1.445a2.35 2.35 0 0 0-2.28 1.801c-.041.095-.064.199-.064.309v.195.039 12.93a3.13 3.13 0 0 0 3.125 3.125h13.75a3.12 3.12 0 0 0 2.965-2.136.78.78 0 1 0-1.482-.494 1.56 1.56 0 0 1-1.483 1.067h-13.75c-.862 0-1.562-.701-1.562-1.562V20.616c.245.087.507.134.781.134h14.531c.861 0 1.563.701 1.563 1.563v2.227H29.82zm2.617 3.125H29.82a.78.78 0 1 1 0-1.562h2.617v1.563zm-11.909-8.477l4.653-2.828.832 1.408a.79.79 0 0 0 .057.113c.017.027.036.053.056.077l.726 1.23h-6.324zm8.139 0l-.864-1.462 1.319-.818 1.39 2.281h-1.845z" />
+                            </svg>
+                            <h3 class="h6 mb-0">30-day money-back guarantee</h3>
+                            <p class="mb-0">We offer a full refund within 30 days</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="text-center">
+                <button type="button" class="btn btn-lg btn-dark rounded-pill">Buy Bottle from $20.00</button>
+            </div>
+        </section>
+
+
+        <!-- Features -->
+        <section class="container pt-2 pt-sm-3 pt-md-4 pt-lg-5 pb-5 my-xxl-3">
+            <div class="row mb-4">
+                <div class="col-md-5 order-md-2 mb-4 mb-md-0">
+                    <div class="position-relative h-100 bg-body-tertiary rounded-5 overflow-hidden">
+                        <div class="d-none d-md-block" style="height: 440px"></div>
+                        <div class="d-none d-sm-block d-md-none" style="height: 350px"></div>
+                        <div class="d-sm-none" style="height: 250px"></div>
+                        <img src="/img/home/single-product/02.jpg"
+                            class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover" alt="Image">
+                    </div>
+                </div>
+                <div class="col-md-7 order-md-1">
+                    <div class="d-flex align-items-center h-100 bg-body-tertiary rounded-5 p-4 p-xl-5">
+                        <div class="p-sm-3 p-xxl-2">
+                            <h2 class="mb-lg-4">Temperature control</h2>
+                            <p class="fs-lg pb-sm-2 pb-lg-3">Experience the power of advanced insulation technology that
+                                keeps your drinks at just the right temperature all day long. Whether it's a hot summer day
+                                or a chilly morning, your beverages will stay perfectly chilled or warmly comforting. Say
+                                goodbye to lukewarm drinks!</p>
+                            <div class="d-flex flex-column flex-sm-row gap-2 gap-lg-3">
+                                <div class="d-flex align-items-center text-body-emphasis bg-body rounded-pill shadow px-3"
+                                    style="padding: 10px 0">
+                                    <svg class="flex-shrink-0 me-2" xmlns="http://www.w3.org/2000/svg" width="16"
+                                        height="16" fill="currentColor">
+                                        <path
+                                            d="M9.396 13.337l-.755-.757V8.34l3.607-2.14 2.325.622c.054.014.108.021.162.021.276 0 .529-.184.603-.464.089-.333-.109-.676-.442-.765l-1.146-.307.93-.552c.297-.176.395-.56.219-.856s-.56-.395-.856-.219l-.883.524.274-1.083c.085-.335-.118-.675-.453-.759s-.675.118-.759.452l-.579 2.29-3.002 1.782V3.423l1.72-1.697c.246-.242.248-.638.006-.884S9.729.594 9.483.836l-.842.831V.625C8.641.28 8.361 0 8.016 0s-.625.28-.625.625v1.042L6.549.836c-.246-.242-.641-.24-.884.006s-.24.641.006.884l1.72 1.697v3.466L4.389 5.116l-.612-2.337c-.088-.334-.429-.534-.763-.446s-.534.429-.446.763l.293 1.117-.902-.533c-.297-.176-.68-.077-.856.22s-.077.68.22.856l.915.541-1.125.284c-.335.084-.537.424-.453.759.072.283.326.472.606.472.051 0 .102-.006.153-.019L3.768 6.2 6.79 7.985 3.748 9.79l-2.321-.614c-.334-.088-.676.111-.764.444s.111.676.444.764l1.133.3-.889.527c-.297.176-.395.56-.219.856.117.197.325.306.538.306.108 0 .218-.028.318-.088l.871-.517-.292 1.1c-.089.334.11.676.444.764a.64.64 0 0 0 .161.021c.277 0 .529-.185.604-.465l.618-2.331L7.39 9.079v3.495l-1.72 1.697c-.246.242-.248.638-.006.884.122.124.284.186.445.186a.62.62 0 0 0 .439-.18l.842-.831v1.042c0 .345.28.625.625.625s.625-.28.625-.625V14.35l.807.81a.62.62 0 0 0 .443.184.62.62 0 0 0 .441-.182c.244-.244.245-.639.002-.884l-.937-.94zm5.177-4.159l-2.277.609-1.588-.938c-.297-.176-.68-.077-.856.22s-.077.68.22.856l1.56.922.622 2.374c.074.281.327.467.604.467a.62.62 0 0 0 .159-.021c.334-.088.534-.429.446-.763l-.303-1.154.911.538a.62.62 0 0 0 .317.087c.214 0 .422-.11.539-.307.176-.297.077-.68-.22-.856l-.905-.534 1.092-.292c.333-.089.531-.432.442-.765s-.432-.531-.765-.442z" />
+                                    </svg>
+                                    <div class="fs-sm fw-medium">24 hours of ice-cold refreshment</div>
+                                </div>
+                                <div class="d-flex align-items-center text-body-emphasis bg-body rounded-pill shadow px-3"
+                                    style="padding: 10px 0">
+                                    <i class="ci-sun me-2"></i>
+                                    <div class="fs-sm fw-medium">12 hours of hot comfort</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-md-5 mb-4 mb-md-0">
+                    <div class="position-relative h-100 bg-body-tertiary rounded-5 overflow-hidden">
+                        <div class="d-none d-md-block" style="height: 440px"></div>
+                        <div class="d-none d-sm-block d-md-none" style="height: 350px"></div>
+                        <div class="d-sm-none" style="height: 250px"></div>
+                        <img src="/img/home/single-product/03.jpg"
+                            class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover" alt="Image">
+                        <div
+                            class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-end justify-content-end p-3 p-sm-4">
+                            <a class="btn btn-lg btn-light stretched-link rounded-pill"
+                                href="https://www.youtube.com/watch?v=ME5CirMkFZE" data-glightbox data-gallery="video1">
+                                <i class="ci-play fs-lg me-2 ms-n1"></i>
+                                Play
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-md-7">
+                    <div class="d-flex align-items-center h-100 bg-body-tertiary rounded-5 p-4 p-xl-5">
+                        <div class="p-sm-3 p-xxl-2">
+                            <div class="ratio ratio-1x1 mb-3 mb-sm-4" style="width: 92px">
+                                <img src="/img/home/single-product/bpa-fee-light.png" class="d-none-dark" alt="Image">
+                                <img src="/img/home/single-product/bpa-fee-dark.png" class="d-none d-block-dark"
+                                    alt="Image">
+                            </div>
+                            <h2 class="mb-lg-4 pt-lg-3">A healthier way to hydrate</h2>
+                            <p class="fs-lg mb-0">Your health and well-being are our top priorities, which is why we've
+                                designed our metallic water bottles using the highest quality materials. Every sip from our
+                                bottles is a step towards a healthier lifestyle, free from harmful chemicals and
+                                contaminants.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Color options -->
+        <section class="container pt-2 pt-sm-3 pt-md-4 pt-lg-5 pb-5 my-xxl-3">
+            <div class="row align-items-end justify-content-center">
+                <div class="col-md-5 mb-4 mb-md-0">
+                    <h2 class="display-4 pb-1 pb-sm-2 pb-lg-3 pb-xl-4">Express yourself with a rainbow of colors</h2>
+                    <div class="list-group list-group-borderless gap-2 pb-1 pb-sm-2 pb-lg-3 pb-xl-4 mb-3" role="tablist">
+                        <a class="list-group-item list-group-item-action d-flex align-items-center fs-xl fw-normal px-sm-4 active"
+                            href="#freshness" data-bs-toggle="list" role="tab" aria-controls="freshness"
+                            id="freshness-color" aria-selected="true" style="--cz-list-group-border-radius: 25px">
+                            <span class="border border-2 rounded-circle me-3"
+                                style="width: 24px; height: 24px; --cz-border-color: var(--cz-body-bg); background: linear-gradient(0deg, rgba(106,168,162,1) 0%, rgba(237,237,213,1) 100%)"></span>
+                            Freshness
+                            <span class="fw-semibold ps-3 ms-auto">$28.00</span>
+                        </a>
+                        <a class="list-group-item list-group-item-action d-flex align-items-center fs-xl fw-normal px-sm-4"
+                            href="#sunflower" data-bs-toggle="list" role="tab" aria-controls="sunflower"
+                            id="sunflower-color" aria-selected="false" tabindex="-1"
+                            style="--cz-list-group-border-radius: 25px">
+                            <span class="border border-2 rounded-circle me-3"
+                                style="width: 24px; height: 24px; --cz-border-color: var(--cz-body-bg); background: linear-gradient(0deg, rgba(195,72,82,1) 0%, rgba(250,227,152,1) 100%)"></span>
+                            Sunflower
+                            <span class="fw-semibold ps-3 ms-auto">$24.00</span>
+                        </a>
+                        <a class="list-group-item list-group-item-action d-flex align-items-center fs-xl fw-normal px-sm-4"
+                            href="#heavenly " data-bs-toggle="list" role="tab" aria-controls="heavenly"
+                            id="heavenly-color" aria-selected="false" tabindex="-1"
+                            style="--cz-list-group-border-radius: 25px">
+                            <span class="border border-2 rounded-circle me-3"
+                                style="width: 24px; height: 24px; --cz-border-color: var(--cz-body-bg); background: linear-gradient(0deg, rgba(56,125,154,1) 0%, rgba(237,244,243,1) 100%)"></span>
+                            Heavenly
+                            <span class="fw-semibold ps-3 ms-auto">$22.00</span>
+                        </a>
+                        <a class="list-group-item list-group-item-action d-flex align-items-center fs-xl fw-normal px-sm-4"
+                            href="#darkness" data-bs-toggle="list" role="tab" aria-controls="darkness"
+                            id="darkness-color" aria-selected="false" tabindex="-1"
+                            style="--cz-list-group-border-radius: 25px">
+                            <span class="border border-2 rounded-circle me-3"
+                                style="width: 24px; height: 24px; --cz-border-color: var(--cz-body-bg); background: linear-gradient(0deg, rgba(72,93,195,1) 0%, rgba(214,170,251,1) 100%)"></span>
+                            Darkness
+                            <span class="fw-semibold ps-3 ms-auto">$24.00</span>
+                        </a>
+                    </div>
+                    <p class="fs-sm mb-sm-4">We believe in the quality and performance of our bottles, and we want you to
+                        feel the same. We offer a <span class="fw-semibold text-body-emphasis">30-day money-back
+                            guarantee.</span></p>
+                    <button type="button" class="btn btn-lg btn-dark rounded-pill">Add to cart</button>
+                </div>
+                <div class="col-10 col-sm-8 col-md-7 col-xl-6 offset-xl-1">
+                    <div class="tab-content">
+                        <div class="tab-pane show active" id="freshness" role="tabpanel"
+                            aria-labelledby="freshness-color">
+                            <div class="ratio" style="--cz-aspect-ratio: calc(562 / 636 * 100%)">
+                                <img src="/img/home/single-product/colors/freshness.png" alt="Freshness">
+                            </div>
+                        </div>
+                        <div class="tab-pane" id="sunflower" role="tabpanel" aria-labelledby="sunflower-color">
+                            <div class="ratio" style="--cz-aspect-ratio: calc(562 / 636 * 100%)">
+                                <img src="/img/home/single-product/colors/sunflower.png" alt="Sunflower">
+                            </div>
+                        </div>
+                        <div class="tab-pane" id="heavenly" role="tabpanel" aria-labelledby="heavenly-color">
+                            <div class="ratio" style="--cz-aspect-ratio: calc(562 / 636 * 100%)">
+                                <img src="/img/home/single-product/colors/heavenly.png" alt="Heavenly">
+                            </div>
+                        </div>
+                        <div class="tab-pane" id="darkness" role="tabpanel" aria-labelledby="darkness-color">
+                            <div class="ratio" style="--cz-aspect-ratio: calc(562 / 636 * 100%)">
+                                <img src="/img/home/single-product/colors/darkness.png" alt="Darkness">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Reviews -->
+        <section class="pt-2 pt-sm-3 pt-md-4 pt-lg-5 pb-5 my-xxl-3">
+            <div class="position-relative py-2 py-sm-3 py-md-4 py-lg-5">
+                <div class="container position-relative z-2 py-5 my-xxl-3">
+
+                    <!-- Header -->
+                    <div
+                        class="d-flex flex-column flex-sm-row align-items-sm-center justify-content-between gap-2 gap-sm-4 pb-xl-0-3 mb-4 mb-xl-5">
+                        <h2 class="display-4 text-center text-sm-start mb-0">They are happy with Bottle</h2>
+                        <div class="nav justify-content-center justify-content-sm-start">
+                            <a class="nav-link fs-base position-relative text-center text-sm-start px-0" href="#!">
+                                <span class="hover-effect-underline stretched-link">2000+ real reviews on our
+                                    Instagram</span>
+                                <i class="ci-chevron-right fs-lg ms-1 me-n1"></i>
+                            </a>
+                        </div>
+                    </div>
+
+                    <!-- Reviews grid -->
+                    <div class="row g-4">
+                        <div class="col-lg-4 d-flex flex-column flex-md-row flex-lg-column gap-4">
+
+                            <!-- Review -->
+                            <div class="card w-100 bg-transparent border-0 rounded-5 overflow-hidden p-xl-2">
+                                <div class="card-body position-relative z-1 pb-1 pb-lg-2 pb-xl-3">
+                                    <div class="d-flex gap-1 text-warning mb-3">
+                                        <i class="ci-star-filled"></i>
+                                        <i class="ci-star-filled"></i>
+                                        <i class="ci-star-filled"></i>
+                                        <i class="ci-star-filled"></i>
+                                        <i class="ci-star-filled"></i>
+                                    </div>
+                                    <h3 class="h5 pb-2 mb-1">Perfect for daily use!</h3>
+                                    <p class="mb-0">I bought the metallic blue bottle, and it has quickly become my go-to
+                                        for everything! It keeps my water cold all day, even during my long shifts at work.
+                                        Absolutely love it 🤩</p>
+                                </div>
+                                <div
+                                    class="card-footer position-relative z-1 d-flex align-items-center bg-transparent border-0 py-4">
+                                    <div class="ratio ratio-1x1 flex-shrink-0 bg-body-secondary rounded-circle overflow-hidden"
+                                        style="width: 44px">
+                                        <img src="/img/home/single-product/reviews/ava01.jpg" alt="Avatar">
+                                    </div>
+                                    <div class="fs-sm ps-2 ms-1">
+                                        <div class="fw-semibold text-dark-emphasis">Jenny Wilson</div>
+                                        <div>Freshness Bottle</div>
+                                    </div>
+                                </div>
+                                <span class="position-absolute top-0 start-0 w-100 h-100 bg-white d-none-dark"></span>
+                                <span class="position-absolute top-0 start-0 w-100 h-100 bg-white d-none d-block-dark"
+                                    style="opacity: .08"></span>
+                            </div>
+
+                            <!-- Review -->
+                            <div class="card w-100 bg-transparent border-0 rounded-5 overflow-hidden p-xl-2">
+                                <div class="card-body position-relative z-1 pb-1 pb-lg-2 pb-xl-3">
+                                    <div class="d-flex gap-1 text-warning mb-3">
+                                        <i class="ci-star-filled"></i>
+                                        <i class="ci-star-filled"></i>
+                                        <i class="ci-star-filled"></i>
+                                        <i class="ci-star-filled"></i>
+                                        <i class="ci-star-filled"></i>
+                                    </div>
+                                    <h3 class="h5 pb-2 mb-1">Stays fresh and odor-free</h3>
+                                    <p class="mb-0">I love that this bottle doesn't retain any odors or flavors from
+                                        previous drinks. I switch between coffee, juice, and water, and it always tastes
+                                        fresh. The durability is also impressive. I've dropped it a few times, and it still
+                                        looks brand new! ✨</p>
+                                </div>
+                                <div
+                                    class="card-footer position-relative z-1 d-flex align-items-center bg-transparent border-0 py-4">
+                                    <div class="ratio ratio-1x1 flex-shrink-0 bg-body-secondary rounded-circle overflow-hidden"
+                                        style="width: 44px">
+                                        <img src="/img/home/single-product/reviews/ava02.jpg" alt="Avatar">
+                                    </div>
+                                    <div class="fs-sm ps-2 ms-1">
+                                        <div class="fw-semibold text-dark-emphasis">Jacob Jones</div>
+                                        <div>Freshness Bottle</div>
+                                    </div>
+                                </div>
+                                <span class="position-absolute top-0 start-0 w-100 h-100 bg-white d-none-dark"></span>
+                                <span class="position-absolute top-0 start-0 w-100 h-100 bg-white d-none d-block-dark"
+                                    style="opacity: .08"></span>
+                            </div>
+                        </div>
+                        <div class="col-lg-4 d-flex flex-column flex-md-row flex-lg-column gap-4">
+
+                            <!-- Review -->
+                            <div class="card w-100 bg-transparent border-0 rounded-5 overflow-hidden p-xl-2">
+                                <div class="card-body position-relative z-1 pb-1 pb-lg-2 pb-xl-3">
+                                    <div class="d-flex gap-1 text-warning mb-3">
+                                        <i class="ci-star-filled"></i>
+                                        <i class="ci-star-filled"></i>
+                                        <i class="ci-star-filled"></i>
+                                        <i class="ci-star-filled"></i>
+                                        <i class="ci-star-filled"></i>
+                                    </div>
+                                    <h3 class="h5 pb-2 mb-1">Great for the gym</h3>
+                                    <p class="mb-0">I've taken this bottle to the gym every day for the past month, and
+                                        it's still in perfect condition. The leak-proof design is a lifesaver, and the
+                                        bright red color really stands out in my bag. Only wish it held a bit more water,
+                                        but otherwise, it's fantastic!</p>
+                                </div>
+                                <div
+                                    class="card-footer position-relative z-1 d-flex align-items-center bg-transparent border-0 py-4">
+                                    <div class="ratio ratio-1x1 flex-shrink-0 bg-body-secondary rounded-circle overflow-hidden"
+                                        style="width: 44px">
+                                        <img src="/img/home/single-product/reviews/ava03.jpg" alt="Avatar">
+                                    </div>
+                                    <div class="fs-sm ps-2 ms-1">
+                                        <div class="fw-semibold text-dark-emphasis">Robert Fox</div>
+                                        <div>Heavenly Bottle</div>
+                                    </div>
+                                </div>
+                                <span class="position-absolute top-0 start-0 w-100 h-100 bg-white d-none-dark"></span>
+                                <span class="position-absolute top-0 start-0 w-100 h-100 bg-white d-none d-block-dark"
+                                    style="opacity: .08"></span>
+                            </div>
+
+                            <!-- Review -->
+                            <div class="card w-100 bg-transparent border-0 rounded-5 overflow-hidden p-xl-2">
+                                <div class="card-body position-relative z-1 pb-1 pb-lg-2 pb-xl-3">
+                                    <div class="d-flex gap-1 text-warning mb-3">
+                                        <i class="ci-star-filled"></i>
+                                        <i class="ci-star-filled"></i>
+                                        <i class="ci-star-filled"></i>
+                                        <i class="ci-star-filled"></i>
+                                        <i class="ci-star-filled"></i>
+                                    </div>
+                                    <h3 class="h5 pb-2 mb-1">Perfect for travel</h3>
+                                    <p class="mb-0">I bought this bottle for a recent trip, and it was amazing 🔥. It
+                                        kept my coffee hot during the entire flight and fit perfectly in my bag without
+                                        leaking.</p>
+                                </div>
+                                <div
+                                    class="card-footer position-relative z-1 d-flex align-items-center bg-transparent border-0 py-4">
+                                    <div class="ratio ratio-1x1 flex-shrink-0 bg-body-secondary rounded-circle overflow-hidden"
+                                        style="width: 44px">
+                                        <img src="/img/home/single-product/reviews/ava04.jpg" alt="Avatar">
+                                    </div>
+                                    <div class="fs-sm ps-2 ms-1">
+                                        <div class="fw-semibold text-dark-emphasis">Leslie Alexander</div>
+                                        <div>Darkness Bottle</div>
+                                    </div>
+                                </div>
+                                <span class="position-absolute top-0 start-0 w-100 h-100 bg-white d-none-dark"></span>
+                                <span class="position-absolute top-0 start-0 w-100 h-100 bg-white d-none d-block-dark"
+                                    style="opacity: .08"></span>
+                            </div>
+                        </div>
+                        <div class="col-lg-4 d-flex flex-column flex-md-row flex-lg-column gap-4">
+
+                            <!-- Review -->
+                            <div class="card w-100 bg-transparent border-0 rounded-5 overflow-hidden p-xl-2">
+                                <div class="card-body position-relative z-1 pb-1 pb-lg-2 pb-xl-3">
+                                    <div class="d-flex gap-1 text-warning mb-3">
+                                        <i class="ci-star-filled"></i>
+                                        <i class="ci-star-filled"></i>
+                                        <i class="ci-star-filled"></i>
+                                        <i class="ci-star-filled"></i>
+                                        <i class="ci-star-filled"></i>
+                                    </div>
+                                    <h3 class="h5 pb-2 mb-1">Stylish and functional</h3>
+                                    <p class="mb-0">I was looking for a bottle that was both stylish and durable, and
+                                        this one exceeded my expectations ❤️. The rose gold finish is stunning, and it keeps
+                                        my tea hot for hours.</p>
+                                </div>
+                                <div
+                                    class="card-footer position-relative z-1 d-flex align-items-center bg-transparent border-0 py-4">
+                                    <div class="ratio ratio-1x1 flex-shrink-0 bg-body-secondary rounded-circle overflow-hidden"
+                                        style="width: 44px">
+                                        <img src="/img/home/single-product/reviews/ava05.jpg" alt="Avatar">
+                                    </div>
+                                    <div class="fs-sm ps-2 ms-1">
+                                        <div class="fw-semibold text-dark-emphasis">Bessie Cooper</div>
+                                        <div>Sunflower Bottle</div>
+                                    </div>
+                                </div>
+                                <span class="position-absolute top-0 start-0 w-100 h-100 bg-white d-none-dark"></span>
+                                <span class="position-absolute top-0 start-0 w-100 h-100 bg-white d-none d-block-dark"
+                                    style="opacity: .08"></span>
+                            </div>
+
+                            <!-- Video review -->
+                            <div class="position-relative w-100 rounded-5 overflow-hidden">
+                                <div class="d-lg-none" style="height: 300px"></div>
+                                <div class="d-none d-lg-block" style="height: 364px"></div>
+                                <div class="position-absolute top-0 start-0 w-100 h-100 z-3 p-4">
+                                    <a class="btn btn-lg btn-light stretched-link rounded-pill mt-xl-2 ms-xl-2"
+                                        href="https://www.youtube.com/watch?v=ME5CirMkFZE" data-glightbox
+                                        data-gallery="video2">
+                                        <i class="ci-play fs-lg me-2 ms-n1"></i>
+                                        Play
+                                    </a>
+                                </div>
+                                <div class="position-absolute top-0 start-0 d-flex align-items-end w-100 h-100 z-2 p-4">
+                                    <div class="mb-xl-2 ms-xl-2">
+                                        <div class="d-flex gap-1 text-warning mb-3">
+                                            <i class="ci-star-filled"></i>
+                                            <i class="ci-star-filled"></i>
+                                            <i class="ci-star-filled"></i>
+                                            <i class="ci-star-filled"></i>
+                                            <i class="ci-star-filled"></i>
+                                        </div>
+                                        <h3 class="h5 text-white mb-0">Keeps drinks cold for hours</h3>
+                                    </div>
+                                </div>
+                                <span class="position-absolute top-0 start-0 w-100 h-100 z-1"
+                                    style="background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(0, 0, 0, 0.50) 100%)"></span>
+                                <img src="/img/home/single-product/reviews/video.jpg"
+                                    class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover" alt="Image">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Background color -->
+                <div class="position-absolute top-0 start-0 w-100 h-100 d-none-dark"
+                    style="background: linear-gradient(90deg, rgba(249,235,200,1) 0%, rgba(252,202,197,1) 100%); border-top-right-radius: 48px; border-top-left-radius: 48px">
+                </div>
+                <div class="position-absolute top-0 start-0 w-100 h-100 d-none d-block-dark"
+                    style="background: linear-gradient(119deg, #333126 0%, #372e2f 52.24%); border-top-right-radius: 48px; border-top-left-radius: 48px">
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Social networks + CTA -->
+        <section class="container pt-2 pt-sm-3 pb-sm-2 pb-md-3 pt-md-4 py-lg-5 my-xxl-3">
+            <div class="row g-3 g-sm-4 mb-3 mb-sm-4 mb-md-0">
+                <div class="col-md-6 order-md-2 pt-md-5 mt-xl-2 mb-3 mb-md-0">
+                    <div class="text-center mx-auto" style="max-width: 500px">
+                        <h2 class="display-4 pb-1 pb-sm-2 pb-md-3 pb-lg-4">Buy Bottle now and get <span
+                                class="text-warning">25% off</span></h2>
+                        <button type="button" class="btn btn-lg btn-warning rounded-pill">Buy Bottle Now</button>
+                    </div>
+                </div>
+                <div class="col-6 col-md-3 order-md-1">
+                    <a class="d-flex hover-effect-scale position-relative fs-3 text-white bg-body-tertiary rounded-5 overflow-hidden text-decoration-none ms-auto mx-md-auto"
+                        href="#!" style="max-width: 196px">
+                        <i class="ci-youtube position-absolute top-50 start-50 translate-middle z-2"></i>
+                        <div class="ratio ratio-1x1 hover-effect-target">
+                            <img src="/img/home/single-product/socials/01.jpg" alt="Image">
+                        </div>
+                    </a>
+                </div>
+                <div class="col-6 col-md-3 order-md-3 pt-md-5 mt-lg-3 mt-xl-5">
+                    <a class="d-flex hover-effect-scale position-relative fs-3 text-white bg-body-tertiary rounded-5 overflow-hidden text-decoration-none me-auto mx-md-auto"
+                        href="#!" style="max-width: 196px">
+                        <i class="ci-facebook position-absolute top-50 start-50 translate-middle z-2"></i>
+                        <div class="ratio ratio-1x1 hover-effect-target">
+                            <img src="/img/home/single-product/socials/02.jpg" alt="Image">
+                        </div>
+                    </a>
+                </div>
+            </div>
+            <div class="row g-3 g-sm-4 mt-md-n3 pb-5">
+                <div class="col-6 col-md-3 offset-md-1 offset-lg-2">
+                    <a class="d-flex hover-effect-scale position-relative fs-3 text-white bg-body-tertiary rounded-5 overflow-hidden text-decoration-none ms-auto mx-md-auto"
+                        href="#!" style="max-width: 196px">
+                        <i class="ci-tiktok position-absolute top-50 start-50 translate-middle z-2"></i>
+                        <div class="ratio ratio-1x1 hover-effect-target">
+                            <img src="/img/home/single-product/socials/03.jpg" alt="Image">
+                        </div>
+                    </a>
+                </div>
+                <div class="col-6 col-md-3 offset-md-2 offset-lg-1 pt-md-5 mt-lg-3 mt-xl-5">
+                    <a class="d-flex hover-effect-scale position-relative fs-3 text-white bg-body-tertiary rounded-5 overflow-hidden text-decoration-none me-auto mx-md-auto"
+                        href="#!" style="max-width: 196px">
+                        <i class="ci-instagram position-absolute top-50 start-50 translate-middle z-2"></i>
+                        <div class="ratio ratio-1x1 hover-effect-target">
+                            <img src="/img/home/single-product/socials/04.jpg" alt="Image">
+                        </div>
+                    </a>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <!-- Page footer -->
+    <footer class="footer pb-4">
+        <div class="container pb-sm-2 pb-md-3">
+            <div class="position-relative py-3 px-4 pe-lg-3 pe-xxl-0">
+                <div class="row align-items-center position-relative z-1">
+                    <div class="col-lg-4 col-xxl-5 order-lg-2 mb-2 mb-lg-0">
+                        <div class="nav justify-content-center justify-content-lg-start">
+                            <a class="nav-link animate-underline fs-xs px-3" href="#!">
+                                <span class="animate-target">Privacy</span>
+                            </a>
+                            <a class="nav-link animate-underline fs-xs px-3" href="#!">
+                                <span class="animate-target">Affiliates</span>
+                            </a>
+                            <a class="nav-link animate-underline fs-xs px-3" href="#!">
+                                <span class="animate-target"> Terms of use</span>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="col-lg-4 d-flex gap-2 gap-sm-3 justify-content-center order-lg-3 mb-2 mb-lg-0">
+                        <div>
+                            <img src="/img/payment-methods/visa-light-mode.svg" class="d-none-dark" alt="Visa">
+                            <img src="/img/payment-methods/visa-dark-mode.svg" class="d-none d-block-dark"
+                                alt="Visa">
+                        </div>
+                        <div>
+                            <img src="/img/payment-methods/paypal-light-mode.svg" class="d-none-dark" alt="PayPal">
+                            <img src="/img/payment-methods/paypal-dark-mode.svg" class="d-none d-block-dark"
+                                alt="PayPal">
+                        </div>
+                        <div>
+                            <img src="/img/payment-methods/mastercard.svg" alt="Mastercard">
+                        </div>
+                        <div>
+                            <img src="/img/payment-methods/google-pay-light-mode.svg" class="d-none-dark"
+                                alt="Google Pay">
+                            <img src="/img/payment-methods/google-pay-dark-mode.svg" class="d-none d-block-dark"
+                                alt="Google Pay">
+                        </div>
+                        <div>
+                            <img src="/img/payment-methods/apple-pay-light-mode.svg" class="d-none-dark" alt="Apple Pay">
+                            <img src="/img/payment-methods/apple-pay-dark-mode.svg" class="d-none d-block-dark"
+                                alt="Apple Pay">
+                        </div>
+                    </div>
+                    <div class="col-lg-4 col-xxl-3 order-lg-1">
+                        <p class="fs-xs text-center text-lg-start mb-0 order-md-1">
+                            &copy; All rights reserved. Made by <span class="animate-underline"><a
+                                    class="animate-target text-dark-emphasis text-decoration-none"
+                                    href="https://coderthemes.com/" target="_blank" rel="noreferrer">Coderthemes
+                                    Studio</a></span>
+                        </p>
+                    </div>
+                </div>
+                <div class="position-absolute top-0 start-0 w-100 h-100 d-lg-none">
+                    <span class="position-absolute top-0 start-0 w-100 h-100 bg-white shadow rounded-5 d-none-dark"></span>
+                    <span
+                        class="position-absolute top-0 start-0 w-100 h-100 bg-body-tertiary rounded-5 d-none d-block-dark"></span>
+                </div>
+                <div class="position-absolute top-0 start-0 w-100 h-100 d-none d-lg-block">
+                    <span
+                        class="position-absolute top-0 start-0 w-100 h-100 bg-white shadow rounded-pill d-none-dark"></span>
+                    <span
+                        class="position-absolute top-0 start-0 w-100 h-100 bg-body-tertiary rounded-pill d-none d-block-dark"></span>
+                </div>
+            </div>
+        </div>
+    </footer>
+@endsection
+
+@section('scripts')
+
+@endsection
diff --git a/resources/views/index.blade.php b/resources/views/index.blade.php
new file mode 100644
index 0000000..f35f93c
--- /dev/null
+++ b/resources/views/index.blade.php
@@ -0,0 +1,1183 @@
+@extends('layouts.landing', ['title' => 'Multipurpose E-Commerce Bootstrap HTML Template'])
+
+@section('css')
+    <style>
+        #furniture,
+        #marketplace {
+            --cz-aspect-ratio: calc(398 / 773 * 100%);
+            max-width: 773px;
+        }
+
+        #grocery,
+        #single-store {
+            --cz-aspect-ratio: calc(398 / 627 * 100%);
+            max-width: 627px;
+        }
+
+        #fashion-1 {
+            --cz-aspect-ratio: calc(398 / 370 * 100%);
+            max-width: 370px;
+        }
+
+        #electronics {
+            --cz-aspect-ratio: calc(398 / 540 * 100%);
+            max-width: 540px;
+        }
+
+        #fashion-2 {
+            --cz-aspect-ratio: calc(398 / 466 * 100%);
+            max-width: 466px;
+        }
+
+        @media (max-width: 767px) {
+
+            #furniture,
+            #marketplace,
+            #grocery,
+            #single-store,
+            #fashion-1,
+            #electronics,
+            #fashion-2 {
+                --cz-aspect-ratio: calc(400 / 735 * 100%);
+                max-width: 100%;
+            }
+        }
+
+        @media (max-width: 650px) {
+
+            #furniture,
+            #marketplace {
+                --cz-aspect-ratio: calc(398 / 627 * 100%);
+            }
+
+            #grocery,
+            #single-store {
+                --cz-aspect-ratio: calc(398 / 627 * 100%);
+            }
+
+            #fashion-1 {
+                --cz-aspect-ratio: calc(398 / 627 * 100%);
+            }
+
+            #electronics {
+                --cz-aspect-ratio: calc(398 / 627 * 100%);
+            }
+
+            #fashion-2 {
+                --cz-aspect-ratio: calc(398 / 627 * 100%);
+            }
+        }
+
+        @media (max-width: 540px) {
+            #fashion-1 {
+                --cz-aspect-ratio: calc(398 / 500 * 100%);
+            }
+
+            #fashion-2 {
+                --cz-aspect-ratio: calc(398 / 500 * 100%);
+            }
+        }
+    </style>
+@endsection
+
+@section('content')
+    <!-- Navigation bar (Page header) -->
+    <header class="navbar navbar-expand-lg bg-body navbar-sticky sticky-top px-0" data-sticky-element>
+        <div class="container flex-nowrap">
+
+            <!-- Mobile offcanvas menu toggler (Hamburger) -->
+            <button type="button" class="navbar-toggler me-4 me-lg-0" data-bs-toggle="offcanvas" data-bs-target="#navbarNav"
+                aria-controls="navbarNav" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+
+            <!-- Navbar brand (Logo) -->
+            <a href="/" class="navbar-brand py-1 py-md-2 py-xl-1">
+                <span class="d-none d-sm-flex flex-shrink-0 text-primary me-2">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36">
+                        <path
+                            d="M36 18.01c0 8.097-5.355 14.949-12.705 17.2a18.12 18.12 0 0 1-5.315.79C9.622 36 2.608 30.313.573 22.611.257 21.407.059 20.162 0 18.879v-1.758c.02-.395.059-.79.099-1.185.099-.908.277-1.817.514-2.686C2.687 5.628 9.682 0 18 0c5.572 0 10.551 2.528 13.871 6.517 1.502 1.797 2.648 3.91 3.359 6.201.494 1.659.771 3.436.771 5.292z"
+                            fill="currentColor" />
+                        <g fill="#fff">
+                            <path
+                                d="M17.466 21.624c-.514 0-.988-.316-1.146-.829-.198-.632.138-1.303.771-1.501l7.666-2.469-1.205-8.254-13.317 4.621a1.19 1.19 0 0 1-1.521-.75 1.19 1.19 0 0 1 .751-1.521l13.89-4.818c.553-.197 1.166-.138 1.64.158a1.82 1.82 0 0 1 .85 1.284l1.344 9.183c.138.987-.494 1.994-1.482 2.33l-7.864 2.528-.375.04zm7.31.138c-.178-.632-.85-1.007-1.482-.81l-5.177 1.58c-2.331.79-3.28.02-3.418-.099l-6.56-8.412a4.25 4.25 0 0 0-4.406-1.758l-3.122.987c-.237.889-.415 1.777-.514 2.686l4.228-1.363a1.84 1.84 0 0 1 1.857.81l6.659 8.551c.751.948 2.015 1.323 3.359 1.323.909 0 1.857-.178 2.687-.474l5.078-1.54c.632-.178 1.008-.829.81-1.481z" />
+                            <use href="#czlogo" />
+                            <use href="#czlogo" x="8.516" y="-2.172" />
+                        </g>
+                        <defs>
+                            <path id="czlogo"
+                                d="M18.689 28.654a1.94 1.94 0 0 1-1.936 1.935 1.94 1.94 0 0 1-1.936-1.935 1.94 1.94 0 0 1 1.936-1.935 1.94 1.94 0 0 1 1.936 1.935z" />
+                        </defs>
+                    </svg>
+                </span>
+                Cartzilla
+            </a>
+
+            <!-- Main navigation that turns into offcanvas on screens < 992px wide (lg breakpoint) -->
+            <nav class="offcanvas offcanvas-start" id="navbarNav" tabindex="-1" aria-labelledby="navbarNavLabel">
+                <div class="offcanvas-header py-3">
+                    <h5 class="offcanvas-title" id="navbarNavLabel">Browse Cartzilla</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+                </div>
+                <div class="offcanvas-body pt-3 pb-4 py-lg-0 mx-lg-auto">
+                    <ul class="navbar-nav position-relative">
+                        <li class="nav-item dropdown py-lg-2 me-lg-n1 me-xl-0">
+                            <a class="nav-link dropdown-toggle active" aria-current="page" href="#" role="button"
+                                data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Home</a>
+                            <ul class="dropdown-menu" style="--cz-dropdown-spacer: .875rem">
+                                <li class="hover-effect-opacity px-2 mx-n2">
+                                    <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'electronics']) }}">
+                                        <span class="fw-medium">Electronics Store</span>
+                                        <span class="d-block fs-xs text-body-secondary">Megamenu + Hero slider</span>
+                                        <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                            style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                            <img class="position-relative z-2 d-none-dark"
+                                                src="/img/mega-menu/demo-preview/electronics-light.jpg"
+                                                alt="Electronics Store">
+                                            <img class="position-relative z-2 d-none d-block-dark"
+                                                src="/img/mega-menu/demo-preview/electronics-dark.jpg"
+                                                alt="Electronics Store">
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                        </div>
+                                    </a>
+                                </li>
+                                <li class="hover-effect-opacity px-2 mx-n2">
+                                    <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'fashion-v1']) }}">
+                                        <span class="fw-medium">Fashion Store v.1</span>
+                                        <span class="d-block fs-xs text-body-secondary">Hero promo slider</span>
+                                        <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                            style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                            <img class="position-relative z-2 d-none-dark"
+                                                src="/img/mega-menu/demo-preview/fashion-1-light.jpg"
+                                                alt="Fashion Store v.1">
+                                            <img class="position-relative z-2 d-none d-block-dark"
+                                                src="/img/mega-menu/demo-preview/fashion-1-dark.jpg"
+                                                alt="Fashion Store v.1">
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                        </div>
+                                    </a>
+                                </li>
+                                <li class="hover-effect-opacity px-2 mx-n2">
+                                    <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'fashion-v2']) }}">
+                                        <span class="fw-medium">Fashion Store v.2</span>
+                                        <span class="d-block fs-xs text-body-secondary">Hero banner with hotspots</span>
+                                        <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                            style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                            <img class="position-relative z-2 d-none-dark"
+                                                src="/img/mega-menu/demo-preview/fashion-2-light.jpg"
+                                                alt="Fashion Store v.2">
+                                            <img class="position-relative z-2 d-none d-block-dark"
+                                                src="/img/mega-menu/demo-preview/fashion-2-dark.jpg"
+                                                alt="Fashion Store v.2">
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                        </div>
+                                    </a>
+                                </li>
+                                <li class="hover-effect-opacity px-2 mx-n2">
+                                    <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'furniture']) }}">
+                                        <span class="fw-medium">Furniture Store</span>
+                                        <span class="d-block fs-xs text-body-secondary">Fancy product carousel</span>
+                                        <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                            style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                            <img class="position-relative z-2 d-none-dark"
+                                                src="/img/mega-menu/demo-preview/furniture-light.jpg"
+                                                alt="Furniture Store">
+                                            <img class="position-relative z-2 d-none d-block-dark"
+                                                src="/img/mega-menu/demo-preview/furniture-dark.jpg"
+                                                alt="Furniture Store">
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                        </div>
+                                    </a>
+                                </li>
+                                <li class="hover-effect-opacity px-2 mx-n2">
+                                    <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'grocery']) }}">
+                                        <span class="fw-medium">Grocery Store</span>
+                                        <span class="d-block fs-xs text-body-secondary">Hero slider + Category cards</span>
+                                        <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                            style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                            <img class="position-relative z-2 d-none-dark"
+                                                src="/img/mega-menu/demo-preview/grocery-light.jpg" alt="Grocery Store">
+                                            <img class="position-relative z-2 d-none d-block-dark"
+                                                src="/img/mega-menu/demo-preview/grocery-dark.jpg" alt="Grocery Store">
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                        </div>
+                                    </a>
+                                </li>
+                                <li class="hover-effect-opacity px-2 mx-n2">
+                                    <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'marketplace']) }}">
+                                        <span class="fw-medium">Marketplace</span>
+                                        <span class="d-block fs-xs text-body-secondary">Multi-vendor, digital goods</span>
+                                        <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                            style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                            <img class="position-relative z-2 d-none-dark"
+                                                src="/img/mega-menu/demo-preview/marketplace-light.jpg" alt="Marketplace">
+                                            <img class="position-relative z-2 d-none d-block-dark"
+                                                src="/img/mega-menu/demo-preview/marketplace-dark.jpg" alt="Marketplace">
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                        </div>
+                                    </a>
+                                </li>
+                                <li class="hover-effect-opacity px-2 mx-n2">
+                                    <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'single-store']) }}">
+                                        <span class="fw-medium">Single Product Store</span>
+                                        <span class="d-block fs-xs text-body-secondary">Single product / mono brand</span>
+                                        <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                            style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                            <img class="position-relative z-2 d-none-dark"
+                                                src="/img/mega-menu/demo-preview/single-store-light.jpg"
+                                                alt="Single Product Store">
+                                            <img class="position-relative z-2 d-none d-block-dark"
+                                                src="/img/mega-menu/demo-preview/single-store-dark.jpg"
+                                                alt="Single Product Store">
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                        </div>
+                                    </a>
+                                </li>
+                            </ul>
+                        </li>
+                        <li class="nav-item dropdown position-static py-lg-2 me-lg-n1 me-xl-0">
+                            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
+                                data-bs-trigger="hover" aria-expanded="false">Shop</a>
+                            <div class="dropdown-menu rounded-4 p-4" style="--cz-dropdown-spacer: .875rem">
+                                <div class="d-flex flex-column flex-lg-row gap-4">
+                                    <div style="min-width: 190px">
+                                        <div class="h6 mb-2">Electronics Store</div>
+                                        <ul class="nav flex-column gap-2 mt-0">
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'categories-electronics']) }}">Categories Page</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Catalog with Side Filters</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'product-general-electronics']) }}">Product General Info</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'product-details-electronics']) }}">Product Details</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'product-reviews-electronics']) }}">Product Reviews</a>
+                                            </li>
+                                        </ul>
+                                        <div class="h6 pt-4 mb-2">Fashion Store</div>
+                                        <ul class="nav flex-column gap-2 mt-0">
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Catalog with Side Filters</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'product-fashion']) }}">Product Page</a>
+                                            </li>
+                                        </ul>
+                                        <div class="h6 pt-4 mb-2">Furniture Store</div>
+                                        <ul class="nav flex-column gap-2 mt-0">
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'catalog-furniture']) }}">Catalog with Top Filters</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'product-furniture']) }}">Product Page</a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                    <div style="min-width: 190px">
+                                        <div class="h6 mb-2">Grocery Store</div>
+                                        <ul class="nav flex-column gap-2 mt-0">
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Catalog with Side Filters</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'product-grocery']) }}">Product Page</a>
+                                            </li>
+                                        </ul>
+                                        <div class="h6 pt-4 mb-2">Marketplace</div>
+                                        <ul class="nav flex-column gap-2 mt-0">
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'catalog-marketplace']) }}">Catalog with Top Filters</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'product-marketplace']) }}">Digital Product Page</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'marketplace']) }}">Cart / Checkout</a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                    <div style="min-width: 190px">
+                                        <div class="h6 mb-2">Checkout v.1</div>
+                                        <ul class="nav flex-column gap-2 mt-0">
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'v1-cart']) }}">Shopping Cart</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'v1-delivery-1']) }}">Delivery Info (Step 1)</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'v1-delivery-2']) }}">Delivery Info (Step 2)</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'v1-shipping']) }}">Shipping Address</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'v1-payment']) }}">Payment</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'v1-thankyou']) }}">Thank You Page</a>
+                                            </li>
+                                        </ul>
+                                        <div class="h6 pt-4 mb-2">Checkout v.2</div>
+                                        <ul class="nav flex-column gap-2 mt-0">
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'v2-cart']) }}">Shopping Cart</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'v2-delivery']) }}">Delivery Info</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'v2-pickup']) }}">Pickup from Store</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'v2-thankyou']) }}">Thank You Page</a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+                        </li>
+                        <li class="nav-item dropdown py-lg-2 me-lg-n1 me-xl-0">
+                            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
+                                data-bs-trigger="hover" data-bs-auto-close="outside" aria-expanded="false">Account</a>
+                            <ul class="dropdown-menu" style="--cz-dropdown-spacer: .875rem">
+                                <li class="dropend">
+                                    <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Auth
+                                        Pages</a>
+                                    <ul class="dropdown-menu">
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'signin']) }}">Sign In</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'signup']) }}">Sign Up</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'password-recovery']) }}">Password
+                                                Recovery</a></li>
+                                    </ul>
+                                </li>
+                                <li class="dropend">
+                                    <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Shop
+                                        User</a>
+                                    <ul class="dropdown-menu">
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'orders']) }}">Orders History</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'wishlist']) }}">Wishlist</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'payment']) }}">Payment Methods</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'reviews']) }}">My Reviews</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'info']) }}">Personal Info</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'addresses']) }}">Addresses</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'notifications']) }}">Notifications</a>
+                                        </li>
+                                    </ul>
+                                </li>
+                                <li class="dropend">
+                                    <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                        aria-expanded="false">Marketplace User</a>
+                                    <ul class="dropdown-menu">
+                                        <li><a class="dropdown-item"
+                                                href="{{ route('second', ['account', 'marketplace-dashboard']) }}">Dashboard</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-products']) }}">Products</a>
+                                        </li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-sales']) }}">Sales</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-payouts']) }}">Payouts</a>
+                                        </li>
+                                        <li><a class="dropdown-item"
+                                                href="{{ route('second', ['account', 'marketplace-purchases']) }}">Purchases</a></li>
+                                        <li><a class="dropdown-item"
+                                                href="{{ route('second', ['account', 'marketplace-favorites']) }}">Favorites</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-settings']) }}">Settings</a>
+                                        </li>
+                                    </ul>
+                                </li>
+                            </ul>
+                        </li>
+                        <li class="nav-item dropdown py-lg-2 me-lg-n1 me-xl-0">
+                            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
+                                data-bs-trigger="hover" data-bs-auto-close="outside" aria-expanded="false">Pages</a>
+                            <ul class="dropdown-menu" style="--cz-dropdown-spacer: .875rem">
+                                <li class="dropend">
+                                    <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">About</a>
+                                    <ul class="dropdown-menu">
+                                        <li><a class="dropdown-item" href="{{ route('second', ['about', 'v1']) }}">About v.1</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['about', 'v2']) }}">About v.2</a></li>
+                                    </ul>
+                                </li>
+                                <li class="dropend">
+                                    <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Blog</a>
+                                    <ul class="dropdown-menu">
+                                        <li><a class="dropdown-item" href="{{ route('second', ['blog', 'grid-v1']) }}">Grid View v.1</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['blog', 'grid-v2']) }}">Grid View v.2</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['blog', 'list']) }}">List View</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['blog', 'single-v1']) }}">Single Post v.1</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['blog', 'single-v2']) }}">Single Post v.2</a></li>
+                                    </ul>
+                                </li>
+                                <li class="dropend">
+                                    <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                        aria-expanded="false">Contact</a>
+                                    <ul class="dropdown-menu">
+                                        <li><a class="dropdown-item" href="{{ route('second', ['contact', 'v1']) }}">Contact v.1</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['contact', 'v2']) }}">Contact v.2</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['contact', 'v3']) }}">Contact v.3</a></li>
+                                    </ul>
+                                </li>
+                                <li class="dropend">
+                                    <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Help
+                                        Center</a>
+                                    <ul class="dropdown-menu">
+                                        <li><a class="dropdown-item" href="{{ route('second', ['help', 'topics-v1']) }}">Help Topics v.1</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['help', 'topics-v2']) }}">Help Topics v.2</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['help', 'single-article-v1']) }}">Help Single
+                                                Article v.1</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['help', 'single-article-v2']) }}">Help Single
+                                                Article v.2</a></li>
+                                    </ul>
+                                </li>
+                                <li class="dropend">
+                                    <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">404
+                                        Error</a>
+                                    <ul class="dropdown-menu">
+                                        <li><a class="dropdown-item" href="{{ route('second', ['404', 'electronics']) }}">404 Electronics</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['404', 'fashion']) }}">404 Fashion</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['404', 'furniture']) }}">404 Furniture</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['404', 'grocery']) }}">404 Grocery</a></li>
+                                    </ul>
+                                </li>
+                                <li><a class="dropdown-item" href="{{ route('any', 'terms-and-conditions')}}">Terms &amp; Conditions</a>
+                                </li>
+                            </ul>
+                        </li>                        
+                    </ul>
+                </div>
+            </nav>
+
+            <!-- Button group -->
+            <div class="d-flex gap-3 gap-sm-4">
+
+                <!-- Theme switcher (light/dark/auto) -->
+                <div class="dropdown">
+                    <button type="button"
+                        class="theme-switcher btn btn-icon btn-secondary fs-lg rounded-circle animate-scale"
+                        data-bs-toggle="dropdown" data-bs-display="dynamic" aria-expanded="false"
+                        aria-label="Toggle theme (light)">
+                        <span class="theme-icon-active d-flex animate-target">
+                            <i class="ci-sun"></i>
+                        </span>
+                    </button>
+                    <ul class="dropdown-menu start-50 translate-middle-x"
+                        style="--cz-dropdown-min-width: 9rem; --cz-dropdown-spacer: .5rem">
+                        <li>
+                            <button type="button" class="dropdown-item active" data-bs-theme-value="light"
+                                aria-pressed="true">
+                                <span class="theme-icon d-flex fs-base me-2">
+                                    <i class="ci-sun"></i>
+                                </span>
+                                <span class="theme-label">Light</span>
+                                <i class="item-active-indicator ci-check ms-auto"></i>
+                            </button>
+                        </li>
+                        <li>
+                            <button type="button" class="dropdown-item" data-bs-theme-value="dark"
+                                aria-pressed="false">
+                                <span class="theme-icon d-flex fs-base me-2">
+                                    <i class="ci-moon"></i>
+                                </span>
+                                <span class="theme-label">Dark</span>
+                                <i class="item-active-indicator ci-check ms-auto"></i>
+                            </button>
+                        </li>
+                        <li>
+                            <button type="button" class="dropdown-item" data-bs-theme-value="auto"
+                                aria-pressed="false">
+                                <span class="theme-icon d-flex fs-base me-2">
+                                    <i class="ci-auto"></i>
+                                </span>
+                                <span class="theme-label">Auto</span>
+                                <i class="item-active-indicator ci-check ms-auto"></i>
+                            </button>
+                        </li>
+                    </ul>
+                </div>
+
+                <!-- Buy button  -->
+                <a class="btn btn-primary animate-slide-end"
+                    href=""
+                    target="_blank" rel="noreferrer">
+                    <i class="ci-shopping-cart fs-base animate-target ms-n1 me-2"></i>
+                    Buy now
+                </a>
+            </div>
+        </div>
+    </header>
+
+    <!-- Page content -->
+    <main class="content-wrapper">
+
+        <!-- Hero (Demos) -->
+        <section class="pt-4 pt-sm-5 mt-3 mt-sm-0">
+
+            <!-- Title -->
+            <div class="container text-center pt-lg-2 pt-xl-3 mx-auto pb-4 pb-sm-0 mb-3 mb-sm-5" style="max-width: 680px">
+                <h1 class="display-5 pb-md-2">Multipurpose <span class="text-nowrap">Bootstrap 5</span> <span
+                        class="text-nowrap">E-Commerce</span> Template</h1>
+                <p class="fs-lg mb-0">Unlock the potential of your online business with our premium e-commerce front-end
+                    template, carefully crafted on the latest Bootstrap framework.</p>
+            </div>
+
+            <!-- Grid -->
+            <div class="container-fluid d-flex flex-column gap-4" style="max-width: 1456px">
+                <div class="d-flex flex-column flex-md-row gap-4">
+
+                    <!-- Furniture store -->
+                    <div class="hover-effect-scale ratio" id="furniture" style="--cz-transform-scale: 1.03; --cz-transition-duration: .3s">
+                        <div
+                            class="nav flex-column position-absolute top-0 start-0 w-100 h-100 z-2 pt-4 pt-xl-5 px-4 ps-xl-5 mt-lg-2 ms-lg-2 m-xl-0">
+                            <h2 class="h3 d-none d-lg-block pb-2 mb-1">Furniture Store</h2>
+                            <h2 class="h4 d-lg-none mb-2">Furniture Store</h2>
+                            <p class="fs-xs mb-2 mb-xl-3 d-none d-sm-block d-md-none d-lg-block" style="max-width: 250px">
+                                Explore a curated collection of stylish and modern furniture for every room.</p>
+                            <a class="nav-link animate-underline stretched-link text-dark-emphasis py-1 px-0"
+                                href="{{ route('second', ['home', 'furniture']) }}">
+                                <span class="animate-target">View demo</span>
+                                <i class="ci-chevron-right fs-base mt-1 ms-1"></i>
+                            </a>
+                        </div>
+                        <div class="hover-effect-target d-flex align-items-end h-100 overflow-hidden rounded-5">
+                            <div class="position-relative z-1 rtl-flip">
+                                <img src="/img/intro/demos/furniture-light.png" class="hover-effect-target d-none-dark"
+                                    width="773" alt="Furniture Store">
+                                <img src="/img/intro/demos/furniture-dark.png"
+                                    class="hover-effect-target d-none d-block-dark" width="773" alt="Furniture Store">
+                            </div>
+                            <span class="bg-body-secondary position-absolute top-0 start-0 w-100 h-100 d-none-dark"></span>
+                            <span class="bg-dark position-absolute top-0 start-0 w-100 h-100 d-none d-block-dark"></span>
+                        </div>
+                    </div>
+
+                    <!-- Grocery store -->
+                    <div class="hover-effect-scale ratio" id="grocery"
+                        style="--cz-transform-scale: 1.03; --cz-transition-duration: .3s">
+                        <div
+                            class="nav flex-column position-absolute top-0 start-0 w-100 h-100 z-2 pt-4 pt-xl-5 px-4 ps-xl-5 mt-lg-2 ms-lg-2 m-xl-0">
+                            <h2 class="h3 text-white d-none d-lg-block pb-2 mb-1">Grocery Store</h2>
+                            <h2 class="h4 text-white d-lg-none mb-2">Grocery Store</h2>
+                            <p class="text-white opacity-75 fs-xs mb-2 mb-xl-3 d-none d-sm-block d-md-none d-lg-block"
+                                style="max-width: 250px">Fresh, organic, and local groceries delivered right to your
+                                doorstep.</p>
+                            <a class="nav-link animate-underline stretched-link text-white py-1 px-0"
+                                href="{{ route('second', ['home', 'grocery']) }}">
+                                <span class="animate-target">View demo</span>
+                                <i class="ci-chevron-right fs-base mt-1 ms-1"></i>
+                            </a>
+                        </div>
+                        <div
+                            class="hover-effect-target d-flex align-items-end justify-content-end h-100 overflow-hidden rounded-5">
+                            <div class="position-relative z-1 rtl-flip">
+                                <img src="/img/intro/demos/grocery-light.png" class="hover-effect-target d-none-dark"
+                                    width="627" alt="Grocery Store">
+                                <img src="/img/intro/demos/grocery-dark.png"
+                                    class="hover-effect-target d-none d-block-dark" width="627" alt="Grocery Store">
+                            </div>
+                            <span class="position-absolute top-0 start-0 w-100 h-100 d-none-dark"
+                                style="background-color: #708b88"></span>
+                            <span class="position-absolute top-0 start-0 w-100 h-100 d-none d-block-dark"
+                                style="background-color: #49595a"></span>
+                        </div>
+                    </div>
+                </div>
+                <div class="d-flex flex-column flex-md-row gap-4">
+
+                    <!-- Fashion store v.1 -->
+                    <div class="hover-effect-scale ratio" id="fashion-1"
+                        style="--cz-transform-scale: 1.03; --cz-transition-duration: .3s">
+                        <div
+                            class="nav flex-column position-absolute top-0 start-0 w-100 h-100 z-2 pt-4 pt-xl-5 px-4 ps-xl-5 mt-lg-2 ms-lg-2 m-xl-0">
+                            <h2 class="h3 text-white d-none d-lg-block pb-2 mb-1">Fashion Store v.1</h2>
+                            <h2 class="h4 text-white d-lg-none mb-2">Fashion Store v.1</h2>
+                            <p class="text-white opacity-75 fs-xs mb-2 mb-xl-3 d-none d-sm-block d-md-none d-lg-block"
+                                style="max-width: 250px">Discover the newest trends in fashion with our exclusive designer
+                                wear.</p>
+                            <a class="nav-link animate-underline stretched-link text-white py-1 px-0"
+                                href="{{ route('second', ['home', 'fashion-v1']) }}">
+                                <span class="animate-target">View demo</span>
+                                <i class="ci-chevron-right fs-base mt-1 ms-1"></i>
+                            </a>
+                        </div>
+                        <div
+                            class="hover-effect-target d-flex align-items-end justify-content-end h-100 overflow-hidden rounded-5">
+                            <div class="position-relative z-1 rtl-flip">
+                                <img src="/img/intro/demos/fashion-1-light.png" class="hover-effect-target d-none-dark"
+                                    width="370" alt="Fashion Store v.1">
+                                <img src="/img/intro/demos/fashion-1-dark.png"
+                                    class="hover-effect-target d-none d-block-dark" width="370"
+                                    alt="Fashion Store v.1">
+                            </div>
+                            <span class="position-absolute top-0 start-0 w-100 h-100"
+                                style="background-color: #333d4c"></span>
+                        </div>
+                    </div>
+
+                    <!-- Fashion store v.2 -->
+                    <div class="hover-effect-scale ratio" id="fashion-2"
+                        style="--cz-transform-scale: 1.03; --cz-transition-duration: .3s">
+                        <div
+                            class="nav flex-column position-absolute top-0 start-0 w-100 h-100 z-2 pt-4 pt-xl-5 px-4 ps-xl-5 mt-lg-2 ms-lg-2 m-xl-0">
+                            <h2 class="h3 d-none d-lg-block pb-2 mb-1">Fashion Store v.2</h2>
+                            <h2 class="h4 d-lg-none mb-2">Fashion Store v.2</h2>
+                            <p class="fs-xs mb-2 mb-xl-3 d-none d-sm-block d-md-none d-lg-block" style="max-width: 250px">
+                                Unleash your style with our versatile and affordable fashion finds.</p>
+                            <a class="nav-link animate-underline stretched-link text-dark-emphasis py-1 px-0"
+                                href="{{ route('second', ['home', 'fashion-v2']) }}">
+                                <span class="animate-target">View demo</span>
+                                <i class="ci-chevron-right fs-base mt-1 ms-1"></i>
+                            </a>
+                        </div>
+                        <div
+                            class="hover-effect-target d-flex align-items-end justify-content-end h-100 overflow-hidden rounded-5">
+                            <div class="position-relative z-1 rtl-flip">
+                                <img src="/img/intro/demos/fashion-2-light.png" class="hover-effect-target d-none-dark"
+                                    width="466" alt="Fashion Store v.2">
+                                <img src="/img/intro/demos/fashion-2-dark.png"
+                                    class="hover-effect-target d-none d-block-dark" width="466"
+                                    alt="Fashion Store v.2">
+                            </div>
+                            <span class="position-absolute top-0 start-0 w-100 h-100 d-none-dark"
+                                style="background-color: #f3eef3"></span>
+                            <span class="position-absolute top-0 start-0 w-100 h-100 d-none d-block-dark"
+                                style="background-color: #35313a"></span>
+                        </div>
+                    </div>
+
+                    <!-- Electronics store -->
+                    <div class="hover-effect-scale ratio" id="electronics"
+                        style="--cz-transform-scale: 1.03; --cz-transition-duration: .3s">
+                        <div
+                            class="nav flex-column position-absolute top-0 start-0 w-100 h-100 z-2 pt-4 pt-xl-5 px-4 ps-xl-5 mt-lg-2 ms-lg-2 m-xl-0">
+                            <h2 class="h3 d-none d-lg-block pb-2 mb-1">Electronics Store</h2>
+                            <h2 class="h4 d-lg-none mb-2">Electronics Store</h2>
+                            <p class="fs-xs mb-2 mb-xl-3 d-none d-sm-block d-md-none d-lg-block" style="max-width: 250px">
+                                Your one-stop shop for the latest in tech gadgets and electronics.</p>
+                            <a class="nav-link animate-underline stretched-link text-dark-emphasis py-1 px-0"
+                                href="{{ route('second', ['home', 'electronics']) }}">
+                                <span class="animate-target">View demo</span>
+                                <i class="ci-chevron-right fs-base mt-1 ms-1"></i>
+                            </a>
+                        </div>
+                        <div
+                            class="hover-effect-target d-flex align-items-end justify-content-end h-100 overflow-hidden rounded-5">
+                            <div class="position-relative z-1 rtl-flip">
+                                <img src="/img/intro/demos/electronics-light.png" class="hover-effect-target d-none-dark"
+                                    width="540" alt="Electronics Store">
+                                <img src="/img/intro/demos/electronics-dark.png"
+                                    class="hover-effect-target d-none d-block-dark" width="540"
+                                    alt="Electronics Store">
+                            </div>
+                            <span class="position-absolute top-0 start-0 w-100 h-100 d-none-dark"
+                                style="background-color: #ccdff5"></span>
+                            <span class="position-absolute top-0 start-0 w-100 h-100 d-none d-block-dark"
+                                style="background-color: #212c3d"></span>
+                        </div>
+                    </div>
+                </div>
+                <div class="d-flex flex-column flex-md-row gap-4">
+
+                    <!-- Single Product store -->
+                    <div class="hover-effect-scale ratio" id="single-store"
+                        style="--cz-transform-scale: 1.03; --cz-transition-duration: .3s">
+                        <div
+                            class="nav flex-column position-absolute top-0 start-0 w-100 h-100 z-2 pt-4 pt-xl-5 px-4 ps-xl-5 mt-lg-2 ms-lg-2 m-xl-0">
+                            <h2 class="h3 d-none d-lg-block pb-2 mb-1">Single Product Store</h2>
+                            <h2 class="h4 d-lg-none mb-2">Single Product Store</h2>
+                            <p class="fs-xs mb-2 mb-xl-3 d-none d-sm-block d-md-none d-lg-block" style="max-width: 250px">
+                                Highlight your hero product with a clean, focused shopping experience.</p>
+                            <a class="nav-link animate-underline stretched-link text-dark-emphasis py-1 px-0"
+                                href="{{ route('second', ['home', 'single-store']) }}">
+                                <span class="animate-target">View demo</span>
+                                <i class="ci-chevron-right fs-base mt-1 ms-1"></i>
+                            </a>
+                        </div>
+                        <div
+                            class="hover-effect-target d-flex align-items-end justify-content-end h-100 overflow-hidden rounded-5">
+                            <div class="position-relative z-1 rtl-flip">
+                                <img src="/img/intro/demos/single-store-light.png" class="hover-effect-target d-none-dark"
+                                    width="627" alt="Single Product Store">
+                                <img src="/img/intro/demos/single-store-dark.png"
+                                    class="hover-effect-target d-none d-block-dark" width="627"
+                                    alt="Single Product Store">
+                            </div>
+                            <span class="position-absolute top-0 start-0 w-100 h-100 d-none-dark"
+                                style="background: linear-gradient(90deg, rgba(249,235,200,1) 0%, rgba(252,202,197,1) 100%)"></span>
+                            <span class="position-absolute top-0 start-0 w-100 h-100 d-none d-block-dark"
+                                style="background: linear-gradient(119deg, #333126 0%, #372e2f 52.24%)"></span>
+                        </div>
+                    </div>
+
+                    <!-- Marketplace -->
+                    <div class="hover-effect-scale ratio" id="marketplace"
+                        style="--cz-transform-scale: 1.03; --cz-transition-duration: .3s">
+                        <div
+                            class="nav flex-column position-absolute top-0 start-0 w-100 h-100 z-2 pt-4 pt-xl-5 px-4 ps-xl-5 mt-lg-2 ms-lg-2 m-xl-0">
+                            <h2 class="h3 d-none d-lg-block pb-2 mb-1">Marketplace</h2>
+                            <h2 class="h4 d-lg-none mb-2">Marketplace</h2>
+                            <p class="fs-xs mb-2 mb-xl-3 d-none d-sm-block d-md-none d-lg-block" style="max-width: 250px">
+                                Discover digital goods from top creators in a vibrant multi-vendor marketplace.</p>
+                            <a class="nav-link animate-underline stretched-link text-dark-emphasis py-1 px-0"
+                                href="{{ route('second', ['home', 'marketplace']) }}">
+                                <span class="animate-target">View demo</span>
+                                <i class="ci-chevron-right fs-base mt-1 ms-1"></i>
+                            </a>
+                        </div>
+                        <div class="hover-effect-target d-flex align-items-end h-100 overflow-hidden rounded-5">
+                            <div class="position-relative z-1 rtl-flip">
+                                <img src="/img/intro/demos/marketplace-light.png" class="hover-effect-target d-none-dark"
+                                    width="773" alt="Marketplace">
+                                <img src="/img/intro/demos/marketplace-dark.png"
+                                    class="hover-effect-target d-none d-block-dark" width="773" alt="Marketplace">
+                            </div>
+                            <span class="position-absolute top-0 start-0 w-100 h-100 d-none-dark"
+                                style="background: linear-gradient(90deg, rgba(203,201,233, .6) 0%, rgba(227,232,251, .6) 50%, rgba(255,224,244, .6) 100%)"></span>
+                            <span class="position-absolute top-0 start-0 w-100 h-100 d-none d-block-dark"
+                                style="background: linear-gradient(90deg, rgba(51,51,59, .6) 0%, rgba(44,48,62, .6) 50%, rgba(57,43,52, .6) 100%)"></span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Front-end solution -->
+        <section class="container py-5 mt-2 mb-3 my-sm-3 my-md-4 my-lg-5">
+            <h2 class="h1 text-center pt-xl-4 mt-xxl-2">Complete E-Commerce Front-end Solution</h2>
+            <p class="fs-lg text-center pb-4 pb-md-5 mb-0 mb-lg-2 mb-xl-4">All you need for your next e-commerce project
+            </p>
+            <div class="row align-items-center justify-content-center pb-xl-4 mb-xxl-2">
+                <div class="col-10 col-sm-8 col-md-6 order-md-2 pb-4 pb-md-0 mb-3 mb-md-0">
+                    <div class="position-relative w-100 mx-auto" style="max-width: 533px">
+                        <div class="ratio" style="--cz-aspect-ratio: calc(383 / 533 * 100%)"></div>
+                        <div class="position-absolute ratio ratio-1x1 z-2 bg-primary rounded-5"
+                            style="top: 41%; right: 38%; width: 20%">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110 110" fill="none">
+                                <path
+                                    d="M34.365 59.818a10.52 10.52 0 0 1-3.466-.602c-1.106-.394-2.098-1.034-2.977-1.92s-1.576-2.061-2.091-3.523c-.508-1.462-.761-3.258-.761-5.386.008-1.955.231-3.701.671-5.239.447-1.545 1.083-2.856 1.909-3.932.833-1.076 1.83-1.894 2.989-2.454 1.159-.568 2.458-.852 3.898-.852 1.553 0 2.924.303 4.114.909 1.189.599 2.144 1.413 2.864 2.443.727 1.03 1.167 2.186 1.318 3.466h-4.852c-.189-.811-.587-1.447-1.193-1.909s-1.356-.693-2.25-.693c-1.515 0-2.667.659-3.454 1.977-.78 1.318-1.178 3.11-1.193 5.375h.159a5.41 5.41 0 0 1 1.409-1.761 6.43 6.43 0 0 1 2.034-1.125 7.34 7.34 0 0 1 2.42-.398c1.379 0 2.606.326 3.682.977a6.93 6.93 0 0 1 2.545 2.659c.621 1.129.932 2.42.932 3.875 0 1.576-.367 2.977-1.102 4.205-.727 1.227-1.746 2.189-3.057 2.886-1.303.689-2.818 1.03-4.545 1.023zm-.023-3.864c.758 0 1.436-.182 2.034-.545s1.068-.856 1.409-1.477.511-1.318.511-2.091-.171-1.466-.511-2.079c-.333-.614-.795-1.102-1.386-1.466s-1.265-.545-2.023-.545c-.568 0-1.095.106-1.579.318-.477.212-.898.508-1.261.886a4.26 4.26 0 0 0-.841 1.318c-.204.492-.307 1.019-.307 1.58 0 .75.17 1.436.511 2.057a4.09 4.09 0 0 0 1.409 1.489c.599.371 1.277.557 2.034.557zm21.341 4.057c-1.954-.008-3.636-.489-5.045-1.443-1.401-.955-2.481-2.337-3.239-4.148-.75-1.811-1.121-3.989-1.114-6.534 0-2.538.375-4.701 1.125-6.489.758-1.788 1.837-3.148 3.239-4.08 1.409-.939 3.087-1.409 5.034-1.409s3.621.47 5.023 1.409c1.409.939 2.492 2.303 3.25 4.091.757 1.78 1.132 3.939 1.125 6.477 0 2.553-.379 4.735-1.136 6.545-.75 1.811-1.826 3.193-3.227 4.148s-3.08 1.432-5.034 1.432zm0-4.08c1.333 0 2.398-.67 3.193-2.011s1.189-3.352 1.182-6.034c0-1.765-.182-3.235-.545-4.409-.356-1.174-.864-2.057-1.523-2.648a3.32 3.32 0 0 0-2.307-.886c-1.326 0-2.386.663-3.182 1.989s-1.197 3.311-1.204 5.955c0 1.788.178 3.28.534 4.477.364 1.189.875 2.083 1.534 2.682a3.36 3.36 0 0 0 2.318.886zm19.861.023V39.864h4.068v16.091h-4.068zm-6.011-6.011v-4.068h16.091v4.068H69.533zM39.6 79.955v-9h.972v1.04h.119l.307-.435c.133-.179.324-.338.571-.477s.588-.213 1.014-.213c.551 0 1.037.138 1.457.413a2.75 2.75 0 0 1 .984 1.172c.236.506.354 1.102.354 1.79 0 .693-.118 1.294-.354 1.803a2.79 2.79 0 0 1-.98 1.176c-.418.276-.899.413-1.445.413-.42 0-.757-.07-1.01-.209s-.447-.303-.584-.482l-.315-.452h-.085v3.46H39.6zm.989-5.727c0 .494.072.93.217 1.308s.356.669.635.882.619.315 1.023.315c.42 0 .771-.111 1.053-.332s.497-.526.639-.903.217-.804.217-1.27c0-.46-.071-.875-.213-1.244s-.351-.666-.635-.882-.635-.328-1.061-.328c-.409 0-.753.104-1.031.311s-.489.492-.631.861-.213.794-.213 1.283zm8.25 3.426a2.66 2.66 0 0 1-1.129-.234 1.94 1.94 0 0 1-.805-.686c-.199-.301-.298-.665-.298-1.091 0-.375.074-.679.222-.912s.345-.42.592-.554.52-.233.818-.298l.908-.162.967-.115c.25-.028.432-.075.545-.141s.175-.179.175-.341v-.034c0-.42-.115-.747-.345-.98s-.572-.349-1.036-.349c-.48 0-.856.105-1.129.315s-.465.435-.575.673l-.955-.341c.17-.398.398-.707.682-.929s.599-.381.938-.469.676-.136 1.006-.136a3.99 3.99 0 0 1 .724.077 2.32 2.32 0 0 1 .797.303c.259.153.473.385.644.695s.256.724.256 1.244V77.5h-1.006v-.886h-.051c-.068.142-.182.294-.341.456s-.371.3-.635.413-.587.17-.967.17zm.153-.903c.398 0 .733-.078 1.006-.234s.483-.358.622-.605a1.54 1.54 0 0 0 .213-.78v-.921c-.043.051-.136.098-.281.141s-.307.075-.494.107l-.541.077-.422.051c-.261.034-.506.09-.733.166s-.406.186-.545.337-.205.349-.205.605c0 .349.129.614.388.793s.592.264.993.264zm7.324 3.341c-.486 0-.903-.062-1.253-.187s-.641-.284-.874-.486-.413-.412-.55-.639l.801-.562a6.36 6.36 0 0 0 .345.409 1.75 1.75 0 0 0 .571.405c.244.117.564.175.959.175.528 0 .965-.128 1.308-.383s.516-.656.516-1.202V76.29h-.085c-.074.119-.179.267-.315.443s-.327.328-.579.464-.588.2-1.014.2a2.73 2.73 0 0 1-1.423-.375 2.63 2.63 0 0 1-.993-1.091c-.241-.477-.362-1.057-.362-1.739 0-.671.118-1.254.354-1.751a2.73 2.73 0 0 1 .984-1.159c.421-.276.906-.413 1.457-.413.426 0 .764.071 1.014.213s.446.298.58.477l.315.435h.102v-1.04h.972v6.733c0 .563-.128 1.02-.384 1.372s-.594.615-1.023.78-.901.251-1.423.251zm-.034-3.597c.403 0 .744-.092 1.023-.277s.49-.45.635-.797.217-.761.217-1.244a3.39 3.39 0 0 0-.213-1.249c-.142-.361-.352-.644-.631-.848s-.622-.307-1.031-.307c-.426 0-.781.108-1.065.324s-.493.506-.635.869a3.36 3.36 0 0 0-.209 1.21c0 .455.071.857.213 1.206s.358.619.639.818.636.294 1.057.294zm7.449 1.142c-.631 0-1.175-.139-1.632-.418s-.805-.673-1.053-1.176-.367-1.094-.367-1.764.122-1.261.367-1.773a2.89 2.89 0 0 1 1.031-1.202c.443-.29.96-.435 1.551-.435a3.1 3.1 0 0 1 1.01.171 2.5 2.5 0 0 1 .908.554c.273.253.49.588.652 1.006s.243.932.243 1.543v.426h-5.045v-.869h4.023c0-.369-.074-.699-.222-.989a1.67 1.67 0 0 0-.622-.686c-.267-.168-.582-.251-.946-.251-.401 0-.747.1-1.04.298a1.96 1.96 0 0 0-.669.767c-.156.315-.234.653-.234 1.014v.579c0 .494.085.913.256 1.257s.413.601.72.78a2.11 2.11 0 0 0 1.07.264c.264 0 .503-.037.716-.111a1.53 1.53 0 0 0 .558-.341c.156-.153.277-.344.362-.571l.972.273c-.102.329-.274.619-.516.869s-.54.44-.895.579-.754.205-1.197.205zm8.876-5.216l-.903.256a1.68 1.68 0 0 0-.251-.439 1.22 1.22 0 0 0-.443-.358c-.187-.094-.428-.141-.72-.141-.401 0-.734.092-1.001.277s-.396.413-.396.695c0 .25.091.448.273.592s.466.266.852.362l.972.239c.585.142 1.021.359 1.308.652s.43.663.43 1.121a1.66 1.66 0 0 1-.324 1.006c-.213.296-.511.528-.895.699s-.83.256-1.338.256c-.668 0-1.22-.145-1.658-.435s-.715-.713-.831-1.27l.954-.239c.091.352.263.617.516.793s.59.264 1.001.264c.469 0 .841-.099 1.116-.298s.418-.443.418-.724a.76.76 0 0 0-.239-.571c-.159-.156-.403-.273-.733-.349l-1.091-.256c-.599-.142-1.04-.362-1.321-.66s-.418-.678-.418-1.129a1.62 1.62 0 0 1 .311-.98c.21-.284.496-.507.856-.669s.776-.243 1.236-.243c.648 0 1.156.142 1.526.426s.636.659.793 1.125z"
+                                    fill="#fff" />
+                            </svg>
+                        </div>
+                        <img src="/img/intro/pages-light.jpg"
+                            class="position-absolute top-0 start-0 w-100 h-100 d-none-dark" alt="E-Commerce Front-end">
+                        <img src="/img/intro/pages-dark.png"
+                            class="position-absolute top-0 start-0 w-100 h-100 d-none d-block-dark"
+                            alt="E-Commerce Front-end">
+                    </div>
+                </div>
+                <div class="col-sm-9 col-md-6 col-lg-5 offset-lg-1 order-md-1">
+                    <ul class="list-unstyled gap-3 mb-0">
+                        <li class="d-flex">
+                            <svg class="text-primary mt-2 me-3" xmlns="http://www.w3.org/2000/svg" width="10"
+                                height="10" viewBox="0 0 10 10" fill="none">
+                                <circle cx="5" cy="5" r="4.125" stroke="currentColor"
+                                    stroke-width="1.75" />
+                            </svg>
+                            <span>Multiple Shop Layout Options</span>
+                        </li>
+                        <li class="d-flex">
+                            <svg class="text-primary mt-2 me-3" xmlns="http://www.w3.org/2000/svg" width="10"
+                                height="10" viewBox="0 0 10 10" fill="none">
+                                <circle cx="5" cy="5" r="4.125" stroke="currentColor"
+                                    stroke-width="1.75" />
+                            </svg>
+                            <span>Multiple Product Page Variations</span>
+                        </li>
+                        <li class="d-flex">
+                            <svg class="text-primary mt-2 me-3" xmlns="http://www.w3.org/2000/svg" width="10"
+                                height="10" viewBox="0 0 10 10" fill="none">
+                                <circle cx="5" cy="5" r="4.125" stroke="currentColor"
+                                    stroke-width="1.75" />
+                            </svg>
+                            <span>Complete Order Workflow: Cart + Checkout</span>
+                        </li>
+                        <li class="d-flex">
+                            <svg class="text-primary mt-2 me-3" xmlns="http://www.w3.org/2000/svg" width="10"
+                                height="10" viewBox="0 0 10 10" fill="none">
+                                <circle cx="5" cy="5" r="4.125" stroke="currentColor"
+                                    stroke-width="1.75" />
+                            </svg>
+                            <span>Shop Customer Account Pages</span>
+                        </li>
+                        <li class="d-flex">
+                            <svg class="text-primary mt-2 me-3" xmlns="http://www.w3.org/2000/svg" width="10"
+                                height="10" viewBox="0 0 10 10" fill="none">
+                                <circle cx="5" cy="5" r="4.125" stroke="currentColor"
+                                    stroke-width="1.75" />
+                            </svg>
+                            <span>Marketplace Vendor Account Pages</span>
+                        </li>
+                        <!-- <li class="d-flex">
+                            <svg class="text-primary mt-2 me-3" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none"><circle cx="5" cy="5" r="4.125" stroke="currentColor" stroke-width="1.75"/></svg>
+                            <span>Dashboard (CMS) Pages</span>
+                          </li> -->
+                        <li class="d-flex">
+                            <svg class="text-primary mt-2 me-3" xmlns="http://www.w3.org/2000/svg" width="10"
+                                height="10" viewBox="0 0 10 10" fill="none">
+                                <circle cx="5" cy="5" r="4.125" stroke="currentColor"
+                                    stroke-width="1.75" />
+                            </svg>
+                            <span>Electronics, Fashion, Grocery, Furniture,<br>Marketplace and Single Product Store
+                                Demos</span>
+                        </li>
+                        <li class="d-flex">
+                            <svg class="text-primary mt-2 me-3" xmlns="http://www.w3.org/2000/svg" width="10"
+                                height="10" viewBox="0 0 10 10" fill="none">
+                                <circle cx="5" cy="5" r="4.125" stroke="currentColor"
+                                    stroke-width="1.75" />
+                            </svg>
+                            <span>Blog Pages: Blog Layouts + Single Articles</span>
+                        </li>
+                        <li class="d-flex">
+                            <svg class="text-primary mt-2 me-3" xmlns="http://www.w3.org/2000/svg" width="10"
+                                height="10" viewBox="0 0 10 10" fill="none">
+                                <circle cx="5" cy="5" r="4.125" stroke="currentColor"
+                                    stroke-width="1.75" />
+                            </svg>
+                            <span>Help Center / Support Pages</span>
+                        </li>
+                        <li class="d-flex">
+                            <svg class="text-primary mt-2 me-3" xmlns="http://www.w3.org/2000/svg" width="10"
+                                height="10" viewBox="0 0 10 10" fill="none">
+                                <circle cx="5" cy="5" r="4.125" stroke="currentColor"
+                                    stroke-width="1.75" />
+                            </svg>
+                            <span>Secondary Pages: About, Contacts, 404, etc.</span>
+                        </li>
+                        <li class="d-flex">
+                            <svg class="text-primary mt-2 me-3" xmlns="http://www.w3.org/2000/svg" width="10"
+                                height="10" viewBox="0 0 10 10" fill="none">
+                                <circle cx="5" cy="5" r="4.125" stroke="currentColor"
+                                    stroke-width="1.75" />
+                            </svg>
+                            <span>60+ Flexible Components (UI Kit)</span>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Light / Dark mode (Comparison slider) -->
+        <section class="d-flex w-100 position-relative overflow-hidden">
+            <div class="position-relative flex-xxl-shrink-0 z-2 start-50 translate-middle-x my-n2"
+                style="max-width: 1920px;">
+                <div class="mx-n2 mx-sm-n5 mx-xxl-0">
+                    <div class="mx-lg-n5 mx-xxl-0">
+                        <img-comparison-slider class="focus-none text-primary mx-n5 mx-xxl-0"
+                            style="--divider-width: .125rem; --divider-color: currentColor">
+                            <img slot="first" src="/img/intro/dark-mode.jpg" alt="Dark Mode">
+                            <img slot="second" src="/img/intro/light-mode.jpg" alt="Light Mode">
+                            <div slot="handle" style="width: 42px;">
+                                <svg class="text-primary rounded-circle" width="42" height="42"
+                                    viewBox="0 0 42 42" xmlns="http://www.w3.org/2000/svg">
+                                    <g>
+                                        <circle fill="currentColor" cx="21" cy="21" r="21"></circle>
+                                    </g>
+                                    <path fill="white"
+                                        d="M25.5019 19.7494H15.9147V15.9146L11.1211 20.7081L15.9147 25.5017V21.6669H25.5019V25.5017L30.2955 20.7081L25.5019 15.9146V19.7494Z">
+                                    </path>
+                                </svg>
+                            </div>
+                        </img-comparison-slider>
+                    </div>
+                </div>
+            </div>
+            <div class="position-absolute top-0 start-0 w-50 h-100" style="background-color: #131920"></div>
+            <div class="position-absolute top-0 end-0 w-50 h-100" style="background-color: #f5f7fa"></div>
+        </section>
+
+
+        <!-- Features -->
+        <section class="container py-5 mt-2 mb-sm-2 mt-sm-3 my-md-4 my-lg-5">
+            <h2 class="h1 text-center pb-3 pb-sm-4 pb-lg-2 pb-xl-3 pt-xl-4 mt-xxl-2 mb-lg-5">Cartzilla Feature Highlights
+            </h2>
+            <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-4 g-lg-5 pb-xl-2 pb-xxl-4">
+                <div class="col text-center">
+                    <img src="/img/intro/features/bootstrap.png" width="56" class="d-inline-flex mb-3"
+                        alt="Bootstrap">
+                    <h3 class="h5 pt-sm-1 pb-2 mb-1">Built with Latest Bootstrap</h3>
+                    <p class="mb-2 mb-sm-3 mb-lg-0">Cartzilla is the powerful e-commerce front-end solution based on
+                        Bootstrap 5 - the world's most popular responsive, mobile-first front-end component library.</p>
+                </div>
+                <div class="col text-center">
+                    <img src="/img/intro/features/sass.png" width="48" class="d-inline-flex mb-3" alt="Sass">
+                    <h3 class="h5 pt-sm-1 pb-2 mb-1">Easy to Customize with Sass</h3>
+                    <p class="mb-2 mb-sm-3 mb-lg-0">Cartzilla is built using Sass, allowing for effortless customization of
+                        colors, typography, and beyond. It is the most mature, stable, and powerful CSS extension language
+                        in the world.</p>
+                </div>
+                <div class="col text-center">
+                    <img src="/img/intro/features/npm.png" width="56" class="d-inline-flex mb-3" alt="Npm">
+                    <h3 class="h5 pt-sm-1 pb-2 mb-1">Kick-start Your Development</h3>
+                    <p class="mb-2 mb-sm-3 mb-lg-0">Start your development process fast and easy with included Npm scripts
+                        setup, full tasks automation and local server hot reload. The configuration files are included in
+                        the download package.</p>
+                </div>
+                <div class="col text-center">
+                    <img src="/img/intro/features/js.png" width="48" class="d-inline-flex mb-3" alt="JavaScript">
+                    <h3 class="h5 pt-sm-1 pb-2 mb-1">Future-proof JavaScript</h3>
+                    <p class="mb-2 mb-sm-3 mb-lg-0">Cartzilla's core scripts, along with all dependencies, are meticulously
+                        crafted in vanilla JS (ES6 modules), ensuring optimal performance and compatibility across various
+                        platforms.</p>
+                </div>
+                <div class="col text-center">
+                    <img src="/img/intro/features/html5.png" width="48" class="d-inline-flex mb-3" alt="HTML5">
+                    <h3 class="h5 pt-sm-1 pb-2 mb-1">W3C Valid HTML Code</h3>
+                    <p class="mb-2 mb-sm-3 mb-lg-0">As you likely know, ensuring 100% valid code through W3C validation for
+                        all HTML files is crucial. Invalid HTML imposes restrictions on innovation, yet Cartzilla remains
+                        innovative at its core.</p>
+                </div>
+                <div class="col text-center">
+                    <img src="/img/intro/features/figma.png" width="48" class="d-inline-flex mb-3" alt="Figma">
+                    <h3 class="h5 pt-sm-1 pb-2 mb-1">Premium Figma File Included</h3>
+                    <p class="mb-2 mb-sm-3 mb-lg-0">A well-crafted Figma design file is included in the download package.
+                        It offers a visually stunning and thoroughly organized layout, utilizing Figma's components and
+                        styles.</p>
+                </div>
+                <div class="col text-center">
+                    <img src="/img/intro/features/touch.png" width="48" class="d-inline-flex mb-3" alt="Touch UI">
+                    <h3 class="h5 pt-sm-1 pb-2 mb-1">Touch-enabled Sliders</h3>
+                    <p class="mb-2 mb-sm-3 mb-lg-0">In the era of touch screens it is important to ensure great user
+                        experience on handheld devices, especially when it comes to such frequently used interface component
+                        as slider.</p>
+                </div>
+                <div class="col text-center">
+                    <img src="/img/intro/features/google-fonts.png" width="48" class="d-inline-flex mb-3"
+                        alt="Google Fonts">
+                    <h3 class="h5 pt-sm-1 pb-2 mb-1">Google Fonts</h3>
+                    <p class="mb-2 mb-sm-3 mb-lg-0">Cartzilla uses preloaded variable Google font (Inter) which is free,
+                        fast to load and of very high quality. Currently Google fonts library includes 1600+ font families
+                        to choose from.</p>
+                </div>
+                <div class="col text-center">
+                    <img src="/img/intro/features/vector.png" width="48" class="d-inline-flex mb-3"
+                        alt="Vector Icons">
+                    <h3 class="h5 pt-sm-1 pb-2 mb-1">Vector Based HD-ready Icons</h3>
+                    <p class="mb-2 mb-sm-3 mb-lg-0">Cartzilla is equiped with font-based icon pack and svg icons to ensure
+                        that infographics and interface icons look sharp on any device with any screen resolution and pixel
+                        density.</p>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Mobile friendly (PWA) -->
+        <section class="position-relative">
+            <div class="bg-body-tertiary position-absolute top-50 start-0 w-100 translate-middle-y overflow-hidden d-none d-xl-block"
+                style="height: 78%;">
+                <div class="bg-white opacity-75 d-none-dark"
+                    style="width: 699px; height: 728px; border-radius: 728px; filter: blur(151px)"></div>
+                <div class="bg-body opacity-75 d-none d-block-dark"
+                    style="width: 699px; height: 728px; border-radius: 728px; filter: blur(151px)"></div>
+            </div>
+            <div class="bg-body-tertiary position-absolute top-0 start-0 w-100 h-100 overflow-hidden d-xl-none">
+                <div class="position-absolute ps-xl-4 ms-xxl-5 mt-n2">
+                    <div class="bg-white opacity-75 d-none-dark"
+                        style="width: 699px; height: 728px; border-radius: 728px; filter: blur(151px)"></div>
+                    <div class="bg-body opacity-75 d-none d-block-dark"
+                        style="width: 699px; height: 728px; border-radius: 728px; filter: blur(151px)"></div>
+                </div>
+            </div>
+            <div class="container position-relative z-2 pb-5 pt-4 pt-md-5 py-xl-0">
+                <div class="row align-items-center justify-content-center pb-2 pb-sm-3 pb-md-0">
+                    <div class="col-9 col-sm-7 col-md-6 mb-3 mb-sm-4 mb-md-0">
+                        <div class="ratio rtl-flip" style="max-width: 585px; --cz-aspect-ratio: calc(821 / 585 * 100%);">
+                            <img src="/img/intro/mobile-light.png" class="d-none-dark" alt="Mobile screens">
+                            <img src="/img/intro/mobile-dark.png" class="d-none d-block-dark" alt="Mobile screens">
+                        </div>
+                    </div>
+                    <div class="col-md-6 col-xl-5 offset-xl-1 text-center">
+                        <div class="ps-4 ps-xl-0">
+                            <h2 class="h1">Mobile Friendly Interface. PWA ready</h2>
+                            <p class="fs-lg mb-4">Cartzilla ensures seamless interactions across all devices. With
+                                progressive web app (PWA) compatibility, users can enjoy the app-like experiences on their
+                                mobile browsers.</p>
+                            <p class="fs-sm fw-medium text-body-emphasis mb-4">Scan QR code below to test on your device:
+                            </p>
+                            <img src="/img/intro/qr-light.png" class="d-none-dark rtl-flip" width="120"
+                                alt="QR code">
+                            <img src="/img/intro/qr-dark.png" class="d-none d-inline-block-dark rtl-flip" width="120"
+                                alt="QR code">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Customizer -->
+        <section class="container pt-5 pb-4 pb-sm-5 my-2 mt-md-3 mt-xxl-4 mb-sm-0 mb-lg-4 mb-xl-5">
+            <h2 class="h1 text-center pt-lg-3 pt-xl-0 pb-md-2 pb-lg-3 pb-xl-4">Theme Customizer</h2>
+
+            <!-- Colors -->
+            <div class="row align-items-center justify-content-center py-4">
+                <div class="col-9 col-sm-7 col-md-6 order-md-2 offset-lg-1">
+                    <div class="ratio" style="max-width: 593px; --cz-aspect-ratio: calc(542 / 593 * 100%)">
+                        <img src="/img/intro/customizer/colors-light.jpg" class="d-none-dark" alt="Colors">
+                        <img src="/img/intro/customizer/colors-dark.png" class="d-none d-block-dark" alt="Colors">
+                    </div>
+                </div>
+                <div class="col-md-6 col-lg-5 order-md-1 text-center text-md-start mt-3 mt-md-n5">
+                    <span class="badge fs-sm bg-primary-subtle text-primary mb-3 mb-md-4">Colors</span>
+                    <h2 class="h3 mb-md-4">Change theme brand colors quickly and easily</h2>
+                    <p class="mb-0">Customize theme colors to match your brand palette using the color picker or just
+                        type in the color hex. Supported colors: primary, warning, success, info, danger.</p>
+                </div>
+            </div>
+
+            <hr class="d-md-none my-3 my-sm-4">
+
+            <!-- Typography -->
+            <div class="row align-items-center justify-content-center py-4">
+                <div class="col-10 col-sm-7 col-md-6 col-lg-7">
+                    <div class="ratio" style="max-width: 668px; --cz-aspect-ratio: calc(510 / 668 * 100%)">
+                        <img src="/img/intro/customizer/typography-light.jpg" class="d-none-dark" alt="Typography">
+                        <img src="/img/intro/customizer/typography-dark.png" class="d-none d-block-dark"
+                            alt="Typography">
+                    </div>
+                </div>
+                <div class="col-md-6 col-lg-5 text-center text-md-start mt-3 mt-md-n5">
+                    <span class="badge fs-sm bg-info-subtle text-info mb-3 mb-md-4">Typography</span>
+                    <h2 class="h3 mb-md-4">Set up fonts from the huge Google font collection</h2>
+                    <p class="mb-0">Easily change the font to your liking. Choose the font from Google Fonts library of
+                        1,600+ open source font families. Update headings and body font sizes right from customizer.</p>
+                </div>
+            </div>
+
+            <hr class="d-md-none my-3 my-sm-4">
+
+            <!-- Borders -->
+            <div class="row align-items-center justify-content-center py-4">
+                <div class="col-10 col-sm-7 col-md-6 col-lg-7 order-md-2 d-flex justify-content-end">
+                    <div class="ratio" style="max-width: 668px; --cz-aspect-ratio: calc(428 / 668 * 100%)">
+                        <img src="/img/intro/customizer/borders-light.jpg" class="d-none-dark" alt="Borders">
+                        <img src="/img/intro/customizer/borders-dark.png" class="d-none d-block-dark" alt="Borders">
+                    </div>
+                </div>
+                <div class="col-md-6 col-lg-5 order-md-1 text-center text-md-start mt-4 mt-md-0">
+                    <span class="badge fs-sm bg-success-subtle text-success mb-3 mb-md-4">Borders</span>
+                    <h2 class="h3 mb-md-4">Rounded or square? Customize borders as you wish</h2>
+                    <p class="mb-0">It's up to you to make your website soft and friendly with increased border radius or
+                        add business vibes with less rounded shapes. Additionally, you can adjust the border width.</p>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <!-- Page footer -->    
+    <footer class="footer pt-xxl-2">
+        <div class="container">
+            <div class="position-relative py-5 px-4 p-sm-5">
+                <div class="position-absolute top-0 start-0 w-100 h-100 rounded-5 d-none-dark rtl-flip"
+                    style="background: linear-gradient(102deg, #dad4ec 0%, #f3e7e9 80.43%);"></div>
+                <div class="position-absolute top-0 start-0 w-100 h-100 rounded-5 d-none d-block-dark rtl-flip"
+                    style="background: linear-gradient(102deg, #38314b 0%, #3f353a 100%);"></div>
+                <div class="position-relative z-1 text-center py-md-3 my-lg-3">
+                    <p class="fs-xl pb-2 mb-1">Still not convinced?</p>
+                    <h2 class="pb-2 pb-sm-3">Add premium support and lifetime updates to this.</h2>
+                    <a class="btn btn-lg btn-primary animate-slide-end"
+                        href=""
+                        target="_blank" rel="noreferrer">
+                        <i class="ci-shopping-cart fs-base animate-target ms-n1 me-2"></i>
+                        Buy now
+                    </a>
+                </div>
+            </div>
+            <div class="fs-sm text-center py-4 py-lg-5 my-sm-2 my-md-3 my-lg-0">
+                &copy; All rights reserved. Made by <span class="animate-underline"><a
+                        class="animate-target text-dark-emphasis text-decoration-none" href="https://coderthemes.com/"
+                        target="_blank" rel="noreferrer">Coderthemes</a></span>
+            </div>
+        </div>
+    </footer>
+
+    <!-- Back to top button -->
+    <div class="floating-buttons position-fixed top-50 end-0 z-sticky me-3 me-xl-4 pb-4">
+        <a class="btn-scroll-top btn btn-sm bg-body border-0 rounded-pill shadow animate-slide-end" href="#top">
+            Top
+            <i class="ci-arrow-right fs-base ms-1 me-n1 animate-target"></i>
+            <span class="position-absolute top-0 start-0 w-100 h-100 border rounded-pill z-0"></span>
+            <svg class="position-absolute top-0 start-0 w-100 h-100 z-1" viewBox="0 0 62 32" fill="none"
+                xmlns="http://www.w3.org/2000/svg">
+                <rect x=".75" y=".75" width="60.5" height="30.5" rx="15.25" stroke="currentColor"
+                    stroke-width="1.5" stroke-miterlimit="10" />
+            </svg>
+        </a>
+    </div>
+    
+@endsection
+
+@section('scripts')
+@endsection
\ No newline at end of file
diff --git a/resources/views/layouts/account.blade.php b/resources/views/layouts/account.blade.php
new file mode 100644
index 0000000..ac20abc
--- /dev/null
+++ b/resources/views/layouts/account.blade.php
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="en" data-bs-theme="light" data-pwa="true">
+
+<head>
+    @include('layouts.partials/title-meta')
+
+    @vite(['resources/js/theme-switcher.js'])
+
+    @include('layouts.partials/head-css')
+</head>
+
+<body>
+
+    <!-- Search offcanvas -->
+    <div class="offcanvas offcanvas-top" id="searchBox" data-bs-backdrop="static" tabindex="-1">
+        <div class="offcanvas-header border-bottom p-0 py-lg-1">
+            <form class="container d-flex align-items-center">
+                <input type="search" class="form-control form-control-lg fs-lg border-0 rounded-0 py-3 ps-0"
+                    placeholder="Search the products" data-autofocus="offcanvas">
+                <button type="reset" class="btn-close fs-lg" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+            </form>
+        </div>
+        <div class="offcanvas-body px-0">
+            <div class="container text-center">
+                <svg class="text-body-tertiary opacity-60 mb-4" xmlns="http://www.w3.org/2000/svg" width="60"
+                    viewBox="0 0 512 512" fill="currentColor">
+                    <path
+                        d="M340.115,361.412l-16.98-16.98c-34.237,29.36-78.733,47.098-127.371,47.098C87.647,391.529,0,303.883,0,195.765S87.647,0,195.765,0s195.765,87.647,195.765,195.765c0,48.638-17.738,93.134-47.097,127.371l16.98,16.98l11.94-11.94c5.881-5.881,15.415-5.881,21.296,0l112.941,112.941c5.881,5.881,5.881,15.416,0,21.296l-45.176,45.176c-5.881,5.881-15.415,5.881-21.296,0L328.176,394.648c-5.881-5.881-5.881-15.416,0-21.296L340.115,361.412z M195.765,361.412c91.484,0,165.647-74.163,165.647-165.647S287.249,30.118,195.765,30.118S30.118,104.28,30.118,195.765S104.28,361.412,195.765,361.412z M360.12,384l91.645,91.645l23.88-23.88L384,360.12L360.12,384z M233.034,233.033c5.881-5.881,15.415-5.881,21.296,0c5.881,5.881,5.881,15.416,0,21.296c-32.345,32.345-84.786,32.345-117.131,0c-5.881-5.881-5.881-15.415,0-21.296c5.881-5.881,15.416-5.881,21.296,0C179.079,253.616,212.45,253.616,233.034,233.033zM135.529,180.706c-12.475,0-22.588-10.113-22.588-22.588c0-12.475,10.113-22.588,22.588-22.588c12.475,0,22.588,10.113,22.588,22.588C158.118,170.593,148.005,180.706,135.529,180.706z M256,180.706c-12.475,0-22.588-10.113-22.588-22.588c0-12.475,10.113-22.588,22.588-22.588s22.588,10.113,22.588,22.588C278.588,170.593,268.475,180.706,256,180.706z" />
+                </svg>
+                <h6 class="mb-2">Your search results will appear here</h6>
+                <p class="fs-sm mb-0">Start typing in the search field above to see instant search results.</p>
+            </div>
+        </div>
+    </div>
+
+    @include('layouts.partials/offcanvas')
+
+    <!-- Bonuses info modal -->
+    <div class="modal fade" id="bonusesModal" tabindex="-1" aria-labelledby="bonusesModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="bonusesModalLabel">My bonuses</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <div class="row align-items-center">
+                        <div class="col-sm-6 mb-4 mb-sm-0">
+                            <div class="position-relative bg-warning text-center rounded-4 overflow-hidden">
+                                <div class="position-relative z-1 py-3 px-4">
+                                    <svg class="text-white opacity-75 mb-2" xmlns="http://www.w3.org/2000/svg"
+                                        width="24" height="24" viewBox="0 0 16 16" fill="currentColor">
+                                        <path
+                                            d="M1.333 9.667H7.5V16h-5c-.64 0-1.167-.527-1.167-1.167V9.667zm13.334 0v5.167c0 .64-.527 1.167-1.167 1.167h-5V9.667h6.167zM0 5.833V7.5c0 .64.527 1.167 1.167 1.167h.167H7.5v-1-3H1.167C.527 4.667 0 5.193 0 5.833zm14.833-1.166H8.5v3 1h6.167.167C15.473 8.667 16 8.14 16 7.5V5.833c0-.64-.527-1.167-1.167-1.167z" />
+                                        <path
+                                            d="M8 5.363a.5.5 0 0 1-.495-.573C7.752 3.123 9.054-.03 12.219-.03c1.807.001 2.447.977 2.447 1.813 0 1.486-2.069 3.58-6.667 3.58zM12.219.971c-2.388 0-3.295 2.27-3.595 3.377 1.884-.088 3.072-.565 3.756-.971.949-.563 1.287-1.193 1.287-1.595 0-.599-.747-.811-1.447-.811z" />
+                                        <path
+                                            d="M8.001 5.363c-4.598 0-6.667-2.094-6.667-3.58 0-.836.641-1.812 2.448-1.812 3.165 0 4.467 3.153 4.713 4.819a.5.5 0 0 1-.495.573zM3.782.971c-.7 0-1.448.213-1.448.812 0 .851 1.489 2.403 5.042 2.566C7.076 3.241 6.169.971 3.782.971z" />
+                                    </svg>
+                                    <div class="h2 text-white pb-1 mb-2">100</div>
+                                    <p class="fs-sm fw-medium text-white opacity-75 mb-0">1 bonus = 1$</p>
+                                </div>
+                                <div class="position-absolute bg-white bg-opacity-10 rounded-circle"
+                                    style="top: -15px; right: -128px; width: 165px; height: 165px"></div>
+                                <div class="position-absolute bg-white bg-opacity-10 rounded-circle"
+                                    style="top: -15px; left: -128px; width: 165px; height: 165px"></div>
+                            </div>
+                        </div>
+                        <div class="col-sm-6">
+                            <ul class="list-unstyled fs-sm m-0">
+                                <li class="d-flex align-items-center justify-content-between">
+                                    Available:
+                                    <span class="text-dark-emphasis fw-semibold ms-2">100</span>
+                                </li>
+                                <li class="d-flex align-items-center justify-content-between">
+                                    Waiting activation:
+                                    <span class="text-dark-emphasis fw-semibold ms-2">0</span>
+                                </li>
+                                <li class="d-flex align-items-center justify-content-between">
+                                    Total:
+                                    <span class="text-dark-emphasis fw-semibold ms-2">100</span>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    @include('layouts.partials/navbar', ['account' => true])
+
+    <!-- Page content -->
+    <main class="content-wrapper">
+        <div class="container py-5 mt-n2 mt-sm-0">
+            <div class="row pt-md-2 pt-lg-3 pb-sm-2 pb-md-3 pb-lg-4 pb-xl-5">
+
+                @include('layouts.partials/account-sidebar')
+
+                @yield('content')
+
+            </div>
+        </div>
+    </main>
+
+    @include('layouts.partials/footer')
+
+    @include('layouts.partials/back-to-top')
+
+    @include('layouts.partials/footer-script')
+
+</body>
+
+</html>
diff --git a/resources/views/layouts/base.blade.php b/resources/views/layouts/base.blade.php
new file mode 100644
index 0000000..45f0b66
--- /dev/null
+++ b/resources/views/layouts/base.blade.php
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en" data-bs-theme="light" data-pwa="true">
+
+<head>
+    @include('layouts.partials/title-meta')
+
+    @vite(['resources/js/theme-switcher.js'])
+
+    @include('layouts.partials/head-css')
+</head>
+
+<body>
+    @yield('content')
+
+    @include('layouts.partials/back-to-top')
+
+    @include('layouts.partials/footer-script')
+
+</body>
+
+</html>
diff --git a/resources/views/layouts/landing.blade.php b/resources/views/layouts/landing.blade.php
new file mode 100644
index 0000000..d081c37
--- /dev/null
+++ b/resources/views/layouts/landing.blade.php
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en" data-bs-theme="light" data-pwa="true">
+
+<head>
+    @include('layouts.partials/title-meta')
+
+    @vite(['resources/js/theme-switcher.js'])
+
+    @include('layouts.partials/head-css')
+
+    @yield('css')
+</head>
+
+<body>
+@yield('content')
+
+@include('layouts.partials/back-to-top')
+
+@vite(['resources/js/theme.js'])
+
+</body>
+
+</html>
diff --git a/resources/views/layouts/marketplace.blade.php b/resources/views/layouts/marketplace.blade.php
new file mode 100644
index 0000000..4b2f86a
--- /dev/null
+++ b/resources/views/layouts/marketplace.blade.php
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en" data-bs-theme="light" data-pwa="true">
+
+<head>
+    @include('layouts.partials/title-meta')
+
+    @vite(['resources/js/theme-switcher.js'])
+
+    @include('layouts.partials/head-css')
+</head>
+
+<body>
+    <!-- Search offcanvas -->
+    <div class="offcanvas offcanvas-top" id="searchBox" data-bs-backdrop="static" tabindex="-1">
+        <div class="offcanvas-header border-bottom p-0 py-lg-1">
+            <form class="container d-flex align-items-center">
+                <input type="search" class="form-control form-control-lg fs-lg border-0 rounded-0 py-3 ps-0"
+                    placeholder="Search the products" data-autofocus="offcanvas">
+                <button type="reset" class="btn-close fs-lg" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+            </form>
+        </div>
+        <div class="offcanvas-body px-0">
+            <div class="container text-center">
+                <svg class="text-body-tertiary opacity-60 mb-4" xmlns="http://www.w3.org/2000/svg" width="60"
+                    viewBox="0 0 512 512" fill="currentColor">
+                    <path
+                        d="M340.115,361.412l-16.98-16.98c-34.237,29.36-78.733,47.098-127.371,47.098C87.647,391.529,0,303.883,0,195.765S87.647,0,195.765,0s195.765,87.647,195.765,195.765c0,48.638-17.738,93.134-47.097,127.371l16.98,16.98l11.94-11.94c5.881-5.881,15.415-5.881,21.296,0l112.941,112.941c5.881,5.881,5.881,15.416,0,21.296l-45.176,45.176c-5.881,5.881-15.415,5.881-21.296,0L328.176,394.648c-5.881-5.881-5.881-15.416,0-21.296L340.115,361.412z M195.765,361.412c91.484,0,165.647-74.163,165.647-165.647S287.249,30.118,195.765,30.118S30.118,104.28,30.118,195.765S104.28,361.412,195.765,361.412z M360.12,384l91.645,91.645l23.88-23.88L384,360.12L360.12,384z M233.034,233.033c5.881-5.881,15.415-5.881,21.296,0c5.881,5.881,5.881,15.416,0,21.296c-32.345,32.345-84.786,32.345-117.131,0c-5.881-5.881-5.881-15.415,0-21.296c5.881-5.881,15.416-5.881,21.296,0C179.079,253.616,212.45,253.616,233.034,233.033zM135.529,180.706c-12.475,0-22.588-10.113-22.588-22.588c0-12.475,10.113-22.588,22.588-22.588c12.475,0,22.588,10.113,22.588,22.588C158.118,170.593,148.005,180.706,135.529,180.706z M256,180.706c-12.475,0-22.588-10.113-22.588-22.588c0-12.475,10.113-22.588,22.588-22.588s22.588,10.113,22.588,22.588C278.588,170.593,268.475,180.706,256,180.706z" />
+                </svg>
+                <h6 class="mb-2">Your search results will appear here</h6>
+                <p class="fs-sm mb-0">Start typing in the search field above to see instant search results.</p>
+            </div>
+        </div>
+    </div>
+
+    @include('layouts.partials/offcanvas2')
+
+    @include('layouts.partials/marketplace-navbar')
+
+    <main class="content-wrapper">
+        <div class="container pt-4 pt-lg-5 pb-5">
+            <div class="row pt-sm-2 pt-md-3 pt-lg-0 pb-2 pb-sm-3 pb-md-4 pb-lg-5">
+
+                @include('layouts.partials/marketplace-sidebar')
+
+
+                @yield('content')
+            </div>
+        </div>
+    </main>
+
+    @include('layouts.partials/footer3')
+
+    @include('layouts.partials/back-to-top')
+
+    @include('layouts.partials/footer-script')
+
+</body>
+
+</html>
diff --git a/resources/views/layouts/partials/account-navbar.blade.php b/resources/views/layouts/partials/account-navbar.blade.php
new file mode 100644
index 0000000..f208d33
--- /dev/null
+++ b/resources/views/layouts/partials/account-navbar.blade.php
@@ -0,0 +1,2226 @@
+<header class="navbar navbar-expand-lg navbar-dark bg-dark d-block z-fixed p-0" data-sticky-navbar='{"offset": 200}'>
+    <div class="container d-block py-1 py-lg-3" data-bs-theme="dark">
+        <div class="navbar-stuck-hide pt-1"></div>
+        <div class="row flex-nowrap align-items-center g-0">
+            <div class="col col-lg-3 d-flex align-items-center">
+
+                <!-- Mobile offcanvas menu toggler (Hamburger) -->
+                <button type="button" class="navbar-toggler me-4 me-lg-0" data-bs-toggle="offcanvas"
+                    data-bs-target="#navbarNav" aria-controls="navbarNav" aria-label="Toggle navigation">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+
+                <!-- Navbar brand (Logo) -->
+                <a href="{{ route('second', ['home', 'electronics'])}}" class="navbar-brand me-0">
+                    <span class="d-none d-sm-flex flex-shrink-0 text-primary me-2">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36">
+                            <path
+                                d="M36 18.01c0 8.097-5.355 14.949-12.705 17.2a18.12 18.12 0 0 1-5.315.79C9.622 36 2.608 30.313.573 22.611.257 21.407.059 20.162 0 18.879v-1.758c.02-.395.059-.79.099-1.185.099-.908.277-1.817.514-2.686C2.687 5.628 9.682 0 18 0c5.572 0 10.551 2.528 13.871 6.517 1.502 1.797 2.648 3.91 3.359 6.201.494 1.659.771 3.436.771 5.292z"
+                                fill="currentColor" />
+                            <g fill="#fff">
+                                <path
+                                    d="M17.466 21.624c-.514 0-.988-.316-1.146-.829-.198-.632.138-1.303.771-1.501l7.666-2.469-1.205-8.254-13.317 4.621a1.19 1.19 0 0 1-1.521-.75 1.19 1.19 0 0 1 .751-1.521l13.89-4.818c.553-.197 1.166-.138 1.64.158a1.82 1.82 0 0 1 .85 1.284l1.344 9.183c.138.987-.494 1.994-1.482 2.33l-7.864 2.528-.375.04zm7.31.138c-.178-.632-.85-1.007-1.482-.81l-5.177 1.58c-2.331.79-3.28.02-3.418-.099l-6.56-8.412a4.25 4.25 0 0 0-4.406-1.758l-3.122.987c-.237.889-.415 1.777-.514 2.686l4.228-1.363a1.84 1.84 0 0 1 1.857.81l6.659 8.551c.751.948 2.015 1.323 3.359 1.323.909 0 1.857-.178 2.687-.474l5.078-1.54c.632-.178 1.008-.829.81-1.481z" />
+                                <use href="#czlogo" />
+                                <use href="#czlogo" x="8.516" y="-2.172" />
+                            </g>
+                            <defs>
+                                <path id="czlogo"
+                                    d="M18.689 28.654a1.94 1.94 0 0 1-1.936 1.935 1.94 1.94 0 0 1-1.936-1.935 1.94 1.94 0 0 1 1.936-1.935 1.94 1.94 0 0 1 1.936 1.935z" />
+                            </defs>
+                        </svg>
+                    </span>
+                    Cartzilla
+                </a>
+            </div>
+            <div class="col col-lg-9 d-flex align-items-center justify-content-end">
+
+                <!-- Search visible on screens > 991px wide (lg breakpoint) -->
+                <div class="position-relative flex-fill d-none d-lg-block pe-4 pe-xl-5">
+                    <i class="ci-search position-absolute top-50 translate-middle-y d-flex fs-lg text-white ms-3"></i>
+                    <input type="search" class="form-control form-control-lg form-icon-start border-white rounded-pill"
+                        placeholder="Search the products">
+                </div>
+
+                <!-- Sale link visible on screens > 1200px wide (xl breakpoint) -->
+                <a class="d-none d-xl-flex align-items-center text-decoration-none animate-shake navbar-stuck-hide me-3 me-xl-4 me-xxl-5"
+                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">
+                    <div
+                        class="btn btn-icon btn-lg fs-lg text-primary bg-body-secondary bg-opacity-75 pe-none rounded-circle">
+                        <i class="ci-percent animate-target"></i>
+                    </div>
+                    <div class="ps-2 text-nowrap">
+                        <div class="fs-xs text-body">Only this month</div>
+                        <div class="fw-medium text-white">Super Sale 20%</div>
+                    </div>
+                </a>
+
+                <!-- Button group -->
+                <div class="d-flex align-items-center">
+
+                    <!-- Navbar stuck nav toggler -->
+                    <button type="button" class="navbar-toggler d-none navbar-stuck-show me-3"
+                        data-bs-toggle="collapse" data-bs-target="#stuckNav" aria-controls="stuckNav"
+                        aria-expanded="false" aria-label="Toggle navigation in navbar stuck state">
+                        <span class="navbar-toggler-icon"></span>
+                    </button>
+
+                    <!-- Theme switcher (light/dark/auto) -->
+                    <div class="dropdown">
+                        <button type="button"
+                            class="theme-switcher btn btn-icon btn-lg btn-outline-secondary fs-lg border-0 rounded-circle animate-scale"
+                            data-bs-toggle="dropdown" aria-expanded="false" aria-label="Toggle theme (light)">
+                            <span class="theme-icon-active d-flex animate-target">
+                                <i class="ci-sun"></i>
+                            </span>
+                        </button>
+                        <ul class="dropdown-menu" style="--cz-dropdown-min-width: 9rem">
+                            <li>
+                                <button type="button" class="dropdown-item active" data-bs-theme-value="light"
+                                    aria-pressed="true">
+                                    <span class="theme-icon d-flex fs-base me-2">
+                                        <i class="ci-sun"></i>
+                                    </span>
+                                    <span class="theme-label">Light</span>
+                                    <i class="item-active-indicator ci-check ms-auto"></i>
+                                </button>
+                            </li>
+                            <li>
+                                <button type="button" class="dropdown-item" data-bs-theme-value="dark"
+                                    aria-pressed="false">
+                                    <span class="theme-icon d-flex fs-base me-2">
+                                        <i class="ci-moon"></i>
+                                    </span>
+                                    <span class="theme-label">Dark</span>
+                                    <i class="item-active-indicator ci-check ms-auto"></i>
+                                </button>
+                            </li>
+                            <li>
+                                <button type="button" class="dropdown-item" data-bs-theme-value="auto"
+                                    aria-pressed="false">
+                                    <span class="theme-icon d-flex fs-base me-2">
+                                        <i class="ci-auto"></i>
+                                    </span>
+                                    <span class="theme-label">Auto</span>
+                                    <i class="item-active-indicator ci-check ms-auto"></i>
+                                </button>
+                            </li>
+                        </ul>
+                    </div>
+
+                    <!-- Search toggle button visible on screens < 992px wide (lg breakpoint) -->
+                    <button type="button"
+                        class="btn btn-icon btn-lg fs-xl btn-outline-secondary border-0 rounded-circle animate-shake d-lg-none"
+                        data-bs-toggle="collapse" data-bs-target="#searchBar" aria-controls="searchBar"
+                        aria-expanded="false" aria-label="Toggle search bar">
+                        <i class="ci-search animate-target"></i>
+                    </button>
+
+                    <!-- Account button logged in state visible on screens > 768px wide (md breakpoint) -->
+                    <div class="position-relative" id="accountBtn">
+                        <a class="btn btn-icon btn-lg btn-secondary animate-scale fs-5 fw-normal position-relative rounded-circle ms-2 d-none d-md-inline-flex"
+                            href="{{ route('second', ['account', 'orders'])}}" data-bs-toggle="tooltip" data-bs-placement="bottom"
+                            data-bs-custom-class="tooltip-sm text-nowrap" data-bs-container="#accountBtn"
+                            title="Susan Gardner">
+                            <span class="animate-target">S</span>
+                        </a>
+                    </div>
+
+                    <!-- Cart button -->
+                    <button type="button"
+                        class="btn btn-icon btn-lg btn-secondary position-relative rounded-circle ms-2"
+                        data-bs-toggle="offcanvas" data-bs-target="#shoppingCart" aria-controls="shoppingCart"
+                        aria-label="Shopping cart">
+                        <span
+                            class="position-absolute top-0 start-100 mt-n1 ms-n3 badge text-bg-success border border-3 border-dark rounded-pill"
+                            style="--cz-badge-padding-y: .25em; --cz-badge-padding-x: .42em">3</span>
+                        <span
+                            class="position-absolute top-0 start-0 d-flex align-items-center justify-content-center w-100 h-100 rounded-circle animate-slide-end fs-lg">
+                            <i class="ci-shopping-cart animate-target ms-n1"></i>
+                        </span>
+                    </button>
+                </div>
+            </div>
+        </div>
+        <div class="navbar-stuck-hide pb-1"></div>
+    </div>
+
+    <!-- Search visible on screens < 992px wide (lg breakpoint). It is hidden inside collapse by default -->
+    <div class="collapse position-absolute top-100 z-2 w-100 bg-dark d-lg-none" id="searchBar">
+        <div class="container position-relative my-3" data-bs-theme="dark">
+            <i class="ci-search position-absolute top-50 translate-middle-y d-flex fs-lg text-white ms-3"></i>
+            <input type="search" class="form-control form-icon-start border-white rounded-pill"
+                placeholder="Search the products" data-autofocus="collapse">
+        </div>
+    </div>
+
+    <!-- Main navigation that turns into offcanvas on screens < 992px wide (lg breakpoint) -->
+    <div class="collapse navbar-stuck-hide" id="stuckNav">
+        <nav class="offcanvas offcanvas-start" id="navbarNav" tabindex="-1" aria-labelledby="navbarNavLabel">
+            <div class="offcanvas-header py-3">
+                <h5 class="offcanvas-title" id="navbarNavLabel">Browse Cartzilla</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+            </div>
+            <div class="offcanvas-body py-3 py-lg-0">
+                <div class="container px-0 px-lg-3">
+                    <div class="row">
+
+                        <!-- Categories mega menu -->
+                        <div class="col-lg-3">
+                            <div class="navbar-nav">
+                                <div class="dropdown w-100">
+
+                                    <!-- Buttton visible on screens > 991px wide (lg breakpoint) -->
+                                    <div class="cursor-pointer d-none d-lg-block" data-bs-toggle="dropdown"
+                                        data-bs-trigger="hover" data-bs-theme="dark">
+                                        <a class="position-absolute top-0 start-0 w-100 h-100"
+                                            href="{{ route('second', ['shop', 'categories-electronics'])}}">
+                                            <span class="visually-hidden">Categories</span>
+                                        </a>
+                                        <button type="button"
+                                            class="btn btn-lg btn-secondary dropdown-toggle w-100 rounded-bottom-0 justify-content-start pe-none">
+                                            <i class="ci-grid fs-lg"></i>
+                                            <span class="ms-2 me-auto">Categories</span>
+                                        </button>
+                                    </div>
+
+                                    <!-- Buttton visible on screens < 992px wide (lg breakpoint) -->
+                                    <button type="button"
+                                        class="btn btn-lg btn-secondary dropdown-toggle w-100 justify-content-start d-lg-none mb-2"
+                                        data-bs-toggle="dropdown" data-bs-auto-close="outside">
+                                        <i class="ci-grid fs-lg"></i>
+                                        <span class="ms-2 me-auto">Categories</span>
+                                    </button>
+
+                                    <!-- Mega menu -->
+                                    <ul class="dropdown-menu w-100 rounded-top-0 rounded-bottom-4 py-1 p-lg-1"
+                                        style="--cz-dropdown-spacer: 0; --cz-dropdown-item-padding-y: .625rem; --cz-dropdown-item-spacer: 0">
+                                        <li class="d-lg-none pt-2">
+                                            <a class="dropdown-item fw-medium"
+                                                href="{{ route('second', ['shop', 'categories-electronics'])}}">
+                                                <i class="ci-grid fs-xl opacity-60 pe-1 me-2"></i>
+                                                All Categories
+                                                <i class="ci-chevron-right fs-base ms-auto me-n1"></i>
+                                            </a>
+                                        </li>
+                                        <li class="dropend position-static">
+                                            <div class="position-relative rounded pt-2 pb-1 px-lg-2"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover">
+                                                <a class="dropdown-item fw-medium stretched-link d-none d-lg-flex"
+                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">
+                                                    <i class="ci-computer fs-xl opacity-60 pe-1 me-2"></i>
+                                                    <span class="text-truncate">Computers &amp; Accessories</span>
+                                                    <i class="ci-chevron-right fs-base ms-auto me-n1"></i>
+                                                </a>
+                                                <div
+                                                    class="dropdown-item fw-medium text-wrap stretched-link d-lg-none">
+                                                    <i class="ci-computer fs-xl opacity-60 pe-1 me-2"></i>
+                                                    Computers &amp; Accessories
+                                                    <i class="ci-chevron-down fs-base ms-auto me-n1"></i>
+                                                </div>
+                                            </div>
+                                            <div class="dropdown-menu rounded-4 p-4"
+                                                style="top: 1rem; height: calc(100% - .1875rem); --cz-dropdown-spacer: .3125rem; animation: none;">
+                                                <div class="d-flex flex-column flex-lg-row h-100 gap-4">
+                                                    <div style="min-width: 194px">
+                                                        <div class="d-flex w-100">
+                                                            <a class="animate-underline animate-target d-inline h6 text-dark-emphasis text-decoration-none text-truncate"
+                                                                href="{{ route('second', ['shop', 'catalog-electronics']) }}">Computers</a>
+                                                        </div>
+                                                        <ul class="nav flex-column gap-2 mt-n2">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Laptops &amp;
+                                                                    Tablets</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Desktop
+                                                                    Computers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">External
+                                                                    Components</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Interal
+                                                                    Components</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Networking
+                                                                    Products (NAS)</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Single Board
+                                                                    Computers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Desktop
+                                                                    Barebones</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div style="min-width: 194px">
+                                                        <div class="d-flex w-100">
+                                                            <a class="animate-underline animate-target d-inline h6 text-dark-emphasis text-decoration-none text-truncate"
+                                                                href="{{ route('second', ['shop', 'catalog-electronics']) }}">Accessories</a>
+                                                        </div>
+                                                        <ul class="nav flex-column gap-2 mt-n2">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Monitors</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Bags, Cases
+                                                                    &amp; Sleeves</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Batteries</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Charges &amp;
+                                                                    Adapters</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Cooling
+                                                                    Pads</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Mounts</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Replacement
+                                                                    Screens</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Security
+                                                                    Locks</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Stands</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="d-none d-lg-block">
+                                                        <div class="d-none d-xl-block" style="width: 284px"></div>
+                                                        <div class="d-xl-none" style="width: 240px"></div>
+                                                        <div
+                                                            class="position-relative d-flex flex-column justify-content-center h-100 bg-body-secondary rounded-5 py-4 px-3">
+                                                            <div class="text-center px-2">
+                                                                <span
+                                                                    class="badge bg-danger bg-opacity-10 text-danger fs-sm rounded-pill mb-2">Save
+                                                                    up to $400</span>
+                                                                <div class="fs-sm text-light-emphasis mb-2">Starts from
+                                                                    <del>$1,599.00</del> $1,399.00</div>
+                                                                <div class="h2 mb-4">Surface Laptop Studio</div>
+                                                            </div>
+                                                            <img src="/img/mega-menu/electronics/01.png"
+                                                                width="252" alt="Surface Laptop Studio">
+                                                            <div class="text-center mt-4">
+                                                                <a class="btn btn-sm btn-primary stretched-link"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Shop now</a>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </li>
+                                        <li class="dropend position-static">
+                                            <div class="position-relative rounded pb-1 px-lg-2" tabindex="0"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover">
+                                                <a class="dropdown-item fw-medium stretched-link d-none d-lg-flex"
+                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">
+                                                    <i class="ci-smartphone-2 fs-xl opacity-60 pe-1 me-2"></i>
+                                                    <span class="text-truncate">Smartphones &amp; Tablets</span>
+                                                    <i class="ci-chevron-right fs-base ms-auto me-n1"></i>
+                                                </a>
+                                                <div class="dropdown-item fw-medium stretched-link d-lg-none">
+                                                    <i class="ci-smartphone-2 fs-xl opacity-60 pe-1 me-2"></i>
+                                                    Smartphones &amp; Tablets
+                                                    <i class="ci-chevron-down fs-base ms-auto me-n1"></i>
+                                                </div>
+                                            </div>
+                                            <div class="dropdown-menu rounded-4 p-4"
+                                                style="top: 1rem; height: calc(100% - .1875rem); --cz-dropdown-spacer: .3125rem; animation: none;">
+                                                <div class="d-flex flex-column flex-lg-row h-100 gap-4">
+                                                    <div style="min-width: 194px">
+                                                        <div class="d-flex w-100">
+                                                            <a class="animate-underline animate-target d-inline h6 text-dark-emphasis text-decoration-none text-truncate"
+                                                                href="{{ route('second', ['shop', 'catalog-electronics']) }}">Smartphones</a>
+                                                        </div>
+                                                        <ul class="nav flex-column gap-2 mt-n2">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Apple
+                                                                    iPhone</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Google
+                                                                    Pixel</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Android
+                                                                    Smartphones</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Phablets</a>
+                                                            </li>
+                                                        </ul>
+                                                        <div class="d-flex w-100 pt-4">
+                                                            <a class="animate-underline animate-target d-inline h6 text-dark-emphasis text-decoration-none text-truncate"
+                                                                href="{{ route('second', ['shop', 'catalog-electronics']) }}">Tablets</a>
+                                                        </div>
+                                                        <ul class="nav flex-column gap-2 mt-n2">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Apple iPad</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Android
+                                                                    Tablets</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Tablets with
+                                                                    Keyboard</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div style="min-width: 194px">
+                                                        <div class="d-flex w-100">
+                                                            <a class="animate-underline animate-target d-inline h6 text-dark-emphasis text-decoration-none text-truncate"
+                                                                href="{{ route('second', ['shop', 'catalog-electronics']) }}">Accessories</a>
+                                                        </div>
+                                                        <ul class="nav flex-column gap-2 mt-n2">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Accessory
+                                                                    Kits</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Batteries
+                                                                    &amp; Battery Packs</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Bags &amp;
+                                                                    Cases</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Cables</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Car
+                                                                    Accessories</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Charges &amp;
+                                                                    Power Adapters</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">FM
+                                                                    Transmitters</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Lens
+                                                                    Attachments</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Mounts &amp;
+                                                                    Standsv</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Repair
+                                                                    Kits</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Replacement
+                                                                    Parts</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Styluses</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="d-none d-lg-block">
+                                                        <div class="d-none d-xl-block" style="width: 284px"></div>
+                                                        <div class="d-xl-none" style="width: 240px"></div>
+                                                        <div
+                                                            class="position-relative d-flex flex-column justify-content-center h-100 bg-body-secondary rounded-5 py-4 px-3">
+                                                            <div class="text-center px-2">
+                                                                <i class="ci-apple fs-1 text-dark-emphasis mb-2"></i>
+                                                                <div class="fs-sm text-light-emphasis mb-2">Deal of the
+                                                                    week</div>
+                                                                <div class="h2 mb-4">iPad Pro M1</div>
+                                                            </div>
+                                                            <img src="/img/mega-menu/electronics/02.png"
+                                                                width="252" alt="iPad Pro">
+                                                            <div class="text-center mt-4">
+                                                                <a class="btn btn-sm btn-primary stretched-link"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Shop now</a>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </li>
+                                        <li class="dropend position-static">
+                                            <div class="position-relative rounded pb-1 px-lg-2" tabindex="0"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover">
+                                                <a class="dropdown-item fw-medium stretched-link d-none d-lg-flex"
+                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">
+                                                    <i class="ci-monitor-2 fs-xl opacity-60 pe-1 me-2"></i>
+                                                    <span class="text-truncate">TV, Video &amp; Audio</span>
+                                                    <i class="ci-chevron-right fs-base ms-auto me-n1"></i>
+                                                </a>
+                                                <div class="dropdown-item fw-medium stretched-link d-lg-none">
+                                                    <i class="ci-monitor-2 fs-xl opacity-60 pe-1 me-2"></i>
+                                                    TV, Video &amp; Audio
+                                                    <i class="ci-chevron-down fs-base ms-auto me-n1"></i>
+                                                </div>
+                                            </div>
+                                            <div class="dropdown-menu rounded-4 p-4"
+                                                style="top: 1rem; height: calc(100% - .1875rem); --cz-dropdown-spacer: .3125rem; animation: none;">
+                                                <div class="d-flex flex-column flex-lg-row h-100 gap-lg-4">
+                                                    <div style="min-width: 194px">
+                                                        <div class="d-flex w-100">
+                                                            <a class="animate-underline animate-target d-inline h6 text-dark-emphasis text-decoration-none text-truncate"
+                                                                href="{{ route('second', ['shop', 'catalog-electronics']) }}">TV, Video &amp;
+                                                                Audio</a>
+                                                        </div>
+                                                        <ul class="nav flex-column gap-2 mt-n2">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">TV Stes</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Home Theater
+                                                                    Systems</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">DVD Players
+                                                                    &amp; Recorders</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Blue-ray
+                                                                    Players &amp; Recorders</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">HD DVD Players
+                                                                    &amp; Recorders</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">DVD-VCR
+                                                                    Combos</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">DTV
+                                                                    Converters</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">AV
+                                                                    Receivers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">AV
+                                                                    Amplifiers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Projectors</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Projection
+                                                                    Screens</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Satelite
+                                                                    Television</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">TV-DTD
+                                                                    Combos</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Sound
+                                                                    Systems</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div style="min-width: 194px">
+                                                        <ul class="nav flex-column gap-2 mt-2 mt-lg-0">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Home Cinema
+                                                                    Systems</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Streaming
+                                                                    Media Players</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">VCRs</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Video
+                                                                    Glasses</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Lens
+                                                                    Attachments</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Subwoofers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Sound
+                                                                    Boosters</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="d-none d-lg-block">
+                                                        <div class="d-none d-xl-block" style="width: 284px"></div>
+                                                        <div class="d-xl-none" style="width: 240px"></div>
+                                                        <div
+                                                            class="position-relative d-flex flex-column justify-content-center h-100 bg-body-secondary rounded-5 py-4 px-3">
+                                                            <div class="text-center px-2">
+                                                                <div class="fs-sm text-light-emphasis mb-2">Best deal!
+                                                                    Save up to <span class="fw-semibold">$500</span>
+                                                                </div>
+                                                                <div class="h2 mb-4">LG OLED 4K Smart TV</div>
+                                                            </div>
+                                                            <img src="/img/mega-menu/electronics/03.png"
+                                                                width="252" alt="Smart TV">
+                                                            <div class="text-center mt-4">
+                                                                <a class="btn btn-sm btn-primary stretched-link"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Shop now</a>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </li>
+                                        <li class="dropend position-static">
+                                            <div class="position-relative rounded pb-1 px-lg-2" tabindex="0"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover">
+                                                <a class="dropdown-item fw-medium stretched-link d-none d-lg-flex"
+                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">
+                                                    <i class="ci-speaker-2 fs-xl opacity-60 pe-1 me-2"></i>
+                                                    <span class="text-truncate">Speakers &amp; Home Music</span>
+                                                    <i class="ci-chevron-right fs-base ms-auto me-n1"></i>
+                                                </a>
+                                                <div class="dropdown-item fw-medium stretched-link d-lg-none">
+                                                    <i class="ci-speaker-2 fs-xl opacity-60 pe-1 me-2"></i>
+                                                    Speakers &amp; Home Music
+                                                    <i class="ci-chevron-down fs-base ms-auto me-n1"></i>
+                                                </div>
+                                            </div>
+                                            <div class="dropdown-menu rounded-4 p-4"
+                                                style="top: 1rem; height: calc(100% - .1875rem); --cz-dropdown-spacer: .3125rem; animation: none;">
+                                                <div class="d-flex flex-column flex-lg-row h-100 gap-4">
+                                                    <div style="min-width: 194px">
+                                                        <div class="d-flex w-100">
+                                                            <a class="animate-underline animate-target d-inline h6 text-dark-emphasis text-decoration-none text-truncate"
+                                                                href="{{ route('second', ['shop', 'catalog-electronics']) }}">Speakers</a>
+                                                        </div>
+                                                        <ul class="nav flex-column gap-2 mt-n2">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Smart
+                                                                    Speakers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Bluetooth
+                                                                    Speakers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Bookshelf
+                                                                    Speakers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Ceiling &amp;
+                                                                    In-Wall Speakers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Center-Channel
+                                                                    Speakers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Floorstanding
+                                                                    Speakers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Outdoor
+                                                                    Speakers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Satellite
+                                                                    Speakers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Sound Bars</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Surround Sound
+                                                                    Systems</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div style="min-width: 194px">
+                                                        <div class="d-flex w-100">
+                                                            <a class="animate-underline animate-target d-inline h6 text-dark-emphasis text-decoration-none text-truncate"
+                                                                href="{{ route('second', ['shop', 'catalog-electronics']) }}">Home Audio</a>
+                                                        </div>
+                                                        <ul class="nav flex-column gap-2 mt-n2">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Home
+                                                                    Theater</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Wireless &amp;
+                                                                    Streaming Audio</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Stereo System
+                                                                    Components</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Compact Radios
+                                                                    &amp; Stereos</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Home Audio
+                                                                    Accessories</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Subwoofers</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="d-none d-lg-block">
+                                                        <div class="d-none d-xl-block" style="width: 284px"></div>
+                                                        <div class="d-xl-none" style="width: 240px"></div>
+                                                        <div
+                                                            class="position-relative d-flex flex-column justify-content-center h-100 bg-body-secondary rounded-5 py-4 px-3">
+                                                            <div class="text-center px-2">
+                                                                <i class="ci-google fs-2 text-dark-emphasis mb-3"></i>
+                                                                <div class="fs-sm text-light-emphasis mb-2">Deal of the
+                                                                    week</div>
+                                                                <div class="h2 mb-4">Nest Audio</div>
+                                                            </div>
+                                                            <img src="/img/mega-menu/electronics/04.png"
+                                                                width="252" alt="Nest Audio">
+                                                            <div class="text-center mt-4">
+                                                                <a class="btn btn-sm btn-primary stretched-link"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Shop now</a>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </li>
+                                        <li class="dropend position-static">
+                                            <div class="position-relative rounded pb-1 px-lg-2" tabindex="0"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover">
+                                                <a class="dropdown-item fw-medium stretched-link d-none d-lg-flex"
+                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">
+                                                    <i class="ci-camera-2 fs-xl opacity-60 pe-1 me-2"></i>
+                                                    <span class="text-truncate">Cameras, Photo &amp; Video</span>
+                                                    <i class="ci-chevron-right fs-base ms-auto me-n1"></i>
+                                                </a>
+                                                <div class="dropdown-item fw-medium stretched-link d-lg-none">
+                                                    <i class="ci-camera-2 fs-xl opacity-60 pe-1 me-2"></i>
+                                                    Cameras, Photo &amp; Video
+                                                    <i class="ci-chevron-down fs-base ms-auto me-n1"></i>
+                                                </div>
+                                            </div>
+                                            <div class="dropdown-menu rounded-4 p-4"
+                                                style="top: 1rem; height: calc(100% - .1875rem); --cz-dropdown-spacer: .3125rem; animation: none;">
+                                                <div class="d-flex flex-column flex-lg-row h-100 gap-4">
+                                                    <div style="min-width: 194px">
+                                                        <div class="d-flex w-100">
+                                                            <a class="animate-underline animate-target d-inline h6 text-dark-emphasis text-decoration-none text-truncate"
+                                                                href="{{ route('second', ['shop', 'catalog-electronics']) }}">Cameras &amp;
+                                                                Lenses</a>
+                                                        </div>
+                                                        <ul class="nav flex-column gap-2 mt-n2">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Point &amp;
+                                                                    Shoot Cameras</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">DSLR
+                                                                    Cameras</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Mirrorless
+                                                                    Cameras</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Body Mounted
+                                                                    Cameras</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Camcorders</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Camcorder
+                                                                    Lenses</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Camera
+                                                                    Lenses</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Macro &amp;
+                                                                    Ringlight Flashes</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Shoe Mount
+                                                                    Flashes</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Tripods &amp;
+                                                                    Monopods</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Video
+                                                                    Studio</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div style="min-width: 194px">
+                                                        <div class="d-flex w-100">
+                                                            <a class="animate-underline animate-target d-inline h6 text-dark-emphasis text-decoration-none text-truncate"
+                                                                href="{{ route('second', ['shop', 'catalog-electronics']) }}">Accessories</a>
+                                                        </div>
+                                                        <ul class="nav flex-column gap-2 mt-n2">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Bags &amp;
+                                                                    Cases</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Binoculars
+                                                                    &amp; Scopes</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Batteries
+                                                                    &amp; Chargers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Cables &amp;
+                                                                    Cords</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Camcorder
+                                                                    Accessories</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Cleaning
+                                                                    Equipment</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Protector
+                                                                    Foils</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Filters &amp;
+                                                                    Accessories</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Remote
+                                                                    Controls</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Rain
+                                                                    Covers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Viewfinders</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="d-none d-lg-block">
+                                                        <div class="d-none d-xl-block" style="width: 284px"></div>
+                                                        <div class="d-xl-none" style="width: 240px"></div>
+                                                        <div
+                                                            class="position-relative d-flex flex-column justify-content-center h-100 bg-body-secondary rounded-5 py-4 px-3">
+                                                            <div class="text-center px-2">
+                                                                <span
+                                                                    class="badge bg-danger bg-opacity-10 text-danger fs-sm rounded-pill mb-2">Save
+                                                                    up to $300</span>
+                                                                <div class="fs-sm text-light-emphasis mb-2">Starts from
+                                                                    <del>$1,100.00</del> 899.00</div>
+                                                                <div class="h2 mb-4">Canon Digital Cameras</div>
+                                                            </div>
+                                                            <img src="/img/mega-menu/electronics/05.png"
+                                                                width="252" alt="Canon Camera">
+                                                            <div class="text-center mt-4">
+                                                                <a class="btn btn-sm btn-primary stretched-link"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Shop now</a>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </li>
+                                        <li class="dropend position-static">
+                                            <div class="position-relative rounded pb-1 px-lg-2" tabindex="0"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover">
+                                                <a class="dropdown-item fw-medium stretched-link d-none d-lg-flex"
+                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">
+                                                    <i class="ci-printer-2 fs-xl opacity-60 pe-1 me-2"></i>
+                                                    <span class="text-truncate">Printers &amp; Ink</span>
+                                                    <i class="ci-chevron-right fs-base ms-auto me-n1"></i>
+                                                </a>
+                                                <div class="dropdown-item fw-medium stretched-link d-lg-none">
+                                                    <i class="ci-printer-2 fs-xl opacity-60 pe-1 me-2"></i>
+                                                    Printers &amp; Ink
+                                                    <i class="ci-chevron-down fs-base ms-auto me-n1"></i>
+                                                </div>
+                                            </div>
+                                            <div class="dropdown-menu rounded-4 p-4"
+                                                style="top: 1rem; height: calc(100% - .1875rem); --cz-dropdown-spacer: .3125rem; animation: none;">
+                                                <div class="d-flex flex-column flex-lg-row h-100 gap-4">
+                                                    <div style="min-width: 194px">
+                                                        <div class="d-flex w-100">
+                                                            <a class="animate-underline animate-target d-inline h6 text-dark-emphasis text-decoration-none text-truncate"
+                                                                href="{{ route('second', ['shop', 'catalog-electronics']) }}">By type</a>
+                                                        </div>
+                                                        <ul class="nav flex-column gap-2 mt-n2">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">All-in-One</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Copying</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Faxing</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Photo
+                                                                    Printing</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Printing
+                                                                    Only</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Scanning</a>
+                                                            </li>
+                                                        </ul>
+                                                        <div class="d-flex w-100 pt-4">
+                                                            <a class="animate-underline animate-target d-inline h6 text-dark-emphasis text-decoration-none text-truncate"
+                                                                href="{{ route('second', ['shop', 'catalog-electronics']) }}">Scanners</a>
+                                                        </div>
+                                                        <ul class="nav flex-column gap-2 mt-n2">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Business Card
+                                                                    Scanners</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Document
+                                                                    Scanners</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Flatbed &amp;
+                                                                    Photo Scanners</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Slide &amp;
+                                                                    Negative Scanners</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div style="min-width: 194px">
+                                                        <div class="d-flex w-100">
+                                                            <a class="animate-underline animate-target d-inline h6 text-dark-emphasis text-decoration-none text-truncate"
+                                                                href="{{ route('second', ['shop', 'catalog-electronics']) }}">Printers</a>
+                                                        </div>
+                                                        <ul class="nav flex-column gap-2 mt-n2">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Dot Matrix
+                                                                    Printers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Inkjet
+                                                                    Printers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Label
+                                                                    Printers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Laser
+                                                                    Printers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Photo
+                                                                    Printers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Wide Format
+                                                                    Printers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Plotter
+                                                                    Printers</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="d-none d-lg-block">
+                                                        <div class="d-none d-xl-block" style="width: 284px"></div>
+                                                        <div class="d-xl-none" style="width: 240px"></div>
+                                                        <div
+                                                            class="position-relative d-flex flex-column justify-content-center h-100 bg-body-secondary rounded-5 py-4 px-3">
+                                                            <div class="text-center px-2">
+                                                                <div class="fs-sm text-light-emphasis mb-2">Best deal!
+                                                                    Save up to <span class="fw-semibold">$200</span>
+                                                                </div>
+                                                                <div class="h2 mb-4">Epson Color Printers</div>
+                                                            </div>
+                                                            <img src="/img/mega-menu/electronics/06.png"
+                                                                width="252" alt="Epson Printer">
+                                                            <div class="text-center mt-4">
+                                                                <a class="btn btn-sm btn-primary stretched-link"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Shop now</a>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </li>
+                                        <li class="dropend position-static">
+                                            <div class="position-relative rounded pb-1 px-lg-2" tabindex="0"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover">
+                                                <a class="dropdown-item fw-medium stretched-link d-none d-lg-flex"
+                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">
+                                                    <i class="ci-battery-2 fs-xl opacity-60 pe-1 me-2"></i>
+                                                    <span class="text-truncate">Charging Stations</span>
+                                                    <i class="ci-chevron-right fs-base ms-auto me-n1"></i>
+                                                </a>
+                                                <div class="dropdown-item fw-medium stretched-link d-lg-none">
+                                                    <i class="ci-battery-2 fs-xl opacity-60 pe-1 me-2"></i>
+                                                    Charging Stations
+                                                    <i class="ci-chevron-down fs-base ms-auto me-n1"></i>
+                                                </div>
+                                            </div>
+                                            <div class="dropdown-menu rounded-4 p-4"
+                                                style="top: 1rem; height: calc(100% - .1875rem); --cz-dropdown-spacer: .3125rem; animation: none;">
+                                                <div class="d-flex flex-column flex-lg-row h-100 gap-4">
+                                                    <div style="min-width: 194px">
+                                                        <div class="d-flex w-100">
+                                                            <a class="animate-underline animate-target d-inline h6 text-dark-emphasis text-decoration-none text-truncate"
+                                                                href="{{ route('second', ['shop', 'catalog-electronics']) }}">Charging
+                                                                Stations</a>
+                                                        </div>
+                                                        <ul class="nav flex-column gap-2 mt-n2">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Portable Power
+                                                                    Stations</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Inverter Power
+                                                                    Stations</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Outdoor
+                                                                    Generators</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Gasoline
+                                                                    Generators</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Cell Phone
+                                                                    Chargers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Power
+                                                                    Strips</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Wall
+                                                                    Charges</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="d-none d-lg-block">
+                                                        <div class="d-none d-xl-block" style="width: 284px"></div>
+                                                        <div class="d-xl-none" style="width: 240px"></div>
+                                                        <div
+                                                            class="position-relative d-flex flex-column justify-content-center h-100 bg-body-secondary rounded-5 py-4 px-3">
+                                                            <div class="text-center px-2">
+                                                                <span
+                                                                    class="badge bg-danger bg-opacity-10 text-danger fs-sm rounded-pill mb-2">Huge
+                                                                    sale!</span>
+                                                                <div class="fs-sm text-light-emphasis mb-2">Save up to
+                                                                    <span class="fw-semibold">$350</span></div>
+                                                                <div class="h2 mb-4">Portable Power Stations</div>
+                                                            </div>
+                                                            <img src="/img/mega-menu/electronics/07.png"
+                                                                width="252" alt="Epson Printer">
+                                                            <div class="text-center mt-4">
+                                                                <a class="btn btn-sm btn-primary stretched-link"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Shop now</a>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </li>
+                                        <li class="dropend position-static">
+                                            <div class="position-relative rounded pb-1 px-lg-2" tabindex="0"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover">
+                                                <a class="dropdown-item fw-medium stretched-link d-none d-lg-flex"
+                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">
+                                                    <i class="ci-headphones-2 fs-xl opacity-60 pe-1 me-2"></i>
+                                                    <span class="text-truncate">Headphones</span>
+                                                    <i class="ci-chevron-right fs-base ms-auto me-n1"></i>
+                                                </a>
+                                                <div class="dropdown-item fw-medium stretched-link d-lg-none">
+                                                    <i class="ci-headphones-2 fs-xl opacity-60 pe-1 me-2"></i>
+                                                    Headphones
+                                                    <i class="ci-chevron-down fs-base ms-auto me-n1"></i>
+                                                </div>
+                                            </div>
+                                            <div class="dropdown-menu rounded-4 p-4"
+                                                style="top: 1rem; height: calc(100% - .1875rem); --cz-dropdown-spacer: .3125rem; animation: none;">
+                                                <div class="d-flex flex-column flex-lg-row h-100 gap-4">
+                                                    <div style="min-width: 194px">
+                                                        <div class="d-flex w-100">
+                                                            <a class="animate-underline animate-target d-inline h6 text-dark-emphasis text-decoration-none text-truncate"
+                                                                href="{{ route('second', ['shop', 'catalog-electronics']) }}">Headphones</a>
+                                                        </div>
+                                                        <ul class="nav flex-column gap-2 mt-n2">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Earbud
+                                                                    Headphones</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Over-Ear
+                                                                    Headphones</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">On-Ear
+                                                                    Headphones</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Bluetooth
+                                                                    Headphones</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Sports &amp;
+                                                                    Fitness</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Noise-Cancelling</a>
+                                                            </li>
+                                                        </ul>
+                                                        <div class="d-flex w-100 pt-4">
+                                                            <a class="animate-underline animate-target d-inline h6 text-dark-emphasis text-decoration-none text-truncate"
+                                                                href="{{ route('second', ['shop', 'catalog-electronics']) }}">Accessories</a>
+                                                        </div>
+                                                        <ul class="nav flex-column gap-2 mt-n2">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Cases &amp;
+                                                                    Sleeves</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Cables &amp;
+                                                                    Cords</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Ear Pads</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Repair
+                                                                    Kits</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Cleaning
+                                                                    Equipment</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="d-none d-lg-block">
+                                                        <div class="d-none d-xl-block" style="width: 284px"></div>
+                                                        <div class="d-xl-none" style="width: 240px"></div>
+                                                        <div
+                                                            class="position-relative d-flex flex-column justify-content-center h-100 bg-body-secondary rounded-5 py-4 px-3">
+                                                            <div class="text-center px-2">
+                                                                <span
+                                                                    class="badge bg-danger bg-opacity-10 text-danger fs-sm rounded-pill mb-2">Save
+                                                                    up to $200</span>
+                                                                <div class="fs-sm text-light-emphasis mb-2">Starts from
+                                                                    $119.99</div>
+                                                                <div class="h2 mb-4">Wireless Headphones</div>
+                                                            </div>
+                                                            <img src="/img/mega-menu/electronics/08.png"
+                                                                width="252" alt="Wireless Headphones">
+                                                            <div class="text-center mt-4">
+                                                                <a class="btn btn-sm btn-primary stretched-link"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Shop now</a>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </li>
+                                        <li class="dropend position-static">
+                                            <div class="position-relative rounded pb-1 px-lg-2" tabindex="0"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover">
+                                                <a class="dropdown-item fw-medium stretched-link d-none d-lg-flex"
+                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">
+                                                    <i class="ci-watch-2 fs-xl opacity-60 pe-1 me-2"></i>
+                                                    <span class="text-truncate">Wearable Electronics</span>
+                                                    <i class="ci-chevron-right fs-base ms-auto me-n1"></i>
+                                                </a>
+                                                <div class="dropdown-item fw-medium stretched-link d-lg-none">
+                                                    <i class="ci-watch-2 fs-xl opacity-60 pe-1 me-2"></i>
+                                                    Wearable Electronics
+                                                    <i class="ci-chevron-down fs-base ms-auto me-n1"></i>
+                                                </div>
+                                            </div>
+                                            <div class="dropdown-menu rounded-4 p-4"
+                                                style="top: 1rem; height: calc(100% - .1875rem); --cz-dropdown-spacer: .3125rem; animation: none;">
+                                                <div class="d-flex flex-column flex-lg-row h-100 gap-4">
+                                                    <div style="min-width: 194px">
+                                                        <div class="d-flex w-100">
+                                                            <a class="animate-underline animate-target d-inline h6 text-dark-emphasis text-decoration-none text-truncate"
+                                                                href="{{ route('second', ['shop', 'catalog-electronics']) }}">Wearable
+                                                                Gadgets</a>
+                                                        </div>
+                                                        <ul class="nav flex-column gap-2 mt-n2">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Smartwatches</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Fitness
+                                                                    Trackers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Smart
+                                                                    Glasses</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Rings</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Virtual
+                                                                    Reality</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Clips, Arm
+                                                                    &amp; Wristbands</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Accessories</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="d-none d-lg-block">
+                                                        <div class="d-none d-xl-block" style="width: 284px"></div>
+                                                        <div class="d-xl-none" style="width: 240px"></div>
+                                                        <div
+                                                            class="position-relative d-flex flex-column justify-content-center h-100 bg-body-secondary rounded-5 py-4 px-3">
+                                                            <div class="text-center px-2">
+                                                                <i class="ci-google fs-2 text-dark-emphasis mb-3"></i>
+                                                                <div class="fs-sm text-light-emphasis mb-2">Deal of the
+                                                                    week</div>
+                                                                <div class="h2 mb-4">Pixel Watch</div>
+                                                            </div>
+                                                            <img src="/img/mega-menu/electronics/09.png"
+                                                                width="252" alt="Pixel Watch">
+                                                            <div class="text-center mt-4">
+                                                                <a class="btn btn-sm btn-primary stretched-link"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Shop now</a>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </li>
+                                        <li class="dropend position-static">
+                                            <div class="position-relative rounded pb-1 px-lg-2" tabindex="0"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover">
+                                                <a class="dropdown-item fw-medium stretched-link d-none d-lg-flex"
+                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">
+                                                    <i class="ci-powerbank fs-xl opacity-60 pe-1 me-2"></i>
+                                                    <span class="text-truncate">Powerbanks</span>
+                                                    <i class="ci-chevron-right fs-base ms-auto me-n1"></i>
+                                                </a>
+                                                <div class="dropdown-item fw-medium stretched-link d-lg-none">
+                                                    <i class="ci-powerbank fs-xl opacity-60 pe-1 me-2"></i>
+                                                    Powerbanks
+                                                    <i class="ci-chevron-down fs-base ms-auto me-n1"></i>
+                                                </div>
+                                            </div>
+                                            <div class="dropdown-menu rounded-4 p-4"
+                                                style="top: 1rem; height: calc(100% - .1875rem); --cz-dropdown-spacer: .3125rem; animation: none;">
+                                                <div class="d-flex flex-column flex-lg-row h-100 gap-4">
+                                                    <div style="min-width: 194px">
+                                                        <div class="d-flex w-100">
+                                                            <a class="animate-underline animate-target d-inline h6 text-dark-emphasis text-decoration-none text-truncate"
+                                                                href="{{ route('second', ['shop', 'catalog-electronics']) }}">Powerbanks</a>
+                                                        </div>
+                                                        <ul class="nav flex-column gap-2 mt-n2">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Fast
+                                                                    Charging</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Built In
+                                                                    Cable</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Built In Wall
+                                                                    Plug</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">LED Indicator
+                                                                    Lights</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Pocket
+                                                                    Size</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Wireless
+                                                                    Charging</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Short Circuit
+                                                                    Protection</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Scratch
+                                                                    Resistant</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Flashlight</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Lightweight</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="d-none d-lg-block">
+                                                        <div class="d-none d-xl-block" style="width: 284px"></div>
+                                                        <div class="d-xl-none" style="width: 240px"></div>
+                                                        <div
+                                                            class="position-relative d-flex flex-column justify-content-center h-100 bg-body-secondary rounded-5 py-4 px-3">
+                                                            <div class="text-center px-2">
+                                                                <div class="fs-sm text-light-emphasis mb-2">Save up to
+                                                                    <span class="fw-semibold">$50</span> on our</div>
+                                                                <div class="h2 mb-4">Powerbanks Deals</div>
+                                                            </div>
+                                                            <img src="/img/mega-menu/electronics/10.png"
+                                                                width="252" alt="Powerbank">
+                                                            <div class="text-center mt-4">
+                                                                <a class="btn btn-sm btn-primary stretched-link"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Shop now</a>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </li>
+                                        <li class="dropend position-static">
+                                            <div class="position-relative rounded pb-1 px-lg-2" tabindex="0"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover">
+                                                <a class="dropdown-item fw-medium stretched-link d-none d-lg-flex"
+                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">
+                                                    <i class="ci-hard-drive-2 fs-xl opacity-60 pe-1 me-2"></i>
+                                                    <span class="text-truncate">HDD/SSD Data Storage</span>
+                                                    <i class="ci-chevron-right fs-base ms-auto me-n1"></i>
+                                                </a>
+                                                <div class="dropdown-item fw-medium stretched-link d-lg-none">
+                                                    <i class="ci-hard-drive-2 fs-xl opacity-60 pe-1 me-2"></i>
+                                                    HDD/SSD Data Storage
+                                                    <i class="ci-chevron-down fs-base ms-auto me-n1"></i>
+                                                </div>
+                                            </div>
+                                            <div class="dropdown-menu rounded-4 p-4"
+                                                style="top: 1rem; height: calc(100% - .1875rem); --cz-dropdown-spacer: .3125rem; animation: none;">
+                                                <div class="d-flex flex-column flex-lg-row h-100 gap-4">
+                                                    <div style="min-width: 194px">
+                                                        <div class="d-flex w-100">
+                                                            <a class="animate-underline animate-target d-inline h6 text-dark-emphasis text-decoration-none text-truncate"
+                                                                href="{{ route('second', ['shop', 'catalog-electronics']) }}">Data Storage</a>
+                                                        </div>
+                                                        <ul class="nav flex-column gap-2 mt-n2">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">External Hard
+                                                                    Drives</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">External
+                                                                    SSD</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">External Zip
+                                                                    Drives</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Floppy &amp;
+                                                                    Tape Drives</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Internal Hard
+                                                                    Drives</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Internal
+                                                                    SSD</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Network
+                                                                    Attached Storage</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">USB Flash
+                                                                    Drives</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="d-none d-lg-block">
+                                                        <div class="d-none d-xl-block" style="width: 284px"></div>
+                                                        <div class="d-xl-none" style="width: 240px"></div>
+                                                        <div
+                                                            class="position-relative d-flex flex-column justify-content-center h-100 bg-body-secondary rounded-5 py-4 px-3">
+                                                            <div class="text-center px-2">
+                                                                <span
+                                                                    class="badge bg-danger bg-opacity-10 text-danger fs-sm rounded-pill mb-2">Save
+                                                                    up to $100</span>
+                                                                <div class="fs-sm text-light-emphasis mb-2">Starts
+                                                                    from $89.99</div>
+                                                                <div class="h2 mb-4">Samsung SSD Deals</div>
+                                                            </div>
+                                                            <img src="/img/mega-menu/electronics/11.png"
+                                                                width="252" alt="SSD">
+                                                            <div class="text-center mt-4">
+                                                                <a class="btn btn-sm btn-primary stretched-link"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Shop now</a>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </li>
+                                        <li class="dropend position-static">
+                                            <div class="position-relative rounded pb-2 px-lg-2" tabindex="0"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover">
+                                                <a class="dropdown-item fw-medium stretched-link d-none d-lg-flex"
+                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">
+                                                    <i class="ci-game fs-xl opacity-60 pe-1 me-2"></i>
+                                                    <span class="text-truncate">Video Games</span>
+                                                    <i class="ci-chevron-right fs-base ms-auto me-n1"></i>
+                                                </a>
+                                                <div class="dropdown-item fw-medium stretched-link d-lg-none">
+                                                    <i class="ci-game fs-xl opacity-60 pe-1 me-2"></i>
+                                                    Video Games
+                                                    <i class="ci-chevron-down fs-base ms-auto me-n1"></i>
+                                                </div>
+                                            </div>
+                                            <div class="dropdown-menu rounded-4 p-4"
+                                                style="top: 1rem; height: calc(100% - .1875rem); --cz-dropdown-spacer: .3125rem; animation: none;">
+                                                <div class="d-flex flex-column flex-lg-row h-100 gap-lg-4">
+                                                    <div style="min-width: 194px">
+                                                        <div class="d-flex w-100">
+                                                            <a class="animate-underline animate-target d-inline h6 text-dark-emphasis text-decoration-none text-truncate"
+                                                                href="{{ route('second', ['shop', 'catalog-electronics']) }}">Games &amp;
+                                                                Hardware</a>
+                                                        </div>
+                                                        <ul class="nav flex-column gap-2 mt-n2">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Video
+                                                                    Games</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">PlayStation
+                                                                    5</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">PlayStation
+                                                                    4</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Xbox Series
+                                                                    X</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Xbox Series
+                                                                    S</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Nintendo
+                                                                    Switch</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Gaming PC</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Gaming
+                                                                    Laptops</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Wii U</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Wii</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Nintendo
+                                                                    3DS</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Nintendo
+                                                                    2DS</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Nintendo
+                                                                    DS</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Wii</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div style="min-width: 194px">
+                                                        <ul class="nav flex-column gap-2 mt-2 mt-lg-0">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Mac</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">PlayStation
+                                                                    Vita</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Sony PSP</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Retro
+                                                                    Gaming</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Microconsoles</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Controllers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Accessories</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Digital Games
+                                                                    Screens</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Game Pass</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">PlayStation
+                                                                    Plus</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="d-none d-lg-block">
+                                                        <div class="d-none d-xl-block" style="width: 284px"></div>
+                                                        <div class="d-xl-none" style="width: 240px"></div>
+                                                        <div
+                                                            class="position-relative d-flex flex-column justify-content-center h-100 bg-body-secondary rounded-5 py-4 px-3">
+                                                            <div class="text-center px-2">
+                                                                <span
+                                                                    class="badge bg-danger bg-opacity-10 text-danger fs-sm rounded-pill mb-2">Save
+                                                                    $100</span>
+                                                                <div class="fs-sm text-light-emphasis mb-2">Starts
+                                                                    from <del>$599.00</del> $499.00</div>
+                                                                <div class="h2 mb-4">Xbox Series X</div>
+                                                            </div>
+                                                            <img src="/img/mega-menu/electronics/12.png"
+                                                                width="252" alt="Xbox">
+                                                            <div class="text-center mt-4">
+                                                                <a class="btn btn-sm btn-primary stretched-link"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Shop now</a>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Navbar nav -->
+                        <div class="col-lg-9 d-lg-flex pt-3 pt-lg-0 ps-lg-0">
+                            <ul class="navbar-nav position-relative">
+                                <li class="nav-item dropdown me-lg-n1 me-xl-0">
+                                    <a class="nav-link dropdown-toggle" href="#" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                        aria-expanded="false">Home</a>
+                                    <ul class="dropdown-menu">
+                                        <li class="hover-effect-opacity px-2 mx-n2">
+                                            <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'electronics'])}}">
+                                                <span class="fw-medium">Electronics Store</span>
+                                                <span class="d-block fs-xs text-body-secondary">Megamenu + Hero
+                                                    slider</span>
+                                                <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                                    style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                                    <img class="position-relative z-2 d-none-dark"
+                                                        src="/img/mega-menu/demo-preview/electronics-light.jpg"
+                                                        alt="Electronics Store">
+                                                    <img class="position-relative z-2 d-none d-block-dark"
+                                                        src="/img/mega-menu/demo-preview/electronics-dark.jpg"
+                                                        alt="Electronics Store">
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                        style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                        style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="hover-effect-opacity px-2 mx-n2">
+                                            <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'fashion-v1'])}}">
+                                                <span class="fw-medium">Fashion Store v.1</span>
+                                                <span class="d-block fs-xs text-body-secondary">Hero promo
+                                                    slider</span>
+                                                <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                                    style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                                    <img class="position-relative z-2 d-none-dark"
+                                                        src="/img/mega-menu/demo-preview/fashion-1-light.jpg"
+                                                        alt="Fashion Store v.1">
+                                                    <img class="position-relative z-2 d-none d-block-dark"
+                                                        src="/img/mega-menu/demo-preview/fashion-1-dark.jpg"
+                                                        alt="Fashion Store v.1">
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                        style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                        style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="hover-effect-opacity px-2 mx-n2">
+                                            <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'fashion-v2'])}}">
+                                                <span class="fw-medium">Fashion Store v.2</span>
+                                                <span class="d-block fs-xs text-body-secondary">Hero banner with
+                                                    hotspots</span>
+                                                <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                                    style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                                    <img class="position-relative z-2 d-none-dark"
+                                                        src="/img/mega-menu/demo-preview/fashion-2-light.jpg"
+                                                        alt="Fashion Store v.2">
+                                                    <img class="position-relative z-2 d-none d-block-dark"
+                                                        src="/img/mega-menu/demo-preview/fashion-2-dark.jpg"
+                                                        alt="Fashion Store v.2">
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                        style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                        style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="hover-effect-opacity px-2 mx-n2">
+                                            <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'furniture']) }}">
+                                                <span class="fw-medium">Furniture Store</span>
+                                                <span class="d-block fs-xs text-body-secondary">Fancy product
+                                                    carousel</span>
+                                                <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                                    style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                                    <img class="position-relative z-2 d-none-dark"
+                                                        src="/img/mega-menu/demo-preview/furniture-light.jpg"
+                                                        alt="Furniture Store">
+                                                    <img class="position-relative z-2 d-none d-block-dark"
+                                                        src="/img/mega-menu/demo-preview/furniture-dark.jpg"
+                                                        alt="Furniture Store">
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                        style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                        style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="hover-effect-opacity px-2 mx-n2">
+                                            <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'grocery']) }}">
+                                                <span class="fw-medium">Grocery Store</span>
+                                                <span class="d-block fs-xs text-body-secondary">Hero slider + Category
+                                                    cards</span>
+                                                <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                                    style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                                    <img class="position-relative z-2 d-none-dark"
+                                                        src="/img/mega-menu/demo-preview/grocery-light.jpg"
+                                                        alt="Grocery Store">
+                                                    <img class="position-relative z-2 d-none d-block-dark"
+                                                        src="/img/mega-menu/demo-preview/grocery-dark.jpg"
+                                                        alt="Grocery Store">
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                        style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                        style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="hover-effect-opacity px-2 mx-n2">
+                                            <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'marketplace']) }}">
+                                                <span class="fw-medium">Marketplace</span>
+                                                <span class="d-block fs-xs text-body-secondary">Multi-vendor, digital
+                                                    goods</span>
+                                                <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                                    style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                                    <img class="position-relative z-2 d-none-dark"
+                                                        src="/img/mega-menu/demo-preview/marketplace-light.jpg"
+                                                        alt="Marketplace">
+                                                    <img class="position-relative z-2 d-none d-block-dark"
+                                                        src="/img/mega-menu/demo-preview/marketplace-dark.jpg"
+                                                        alt="Marketplace">
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                        style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                        style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="hover-effect-opacity px-2 mx-n2">
+                                            <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'single-store']) }}">
+                                                <span class="fw-medium">Single Product Store</span>
+                                                <span class="d-block fs-xs text-body-secondary">Single product / mono
+                                                    brand</span>
+                                                <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                                    style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                                    <img class="position-relative z-2 d-none-dark"
+                                                        src="/img/mega-menu/demo-preview/single-store-light.jpg"
+                                                        alt="Single Product Store">
+                                                    <img class="position-relative z-2 d-none d-block-dark"
+                                                        src="/img/mega-menu/demo-preview/single-store-dark.jpg"
+                                                        alt="Single Product Store">
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                        style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                        style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                                </div>
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </li>
+                                <li class="nav-item dropdown position-static me-lg-n1 me-xl-0">
+                                    <a class="nav-link dropdown-toggle" href="#" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                        aria-expanded="false">Shop</a>
+                                    <div class="dropdown-menu rounded-4 p-4">
+                                        <div class="d-flex flex-column flex-lg-row gap-4">
+                                            <div style="min-width: 190px">
+                                                <div class="h6 mb-2">Electronics Store</div>
+                                                <ul class="nav flex-column gap-2 mt-0">
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'categories-electronics'])}}">Categories
+                                                            Page</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'catalog-electronics']) }}">Catalog with Side
+                                                            Filters</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'product-general-electronics']) }}">Product
+                                                            General Info</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'product-details-electronics']) }}">Product
+                                                            Details</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'product-reviews-electronics']) }}">Product
+                                                            Reviews</a>
+                                                    </li>
+                                                </ul>
+                                                <div class="h6 pt-4 mb-2">Fashion Store</div>
+                                                <ul class="nav flex-column gap-2 mt-0">
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'catalog-fashion']) }}">Catalog with Side
+                                                            Filters</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'product-fashion']) }}">Product Page</a>
+                                                    </li>
+                                                </ul>
+                                                <div class="h6 pt-4 mb-2">Furniture Store</div>
+                                                <ul class="nav flex-column gap-2 mt-0">
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'catalog-furniture']) }}">Catalog with Top
+                                                            Filters</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'product-furniture']) }}">Product Page</a>
+                                                    </li>
+                                                </ul>
+                                            </div>
+                                            <div style="min-width: 190px">
+                                                <div class="h6 mb-2">Grocery Store</div>
+                                                <ul class="nav flex-column gap-2 mt-0">
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'catalog-grocery']) }}">Catalog with Side
+                                                            Filters</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'product-grocery']) }}">Product Page</a>
+                                                    </li>
+                                                </ul>
+                                                <div class="h6 pt-4 mb-2">Marketplace</div>
+                                                <ul class="nav flex-column gap-2 mt-0">
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'catalog-marketplace']) }}">Catalog with Top
+                                                            Filters</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'product-marketplace']) }}">Digital Product
+                                                            Page</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'marketplace']) }}">Cart / Checkout</a>
+                                                    </li>
+                                                </ul>
+                                            </div>
+                                            <div style="min-width: 190px">
+                                                <div class="h6 mb-2">Checkout v.1</div>
+                                                <ul class="nav flex-column gap-2 mt-0">
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'v1-cart']) }}">Shopping Cart</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'v1-delivery-1']) }}">Delivery Info (Step
+                                                            1)</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'v1-delivery-2']) }}">Delivery Info (Step
+                                                            2)</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'v1-shipping']) }}">Shipping Address</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'v1-payment']) }}">Payment</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'v1-thankyou']) }}">Thank You Page</a>
+                                                    </li>
+                                                </ul>
+                                                <div class="h6 pt-4 mb-2">Checkout v.2</div>
+                                                <ul class="nav flex-column gap-2 mt-0">
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'v2-cart']) }}">Shopping Cart</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'v2-delivery']) }}">Delivery Info</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'v2-pickup']) }}">Pickup from Store</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'v2-thankyou']) }}">Thank You Page</a>
+                                                    </li>
+                                                </ul>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </li>
+                                <li class="nav-item dropdown me-lg-n1 me-xl-0">
+                                    <a class="nav-link dropdown-toggle active" aria-current="page" href="#"
+                                        role="button" data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                        data-bs-auto-close="outside" aria-expanded="false">Account</a>
+                                    <ul class="dropdown-menu">
+                                        <li class="dropend">
+                                            <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                                aria-expanded="false">Auth Pages</a>
+                                            <ul class="dropdown-menu">
+                                                <li><a class="dropdown-item" href="{{ route('second', ['account', 'signin']) }}">Sign In</a>
+                                                </li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['account', 'signup']) }}">Sign Up</a>
+                                                </li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'password-recovery']) }}">Password Recovery</a>
+                                                </li>
+                                            </ul>
+                                        </li>
+                                        <li class="dropend">
+                                            <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                                aria-expanded="false">Shop User</a>
+                                            <ul class="dropdown-menu">
+                                                <li><a class="dropdown-item" href="{{ route('second', ['account', 'orders']) }}">Orders
+                                                        History</a></li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'wishlist']) }}">Wishlist</a></li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['account', 'payment']) }}">Payment
+                                                        Methods</a></li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['account', 'reviews']) }}">My
+                                                        Reviews</a></li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['account', 'info']) }}">Personal
+                                                        Info</a></li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'addresses']) }}">Addresses</a></li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'notifications']) }}">Notifications</a></li>
+                                            </ul>
+                                        </li>
+                                        <li class="dropend">
+                                            <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                                aria-expanded="false">Marketplace User</a>
+                                            <ul class="dropdown-menu">
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'marketplace-dashboard']) }}">Dashboard</a></li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'marketplace-products']) }}">Products</a></li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'marketplace-sales']) }}">Sales</a></li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'marketplace-payouts']) }}">Payouts</a></li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'marketplace-purchases']) }}">Purchases</a></li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'marketplace-favorites']) }}">Favorites</a></li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'marketplace-settings']) }}">Settings</a></li>
+                                            </ul>
+                                        </li>
+                                    </ul>
+                                </li>
+                                <li class="nav-item dropdown me-lg-n1 me-xl-0">
+                                    <a class="nav-link dropdown-toggle" href="#" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                        data-bs-auto-close="outside" aria-expanded="false">Pages</a>
+                                    <ul class="dropdown-menu">
+                                        <li class="dropend">
+                                            <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                                aria-expanded="false">About</a>
+                                            <ul class="dropdown-menu">
+                                                <li><a class="dropdown-item" href="{{ route('second', ['about', 'v1']) }}">About v.1</a></li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['about', 'v2']) }}">About v.2</a></li>
+                                            </ul>
+                                        </li>
+                                        <li class="dropend">
+                                            <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                                aria-expanded="false">Blog</a>
+                                            <ul class="dropdown-menu">
+                                                <li><a class="dropdown-item" href="{{ route('second', 'blog-grid-v1']) }}">Grid View
+                                                        v.1</a></li>
+                                                <li><a class="dropdown-item" href="{{ route('second', 'blog-grid-v2']) }}">Grid View
+                                                        v.2</a></li>
+                                                <li><a class="dropdown-item" href="{{ route('second', 'blog-list']) }}">List View</a>
+                                                </li>
+                                                <li><a class="dropdown-item" href="{{ route('second', 'blog-single-v1']) }}">Single Post
+                                                        v.1</a></li>
+                                                <li><a class="dropdown-item" href="{{ route('second', 'blog-single-v2']) }}">Single Post
+                                                        v.2</a></li>
+                                            </ul>
+                                        </li>
+                                        <li class="dropend">
+                                            <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                                aria-expanded="false">Contact</a>
+                                            <ul class="dropdown-menu">
+                                                <li><a class="dropdown-item" href="{{ route('second', ['contact', 'v1']) }}">Contact v.1</a>
+                                                </li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['contact', 'v2']) }}">Contact v.2</a>
+                                                </li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['contact', 'v3']) }}">Contact v.3</a>
+                                                </li>
+                                            </ul>
+                                        </li>
+                                        <li class="dropend">
+                                            <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                                aria-expanded="false">Help Center</a>
+                                            <ul class="dropdown-menu">
+                                                <li><a class="dropdown-item" href="{{ route('second', 'help', 'topics-v1']) }}">Help Topics
+                                                        v.1</a></li>
+                                                <li><a class="dropdown-item" href="{{ route('second', 'help', 'topics-v2']) }}">Help Topics
+                                                        v.2</a></li>
+                                                <li><a class="dropdown-item" href="{{ route('second', 'help', 'single-article-v1']) }}">Help
+                                                        Single Article v.1</a></li>
+                                                <li><a class="dropdown-item" href="{{ route('second', 'help', 'single-article-v2']) }}">Help
+                                                        Single Article v.2</a></li>
+                                            </ul>
+                                        </li>
+                                        <li class="dropend">
+                                            <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                                aria-expanded="false">404 Error</a>
+                                            <ul class="dropdown-menu">
+                                                <li><a class="dropdown-item" href="{{ route('second', ['404', 'electronics']) }}">404
+                                                        Electronics</a></li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['404', 'fashion']) }}">404 Fashion</a>
+                                                </li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['404', 'furniture']) }}">404
+                                                        Furniture</a></li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['404', 'grocery']) }}">404 Grocery</a>
+                                                </li>
+                                            </ul>
+                                        </li>
+                                        <li><a class="dropdown-item" href="{{ route('any', 'terms-and-conditions')}}">Terms &amp;
+                                                Conditions</a></li>
+                                    </ul>
+                                </li>
+                                
+                            </ul>
+                            <hr class="d-lg-none my-3">
+                            <ul class="navbar-nav ms-auto">
+                                <li class="nav-item dropdown me-lg-n2 me-xl-n1">
+                                    <a class="nav-link dropdown-toggle fs-sm px-3" href="#!" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                        aria-expanded="false">Eng</a>
+                                    <ul class="dropdown-menu fs-sm"
+                                        style="--cz-dropdown-min-width: 7.5rem; --cz-dropdown-spacer: .25rem">
+                                        <li><a class="dropdown-item" href="#!">Français</a></li>
+                                        <li><a class="dropdown-item" href="#!">Deutsch</a></li>
+                                        <li><a class="dropdown-item" href="#!">Italiano</a></li>
+                                    </ul>
+                                </li>
+                                <li class="nav-item dropdown me-lg-n1">
+                                    <a class="nav-link dropdown-toggle fs-sm px-3" href="#!" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                        aria-expanded="false">USD ($)</a>
+                                    <ul class="dropdown-menu dropdown-menu-end fs-sm"
+                                        style="--cz-dropdown-min-width: 7rem; --cz-dropdown-spacer: .25rem">
+                                        <li><a class="dropdown-item" href="#!">€ EUR</a></li>
+                                        <li><a class="dropdown-item" href="#!">£ UKP</a></li>
+                                        <li><a class="dropdown-item" href="#!">¥ JPY</a></li>
+                                    </ul>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="offcanvas-header border-top py-3 mt-3 d-md-none">
+                <a class="d-flex align-items-center text-decoration-none" href="#accountSidebar"
+                    data-bs-toggle="offcanvas" aria-controls="accountSidebar">
+                    <div class="h5 d-flex justify-content-center align-items-center flex-shrink-0 text-primary bg-primary-subtle lh-1 rounded-circle mb-0"
+                        style="width: 3rem; height: 3rem">S</div>
+                    <div class="ps-3">
+                        <h5 class="h6 mb-1">Susan Gardner</h5>
+                        <div class="d-flex flex-nowrap fs-sm text-body">
+                            <svg class="text-warning flex-shrink-0 me-2" xmlns="http://www.w3.org/2000/svg"
+                                width="16" height="16" fill="currentColor">
+                                <path
+                                    d="M1.333 9.667H7.5V16h-5c-.64 0-1.167-.527-1.167-1.167V9.667zm13.334 0v5.167c0 .64-.527 1.167-1.167 1.167h-5V9.667h6.167zM0 5.833V7.5c0 .64.527 1.167 1.167 1.167h.167H7.5v-1-3H1.167C.527 4.667 0 5.193 0 5.833zm14.833-1.166H8.5v3 1h6.167.167C15.473 8.667 16 8.14 16 7.5V5.833c0-.64-.527-1.167-1.167-1.167z" />
+                                <path
+                                    d="M8 5.363a.5.5 0 0 1-.495-.573C7.752 3.123 9.054-.03 12.219-.03c1.807.001 2.447.977 2.447 1.813 0 1.486-2.069 3.58-6.667 3.58zM12.219.971c-2.388 0-3.295 2.27-3.595 3.377 1.884-.088 3.072-.565 3.756-.971.949-.563 1.287-1.193 1.287-1.595 0-.599-.747-.811-1.447-.811z" />
+                                <path
+                                    d="M8.001 5.363c-4.598 0-6.667-2.094-6.667-3.58 0-.836.641-1.812 2.448-1.812 3.165 0 4.467 3.153 4.713 4.819a.5.5 0 0 1-.495.573zM3.782.971c-.7 0-1.448.213-1.448.812 0 .851 1.489 2.403 5.042 2.566C7.076 3.241 6.169.971 3.782.971z" />
+                            </svg>
+                            100 bonuses available
+                        </div>
+                    </div>
+                </a>
+            </div>
+        </nav>
+    </div>
+</header>
diff --git a/resources/views/layouts/partials/account-sidebar.blade.php b/resources/views/layouts/partials/account-sidebar.blade.php
new file mode 100644
index 0000000..60a12a5
--- /dev/null
+++ b/resources/views/layouts/partials/account-sidebar.blade.php
@@ -0,0 +1,93 @@
+<!-- Sidebar navigation that turns into offcanvas on screens < 992px wide (lg breakpoint) -->
+<aside class="col-lg-3">
+    <div class="offcanvas-lg offcanvas-start pe-lg-0 pe-xl-4" id="accountSidebar">
+
+        <!-- Header -->
+        <div class="offcanvas-header d-lg-block py-3 p-lg-0">
+            <div class="d-flex align-items-center">
+                <div class="h5 d-flex justify-content-center align-items-center flex-shrink-0 text-primary bg-primary-subtle lh-1 rounded-circle mb-0"
+                    style="width: 3rem; height: 3rem">S</div>
+                <div class="min-w-0 ps-3">
+                    <h5 class="h6 mb-1">Susan Gardner</h5>
+                    <div class="nav flex-nowrap text-nowrap min-w-0">
+                        <a class="nav-link animate-underline text-body p-0" href="#bonusesModal" data-bs-toggle="modal">
+                            <svg class="text-warning flex-shrink-0 me-2" xmlns="http://www.w3.org/2000/svg"
+                                width="16" height="16" fill="currentColor">
+                                <path
+                                    d="M1.333 9.667H7.5V16h-5c-.64 0-1.167-.527-1.167-1.167V9.667zm13.334 0v5.167c0 .64-.527 1.167-1.167 1.167h-5V9.667h6.167zM0 5.833V7.5c0 .64.527 1.167 1.167 1.167h.167H7.5v-1-3H1.167C.527 4.667 0 5.193 0 5.833zm14.833-1.166H8.5v3 1h6.167.167C15.473 8.667 16 8.14 16 7.5V5.833c0-.64-.527-1.167-1.167-1.167z" />
+                                <path
+                                    d="M8 5.363a.5.5 0 0 1-.495-.573C7.752 3.123 9.054-.03 12.219-.03c1.807.001 2.447.977 2.447 1.813 0 1.486-2.069 3.58-6.667 3.58zM12.219.971c-2.388 0-3.295 2.27-3.595 3.377 1.884-.088 3.072-.565 3.756-.971.949-.563 1.287-1.193 1.287-1.595 0-.599-.747-.811-1.447-.811z" />
+                                <path
+                                    d="M8.001 5.363c-4.598 0-6.667-2.094-6.667-3.58 0-.836.641-1.812 2.448-1.812 3.165 0 4.467 3.153 4.713 4.819a.5.5 0 0 1-.495.573zM3.782.971c-.7 0-1.448.213-1.448.812 0 .851 1.489 2.403 5.042 2.566C7.076 3.241 6.169.971 3.782.971z" />
+                            </svg>
+                            <span class="animate-target me-1">100 bonuses</span>
+                            <span class="text-body fw-normal text-truncate">available</span>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <button type="button" class="btn-close d-lg-none" data-bs-dismiss="offcanvas"
+                data-bs-target="#accountSidebar" aria-label="Close"></button>
+        </div>
+
+        <!-- Body (Navigation) -->
+        <div class="offcanvas-body d-block pt-2 pt-lg-4 pb-lg-0">
+            <nav class="list-group list-group-borderless">
+                <a class="list-group-item list-group-item-action d-flex align-items-center" href="{{ route('second', ['account', 'orders'])}}">
+                    <i class="ci-shopping-bag fs-base opacity-75 me-2"></i>
+                    Orders
+                    <span class="badge bg-primary rounded-pill ms-auto">1</span>
+                </a>
+                <a class="list-group-item list-group-item-action d-flex align-items-center"
+                    href="{{ route('second', ['account', 'wishlist'])}}">
+                    <i class="ci-heart fs-base opacity-75 me-2"></i>
+                    Wishlist
+                </a>
+                <a class="list-group-item list-group-item-action d-flex align-items-center" href="{{ route('second', ['account', 'payment'])}}">
+                    <i class="ci-credit-card fs-base opacity-75 me-2"></i>
+                    Payment methods
+                </a>
+                <a class="list-group-item list-group-item-action d-flex align-items-center" href="{{ route('second', ['account', 'reviews'])}}">
+                    <i class="ci-star fs-base opacity-75 me-2"></i>
+                    My reviews
+                </a>
+            </nav>
+            <h6 class="pt-4 ps-2 ms-1">Manage account</h6>
+            <nav class="list-group list-group-borderless">
+                <a class="list-group-item list-group-item-action d-flex align-items-center"
+                    href="{{ route('second', ['account', 'info'])}}">
+                    <i class="ci-user fs-base opacity-75 me-2"></i>
+                    Personal info
+                </a>
+                <a class="list-group-item list-group-item-action d-flex align-items-center"
+                    href="{{ route('second', ['account', 'addresses'])}}">
+                    <i class="ci-map-pin fs-base opacity-75 me-2"></i>
+                    Addresses
+                </a>
+                <a class="list-group-item list-group-item-action d-flex align-items-center"
+                    href="{{ route('second', ['account', 'notifications'])}}">
+                    <i class="ci-bell fs-base opacity-75 mt-1 me-2"></i>
+                    Notifications
+                </a>
+            </nav>
+            <h6 class="pt-4 ps-2 ms-1">Customer service</h6>
+            <nav class="list-group list-group-borderless">
+                <a class="list-group-item list-group-item-action d-flex align-items-center" href="{{ route('second', ['help', 'topics-v1']) }}">
+                    <i class="ci-help-circle fs-base opacity-75 me-2"></i>
+                    Help center
+                </a>
+                <a class="list-group-item list-group-item-action d-flex align-items-center"
+                    href="{{ route('any', 'terms-and-conditions')}}">
+                    <i class="ci-info fs-base opacity-75 me-2"></i>
+                    Terms and conditions
+                </a>
+            </nav>
+            <nav class="list-group list-group-borderless pt-3">
+                <a class="list-group-item list-group-item-action d-flex align-items-center" href="{{ route('second', ['account', 'signin'])}}">
+                    <i class="ci-log-out fs-base opacity-75 me-2"></i>
+                    Log out
+                </a>
+            </nav>
+        </div>
+    </div>
+</aside>
diff --git a/resources/views/layouts/partials/back-to-top.blade.php b/resources/views/layouts/partials/back-to-top.blade.php
new file mode 100644
index 0000000..5286da1
--- /dev/null
+++ b/resources/views/layouts/partials/back-to-top.blade.php
@@ -0,0 +1,13 @@
+<!-- Back to top button -->
+<div class="floating-buttons position-fixed top-50 end-0 z-sticky me-3 me-xl-4 pb-4">
+    <a class="btn-scroll-top btn btn-sm bg-body border-0 rounded-pill shadow animate-slide-end" href="#top">
+        Top
+        <i class="ci-arrow-right fs-base ms-1 me-n1 animate-target"></i>
+        <span class="position-absolute top-0 start-0 w-100 h-100 border rounded-pill z-0"></span>
+        <svg class="position-absolute top-0 start-0 w-100 h-100 z-1" viewBox="0 0 62 32" fill="none"
+            xmlns="http://www.w3.org/2000/svg">
+            <rect x=".75" y=".75" width="60.5" height="30.5" rx="15.25" stroke="currentColor" stroke-width="1.5"
+                stroke-miterlimit="10" />
+        </svg>
+    </a>
+</div>
diff --git a/resources/views/layouts/partials/checkout-navbar.blade.php b/resources/views/layouts/partials/checkout-navbar.blade.php
new file mode 100644
index 0000000..82b36f8
--- /dev/null
+++ b/resources/views/layouts/partials/checkout-navbar.blade.php
@@ -0,0 +1,367 @@
+<header class="navbar navbar-expand navbar-sticky sticky-top d-block bg-body z-fixed py-1 py-lg-0 py-xl-1 px-0"
+    data-sticky-element>
+    <div class="container justify-content-start py-2 py-lg-3">
+
+        <!-- Offcanvas menu toggler (Hamburger) -->
+        <button type="button" class="navbar-toggler d-block flex-shrink-0 me-3 me-sm-4" data-bs-toggle="offcanvas"
+            data-bs-target="#navbarNav" aria-controls="navbarNav" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+
+        <!-- Navbar brand (Logo) -->
+        <a class="navbar-brand fs-2 p-0 pe-lg-2 pe-xxl-0 me-0 me-sm-3 me-md-4 me-xxl-5"
+            href="{{ route('second', ['home', 'grocery']) }}">Cartzilla</a>
+
+        <!-- Categories dropdown visible on screens > 991px wide (lg breakpoint) -->
+        <div class="dropdown d-none d-lg-block w-100 me-4" style="max-width: 200px">
+            <button type="button" class="btn btn-lg btn-secondary w-100 border-0 rounded-pill"
+                data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <i class="ci-grid fs-lg me-2 ms-n1"></i>
+                Categories
+                <i class="ci-chevron-down fs-lg me-2 ms-auto me-n1"></i>
+            </button>
+            <div class="dropdown-menu rounded-4 p-4" style="--cz-dropdown-spacer: .75rem; margin-left: -75px">
+                <div class="d-flex gap-4">
+                    <div style="min-width: 170px">
+                        <div class="h6">Bakery &amp; bread</div>
+                        <ul class="nav flex-column gap-2 mt-n2">
+                            <li class="d-flex w-100 pt-1">
+                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Shop all</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Bread</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Pastries</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Bakery cookies</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Cupcakes</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Buns &amp; rolls</a>
+                            </li>
+                        </ul>
+                        <div class="h6 pt-4">Meat products</div>
+                        <ul class="nav flex-column gap-2 mt-n2">
+                            <li class="d-flex w-100 pt-1">
+                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Shop all</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Fresh meat</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Processed meat</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Seafood</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Poultry products</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Prepared meat</a>
+                            </li>
+                        </ul>
+                    </div>
+                    <div style="min-width: 170px">
+                        <div class="h6">Vegetables</div>
+                        <ul class="nav flex-column gap-2 mt-n2">
+                            <li class="d-flex w-100 pt-1">
+                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Shop all</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Leafy greens</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Root vegetables</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Allium vegetables</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Peppers and tomatoes</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Cruciferous</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Seasonal squashes</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Beans, peas &amp; lentils</a>
+                            </li>
+                        </ul>
+                        <div class="h6 pt-4">Sauces and ketchup</div>
+                        <ul class="nav flex-column gap-2 mt-n2">
+                            <li class="d-flex w-100 pt-1">
+                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Shop all</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Tomato-based sauces</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Salad dressing</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Hot sauces</a>
+                            </li>
+                        </ul>
+                    </div>
+                    <div style="min-width: 170px">
+                        <div class="h6">Fresh fruits</div>
+                        <ul class="nav flex-column gap-2 mt-n2">
+                            <li class="d-flex w-100 pt-1">
+                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Shop all</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Citrus fruits</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Berries</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Tropical fruits</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Stone fruits</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Exotic fruits</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Melons</a>
+                            </li>
+                        </ul>
+                        <div class="h6 pt-4">Italian dinner</div>
+                        <ul class="nav flex-column gap-2 mt-n2">
+                            <li class="d-flex w-100 pt-1">
+                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Shop all</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Pasta &amp; sauces</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Italian cheese</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Italian meats</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Desserts &amp; beverages</a>
+                            </li>
+                        </ul>
+                    </div>
+                    <div style="min-width: 170px">
+                        <div class="h6">Beverages</div>
+                        <ul class="nav flex-column gap-2 mt-n2">
+                            <li class="d-flex w-100 pt-1">
+                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Shop all</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Soft drinks</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Juices</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Sports &amp; energy drinks</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Tea and coffee</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Alcoholic beverages</a>
+                            </li>
+                        </ul>
+                        <div class="h6 pt-4">Dairy &amp; eggs</div>
+                        <ul class="nav flex-column gap-2 mt-n2">
+                            <li class="d-flex w-100 pt-1">
+                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Shop all</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Chees</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Milk &amp; yogurt</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Sour cream</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Eggs</a>
+                            </li>
+                            <li class="d-flex w-100 pt-1">
+                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Butter &amp; margarine</a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Search bar visible on screens > 768px wide (md breakpoint) -->
+        <div class="position-relative w-100 d-none d-md-block me-3 me-xl-4">
+            <input type="search" class="form-control form-control-lg rounded-pill" placeholder="Search for products"
+                aria-label="Search">
+            <button type="button"
+                class="btn btn-icon btn-ghost fs-lg btn-secondary text-bo border-0 position-absolute top-0 end-0 rounded-circle mt-1 me-1"
+                aria-label="Search button">
+                <i class="ci-search"></i>
+            </button>
+        </div>
+
+        <!-- Delivery options toggle visible on screens > 1200px wide (xl breakpoint) -->
+        <div class="nav me-4 me-xxl-5 d-none d-xl-block">
+            <a class="nav-link flex-column align-items-start animate-underline p-0" href="#deliveryOptions"
+                data-bs-toggle="offcanvas" aria-controls="deliveryOptions">
+                <div class="h6 fs-sm mb-0">Delivery</div>
+                <div class="d-flex align-items-center fs-sm fw-normal text-body">
+                    <span class="animate-target text-nowrap">Set your address</span>
+                    <i class="ci-chevron-down fs-base ms-1"></i>
+                </div>
+            </a>
+        </div>
+
+        <!-- Button group -->
+        <div class="d-flex align-items-center gap-md-1 gap-lg-2 ms-auto">
+
+            <!-- Theme switcher (light/dark/auto) -->
+            <div class="dropdown">
+                <button type="button"
+                    class="theme-switcher btn btn-icon btn-outline-secondary fs-lg border-0 rounded-circle animate-scale"
+                    data-bs-toggle="dropdown" aria-expanded="false" aria-label="Toggle theme (light)">
+                    <span class="theme-icon-active d-flex animate-target">
+                        <i class="ci-sun"></i>
+                    </span>
+                </button>
+                <ul class="dropdown-menu" style="--cz-dropdown-min-width: 9rem">
+                    <li>
+                        <button type="button" class="dropdown-item active" data-bs-theme-value="light"
+                            aria-pressed="true">
+                            <span class="theme-icon d-flex fs-base me-2">
+                                <i class="ci-sun"></i>
+                            </span>
+                            <span class="theme-label">Light</span>
+                            <i class="item-active-indicator ci-check ms-auto"></i>
+                        </button>
+                    </li>
+                    <li>
+                        <button type="button" class="dropdown-item" data-bs-theme-value="dark"
+                            aria-pressed="false">
+                            <span class="theme-icon d-flex fs-base me-2">
+                                <i class="ci-moon"></i>
+                            </span>
+                            <span class="theme-label">Dark</span>
+                            <i class="item-active-indicator ci-check ms-auto"></i>
+                        </button>
+                    </li>
+                    <li>
+                        <button type="button" class="dropdown-item" data-bs-theme-value="auto"
+                            aria-pressed="false">
+                            <span class="theme-icon d-flex fs-base me-2">
+                                <i class="ci-auto"></i>
+                            </span>
+                            <span class="theme-label">Auto</span>
+                            <i class="item-active-indicator ci-check ms-auto"></i>
+                        </button>
+                    </li>
+                </ul>
+            </div>
+
+            <!-- Search toggle button visible on screens < 768px wide (md breakpoint) -->
+            <button type="button"
+                class="btn btn-icon fs-xl btn-outline-secondary border-0 rounded-circle animate-shake d-md-none"
+                data-bs-toggle="collapse" data-bs-target="#searchBar" aria-controls="searchBar"
+                aria-label="Toggle search bar">
+                <i class="ci-search animate-target"></i>
+            </button>
+
+            <!-- Delivery options button visible on screens < 1200px wide (xl breakpoint) -->
+            <button type="button"
+                class="btn btn-icon fs-lg btn-outline-secondary border-0 rounded-circle animate-scale d-xl-none"
+                data-bs-toggle="offcanvas" data-bs-target="#deliveryOptions" aria-controls="deliveryOptions"
+                aria-label="Toggle delivery options offcanvas">
+                <i class="ci-map-pin animate-target"></i>
+            </button>
+
+            <!-- Account button visible on screens > 768px wide (md breakpoint) -->
+            <a class="btn btn-icon fs-lg btn-outline-secondary border-0 rounded-circle animate-shake d-none d-md-inline-flex"
+                href="{{ route('second', ['account', 'signin']) }}">
+                <i class="ci-user animate-target"></i>
+                <span class="visually-hidden">Account</span>
+            </a>
+
+            <!-- Cart button -->
+            <button type="button"
+                class="btn btn-icon fs-xl btn-outline-secondary position-relative border-0 rounded-circle animate-scale"
+                data-bs-toggle="offcanvas" data-bs-target="#shoppingCart" aria-controls="shoppingCart"
+                aria-label="Shopping cart">
+                <span class="position-absolute top-0 start-100 badge fs-xs text-bg-primary rounded-pill ms-n3 z-2"
+                    style="--cz-badge-padding-y: .25em; --cz-badge-padding-x: .42em">8</span>
+                <i class="ci-shopping-cart animate-target"></i>
+            </button>
+        </div>
+    </div>
+
+    <!-- Search collapse available on screens < 768px wide (md breakpoint) -->
+    <div class="collapse d-md-none" id="searchBar">
+        <div class="container pt-2 pb-3">
+            <div class="position-relative">
+                <i class="ci-search position-absolute top-50 translate-middle-y d-flex fs-lg ms-3"></i>
+                <input type="search" class="form-control form-icon-start rounded-pill"
+                    placeholder="Search for products" data-autofocus="collapse">
+            </div>
+        </div>
+    </div>
+</header>
diff --git a/resources/views/layouts/partials/customizer.blade.php b/resources/views/layouts/partials/customizer.blade.php
new file mode 100644
index 0000000..3a78585
--- /dev/null
+++ b/resources/views/layouts/partials/customizer.blade.php
@@ -0,0 +1,55 @@
+<section class="container pt-5 pb-4 pb-sm-5 my-2 mt-md-3 mt-xxl-4 mb-sm-0 mb-lg-4 mb-xl-5">
+    <h2 class="h1 text-center pt-lg-3 pt-xl-0 pb-md-2 pb-lg-3 pb-xl-4">Theme Customizer</h2>
+
+    <!-- Colors -->
+    <div class="row align-items-center justify-content-center py-4">
+        <div class="col-9 col-sm-7 col-md-6 order-md-2 offset-lg-1">
+            <div class="ratio" style="max-width: 593px; --cz-aspect-ratio: calc(542 / 593 * 100%)">
+                <img src="/img/intro/customizer/colors-light.jpg" class="d-none-dark" alt="Colors">
+                <img src="/img/intro/customizer/colors-dark.png" class="d-none d-block-dark" alt="Colors">
+            </div>
+        </div>
+        <div class="col-md-6 col-lg-5 order-md-1 text-center text-md-start mt-3 mt-md-n5">
+            <span class="badge fs-sm bg-primary-subtle text-primary mb-3 mb-md-4">Colors</span>
+            <h2 class="h3 mb-md-4">Change theme brand colors quickly and easily</h2>
+            <p class="mb-0">Customize theme colors to match your brand palette using the color picker or just type in
+                the color hex. Supported colors: primary, warning, success, info, danger.</p>
+        </div>
+    </div>
+
+    <hr class="d-md-none my-3 my-sm-4">
+
+    <!-- Typography -->
+    <div class="row align-items-center justify-content-center py-4">
+        <div class="col-10 col-sm-7 col-md-6 col-lg-7">
+            <div class="ratio" style="max-width: 668px; --cz-aspect-ratio: calc(510 / 668 * 100%)">
+                <img src="/img/intro/customizer/typography-light.jpg" class="d-none-dark" alt="Typography">
+                <img src="/img/intro/customizer/typography-dark.png" class="d-none d-block-dark" alt="Typography">
+            </div>
+        </div>
+        <div class="col-md-6 col-lg-5 text-center text-md-start mt-3 mt-md-n5">
+            <span class="badge fs-sm bg-info-subtle text-info mb-3 mb-md-4">Typography</span>
+            <h2 class="h3 mb-md-4">Set up fonts from the huge Google font collection</h2>
+            <p class="mb-0">Easily change the font to your liking. Choose the font from Google Fonts library of 1,600+
+                open source font families. Update headings and body font sizes right from customizer.</p>
+        </div>
+    </div>
+
+    <hr class="d-md-none my-3 my-sm-4">
+
+    <!-- Borders -->
+    <div class="row align-items-center justify-content-center py-4">
+        <div class="col-10 col-sm-7 col-md-6 col-lg-7 order-md-2 d-flex justify-content-end">
+            <div class="ratio" style="max-width: 668px; --cz-aspect-ratio: calc(428 / 668 * 100%)">
+                <img src="/img/intro/customizer/borders-light.jpg" class="d-none-dark" alt="Borders">
+                <img src="/img/intro/customizer/borders-dark.png" class="d-none d-block-dark" alt="Borders">
+            </div>
+        </div>
+        <div class="col-md-6 col-lg-5 order-md-1 text-center text-md-start mt-4 mt-md-0">
+            <span class="badge fs-sm bg-success-subtle text-success mb-3 mb-md-4">Borders</span>
+            <h2 class="h3 mb-md-4">Rounded or square? Customize borders as you wish</h2>
+            <p class="mb-0">It's up to you to make your website soft and friendly with increased border radius or add
+                business vibes with less rounded shapes. Additionally, you can adjust the border width.</p>
+        </div>
+    </div>
+</section>
diff --git a/resources/views/layouts/partials/footer-script.blade.php b/resources/views/layouts/partials/footer-script.blade.php
new file mode 100644
index 0000000..6a7e759
--- /dev/null
+++ b/resources/views/layouts/partials/footer-script.blade.php
@@ -0,0 +1,3 @@
+@vite(['resources/js/theme.js'])
+
+@yield('scripts')
\ No newline at end of file
diff --git a/resources/views/layouts/partials/footer.blade.php b/resources/views/layouts/partials/footer.blade.php
new file mode 100644
index 0000000..96e3dab
--- /dev/null
+++ b/resources/views/layouts/partials/footer.blade.php
@@ -0,0 +1,280 @@
+<footer class="footer position-relative bg-dark border-top">
+    <span class="position-absolute top-0 start-0 w-100 h-100 bg-body d-none d-block-dark"></span>
+    <div class="container position-relative z-1 pt-sm-2 pt-md-3 pt-lg-4" data-bs-theme="dark">
+
+        <!-- Columns with links that are turned into accordion on screens < 500px wide (sm breakpoint) -->
+        <div class="accordion py-5" id="footerLinks">
+            <div class="row">
+                <div class="col-md-4 d-sm-flex flex-md-column align-items-center align-items-md-start pb-3 mb-sm-4">
+                    <h4 class="mb-sm-0 mb-md-4 me-4">
+                        <a class="text-dark-emphasis text-decoration-none" href="{{ route('second', ['home', 'electronics']) }}">Cartzilla</a>
+                    </h4>
+                    <p class="text-body fs-sm text-sm-end text-md-start mb-sm-0 mb-md-3 ms-0 ms-sm-auto ms-md-0 me-4">
+                        Got questions? Contact us 24/7</p>
+                    <div class="dropdown" style="max-width: 250px">
+                        <button type="button"
+                            class="btn btn-light dropdown-toggle justify-content-between w-100 d-none-dark"
+                            data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            Help and consultation
+                        </button>
+                        <button type="button"
+                            class="btn btn-secondary dropdown-toggle justify-content-between w-100 d-none d-flex-dark"
+                            data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            Help and consultation
+                        </button>
+                        <ul class="dropdown-menu">
+                            <li><a class="dropdown-item" href="#!">Help center &amp; FAQ</a></li>
+                            <li><a class="dropdown-item" href="#!">Support chat</a></li>
+                            <li><a class="dropdown-item" href="#!">Open support ticket</a></li>
+                            <li><a class="dropdown-item" href="#!">Call center</a></li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="col-md-8">
+                    <div class="row row-cols-1 row-cols-sm-3 gx-3 gx-md-4">
+                        <div class="accordion-item col border-0">
+                            <h6 class="accordion-header" id="companyHeading">
+                                <span class="text-dark-emphasis d-none d-sm-block">Company</span>
+                                <button type="button" class="accordion-button collapsed py-3 d-sm-none"
+                                    data-bs-toggle="collapse" data-bs-target="#companyLinks" aria-expanded="false"
+                                    aria-controls="companyLinks">Company</button>
+                            </h6>
+                            <div class="accordion-collapse collapse d-sm-block" id="companyLinks"
+                                aria-labelledby="companyHeading" data-bs-parent="#footerLinks">
+                                <ul class="nav flex-column gap-2 pt-sm-3 pb-3 mt-n1 mb-1">
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="#!">About company</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="#!">Our team</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="#!">Careers</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="#!">Contact us</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="#!">News</a>
+                                    </li>
+                                </ul>
+                            </div>
+                            <hr class="d-sm-none my-0">
+                        </div>
+                        <div class="accordion-item col border-0">
+                            <h6 class="accordion-header" id="accountHeading">
+                                <span class="text-dark-emphasis d-none d-sm-block">Account</span>
+                                <button type="button" class="accordion-button collapsed py-3 d-sm-none"
+                                    data-bs-toggle="collapse" data-bs-target="#accountLinks" aria-expanded="false"
+                                    aria-controls="accountLinks">Account</button>
+                            </h6>
+                            <div class="accordion-collapse collapse d-sm-block" id="accountLinks"
+                                aria-labelledby="accountHeading" data-bs-parent="#footerLinks">
+                                <ul class="nav flex-column gap-2 pt-sm-3 pb-3 mt-n1 mb-1">
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="#!">Your account</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="#!">Shipping rates &amp; policies</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="#!">Refunds &amp; replacements</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="#!">Delivery info</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="#!">Order tracking</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="#!">Taxes &amp; fees</a>
+                                    </li>
+                                </ul>
+                            </div>
+                            <hr class="d-sm-none my-0">
+                        </div>
+                        <div class="accordion-item col border-0">
+                            <h6 class="accordion-header" id="customerHeading">
+                                <span class="text-dark-emphasis d-none d-sm-block">Customer service</span>
+                                <button type="button" class="accordion-button collapsed py-3 d-sm-none"
+                                    data-bs-toggle="collapse" data-bs-target="#customerLinks" aria-expanded="false"
+                                    aria-controls="customerLinks">Customer service</button>
+                            </h6>
+                            <div class="accordion-collapse collapse d-sm-block" id="customerLinks"
+                                aria-labelledby="customerHeading" data-bs-parent="#footerLinks">
+                                <ul class="nav flex-column gap-2 pt-sm-3 pb-3 mt-n1 mb-1">
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="#!">Payment methods</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="#!">Money back guarantee</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="#!">Product returns</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="#!">Support center</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="#!">Shipping</a>
+                                    </li>
+                                    <li class="d-flex w-100 pt-1">
+                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                            href="#!">Terms &amp; conditions</a>
+                                    </li>
+                                </ul>
+                            </div>
+                            <hr class="d-sm-none my-0">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Category / tag links -->
+        <div class="d-flex flex-column gap-3 pb-3 pb-md-4 pb-lg-5 mt-n2 mt-sm-n4 mt-lg-0 mb-4">
+            <ul class="nav align-items-center text-body-tertiary gap-2">
+                <li class="animate-underline">
+                    <a class="nav-link fw-normal p-0 animate-target" href="#!">Computers</a>
+                </li>
+                <li class="px-1">/</li>
+                <li class="animate-underline">
+                    <a class="nav-link fw-normal p-0 animate-target" href="#!">Smartphones</a>
+                </li>
+                <li class="px-1">/</li>
+                <li class="animate-underline">
+                    <a class="nav-link fw-normal p-0 animate-target" href="#!">TV, Video</a>
+                </li>
+                <li class="px-1">/</li>
+                <li class="animate-underline">
+                    <a class="nav-link fw-normal p-0 animate-target" href="#!">Speakers</a>
+                </li>
+                <li class="px-1">/</li>
+                <li class="animate-underline">
+                    <a class="nav-link fw-normal p-0 animate-target" href="#!">Cameras</a>
+                </li>
+                <li class="px-1">/</li>
+                <li class="animate-underline">
+                    <a class="nav-link fw-normal p-0 animate-target" href="#!">Printers</a>
+                </li>
+                <li class="px-1">/</li>
+                <li class="animate-underline">
+                    <a class="nav-link fw-normal p-0 animate-target" href="#!">Video Games</a>
+                </li>
+                <li class="px-1">/</li>
+                <li class="animate-underline">
+                    <a class="nav-link fw-normal p-0 animate-target" href="#!">Headphones</a>
+                </li>
+                <li class="px-1">/</li>
+                <li class="animate-underline">
+                    <a class="nav-link fw-normal p-0 animate-target" href="#!">Wearable</a>
+                </li>
+                <li class="px-1">/</li>
+                <li class="animate-underline">
+                    <a class="nav-link fw-normal p-0 animate-target" href="#!">HDD/SSD</a>
+                </li>
+                <li class="px-1">/</li>
+                <li class="animate-underline">
+                    <a class="nav-link fw-normal p-0 animate-target" href="#!">Smart Home</a>
+                </li>
+                <li class="px-1">/</li>
+                <li class="animate-underline">
+                    <a class="nav-link fw-normal p-0 animate-target" href="#!">Apple Devices</a>
+                </li>
+                <li class="px-1">/</li>
+                <li class="animate-underline">
+                    <a class="nav-link fw-normal p-0 animate-target" href="#!">Tablets</a>
+                </li>
+            </ul>
+            <ul class="nav align-items-center text-body-tertiary gap-2">
+                <li class="animate-underline">
+                    <a class="nav-link fw-normal p-0 animate-target" href="#!">Monitors</a>
+                </li>
+                <li class="px-1">/</li>
+                <li class="animate-underline">
+                    <a class="nav-link fw-normal p-0 animate-target" href="#!">Scanners</a>
+                </li>
+                <li class="px-1">/</li>
+                <li class="animate-underline">
+                    <a class="nav-link fw-normal p-0 animate-target" href="#!">Servers</a>
+                </li>
+                <li class="px-1">/</li>
+                <li class="animate-underline">
+                    <a class="nav-link fw-normal p-0 animate-target" href="#!">Heating and Cooling</a>
+                </li>
+                <li class="px-1">/</li>
+                <li class="animate-underline">
+                    <a class="nav-link fw-normal p-0 animate-target" href="#!">E-readers</a>
+                </li>
+                <li class="px-1">/</li>
+                <li class="animate-underline">
+                    <a class="nav-link fw-normal p-0 animate-target" href="#!">Data Storage</a>
+                </li>
+                <li class="px-1">/</li>
+                <li class="animate-underline">
+                    <a class="nav-link fw-normal p-0 animate-target" href="#!">Networking</a>
+                </li>
+                <li class="px-1">/</li>
+                <li class="animate-underline">
+                    <a class="nav-link fw-normal p-0 animate-target" href="#!">Power Strips</a>
+                </li>
+                <li class="px-1">/</li>
+                <li class="animate-underline">
+                    <a class="nav-link fw-normal p-0 animate-target" href="#!">Plugs and Outlets</a>
+                </li>
+                <li class="px-1">/</li>
+                <li class="animate-underline">
+                    <a class="nav-link fw-normal p-0 animate-target" href="#!">Detectors and Sensors</a>
+                </li>
+                <li class="px-1">/</li>
+                <li class="animate-underline">
+                    <a class="nav-link fw-normal p-0 animate-target" href="#!">Accessories</a>
+                </li>
+            </ul>
+        </div>
+
+        <!-- Copyright + Payment methods -->
+        <div class="d-md-flex align-items-center border-top py-4">
+            <div class="d-flex gap-2 gap-sm-3 justify-content-center ms-md-auto mb-4 mb-md-0 order-md-2">
+                <div>
+                    <img src="/img/payment-methods/visa-dark-mode.svg" alt="Visa">
+                </div>
+                <div>
+                    <img src="/img/payment-methods/mastercard.svg" alt="Mastercard">
+                </div>
+                <div>
+                    <img src="/img/payment-methods/paypal-dark-mode.svg" alt="PayPal">
+                </div>
+                <div>
+                    <img src="/img/payment-methods/google-pay-dark-mode.svg" alt="Google Pay">
+                </div>
+                <div>
+                    <img src="/img/payment-methods/apple-pay-dark-mode.svg" alt="Apple Pay">
+                </div>
+            </div>
+            <p class="text-body fs-xs text-center text-md-start mb-0 me-4 order-md-1">&copy; All rights reserved. Made
+                by <span class="animate-underline"><a
+                        class="animate-target text-dark-emphasis fw-medium text-decoration-none"
+                        href="https://coderthemes.com/" target="_blank" rel="noreferrer">Coderthemes</a></span></p>
+        </div>
+    </div>
+
+    <!-- Additional spacing to accommodate the sticky offcanvas toggle button -->
+    <div class="d-lg-none" style="height: 3.75rem"></div>
+</footer>
diff --git a/resources/views/layouts/partials/footer2.blade.php b/resources/views/layouts/partials/footer2.blade.php
new file mode 100644
index 0000000..e126211
--- /dev/null
+++ b/resources/views/layouts/partials/footer2.blade.php
@@ -0,0 +1,173 @@
+<footer class="footer bg-dark pb-4" data-bs-theme="dark">
+    <div class="container pb-md-3">
+
+        <!-- Features -->
+        <div class="border-bottom py-5">
+            <div class="row row-cols-2 row-cols-md-4 g-4 gx-sm-5 py-sm-1 py-md-2 py-lg-3 mb-n2 mb-md-0">
+                <div class="col mb-2 mb-md-0">
+                    <i class="ci-layers-2 fs-xl text-dark-emphasis mb-3"></i>
+                    <h6 class="pb-2 mb-1">Regularly updated content</h6>
+                    <p class="fs-sm text-body mb-0">Stay ahead of trends, always having fresh and modern assets.</p>
+                </div>
+                <div class="col mb-2 mb-md-0">
+                    <i class="ci-click fs-xl text-dark-emphasis mb-3"></i>
+                    <h6 class="pb-2 mb-1">Subscription-based access</h6>
+                    <p class="fs-sm text-body mb-0">Find everything you need in one place, saving time and effort.</p>
+                </div>
+                <div class="col mb-2 mb-md-0">
+                    <i class="ci-grid-2 fs-xl text-dark-emphasis mb-3"></i>
+                    <h6 class="pb-2 mb-1">Exclusive collections</h6>
+                    <p class="fs-sm text-body mb-0">Partner with renowned designers and artists to create exclusive
+                        collections.</p>
+                </div>
+                <div class="col mb-2 mb-md-0">
+                    <i class="ci-check-search fs-xl text-dark-emphasis mb-3"></i>
+                    <h6 class="pb-2 mb-1">User-friendly search </h6>
+                    <p class="fs-sm text-body mb-0">Spend less time searching and more time creating.</p>
+                </div>
+            </div>
+        </div>
+
+        <!-- Subscription + Links -->
+        <div class="py-5">
+            <div class="row py-sm-1 py-md-2 py-lg-3">
+
+                <!-- Subscription + Social buttons -->
+                <div class="col-lg-5 mb-4 mb-sm-5 mb-lg-0">
+                    <h6 class="mb-4">Join our newsletter, get discounts 🔥</h6>
+                    <form class="needs-validation d-flex gap-2 pb-sm-2 pb-lg-0 mb-4 mb-lg-5" novalidate>
+                        <input type="email" class="form-control form-control-lg w-100 rounded-pill"
+                            placeholder="Your email" style="max-width: 340px" required>
+                        <button type="submit" class="btn btn-lg btn-primary rounded-pill">Subscribe</button>
+                    </form>
+                    <div class="d-flex gap-3">
+                        <a class="btn btn-icon btn-secondary rounded-circle" href="#!" aria-label="Instagram">
+                            <i class="ci-instagram fs-base"></i>
+                        </a>
+                        <a class="btn btn-icon btn-secondary rounded-circle" href="#!" aria-label="Facebook">
+                            <i class="ci-facebook fs-base"></i>
+                        </a>
+                        <a class="btn btn-icon btn-secondary rounded-circle" href="#!" aria-label="YouTube">
+                            <i class="ci-youtube fs-base"></i>
+                        </a>
+                        <a class="btn btn-icon btn-secondary rounded-circle" href="#!" aria-label="Telegram">
+                            <i class="ci-telegram fs-base"></i>
+                        </a>
+                    </div>
+                </div>
+
+                <!-- Columns with links that are turned into accordion on screens < 500px wide (sm breakpoint) -->
+                <div class="col-lg-7">
+                    <div class="accordion ps-lg-4" id="footerLinks">
+                        <div class="row">
+                            <div class="accordion-item col-sm-4 border-0">
+                                <h6 class="accordion-header" id="categoriesHeading">
+                                    <span class="text-dark-emphasis d-none d-sm-block">Categories</span>
+                                    <button type="button" class="accordion-button collapsed py-3 d-sm-none"
+                                        data-bs-toggle="collapse" data-bs-target="#categoriesLinks"
+                                        aria-expanded="false" aria-controls="categoriesLinks">Categories</button>
+                                </h6>
+                                <div class="accordion-collapse collapse d-sm-block" id="categoriesLinks"
+                                    aria-labelledby="categoriesHeading" data-bs-parent="#footerLinks">
+                                    <ul class="nav flex-column gap-2 pt-sm-3 pb-3 pb-sm-0 mt-n1 mb-1 mb-sm-0">
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Vectors</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Photos</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">3D illustrations</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">AI images</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Templates</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Mockups</a>
+                                        </li>
+                                    </ul>
+                                </div>
+                                <hr class="d-sm-none my-0">
+                            </div>
+                            <div class="accordion-item col-sm-4 border-0">
+                                <h6 class="accordion-header" id="membersHeading">
+                                    <span class="text-dark-emphasis d-none d-sm-block">For members</span>
+                                    <button type="button" class="accordion-button collapsed py-3 d-sm-none"
+                                        data-bs-toggle="collapse" data-bs-target="#membersLinks" aria-expanded="false"
+                                        aria-controls="membersLinks">For members</button>
+                                </h6>
+                                <div class="accordion-collapse collapse d-sm-block" id="membersLinks"
+                                    aria-labelledby="membersHeading" data-bs-parent="#footerLinks">
+                                    <ul class="nav flex-column gap-2 pt-sm-3 pb-3 pb-sm-0 mt-n1 mb-1 mb-sm-0">
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Licenses</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Return policy</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Payment methods</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Become a vendor</a>
+                                        </li>
+                                    </ul>
+                                </div>
+                                <hr class="d-sm-none my-0">
+                            </div>
+                            <div class="accordion-item col-sm-4 border-0">
+                                <h6 class="accordion-header" id="supportHeading">
+                                    <span class="text-dark-emphasis d-none d-sm-block">Support</span>
+                                    <button type="button" class="accordion-button collapsed py-3 d-sm-none"
+                                        data-bs-toggle="collapse" data-bs-target="#supportLinks"
+                                        aria-expanded="false" aria-controls="supportLinks">Support</button>
+                                </h6>
+                                <div class="accordion-collapse collapse d-sm-block" id="supportLinks"
+                                    aria-labelledby="supportHeading" data-bs-parent="#footerLinks">
+                                    <ul class="nav flex-column gap-2 pt-sm-3 pb-3 pb-sm-0 mt-n1 mb-1 mb-sm-0">
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">FAQs</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Search guide</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Contact</a>
+                                        </li>
+                                    </ul>
+                                </div>
+                                <hr class="d-sm-none my-0">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Copyright -->
+        <p class="fs-xs text-body text-center text-lg-start mb-0">
+            &copy; All rights reserved. Made with <i class="ci-heart-filled align-middle"></i> by <span
+                class="animate-underline"><a class="animate-target text-white text-decoration-none"
+                    href="https://coderthemes.com/" target="_blank" rel="noreferrer">Coderthemes</a></span>
+        </p>
+    </div>
+
+    <!-- Additional spacing to accommodate the sticky bottom bar -->
+    <div class="d-lg-none" style="height: 5rem"></div>
+</footer>
diff --git a/resources/views/layouts/partials/footer3.blade.php b/resources/views/layouts/partials/footer3.blade.php
new file mode 100644
index 0000000..550abda
--- /dev/null
+++ b/resources/views/layouts/partials/footer3.blade.php
@@ -0,0 +1,170 @@
+<footer class="footer bg-dark pb-4" data-bs-theme="dark">
+    <div class="container pb-md-3">
+
+        <!-- Features -->
+        <div class="border-bottom py-5">
+            <div class="row row-cols-2 row-cols-md-4 g-4 gx-sm-5 py-sm-1 py-md-2 py-lg-3 mb-n2 mb-md-0">
+                <div class="col mb-2 mb-md-0">
+                    <i class="ci-layers-2 fs-xl text-dark-emphasis mb-3"></i>
+                    <h6 class="pb-2 mb-1">Regularly updated content</h6>
+                    <p class="fs-sm text-body mb-0">Stay ahead of trends, always having fresh and modern assets.</p>
+                </div>
+                <div class="col mb-2 mb-md-0">
+                    <i class="ci-click fs-xl text-dark-emphasis mb-3"></i>
+                    <h6 class="pb-2 mb-1">Subscription-based access</h6>
+                    <p class="fs-sm text-body mb-0">Find everything you need in one place, saving time and effort.</p>
+                </div>
+                <div class="col mb-2 mb-md-0">
+                    <i class="ci-grid-2 fs-xl text-dark-emphasis mb-3"></i>
+                    <h6 class="pb-2 mb-1">Exclusive collections</h6>
+                    <p class="fs-sm text-body mb-0">Partner with renowned designers and artists to create exclusive
+                        collections.</p>
+                </div>
+                <div class="col mb-2 mb-md-0">
+                    <i class="ci-check-search fs-xl text-dark-emphasis mb-3"></i>
+                    <h6 class="pb-2 mb-1">User-friendly search </h6>
+                    <p class="fs-sm text-body mb-0">Spend less time searching and more time creating.</p>
+                </div>
+            </div>
+        </div>
+
+        <!-- Subscription + Links -->
+        <div class="py-5">
+            <div class="row py-sm-1 py-md-2 py-lg-3">
+
+                <!-- Subscription + Social buttons -->
+                <div class="col-lg-5 mb-4 mb-sm-5 mb-lg-0">
+                    <h6 class="mb-4">Join our newsletter, get discounts 🔥</h6>
+                    <form class="needs-validation d-flex gap-2 pb-sm-2 pb-lg-0 mb-4 mb-lg-5" novalidate>
+                        <input type="email" class="form-control form-control-lg w-100 rounded-pill"
+                            placeholder="Your email" style="max-width: 340px" required>
+                        <button type="submit" class="btn btn-lg btn-primary rounded-pill">Subscribe</button>
+                    </form>
+                    <div class="d-flex gap-3">
+                        <a class="btn btn-icon btn-secondary rounded-circle" href="#!" aria-label="Instagram">
+                            <i class="ci-instagram fs-base"></i>
+                        </a>
+                        <a class="btn btn-icon btn-secondary rounded-circle" href="#!" aria-label="Facebook">
+                            <i class="ci-facebook fs-base"></i>
+                        </a>
+                        <a class="btn btn-icon btn-secondary rounded-circle" href="#!" aria-label="YouTube">
+                            <i class="ci-youtube fs-base"></i>
+                        </a>
+                        <a class="btn btn-icon btn-secondary rounded-circle" href="#!" aria-label="Telegram">
+                            <i class="ci-telegram fs-base"></i>
+                        </a>
+                    </div>
+                </div>
+
+                <!-- Columns with links that are turned into accordion on screens < 500px wide (sm breakpoint) -->
+                <div class="col-lg-7">
+                    <div class="accordion ps-lg-4" id="footerLinks">
+                        <div class="row">
+                            <div class="accordion-item col-sm-4 border-0">
+                                <h6 class="accordion-header" id="categoriesHeading">
+                                    <span class="text-dark-emphasis d-none d-sm-block">Categories</span>
+                                    <button type="button" class="accordion-button collapsed py-3 d-sm-none"
+                                        data-bs-toggle="collapse" data-bs-target="#categoriesLinks"
+                                        aria-expanded="false" aria-controls="categoriesLinks">Categories</button>
+                                </h6>
+                                <div class="accordion-collapse collapse d-sm-block" id="categoriesLinks"
+                                    aria-labelledby="categoriesHeading" data-bs-parent="#footerLinks">
+                                    <ul class="nav flex-column gap-2 pt-sm-3 pb-3 pb-sm-0 mt-n1 mb-1 mb-sm-0">
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Vectors</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Photos</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">3D illustrations</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">AI images</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Templates</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Mockups</a>
+                                        </li>
+                                    </ul>
+                                </div>
+                                <hr class="d-sm-none my-0">
+                            </div>
+                            <div class="accordion-item col-sm-4 border-0">
+                                <h6 class="accordion-header" id="membersHeading">
+                                    <span class="text-dark-emphasis d-none d-sm-block">For members</span>
+                                    <button type="button" class="accordion-button collapsed py-3 d-sm-none"
+                                        data-bs-toggle="collapse" data-bs-target="#membersLinks" aria-expanded="false"
+                                        aria-controls="membersLinks">For members</button>
+                                </h6>
+                                <div class="accordion-collapse collapse d-sm-block" id="membersLinks"
+                                    aria-labelledby="membersHeading" data-bs-parent="#footerLinks">
+                                    <ul class="nav flex-column gap-2 pt-sm-3 pb-3 pb-sm-0 mt-n1 mb-1 mb-sm-0">
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Licenses</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Return policy</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Payment methods</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Become a vendor</a>
+                                        </li>
+                                    </ul>
+                                </div>
+                                <hr class="d-sm-none my-0">
+                            </div>
+                            <div class="accordion-item col-sm-4 border-0">
+                                <h6 class="accordion-header" id="supportHeading">
+                                    <span class="text-dark-emphasis d-none d-sm-block">Support</span>
+                                    <button type="button" class="accordion-button collapsed py-3 d-sm-none"
+                                        data-bs-toggle="collapse" data-bs-target="#supportLinks"
+                                        aria-expanded="false" aria-controls="supportLinks">Support</button>
+                                </h6>
+                                <div class="accordion-collapse collapse d-sm-block" id="supportLinks"
+                                    aria-labelledby="supportHeading" data-bs-parent="#footerLinks">
+                                    <ul class="nav flex-column gap-2 pt-sm-3 pb-3 pb-sm-0 mt-n1 mb-1 mb-sm-0">
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">FAQs</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Search guide</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Contact</a>
+                                        </li>
+                                    </ul>
+                                </div>
+                                <hr class="d-sm-none my-0">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Copyright -->
+        <p class="fs-xs text-body text-center text-lg-start mb-0">
+            &copy; All rights reserved. Made with <i class="ci-heart-filled align-middle"></i> by <span
+                class="animate-underline"><a class="animate-target text-white text-decoration-none"
+                    href="https://coderthemes.com/" target="_blank" rel="noreferrer">Coderthemes</a></span>
+        </p>
+    </div>
+</footer>
diff --git a/resources/views/layouts/partials/head-css.blade.php b/resources/views/layouts/partials/head-css.blade.php
new file mode 100644
index 0000000..82e8ccd
--- /dev/null
+++ b/resources/views/layouts/partials/head-css.blade.php
@@ -0,0 +1,5 @@
+@vite(['node_modules/choices.js/public/assets/styles/choices.min.css', 'node_modules/swiper/swiper-bundle.min.css', 'node_modules/glightbox/dist/css/glightbox.min.css', 'node_modules/simplebar/dist/simplebar.min.css', 'node_modules/flatpickr/dist/flatpickr.min.css', 'node_modules/nouislider/dist/nouislider.min.css', 'node_modules/img-comparison-slider/dist/styles.css'])
+
+@vite(['resources/icons/cartzilla-icons.min.css'])
+@vite(['resources/scss/theme.scss'])
+
diff --git a/resources/views/layouts/partials/marketplace-navbar.blade.php b/resources/views/layouts/partials/marketplace-navbar.blade.php
new file mode 100644
index 0000000..89adfcd
--- /dev/null
+++ b/resources/views/layouts/partials/marketplace-navbar.blade.php
@@ -0,0 +1,581 @@
+<header class="navbar navbar-expand-lg bg-body navbar-sticky sticky-top z-fixed px-0" data-sticky-element>
+    <div class="container flex-nowrap">
+
+        <!-- Mobile offcanvas menu toggler (Hamburger) -->
+        <button type="button" class="navbar-toggler me-4 me-lg-0" data-bs-toggle="offcanvas" data-bs-target="#navbarNav"
+            aria-controls="navbarNav" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+
+        <!-- Navbar brand (Logo) -->
+        <a class="navbar-brand py-1 py-md-2 py-xl-1" href="{{ route('second', ['home', 'marketplace'])}}">
+            <span class="d-none d-sm-flex flex-shrink-0 text-primary me-2">
+                <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36">
+                    <path
+                        d="M36 18.01c0 8.097-5.355 14.949-12.705 17.2a18.12 18.12 0 0 1-5.315.79C9.622 36 2.608 30.313.573 22.611.257 21.407.059 20.162 0 18.879v-1.758c.02-.395.059-.79.099-1.185.099-.908.277-1.817.514-2.686C2.687 5.628 9.682 0 18 0c5.572 0 10.551 2.528 13.871 6.517 1.502 1.797 2.648 3.91 3.359 6.201.494 1.659.771 3.436.771 5.292z"
+                        fill="currentColor" />
+                    <g fill="#fff">
+                        <path
+                            d="M17.466 21.624c-.514 0-.988-.316-1.146-.829-.198-.632.138-1.303.771-1.501l7.666-2.469-1.205-8.254-13.317 4.621a1.19 1.19 0 0 1-1.521-.75 1.19 1.19 0 0 1 .751-1.521l13.89-4.818c.553-.197 1.166-.138 1.64.158a1.82 1.82 0 0 1 .85 1.284l1.344 9.183c.138.987-.494 1.994-1.482 2.33l-7.864 2.528-.375.04zm7.31.138c-.178-.632-.85-1.007-1.482-.81l-5.177 1.58c-2.331.79-3.28.02-3.418-.099l-6.56-8.412a4.25 4.25 0 0 0-4.406-1.758l-3.122.987c-.237.889-.415 1.777-.514 2.686l4.228-1.363a1.84 1.84 0 0 1 1.857.81l6.659 8.551c.751.948 2.015 1.323 3.359 1.323.909 0 1.857-.178 2.687-.474l5.078-1.54c.632-.178 1.008-.829.81-1.481z" />
+                        <use href="#czlogo" />
+                        <use href="#czlogo" x="8.516" y="-2.172" />
+                    </g>
+                    <defs>
+                        <path id="czlogo"
+                            d="M18.689 28.654a1.94 1.94 0 0 1-1.936 1.935 1.94 1.94 0 0 1-1.936-1.935 1.94 1.94 0 0 1 1.936-1.935 1.94 1.94 0 0 1 1.936 1.935z" />
+                    </defs>
+                </svg>
+            </span>
+            Cartzilla
+        </a>
+
+        <!-- Main navigation that turns into offcanvas on screens < 992px wide (lg breakpoint) -->
+        <nav class="offcanvas offcanvas-start" id="navbarNav" tabindex="-1" aria-labelledby="navbarNavLabel">
+            <div class="offcanvas-header py-3">
+                <h5 class="offcanvas-title" id="navbarNavLabel">Browse Cartzilla</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+            </div>
+            <div class="offcanvas-body pt-3 pb-4 py-lg-0 mx-lg-auto">
+                <ul class="navbar-nav position-relative">
+                    <li class="nav-item dropdown py-lg-2 me-lg-n1 me-xl-0">
+                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
+                            data-bs-trigger="hover" aria-expanded="false">Home</a>
+                        <ul class="dropdown-menu" style="--cz-dropdown-spacer: .875rem">
+                            <li class="hover-effect-opacity px-2 mx-n2">
+                                <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'electronics']) }}">
+                                    <span class="fw-medium">Electronics Store</span>
+                                    <span class="d-block fs-xs text-body-secondary">Megamenu + Hero slider</span>
+                                    <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                        style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                        <img class="position-relative z-2 d-none-dark"
+                                            src="/img/mega-menu/demo-preview/electronics-light.jpg"
+                                            alt="Electronics Store">
+                                        <img class="position-relative z-2 d-none d-block-dark"
+                                            src="/img/mega-menu/demo-preview/electronics-dark.jpg"
+                                            alt="Electronics Store">
+                                        <span
+                                            class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                            style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                        <span
+                                            class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                            style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                    </div>
+                                </a>
+                            </li>
+                            <li class="hover-effect-opacity px-2 mx-n2">
+                                <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'fashion-v1']) }}">
+                                    <span class="fw-medium">Fashion Store v.1</span>
+                                    <span class="d-block fs-xs text-body-secondary">Hero promo slider</span>
+                                    <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                        style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                        <img class="position-relative z-2 d-none-dark"
+                                            src="/img/mega-menu/demo-preview/fashion-1-light.jpg"
+                                            alt="Fashion Store v.1">
+                                        <img class="position-relative z-2 d-none d-block-dark"
+                                            src="/img/mega-menu/demo-preview/fashion-1-dark.jpg"
+                                            alt="Fashion Store v.1">
+                                        <span
+                                            class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                            style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                        <span
+                                            class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                            style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                    </div>
+                                </a>
+                            </li>
+                            <li class="hover-effect-opacity px-2 mx-n2">
+                                <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'fashion-v2']) }}">
+                                    <span class="fw-medium">Fashion Store v.2</span>
+                                    <span class="d-block fs-xs text-body-secondary">Hero banner with hotspots</span>
+                                    <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                        style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                        <img class="position-relative z-2 d-none-dark"
+                                            src="/img/mega-menu/demo-preview/fashion-2-light.jpg"
+                                            alt="Fashion Store v.2">
+                                        <img class="position-relative z-2 d-none d-block-dark"
+                                            src="/img/mega-menu/demo-preview/fashion-2-dark.jpg"
+                                            alt="Fashion Store v.2">
+                                        <span
+                                            class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                            style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                        <span
+                                            class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                            style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                    </div>
+                                </a>
+                            </li>
+                            <li class="hover-effect-opacity px-2 mx-n2">
+                                <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'furniture']) }}">
+                                    <span class="fw-medium">Furniture Store</span>
+                                    <span class="d-block fs-xs text-body-secondary">Fancy product carousel</span>
+                                    <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                        style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                        <img class="position-relative z-2 d-none-dark"
+                                            src="/img/mega-menu/demo-preview/furniture-light.jpg"
+                                            alt="Furniture Store">
+                                        <img class="position-relative z-2 d-none d-block-dark"
+                                            src="/img/mega-menu/demo-preview/furniture-dark.jpg"
+                                            alt="Furniture Store">
+                                        <span
+                                            class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                            style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                        <span
+                                            class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                            style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                    </div>
+                                </a>
+                            </li>
+                            <li class="hover-effect-opacity px-2 mx-n2">
+                                <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'grocery']) }}">
+                                    <span class="fw-medium">Grocery Store</span>
+                                    <span class="d-block fs-xs text-body-secondary">Hero slider + Category cards</span>
+                                    <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                        style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                        <img class="position-relative z-2 d-none-dark"
+                                            src="/img/mega-menu/demo-preview/grocery-light.jpg" alt="Grocery Store">
+                                        <img class="position-relative z-2 d-none d-block-dark"
+                                            src="/img/mega-menu/demo-preview/grocery-dark.jpg" alt="Grocery Store">
+                                        <span
+                                            class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                            style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                        <span
+                                            class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                            style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                    </div>
+                                </a>
+                            </li>
+                            <li class="hover-effect-opacity px-2 mx-n2">
+                                <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'marketplace'])}}">
+                                    <span class="fw-medium">Marketplace</span>
+                                    <span class="d-block fs-xs text-body-secondary">Multi-vendor, digital goods</span>
+                                    <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                        style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                        <img class="position-relative z-2 d-none-dark"
+                                            src="/img/mega-menu/demo-preview/marketplace-light.jpg" alt="Marketplace">
+                                        <img class="position-relative z-2 d-none d-block-dark"
+                                            src="/img/mega-menu/demo-preview/marketplace-dark.jpg" alt="Marketplace">
+                                        <span
+                                            class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                            style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                        <span
+                                            class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                            style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                    </div>
+                                </a>
+                            </li>
+                            <li class="hover-effect-opacity px-2 mx-n2">
+                                <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'single-store']) }}">
+                                    <span class="fw-medium">Single Product Store</span>
+                                    <span class="d-block fs-xs text-body-secondary">Single product / mono brand</span>
+                                    <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                        style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                        <img class="position-relative z-2 d-none-dark"
+                                            src="/img/mega-menu/demo-preview/single-store-light.jpg"
+                                            alt="Single Product Store">
+                                        <img class="position-relative z-2 d-none d-block-dark"
+                                            src="/img/mega-menu/demo-preview/single-store-dark.jpg"
+                                            alt="Single Product Store">
+                                        <span
+                                            class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                            style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                        <span
+                                            class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                            style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                    </div>
+                                </a>
+                            </li>
+                        </ul>
+                    </li>
+                    <li class="nav-item dropdown position-static py-lg-2 me-lg-n1 me-xl-0">
+                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
+                            data-bs-trigger="hover" aria-expanded="false">Shop</a>
+                        <div class="dropdown-menu rounded-4 p-4" style="--cz-dropdown-spacer: .875rem">
+                            <div class="d-flex flex-column flex-lg-row gap-4">
+                                <div style="min-width: 190px">
+                                    <div class="h6 mb-2">Electronics Store</div>
+                                    <ul class="nav flex-column gap-2 mt-0">
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'categories-electronics']) }}">Categories Page</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-electronics']) }}">Catalog with Side Filters</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'product-general-electronics']) }}">Product General Info</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'product-details-electronics']) }}">Product Details</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'product-reviews-electronics']) }}">Product Reviews</a>
+                                        </li>
+                                    </ul>
+                                    <div class="h6 pt-4 mb-2">Fashion Store</div>
+                                    <ul class="nav flex-column gap-2 mt-0">
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-fashion']) }}">Catalog with Side Filters</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'product-fashion']) }}">Product Page</a>
+                                        </li>
+                                    </ul>
+                                    <div class="h6 pt-4 mb-2">Furniture Store</div>
+                                    <ul class="nav flex-column gap-2 mt-0">
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-furniture']) }}">Catalog with Top Filters</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'product-furniture']) }}">Product Page</a>
+                                        </li>
+                                    </ul>
+                                </div>
+                                <div style="min-width: 190px">
+                                    <div class="h6 mb-2">Grocery Store</div>
+                                    <ul class="nav flex-column gap-2 mt-0">
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Catalog with Side Filters</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'product-grocery']) }}">Product Page</a>
+                                        </li>
+                                    </ul>
+                                    <div class="h6 pt-4 mb-2">Marketplace</div>
+                                    <ul class="nav flex-column gap-2 mt-0">
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-marketplace']) }}">Catalog with Top Filters</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'product-marketplace']) }}">Digital Product Page</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['checkout', 'marketplace']) }}">Cart / Checkout</a>
+                                        </li>
+                                    </ul>
+                                </div>
+                                <div style="min-width: 190px">
+                                    <div class="h6 mb-2">Checkout v.1</div>
+                                    <ul class="nav flex-column gap-2 mt-0">
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['checkout', 'v1-cart']) }}">Shopping Cart</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['checkout', 'v1-delivery-1']) }}">Delivery Info (Step 1)</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['checkout', 'v1-delivery-2']) }}">Delivery Info (Step 2)</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['checkout', 'v1-shipping']) }}">Shipping Address</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['checkout', 'v1-payment']) }}">Payment</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['checkout', 'v1-thankyou']) }}">Thank You Page</a>
+                                        </li>
+                                    </ul>
+                                    <div class="h6 pt-4 mb-2">Checkout v.2</div>
+                                    <ul class="nav flex-column gap-2 mt-0">
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['checkout', 'v2-cart']) }}">Shopping Cart</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['checkout', 'v2-delivery']) }}">Delivery Info</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['checkout', 'v2-pickup']) }}">Pickup from Store</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['checkout', 'v2-thankyou']) }}">Thank You Page</a>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                    <li class="nav-item dropdown py-lg-2 me-lg-n1 me-xl-0">
+                        <a class="nav-link dropdown-toggle active" aria-current="page" href="#" role="button"
+                            data-bs-toggle="dropdown" data-bs-trigger="hover" data-bs-auto-close="outside"
+                            aria-expanded="false">Account</a>
+                        <ul class="dropdown-menu" style="--cz-dropdown-spacer: .875rem">
+                            <li class="dropend">
+                                <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                    data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Auth
+                                    Pages</a>
+                                <ul class="dropdown-menu">
+                                    <li><a class="dropdown-item" href="{{ route('second', ['account', 'signin']) }}">Sign In</a></li>
+                                    <li><a class="dropdown-item" href="{{ route('second', ['account', 'signup']) }}">Sign Up</a></li>
+                                    <li><a class="dropdown-item" href="{{ route('second', ['account', 'password-recovery']) }}">Password
+                                            Recovery</a></li>
+                                </ul>
+                            </li>
+                            <li class="dropend">
+                                <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                    data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Shop
+                                    User</a>
+                                <ul class="dropdown-menu">
+                                    <li><a class="dropdown-item" href="{{ route('second', ['account', 'orders']) }}">Orders History</a></li>
+                                    <li><a class="dropdown-item" href="{{ route('second', ['account', 'wishlist']) }}">Wishlist</a></li>
+                                    <li><a class="dropdown-item" href="{{ route('second', ['account', 'payment']) }}">Payment Methods</a></li>
+                                    <li><a class="dropdown-item" href="{{ route('second', ['account', 'reviews']) }}">My Reviews</a></li>
+                                    <li><a class="dropdown-item" href="{{ route('second', ['account', 'info']) }}">Personal Info</a></li>
+                                    <li><a class="dropdown-item" href="{{ route('second', ['account', 'addresses']) }}">Addresses</a></li>
+                                    <li><a class="dropdown-item" href="{{ route('second', ['account', 'notifications']) }}">Notifications</a>
+                                    </li>
+                                </ul>
+                            </li>
+                            <li class="dropend">
+                                <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                    data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                    aria-expanded="false">Marketplace User</a>
+                                <ul class="dropdown-menu">
+                                    <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-dashboard']) }}">Dashboard</a></li>
+                                    <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-products']) }}">Products</a>
+                                    </li>
+                                    <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-sales']) }}">Sales</a></li>
+                                    <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-payouts']) }}">Payouts</a>
+                                    </li>
+                                    <li><a class="dropdown-item"
+                                            href="{{ route('second', ['account', 'marketplace-purchases']) }}">Purchases</a></li>
+                                    <li><a class="dropdown-item"
+                                            href="{{ route('second', ['account', 'marketplace-favorites']) }}">Favorites</a></li>
+                                    <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-settings']) }}">Settings</a>
+                                    </li>
+                                </ul>
+                            </li>
+                        </ul>
+                    </li>
+                    <li class="nav-item dropdown py-lg-2 me-lg-n1 me-xl-0">
+                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
+                            data-bs-trigger="hover" data-bs-auto-close="outside" aria-expanded="false">Pages</a>
+                        <ul class="dropdown-menu" style="--cz-dropdown-spacer: .875rem">
+                            <li class="dropend">
+                                <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                    data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">About</a>
+                                <ul class="dropdown-menu">
+                                    <li><a class="dropdown-item" href="{{ route('second', ['about', 'v1']) }}">About v.1</a></li>
+                                    <li><a class="dropdown-item" href="{{ route('second', ['about', 'v2']) }}">About v.2</a></li>
+                                </ul>
+                            </li>
+                            <li class="dropend">
+                                <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                    data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Blog</a>
+                                <ul class="dropdown-menu">
+                                    <li><a class="dropdown-item" href="{{ route('second', ['blog', 'grid-v1']) }}">Grid View v.1</a></li>
+                                    <li><a class="dropdown-item" href="{{ route('second', ['blog', 'grid-v2']) }}">Grid View v.2</a></li>
+                                    <li><a class="dropdown-item" href="{{ route('second', ['blog', 'list']) }}">List View</a></li>
+                                    <li><a class="dropdown-item" href="{{ route('second', ['blog', 'single-v1']) }}">Single Post v.1</a></li>
+                                    <li><a class="dropdown-item" href="{{ route('second', ['blog', 'single-v2']) }}">Single Post v.2</a></li>
+                                </ul>
+                            </li>
+                            <li class="dropend">
+                                <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                    data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                    aria-expanded="false">Contact</a>
+                                <ul class="dropdown-menu">
+                                    <li><a class="dropdown-item" href="{{ route('second', ['contact', 'v1']) }}">Contact v.1</a></li>
+                                    <li><a class="dropdown-item" href="{{ route('second', ['contact', 'v2']) }}">Contact v.2</a></li>
+                                    <li><a class="dropdown-item" href="{{ route('second', ['contact', 'v3']) }}">Contact v.3</a></li>
+                                </ul>
+                            </li>
+                            <li class="dropend">
+                                <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                    data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Help
+                                    Center</a>
+                                <ul class="dropdown-menu">
+                                    <li><a class="dropdown-item" href="{{ route('second', ['help', 'topics-v1']) }}">Help Topics v.1</a></li>
+                                    <li><a class="dropdown-item" href="{{ route('second', ['help', 'topics-v2']) }}">Help Topics v.2</a></li>
+                                    <li><a class="dropdown-item" href="{{ route('second', ['help', 'single-article-v1']) }}">Help Single
+                                            Article v.1</a></li>
+                                    <li><a class="dropdown-item" href="{{ route('second', ['help', 'single-article-v2']) }}">Help Single
+                                            Article v.2</a></li>
+                                </ul>
+                            </li>
+                            <li class="dropend">
+                                <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                    data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">404
+                                    Error</a>
+                                <ul class="dropdown-menu">
+                                    <li><a class="dropdown-item" href="{{ route('second', ['404', 'electronics']) }}">404 Electronics</a></li>
+                                    <li><a class="dropdown-item" href="{{ route('second', ['404', 'fashion']) }}">404 Fashion</a></li>
+                                    <li><a class="dropdown-item" href="{{ route('second', ['404', 'furniture']) }}">404 Furniture</a></li>
+                                    <li><a class="dropdown-item" href="{{ route('second', ['404', 'grocery']) }}">404 Grocery</a></li>
+                                </ul>
+                            </li>
+                            <li><a class="dropdown-item" href="{{ route('any', 'terms-and-conditions')}}">Terms &amp; Conditions</a>
+                            </li>
+                        </ul>
+                    </li>
+                    
+                </ul>
+            </div>
+
+            <!-- Account button (logged in state) visible on screens < 768px wide (md breakpoint) -->
+            <div class="offcanvas-header nav border-top px-0 py-3 mt-3 d-md-none">
+                <a class="nav-link hover-effect-scale justify-content-center w-100 gap-2 py-0"
+                    href="{{ route('second', ['account', 'marketplace-dashboard']) }}">
+                    <div class="btn btn-icon position-relative border rounded-circle overflow-hidden">
+                        <img src="/img/account/avatar-sm.png"
+                            class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 object-fit-cover"
+                            alt="Avatar">
+                    </div>
+                    Coderthemes
+                </a>
+            </div>
+        </nav>
+
+        <!-- Button group -->
+        <div class="d-flex align-items-center">
+
+            <!-- Theme switcher (light/dark/auto) -->
+            <div class="dropdown">
+                <button type="button"
+                    class="theme-switcher btn btn-icon btn-lg btn-outline-secondary fs-lg border-0 rounded-circle animate-scale"
+                    data-bs-toggle="dropdown" aria-expanded="false" aria-label="Toggle theme (light)">
+                    <span class="theme-icon-active d-flex animate-target">
+                        <i class="ci-sun"></i>
+                    </span>
+                </button>
+                <ul class="dropdown-menu" style="--cz-dropdown-min-width: 9rem">
+                    <li>
+                        <button type="button" class="dropdown-item active" data-bs-theme-value="light"
+                            aria-pressed="true">
+                            <span class="theme-icon d-flex fs-base me-2">
+                                <i class="ci-sun"></i>
+                            </span>
+                            <span class="theme-label">Light</span>
+                            <i class="item-active-indicator ci-check ms-auto"></i>
+                        </button>
+                    </li>
+                    <li>
+                        <button type="button" class="dropdown-item" data-bs-theme-value="dark"
+                            aria-pressed="false">
+                            <span class="theme-icon d-flex fs-base me-2">
+                                <i class="ci-moon"></i>
+                            </span>
+                            <span class="theme-label">Dark</span>
+                            <i class="item-active-indicator ci-check ms-auto"></i>
+                        </button>
+                    </li>
+                    <li>
+                        <button type="button" class="dropdown-item" data-bs-theme-value="auto"
+                            aria-pressed="false">
+                            <span class="theme-icon d-flex fs-base me-2">
+                                <i class="ci-auto"></i>
+                            </span>
+                            <span class="theme-label">Auto</span>
+                            <i class="item-active-indicator ci-check ms-auto"></i>
+                        </button>
+                    </li>
+                </ul>
+            </div>
+
+            <!-- Search toggle button -->
+            <button type="button"
+                class="btn btn-icon btn-lg fs-xl btn-outline-secondary border-0 rounded-circle animate-shake"
+                data-bs-toggle="offcanvas" data-bs-target="#searchBox" aria-controls="searchBox"
+                aria-label="Toggle search bar">
+                <i class="ci-search animate-target"></i>
+            </button>
+
+            <!-- Account button (logged in state) with dropdown visible on screens > 768px wide (md breakpoint) -->
+            <div class="dropdown d-none d-md-block mx-1">
+                <a class="btn btn-icon hover-effect-scale position-relative border rounded-circle overflow-hidden"
+                    href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"
+                    aria-label="My account">
+                    <img src="/img/account/avatar-sm.png"
+                        class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 object-fit-cover"
+                        alt="Avatar">
+                </a>
+                <ul class="dropdown-menu dropdown-menu-end" style="--cz-dropdown-spacer: .625rem">
+                    <li><span class="h6 dropdown-header">Coderthemes</span></li>
+                    <li>
+                        <a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-dashboard']) }}">
+                            <i class="ci-grid fs-base opacity-75 me-2"></i>
+                            Dashboard
+                        </a>
+                    </li>
+                    <li>
+                        <a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-products']) }}">
+                            <i class="ci-layers fs-base opacity-75 me-2"></i>
+                            Products (4)
+                        </a>
+                    </li>
+                    <li>
+                        <a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-sales']) }}">
+                            <i class="ci-pie-chart fs-base opacity-75 me-2"></i>
+                            Sales
+                        </a>
+                    </li>
+                    <li>
+                        <a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-payouts']) }}">
+                            <i class="ci-dollar-sign fs-base opacity-75 me-2"></i>
+                            Payouts
+                        </a>
+                    </li>
+                    <li>
+                        <a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-purchases']) }}">
+                            <i class="ci-shopping-bag fs-base opacity-75 me-2"></i>
+                            Purchases (6)
+                        </a>
+                    </li>
+                    <li>
+                        <a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-favorites']) }}">
+                            <i class="ci-heart fs-base opacity-75 me-2"></i>
+                            Favorites
+                        </a>
+                    </li>
+                    <li>
+                        <a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-settings']) }}">
+                            <i class="ci-settings fs-base opacity-75 me-2"></i>
+                            Settings
+                        </a>
+                    </li>
+                    <li>
+                        <hr class="dropdown-divider">
+                    </li>
+                    <li>
+                        <a class="dropdown-item" href="{{ route('second', ['account', 'signin']) }}">
+                            <i class="ci-log-out fs-base opacity-75 me-2"></i>
+                            Sign out
+                        </a>
+                    </li>
+                </ul>
+            </div>
+
+            <!-- Cart button -->
+            <button type="button"
+                class="btn btn-icon btn-lg fs-xl btn-outline-secondary position-relative border-0 rounded-circle animate-scale"
+                data-bs-toggle="offcanvas" data-bs-target="#shoppingCart" aria-controls="shoppingCart"
+                aria-label="Shopping cart">
+                <span class="position-absolute top-0 start-100 badge fs-xs text-bg-primary rounded-pill mt-1 ms-n4 z-2"
+                    style="--cz-badge-padding-y: .25em; --cz-badge-padding-x: .42em">3</span>
+                <i class="ci-shopping-bag animate-target me-1"></i>
+            </button>
+        </div>
+    </div>
+</header>
diff --git a/resources/views/layouts/partials/marketplace-sidebar.blade.php b/resources/views/layouts/partials/marketplace-sidebar.blade.php
new file mode 100644
index 0000000..843be83
--- /dev/null
+++ b/resources/views/layouts/partials/marketplace-sidebar.blade.php
@@ -0,0 +1,80 @@
+<aside class="col-lg-3">
+    <div class="d-none d-lg-block" style="margin-top: -105px"></div>
+    <div class="offcanvas-lg offcanvas-start sticky-lg-top pe-lg-0 pe-xl-4" id="accountSidebar">
+        <div class="d-none d-lg-block" style="padding-top: 105px"></div>
+        <!-- Header -->
+        <div class="offcanvas-header align-items-start d-lg-block py-3 p-lg-0">
+            <div class="d-flex align-items-start flex-lg-column gap-lg-3">
+                <!-- Visible on screens > 991px wide -->
+                <div class="ratio ratio-1x1 border rounded-circle overflow-hidden d-none d-lg-block" style="width: 86px">
+                    <img alt="Avatar" src="/img/account/avatar.png" />
+                </div>
+                <!-- Visible on screens < 992px wide -->
+                <div class="ratio ratio-1x1 border rounded-circle overflow-hidden flex-shrink-0 d-lg-none"
+                    style="width: 48px">
+                    <img alt="Avatar" src="/img/account/avatar.png" />
+                </div>
+                <div class="w-100 ps-2 ms-1 ms-lg-0 ps-lg-0">
+                    <h4 class="h6 mb-1 mb-lg-2">Coderthemes</h4>
+                    <p class="fs-sm mb-0">Digital products &amp; bespoke development</p>
+                </div>
+            </div>
+            <button aria-label="Close" class="btn-close d-lg-none mt-n2" data-bs-dismiss="offcanvas"
+                data-bs-target="#accountSidebar" type="button"></button>
+        </div>
+        <!-- Body (Navigation) -->
+        <div class="offcanvas-body d-block pt-2 pt-lg-4 pb-lg-0">
+            <nav class="list-group list-group-borderless">
+                <a class="list-group-item list-group-item-action d-flex align-items-center rounded-pill"
+                    href="{{ route('second', ['account', 'marketplace-dashboard']) }}">
+                    <i class="ci-grid fs-base opacity-75 me-2"></i>
+                    Dashboard
+                </a>
+                <a class="list-group-item list-group-item-action d-flex align-items-center rounded-pill"
+                    href="{{ route('second', ['account', 'marketplace-products']) }}">
+                    <i class="ci-layers fs-base opacity-75 me-2"></i>
+                    Products (4)
+                </a>
+                <a class="list-group-item list-group-item-action d-flex align-items-center rounded-pill"
+                    href="{{ route('second', ['account', 'marketplace-sales']) }}">
+                    <i class="ci-pie-chart fs-base opacity-75 me-2"></i>
+                    Sales
+                </a>
+                <a class="list-group-item list-group-item-action d-flex align-items-center rounded-pill"
+                    href="{{ route('second', ['account', 'marketplace-payouts']) }}">
+                    <i class="ci-dollar-sign fs-base opacity-75 me-2"></i>
+                    Payouts
+                </a>
+            </nav>
+            <h6 class="pt-4 ps-2 ms-1">User account</h6>
+            <nav class="list-group list-group-borderless">
+                <a class="list-group-item list-group-item-action d-flex align-items-center rounded-pill"
+                    href="{{ route('second', ['account', 'marketplace-purchases']) }}">
+                    <i class="ci-shopping-bag fs-base opacity-75 me-2"></i>
+                    Purchases (6)
+                </a>
+                <a class="list-group-item list-group-item-action d-flex align-items-center rounded-pill"
+                    href="{{ route('second', ['account', 'marketplace-favorites']) }}">
+                    <i class="ci-heart fs-base opacity-75 me-2"></i>
+                    Favorites
+                </a>
+                <a class="list-group-item list-group-item-action d-flex align-items-center rounded-pill"
+                    href="{{ route('second', ['account', 'marketplace-settings']) }}">
+                    <i class="ci-settings fs-base opacity-75 me-2"></i>
+                    Settings
+                </a>
+                <a class="list-group-item list-group-item-action d-flex align-items-center rounded-pill"
+                    href="{{ route('second', ['account', 'signin']) }}">
+                    <i class="ci-log-out fs-base opacity-75 me-2"></i>
+                    Log out
+                </a>
+            </nav>
+        </div>
+        <div class="offcanvas-header d-lg-block p-lg-0">
+            <button class="btn btn-dark rounded-pill w-100 animate-scale mt-lg-4" type="button">
+                <i class="ci-plus-circle fs-base animate-target me-2 ms-n1"></i>
+                Add product
+            </button>
+        </div>
+    </div>
+</aside>
diff --git a/resources/views/layouts/partials/menu-offcanvas.blade.php b/resources/views/layouts/partials/menu-offcanvas.blade.php
new file mode 100644
index 0000000..943b805
--- /dev/null
+++ b/resources/views/layouts/partials/menu-offcanvas.blade.php
@@ -0,0 +1,589 @@
+<nav class="offcanvas offcanvas-start" id="navbarNav" tabindex="-1" aria-labelledby="navbarNavLabel">
+        <div class="offcanvas-header py-3">
+            <h5 class="offcanvas-title" id="navbarNavLabel">Browse Cartzilla</h5>
+            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+        </div>
+        <div class="offcanvas-body pt-0 pb-3">
+
+            <!-- Navbar nav -->
+            <div class="accordion" id="navigation">
+
+                <!-- Categories collapse visible on screens < 992px wide (lg breakpoint) -->
+                <div class="accordion-item border-0 d-lg-none">
+                    <div class="accordion-header" id="headingCategories">
+                        <button type="button" class="accordion-button animate-underline fw-medium collapsed py-2"
+                            data-bs-toggle="collapse" data-bs-target="#categoriesMenu" aria-expanded="false"
+                            aria-controls="categoriesMenu">
+                            <i class="ci-grid fs-lg me-2"></i>
+                            <span class="d-block animate-target py-1">Categories</span>
+                        </button>
+                    </div>
+                    <div class="accordion-collapse collapse" id="categoriesMenu" aria-labelledby="headingCategories"
+                        data-bs-parent="#navigation">
+                        <div class="accordion-body pb-3">
+                            <div class="dropdown-menu show position-static d-flex flex-column gap-4 shadow-none p-4">
+                                <div>
+                                    <div class="h6">Bakery &amp; bread</div>
+                                    <ul class="nav flex-column gap-2 mt-n2">
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Shop all</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Bread</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Pastries</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Bakery cookies</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Cupcakes</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Buns &amp; rolls</a>
+                                        </li>
+                                    </ul>
+                                    <div class="h6 pt-4">Meat products</div>
+                                    <ul class="nav flex-column gap-2 mt-n2">
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Shop all</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Fresh meat</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Processed meat</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Seafood</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Poultry products</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Prepared meat</a>
+                                        </li>
+                                    </ul>
+                                </div>
+                                <div>
+                                    <div class="h6">Vegetables</div>
+                                    <ul class="nav flex-column gap-2 mt-n2">
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Shop all</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Leafy greens</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Root vegetables</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Allium vegetables</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Peppers and tomatoes</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Cruciferous</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Seasonal squashes</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Beans, peas &amp; lentils</a>
+                                        </li>
+                                    </ul>
+                                    <div class="h6 pt-4">Sauces and ketchup</div>
+                                    <ul class="nav flex-column gap-2 mt-n2">
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Shop all</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Tomato-based sauces</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Salad dressing</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Hot sauces</a>
+                                        </li>
+                                    </ul>
+                                </div>
+                                <div>
+                                    <div class="h6">Fresh fruits</div>
+                                    <ul class="nav flex-column gap-2 mt-n2">
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Shop all</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Citrus fruits</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Berries</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Tropical fruits</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Stone fruits</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Exotic fruits</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Melons</a>
+                                        </li>
+                                    </ul>
+                                    <div class="h6 pt-4">Italian dinner</div>
+                                    <ul class="nav flex-column gap-2 mt-n2">
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Shop all</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Pasta &amp; sauces</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Italian cheese</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Italian meats</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Desserts &amp; beverages</a>
+                                        </li>
+                                    </ul>
+                                </div>
+                                <div>
+                                    <div class="h6">Beverages</div>
+                                    <ul class="nav flex-column gap-2 mt-n2">
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Shop all</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Soft drinks</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Juices</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Sports &amp; energy drinks</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Tea and coffee</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Alcoholic beverages</a>
+                                        </li>
+                                    </ul>
+                                    <div class="h6 pt-4">Dairy &amp; eggs</div>
+                                    <ul class="nav flex-column gap-2 mt-n2">
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Shop all</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Chees</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Milk &amp; yogurt</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Sour cream</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Eggs</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Butter &amp; margarine</a>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Rest of the menu -->
+                <div class="accordion-item border-0">
+                    <div class="accordion-header" id="headingHome">
+                        <button type="button" class="accordion-button animate-underline fw-medium collapsed py-2"
+                            data-bs-toggle="collapse" data-bs-target="#home" aria-expanded="false" aria-controls="home">
+                            <span class="d-block animate-target py-1">Home</span>
+                        </button>
+                    </div>
+                    <div class="accordion-collapse collapse" id="home" aria-labelledby="headingHome"
+                        data-bs-parent="#navigation">
+                        <div class="accordion-body pb-3">
+                            <ul class="dropdown-menu show position-static shadow-none">
+                                <li class="hover-effect-opacity px-2 mx-n2">
+                                    <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'electronics']) }}">
+                                        <span class="fw-medium">Electronics Store</span>
+                                        <span class="d-block fs-xs text-body-secondary">Megamenu + Hero slider</span>
+                                    </a>
+                                </li>
+                                <li class="hover-effect-opacity px-2 mx-n2">
+                                    <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'fashion-v1']) }}">
+                                        <span class="fw-medium">Fashion Store v.1</span>
+                                        <span class="d-block fs-xs text-body-secondary">Hero promo slider</span>
+                                    </a>
+                                </li>
+                                <li class="hover-effect-opacity px-2 mx-n2">
+                                    <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'fashion-v2']) }}">
+                                        <span class="fw-medium">Fashion Store v.2</span>
+                                        <span class="d-block fs-xs text-body-secondary">Hero banner with hotspots</span>
+                                    </a>
+                                </li>
+                                <li class="hover-effect-opacity px-2 mx-n2">
+                                    <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'furniture']) }}">
+                                        <span class="fw-medium">Furniture Store</span>
+                                        <span class="d-block fs-xs text-body-secondary">Fancy product carousel</span>
+                                    </a>
+                                </li>
+                                <li class="hover-effect-opacity px-2 mx-n2">
+                                    <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'grocery']) }}">
+                                        <span class="fw-medium">Grocery Store</span>
+                                        <span class="d-block fs-xs text-body-secondary">Hero slider + Category cards</span>
+                                    </a>
+                                </li>
+                                <li class="hover-effect-opacity px-2 mx-n2">
+                                    <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'marketplace']) }}">
+                                        <span class="fw-medium">Marketplace</span>
+                                        <span class="d-block fs-xs text-body-secondary">Multi-vendor, digital goods</span>
+                                    </a>
+                                </li>
+                                <li class="hover-effect-opacity px-2 mx-n2">
+                                    <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'single-store']) }}">
+                                        <span class="fw-medium">Single Product Store</span>
+                                        <span class="d-block fs-xs text-body-secondary">Single product / mono brand</span>
+                                    </a>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+                <div class="accordion-item border-0">
+                    <div class="accordion-header" id="headingShop">
+                        <button type="button" class="accordion-button animate-underline fw-medium collapsed py-2"
+                            data-bs-toggle="collapse" data-bs-target="#shop" aria-expanded="false" aria-controls="shop">
+                            <span class="d-block animate-target py-1">Shop</span>
+                        </button>
+                    </div>
+                    <div class="accordion-collapse collapse" id="shop" aria-labelledby="headingShop"
+                        data-bs-parent="#navigation">
+                        <div class="accordion-body pb-3">
+                            <div class="dropdown-menu show position-static shadow-none p-4">
+                                <div class="d-flex flex-column gap-4">
+                                    <div style="min-width: 190px">
+                                        <div class="h6 mb-2">Electronics Store</div>
+                                        <ul class="nav flex-column gap-2 mt-0">
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'categories-electronics']) }}">Categories Page</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Catalog with Side Filters</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'product-grocery']) }}">Product General Info</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'product-details-electronics']) }}">Product Details</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'product-reviews-electronics']) }}">Product Reviews</a>
+                                            </li>
+                                        </ul>
+                                        <div class="h6 pt-4 mb-2">Fashion Store</div>
+                                        <ul class="nav flex-column gap-2 mt-0">
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Catalog with Side Filters</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'product-fashion']) }}">Product Page</a>
+                                            </li>
+                                        </ul>
+                                        <div class="h6 pt-4 mb-2">Furniture Store</div>
+                                        <ul class="nav flex-column gap-2 mt-0">
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'catalog-furniture']) }}">Catalog with Top Filters</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'product-furniture']) }}">Product Page</a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                    <div style="min-width: 190px">
+                                        <div class="h6 mb-2">Grocery Store</div>
+                                        <ul class="nav flex-column gap-2 mt-0">
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Catalog with Side Filters</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'product-grocery']) }}">Product Page</a>
+                                            </li>
+                                        </ul>
+                                        <div class="h6 pt-4 mb-2">Marketplace</div>
+                                        <ul class="nav flex-column gap-2 mt-0">
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'catalog-marketplace']) }}">Catalog with Top Filters</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'product-marketplace']) }}">Digital Product Page</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'marketplace']) }}">Cart / Checkout</a>
+                                            </li>
+                                        </ul>
+                                        <div class="h6 pt-4 mb-2">Checkout v.1</div>
+                                        <ul class="nav flex-column gap-2 mt-0">
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'v1-cart']) }}">Shopping Cart</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'v1-delivery-1']) }}">Delivery Info (Step 1)</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'v1-delivery-2']) }}">Delivery Info (Step 2)</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'v1-shipping']) }}">Shipping Address</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'v1-payment']) }}">Payment</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'v1-thankyou']) }}">Thank You Page</a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                    <div style="min-width: 190px">
+                                        <div class="h6 mb-2">Checkout v.2</div>
+                                        <ul class="nav flex-column gap-2 mt-0">
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'v2-cart']) }}">Shopping Cart</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'v2-delivery']) }}">Delivery Info</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'v2-pickup']) }}">Pickup from Store</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'v2-thankyou']) }}">Thank You Page</a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="accordion-item border-0">
+                    <div class="accordion-header" id="headingAccount">
+                        <button type="button" class="accordion-button animate-underline fw-medium collapsed py-2"
+                            data-bs-toggle="collapse" data-bs-target="#account" aria-expanded="false"
+                            aria-controls="account">
+                            <span class="d-block animate-target py-1">Account</span>
+                        </button>
+                    </div>
+                    <div class="accordion-collapse collapse" id="account" aria-labelledby="headingAccount"
+                        data-bs-parent="#navigation">
+                        <div class="accordion-body pb-3">
+                            <ul class="dropdown-menu show position-static shadow-none">
+                                <li class="dropdown">
+                                    <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                        data-bs-toggle="dropdown" aria-expanded="false">Auth Pages</a>
+                                    <ul class="dropdown-menu position-static transform-none shadow-none">
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'signin']) }}">Sign In</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'signup']) }}">Sign Up</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'password-recovery']) }}">Password
+                                                Recovery</a></li>
+                                    </ul>
+                                </li>
+                                <li class="dropdown">
+                                    <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                        data-bs-toggle="dropdown" aria-expanded="false">Shop User</a>
+                                    <ul class="dropdown-menu position-static transform-none shadow-none">
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'orders']) }}">Orders History</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'wishlist']) }}">Wishlist</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'payment']) }}">Payment Methods</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'reviews']) }}">My Reviews</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'info']) }}">Personal Info</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'addresses']) }}">Addresses</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'notifications']) }}">Notifications</a>
+                                        </li>
+                                    </ul>
+                                </li>
+                                <li class="dropdown">
+                                    <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                        data-bs-toggle="dropdown" aria-expanded="false">Marketplace User</a>
+                                    <ul class="dropdown-menu position-static transform-none shadow-none">
+                                        <li><a class="dropdown-item"
+                                                href="{{ route('second', ['account', 'marketplace-dashboard']) }}">Dashboard</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-products']) }}">Products</a>
+                                        </li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-sales']) }}">Sales</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-payouts']) }}">Payouts</a>
+                                        </li>
+                                        <li><a class="dropdown-item"
+                                                href="{{ route('second', ['account', 'marketplace-purchases']) }}">Purchases</a></li>
+                                        <li><a class="dropdown-item"
+                                                href="{{ route('second', ['account', 'marketplace-favorites']) }}">Favorites</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-settings']) }}">Settings</a>
+                                        </li>
+                                    </ul>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+                <div class="accordion-item border-0">
+                    <div class="accordion-header" id="headingPages">
+                        <button type="button" class="accordion-button animate-underline fw-medium collapsed py-2"
+                            data-bs-toggle="collapse" data-bs-target="#pages" aria-expanded="false"
+                            aria-controls="pages">
+                            <span class="d-block animate-target py-1">Pages</span>
+                        </button>
+                    </div>
+                    <div class="accordion-collapse collapse" id="pages" aria-labelledby="headingPages"
+                        data-bs-parent="#navigation">
+                        <div class="accordion-body pb-3">
+                            <ul class="dropdown-menu show position-static shadow-none">
+                                <li class="dropdown">
+                                    <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                        data-bs-toggle="dropdown" aria-expanded="false">About</a>
+                                    <ul class="dropdown-menu position-static transform-none shadow-none">
+                                        <li><a class="dropdown-item" href="{{ route('second', ['about', 'v1']) }}">About v.1</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['about', 'v2']) }}">About v.2</a></li>
+                                    </ul>
+                                </li>
+                                <li class="dropdown">
+                                    <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                        data-bs-toggle="dropdown" aria-expanded="false">Blog</a>
+                                    <ul class="dropdown-menu position-static transform-none shadow-none">
+                                        <li><a class="dropdown-item" href="{{ route('second', ['blog', 'grid-v1']) }}">Grid View v.1</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['blog', 'grid-v2']) }}">Grid View v.2</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['blog', 'list']) }}">List View</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['blog', 'single-v1']) }}">Single Post v.1</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['blog', 'single-v2']) }}">Single Post v.2</a></li>
+                                    </ul>
+                                </li>
+                                <li class="dropdown">
+                                    <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                        data-bs-toggle="dropdown" aria-expanded="false">Contact</a>
+                                    <ul class="dropdown-menu position-static transform-none shadow-none">
+                                        <li><a class="dropdown-item" href="{{ route('second', ['contact', 'v1']) }}">Contact v.1</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['contact', 'v2']) }}">Contact v.2</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['contact', 'v3']) }}">Contact v.3</a></li>
+                                    </ul>
+                                </li>
+                                <li class="dropdown">
+                                    <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                        data-bs-toggle="dropdown" aria-expanded="false">Help Center</a>
+                                    <ul class="dropdown-menu position-static transform-none shadow-none">
+                                        <li><a class="dropdown-item" href="{{ route('second', ['help', 'topics-v1']) }}">Help Topics v.1</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['help', 'topics-v2']) }}">Help Topics v.2</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['help', 'single-article-v1']) }}">Help Single
+                                                Article v.1</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['help', 'single-article-v2']) }}">Help Single
+                                                Article v.2</a></li>
+                                    </ul>
+                                </li>
+                                <li class="dropdown">
+                                    <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                        data-bs-toggle="dropdown" aria-expanded="false">404 Error</a>
+                                    <ul class="dropdown-menu position-static transform-none shadow-none">
+                                        <li><a class="dropdown-item" href="{{ route('second', ['404', 'electronics']) }}">404 Electronics</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['404', 'fashion']) }}">404 Fashion</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['404', 'furniture']) }}">404 Furniture</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['404', 'grocery']) }}">404 Grocery</a></li>
+                                    </ul>
+                                </li>
+                                <li><a class="dropdown-item" href="term{{ route('any', 'terms-and-conditions')}}">Terms &amp; Conditions</a>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>            
+        </div>
+
+        <!-- Account button visible on screens < 768px wide (md breakpoint) -->
+        <div class="offcanvas-header flex-column align-items-start d-md-none">
+            <a class="btn btn-lg btn-outline-secondary w-100 rounded-pill" href="{{ route('second', ['account', 'signin']) }}">
+                <i class="ci-user fs-lg ms-n1 me-2"></i>
+                Account
+            </a>
+        </div>
+    </nav>
\ No newline at end of file
diff --git a/resources/views/layouts/partials/navbar.blade.php b/resources/views/layouts/partials/navbar.blade.php
new file mode 100644
index 0000000..d406392
--- /dev/null
+++ b/resources/views/layouts/partials/navbar.blade.php
@@ -0,0 +1,2238 @@
+<header class="navbar navbar-expand-lg navbar-dark bg-dark d-block z-fixed p-0" data-sticky-navbar='{"offset": 500}'>
+    <div class="container d-block py-1 py-lg-3" data-bs-theme="dark">
+        <div class="navbar-stuck-hide pt-1"></div>
+        <div class="row flex-nowrap align-items-center g-0">
+            <div class="col col-lg-3 d-flex align-items-center">
+
+                <!-- Mobile offcanvas menu toggler (Hamburger) -->
+                <button type="button" class="navbar-toggler me-4 me-lg-0" data-bs-toggle="offcanvas"
+                    data-bs-target="#navbarNav" aria-controls="navbarNav" aria-label="Toggle navigation">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+
+                <!-- Navbar brand (Logo) -->
+                <a href="/" class="navbar-brand me-0">
+                    <span class="d-none d-sm-flex flex-shrink-0 text-primary me-2">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36">
+                            <path
+                                d="M36 18.01c0 8.097-5.355 14.949-12.705 17.2a18.12 18.12 0 0 1-5.315.79C9.622 36 2.608 30.313.573 22.611.257 21.407.059 20.162 0 18.879v-1.758c.02-.395.059-.79.099-1.185.099-.908.277-1.817.514-2.686C2.687 5.628 9.682 0 18 0c5.572 0 10.551 2.528 13.871 6.517 1.502 1.797 2.648 3.91 3.359 6.201.494 1.659.771 3.436.771 5.292z"
+                                fill="currentColor" />
+                            <g fill="#fff">
+                                <path
+                                    d="M17.466 21.624c-.514 0-.988-.316-1.146-.829-.198-.632.138-1.303.771-1.501l7.666-2.469-1.205-8.254-13.317 4.621a1.19 1.19 0 0 1-1.521-.75 1.19 1.19 0 0 1 .751-1.521l13.89-4.818c.553-.197 1.166-.138 1.64.158a1.82 1.82 0 0 1 .85 1.284l1.344 9.183c.138.987-.494 1.994-1.482 2.33l-7.864 2.528-.375.04zm7.31.138c-.178-.632-.85-1.007-1.482-.81l-5.177 1.58c-2.331.79-3.28.02-3.418-.099l-6.56-8.412a4.25 4.25 0 0 0-4.406-1.758l-3.122.987c-.237.889-.415 1.777-.514 2.686l4.228-1.363a1.84 1.84 0 0 1 1.857.81l6.659 8.551c.751.948 2.015 1.323 3.359 1.323.909 0 1.857-.178 2.687-.474l5.078-1.54c.632-.178 1.008-.829.81-1.481z" />
+                                <use href="#czlogo" />
+                                <use href="#czlogo" x="8.516" y="-2.172" />
+                            </g>
+                            <defs>
+                                <path id="czlogo"
+                                    d="M18.689 28.654a1.94 1.94 0 0 1-1.936 1.935 1.94 1.94 0 0 1-1.936-1.935 1.94 1.94 0 0 1 1.936-1.935 1.94 1.94 0 0 1 1.936 1.935z" />
+                            </defs>
+                        </svg>
+                    </span>
+                    Cartzilla
+                </a>
+            </div>
+            <div class="col col-lg-9 d-flex align-items-center justify-content-end">
+
+                <!-- Search visible on screens > 991px wide (lg breakpoint) -->
+                <div class="position-relative flex-fill d-none d-lg-block pe-4 pe-xl-5">
+                    <i class="ci-search position-absolute top-50 translate-middle-y d-flex fs-lg text-white ms-3"></i>
+                    <input type="search" class="form-control form-control-lg form-icon-start border-white rounded-pill"
+                        placeholder="Search the products">
+                </div>
+
+                <!-- Sale link visible on screens > 1200px wide (xl breakpoint) -->
+                <a class="d-none d-xl-flex align-items-center text-decoration-none animate-shake navbar-stuck-hide me-3 me-xl-4 me-xxl-5"
+                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">
+                    <div
+                        class="btn btn-icon btn-lg fs-lg text-primary bg-body-secondary bg-opacity-75 pe-none rounded-circle">
+                        <i class="ci-percent animate-target"></i>
+                    </div>
+                    <div class="ps-2 text-nowrap">
+                        <div class="fs-xs text-body">Only this month</div>
+                        <div class="fw-medium text-white">Super Sale 20%</div>
+                    </div>
+                </a>
+
+                <!-- Button group -->
+                <div class="d-flex align-items-center">
+
+                    <!-- Navbar stuck nav toggler -->
+                    <button type="button" class="navbar-toggler d-none navbar-stuck-show me-3"
+                        data-bs-toggle="collapse" data-bs-target="#stuckNav" aria-controls="stuckNav"
+                        aria-expanded="false" aria-label="Toggle navigation in navbar stuck state">
+                        <span class="navbar-toggler-icon"></span>
+                    </button>
+
+                    <!-- Theme switcher (light/dark/auto) -->
+                    <div class="dropdown">
+                        <button type="button"
+                            class="theme-switcher btn btn-icon btn-lg btn-outline-secondary fs-lg border-0 rounded-circle animate-scale"
+                            data-bs-toggle="dropdown" aria-expanded="false" aria-label="Toggle theme (light)">
+                            <span class="theme-icon-active d-flex animate-target">
+                                <i class="ci-sun"></i>
+                            </span>
+                        </button>
+                        <ul class="dropdown-menu" style="--cz-dropdown-min-width: 9rem">
+                            <li>
+                                <button type="button" class="dropdown-item active" data-bs-theme-value="light"
+                                    aria-pressed="true">
+                                    <span class="theme-icon d-flex fs-base me-2">
+                                        <i class="ci-sun"></i>
+                                    </span>
+                                    <span class="theme-label">Light</span>
+                                    <i class="item-active-indicator ci-check ms-auto"></i>
+                                </button>
+                            </li>
+                            <li>
+                                <button type="button" class="dropdown-item" data-bs-theme-value="dark"
+                                    aria-pressed="false">
+                                    <span class="theme-icon d-flex fs-base me-2">
+                                        <i class="ci-moon"></i>
+                                    </span>
+                                    <span class="theme-label">Dark</span>
+                                    <i class="item-active-indicator ci-check ms-auto"></i>
+                                </button>
+                            </li>
+                            <li>
+                                <button type="button" class="dropdown-item" data-bs-theme-value="auto"
+                                    aria-pressed="false">
+                                    <span class="theme-icon d-flex fs-base me-2">
+                                        <i class="ci-auto"></i>
+                                    </span>
+                                    <span class="theme-label">Auto</span>
+                                    <i class="item-active-indicator ci-check ms-auto"></i>
+                                </button>
+                            </li>
+                        </ul>
+                    </div>
+
+                    <!-- Search toggle button visible on screens < 992px wide (lg breakpoint) -->
+                    <button type="button"
+                        class="btn btn-icon btn-lg fs-xl btn-outline-secondary border-0 rounded-circle animate-shake d-lg-none"
+                        data-bs-toggle="collapse" data-bs-target="#searchBar" aria-expanded="false"
+                        aria-controls="searchBar" aria-label="Toggle search bar">
+                        <i class="ci-search animate-target"></i>
+                    </button>
+
+                    @if (isset($wishlist))
+                        <!-- Account button visible on screens > 768px wide (md breakpoint) -->
+                        <a class="btn btn-icon btn-lg fs-lg btn-outline-secondary border-0 rounded-circle animate-shake d-none d-md-inline-flex"
+                            href="{{ route('second', ['account', 'signin']) }}">
+                            <i class="ci-user animate-target"></i>
+                            <span class="visually-hidden">Account</span>
+                        </a>
+
+                        <!-- Wishlist button visible on screens > 768px wide (md breakpoint) -->
+                        <a class="btn btn-icon btn-lg fs-lg btn-outline-secondary border-0 rounded-circle animate-pulse d-none d-md-inline-flex"
+                            href="{{ route('second', ['account', 'wishlist']) }}">
+                            <i class="ci-heart animate-target"></i>
+                            <span class="visually-hidden">Wishlist</span>
+                        </a>
+                    @endif
+
+                    @if (isset($account))
+                        <!-- Account button logged in state visible on screens > 768px wide (md breakpoint) -->
+                        <div class="position-relative" id="accountBtn">
+                            <a class="btn btn-icon btn-lg btn-secondary animate-scale fs-5 fw-normal position-relative rounded-circle ms-2 d-none d-md-inline-flex"
+                                href="{{ route('second', ['account', 'orders']) }}" data-bs-toggle="tooltip" data-bs-placement="bottom"
+                                data-bs-custom-class="tooltip-sm text-nowrap" data-bs-container="#accountBtn"
+                                title="Susan Gardner">
+                                <span class="animate-target">S</span>
+                            </a>
+                        </div>
+                    @endif
+
+                    <!-- Cart button -->
+                    <button type="button"
+                        class="btn btn-icon btn-lg btn-secondary position-relative rounded-circle ms-2"
+                        data-bs-toggle="offcanvas" data-bs-target="#shoppingCart" aria-controls="shoppingCart"
+                        aria-label="Shopping cart">
+                        <span
+                            class="position-absolute top-0 start-100 mt-n1 ms-n3 badge text-bg-success border border-3 border-dark rounded-pill"
+                            style="--cz-badge-padding-y: .25em; --cz-badge-padding-x: .42em">3</span>
+                        <span
+                            class="position-absolute top-0 start-0 d-flex align-items-center justify-content-center w-100 h-100 rounded-circle animate-slide-end fs-lg">
+                            <i class="ci-shopping-cart animate-target ms-n1"></i>
+                        </span>
+                    </button>
+                </div>
+            </div>
+        </div>
+        <div class="navbar-stuck-hide pb-1"></div>
+    </div>
+
+    <!-- Search visible on screens < 992px wide (lg breakpoint). It is hidden inside collapse by default -->
+    <div class="collapse position-absolute top-100 z-2 w-100 bg-dark d-lg-none" id="searchBar">
+        <div class="container position-relative my-3" data-bs-theme="dark">
+            <i class="ci-search position-absolute top-50 translate-middle-y d-flex fs-lg text-white ms-3"></i>
+            <input type="search" class="form-control form-icon-start border-white rounded-pill"
+                placeholder="Search the products" data-autofocus="collapse">
+        </div>
+    </div>
+
+    <!-- Main navigation that turns into offcanvas on screens < 992px wide (lg breakpoint) -->
+    <div class="collapse navbar-stuck-hide" id="stuckNav">
+        <nav class="offcanvas offcanvas-start" id="navbarNav" tabindex="-1" aria-labelledby="navbarNavLabel">
+            <div class="offcanvas-header py-3">
+                <h5 class="offcanvas-title" id="navbarNavLabel">Browse Cartzilla</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+            </div>
+            <div class="offcanvas-body py-3 py-lg-0">
+                <div class="container px-0 px-lg-3">
+                    <div class="row">
+
+                        <!-- Categories mega menu -->
+                        <div class="col-lg-3">
+                            <div class="navbar-nav">
+                                <div class="dropdown w-100">
+
+                                    <!-- Buttton visible on screens > 991px wide (lg breakpoint) -->
+                                    <div class="cursor-pointer d-none d-lg-block" data-bs-toggle="dropdown"
+                                        data-bs-trigger="hover" data-bs-theme="dark">
+                                        <a class="position-absolute top-0 start-0 w-100 h-100"
+                                            href="{{ route('second', ['shop', 'categories-electronics']) }}">
+                                            <span class="visually-hidden">Categories</span>
+                                        </a>
+                                        <button type="button"
+                                            class="btn btn-lg btn-secondary dropdown-toggle w-100 rounded-bottom-0 justify-content-start pe-none">
+                                            <i class="ci-grid fs-lg"></i>
+                                            <span class="ms-2 me-auto">Categories</span>
+                                        </button>
+                                    </div>
+
+                                    <!-- Buttton visible on screens < 992px wide (lg breakpoint) -->
+                                    <button type="button"
+                                        class="btn btn-lg btn-secondary dropdown-toggle w-100 justify-content-start d-lg-none mb-2"
+                                        data-bs-toggle="dropdown" data-bs-auto-close="outside">
+                                        <i class="ci-grid fs-lg"></i>
+                                        <span class="ms-2 me-auto">Categories</span>
+                                    </button>
+
+                                    <!-- Mega menu -->
+                                    <ul class="dropdown-menu w-100 rounded-top-0 rounded-bottom-4 py-1 p-lg-1"
+                                        style="--cz-dropdown-spacer: 0; --cz-dropdown-item-padding-y: .625rem; --cz-dropdown-item-spacer: 0">
+                                        <li class="d-lg-none pt-2">
+                                            <a class="dropdown-item fw-medium"
+                                                href="{{ route('second', ['shop', 'categories-electronics']) }}">
+                                                <i class="ci-grid fs-xl opacity-60 pe-1 me-2"></i>
+                                                All Categories
+                                                <i class="ci-chevron-right fs-base ms-auto me-n1"></i>
+                                            </a>
+                                        </li>
+                                        <li class="dropend position-static">
+                                            <div class="position-relative rounded pt-2 pb-1 px-lg-2"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover">
+                                                <a class="dropdown-item fw-medium stretched-link d-none d-lg-flex"
+                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">
+                                                    <i class="ci-computer fs-xl opacity-60 pe-1 me-2"></i>
+                                                    <span class="text-truncate">Computers &amp; Accessories</span>
+                                                    <i class="ci-chevron-right fs-base ms-auto me-n1"></i>
+                                                </a>
+                                                <div
+                                                    class="dropdown-item fw-medium text-wrap stretched-link d-lg-none">
+                                                    <i class="ci-computer fs-xl opacity-60 pe-1 me-2"></i>
+                                                    Computers &amp; Accessories
+                                                    <i class="ci-chevron-down fs-base ms-auto me-n1"></i>
+                                                </div>
+                                            </div>
+                                            <div class="dropdown-menu rounded-4 p-4"
+                                                style="top: 1rem; height: calc(100% - .1875rem); --cz-dropdown-spacer: .3125rem; animation: none;">
+                                                <div class="d-flex flex-column flex-lg-row h-100 gap-4">
+                                                    <div style="min-width: 194px">
+                                                        <div class="d-flex w-100">
+                                                            <a class="animate-underline animate-target d-inline h6 text-dark-emphasis text-decoration-none text-truncate"
+                                                                href="{{ route('second', ['shop', 'catalog-electronics']) }}">Computers</a>
+                                                        </div>
+                                                        <ul class="nav flex-column gap-2 mt-n2">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Laptops &amp;
+                                                                    Tablets</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Desktop
+                                                                    Computers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">External
+                                                                    Components</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Interal
+                                                                    Components</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Networking
+                                                                    Products (NAS)</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Single Board
+                                                                    Computers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Desktop
+                                                                    Barebones</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div style="min-width: 194px">
+                                                        <div class="d-flex w-100">
+                                                            <a class="animate-underline animate-target d-inline h6 text-dark-emphasis text-decoration-none text-truncate"
+                                                                href="{{ route('second', ['shop', 'catalog-electronics']) }}">Accessories</a>
+                                                        </div>
+                                                        <ul class="nav flex-column gap-2 mt-n2">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Monitors</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Bags, Cases
+                                                                    &amp; Sleeves</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Batteries</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Charges &amp;
+                                                                    Adapters</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Cooling
+                                                                    Pads</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Mounts</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Replacement
+                                                                    Screens</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Security
+                                                                    Locks</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Stands</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="d-none d-lg-block">
+                                                        <div class="d-none d-xl-block" style="width: 284px"></div>
+                                                        <div class="d-xl-none" style="width: 240px"></div>
+                                                        <div
+                                                            class="position-relative d-flex flex-column justify-content-center h-100 bg-body-secondary rounded-5 py-4 px-3">
+                                                            <div class="text-center px-2">
+                                                                <span
+                                                                    class="badge bg-danger bg-opacity-10 text-danger fs-sm rounded-pill mb-2">Save
+                                                                    up to $400</span>
+                                                                <div class="fs-sm text-light-emphasis mb-2">Starts from
+                                                                    <del>$1,599.00</del> $1,399.00
+                                                                </div>
+                                                                <div class="h2 mb-4">Surface Laptop Studio</div>
+                                                            </div>
+                                                            <img src="/img/mega-menu/electronics/01.png"
+                                                                width="252" alt="Surface Laptop Studio">
+                                                            <div class="text-center mt-4">
+                                                                <a class="btn btn-sm btn-primary stretched-link"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Shop now</a>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </li>
+                                        <li class="dropend position-static">
+                                            <div class="position-relative rounded pb-1 px-lg-2" tabindex="0"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover">
+                                                <a class="dropdown-item fw-medium stretched-link d-none d-lg-flex"
+                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">
+                                                    <i class="ci-smartphone-2 fs-xl opacity-60 pe-1 me-2"></i>
+                                                    <span class="text-truncate">Smartphones &amp; Tablets</span>
+                                                    <i class="ci-chevron-right fs-base ms-auto me-n1"></i>
+                                                </a>
+                                                <div class="dropdown-item fw-medium stretched-link d-lg-none">
+                                                    <i class="ci-smartphone-2 fs-xl opacity-60 pe-1 me-2"></i>
+                                                    Smartphones &amp; Tablets
+                                                    <i class="ci-chevron-down fs-base ms-auto me-n1"></i>
+                                                </div>
+                                            </div>
+                                            <div class="dropdown-menu rounded-4 p-4"
+                                                style="top: 1rem; height: calc(100% - .1875rem); --cz-dropdown-spacer: .3125rem; animation: none;">
+                                                <div class="d-flex flex-column flex-lg-row h-100 gap-4">
+                                                    <div style="min-width: 194px">
+                                                        <div class="d-flex w-100">
+                                                            <a class="animate-underline animate-target d-inline h6 text-dark-emphasis text-decoration-none text-truncate"
+                                                                href="{{ route('second', ['shop', 'catalog-electronics']) }}">Smartphones</a>
+                                                        </div>
+                                                        <ul class="nav flex-column gap-2 mt-n2">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Apple
+                                                                    iPhone</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Google
+                                                                    Pixel</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Android
+                                                                    Smartphones</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Phablets</a>
+                                                            </li>
+                                                        </ul>
+                                                        <div class="d-flex w-100 pt-4">
+                                                            <a class="animate-underline animate-target d-inline h6 text-dark-emphasis text-decoration-none text-truncate"
+                                                                href="{{ route('second', ['shop', 'catalog-electronics']) }}">Tablets</a>
+                                                        </div>
+                                                        <ul class="nav flex-column gap-2 mt-n2">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Apple iPad</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Android
+                                                                    Tablets</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Tablets with
+                                                                    Keyboard</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div style="min-width: 194px">
+                                                        <div class="d-flex w-100">
+                                                            <a class="animate-underline animate-target d-inline h6 text-dark-emphasis text-decoration-none text-truncate"
+                                                                href="{{ route('second', ['shop', 'catalog-electronics']) }}">Accessories</a>
+                                                        </div>
+                                                        <ul class="nav flex-column gap-2 mt-n2">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Accessory
+                                                                    Kits</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Batteries
+                                                                    &amp; Battery Packs</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Bags &amp;
+                                                                    Cases</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Cables</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Car
+                                                                    Accessories</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Charges &amp;
+                                                                    Power Adapters</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">FM
+                                                                    Transmitters</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Lens
+                                                                    Attachments</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Mounts &amp;
+                                                                    Standsv</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Repair
+                                                                    Kits</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Replacement
+                                                                    Parts</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Styluses</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="d-none d-lg-block">
+                                                        <div class="d-none d-xl-block" style="width: 284px"></div>
+                                                        <div class="d-xl-none" style="width: 240px"></div>
+                                                        <div
+                                                            class="position-relative d-flex flex-column justify-content-center h-100 bg-body-secondary rounded-5 py-4 px-3">
+                                                            <div class="text-center px-2">
+                                                                <i class="ci-apple fs-1 text-dark-emphasis mb-2"></i>
+                                                                <div class="fs-sm text-light-emphasis mb-2">Deal of the
+                                                                    week</div>
+                                                                <div class="h2 mb-4">iPad Pro M1</div>
+                                                            </div>
+                                                            <img src="/img/mega-menu/electronics/02.png"
+                                                                width="252" alt="iPad Pro">
+                                                            <div class="text-center mt-4">
+                                                                <a class="btn btn-sm btn-primary stretched-link"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Shop now</a>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </li>
+                                        <li class="dropend position-static">
+                                            <div class="position-relative rounded pb-1 px-lg-2" tabindex="0"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover">
+                                                <a class="dropdown-item fw-medium stretched-link d-none d-lg-flex"
+                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">
+                                                    <i class="ci-monitor-2 fs-xl opacity-60 pe-1 me-2"></i>
+                                                    <span class="text-truncate">TV, Video &amp; Audio</span>
+                                                    <i class="ci-chevron-right fs-base ms-auto me-n1"></i>
+                                                </a>
+                                                <div class="dropdown-item fw-medium stretched-link d-lg-none">
+                                                    <i class="ci-monitor-2 fs-xl opacity-60 pe-1 me-2"></i>
+                                                    TV, Video &amp; Audio
+                                                    <i class="ci-chevron-down fs-base ms-auto me-n1"></i>
+                                                </div>
+                                            </div>
+                                            <div class="dropdown-menu rounded-4 p-4"
+                                                style="top: 1rem; height: calc(100% - .1875rem); --cz-dropdown-spacer: .3125rem; animation: none;">
+                                                <div class="d-flex flex-column flex-lg-row h-100 gap-lg-4">
+                                                    <div style="min-width: 194px">
+                                                        <div class="d-flex w-100">
+                                                            <a class="animate-underline animate-target d-inline h6 text-dark-emphasis text-decoration-none text-truncate"
+                                                                href="{{ route('second', ['shop', 'catalog-electronics']) }}">TV, Video &amp;
+                                                                Audio</a>
+                                                        </div>
+                                                        <ul class="nav flex-column gap-2 mt-n2">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">TV Stes</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Home Theater
+                                                                    Systems</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">DVD Players
+                                                                    &amp; Recorders</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Blue-ray
+                                                                    Players &amp; Recorders</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">HD DVD Players
+                                                                    &amp; Recorders</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">DVD-VCR
+                                                                    Combos</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">DTV
+                                                                    Converters</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">AV
+                                                                    Receivers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">AV
+                                                                    Amplifiers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Projectors</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Projection
+                                                                    Screens</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Satelite
+                                                                    Television</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">TV-DTD
+                                                                    Combos</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Sound
+                                                                    Systems</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div style="min-width: 194px">
+                                                        <ul class="nav flex-column gap-2 mt-2 mt-lg-0">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Home Cinema
+                                                                    Systems</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Streaming
+                                                                    Media Players</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">VCRs</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Video
+                                                                    Glasses</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Lens
+                                                                    Attachments</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Subwoofers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Sound
+                                                                    Boosters</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="d-none d-lg-block">
+                                                        <div class="d-none d-xl-block" style="width: 284px"></div>
+                                                        <div class="d-xl-none" style="width: 240px"></div>
+                                                        <div
+                                                            class="position-relative d-flex flex-column justify-content-center h-100 bg-body-secondary rounded-5 py-4 px-3">
+                                                            <div class="text-center px-2">
+                                                                <div class="fs-sm text-light-emphasis mb-2">Best deal!
+                                                                    Save up to <span class="fw-semibold">$500</span>
+                                                                </div>
+                                                                <div class="h2 mb-4">LG OLED 4K Smart TV</div>
+                                                            </div>
+                                                            <img src="/img/mega-menu/electronics/03.png"
+                                                                width="252" alt="Smart TV">
+                                                            <div class="text-center mt-4">
+                                                                <a class="btn btn-sm btn-primary stretched-link"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Shop now</a>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </li>
+                                        <li class="dropend position-static">
+                                            <div class="position-relative rounded pb-1 px-lg-2" tabindex="0"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover">
+                                                <a class="dropdown-item fw-medium stretched-link d-none d-lg-flex"
+                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">
+                                                    <i class="ci-speaker-2 fs-xl opacity-60 pe-1 me-2"></i>
+                                                    <span class="text-truncate">Speakers &amp; Home Music</span>
+                                                    <i class="ci-chevron-right fs-base ms-auto me-n1"></i>
+                                                </a>
+                                                <div class="dropdown-item fw-medium stretched-link d-lg-none">
+                                                    <i class="ci-speaker-2 fs-xl opacity-60 pe-1 me-2"></i>
+                                                    Speakers &amp; Home Music
+                                                    <i class="ci-chevron-down fs-base ms-auto me-n1"></i>
+                                                </div>
+                                            </div>
+                                            <div class="dropdown-menu rounded-4 p-4"
+                                                style="top: 1rem; height: calc(100% - .1875rem); --cz-dropdown-spacer: .3125rem; animation: none;">
+                                                <div class="d-flex flex-column flex-lg-row h-100 gap-4">
+                                                    <div style="min-width: 194px">
+                                                        <div class="d-flex w-100">
+                                                            <a class="animate-underline animate-target d-inline h6 text-dark-emphasis text-decoration-none text-truncate"
+                                                                href="{{ route('second', ['shop', 'catalog-electronics']) }}">Speakers</a>
+                                                        </div>
+                                                        <ul class="nav flex-column gap-2 mt-n2">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Smart
+                                                                    Speakers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Bluetooth
+                                                                    Speakers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Bookshelf
+                                                                    Speakers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Ceiling &amp;
+                                                                    In-Wall Speakers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Center-Channel
+                                                                    Speakers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Floorstanding
+                                                                    Speakers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Outdoor
+                                                                    Speakers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Satellite
+                                                                    Speakers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Sound Bars</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Surround Sound
+                                                                    Systems</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div style="min-width: 194px">
+                                                        <div class="d-flex w-100">
+                                                            <a class="animate-underline animate-target d-inline h6 text-dark-emphasis text-decoration-none text-truncate"
+                                                                href="{{ route('second', ['shop', 'catalog-electronics']) }}">Home Audio</a>
+                                                        </div>
+                                                        <ul class="nav flex-column gap-2 mt-n2">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Home
+                                                                    Theater</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Wireless &amp;
+                                                                    Streaming Audio</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Stereo System
+                                                                    Components</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Compact Radios
+                                                                    &amp; Stereos</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Home Audio
+                                                                    Accessories</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Subwoofers</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="d-none d-lg-block">
+                                                        <div class="d-none d-xl-block" style="width: 284px"></div>
+                                                        <div class="d-xl-none" style="width: 240px"></div>
+                                                        <div
+                                                            class="position-relative d-flex flex-column justify-content-center h-100 bg-body-secondary rounded-5 py-4 px-3">
+                                                            <div class="text-center px-2">
+                                                                <i class="ci-google fs-2 text-dark-emphasis mb-3"></i>
+                                                                <div class="fs-sm text-light-emphasis mb-2">Deal of the
+                                                                    week</div>
+                                                                <div class="h2 mb-4">Nest Audio</div>
+                                                            </div>
+                                                            <img src="/img/mega-menu/electronics/04.png"
+                                                                width="252" alt="Nest Audio">
+                                                            <div class="text-center mt-4">
+                                                                <a class="btn btn-sm btn-primary stretched-link"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Shop now</a>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </li>
+                                        <li class="dropend position-static">
+                                            <div class="position-relative rounded pb-1 px-lg-2" tabindex="0"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover">
+                                                <a class="dropdown-item fw-medium stretched-link d-none d-lg-flex"
+                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">
+                                                    <i class="ci-camera-2 fs-xl opacity-60 pe-1 me-2"></i>
+                                                    <span class="text-truncate">Cameras, Photo &amp; Video</span>
+                                                    <i class="ci-chevron-right fs-base ms-auto me-n1"></i>
+                                                </a>
+                                                <div class="dropdown-item fw-medium stretched-link d-lg-none">
+                                                    <i class="ci-camera-2 fs-xl opacity-60 pe-1 me-2"></i>
+                                                    Cameras, Photo &amp; Video
+                                                    <i class="ci-chevron-down fs-base ms-auto me-n1"></i>
+                                                </div>
+                                            </div>
+                                            <div class="dropdown-menu rounded-4 p-4"
+                                                style="top: 1rem; height: calc(100% - .1875rem); --cz-dropdown-spacer: .3125rem; animation: none;">
+                                                <div class="d-flex flex-column flex-lg-row h-100 gap-4">
+                                                    <div style="min-width: 194px">
+                                                        <div class="d-flex w-100">
+                                                            <a class="animate-underline animate-target d-inline h6 text-dark-emphasis text-decoration-none text-truncate"
+                                                                href="{{ route('second', ['shop', 'catalog-electronics']) }}">Cameras &amp;
+                                                                Lenses</a>
+                                                        </div>
+                                                        <ul class="nav flex-column gap-2 mt-n2">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Point &amp;
+                                                                    Shoot Cameras</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">DSLR
+                                                                    Cameras</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Mirrorless
+                                                                    Cameras</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Body Mounted
+                                                                    Cameras</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Camcorders</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Camcorder
+                                                                    Lenses</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Camera
+                                                                    Lenses</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Macro &amp;
+                                                                    Ringlight Flashes</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Shoe Mount
+                                                                    Flashes</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Tripods &amp;
+                                                                    Monopods</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Video
+                                                                    Studio</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div style="min-width: 194px">
+                                                        <div class="d-flex w-100">
+                                                            <a class="animate-underline animate-target d-inline h6 text-dark-emphasis text-decoration-none text-truncate"
+                                                                href="{{ route('second', ['shop', 'catalog-electronics']) }}">Accessories</a>
+                                                        </div>
+                                                        <ul class="nav flex-column gap-2 mt-n2">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Bags &amp;
+                                                                    Cases</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Binoculars
+                                                                    &amp; Scopes</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Batteries
+                                                                    &amp; Chargers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Cables &amp;
+                                                                    Cords</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Camcorder
+                                                                    Accessories</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Cleaning
+                                                                    Equipment</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Protector
+                                                                    Foils</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Filters &amp;
+                                                                    Accessories</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Remote
+                                                                    Controls</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Rain
+                                                                    Covers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Viewfinders</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="d-none d-lg-block">
+                                                        <div class="d-none d-xl-block" style="width: 284px"></div>
+                                                        <div class="d-xl-none" style="width: 240px"></div>
+                                                        <div
+                                                            class="position-relative d-flex flex-column justify-content-center h-100 bg-body-secondary rounded-5 py-4 px-3">
+                                                            <div class="text-center px-2">
+                                                                <span
+                                                                    class="badge bg-danger bg-opacity-10 text-danger fs-sm rounded-pill mb-2">Save
+                                                                    up to $300</span>
+                                                                <div class="fs-sm text-light-emphasis mb-2">Starts from
+                                                                    <del>$1,100.00</del> 899.00
+                                                                </div>
+                                                                <div class="h2 mb-4">Canon Digital Cameras</div>
+                                                            </div>
+                                                            <img src="/img/mega-menu/electronics/05.png"
+                                                                width="252" alt="Canon Camera">
+                                                            <div class="text-center mt-4">
+                                                                <a class="btn btn-sm btn-primary stretched-link"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Shop now</a>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </li>
+                                        <li class="dropend position-static">
+                                            <div class="position-relative rounded pb-1 px-lg-2" tabindex="0"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover">
+                                                <a class="dropdown-item fw-medium stretched-link d-none d-lg-flex"
+                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">
+                                                    <i class="ci-printer-2 fs-xl opacity-60 pe-1 me-2"></i>
+                                                    <span class="text-truncate">Printers &amp; Ink</span>
+                                                    <i class="ci-chevron-right fs-base ms-auto me-n1"></i>
+                                                </a>
+                                                <div class="dropdown-item fw-medium stretched-link d-lg-none">
+                                                    <i class="ci-printer-2 fs-xl opacity-60 pe-1 me-2"></i>
+                                                    Printers &amp; Ink
+                                                    <i class="ci-chevron-down fs-base ms-auto me-n1"></i>
+                                                </div>
+                                            </div>
+                                            <div class="dropdown-menu rounded-4 p-4"
+                                                style="top: 1rem; height: calc(100% - .1875rem); --cz-dropdown-spacer: .3125rem; animation: none;">
+                                                <div class="d-flex flex-column flex-lg-row h-100 gap-4">
+                                                    <div style="min-width: 194px">
+                                                        <div class="d-flex w-100">
+                                                            <a class="animate-underline animate-target d-inline h6 text-dark-emphasis text-decoration-none text-truncate"
+                                                                href="{{ route('second', ['shop', 'catalog-electronics']) }}">By type</a>
+                                                        </div>
+                                                        <ul class="nav flex-column gap-2 mt-n2">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">All-in-One</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Copying</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Faxing</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Photo
+                                                                    Printing</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Printing
+                                                                    Only</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Scanning</a>
+                                                            </li>
+                                                        </ul>
+                                                        <div class="d-flex w-100 pt-4">
+                                                            <a class="animate-underline animate-target d-inline h6 text-dark-emphasis text-decoration-none text-truncate"
+                                                                href="{{ route('second', ['shop', 'catalog-electronics']) }}">Scanners</a>
+                                                        </div>
+                                                        <ul class="nav flex-column gap-2 mt-n2">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Business Card
+                                                                    Scanners</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Document
+                                                                    Scanners</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Flatbed &amp;
+                                                                    Photo Scanners</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Slide &amp;
+                                                                    Negative Scanners</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div style="min-width: 194px">
+                                                        <div class="d-flex w-100">
+                                                            <a class="animate-underline animate-target d-inline h6 text-dark-emphasis text-decoration-none text-truncate"
+                                                                href="{{ route('second', ['shop', 'catalog-electronics']) }}">Printers</a>
+                                                        </div>
+                                                        <ul class="nav flex-column gap-2 mt-n2">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Dot Matrix
+                                                                    Printers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Inkjet
+                                                                    Printers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Label
+                                                                    Printers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Laser
+                                                                    Printers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Photo
+                                                                    Printers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Wide Format
+                                                                    Printers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Plotter
+                                                                    Printers</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="d-none d-lg-block">
+                                                        <div class="d-none d-xl-block" style="width: 284px"></div>
+                                                        <div class="d-xl-none" style="width: 240px"></div>
+                                                        <div
+                                                            class="position-relative d-flex flex-column justify-content-center h-100 bg-body-secondary rounded-5 py-4 px-3">
+                                                            <div class="text-center px-2">
+                                                                <div class="fs-sm text-light-emphasis mb-2">Best deal!
+                                                                    Save up to <span class="fw-semibold">$200</span>
+                                                                </div>
+                                                                <div class="h2 mb-4">Epson Color Printers</div>
+                                                            </div>
+                                                            <img src="/img/mega-menu/electronics/06.png"
+                                                                width="252" alt="Epson Printer">
+                                                            <div class="text-center mt-4">
+                                                                <a class="btn btn-sm btn-primary stretched-link"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Shop now</a>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </li>
+                                        <li class="dropend position-static">
+                                            <div class="position-relative rounded pb-1 px-lg-2" tabindex="0"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover">
+                                                <a class="dropdown-item fw-medium stretched-link d-none d-lg-flex"
+                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">
+                                                    <i class="ci-battery-2 fs-xl opacity-60 pe-1 me-2"></i>
+                                                    <span class="text-truncate">Charging Stations</span>
+                                                    <i class="ci-chevron-right fs-base ms-auto me-n1"></i>
+                                                </a>
+                                                <div class="dropdown-item fw-medium stretched-link d-lg-none">
+                                                    <i class="ci-battery-2 fs-xl opacity-60 pe-1 me-2"></i>
+                                                    Charging Stations
+                                                    <i class="ci-chevron-down fs-base ms-auto me-n1"></i>
+                                                </div>
+                                            </div>
+                                            <div class="dropdown-menu rounded-4 p-4"
+                                                style="top: 1rem; height: calc(100% - .1875rem); --cz-dropdown-spacer: .3125rem; animation: none;">
+                                                <div class="d-flex flex-column flex-lg-row h-100 gap-4">
+                                                    <div style="min-width: 194px">
+                                                        <div class="d-flex w-100">
+                                                            <a class="animate-underline animate-target d-inline h6 text-dark-emphasis text-decoration-none text-truncate"
+                                                                href="{{ route('second', ['shop', 'catalog-electronics']) }}">Charging
+                                                                Stations</a>
+                                                        </div>
+                                                        <ul class="nav flex-column gap-2 mt-n2">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Portable Power
+                                                                    Stations</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Inverter Power
+                                                                    Stations</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Outdoor
+                                                                    Generators</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Gasoline
+                                                                    Generators</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Cell Phone
+                                                                    Chargers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Power
+                                                                    Strips</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Wall
+                                                                    Charges</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="d-none d-lg-block">
+                                                        <div class="d-none d-xl-block" style="width: 284px"></div>
+                                                        <div class="d-xl-none" style="width: 240px"></div>
+                                                        <div
+                                                            class="position-relative d-flex flex-column justify-content-center h-100 bg-body-secondary rounded-5 py-4 px-3">
+                                                            <div class="text-center px-2">
+                                                                <span
+                                                                    class="badge bg-danger bg-opacity-10 text-danger fs-sm rounded-pill mb-2">Huge
+                                                                    sale!</span>
+                                                                <div class="fs-sm text-light-emphasis mb-2">Save up to
+                                                                    <span class="fw-semibold">$350</span>
+                                                                </div>
+                                                                <div class="h2 mb-4">Portable Power Stations</div>
+                                                            </div>
+                                                            <img src="/img/mega-menu/electronics/07.png"
+                                                                width="252" alt="Epson Printer">
+                                                            <div class="text-center mt-4">
+                                                                <a class="btn btn-sm btn-primary stretched-link"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Shop now</a>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </li>
+                                        <li class="dropend position-static">
+                                            <div class="position-relative rounded pb-1 px-lg-2" tabindex="0"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover">
+                                                <a class="dropdown-item fw-medium stretched-link d-none d-lg-flex"
+                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">
+                                                    <i class="ci-headphones-2 fs-xl opacity-60 pe-1 me-2"></i>
+                                                    <span class="text-truncate">Headphones</span>
+                                                    <i class="ci-chevron-right fs-base ms-auto me-n1"></i>
+                                                </a>
+                                                <div class="dropdown-item fw-medium stretched-link d-lg-none">
+                                                    <i class="ci-headphones-2 fs-xl opacity-60 pe-1 me-2"></i>
+                                                    Headphones
+                                                    <i class="ci-chevron-down fs-base ms-auto me-n1"></i>
+                                                </div>
+                                            </div>
+                                            <div class="dropdown-menu rounded-4 p-4"
+                                                style="top: 1rem; height: calc(100% - .1875rem); --cz-dropdown-spacer: .3125rem; animation: none;">
+                                                <div class="d-flex flex-column flex-lg-row h-100 gap-4">
+                                                    <div style="min-width: 194px">
+                                                        <div class="d-flex w-100">
+                                                            <a class="animate-underline animate-target d-inline h6 text-dark-emphasis text-decoration-none text-truncate"
+                                                                href="{{ route('second', ['shop', 'catalog-electronics']) }}">Headphones</a>
+                                                        </div>
+                                                        <ul class="nav flex-column gap-2 mt-n2">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Earbud
+                                                                    Headphones</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Over-Ear
+                                                                    Headphones</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">On-Ear
+                                                                    Headphones</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Bluetooth
+                                                                    Headphones</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Sports &amp;
+                                                                    Fitness</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Noise-Cancelling</a>
+                                                            </li>
+                                                        </ul>
+                                                        <div class="d-flex w-100 pt-4">
+                                                            <a class="animate-underline animate-target d-inline h6 text-dark-emphasis text-decoration-none text-truncate"
+                                                                href="{{ route('second', ['shop', 'catalog-electronics']) }}">Accessories</a>
+                                                        </div>
+                                                        <ul class="nav flex-column gap-2 mt-n2">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Cases &amp;
+                                                                    Sleeves</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Cables &amp;
+                                                                    Cords</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Ear Pads</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Repair
+                                                                    Kits</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Cleaning
+                                                                    Equipment</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="d-none d-lg-block">
+                                                        <div class="d-none d-xl-block" style="width: 284px"></div>
+                                                        <div class="d-xl-none" style="width: 240px"></div>
+                                                        <div
+                                                            class="position-relative d-flex flex-column justify-content-center h-100 bg-body-secondary rounded-5 py-4 px-3">
+                                                            <div class="text-center px-2">
+                                                                <span
+                                                                    class="badge bg-danger bg-opacity-10 text-danger fs-sm rounded-pill mb-2">Save
+                                                                    up to $200</span>
+                                                                <div class="fs-sm text-light-emphasis mb-2">Starts from
+                                                                    $119.99</div>
+                                                                <div class="h2 mb-4">Wireless Headphones</div>
+                                                            </div>
+                                                            <img src="/img/mega-menu/electronics/08.png"
+                                                                width="252" alt="Wireless Headphones">
+                                                            <div class="text-center mt-4">
+                                                                <a class="btn btn-sm btn-primary stretched-link"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Shop now</a>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </li>
+                                        <li class="dropend position-static">
+                                            <div class="position-relative rounded pb-1 px-lg-2" tabindex="0"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover">
+                                                <a class="dropdown-item fw-medium stretched-link d-none d-lg-flex"
+                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">
+                                                    <i class="ci-watch-2 fs-xl opacity-60 pe-1 me-2"></i>
+                                                    <span class="text-truncate">Wearable Electronics</span>
+                                                    <i class="ci-chevron-right fs-base ms-auto me-n1"></i>
+                                                </a>
+                                                <div class="dropdown-item fw-medium stretched-link d-lg-none">
+                                                    <i class="ci-watch-2 fs-xl opacity-60 pe-1 me-2"></i>
+                                                    Wearable Electronics
+                                                    <i class="ci-chevron-down fs-base ms-auto me-n1"></i>
+                                                </div>
+                                            </div>
+                                            <div class="dropdown-menu rounded-4 p-4"
+                                                style="top: 1rem; height: calc(100% - .1875rem); --cz-dropdown-spacer: .3125rem; animation: none;">
+                                                <div class="d-flex flex-column flex-lg-row h-100 gap-4">
+                                                    <div style="min-width: 194px">
+                                                        <div class="d-flex w-100">
+                                                            <a class="animate-underline animate-target d-inline h6 text-dark-emphasis text-decoration-none text-truncate"
+                                                                href="{{ route('second', ['shop', 'catalog-electronics']) }}">Wearable
+                                                                Gadgets</a>
+                                                        </div>
+                                                        <ul class="nav flex-column gap-2 mt-n2">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Smartwatches</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Fitness
+                                                                    Trackers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Smart
+                                                                    Glasses</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Rings</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Virtual
+                                                                    Reality</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Clips, Arm
+                                                                    &amp; Wristbands</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Accessories</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="d-none d-lg-block">
+                                                        <div class="d-none d-xl-block" style="width: 284px"></div>
+                                                        <div class="d-xl-none" style="width: 240px"></div>
+                                                        <div
+                                                            class="position-relative d-flex flex-column justify-content-center h-100 bg-body-secondary rounded-5 py-4 px-3">
+                                                            <div class="text-center px-2">
+                                                                <i class="ci-google fs-2 text-dark-emphasis mb-3"></i>
+                                                                <div class="fs-sm text-light-emphasis mb-2">Deal of the
+                                                                    week</div>
+                                                                <div class="h2 mb-4">Pixel Watch</div>
+                                                            </div>
+                                                            <img src="/img/mega-menu/electronics/09.png"
+                                                                width="252" alt="Pixel Watch">
+                                                            <div class="text-center mt-4">
+                                                                <a class="btn btn-sm btn-primary stretched-link"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Shop now</a>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </li>
+                                        <li class="dropend position-static">
+                                            <div class="position-relative rounded pb-1 px-lg-2" tabindex="0"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover">
+                                                <a class="dropdown-item fw-medium stretched-link d-none d-lg-flex"
+                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">
+                                                    <i class="ci-powerbank fs-xl opacity-60 pe-1 me-2"></i>
+                                                    <span class="text-truncate">Powerbanks</span>
+                                                    <i class="ci-chevron-right fs-base ms-auto me-n1"></i>
+                                                </a>
+                                                <div class="dropdown-item fw-medium stretched-link d-lg-none">
+                                                    <i class="ci-powerbank fs-xl opacity-60 pe-1 me-2"></i>
+                                                    Powerbanks
+                                                    <i class="ci-chevron-down fs-base ms-auto me-n1"></i>
+                                                </div>
+                                            </div>
+                                            <div class="dropdown-menu rounded-4 p-4"
+                                                style="top: 1rem; height: calc(100% - .1875rem); --cz-dropdown-spacer: .3125rem; animation: none;">
+                                                <div class="d-flex flex-column flex-lg-row h-100 gap-4">
+                                                    <div style="min-width: 194px">
+                                                        <div class="d-flex w-100">
+                                                            <a class="animate-underline animate-target d-inline h6 text-dark-emphasis text-decoration-none text-truncate"
+                                                                href="{{ route('second', ['shop', 'catalog-electronics']) }}">Powerbanks</a>
+                                                        </div>
+                                                        <ul class="nav flex-column gap-2 mt-n2">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Fast
+                                                                    Charging</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Built In
+                                                                    Cable</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Built In Wall
+                                                                    Plug</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">LED Indicator
+                                                                    Lights</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Pocket
+                                                                    Size</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Wireless
+                                                                    Charging</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Short Circuit
+                                                                    Protection</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Scratch
+                                                                    Resistant</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Flashlight</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Lightweight</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="d-none d-lg-block">
+                                                        <div class="d-none d-xl-block" style="width: 284px"></div>
+                                                        <div class="d-xl-none" style="width: 240px"></div>
+                                                        <div
+                                                            class="position-relative d-flex flex-column justify-content-center h-100 bg-body-secondary rounded-5 py-4 px-3">
+                                                            <div class="text-center px-2">
+                                                                <div class="fs-sm text-light-emphasis mb-2">Save up to
+                                                                    <span class="fw-semibold">$50</span> on our
+                                                                </div>
+                                                                <div class="h2 mb-4">Powerbanks Deals</div>
+                                                            </div>
+                                                            <img src="/img/mega-menu/electronics/10.png"
+                                                                width="252" alt="Powerbank">
+                                                            <div class="text-center mt-4">
+                                                                <a class="btn btn-sm btn-primary stretched-link"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Shop now</a>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </li>
+                                        <li class="dropend position-static">
+                                            <div class="position-relative rounded pb-1 px-lg-2" tabindex="0"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover">
+                                                <a class="dropdown-item fw-medium stretched-link d-none d-lg-flex"
+                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">
+                                                    <i class="ci-hard-drive-2 fs-xl opacity-60 pe-1 me-2"></i>
+                                                    <span class="text-truncate">HDD/SSD Data Storage</span>
+                                                    <i class="ci-chevron-right fs-base ms-auto me-n1"></i>
+                                                </a>
+                                                <div class="dropdown-item fw-medium stretched-link d-lg-none">
+                                                    <i class="ci-hard-drive-2 fs-xl opacity-60 pe-1 me-2"></i>
+                                                    HDD/SSD Data Storage
+                                                    <i class="ci-chevron-down fs-base ms-auto me-n1"></i>
+                                                </div>
+                                            </div>
+                                            <div class="dropdown-menu rounded-4 p-4"
+                                                style="top: 1rem; height: calc(100% - .1875rem); --cz-dropdown-spacer: .3125rem; animation: none;">
+                                                <div class="d-flex flex-column flex-lg-row h-100 gap-4">
+                                                    <div style="min-width: 194px">
+                                                        <div class="d-flex w-100">
+                                                            <a class="animate-underline animate-target d-inline h6 text-dark-emphasis text-decoration-none text-truncate"
+                                                                href="{{ route('second', ['shop', 'catalog-electronics']) }}">Data Storage</a>
+                                                        </div>
+                                                        <ul class="nav flex-column gap-2 mt-n2">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">External Hard
+                                                                    Drives</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">External
+                                                                    SSD</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">External Zip
+                                                                    Drives</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Floppy &amp;
+                                                                    Tape Drives</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Internal Hard
+                                                                    Drives</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Internal
+                                                                    SSD</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Network
+                                                                    Attached Storage</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">USB Flash
+                                                                    Drives</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="d-none d-lg-block">
+                                                        <div class="d-none d-xl-block" style="width: 284px"></div>
+                                                        <div class="d-xl-none" style="width: 240px"></div>
+                                                        <div
+                                                            class="position-relative d-flex flex-column justify-content-center h-100 bg-body-secondary rounded-5 py-4 px-3">
+                                                            <div class="text-center px-2">
+                                                                <span
+                                                                    class="badge bg-danger bg-opacity-10 text-danger fs-sm rounded-pill mb-2">Save
+                                                                    up to $100</span>
+                                                                <div class="fs-sm text-light-emphasis mb-2">Starts
+                                                                    from $89.99</div>
+                                                                <div class="h2 mb-4">Samsung SSD Deals</div>
+                                                            </div>
+                                                            <img src="/img/mega-menu/electronics/11.png"
+                                                                width="252" alt="SSD">
+                                                            <div class="text-center mt-4">
+                                                                <a class="btn btn-sm btn-primary stretched-link"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Shop now</a>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </li>
+                                        <li class="dropend position-static">
+                                            <div class="position-relative rounded pb-2 px-lg-2" tabindex="0"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover">
+                                                <a class="dropdown-item fw-medium stretched-link d-none d-lg-flex"
+                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">
+                                                    <i class="ci-game fs-xl opacity-60 pe-1 me-2"></i>
+                                                    <span class="text-truncate">Video Games</span>
+                                                    <i class="ci-chevron-right fs-base ms-auto me-n1"></i>
+                                                </a>
+                                                <div class="dropdown-item fw-medium stretched-link d-lg-none">
+                                                    <i class="ci-game fs-xl opacity-60 pe-1 me-2"></i>
+                                                    Video Games
+                                                    <i class="ci-chevron-down fs-base ms-auto me-n1"></i>
+                                                </div>
+                                            </div>
+                                            <div class="dropdown-menu rounded-4 p-4"
+                                                style="top: 1rem; height: calc(100% - .1875rem); --cz-dropdown-spacer: .3125rem; animation: none;">
+                                                <div class="d-flex flex-column flex-lg-row h-100 gap-lg-4">
+                                                    <div style="min-width: 194px">
+                                                        <div class="d-flex w-100">
+                                                            <a class="animate-underline animate-target d-inline h6 text-dark-emphasis text-decoration-none text-truncate"
+                                                                href="{{ route('second', ['shop', 'catalog-electronics']) }}">Games &amp;
+                                                                Hardware</a>
+                                                        </div>
+                                                        <ul class="nav flex-column gap-2 mt-n2">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Video
+                                                                    Games</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">PlayStation
+                                                                    5</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">PlayStation
+                                                                    4</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Xbox Series
+                                                                    X</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Xbox Series
+                                                                    S</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Nintendo
+                                                                    Switch</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Gaming PC</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Gaming
+                                                                    Laptops</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Wii U</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Wii</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Nintendo
+                                                                    3DS</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Nintendo
+                                                                    2DS</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Nintendo
+                                                                    DS</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Wii</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div style="min-width: 194px">
+                                                        <ul class="nav flex-column gap-2 mt-2 mt-lg-0">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Mac</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">PlayStation
+                                                                    Vita</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Sony PSP</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Retro
+                                                                    Gaming</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Microconsoles</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Controllers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Accessories</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Digital Games
+                                                                    Screens</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Game Pass</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">PlayStation
+                                                                    Plus</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="d-none d-lg-block">
+                                                        <div class="d-none d-xl-block" style="width: 284px"></div>
+                                                        <div class="d-xl-none" style="width: 240px"></div>
+                                                        <div
+                                                            class="position-relative d-flex flex-column justify-content-center h-100 bg-body-secondary rounded-5 py-4 px-3">
+                                                            <div class="text-center px-2">
+                                                                <span
+                                                                    class="badge bg-danger bg-opacity-10 text-danger fs-sm rounded-pill mb-2">Save
+                                                                    $100</span>
+                                                                <div class="fs-sm text-light-emphasis mb-2">Starts
+                                                                    from <del>$599.00</del> $499.00</div>
+                                                                <div class="h2 mb-4">Xbox Series X</div>
+                                                            </div>
+                                                            <img src="/img/mega-menu/electronics/12.png"
+                                                                width="252" alt="Xbox">
+                                                            <div class="text-center mt-4">
+                                                                <a class="btn btn-sm btn-primary stretched-link"
+                                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Shop now</a>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Navbar nav -->
+                        <div class="col-lg-9 d-lg-flex pt-3 pt-lg-0 ps-lg-0">
+                            <ul class="navbar-nav position-relative">
+                                <li class="nav-item dropdown me-lg-n1 me-xl-0">
+                                    <a class="nav-link dropdown-toggle" href="#" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                        aria-expanded="false">Home</a>
+                                    <ul class="dropdown-menu">
+                                        <li class="hover-effect-opacity px-2 mx-n2">
+                                            <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'electronics']) }}">
+                                                <span class="fw-medium">Electronics Store</span>
+                                                <span class="d-block fs-xs text-body-secondary">Megamenu + Hero
+                                                    slider</span>
+                                                <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                                    style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                                    <img class="position-relative z-2 d-none-dark"
+                                                        src="/img/mega-menu/demo-preview/electronics-light.jpg"
+                                                        alt="Electronics Store">
+                                                    <img class="position-relative z-2 d-none d-block-dark"
+                                                        src="/img/mega-menu/demo-preview/electronics-dark.jpg"
+                                                        alt="Electronics Store">
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                        style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                        style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="hover-effect-opacity px-2 mx-n2">
+                                            <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'fashion-v1']) }}">
+                                                <span class="fw-medium">Fashion Store v.1</span>
+                                                <span class="d-block fs-xs text-body-secondary">Hero promo
+                                                    slider</span>
+                                                <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                                    style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                                    <img class="position-relative z-2 d-none-dark"
+                                                        src="/img/mega-menu/demo-preview/fashion-1-light.jpg"
+                                                        alt="Fashion Store v.1">
+                                                    <img class="position-relative z-2 d-none d-block-dark"
+                                                        src="/img/mega-menu/demo-preview/fashion-1-dark.jpg"
+                                                        alt="Fashion Store v.1">
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                        style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                        style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="hover-effect-opacity px-2 mx-n2">
+                                            <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'fashion-v2']) }}">
+                                                <span class="fw-medium">Fashion Store v.2</span>
+                                                <span class="d-block fs-xs text-body-secondary">Hero banner with
+                                                    hotspots</span>
+                                                <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                                    style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                                    <img class="position-relative z-2 d-none-dark"
+                                                        src="/img/mega-menu/demo-preview/fashion-2-light.jpg"
+                                                        alt="Fashion Store v.2">
+                                                    <img class="position-relative z-2 d-none d-block-dark"
+                                                        src="/img/mega-menu/demo-preview/fashion-2-dark.jpg"
+                                                        alt="Fashion Store v.2">
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                        style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                        style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="hover-effect-opacity px-2 mx-n2">
+                                            <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'furniture']) }}">
+                                                <span class="fw-medium">Furniture Store</span>
+                                                <span class="d-block fs-xs text-body-secondary">Fancy product
+                                                    carousel</span>
+                                                <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                                    style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                                    <img class="position-relative z-2 d-none-dark"
+                                                        src="/img/mega-menu/demo-preview/furniture-light.jpg"
+                                                        alt="Furniture Store">
+                                                    <img class="position-relative z-2 d-none d-block-dark"
+                                                        src="/img/mega-menu/demo-preview/furniture-dark.jpg"
+                                                        alt="Furniture Store">
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                        style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                        style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="hover-effect-opacity px-2 mx-n2">
+                                            <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'grocery']) }}">
+                                                <span class="fw-medium">Grocery Store</span>
+                                                <span class="d-block fs-xs text-body-secondary">Hero slider + Category
+                                                    cards</span>
+                                                <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                                    style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                                    <img class="position-relative z-2 d-none-dark"
+                                                        src="/img/mega-menu/demo-preview/grocery-light.jpg"
+                                                        alt="Grocery Store">
+                                                    <img class="position-relative z-2 d-none d-block-dark"
+                                                        src="/img/mega-menu/demo-preview/grocery-dark.jpg"
+                                                        alt="Grocery Store">
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                        style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                        style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="hover-effect-opacity px-2 mx-n2">
+                                            <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'marketplace']) }}">
+                                                <span class="fw-medium">Marketplace</span>
+                                                <span class="d-block fs-xs text-body-secondary">Multi-vendor, digital
+                                                    goods</span>
+                                                <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                                    style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                                    <img class="position-relative z-2 d-none-dark"
+                                                        src="/img/mega-menu/demo-preview/marketplace-light.jpg"
+                                                        alt="Marketplace">
+                                                    <img class="position-relative z-2 d-none d-block-dark"
+                                                        src="/img/mega-menu/demo-preview/marketplace-dark.jpg"
+                                                        alt="Marketplace">
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                        style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                        style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="hover-effect-opacity px-2 mx-n2">
+                                            <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'single-store']) }}">
+                                                <span class="fw-medium">Single Product Store</span>
+                                                <span class="d-block fs-xs text-body-secondary">Single product / mono
+                                                    brand</span>
+                                                <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                                    style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                                    <img class="position-relative z-2 d-none-dark"
+                                                        src="/img/mega-menu/demo-preview/single-store-light.jpg"
+                                                        alt="Single Product Store">
+                                                    <img class="position-relative z-2 d-none d-block-dark"
+                                                        src="/img/mega-menu/demo-preview/single-store-dark.jpg"
+                                                        alt="Single Product Store">
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                        style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                        style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                                </div>
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </li>
+                                <li class="nav-item dropdown position-static me-lg-n1 me-xl-0">
+                                    <a class="nav-link dropdown-toggle" href="#" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                        aria-expanded="false">Shop</a>
+                                    <div class="dropdown-menu rounded-4 p-4">
+                                        <div class="d-flex flex-column flex-lg-row gap-4">
+                                            <div style="min-width: 190px">
+                                                <div class="h6 mb-2">Electronics Store</div>
+                                                <ul class="nav flex-column gap-2 mt-0">
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'categories-electronics']) }}">Categories
+                                                            Page</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'catalog-electronics']) }}">Catalog with Side
+                                                            Filters</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'product-general-electronics']) }}">Product
+                                                            General Info</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'product-details-electronics']) }}">Product
+                                                            Details</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'product-reviews-electronics']) }}">Product
+                                                            Reviews</a>
+                                                    </li>
+                                                </ul>
+                                                <div class="h6 pt-4 mb-2">Fashion Store</div>
+                                                <ul class="nav flex-column gap-2 mt-0">
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'catalog-fashion']) }}">Catalog with Side
+                                                            Filters</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'product-fashion']) }}">Product Page</a>
+                                                    </li>
+                                                </ul>
+                                                <div class="h6 pt-4 mb-2">Furniture Store</div>
+                                                <ul class="nav flex-column gap-2 mt-0">
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'catalog-furniture']) }}">Catalog with Top
+                                                            Filters</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'product-furniture']) }}">Product Page</a>
+                                                    </li>
+                                                </ul>
+                                            </div>
+                                            <div style="min-width: 190px">
+                                                <div class="h6 mb-2">Grocery Store</div>
+                                                <ul class="nav flex-column gap-2 mt-0">
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'catalog-grocery']) }}">Catalog with Side
+                                                            Filters</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'product-grocery']) }}">Product Page</a>
+                                                    </li>
+                                                </ul>
+                                                <div class="h6 pt-4 mb-2">Marketplace</div>
+                                                <ul class="nav flex-column gap-2 mt-0">
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'catalog-marketplace']) }}">Catalog with Top
+                                                            Filters</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'product-marketplace']) }}">Digital Product
+                                                            Page</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'marketplace']) }}">Cart / Checkout</a>
+                                                    </li>
+                                                </ul>
+                                            </div>
+                                            <div style="min-width: 190px">
+                                                <div class="h6 mb-2">Checkout v.1</div>
+                                                <ul class="nav flex-column gap-2 mt-0">
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'v1-cart']) }}">Shopping Cart</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'v1-delivery-1']) }}">Delivery Info (Step
+                                                            1)</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'v1-delivery-2']) }}">Delivery Info (Step
+                                                            2)</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'v1-shipping']) }}">Shipping Address</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'v1-payment']) }}">Payment</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'v1-thankyou']) }}">Thank You Page</a>
+                                                    </li>
+                                                </ul>
+                                                <div class="h6 pt-4 mb-2">Checkout v.2</div>
+                                                <ul class="nav flex-column gap-2 mt-0">
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'v2-cart']) }}">Shopping Cart</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'v2-delivery']) }}">Delivery Info</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'v2-pickup']) }}">Pickup from Store</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'v2-thankyou']) }}">Thank You Page</a>
+                                                    </li>
+                                                </ul>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </li>
+                                <li class="nav-item dropdown me-lg-n1 me-xl-0">
+                                    <a class="nav-link dropdown-toggle" href="#" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                        data-bs-auto-close="outside" aria-expanded="false">Account</a>
+                                    <ul class="dropdown-menu">
+                                        <li class="dropend">
+                                            <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                                aria-expanded="false">Auth Pages</a>
+                                            <ul class="dropdown-menu">
+                                                <li><a class="dropdown-item" href="{{ route('second', ['account', 'signin']) }}">Sign In</a>
+                                                </li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['account', 'signup']) }}">Sign Up</a>
+                                                </li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'password-recovery']) }}">Password Recovery</a>
+                                                </li>
+                                            </ul>
+                                        </li>
+                                        <li class="dropend">
+                                            <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                                aria-expanded="false">Shop User</a>
+                                            <ul class="dropdown-menu">
+                                                <li><a class="dropdown-item" href="{{ route('second', ['account', 'orders']) }}">Orders
+                                                        History</a></li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'wishlist']) }}">Wishlist</a></li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['account', 'payment']) }}">Payment
+                                                        Methods</a></li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['account', 'reviews']) }}">My
+                                                        Reviews</a></li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['account', 'info']) }}">Personal
+                                                        Info</a></li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'addresses']) }}">Addresses</a></li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'notifications']) }}">Notifications</a></li>
+                                            </ul>
+                                        </li>
+                                        <li class="dropend">
+                                            <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                                aria-expanded="false">Marketplace User</a>
+                                            <ul class="dropdown-menu">
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'marketplace-dashboard']) }}">Dashboard</a></li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'marketplace-products']) }}">Products</a></li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'marketplace-sales']) }}">Sales</a></li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'marketplace-payouts']) }}">Payouts</a></li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'marketplace-purchases']) }}">Purchases</a></li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'marketplace-favorites']) }}">Favorites</a></li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'marketplace-settings']) }}">Settings</a></li>
+                                            </ul>
+                                        </li>
+                                    </ul>
+                                </li>
+                                <li class="nav-item dropdown me-lg-n1 me-xl-0">
+                                    <a class="nav-link dropdown-toggle" aria-current="page" href="#"
+                                        role="button" data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                        data-bs-auto-close="outside" aria-expanded="false">Pages</a>
+                                    <ul class="dropdown-menu">
+                                        <li class="dropend">
+                                            <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                                aria-expanded="false">About</a>
+                                            <ul class="dropdown-menu">
+                                                <li><a class="dropdown-item" href="{{ route('second', ['about', 'v1']) }}">About v.1</a></li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['about', 'v2']) }}">About v.2</a></li>
+                                            </ul>
+                                        </li>
+                                        <li class="dropend">
+                                            <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                                aria-expanded="false">Blog</a>
+                                            <ul class="dropdown-menu">
+                                                <li><a class="dropdown-item" href="{{ route('second', ['blog', 'grid-v1']) }}">Grid View
+                                                        v.1</a></li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['blog', 'grid-v2']) }}">Grid View
+                                                        v.2</a></li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['blog', 'list']) }}">List View</a>
+                                                </li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['blog', 'single-v1']) }}">Single Post
+                                                        v.1</a></li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['blog', 'single-v2']) }}">Single Post
+                                                        v.2</a></li>
+                                            </ul>
+                                        </li>
+                                        <li class="dropend">
+                                            <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                                aria-expanded="false">Contact</a>
+                                            <ul class="dropdown-menu">
+                                                <li><a class="dropdown-item" href="{{ route('second', ['contact', 'v1']) }}">Contact v.1</a>
+                                                </li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['contact', 'v2']) }}">Contact v.2</a>
+                                                </li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['contact', 'v3']) }}">Contact v.3</a>
+                                                </li>
+                                            </ul>
+                                        </li>
+                                        <li class="dropend">
+                                            <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                                aria-expanded="false">Help Center</a>
+                                            <ul class="dropdown-menu">
+                                                <li><a class="dropdown-item" href="{{ route('second', ['help', 'topics-v1']) }}">Help Topics
+                                                        v.1</a></li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['help', 'topics-v2']) }}">Help Topics
+                                                        v.2</a></li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['help', 'single-article-v1']) }}">Help
+                                                        Single Article v.1</a></li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['help', 'single-article-v2']) }}">Help
+                                                        Single Article v.2</a></li>
+                                            </ul>
+                                        </li>
+                                        <li class="dropend">
+                                            <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                                aria-expanded="false">404 Error</a>
+                                            <ul class="dropdown-menu">
+                                                <li><a class="dropdown-item" href="{{ route('second', ['404', 'electronics']) }}">404
+                                                        Electronics</a></li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['404', 'fashion']) }}">404 Fashion</a>
+                                                </li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['404', 'furniture']) }}">404
+                                                        Furniture</a></li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['404', 'grocery']) }}">404 Grocery</a>
+                                                </li>
+                                            </ul>
+                                        </li>
+                                        <li><a class="dropdown-item" href="{{ route('any', 'terms-and-conditions')}}">Terms &amp;
+                                                Conditions</a></li>
+                                    </ul>
+                                </li>
+
+                            </ul>
+                            <hr class="d-lg-none my-3">
+                            <ul class="navbar-nav ms-auto">
+                                <li class="nav-item dropdown me-lg-n2 me-xl-n1">
+                                    <a class="nav-link dropdown-toggle fs-sm px-3" href="#!" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                        aria-expanded="false">Eng</a>
+                                    <ul class="dropdown-menu fs-sm"
+                                        style="--cz-dropdown-min-width: 7.5rem; --cz-dropdown-spacer: .25rem">
+                                        <li><a class="dropdown-item" href="#!">Français</a></li>
+                                        <li><a class="dropdown-item" href="#!">Deutsch</a></li>
+                                        <li><a class="dropdown-item" href="#!">Italiano</a></li>
+                                    </ul>
+                                </li>
+                                <li class="nav-item dropdown me-lg-n1">
+                                    <a class="nav-link dropdown-toggle fs-sm px-3" href="#!" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                        aria-expanded="false">USD ($)</a>
+                                    <ul class="dropdown-menu dropdown-menu-end fs-sm"
+                                        style="--cz-dropdown-min-width: 7rem; --cz-dropdown-spacer: .25rem">
+                                        <li><a class="dropdown-item" href="#!">€ EUR</a></li>
+                                        <li><a class="dropdown-item" href="#!">£ UKP</a></li>
+                                        <li><a class="dropdown-item" href="#!">¥ JPY</a></li>
+                                    </ul>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="offcanvas-header border-top px-0 py-3 mt-3 d-md-none">
+                <div class="nav nav-justified w-100">
+                    <a class="nav-link border-end" href="{{ route('second', ['account', 'signin']) }}">
+                        <i class="ci-user fs-lg opacity-60 me-2"></i>
+                        Account
+                    </a>
+                    <a class="nav-link" href="{{ route('second', ['account', 'wishlist']) }}">
+                        <i class="ci-heart fs-lg opacity-60 me-2"></i>
+                        Wishlist
+                    </a>
+                </div>
+            </div>
+        </nav>
+    </div>
+</header>
diff --git a/resources/views/layouts/partials/navbar2.blade.php b/resources/views/layouts/partials/navbar2.blade.php
new file mode 100644
index 0000000..fd79238
--- /dev/null
+++ b/resources/views/layouts/partials/navbar2.blade.php
@@ -0,0 +1,517 @@
+<div class="container position-relative d-flex justify-content-between z-1 py-3">
+    <div class="nav animate-underline">
+        <span class="text-secondary-emphasis fs-xs me-1">Contact us <span class="d-none d-sm-inline">24/7</span></span>
+        <a class="nav-link animate-target fs-xs fw-semibold p-0"
+            href="tel:+15053753082">+1&nbsp;50&nbsp;537&nbsp;53&nbsp;082</a>
+    </div>
+    <a class="text-secondary-emphasis fs-xs text-decoration-none d-none d-md-inline" href="#!">🔥 The Biggest Sale
+        Ever 50% Off</a>
+    <ul class="nav gap-4">
+        <li class="animate-underline">
+            <a class="nav-link animate-target fs-xs p-0" href="#!">Wishlist</a>
+        </li>
+        <li class="animate-underline">
+            <a class="nav-link animate-target fs-xs p-0" href="#!">Account</a>
+        </li>
+    </ul>
+</div>
+
+<header class="navbar-sticky sticky-top container z-fixed px-2" data-sticky-element>
+    <div class="navbar navbar-expand-lg flex-nowrap bg-body rounded-pill shadow ps-0 mx-1">
+        <div class="position-absolute top-0 start-0 w-100 h-100 bg-dark rounded-pill z-0 d-none d-block-dark"></div>
+
+        <!-- Mobile offcanvas menu toggler (Hamburger) -->
+        <button type="button" class="navbar-toggler ms-3" data-bs-toggle="offcanvas" data-bs-target="#navbarNav"
+            aria-controls="navbarNav" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+
+        <!-- Navbar brand (Logo) -->
+        <a class="navbar-brand position-relative z-1 ms-4 ms-sm-5 ms-lg-4 me-2 me-sm-0 me-lg-3"
+            href="{{ route('second', ['home', 'furniture']) }}">Cartzilla</a>
+
+        <!-- Main navigation that turns into offcanvas on screens < 992px wide (lg breakpoint) -->
+        <nav class="offcanvas offcanvas-start" id="navbarNav" tabindex="-1" aria-labelledby="navbarNavLabel">
+            <div class="offcanvas-header py-3">
+                <h5 class="offcanvas-title" id="navbarNavLabel">Browse Cartzilla</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+            </div>
+            <div class="offcanvas-body pt-3 pb-4 py-lg-0 mx-lg-auto">
+                <ul class="navbar-nav position-relative">
+                    <li class="nav-item dropdown me-lg-n1 me-xl-0">
+                        <a class="nav-link dropdown-toggle fs-sm" href="#" role="button"
+                            data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Home</a>
+                        <ul class="dropdown-menu" style="--cz-dropdown-spacer: 1rem">
+                            <li class="hover-effect-opacity px-2 mx-n2">
+                                <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'electronics']) }}">
+                                    <span class="fw-medium">Electronics Store</span>
+                                    <span class="d-block fs-xs text-body-secondary">Megamenu + Hero slider</span>
+                                    <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                        style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                        <img class="position-relative z-2 d-none-dark"
+                                            src="/img/mega-menu/demo-preview/electronics-light.jpg"
+                                            alt="Electronics Store">
+                                        <img class="position-relative z-2 d-none d-block-dark"
+                                            src="/img/mega-menu/demo-preview/electronics-dark.jpg"
+                                            alt="Electronics Store">
+                                        <span
+                                            class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                            style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                        <span
+                                            class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                            style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                    </div>
+                                </a>
+                            </li>
+                            <li class="hover-effect-opacity px-2 mx-n2">
+                                <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'fashion-v1']) }}">
+                                    <span class="fw-medium">Fashion Store v.1</span>
+                                    <span class="d-block fs-xs text-body-secondary">Hero promo slider</span>
+                                    <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                        style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                        <img class="position-relative z-2 d-none-dark"
+                                            src="/img/mega-menu/demo-preview/fashion-1-light.jpg"
+                                            alt="Fashion Store v.1">
+                                        <img class="position-relative z-2 d-none d-block-dark"
+                                            src="/img/mega-menu/demo-preview/fashion-1-dark.jpg"
+                                            alt="Fashion Store v.1">
+                                        <span
+                                            class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                            style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                        <span
+                                            class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                            style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                    </div>
+                                </a>
+                            </li>
+                            <li class="hover-effect-opacity px-2 mx-n2">
+                                <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'fashion-v2']) }}">
+                                    <span class="fw-medium">Fashion Store v.2</span>
+                                    <span class="d-block fs-xs text-body-secondary">Hero banner with hotspots</span>
+                                    <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                        style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                        <img class="position-relative z-2 d-none-dark"
+                                            src="/img/mega-menu/demo-preview/fashion-2-light.jpg"
+                                            alt="Fashion Store v.2">
+                                        <img class="position-relative z-2 d-none d-block-dark"
+                                            src="/img/mega-menu/demo-preview/fashion-2-dark.jpg"
+                                            alt="Fashion Store v.2">
+                                        <span
+                                            class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                            style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                        <span
+                                            class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                            style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                    </div>
+                                </a>
+                            </li>
+                            <li class="hover-effect-opacity px-2 mx-n2">
+                                <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'furniture']) }}">
+                                    <span class="fw-medium">Furniture Store</span>
+                                    <span class="d-block fs-xs text-body-secondary">Fancy product carousel</span>
+                                    <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                        style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                        <img class="position-relative z-2 d-none-dark"
+                                            src="/img/mega-menu/demo-preview/furniture-light.jpg"
+                                            alt="Furniture Store">
+                                        <img class="position-relative z-2 d-none d-block-dark"
+                                            src="/img/mega-menu/demo-preview/furniture-dark.jpg"
+                                            alt="Furniture Store">
+                                        <span
+                                            class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                            style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                        <span
+                                            class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                            style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                    </div>
+                                </a>
+                            </li>
+                            <li class="hover-effect-opacity px-2 mx-n2">
+                                <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'grocery']) }}">
+                                    <span class="fw-medium">Grocery Store</span>
+                                    <span class="d-block fs-xs text-body-secondary">Hero slider + Category cards</span>
+                                    <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                        style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                        <img class="position-relative z-2 d-none-dark"
+                                            src="/img/mega-menu/demo-preview/grocery-light.jpg" alt="Grocery Store">
+                                        <img class="position-relative z-2 d-none d-block-dark"
+                                            src="/img/mega-menu/demo-preview/grocery-dark.jpg" alt="Grocery Store">
+                                        <span
+                                            class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                            style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                        <span
+                                            class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                            style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                    </div>
+                                </a>
+                            </li>
+                            <li class="hover-effect-opacity px-2 mx-n2">
+                                <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'marketplace']) }}">
+                                    <span class="fw-medium">Marketplace</span>
+                                    <span class="d-block fs-xs text-body-secondary">Multi-vendor, digital goods</span>
+                                    <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                        style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                        <img class="position-relative z-2 d-none-dark"
+                                            src="/img/mega-menu/demo-preview/marketplace-light.jpg" alt="Marketplace">
+                                        <img class="position-relative z-2 d-none d-block-dark"
+                                            src="/img/mega-menu/demo-preview/marketplace-dark.jpg" alt="Marketplace">
+                                        <span
+                                            class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                            style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                        <span
+                                            class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                            style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                    </div>
+                                </a>
+                            </li>
+                            <li class="hover-effect-opacity px-2 mx-n2">
+                                <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'single-store']) }}">
+                                    <span class="fw-medium">Single Product Store</span>
+                                    <span class="d-block fs-xs text-body-secondary">Single product / mono brand</span>
+                                    <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                        style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                        <img class="position-relative z-2 d-none-dark"
+                                            src="/img/mega-menu/demo-preview/single-store-light.jpg"
+                                            alt="Single Product Store">
+                                        <img class="position-relative z-2 d-none d-block-dark"
+                                            src="/img/mega-menu/demo-preview/single-store-dark.jpg"
+                                            alt="Single Product Store">
+                                        <span
+                                            class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                            style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                        <span
+                                            class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                            style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                    </div>
+                                </a>
+                            </li>
+                        </ul>
+                    </li>
+                    <li class="nav-item dropdown position-static me-lg-n1 me-xl-0">
+                        <a class="nav-link dropdown-toggle fs-sm" href="#" role="button"
+                            data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Shop</a>
+                        <div class="dropdown-menu p-4" style="--cz-dropdown-spacer: 1rem">
+                            <div class="d-flex flex-column flex-lg-row gap-4">
+                                <div style="min-width: 190px">
+                                    <div class="h6 mb-2">Electronics Store</div>
+                                    <ul class="nav flex-column gap-2 mt-0">
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'categories-electronics']) }}">Categories Page</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-electronics']) }}">Catalog with Side Filters</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'product-general-electronics']) }}">Product General Info</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'product-details-electronics']) }}">Product Details</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'product-reviews-electronics']) }}">Product Reviews</a>
+                                        </li>
+                                    </ul>
+                                    <div class="h6 pt-4 mb-2">Fashion Store</div>
+                                    <ul class="nav flex-column gap-2 mt-0">
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-fashion']) }}">Catalog with Side Filters</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'product-fashion']) }}">Product Page</a>
+                                        </li>
+                                    </ul>
+                                    <div class="h6 pt-4 mb-2">Furniture Store</div>
+                                    <ul class="nav flex-column gap-2 mt-0">
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-furniture']) }}">Catalog with Top Filters</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'product-furniture']) }}">Product Page</a>
+                                        </li>
+                                    </ul>
+                                </div>
+                                <div style="min-width: 190px">
+                                    <div class="h6 mb-2">Grocery Store</div>
+                                    <ul class="nav flex-column gap-2 mt-0">
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Catalog with Side Filters</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'product-grocery']) }}">Product Page</a>
+                                        </li>
+                                    </ul>
+                                    <div class="h6 pt-4 mb-2">Marketplace</div>
+                                    <ul class="nav flex-column gap-2 mt-0">
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'catalog-marketplace']) }}">Catalog with Top Filters</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['shop', 'product-marketplace']) }}">Digital Product Page</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['checkout', 'marketplace']) }}">Cart / Checkout</a>
+                                        </li>
+                                    </ul>
+                                </div>
+                                <div style="min-width: 190px">
+                                    <div class="h6 mb-2">Checkout v.1</div>
+                                    <ul class="nav flex-column gap-2 mt-0">
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['checkout', 'v1-cart']) }}">Shopping Cart</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['checkout', 'v1-delivery-1']) }}">Delivery Info (Step 1)</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['checkout', 'v1-delivery-2']) }}">Delivery Info (Step 2)</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['checkout', 'v1-shipping']) }}">Shipping Address</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['checkout', 'v1-payment']) }}">Payment</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['checkout', 'v1-thankyou']) }}">Thank You Page</a>
+                                        </li>
+                                    </ul>
+                                    <div class="h6 pt-4 mb-2">Checkout v.2</div>
+                                    <ul class="nav flex-column gap-2 mt-0">
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['checkout', 'v2-cart']) }}">Shopping Cart</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['checkout', 'v2-delivery']) }}">Delivery Info</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['checkout', 'v2-pickup']) }}">Pickup from Store</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="{{ route('second', ['checkout', 'v2-thankyou']) }}">Thank You Page</a>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                    <li class="nav-item dropdown me-lg-n1 me-xl-0">
+                        <a class="nav-link dropdown-toggle fs-sm" href="#" role="button"
+                            data-bs-toggle="dropdown" data-bs-trigger="hover" data-bs-auto-close="outside"
+                            aria-expanded="false">Account</a>
+                        <ul class="dropdown-menu" style="--cz-dropdown-spacer: 1rem">
+                            <li class="dropend">
+                                <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                    data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Auth
+                                    Pages</a>
+                                <ul class="dropdown-menu">
+                                    <li><a class="dropdown-item" href="{{ route('second', ['account', 'signin']) }}">Sign In</a></li>
+                                    <li><a class="dropdown-item" href="{{ route('second', ['account', 'signup']) }}">Sign Up</a></li>
+                                    <li><a class="dropdown-item" href="{{ route('second', ['account', 'password-recovery']) }}">Password
+                                            Recovery</a></li>
+                                </ul>
+                            </li>
+                            <li class="dropend">
+                                <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                    data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Shop
+                                    User</a>
+                                <ul class="dropdown-menu">
+                                    <li><a class="dropdown-item" href="{{ route('second', ['account', 'orders']) }}">Orders History</a></li>
+                                    <li><a class="dropdown-item" href="{{ route('second', ['account', 'wishlist']) }}">Wishlist</a></li>
+                                    <li><a class="dropdown-item" href="{{ route('second', ['account', 'payment']) }}">Payment Methods</a></li>
+                                    <li><a class="dropdown-item" href="{{ route('second', ['account', 'reviews']) }}">My Reviews</a></li>
+                                    <li><a class="dropdown-item" href="{{ route('second', ['account', 'info']) }}">Personal Info</a></li>
+                                    <li><a class="dropdown-item" href="{{ route('second', ['account', 'addresses']) }}">Addresses</a></li>
+                                    <li><a class="dropdown-item" href="{{ route('second', ['account', 'notifications']) }}">Notifications</a>
+                                    </li>
+                                </ul>
+                            </li>
+                            <li class="dropend">
+                                <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                    data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                    aria-expanded="false">Marketplace User</a>
+                                <ul class="dropdown-menu">
+                                    <li><a class="dropdown-item"
+                                            href="{{ route('second', ['account', 'marketplace-dashboard']) }}">Dashboard</a></li>
+                                    <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-products']) }}">Products</a>
+                                    </li>
+                                    <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-sales']) }}">Sales</a></li>
+                                    <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-payouts']) }}">Payouts</a>
+                                    </li>
+                                    <li><a class="dropdown-item"
+                                            href="{{ route('second', ['account', 'marketplace-purchases']) }}">Purchases</a></li>
+                                    <li><a class="dropdown-item"
+                                            href="{{ route('second', ['account', 'marketplace-favorites']) }}">Favorites</a></li>
+                                    <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-settings']) }}">Settings</a>
+                                    </li>
+                                </ul>
+                            </li>
+                        </ul>
+                    </li>
+                    <li class="nav-item dropdown me-lg-n1 me-xl-0">
+                        <a class="nav-link dropdown-toggle fs-sm active" aria-current="page" href="#"
+                            role="button" data-bs-toggle="dropdown" data-bs-trigger="hover"
+                            data-bs-auto-close="outside" aria-expanded="false">Pages</a>
+                        <ul class="dropdown-menu" style="--cz-dropdown-spacer: 1rem">
+                            <li class="dropend">
+                                <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                    data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">About</a>
+                                <ul class="dropdown-menu">
+                                    <li><a class="dropdown-item" href="{{ route('second', ['about', 'v1']) }}">About v.1</a></li>
+                                    <li><a class="dropdown-item" href="{{ route('second', ['about', 'v2']) }}">About v.2</a></li>
+                                </ul>
+                            </li>
+                            <li class="dropend">
+                                <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                    data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Blog</a>
+                                <ul class="dropdown-menu">
+                                    <li><a class="dropdown-item" href="{{ route('second', ['blog', 'grid-v1']) }}">Grid View v.1</a></li>
+                                    <li><a class="dropdown-item" href="{{ route('second', ['blog', 'grid-v2']) }}">Grid View v.2</a></li>
+                                    <li><a class="dropdown-item" href="{{ route('second', ['blog', 'list']) }}">List View</a></li>
+                                    <li><a class="dropdown-item" href="{{ route('second', ['blog', 'single-v1']) }}">Single Post v.1</a></li>
+                                    <li><a class="dropdown-item" href="{{ route('second', ['blog', 'single-v2']) }}">Single Post v.2</a></li>
+                                </ul>
+                            </li>
+                            <li class="dropend">
+                                <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                    data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                    aria-expanded="false">Contact</a>
+                                <ul class="dropdown-menu">
+                                    <li><a class="dropdown-item" href="{{ route('second', ['contact', 'v1']) }}">Contact v.1</a></li>
+                                    <li><a class="dropdown-item" href="{{ route('second', ['contact', 'v2']) }}">Contact v.2</a></li>
+                                    <li><a class="dropdown-item" href="{{ route('second', ['contact', 'v3']) }}">Contact v.3</a></li>
+                                </ul>
+                            </li>
+                            <li class="dropend">
+                                <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                    data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Help
+                                    Center</a>
+                                <ul class="dropdown-menu">
+                                    <li><a class="dropdown-item" href="{{ route('second', ['help', 'topics-v1']) }}">Help Topics v.1</a></li>
+                                    <li><a class="dropdown-item" href="{{ route('second', ['help', 'topics-v2']) }}">Help Topics v.2</a></li>
+                                    <li><a class="dropdown-item" href="{{ route('second', ['help', 'single-article-v1']) }}">Help Single
+                                            Article v.1</a></li>
+                                    <li><a class="dropdown-item" href="{{ route('second', ['help', 'single-article-v2']) }}">Help Single
+                                            Article v.2</a></li>
+                                </ul>
+                            </li>
+                            <li class="dropend">
+                                <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                    data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">404
+                                    Error</a>
+                                <ul class="dropdown-menu">
+                                    <li><a class="dropdown-item" href="{{ route('second', ['404', 'electronics']) }}">404 Electronics</a></li>
+                                    <li><a class="dropdown-item" href="{{ route('second', ['404', 'fashion']) }}">404 Fashion</a></li>
+                                    <li><a class="dropdown-item" href="{{ route('second', ['404', 'furniture']) }}">404 Furniture</a></li>
+                                    <li><a class="dropdown-item" href="{{ route('second', ['404', 'grocery']) }}">404 Grocery</a></li>
+                                </ul>
+                            </li>
+                            <li><a class="dropdown-item" href="{{ route('any', 'terms-and-conditions')}}">Terms &amp; Conditions</a>
+                            </li>
+                        </ul>
+                    </li>                    
+                </ul>
+            </div>
+        </nav>
+
+        <!-- Button group -->
+        <div class="d-flex gap-sm-1 position-relative z-1">
+
+            <!-- Theme switcher (light/dark/auto) -->
+            <div class="dropdown">
+                <button type="button"
+                    class="theme-switcher btn btn-icon btn-outline-secondary fs-lg border-0 rounded-circle animate-scale"
+                    data-bs-toggle="dropdown" data-bs-display="dynamic" aria-expanded="false"
+                    aria-label="Toggle theme (light)">
+                    <span class="theme-icon-active d-flex animate-target">
+                        <i class="ci-sun"></i>
+                    </span>
+                </button>
+                <ul class="dropdown-menu start-50 translate-middle-x"
+                    style="--cz-dropdown-min-width: 9rem; --cz-dropdown-spacer: 1rem">
+                    <li>
+                        <button type="button" class="dropdown-item active" data-bs-theme-value="light"
+                            aria-pressed="true">
+                            <span class="theme-icon d-flex fs-base me-2">
+                                <i class="ci-sun"></i>
+                            </span>
+                            <span class="theme-label">Light</span>
+                            <i class="item-active-indicator ci-check ms-auto"></i>
+                        </button>
+                    </li>
+                    <li>
+                        <button type="button" class="dropdown-item" data-bs-theme-value="dark"
+                            aria-pressed="false">
+                            <span class="theme-icon d-flex fs-base me-2">
+                                <i class="ci-moon"></i>
+                            </span>
+                            <span class="theme-label">Dark</span>
+                            <i class="item-active-indicator ci-check ms-auto"></i>
+                        </button>
+                    </li>
+                    <li>
+                        <button type="button" class="dropdown-item" data-bs-theme-value="auto"
+                            aria-pressed="false">
+                            <span class="theme-icon d-flex fs-base me-2">
+                                <i class="ci-auto"></i>
+                            </span>
+                            <span class="theme-label">Auto</span>
+                            <i class="item-active-indicator ci-check ms-auto"></i>
+                        </button>
+                    </li>
+                </ul>
+            </div>
+
+            <!-- Cart button -->
+            <button type="button"
+                class="btn btn-icon fs-lg btn-outline-secondary border-0 rounded-circle animate-scale me-2"
+                data-bs-toggle="offcanvas" data-bs-target="#shoppingCart" aria-controls="shoppingCart"
+                aria-label="Shopping cart">
+                <i class="ci-shopping-cart animate-target"></i>
+            </button>
+
+            <!-- Search -->
+            <div class="dropdown">
+                <button type="button" class="btn btn-icon fs-lg btn-secondary rounded-circle animate-scale"
+                    data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-label="Toggle search bar">
+                    <i class="ci-search animate-target"></i>
+                </button>
+                <div class="dropdown-menu dropdown-menu-end p-3"
+                    style="--cz-dropdown-min-width: 20rem; --cz-dropdown-spacer: 1rem">
+                    <form class="position-relative">
+                        <input type="search" class="form-control rounded-pill" placeholder="Search..."
+                            data-autofocus="dropdown">
+                        <button type="submit"
+                            class="btn btn-icon btn-sm fs-lg btn-secondary rounded-circle position-absolute top-0 end-0 mt-1 me-1"
+                            aria-label="Search">
+                            <i class="ci-arrow-right"></i>
+                        </button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</header>
diff --git a/resources/views/layouts/partials/offcanvas.blade.php b/resources/views/layouts/partials/offcanvas.blade.php
new file mode 100644
index 0000000..e15d2c5
--- /dev/null
+++ b/resources/views/layouts/partials/offcanvas.blade.php
@@ -0,0 +1,123 @@
+<!-- Shopping cart offcanvas -->
+<div class="offcanvas offcanvas-end pb-sm-2 px-sm-2" id="shoppingCart" tabindex="-1" aria-labelledby="shoppingCartLabel"
+    style="width: 500px">
+
+    <!-- Header -->
+    <div class="offcanvas-header flex-column align-items-start py-3 pt-lg-4">
+        <div class="d-flex align-items-center justify-content-between w-100 mb-3 mb-lg-4">
+            <h4 class="offcanvas-title" id="shoppingCartLabel">Shopping cart</h4>
+            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+        </div>
+        <p class="fs-sm">Buy <span class="text-dark-emphasis fw-semibold">$183</span> more to get <span
+                class="text-dark-emphasis fw-semibold">Free Shipping</span></p>
+        <div class="progress w-100" role="progressbar" aria-label="Free shipping progress" aria-valuenow="75"
+            aria-valuemin="0" aria-valuemax="100" style="height: 4px">
+            <div class="progress-bar bg-warning rounded-pill" style="width: 75%"></div>
+        </div>
+    </div>
+
+    <!-- Items -->
+    <div class="offcanvas-body d-flex flex-column gap-4 pt-2">
+
+        <!-- Item -->
+        <div class="d-flex align-items-center">
+            <a class="flex-shrink-0" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                <img src="/img/shop/electronics/thumbs/08.png" width="110" alt="iPhone 14">
+            </a>
+            <div class="w-100 min-w-0 ps-2 ps-sm-3">
+                <h5 class="d-flex animate-underline mb-2">
+                    <a class="d-block fs-sm fw-medium text-truncate animate-target"
+                        href="{{ route('second', ['shop', 'product-general-electronics']) }}">Apple iPhone 14 128GB White</a>
+                </h5>
+                <div class="h6 pb-1 mb-2">$899.00</div>
+                <div class="d-flex align-items-center justify-content-between">
+                    <div class="count-input rounded-2">
+                        <button type="button" class="btn btn-icon btn-sm" data-decrement
+                            aria-label="Decrement quantity">
+                            <i class="ci-minus"></i>
+                        </button>
+                        <input type="number" class="form-control form-control-sm" value="1" readonly>
+                        <button type="button" class="btn btn-icon btn-sm" data-increment
+                            aria-label="Increment quantity">
+                            <i class="ci-plus"></i>
+                        </button>
+                    </div>
+                    <button type="button" class="btn-close fs-sm" data-bs-toggle="tooltip"
+                        data-bs-custom-class="tooltip-sm" data-bs-title="Remove" aria-label="Remove from cart"></button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Item -->
+        <div class="d-flex align-items-center">
+            <a class="position-relative flex-shrink-0" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                <span class="badge text-bg-danger position-absolute top-0 start-0">-10%</span>
+                <img src="/img/shop/electronics/thumbs/09.png" width="110" alt="iPad Pro">
+            </a>
+            <div class="w-100 min-w-0 ps-2 ps-sm-3">
+                <h5 class="d-flex animate-underline mb-2">
+                    <a class="d-block fs-sm fw-medium text-truncate animate-target"
+                        href="{{ route('second', ['shop', 'product-general-electronics']) }}">Tablet Apple iPad Pro M2</a>
+                </h5>
+                <div class="h6 pb-1 mb-2">$989.00 <del class="text-body-tertiary fs-xs fw-normal">$1,099.00</del></div>
+                <div class="d-flex align-items-center justify-content-between">
+                    <div class="count-input rounded-2">
+                        <button type="button" class="btn btn-icon btn-sm" data-decrement
+                            aria-label="Decrement quantity">
+                            <i class="ci-minus"></i>
+                        </button>
+                        <input type="number" class="form-control form-control-sm" value="1" readonly>
+                        <button type="button" class="btn btn-icon btn-sm" data-increment
+                            aria-label="Increment quantity">
+                            <i class="ci-plus"></i>
+                        </button>
+                    </div>
+                    <button type="button" class="btn-close fs-sm" data-bs-toggle="tooltip"
+                        data-bs-custom-class="tooltip-sm" data-bs-title="Remove" aria-label="Remove from cart"></button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Item -->
+        <div class="d-flex align-items-center">
+            <a class="flex-shrink-0" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                <img src="/img/shop/electronics/thumbs/01.png" width="110" alt="Smart Watch">
+            </a>
+            <div class="w-100 min-w-0 ps-2 ps-sm-3">
+                <h5 class="d-flex animate-underline mb-2">
+                    <a class="d-block fs-sm fw-medium text-truncate animate-target"
+                        href="{{ route('second', ['shop', 'product-general-electronics']) }}">Smart Watch Series 7, White</a>
+                </h5>
+                <div class="h6 pb-1 mb-2">$429.00</div>
+                <div class="d-flex align-items-center justify-content-between">
+                    <div class="count-input rounded-2">
+                        <button type="button" class="btn btn-icon btn-sm" data-decrement
+                            aria-label="Decrement quantity">
+                            <i class="ci-minus"></i>
+                        </button>
+                        <input type="number" class="form-control form-control-sm" value="1" readonly>
+                        <button type="button" class="btn btn-icon btn-sm" data-increment
+                            aria-label="Increment quantity">
+                            <i class="ci-plus"></i>
+                        </button>
+                    </div>
+                    <button type="button" class="btn-close fs-sm" data-bs-toggle="tooltip"
+                        data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
+                        aria-label="Remove from cart"></button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Footer -->
+    <div class="offcanvas-header flex-column align-items-start">
+        <div class="d-flex align-items-center justify-content-between w-100 mb-3 mb-md-4">
+            <span class="text-light-emphasis">Subtotal:</span>
+            <span class="h6 mb-0">$2,317.00</span>
+        </div>
+        <div class="d-flex w-100 gap-3">
+            <a class="btn btn-lg btn-secondary w-100" href="{{ route('second', ['checkout', 'v1-cart']) }}">View cart</a>
+            <a class="btn btn-lg btn-primary w-100" href="{{ route('second', ['checkout', 'v1-delivery-1']) }}">Checkout</a>
+        </div>
+    </div>
+</div>
diff --git a/resources/views/layouts/partials/offcanvas2.blade.php b/resources/views/layouts/partials/offcanvas2.blade.php
new file mode 100644
index 0000000..35ae4f0
--- /dev/null
+++ b/resources/views/layouts/partials/offcanvas2.blade.php
@@ -0,0 +1,149 @@
+<div class="offcanvas offcanvas-end pb-sm-2 px-sm-2" id="shoppingCart" tabindex="-1" aria-labelledby="shoppingCartLabel"
+    style="width: 500px">
+
+    <!-- Header -->
+    <div class="offcanvas-header flex-column align-items-start py-3 pt-lg-4">
+        <div class="d-flex align-items-center justify-content-between w-100 mb-3 mb-lg-4">
+            <h4 class="offcanvas-title" id="shoppingCartLabel">Shopping cart</h4>
+            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+        </div>
+        <div class="alert alert-success text-dark-emphasis fs-sm border-0 rounded-4 mb-0" role="alert">
+            Congratulations 🎉 You have added more than <span class="fw-semibold">$50</span> to your cart. <span
+                class="fw-semibold">Delivery is free</span> for you!
+        </div>
+    </div>
+
+    <!-- Items -->
+    <div class="offcanvas-body d-flex flex-column gap-4 pt-2">
+
+        <!-- Item -->
+        <div class="d-flex align-items-center">
+            <a class="position-relative flex-shrink-0" href="{{ route('second', ['shop', 'product-grocery']) }}">
+                <span class="badge text-bg-danger position-absolute top-0 start-0 z-2 mt-0 ms-0">-$2.79</span>
+                <img src="/img/shop/grocery/thumbs/01.png" width="110" alt="Thumbnail">
+            </a>
+            <div class="w-100 ps-3">
+                <h5 class="fs-sm fw-medium lh-base mb-2">
+                    <a class="hover-effect-underline" href="{{ route('second', ['shop', 'product-grocery']) }}">Fresh orange Klementina,
+                        Spain</a>
+                </h5>
+                <div class="h6 pb-1 mb-2">$3.12</div>
+                <div class="d-flex align-items-center justify-content-between">
+                    <div class="count-input rounded-pill">
+                        <button type="button" class="btn btn-icon btn-sm" data-decrement
+                            aria-label="Decrement quantity">
+                            <i class="ci-minus"></i>
+                        </button>
+                        <input type="number" class="form-control form-control-sm" value="3" readonly>
+                        <button type="button" class="btn btn-icon btn-sm" data-increment
+                            aria-label="Increment quantity">
+                            <i class="ci-plus"></i>
+                        </button>
+                    </div>
+                    <button type="button" class="btn-close fs-sm" data-bs-toggle="tooltip"
+                        data-bs-custom-class="tooltip-sm" data-bs-title="Remove" aria-label="Remove from cart"></button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Item -->
+        <div class="d-flex align-items-center">
+            <a class="flex-shrink-0" href="{{ route('second', ['shop', 'product-grocery']) }}">
+                <img src="/img/shop/grocery/thumbs/02.png" width="110" alt="Thumbnail">
+            </a>
+            <div class="w-100 ps-3">
+                <h5 class="fs-sm fw-medium lh-base mb-2">
+                    <a class="hover-effect-underline" href="{{ route('second', ['shop', 'product-grocery']) }}">Pesto sauce Barilla with basil,
+                        Italy</a>
+                </h5>
+                <div class="h6 pb-1 mb-2">$3.95</div>
+                <div class="d-flex align-items-center justify-content-between">
+                    <div class="count-input rounded-pill">
+                        <button type="button" class="btn btn-icon btn-sm" data-decrement
+                            aria-label="Decrement quantity">
+                            <i class="ci-minus"></i>
+                        </button>
+                        <input type="number" class="form-control form-control-sm" value="1" readonly>
+                        <button type="button" class="btn btn-icon btn-sm" data-increment
+                            aria-label="Increment quantity">
+                            <i class="ci-plus"></i>
+                        </button>
+                    </div>
+                    <button type="button" class="btn-close fs-sm" data-bs-toggle="tooltip"
+                        data-bs-custom-class="tooltip-sm" data-bs-title="Remove" aria-label="Remove from cart"></button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Item -->
+        <div class="d-flex align-items-center">
+            <a class="flex-shrink-0" href="{{ route('second', ['shop', 'product-grocery']) }}">
+                <img src="/img/shop/grocery/thumbs/03.png" width="110" alt="Thumbnail">
+            </a>
+            <div class="w-100 ps-3">
+                <h5 class="fs-sm fw-medium lh-base mb-2">
+                    <a class="hover-effect-underline" href="{{ route('second', ['shop', 'product-grocery']) }}">Steak salmon fillet with
+                        rosmary</a>
+                </h5>
+                <div class="h6 pb-1 mb-2">$27.00</div>
+                <div class="d-flex align-items-center justify-content-between">
+                    <div class="count-input rounded-pill">
+                        <button type="button" class="btn btn-icon btn-sm" data-decrement
+                            aria-label="Decrement quantity">
+                            <i class="ci-minus"></i>
+                        </button>
+                        <input type="number" class="form-control form-control-sm" value="2" readonly>
+                        <button type="button" class="btn btn-icon btn-sm" data-increment
+                            aria-label="Increment quantity">
+                            <i class="ci-plus"></i>
+                        </button>
+                    </div>
+                    <button type="button" class="btn-close fs-sm" data-bs-toggle="tooltip"
+                        data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
+                        aria-label="Remove from cart"></button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Item -->
+        <div class="d-flex align-items-center">
+            <a class="flex-shrink-0" href="{{ route('second', ['shop', 'product-grocery']) }}">
+                <img src="/img/shop/grocery/thumbs/04.png" width="110" alt="Thumbnail">
+            </a>
+            <div class="w-100 ps-3">
+                <h5 class="fs-sm fw-medium lh-base mb-2">
+                    <a class="hover-effect-underline" href="{{ route('second', ['shop', 'product-grocery']) }}">Sprite soda lemon lime, can</a>
+                </h5>
+                <div class="h6 pb-1 mb-2">$0.80</div>
+                <div class="d-flex align-items-center justify-content-between">
+                    <div class="count-input rounded-pill">
+                        <button type="button" class="btn btn-icon btn-sm" data-decrement
+                            aria-label="Decrement quantity">
+                            <i class="ci-minus"></i>
+                        </button>
+                        <input type="number" class="form-control form-control-sm" value="2" readonly>
+                        <button type="button" class="btn btn-icon btn-sm" data-increment
+                            aria-label="Increment quantity">
+                            <i class="ci-plus"></i>
+                        </button>
+                    </div>
+                    <button type="button" class="btn-close fs-sm" data-bs-toggle="tooltip"
+                        data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
+                        aria-label="Remove from cart"></button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Footer -->
+    <div class="offcanvas-header flex-column align-items-start">
+        <div class="d-flex align-items-center justify-content-between w-100 mb-3 mb-md-4">
+            <span class="text-light-emphasis">Subtotal:</span>
+            <span class="h6 mb-0">$68.91</span>
+        </div>
+        <div class="d-flex w-100 gap-3">
+            <a class="btn btn-lg btn-secondary w-100 rounded-pill" href="{{ route('second', ['checkout', 'v2-cart']) }}">View cart</a>
+            <a class="btn btn-lg btn-primary w-100 rounded-pill" href="{{ route('second', ['checkout', 'v2-delivery']) }}">Checkout</a>
+        </div>
+    </div>
+</div>
diff --git a/resources/views/layouts/partials/title-meta.blade.php b/resources/views/layouts/partials/title-meta.blade.php
new file mode 100644
index 0000000..e5aacee
--- /dev/null
+++ b/resources/views/layouts/partials/title-meta.blade.php
@@ -0,0 +1,18 @@
+<meta charset="utf-8">
+
+<!-- Viewport -->
+<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, viewport-fit=cover">
+
+<!-- SEO Meta Tags -->
+<title>Cartzilla | {{ $title }}</title>
+<meta name="description" content="Cartzilla - Multipurpose Bootstrap E-Commerce HTML Template">
+<meta name="keywords"
+    content="online shop, e-commerce, online store, market, multipurpose, product landing, cart, checkout, ui kit, light and dark mode, bootstrap, html5, css3, javascript, gallery, slider, mobile, pwa">
+<meta name="author" content="Coderthemes">
+
+<!-- Webmanifest + Favicon / App icons -->
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-status-bar-style" content="black">
+<link rel="manifest" href="/manifest.json">
+<link rel="icon" type="image/png" href="/app-icons/icon-32x32.png" sizes="32x32">
+<link rel="apple-touch-icon" href="/app-icons/icon-180x180.png">
diff --git a/resources/views/shop/catalog-electronics.blade.php b/resources/views/shop/catalog-electronics.blade.php
new file mode 100644
index 0000000..89b1506
--- /dev/null
+++ b/resources/views/shop/catalog-electronics.blade.php
@@ -0,0 +1,1876 @@
+@extends('layouts.landing', ['title' => 'Electronics Store - Catalog'])
+
+@section('content')
+    @include('layouts.partials/offcanvas')
+
+    @include('layouts.partials/navbar', ['wishlist' => True])
+
+    <main class="content-wrapper">
+
+      <!-- Breadcrumb -->
+      <nav class="container pt-3 my-3 my-md-4" aria-label="breadcrumb">
+        <ol class="breadcrumb">
+          <li class="breadcrumb-item"><a href="{{ route('second', ['home', 'electronics']) }}">Home</a></li>
+          <li class="breadcrumb-item active" aria-current="page">Catalog with sidebar filters</li>
+        </ol>
+      </nav>
+
+
+      <!-- Page title -->
+      <h1 class="h3 container mb-4">Shop catalog</h1>
+
+
+      <!-- Banners that are turned into collaspse on screens < 768px wide (sm breakpoint) -->
+      <section class="accordion container pb-4 pb-md-5 mb-xl-3">
+        <div class="accordion-item border-0">
+          <div class="accordion-header d-md-none" id="offersHeading">
+            <button type="button" class="accordion-button w-auto fw-medium collapsed border border-dashed border-danger border-opacity-50 rounded py-2 px-3" data-bs-toggle="collapse" data-bs-target="#offers" aria-expanded="false" aria-controls="offers">
+              <span class="d-inline-flex ci-percent fs-lg text-danger rounded-circle me-2"></span>
+              <span class="me-2">See latest offers</span>
+            </button>
+          </div>
+          <div class="accordion-collapse collapse d-md-block" id="offers" aria-labelledby="offersHeading">
+            <div class="row g-3 g-lg-4 pt-3 pt-md-0">
+              <div class="col-md-7">
+                <div class="position-relative d-flex flex-column flex-sm-row align-items-center h-100 rounded-5 overflow-hidden px-5 px-sm-0 pe-sm-4">
+                  <span class="position-absolute top-0 start-0 w-100 h-100 d-none-dark rtl-flip" style="background: linear-gradient(90deg, #accbee 0%, #e7f0fd 100%)"></span>
+                  <span class="position-absolute top-0 start-0 w-100 h-100 d-none d-block-dark rtl-flip" style="background: linear-gradient(90deg, #1b273a 0%, #1f2632 100%)"></span>
+                  <div class="position-relative z-1 text-center text-sm-start pt-4 pt-sm-0 ps-xl-4 mt-2 mt-sm-0 order-sm-2">
+                    <h2 class="h3 mb-2">iPhone 14</h2>
+                    <p class="fs-sm text-light-emphasis mb-sm-4">Apple iPhone 14 128GB Blue</p>
+                    <a class="btn btn-primary" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                      From $899
+                      <i class="ci-arrow-up-right fs-base ms-1 me-n1"></i>
+                    </a>
+                  </div>
+                  <div class="position-relative z-1 w-100 align-self-end order-sm-1" style="max-width: 416px">
+                    <div class="ratio rtl-flip" style="--cz-aspect-ratio: calc(320 / 416 * 100%)">
+                      <img src="/img/shop/electronics/banners/iphone-1.png" alt="iPhone 14">
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="col-md-5">
+                <div class="position-relative d-flex flex-column align-items-center justify-content-between h-100 rounded-5 overflow-hidden pt-3">
+                  <span class="position-absolute top-0 start-0 w-100 h-100 d-none-dark rtl-flip" style="background: linear-gradient(90deg, #fdcbf1 0%, #fdcbf1 1%, #ffecfa 100%)"></span>
+                  <span class="position-absolute top-0 start-0 w-100 h-100 d-none d-block-dark rtl-flip" style="background: linear-gradient(90deg, #362131 0%, #322730 100%)"></span>
+                  <div class="position-relative z-1 text-center pt-3 mx-4">
+                    <i class="ci-apple text-body-emphasis fs-3 mb-3"></i>
+                    <p class="fs-sm text-light-emphasis mb-1">Deal of the week</p>
+                    <h2 class="h3 mb-4">iPad Pro M1</h2>
+                  </div>
+                  <a class="position-relative z-1 d-block w-100" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                    <div class="ratio" style="--cz-aspect-ratio: calc(159 / 525 * 100%)">
+                      <img src="/img/shop/electronics/banners/ipad.png" width="525" alt="iPad">
+                    </div>
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+
+      <!-- Selected filters + Sorting -->
+      <section class="container mb-4">
+        <div class="row">
+          <div class="col-lg-9">
+            <div class="d-md-flex align-items-start">
+              <div class="h6 fs-sm fw-normal text-nowrap translate-middle-y mt-3 mb-0 me-4">Found <span class="fw-semibold">732</span> items</div>
+              <div class="d-flex flex-wrap gap-2">
+                <button type="button" class="btn btn-sm btn-secondary">
+                  <i class="ci-close fs-sm ms-n1 me-1"></i>
+                  Sale
+                </button>
+                <button type="button" class="btn btn-sm btn-secondary">
+                  <i class="ci-close fs-sm ms-n1 me-1"></i>
+                  Asus
+                </button>
+                <button type="button" class="btn btn-sm btn-secondary">
+                  <i class="ci-close fs-sm ms-n1 me-1"></i>
+                  1 TB
+                </button>
+                <button type="button" class="btn btn-sm btn-secondary">
+                  <i class="ci-close fs-sm ms-n1 me-1"></i>
+                  $340 - $1,250
+                </button>
+                <button type="button" class="btn btn-sm btn-secondary bg-transparent border-0 text-decoration-underline px-0 ms-2">
+                  Clear all
+                </button>
+              </div>
+            </div>
+          </div>
+          <div class="col-lg-3 mt-3 mt-lg-0">
+            <div class="d-flex align-items-center justify-content-lg-end text-nowrap">
+              <label class="form-label fw-semibold mb-0 me-2">Sort by:</label>
+              <div style="width: 190px">
+                <select class="form-select border-0 rounded-0 px-1" data-select='{
+                  "removeItemButton": false,
+                  "classNames": {
+                    "containerInner": ["form-select", "border-0", "rounded-0", "px-1"]
+                  }
+                }'>
+                  <option value="Relevance">Relevance</option>
+                  <option value="Popularity">Popularity</option>
+                  <option value="Price: Low to High">Price: Low to High</option>
+                  <option value="Price: High to Low">Price: High to Low</option>
+                  <option value="Newest Arrivals">Newest Arrivals</option>
+                </select>
+              </div>
+            </div>
+          </div>
+        </div>
+        <hr class="d-lg-none my-3">
+      </section>
+
+
+      <!-- Products grid + Sidebar with filters -->
+      <section class="container pb-5 mb-sm-2 mb-md-3 mb-lg-4 mb-xl-5">
+        <div class="row">
+
+          <!-- Filter sidebar that turns into offcanvas on screens < 992px wide (lg breakpoint) -->
+          <aside class="col-lg-3">
+            <div class="offcanvas-lg offcanvas-start" id="filterSidebar">
+              <div class="offcanvas-header py-3">
+                <h5 class="offcanvas-title">Filter and sort</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#filterSidebar" aria-label="Close"></button>
+              </div>
+              <div class="offcanvas-body flex-column pt-2 py-lg-0">
+
+                <!-- Status -->
+                <div class="w-100 border rounded p-3 p-xl-4 mb-3 mb-xl-4">
+                  <h4 class="h6">Status</h4>
+                  <div class="d-flex flex-wrap gap-2">
+                    <button type="button" class="btn btn-sm btn-outline-secondary">
+                      <i class="ci-percent fs-sm me-1 ms-n1"></i>
+                      Sale
+                    </button>
+                    <button type="button" class="btn btn-sm btn-outline-secondary">Same Day Delivery</button>
+                    <button type="button" class="btn btn-sm btn-outline-secondary">Available to Order</button>
+                  </div>
+                </div>
+
+                <!-- Categories -->
+                <div class="w-100 border rounded p-3 p-xl-4 mb-3 mb-xl-4">
+                  <h4 class="h6 mb-2">Categories</h4>
+                  <ul class="list-unstyled d-block m-0">
+                    <li class="nav d-block pt-2 mt-1">
+                      <a class="nav-link animate-underline fw-normal p-0" href="#!">
+                        <span class="animate-target text-truncate me-3">Smartphones</span>
+                        <span class="text-body-secondary fs-xs ms-auto">218</span>
+                      </a>
+                    </li>
+                    <li class="nav d-block pt-2 mt-1">
+                      <a class="nav-link animate-underline fw-normal p-0" href="#!">
+                        <span class="animate-target text-truncate me-3">Accessories</span>
+                        <span class="text-body-secondary fs-xs ms-auto">372</span>
+                      </a>
+                    </li>
+                    <li class="nav d-block pt-2 mt-1">
+                      <a class="nav-link animate-underline fw-normal p-0" href="#!">
+                        <span class="animate-target text-truncate me-3">Tablets</span>
+                        <span class="text-body-secondary fs-xs ms-auto">110</span>
+                      </a>
+                    </li>
+                    <li class="nav d-block pt-2 mt-1">
+                      <a class="nav-link animate-underline fw-normal p-0" href="#!">
+                        <span class="animate-target text-truncate me-3">Wearable Electronics</span>
+                        <span class="text-body-secondary fs-xs ms-auto">142</span>
+                      </a>
+                    </li>
+                    <li class="nav d-block pt-2 mt-1">
+                      <a class="nav-link animate-underline fw-normal p-0" href="#!">
+                        <span class="animate-target text-truncate me-3">Computers &amp; Laptops</span>
+                        <span class="text-body-secondary fs-xs ms-auto">205</span>
+                      </a>
+                    </li>
+                    <li class="nav d-block pt-2 mt-1">
+                      <a class="nav-link animate-underline fw-normal p-0" href="#!">
+                        <span class="animate-target text-truncate me-3">Cameras, Photo &amp; Video</span>
+                        <span class="text-body-secondary fs-xs ms-auto">78</span>
+                      </a>
+                    </li>
+                    <li class="nav d-block pt-2 mt-1">
+                      <a class="nav-link animate-underline fw-normal p-0" href="#!">
+                        <span class="animate-target text-truncate me-3">Headphones</span>
+                        <span class="text-body-secondary fs-xs ms-auto">121</span>
+                      </a>
+                    </li>
+                    <li class="nav d-block pt-2 mt-1">
+                      <a class="nav-link animate-underline fw-normal p-0" href="#!">
+                        <span class="animate-target text-truncate me-3">Video Games</span>
+                        <span class="text-body-secondary fs-xs ms-auto">89</span>
+                      </a>
+                    </li>
+                  </ul>
+                </div>
+
+                <!-- Price range -->
+                <div class="w-100 border rounded p-3 p-xl-4 mb-3 mb-xl-4">
+                  <h4 class="h6 mb-2" id="slider-label">Price</h4>
+                  <div class="range-slider" data-range-slider='{"startMin": 340, "startMax": 1250, "min": 0, "max": 1600, "step": 1, "tooltipPrefix": "$"}' aria-labelledby="slider-label">
+                    <div class="range-slider-ui"></div>
+                    <div class="d-flex align-items-center">
+                      <div class="position-relative w-50">
+                        <i class="ci-dollar-sign position-absolute top-50 start-0 translate-middle-y ms-3"></i>
+                        <input type="number" class="form-control form-icon-start" min="0" data-range-slider-min>
+                      </div>
+                      <i class="ci-minus text-body-emphasis mx-2"></i>
+                      <div class="position-relative w-50">
+                        <i class="ci-dollar-sign position-absolute top-50 start-0 translate-middle-y ms-3"></i>
+                        <input type="number" class="form-control form-icon-start" min="0" data-range-slider-max>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Brand (checkboxes) -->
+                <div class="w-100 border rounded p-3 p-xl-4 mb-3 mb-xl-4">
+                  <h4 class="h6">Brand</h4>
+                  <div class="d-flex flex-column gap-1">
+                    <div class="d-flex align-items-center justify-content-between">
+                      <div class="form-check">
+                        <input type="checkbox" class="form-check-input" id="apple" checked>
+                        <label for="apple" class="form-check-label text-body-emphasis">Apple</label>
+                      </div>
+                      <span class="text-body-secondary fs-xs">64</span>
+                    </div>
+                    <div class="d-flex align-items-center justify-content-between">
+                      <div class="form-check">
+                        <input type="checkbox" class="form-check-input" id="asus">
+                        <label for="asus" class="form-check-label text-body-emphasis">Asus</label>
+                      </div>
+                      <span class="text-body-secondary fs-xs">310</span>
+                    </div>
+                    <div class="d-flex align-items-center justify-content-between">
+                      <div class="form-check">
+                        <input type="checkbox" class="form-check-input" id="bao">
+                        <label for="bao" class="form-check-label text-body-emphasis">Bang &amp; Olufsen</label>
+                      </div>
+                      <span class="text-body-secondary fs-xs">47</span>
+                    </div>
+                    <div class="d-flex align-items-center justify-content-between">
+                      <div class="form-check">
+                        <input type="checkbox" class="form-check-input" id="bosh">
+                        <label for="bosh" class="form-check-label text-body-emphasis">Bosh</label>
+                      </div>
+                      <span class="text-body-secondary fs-xs">112</span>
+                    </div>
+                    <div class="d-flex align-items-center justify-content-between">
+                      <div class="form-check">
+                        <input type="checkbox" class="form-check-input" id="cobra">
+                        <label for="cobra" class="form-check-label text-body-emphasis">Cobra</label>
+                      </div>
+                      <span class="text-body-secondary fs-xs">96</span>
+                    </div>
+                    <div class="d-flex align-items-center justify-content-between">
+                      <div class="form-check">
+                        <input type="checkbox" class="form-check-input" id="dell">
+                        <label for="dell" class="form-check-label text-body-emphasis">Dell</label>
+                      </div>
+                      <span class="text-body-secondary fs-xs">178</span>
+                    </div>
+                    <div class="d-flex align-items-center justify-content-between">
+                      <div class="form-check">
+                        <input type="checkbox" class="form-check-input" id="foxconn">
+                        <label for="foxconn" class="form-check-label text-body-emphasis">Foxconn</label>
+                      </div>
+                      <span class="text-body-secondary fs-xs">95</span>
+                    </div>
+                    <div class="accordion mb-n2">
+                      <div class="accordion-item border-0">
+                        <div class="accordion-collapse collapse" id="more-brands">
+                          <div class="d-flex flex-column gap-1">
+                            <div class="d-flex align-items-center justify-content-between">
+                              <div class="form-check">
+                                <input type="checkbox" class="form-check-input" id="hp">
+                                <label for="hp" class="form-check-label text-body-emphasis">Hewlett Packard</label>
+                              </div>
+                              <span class="text-body-secondary fs-xs">61</span>
+                            </div>
+                            <div class="d-flex align-items-center justify-content-between">
+                              <div class="form-check">
+                                <input type="checkbox" class="form-check-input" id="huawei">
+                                <label for="huawei" class="form-check-label text-body-emphasis">Huawei</label>
+                              </div>
+                              <span class="text-body-secondary fs-xs">417</span>
+                            </div>
+                            <div class="d-flex align-items-center justify-content-between">
+                              <div class="form-check">
+                                <input type="checkbox" class="form-check-input" id="panasonic">
+                                <label for="panasonic" class="form-check-label text-body-emphasis">Panasonic</label>
+                              </div>
+                              <span class="text-body-secondary fs-xs">123</span>
+                            </div>
+                            <div class="d-flex align-items-center justify-content-between">
+                              <div class="form-check">
+                                <input type="checkbox" class="form-check-input" id="samsung">
+                                <label for="samsung" class="form-check-label text-body-emphasis">Samsung</label>
+                              </div>
+                              <span class="text-body-secondary fs-xs">284</span>
+                            </div>
+                            <div class="d-flex align-items-center justify-content-between">
+                              <div class="form-check">
+                                <input type="checkbox" class="form-check-input" id="sony">
+                                <label for="sony" class="form-check-label text-body-emphasis">Sony</label>
+                              </div>
+                              <span class="text-body-secondary fs-xs">133</span>
+                            </div>
+                            <div class="d-flex align-items-center justify-content-between">
+                              <div class="form-check">
+                                <input type="checkbox" class="form-check-input" id="toshiba">
+                                <label for="toshiba" class="form-check-label text-body-emphasis">Toshiba</label>
+                              </div>
+                              <span class="text-body-secondary fs-xs">39</span>
+                            </div>
+                            <div class="d-flex align-items-center justify-content-between">
+                              <div class="form-check">
+                                <input type="checkbox" class="form-check-input" id="xiaomi">
+                                <label for="xiaomi" class="form-check-label text-body-emphasis">Xiaomi</label>
+                              </div>
+                              <span class="text-body-secondary fs-xs">421</span>
+                            </div>
+                          </div>
+                        </div>
+                        <div class="accordion-header">
+                          <button type="button" class="accordion-button w-auto fs-sm fw-medium collapsed animate-underline py-2" data-bs-toggle="collapse" data-bs-target="#more-brands" aria-expanded="false" aria-controls="more-brands" aria-label="Show/hide more brands">
+                            <span class="animate-target me-2" data-label-collapsed="Show all" data-label-expanded="Show less"></span>
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- SSD size (checkboxes) -->
+                <div class="w-100 border rounded p-3 p-xl-4 mb-3 mb-xl-4">
+                  <h4 class="h6">SSD size</h4>
+                  <div class="d-flex flex-column gap-1">
+                    <div class="d-flex align-items-center justify-content-between">
+                      <div class="form-check">
+                        <input type="checkbox" class="form-check-input" id="tb-2">
+                        <label for="tb-2" class="form-check-label text-body-emphasis">2 TB</label>
+                      </div>
+                      <span class="text-body-secondary fs-xs">13</span>
+                    </div>
+                    <div class="d-flex align-items-center justify-content-between">
+                      <div class="form-check">
+                        <input type="checkbox" class="form-check-input" id="tb-1">
+                        <label for="tb-1" class="form-check-label text-body-emphasis">1 TB</label>
+                      </div>
+                      <span class="text-body-secondary fs-xs">28</span>
+                    </div>
+                    <div class="d-flex align-items-center justify-content-between">
+                      <div class="form-check">
+                        <input type="checkbox" class="form-check-input" id="gb-512" checked>
+                        <label for="gb-512" class="form-check-label text-body-emphasis">512 GB</label>
+                      </div>
+                      <span class="text-body-secondary fs-xs">47</span>
+                    </div>
+                    <div class="d-flex align-items-center justify-content-between">
+                      <div class="form-check">
+                        <input type="checkbox" class="form-check-input" id="gb-256">
+                        <label for="gb-256" class="form-check-label text-body-emphasis">256 GB</label>
+                      </div>
+                      <span class="text-body-secondary fs-xs">56</span>
+                    </div>
+                    <div class="d-flex align-items-center justify-content-between">
+                      <div class="form-check">
+                        <input type="checkbox" class="form-check-input" id="gb-128">
+                        <label for="gb-128" class="form-check-label text-body-emphasis">128 GB</label>
+                      </div>
+                      <span class="text-body-secondary fs-xs">69</span>
+                    </div>
+                    <div class="d-flex align-items-center justify-content-between">
+                      <div class="form-check">
+                        <input type="checkbox" class="form-check-input" id="gb-64">
+                        <label for="gb-64" class="form-check-label text-body-emphasis">64 GB or less</label>
+                      </div>
+                      <span class="text-body-secondary fs-xs">141</span>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Color -->
+                <div class="w-100 border rounded p-3 p-xl-4">
+                  <h4 class="h6">Color</h4>
+                  <div class="nav d-block mt-n2">
+                    <button type="button" class="nav-link w-auto animate-underline fw-normal pt-2 pb-0 px-0">
+                      <span class="rounded-circle me-2" style="width: .875rem; height: .875rem; margin-top: .125rem; background-color: #8bc4ab"></span>
+                      <span class="animate-target">Green</span>
+                    </button>
+                    <button type="button" class="nav-link w-auto animate-underline fw-normal mt-1 pt-2 pb-0 px-0">
+                      <span class="rounded-circle me-2" style="width: .875rem; height: .875rem; margin-top: .125rem; background-color: #ee7976"></span>
+                      <span class="animate-target">Coral red</span>
+                    </button>
+                    <button type="button" class="nav-link w-auto animate-underline fw-normal mt-1 pt-2 pb-0 px-0">
+                      <span class="rounded-circle me-2" style="width: .875rem; height: .875rem; margin-top: .125rem; background-color: #df8fbf"></span>
+                      <span class="animate-target">Light pink</span>
+                    </button>
+                    <button type="button" class="nav-link w-auto animate-underline fw-normal mt-1 pt-2 pb-0 px-0">
+                      <span class="rounded-circle me-2" style="width: .875rem; height: .875rem; margin-top: .125rem; background-color: #9acbf1"></span>
+                      <span class="animate-target">Sky blue</span>
+                    </button>
+                    <button type="button" class="nav-link w-auto animate-underline fw-normal mt-1 pt-2 pb-0 px-0">
+                      <span class="rounded-circle me-2" style="width: .875rem; height: .875rem; margin-top: .125rem; background-color: #364254"></span>
+                      <span class="animate-target">Black</span>
+                    </button>
+                    <button type="button" class="nav-link w-auto animate-underline fw-normal mt-1 pt-2 pb-0 px-0">
+                      <span class="border rounded-circle me-2" style="width: .875rem; height: .875rem; margin-top: .125rem; background-color: #ffffff"></span>
+                      <span class="animate-target">White</span>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </aside>
+
+
+          <!-- Product grid -->
+          <div class="col-lg-9">
+            <div class="row row-cols-2 row-cols-md-3 g-4 pb-3 mb-3">
+
+              <!-- Item -->
+              <div class="col">
+                <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+                  <div class="position-relative">
+                    <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                      <div class="d-flex flex-column gap-2">
+                        <button type="button" class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex" aria-label="Add to Wishlist">
+                          <i class="ci-heart fs-base animate-target"></i>
+                        </button>
+                        <button type="button" class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex" aria-label="Compare">
+                          <i class="ci-refresh-cw fs-base animate-target"></i>
+                        </button>
+                      </div>
+                    </div>
+                    <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                      <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body" data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                        <i class="ci-more-vertical fs-lg"></i>
+                      </button>
+                      <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                        <li>
+                          <a class="dropdown-item" href="#!">
+                            <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                            Add to Wishlist
+                          </a>
+                        </li>
+                        <li>
+                          <a class="dropdown-item" href="#!">
+                            <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                            Compare
+                          </a>
+                        </li>
+                      </ul>
+                    </div>
+                    <a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                      <span class="badge bg-danger position-absolute top-0 start-0 mt-2 ms-2 mt-lg-3 ms-lg-3">-21%</span>
+                      <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                        <img src="/img/shop/electronics/01.png" alt="VR Glasses">
+                      </div>
+                    </a>
+                  </div>
+                  <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                    <div class="d-flex align-items-center gap-2 mb-2">
+                      <div class="d-flex gap-1 fs-xs">
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star text-body-tertiary opacity-75"></i>
+                      </div>
+                      <span class="text-body-tertiary fs-xs">(123)</span>
+                    </div>
+                    <h3 class="pb-1 mb-2">
+                      <a class="d-block fs-sm fw-medium text-truncate" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                        <span class="animate-target">VRB01 Virtual Reality Glasses</span>
+                      </a>
+                    </h3>
+                    <div class="d-flex align-items-center justify-content-between">
+                      <div class="h5 lh-1 mb-0">$340.99 <del class="text-body-tertiary fs-sm fw-normal">$430.00</del></div>
+                      <button type="button" class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2" aria-label="Add to Cart">
+                        <i class="ci-shopping-cart fs-base animate-target"></i>
+                      </button>
+                    </div>
+                  </div>
+                  <div class="product-card-details position-absolute top-100 start-0 w-100 bg-body rounded-bottom shadow mt-n2 p-3 pt-1">
+                    <span class="position-absolute top-0 start-0 w-100 bg-body mt-n2 py-2"></span>
+                    <ul class="list-unstyled d-flex flex-column gap-2 m-0">
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Display:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">OLED 1440x1600</span>
+                      </li>
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Graphics:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">Adreno 540</span>
+                      </li>
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Sound:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">2x3.5mm jack</span>
+                      </li>
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Input:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">4 built-in cameras</span>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Item -->
+              <div class="col">
+                <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+                  <div class="position-relative">
+                    <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                      <div class="d-flex flex-column gap-2">
+                        <button type="button" class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex" aria-label="Add to Wishlist">
+                          <i class="ci-heart fs-base animate-target"></i>
+                        </button>
+                        <button type="button" class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex" aria-label="Compare">
+                          <i class="ci-refresh-cw fs-base animate-target"></i>
+                        </button>
+                      </div>
+                    </div>
+                    <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                      <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body" data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                        <i class="ci-more-vertical fs-lg"></i>
+                      </button>
+                      <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                        <li>
+                          <a class="dropdown-item" href="#!">
+                            <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                            Add to Wishlist
+                          </a>
+                        </li>
+                        <li>
+                          <a class="dropdown-item" href="#!">
+                            <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                            Compare
+                          </a>
+                        </li>
+                      </ul>
+                    </div>
+                    <a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                      <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                        <img src="/img/shop/electronics/02.png" alt="iPhone 14">
+                      </div>
+                    </a>
+                  </div>
+                  <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                    <div class="d-flex align-items-center gap-2 mb-2">
+                      <div class="d-flex gap-1 fs-xs">
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-half text-warning"></i>
+                      </div>
+                      <span class="text-body-tertiary fs-xs">(142)</span>
+                    </div>
+                    <h3 class="pb-1 mb-2">
+                      <a class="d-block fs-sm fw-medium text-truncate" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                        <span class="animate-target">Apple iPhone 14 128GB White</span>
+                      </a>
+                    </h3>
+                    <div class="d-flex align-items-center justify-content-between">
+                      <div class="h5 lh-1 mb-0">$899.00</div>
+                      <button type="button" class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2" aria-label="Add to Cart">
+                        <i class="ci-shopping-cart fs-base animate-target"></i>
+                      </button>
+                    </div>
+                  </div>
+                  <div class="product-card-details position-absolute top-100 start-0 w-100 bg-body rounded-bottom shadow mt-n2 p-3 pt-1">
+                    <span class="position-absolute top-0 start-0 w-100 bg-body mt-n2 py-2"></span>
+                    <ul class="list-unstyled d-flex flex-column gap-2 m-0">
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Display:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">6.1" XDR</span>
+                      </li>
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Capacity:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">128 GB</span>
+                      </li>
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Chip:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">A15 Bionic</span>
+                      </li>
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Camera:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">12 + 12 MP</span>
+                      </li>
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Weight:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">172 grams</span>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Item -->
+              <div class="col">
+                <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+                  <div class="position-relative">
+                    <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                      <div class="d-flex flex-column gap-2">
+                        <button type="button" class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex" aria-label="Add to Wishlist">
+                          <i class="ci-heart fs-base animate-target"></i>
+                        </button>
+                        <button type="button" class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex" aria-label="Compare">
+                          <i class="ci-refresh-cw fs-base animate-target"></i>
+                        </button>
+                      </div>
+                    </div>
+                    <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                      <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body" data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                        <i class="ci-more-vertical fs-lg"></i>
+                      </button>
+                      <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                        <li>
+                          <a class="dropdown-item" href="#!">
+                            <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                            Add to Wishlist
+                          </a>
+                        </li>
+                        <li>
+                          <a class="dropdown-item" href="#!">
+                            <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                            Compare
+                          </a>
+                        </li>
+                      </ul>
+                    </div>
+                    <a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                      <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                        <img src="/img/shop/electronics/03.png" alt="Smart Watch">
+                      </div>
+                    </a>
+                  </div>
+                  <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                    <div class="d-flex align-items-center gap-2 mb-2">
+                      <div class="d-flex gap-1 fs-xs">
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                      </div>
+                      <span class="text-body-tertiary fs-xs">(67)</span>
+                    </div>
+                    <h3 class="pb-1 mb-2">
+                      <a class="d-block fs-sm fw-medium text-truncate" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                        <span class="animate-target">Smart Watch Series 7, White</span>
+                      </a>
+                    </h3>
+                    <div class="d-flex align-items-center justify-content-between">
+                      <div class="h5 lh-1 mb-0">$429.00</div>
+                      <button type="button" class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2" aria-label="Add to Cart">
+                        <i class="ci-shopping-cart fs-base animate-target"></i>
+                      </button>
+                    </div>
+                  </div>
+                  <div class="product-card-details position-absolute top-100 start-0 w-100 bg-body rounded-bottom shadow mt-n2 p-3 pt-1">
+                    <span class="position-absolute top-0 start-0 w-100 bg-body mt-n2 py-2"></span>
+                    <ul class="list-unstyled d-flex flex-column gap-2 m-0">
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Display:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">45mm OLED</span>
+                      </li>
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Chip:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">64-bit Dual-core</span>
+                      </li>
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Connectivity:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">Wi-Fi, Bluetooth</span>
+                      </li>
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Power:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">Lithium-ion battery</span>
+                      </li>
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Weight:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">37.0 grams</span>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Item -->
+              <div class="col">
+                <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+                  <div class="posittion-relative">
+                    <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                      <div class="d-flex flex-column gap-2">
+                        <button type="button" class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex" aria-label="Add to Wishlist">
+                          <i class="ci-heart fs-base animate-target"></i>
+                        </button>
+                        <button type="button" class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex" aria-label="Compare">
+                          <i class="ci-refresh-cw fs-base animate-target"></i>
+                        </button>
+                      </div>
+                    </div>
+                    <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                      <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body" data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                        <i class="ci-more-vertical fs-lg"></i>
+                      </button>
+                      <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                        <li>
+                          <a class="dropdown-item" href="#!">
+                            <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                            Add to Wishlist
+                          </a>
+                        </li>
+                        <li>
+                          <a class="dropdown-item" href="#!">
+                            <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                            Compare
+                          </a>
+                        </li>
+                      </ul>
+                    </div>
+                    <a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                      <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                        <img src="/img/shop/electronics/05.png" alt="iPad Air">
+                      </div>
+                    </a>
+                  </div>
+                  <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                    <div class="d-flex align-items-center gap-2 mb-2">
+                      <div class="d-flex gap-1 fs-xs">
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                      </div>
+                      <span class="text-body-tertiary fs-xs">(12)</span>
+                    </div>
+                    <h3 class="pb-1 mb-2">
+                      <a class="d-block fs-sm fw-medium text-truncate" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                        <span class="animate-target">Tablet Apple iPad Air M1</span>
+                      </a>
+                    </h3>
+                    <div class="d-flex align-items-center justify-content-between">
+                      <div class="h5 lh-1 mb-0">$540.00</div>
+                      <button type="button" class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2" aria-label="Add to Cart">
+                        <i class="ci-shopping-cart fs-base animate-target"></i>
+                      </button>
+                    </div>
+                  </div>
+                  <div class="product-card-details position-absolute top-100 start-0 w-100 bg-body rounded-bottom shadow mt-n2 p-3 pt-1">
+                    <span class="position-absolute top-0 start-0 w-100 bg-body mt-n2 py-2"></span>
+                    <ul class="list-unstyled d-flex flex-column gap-2 m-0">
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Display:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">10.9" LED</span>
+                      </li>
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Capacity:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">64 GB</span>
+                      </li>
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Chip:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">Apple M1</span>
+                      </li>
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Camera:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">12 MP Wide</span>
+                      </li>
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Weight:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">462 grams</span>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Item -->
+              <div class="col">
+                <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+                  <div class="position-relative">
+                    <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                      <div class="d-flex flex-column gap-2">
+                        <button type="button" class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex" aria-label="Add to Wishlist">
+                          <i class="ci-heart fs-base animate-target"></i>
+                        </button>
+                        <button type="button" class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex" aria-label="Compare">
+                          <i class="ci-refresh-cw fs-base animate-target"></i>
+                        </button>
+                      </div>
+                    </div>
+                    <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                      <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body" data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                        <i class="ci-more-vertical fs-lg"></i>
+                      </button>
+                      <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                        <li>
+                          <a class="dropdown-item" href="#!">
+                            <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                            Add to Wishlist
+                          </a>
+                        </li>
+                        <li>
+                          <a class="dropdown-item" href="#!">
+                            <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                            Compare
+                          </a>
+                        </li>
+                      </ul>
+                    </div>
+                    <a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                      <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                        <img src="/img/shop/electronics/06.png" alt="AirPods 2">
+                      </div>
+                    </a>
+                  </div>
+                  <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                    <div class="d-flex align-items-center gap-2 mb-2">
+                      <div class="d-flex gap-1 fs-xs">
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star text-body-tertiary opacity-75"></i>
+                      </div>
+                      <span class="text-body-tertiary fs-xs">(78)</span>
+                    </div>
+                    <h3 class="pb-1 mb-2">
+                      <a class="d-block fs-sm fw-medium text-truncate" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                        <span class="animate-target">Headphones Apple AirPods 2 Pro</span>
+                      </a>
+                    </h3>
+                    <div class="d-flex align-items-center justify-content-between">
+                      <div class="h5 lh-1 mb-0">$224.00</div>
+                      <button type="button" class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2" aria-label="Add to Cart">
+                        <i class="ci-shopping-cart fs-base animate-target"></i>
+                      </button>
+                    </div>
+                  </div>
+                  <div class="product-card-details position-absolute top-100 start-0 w-100 bg-body rounded-bottom shadow mt-n2 p-3 pt-1">
+                    <span class="position-absolute top-0 start-0 w-100 bg-body mt-n2 py-2"></span>
+                    <ul class="list-unstyled d-flex flex-column gap-2 m-0">
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Audio:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">Noise Cancellation</span>
+                      </li>
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Sensors:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">Touch control</span>
+                      </li>
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Chip:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">Apple H2</span>
+                      </li>
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Weight:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">50.8 grams</span>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Item -->
+              <div class="col">
+                <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+                  <div class="position-relative">
+                    <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                      <div class="d-flex flex-column gap-2">
+                        <button type="button" class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex" aria-label="Add to Wishlist">
+                          <i class="ci-heart fs-base animate-target"></i>
+                        </button>
+                        <button type="button" class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex" aria-label="Compare">
+                          <i class="ci-refresh-cw fs-base animate-target"></i>
+                        </button>
+                      </div>
+                    </div>
+                    <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                      <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body" data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                        <i class="ci-more-vertical fs-lg"></i>
+                      </button>
+                      <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                        <li>
+                          <a class="dropdown-item" href="#!">
+                            <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                            Add to Wishlist
+                          </a>
+                        </li>
+                        <li>
+                          <a class="dropdown-item" href="#!">
+                            <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                            Compare
+                          </a>
+                        </li>
+                      </ul>
+                    </div>
+                    <a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                      <span class="badge bg-info position-absolute top-0 start-0 mt-2 ms-2 mt-lg-3 ms-lg-3">New</span>
+                      <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                        <img src="/img/shop/electronics/04.png" alt="MacBook">
+                      </div>
+                    </a>
+                  </div>
+                  <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                    <div class="d-flex align-items-center gap-2 mb-2">
+                      <div class="d-flex gap-1 fs-xs">
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-half text-warning"></i>
+                      </div>
+                      <span class="text-body-tertiary fs-xs">(51)</span>
+                    </div>
+                    <h3 class="pb-1 mb-2">
+                      <a class="d-block fs-sm fw-medium text-truncate" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                        <span class="animate-target">Laptop Apple MacBook Pro 13 M2</span>
+                      </a>
+                    </h3>
+                    <div class="d-flex align-items-center justify-content-between">
+                      <div class="h5 lh-1 mb-0">$1,200.00</div>
+                      <button type="button" class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2" aria-label="Add to Cart">
+                        <i class="ci-shopping-cart fs-base animate-target"></i>
+                      </button>
+                    </div>
+                  </div>
+                  <div class="product-card-details position-absolute top-100 start-0 w-100 bg-body rounded-bottom shadow mt-n2 p-3 pt-1">
+                    <span class="position-absolute top-0 start-0 w-100 bg-body mt-n2 py-2"></span>
+                    <ul class="list-unstyled d-flex flex-column gap-2 m-0">
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Chip:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">Apple M2</span>
+                      </li>
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Memory:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">8 GB unified</span>
+                      </li>
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Storage:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">256 GB SSD</span>
+                      </li>
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Display:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">13.3-inch Retina</span>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Banner -->
+            <div class="position-relative rounded-5 overflow-hidden mb-4">
+              <span class="position-absolute top-0 start-0 w-100 h-100 d-none-dark rtl-flip" style="background: linear-gradient(-90deg, #accbee 0%, #e7f0fd 100%)"></span>
+              <span class="position-absolute top-0 start-0 w-100 h-100 d-none d-block-dark rtl-flip" style="background: linear-gradient(-90deg, #1b273a 0%, #1f2632 100%)"></span>
+              <div class="row align-items-center position-relative z-1">
+                <div class="col-md-6 pt-5 pt-md-0 mb-2 mb-md-0">
+                  <div class="text-center text-md-start py-md-5 px-4 ps-md-5 pe-md-0 me-md-n5">
+                    <h3 class="text-uppercase fw-bold ps-xxl-3 pb-2 mb-1">Seasonal weekly sale 2024</h3>
+                    <p class="text-body-emphasis ps-xxl-3 mb-0">Use code <span class="d-inline-block fw-semibold text-dark bg-white rounded-pill py-1 px-2">Sale 2024</span> to get best offer</p>
+                  </div>
+                </div>
+                <div class="col-md-6 d-flex justify-content-center justify-content-md-end">
+                  <div class="me-3 me-lg-4 me-xxl-5">
+                    <img src="/img/shop/electronics/banners/iphone-2.png" class="d-block rtl-flip" width="335" alt="Camera">
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="row row-cols-2 row-cols-md-3 g-4">
+
+              <!-- Item -->
+              <div class="col">
+                <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+                  <div class="position-relative">
+                    <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                      <div class="d-flex flex-column gap-2">
+                        <button type="button" class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex" aria-label="Add to Wishlist">
+                          <i class="ci-heart fs-base animate-target"></i>
+                        </button>
+                        <button type="button" class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex" aria-label="Compare">
+                          <i class="ci-refresh-cw fs-base animate-target"></i>
+                        </button>
+                      </div>
+                    </div>
+                    <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                      <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body" data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                        <i class="ci-more-vertical fs-lg"></i>
+                      </button>
+                      <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                        <li>
+                          <a class="dropdown-item" href="#!">
+                            <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                            Add to Wishlist
+                          </a>
+                        </li>
+                        <li>
+                          <a class="dropdown-item" href="#!">
+                            <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                            Compare
+                          </a>
+                        </li>
+                      </ul>
+                    </div>
+                    <a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                      <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                        <img src="/img/shop/electronics/13.png" alt="Dualsense Edge">
+                      </div>
+                    </a>
+                  </div>
+                  <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                    <div class="d-flex align-items-center gap-2 mb-2">
+                      <div class="d-flex gap-1 fs-xs">
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                      </div>
+                      <span class="text-body-tertiary fs-xs">(187)</span>
+                    </div>
+                    <h3 class="pb-1 mb-2">
+                      <a class="d-block fs-sm fw-medium text-truncate" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                        <span class="animate-target">Sony Dualsense Edge Controller</span>
+                      </a>
+                    </h3>
+                    <div class="d-flex align-items-center justify-content-between">
+                      <div class="h5 lh-1 mb-0">$200.00</div>
+                      <button type="button" class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2" aria-label="Add to Cart">
+                        <i class="ci-shopping-cart fs-base animate-target"></i>
+                      </button>
+                    </div>
+                  </div>
+                  <div class="product-card-details position-absolute top-100 start-0 w-100 bg-body rounded-bottom shadow mt-n2 p-3 pt-1">
+                    <span class="position-absolute top-0 start-0 w-100 bg-body mt-n2 py-2"></span>
+                    <ul class="list-unstyled d-flex flex-column gap-2 m-0">
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Controls:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">Adjustable triggers</span>
+                      </li>
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Connectivity:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">Bluetooth</span>
+                      </li>
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Audio:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">3.5mm, built-in speaker</span>
+                      </li>
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Weight:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">325 grams</span>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Item -->
+              <div class="col">
+                <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+                  <div class="posittion-relative">
+                    <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                      <div class="d-flex flex-column gap-2">
+                        <button type="button" class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex" aria-label="Add to Wishlist">
+                          <i class="ci-heart fs-base animate-target"></i>
+                        </button>
+                        <button type="button" class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex" aria-label="Compare">
+                          <i class="ci-refresh-cw fs-base animate-target"></i>
+                        </button>
+                      </div>
+                    </div>
+                    <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                      <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body" data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                        <i class="ci-more-vertical fs-lg"></i>
+                      </button>
+                      <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                        <li>
+                          <a class="dropdown-item" href="#!">
+                            <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                            Add to Wishlist
+                          </a>
+                        </li>
+                        <li>
+                          <a class="dropdown-item" href="#!">
+                            <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                            Compare
+                          </a>
+                        </li>
+                      </ul>
+                    </div>
+                    <a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                      <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                        <img src="/img/shop/electronics/07.png" alt="iPad Pro">
+                      </div>
+                    </a>
+                  </div>
+                  <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                    <div class="d-flex align-items-center gap-2 mb-2">
+                      <div class="d-flex gap-1 fs-xs">
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-half text-warning"></i>
+                      </div>
+                      <span class="text-body-tertiary fs-xs">(49)</span>
+                    </div>
+                    <h3 class="pb-1 mb-2">
+                      <a class="d-block fs-sm fw-medium text-truncate" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                        <span class="animate-target">Tablet Apple iPad Pro M1</span>
+                      </a>
+                    </h3>
+                    <div class="d-flex align-items-center justify-content-between">
+                      <div class="h5 lh-1 mb-0">$739.00</div>
+                      <button type="button" class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2" aria-label="Add to Cart">
+                        <i class="ci-shopping-cart fs-base animate-target"></i>
+                      </button>
+                    </div>
+                  </div>
+                  <div class="product-card-details position-absolute top-100 start-0 w-100 bg-body rounded-bottom shadow mt-n2 p-3 pt-1">
+                    <span class="position-absolute top-0 start-0 w-100 bg-body mt-n2 py-2"></span>
+                    <ul class="list-unstyled d-flex flex-column gap-2 m-0">
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Display:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">11" LED</span>
+                      </li>
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Capacity:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">128 GB</span>
+                      </li>
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Chip:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">Apple M1</span>
+                      </li>
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Camera:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">12 MP Wide</span>
+                      </li>
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Weight:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">470 grams</span>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Item -->
+              <div class="col">
+                <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+                  <div class="posittion-relative">
+                    <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                      <div class="d-flex flex-column gap-2">
+                        <button type="button" class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex" aria-label="Add to Wishlist">
+                          <i class="ci-heart fs-base animate-target"></i>
+                        </button>
+                        <button type="button" class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex" aria-label="Compare">
+                          <i class="ci-refresh-cw fs-base animate-target"></i>
+                        </button>
+                      </div>
+                    </div>
+                    <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                      <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body" data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                        <i class="ci-more-vertical fs-lg"></i>
+                      </button>
+                      <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                        <li>
+                          <a class="dropdown-item" href="#!">
+                            <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                            Add to Wishlist
+                          </a>
+                        </li>
+                        <li>
+                          <a class="dropdown-item" href="#!">
+                            <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                            Compare
+                          </a>
+                        </li>
+                      </ul>
+                    </div>
+                    <a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                      <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                        <img src="/img/shop/electronics/09.png" alt="Wireless Buds">
+                      </div>
+                    </a>
+                  </div>
+                  <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                    <div class="d-flex align-items-center gap-2 mb-2">
+                      <div class="d-flex gap-1 fs-xs">
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                      </div>
+                      <span class="text-body-tertiary fs-xs">(142)</span>
+                    </div>
+                    <h3 class="pb-1 mb-2">
+                      <a class="d-block fs-sm fw-medium text-truncate" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                        <span class="animate-target">Xiaomi Wireless Buds Pro</span>
+                      </a>
+                    </h3>
+                    <div class="d-flex align-items-center justify-content-between">
+                      <div class="h5 lh-1 mb-0">$156.00</div>
+                      <button type="button" class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2" aria-label="Add to Cart">
+                        <i class="ci-shopping-cart fs-base animate-target"></i>
+                      </button>
+                    </div>
+                  </div>
+                  <div class="product-card-details position-absolute top-100 start-0 w-100 bg-body rounded-bottom shadow mt-n2 p-3 pt-1">
+                    <span class="position-absolute top-0 start-0 w-100 bg-body mt-n2 py-2"></span>
+                    <ul class="list-unstyled d-flex flex-column gap-2 m-0">
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Audio:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">Noise Cancellation</span>
+                      </li>
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Connectivity:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">Bluetooth</span>
+                      </li>
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Material:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">Plastic</span>
+                      </li>
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Weight:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">98 grams</span>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Item -->
+              <div class="col">
+                <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+                  <div class="position-relative">
+                    <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                      <div class="d-flex flex-column gap-2">
+                        <button type="button" class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex" aria-label="Add to Wishlist">
+                          <i class="ci-heart fs-base animate-target"></i>
+                        </button>
+                        <button type="button" class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex" aria-label="Compare">
+                          <i class="ci-refresh-cw fs-base animate-target"></i>
+                        </button>
+                      </div>
+                    </div>
+                    <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                      <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body" data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                        <i class="ci-more-vertical fs-lg"></i>
+                      </button>
+                      <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                        <li>
+                          <a class="dropdown-item" href="#!">
+                            <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                            Add to Wishlist
+                          </a>
+                        </li>
+                        <li>
+                          <a class="dropdown-item" href="#!">
+                            <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                            Compare
+                          </a>
+                        </li>
+                      </ul>
+                    </div>
+                    <a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                      <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                        <img src="/img/shop/electronics/10.png" alt="iPhone 14">
+                      </div>
+                    </a>
+                  </div>
+                  <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                    <div class="d-flex align-items-center gap-2 mb-2">
+                      <div class="d-flex gap-1 fs-xs">
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-half text-warning"></i>
+                      </div>
+                      <span class="text-body-tertiary fs-xs">(335)</span>
+                    </div>
+                    <h3 class="pb-1 mb-2">
+                      <a class="d-block fs-sm fw-medium text-truncate" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                        <span class="animate-target">Apple iPhone 14 128GB Blue</span>
+                      </a>
+                    </h3>
+                    <div class="d-flex align-items-center justify-content-between">
+                      <div class="h5 lh-1 mb-0">$899.00</div>
+                      <button type="button" class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2" aria-label="Add to Cart">
+                        <i class="ci-shopping-cart fs-base animate-target"></i>
+                      </button>
+                    </div>
+                  </div>
+                  <div class="product-card-details position-absolute top-100 start-0 w-100 bg-body rounded-bottom shadow mt-n2 p-3 pt-1">
+                    <span class="position-absolute top-0 start-0 w-100 bg-body mt-n2 py-2"></span>
+                    <ul class="list-unstyled d-flex flex-column gap-2 m-0">
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Display:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">6.1" XDR</span>
+                      </li>
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Capacity:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">128 GB</span>
+                      </li>
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Chip:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">A15 Bionic</span>
+                      </li>
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Camera:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">12 + 12 MP</span>
+                      </li>
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Weight:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">172 grams</span>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Item -->
+              <div class="col">
+                <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+                  <div class="posittion-relative">
+                    <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                      <div class="d-flex flex-column gap-2">
+                        <button type="button" class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex" aria-label="Add to Wishlist">
+                          <i class="ci-heart fs-base animate-target"></i>
+                        </button>
+                        <button type="button" class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex" aria-label="Compare">
+                          <i class="ci-refresh-cw fs-base animate-target"></i>
+                        </button>
+                      </div>
+                    </div>
+                    <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                      <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body" data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                        <i class="ci-more-vertical fs-lg"></i>
+                      </button>
+                      <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                        <li>
+                          <a class="dropdown-item" href="#!">
+                            <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                            Add to Wishlist
+                          </a>
+                        </li>
+                        <li>
+                          <a class="dropdown-item" href="#!">
+                            <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                            Compare
+                          </a>
+                        </li>
+                      </ul>
+                    </div>
+                    <a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                      <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                        <img src="/img/shop/electronics/08.png" alt="Bluetooth Headphones">
+                      </div>
+                    </a>
+                  </div>
+                  <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                    <div class="d-flex align-items-center gap-2 mb-2">
+                      <div class="d-flex gap-1 fs-xs">
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-half text-warning"></i>
+                        <i class="ci-star text-body-tertiary opacity-75"></i>
+                      </div>
+                      <span class="text-body-tertiary fs-xs">(136)</span>
+                    </div>
+                    <h3 class="pb-1 mb-2">
+                      <a class="d-block fs-sm fw-medium text-truncate" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                        <span class="animate-target">Wireless Bluetooth Headphones Sony</span>
+                      </a>
+                    </h3>
+                    <div class="d-flex align-items-center justify-content-between">
+                      <div class="h5 lh-1 mb-0">$299.00</div>
+                      <button type="button" class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2" aria-label="Add to Cart">
+                        <i class="ci-shopping-cart fs-base animate-target"></i>
+                      </button>
+                    </div>
+                  </div>
+                  <div class="product-card-details position-absolute top-100 start-0 w-100 bg-body rounded-bottom shadow mt-n2 p-3 pt-1">
+                    <span class="position-absolute top-0 start-0 w-100 bg-body mt-n2 py-2"></span>
+                    <ul class="list-unstyled d-flex flex-column gap-2 m-0">
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Audio:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">Noise Cancellation</span>
+                      </li>
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Connectivity:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">Bluetooth, 3.5mm jack</span>
+                      </li>
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Material:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">Leather, Plastic</span>
+                      </li>
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Weight:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">185 grams</span>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Banner -->
+              <div class="col" data-bs-theme="dark">
+                <div class="d-flex flex-column align-items-center justify-content-end h-100 text-center overflow-hidden rounded-5 px-4 px-lg-3 pt-4 pb-4" style="background: #1d2c41 url(/img/shop/electronics/banners/background.jpg) center/cover no-repeat">
+                  <div class="ratio animate-up-down position-relative z-2 me-lg-4" style="max-width: 320px; margin-bottom: -22%; --cz-aspect-ratio: calc(256 / 260 * 100%)">
+                    <img src="/img/shop/electronics/banners/laptop.png" alt="Laptop">
+                  </div>
+                  <h3 class="display-5 mb-2">MacBook</h3>
+                  <p class="text-body fs-sm fw-medium mb-3">Be Pro Anywhere</p>
+                  <a class="btn btn-sm btn-primary mb-2" href="#!">
+                    From $1,199
+                    <i class="ci-arrow-up-right fs-base ms-1 me-n1"></i>
+                  </a>
+                </div>
+              </div>
+
+              <!-- Item -->
+              <div class="col">
+                <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+                  <div class="position-relative">
+                    <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                      <div class="d-flex flex-column gap-2">
+                        <button type="button" class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex" aria-label="Add to Wishlist">
+                          <i class="ci-heart fs-base animate-target"></i>
+                        </button>
+                        <button type="button" class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex" aria-label="Compare">
+                          <i class="ci-refresh-cw fs-base animate-target"></i>
+                        </button>
+                      </div>
+                    </div>
+                    <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                      <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body" data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                        <i class="ci-more-vertical fs-lg"></i>
+                      </button>
+                      <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                        <li>
+                          <a class="dropdown-item" href="#!">
+                            <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                            Add to Wishlist
+                          </a>
+                        </li>
+                        <li>
+                          <a class="dropdown-item" href="#!">
+                            <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                            Compare
+                          </a>
+                        </li>
+                      </ul>
+                    </div>
+                    <a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                      <span class="badge bg-danger position-absolute top-0 start-0 mt-2 ms-2 mt-lg-3 ms-lg-3">-17%</span>
+                      <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                        <img src="/img/shop/electronics/11.png" alt="Nikon Camera">
+                      </div>
+                    </a>
+                  </div>
+                  <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                    <div class="d-flex align-items-center gap-2 mb-2">
+                      <div class="d-flex gap-1 fs-xs">
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                      </div>
+                      <span class="text-body-tertiary fs-xs">(14)</span>
+                    </div>
+                    <h3 class="pb-1 mb-2">
+                      <a class="d-block fs-sm fw-medium text-truncate" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                        <span class="animate-target">VRB01 Camera Nikon Max</span>
+                      </a>
+                    </h3>
+                    <div class="d-flex align-items-center justify-content-between">
+                      <div class="h5 lh-1 mb-0">$652.00 <del class="text-body-tertiary fs-sm fw-normal">$785.00</del></div>
+                      <button type="button" class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2" aria-label="Add to Cart">
+                        <i class="ci-shopping-cart fs-base animate-target"></i>
+                      </button>
+                    </div>
+                  </div>
+                  <div class="product-card-details position-absolute top-100 start-0 w-100 bg-body rounded-bottom shadow mt-n2 p-3 pt-1">
+                    <span class="position-absolute top-0 start-0 w-100 bg-body mt-n2 py-2"></span>
+                    <ul class="list-unstyled d-flex flex-column gap-2 m-0">
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Resolution:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">45.7 MP</span>
+                      </li>
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Sensor:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">35.9mm x 23.9mm</span>
+                      </li>
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Storage:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">SD card</span>
+                      </li>
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Movie:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">4K UHD</span>
+                      </li>
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Weight:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">216 grams</span>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Item -->
+              <div class="col">
+                <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+                  <div class="position-relative">
+                    <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                      <div class="d-flex flex-column gap-2">
+                        <button type="button" class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex" aria-label="Add to Wishlist">
+                          <i class="ci-heart fs-base animate-target"></i>
+                        </button>
+                        <button type="button" class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex" aria-label="Compare">
+                          <i class="ci-refresh-cw fs-base animate-target"></i>
+                        </button>
+                      </div>
+                    </div>
+                    <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                      <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body" data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                        <i class="ci-more-vertical fs-lg"></i>
+                      </button>
+                      <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                        <li>
+                          <a class="dropdown-item" href="#!">
+                            <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                            Add to Wishlist
+                          </a>
+                        </li>
+                        <li>
+                          <a class="dropdown-item" href="#!">
+                            <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                            Compare
+                          </a>
+                        </li>
+                      </ul>
+                    </div>
+                    <a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                      <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                        <img src="/img/shop/electronics/12.png" alt="Power Bank">
+                      </div>
+                    </a>
+                  </div>
+                  <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                    <div class="d-flex align-items-center gap-2 mb-2">
+                      <div class="d-flex gap-1 fs-xs">
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star text-body-tertiary opacity-75"></i>
+                      </div>
+                      <span class="text-body-tertiary fs-xs">(125)</span>
+                    </div>
+                    <h3 class="pb-1 mb-2">
+                      <a class="d-block fs-sm fw-medium text-truncate" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                        <span class="animate-target">Power Bank PBS 10000 mAh Black</span>
+                      </a>
+                    </h3>
+                    <div class="d-flex align-items-center justify-content-between">
+                      <div class="h5 lh-1 mb-0">$45.00</div>
+                      <button type="button" class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2" aria-label="Add to Cart">
+                        <i class="ci-shopping-cart fs-base animate-target"></i>
+                      </button>
+                    </div>
+                  </div>
+                  <div class="product-card-details position-absolute top-100 start-0 w-100 bg-body rounded-bottom shadow mt-n2 p-3 pt-1">
+                    <span class="position-absolute top-0 start-0 w-100 bg-body mt-n2 py-2"></span>
+                    <ul class="list-unstyled d-flex flex-column gap-2 m-0">
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Capacity:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">10000 mAh</span>
+                      </li>
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Indcators:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">LED light</span>
+                      </li>
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Color:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">Black</span>
+                      </li>
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Movie:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">4K UHD</span>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Item -->
+              <div class="col">
+                <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+                  <div class="position-relative">
+                    <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                      <div class="d-flex flex-column gap-2">
+                        <button type="button" class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex" aria-label="Add to Wishlist">
+                          <i class="ci-heart fs-base animate-target"></i>
+                        </button>
+                        <button type="button" class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex" aria-label="Compare">
+                          <i class="ci-refresh-cw fs-base animate-target"></i>
+                        </button>
+                      </div>
+                    </div>
+                    <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                      <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body" data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                        <i class="ci-more-vertical fs-lg"></i>
+                      </button>
+                      <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                        <li>
+                          <a class="dropdown-item" href="#!">
+                            <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                            Add to Wishlist
+                          </a>
+                        </li>
+                        <li>
+                          <a class="dropdown-item" href="#!">
+                            <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                            Compare
+                          </a>
+                        </li>
+                      </ul>
+                    </div>
+                    <a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                      <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                        <img src="/img/shop/electronics/03.png" alt="Smart Watch">
+                      </div>
+                    </a>
+                  </div>
+                  <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                    <div class="d-flex align-items-center gap-2 mb-2">
+                      <div class="d-flex gap-1 fs-xs">
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                      </div>
+                      <span class="text-body-tertiary fs-xs">(67)</span>
+                    </div>
+                    <h3 class="pb-1 mb-2">
+                      <a class="d-block fs-sm fw-medium text-truncate" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                        <span class="animate-target">Smart Watch Series 7, White</span>
+                      </a>
+                    </h3>
+                    <div class="d-flex align-items-center justify-content-between">
+                      <div class="h5 lh-1 mb-0">$429.00</div>
+                      <button type="button" class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2" aria-label="Add to Cart">
+                        <i class="ci-shopping-cart fs-base animate-target"></i>
+                      </button>
+                    </div>
+                  </div>
+                  <div class="product-card-details position-absolute top-100 start-0 w-100 bg-body rounded-bottom shadow mt-n2 p-3 pt-1">
+                    <span class="position-absolute top-0 start-0 w-100 bg-body mt-n2 py-2"></span>
+                    <ul class="list-unstyled d-flex flex-column gap-2 m-0">
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Display:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">45mm OLED</span>
+                      </li>
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Chip:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">64-bit Dual-core</span>
+                      </li>
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Connectivity:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">Wi-Fi, Bluetooth</span>
+                      </li>
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Power:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">Lithium-ion battery</span>
+                      </li>
+                      <li class="d-flex align-items-center">
+                        <span class="fs-xs">Weight:</span>
+                        <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                        <span class="text-dark-emphasis fs-xs fw-medium text-end">37.0 grams</span>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Pagination -->
+            <nav class="border-top mt-4 pt-3" aria-label="Catalog pagination">
+              <ul class="pagination pagination-lg pt-2 pt-md-3">
+                <li class="page-item disabled me-auto">
+                  <a class="page-link d-flex align-items-center h-100 fs-lg px-2" href="#!" aria-label="Previous page">
+                    <i class="ci-chevron-left mx-1"></i>
+                  </a>
+                </li>
+                <li class="page-item active" aria-current="page">
+                  <span class="page-link">
+                    1
+                    <span class="visually-hidden">(current)</span>
+                  </span>
+                </li>
+                <li class="page-item">
+                  <a class="page-link" href="#!">2</a>
+                </li>
+                <li class="page-item">
+                  <a class="page-link" href="#!">3</a>
+                </li>
+                <li class="page-item">
+                  <span class="page-link pe-none">...</span>
+                </li>
+                <li class="page-item">
+                  <a class="page-link" href="#!">16</a>
+                </li>
+                <li class="page-item ms-auto">
+                  <a class="page-link d-flex align-items-center h-100 fs-lg px-2" href="#!" aria-label="Next page">
+                    <i class="ci-chevron-right mx-1"></i>
+                  </a>
+                </li>
+              </ul>
+            </nav>
+          </div>
+        </div>
+      </section>
+
+
+      <!-- Subscription form + Vlog -->
+      <section class="bg-body-tertiary py-5">
+        <div class="container pt-sm-2 pt-md-3 pt-lg-4 pt-xl-5">
+          <div class="row">
+            <div class="col-md-6 col-lg-5 mb-5 mb-md-0">
+              <h2 class="h4 mb-2">Sign up to our newsletter</h2>
+              <p class="text-body pb-2 pb-ms-3">Receive our latest updates about our products &amp; promotions</p>
+              <form class="d-flex needs-validation pb-1 pb-sm-2 pb-md-3 pb-lg-0 mb-4 mb-lg-5" novalidate>
+                <div class="position-relative w-100 me-2">
+                  <input type="email" class="form-control form-control-lg" placeholder="Your email" required>
+                </div>
+                <button type="submit" class="btn btn-lg btn-primary">Subscribe</button>
+              </form>
+              <div class="d-flex gap-3">
+                <a class="btn btn-icon btn-secondary rounded-circle" href="#!" aria-label="Instagram">
+                  <i class="ci-instagram fs-base"></i>
+                </a>
+                <a class="btn btn-icon btn-secondary rounded-circle" href="#!" aria-label="Facebook">
+                  <i class="ci-facebook fs-base"></i>
+                </a>
+                <a class="btn btn-icon btn-secondary rounded-circle" href="#!" aria-label="YouTube">
+                  <i class="ci-youtube fs-base"></i>
+                </a>
+                <a class="btn btn-icon btn-secondary rounded-circle" href="#!" aria-label="Telegram">
+                  <i class="ci-telegram fs-base"></i>
+                </a>
+              </div>
+            </div>
+            <div class="col-md-6 col-lg-5 col-xl-4 offset-lg-1 offset-xl-2">
+              <ul class="list-unstyled d-flex flex-column gap-4 ps-md-4 ps-lg-0 mb-3">
+                <li class="nav flex-nowrap align-items-center position-relative">
+                  <img src="/img/home/electronics/vlog/01.jpg" class="rounded" width="140" alt="Video cover">
+                  <div class="ps-3">
+                    <div class="fs-xs text-body-secondary lh-sm mb-2">6:16</div>
+                    <a class="nav-link fs-sm hover-effect-underline stretched-link p-0" href="#!">5 New Cool Gadgets You Must See on Cartzilla - Cheap Budget</a>
+                  </div>
+                </li>
+                <li class="nav flex-nowrap align-items-center position-relative">
+                  <img src="/img/home/electronics/vlog/02.jpg" class="rounded" width="140" alt="Video cover">
+                  <div class="ps-3">
+                    <div class="fs-xs text-body-secondary lh-sm mb-2">10:20</div>
+                    <a class="nav-link fs-sm hover-effect-underline stretched-link p-0" href="#!">5 Super Useful Gadgets on Cartzilla You Must Have in 2023</a>
+                  </div>
+                </li>
+                <li class="nav flex-nowrap align-items-center position-relative">
+                  <img src="/img/home/electronics/vlog/03.jpg" class="rounded" width="140" alt="Video cover">
+                  <div class="ps-3">
+                    <div class="fs-xs text-body-secondary lh-sm mb-2">8:40</div>
+                    <a class="nav-link fs-sm hover-effect-underline stretched-link p-0" href="#!">Top 5 New Amazing Gadgets on Cartzilla You Must See</a>
+                  </div>
+                </li>
+              </ul>
+              <div class="nav ps-md-4 ps-lg-0">
+                <a class="btn nav-link animate-underline text-decoration-none px-0" href="#!">
+                  <span class="animate-target">View all</span>
+                  <i class="ci-chevron-right fs-base ms-1"></i>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+
+    @include('layouts.partials/footer')
+@endsection
+
+@section('scripts')
+@endsection
diff --git a/resources/views/shop/catalog-fashion.blade.php b/resources/views/shop/catalog-fashion.blade.php
new file mode 100644
index 0000000..aa74acd
--- /dev/null
+++ b/resources/views/shop/catalog-fashion.blade.php
@@ -0,0 +1,2669 @@
+@extends('layouts.landing', ['title' => 'Fashion Store - Catalog'])
+
+@section('content')
+    <div class="offcanvas offcanvas-end pb-sm-2 px-sm-2" id="shoppingCart" tabindex="-1" aria-labelledby="shoppingCartLabel"
+        style="width: 500px">
+
+        <!-- Header -->
+        <div class="offcanvas-header flex-column align-items-start py-3 pt-lg-4">
+            <div class="d-flex align-items-center justify-content-between w-100 mb-3 mb-lg-4">
+                <h4 class="offcanvas-title" id="shoppingCartLabel">Shopping cart</h4>
+                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+            </div>
+            <p class="fs-sm">Buy <span class="text-dark-emphasis fw-semibold">$53</span> more to get <span
+                    class="text-dark-emphasis fw-semibold">Free Shipping</span></p>
+            <div class="progress w-100" role="progressbar" aria-label="Free shipping progress" aria-valuenow="78"
+                aria-valuemin="0" aria-valuemax="100" style="height: 4px">
+                <div class="progress-bar bg-dark rounded-pill d-none-dark" style="width: 78%"></div>
+                <div class="progress-bar bg-light rounded-pill d-none d-block-dark" style="width: 78%"></div>
+            </div>
+        </div>
+
+        <!-- Items -->
+        <div class="offcanvas-body d-flex flex-column gap-4 pt-2">
+
+            <!-- Item -->
+            <div class="d-flex align-items-center">
+                <a class="flex-shrink-0" href="{{ route('second', ['shop', 'product-fashion']) }}">
+                    <img src="/img/shop/fashion/thumbs/07.png" class="bg-body-tertiary rounded" width="110"
+                        alt="Thumbnail">
+                </a>
+                <div class="w-100 min-w-0 ps-3">
+                    <h5 class="d-flex animate-underline mb-2">
+                        <a class="d-block fs-sm fw-medium text-truncate animate-target"
+                            href="{{ route('second', ['shop', 'product-fashion']) }}">Leather sneakers with golden laces</a>
+                    </h5>
+                    <div class="h6 pb-1 mb-2">$74.00</div>
+                    <div class="d-flex align-items-center justify-content-between">
+                        <div class="count-input rounded-2">
+                            <button type="button" class="btn btn-icon btn-sm" data-decrement
+                                aria-label="Decrement quantity">
+                                <i class="ci-minus"></i>
+                            </button>
+                            <input type="number" class="form-control form-control-sm" value="1" readonly>
+                            <button type="button" class="btn btn-icon btn-sm" data-increment
+                                aria-label="Increment quantity">
+                                <i class="ci-plus"></i>
+                            </button>
+                        </div>
+                        <button type="button" class="btn-close fs-sm" data-bs-toggle="tooltip"
+                            data-bs-custom-class="tooltip-sm" data-bs-title="Remove" aria-label="Remove from cart"></button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Item -->
+            <div class="d-flex align-items-center">
+                <a class="flex-shrink-0" href="{{ route('second', ['shop', 'product-fashion']) }}">
+                    <img src="/img/shop/fashion/thumbs/08.png" class="bg-body-tertiary rounded" width="110"
+                        alt="Thumbnail">
+                </a>
+                <div class="w-100 min-w-0 ps-3">
+                    <h5 class="d-flex animate-underline mb-2">
+                        <a class="d-block fs-sm fw-medium text-truncate animate-target"
+                            href="{{ route('second', ['shop', 'product-fashion']) }}">Classic cotton men's shirt</a>
+                    </h5>
+                    <div class="h6 pb-1 mb-2">$27.00</div>
+                    <div class="d-flex align-items-center justify-content-between">
+                        <div class="count-input rounded-2">
+                            <button type="button" class="btn btn-icon btn-sm" data-decrement
+                                aria-label="Decrement quantity">
+                                <i class="ci-minus"></i>
+                            </button>
+                            <input type="number" class="form-control form-control-sm" value="1" readonly>
+                            <button type="button" class="btn btn-icon btn-sm" data-increment
+                                aria-label="Increment quantity">
+                                <i class="ci-plus"></i>
+                            </button>
+                        </div>
+                        <button type="button" class="btn-close fs-sm" data-bs-toggle="tooltip"
+                            data-bs-custom-class="tooltip-sm" data-bs-title="Remove" aria-label="Remove from cart"></button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Item -->
+            <div class="d-flex align-items-center">
+                <a class="flex-shrink-0" href="{{ route('second', ['shop', 'product-fashion']) }}">
+                    <img src="/img/shop/fashion/thumbs/09.png" class="bg-body-tertiary rounded" width="110"
+                        alt="Thumbnail">
+                </a>
+                <div class="w-100 min-w-0 ps-3">
+                    <h5 class="d-flex animate-underline mb-2">
+                        <a class="d-block fs-sm fw-medium text-truncate animate-target"
+                            href="{{ route('second', ['shop', 'product-fashion']) }}">Polarized sunglasses for men</a>
+                    </h5>
+                    <div class="h6 pb-1 mb-2">$96.00 <del class="text-body-tertiary fs-xs fw-normal">112.00</del></div>
+                    <div class="d-flex align-items-center justify-content-between">
+                        <div class="count-input rounded-2">
+                            <button type="button" class="btn btn-icon btn-sm" data-decrement
+                                aria-label="Decrement quantity">
+                                <i class="ci-minus"></i>
+                            </button>
+                            <input type="number" class="form-control form-control-sm" value="1" readonly>
+                            <button type="button" class="btn btn-icon btn-sm" data-increment
+                                aria-label="Increment quantity">
+                                <i class="ci-plus"></i>
+                            </button>
+                        </div>
+                        <button type="button" class="btn-close fs-sm" data-bs-toggle="tooltip"
+                            data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
+                            aria-label="Remove from cart"></button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Footer -->
+        <div class="offcanvas-header flex-column align-items-start">
+            <div class="d-flex align-items-center justify-content-between w-100 mb-3 mb-md-4">
+                <span class="text-light-emphasis">Subtotal:</span>
+                <span class="h6 mb-0">$197.00</span>
+            </div>
+            <div class="d-flex w-100 gap-3">
+                <a class="btn btn-lg btn-secondary w-100" href="#!">View cart</a>
+                <a class="btn btn-lg btn-dark w-100" href="#!">Checkout</a>
+            </div>
+        </div>
+    </div>
+
+    <div class="offcanvas offcanvas-top" id="searchBox" data-bs-backdrop="static" tabindex="-1">
+        <div class="offcanvas-header border-bottom p-0 py-lg-1">
+            <form class="container d-flex align-items-center">
+                <input type="search" class="form-control form-control-lg fs-lg border-0 rounded-0 py-3 ps-0"
+                    placeholder="Search the products" data-autofocus="offcanvas">
+                <button type="reset" class="btn-close fs-lg" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+            </form>
+        </div>
+        <div class="offcanvas-body px-0">
+            <div class="container text-center">
+                <svg class="text-body-tertiary opacity-60 mb-4" xmlns="http://www.w3.org/2000/svg" width="60"
+                    viewBox="0 0 512 512" fill="currentColor">
+                    <path
+                        d="M340.115,361.412l-16.98-16.98c-34.237,29.36-78.733,47.098-127.371,47.098C87.647,391.529,0,303.883,0,195.765S87.647,0,195.765,0s195.765,87.647,195.765,195.765c0,48.638-17.738,93.134-47.097,127.371l16.98,16.98l11.94-11.94c5.881-5.881,15.415-5.881,21.296,0l112.941,112.941c5.881,5.881,5.881,15.416,0,21.296l-45.176,45.176c-5.881,5.881-15.415,5.881-21.296,0L328.176,394.648c-5.881-5.881-5.881-15.416,0-21.296L340.115,361.412z M195.765,361.412c91.484,0,165.647-74.163,165.647-165.647S287.249,30.118,195.765,30.118S30.118,104.28,30.118,195.765S104.28,361.412,195.765,361.412z M360.12,384l91.645,91.645l23.88-23.88L384,360.12L360.12,384z M233.034,233.033c5.881-5.881,15.415-5.881,21.296,0c5.881,5.881,5.881,15.416,0,21.296c-32.345,32.345-84.786,32.345-117.131,0c-5.881-5.881-5.881-15.415,0-21.296c5.881-5.881,15.416-5.881,21.296,0C179.079,253.616,212.45,253.616,233.034,233.033zM135.529,180.706c-12.475,0-22.588-10.113-22.588-22.588c0-12.475,10.113-22.588,22.588-22.588c12.475,0,22.588,10.113,22.588,22.588C158.118,170.593,148.005,180.706,135.529,180.706z M256,180.706c-12.475,0-22.588-10.113-22.588-22.588c0-12.475,10.113-22.588,22.588-22.588s22.588,10.113,22.588,22.588C278.588,170.593,268.475,180.706,256,180.706z" />
+                </svg>
+                <h6 class="mb-2">Your search results will appear here</h6>
+                <p class="fs-sm mb-0">Start typing in the search field above to see instant search results.</p>
+            </div>
+        </div>
+    </div>
+
+    <div class="alert alert-dismissible bg-dark text-white rounded-0 py-2 px-0 m-0 fade show" data-bs-theme="dark">
+        <div class="container position-relative d-flex min-w-0">
+            <div class="d-flex flex-nowrap align-items-center g-2 w-100 min-w-0 mx-auto mt-n1" style="max-width: 458px">
+                <div class="nav me-2">
+                    <button type="button" class="nav-link fs-lg p-0" id="topbarPrev" aria-label="Prev">
+                        <i class="ci-chevron-left"></i>
+                    </button>
+                </div>
+                <div class="swiper fs-sm text-white"
+                    data-swiper='{
+            "spaceBetween": 24,
+            "loop": true,
+            "autoplay": {
+              "delay": 5000,
+              "disableOnInteraction": false
+            },
+            "navigation": {
+              "prevEl": "#topbarPrev",
+              "nextEl": "#topbarNext"
+            }
+          }'>
+                    <div class="swiper-wrapper min-w-0">
+                        <div class="swiper-slide text-truncate text-center">🎉 Free Shipping on orders over $250. <span
+                                class="d-none d-sm-inline">Don't miss a discount!</span></div>
+                        <div class="swiper-slide text-truncate text-center">💰 Money back guarantee. <span
+                                class="d-none d-sm-inline">We return money within 30 days.</span></div>
+                        <div class="swiper-slide text-truncate text-center">💪 Friendly 24/7 customer support. <span
+                                class="d-none d-sm-inline">We've got you covered!</span></div>
+                    </div>
+                </div>
+                <div class="nav ms-2">
+                    <button type="button" class="nav-link fs-lg p-0" id="topbarNext" aria-label="Next">
+                        <i class="ci-chevron-right"></i>
+                    </button>
+                </div>
+            </div>
+            <button type="button" class="btn-close position-static flex-shrink-0 p-1 ms-3 ms-md-n4"
+                data-bs-dismiss="alert" aria-label="Close"></button>
+        </div>
+    </div>
+
+    <header class="navbar navbar-expand-lg navbar-sticky bg-body d-block z-fixed p-0"
+        data-sticky-navbar='{"offset": 500}'>
+        <div class="container py-2 py-lg-3">
+            <div class="d-flex align-items-center gap-3">
+
+                <!-- Mobile offcanvas menu toggler (Hamburger) -->
+                <button type="button" class="navbar-toggler me-4 me-md-2" data-bs-toggle="offcanvas"
+                    data-bs-target="#navbarNav" aria-controls="navbarNav" aria-label="Toggle navigation">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+
+                <!-- Country slect visible on screens > 768px wide (md breakpoint) -->
+                <div class="dropdown d-none d-md-block nav">
+                    <a class="nav-link dropdown-toggle py-1 px-0" href="#" data-bs-toggle="dropdown"
+                        aria-haspopup="true" aria-expanded="false" aria-label="Country select: USA">
+                        <div class="ratio ratio-1x1" style="width: 20px">
+                            <img src="/img/flags/en-us.png" alt="USA">
+                        </div>
+                    </a>
+                    <ul class="dropdown-menu fs-sm" style="--cz-dropdown-spacer: .5rem">
+                        <li>
+                            <a class="dropdown-item" href="#!">
+                                <img src="/img/flags/en-uk.png" class="flex-shrink-0 me-2" width="20"
+                                    alt="United Kingdom">
+                                United Kingdom
+                            </a>
+                        </li>
+                        <li>
+                            <a class="dropdown-item" href="#!">
+                                <img src="/img/flags/fr.png" class="flex-shrink-0 me-2" width="20" alt="France">
+                                France
+                            </a>
+                        </li>
+                        <li>
+                            <a class="dropdown-item" href="#!">
+                                <img src="/img/flags/de.png" class="flex-shrink-0 me-2" width="20"
+                                    alt="Deutschland">
+                                Deutschland
+                            </a>
+                        </li>
+                        <li>
+                            <a class="dropdown-item" href="#!">
+                                <img src="/img/flags/it.png" class="flex-shrink-0 me-2" width="20" alt="Italia">
+                                Italia
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+
+                <!-- City slect visible on screens > 768px wide (md breakpoint) -->
+                <div class="dropdown d-none d-md-block nav">
+                    <a class="nav-link animate-underline dropdown-toggle fw-normal py-1 px-0" href="#"
+                        data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        <span class="animate-target">Washington</span>
+                    </a>
+                    <ul class="dropdown-menu fs-sm" style="--cz-dropdown-spacer: .5rem">
+                        <li><a class="dropdown-item" href="#!">Chicago</a></li>
+                        <li><a class="dropdown-item" href="#!">Los Angeles</a></li>
+                        <li><a class="dropdown-item" href="#!">New York</a></li>
+                        <li><a class="dropdown-item" href="#!">Philadelphia</a></li>
+                    </ul>
+                </div>
+            </div>
+
+            <!-- Navbar brand (Logo) -->
+            <a class="navbar-brand fs-2 py-0 m-0 me-auto me-sm-n5" href="{{ route('second', ['home', 'fashion-v1']) }}">Cartzilla</a>
+
+            <!-- Button group -->
+            <div class="d-flex align-items-center">
+
+                <!-- Navbar stuck nav toggler -->
+                <button type="button" class="navbar-toggler d-none navbar-stuck-show me-3" data-bs-toggle="collapse"
+                    data-bs-target="#stuckNav" aria-controls="stuckNav" aria-expanded="false"
+                    aria-label="Toggle navigation in navbar stuck state">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+
+                <!-- Theme switcher (light/dark/auto) -->
+                <div class="dropdown">
+                    <button type="button"
+                        class="theme-switcher btn btn-icon btn-lg btn-outline-secondary fs-lg border-0 rounded-circle animate-scale"
+                        data-bs-toggle="dropdown" aria-expanded="false" aria-label="Toggle theme (light)">
+                        <span class="theme-icon-active d-flex animate-target">
+                            <i class="ci-sun"></i>
+                        </span>
+                    </button>
+                    <ul class="dropdown-menu" style="--cz-dropdown-min-width: 9rem">
+                        <li>
+                            <button type="button" class="dropdown-item active" data-bs-theme-value="light"
+                                aria-pressed="true">
+                                <span class="theme-icon d-flex fs-base me-2">
+                                    <i class="ci-sun"></i>
+                                </span>
+                                <span class="theme-label">Light</span>
+                                <i class="item-active-indicator ci-check ms-auto"></i>
+                            </button>
+                        </li>
+                        <li>
+                            <button type="button" class="dropdown-item" data-bs-theme-value="dark"
+                                aria-pressed="false">
+                                <span class="theme-icon d-flex fs-base me-2">
+                                    <i class="ci-moon"></i>
+                                </span>
+                                <span class="theme-label">Dark</span>
+                                <i class="item-active-indicator ci-check ms-auto"></i>
+                            </button>
+                        </li>
+                        <li>
+                            <button type="button" class="dropdown-item" data-bs-theme-value="auto"
+                                aria-pressed="false">
+                                <span class="theme-icon d-flex fs-base me-2">
+                                    <i class="ci-auto"></i>
+                                </span>
+                                <span class="theme-label">Auto</span>
+                                <i class="item-active-indicator ci-check ms-auto"></i>
+                            </button>
+                        </li>
+                    </ul>
+                </div>
+
+                <!-- Search toggle button visible on screens < 992px wide (lg breakpoint) -->
+                <button type="button"
+                    class="btn btn-icon btn-lg fs-xl btn-outline-secondary border-0 rounded-circle animate-shake d-lg-none"
+                    data-bs-toggle="offcanvas" data-bs-target="#searchBox" aria-controls="searchBox"
+                    aria-label="Toggle search bar">
+                    <i class="ci-search animate-target"></i>
+                </button>
+
+                <!-- Account button visible on screens > 768px wide (md breakpoint) -->
+                <a class="btn btn-icon btn-lg fs-lg btn-outline-secondary border-0 rounded-circle animate-shake d-none d-md-inline-flex"
+                    href="{{ route('second', ['account', 'signin']) }}">
+                    <i class="ci-user animate-target"></i>
+                    <span class="visually-hidden">Account</span>
+                </a>
+
+                <!-- Wishlist button visible on screens > 768px wide (md breakpoint) -->
+                <a class="btn btn-icon btn-lg fs-lg btn-outline-secondary border-0 rounded-circle animate-pulse d-none d-md-inline-flex"
+                    href="#!">
+                    <i class="ci-heart animate-target"></i>
+                    <span class="visually-hidden">Wishlist</span>
+                </a>
+
+                <!-- Cart button -->
+                <button type="button"
+                    class="btn btn-icon btn-lg fs-xl btn-outline-secondary position-relative border-0 rounded-circle animate-scale"
+                    data-bs-toggle="offcanvas" data-bs-target="#shoppingCart" aria-controls="shoppingCart"
+                    aria-label="Shopping cart">
+                    <span class="position-absolute top-0 start-100 badge fs-xs text-bg-primary rounded-pill mt-1 ms-n4 z-2"
+                        style="--cz-badge-padding-y: .25em; --cz-badge-padding-x: .42em">3</span>
+                    <i class="ci-shopping-bag animate-target me-1"></i>
+                </button>
+            </div>
+        </div>
+
+        <!-- Main navigation that turns into offcanvas on screens < 992px wide (lg breakpoint) -->
+        <div class="collapse navbar-stuck-hide" id="stuckNav">
+            <nav class="offcanvas offcanvas-start" id="navbarNav" tabindex="-1" aria-labelledby="navbarNavLabel">
+                <div class="offcanvas-header py-3">
+                    <h5 class="offcanvas-title" id="navbarNavLabel">Browse Cartzilla</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+                </div>
+
+                <!-- Country and City slects visible on screens < 768px wide (md breakpoint) -->
+                <div class="offcanvas-header gap-3 d-md-none pt-0 pb-3">
+                    <div class="dropdown nav">
+                        <a class="nav-link dropdown-toggle py-1 px-0" href="#" data-bs-toggle="dropdown"
+                            aria-haspopup="true" aria-expanded="false" aria-label="Country select: USA">
+                            <div class="ratio ratio-1x1" style="width: 20px">
+                                <img src="/img/flags/en-us.png" alt="USA">
+                            </div>
+                        </a>
+                        <ul class="dropdown-menu fs-sm" style="--cz-dropdown-spacer: .5rem">
+                            <li>
+                                <a class="dropdown-item" href="#!">
+                                    <img src="/img/flags/en-uk.png" class="flex-shrink-0 me-2" width="20"
+                                        alt="United Kingdom">
+                                    United Kingdom
+                                </a>
+                            </li>
+                            <li>
+                                <a class="dropdown-item" href="#!">
+                                    <img src="/img/flags/fr.png" class="flex-shrink-0 me-2" width="20"
+                                        alt="France">
+                                    France
+                                </a>
+                            </li>
+                            <li>
+                                <a class="dropdown-item" href="#!">
+                                    <img src="/img/flags/de.png" class="flex-shrink-0 me-2" width="20"
+                                        alt="Deutschland">
+                                    Deutschland
+                                </a>
+                            </li>
+                            <li>
+                                <a class="dropdown-item" href="#!">
+                                    <img src="/img/flags/it.png" class="flex-shrink-0 me-2" width="20"
+                                        alt="Italia">
+                                    Italia
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="dropdown nav">
+                        <a class="nav-link animate-underline dropdown-toggle fw-normal py-1 px-0" href="#"
+                            data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            <span class="animate-target">Washington</span>
+                        </a>
+                        <ul class="dropdown-menu fs-sm" style="--cz-dropdown-spacer: .5rem">
+                            <li><a class="dropdown-item" href="#!">Chicago</a></li>
+                            <li><a class="dropdown-item" href="#!">Los Angeles</a></li>
+                            <li><a class="dropdown-item" href="#!">New York</a></li>
+                            <li><a class="dropdown-item" href="#!">Philadelphia</a></li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="offcanvas-body pt-1 pb-3 py-lg-0">
+                    <div class="container pb-lg-2 px-0 px-lg-3">
+
+                        <div class="position-relative d-lg-flex align-items-center justify-content-between">
+
+                            <!-- Categories mega menu -->
+                            <div class="navbar-nav">
+                                <div class="dropdown position-static pb-lg-2">
+                                    <button type="button"
+                                        class="nav-link animate-underline fw-semibold text-uppercase ps-0"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover" data-bs-auto-close="outside"
+                                        aria-expanded="false">
+                                        <i class="ci-menu fs-lg me-2"></i>
+                                        <span class="animate-target">Categories</span>
+                                    </button>
+                                    <div class="dropdown-menu w-100 p-4 px-xl-5" style="--cz-dropdown-spacer: .75rem">
+
+                                        <!-- Nav tabs -->
+                                        <ul class="nav nav-underline justify-content-lg-center mt-n2 mt-lg-0 mb-4"
+                                            role="tablist">
+                                            <li class="nav-item" role="presentation">
+                                                <button type="button" class="nav-link text-uppercase active"
+                                                    id="womens-tab" data-bs-toggle="tab"
+                                                    data-bs-target="#womens-tab-pane" role="tab"
+                                                    aria-controls="womens-tab-pane" aria-selected="true">
+                                                    Women's
+                                                </button>
+                                            </li>
+                                            <li class="nav-item" role="presentation">
+                                                <button type="button" class="nav-link text-uppercase" id="mens-tab"
+                                                    data-bs-toggle="tab" data-bs-target="#mens-tab-pane" role="tab"
+                                                    aria-controls="mens-tab-pane" aria-selected="false">
+                                                    Men's
+                                                </button>
+                                            </li>
+                                            <li class="nav-item" role="presentation">
+                                                <button type="button" class="nav-link text-uppercase" id="kids-tab"
+                                                    data-bs-toggle="tab" data-bs-target="#kids-tab-pane" role="tab"
+                                                    aria-controls="kids-tab-pane" aria-selected="false">
+                                                    Kids'
+                                                </button>
+                                            </li>
+                                        </ul>
+
+                                        <!-- Tab panes -->
+                                        <div class="tab-content pb-xl-4">
+
+                                            <!-- Women's tab -->
+                                            <div class="tab-pane fade show active" id="womens-tab-pane" role="tabpanel"
+                                                aria-labelledby="womens-tab">
+                                                <div class="row g-4">
+                                                    <div class="col-lg-2">
+                                                        <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
+                                                            href="{{ route('second', ['shop', 'catalog-fashion']) }}">
+                                                            <span class="animate-target">Clothing</span>
+                                                        </a>
+                                                        <ul class="nav flex-column gap-2 mt-0">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Shirts &amp; Tops</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Coats &amp;
+                                                                    Outerwear</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Underwear</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sweatshirts</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Dresses</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Swimwear</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">View all</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="col-lg-2">
+                                                        <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
+                                                            href="{{ route('second', ['shop', 'catalog-fashion']) }}">
+                                                            <span class="animate-target">Shoes</span>
+                                                        </a>
+                                                        <ul class="nav flex-column gap-2 mt-0">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Boots</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sandals</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Heels</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Loafers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Slippers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Oxfords</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">View all</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="col-lg-2">
+                                                        <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
+                                                            href="{{ route('second', ['shop', 'catalog-fashion']) }}">
+                                                            <span class="animate-target">Accessories</span>
+                                                        </a>
+                                                        <ul class="nav flex-column gap-2 mt-0">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Handbags</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Eyewear</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Hats</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Watches</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Jewelry</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Belts</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">View all</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="col-lg-2">
+                                                        <div class="h6 mb-2">Specialty Sizes</div>
+                                                        <ul class="nav flex-column gap-2 mt-0">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Plus Size</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Petite</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Wide Shoes</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Narrow Shoes</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="col-lg-4 d-none d-lg-block" data-bs-theme="light">
+                                                        <div
+                                                            class="position-relative d-flex flex-column h-100 rounded-4 overflow-hidden p-4">
+                                                            <div
+                                                                class="position-relative d-flex flex-column justify-content-between h-100 z-2 pt-xl-2 ps-xl-2">
+                                                                <div class="h4 lh-base">Women's<br>Heels<br>Collection
+                                                                </div>
+                                                                <div>
+                                                                    <a class="btn btn-sm btn-dark stretched-link"
+                                                                        href="{{ route('second', ['shop', 'catalog-fashion']) }}"
+                                                                        data-bs-theme="light">Shop now</a>
+                                                                </div>
+                                                            </div>
+                                                            <img src="/img/mega-menu/fashion/01.jpg"
+                                                                class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rtl-flip"
+                                                                alt="Image">
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+
+                                            <!-- Men's tab -->
+                                            <div class="tab-pane fade" id="mens-tab-pane" role="tabpanel"
+                                                aria-labelledby="mens-tab">
+                                                <div class="row g-4">
+                                                    <div class="col-lg-2">
+                                                        <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
+                                                            href="{{ route('second', ['shop', 'catalog-fashion']) }}">
+                                                            <span class="animate-target">Clothing</span>
+                                                        </a>
+                                                        <ul class="nav flex-column gap-2 mt-0">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">T-Shirts</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Jeans</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Coats &amp;
+                                                                    Outerwear</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sweatshirts</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Underwear</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Pants</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">View all</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="col-lg-2">
+                                                        <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
+                                                            href="{{ route('second', ['shop', 'catalog-fashion']) }}">
+                                                            <span class="animate-target">Shoes</span>
+                                                        </a>
+                                                        <ul class="nav flex-column gap-2 mt-0">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sneakers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Oxfords</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Loafers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sandals</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Boots</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Slippers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">View all</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="col-lg-2">
+                                                        <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
+                                                            href="{{ route('second', ['shop', 'catalog-fashion']) }}">
+                                                            <span class="animate-target">Accessories</span>
+                                                        </a>
+                                                        <ul class="nav flex-column gap-2 mt-0">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Backpacks</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sunglasses</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Bags</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Watches</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Hats</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Belts</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">View all</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="col-lg-2">
+                                                        <div class="h6 mb-2">Specialty Shops</div>
+                                                        <ul class="nav flex-column gap-2 mt-0">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Active Wear</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sports Clothing</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Athletic Shoes</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="col-lg-4 d-none d-lg-block" data-bs-theme="dark">
+                                                        <div
+                                                            class="position-relative d-flex flex-column h-100 rounded-4 overflow-hidden p-4">
+                                                            <div
+                                                                class="position-relative d-flex flex-column justify-content-between h-100 z-2 pt-xl-2 ps-xl-2">
+                                                                <div class="h4 lh-base">Men's<br>Sunglasses<br>Offers</div>
+                                                                <div>
+                                                                    <a class="btn btn-sm btn-dark stretched-link"
+                                                                        href="{{ route('second', ['shop', 'catalog-fashion']) }}"
+                                                                        data-bs-theme="dark">Shop now</a>
+                                                                </div>
+                                                            </div>
+                                                            <img src="/img/mega-menu/fashion/02.jpg"
+                                                                class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rtl-flip"
+                                                                alt="Image">
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+
+                                            <!-- Kids' tab -->
+                                            <div class="tab-pane fade" id="kids-tab-pane" role="tabpanel"
+                                                aria-labelledby="kids-tab">
+                                                <div class="row g-4">
+                                                    <div class="col-lg-2">
+                                                        <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
+                                                            href="{{ route('second', ['shop', 'catalog-fashion']) }}">
+                                                            <span class="animate-target">Boys</span>
+                                                        </a>
+                                                        <ul class="nav flex-column gap-2 mt-0">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Pants</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sneakers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Coats &amp;
+                                                                    Outerwear</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sweatshirts</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Boots</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Shorts</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">View all</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="col-lg-2">
+                                                        <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
+                                                            href="{{ route('second', ['shop', 'catalog-fashion']) }}">
+                                                            <span class="animate-target">Girls</span>
+                                                        </a>
+                                                        <ul class="nav flex-column gap-2 mt-0">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Shirts &amp; Tops</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Dresses</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sneakers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Hoodies</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sandals</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Coats &amp;
+                                                                    Outerwear</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">View all</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="col-lg-2">
+                                                        <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
+                                                            href="{{ route('second', ['shop', 'catalog-fashion']) }}">
+                                                            <span class="animate-target">Accessories</span>
+                                                        </a>
+                                                        <ul class="nav flex-column gap-2 mt-0">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Backpacks</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Gloves</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Shoe Laces</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Scarves</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Hats</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Belts</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">View all</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="col-lg-2">
+                                                        <div class="h6 mb-2">Shop by Age</div>
+                                                        <ul class="nav flex-column gap-2 mt-0">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Infant</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Toddler</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Little Kid</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Big Kid</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="col-lg-4 d-none d-lg-block" data-bs-theme="light">
+                                                        <div
+                                                            class="position-relative d-flex flex-column h-100 rounded-4 overflow-hidden p-4">
+                                                            <div
+                                                                class="position-relative d-flex flex-column justify-content-between h-100 z-2 pt-xl-2 ps-xl-2">
+                                                                <div class="h4 lh-base">Kids'<br>Spring<br>Collection</div>
+                                                                <div>
+                                                                    <a class="btn btn-sm btn-dark stretched-link"
+                                                                        href="{{ route('second', ['shop', 'catalog-fashion']) }}"
+                                                                        data-bs-theme="light">Shop now</a>
+                                                                </div>
+                                                            </div>
+                                                            <img src="/img/mega-menu/fashion/03.jpg"
+                                                                class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rtl-flip"
+                                                                alt="Image">
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Navbar nav -->
+                            <ul class="navbar-nav position-relative me-xl-n5">
+                                <li class="nav-item dropdown pb-lg-2 me-lg-n1 me-xl-0">
+                                    <a class="nav-link dropdown-toggle" href="#" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Home</a>
+                                    <ul class="dropdown-menu" style="--cz-dropdown-spacer: .75rem">
+                                        <li class="hover-effect-opacity px-2 mx-n2">
+                                            <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'electronics']) }}">
+                                                <span class="fw-medium">Electronics Store</span>
+                                                <span class="d-block fs-xs text-body-secondary">Megamenu + Hero
+                                                    slider</span>
+                                                <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                                    style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                                    <img class="position-relative z-2 d-none-dark"
+                                                        src="/img/mega-menu/demo-preview/electronics-light.jpg"
+                                                        alt="Electronics Store">
+                                                    <img class="position-relative z-2 d-none d-block-dark"
+                                                        src="/img/mega-menu/demo-preview/electronics-dark.jpg"
+                                                        alt="Electronics Store">
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                        style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                        style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="hover-effect-opacity px-2 mx-n2">
+                                            <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'fashion-v1']) }}">
+                                                <span class="fw-medium">Fashion Store v.1</span>
+                                                <span class="d-block fs-xs text-body-secondary">Hero promo slider</span>
+                                                <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                                    style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                                    <img class="position-relative z-2 d-none-dark"
+                                                        src="/img/mega-menu/demo-preview/fashion-1-light.jpg"
+                                                        alt="Fashion Store v.1">
+                                                    <img class="position-relative z-2 d-none d-block-dark"
+                                                        src="/img/mega-menu/demo-preview/fashion-1-dark.jpg"
+                                                        alt="Fashion Store v.1">
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                        style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                        style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="hover-effect-opacity px-2 mx-n2">
+                                            <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'fashion-v2']) }}">
+                                                <span class="fw-medium">Fashion Store v.2</span>
+                                                <span class="d-block fs-xs text-body-secondary">Hero banner with
+                                                    hotspots</span>
+                                                <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                                    style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                                    <img class="position-relative z-2 d-none-dark"
+                                                        src="/img/mega-menu/demo-preview/fashion-2-light.jpg"
+                                                        alt="Fashion Store v.2">
+                                                    <img class="position-relative z-2 d-none d-block-dark"
+                                                        src="/img/mega-menu/demo-preview/fashion-2-dark.jpg"
+                                                        alt="Fashion Store v.2">
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                        style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                        style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="hover-effect-opacity px-2 mx-n2">
+                                            <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'furniture']) }}">
+                                                <span class="fw-medium">Furniture Store</span>
+                                                <span class="d-block fs-xs text-body-secondary">Fancy product
+                                                    carousel</span>
+                                                <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                                    style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                                    <img class="position-relative z-2 d-none-dark"
+                                                        src="/img/mega-menu/demo-preview/furniture-light.jpg"
+                                                        alt="Furniture Store">
+                                                    <img class="position-relative z-2 d-none d-block-dark"
+                                                        src="/img/mega-menu/demo-preview/furniture-dark.jpg"
+                                                        alt="Furniture Store">
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                        style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                        style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="hover-effect-opacity px-2 mx-n2">
+                                            <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'grocery']) }}">
+                                                <span class="fw-medium">Grocery Store</span>
+                                                <span class="d-block fs-xs text-body-secondary">Hero slider + Category
+                                                    cards</span>
+                                                <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                                    style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                                    <img class="position-relative z-2 d-none-dark"
+                                                        src="/img/mega-menu/demo-preview/grocery-light.jpg"
+                                                        alt="Grocery Store">
+                                                    <img class="position-relative z-2 d-none d-block-dark"
+                                                        src="/img/mega-menu/demo-preview/grocery-dark.jpg"
+                                                        alt="Grocery Store">
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                        style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                        style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="hover-effect-opacity px-2 mx-n2">
+                                            <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'marketplace']) }}">
+                                                <span class="fw-medium">Marketplace</span>
+                                                <span class="d-block fs-xs text-body-secondary">Multi-vendor, digital
+                                                    goods</span>
+                                                <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                                    style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                                    <img class="position-relative z-2 d-none-dark"
+                                                        src="/img/mega-menu/demo-preview/marketplace-light.jpg"
+                                                        alt="Marketplace">
+                                                    <img class="position-relative z-2 d-none d-block-dark"
+                                                        src="/img/mega-menu/demo-preview/marketplace-dark.jpg"
+                                                        alt="Marketplace">
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                        style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                        style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="hover-effect-opacity px-2 mx-n2">
+                                            <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'single-store']) }}">
+                                                <span class="fw-medium">Single Product Store</span>
+                                                <span class="d-block fs-xs text-body-secondary">Single product / mono
+                                                    brand</span>
+                                                <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                                    style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                                    <img class="position-relative z-2 d-none-dark"
+                                                        src="/img/mega-menu/demo-preview/single-store-light.jpg"
+                                                        alt="Single Product Store">
+                                                    <img class="position-relative z-2 d-none d-block-dark"
+                                                        src="/img/mega-menu/demo-preview/single-store-dark.jpg"
+                                                        alt="Single Product Store">
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                        style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                        style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                                </div>
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </li>
+                                <li class="nav-item dropdown position-static pb-lg-2 me-lg-n1 me-xl-0">
+                                    <a class="nav-link dropdown-toggle active" aria-current="page" href="#"
+                                        role="button" data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                        aria-expanded="false">Shop</a>
+                                    <div class="dropdown-menu p-4" style="--cz-dropdown-spacer: .75rem">
+                                        <div class="d-flex flex-column flex-lg-row gap-4">
+                                            <div style="min-width: 190px">
+                                                <div class="h6 mb-2">Electronics Store</div>
+                                                <ul class="nav flex-column gap-2 mt-0">
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'categories-electronics']) }}">Categories Page</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'catalog-electronics']) }}">Catalog with Side
+                                                            Filters</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'product-general-electronics']) }}">Product General
+                                                            Info</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'product-details-electronics']) }}">Product
+                                                            Details</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'product-reviews-electronics']) }}">Product
+                                                            Reviews</a>
+                                                    </li>
+                                                </ul>
+                                                <div class="h6 pt-4 mb-2">Fashion Store</div>
+                                                <ul class="nav flex-column gap-2 mt-0">
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'catalog-fashion']) }}">Catalog with Side Filters</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'product-fashion']) }}">Product Page</a>
+                                                    </li>
+                                                </ul>
+                                                <div class="h6 pt-4 mb-2">Furniture Store</div>
+                                                <ul class="nav flex-column gap-2 mt-0">
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'catalog-furniture']) }}">Catalog with Top Filters</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'product-furniture']) }}">Product Page</a>
+                                                    </li>
+                                                </ul>
+                                            </div>
+                                            <div style="min-width: 190px">
+                                                <div class="h6 mb-2">Grocery Store</div>
+                                                <ul class="nav flex-column gap-2 mt-0">
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'catalog-grocery']) }}">Catalog with Side Filters</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'product-grocery']) }}">Product Page</a>
+                                                    </li>
+                                                </ul>
+                                                <div class="h6 pt-4 mb-2">Marketplace</div>
+                                                <ul class="nav flex-column gap-2 mt-0">
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'catalog-marketplace']) }}">Catalog with Top
+                                                            Filters</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'product-marketplace']) }}">Digital Product Page</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'marketplace']) }}">Cart / Checkout</a>
+                                                    </li>
+                                                </ul>
+                                            </div>
+                                            <div style="min-width: 190px">
+                                                <div class="h6 mb-2">Checkout v.1</div>
+                                                <ul class="nav flex-column gap-2 mt-0">
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'v1-cart']) }}">Shopping Cart</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'v1-delivery-1']) }}">Delivery Info (Step 1)</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'v1-delivery-2']) }}">Delivery Info (Step 2)</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'v1-shipping']) }}">Shipping Address</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'v1-payment']) }}">Payment</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'v1-thankyou']) }}">Thank You Page</a>
+                                                    </li>
+                                                </ul>
+                                                <div class="h6 pt-4 mb-2">Checkout v.2</div>
+                                                <ul class="nav flex-column gap-2 mt-0">
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'v2-cart']) }}">Shopping Cart</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'v2-delivery']) }}">Delivery Info</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'v2-pickup']) }}">Pickup from Store</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'v2-thankyou']) }}">Thank You Page</a>
+                                                    </li>
+                                                </ul>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </li>
+                                <li class="nav-item dropdown pb-lg-2 me-lg-n1 me-xl-0">
+                                    <a class="nav-link dropdown-toggle" href="#" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover" data-bs-auto-close="outside"
+                                        aria-expanded="false">Account</a>
+                                    <ul class="dropdown-menu" style="--cz-dropdown-spacer: .75rem">
+                                        <li class="dropend">
+                                            <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                                aria-expanded="false">Auth Pages</a>
+                                            <ul class="dropdown-menu">
+                                                <li><a class="dropdown-item" href="{{ route('second', ['account', 'signin']) }}">Sign In</a></li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['account', 'signup']) }}">Sign Up</a></li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'password-recovery']) }}">Password Recovery</a></li>
+                                            </ul>
+                                        </li>
+                                        <li class="dropend">
+                                            <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                                aria-expanded="false">Shop User</a>
+                                            <ul class="dropdown-menu">
+                                                <li><a class="dropdown-item" href="{{ route('second', ['account', 'orders']) }}">Orders
+                                                        History</a></li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['account', 'wishlist']) }}">Wishlist</a>
+                                                </li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['account', 'payment']) }}">Payment
+                                                        Methods</a></li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['account', 'reviews']) }}">My Reviews</a>
+                                                </li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['account', 'info']) }}">Personal Info</a>
+                                                </li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['account', 'addresses']) }}">Addresses</a>
+                                                </li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'notifications']) }}">Notifications</a></li>
+                                            </ul>
+                                        </li>
+                                        <li class="dropend">
+                                            <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                                aria-expanded="false">Marketplace User</a>
+                                            <ul class="dropdown-menu">
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'marketplace-dashboard']) }}">Dashboard</a></li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'marketplace-products']) }}">Products</a></li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'marketplace-sales']) }}">Sales</a></li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'marketplace-payouts']) }}">Payouts</a></li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'marketplace-purchases']) }}">Purchases</a></li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'marketplace-favorites']) }}">Favorites</a></li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'marketplace-settings']) }}">Settings</a></li>
+                                            </ul>
+                                        </li>
+                                    </ul>
+                                </li>
+                                <li class="nav-item dropdown pb-lg-2 me-lg-n1 me-xl-0">
+                                    <a class="nav-link dropdown-toggle" href="#" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover" data-bs-auto-close="outside"
+                                        aria-expanded="false">Pages</a>
+                                    <ul class="dropdown-menu" style="--cz-dropdown-spacer: .75rem">
+                                        <li class="dropend">
+                                            <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                                aria-expanded="false">About</a>
+                                            <ul class="dropdown-menu">
+                                                <li><a class="dropdown-item" href="{{ route('second', ['about', 'v1']) }}">About v.1</a></li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['about', 'v2']) }}">About v.2</a></li>
+                                            </ul>
+                                        </li>
+                                        <li class="dropend">
+                                            <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                                aria-expanded="false">Blog</a>
+                                            <ul class="dropdown-menu">
+                                                <li><a class="dropdown-item" href="{{ route('second', ['blog', 'grid-v1']) }}">Grid View v.1</a>
+                                                </li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['blog', 'grid-v2']) }}">Grid View v.2</a>
+                                                </li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['blog', 'list']) }}">List View</a></li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['blog', 'single-v1']) }}">Single Post
+                                                        v.1</a></li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['blog', 'single-v2']) }}">Single Post
+                                                        v.2</a></li>
+                                            </ul>
+                                        </li>
+                                        <li class="dropend">
+                                            <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                                aria-expanded="false">Contact</a>
+                                            <ul class="dropdown-menu">
+                                                <li><a class="dropdown-item" href="{{ route('second', ['contact', 'v1',]) }}">Contact v.1</a></li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['contact', 'v2',]) }}">Contact v.2</a></li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['contact', 'v3',]) }}">Contact v.3</a></li>
+                                            </ul>
+                                        </li>
+                                        <li class="dropend">
+                                            <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                                aria-expanded="false">Help Center</a>
+                                            <ul class="dropdown-menu">
+                                                <li><a class="dropdown-item" href="{{ route('second', ['help', 'topics-v1']) }}">Help Topics
+                                                        v.1</a></li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['help', 'topics-v2']) }}">Help Topics
+                                                        v.2</a></li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['help', 'single-article-v1']) }}">Help
+                                                        Single Article v.1</a></li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['help', 'single-article-v2']) }}">Help
+                                                        Single Article v.2</a></li>
+                                            </ul>
+                                        </li>
+                                        <li class="dropend">
+                                            <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                                aria-expanded="false">404 Error</a>
+                                            <ul class="dropdown-menu">
+                                                <li><a class="dropdown-item" href="{{ route('second', ['404', 'electronics']) }}">404
+                                                        Electronics</a></li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['404', 'fashion']) }}">404 Fashion</a>
+                                                </li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['404', 'furniture']) }}">404 Furniture</a>
+                                                </li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['404', 'grocery']) }}">404 Grocery</a>
+                                                </li>
+                                            </ul>
+                                        </li>
+                                        <li><a class="dropdown-item" href="{{ route('any', 'terms-and-conditions')}}">Terms &amp;
+                                                Conditions</a></li>
+                                    </ul>
+                                </li>
+                                
+                            </ul>
+
+                            <!-- Search toggle visible on screens > 991px wide (lg breakpoint) -->
+                            <button type="button"
+                                class="btn btn-outline-secondary justify-content-start w-100 px-3 mb-lg-2 ms-3 d-none d-lg-inline-flex"
+                                style="max-width: 240px" data-bs-toggle="offcanvas" data-bs-target="#searchBox"
+                                aria-controls="searchBox">
+                                <i class="ci-search fs-base ms-n1 me-2"></i>
+                                <span class="text-body-tertiary fw-normal">Search</span>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Account and Wishlist buttons visible on screens < 768px wide (md breakpoint) -->
+                <div class="offcanvas-header border-top px-0 py-3 mt-3 d-md-none">
+                    <div class="nav nav-justified w-100">
+                        <a class="nav-link border-end" href="{{ route('second', ['account', 'signin']) }}">
+                            <i class="ci-user fs-lg opacity-60 me-2"></i>
+                            Account
+                        </a>
+                        <a class="nav-link" href="#!">
+                            <i class="ci-heart fs-lg opacity-60 me-2"></i>
+                            Wishlist
+                        </a>
+                    </div>
+                </div>
+            </nav>
+        </div>
+    </header>
+
+    <main class="content-wrapper">
+
+        <!-- Breadcrumb -->
+        <nav class="container pt-2 pt-xxl-3 my-3 my-md-4" aria-label="breadcrumb">
+            <ol class="breadcrumb">
+                <li class="breadcrumb-item"><a href="{{ route('second', ['home', 'fashion-v1']) }}">Home</a></li>
+                <li class="breadcrumb-item active" aria-current="page">Catalog with sidebar filters</li>
+            </ol>
+        </nav>
+
+
+        <!-- Page title -->
+        <h1 class="h3 container pb-3 pb-lg-4">Shop catalog</h1>
+
+
+        <!-- Products grid + Sidebar with filters -->
+        <section class="container">
+            <div class="row">
+
+                <!-- Filter sidebar that turns into offcanvas on screens < 992px wide (lg breakpoint) -->
+                <aside class="col-lg-3">
+                    <div class="offcanvas-lg offcanvas-start pe-lg-4" id="filterSidebar">
+                        <div class="offcanvas-header py-3">
+                            <h5 class="offcanvas-title">Filter products</h5>
+                            <button type="button" class="btn-close" data-bs-dismiss="offcanvas"
+                                data-bs-target="#filterSidebar" aria-label="Close"></button>
+                        </div>
+                        <div class="offcanvas-body flex-column pt-2 py-lg-0">
+
+                            <!-- Selected filters + Sorting -->
+                            <div class="pb-4 mb-2 mb-xl-3">
+                                <div class="d-flex align-items-center justify-content-between mb-3">
+                                    <h4 class="h6 mb-0">Filter</h4>
+                                    <button type="button"
+                                        class="btn btn-sm btn-secondary bg-transparent border-0 text-decoration-underline p-0 ms-2">
+                                        Clear all
+                                    </button>
+                                </div>
+                                <div class="d-flex flex-wrap gap-2">
+                                    <button type="button" class="btn btn-sm btn-secondary">
+                                        <i class="ci-close fs-sm ms-n1 me-1"></i>
+                                        Sale
+                                    </button>
+                                    <button type="button" class="btn btn-sm btn-secondary">
+                                        <i class="ci-close fs-sm ms-n1 me-1"></i>
+                                        Adidas
+                                    </button>
+                                    <button type="button" class="btn btn-sm btn-secondary">
+                                        <i class="ci-close fs-sm ms-n1 me-1"></i>
+                                        Bilabong
+                                    </button>
+                                    <button type="button" class="btn btn-sm btn-secondary">
+                                        <i class="ci-close fs-sm ms-n1 me-1"></i>
+                                        Size: XXS
+                                    </button>
+                                    <button type="button" class="btn btn-sm btn-secondary">
+                                        <i class="ci-close fs-sm ms-n1 me-1"></i>
+                                        $40 - $150
+                                    </button>
+                                </div>
+                            </div>
+
+                            <div class="accordion">
+
+                                <!-- Categories -->
+                                <div class="accordion-item border-0 pb-1 pb-xl-2">
+                                    <h4 class="accordion-header" id="headingCategories">
+                                        <button type="button" class="accordion-button p-0 pb-3"
+                                            data-bs-toggle="collapse" data-bs-target="#categories"
+                                            aria-expanded="true" aria-controls="categories">
+                                            Categories
+                                        </button>
+                                    </h4>
+                                    <div class="accordion-collapse collapse show" id="categories"
+                                        aria-labelledby="headingCategories">
+                                        <div class="accordion-body p-0 pb-4 mb-1 mb-xl-2">
+                                            <div style="height: 220px" data-simplebar data-simplebar-auto-hide="false">
+                                                <ul class="nav flex-column gap-2 pe-3">
+                                                    <li class="nav-item mb-1">
+                                                        <a class="nav-link d-block fw-normal p-0" href="#!">
+                                                            Blazers &amp; Suits<span
+                                                                class="fs-xs text-body-secondary ms-1">(235)</span>
+                                                        </a>
+                                                    </li>
+                                                    <li class="nav-item mb-1">
+                                                        <a class="nav-link d-block fw-normal p-0" href="#!">
+                                                            Blouses<span
+                                                                class="fs-xs text-body-secondary ms-1">(235)</span>
+                                                        </a>
+                                                    </li>
+                                                    <li class="nav-item mb-1">
+                                                        <a class="nav-link d-block fw-normal p-0" href="#!">
+                                                            Cardigans &amp; Jumpers<span
+                                                                class="fs-xs text-body-secondary ms-1">(107)</span>
+                                                        </a>
+                                                    </li>
+                                                    <li class="nav-item mb-1">
+                                                        <a class="nav-link d-block fw-normal p-0" href="#!">
+                                                            Dresses<span
+                                                                class="fs-xs text-body-secondary ms-1">(93)</span>
+                                                        </a>
+                                                    </li>
+                                                    <li class="nav-item mb-1">
+                                                        <a class="nav-link d-block fw-normal p-0" href="#!">
+                                                            Hoodie &amp; Sweatshirts<span
+                                                                class="fs-xs text-body-secondary ms-1">(122)</span>
+                                                        </a>
+                                                    </li>
+                                                    <li class="nav-item mb-1">
+                                                        <a class="nav-link d-block fw-normal p-0" href="#!">
+                                                            Jackets &amp; Coats<span
+                                                                class="fs-xs text-body-secondary ms-1">(116)</span>
+                                                        </a>
+                                                    </li>
+                                                    <li class="nav-item mb-1">
+                                                        <a class="nav-link d-block fw-normal p-0" href="#!">
+                                                            Jeans<span class="fs-xs text-body-secondary ms-1">(215)</span>
+                                                        </a>
+                                                    </li>
+                                                    <li class="nav-item mb-1">
+                                                        <a class="nav-link d-block fw-normal p-0" href="#!">
+                                                            Lingerie<span
+                                                                class="fs-xs text-body-secondary ms-1">(150)</span>
+                                                        </a>
+                                                    </li>
+                                                    <li class="nav-item mb-1">
+                                                        <a class="nav-link d-block fw-normal p-0" href="#!">
+                                                            Maternity Wear<span
+                                                                class="fs-xs text-body-secondary ms-1">(8)</span>
+                                                        </a>
+                                                    </li>
+                                                    <li class="nav-item mb-1">
+                                                        <a class="nav-link d-block fw-normal p-0" href="#!">
+                                                            Nightwear<span
+                                                                class="fs-xs text-body-secondary ms-1">(26)</span>
+                                                        </a>
+                                                    </li>
+                                                    <li class="nav-item mb-1">
+                                                        <a class="nav-link d-block fw-normal p-0" href="#!">
+                                                            Shirts &amp; Tops<span
+                                                                class="fs-xs text-body-secondary ms-1">(164)</span>
+                                                        </a>
+                                                    </li>
+                                                    <li class="nav-item mb-1">
+                                                        <a class="nav-link d-block fw-normal p-0" href="#!">
+                                                            Shorts<span
+                                                                class="fs-xs text-body-secondary ms-1">(147)</span>
+                                                        </a>
+                                                    </li>
+                                                    <li class="nav-item mb-1">
+                                                        <a class="nav-link d-block fw-normal p-0" href="#!">
+                                                            Socks &amp; Tights<span
+                                                                class="fs-xs text-body-secondary ms-1">(139)</span>
+                                                        </a>
+                                                    </li>
+                                                    <li class="nav-item mb-1">
+                                                        <a class="nav-link d-block fw-normal p-0" href="#!">
+                                                            Sportswear<span
+                                                                class="fs-xs text-body-secondary ms-1">(65)</span>
+                                                        </a>
+                                                    </li>
+                                                    <li class="nav-item mb-1">
+                                                        <a class="nav-link d-block fw-normal p-0" href="#!">
+                                                            Swimwear<span
+                                                                class="fs-xs text-body-secondary ms-1">(18)</span>
+                                                        </a>
+                                                    </li>
+                                                    <li class="nav-item mb-1">
+                                                        <a class="nav-link d-block fw-normal p-0" href="#!">
+                                                            T-shirts &amp; Vests<span
+                                                                class="fs-xs text-body-secondary ms-1">(209)</span>
+                                                        </a>
+                                                    </li>
+                                                    <li class="nav-item mb-1">
+                                                        <a class="nav-link d-block fw-normal p-0" href="#!">
+                                                            Trousers<span
+                                                                class="fs-xs text-body-secondary ms-1">(105)</span>
+                                                        </a>
+                                                    </li>
+                                                    <li class="nav-item mb-1">
+                                                        <a class="nav-link d-block fw-normal p-0" href="#!">
+                                                            Underwear<span
+                                                                class="fs-xs text-body-secondary ms-1">(87)</span>
+                                                        </a>
+                                                    </li>
+                                                </ul>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <!-- Price -->
+                                <div class="accordion-item border-0 pb-1 pb-xl-2">
+                                    <h4 class="accordion-header" id="headingPrice">
+                                        <button type="button" class="accordion-button p-0 pb-3"
+                                            data-bs-toggle="collapse" data-bs-target="#price" aria-expanded="true"
+                                            aria-controls="price">
+                                            Price
+                                        </button>
+                                    </h4>
+                                    <div class="accordion-collapse collapse show" id="price"
+                                        aria-labelledby="headingPrice">
+                                        <div class="accordion-body p-0 pb-4 mb-1 mb-xl-2">
+                                            <div class="range-slider"
+                                                data-range-slider='{"startMin": 40, "startMax": 150, "min": 0, "max": 200, "step": 1, "tooltipPrefix": "$"}'
+                                                aria-labelledby="headingPrice">
+                                                <div class="range-slider-ui"></div>
+                                                <div class="d-flex align-items-center">
+                                                    <div class="position-relative w-50">
+                                                        <i
+                                                            class="ci-dollar-sign position-absolute top-50 start-0 translate-middle-y ms-3"></i>
+                                                        <input type="number" class="form-control form-icon-start"
+                                                            min="0" data-range-slider-min>
+                                                    </div>
+                                                    <i class="ci-minus text-body-emphasis mx-2"></i>
+                                                    <div class="position-relative w-50">
+                                                        <i
+                                                            class="ci-dollar-sign position-absolute top-50 start-0 translate-middle-y ms-3"></i>
+                                                        <input type="number" class="form-control form-icon-start"
+                                                            min="0" data-range-slider-max>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <!-- Brands -->
+                                <div class="accordion-item border-0 pb-1 pb-xl-2">
+                                    <h4 class="accordion-header" id="headingBrands">
+                                        <button type="button" class="accordion-button p-0 pb-3"
+                                            data-bs-toggle="collapse" data-bs-target="#brands" aria-expanded="true"
+                                            aria-controls="brands">
+                                            Brands
+                                        </button>
+                                    </h4>
+                                    <div class="accordion-collapse collapse show" id="brands"
+                                        aria-labelledby="headingBrands">
+                                        <div class="accordion-body p-0 pb-4 mb-1 mb-xl-2"
+                                            data-filter-list='{"searchClass": "brands-search", "listClass": "brands-list", "valueNames": ["form-check-label"]}'>
+                                            <div class="position-relative mb-3">
+                                                <i
+                                                    class="ci-search position-absolute top-50 start-0 translate-middle-y ms-3"></i>
+                                                <input type="search" class="brands-search form-control form-icon-start"
+                                                    placeholder="Search">
+                                            </div>
+                                            <div style="height: 210px" data-simplebar data-simplebar-auto-hide="false">
+                                                <div class="brands-list d-flex flex-column gap-2">
+                                                    <div class="form-check mb-0">
+                                                        <input type="checkbox" class="form-check-input" id="adidas"
+                                                            checked>
+                                                        <label for="adidas"
+                                                            class="form-check-label text-body-emphasis">
+                                                            Adidas<span
+                                                                class="fs-xs text-body-secondary ms-1">(425)</span>
+                                                        </label>
+                                                    </div>
+                                                    <div class="form-check mb-0">
+                                                        <input type="checkbox" class="form-check-input"
+                                                            id="taylor">
+                                                        <label for="taylor"
+                                                            class="form-check-label text-body-emphasis">
+                                                            Ann Taylor<span
+                                                                class="fs-xs text-body-secondary ms-1">(15)</span>
+                                                        </label>
+                                                    </div>
+                                                    <div class="form-check mb-0">
+                                                        <input type="checkbox" class="form-check-input"
+                                                            id="armani">
+                                                        <label for="armani"
+                                                            class="form-check-label text-body-emphasis">
+                                                            Armani<span class="fs-xs text-body-secondary ms-1">(18)</span>
+                                                        </label>
+                                                    </div>
+                                                    <div class="form-check mb-0">
+                                                        <input type="checkbox" class="form-check-input"
+                                                            id="banana">
+                                                        <label for="banana"
+                                                            class="form-check-label text-body-emphasis">
+                                                            Banana Republic<span
+                                                                class="fs-xs text-body-secondary ms-1">(103)</span>
+                                                        </label>
+                                                    </div>
+                                                    <div class="form-check mb-0">
+                                                        <input type="checkbox" class="form-check-input" id="bilabong"
+                                                            checked>
+                                                        <label for="bilabong"
+                                                            class="form-check-label text-body-emphasis">
+                                                            Bilabong<span
+                                                                class="fs-xs text-body-secondary ms-1">(27)</span>
+                                                        </label>
+                                                    </div>
+                                                    <div class="form-check mb-0">
+                                                        <input type="checkbox" class="form-check-input"
+                                                            id="birkenstock">
+                                                        <label for="birkenstock"
+                                                            class="form-check-label text-body-emphasis">
+                                                            Birkenstock<span
+                                                                class="fs-xs text-body-secondary ms-1">(10)</span>
+                                                        </label>
+                                                    </div>
+                                                    <div class="form-check mb-0">
+                                                        <input type="checkbox" class="form-check-input"
+                                                            id="klein">
+                                                        <label for="klein"
+                                                            class="form-check-label text-body-emphasis">
+                                                            Calvin Klein<span
+                                                                class="fs-xs text-body-secondary ms-1">(365)</span>
+                                                        </label>
+                                                    </div>
+                                                    <div class="form-check mb-0">
+                                                        <input type="checkbox" class="form-check-input"
+                                                            id="columbia">
+                                                        <label for="columbia"
+                                                            class="form-check-label text-body-emphasis">
+                                                            Columbia<span
+                                                                class="fs-xs text-body-secondary ms-1">(508)</span>
+                                                        </label>
+                                                    </div>
+                                                    <div class="form-check mb-0">
+                                                        <input type="checkbox" class="form-check-input"
+                                                            id="converse">
+                                                        <label for="converse"
+                                                            class="form-check-label text-body-emphasis">
+                                                            Converse<span
+                                                                class="fs-xs text-body-secondary ms-1">(176)</span>
+                                                        </label>
+                                                    </div>
+                                                    <div class="form-check mb-0">
+                                                        <input type="checkbox" class="form-check-input"
+                                                            id="dockers">
+                                                        <label for="dockers"
+                                                            class="form-check-label text-body-emphasis">
+                                                            Dockers<span
+                                                                class="fs-xs text-body-secondary ms-1">(54)</span>
+                                                        </label>
+                                                    </div>
+                                                    <div class="form-check mb-0">
+                                                        <input type="checkbox" class="form-check-input"
+                                                            id="fruit">
+                                                        <label for="fruit"
+                                                            class="form-check-label text-body-emphasis">
+                                                            Fruit of the Loom<span
+                                                                class="fs-xs text-body-secondary ms-1">(739)</span>
+                                                        </label>
+                                                    </div>
+                                                    <div class="form-check mb-0">
+                                                        <input type="checkbox" class="form-check-input"
+                                                            id="hanes">
+                                                        <label for="hanes"
+                                                            class="form-check-label text-body-emphasis">
+                                                            Hanes<span class="fs-xs text-body-secondary ms-1">(92)</span>
+                                                        </label>
+                                                    </div>
+                                                    <div class="form-check mb-0">
+                                                        <input type="checkbox" class="form-check-input"
+                                                            id="choo">
+                                                        <label for="choo"
+                                                            class="form-check-label text-body-emphasis">
+                                                            Jimmy Choo<span
+                                                                class="fs-xs text-body-secondary ms-1">(17)</span>
+                                                        </label>
+                                                    </div>
+                                                    <div class="form-check mb-0">
+                                                        <input type="checkbox" class="form-check-input"
+                                                            id="levis">
+                                                        <label for="levis"
+                                                            class="form-check-label text-body-emphasis">
+                                                            Levi's<span
+                                                                class="fs-xs text-body-secondary ms-1">(361)</span>
+                                                        </label>
+                                                    </div>
+                                                    <div class="form-check mb-0">
+                                                        <input type="checkbox" class="form-check-input"
+                                                            id="wearhouse">
+                                                        <label for="wearhouse"
+                                                            class="form-check-label text-body-emphasis">
+                                                            Men's Wearhouse<span
+                                                                class="fs-xs text-body-secondary ms-1">(75)</span>
+                                                        </label>
+                                                    </div>
+                                                    <div class="form-check mb-0">
+                                                        <input type="checkbox" class="form-check-input"
+                                                            id="newbalance">
+                                                        <label for="newbalance"
+                                                            class="form-check-label text-body-emphasis">
+                                                            New Balance<span
+                                                                class="fs-xs text-body-secondary ms-1">(218)</span>
+                                                        </label>
+                                                    </div>
+                                                    <div class="form-check mb-0">
+                                                        <input type="checkbox" class="form-check-input"
+                                                            id="nike">
+                                                        <label for="nike"
+                                                            class="form-check-label text-body-emphasis">
+                                                            Nike<span class="fs-xs text-body-secondary ms-1">(810)</span>
+                                                        </label>
+                                                    </div>
+                                                    <div class="form-check mb-0">
+                                                        <input type="checkbox" class="form-check-input"
+                                                            id="navy">
+                                                        <label for="navy"
+                                                            class="form-check-label text-body-emphasis">
+                                                            Old Navy<span
+                                                                class="fs-xs text-body-secondary ms-1">(147)</span>
+                                                        </label>
+                                                    </div>
+                                                    <div class="form-check mb-0">
+                                                        <input type="checkbox" class="form-check-input"
+                                                            id="puma">
+                                                        <label for="puma"
+                                                            class="form-check-label text-body-emphasis">
+                                                            Puma<span class="fs-xs text-body-secondary ms-1">(370)</span>
+                                                        </label>
+                                                    </div>
+                                                    <div class="form-check mb-0">
+                                                        <input type="checkbox" class="form-check-input"
+                                                            id="skechers">
+                                                        <label for="skechers"
+                                                            class="form-check-label text-body-emphasis">
+                                                            Skechers<span
+                                                                class="fs-xs text-body-secondary ms-1">(209)</span>
+                                                        </label>
+                                                    </div>
+                                                    <div class="form-check mb-0">
+                                                        <input type="checkbox" class="form-check-input"
+                                                            id="hilfiger">
+                                                        <label for="hilfiger"
+                                                            class="form-check-label text-body-emphasis">
+                                                            Tommy Hilfiger<span
+                                                                class="fs-xs text-body-secondary ms-1">(487)</span>
+                                                        </label>
+                                                    </div>
+                                                    <div class="form-check mb-0">
+                                                        <input type="checkbox" class="form-check-input"
+                                                            id="armour">
+                                                        <label for="armour"
+                                                            class="form-check-label text-body-emphasis">
+                                                            Under Armour<span
+                                                                class="fs-xs text-body-secondary ms-1">(90)</span>
+                                                        </label>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <!-- Size -->
+                                <div class="accordion-item border-0 pb-1 pb-xl-2">
+                                    <h4 class="accordion-header" id="headingSize">
+                                        <button type="button" class="accordion-button p-0 pb-3"
+                                            data-bs-toggle="collapse" data-bs-target="#size" aria-expanded="true"
+                                            aria-controls="size">
+                                            Size
+                                        </button>
+                                    </h4>
+                                    <div class="accordion-collapse collapse show" id="size"
+                                        aria-labelledby="headingSize">
+                                        <div class="accordion-body p-0 pb-4 mb-1 mb-xl-2">
+                                            <div class="d-flex flex-wrap gap-2">
+                                                <input type="checkbox" class="btn-check" id="size-xxs" checked>
+                                                <label for="size-xxs"
+                                                    class="btn btn-sm btn-outline-secondary">XXS</label>
+                                                <input type="checkbox" class="btn-check" id="size-xs">
+                                                <label for="size-xs"
+                                                    class="btn btn-sm btn-outline-secondary">XS</label>
+                                                <input type="checkbox" class="btn-check" id="size-s">
+                                                <label for="size-s" class="btn btn-sm btn-outline-secondary">S</label>
+                                                <input type="checkbox" class="btn-check" id="size-m">
+                                                <label for="size-m" class="btn btn-sm btn-outline-secondary">M</label>
+                                                <input type="checkbox" class="btn-check" id="size-l">
+                                                <label for="size-l" class="btn btn-sm btn-outline-secondary">L</label>
+                                                <input type="checkbox" class="btn-check" id="size-xl">
+                                                <label for="size-xl" class="btn btn-sm btn-outline-secondary"><span
+                                                        class="mx-n1">XL</span></label>
+                                                <input type="checkbox" class="btn-check" id="size-2xl">
+                                                <label for="size-2xl"
+                                                    class="btn btn-sm btn-outline-secondary">2XL</label>
+                                                <input type="checkbox" class="btn-check" id="size-40">
+                                                <label for="size-40"
+                                                    class="btn btn-sm btn-outline-secondary">40</label>
+                                                <input type="checkbox" class="btn-check" id="size-42">
+                                                <label for="size-42"
+                                                    class="btn btn-sm btn-outline-secondary">42</label>
+                                                <input type="checkbox" class="btn-check" id="size-44">
+                                                <label for="size-44"
+                                                    class="btn btn-sm btn-outline-secondary">44</label>
+                                                <input type="checkbox" class="btn-check" id="size-45">
+                                                <label for="size-45"
+                                                    class="btn btn-sm btn-outline-secondary">45</label>
+                                                <input type="checkbox" class="btn-check" id="size-46">
+                                                <label for="size-46"
+                                                    class="btn btn-sm btn-outline-secondary">46</label>
+                                                <input type="checkbox" class="btn-check" id="size-48">
+                                                <label for="size-48"
+                                                    class="btn btn-sm btn-outline-secondary">48</label>
+                                                <input type="checkbox" class="btn-check" id="size-50">
+                                                <label for="size-50"
+                                                    class="btn btn-sm btn-outline-secondary">50</label>
+                                                <input type="checkbox" class="btn-check" id="size-52">
+                                                <label for="size-52"
+                                                    class="btn btn-sm btn-outline-secondary">52</label>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <!-- Color -->
+                                <div class="accordion-item border-0 pb-1 pb-xl-2">
+                                    <h4 class="accordion-header" id="headingColor">
+                                        <button type="button" class="accordion-button p-0 pb-3"
+                                            data-bs-toggle="collapse" data-bs-target="#color" aria-expanded="true"
+                                            aria-controls="color">
+                                            Color
+                                        </button>
+                                    </h4>
+                                    <div class="accordion-collapse collapse show" id="color"
+                                        aria-labelledby="headingColor">
+                                        <div class="accordion-body p-0 pb-4 mb-1 mb-xl-2">
+                                            <div class="d-flex flex-column gap-2">
+                                                <div class="d-flex align-items-center mb-1">
+                                                    <input type="checkbox" class="btn-check" id="green">
+                                                    <label for="green" class="btn btn-color fs-xl"
+                                                        style="color: #8bc4ab"></label>
+                                                    <label for="green" class="fs-sm ms-2">Green</label>
+                                                </div>
+                                                <div class="d-flex align-items-center mb-1">
+                                                    <input type="checkbox" class="btn-check" id="red">
+                                                    <label for="red" class="btn btn-color fs-xl"
+                                                        style="color: #ee7976"></label>
+                                                    <label for="red" class="fs-sm ms-2">Coral red</label>
+                                                </div>
+                                                <div class="d-flex align-items-center mb-1">
+                                                    <input type="checkbox" class="btn-check" id="pink">
+                                                    <label for="pink" class="btn btn-color fs-xl"
+                                                        style="color: #df8fbf"></label>
+                                                    <label for="pink" class="fs-sm ms-2">Pink</label>
+                                                </div>
+                                                <div class="d-flex align-items-center mb-1">
+                                                    <input type="checkbox" class="btn-check" id="blue">
+                                                    <label for="blue" class="btn btn-color fs-xl"
+                                                        style="color: #9acbf1"></label>
+                                                    <label for="blue" class="fs-sm ms-2">Sky blue</label>
+                                                </div>
+                                                <div class="d-flex align-items-center mb-1">
+                                                    <input type="checkbox" class="btn-check" id="black">
+                                                    <label for="black" class="btn btn-color fs-xl"
+                                                        style="color: #364254"></label>
+                                                    <label for="black" class="fs-sm ms-2">Black</label>
+                                                </div>
+                                                <div class="d-flex align-items-center mb-1">
+                                                    <input type="checkbox" class="btn-check" id="white">
+                                                    <label for="white" class="btn btn-color fs-xl"
+                                                        style="color: #e0e5eb"></label>
+                                                    <label for="white" class="fs-sm ms-2">White</label>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <!-- Status -->
+                                <div class="accordion-item border-0">
+                                    <h4 class="accordion-header" id="headingStatus">
+                                        <button type="button" class="accordion-button p-0 pb-3"
+                                            data-bs-toggle="collapse" data-bs-target="#status" aria-expanded="true"
+                                            aria-controls="status">
+                                            Status
+                                        </button>
+                                    </h4>
+                                    <div class="accordion-collapse collapse show" id="status"
+                                        aria-labelledby="headingStatus">
+                                        <div class="accordion-body p-0 pb-2 pb-lg-0">
+                                            <div class="d-flex flex-column gap-2">
+                                                <div class="form-check mb-0">
+                                                    <input type="checkbox" class="form-check-input" id="instock">
+                                                    <label for="instock" class="form-check-label text-body-emphasis">In
+                                                        stock</label>
+                                                </div>
+                                                <div class="form-check mb-0">
+                                                    <input type="checkbox" class="form-check-input" id="sale"
+                                                        checked>
+                                                    <label for="sale" class="form-check-label text-body-emphasis">%
+                                                        Sale</label>
+                                                </div>
+                                                <div class="form-check mb-0">
+                                                    <input type="checkbox" class="form-check-input" id="delivery">
+                                                    <label for="delivery"
+                                                        class="form-check-label text-body-emphasis">Free
+                                                        delivery</label>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </aside>
+
+
+                <!-- Product grid -->
+                <div class="col-lg-9">
+
+                    <!-- Sorting -->
+                    <div class="d-sm-flex align-items-center justify-content-between mt-n2 mb-3 mb-sm-4">
+                        <div class="fs-sm text-body-emphasis text-nowrap">Found <span class="fw-semibold">32</span>
+                            items
+                        </div>
+                        <div class="d-flex align-items-center text-nowrap">
+                            <label class="form-label fw-semibold mb-0 me-2">Sort by:</label>
+                            <div style="width: 190px">
+                                <select class="form-select border-0 rounded-0 px-1"
+                                    data-select='{
+                    "removeItemButton": false,
+                    "classNames": {
+                      "containerInner": ["form-select", "border-0", "rounded-0", "px-1"]
+                    }
+                  }'>
+                                    <option value="Relevance">Relevance</option>
+                                    <option value="Popularity">Popularity</option>
+                                    <option value="Price: Low to High">Price: Low to High</option>
+                                    <option value="Price: High to Low">Price: High to Low</option>
+                                    <option value="Newest Arrivals">Newest Arrivals</option>
+                                </select>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="row gy-4 gy-md-5 pb-4 pb-md-5">
+
+                        <!-- Item -->
+                        <div class="col-6 col-md-4 mb-2 mb-sm-3 mb-md-0">
+                            <div class="animate-underline hover-effect-opacity">
+                                <div class="position-relative mb-3">
+                                    <span
+                                        class="badge text-bg-danger position-absolute top-0 start-0 z-2 mt-2 mt-sm-3 ms-2 ms-sm-3">Sale</span>
+                                    <button type="button"
+                                        class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                        aria-label="Add to Wishlist">
+                                        <i class="ci-heart animate-target"></i>
+                                    </button>
+                                    <a class="d-flex bg-body-tertiary rounded p-3" href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                        <div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
+                                            <img src="/img/shop/fashion/01.png" alt="Image">
+                                        </div>
+                                    </a>
+                                    <div
+                                        class="hover-effect-target position-absolute start-0 bottom-0 w-100 z-2 opacity-0 pb-2 pb-sm-3 px-2 px-sm-3">
+                                        <div
+                                            class="d-flex align-items-center justify-content-center gap-2 gap-xl-3 bg-body rounded-2 p-2">
+                                            <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">XS</span>
+                                            <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">S</span>
+                                            <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">M</span>
+                                            <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">L</span>
+                                            <div class="nav">
+                                                <a class="nav-link fs-xs text-body-tertiary py-1 px-2"
+                                                    href="{{ route('second', ['shop', 'product-fashion']) }}">+3</a>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="nav mb-2">
+                                    <a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
+                                        href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                        <span class="text-truncate">Denim midi skirt with pockets</span>
+                                    </a>
+                                </div>
+                                <div class="h6 mb-2">$126.50 <del
+                                        class="fs-sm fw-normal text-body-tertiary">$156.00</del>
+                                </div>
+                                <div class="position-relative">
+                                    <div class="hover-effect-target fs-xs text-body-secondary opacity-100">+1 color</div>
+                                    <div
+                                        class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
+                                        <input type="radio" class="btn-check" name="colors-1" id="color-1-1"
+                                            checked>
+                                        <label for="color-1-1" class="btn btn-color fs-base" style="color: #284971">
+                                            <span class="visually-hidden">Dark denim</span>
+                                        </label>
+                                        <input type="radio" class="btn-check" name="colors-1" id="color-1-2">
+                                        <label for="color-1-2" class="btn btn-color fs-base" style="color: #8b9bc4">
+                                            <span class="visually-hidden">Light denim</span>
+                                        </label>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Item -->
+                        <div class="col-6 col-md-4 mb-2 mb-sm-3 mb-md-0">
+                            <div class="animate-underline hover-effect-opacity">
+                                <div class="position-relative mb-3">
+                                    <button type="button"
+                                        class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                        aria-label="Add to Wishlist">
+                                        <i class="ci-heart animate-target"></i>
+                                    </button>
+                                    <a class="d-flex bg-body-tertiary rounded p-3" href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                        <div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
+                                            <img src="/img/shop/fashion/02.png" alt="Image">
+                                        </div>
+                                    </a>
+                                    <div
+                                        class="hover-effect-target position-absolute start-0 bottom-0 w-100 z-2 opacity-0 pb-2 pb-sm-3 px-2 px-sm-3">
+                                        <div
+                                            class="d-flex align-items-center justify-content-center gap-2 gap-xl-3 bg-body rounded-2 p-2">
+                                            <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">S</span>
+                                            <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">M</span>
+                                            <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">L</span>
+                                            <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">XL</span>
+                                            <div class="nav">
+                                                <a class="nav-link fs-xs text-body-tertiary py-1 px-2"
+                                                    href="{{ route('second', ['shop', 'product-fashion']) }}">+1</a>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="nav mb-2">
+                                    <a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
+                                        href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                        <span class="text-truncate">Cotton lace blouse with necklace</span>
+                                    </a>
+                                </div>
+                                <div class="h6 mb-2">$54.00</div>
+                                <div class="position-relative">
+                                    <div class="hover-effect-target fs-xs text-body-secondary opacity-100">+2 colors</div>
+                                    <div
+                                        class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
+                                        <input type="radio" class="btn-check" name="colors-2" id="color-2-1"
+                                            checked>
+                                        <label for="color-2-1" class="btn btn-color fs-base" style="color: #dcb1b1">
+                                            <span class="visually-hidden">Pink</span>
+                                        </label>
+                                        <input type="radio" class="btn-check" name="colors-2" id="color-2-2">
+                                        <label for="color-2-2" class="btn btn-color fs-base" style="color: #ced6f0">
+                                            <span class="visually-hidden">Blue</span>
+                                        </label>
+                                        <input type="radio" class="btn-check" name="colors-2" id="color-2-3">
+                                        <label for="color-2-3" class="btn btn-color fs-base" style="color: #e1e0cf">
+                                            <span class="visually-hidden">Mustard</span>
+                                        </label>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Item -->
+                        <div class="col-6 col-md-4 mb-2 mb-sm-3 mb-md-0">
+                            <div class="animate-underline hover-effect-opacity">
+                                <div class="position-relative mb-3">
+                                    <button type="button"
+                                        class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                        aria-label="Add to Wishlist">
+                                        <i class="ci-heart animate-target"></i>
+                                    </button>
+                                    <a class="d-flex bg-body-tertiary rounded p-3" href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                        <div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
+                                            <img src="/img/shop/fashion/03.png" alt="Image">
+                                        </div>
+                                    </a>
+                                    <div
+                                        class="hover-effect-target position-absolute start-0 bottom-0 w-100 z-2 opacity-0 pb-2 pb-sm-3 px-2 px-sm-3">
+                                        <div
+                                            class="d-flex align-items-center justify-content-center gap-2 gap-xl-3 bg-body rounded-2 p-2">
+                                            <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">6</span>
+                                            <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">6.5</span>
+                                            <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">7</span>
+                                            <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">7.5</span>
+                                            <div class="nav">
+                                                <a class="nav-link fs-xs text-body-tertiary py-1 px-2"
+                                                    href="{{ route('second', ['shop', 'product-fashion']) }}">+4</a>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="nav mb-2">
+                                    <a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
+                                        href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                        <span class="text-truncate">Sneakers with a massive sole</span>
+                                    </a>
+                                </div>
+                                <div class="h6 mb-2">$86.50</div>
+                                <div class="position-relative">
+                                    <div class="hover-effect-target fs-xs text-body-secondary opacity-100">+1 color</div>
+                                    <div
+                                        class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
+                                        <input type="radio" class="btn-check" name="colors-3" id="color-3-1"
+                                            checked>
+                                        <label for="color-3-1" class="btn btn-color fs-base" style="color: #e0e5eb">
+                                            <span class="visually-hidden">White</span>
+                                        </label>
+                                        <input type="radio" class="btn-check" name="colors-3" id="color-3-2">
+                                        <label for="color-3-2" class="btn btn-color fs-base" style="color: #364254">
+                                            <span class="visually-hidden">Black</span>
+                                        </label>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Item -->
+                        <div class="col-6 col-md-4 mb-2 mb-sm-3 mb-md-0">
+                            <div class="animate-underline hover-effect-opacity">
+                                <div class="position-relative mb-3">
+                                    <button type="button"
+                                        class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                        aria-label="Add to Wishlist">
+                                        <i class="ci-heart animate-target"></i>
+                                    </button>
+                                    <a class="d-flex bg-body-tertiary rounded p-3" href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                        <div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
+                                            <img src="/img/shop/fashion/04.png" alt="Image">
+                                        </div>
+                                    </a>
+                                </div>
+                                <div class="nav mb-2">
+                                    <a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
+                                        href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                        <span class="text-truncate">Knitted bag with a wooden handle</span>
+                                    </a>
+                                </div>
+                                <div class="h6 mb-2">$105.00</div>
+                                <div class="position-relative">
+                                    <div class="hover-effect-target fs-xs text-body-secondary opacity-100">+1 color</div>
+                                    <div
+                                        class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
+                                        <input type="radio" class="btn-check" name="colors-4" id="color-4-1"
+                                            checked>
+                                        <label for="color-4-1" class="btn btn-color fs-base" style="color: #e7ddb4">
+                                            <span class="visually-hidden">Beige</span>
+                                        </label>
+                                        <input type="radio" class="btn-check" name="colors-4" id="color-4-2">
+                                        <label for="color-4-2" class="btn btn-color fs-base" style="color: #8b9bc4">
+                                            <span class="visually-hidden">Blue</span>
+                                        </label>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Item -->
+                        <div class="col-6 col-md-4 mb-2 mb-sm-3 mb-md-0">
+                            <div class="animate-underline hover-effect-opacity">
+                                <div class="position-relative mb-3">
+                                    <span
+                                        class="badge text-bg-danger position-absolute top-0 start-0 z-2 mt-2 mt-sm-3 ms-2 ms-sm-3">-17%</span>
+                                    <button type="button"
+                                        class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                        aria-label="Add to Wishlist">
+                                        <i class="ci-heart animate-target"></i>
+                                    </button>
+                                    <a class="d-flex bg-body-tertiary rounded p-3" href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                        <div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
+                                            <img src="/img/shop/fashion/05.png" alt="Image">
+                                        </div>
+                                    </a>
+                                </div>
+                                <div class="nav mb-2">
+                                    <a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
+                                        href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                        <span class="text-truncate">Polarized sunglasses for men</span>
+                                    </a>
+                                </div>
+                                <div class="h6 mb-2">$96.00 <del
+                                        class="fs-sm fw-normal text-body-tertiary">$112.00</del>
+                                </div>
+                                <div class="position-relative">
+                                    <div class="hover-effect-target fs-xs text-body-secondary opacity-100">+2 colors</div>
+                                    <div
+                                        class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
+                                        <input type="radio" class="btn-check" name="colors-5" id="color-5-1"
+                                            checked>
+                                        <label for="color-5-1" class="btn btn-color fs-base" style="color: #8cc4ac">
+                                            <span class="visually-hidden">Green</span>
+                                        </label>
+                                        <input type="radio" class="btn-check" name="colors-5" id="color-5-2">
+                                        <label for="color-5-2" class="btn btn-color fs-base" style="color: #8cb7c4">
+                                            <span class="visually-hidden">Blue</span>
+                                        </label>
+                                        <input type="radio" class="btn-check" name="colors-5" id="color-5-3">
+                                        <label for="color-5-3" class="btn btn-color fs-base" style="color: #ccb782">
+                                            <span class="visually-hidden">Brown</span>
+                                        </label>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Item -->
+                        <div class="col-6 col-md-4 mb-2 mb-sm-3 mb-md-0">
+                            <div class="animate-underline hover-effect-opacity">
+                                <div class="position-relative mb-3">
+                                    <button type="button"
+                                        class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                        aria-label="Add to Wishlist">
+                                        <i class="ci-heart animate-target"></i>
+                                    </button>
+                                    <a class="d-flex bg-body-tertiary rounded p-3" href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                        <div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
+                                            <img src="/img/shop/fashion/06.png" alt="Image">
+                                        </div>
+                                    </a>
+                                    <div
+                                        class="hover-effect-target position-absolute start-0 bottom-0 w-100 z-2 opacity-0 pb-2 pb-sm-3 px-2 px-sm-3">
+                                        <div
+                                            class="d-flex align-items-center justify-content-center gap-2 gap-xl-3 bg-body rounded-2 p-2">
+                                            <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">M</span>
+                                            <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">L</span>
+                                            <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">XL</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="nav mb-2">
+                                    <a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
+                                        href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                        <span class="text-truncate">Classic cotton men's shirt</span>
+                                    </a>
+                                </div>
+                                <div class="h6 mb-2">$27.00</div>
+                                <div class="position-relative">
+                                    <div class="hover-effect-target fs-xs text-body-secondary opacity-100">+3 colors</div>
+                                    <div
+                                        class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
+                                        <input type="radio" class="btn-check" name="colors-6" id="color-6-1"
+                                            checked>
+                                        <label for="color-6-1" class="btn btn-color fs-base" style="color: #c1cde7">
+                                            <span class="visually-hidden">Blue</span>
+                                        </label>
+                                        <input type="radio" class="btn-check" name="colors-6" id="color-6-2">
+                                        <label for="color-6-2" class="btn btn-color fs-base" style="color: #526f99">
+                                            <span class="visually-hidden">Dark blue</span>
+                                        </label>
+                                        <input type="radio" class="btn-check" name="colors-6" id="color-6-3">
+                                        <label for="color-6-3" class="btn btn-color fs-base" style="color: #e0e5eb">
+                                            <span class="visually-hidden">White</span>
+                                        </label>
+                                        <input type="radio" class="btn-check" name="colors-6" id="color-6-4">
+                                        <label for="color-6-4" class="btn btn-color fs-base" style="color: #364254">
+                                            <span class="visually-hidden">Black</span>
+                                        </label>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Banner -->
+                        <div class="col-12 col-md-8 mb-2 mb-sm-3 mb-md-0">
+                            <div
+                                class="position-relative bg-body-tertiary text-center rounded-4 p-4 p-sm-5 py-md-4 py-xl-5">
+                                <p class="fs-xs text-body-secondary mb-1">Sweatshirts</p>
+                                <h2 class="h4 mb-4">Colors for your mood</h2>
+                                <div class="swiper user-select-none mb-4"
+                                    data-swiper='{
+                    "allowTouchMove": false,
+                    "loop": true,
+                    "effect": "fade",
+                    "autoplay": {
+                      "delay": 1500,
+                      "disableOnInteraction": false
+                    }
+                  }'
+                                    style="max-width: 342px">
+                                    <div class="swiper-wrapper">
+                                        <div class="swiper-slide">
+                                            <div class="ratio" style="--cz-aspect-ratio: calc(230 / 342 * 100%)">
+                                                <img src="/img/shop/fashion/banner01.png" alt="Image">
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="ratio" style="--cz-aspect-ratio: calc(230 / 342 * 100%)">
+                                                <img src="/img/shop/fashion/banner02.png" alt="Image">
+                                            </div>
+                                        </div>
+                                        <div class="swiper-slide">
+                                            <div class="ratio" style="--cz-aspect-ratio: calc(230 / 342 * 100%)">
+                                                <img src="/img/shop/fashion/banner03.png" alt="Image">
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <a class="btn btn-sm btn-dark stretched-link" href="{{ route('second', ['shop', 'product-fashion']) }}">Shop
+                                    now</a>
+                            </div>
+                        </div>
+
+                        <!-- Item -->
+                        <div class="col-6 col-md-4 mb-2 mb-sm-3 mb-md-0">
+                            <div class="animate-underline hover-effect-opacity">
+                                <div class="position-relative mb-3">
+                                    <button type="button"
+                                        class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                        aria-label="Add to Wishlist">
+                                        <i class="ci-heart animate-target"></i>
+                                    </button>
+                                    <a class="d-flex bg-body-tertiary rounded p-3" href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                        <div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
+                                            <img src="/img/shop/fashion/07.png" alt="Image">
+                                        </div>
+                                    </a>
+                                    <div
+                                        class="hover-effect-target position-absolute start-0 bottom-0 w-100 z-2 opacity-0 pb-2 pb-sm-3 px-2 px-sm-3">
+                                        <div
+                                            class="d-flex align-items-center justify-content-center gap-2 gap-xl-3 bg-body rounded-2 p-2">
+                                            <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">6</span>
+                                            <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">6.5</span>
+                                            <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">7</span>
+                                            <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">7.5</span>
+                                            <div class="nav">
+                                                <a class="nav-link fs-xs text-body-tertiary py-1 px-2"
+                                                    href="{{ route('second', ['shop', 'product-fashion']) }}">+4</a>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="nav mb-2">
+                                    <a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
+                                        href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                        <span class="text-truncate">Black massive women's boots</span>
+                                    </a>
+                                </div>
+                                <div class="h6 mb-2">$160.00</div>
+                                <div class="position-relative">
+                                    <div class="hover-effect-target fs-xs text-body-secondary opacity-100">+1 color</div>
+                                    <div
+                                        class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
+                                        <input type="radio" class="btn-check" name="colors-7" id="color-7-1"
+                                            checked>
+                                        <label for="color-7-1" class="btn btn-color fs-base" style="color: #364254">
+                                            <span class="visually-hidden">Black</span>
+                                        </label>
+                                        <input type="radio" class="btn-check" name="colors-7" id="color-7-2">
+                                        <label for="color-7-2" class="btn btn-color fs-base" style="color: #e0e5eb">
+                                            <span class="visually-hidden">White</span>
+                                        </label>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Item -->
+                        <div class="col-6 col-md-4 mb-2 mb-sm-3 mb-md-0">
+                            <div class="animate-underline hover-effect-opacity">
+                                <div class="position-relative mb-3">
+                                    <button type="button"
+                                        class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                        aria-label="Add to Wishlist">
+                                        <i class="ci-heart animate-target"></i>
+                                    </button>
+                                    <a class="d-flex bg-body-tertiary rounded p-3" href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                        <div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
+                                            <img src="/img/shop/fashion/08.png" alt="Image">
+                                        </div>
+                                    </a>
+                                    <div
+                                        class="hover-effect-target position-absolute start-0 bottom-0 w-100 z-2 opacity-0 pb-2 pb-sm-3 px-2 px-sm-3">
+                                        <div
+                                            class="d-flex align-items-center justify-content-center gap-2 gap-xl-3 bg-body rounded-2 p-2">
+                                            <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">6.5</span>
+                                            <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">7</span>
+                                            <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">7.5</span>
+                                            <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">8</span>
+                                            <div class="nav">
+                                                <a class="nav-link fs-xs text-body-tertiary py-1 px-2"
+                                                    href="{{ route('second', ['shop', 'product-fashion']) }}">+3</a>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="nav mb-2">
+                                    <a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
+                                        href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                        <span class="text-truncate">Leather sneakers with golden laces</span>
+                                    </a>
+                                </div>
+                                <div class="h6 mb-2">$74.00</div>
+                                <div class="position-relative">
+                                    <div class="hover-effect-target fs-xs text-body-secondary opacity-100">+2 colors</div>
+                                    <div
+                                        class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
+                                        <input type="radio" class="btn-check" name="colors-8" id="color-8-1"
+                                            checked>
+                                        <label for="color-8-1" class="btn btn-color fs-base" style="color: #b1aa9b">
+                                            <span class="visually-hidden">Cream</span>
+                                        </label>
+                                        <input type="radio" class="btn-check" name="colors-8" id="color-8-2">
+                                        <label for="color-8-2" class="btn btn-color fs-base" style="color: #496c33">
+                                            <span class="visually-hidden">Dark green</span>
+                                        </label>
+                                        <input type="radio" class="btn-check" name="colors-8" id="color-8-3">
+                                        <label for="color-8-3" class="btn btn-color fs-base" style="color: #364254">
+                                            <span class="visually-hidden">Black</span>
+                                        </label>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Item -->
+                        <div class="col-6 col-md-4 mb-2 mb-sm-3 mb-md-0">
+                            <div class="animate-underline hover-effect-opacity">
+                                <div class="position-relative mb-3">
+                                    <button type="button"
+                                        class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                        aria-label="Add to Wishlist">
+                                        <i class="ci-heart animate-target"></i>
+                                    </button>
+                                    <a class="d-flex bg-body-tertiary rounded p-3" href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                        <div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
+                                            <img src="/img/shop/fashion/09.png" alt="Image">
+                                        </div>
+                                    </a>
+                                    <div
+                                        class="hover-effect-target position-absolute start-0 bottom-0 w-100 z-2 opacity-0 pb-2 pb-sm-3 px-2 px-sm-3">
+                                        <div
+                                            class="d-flex align-items-center justify-content-center gap-2 gap-xl-3 bg-body rounded-2 p-2">
+                                            <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">XS</span>
+                                            <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">S</span>
+                                            <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">M</span>
+                                            <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">L</span>
+                                            <div class="nav">
+                                                <a class="nav-link fs-xs text-body-tertiary py-1 px-2"
+                                                    href="{{ route('second', ['shop', 'product-fashion']) }}">+3</a>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="nav mb-2">
+                                    <a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
+                                        href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                        <span class="text-truncate">White cotton blouse with necklace</span>
+                                    </a>
+                                </div>
+                                <div class="h6 mb-2">$38.50</div>
+                                <div class="position-relative">
+                                    <div class="hover-effect-target fs-xs text-body-secondary opacity-100">+1 color</div>
+                                    <div
+                                        class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
+                                        <input type="radio" class="btn-check" name="colors-9" id="color-9-1"
+                                            checked>
+                                        <label for="color-9-1" class="btn btn-color fs-base" style="color: #e0e5eb">
+                                            <span class="visually-hidden">White</span>
+                                        </label>
+                                        <input type="radio" class="btn-check" name="colors-9" id="color-9-2">
+                                        <label for="color-9-2" class="btn btn-color fs-base" style="color: #364254">
+                                            <span class="visually-hidden">Black</span>
+                                        </label>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Item -->
+                        <div class="col-6 col-md-4 mb-2 mb-sm-3 mb-md-0">
+                            <div class="animate-underline hover-effect-opacity">
+                                <div class="position-relative mb-3">
+                                    <button type="button"
+                                        class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                        aria-label="Add to Wishlist">
+                                        <i class="ci-heart animate-target"></i>
+                                    </button>
+                                    <a class="d-flex bg-body-tertiary rounded p-3" href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                        <div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
+                                            <img src="/img/shop/fashion/10.png" alt="Image">
+                                        </div>
+                                    </a>
+                                </div>
+                                <div class="nav mb-2">
+                                    <a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
+                                        href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                        <span class="text-truncate">Leather handbag for women</span>
+                                    </a>
+                                </div>
+                                <div class="h6 mb-2">$140.00</div>
+                                <div class="position-relative">
+                                    <div class="hover-effect-target fs-xs text-body-secondary opacity-100">+2 colors</div>
+                                    <div
+                                        class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
+                                        <input type="radio" class="btn-check" name="colors-10" id="color-10-1"
+                                            checked>
+                                        <label for="color-10-1" class="btn btn-color fs-base" style="color: #869286">
+                                            <span class="visually-hidden">Olive</span>
+                                        </label>
+                                        <input type="radio" class="btn-check" name="colors-10" id="color-10-2">
+                                        <label for="color-10-2" class="btn btn-color fs-base" style="color: #364254">
+                                            <span class="visually-hidden">Black</span>
+                                        </label>
+                                        <input type="radio" class="btn-check" name="colors-10" id="color-10-3">
+                                        <label for="color-10-3" class="btn btn-color fs-base" style="color: #526f99">
+                                            <span class="visually-hidden">Blue</span>
+                                        </label>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Show more button -->
+                    <button type="button" class="btn btn-lg btn-outline-secondary w-100">
+                        Show more
+                        <i class="ci-chevron-down fs-xl ms-2 me-n1"></i>
+                    </button>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Instagram feed -->
+        <section class="container pt-5 mt-2 mt-sm-3 mt-lg-4 mt-xl-5">
+            <div class="text-center pb-2 pb-md-3">
+                <h2 class="pb-2 mb-1">
+                    <span class="animate-underline">
+                        <a class="animate-target text-dark-emphasis text-decoration-none" href="#!">#cartzilla</a>
+                    </span>
+                </h2>
+                <p>Find more inspiration on our Instagram</p>
+            </div>
+            <div class="overflow-x-auto pb-3 mb-n3" data-simplebar>
+                <div class="d-flex gap-2 gap-md-3 gap-lg-4" style="min-width: 700px">
+                    <a class="hover-effect-scale hover-effect-opacity position-relative w-100 overflow-hidden"
+                        href="#!">
+                        <span
+                            class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
+                        <i
+                            class="ci-instagram hover-effect-target fs-4 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
+                        <div class="hover-effect-target ratio ratio-1x1">
+                            <img src="/img/instagram/01.jpg" alt="Instagram image">
+                        </div>
+                    </a>
+                    <a class="hover-effect-scale hover-effect-opacity position-relative w-100 overflow-hidden"
+                        href="#!">
+                        <span
+                            class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
+                        <i
+                            class="ci-instagram hover-effect-target fs-4 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
+                        <div class="hover-effect-target ratio ratio-1x1">
+                            <img src="/img/instagram/02.jpg" alt="Instagram image">
+                        </div>
+                    </a>
+                    <a class="hover-effect-scale hover-effect-opacity position-relative w-100 overflow-hidden"
+                        href="#!">
+                        <span
+                            class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
+                        <i
+                            class="ci-instagram hover-effect-target fs-4 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
+                        <div class="hover-effect-target ratio ratio-1x1">
+                            <img src="/img/instagram/03.jpg" alt="Instagram image">
+                        </div>
+                    </a>
+                    <a class="hover-effect-scale hover-effect-opacity position-relative w-100 overflow-hidden"
+                        href="#!">
+                        <span
+                            class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
+                        <i
+                            class="ci-instagram hover-effect-target fs-4 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
+                        <div class="hover-effect-target ratio ratio-1x1">
+                            <img src="/img/instagram/04.jpg" alt="Instagram image">
+                        </div>
+                    </a>
+                    <a class="hover-effect-scale hover-effect-opacity position-relative w-100 overflow-hidden"
+                        href="#!">
+                        <span
+                            class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
+                        <i
+                            class="ci-instagram hover-effect-target fs-4 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
+                        <div class="hover-effect-target ratio ratio-1x1">
+                            <img src="/img/instagram/05.jpg" alt="Instagram image">
+                        </div>
+                    </a>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    @include('layouts.partials/footer2')
+
+    <button type="button"
+        class="fixed-bottom z-sticky w-100 btn btn-lg btn-dark border-0 border-top border-light border-opacity-10 rounded-0 pb-4 d-lg-none"
+        data-bs-toggle="offcanvas" data-bs-target="#filterSidebar" aria-controls="filterSidebar"
+        data-bs-theme="light">
+        <i class="ci-filter fs-base me-2"></i>
+        Filters
+    </button>
+@endsection
+
+@section('scripts')
+@endsection
diff --git a/resources/views/shop/catalog-furniture.blade.php b/resources/views/shop/catalog-furniture.blade.php
new file mode 100644
index 0000000..c33399a
--- /dev/null
+++ b/resources/views/shop/catalog-furniture.blade.php
@@ -0,0 +1,1553 @@
+@extends('layouts.landing', ['title' => 'Furniture Store - Catalog'])
+
+@section('content')
+    <div class="offcanvas offcanvas-end pb-sm-2 px-sm-2" id="shoppingCart" tabindex="-1" aria-labelledby="shoppingCartLabel"
+        style="width: 500px">
+        <div class="offcanvas-header py-3 pt-lg-4">
+            <h4 class="offcanvas-title" id="shoppingCartLabel">Shopping cart</h4>
+            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+        </div>
+        <div class="offcanvas-body text-center">
+            <svg class="d-block mx-auto mb-4" xmlns="http://www.w3.org/2000/svg" width="60" viewBox="0 0 29.5 30">
+                <path class="text-body-tertiary"
+                    d="M17.8 4c.4 0 .8-.3.8-.8v-2c0-.4-.3-.8-.8-.8-.4 0-.8.3-.8.8v2c0 .4.3.8.8.8zm3.2.6c.4.2.8 0 1-.4l.4-.9c.2-.4 0-.8-.4-1s-.8 0-1 .4l-.4.9c-.2.4 0 .9.4 1zm-7.5-.4c.2.4.6.6 1 .4s.6-.6.4-1l-.4-.9c-.2-.4-.6-.6-1-.4s-.6.6-.4 1l.4.9z"
+                    fill="currentColor" />
+                <path class="text-body-emphasis"
+                    d="M10.7 24.5c-1.5 0-2.8 1.2-2.8 2.8S9.2 30 10.7 30s2.8-1.2 2.8-2.8-1.2-2.7-2.8-2.7zm0 4c-.7 0-1.2-.6-1.2-1.2s.6-1.2 1.2-1.2 1.2.6 1.2 1.2-.5 1.2-1.2 1.2zm11.1-4c-1.5 0-2.8 1.2-2.8 2.8a2.73 2.73 0 0 0 2.8 2.8 2.73 2.73 0 0 0 2.8-2.8c0-1.6-1.3-2.8-2.8-2.8zm0 4c-.7 0-1.2-.6-1.2-1.2s.6-1.2 1.2-1.2 1.2.6 1.2 1.2-.6 1.2-1.2 1.2zM8.7 18h16c.3 0 .6-.2.7-.5l4-10c.2-.5-.2-1-.7-1H9.3c-.4 0-.8.3-.8.8s.4.7.8.7h18.3l-3.4 8.5H9.3L5.5 1C5.4.7 5.1.5 4.8.5h-4c-.5 0-.8.3-.8.7s.3.8.8.8h3.4l3.7 14.6a3.24 3.24 0 0 0-2.3 3.1C5.5 21.5 7 23 8.7 23h16c.4 0 .8-.3.8-.8s-.3-.8-.8-.8h-16a1.79 1.79 0 0 1-1.8-1.8c0-1 .9-1.6 1.8-1.6z"
+                    fill="currentColor" />
+            </svg>
+            <h6 class="mb-2">Your shopping cart is currently empty!</h6>
+            <p class="fs-sm mb-4">Explore our wide range of products and add items to your cart to proceed with your
+                purchase.</p>
+            <a class="btn btn-dark rounded-pill" href="{{ route('second', ['shop', 'catalog-furniture']) }}">Continue shopping</a>
+        </div>
+    </div>
+
+    <div class="offcanvas offcanvas-end pb-sm-2 px-sm-2" id="shopFilters" tabindex="-1" aria-labelledby="shopFiltersLabel">
+
+        <!-- Header -->
+        <div class="offcanvas-header py-3">
+            <h5 class="offcanvas-title" id="shopFiltersLabel">Filter and sort</h5>
+            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+        </div>
+
+        <!-- Body -->
+        <div class="offcanvas-body pt-0">
+
+            <!-- Sort by -->
+            <select class="form-select form-select-lg form-select-flush text-body-emphasis fw-medium py-3 px-0"
+                id="fil"
+                data-select='{
+          "classNames": {
+            "containerInner": ["form-select", "form-select-lg", "form-select-flush", "text-body-emphasis", "fw-medium", "py-3", "px-0"]
+          }
+        }'
+                aria-label="Sorting">
+                <option value="">Sort by</option>
+                <option value="popular" selected>Most popular</option>
+                <option value="match">Best match</option>
+                <option value="new">New arrivals</option>
+                <option value="price-asc">Price ascending</option>
+                <option value="price-desc">Price descending</option>
+            </select>
+
+            <div class="accordion" id="filters">
+
+                <!-- Category filter -->
+                <div class="accordion-item">
+                    <h6 class="accordion-header" id="headingCategory">
+                        <button type="button" class="accordion-button fw-medium collapsed" data-bs-toggle="collapse"
+                            data-bs-target="#categoryFilter" aria-expanded="false" aria-controls="categoryFilter">
+                            <span class="d-flex align-items-end">
+                                Category
+                                <span class="text-body fs-sm fw-normal ms-1" id="categoryCount-2"></span>
+                            </span>
+                        </button>
+                    </h6>
+                    <div class="accordion-collapse collapse" id="categoryFilter" aria-labelledby="headingCategory"
+                        data-bs-parent="#filters">
+                        <div class="accordion-body d-flex flex-column gap-2 px-1">
+                            <div class="form-check m-0">
+                                <input type="checkbox" class="form-check-input fs-base" id="living-room-2" checked
+                                    onclick="updateFilterCount('categoryCount-2')" data-count-id="categoryCount-2">
+                                <label for="living-room-2" class="form-check-label d-flex align-items-end">
+                                    Living room
+                                    <span class="fs-xs text-body-secondary ps-2 ms-auto">657</span>
+                                </label>
+                            </div>
+                            <div class="form-check m-0">
+                                <input type="checkbox" class="form-check-input fs-base" id="bedroom-2" checked
+                                    onclick="updateFilterCount('categoryCount-2')" data-count-id="categoryCount-2">
+                                <label for="bedroom-2" class="form-check-label d-flex align-items-end">
+                                    Bedroom
+                                    <span class="fs-xs text-body-secondary ps-2 ms-auto">528</span>
+                                </label>
+                            </div>
+                            <div class="form-check m-0">
+                                <input type="checkbox" class="form-check-input fs-base" id="kitchen-2"
+                                    onclick="updateFilterCount('categoryCount-2')" data-count-id="categoryCount-2">
+                                <label for="kitchen-2" class="form-check-label d-flex align-items-end">
+                                    Kitchen
+                                    <span class="fs-xs text-body-secondary ps-2 ms-auto">342</span>
+                                </label>
+                            </div>
+                            <div class="form-check m-0">
+                                <input type="checkbox" class="form-check-input fs-base" id="office-2"
+                                    onclick="updateFilterCount('categoryCount-2')" data-count-id="categoryCount-2">
+                                <label for="office-2" class="form-check-label d-flex align-items-end">
+                                    Office
+                                    <span class="fs-xs text-body-secondary ps-2 ms-auto">283</span>
+                                </label>
+                            </div>
+                            <div class="form-check m-0">
+                                <input type="checkbox" class="form-check-input fs-base" id="lighting-2" checked
+                                    onclick="updateFilterCount('categoryCount-2')" data-count-id="categoryCount-2">
+                                <label for="lighting-2" class="form-check-label d-flex align-items-end">
+                                    Lighting
+                                    <span class="fs-xs text-body-secondary ps-2 ms-auto">395</span>
+                                </label>
+                            </div>
+                            <div class="form-check m-0">
+                                <input type="checkbox" class="form-check-input fs-base" id="decoration-2"
+                                    onclick="updateFilterCount('categoryCount-2')" data-count-id="categoryCount-2">
+                                <label for="decoration-2" class="form-check-labe d-flex align-items-endl">
+                                    Decoration
+                                    <span class="fs-xs text-body-secondary ps-2 ms-auto">204</span>
+                                </label>
+                            </div>
+                            <div class="form-check m-0">
+                                <input type="checkbox" class="form-check-input fs-base" id="accessories-2" checked
+                                    onclick="updateFilterCount('categoryCount-2')" data-count-id="categoryCount-2">
+                                <label for="accessories-2" class="form-check-label d-flex align-items-end">
+                                    Accessories
+                                    <span class="fs-xs text-body-secondary ps-2 ms-auto">190</span>
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Type filter -->
+                <div class="accordion-item">
+                    <h6 class="accordion-header" id="headingType">
+                        <button type="button" class="accordion-button fw-medium collapsed" data-bs-toggle="collapse"
+                            data-bs-target="#typeFilter" aria-expanded="false" aria-controls="typeFilter">
+                            <span class="d-flex align-items-end">
+                                Type
+                                <span class="text-body fs-sm fw-normal ms-1" id="typeCount-2"></span>
+                            </span>
+                        </button>
+                    </h6>
+                    <div class="accordion-collapse collapse" id="typeFilter" aria-labelledby="headingType"
+                        data-bs-parent="#filters">
+                        <div class="accordion-body d-flex flex-column gap-2 px-1">
+                            <div class="form-check m-0">
+                                <input type="checkbox" class="form-check-input fs-base" id="armchair-2"
+                                    onclick="updateFilterCount('typeCount-2')" data-count-id="typeCount-2">
+                                <label for="armchair-2" class="form-check-label d-flex align-items-end">
+                                    Armchair
+                                    <span class="fs-xs text-body-secondary ps-2 ms-auto">324</span>
+                                </label>
+                            </div>
+                            <div class="form-check m-0">
+                                <input type="checkbox" class="form-check-input fs-base" id="sofa-2"
+                                    onclick="updateFilterCount('typeCount-2')" data-count-id="typeCount-2">
+                                <label for="sofa-2" class="form-check-label d-flex align-items-end">
+                                    Sofa
+                                    <span class="fs-xs text-body-secondary ps-2 ms-auto">275</span>
+                                </label>
+                            </div>
+                            <div class="form-check m-0">
+                                <input type="checkbox" class="form-check-input fs-base" id="ottoman-2"
+                                    onclick="updateFilterCount('typeCount-2')" data-count-id="typeCount-2">
+                                <label for="ottoman-2" class="form-check-label d-flex align-items-end">
+                                    Ottoman
+                                    <span class="fs-xs text-body-secondary ps-2 ms-auto">117</span>
+                                </label>
+                            </div>
+                            <div class="form-check m-0">
+                                <input type="checkbox" class="form-check-input fs-base" id="bench-2"
+                                    onclick="updateFilterCount('typeCount-2')" data-count-id="typeCount-2">
+                                <label for="bench-2" class="form-check-label d-flex align-items-end">
+                                    Bench
+                                    <span class="fs-xs text-body-secondary ps-2 ms-auto">86</span>
+                                </label>
+                            </div>
+                            <div class="form-check m-0">
+                                <input type="checkbox" class="form-check-input fs-base" id="bed-2"
+                                    onclick="updateFilterCount('typeCount-2')" data-count-id="typeCount-2">
+                                <label for="bed-2" class="form-check-label d-flex align-items-end">
+                                    Bed frame
+                                    <span class="fs-xs text-body-secondary ps-2 ms-auto">263</span>
+                                </label>
+                            </div>
+                            <div class="form-check m-0">
+                                <input type="checkbox" class="form-check-input fs-base" id="lamp-2"
+                                    onclick="updateFilterCount('typeCount-2')" data-count-id="typeCount-2">
+                                <label for="lamp-2" class="form-check-label d-flex align-items-end">
+                                    Lamp
+                                    <span class="fs-xs text-body-secondary ps-2 ms-auto">415</span>
+                                </label>
+                            </div>
+                            <div class="form-check m-0">
+                                <input type="checkbox" class="form-check-input fs-base" id="stool-2"
+                                    onclick="updateFilterCount('typeCount-2')" data-count-id="typeCount-2">
+                                <label for="stool-2" class="form-check-labe d-flex align-items-end">
+                                    Stool
+                                    <span class="fs-xs text-body-secondary ps-2 ms-auto">104</span>
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Color filter -->
+                <div class="accordion-item">
+                    <h6 class="accordion-header" id="headingColor">
+                        <button type="button" class="accordion-button fw-medium collapsed" data-bs-toggle="collapse"
+                            data-bs-target="#colorFilter" aria-expanded="false" aria-controls="colorFilter">
+                            <span class="d-flex align-items-end">
+                                Color
+                                <span class="text-body fs-sm fw-normal ms-1" id="colorCount-2"></span>
+                            </span>
+                        </button>
+                    </h6>
+                    <div class="accordion-collapse collapse" id="colorFilter" aria-labelledby="headingColor"
+                        data-bs-parent="#filters">
+                        <div class="accordion-body d-flex flex-column gap-2 px-1">
+                            <div class="form-check m-0">
+                                <input type="checkbox" class="form-check-input fs-base" id="emerald-2"
+                                    onclick="updateFilterCount('colorCount-2')" data-count-id="colorCount-2">
+                                <label for="emerald-2" class="form-check-label d-flex align-items-end">
+                                    <span class="align-self-center rounded-circle border border-2 p-1 me-2"
+                                        style="--cz-border-color: #32808e; background-color: #32808e"></span>
+                                    Emerald
+                                    <span class="fs-xs text-body-secondary ps-2 ms-auto">97</span>
+                                </label>
+                            </div>
+                            <div class="form-check m-0">
+                                <input type="checkbox" class="form-check-input fs-base" id="dark-gray-2"
+                                    onclick="updateFilterCount('colorCount-2')" data-count-id="colorCount-2">
+                                <label for="dark-gray-2" class="form-check-label d-flex align-items-end">
+                                    <span class="align-self-center rounded-circle border border-2 p-1 me-2"
+                                        style="--cz-border-color: #6a6f7b; background-color: #6a6f7b"></span>
+                                    Dark gray
+                                    <span class="fs-xs text-body-secondary ps-2 ms-auto">346</span>
+                                </label>
+                            </div>
+                            <div class="form-check m-0">
+                                <input type="checkbox" class="form-check-input fs-base" id="light-gray-2"
+                                    onclick="updateFilterCount('colorCount-2')" data-count-id="colorCount-2">
+                                <label for="light-gray-2" class="form-check-label d-flex align-items-end">
+                                    <span class="align-self-center rounded-circle border border-2 p-1 me-2"
+                                        style="--cz-border-color: #bdc5da; background-color: #bdc5da"></span>
+                                    Light gray
+                                    <span class="fs-xs text-body-secondary ps-2 ms-auto">291</span>
+                                </label>
+                            </div>
+                            <div class="form-check m-0">
+                                <input type="checkbox" class="form-check-input fs-base" id="brown-2"
+                                    onclick="updateFilterCount('colorCount-2')" data-count-id="colorCount-2">
+                                <label for="brown-2" class="form-check-label d-flex align-items-end">
+                                    <span class="align-self-center rounded-circle border border-2 p-1 me-2"
+                                        style="--cz-border-color: #af8d6a; background-color: #af8d6a"></span>
+                                    Brown
+                                    <span class="fs-xs text-body-secondary ps-2 ms-auto">105</span>
+                                </label>
+                            </div>
+                            <div class="form-check m-0">
+                                <input type="checkbox" class="form-check-input fs-base" id="blue-2"
+                                    onclick="updateFilterCount('colorCount-2')" data-count-id="colorCount-2">
+                                <label for="blue-2" class="form-check-label d-flex align-items-end">
+                                    <span class="align-self-center rounded-circle border border-2 p-1 me-2"
+                                        style="--cz-border-color: #216aae; background-color: #216aae"></span>
+                                    Blue
+                                    <span class="fs-xs text-body-secondary ps-2 ms-auto">84</span>
+                                </label>
+                            </div>
+                            <div class="form-check m-0">
+                                <input type="checkbox" class="form-check-input fs-base" id="green-2"
+                                    onclick="updateFilterCount('colorCount-2')" data-count-id="colorCount-2">
+                                <label for="green-2" class="form-check-label d-flex align-items-end">
+                                    <span class="align-self-center rounded-circle border border-2 p-1 me-2"
+                                        style="--cz-border-color: #187c1c; background-color: #187c1c"></span>
+                                    Green
+                                    <span class="fs-xs text-body-secondary ps-2 ms-auto">69</span>
+                                </label>
+                            </div>
+                            <div class="form-check m-0">
+                                <input type="checkbox" class="form-check-input fs-base" id="beige-2"
+                                    onclick="updateFilterCount('colorCount-2')" data-count-id="colorCount-2">
+                                <label for="beige-2" class="form-check-label d-flex align-items-end">
+                                    <span class="align-self-center rounded-circle border border-2 p-1 me-2"
+                                        style="--cz-border-color: #bdaB9e; background-color: #bdaB9e"></span>
+                                    Beige
+                                    <span class="fs-xs text-body-secondary ps-2 ms-auto">173</span>
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Price filter -->
+                <div class="accordion-item">
+                    <h6 class="accordion-header" id="headingPrice">
+                        <button type="button" class="accordion-button fw-medium collapsed" data-bs-toggle="collapse"
+                            data-bs-target="#priceFilter" aria-expanded="false" aria-controls="priceFilter">
+                            <span class="d-flex align-items-end">
+                                Price
+                                <span class="text-body fs-sm fw-normal ms-1" id="priceCount"></span>
+                            </span>
+                        </button>
+                    </h6>
+                    <div class="accordion-collapse collapse" id="priceFilter" aria-labelledby="headingPrice"
+                        data-bs-parent="#filters">
+                        <div class="accordion-body d-flex flex-column gap-2 px-1">
+                            <div class="form-check m-0">
+                                <input type="checkbox" class="form-check-input fs-base" id="price-1"
+                                    onclick="updateFilterCount('priceCount')" data-count-id="priceCount">
+                                <label for="price-1" class="form-check-label d-flex align-items-end">
+                                    $0.00 - 99.99
+                                    <span class="fs-xs text-body-secondary ps-2 ms-auto">241</span>
+                                </label>
+                            </div>
+                            <div class="form-check m-0">
+                                <input type="checkbox" class="form-check-input fs-base" id="price-2"
+                                    onclick="updateFilterCount('priceCount')" data-count-id="priceCount">
+                                <label for="price-2" class="form-check-label d-flex align-items-end">
+                                    $100.00 - 199.99
+                                    <span class="fs-xs text-body-secondary ps-2 ms-auto">398</span>
+                                </label>
+                            </div>
+                            <div class="form-check m-0">
+                                <input type="checkbox" class="form-check-input fs-base" id="price-3"
+                                    onclick="updateFilterCount('priceCount')" data-count-id="priceCount">
+                                <label for="price-3" class="form-check-label d-flex align-items-end">
+                                    $200.00 - 299.99
+                                    <span class="fs-xs text-body-secondary ps-2 ms-auto">253</span>
+                                </label>
+                            </div>
+                            <div class="form-check m-0">
+                                <input type="checkbox" class="form-check-input fs-base" id="price-4"
+                                    onclick="updateFilterCount('priceCount')" data-count-id="priceCount">
+                                <label for="price-4" class="form-check-label d-flex align-items-end">
+                                    $300.00 - 399.99
+                                    <span class="fs-xs text-body-secondary ps-2 ms-auto">197</span>
+                                </label>
+                            </div>
+                            <div class="form-check m-0">
+                                <input type="checkbox" class="form-check-input fs-base" id="price-5"
+                                    onclick="updateFilterCount('priceCount')" data-count-id="priceCount">
+                                <label for="price-5" class="form-check-label d-flex align-items-end">
+                                    $400.00 - 499.99
+                                    <span class="fs-xs text-body-secondary ps-2 ms-auto">152</span>
+                                </label>
+                            </div>
+                            <div class="form-check m-0">
+                                <input type="checkbox" class="form-check-input fs-base" id="price-6"
+                                    onclick="updateFilterCount('priceCount')" data-count-id="priceCount">
+                                <label for="price-6" class="form-check-label d-flex align-items-end">
+                                    $500.00+
+                                    <span class="fs-xs text-body-secondary ps-2 ms-auto">138</span>
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Size filter -->
+                <div class="accordion-item">
+                    <h6 class="accordion-header" id="headingSize">
+                        <button type="button" class="accordion-button fw-medium collapsed" data-bs-toggle="collapse"
+                            data-bs-target="#sizeFilter" aria-expanded="false" aria-controls="sizeFilter">
+                            <span class="d-flex align-items-end">
+                                Size
+                                <span class="text-body fs-sm fw-normal ms-1" id="sizeCount"></span>
+                            </span>
+                        </button>
+                    </h6>
+                    <div class="accordion-collapse collapse" id="sizeFilter" aria-labelledby="headingSize"
+                        data-bs-parent="#filters">
+                        <div class="accordion-body d-flex flex-column gap-2 px-1">
+                            <div class="fs-sm fw-semibold text-body-emphasis pb-2">Width</div>
+                            <div class="form-check m-0">
+                                <input type="checkbox" class="form-check-input fs-base" id="width-1"
+                                    onclick="updateFilterCount('sizeCount')" data-count-id="sizeCount">
+                                <label for="width-1" class="form-check-label d-flex align-items-end">
+                                    0 - 19 "
+                                    <span class="fs-xs text-body-secondary ps-2 ms-auto">27</span>
+                                </label>
+                            </div>
+                            <div class="form-check m-0">
+                                <input type="checkbox" class="form-check-input fs-base" id="width-2"
+                                    onclick="updateFilterCount('sizeCount')" data-count-id="sizeCount">
+                                <label for="width-2" class="form-check-label d-flex align-items-end">
+                                    20 - 24 "
+                                    <span class="fs-xs text-body-secondary ps-2 ms-auto">89</span>
+                                </label>
+                            </div>
+                            <div class="form-check m-0">
+                                <input type="checkbox" class="form-check-input fs-base" id="width-3"
+                                    onclick="updateFilterCount('sizeCount')" data-count-id="sizeCount">
+                                <label for="width-3" class="form-check-label d-flex align-items-end">
+                                    25 - 29 "
+                                    <span class="fs-xs text-body-secondary ps-2 ms-auto">145</span>
+                                </label>
+                            </div>
+                            <div class="form-check m-0">
+                                <input type="checkbox" class="form-check-input fs-base" id="width-4"
+                                    onclick="updateFilterCount('sizeCount')" data-count-id="sizeCount">
+                                <label for="width-4" class="form-check-label d-flex align-items-end">
+                                    30 - 34 "
+                                    <span class="fs-xs text-body-secondary ps-2 ms-auto">106</span>
+                                </label>
+                            </div>
+                            <div class="form-check m-0">
+                                <input type="checkbox" class="form-check-input fs-base" id="width-5"
+                                    onclick="updateFilterCount('sizeCount')" data-count-id="sizeCount">
+                                <label for="width-5" class="form-check-label d-flex align-items-end">
+                                    35+ "
+                                    <span class="fs-xs text-body-secondary ps-2 ms-auto">73</span>
+                                </label>
+                            </div>
+                            <div class="fs-sm fw-semibold text-body-emphasis py-2">Height</div>
+                            <div class="form-check m-0">
+                                <input type="checkbox" class="form-check-input fs-base" id="height-1"
+                                    onclick="updateFilterCount('sizeCount')" data-count-id="sizeCount">
+                                <label for="height-1" class="form-check-label d-flex align-items-end">
+                                    0 - 24 "
+                                    <span class="fs-xs text-body-secondary ps-2 ms-auto">85</span>
+                                </label>
+                            </div>
+                            <div class="form-check m-0">
+                                <input type="checkbox" class="form-check-input fs-base" id="height-2"
+                                    onclick="updateFilterCount('sizeCount')" data-count-id="sizeCount">
+                                <label for="height-2" class="form-check-label d-flex align-items-end">
+                                    25 - 29 "
+                                    <span class="fs-xs text-body-secondary ps-2 ms-auto">67</span>
+                                </label>
+                            </div>
+                            <div class="form-check m-0">
+                                <input type="checkbox" class="form-check-input fs-base" id="height-3"
+                                    onclick="updateFilterCount('sizeCount')" data-count-id="sizeCount">
+                                <label for="height-3" class="form-check-label d-flex align-items-end">
+                                    30 - 34 "
+                                    <span class="fs-xs text-body-secondary ps-2 ms-auto">210</span>
+                                </label>
+                            </div>
+                            <div class="form-check m-0">
+                                <input type="checkbox" class="form-check-input fs-base" id="height-4"
+                                    onclick="updateFilterCount('sizeCount')" data-count-id="sizeCount">
+                                <label for="height-4" class="form-check-label d-flex align-items-end">
+                                    35 - 39 "
+                                    <span class="fs-xs text-body-secondary ps-2 ms-auto">132</span>
+                                </label>
+                            </div>
+                            <div class="form-check m-0">
+                                <input type="checkbox" class="form-check-input fs-base" id="height-5"
+                                    onclick="updateFilterCount('sizeCount')" data-count-id="sizeCount">
+                                <label for="height-5" class="form-check-label d-flex align-items-end">
+                                    40+ "
+                                    <span class="fs-xs text-body-secondary ps-2 ms-auto">19</span>
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Material filter -->
+                <div class="accordion-item">
+                    <h6 class="accordion-header" id="headingMaterial">
+                        <button type="button" class="accordion-button fw-medium collapsed" data-bs-toggle="collapse"
+                            data-bs-target="#materialFilter" aria-expanded="false" aria-controls="materialFilter">
+                            <span class="d-flex align-items-end">
+                                Material
+                                <span class="text-body fs-sm fw-normal ms-1" id="materialCount"></span>
+                            </span>
+                        </button>
+                    </h6>
+                    <div class="accordion-collapse collapse" id="materialFilter" aria-labelledby="headingMaterial"
+                        data-bs-parent="#filters">
+                        <div class="accordion-body d-flex flex-column gap-2 px-1">
+                            <div class="form-check m-0">
+                                <input type="checkbox" class="form-check-input fs-base" id="fabric"
+                                    onclick="updateFilterCount('materialCount')" data-count-id="materialCount">
+                                <label for="fabric" class="form-check-label d-flex align-items-end">
+                                    Fabric
+                                    <span class="fs-xs text-body-secondary ps-2 ms-auto">482</span>
+                                </label>
+                            </div>
+                            <div class="form-check m-0">
+                                <input type="checkbox" class="form-check-input fs-base" id="wood"
+                                    onclick="updateFilterCount('materialCount')" data-count-id="materialCount">
+                                <label for="wood" class="form-check-label d-flex align-items-end">
+                                    Wood
+                                    <span class="fs-xs text-body-secondary ps-2 ms-auto">537</span>
+                                </label>
+                            </div>
+                            <div class="form-check m-0">
+                                <input type="checkbox" class="form-check-input fs-base" id="leather"
+                                    onclick="updateFilterCount('materialCount')" data-count-id="materialCount">
+                                <label for="leather" class="form-check-label d-flex align-items-end">
+                                    Leather
+                                    <span class="fs-xs text-body-secondary ps-2 ms-auto">256</span>
+                                </label>
+                            </div>
+                            <div class="form-check m-0">
+                                <input type="checkbox" class="form-check-input fs-base" id="metal"
+                                    onclick="updateFilterCount('materialCount')" data-count-id="materialCount">
+                                <label for="metal" class="form-check-label d-flex align-items-end">
+                                    Metal
+                                    <span class="fs-xs text-body-secondary ps-2 ms-auto">175</span>
+                                </label>
+                            </div>
+                            <div class="form-check m-0">
+                                <input type="checkbox" class="form-check-input fs-base" id="plastic"
+                                    onclick="updateFilterCount('materialCount')" data-count-id="materialCount">
+                                <label for="plastic" class="form-check-label d-flex align-items-end">
+                                    Plastic
+                                    <span class="fs-xs text-body-secondary ps-2 ms-auto">279</span>
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    @include('layouts.partials/navbar2')
+
+    <main class="content-wrapper">
+        <div class="container pb-5 mb-2 mb-sm-3 mb-lg-4 mb-xl-5">
+
+            <!-- Breadcrumb -->
+            <nav class="position-relative pt-3 my-3 my-md-4" aria-label="breadcrumb" style="z-index: 1021">
+                <ol class="breadcrumb">
+                    <li class="breadcrumb-item"><a href="{{ route('second', ['home', 'furniture']) }}">Home</a></li>
+                    <li class="breadcrumb-item active" aria-current="page">Catalog with filters on top</li>
+                </ol>
+            </nav>
+
+
+            <!-- Page title -->
+            <h1 class="h3 position-relative pb-sm-2 pb-md-3" style="z-index: 1021">Shop catalog</h1>
+
+
+            <!-- Filters -->
+            <div class="sticky-top bg-body mb-3 mb-sm-4" style="margin-top: -4.5rem">
+                <div class="row align-items-center pt-5">
+                    <div class="col-5 col-sm-8 col-md-9 d-flex gap-2 pb-3 mt-4">
+                        <div class="d-none d-sm-block w-100 me-1">
+                            <select class="form-select rounded-pill"
+                                data-select='{
+                  "classNames": {
+                    "containerInner": ["form-select", "filter-select", "rounded-pill"]
+                  }
+                }'
+                                aria-label="Sorting">
+                                <option value="">Sort by</option>
+                                <option value="popular" selected>Most popular</option>
+                                <option value="match">Best match</option>
+                                <option value="new">New arrivals</option>
+                                <option value="price-asc">Price ascending</option>
+                                <option value="price-desc">Price descending</option>
+                            </select>
+                        </div>
+                        <div class="dropdown w-100 d-none d-md-block me-1">
+                            <button type="button"
+                                class="btn btn-outline-secondary dropdown-toggle filter-select justify-content-between w-100 text-body fw-normal rounded-pill px-3"
+                                data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true"
+                                aria-expanded="false">Category <span class="ms-1 me-auto"
+                                    id="categoryCount"></span></button>
+                            <div class="dropdown-menu w-100 p-3">
+                                <div class="d-flex flex-column gap-2">
+                                    <div class="form-check m-0">
+                                        <input type="checkbox" class="form-check-input fs-base" id="living-room" checked
+                                            onclick="updateFilterCount('categoryCount')" data-count-id="categoryCount">
+                                        <label for="living-room" class="form-check-label d-flex align-items-end">
+                                            Living room
+                                            <span class="fs-xs text-body-secondary ps-2 ms-auto">657</span>
+                                        </label>
+                                    </div>
+                                    <div class="form-check m-0">
+                                        <input type="checkbox" class="form-check-input fs-base" id="bedroom" checked
+                                            onclick="updateFilterCount('categoryCount')" data-count-id="categoryCount">
+                                        <label for="bedroom" class="form-check-label d-flex align-items-end">
+                                            Bedroom
+                                            <span class="fs-xs text-body-secondary ps-2 ms-auto">528</span>
+                                        </label>
+                                    </div>
+                                    <div class="form-check m-0">
+                                        <input type="checkbox" class="form-check-input fs-base" id="kitchen"
+                                            onclick="updateFilterCount('categoryCount')" data-count-id="categoryCount">
+                                        <label for="kitchen" class="form-check-label d-flex align-items-end">
+                                            Kitchen
+                                            <span class="fs-xs text-body-secondary ps-2 ms-auto">342</span>
+                                        </label>
+                                    </div>
+                                    <div class="form-check m-0">
+                                        <input type="checkbox" class="form-check-input fs-base" id="office"
+                                            onclick="updateFilterCount('categoryCount')" data-count-id="categoryCount">
+                                        <label for="office" class="form-check-label d-flex align-items-end">
+                                            Office
+                                            <span class="fs-xs text-body-secondary ps-2 ms-auto">283</span>
+                                        </label>
+                                    </div>
+                                    <div class="form-check m-0">
+                                        <input type="checkbox" class="form-check-input fs-base" id="lighting" checked
+                                            onclick="updateFilterCount('categoryCount')" data-count-id="categoryCount">
+                                        <label for="lighting" class="form-check-label d-flex align-items-end">
+                                            Lighting
+                                            <span class="fs-xs text-body-secondary ps-2 ms-auto">395</span>
+                                        </label>
+                                    </div>
+                                    <div class="form-check m-0">
+                                        <input type="checkbox" class="form-check-input fs-base" id="decoration"
+                                            onclick="updateFilterCount('categoryCount')" data-count-id="categoryCount">
+                                        <label for="decoration" class="form-check-labe d-flex align-items-endl">
+                                            Decoration
+                                            <span class="fs-xs text-body-secondary ps-2 ms-auto">204</span>
+                                        </label>
+                                    </div>
+                                    <div class="form-check m-0">
+                                        <input type="checkbox" class="form-check-input fs-base" id="accessories" checked
+                                            onclick="updateFilterCount('categoryCount')" data-count-id="categoryCount">
+                                        <label for="accessories" class="form-check-label d-flex align-items-end">
+                                            Accessories
+                                            <span class="fs-xs text-body-secondary ps-2 ms-auto">190</span>
+                                        </label>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="dropdown w-100 d-none d-lg-block me-1">
+                            <button type="button"
+                                class="btn btn-outline-secondary dropdown-toggle filter-select justify-content-between w-100 text-body fw-normal rounded-pill px-3"
+                                data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true"
+                                aria-expanded="false">Type <span class="ms-1 me-auto" id="typeCount"></span></button>
+                            <div class="dropdown-menu w-100 p-3">
+                                <div class="d-flex flex-column gap-2">
+                                    <div class="form-check m-0">
+                                        <input type="checkbox" class="form-check-input fs-base" id="armchair"
+                                            onclick="updateFilterCount('typeCount')" data-count-id="typeCount">
+                                        <label for="armchair" class="form-check-label d-flex align-items-end">
+                                            Armchair
+                                            <span class="fs-xs text-body-secondary ps-2 ms-auto">324</span>
+                                        </label>
+                                    </div>
+                                    <div class="form-check m-0">
+                                        <input type="checkbox" class="form-check-input fs-base" id="sofa"
+                                            onclick="updateFilterCount('typeCount')" data-count-id="typeCount">
+                                        <label for="sofa" class="form-check-label d-flex align-items-end">
+                                            Sofa
+                                            <span class="fs-xs text-body-secondary ps-2 ms-auto">275</span>
+                                        </label>
+                                    </div>
+                                    <div class="form-check m-0">
+                                        <input type="checkbox" class="form-check-input fs-base" id="ottoman"
+                                            onclick="updateFilterCount('typeCount')" data-count-id="typeCount">
+                                        <label for="ottoman" class="form-check-label d-flex align-items-end">
+                                            Ottoman
+                                            <span class="fs-xs text-body-secondary ps-2 ms-auto">117</span>
+                                        </label>
+                                    </div>
+                                    <div class="form-check m-0">
+                                        <input type="checkbox" class="form-check-input fs-base" id="bench"
+                                            onclick="updateFilterCount('typeCount')" data-count-id="typeCount">
+                                        <label for="bench" class="form-check-label d-flex align-items-end">
+                                            Bench
+                                            <span class="fs-xs text-body-secondary ps-2 ms-auto">86</span>
+                                        </label>
+                                    </div>
+                                    <div class="form-check m-0">
+                                        <input type="checkbox" class="form-check-input fs-base" id="bed"
+                                            onclick="updateFilterCount('typeCount')" data-count-id="typeCount">
+                                        <label for="bed" class="form-check-label d-flex align-items-end">
+                                            Bed frame
+                                            <span class="fs-xs text-body-secondary ps-2 ms-auto">263</span>
+                                        </label>
+                                    </div>
+                                    <div class="form-check m-0">
+                                        <input type="checkbox" class="form-check-input fs-base" id="lamp"
+                                            onclick="updateFilterCount('typeCount')" data-count-id="typeCount">
+                                        <label for="lamp" class="form-check-label d-flex align-items-end">
+                                            Lamp
+                                            <span class="fs-xs text-body-secondary ps-2 ms-auto">415</span>
+                                        </label>
+                                    </div>
+                                    <div class="form-check m-0">
+                                        <input type="checkbox" class="form-check-input fs-base" id="stool"
+                                            onclick="updateFilterCount('typeCount')" data-count-id="typeCount">
+                                        <label for="stool" class="form-check-labe d-flex align-items-end">
+                                            Stool
+                                            <span class="fs-xs text-body-secondary ps-2 ms-auto">104</span>
+                                        </label>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="dropdown w-100 d-none d-xl-block me-1">
+                            <button type="button"
+                                class="btn btn-outline-secondary dropdown-toggle filter-select justify-content-between w-100 text-body fw-normal rounded-pill px-3"
+                                data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true"
+                                aria-expanded="false">Color <span class="ms-1 me-auto" id="colorCount"></span></button>
+                            <div class="dropdown-menu w-100 p-3">
+                                <div class="d-flex flex-column gap-2">
+                                    <div class="form-check m-0">
+                                        <input type="checkbox" class="form-check-input fs-base" id="emerald"
+                                            onclick="updateFilterCount('colorCount')" data-count-id="colorCount">
+                                        <label for="emerald" class="form-check-label d-flex align-items-end">
+                                            <span class="align-self-center rounded-circle border border-2 p-1 me-2"
+                                                style="--cz-border-color: #32808e; background-color: #32808e"></span>
+                                            Emerald
+                                            <span class="fs-xs text-body-secondary ps-2 ms-auto">97</span>
+                                        </label>
+                                    </div>
+                                    <div class="form-check m-0">
+                                        <input type="checkbox" class="form-check-input fs-base" id="dark-gray"
+                                            onclick="updateFilterCount('colorCount')" data-count-id="colorCount">
+                                        <label for="dark-gray" class="form-check-label d-flex align-items-end">
+                                            <span class="align-self-center rounded-circle border border-2 p-1 me-2"
+                                                style="--cz-border-color: #6a6f7b; background-color: #6a6f7b"></span>
+                                            Dark gray
+                                            <span class="fs-xs text-body-secondary ps-2 ms-auto">346</span>
+                                        </label>
+                                    </div>
+                                    <div class="form-check m-0">
+                                        <input type="checkbox" class="form-check-input fs-base" id="light-gray"
+                                            onclick="updateFilterCount('colorCount')" data-count-id="colorCount">
+                                        <label for="light-gray" class="form-check-label d-flex align-items-end">
+                                            <span class="align-self-center rounded-circle border border-2 p-1 me-2"
+                                                style="--cz-border-color: #bdc5da; background-color: #bdc5da"></span>
+                                            Light gray
+                                            <span class="fs-xs text-body-secondary ps-2 ms-auto">291</span>
+                                        </label>
+                                    </div>
+                                    <div class="form-check m-0">
+                                        <input type="checkbox" class="form-check-input fs-base" id="brown"
+                                            onclick="updateFilterCount('colorCount')" data-count-id="colorCount">
+                                        <label for="brown" class="form-check-label d-flex align-items-end">
+                                            <span class="align-self-center rounded-circle border border-2 p-1 me-2"
+                                                style="--cz-border-color: #af8d6a; background-color: #af8d6a"></span>
+                                            Brown
+                                            <span class="fs-xs text-body-secondary ps-2 ms-auto">105</span>
+                                        </label>
+                                    </div>
+                                    <div class="form-check m-0">
+                                        <input type="checkbox" class="form-check-input fs-base" id="blue"
+                                            onclick="updateFilterCount('colorCount')" data-count-id="colorCount">
+                                        <label for="blue" class="form-check-label d-flex align-items-end">
+                                            <span class="align-self-center rounded-circle border border-2 p-1 me-2"
+                                                style="--cz-border-color: #216aae; background-color: #216aae"></span>
+                                            Blue
+                                            <span class="fs-xs text-body-secondary ps-2 ms-auto">84</span>
+                                        </label>
+                                    </div>
+                                    <div class="form-check m-0">
+                                        <input type="checkbox" class="form-check-input fs-base" id="green"
+                                            onclick="updateFilterCount('colorCount')" data-count-id="colorCount">
+                                        <label for="green" class="form-check-label d-flex align-items-end">
+                                            <span class="align-self-center rounded-circle border border-2 p-1 me-2"
+                                                style="--cz-border-color: #187c1c; background-color: #187c1c"></span>
+                                            Green
+                                            <span class="fs-xs text-body-secondary ps-2 ms-auto">69</span>
+                                        </label>
+                                    </div>
+                                    <div class="form-check m-0">
+                                        <input type="checkbox" class="form-check-input fs-base" id="beige"
+                                            onclick="updateFilterCount('colorCount')" data-count-id="colorCount">
+                                        <label for="beige" class="form-check-label d-flex align-items-end">
+                                            <span class="align-self-center rounded-circle border border-2 p-1 me-2"
+                                                style="--cz-border-color: #bdaB9e; background-color: #bdaB9e"></span>
+                                            Beige
+                                            <span class="fs-xs text-body-secondary ps-2 ms-auto">173</span>
+                                        </label>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- All filters offcanvas toggle -->
+                        <nav class="nav">
+                            <a class="nav-link animate-underline px-2" href="#shopFilters" data-bs-toggle="offcanvas"
+                                aria-controls="shopFilters">
+                                <i class="ci-filter me-1"></i>
+                                <span class="animate-target text-nowrap">All filters</span>
+                            </a>
+                        </nav>
+                    </div>
+
+                    <!-- Product / room view switcher -->
+                    <div class="col-7 col-sm-4 col-md-3">
+                        <ul class="nav nav-underline flex-nowrap justify-content-end" id="viewShwitcher">
+                            <li class="nav-item" role="presentation">
+                                <button type="button" class="nav-link active" id="showProduct" role="tab"
+                                    aria-selected="true">
+                                    Product
+                                </button>
+                            </li>
+                            <li class="nav-item" role="presentation">
+                                <button type="button" class="nav-link" id="showRoom" role="tab"
+                                    aria-selected="false">
+                                    Room
+                                </button>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+
+
+            <!-- Selected filters -->
+            <div class="d-flex flex-wrap align-items-center gap-2 text-nowrap mt-n3 mb-3 mb-lg-4">
+                <button type="button" class="btn btn-sm btn-secondary rounded-pill me-1">
+                    <i class="ci-close fs-sm me-1 ms-n1"></i>
+                    Living room
+                </button>
+                <button type="button" class="btn btn-sm btn-secondary rounded-pill me-1">
+                    <i class="ci-close fs-sm me-1 ms-n1"></i>
+                    Bedroom
+                </button>
+                <button type="button" class="btn btn-sm btn-secondary rounded-pill me-1">
+                    <i class="ci-close fs-sm me-1 ms-n1"></i>
+                    Lighting
+                </button>
+                <button type="button" class="btn btn-sm btn-secondary rounded-pill me-1">
+                    <i class="ci-close fs-sm me-1 ms-n1"></i>
+                    Accessories
+                </button>
+                <div class="nav ps-1">
+                    <a class="nav-link fs-xs text-decoration-underline px-0" href="#!">Clear all</a>
+                </div>
+            </div>
+
+
+            <!-- Product grid -->
+            <div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 gy-5" id="productGrid">
+
+                <!-- Item -->
+                <div class="col">
+                    <div class="animate-underline mb-sm-2">
+                        <a class="hover-effect-opacity ratio ratio-1x1 d-block mb-3" href="{{ route('second', ['shop', 'product-furniture']) }}">
+                            <img src="/img/shop/furniture/01.png" class="hover-effect-target opacity-100"
+                                alt="Product">
+                            <img src="/img/shop/furniture/01-hover.jpg"
+                                class="position-absolute top-0 start-0 hover-effect-target opacity-0 rounded-4"
+                                alt="Room">
+                        </a>
+                        <div class="d-flex gap-2 mb-3">
+                            <input type="radio" class="btn-check" name="colors-1" id="color-1-1" checked>
+                            <label for="color-1-1" class="btn btn-color fs-base" style="color: #32808e">
+                                <span class="visually-hidden">Emerald</span>
+                            </label>
+                            <input type="radio" class="btn-check" name="colors-1" id="color-1-2">
+                            <label for="color-1-2" class="btn btn-color fs-base" style="color: #767e93">
+                                <span class="visually-hidden">Bluish gray</span>
+                            </label>
+                            <input type="radio" class="btn-check" name="colors-1" id="color-1-3">
+                            <label for="color-1-3" class="btn btn-color fs-base" style="color: #cd8d01">
+                                <span class="visually-hidden">Mustard</span>
+                            </label>
+                        </div>
+                        <h3 class="mb-2">
+                            <a class="d-block fs-sm fw-medium text-truncate" href="{{ route('second', ['shop', 'product-furniture']) }}">
+                                <span class="animate-target">Soft chair with cushion and wooden legs</span>
+                            </a>
+                        </h3>
+                        <div class="h6">$245.00</div>
+                        <div class="d-flex gap-2">
+                            <button type="button" class="btn btn-dark w-100 rounded-pill px-3">Add to cart</button>
+                            <button type="button" class="btn btn-icon btn-secondary rounded-circle animate-pulse"
+                                aria-label="Add to wishlist">
+                                <i class="ci-heart fs-base animate-target"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Item -->
+                <div class="col">
+                    <div class="animate-underline mb-sm-2">
+                        <a class="hover-effect-opacity ratio ratio-1x1 d-block mb-3" href="{{ route('second', ['shop', 'product-furniture']) }}">
+                            <img src="/img/shop/furniture/02.png" class="hover-effect-target opacity-100"
+                                alt="Product">
+                            <img src="/img/shop/furniture/02-hover.jpg"
+                                class="position-absolute top-0 start-0 hover-effect-target opacity-0 rounded-4"
+                                alt="Room">
+                        </a>
+                        <div class="d-flex gap-2 mb-3">
+                            <input type="radio" class="btn-check" name="colors-2" id="color-2-1" checked>
+                            <label for="color-2-1" class="btn btn-color fs-base" style="color: #6a6f7b">
+                                <span class="visually-hidden">Gray</span>
+                            </label>
+                            <input type="radio" class="btn-check" name="colors-2" id="color-2-2">
+                            <label for="color-2-2" class="btn btn-color fs-base" style="color: #373b42">
+                                <span class="visually-hidden">Dark gray</span>
+                            </label>
+                            <input type="radio" class="btn-check" name="colors-2" id="color-2-3">
+                            <label for="color-2-3" class="btn btn-color fs-base" style="color: #216aae">
+                                <span class="visually-hidden">Blue</span>
+                            </label>
+                            <input type="radio" class="btn-check" name="colors-2" id="color-2-4">
+                            <label for="color-2-4" class="btn btn-color fs-base" style="color: #187c1c">
+                                <span class="visually-hidden">Green</span>
+                            </label>
+                        </div>
+                        <h3 class="mb-2">
+                            <a class="d-block fs-sm fw-medium text-truncate" href="{{ route('second', ['shop', 'product-furniture']) }}">
+                                <span class="animate-target">Decorative flowerpot with a plant</span>
+                            </a>
+                        </h3>
+                        <div class="h6">$107.50</div>
+                        <div class="d-flex gap-2">
+                            <button type="button" class="btn btn-dark w-100 rounded-pill px-3">Add to cart</button>
+                            <button type="button" class="btn btn-icon btn-secondary rounded-circle animate-pulse"
+                                aria-label="Add to wishlist">
+                                <i class="ci-heart fs-base animate-target"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Item -->
+                <div class="col">
+                    <div class="animate-underline mb-sm-2">
+                        <a class="hover-effect-opacity ratio ratio-1x1 d-block mb-3" href="{{ route('second', ['shop', 'product-furniture']) }}">
+                            <img src="/img/shop/furniture/03.png" class="hover-effect-target opacity-100"
+                                alt="Product">
+                            <img src="/img/shop/furniture/03-hover.jpg"
+                                class="position-absolute top-0 start-0 hover-effect-target opacity-0 rounded-4"
+                                alt="Room">
+                        </a>
+                        <div class="d-flex gap-2 mb-3">
+                            <input type="radio" class="btn-check" name="colors-3" id="color-3-1" checked>
+                            <label for="color-3-1" class="btn btn-color fs-base" style="color: #a36540">
+                                <span class="visually-hidden">Brown</span>
+                            </label>
+                            <input type="radio" class="btn-check" name="colors-3" id="color-3-2">
+                            <label for="color-3-2" class="btn btn-color fs-base" style="color: #f8d7b5">
+                                <span class="visually-hidden">Beige</span>
+                            </label>
+                            <input type="radio" class="btn-check" name="colors-3" id="color-3-3">
+                            <label for="color-3-3" class="btn btn-color fs-base" style="color: #e0e5eb">
+                                <span class="visually-hidden">White</span>
+                            </label>
+                        </div>
+                        <h3 class="mb-2">
+                            <a class="d-block fs-sm fw-medium text-truncate" href="{{ route('second', ['shop', 'product-furniture']) }}">
+                                <span class="animate-target">Home fragrance with the aroma of spices</span>
+                            </a>
+                        </h3>
+                        <div class="h6">$24.00</div>
+                        <div class="d-flex gap-2">
+                            <button type="button" class="btn btn-dark w-100 rounded-pill px-3">Add to cart</button>
+                            <button type="button" class="btn btn-icon btn-secondary rounded-circle animate-pulse"
+                                aria-label="Add to wishlist">
+                                <i class="ci-heart fs-base animate-target"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Item -->
+                <div class="col">
+                    <div class="animate-underline mb-sm-2">
+                        <a class="hover-effect-opacity ratio ratio-1x1 d-block mb-3" href="{{ route('second', ['shop', 'product-furniture']) }}">
+                            <img src="/img/shop/furniture/04.png" class="hover-effect-target opacity-100"
+                                alt="Product">
+                            <img src="/img/shop/furniture/04-hover.jpg"
+                                class="position-absolute top-0 start-0 hover-effect-target opacity-0 rounded-4"
+                                alt="Room">
+                        </a>
+                        <div class="d-flex gap-2 mb-3">
+                            <input type="radio" class="btn-check" name="colors-4" id="color-4-1" checked>
+                            <label for="color-4-1" class="btn btn-color fs-base" style="color: #384043">
+                                <span class="visually-hidden">Dark gray</span>
+                            </label>
+                            <input type="radio" class="btn-check" name="colors-4" id="color-4-2">
+                            <label for="color-4-2" class="btn btn-color fs-base" style="color: #bdc5da">
+                                <span class="visually-hidden">Light gray</span>
+                            </label>
+                            <input type="radio" class="btn-check" name="colors-4" id="color-4-3">
+                            <label for="color-4-3" class="btn btn-color fs-base" style="color: #526f99">
+                                <span class="visually-hidden">Bluish gray</span>
+                            </label>
+                        </div>
+                        <h3 class="mb-2">
+                            <a class="d-block fs-sm fw-medium text-truncate" href="{{ route('second', ['shop', 'product-furniture']) }}">
+                                <span class="animate-target">Bed frame light gray 140x200 cm</span>
+                            </a>
+                        </h3>
+                        <div class="h6">$760.00</div>
+                        <div class="d-flex gap-2">
+                            <button type="button" class="btn btn-dark w-100 rounded-pill px-3">Add to cart</button>
+                            <button type="button" class="btn btn-icon btn-secondary rounded-circle animate-pulse"
+                                aria-label="Add to wishlist">
+                                <i class="ci-heart fs-base animate-target"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Item -->
+                <div class="col">
+                    <div class="animate-underline mb-sm-2">
+                        <a class="hover-effect-opacity ratio ratio-1x1 d-block mb-3" href="{{ route('second', ['shop', 'product-furniture']) }}">
+                            <img src="/img/shop/furniture/05.png" class="hover-effect-target opacity-100"
+                                alt="Product">
+                            <img src="/img/shop/furniture/05-hover.jpg"
+                                class="position-absolute top-0 start-0 hover-effect-target opacity-0 rounded-4"
+                                alt="Room">
+                        </a>
+                        <div class="d-flex gap-2 mb-3">
+                            <input type="radio" class="btn-check" name="colors-5" id="color-5-1" checked>
+                            <label for="color-5-1" class="btn btn-color fs-base" style="color: #3a94b5">
+                                <span class="visually-hidden">Blue</span>
+                            </label>
+                            <input type="radio" class="btn-check" name="colors-5" id="color-5-2">
+                            <label for="color-5-2" class="btn btn-color fs-base" style="color: #777d7E">
+                                <span class="visually-hidden">Gray</span>
+                            </label>
+                        </div>
+                        <h3 class="mb-2">
+                            <a class="d-block fs-sm fw-medium text-truncate" href="{{ route('second', ['shop', 'product-furniture']) }}">
+                                <span class="animate-target">Blue armchair with iron legs</span>
+                            </a>
+                        </h3>
+                        <div class="h6">$220.00</div>
+                        <div class="d-flex gap-2">
+                            <button type="button" class="btn btn-dark w-100 rounded-pill px-3">Add to cart</button>
+                            <button type="button" class="btn btn-icon btn-secondary rounded-circle animate-pulse"
+                                aria-label="Add to wishlist">
+                                <i class="ci-heart fs-base animate-target"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Item (sale) -->
+                <div class="col">
+                    <div class="animate-underline mb-sm-2">
+                        <a class="hover-effect-opacity ratio ratio-1x1 d-block mb-3" href="{{ route('second', ['shop', 'product-furniture']) }}">
+                            <div class="position-absolute top-0 start-0 z-2 mt-2 mt-sm-3 ms-2 ms-sm-3">
+                                <span class="badge text-bg-danger">-13%</span>
+                            </div>
+                            <img src="/img/shop/furniture/06.png" class="hover-effect-target opacity-100"
+                                alt="Product">
+                            <img src="/img/shop/furniture/06-hover.jpg"
+                                class="position-absolute top-0 start-0 hover-effect-target opacity-0 rounded-4"
+                                alt="Room">
+                        </a>
+                        <div class="d-flex gap-2 mb-3">
+                            <input type="radio" class="btn-check" name="colors-6" id="color-6-1" checked>
+                            <label for="color-6-1" class="btn btn-color fs-base" style="color: #bdaB9e">
+                                <span class="visually-hidden">Beige</span>
+                            </label>
+                            <input type="radio" class="btn-check" name="colors-6" id="color-6-2">
+                            <label for="color-6-2" class="btn btn-color fs-base" style="color: #d65c46">
+                                <span class="visually-hidden">Terracotta</span>
+                            </label>
+                            <input type="radio" class="btn-check" name="colors-6" id="color-6-3">
+                            <label for="color-6-3" class="btn btn-color fs-base" style="color: #e0e5eb">
+                                <span class="visually-hidden">White</span>
+                            </label>
+                        </div>
+                        <h3 class="mb-2">
+                            <a class="d-block fs-sm fw-medium text-truncate" href="{{ route('second', ['shop', 'product-furniture']) }}">
+                                <span class="animate-target">Loft-style lamp 120x80 cm</span>
+                            </a>
+                        </h3>
+                        <div class="h6">$140.00 <del class="fs-sm fw-normal text-body-tertiary">$160.00</del></div>
+                        <div class="d-flex gap-2">
+                            <button type="button" class="btn btn-dark w-100 rounded-pill px-3">Add to cart</button>
+                            <button type="button" class="btn btn-icon btn-secondary rounded-circle animate-pulse"
+                                aria-label="Add to wishlist">
+                                <i class="ci-heart fs-base animate-target"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Item -->
+                <div class="col">
+                    <div class="animate-underline mb-sm-2">
+                        <a class="hover-effect-opacity ratio ratio-1x1 d-block mb-3" href="{{ route('second', ['shop', 'product-furniture']) }}">
+                            <img src="/img/shop/furniture/07.png" class="hover-effect-target opacity-100"
+                                alt="Product">
+                            <img src="/img/shop/furniture/07-hover.jpg"
+                                class="position-absolute top-0 start-0 hover-effect-target opacity-0 rounded-4"
+                                alt="Room">
+                        </a>
+                        <div class="d-flex gap-2 mb-3">
+                            <input type="radio" class="btn-check" name="colors-7" id="color-7-1" checked>
+                            <label for="color-7-1" class="btn btn-color fs-base" style="color: #71706c">
+                                <span class="visually-hidden">Dark gray</span>
+                            </label>
+                            <input type="radio" class="btn-check" name="colors-7" id="color-7-2">
+                            <label for="color-7-2" class="btn btn-color fs-base" style="color: #c1c3b8">
+                                <span class="visually-hidden">Light gray</span>
+                            </label>
+                        </div>
+                        <h3 class="mb-2">
+                            <a class="d-block fs-sm fw-medium text-truncate" href="{{ route('second', ['shop', 'product-furniture']) }}">
+                                <span class="animate-target">Chair with a cushion for the legs</span>
+                            </a>
+                        </h3>
+                        <div class="h6">$435.00</div>
+                        <div class="d-flex gap-2">
+                            <button type="button" class="btn btn-dark w-100 rounded-pill px-3">Add to cart</button>
+                            <button type="button" class="btn btn-icon btn-secondary rounded-circle animate-pulse"
+                                aria-label="Add to wishlist">
+                                <i class="ci-heart fs-base animate-target"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Item -->
+                <div class="col">
+                    <div class="animate-underline mb-sm-2">
+                        <a class="hover-effect-opacity ratio ratio-1x1 d-block mb-3" href="{{ route('second', ['shop', 'product-furniture']) }}">
+                            <img src="/img/shop/furniture/08.png" class="hover-effect-target opacity-100"
+                                alt="Product">
+                            <img src="/img/shop/furniture/08-hover.jpg"
+                                class="position-absolute top-0 start-0 hover-effect-target opacity-0 rounded-4"
+                                alt="Room">
+                        </a>
+                        <div class="d-flex gap-2 mb-3">
+                            <input type="radio" class="btn-check" name="colors-8" id="color-8-1" checked>
+                            <label for="color-8-1" class="btn btn-color fs-base" style="color: #305853">
+                                <span class="visually-hidden">Green</span>
+                            </label>
+                            <input type="radio" class="btn-check" name="colors-8" id="color-8-2">
+                            <label for="color-8-2" class="btn btn-color fs-base" style="color: #34598f">
+                                <span class="visually-hidden">Blue</span>
+                            </label>
+                        </div>
+                        <h3 class="mb-2">
+                            <a class="d-block fs-sm fw-medium text-truncate" href="{{ route('second', ['shop', 'product-furniture']) }}">
+                                <span class="animate-target">Armchair with wooden legs 60x100 cm</span>
+                            </a>
+                        </h3>
+                        <div class="h6">$320.50</div>
+                        <div class="d-flex gap-2">
+                            <button type="button" class="btn btn-dark w-100 rounded-pill px-3">Add to cart</button>
+                            <button type="button" class="btn btn-icon btn-secondary rounded-circle animate-pulse"
+                                aria-label="Add to wishlist">
+                                <i class="ci-heart fs-base animate-target"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Item (new) -->
+                <div class="col">
+                    <div class="animate-underline mb-sm-2">
+                        <a class="hover-effect-opacity ratio ratio-1x1 d-block mb-3" href="{{ route('second', ['shop', 'product-furniture']) }}">
+                            <div class="position-absolute top-0 start-0 z-2 mt-2 mt-sm-3 ms-2 ms-sm-3">
+                                <span class="badge text-bg-info">New</span>
+                            </div>
+                            <img src="/img/shop/furniture/09.png" class="hover-effect-target opacity-100"
+                                alt="Product">
+                            <img src="/img/shop/furniture/09-hover.jpg"
+                                class="position-absolute top-0 start-0 hover-effect-target opacity-0 rounded-4"
+                                alt="Room">
+                        </a>
+                        <div class="d-flex gap-2 mb-3">
+                            <input type="radio" class="btn-check" name="colors-9" id="color-9-1" checked>
+                            <label for="color-9-1" class="btn btn-color fs-base" style="color: #d8a87c">
+                                <span class="visually-hidden">Brown</span>
+                            </label>
+                            <input type="radio" class="btn-check" name="colors-9" id="color-9-2">
+                            <label for="color-9-2" class="btn btn-color fs-base" style="color: #373b42">
+                                <span class="visually-hidden">Dark gray</span>
+                            </label>
+                        </div>
+                        <h3 class="mb-2">
+                            <a class="d-block fs-sm fw-medium text-truncate" href="{{ route('second', ['shop', 'product-furniture']) }}">
+                                <span class="animate-target">Leather office chair with one leg</span>
+                            </a>
+                        </h3>
+                        <div class="h6">$345.50</div>
+                        <div class="d-flex gap-2">
+                            <button type="button" class="btn btn-dark w-100 rounded-pill px-3">Add to cart</button>
+                            <button type="button" class="btn btn-icon btn-secondary rounded-circle animate-pulse"
+                                aria-label="Add to wishlist">
+                                <i class="ci-heart fs-base animate-target"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Item -->
+                <div class="col">
+                    <div class="animate-underline mb-sm-2">
+                        <a class="hover-effect-opacity ratio ratio-1x1 d-block mb-3" href="{{ route('second', ['shop', 'product-furniture']) }}">
+                            <img src="/img/shop/furniture/10.png" class="hover-effect-target opacity-100"
+                                alt="Product">
+                            <img src="/img/shop/furniture/10-hover.jpg"
+                                class="position-absolute top-0 start-0 hover-effect-target opacity-0 rounded-4"
+                                alt="Room">
+                        </a>
+                        <div class="d-flex gap-2 mb-3">
+                            <input type="radio" class="btn-check" name="colors-10" id="color-10-1" checked>
+                            <label for="color-10-1" class="btn btn-color fs-base" style="color: #677382">
+                                <span class="visually-hidden">Navy blue</span>
+                            </label>
+                            <input type="radio" class="btn-check" name="colors-10" id="color-10-2">
+                            <label for="color-10-2" class="btn btn-color fs-base" style="color: #919384">
+                                <span class="visually-hidden">Gray</span>
+                            </label>
+                            <input type="radio" class="btn-check" name="colors-10" id="color-10-3">
+                            <label for="color-10-3" class="btn btn-color fs-base" style="color: #b2b8c0">
+                                <span class="visually-hidden">Light gray</span>
+                            </label>
+                        </div>
+                        <h3 class="mb-2">
+                            <a class="d-block fs-sm fw-medium text-truncate" href="{{ route('second', ['shop', 'product-furniture']) }}">
+                                <span class="animate-target">Navy blue low sofa for relaxation</span>
+                            </a>
+                        </h3>
+                        <div class="h6">$1,250.00</div>
+                        <div class="d-flex gap-2">
+                            <button type="button" class="btn btn-dark w-100 rounded-pill px-3">Add to cart</button>
+                            <button type="button" class="btn btn-icon btn-secondary rounded-circle animate-pulse"
+                                aria-label="Add to wishlist">
+                                <i class="ci-heart fs-base animate-target"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Item -->
+                <div class="col">
+                    <div class="animate-underline mb-sm-2">
+                        <a class="hover-effect-opacity ratio ratio-1x1 d-block mb-3" href="{{ route('second', ['shop', 'product-furniture']) }}">
+                            <img src="/img/shop/furniture/11.png" class="hover-effect-target opacity-100"
+                                alt="Product">
+                            <img src="/img/shop/furniture/11-hover.jpg"
+                                class="position-absolute top-0 start-0 hover-effect-target opacity-0 rounded-4"
+                                alt="Room">
+                        </a>
+                        <div class="d-flex gap-2 mb-3">
+                            <input type="radio" class="btn-check" name="colors-11" id="color-11-1" checked>
+                            <label for="color-11-1" class="btn btn-color fs-base" style="color: #677382">
+                                <span class="visually-hidden">Green</span>
+                            </label>
+                            <input type="radio" class="btn-check" name="colors-11" id="color-11-2">
+                            <label for="color-11-2" class="btn btn-color fs-base" style="color: #548294">
+                                <span class="visually-hidden">Blue</span>
+                            </label>
+                        </div>
+                        <h3 class="mb-2">
+                            <a class="d-block fs-sm fw-medium text-truncate" href="{{ route('second', ['shop', 'product-furniture']) }}">
+                                <span class="animate-target">Armchair with wooden legs 70x120 cm</span>
+                            </a>
+                        </h3>
+                        <div class="h6">$269.99</div>
+                        <div class="d-flex gap-2">
+                            <button type="button" class="btn btn-dark w-100 rounded-pill px-3">Add to cart</button>
+                            <button type="button" class="btn btn-icon btn-secondary rounded-circle animate-pulse"
+                                aria-label="Add to wishlist">
+                                <i class="ci-heart fs-base animate-target"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Item (out of stock) -->
+                <div class="col">
+                    <div class="animate-underline mb-sm-2">
+                        <a class="hover-effect-opacity ratio ratio-1x1 d-block mb-3 opacity-50 pe-none"
+                            href="{{ route('second', ['shop', 'product-furniture']) }}">
+                            <img src="/img/shop/furniture/12.png" class="hover-effect-target opacity-100"
+                                alt="Product">
+                            <img src="/img/shop/furniture/12-hover.jpg"
+                                class="position-absolute top-0 start-0 hover-effect-target opacity-0 rounded-4"
+                                alt="Room">
+                        </a>
+                        <div class="d-flex gap-2 mb-3">
+                            <input type="radio" class="btn-check" name="colors-12" id="color-12-1" checked>
+                            <label for="color-12-1" class="btn btn-color fs-base" style="color: #af8d6a">
+                                <span class="visually-hidden">Wooden</span>
+                            </label>
+                        </div>
+                        <h3 class="mb-2">
+                            <a class="d-block fs-sm fw-medium text-truncate" href="{{ route('second', ['shop', 'product-furniture']) }}">
+                                <span class="animate-target">Wooden shelf for decor elements</span>
+                            </a>
+                        </h3>
+                        <div class="h6">$278.00</div>
+                        <div class="d-flex gap-2">
+                            <button type="button" class="btn btn-secondary min-w-0 w-100 rounded-pill px-3">
+                                <span class="text-truncate">Notify of availability</span>
+                            </button>
+                            <button type="button" class="btn btn-icon btn-secondary rounded-circle animate-pulse"
+                                aria-label="Add to wishlist">
+                                <i class="ci-heart fs-base animate-target"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Item -->
+                <div class="col">
+                    <div class="animate-underline mb-sm-2">
+                        <a class="hover-effect-opacity ratio ratio-1x1 d-block mb-3" href="{{ route('second', ['shop', 'product-furniture']) }}">
+                            <img src="/img/shop/furniture/13.png" class="hover-effect-target opacity-100"
+                                alt="Product">
+                            <img src="/img/shop/furniture/13-hover.jpg"
+                                class="position-absolute top-0 start-0 hover-effect-target opacity-0 rounded-4"
+                                alt="Room">
+                        </a>
+                        <div class="d-flex gap-2 mb-3">
+                            <input type="radio" class="btn-check" name="colors-13" id="color-13-1" checked>
+                            <label for="color-13-1" class="btn btn-color fs-base" style="color: #5b92b0">
+                                <span class="visually-hidden">Blue</span>
+                            </label>
+                            <input type="radio" class="btn-check" name="colors-13" id="color-13-2">
+                            <label for="color-13-2" class="btn btn-color fs-base" style="color: #e0e5eb">
+                                <span class="visually-hidden">White</span>
+                            </label>
+                            <input type="radio" class="btn-check" name="colors-13" id="color-13-3">
+                            <label for="color-13-3" class="btn btn-color fs-base" style="color: #373b42">
+                                <span class="visually-hidden">Black</span>
+                            </label>
+                        </div>
+                        <h3 class="mb-2">
+                            <a class="d-block fs-sm fw-medium text-truncate" href="{{ route('second', ['shop', 'product-furniture']) }}">
+                                <span class="animate-target">Aluminium foldable desk lamp</span>
+                            </a>
+                        </h3>
+                        <div class="h6">$89.99</div>
+                        <div class="d-flex gap-2">
+                            <button type="button" class="btn btn-dark w-100 rounded-pill px-3">Add to cart</button>
+                            <button type="button" class="btn btn-icon btn-secondary rounded-circle animate-pulse"
+                                aria-label="Add to wishlist">
+                                <i class="ci-heart fs-base animate-target"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Item -->
+                <div class="col">
+                    <div class="animate-underline mb-sm-2">
+                        <a class="hover-effect-opacity ratio ratio-1x1 d-block mb-3" href="{{ route('second', ['shop', 'product-furniture']) }}">
+                            <img src="/img/shop/furniture/14.png" class="hover-effect-target opacity-100"
+                                alt="Product">
+                            <img src="/img/shop/furniture/14-hover.jpg"
+                                class="position-absolute top-0 start-0 hover-effect-target opacity-0 rounded-4"
+                                alt="Room">
+                        </a>
+                        <div class="d-flex gap-2 mb-3">
+                            <input type="radio" class="btn-check" name="colors-14" id="color-14-1" checked>
+                            <label for="color-14-1" class="btn btn-color fs-base" style="color: #6a6662">
+                                <span class="visually-hidden">Dark gray</span>
+                            </label>
+                            <input type="radio" class="btn-check" name="colors-14" id="color-14-2">
+                            <label for="color-14-2" class="btn btn-color fs-base" style="color: #b2b8c0">
+                                <span class="visually-hidden">Light gray</span>
+                            </label>
+                        </div>
+                        <h3 class="mb-2">
+                            <a class="d-block fs-sm fw-medium text-truncate" href="{{ route('second', ['shop', 'product-furniture']) }}">
+                                <span class="animate-target">Modern lounge couch on wooden frame</span>
+                            </a>
+                        </h3>
+                        <div class="h6">$638.00</div>
+                        <div class="d-flex gap-2">
+                            <button type="button" class="btn btn-dark w-100 rounded-pill px-3">Add to cart</button>
+                            <button type="button" class="btn btn-icon btn-secondary rounded-circle animate-pulse"
+                                aria-label="Add to wishlist">
+                                <i class="ci-heart fs-base animate-target"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Item -->
+                <div class="col">
+                    <div class="animate-underline mb-sm-2">
+                        <a class="hover-effect-opacity ratio ratio-1x1 d-block mb-3" href="{{ route('second', ['shop', 'product-furniture']) }}">
+                            <img src="/img/shop/furniture/15.png" class="hover-effect-target opacity-100"
+                                alt="Product">
+                            <img src="/img/shop/furniture/15-hover.jpg"
+                                class="position-absolute top-0 start-0 hover-effect-target opacity-0 rounded-4"
+                                alt="Room">
+                        </a>
+                        <div class="d-flex gap-2 mb-3">
+                            <input type="radio" class="btn-check" name="colors-15" id="color-15-1" checked>
+                            <label for="color-15-1" class="btn btn-color fs-base" style="color: #e0e5eb">
+                                <span class="visually-hidden">White</span>
+                            </label>
+                        </div>
+                        <h3 class="mb-2">
+                            <a class="d-block fs-sm fw-medium text-truncate" href="{{ route('second', ['shop', 'product-furniture']) }}">
+                                <span class="animate-target">Adjustable hardwire wall sconce</span>
+                            </a>
+                        </h3>
+                        <div class="h6">$74.00</div>
+                        <div class="d-flex gap-2">
+                            <button type="button" class="btn btn-dark w-100 rounded-pill px-3">Add to cart</button>
+                            <button type="button" class="btn btn-icon btn-secondary rounded-circle animate-pulse"
+                                aria-label="Add to wishlist">
+                                <i class="ci-heart fs-base animate-target"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Item -->
+                <div class="col">
+                    <div class="animate-underline mb-sm-2">
+                        <a class="hover-effect-opacity ratio ratio-1x1 d-block mb-3" href="{{ route('second', ['shop', 'product-furniture']) }}">
+                            <img src="/img/shop/furniture/16.png" class="hover-effect-target opacity-100"
+                                alt="Product">
+                            <img src="/img/shop/furniture/16-hover.jpg"
+                                class="position-absolute top-0 start-0 hover-effect-target opacity-0 rounded-4"
+                                alt="Room">
+                        </a>
+                        <div class="d-flex gap-2 mb-3">
+                            <input type="radio" class="btn-check" name="colors-16" id="color-16-1" checked>
+                            <label for="color-16-1" class="btn btn-color fs-base" style="color: #b2b8c0">
+                                <span class="visually-hidden">Light gray</span>
+                            </label>
+                            <input type="radio" class="btn-check" name="colors-16" id="color-16-2">
+                            <label for="color-16-2" class="btn btn-color fs-base" style="color: #6a6662">
+                                <span class="visually-hidden">Dark gray</span>
+                            </label>
+                        </div>
+                        <h3 class="mb-2">
+                            <a class="d-block fs-sm fw-medium text-truncate" href="{{ route('second', ['shop', 'product-furniture']) }}">
+                                <span class="animate-target">Soft armchair with wooden legs</span>
+                            </a>
+                        </h3>
+                        <div class="h6">$215.00</div>
+                        <div class="d-flex gap-2">
+                            <button type="button" class="btn btn-dark w-100 rounded-pill px-3">Add to cart</button>
+                            <button type="button" class="btn btn-icon btn-secondary rounded-circle animate-pulse"
+                                aria-label="Add to wishlist">
+                                <i class="ci-heart fs-base animate-target"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+
+            <!-- Pagination -->
+            <div class="text-center pt-5 mt-md-2 mt-lg-3 mt-xl-4 mb-xxl-3 mx-auto" style="max-width: 306px">
+                <p class="fs-sm">Showing 16 from 64</p>
+                <div class="progress mb-3" role="progressbar" aria-label="Items shown" aria-valuenow="25"
+                    aria-valuemin="0" aria-valuemax="100" style="height: 4px">
+                    <div class="progress-bar bg-dark rounded-pill d-none-dark" style="width: 25%"></div>
+                    <div class="progress-bar bg-light rounded-pill d-none d-block-dark" style="width: 25%"></div>
+                </div>
+                <div class="nav justify-content-center">
+                    <a class="nav-link animate-underline fs-base pt-2 pb-0 px-0" href="#!">
+                        <span class="animate-target my-1 me-2">Show more</span>
+                        <i class="ci-chevron-down fs-lg"></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <footer class="footer bg-dark pb-4 py-lg-5" data-bs-theme="dark">
+      <div class="container pt-5 pt-lg-4 mt-sm-2 mt-md-3">
+        <div class="row pb-5">
+
+          <!-- Subscription + Social account links -->
+          <div class="col-md col-xl-8 order-md-2">
+            <div class="text-center px-sm-4 mx-auto" style="max-width: 568px">
+              <h3 class="pb-1 mb-2">Stay in touch with us</h3>
+              <p class="fs-sm text-body pb-2 pb-sm-3">Receive the latest updates about our products &amp; promotions</p>
+              <form class="needs-validation position-relative" novalidate>
+                <input type="email" class="form-control form-control-lg rounded-pill text-start" placeholder="You email" aria-label="Your email address" required>
+                <div class="invalid-tooltip bg-transparent p-0">Please enter you email address!</div>
+                <button type="submit" class="btn btn-icon fs-xl btn-dark rounded-circle position-absolute top-0 end-0 mt-1 me-1" aria-label="Submit your email address" data-bs-theme="light">
+                  <i class="ci-arrow-up-right"></i>
+                </button>
+              </form>
+              <div class="d-flex justify-content-center gap-2 pt-4 pt-md-5 mt-1 mt-md-0">
+                <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!" data-bs-toggle="tooltip" data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-white p-0"></div></div>' title="YouTube" aria-label="Follow us on YouTube">
+                  <i class="ci-youtube"></i>
+                </a>
+                <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!" data-bs-toggle="tooltip" data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-white p-0"></div></div>' title="Facebook" aria-label="Follow us on Facebook">
+                  <i class="ci-facebook"></i>
+                </a>
+                <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!" data-bs-toggle="tooltip" data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-white p-0"></div></div>' title="Instagram" aria-label="Follow us on Instagram">
+                  <i class="ci-instagram"></i>
+                </a>
+                <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!" data-bs-toggle="tooltip" data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-white p-0"></div></div>' title="Telegram" aria-label="Follow us on Telegram">
+                  <i class="ci-telegram"></i>
+                </a>
+                <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!" data-bs-toggle="tooltip" data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-white p-0"></div></div>' title="Pinterest" aria-label="Follow us on Pinterest">
+                  <i class="ci-pinterest"></i>
+                </a>
+              </div>
+            </div>
+          </div>
+
+          <!-- Category links -->
+          <div class="col-md-auto col-xl-2 text-center order-md-1 pt-4 pt-md-0">
+            <ul class="nav d-inline-flex flex-md-column justify-content-center align-items-center gap-md-2">
+              <li class="animate-underline my-1 mx-2 m-md-0">
+                <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Bedroom</a>
+              </li>
+              <li class="animate-underline my-1 mx-2 m-md-0">
+                <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Living room</a>
+              </li>
+              <li class="animate-underline my-1 mx-2 m-md-0">
+                <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Bathroom</a>
+              </li>
+              <li class="animate-underline my-1 mx-2 m-md-0">
+                <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Decoration</a>
+              </li>
+              <li class="animate-underline my-1 mx-2 m-md-0">
+                <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Kitchen</a>
+              </li>
+              <li class="animate-underline my-1 mx-2 m-md-0">
+                <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Sale</a>
+              </li>
+            </ul>
+          </div>
+
+          <!-- Customer links -->
+          <div class="col-md-auto col-xl-2 text-center order-md-3 pt-3 pt-md-0">
+            <ul class="nav d-inline-flex flex-md-column justify-content-center align-items-center gap-md-2">
+              <li class="animate-underline my-1 mx-2 m-md-0">
+                <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Shipping options</a>
+              </li>
+              <li class="animate-underline my-1 mx-2 m-md-0">
+                <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Tracking a package</a>
+              </li>
+              <li class="animate-underline my-1 mx-2 m-md-0">
+                <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Help center</a>
+              </li>
+              <li class="animate-underline my-1 mx-2 m-md-0">
+                <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Contact us</a>
+              </li>
+              <li class="animate-underline my-1 mx-2 m-md-0">
+                <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Product returns</a>
+              </li>
+              <li class="animate-underline my-1 mx-2 m-md-0">
+                <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Locations</a>
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        <!-- Copyright -->
+        <p class="fs-xs text-body text-center pt-lg-4 mt-n2 mt-md-0 mb-0">
+          &copy; All rights reserved. Made by <span class="animate-underline"><a class="animate-target text-white text-decoration-none" href="https://coderthemes.com/" target="_blank" rel="noreferrer">Coderthemes</a></span>
+        </p>
+      </div>
+    </footer>
+
+@endsection
+
+@section('scripts')
+@endsection
diff --git a/resources/views/shop/catalog-grocery.blade.php b/resources/views/shop/catalog-grocery.blade.php
new file mode 100644
index 0000000..73e82d7
--- /dev/null
+++ b/resources/views/shop/catalog-grocery.blade.php
@@ -0,0 +1,2261 @@
+@extends('layouts.landing', ['title' => 'Grocery Store - Catalog'])
+
+@section('content')
+    @include('layouts.partials/offcanvas2')
+
+    <div class="offcanvas offcanvas-end pb-sm-2 px-sm-2" id="deliveryOptions" tabindex="-1"
+        aria-labelledby="deliveryOptionsLabel" style="width: 500px">
+
+        <!-- Header with nav tabs -->
+        <div class="offcanvas-header flex-column align-items-start py-3 pt-lg-4">
+            <div class="d-flex align-items-center justify-content-between w-100 pb-xl-1 mb-4">
+                <h4 class="offcanvas-title" id="deliveryOptionsLabel">Delivery options</h4>
+                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+            </div>
+            <ul class="nav nav-pills nav-justified w-100" role="tablist">
+                <li class="nav-item" role="presentation">
+                    <button type="button" class="nav-link active" id="delivery-tab" data-bs-toggle="tab"
+                        data-bs-target="#delivery-tab-pane" role="tab" aria-controls="delivery-tab-pane"
+                        aria-selected="true">
+                        <i class="ci-shopping-bag fs-base ms-n1 me-2"></i>
+                        Delivery
+                    </button>
+                </li>
+                <li class="nav-item" role="presentation">
+                    <button type="button" class="nav-link" id="pickup-tab" data-bs-toggle="tab"
+                        data-bs-target="#pickup-tab-pane" role="tab" aria-controls="pickup-tab-pane"
+                        aria-selected="false">
+                        <i class="ci-box fs-base ms-n1 me-2"></i>
+                        Pickup
+                    </button>
+                </li>
+            </ul>
+        </div>
+
+        <div class="offcanvas-body tab-content py-2 py-sm-3">
+
+            <!-- Delivery tab -->
+            <div class="tab-pane fade show active" id="delivery-tab-pane" role="tabpanel"
+                aria-labelledby="delivery-tab">
+
+                <!-- Address options collapse -->
+                <div class="collapse delivery-address show" id="deliveryAddressOptions">
+                    <div class="mt-n3">
+                        <div class="form-check border-bottom py-4 m-0">
+                            <input type="radio" class="form-check-input" id="address-1" name="delivery-address"
+                                checked>
+                            <label for="address-1" class="form-check-label text-dark-emphasis fw-semibold">567 Cherry Lane
+                                Apt B12 Sacramento, 95829</label>
+                        </div>
+                        <div class="form-check border-bottom py-4 m-0">
+                            <input type="radio" class="form-check-input" id="address-2" name="delivery-address">
+                            <div class="d-flex w-100">
+                                <label for="address-2" class="form-check-label text-dark-emphasis me-3">1901 Thornridge
+                                    Cir. Shiloh, Hawaii, 81063</label>
+                                <button type="button" class="btn-close fs-sm ms-auto" data-bs-toggle="tooltip"
+                                    data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
+                                    aria-label="Remove"></button>
+                            </div>
+                        </div>
+                        <div class="form-check border-bottom py-4 m-0">
+                            <input type="radio" class="form-check-input" id="address-3" name="delivery-address">
+                            <div class="d-flex w-100">
+                                <label for="address-3" class="form-check-label text-dark-emphasis me-3">3517 W. Gray St.
+                                    Utica, Pennsylvania, 57867</label>
+                                <button type="button" class="btn-close fs-sm ms-auto" data-bs-toggle="tooltip"
+                                    data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
+                                    aria-label="Remove"></button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Add new address collapse -->
+                <div class="collapse delivery-address" id="deliveryAddressAdd">
+                    <div class="nav mb-4">
+                        <a class="nav-link animate-underline p-0" href=".delivery-address" data-bs-toggle="collapse"
+                            aria-expanded="true" aria-controls="deliveryAddressOptions deliveryAddressAdd">
+                            <i class="ci-chevron-left fs-lg ms-n1 me-1"></i>
+                            <span class="animate-target">Back to my addresses</span>
+                        </a>
+                    </div>
+                    <div class="d-flex align-items-center justify-content-between mb-3 mb-lg-4">
+                        <h5 class="h6 mb-0 me-3">Add an address to start ordering</h5>
+                        <a class="btn btn-sm btn-outline-primary rounded-pill" href="#!">
+                            <i class="ci-map-pin fs-base ms-n1 me-1"></i>
+                            Find on map
+                        </a>
+                    </div>
+                    <div class="mb-3 mb-lg-4">
+                        <label class="form-label">State *</label>
+                        <select class="form-select form-select-lg rounded-pill"
+                            data-select='{
+                "classNames": {
+                  "containerInner": ["form-select", "form-select-lg", "rounded-pill"]
+                }
+              }'
+                            aria-label="Large pill select">
+                            <option value="">Select state</option>
+                            <option value="Arizona">Arizona</option>
+                            <option value="California">California</option>
+                            <option value="Montana">Montana</option>
+                            <option value="Nevada">Nevada</option>
+                            <option value="New Mexico">New Mexico</option>
+                            <option value="Texas">Texas</option>
+                        </select>
+                    </div>
+                    <div class="mb-3 mb-lg-4">
+                        <label for="my-postcode" class="form-label">Postcode *</label>
+                        <input type="text" class="form-control form-control-lg rounded-pill" id="my-postcode">
+                    </div>
+                    <div class="mb-3 mb-lg-4">
+                        <label class="form-label">City *</label>
+                        <select class="form-select form-select-lg rounded-pill"
+                            data-select='{
+                "classNames": {
+                  "containerInner": ["form-select", "form-select-lg", "rounded-pill"]
+                }
+              }'
+                            aria-label="Large pill select">
+                            <option value="">Select city</option>
+                            <option value="Austin">Austin</option>
+                            <option value="Helena">Helena</option>
+                            <option value="Sacramento">Sacramento</option>
+                            <option value="Santa Fe">Santa Fe</option>
+                            <option value="Las Vegas">Las Vegas</option>
+                            <option value="Phoenix">Phoenix</option>
+                        </select>
+                    </div>
+                    <label for="my-address" class="form-label">Street address *</label>
+                    <input type="text" class="form-control form-control-lg rounded-pill" id="my-address">
+                </div>
+
+                <!-- Add address collapse toggle -->
+                <div class="nav">
+                    <a class="nav-link hiding-collapse-toggle animate-underline collapsed px-0 mt-4"
+                        href=".delivery-address" data-bs-toggle="collapse" aria-expanded="false"
+                        aria-controls="deliveryAddressOptions deliveryAddressAdd">
+                        <span class="animate-target">Add delivery address</span>
+                        <i class="ci-plus fs-base ms-1"></i>
+                    </a>
+                </div>
+            </div>
+
+            <!-- Pickup tab -->
+            <div class="tab-pane fade" id="pickup-tab-pane" role="tabpanel" aria-labelledby="pickup-tab">
+
+                <!-- Pickup store options collapse -->
+                <div class="collapse pickup-options show" id="pickupStoreOptions">
+                    <div class="mt-n3">
+                        <div class="form-check border-bottom py-4 m-0">
+                            <input type="radio" class="form-check-input" id="store-1" name="pickup-store" checked>
+                            <div>
+                                <div class="d-flex w-100 pb-2 mb-1">
+                                    <label for="store-1"
+                                        class="form-check-label text-dark-emphasis fw-semibold me-3">Sacramento
+                                        Supercenter</label>
+                                    <button type="button" class="btn-close fs-sm ms-auto" data-bs-toggle="tooltip"
+                                        data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
+                                        aria-label="Remove"></button>
+                                </div>
+                                <div class="fs-xs mb-2">8270 Delta Shores Cir S, Sacramento, CA 95832</div>
+                                <div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">07:00 - 22:00</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="form-check border-bottom py-4 m-0">
+                            <input type="radio" class="form-check-input" id="store-2" name="pickup-store">
+                            <div>
+                                <div class="d-flex w-100 pb-2 mb-1">
+                                    <label for="store-2"
+                                        class="form-check-label text-dark-emphasis fw-semibold me-3">West Sacramento
+                                        Supercenter</label>
+                                    <button type="button" class="btn-close fs-sm ms-auto" data-bs-toggle="tooltip"
+                                        data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
+                                        aria-label="Remove"></button>
+                                </div>
+                                <div class="fs-xs mb-2">755 Riverpoint Ct, West Sacramento, CA 95605</div>
+                                <div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">07:00 - 21:00</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="form-check border-bottom py-4 m-0">
+                            <input type="radio" class="form-check-input" id="store-3" name="pickup-store">
+                            <div>
+                                <div class="d-flex w-100 pb-2 mb-1">
+                                    <label for="store-3"
+                                        class="form-check-label text-dark-emphasis fw-semibold me-3">Rancho Cordova
+                                        Supercenter</label>
+                                    <button type="button" class="btn-close fs-sm ms-auto" data-bs-toggle="tooltip"
+                                        data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
+                                        aria-label="Remove"></button>
+                                </div>
+                                <div class="fs-xs mb-2">10655 Folsom Blvd, Rancho Cordova, CA 95670</div>
+                                <div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">08:00 - 23:00</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Add new pickup store collapse -->
+                <div class="collapse pickup-options" id="pickupStoreAdd">
+                    <div class="nav mb-4">
+                        <a class="nav-link animate-underline p-0" href=".pickup-options" data-bs-toggle="collapse"
+                            aria-expanded="true" aria-controls="pickupStoreOptions pickupStoreAdd">
+                            <i class="ci-chevron-left fs-lg ms-n1 me-1"></i>
+                            <span class="animate-target">Back to my stores</span>
+                        </a>
+                    </div>
+                    <div class="d-flex align-items-center justify-content-between mb-3 mb-lg-4">
+                        <h5 class="h6 mb-0 me-3">Select a suitable store</h5>
+                        <a class="btn btn-sm btn-outline-primary rounded-pill" href="#!">
+                            <i class="ci-map-pin fs-base ms-n1 me-1"></i>
+                            Find on map
+                        </a>
+                    </div>
+                    <div class="mb-3 mb-lg-4">
+                        <label class="form-label">State *</label>
+                        <select class="form-select form-select-lg rounded-pill"
+                            data-select='{
+                "classNames": {
+                  "containerInner": ["form-select", "form-select-lg", "rounded-pill"]
+                }
+              }'
+                            aria-label="Large pill select">
+                            <option value="">Select state</option>
+                            <option value="Arizona">Arizona</option>
+                            <option value="California" selected>California</option>
+                            <option value="Montana">Montana</option>
+                            <option value="Nevada">Nevada</option>
+                            <option value="New Mexico">New Mexico</option>
+                            <option value="Texas">Texas</option>
+                        </select>
+                    </div>
+                    <div class="mb-4">
+                        <label class="form-label">City *</label>
+                        <select class="form-select form-select-lg rounded-pill"
+                            data-select='{
+                "classNames": {
+                  "containerInner": ["form-select", "form-select-lg", "rounded-pill"]
+                }
+              }'
+                            aria-label="Large pill select">
+                            <option value="">Select city</option>
+                            <option value="Austin">Austin</option>
+                            <option value="Helena">Helena</option>
+                            <option value="Sacramento" selected>Sacramento</option>
+                            <option value="Santa Fe">Santa Fe</option>
+                            <option value="Las Vegas">Las Vegas</option>
+                            <option value="Phoenix">Phoenix</option>
+                        </select>
+                    </div>
+                    <div class="fs-xs fw-medium text-uppercase text-body-secondary">Found stores:</div>
+                    <div class="form-check border-bottom py-4 m-0">
+                        <input type="radio" class="form-check-input" id="store-4" name="found-store">
+                        <div>
+                            <label for="store-4"
+                                class="form-check-label text-dark-emphasis fw-semibold pb-2 mb-1">Sacramento
+                                Supercenter</label>
+                            <div class="fs-xs mb-2">8270 Delta Shores Cir S, Sacramento, CA 95832</div>
+                            <div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">07:00 - 22:00</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="form-check border-bottom py-4 m-0">
+                        <input type="radio" class="form-check-input" id="store-5" name="found-store">
+                        <div>
+                            <label for="store-5" class="form-check-label text-dark-emphasis fw-semibold pb-2 mb-1">West
+                                Sacramento Supercenter</label>
+                            <div class="fs-xs mb-2">755 Riverpoint Ct, West Sacramento, CA 95605</div>
+                            <div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">07:00 - 21:00</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="form-check border-bottom py-4 m-0">
+                        <input type="radio" class="form-check-input" id="store-6" name="found-store">
+                        <div>
+                            <label for="store-6" class="form-check-label text-dark-emphasis fw-semibold pb-2 mb-1">Rancho
+                                Cordova Supercenter</label>
+                            <div class="fs-xs mb-2">10655 Folsom Blvd, Rancho Cordova, CA 95670</div>
+                            <div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">08:00 - 23:00</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Add address collapse toggle -->
+                <div class="nav">
+                    <a class="nav-link hiding-collapse-toggle animate-underline collapsed px-0 mt-4"
+                        href=".pickup-options" data-bs-toggle="collapse" aria-expanded="false"
+                        aria-controls="pickupStoreOptions pickupStoreAdd">
+                        <span class="animate-target">Add store address</span>
+                        <i class="ci-plus fs-base ms-1"></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+
+        <!-- Footer -->
+        <div class="offcanvas-header">
+            <button type="button" class="btn btn-lg btn-primary w-100 rounded-pill">Confirm address</button>
+        </div>
+    </div>
+
+    @include('layouts.partials/menu-offcanvas')
+
+    <header class="navbar navbar-expand navbar-sticky sticky-top d-block bg-body z-fixed py-1 py-lg-0 py-xl-1 px-0"
+        data-sticky-element>
+        <div class="container justify-content-start py-2 py-lg-3">
+
+            <!-- Offcanvas menu toggler (Hamburger) -->
+            <button type="button" class="navbar-toggler d-block flex-shrink-0 me-3 me-sm-4" data-bs-toggle="offcanvas"
+                data-bs-target="#navbarNav" aria-controls="navbarNav" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+
+            <!-- Navbar brand (Logo) -->
+            <a class="navbar-brand fs-2 p-0 pe-lg-2 pe-xxl-0 me-0 me-sm-3 me-md-4 me-xxl-5"
+                href="{{ route('second', ['home', 'grocery']) }}">Cartzilla</a>
+
+            <!-- Categories dropdown visible on screens > 991px wide (lg breakpoint) -->
+            <div class="dropdown d-none d-lg-block w-100 me-4" style="max-width: 200px">
+                <button type="button" class="btn btn-lg btn-secondary w-100 border-0 rounded-pill"
+                    data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    <i class="ci-grid fs-lg me-2 ms-n1"></i>
+                    Categories
+                    <i class="ci-chevron-down fs-lg me-2 ms-auto me-n1"></i>
+                </button>
+                <div class="dropdown-menu rounded-4 p-4" style="--cz-dropdown-spacer: .75rem; margin-left: -75px">
+                    <div class="d-flex gap-4">
+                        <div style="min-width: 170px">
+                            <div class="h6">Bakery &amp; bread</div>
+                            <ul class="nav flex-column gap-2 mt-n2">
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="#!">Shop all</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="#!">Bread</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="#!">Pastries</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="#!">Bakery cookies</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="#!">Cupcakes</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="#!">Buns &amp; rolls</a>
+                                </li>
+                            </ul>
+                            <div class="h6 pt-4">Meat products</div>
+                            <ul class="nav flex-column gap-2 mt-n2">
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="#!">Shop all</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="#!">Fresh meat</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="#!">Processed meat</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="#!">Seafood</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="#!">Poultry products</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="#!">Prepared meat</a>
+                                </li>
+                            </ul>
+                        </div>
+                        <div style="min-width: 170px">
+                            <div class="h6">Vegetables</div>
+                            <ul class="nav flex-column gap-2 mt-n2">
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="#!">Shop all</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="#!">Leafy greens</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="#!">Root vegetables</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="#!">Allium vegetables</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="#!">Peppers and tomatoes</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="#!">Cruciferous</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="#!">Seasonal squashes</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="#!">Beans, peas &amp; lentils</a>
+                                </li>
+                            </ul>
+                            <div class="h6 pt-4">Sauces and ketchup</div>
+                            <ul class="nav flex-column gap-2 mt-n2">
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="#!">Shop all</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="#!">Tomato-based sauces</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="#!">Salad dressing</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="#!">Hot sauces</a>
+                                </li>
+                            </ul>
+                        </div>
+                        <div style="min-width: 170px">
+                            <div class="h6">Fresh fruits</div>
+                            <ul class="nav flex-column gap-2 mt-n2">
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="#!">Shop all</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="#!">Citrus fruits</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="#!">Berries</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="#!">Tropical fruits</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="#!">Stone fruits</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="#!">Exotic fruits</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="#!">Melons</a>
+                                </li>
+                            </ul>
+                            <div class="h6 pt-4">Italian dinner</div>
+                            <ul class="nav flex-column gap-2 mt-n2">
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="#!">Shop all</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="#!">Pasta &amp; sauces</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="#!">Italian cheese</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="#!">Italian meats</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="#!">Desserts &amp; beverages</a>
+                                </li>
+                            </ul>
+                        </div>
+                        <div style="min-width: 170px">
+                            <div class="h6">Beverages</div>
+                            <ul class="nav flex-column gap-2 mt-n2">
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="#!">Shop all</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="#!">Soft drinks</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="#!">Juices</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="#!">Sports &amp; energy drinks</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="#!">Tea and coffee</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="#!">Alcoholic beverages</a>
+                                </li>
+                            </ul>
+                            <div class="h6 pt-4">Dairy &amp; eggs</div>
+                            <ul class="nav flex-column gap-2 mt-n2">
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="#!">Shop all</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="#!">Chees</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="#!">Milk &amp; yogurt</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="#!">Sour cream</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="#!">Eggs</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="#!">Butter &amp; margarine</a>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Search bar visible on screens > 768px wide (md breakpoint) -->
+            <div class="position-relative w-100 d-none d-md-block me-3 me-xl-4">
+                <input type="search" class="form-control form-control-lg rounded-pill"
+                    placeholder="Search for products" aria-label="Search">
+                <button type="button"
+                    class="btn btn-icon btn-ghost fs-lg btn-secondary text-bo border-0 position-absolute top-0 end-0 rounded-circle mt-1 me-1"
+                    aria-label="Search button">
+                    <i class="ci-search"></i>
+                </button>
+            </div>
+
+            <!-- Delivery options toggle visible on screens > 1200px wide (xl breakpoint) -->
+            <div class="nav me-4 me-xxl-5 d-none d-xl-block">
+                <a class="nav-link flex-column align-items-start animate-underline p-0" href="#deliveryOptions"
+                    data-bs-toggle="offcanvas" aria-controls="deliveryOptions">
+                    <div class="h6 fs-sm mb-0">Delivery</div>
+                    <div class="d-flex align-items-center fs-sm fw-normal text-body">
+                        <span class="animate-target text-nowrap">Set your address</span>
+                        <i class="ci-chevron-down fs-base ms-1"></i>
+                    </div>
+                </a>
+            </div>
+
+            <!-- Button group -->
+            <div class="d-flex align-items-center gap-md-1 gap-lg-2 ms-auto">
+
+                <!-- Theme switcher (light/dark/auto) -->
+                <div class="dropdown">
+                    <button type="button"
+                        class="theme-switcher btn btn-icon btn-outline-secondary fs-lg border-0 rounded-circle animate-scale"
+                        data-bs-toggle="dropdown" aria-expanded="false" aria-label="Toggle theme (light)">
+                        <span class="theme-icon-active d-flex animate-target">
+                            <i class="ci-sun"></i>
+                        </span>
+                    </button>
+                    <ul class="dropdown-menu" style="--cz-dropdown-min-width: 9rem">
+                        <li>
+                            <button type="button" class="dropdown-item active" data-bs-theme-value="light"
+                                aria-pressed="true">
+                                <span class="theme-icon d-flex fs-base me-2">
+                                    <i class="ci-sun"></i>
+                                </span>
+                                <span class="theme-label">Light</span>
+                                <i class="item-active-indicator ci-check ms-auto"></i>
+                            </button>
+                        </li>
+                        <li>
+                            <button type="button" class="dropdown-item" data-bs-theme-value="dark"
+                                aria-pressed="false">
+                                <span class="theme-icon d-flex fs-base me-2">
+                                    <i class="ci-moon"></i>
+                                </span>
+                                <span class="theme-label">Dark</span>
+                                <i class="item-active-indicator ci-check ms-auto"></i>
+                            </button>
+                        </li>
+                        <li>
+                            <button type="button" class="dropdown-item" data-bs-theme-value="auto"
+                                aria-pressed="false">
+                                <span class="theme-icon d-flex fs-base me-2">
+                                    <i class="ci-auto"></i>
+                                </span>
+                                <span class="theme-label">Auto</span>
+                                <i class="item-active-indicator ci-check ms-auto"></i>
+                            </button>
+                        </li>
+                    </ul>
+                </div>
+
+                <!-- Search toggle button visible on screens < 768px wide (md breakpoint) -->
+                <button type="button"
+                    class="btn btn-icon fs-xl btn-outline-secondary border-0 rounded-circle animate-shake d-md-none"
+                    data-bs-toggle="collapse" data-bs-target="#searchBar" aria-controls="searchBar"
+                    aria-label="Toggle search bar">
+                    <i class="ci-search animate-target"></i>
+                </button>
+
+                <!-- Delivery options button visible on screens < 1200px wide (xl breakpoint) -->
+                <button type="button"
+                    class="btn btn-icon fs-lg btn-outline-secondary border-0 rounded-circle animate-scale d-xl-none"
+                    data-bs-toggle="offcanvas" data-bs-target="#deliveryOptions" aria-controls="deliveryOptions"
+                    aria-label="Toggle delivery options offcanvas">
+                    <i class="ci-map-pin animate-target"></i>
+                </button>
+
+                <!-- Account button visible on screens > 768px wide (md breakpoint) -->
+                <a class="btn btn-icon fs-lg btn-outline-secondary border-0 rounded-circle animate-shake d-none d-md-inline-flex"
+                    href="{{ route('second', ['account', 'signin']) }}">
+                    <i class="ci-user animate-target"></i>
+                    <span class="visually-hidden">Account</span>
+                </a>
+
+                <!-- Cart button -->
+                <button type="button"
+                    class="btn btn-icon fs-xl btn-outline-secondary position-relative border-0 rounded-circle animate-scale"
+                    data-bs-toggle="offcanvas" data-bs-target="#shoppingCart" aria-controls="shoppingCart"
+                    aria-label="Shopping cart">
+                    <span class="position-absolute top-0 start-100 badge fs-xs text-bg-primary rounded-pill ms-n3 z-2"
+                        style="--cz-badge-padding-y: .25em; --cz-badge-padding-x: .42em">8</span>
+                    <i class="ci-shopping-cart animate-target"></i>
+                </button>
+            </div>
+        </div>
+
+        <!-- Search collapse available on screens < 768px wide (md breakpoint) -->
+        <div class="collapse d-md-none" id="searchBar">
+            <div class="container pt-2 pb-3">
+                <div class="position-relative">
+                    <i class="ci-search position-absolute top-50 translate-middle-y d-flex fs-lg ms-3"></i>
+                    <input type="search" class="form-control form-icon-start rounded-pill"
+                        placeholder="Search for products" data-autofocus="collapse">
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <section class="border-top">
+        <div class="container py-lg-1">
+            <div class="overflow-auto" data-simplebar>
+                <div class="nav flex-nowrap justify-content-between gap-4 py-2">
+                    <a class="nav-link align-items-center animate-underline gap-2 p-0" href="#!">
+                        <span class="d-flex align-items-center justify-content-center bg-body-tertiary rounded-circle"
+                            style="width: 40px; height: 40px">
+                            <i class="ci-percent text-primary fs-xl"></i>
+                        </span>
+                        <span class="d-block animate-target fw-semibold text-nowrap ms-1">Weekly sale</span>
+                    </a>
+                    <a class="nav-link align-items-center animate-underline gap-2 p-0" href="#!">
+                        <span class="d-flex align-items-center justify-content-center bg-body-tertiary rounded-circle"
+                            style="width: 40px; height: 40px">
+                            <img src="/img/mega-menu/grocery/th01.png" width="30" alt="Image">
+                        </span>
+                        <span class="d-block animate-target fw-semibold text-nowrap ms-1">Vegetables</span>
+                    </a>
+                    <a class="nav-link align-items-center animate-underline gap-2 p-0" href="#!">
+                        <span class="d-flex align-items-center justify-content-center bg-body-tertiary rounded-circle"
+                            style="width: 40px; height: 40px">
+                            <img src="/img/mega-menu/grocery/th02.png" width="30" alt="Image">
+                        </span>
+                        <span class="d-block animate-target fw-semibold text-nowrap ms-1">Easter is coming</span>
+                    </a>
+                    <a class="nav-link align-items-center animate-underline gap-2 m-0" href="#!">
+                        <span class="d-flex align-items-center justify-content-center bg-body-tertiary rounded-circle"
+                            style="width: 40px; height: 40px">
+                            <img src="/img/mega-menu/grocery/th03.png" width="30" alt="Image">
+                        </span>
+                        <span class="d-block animate-target fw-semibold text-nowrap ms-1">Poultry meat</span>
+                    </a>
+                    <a class="nav-link align-items-center animate-underline gap-2 p-0" href="#!">
+                        <span class="d-flex align-items-center justify-content-center bg-body-tertiary rounded-circle"
+                            style="width: 40px; height: 40px">
+                            <img src="/img/mega-menu/grocery/th04.png" width="30" alt="Image">
+                        </span>
+                        <span class="d-block animate-target fw-semibold text-nowrap ms-1">Fresh fruits</span>
+                    </a>
+                    <a class="nav-link align-items-center animate-underline gap-2 p-0" href="#!">
+                        <span class="d-flex align-items-center justify-content-center bg-body-tertiary rounded-circle"
+                            style="width: 40px; height: 40px">
+                            <img src="/img/mega-menu/grocery/th05.png" width="30" alt="Image">
+                        </span>
+                        <span class="d-block animate-target fw-semibold text-nowrap ms-1">St. Patrick's day</span>
+                    </a>
+                    <a class="nav-link align-items-center animate-underline gap-2 p-0" href="#!">
+                        <span class="d-flex align-items-center justify-content-center bg-body-tertiary rounded-circle"
+                            style="width: 40px; height: 40px">
+                            <img src="/img/mega-menu/grocery/th06.png" width="30" alt="Image">
+                        </span>
+                        <span class="d-block animate-target fw-semibold text-nowrap ms-1">Exotic fruits</span>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <main class="content-wrapper">
+
+        <!-- Breadcrumb -->
+        <nav class="container pt-lg-2 my-3 my-lg-4" aria-label="breadcrumb">
+            <ol class="breadcrumb">
+                <li class="breadcrumb-item"><a href="{{ route('second', ['home', 'grocery']) }}">Home</a></li>
+                <li class="breadcrumb-item active" aria-current="page">Catalog with sidebar filters</li>
+            </ol>
+        </nav>
+
+
+        <!-- Page title -->
+        <h1 class="h3 container pb-2 pb-md-3 pb-lg-4">Shop catalog</h1>
+
+
+        <!-- Products grid + Sidebar with filters -->
+        <section class="container pb-5 mb-2 mb-sm-3 mb-lg-4 mb-xl-5">
+            <div class="row">
+
+                <!-- Filter sidebar that turns into offcanvas on screens < 992px wide (lg breakpoint) -->
+                <aside class="col-lg-3">
+                    <div class="offcanvas-lg offcanvas-start pe-lg-4" id="filterSidebar">
+                        <div class="offcanvas-header py-3">
+                            <h5 class="offcanvas-title">Filter products</h5>
+                            <button type="button" class="btn-close" data-bs-dismiss="offcanvas"
+                                data-bs-target="#filterSidebar" aria-label="Close"></button>
+                        </div>
+                        <div class="offcanvas-body flex-column pt-2 py-lg-0">
+
+                            <!-- Categories -->
+                            <div class="accordion pb-2" id="categories">
+
+                                <!-- Category -->
+                                <div class="accordion-item border-0 mb-3">
+                                    <h4 class="accordion-header" id="headingBakery">
+                                        <button type="button" class="accordion-button collapsed p-0"
+                                            data-bs-toggle="collapse" data-bs-target="#bakery" aria-expanded="false"
+                                            aria-controls="bakery">
+                                            <span
+                                                class="d-flex align-items-center justify-content-center bg-body-secondary rounded-circle me-3"
+                                                style="width: 56px; height: 56px">
+                                                <img src="/img/shop/grocery/categories/01.png" width="40"
+                                                    alt="Image">
+                                            </span>
+                                            <span class="fs-sm">Bakery &amp; bread</span>
+                                        </button>
+                                    </h4>
+                                    <div class="accordion-collapse collapse" id="bakery"
+                                        aria-labelledby="headingBakery" data-bs-parent="#categories">
+                                        <div class="accordion-body ps-4 pb-0">
+                                            <ul class="nav flex-column gap-2 border-start px-4 pb-1 ms-1 mb-0">
+                                                <li class="nav-item pb-1 ps-3 ms-1">
+                                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                                        href="#!">Shop all</a>
+                                                </li>
+                                                <li class="nav-item pb-1 ps-3 ms-1">
+                                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                                        href="#!">Bread</a>
+                                                </li>
+                                                <li class="nav-item pb-1 ps-3 ms-1">
+                                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                                        href="#!">Pastries</a>
+                                                </li>
+                                                <li class="nav-item pb-1 ps-3 ms-1">
+                                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                                        href="#!">Bakery cookies</a>
+                                                </li>
+                                                <li class="nav-item pb-1 ps-3 ms-1">
+                                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                                        href="#!">Cupcakes</a>
+                                                </li>
+                                                <li class="nav-item pb-1 ps-3 ms-1">
+                                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                                        href="#!">Buns</a>
+                                                </li>
+                                                <li class="nav-item pb-1 ps-3 ms-1">
+                                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                                        href="#!">Rolls</a>
+                                                </li>
+                                            </ul>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <!-- Category -->
+                                <div class="accordion-item border-0 mb-3">
+                                    <h4 class="accordion-header" id="headingVegetables">
+                                        <button type="button" class="accordion-button collapsed p-0"
+                                            data-bs-toggle="collapse" data-bs-target="#vegetables"
+                                            aria-expanded="false" aria-controls="vegetables">
+                                            <span
+                                                class="d-flex align-items-center justify-content-center bg-body-tertiary rounded-circle me-3"
+                                                style="width: 56px; height: 56px">
+                                                <img src="/img/shop/grocery/categories/02.png" width="40"
+                                                    alt="Image">
+                                            </span>
+                                            <span class="fs-sm">Vegetables</span>
+                                        </button>
+                                    </h4>
+                                    <div class="accordion-collapse collapse" id="vegetables"
+                                        aria-labelledby="headingVegetables" data-bs-parent="#categories">
+                                        <div class="accordion-body ps-4 pb-0">
+                                            <ul class="nav flex-column gap-2 border-start px-4 pb-1 ms-1 mb-0">
+                                                <li class="nav-item pb-1 ps-3 ms-1">
+                                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                                        href="#!">Shop all</a>
+                                                </li>
+                                                <li class="nav-item pb-1 ps-3 ms-1">
+                                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                                        href="#!">Leafy greens</a>
+                                                </li>
+                                                <li class="nav-item pb-1 ps-3 ms-1">
+                                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                                        href="#!">Root vegetables</a>
+                                                </li>
+                                                <li class="nav-item pb-1 ps-3 ms-1">
+                                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                                        href="#!">Allium vegetables</a>
+                                                </li>
+                                                <li class="nav-item pb-1 ps-3 ms-1">
+                                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                                        href="#!">Peppers and tomatoes</a>
+                                                </li>
+                                                <li class="nav-item pb-1 ps-3 ms-1">
+                                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                                        href="#!">Cruciferous</a>
+                                                </li>
+                                                <li class="nav-item pb-1 ps-3 ms-1">
+                                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                                        href="#!">Seasonal squashes</a>
+                                                </li>
+                                            </ul>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <!-- Category -->
+                                <div class="accordion-item border-0 mb-3">
+                                    <h4 class="accordion-header" id="headingFruits">
+                                        <button type="button" class="accordion-button collapsed p-0"
+                                            data-bs-toggle="collapse" data-bs-target="#fruits" aria-expanded="false"
+                                            aria-controls="fruits">
+                                            <span
+                                                class="d-flex align-items-center justify-content-center bg-body-tertiary rounded-circle me-3"
+                                                style="width: 56px; height: 56px">
+                                                <img src="/img/shop/grocery/categories/03.png" width="40"
+                                                    alt="Image">
+                                            </span>
+                                            <span class="fs-sm">Fresh fruits</span>
+                                        </button>
+                                    </h4>
+                                    <div class="accordion-collapse collapse" id="fruits"
+                                        aria-labelledby="headingFruits" data-bs-parent="#categories">
+                                        <div class="accordion-body ps-4 pb-0">
+                                            <ul class="nav flex-column gap-2 border-start px-4 pb-1 ms-1 mb-0">
+                                                <li class="nav-item pb-1 ps-3 ms-1">
+                                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                                        href="#!">Shop all</a>
+                                                </li>
+                                                <li class="nav-item pb-1 ps-3 ms-1">
+                                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                                        href="#!">Citrus fruits</a>
+                                                </li>
+                                                <li class="nav-item pb-1 ps-3 ms-1">
+                                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                                        href="#!">Berries</a>
+                                                </li>
+                                                <li class="nav-item pb-1 ps-3 ms-1">
+                                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                                        href="#!">Tropical fruits</a>
+                                                </li>
+                                                <li class="nav-item pb-1 ps-3 ms-1">
+                                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                                        href="#!">Stone fruits</a>
+                                                </li>
+                                                <li class="nav-item pb-1 ps-3 ms-1">
+                                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                                        href="#!">Exotic fruits</a>
+                                                </li>
+                                                <li class="nav-item pb-1 ps-3 ms-1">
+                                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                                        href="#!">Melons</a>
+                                                </li>
+                                            </ul>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <!-- Category -->
+                                <div class="accordion-item border-0 mb-3">
+                                    <h4 class="accordion-header" id="headingItalian">
+                                        <button type="button" class="accordion-button collapsed p-0"
+                                            data-bs-toggle="collapse" data-bs-target="#italian" aria-expanded="false"
+                                            aria-controls="italian">
+                                            <span
+                                                class="d-flex align-items-center justify-content-center bg-body-tertiary rounded-circle me-3"
+                                                style="width: 56px; height: 56px">
+                                                <img src="/img/shop/grocery/categories/04.png" width="40"
+                                                    alt="Image">
+                                            </span>
+                                            <span class="fs-sm">Meet Italian dinner</span>
+                                        </button>
+                                    </h4>
+                                    <div class="accordion-collapse collapse" id="italian"
+                                        aria-labelledby="headingItalian" data-bs-parent="#categories">
+                                        <div class="accordion-body ps-4 pb-0">
+                                            <ul class="nav flex-column gap-2 border-start px-4 pb-1 ms-1 mb-0">
+                                                <li class="nav-item pb-1 ps-3 ms-1">
+                                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                                        href="#!">Shop all</a>
+                                                </li>
+                                                <li class="nav-item pb-1 ps-3 ms-1">
+                                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                                        href="#!">Pasta &amp; sauces</a>
+                                                </li>
+                                                <li class="nav-item pb-1 ps-3 ms-1">
+                                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                                        href="#!">Italian cheeses</a>
+                                                </li>
+                                                <li class="nav-item pb-1 ps-3 ms-1">
+                                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                                        href="#!">Italian meats</a>
+                                                </li>
+                                                <li class="nav-item pb-1 ps-3 ms-1">
+                                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                                        href="#!">Antipasti &amp; appetizers</a>
+                                                </li>
+                                                <li class="nav-item pb-1 ps-3 ms-1">
+                                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                                        href="#!">Fresh produce</a>
+                                                </li>
+                                                <li class="nav-item pb-1 ps-3 ms-1">
+                                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                                        href="#!">Desserts &amp; beverages</a>
+                                                </li>
+                                            </ul>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <!-- Category -->
+                                <div class="accordion-item border-0 mb-3">
+                                    <h4 class="accordion-header" id="headingBeverages">
+                                        <button type="button" class="accordion-button collapsed p-0"
+                                            data-bs-toggle="collapse" data-bs-target="#beverages"
+                                            aria-expanded="false" aria-controls="beverages">
+                                            <span
+                                                class="d-flex align-items-center justify-content-center bg-body-tertiary rounded-circle me-3"
+                                                style="width: 56px; height: 56px">
+                                                <img src="/img/shop/grocery/categories/05.png" width="40"
+                                                    alt="Image">
+                                            </span>
+                                            <span class="fs-sm">Beverages</span>
+                                        </button>
+                                    </h4>
+                                    <div class="accordion-collapse collapse" id="beverages"
+                                        aria-labelledby="headingBeverages" data-bs-parent="#categories">
+                                        <div class="accordion-body ps-4 pb-0">
+                                            <ul class="nav flex-column gap-2 border-start px-4 pb-1 ms-1 mb-0">
+                                                <li class="nav-item pb-1 ps-3 ms-1">
+                                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                                        href="#!">Shop all</a>
+                                                </li>
+                                                <li class="nav-item pb-1 ps-3 ms-1">
+                                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                                        href="#!">Soft drinks</a>
+                                                </li>
+                                                <li class="nav-item pb-1 ps-3 ms-1">
+                                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                                        href="#!">Juices</a>
+                                                </li>
+                                                <li class="nav-item pb-1 ps-3 ms-1">
+                                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                                        href="#!">Sports &amp; energy drinks</a>
+                                                </li>
+                                                <li class="nav-item pb-1 ps-3 ms-1">
+                                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                                        href="#!">Tea and coffee</a>
+                                                </li>
+                                                <li class="nav-item pb-1 ps-3 ms-1">
+                                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                                        href="#!">Water</a>
+                                                </li>
+                                                <li class="nav-item pb-1 ps-3 ms-1">
+                                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                                        href="#!">Alcoholic beverages</a>
+                                                </li>
+                                            </ul>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <!-- Category -->
+                                <div class="accordion-item border-0 mb-3">
+                                    <h4 class="accordion-header" id="headingMeat">
+                                        <button type="button" class="accordion-button collapsed p-0"
+                                            data-bs-toggle="collapse" data-bs-target="#meat" aria-expanded="false"
+                                            aria-controls="meat">
+                                            <span
+                                                class="d-flex align-items-center justify-content-center bg-body-tertiary rounded-circle me-3"
+                                                style="width: 56px; height: 56px">
+                                                <img src="/img/shop/grocery/categories/06.png" width="40"
+                                                    alt="Image">
+                                            </span>
+                                            <span class="fs-sm">Meat products</span>
+                                        </button>
+                                    </h4>
+                                    <div class="accordion-collapse collapse" id="meat"
+                                        aria-labelledby="headingMeat" data-bs-parent="#categories">
+                                        <div class="accordion-body ps-4 pb-0">
+                                            <ul class="nav flex-column gap-2 border-start px-4 pb-1 ms-1 mb-0">
+                                                <li class="nav-item pb-1 ps-3 ms-1">
+                                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                                        href="#!">Shop all</a>
+                                                </li>
+                                                <li class="nav-item pb-1 ps-3 ms-1">
+                                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                                        href="#!">Fresh meat</a>
+                                                </li>
+                                                <li class="nav-item pb-1 ps-3 ms-1">
+                                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                                        href="#!">Processed meat</a>
+                                                </li>
+                                                <li class="nav-item pb-1 ps-3 ms-1">
+                                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                                        href="#!">Seafood</a>
+                                                </li>
+                                                <li class="nav-item pb-1 ps-3 ms-1">
+                                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                                        href="#!">Poultry products</a>
+                                                </li>
+                                                <li class="nav-item pb-1 ps-3 ms-1">
+                                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                                        href="#!">Exotic meats</a>
+                                                </li>
+                                                <li class="nav-item pb-1 ps-3 ms-1">
+                                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                                        href="#!">Prepared meat</a>
+                                                </li>
+                                            </ul>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <!-- Category -->
+                                <div class="accordion-item border-0 mb-3">
+                                    <h4 class="accordion-header" id="headingSauces">
+                                        <button type="button" class="accordion-button collapsed p-0"
+                                            data-bs-toggle="collapse" data-bs-target="#sauces" aria-expanded="false"
+                                            aria-controls="sauces">
+                                            <span
+                                                class="d-flex align-items-center justify-content-center bg-body-tertiary rounded-circle me-3"
+                                                style="width: 56px; height: 56px">
+                                                <img src="/img/shop/grocery/categories/07.png" width="40"
+                                                    alt="Image">
+                                            </span>
+                                            <span class="fs-sm">Sauces and ketchup</span>
+                                        </button>
+                                    </h4>
+                                    <div class="accordion-collapse collapse" id="sauces"
+                                        aria-labelledby="headingSauces" data-bs-parent="#categories">
+                                        <div class="accordion-body ps-4 pb-0">
+                                            <ul class="nav flex-column gap-2 border-start px-4 pb-1 ms-1 mb-0">
+                                                <li class="nav-item pb-1 ps-3 ms-1">
+                                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                                        href="#!">Shop all</a>
+                                                </li>
+                                                <li class="nav-item pb-1 ps-3 ms-1">
+                                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                                        href="#!">Tomato-based sauces</a>
+                                                </li>
+                                                <li class="nav-item pb-1 ps-3 ms-1">
+                                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                                        href="#!">International sauces</a>
+                                                </li>
+                                                <li class="nav-item pb-1 ps-3 ms-1">
+                                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                                        href="#!">Condiments</a>
+                                                </li>
+                                                <li class="nav-item pb-1 ps-3 ms-1">
+                                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                                        href="#!">Salad dressings</a>
+                                                </li>
+                                                <li class="nav-item pb-1 ps-3 ms-1">
+                                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                                        href="#!">Hot sauces</a>
+                                                </li>
+                                                <li class="nav-item pb-1 ps-3 ms-1">
+                                                    <a class="nav-link hover-effect-underline fw-normal p-0"
+                                                        href="#!">Specialty sauces</a>
+                                                </li>
+                                            </ul>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+
+                            <!-- Filters -->
+                            <div class="accordion border-top mb-4">
+
+                                <!-- Price -->
+                                <div class="accordion-item">
+                                    <h4 class="accordion-header" id="headingPrice">
+                                        <button type="button" class="accordion-button collapsed"
+                                            data-bs-toggle="collapse" data-bs-target="#price" aria-expanded="false"
+                                            aria-controls="price">
+                                            Price
+                                        </button>
+                                    </h4>
+                                    <div class="accordion-collapse collapse" id="price"
+                                        aria-labelledby="headingPrice">
+                                        <div class="accordion-body">
+                                            <div class="range-slider ps-1"
+                                                data-range-slider='{"startMin": 1, "startMax": 30, "min": 0, "max": 100, "step": 1, "tooltipPrefix": "$"}'
+                                                aria-labelledby="headingPrice">
+                                                <div class="range-slider-ui"></div>
+                                                <div class="d-flex align-items-center">
+                                                    <div class="position-relative w-50">
+                                                        <i
+                                                            class="ci-dollar-sign position-absolute top-50 start-0 translate-middle-y ms-3"></i>
+                                                        <input type="number" class="form-control form-icon-start"
+                                                            min="0" data-range-slider-min>
+                                                    </div>
+                                                    <i class="ci-minus text-body-emphasis mx-2"></i>
+                                                    <div class="position-relative w-50">
+                                                        <i
+                                                            class="ci-dollar-sign position-absolute top-50 start-0 translate-middle-y ms-3"></i>
+                                                        <input type="number" class="form-control form-icon-start"
+                                                            min="0" data-range-slider-max>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <!-- Brand -->
+                                <div class="accordion-item">
+                                    <h4 class="accordion-header" id="headingBrand">
+                                        <button type="button" class="accordion-button collapsed"
+                                            data-bs-toggle="collapse" data-bs-target="#brand" aria-expanded="false"
+                                            aria-controls="brand">
+                                            Brand
+                                        </button>
+                                    </h4>
+                                    <div class="accordion-collapse collapse" id="brand"
+                                        aria-labelledby="headingBrand">
+                                        <div class="accordion-body"
+                                            data-filter-list='{"searchClass": "brands-search", "listClass": "brands-list", "valueNames": ["form-check-label"]}'>
+                                            <div class="position-relative mb-3">
+                                                <i
+                                                    class="ci-search position-absolute top-50 start-0 translate-middle-y ms-3"></i>
+                                                <input type="search" class="brands-search form-control form-icon-start"
+                                                    placeholder="Search">
+                                            </div>
+                                            <div style="height: 210px" data-simplebar data-simplebar-auto-hide="false">
+                                                <div class="brands-list d-flex flex-column gap-2">
+                                                    <div class="form-check mb-0">
+                                                        <input type="checkbox" class="form-check-input"
+                                                            id="coca-cola">
+                                                        <label for="coca-cola"
+                                                            class="form-check-label text-body-emphasis">Coca-Cola</label>
+                                                    </div>
+                                                    <div class="form-check mb-0">
+                                                        <input type="checkbox" class="form-check-input"
+                                                            id="pepsi">
+                                                        <label for="pepsi"
+                                                            class="form-check-label text-body-emphasis">Pepsi</label>
+                                                    </div>
+                                                    <div class="form-check mb-0">
+                                                        <input type="checkbox" class="form-check-input" id="nestle"
+                                                            checked>
+                                                        <label for="nestle"
+                                                            class="form-check-label text-body-emphasis">Nestlé</label>
+                                                    </div>
+                                                    <div class="form-check mb-0">
+                                                        <input type="checkbox" class="form-check-input"
+                                                            id="hersheys">
+                                                        <label for="hersheys"
+                                                            class="form-check-label text-body-emphasis">Hershey's</label>
+                                                    </div>
+                                                    <div class="form-check mb-0">
+                                                        <input type="checkbox" class="form-check-input"
+                                                            id="bilabong">
+                                                        <label for="bilabong"
+                                                            class="form-check-label text-body-emphasis">General
+                                                            Mills</label>
+                                                    </div>
+                                                    <div class="form-check mb-0">
+                                                        <input type="checkbox" class="form-check-input"
+                                                            id="barilla">
+                                                        <label for="barilla"
+                                                            class="form-check-label text-body-emphasis">Barilla</label>
+                                                    </div>
+                                                    <div class="form-check mb-0">
+                                                        <input type="checkbox" class="form-check-input"
+                                                            id="kraft">
+                                                        <label for="kraft"
+                                                            class="form-check-label text-body-emphasis">Kraft
+                                                            Heinz</label>
+                                                    </div>
+                                                    <div class="form-check mb-0">
+                                                        <input type="checkbox" class="form-check-input"
+                                                            id="unilever">
+                                                        <label for="unilever"
+                                                            class="form-check-label text-body-emphasis">Unilever</label>
+                                                    </div>
+                                                    <div class="form-check mb-0">
+                                                        <input type="checkbox" class="form-check-input"
+                                                            id="danone">
+                                                        <label for="danone"
+                                                            class="form-check-label text-body-emphasis">Danone</label>
+                                                    </div>
+                                                    <div class="form-check mb-0">
+                                                        <input type="checkbox" class="form-check-input"
+                                                            id="Campbell">
+                                                        <label for="Campbell"
+                                                            class="form-check-label text-body-emphasis">Campbell</label>
+                                                    </div>
+                                                    <div class="form-check mb-0">
+                                                        <input type="checkbox" class="form-check-input"
+                                                            id="basso">
+                                                        <label for="basso"
+                                                            class="form-check-label text-body-emphasis">Basso</label>
+                                                    </div>
+                                                    <div class="form-check mb-0">
+                                                        <input type="checkbox" class="form-check-input"
+                                                            id="kelloggs">
+                                                        <label for="kelloggs"
+                                                            class="form-check-label text-body-emphasis">Kellogg's</label>
+                                                    </div>
+                                                    <div class="form-check mb-0">
+                                                        <input type="checkbox" class="form-check-input"
+                                                            id="mondelez">
+                                                        <label for="mondelez"
+                                                            class="form-check-label text-body-emphasis">Mondelez</label>
+                                                    </div>
+                                                    <div class="form-check mb-0">
+                                                        <input type="checkbox" class="form-check-input"
+                                                            id="pepper">
+                                                        <label for="pepper"
+                                                            class="form-check-label text-body-emphasis">Dr Pepper
+                                                            Snapple</label>
+                                                    </div>
+                                                    <div class="form-check mb-0">
+                                                        <input type="checkbox" class="form-check-input"
+                                                            id="heineken">
+                                                        <label for="heineken"
+                                                            class="form-check-label text-body-emphasis">Heineken</label>
+                                                    </div>
+                                                    <div class="form-check mb-0">
+                                                        <input type="checkbox" class="form-check-input"
+                                                            id="mars">
+                                                        <label for="mars"
+                                                            class="form-check-label text-body-emphasis">Mars</label>
+                                                    </div>
+                                                    <div class="form-check mb-0">
+                                                        <input type="checkbox" class="form-check-input"
+                                                            id="pernod">
+                                                        <label for="pernod"
+                                                            class="form-check-label text-body-emphasis">Pernod
+                                                            Ricard</label>
+                                                    </div>
+                                                    <div class="form-check mb-0">
+                                                        <input type="checkbox" class="form-check-input"
+                                                            id="ferrero">
+                                                        <label for="ferrero"
+                                                            class="form-check-label text-body-emphasis">Ferrero</label>
+                                                    </div>
+                                                    <div class="form-check mb-0">
+                                                        <input type="checkbox" class="form-check-input"
+                                                            id="red-bull">
+                                                        <label for="red-bull"
+                                                            class="form-check-label text-body-emphasis">Red Bull</label>
+                                                    </div>
+                                                    <div class="form-check mb-0">
+                                                        <input type="checkbox" class="form-check-input"
+                                                            id="suntory">
+                                                        <label for="suntory"
+                                                            class="form-check-label text-body-emphasis">Suntory</label>
+                                                    </div>
+                                                    <div class="form-check mb-0">
+                                                        <input type="checkbox" class="form-check-input"
+                                                            id="diageo">
+                                                        <label for="diageo"
+                                                            class="form-check-label text-body-emphasis">Diageo</label>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <!-- Special diet -->
+                                <div class="accordion-item">
+                                    <h4 class="accordion-header" id="headingDiet">
+                                        <button type="button" class="accordion-button collapsed"
+                                            data-bs-toggle="collapse" data-bs-target="#diet" aria-expanded="false"
+                                            aria-controls="diet">
+                                            Special diet needs
+                                        </button>
+                                    </h4>
+                                    <div class="accordion-collapse collapse" id="diet"
+                                        aria-labelledby="headingDiet">
+                                        <div class="accordion-body">
+                                            <div class="d-flex flex-column gap-2">
+                                                <div class="form-check mb-0">
+                                                    <input type="checkbox" class="form-check-input" id="gluten-free"
+                                                        checked>
+                                                    <label for="gluten-free"
+                                                        class="form-check-label text-body-emphasis">Gluten-free</label>
+                                                </div>
+                                                <div class="form-check mb-0">
+                                                    <input type="checkbox" class="form-check-input" id="plant-based">
+                                                    <label for="plant-based"
+                                                        class="form-check-label text-body-emphasis">Plant based</label>
+                                                </div>
+                                                <div class="form-check mb-0">
+                                                    <input type="checkbox" class="form-check-input" id="vegan">
+                                                    <label for="vegan"
+                                                        class="form-check-label text-body-emphasis">Vegan</label>
+                                                </div>
+                                                <div class="form-check mb-0">
+                                                    <input type="checkbox" class="form-check-input" id="keto">
+                                                    <label for="keto"
+                                                        class="form-check-label text-body-emphasis">Keto diet</label>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <!-- Status -->
+                                <div class="accordion-item">
+                                    <h4 class="accordion-header" id="headingStatus">
+                                        <button type="button" class="accordion-button collapsed"
+                                            data-bs-toggle="collapse" data-bs-target="#status" aria-expanded="false"
+                                            aria-controls="status">
+                                            Status
+                                        </button>
+                                    </h4>
+                                    <div class="accordion-collapse collapse" id="status"
+                                        aria-labelledby="headingStatus">
+                                        <div class="accordion-body">
+                                            <div class="d-flex flex-column gap-2">
+                                                <div class="form-check mb-0">
+                                                    <input type="checkbox" class="form-check-input" id="instock">
+                                                    <label for="instock" class="form-check-label text-body-emphasis">In
+                                                        stock</label>
+                                                </div>
+                                                <div class="form-check mb-0">
+                                                    <input type="checkbox" class="form-check-input" id="sale"
+                                                        checked>
+                                                    <label for="sale" class="form-check-label text-body-emphasis">%
+                                                        Sale</label>
+                                                </div>
+                                                <div class="form-check mb-0">
+                                                    <input type="checkbox" class="form-check-input" id="delivery">
+                                                    <label for="delivery"
+                                                        class="form-check-label text-body-emphasis">Free delivery</label>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Banner -->
+                            <div class="rounded-4 overflow-hidden" style="background-color: #a6cddc"
+                                data-bs-theme="light">
+                                <div class="pt-3 px-3 mt-3 mx-3">
+                                    <h4 class="mb-2 mb-xl-3">Make breakfast healthy and easy</h4>
+                                    <div class="nav">
+                                        <a class="nav-link animate-underline stretched-link px-0" href="#!">
+                                            <span class="animate-target">Shop now</span>
+                                            <i class="ci-chevron-right fs-base mt-1 ms-1"></i>
+                                        </a>
+                                    </div>
+                                </div>
+                                <div class="ratio mt-n2" style="--cz-aspect-ratio: calc(240 / 282 * 100%)">
+                                    <img src="/img/shop/grocery/banner.jpg" alt="Banner">
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </aside>
+
+
+                <!-- Product grid -->
+                <div class="col-lg-9">
+
+                    <!-- Sorting -->
+                    <div class="d-sm-flex align-items-center justify-content-between mb-4">
+                        <div class="fs-sm text-body-emphasis text-nowrap mb-2 mb-sm-0">Found <span
+                                class="fw-semibold">256</span> items</div>
+                        <div class="d-flex align-items-center text-nowrap">
+                            <label class="form-label fw-semibold mb-0 me-2">Sort by:</label>
+                            <div style="width: 200px">
+                                <select class="form-select rounded-pill"
+                                    data-select='{
+                    "removeItemButton": false,
+                    "classNames": {
+                      "containerInner": ["form-select", "rounded-pill"]
+                    }
+                  }'>
+                                    <option value="Relevance">Relevance</option>
+                                    <option value="Popularity">Popularity</option>
+                                    <option value="Price: Low to High">Price: Low to High</option>
+                                    <option value="Price: High to Low">Price: High to Low</option>
+                                    <option value="Newest Arrivals">Newest Arrivals</option>
+                                </select>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Selected filters -->
+                    <div class="d-flex flex-wrap gap-2 mb-4">
+                        <button type="button" class="btn btn-sm btn-secondary">
+                            <i class="ci-close fs-sm ms-n1 me-1"></i>
+                            Sale
+                        </button>
+                        <button type="button" class="btn btn-sm btn-secondary">
+                            <i class="ci-close fs-sm ms-n1 me-1"></i>
+                            Gluten-free
+                        </button>
+                        <button type="button" class="btn btn-sm btn-secondary">
+                            <i class="ci-close fs-sm ms-n1 me-1"></i>
+                            Nestlé
+                        </button>
+                        <button type="button" class="btn btn-sm btn-secondary">
+                            <i class="ci-close fs-sm ms-n1 me-1"></i>
+                            $1 - $30
+                        </button>
+                        <button type="button"
+                            class="btn btn-sm btn-secondary bg-transparent border-0 text-decoration-underline px-0 ms-2">
+                            Clear all
+                        </button>
+                    </div>
+
+                    <!-- Grid -->
+                    <div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-3 row-cols-xl-4 g-4">
+
+                        <!-- Item -->
+                        <div class="col">
+                            <div class="card product-card h-100 bg-transparent border-0 shadow-none">
+                                <div class="position-relative z-2">
+                                    <button type="button"
+                                        class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                        aria-label="Add to Wishlist">
+                                        <i class="ci-heart animate-target"></i>
+                                    </button>
+                                    <a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
+                                        <div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
+                                            <img src="/img/shop/grocery/01.png" alt="Image">
+                                        </div>
+                                    </a>
+                                    <div class="position-absolute w-100 start-0 bottom-0">
+                                        <div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
+                                            <div
+                                                class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
+                                                <button type="button" class="btn btn-icon btn-sm btn-primary"
+                                                    data-decrement aria-label="Decrement quantity">
+                                                    <i class="ci-minus fs-sm"></i>
+                                                </button>
+                                                <input type="number"
+                                                    class="form-control form-control-sm bg-primary text-white w-100"
+                                                    value="0" min="0" readonly>
+                                                <button type="button"
+                                                    class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
+                                                    data-increment aria-label="Increment quantity">
+                                                    <span data-count-input-value></span>
+                                                    <i class="ci-plus fs-sm"></i>
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
+                                    <div class="h6 mb-2">$2.15</div>
+                                    <h3 class="fs-sm lh-base mb-0">
+                                        <a class="hover-effect-underline fw-normal"
+                                            href="{{ route('second', ['shop', 'product-grocery']) }}">Muesli Fitness Energy, gluten free</a>
+                                    </h3>
+                                </div>
+                                <div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">500g</div>
+                            </div>
+                        </div>
+
+                        <!-- Item -->
+                        <div class="col">
+                            <div class="card product-card h-100 bg-transparent border-0 shadow-none">
+                                <div class="position-relative z-2">
+                                    <span
+                                        class="badge text-bg-danger position-absolute top-0 start-0 z-2 mt-1 mt-sm-2 ms-1 ms-sm-2">-30%</span>
+                                    <button type="button"
+                                        class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                        aria-label="Add to Wishlist">
+                                        <i class="ci-heart animate-target"></i>
+                                    </button>
+                                    <a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
+                                        <div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
+                                            <img src="/img/shop/grocery/02.png" alt="Image">
+                                        </div>
+                                    </a>
+                                    <div class="position-absolute w-100 start-0 bottom-0">
+                                        <div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
+                                            <div
+                                                class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
+                                                <button type="button" class="btn btn-icon btn-sm btn-primary"
+                                                    data-decrement aria-label="Decrement quantity">
+                                                    <i class="ci-minus fs-sm"></i>
+                                                </button>
+                                                <input type="number"
+                                                    class="form-control form-control-sm bg-primary text-white w-100"
+                                                    value="0" min="0" readonly>
+                                                <button type="button"
+                                                    class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
+                                                    data-increment aria-label="Increment quantity">
+                                                    <span data-count-input-value></span>
+                                                    <i class="ci-plus fs-sm"></i>
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
+                                    <div class="h6 mb-2">$3.12 <del
+                                            class="fs-sm fw-normal text-body-tertiary ms-1">$4.05</del></div>
+                                    <h3 class="fs-sm lh-base mb-0">
+                                        <a class="hover-effect-underline fw-normal"
+                                            href="{{ route('second', ['shop', 'product-grocery']) }}">Fresh orange Klementina, Spain</a>
+                                    </h3>
+                                </div>
+                                <div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">1kg</div>
+                            </div>
+                        </div>
+
+                        <!-- Item -->
+                        <div class="col">
+                            <div class="card product-card h-100 bg-transparent border-0 shadow-none">
+                                <div class="position-relative z-2">
+                                    <button type="button"
+                                        class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                        aria-label="Add to Wishlist">
+                                        <i class="ci-heart animate-target"></i>
+                                    </button>
+                                    <a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
+                                        <div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
+                                            <img src="/img/shop/grocery/03.png" alt="Image">
+                                        </div>
+                                    </a>
+                                    <div class="position-absolute w-100 start-0 bottom-0">
+                                        <div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
+                                            <div
+                                                class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
+                                                <button type="button" class="btn btn-icon btn-sm btn-primary"
+                                                    data-decrement aria-label="Decrement quantity">
+                                                    <i class="ci-minus fs-sm"></i>
+                                                </button>
+                                                <input type="number"
+                                                    class="form-control form-control-sm bg-primary text-white w-100"
+                                                    value="0" min="0" readonly>
+                                                <button type="button"
+                                                    class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
+                                                    data-increment aria-label="Increment quantity">
+                                                    <span data-count-input-value></span>
+                                                    <i class="ci-plus fs-sm"></i>
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
+                                    <div class="h6 mb-2">$0.80</div>
+                                    <h3 class="fs-sm lh-base mb-0">
+                                        <a class="hover-effect-underline fw-normal"
+                                            href="{{ route('second', ['shop', 'product-grocery']) }}">Pepsi soda classic, can</a>
+                                    </h3>
+                                </div>
+                                <div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">330ml</div>
+                            </div>
+                        </div>
+
+                        <!-- Item -->
+                        <div class="col">
+                            <div class="card product-card h-100 bg-transparent border-0 shadow-none">
+                                <div class="position-relative z-2">
+                                    <button type="button"
+                                        class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                        aria-label="Add to Wishlist">
+                                        <i class="ci-heart animate-target"></i>
+                                    </button>
+                                    <a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
+                                        <div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
+                                            <img src="/img/shop/grocery/04.png" alt="Image">
+                                        </div>
+                                    </a>
+                                    <div class="position-absolute w-100 start-0 bottom-0">
+                                        <div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
+                                            <div
+                                                class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
+                                                <button type="button" class="btn btn-icon btn-sm btn-primary"
+                                                    data-decrement aria-label="Decrement quantity">
+                                                    <i class="ci-minus fs-sm"></i>
+                                                </button>
+                                                <input type="number"
+                                                    class="form-control form-control-sm bg-primary text-white w-100"
+                                                    value="0" min="0" readonly>
+                                                <button type="button"
+                                                    class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
+                                                    data-increment aria-label="Increment quantity">
+                                                    <span data-count-input-value></span>
+                                                    <i class="ci-plus fs-sm"></i>
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
+                                    <div class="h6 mb-2">$2.99</div>
+                                    <h3 class="fs-sm lh-base mb-0">
+                                        <a class="hover-effect-underline fw-normal"
+                                            href="{{ route('second', ['shop', 'product-grocery']) }}">Mozzarella mini cheese Granaloro</a>
+                                    </h3>
+                                </div>
+                                <div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">250g</div>
+                            </div>
+                        </div>
+
+                        <!-- Item -->
+                        <div class="col">
+                            <div class="card product-card h-100 bg-transparent border-0 shadow-none">
+                                <div class="position-relative z-2">
+                                    <button type="button"
+                                        class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                        aria-label="Add to Wishlist">
+                                        <i class="ci-heart animate-target"></i>
+                                    </button>
+                                    <a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
+                                        <div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
+                                            <img src="/img/shop/grocery/05.png" alt="Image">
+                                        </div>
+                                    </a>
+                                    <div class="position-absolute w-100 start-0 bottom-0">
+                                        <div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
+                                            <div
+                                                class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
+                                                <button type="button" class="btn btn-icon btn-sm btn-primary"
+                                                    data-decrement aria-label="Decrement quantity">
+                                                    <i class="ci-minus fs-sm"></i>
+                                                </button>
+                                                <input type="number"
+                                                    class="form-control form-control-sm bg-primary text-white w-100"
+                                                    value="0" min="0" readonly>
+                                                <button type="button"
+                                                    class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
+                                                    data-increment aria-label="Increment quantity">
+                                                    <span data-count-input-value></span>
+                                                    <i class="ci-plus fs-sm"></i>
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
+                                    <div class="h6 mb-2">$1.24</div>
+                                    <h3 class="fs-sm lh-base mb-0">
+                                        <a class="hover-effect-underline fw-normal"
+                                            href="{{ route('second', ['shop', 'product-grocery']) }}">Coconut, Indonesia</a>
+                                    </h3>
+                                </div>
+                                <div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">1 coconut</div>
+                            </div>
+                        </div>
+
+                        <!-- Item -->
+                        <div class="col">
+                            <div class="card product-card h-100 bg-transparent border-0 shadow-none">
+                                <div class="position-relative z-2">
+                                    <button type="button"
+                                        class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                        aria-label="Add to Wishlist">
+                                        <i class="ci-heart animate-target"></i>
+                                    </button>
+                                    <a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
+                                        <div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
+                                            <img src="/img/shop/grocery/06.png" alt="Image">
+                                        </div>
+                                    </a>
+                                    <div class="position-absolute w-100 start-0 bottom-0">
+                                        <div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
+                                            <div
+                                                class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
+                                                <button type="button" class="btn btn-icon btn-sm btn-primary"
+                                                    data-decrement aria-label="Decrement quantity">
+                                                    <i class="ci-minus fs-sm"></i>
+                                                </button>
+                                                <input type="number"
+                                                    class="form-control form-control-sm bg-primary text-white w-100"
+                                                    value="0" min="0" readonly>
+                                                <button type="button"
+                                                    class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
+                                                    data-increment aria-label="Increment quantity">
+                                                    <span data-count-input-value></span>
+                                                    <i class="ci-plus fs-sm"></i>
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
+                                    <div class="h6 mb-2">$3.95</div>
+                                    <h3 class="fs-sm lh-base mb-0">
+                                        <a class="hover-effect-underline fw-normal"
+                                            href="{{ route('second', ['shop', 'product-grocery']) }}">Pesto sauce Barilla with parmesan and
+                                            basil</a>
+                                    </h3>
+                                </div>
+                                <div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">200g</div>
+                            </div>
+                        </div>
+
+                        <!-- Item -->
+                        <div class="col">
+                            <div class="card product-card h-100 bg-transparent border-0 shadow-none">
+                                <div class="position-relative z-2">
+                                    <button type="button"
+                                        class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                        aria-label="Add to Wishlist">
+                                        <i class="ci-heart animate-target"></i>
+                                    </button>
+                                    <a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
+                                        <div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
+                                            <img src="/img/shop/grocery/07.png" alt="Image">
+                                        </div>
+                                    </a>
+                                    <div class="position-absolute w-100 start-0 bottom-0">
+                                        <div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
+                                            <div
+                                                class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
+                                                <button type="button" class="btn btn-icon btn-sm btn-primary"
+                                                    data-decrement aria-label="Decrement quantity">
+                                                    <i class="ci-minus fs-sm"></i>
+                                                </button>
+                                                <input type="number"
+                                                    class="form-control form-control-sm bg-primary text-white w-100"
+                                                    value="0" min="0" readonly>
+                                                <button type="button"
+                                                    class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
+                                                    data-increment aria-label="Increment quantity">
+                                                    <span data-count-input-value></span>
+                                                    <i class="ci-plus fs-sm"></i>
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
+                                    <div class="h6 mb-2">$1.99</div>
+                                    <h3 class="fs-sm lh-base mb-0">
+                                        <a class="hover-effect-underline fw-normal"
+                                            href="{{ route('second', ['shop', 'product-grocery']) }}">Fresh mango, Spain</a>
+                                    </h3>
+                                </div>
+                                <div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">1 mango</div>
+                            </div>
+                        </div>
+
+                        <!-- Item -->
+                        <div class="col">
+                            <div class="card product-card h-100 bg-transparent border-0 shadow-none">
+                                <div class="position-relative z-2">
+                                    <button type="button"
+                                        class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                        aria-label="Add to Wishlist">
+                                        <i class="ci-heart animate-target"></i>
+                                    </button>
+                                    <a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
+                                        <div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
+                                            <img src="/img/shop/grocery/08.png" alt="Image">
+                                        </div>
+                                    </a>
+                                    <div class="position-absolute w-100 start-0 bottom-0">
+                                        <div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
+                                            <div
+                                                class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
+                                                <button type="button" class="btn btn-icon btn-sm btn-primary"
+                                                    data-decrement aria-label="Decrement quantity">
+                                                    <i class="ci-minus fs-sm"></i>
+                                                </button>
+                                                <input type="number"
+                                                    class="form-control form-control-sm bg-primary text-white w-100"
+                                                    value="0" min="0" readonly>
+                                                <button type="button"
+                                                    class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
+                                                    data-increment aria-label="Increment quantity">
+                                                    <span data-count-input-value></span>
+                                                    <i class="ci-plus fs-sm"></i>
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
+                                    <div class="h6 mb-2">$2.40</div>
+                                    <h3 class="fs-sm lh-base mb-0">
+                                        <a class="hover-effect-underline fw-normal"
+                                            href="{{ route('second', ['shop', 'product-grocery']) }}">Fresh green asparagus, bunch</a>
+                                    </h3>
+                                </div>
+                                <div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">300g</div>
+                            </div>
+                        </div>
+
+                        <!-- Item -->
+                        <div class="col">
+                            <div class="card product-card h-100 bg-transparent border-0 shadow-none">
+                                <div class="position-relative z-2">
+                                    <button type="button"
+                                        class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                        aria-label="Add to Wishlist">
+                                        <i class="ci-heart animate-target"></i>
+                                    </button>
+                                    <a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
+                                        <div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
+                                            <img src="/img/shop/grocery/09.png" alt="Image">
+                                        </div>
+                                    </a>
+                                    <div class="position-absolute w-100 start-0 bottom-0">
+                                        <div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
+                                            <div
+                                                class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
+                                                <button type="button" class="btn btn-icon btn-sm btn-primary"
+                                                    data-decrement aria-label="Decrement quantity">
+                                                    <i class="ci-minus fs-sm"></i>
+                                                </button>
+                                                <input type="number"
+                                                    class="form-control form-control-sm bg-primary text-white w-100"
+                                                    value="0" min="0" readonly>
+                                                <button type="button"
+                                                    class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
+                                                    data-increment aria-label="Increment quantity">
+                                                    <span data-count-input-value></span>
+                                                    <i class="ci-plus fs-sm"></i>
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
+                                    <div class="h6 mb-2">$18.60</div>
+                                    <h3 class="fs-sm lh-base mb-0">
+                                        <a class="hover-effect-underline fw-normal"
+                                            href="{{ route('second', ['shop', 'product-grocery']) }}">Pure virgin olive oil Basso</a>
+                                    </h3>
+                                </div>
+                                <div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">1000ml</div>
+                            </div>
+                        </div>
+
+                        <!-- Item -->
+                        <div class="col">
+                            <div class="card product-card h-100 bg-transparent border-0 shadow-none">
+                                <div class="position-relative z-2">
+                                    <button type="button"
+                                        class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                        aria-label="Add to Wishlist">
+                                        <i class="ci-heart animate-target"></i>
+                                    </button>
+                                    <a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
+                                        <div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
+                                            <img src="/img/shop/grocery/10.png" alt="Image">
+                                        </div>
+                                    </a>
+                                    <div class="position-absolute w-100 start-0 bottom-0">
+                                        <div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
+                                            <div
+                                                class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
+                                                <button type="button" class="btn btn-icon btn-sm btn-primary"
+                                                    data-decrement aria-label="Decrement quantity">
+                                                    <i class="ci-minus fs-sm"></i>
+                                                </button>
+                                                <input type="number"
+                                                    class="form-control form-control-sm bg-primary text-white w-100"
+                                                    value="0" min="0" readonly>
+                                                <button type="button"
+                                                    class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
+                                                    data-increment aria-label="Increment quantity">
+                                                    <span data-count-input-value></span>
+                                                    <i class="ci-plus fs-sm"></i>
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
+                                    <div class="h6 mb-2">$9.15</div>
+                                    <h3 class="fs-sm lh-base mb-0">
+                                        <a class="hover-effect-underline fw-normal"
+                                            href="{{ route('second', ['shop', 'product-grocery']) }}">Fresh pork butt steaks with rosemary</a>
+                                    </h3>
+                                </div>
+                                <div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">500g</div>
+                            </div>
+                        </div>
+
+                        <!-- Item -->
+                        <div class="col">
+                            <div class="card product-card h-100 bg-transparent border-0 shadow-none">
+                                <div class="position-relative z-2">
+                                    <button type="button"
+                                        class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                        aria-label="Add to Wishlist">
+                                        <i class="ci-heart animate-target"></i>
+                                    </button>
+                                    <a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
+                                        <div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
+                                            <img src="/img/shop/grocery/11.png" alt="Image">
+                                        </div>
+                                    </a>
+                                    <div class="position-absolute w-100 start-0 bottom-0">
+                                        <div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
+                                            <div
+                                                class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
+                                                <button type="button" class="btn btn-icon btn-sm btn-primary"
+                                                    data-decrement aria-label="Decrement quantity">
+                                                    <i class="ci-minus fs-sm"></i>
+                                                </button>
+                                                <input type="number"
+                                                    class="form-control form-control-sm bg-primary text-white w-100"
+                                                    value="0" min="0" readonly>
+                                                <button type="button"
+                                                    class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
+                                                    data-increment aria-label="Increment quantity">
+                                                    <span data-count-input-value></span>
+                                                    <i class="ci-plus fs-sm"></i>
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
+                                    <div class="h6 mb-2">$3.40</div>
+                                    <h3 class="fs-sm lh-base mb-0">
+                                        <a class="hover-effect-underline fw-normal"
+                                            href="{{ route('second', ['shop', 'product-grocery']) }}">Fresh red grapefruit</a>
+                                    </h3>
+                                </div>
+                                <div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">1kg</div>
+                            </div>
+                        </div>
+
+                        <!-- Item -->
+                        <div class="col">
+                            <div class="card product-card h-100 bg-transparent border-0 shadow-none">
+                                <div class="position-relative z-2">
+                                    <button type="button"
+                                        class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                        aria-label="Add to Wishlist">
+                                        <i class="ci-heart animate-target"></i>
+                                    </button>
+                                    <a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
+                                        <div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
+                                            <img src="/img/shop/grocery/12.png" alt="Image">
+                                        </div>
+                                    </a>
+                                    <div class="position-absolute w-100 start-0 bottom-0">
+                                        <div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
+                                            <div
+                                                class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
+                                                <button type="button" class="btn btn-icon btn-sm btn-primary"
+                                                    data-decrement aria-label="Decrement quantity">
+                                                    <i class="ci-minus fs-sm"></i>
+                                                </button>
+                                                <input type="number"
+                                                    class="form-control form-control-sm bg-primary text-white w-100"
+                                                    value="0" min="0" readonly>
+                                                <button type="button"
+                                                    class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
+                                                    data-increment aria-label="Increment quantity">
+                                                    <span data-count-input-value></span>
+                                                    <i class="ci-plus fs-sm"></i>
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
+                                    <div class="h6 mb-2">$2.59</div>
+                                    <h3 class="fs-sm lh-base mb-0">
+                                        <a class="hover-effect-underline fw-normal"
+                                            href="{{ route('second', ['shop', 'product-grocery']) }}">Soft creme cheese with greens Exquisa</a>
+                                    </h3>
+                                </div>
+                                <div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">150g</div>
+                            </div>
+                        </div>
+
+                        <!-- Item -->
+                        <div class="col">
+                            <div class="card product-card h-100 bg-transparent border-0 shadow-none">
+                                <div class="position-relative z-2">
+                                    <button type="button"
+                                        class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                        aria-label="Add to Wishlist">
+                                        <i class="ci-heart animate-target"></i>
+                                    </button>
+                                    <a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
+                                        <div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
+                                            <img src="/img/shop/grocery/13.png" alt="Image">
+                                        </div>
+                                    </a>
+                                    <div class="position-absolute w-100 start-0 bottom-0">
+                                        <div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
+                                            <div
+                                                class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
+                                                <button type="button" class="btn btn-icon btn-sm btn-primary"
+                                                    data-decrement aria-label="Decrement quantity">
+                                                    <i class="ci-minus fs-sm"></i>
+                                                </button>
+                                                <input type="number"
+                                                    class="form-control form-control-sm bg-primary text-white w-100"
+                                                    value="0" min="0" readonly>
+                                                <button type="button"
+                                                    class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
+                                                    data-increment aria-label="Increment quantity">
+                                                    <span data-count-input-value></span>
+                                                    <i class="ci-plus fs-sm"></i>
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
+                                    <div class="h6 mb-2">$27.00</div>
+                                    <h3 class="fs-sm lh-base mb-0">
+                                        <a class="hover-effect-underline fw-normal"
+                                            href="{{ route('second', ['shop', 'product-grocery']) }}">Steak salmon fillet with rosmary</a>
+                                    </h3>
+                                </div>
+                                <div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">1kg</div>
+                            </div>
+                        </div>
+
+                        <!-- Item -->
+                        <div class="col">
+                            <div class="card product-card h-100 bg-transparent border-0 shadow-none">
+                                <div class="position-relative z-2">
+                                    <button type="button"
+                                        class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                        aria-label="Add to Wishlist">
+                                        <i class="ci-heart animate-target"></i>
+                                    </button>
+                                    <a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
+                                        <div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
+                                            <img src="/img/shop/grocery/14.png" alt="Image">
+                                        </div>
+                                    </a>
+                                    <div class="position-absolute w-100 start-0 bottom-0">
+                                        <div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
+                                            <div
+                                                class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
+                                                <button type="button" class="btn btn-icon btn-sm btn-primary"
+                                                    data-decrement aria-label="Decrement quantity">
+                                                    <i class="ci-minus fs-sm"></i>
+                                                </button>
+                                                <input type="number"
+                                                    class="form-control form-control-sm bg-primary text-white w-100"
+                                                    value="0" min="0" readonly>
+                                                <button type="button"
+                                                    class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
+                                                    data-increment aria-label="Increment quantity">
+                                                    <span data-count-input-value></span>
+                                                    <i class="ci-plus fs-sm"></i>
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
+                                    <div class="h6 mb-2">$1.75</div>
+                                    <h3 class="fs-sm lh-base mb-0">
+                                        <a class="hover-effect-underline fw-normal"
+                                            href="{{ route('second', ['shop', 'product-grocery']) }}">Fresh red seedless grapes</a>
+                                    </h3>
+                                </div>
+                                <div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">1kg</div>
+                            </div>
+                        </div>
+
+                        <!-- Item -->
+                        <div class="col">
+                            <div class="card product-card h-100 bg-transparent border-0 shadow-none">
+                                <div class="position-relative z-2">
+                                    <button type="button"
+                                        class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                        aria-label="Add to Wishlist">
+                                        <i class="ci-heart animate-target"></i>
+                                    </button>
+                                    <a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
+                                        <div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
+                                            <img src="/img/shop/grocery/15.png" alt="Image">
+                                        </div>
+                                    </a>
+                                    <div class="position-absolute w-100 start-0 bottom-0">
+                                        <div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
+                                            <div
+                                                class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
+                                                <button type="button" class="btn btn-icon btn-sm btn-primary"
+                                                    data-decrement aria-label="Decrement quantity">
+                                                    <i class="ci-minus fs-sm"></i>
+                                                </button>
+                                                <input type="number"
+                                                    class="form-control form-control-sm bg-primary text-white w-100"
+                                                    value="0" min="0" readonly>
+                                                <button type="button"
+                                                    class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
+                                                    data-increment aria-label="Increment quantity">
+                                                    <span data-count-input-value></span>
+                                                    <i class="ci-plus fs-sm"></i>
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
+                                    <div class="h6 mb-2">$3.10</div>
+                                    <h3 class="fs-sm lh-base mb-0">
+                                        <a class="hover-effect-underline fw-normal"
+                                            href="{{ route('second', ['shop', 'product-grocery']) }}">Fresh lemons, pack</a>
+                                    </h3>
+                                </div>
+                                <div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">500g</div>
+                            </div>
+                        </div>
+
+                        <!-- Item -->
+                        <div class="col">
+                            <div class="card product-card h-100 bg-transparent border-0 shadow-none">
+                                <div class="position-relative z-2">
+                                    <button type="button"
+                                        class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                        aria-label="Add to Wishlist">
+                                        <i class="ci-heart animate-target"></i>
+                                    </button>
+                                    <a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
+                                        <div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
+                                            <img src="/img/shop/grocery/16.png" alt="Image">
+                                        </div>
+                                    </a>
+                                    <div class="position-absolute w-100 start-0 bottom-0">
+                                        <div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
+                                            <div
+                                                class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
+                                                <button type="button" class="btn btn-icon btn-sm btn-primary"
+                                                    data-decrement aria-label="Decrement quantity">
+                                                    <i class="ci-minus fs-sm"></i>
+                                                </button>
+                                                <input type="number"
+                                                    class="form-control form-control-sm bg-primary text-white w-100"
+                                                    value="0" min="0" readonly>
+                                                <button type="button"
+                                                    class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
+                                                    data-increment aria-label="Increment quantity">
+                                                    <span data-count-input-value></span>
+                                                    <i class="ci-plus fs-sm"></i>
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
+                                    <div class="h6 mb-2">$2.65</div>
+                                    <h3 class="fs-sm lh-base mb-0">
+                                        <a class="hover-effect-underline fw-normal"
+                                            href="{{ route('second', ['shop', 'product-grocery']) }}">Reggia penne rigate No.34 pasta, pack</a>
+                                    </h3>
+                                </div>
+                                <div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">500g</div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Pagination -->
+                    <nav class="border-top mt-4 pt-3" aria-label="Catalog pagination">
+                        <ul class="pagination pagination-lg pt-2 pt-md-3">
+                            <li class="page-item disabled me-auto">
+                                <a class="page-link d-flex align-items-center h-100 fs-lg px-2" href="#!"
+                                    aria-label="Previous page">
+                                    <i class="ci-chevron-left mx-1"></i>
+                                </a>
+                            </li>
+                            <li class="page-item active" aria-current="page">
+                                <span class="page-link">
+                                    1
+                                    <span class="visually-hidden">(current)</span>
+                                </span>
+                            </li>
+                            <li class="page-item">
+                                <a class="page-link" href="#!">2</a>
+                            </li>
+                            <li class="page-item">
+                                <a class="page-link" href="#!">3</a>
+                            </li>
+                            <li class="page-item">
+                                <span class="page-link pe-none">...</span>
+                            </li>
+                            <li class="page-item">
+                                <a class="page-link" href="#!">16</a>
+                            </li>
+                            <li class="page-item ms-auto">
+                                <a class="page-link d-flex align-items-center h-100 fs-lg px-2" href="#!"
+                                    aria-label="Next page">
+                                    <i class="ci-chevron-right mx-1"></i>
+                                </a>
+                            </li>
+                        </ul>
+                    </nav>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    @include('layouts.partials/footer2')
+@endsection
+
+@section('scripts')
+@endsection
diff --git a/resources/views/shop/catalog-marketplace.blade.php b/resources/views/shop/catalog-marketplace.blade.php
new file mode 100644
index 0000000..2a002ef
--- /dev/null
+++ b/resources/views/shop/catalog-marketplace.blade.php
@@ -0,0 +1,1204 @@
+@extends('layouts.landing', ['title' => 'Marketplace - Catalog'])
+
+@section('content')
+    <div class="offcanvas offcanvas-top" id="searchBox" data-bs-backdrop="static" tabindex="-1">
+        <div class="offcanvas-header border-bottom p-0 py-lg-1">
+            <form class="container d-flex align-items-center">
+                <input type="search" class="form-control form-control-lg fs-lg border-0 rounded-0 py-3 ps-0"
+                    placeholder="Search the products" data-autofocus="offcanvas">
+                <button type="reset" class="btn-close fs-lg" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+            </form>
+        </div>
+        <div class="offcanvas-body px-0">
+            <div class="container text-center">
+                <svg class="text-body-tertiary opacity-60 mb-4" xmlns="http://www.w3.org/2000/svg" width="60"
+                    viewBox="0 0 512 512" fill="currentColor">
+                    <path
+                        d="M340.115,361.412l-16.98-16.98c-34.237,29.36-78.733,47.098-127.371,47.098C87.647,391.529,0,303.883,0,195.765S87.647,0,195.765,0s195.765,87.647,195.765,195.765c0,48.638-17.738,93.134-47.097,127.371l16.98,16.98l11.94-11.94c5.881-5.881,15.415-5.881,21.296,0l112.941,112.941c5.881,5.881,5.881,15.416,0,21.296l-45.176,45.176c-5.881,5.881-15.415,5.881-21.296,0L328.176,394.648c-5.881-5.881-5.881-15.416,0-21.296L340.115,361.412z M195.765,361.412c91.484,0,165.647-74.163,165.647-165.647S287.249,30.118,195.765,30.118S30.118,104.28,30.118,195.765S104.28,361.412,195.765,361.412z M360.12,384l91.645,91.645l23.88-23.88L384,360.12L360.12,384z M233.034,233.033c5.881-5.881,15.415-5.881,21.296,0c5.881,5.881,5.881,15.416,0,21.296c-32.345,32.345-84.786,32.345-117.131,0c-5.881-5.881-5.881-15.415,0-21.296c5.881-5.881,15.416-5.881,21.296,0C179.079,253.616,212.45,253.616,233.034,233.033zM135.529,180.706c-12.475,0-22.588-10.113-22.588-22.588c0-12.475,10.113-22.588,22.588-22.588c12.475,0,22.588,10.113,22.588,22.588C158.118,170.593,148.005,180.706,135.529,180.706z M256,180.706c-12.475,0-22.588-10.113-22.588-22.588c0-12.475,10.113-22.588,22.588-22.588s22.588,10.113,22.588,22.588C278.588,170.593,268.475,180.706,256,180.706z" />
+                </svg>
+                <h6 class="mb-2">Your search results will appear here</h6>
+                <p class="fs-sm mb-0">Start typing in the search field above to see instant search results.</p>
+            </div>
+        </div>
+    </div>
+
+    @include('layouts.partials/offcanvas2')
+
+    <header class="navbar navbar-expand-lg bg-body navbar-sticky sticky-top z-fixed px-0" data-sticky-element>
+      <div class="container flex-nowrap">
+
+        <!-- Mobile offcanvas menu toggler (Hamburger) -->
+        <button type="button" class="navbar-toggler me-4 me-lg-0" data-bs-toggle="offcanvas" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+
+        <!-- Navbar brand (Logo) -->
+        <a class="navbar-brand py-1 py-md-2 py-xl-1" href="{{ route('second', ['home', 'marketplace']) }}">
+          <span class="d-none d-sm-flex flex-shrink-0 text-primary me-2">
+            <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36"><path d="M36 18.01c0 8.097-5.355 14.949-12.705 17.2a18.12 18.12 0 0 1-5.315.79C9.622 36 2.608 30.313.573 22.611.257 21.407.059 20.162 0 18.879v-1.758c.02-.395.059-.79.099-1.185.099-.908.277-1.817.514-2.686C2.687 5.628 9.682 0 18 0c5.572 0 10.551 2.528 13.871 6.517 1.502 1.797 2.648 3.91 3.359 6.201.494 1.659.771 3.436.771 5.292z" fill="currentColor"/><g fill="#fff"><path d="M17.466 21.624c-.514 0-.988-.316-1.146-.829-.198-.632.138-1.303.771-1.501l7.666-2.469-1.205-8.254-13.317 4.621a1.19 1.19 0 0 1-1.521-.75 1.19 1.19 0 0 1 .751-1.521l13.89-4.818c.553-.197 1.166-.138 1.64.158a1.82 1.82 0 0 1 .85 1.284l1.344 9.183c.138.987-.494 1.994-1.482 2.33l-7.864 2.528-.375.04zm7.31.138c-.178-.632-.85-1.007-1.482-.81l-5.177 1.58c-2.331.79-3.28.02-3.418-.099l-6.56-8.412a4.25 4.25 0 0 0-4.406-1.758l-3.122.987c-.237.889-.415 1.777-.514 2.686l4.228-1.363a1.84 1.84 0 0 1 1.857.81l6.659 8.551c.751.948 2.015 1.323 3.359 1.323.909 0 1.857-.178 2.687-.474l5.078-1.54c.632-.178 1.008-.829.81-1.481z"/><use href="#czlogo"/><use href="#czlogo" x="8.516" y="-2.172"/></g><defs><path id="czlogo" d="M18.689 28.654a1.94 1.94 0 0 1-1.936 1.935 1.94 1.94 0 0 1-1.936-1.935 1.94 1.94 0 0 1 1.936-1.935 1.94 1.94 0 0 1 1.936 1.935z"/></defs></svg>
+          </span>
+          Cartzilla
+        </a>
+
+        <!-- Main navigation that turns into offcanvas on screens < 992px wide (lg breakpoint) -->
+        <nav class="offcanvas offcanvas-start" id="navbarNav" tabindex="-1" aria-labelledby="navbarNavLabel">
+          <div class="offcanvas-header py-3">
+            <h5 class="offcanvas-title" id="navbarNavLabel">Browse Cartzilla</h5>
+            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+          </div>
+          <div class="offcanvas-body pt-3 pb-4 py-lg-0 mx-lg-auto">
+            <ul class="navbar-nav position-relative">
+              <li class="nav-item dropdown py-lg-2 me-lg-n1 me-xl-0">
+                <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Home</a>
+                <ul class="dropdown-menu" style="--cz-dropdown-spacer: .875rem">
+                  <li class="hover-effect-opacity px-2 mx-n2">
+                    <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'electronics']) }}">
+                      <span class="fw-medium">Electronics Store</span>
+                      <span class="d-block fs-xs text-body-secondary">Megamenu + Hero slider</span>
+                      <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2" style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                        <img class="position-relative z-2 d-none-dark" src="/img/mega-menu/demo-preview/electronics-light.jpg" alt="Electronics Store">
+                        <img class="position-relative z-2 d-none d-block-dark" src="/img/mega-menu/demo-preview/electronics-dark.jpg" alt="Electronics Store">
+                        <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark" style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                        <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark" style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                      </div>
+                    </a>
+                  </li>
+                  <li class="hover-effect-opacity px-2 mx-n2">
+                    <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'fashion-v1']) }}">
+                      <span class="fw-medium">Fashion Store v.1</span>
+                      <span class="d-block fs-xs text-body-secondary">Hero promo slider</span>
+                      <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2" style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                        <img class="position-relative z-2 d-none-dark" src="/img/mega-menu/demo-preview/fashion-1-light.jpg" alt="Fashion Store v.1">
+                        <img class="position-relative z-2 d-none d-block-dark" src="/img/mega-menu/demo-preview/fashion-1-dark.jpg" alt="Fashion Store v.1">
+                        <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark" style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                        <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark" style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                      </div>
+                    </a>
+                  </li>
+                  <li class="hover-effect-opacity px-2 mx-n2">
+                    <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'fashion-v2']) }}">
+                      <span class="fw-medium">Fashion Store v.2</span>
+                      <span class="d-block fs-xs text-body-secondary">Hero banner with hotspots</span>
+                      <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2" style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                        <img class="position-relative z-2 d-none-dark" src="/img/mega-menu/demo-preview/fashion-2-light.jpg" alt="Fashion Store v.2">
+                        <img class="position-relative z-2 d-none d-block-dark" src="/img/mega-menu/demo-preview/fashion-2-dark.jpg" alt="Fashion Store v.2">
+                        <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark" style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                        <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark" style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                      </div>
+                    </a>
+                  </li>
+                  <li class="hover-effect-opacity px-2 mx-n2">
+                    <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'furniture']) }}">
+                      <span class="fw-medium">Furniture Store</span>
+                      <span class="d-block fs-xs text-body-secondary">Fancy product carousel</span>
+                      <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2" style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                        <img class="position-relative z-2 d-none-dark" src="/img/mega-menu/demo-preview/furniture-light.jpg" alt="Furniture Store">
+                        <img class="position-relative z-2 d-none d-block-dark" src="/img/mega-menu/demo-preview/furniture-dark.jpg" alt="Furniture Store">
+                        <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark" style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                        <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark" style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                      </div>
+                    </a>
+                  </li>
+                  <li class="hover-effect-opacity px-2 mx-n2">
+                    <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'grocery']) }}">
+                      <span class="fw-medium">Grocery Store</span>
+                      <span class="d-block fs-xs text-body-secondary">Hero slider + Category cards</span>
+                      <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2" style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                        <img class="position-relative z-2 d-none-dark" src="/img/mega-menu/demo-preview/grocery-light.jpg" alt="Grocery Store">
+                        <img class="position-relative z-2 d-none d-block-dark" src="/img/mega-menu/demo-preview/grocery-dark.jpg" alt="Grocery Store">
+                        <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark" style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                        <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark" style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                      </div>
+                    </a>
+                  </li>
+                  <li class="hover-effect-opacity px-2 mx-n2">
+                    <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'marketplace']) }}">
+                      <span class="fw-medium">Marketplace</span>
+                      <span class="d-block fs-xs text-body-secondary">Multi-vendor, digital goods</span>
+                      <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2" style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                        <img class="position-relative z-2 d-none-dark" src="/img/mega-menu/demo-preview/marketplace-light.jpg" alt="Marketplace">
+                        <img class="position-relative z-2 d-none d-block-dark" src="/img/mega-menu/demo-preview/marketplace-dark.jpg" alt="Marketplace">
+                        <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark" style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                        <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark" style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                      </div>
+                    </a>
+                  </li>
+                  <li class="hover-effect-opacity px-2 mx-n2">
+                    <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'single-store']) }}">
+                      <span class="fw-medium">Single Product Store</span>
+                      <span class="d-block fs-xs text-body-secondary">Single product / mono brand</span>
+                      <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2" style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                        <img class="position-relative z-2 d-none-dark" src="/img/mega-menu/demo-preview/single-store-light.jpg" alt="Single Product Store">
+                        <img class="position-relative z-2 d-none d-block-dark" src="/img/mega-menu/demo-preview/single-store-dark.jpg" alt="Single Product Store">
+                        <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark" style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                        <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark" style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                      </div>
+                    </a>
+                  </li>
+                </ul>
+              </li>
+              <li class="nav-item dropdown position-static py-lg-2 me-lg-n1 me-xl-0">
+                <a class="nav-link dropdown-toggle active" aria-current="page" href="#" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Shop</a>
+                <div class="dropdown-menu rounded-4 p-4" style="--cz-dropdown-spacer: .875rem">
+                  <div class="d-flex flex-column flex-lg-row gap-4">
+                    <div style="min-width: 190px">
+                      <div class="h6 mb-2">Electronics Store</div>
+                      <ul class="nav flex-column gap-2 mt-0">
+                        <li class="d-flex w-100 pt-1">
+                          <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'categories-electronics']) }}">Categories Page</a>
+                        </li>
+                        <li class="d-flex w-100 pt-1">
+                          <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Catalog with Side Filters</a>
+                        </li>
+                        <li class="d-flex w-100 pt-1">
+                          <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'product-general-electronics']) }}">Product General Info</a>
+                        </li>
+                        <li class="d-flex w-100 pt-1">
+                          <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'product-details-electronics']) }}">Product Details</a>
+                        </li>
+                        <li class="d-flex w-100 pt-1">
+                          <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'product-reviews-electronics']) }}">Product Reviews</a>
+                        </li>
+                      </ul>
+                      <div class="h6 pt-4 mb-2">Fashion Store</div>
+                      <ul class="nav flex-column gap-2 mt-0">
+                        <li class="d-flex w-100 pt-1">
+                          <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-fashion']) }}">Catalog with Side Filters</a>
+                        </li>
+                        <li class="d-flex w-100 pt-1">
+                          <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'product-fashion']) }}">Product Page</a>
+                        </li>
+                      </ul>
+                      <div class="h6 pt-4 mb-2">Furniture Store</div>
+                      <ul class="nav flex-column gap-2 mt-0">
+                        <li class="d-flex w-100 pt-1">
+                          <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-furniture']) }}">Catalog with Top Filters</a>
+                        </li>
+                        <li class="d-flex w-100 pt-1">
+                          <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'product-furniture']) }}">Product Page</a>
+                        </li>
+                      </ul>
+                    </div>
+                    <div style="min-width: 190px">
+                      <div class="h6 mb-2">Grocery Store</div>
+                      <ul class="nav flex-column gap-2 mt-0">
+                        <li class="d-flex w-100 pt-1">
+                          <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-grocery']) }}">Catalog with Side Filters</a>
+                        </li>
+                        <li class="d-flex w-100 pt-1">
+                          <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'product-grocery']) }}">Product Page</a>
+                        </li>
+                      </ul>
+                      <div class="h6 pt-4 mb-2">Marketplace</div>
+                      <ul class="nav flex-column gap-2 mt-0">
+                        <li class="d-flex w-100 pt-1">
+                          <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-marketplace']) }}">Catalog with Top Filters</a>
+                        </li>
+                        <li class="d-flex w-100 pt-1">
+                          <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'product-marketplace']) }}">Digital Product Page</a>
+                        </li>
+                        <li class="d-flex w-100 pt-1">
+                          <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['checkout', 'marketplace']) }}">Cart / Checkout</a>
+                        </li>
+                      </ul>
+                    </div>
+                    <div style="min-width: 190px">
+                      <div class="h6 mb-2">Checkout v.1</div>
+                      <ul class="nav flex-column gap-2 mt-0">
+                        <li class="d-flex w-100 pt-1">
+                          <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['checkout', 'v1-cart']) }}">Shopping Cart</a>
+                        </li>
+                        <li class="d-flex w-100 pt-1">
+                          <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['checkout', 'v1-delivery-1']) }}">Delivery Info (Step 1)</a>
+                        </li>
+                        <li class="d-flex w-100 pt-1">
+                          <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['checkout', 'v1-delivery-2']) }}">Delivery Info (Step 2)</a>
+                        </li>
+                        <li class="d-flex w-100 pt-1">
+                          <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['checkout', 'v1-shipping']) }}">Shipping Address</a>
+                        </li>
+                        <li class="d-flex w-100 pt-1">
+                          <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['checkout', 'v1-payment']) }}">Payment</a>
+                        </li>
+                        <li class="d-flex w-100 pt-1">
+                          <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['checkout', 'v1-thankyou']) }}">Thank You Page</a>
+                        </li>
+                      </ul>
+                      <div class="h6 pt-4 mb-2">Checkout v.2</div>
+                      <ul class="nav flex-column gap-2 mt-0">
+                        <li class="d-flex w-100 pt-1">
+                          <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['checkout', 'v2-cart']) }}">Shopping Cart</a>
+                        </li>
+                        <li class="d-flex w-100 pt-1">
+                          <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['checkout', 'v2-delivery']) }}">Delivery Info</a>
+                        </li>
+                        <li class="d-flex w-100 pt-1">
+                          <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['checkout', 'v2-pickup']) }}">Pickup from Store</a>
+                        </li>
+                        <li class="d-flex w-100 pt-1">
+                          <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['checkout', 'v2-thankyou']) }}">Thank You Page</a>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              </li>
+              <li class="nav-item dropdown py-lg-2 me-lg-n1 me-xl-0">
+                <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" data-bs-auto-close="outside" aria-expanded="false">Account</a>
+                <ul class="dropdown-menu" style="--cz-dropdown-spacer: .875rem">
+                  <li class="dropend">
+                    <a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Auth Pages</a>
+                    <ul class="dropdown-menu">
+                      <li><a class="dropdown-item" href="{{ route('second', ['account', 'signin']) }}">Sign In</a></li>
+                      <li><a class="dropdown-item" href="{{ route('second', ['account', 'signup']) }}">Sign Up</a></li>
+                      <li><a class="dropdown-item" href="{{ route('second', ['account', 'password-recovery']) }}">Password Recovery</a></li>
+                    </ul>
+                  </li>
+                  <li class="dropend">
+                    <a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Shop User</a>
+                    <ul class="dropdown-menu">
+                      <li><a class="dropdown-item" href="{{ route('second', ['account', 'orders']) }}">Orders History</a></li>
+                      <li><a class="dropdown-item" href="{{ route('second', ['account', 'wishlist']) }}">Wishlist</a></li>
+                      <li><a class="dropdown-item" href="{{ route('second', ['account', 'payment']) }}">Payment Methods</a></li>
+                      <li><a class="dropdown-item" href="{{ route('second', ['account', 'reviews']) }}">My Reviews</a></li>
+                      <li><a class="dropdown-item" href="{{ route('second', ['account', 'info']) }}">Personal Info</a></li>
+                      <li><a class="dropdown-item" href="{{ route('second', ['account', 'addresses']) }}">Addresses</a></li>
+                      <li><a class="dropdown-item" href="{{ route('second', ['account', 'notifications']) }}">Notifications</a></li>
+                    </ul>
+                  </li>
+                  <li class="dropend">
+                    <a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Marketplace User</a>
+                    <ul class="dropdown-menu">
+                      <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-dashboard']) }}">Dashboard</a></li>
+                      <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-products']) }}">Products</a></li>
+                      <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-sales']) }}">Sales</a></li>
+                      <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-payouts']) }}">Payouts</a></li>
+                      <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-purchases']) }}">Purchases</a></li>
+                      <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-favorites']) }}">Favorites</a></li>
+                      <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-settings']) }}">Settings</a></li>
+                    </ul>
+                  </li>
+                </ul>
+              </li>
+              <li class="nav-item dropdown py-lg-2 me-lg-n1 me-xl-0">
+                <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" data-bs-auto-close="outside" aria-expanded="false">Pages</a>
+                <ul class="dropdown-menu" style="--cz-dropdown-spacer: .875rem">
+                  <li class="dropend">
+                    <a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">About</a>
+                    <ul class="dropdown-menu">
+                      <li><a class="dropdown-item" href="{{ route('second', ['about', 'v1']) }}">About v.1</a></li>
+                      <li><a class="dropdown-item" href="{{ route('second', ['about', 'v2']) }}">About v.2</a></li>
+                    </ul>
+                  </li>
+                  <li class="dropend">
+                    <a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Blog</a>
+                    <ul class="dropdown-menu">
+                      <li><a class="dropdown-item" href="{{ route('second', ['blog', 'grid-v1']) }}">Grid View v.1</a></li>
+                      <li><a class="dropdown-item" href="{{ route('second', ['blog', 'grid-v2']) }}">Grid View v.2</a></li>
+                      <li><a class="dropdown-item" href="{{ route('second', ['blog', 'list']) }}">List View</a></li>
+                      <li><a class="dropdown-item" href="{{ route('second', ['blog', 'single-v1']) }}">Single Post v.1</a></li>
+                      <li><a class="dropdown-item" href="{{ route('second', ['blog', 'single-v2']) }}">Single Post v.2</a></li>
+                    </ul>
+                  </li>
+                  <li class="dropend">
+                    <a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Contact</a>
+                    <ul class="dropdown-menu">
+                      <li><a class="dropdown-item" href="{{ route('second', ['contact', 'v1']) }}">Contact v.1</a></li>
+                      <li><a class="dropdown-item" href="{{ route('second', ['contact', 'v2']) }}">Contact v.2</a></li>
+                      <li><a class="dropdown-item" href="{{ route('second', ['contact', 'v3']) }}">Contact v.3</a></li>
+                    </ul>
+                  </li>
+                  <li class="dropend">
+                    <a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Help Center</a>
+                    <ul class="dropdown-menu">
+                      <li><a class="dropdown-item" href="{{ route('second', ['help', 'topics-v1']) }}">Help Topics v.1</a></li>
+                      <li><a class="dropdown-item" href="{{ route('second', ['help', 'topics-v2']) }}">Help Topics v.2</a></li>
+                      <li><a class="dropdown-item" href="{{ route('second', ['help', 'single-article-v1']) }}">Help Single Article v.1</a></li>
+                      <li><a class="dropdown-item" href="{{ route('second', ['help', 'single-article-v2']) }}">Help Single Article v.2</a></li>
+                    </ul>
+                  </li>
+                  <li class="dropend">
+                    <a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">404 Error</a>
+                    <ul class="dropdown-menu">
+                      <li><a class="dropdown-item" href="{{ route('second', ['404', 'electronics']) }}">404 Electronics</a></li>
+                      <li><a class="dropdown-item" href="{{ route('second', ['404', 'fashion']) }}">404 Fashion</a></li>
+                      <li><a class="dropdown-item" href="{{ route('second', ['404', 'furniture']) }}">404 Furniture</a></li>
+                      <li><a class="dropdown-item" href="{{ route('second', ['404', 'grocery']) }}">404 Grocery</a></li>
+                    </ul>
+                  </li>
+                  <li><a class="dropdown-item" href="{{ route('any', 'terms-and-conditions')}}">Terms &amp; Conditions</a></li>
+                </ul>
+              </li>              
+            </ul>
+          </div>
+
+          <!-- Account button visible on screens < 768px wide (md breakpoint) -->
+          <div class="offcanvas-header nav border-top px-0 py-3 mt-3 d-md-none">
+            <a class="nav-link justify-content-center w-100" href="{{ route('second', ['account', 'signin']) }}">
+              <i class="ci-user fs-lg opacity-60 ms-n2 me-2"></i>
+              Account
+            </a>
+          </div>
+        </nav>
+
+        <!-- Button group -->
+        <div class="d-flex align-items-center">
+
+          <!-- Theme switcher (light/dark/auto) -->
+          <div class="dropdown">
+            <button type="button" class="theme-switcher btn btn-icon btn-lg btn-outline-secondary fs-lg border-0 rounded-circle animate-scale" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Toggle theme (light)">
+              <span class="theme-icon-active d-flex animate-target">
+                <i class="ci-sun"></i>
+              </span>
+            </button>
+            <ul class="dropdown-menu" style="--cz-dropdown-min-width: 9rem">
+              <li>
+                <button type="button" class="dropdown-item active" data-bs-theme-value="light" aria-pressed="true">
+                  <span class="theme-icon d-flex fs-base me-2">
+                    <i class="ci-sun"></i>
+                  </span>
+                  <span class="theme-label">Light</span>
+                  <i class="item-active-indicator ci-check ms-auto"></i>
+                </button>
+              </li>
+              <li>
+                <button type="button" class="dropdown-item" data-bs-theme-value="dark" aria-pressed="false">
+                  <span class="theme-icon d-flex fs-base me-2">
+                    <i class="ci-moon"></i>
+                  </span>
+                  <span class="theme-label">Dark</span>
+                  <i class="item-active-indicator ci-check ms-auto"></i>
+                </button>
+              </li>
+              <li>
+                <button type="button" class="dropdown-item" data-bs-theme-value="auto" aria-pressed="false">
+                  <span class="theme-icon d-flex fs-base me-2">
+                    <i class="ci-auto"></i>
+                  </span>
+                  <span class="theme-label">Auto</span>
+                  <i class="item-active-indicator ci-check ms-auto"></i>
+                </button>
+              </li>
+            </ul>
+          </div>
+
+          <!-- Search toggle button -->
+          <button type="button" class="btn btn-icon btn-lg fs-xl btn-outline-secondary border-0 rounded-circle animate-shake" data-bs-toggle="offcanvas" data-bs-target="#searchBox" aria-controls="searchBox" aria-label="Toggle search bar">
+            <i class="ci-search animate-target"></i>
+          </button>
+
+          <!-- Account button visible on screens > 768px wide (md breakpoint) -->
+          <a class="btn btn-icon btn-lg fs-lg btn-outline-secondary border-0 rounded-circle animate-shake d-none d-md-inline-flex" href="{{ route('second', ['account', 'signin']) }}">
+            <i class="ci-user animate-target"></i>
+            <span class="visually-hidden">Account</span>
+          </a>
+
+          <!-- Cart button -->
+          <button type="button" class="btn btn-icon btn-lg fs-xl btn-outline-secondary position-relative border-0 rounded-circle animate-scale" data-bs-toggle="offcanvas" data-bs-target="#shoppingCart" aria-controls="shoppingCart" aria-label="Shopping cart">
+            <span class="position-absolute top-0 start-100 badge fs-xs text-bg-primary rounded-pill mt-1 ms-n4 z-2" style="--cz-badge-padding-y: .25em; --cz-badge-padding-x: .42em">3</span>
+            <i class="ci-shopping-bag animate-target me-1"></i>
+          </button>
+        </div>
+      </div>
+    </header>
+
+    <main class="content-wrapper">
+      <div class="container pb-5 mb-2 mb-sm-3 mb-lg-4 mb-xl-5">
+
+        <!-- Breadcrumb -->
+        <ol class="breadcrumb pt-3 mt-2 mt-md-3 mb-md-4">
+          <li class="breadcrumb-item"><a href="{{ route('second', ['home', 'marketplace']) }}">Home</a></li>
+          <li class="breadcrumb-item active" aria-current="page">Catalog with filters on top</li>
+        </ol>
+
+
+        <!-- Page title -->
+        <h1 class="h3 pb-2">Marketplace catalog</h1>
+
+
+        <!-- Filters -->
+        <div class="d-flex flex-column flex-lg-row align-items-lg-center justify-content-between gap-lg-4 mb-2">
+          <div class="overflow-x-auto">
+            <ul class="nav nav-pills flex-nowrap gap-2 text-nowrap pb-3">
+              <li class="nav-item">
+                <a class="nav-link active" aria-current="page" href="#">All products</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="#">Vectors</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="#">Mockups</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="#">Photos</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="#">3D</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="#">AI images</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="#">Templates</a>
+              </li>
+            </ul>
+          </div>
+          <div class="d-flex flex-column flex-sm-row gap-sm-2 pb-1 pb-lg-2">
+            <div class="d-flex align-items-center gap-2 pb-sm-2">
+              <div class="fs-sm fw-semibold text-dark-emphasis me-1">Format:</div>
+              <div style="width: 170px">
+                <select class="form-select border-0 rounded-0 ps-0" data-select='{
+                  "classNames": {
+                    "containerInner": ["form-select", "border-0", "rounded-0", "ps-0"]
+                  },
+                  "removeItemButton": false,
+                  "choices": [
+                    {
+                      "value": "All",
+                      "label": "All formats"
+                    },
+                    {
+                      "value": "Figma",
+                      "label": "<div class=\"d-flex align-items-center\"><img src=\"/img/home/marketplace/formats/figma.png\" class=\"flex-shrink-0 me-2\" width=\"20\" alt=\"Figma\"> Figma</div>"
+                    },
+                    {
+                      "value": "Framer",
+                      "label": "<div class=\"d-flex align-items-center\"><img src=\"/img/home/marketplace/formats/framer.png\" class=\"flex-shrink-0 me-2\" width=\"20\" alt=\"Framer\"> Framer</div>"
+                    },
+                    {
+                      "value": "Illustrator",
+                      "label": "<div class=\"d-flex align-items-center\"><img src=\"/img/home/marketplace/formats/illustrator.png\" class=\"flex-shrink-0 me-2\" width=\"20\" alt=\"Illustrator\"> Illustrator</div>"
+                    },
+                    {
+                      "value": "Webflow",
+                      "label": "<div class=\"d-flex align-items-center\"><img src=\"/img/home/marketplace/formats/webflow.png\" class=\"flex-shrink-0 me-2\" width=\"20\" alt=\"Webflow\"> Webflow</div>"
+                    },
+                    {
+                      "value": "Photoshop",
+                      "label": "<div class=\"d-flex align-items-center\"><img src=\"/img/home/marketplace/formats/photoshop.png\" class=\"flex-shrink-0 me-2\" width=\"20\" alt=\"Photoshop\"> Photoshop</div>"
+                    }
+                  ]
+                }' data-select-template="true" aria-label="Select format"></select>
+              </div>
+            </div>
+            <div class="d-flex align-items-center gap-2 pb-2">
+              <div class="fs-sm fw-semibold text-dark-emphasis text-nowrap me-1">Sort by:</div>
+              <div style="width: 150px">
+                <select class="form-select border-0 rounded-0 ps-0" data-select='{
+                  "classNames": {
+                    "containerInner": ["form-select", "border-0", "rounded-0", "ps-0"]
+                  },
+                  "removeItemButton": false
+                }' aria-label="Sort">
+                  <option value="Best sellers">Best sellers</option>
+                  <option value="Top rated">Top rated</option>
+                  <option value="Newest">Newest</option>
+                </select>
+              </div>
+            </div>
+          </div>
+        </div>
+
+
+        <!-- Products grid -->
+        <div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 g-3 g-sm-4 g-lg-3 g-xl-4">
+
+          <!-- Product -->
+          <div class="col">
+            <div class="card h-100 animate-underline hover-effect-opacity hover-effect-scale rounded-4 overflow-hidden">
+              <div class="card-img-top position-relative bg-body-tertiary overflow-hidden">
+                <a class="ratio d-block hover-effect-target" style="--cz-aspect-ratio: calc(220 / 304 * 100%)" href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                  <img src="/img/shop/marketplace/01.jpg" alt="Image">
+                </a>
+                <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 pt-1 pt-sm-0 pe-1 pe-sm-0 mt-2 mt-sm-3 me-2 me-sm-3">
+                  <button type="button" class="btn btn-sm btn-icon btn-light bg-light border-0 rounded-circle animate-pulse" aria-label="Add to wishlist">
+                    <i class="ci-heart animate-target fs-sm"></i>
+                  </button>
+                </div>
+              </div>
+              <div class="card-body p-3">
+                <div class="d-flex min-w-0 justify-content-between gap-2 gap-sm-3 mb-2">
+                  <h3 class="nav min-w-0 mb-0">
+                    <a class="nav-link text-truncate p-0" href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                      <span class="text-truncate animate-target">Set of two badge identity cards</span>
+                    </a>
+                  </h3>
+                  <div class="h6 mb-0">$8</div>
+                </div>
+                <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
+                  <div class="nav align-items-center gap-1 fs-xs">
+                    <a class="nav-link fs-xs text-body gap-1 p-0" href="#!">
+                      <div class="flex-shrink-0 border rounded-circle" style="width: 22px">
+                        <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
+                          <img src="/img/shop/marketplace/avatars/04.png" alt="Avatar">
+                        </div>
+                      </div>
+                      Fireby
+                    </a>
+                    <div class="text-body-secondary">in</div>
+                    <a class="nav-link fs-xs text-body p-0" href="#!">Mockups</a>
+                  </div>
+                  <div class="fs-xs text-body-secondary">17 sales</div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Product -->
+          <div class="col">
+            <div class="card h-100 animate-underline hover-effect-opacity hover-effect-scale rounded-4 overflow-hidden">
+              <div class="card-img-top position-relative bg-body-tertiary overflow-hidden">
+                <a class="ratio d-block hover-effect-target" style="--cz-aspect-ratio: calc(220 / 304 * 100%)" href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                  <img src="/img/shop/marketplace/02.jpg" alt="Image">
+                </a>
+                <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 pt-1 pt-sm-0 pe-1 pe-sm-0 mt-2 mt-sm-3 me-2 me-sm-3">
+                  <button type="button" class="btn btn-sm btn-icon btn-light bg-light border-0 rounded-circle animate-pulse" aria-label="Add to wishlist">
+                    <i class="ci-heart animate-target fs-sm"></i>
+                  </button>
+                </div>
+              </div>
+              <div class="card-body p-3">
+                <div class="d-flex min-w-0 justify-content-between gap-2 gap-sm-3 mb-2">
+                  <h3 class="nav min-w-0 mb-0">
+                    <a class="nav-link text-truncate p-0" href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                      <span class="text-truncate animate-target">Smart watches series 9 mockup</span>
+                    </a>
+                  </h3>
+                  <div class="h6 mb-0">$15</div>
+                </div>
+                <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
+                  <div class="nav align-items-center gap-1 fs-xs">
+                    <a class="nav-link fs-xs text-body gap-1 p-0" href="#!">
+                      <div class="flex-shrink-0 border rounded-circle" style="width: 22px">
+                        <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
+                          <img src="/img/shop/marketplace/avatars/03.png" alt="Avatar">
+                        </div>
+                      </div>
+                      MD Studio
+                    </a>
+                    <div class="text-body-secondary">in</div>
+                    <a class="nav-link fs-xs text-body p-0" href="#!">Mockups</a>
+                  </div>
+                  <div class="fs-xs text-body-secondary">132 sales</div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Product -->
+          <div class="col">
+            <div class="card h-100 animate-underline hover-effect-opacity hover-effect-scale rounded-4 overflow-hidden">
+              <div class="card-img-top position-relative bg-body-tertiary overflow-hidden">
+                <a class="ratio d-block hover-effect-target" style="--cz-aspect-ratio: calc(220 / 304 * 100%)" href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                  <img src="/img/shop/marketplace/03.jpg" alt="Image">
+                </a>
+                <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 pt-1 pt-sm-0 pe-1 pe-sm-0 mt-2 mt-sm-3 me-2 me-sm-3">
+                  <button type="button" class="btn btn-sm btn-icon btn-light bg-light border-0 rounded-circle animate-pulse" aria-label="Add to wishlist">
+                    <i class="ci-heart animate-target fs-sm"></i>
+                  </button>
+                </div>
+              </div>
+              <div class="card-body p-3">
+                <div class="d-flex min-w-0 justify-content-between gap-2 gap-sm-3 mb-2">
+                  <h3 class="nav min-w-0 mb-0">
+                    <a class="nav-link text-truncate p-0" href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                      <span class="text-truncate animate-target">3D box mockup bold rebrand</span>
+                    </a>
+                  </h3>
+                  <div class="h6 mb-0">$16</div>
+                </div>
+                <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
+                  <div class="nav align-items-center gap-1 fs-xs">
+                    <a class="nav-link fs-xs text-body gap-1 p-0" href="#!">
+                      <div class="flex-shrink-0 border rounded-circle" style="width: 22px">
+                        <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
+                          <img src="/img/shop/marketplace/avatars/01.png" alt="Avatar">
+                        </div>
+                      </div>
+                      Coderthemes
+                    </a>
+                    <div class="text-body-secondary">in</div>
+                    <a class="nav-link fs-xs text-body p-0" href="#!">Mockups</a>
+                  </div>
+                  <div class="fs-xs text-body-secondary">56 sales</div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Product -->
+          <div class="col">
+            <div class="card h-100 animate-underline hover-effect-opacity hover-effect-scale rounded-4 overflow-hidden">
+              <div class="card-img-top position-relative bg-body-tertiary overflow-hidden">
+                <a class="ratio d-block hover-effect-target" style="--cz-aspect-ratio: calc(220 / 304 * 100%)" href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                  <img src="/img/shop/marketplace/04.jpg" alt="Image">
+                </a>
+                <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 pt-1 pt-sm-0 pe-1 pe-sm-0 mt-2 mt-sm-3 me-2 me-sm-3">
+                  <button type="button" class="btn btn-sm btn-icon btn-light bg-light border-0 rounded-circle animate-pulse" aria-label="Add to wishlist">
+                    <i class="ci-heart animate-target fs-sm"></i>
+                  </button>
+                </div>
+              </div>
+              <div class="card-body p-3">
+                <div class="d-flex min-w-0 justify-content-between gap-2 gap-sm-3 mb-2">
+                  <h3 class="nav min-w-0 mb-0">
+                    <a class="nav-link text-truncate p-0" href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                      <span class="text-truncate animate-target">Falling gift cards mockup</span>
+                    </a>
+                  </h3>
+                  <div class="h6 mb-0">$9</div>
+                </div>
+                <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
+                  <div class="nav align-items-center gap-1 fs-xs">
+                    <a class="nav-link fs-xs text-body gap-1 p-0" href="#!">
+                      <div class="flex-shrink-0 border rounded-circle" style="width: 22px">
+                        <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
+                          <img src="/img/shop/marketplace/avatars/02.png" alt="Avatar">
+                        </div>
+                      </div>
+                      Magic FS
+                    </a>
+                    <div class="text-body-secondary">in</div>
+                    <a class="nav-link fs-xs text-body p-0" href="#!">Mockups</a>
+                  </div>
+                  <div class="fs-xs text-body-secondary">34 sales</div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Product -->
+          <div class="col">
+            <div class="card h-100 animate-underline hover-effect-opacity hover-effect-scale rounded-4 overflow-hidden">
+              <div class="card-img-top position-relative bg-body-tertiary overflow-hidden">
+                <a class="ratio d-block hover-effect-target" style="--cz-aspect-ratio: calc(220 / 304 * 100%)" href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                  <img src="/img/shop/marketplace/05.jpg" alt="Image">
+                </a>
+                <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 pt-1 pt-sm-0 pe-1 pe-sm-0 mt-2 mt-sm-3 me-2 me-sm-3">
+                  <button type="button" class="btn btn-sm btn-icon btn-light bg-light border-0 rounded-circle animate-pulse" aria-label="Add to wishlist">
+                    <i class="ci-heart animate-target fs-sm"></i>
+                  </button>
+                </div>
+              </div>
+              <div class="card-body p-3">
+                <div class="d-flex min-w-0 justify-content-between gap-2 gap-sm-3 mb-2">
+                  <h3 class="nav min-w-0 mb-0">
+                    <a class="nav-link text-truncate p-0" href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                      <span class="text-truncate animate-target">City sign design mockup</span>
+                    </a>
+                  </h3>
+                  <div class="h6 mb-0">$12</div>
+                </div>
+                <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
+                  <div class="nav align-items-center gap-1 fs-xs">
+                    <a class="nav-link fs-xs text-body gap-1 p-0" href="#!">
+                      <div class="flex-shrink-0 border rounded-circle" style="width: 22px">
+                        <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
+                          <img src="/img/shop/marketplace/avatars/01.png" alt="Avatar">
+                        </div>
+                      </div>
+                      Coderthemes
+                    </a>
+                    <div class="text-body-secondary">in</div>
+                    <a class="nav-link fs-xs text-body p-0" href="#!">Mockups</a>
+                  </div>
+                  <div class="fs-xs text-body-secondary">23 sales</div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Product -->
+          <div class="col">
+            <div class="card h-100 animate-underline hover-effect-opacity hover-effect-scale rounded-4 overflow-hidden">
+              <div class="card-img-top position-relative bg-body-tertiary overflow-hidden">
+                <a class="ratio d-block hover-effect-target" style="--cz-aspect-ratio: calc(220 / 304 * 100%)" href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                  <img src="/img/shop/marketplace/06.jpg" alt="Image">
+                </a>
+                <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 pt-1 pt-sm-0 pe-1 pe-sm-0 mt-2 mt-sm-3 me-2 me-sm-3">
+                  <button type="button" class="btn btn-sm btn-icon btn-light bg-light border-0 rounded-circle animate-pulse" aria-label="Add to wishlist">
+                    <i class="ci-heart animate-target fs-sm"></i>
+                  </button>
+                </div>
+              </div>
+              <div class="card-body p-3">
+                <div class="d-flex min-w-0 justify-content-between gap-2 gap-sm-3 mb-2">
+                  <h3 class="nav min-w-0 mb-0">
+                    <a class="nav-link text-truncate p-0" href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                      <span class="text-truncate animate-target">A stunning set of tablet pro mockups</span>
+                    </a>
+                  </h3>
+                  <div class="h6 mb-0">$18</div>
+                </div>
+                <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
+                  <div class="nav align-items-center gap-1 fs-xs">
+                    <a class="nav-link fs-xs text-body gap-1 p-0" href="#!">
+                      <div class="flex-shrink-0 border rounded-circle" style="width: 22px">
+                        <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
+                          <img src="/img/shop/marketplace/avatars/04.png" alt="Avatar">
+                        </div>
+                      </div>
+                      Fireby
+                    </a>
+                    <div class="text-body-secondary">in</div>
+                    <a class="nav-link fs-xs text-body p-0" href="#!">Mockups</a>
+                  </div>
+                  <div class="fs-xs text-body-secondary">33 sales</div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Product -->
+          <div class="col">
+            <div class="card h-100 animate-underline hover-effect-opacity hover-effect-scale rounded-4 overflow-hidden">
+              <div class="card-img-top position-relative bg-body-tertiary overflow-hidden">
+                <a class="ratio d-block hover-effect-target" style="--cz-aspect-ratio: calc(220 / 304 * 100%)" href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                  <img src="/img/shop/marketplace/07.jpg" alt="Image">
+                </a>
+                <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 pt-1 pt-sm-0 pe-1 pe-sm-0 mt-2 mt-sm-3 me-2 me-sm-3">
+                  <button type="button" class="btn btn-sm btn-icon btn-light bg-light border-0 rounded-circle animate-pulse" aria-label="Add to wishlist">
+                    <i class="ci-heart animate-target fs-sm"></i>
+                  </button>
+                </div>
+              </div>
+              <div class="card-body p-3">
+                <div class="d-flex min-w-0 justify-content-between gap-2 gap-sm-3 mb-2">
+                  <h3 class="nav min-w-0 mb-0">
+                    <a class="nav-link text-truncate p-0" href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                      <span class="text-truncate animate-target">Isometric smartphone mockups</span>
+                    </a>
+                  </h3>
+                  <div class="h6 mb-0">$24</div>
+                </div>
+                <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
+                  <div class="nav align-items-center gap-1 fs-xs">
+                    <a class="nav-link fs-xs text-body gap-1 p-0" href="#!">
+                      <div class="flex-shrink-0 border rounded-circle" style="width: 22px">
+                        <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
+                          <img src="/img/shop/marketplace/avatars/03.png" alt="Avatar">
+                        </div>
+                      </div>
+                      MD Studio
+                    </a>
+                    <div class="text-body-secondary">in</div>
+                    <a class="nav-link fs-xs text-body p-0" href="#!">Mockups</a>
+                  </div>
+                  <div class="fs-xs text-body-secondary">95 sales</div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Product -->
+          <div class="col">
+            <div class="card h-100 animate-underline hover-effect-opacity hover-effect-scale rounded-4 overflow-hidden">
+              <div class="card-img-top position-relative bg-body-tertiary overflow-hidden">
+                <a class="ratio d-block hover-effect-target" style="--cz-aspect-ratio: calc(220 / 304 * 100%)" href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                  <img src="/img/shop/marketplace/08.jpg" alt="Image">
+                </a>
+                <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 pt-1 pt-sm-0 pe-1 pe-sm-0 mt-2 mt-sm-3 me-2 me-sm-3">
+                  <button type="button" class="btn btn-sm btn-icon btn-light bg-light border-0 rounded-circle animate-pulse" aria-label="Add to wishlist">
+                    <i class="ci-heart animate-target fs-sm"></i>
+                  </button>
+                </div>
+              </div>
+              <div class="card-body p-3">
+                <div class="d-flex min-w-0 justify-content-between gap-2 gap-sm-3 mb-2">
+                  <h3 class="nav min-w-0 mb-0">
+                    <a class="nav-link text-truncate p-0" href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                      <span class="text-truncate animate-target">iPhone 15 pro mockups</span>
+                    </a>
+                  </h3>
+                  <div class="h6 mb-0">$19</div>
+                </div>
+                <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
+                  <div class="nav align-items-center gap-1 fs-xs">
+                    <a class="nav-link fs-xs text-body gap-1 p-0" href="#!">
+                      <div class="flex-shrink-0 border rounded-circle" style="width: 22px">
+                        <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
+                          <img src="/img/shop/marketplace/avatars/01.png" alt="Avatar">
+                        </div>
+                      </div>
+                      Coderthemes
+                    </a>
+                    <div class="text-body-secondary">in</div>
+                    <a class="nav-link fs-xs text-body p-0" href="#!">Mockups</a>
+                  </div>
+                  <div class="fs-xs text-body-secondary">47 sales</div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Product -->
+          <div class="col">
+            <div class="card h-100 animate-underline hover-effect-opacity hover-effect-scale rounded-4 overflow-hidden">
+              <div class="card-img-top position-relative bg-body-tertiary overflow-hidden">
+                <a class="ratio d-block hover-effect-target" style="--cz-aspect-ratio: calc(220 / 304 * 100%)" href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                  <img src="/img/shop/marketplace/09.jpg" alt="Image">
+                </a>
+                <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 pt-1 pt-sm-0 pe-1 pe-sm-0 mt-2 mt-sm-3 me-2 me-sm-3">
+                  <button type="button" class="btn btn-sm btn-icon btn-light bg-light border-0 rounded-circle animate-pulse" aria-label="Add to wishlist">
+                    <i class="ci-heart animate-target fs-sm"></i>
+                  </button>
+                </div>
+              </div>
+              <div class="card-body p-3">
+                <div class="d-flex min-w-0 justify-content-between gap-2 gap-sm-3 mb-2">
+                  <h3 class="nav min-w-0 mb-0">
+                    <a class="nav-link text-truncate p-0" href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                      <span class="text-truncate animate-target">A collection of colorful items</span>
+                    </a>
+                  </h3>
+                  <div class="h6 mb-0">$21</div>
+                </div>
+                <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
+                  <div class="nav align-items-center gap-1 fs-xs">
+                    <a class="nav-link fs-xs text-body gap-1 p-0" href="#!">
+                      <div class="flex-shrink-0 border rounded-circle" style="width: 22px">
+                        <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
+                          <img src="/img/shop/marketplace/avatars/04.png" alt="Avatar">
+                        </div>
+                      </div>
+                      Fireby
+                    </a>
+                    <div class="text-body-secondary">in</div>
+                    <a class="nav-link fs-xs text-body p-0" href="#!">3D illustration</a>
+                  </div>
+                  <div class="fs-xs text-body-secondary">78 sales</div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Product -->
+          <div class="col">
+            <div class="card h-100 animate-underline hover-effect-opacity hover-effect-scale rounded-4 overflow-hidden">
+              <div class="card-img-top position-relative bg-body-tertiary overflow-hidden">
+                <a class="ratio d-block hover-effect-target" style="--cz-aspect-ratio: calc(220 / 304 * 100%)" href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                  <img src="/img/shop/marketplace/10.jpg" alt="Image">
+                </a>
+                <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 pt-1 pt-sm-0 pe-1 pe-sm-0 mt-2 mt-sm-3 me-2 me-sm-3">
+                  <button type="button" class="btn btn-sm btn-icon btn-light bg-light border-0 rounded-circle animate-pulse" aria-label="Add to wishlist">
+                    <i class="ci-heart animate-target fs-sm"></i>
+                  </button>
+                </div>
+              </div>
+              <div class="card-body p-3">
+                <div class="d-flex min-w-0 justify-content-between gap-2 gap-sm-3 mb-2">
+                  <h3 class="nav min-w-0 mb-0">
+                    <a class="nav-link text-truncate p-0" href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                      <span class="text-truncate animate-target">Smartphone mockups for UI designs</span>
+                    </a>
+                  </h3>
+                  <div class="h6 mb-0">$18</div>
+                </div>
+                <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
+                  <div class="nav align-items-center gap-1 fs-xs">
+                    <a class="nav-link fs-xs text-body gap-1 p-0" href="#!">
+                      <div class="flex-shrink-0 border rounded-circle" style="width: 22px">
+                        <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
+                          <img src="/img/shop/marketplace/avatars/01.png" alt="Avatar">
+                        </div>
+                      </div>
+                      Coderthemes
+                    </a>
+                    <div class="text-body-secondary">in</div>
+                    <a class="nav-link fs-xs text-body p-0" href="#!">Mockups</a>
+                  </div>
+                  <div class="fs-xs text-body-secondary">152 sales</div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Product -->
+          <div class="col">
+            <div class="card h-100 animate-underline hover-effect-opacity hover-effect-scale rounded-4 overflow-hidden">
+              <div class="card-img-top position-relative bg-body-tertiary overflow-hidden">
+                <a class="ratio d-block hover-effect-target" style="--cz-aspect-ratio: calc(220 / 304 * 100%)" href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                  <img src="/img/shop/marketplace/11.jpg" alt="Image">
+                </a>
+                <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 pt-1 pt-sm-0 pe-1 pe-sm-0 mt-2 mt-sm-3 me-2 me-sm-3">
+                  <button type="button" class="btn btn-sm btn-icon btn-light bg-light border-0 rounded-circle animate-pulse" aria-label="Add to wishlist">
+                    <i class="ci-heart animate-target fs-sm"></i>
+                  </button>
+                </div>
+              </div>
+              <div class="card-body p-3">
+                <div class="d-flex min-w-0 justify-content-between gap-2 gap-sm-3 mb-2">
+                  <h3 class="nav min-w-0 mb-0">
+                    <a class="nav-link text-truncate p-0" href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                      <span class="text-truncate animate-target">A collection of colorful items</span>
+                    </a>
+                  </h3>
+                  <div class="h6 mb-0">$15</div>
+                </div>
+                <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
+                  <div class="nav align-items-center gap-1 fs-xs">
+                    <a class="nav-link fs-xs text-body gap-1 p-0" href="#!">
+                      <div class="flex-shrink-0 border rounded-circle" style="width: 22px">
+                        <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
+                          <img src="/img/shop/marketplace/avatars/04.png" alt="Avatar">
+                        </div>
+                      </div>
+                      Fireby
+                    </a>
+                    <div class="text-body-secondary">in</div>
+                    <a class="nav-link fs-xs text-body p-0" href="#!">Mockups</a>
+                  </div>
+                  <div class="fs-xs text-body-secondary">86 sales</div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Product -->
+          <div class="col">
+            <div class="card h-100 animate-underline hover-effect-opacity hover-effect-scale rounded-4 overflow-hidden">
+              <div class="card-img-top position-relative bg-body-tertiary overflow-hidden">
+                <a class="ratio d-block hover-effect-target" style="--cz-aspect-ratio: calc(220 / 304 * 100%)" href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                  <img src="/img/shop/marketplace/12.jpg" alt="Image">
+                </a>
+                <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 pt-1 pt-sm-0 pe-1 pe-sm-0 mt-2 mt-sm-3 me-2 me-sm-3">
+                  <button type="button" class="btn btn-sm btn-icon btn-light bg-light border-0 rounded-circle animate-pulse" aria-label="Add to wishlist">
+                    <i class="ci-heart animate-target fs-sm"></i>
+                  </button>
+                </div>
+              </div>
+              <div class="card-body p-3">
+                <div class="d-flex min-w-0 justify-content-between gap-2 gap-sm-3 mb-2">
+                  <h3 class="nav min-w-0 mb-0">
+                    <a class="nav-link text-truncate p-0" href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                      <span class="text-truncate animate-target">Gradient glassmorphism icons set</span>
+                    </a>
+                  </h3>
+                  <div class="h6 mb-0">$34</div>
+                </div>
+                <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
+                  <div class="nav align-items-center gap-1 fs-xs">
+                    <a class="nav-link fs-xs text-body gap-1 p-0" href="#!">
+                      <div class="flex-shrink-0 border rounded-circle" style="width: 22px">
+                        <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
+                          <img src="/img/shop/marketplace/avatars/02.png" alt="Avatar">
+                        </div>
+                      </div>
+                      Magic FS
+                    </a>
+                    <div class="text-body-secondary">in</div>
+                    <a class="nav-link fs-xs text-body p-0" href="#!">Vectors</a>
+                  </div>
+                  <div class="fs-xs text-body-secondary">119 sales</div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Product -->
+          <div class="col">
+            <div class="card h-100 animate-underline hover-effect-opacity hover-effect-scale rounded-4 overflow-hidden">
+              <div class="card-img-top position-relative bg-body-tertiary overflow-hidden">
+                <a class="ratio d-block hover-effect-target" style="--cz-aspect-ratio: calc(220 / 304 * 100%)" href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                  <img src="/img/shop/marketplace/13.jpg" alt="Image">
+                </a>
+                <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 pt-1 pt-sm-0 pe-1 pe-sm-0 mt-2 mt-sm-3 me-2 me-sm-3">
+                  <button type="button" class="btn btn-sm btn-icon btn-light bg-light border-0 rounded-circle animate-pulse" aria-label="Add to wishlist">
+                    <i class="ci-heart animate-target fs-sm"></i>
+                  </button>
+                </div>
+              </div>
+              <div class="card-body p-3">
+                <div class="d-flex min-w-0 justify-content-between gap-2 gap-sm-3 mb-2">
+                  <h3 class="nav min-w-0 mb-0">
+                    <a class="nav-link text-truncate p-0" href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                      <span class="text-truncate animate-target">Multi device mockup PSD</span>
+                    </a>
+                  </h3>
+                  <div class="h6 mb-0">$27</div>
+                </div>
+                <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
+                  <div class="nav align-items-center gap-1 fs-xs">
+                    <a class="nav-link fs-xs text-body gap-1 p-0" href="#!">
+                      <div class="flex-shrink-0 border rounded-circle" style="width: 22px">
+                        <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
+                          <img src="/img/shop/marketplace/avatars/01.png" alt="Avatar">
+                        </div>
+                      </div>
+                      Coderthemes
+                    </a>
+                    <div class="text-body-secondary">in</div>
+                    <a class="nav-link fs-xs text-body p-0" href="#!">Mockups</a>
+                  </div>
+                  <div class="fs-xs text-body-secondary">43 sales</div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Product -->
+          <div class="col">
+            <div class="card h-100 animate-underline hover-effect-opacity hover-effect-scale rounded-4 overflow-hidden">
+              <div class="card-img-top position-relative bg-body-tertiary overflow-hidden">
+                <a class="ratio d-block hover-effect-target" style="--cz-aspect-ratio: calc(220 / 304 * 100%)" href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                  <img src="/img/shop/marketplace/16.jpg" alt="Image">
+                </a>
+                <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 pt-1 pt-sm-0 pe-1 pe-sm-0 mt-2 mt-sm-3 me-2 me-sm-3">
+                  <button type="button" class="btn btn-sm btn-icon btn-light bg-light border-0 rounded-circle animate-pulse" aria-label="Add to wishlist">
+                    <i class="ci-heart animate-target fs-sm"></i>
+                  </button>
+                </div>
+              </div>
+              <div class="card-body p-3">
+                <div class="d-flex min-w-0 justify-content-between gap-2 gap-sm-3 mb-2">
+                  <h3 class="nav min-w-0 mb-0">
+                    <a class="nav-link text-truncate p-0" href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                      <span class="text-truncate animate-target">Modern poster mockup</span>
+                    </a>
+                  </h3>
+                  <div class="h6 mb-0">$9</div>
+                </div>
+                <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
+                  <div class="nav align-items-center gap-1 fs-xs">
+                    <a class="nav-link fs-xs text-body gap-1 p-0" href="#!">
+                      <div class="flex-shrink-0 border rounded-circle" style="width: 22px">
+                        <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
+                          <img src="/img/shop/marketplace/avatars/04.png" alt="Avatar">
+                        </div>
+                      </div>
+                      Fireby
+                    </a>
+                    <div class="text-body-secondary">in</div>
+                    <a class="nav-link fs-xs text-body p-0" href="#!">Mockups</a>
+                  </div>
+                  <div class="fs-xs text-body-secondary">10 sales</div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Product -->
+          <div class="col">
+            <div class="card h-100 animate-underline hover-effect-opacity hover-effect-scale rounded-4 overflow-hidden">
+              <div class="card-img-top position-relative bg-body-tertiary overflow-hidden">
+                <a class="ratio d-block hover-effect-target" style="--cz-aspect-ratio: calc(220 / 304 * 100%)" href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                  <img src="/img/shop/marketplace/17.jpg" alt="Image">
+                </a>
+                <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 pt-1 pt-sm-0 pe-1 pe-sm-0 mt-2 mt-sm-3 me-2 me-sm-3">
+                  <button type="button" class="btn btn-sm btn-icon btn-light bg-light border-0 rounded-circle animate-pulse" aria-label="Add to wishlist">
+                    <i class="ci-heart animate-target fs-sm"></i>
+                  </button>
+                </div>
+              </div>
+              <div class="card-body p-3">
+                <div class="d-flex min-w-0 justify-content-between gap-2 gap-sm-3 mb-2">
+                  <h3 class="nav min-w-0 mb-0">
+                    <a class="nav-link text-truncate p-0" href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                      <span class="text-truncate animate-target">A stunning set of tablet pro mockups</span>
+                    </a>
+                  </h3>
+                  <div class="h6 mb-0">$16</div>
+                </div>
+                <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
+                  <div class="nav align-items-center gap-1 fs-xs">
+                    <a class="nav-link fs-xs text-body gap-1 p-0" href="#!">
+                      <div class="flex-shrink-0 border rounded-circle" style="width: 22px">
+                        <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
+                          <img src="/img/shop/marketplace/avatars/01.png" alt="Avatar">
+                        </div>
+                      </div>
+                      Coderthemes
+                    </a>
+                    <div class="text-body-secondary">in</div>
+                    <a class="nav-link fs-xs text-body p-0" href="#!">Mockups</a>
+                  </div>
+                  <div class="fs-xs text-body-secondary">65 sales</div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Product -->
+          <div class="col">
+            <div class="card h-100 animate-underline hover-effect-opacity hover-effect-scale rounded-4 overflow-hidden">
+              <div class="card-img-top position-relative bg-body-tertiary overflow-hidden">
+                <a class="ratio d-block hover-effect-target" style="--cz-aspect-ratio: calc(220 / 304 * 100%)" href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                  <img src="/img/shop/marketplace/18.jpg" alt="Image">
+                </a>
+                <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 pt-1 pt-sm-0 pe-1 pe-sm-0 mt-2 mt-sm-3 me-2 me-sm-3">
+                  <button type="button" class="btn btn-sm btn-icon btn-light bg-light border-0 rounded-circle animate-pulse" aria-label="Add to wishlist">
+                    <i class="ci-heart animate-target fs-sm"></i>
+                  </button>
+                </div>
+              </div>
+              <div class="card-body p-3">
+                <div class="d-flex min-w-0 justify-content-between gap-2 gap-sm-3 mb-2">
+                  <h3 class="nav min-w-0 mb-0">
+                    <a class="nav-link text-truncate p-0" href="{{ route('second', ['shop', 'product-marketplace']) }}">
+                      <span class="text-truncate animate-target">House plants website template</span>
+                    </a>
+                  </h3>
+                  <div class="h6 mb-0">$35</div>
+                </div>
+                <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
+                  <div class="nav align-items-center gap-1 fs-xs">
+                    <a class="nav-link fs-xs text-body gap-1 p-0" href="{{ route('second', ['shop', 'catalog-marketplace']) }}">
+                      <div class="flex-shrink-0 border rounded-circle" style="width: 22px">
+                        <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
+                          <img src="/img/shop/marketplace/avatars/02.png" alt="Avatar">
+                        </div>
+                      </div>
+                      Magic FS
+                    </a>
+                    <div class="text-body-secondary">in</div>
+                    <a class="nav-link fs-xs text-body p-0" href="{{ route('second', ['shop', 'catalog-marketplace']) }}">Templates</a>
+                  </div>
+                  <div class="fs-xs text-body-secondary">192 sales</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+
+        <!-- Pagination -->
+        <nav class="pt-4 mt-2 mt-sm-3" aria-label="Pagination">
+          <ul class="pagination pagination-lg">
+            <li class="page-item disabled me-auto">
+              <a class="page-link d-flex align-items-center h-100 fs-lg px-2" href="#!" aria-label="Previous page">
+                <i class="ci-chevron-left mx-1"></i>
+              </a>
+            </li>
+            <li class="page-item active" aria-current="page">
+              <span class="page-link">
+                1
+                <span class="visually-hidden">(current)</span>
+              </span>
+            </li>
+            <li class="page-item">
+              <a class="page-link" href="#!">2</a>
+            </li>
+            <li class="page-item">
+              <a class="page-link" href="#!">3</a>
+            </li>
+            <li class="page-item">
+              <span class="page-link pe-none">...</span>
+            </li>
+            <li class="page-item">
+              <a class="page-link" href="#!">16</a>
+            </li>
+            <li class="page-item ms-auto">
+              <a class="page-link d-flex align-items-center h-100 fs-lg px-2" href="#!" aria-label="Next page">
+                <i class="ci-chevron-right mx-1"></i>
+              </a>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </main>
+
+    @include('layouts.partials/footer3')
+@endsection
+
+@section('scripts')
+@endsection
diff --git a/resources/views/shop/categories-electronics.blade.php b/resources/views/shop/categories-electronics.blade.php
new file mode 100644
index 0000000..66f3e1d
--- /dev/null
+++ b/resources/views/shop/categories-electronics.blade.php
@@ -0,0 +1,1206 @@
+@extends('layouts.landing', ['title' => 'Electronics Store - Categories'])
+
+@section('content')
+    @include('layouts.partials/offcanvas')
+
+    @include('layouts.partials/navbar', ['wishlist' => True])
+
+    <main class="content-wrapper">
+
+      <!-- Breadcrumb -->
+      <nav class="container pt-3 my-3 my-md-4" aria-label="breadcrumb">
+        <ol class="breadcrumb">
+          <li class="breadcrumb-item"><a href="{{ route('second', ['home', 'electronics']) }}">Home</a></li>
+          <li class="breadcrumb-item active" aria-current="page">Categories</li>
+        </ol>
+      </nav>
+
+
+      <!-- Page title -->
+      <h1 class="h3 container mb-sm-4">Shop categories</h1>
+
+
+      <!-- Brands -->
+      <section class="container mb-4">
+        <div class="overflow-auto" data-simplebar data-simplebar-auto-hide="false">
+          <div class="row row-cols-6 g-0" style="min-width: 960px">
+            <div class="col">
+              <a class="d-flex justify-content-center py-3 px-2 px-xl-3" href="{{ route('second', ['shop', 'catalog-electronics']) }}">
+                <div class="ratio" style="max-width: 164px; --cz-aspect-ratio: calc(80 / 164 * 100%)">
+                  <img src="/img/shop/electronics/brands/apple-light-mode.svg" class="d-none-dark" alt="Apple">
+                  <img src="/img/shop/electronics/brands/apple-dark-mode.svg" class="d-none d-block-dark" alt="Apple">
+                </div>
+              </a>
+            </div>
+            <div class="col">
+              <a class="d-flex justify-content-center py-3 px-2 px-xl-3" href="{{ route('second', ['shop', 'catalog-electronics']) }}">
+                <img src="/img/shop/electronics/brands/motorola-light-mode.svg" class="d-none-dark" alt="Motorola">
+                <img src="/img/shop/electronics/brands/motorola-dark-mode.svg" class="d-none d-block-dark" alt="Motorola">
+              </a>
+            </div>
+            <div class="col">
+              <a class="d-flex justify-content-center py-3 px-2 px-xl-3" href="{{ route('second', ['shop', 'catalog-electronics']) }}">
+                <img src="/img/shop/electronics/brands/xiaomi-light-mode.svg" class="d-none-dark" alt="Xiaomi">
+                <img src="/img/shop/electronics/brands/xiaomi-dark-mode.svg" class="d-none d-block-dark" alt="Xiaomi">
+              </a>
+            </div>
+            <div class="col">
+              <a class="d-flex justify-content-center py-3 px-2 px-xl-3" href="{{ route('second', ['shop', 'catalog-electronics']) }}">
+                <img src="/img/shop/electronics/brands/canon-light-mode.svg" class="d-none-dark" alt="Canon">
+                <img src="/img/shop/electronics/brands/canon-dark-mode.svg" class="d-none d-block-dark" alt="Canon">
+              </a>
+            </div>
+            <div class="col">
+              <a class="d-flex justify-content-center py-3 px-2 px-xl-3" href="{{ route('second', ['shop', 'catalog-electronics']) }}">
+                <img src="/img/shop/electronics/brands/samsung-light-mode.svg" class="d-none-dark" alt="Samsung">
+                <img src="/img/shop/electronics/brands/samsung-dark-mode.svg" class="d-none d-block-dark" alt="Samsung">
+              </a>
+            </div>
+            <div class="col">
+              <a class="d-flex justify-content-center py-3 px-2 px-xl-3" href="{{ route('second', ['shop', 'catalog-electronics']) }}">
+                <img src="/img/shop/electronics/brands/sony-light-mode.svg" class="d-none-dark" alt="Sony">
+                <img src="/img/shop/electronics/brands/sony-dark-mode.svg" class="d-none d-block-dark" alt="Sony">
+              </a>
+            </div>
+          </div>
+        </div>
+      </section>
+
+
+      <!-- Category cards -->
+      <section class="container">
+        <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 gy-5">
+
+          <!-- Category -->
+          <div class="col">
+            <div class="hover-effect-scale">
+              <a class="d-block bg-body-tertiary rounded p-4 mb-4" href="{{ route('second', ['shop', 'catalog-electronics']) }}">
+                <div class="ratio" style="--cz-aspect-ratio: calc(184 / 258 * 100%)">
+                  <img src="/img/shop/electronics/categories/01.png" class="hover-effect-target" alt="Smartphones">
+                </div>
+              </a>
+              <h2 class="h6 d-flex w-100 pb-2 mb-1">
+                <a class="animate-underline animate-target d-inline text-truncate" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Smartphones</a>
+              </h2>
+              <ul class="nav flex-column gap-2 mt-n1">
+                <li class="d-flex w-100 pt-1">
+                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Apple iPhone</a>
+                </li>
+                <li class="d-flex w-100 pt-1">
+                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Samsung</a>
+                </li>
+                <li class="d-flex w-100 pt-1">
+                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Xiaomi</a>
+                </li>
+                <li class="d-flex w-100 pt-1">
+                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Nokia</a>
+                </li>
+                <li class="d-flex w-100 pt-1">
+                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Meizu</a>
+                </li>
+              </ul>
+            </div>
+          </div>
+
+          <!-- Category -->
+          <div class="col">
+            <div class="hover-effect-scale">
+              <a class="d-block bg-body-tertiary rounded p-4 mb-4" href="{{ route('second', ['shop', 'catalog-electronics']) }}">
+                <div class="ratio" style="--cz-aspect-ratio: calc(184 / 258 * 100%)">
+                  <img src="/img/shop/electronics/categories/02.png" class="hover-effect-target" alt="Powerbank">
+                </div>
+              </a>
+              <h2 class="h6 d-flex w-100 pb-2 mb-1">
+                <a class="animate-underline animate-target d-inline text-truncate" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Accessories</a>
+              </h2>
+              <ul class="nav flex-column gap-2 mt-n1">
+                <li class="d-flex w-100 pt-1">
+                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Accessory Kits</a>
+                </li>
+                <li class="d-flex w-100 pt-1">
+                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Batteries &amp; Battery Packs</a>
+                </li>
+                <li class="d-flex w-100 pt-1">
+                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Cables</a>
+                </li>
+                <li class="d-flex w-100 pt-1">
+                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Car Accessories</a>
+                </li>
+                <li class="d-flex w-100 pt-1">
+                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Charges &amp; Power Adapters</a>
+                </li>
+                <li class="d-flex w-100 pt-1">
+                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">FM Transmitters</a>
+                </li>
+              </ul>
+            </div>
+          </div>
+
+          <!-- Category -->
+          <div class="col">
+            <div class="hover-effect-scale">
+              <a class="d-block bg-body-tertiary rounded p-4 mb-4" href="{{ route('second', ['shop', 'catalog-electronics']) }}">
+                <div class="ratio" style="--cz-aspect-ratio: calc(184 / 258 * 100%)">
+                  <img src="/img/shop/electronics/categories/03.png" class="hover-effect-target" alt="Tablets">
+                </div>
+              </a>
+              <h2 class="h6 d-flex w-100 pb-2 mb-1">
+                <a class="animate-underline animate-target d-inline text-truncate" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Tablets</a>
+              </h2>
+              <ul class="nav flex-column gap-2 mt-n1">
+                <li class="d-flex w-100 pt-1">
+                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Apple iPad</a>
+                </li>
+                <li class="d-flex w-100 pt-1">
+                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Android Tablets</a>
+                </li>
+                <li class="d-flex w-100 pt-1">
+                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Samsung</a>
+                </li>
+                <li class="d-flex w-100 pt-1">
+                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Xiaomi</a>
+                </li>
+                <li class="d-flex w-100 pt-1">
+                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Lenovo</a>
+                </li>
+              </ul>
+            </div>
+          </div>
+
+          <!-- Category -->
+          <div class="col">
+            <div class="hover-effect-scale">
+              <a class="d-block bg-body-tertiary rounded p-4 mb-4" href="{{ route('second', ['shop', 'catalog-electronics']) }}">
+                <div class="ratio" style="--cz-aspect-ratio: calc(184 / 258 * 100%)">
+                  <img src="/img/shop/electronics/categories/04.png" class="hover-effect-target" alt="Wearable Electronics">
+                </div>
+              </a>
+              <h2 class="h6 d-flex w-100 pb-2 mb-1">
+                <a class="animate-underline animate-target d-inline text-truncate" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Wearable Electronics</a>
+              </h2>
+              <ul class="nav flex-column gap-2 mt-n1">
+                <li class="d-flex w-100 pt-1">
+                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Smart Watches</a>
+                </li>
+                <li class="d-flex w-100 pt-1">
+                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Fitness Trackers</a>
+                </li>
+                <li class="d-flex w-100 pt-1">
+                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Smart Glasses</a>
+                </li>
+                <li class="d-flex w-100 pt-1">
+                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">E-books</a>
+                </li>
+                <li class="d-flex w-100 pt-1">
+                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Clips, Arm &amp; Wristbands</a>
+                </li>
+                <li class="d-flex w-100 pt-1">
+                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Voice Recorders</a>
+                </li>
+              </ul>
+            </div>
+          </div>
+
+          <!-- Category -->
+          <div class="col">
+            <div class="hover-effect-scale">
+              <a class="d-block bg-body-tertiary rounded p-4 mb-4" href="{{ route('second', ['shop', 'catalog-electronics']) }}">
+                <div class="ratio" style="--cz-aspect-ratio: calc(184 / 258 * 100%)">
+                  <img src="/img/shop/electronics/categories/05.png" class="hover-effect-target" alt="Computers">
+                </div>
+              </a>
+              <h2 class="h6 d-flex w-100 pb-2 mb-1">
+                <a class="animate-underline animate-target d-inline text-truncate" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Computers &amp; Laptops</a>
+              </h2>
+              <ul class="nav flex-column gap-2 mt-n1">
+                <li class="d-flex w-100 pt-1">
+                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Asus</a>
+                </li>
+                <li class="d-flex w-100 pt-1">
+                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Acer</a>
+                </li>
+                <li class="d-flex w-100 pt-1">
+                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">HP (Hewlett Packard)</a>
+                </li>
+                <li class="d-flex w-100 pt-1">
+                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Lenovo</a>
+                </li>
+                <li class="d-flex w-100 pt-1">
+                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Apple MacBook</a>
+                </li>
+              </ul>
+            </div>
+          </div>
+
+          <!-- Category -->
+          <div class="col">
+            <div class="hover-effect-scale">
+              <a class="d-block bg-body-tertiary rounded p-4 mb-4" href="{{ route('second', ['shop', 'catalog-electronics']) }}">
+                <div class="ratio" style="--cz-aspect-ratio: calc(184 / 258 * 100%)">
+                  <img src="/img/shop/electronics/categories/06.png" class="hover-effect-target" alt="Cameras">
+                </div>
+              </a>
+              <h2 class="h6 d-flex w-100 pb-2 mb-1">
+                <a class="animate-underline animate-target d-inline text-truncate" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Cameras, Photo &amp; Video</a>
+              </h2>
+              <ul class="nav flex-column gap-2 mt-n1">
+                <li class="d-flex w-100 pt-1">
+                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Photo Cameras</a>
+                </li>
+                <li class="d-flex w-100 pt-1">
+                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Video Cameras</a>
+                </li>
+                <li class="d-flex w-100 pt-1">
+                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Action Cameras</a>
+                </li>
+                <li class="d-flex w-100 pt-1">
+                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Camcorders</a>
+                </li>
+                <li class="d-flex w-100 pt-1">
+                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Studio Equipment</a>
+                </li>
+                <li class="d-flex w-100 pt-1">
+                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Tripods</a>
+                </li>
+                <li class="d-flex w-100 pt-1">
+                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Bags and Covers</a>
+                </li>
+              </ul>
+            </div>
+          </div>
+
+          <!-- Category -->
+          <div class="col">
+            <div class="hover-effect-scale">
+              <a class="d-block bg-body-tertiary rounded p-4 mb-4" href="{{ route('second', ['shop', 'catalog-electronics']) }}">
+                <div class="ratio" style="--cz-aspect-ratio: calc(184 / 258 * 100%)">
+                  <img src="/img/shop/electronics/categories/07.png" class="hover-effect-target" alt="Headphones">
+                </div>
+              </a>
+              <h2 class="h6 d-flex w-100 pb-2 mb-1">
+                <a class="animate-underline animate-target d-inline text-truncate" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Headphones</a>
+              </h2>
+              <ul class="nav flex-column gap-2 mt-n1">
+                <li class="d-flex w-100 pt-1">
+                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Apple</a>
+                </li>
+                <li class="d-flex w-100 pt-1">
+                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Defunc</a>
+                </li>
+                <li class="d-flex w-100 pt-1">
+                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">HyperX</a>
+                </li>
+                <li class="d-flex w-100 pt-1">
+                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">JBL</a>
+                </li>
+                <li class="d-flex w-100 pt-1">
+                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Logitech</a>
+                </li>
+                <li class="d-flex w-100 pt-1">
+                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Panasonic</a>
+                </li>
+              </ul>
+            </div>
+          </div>
+
+          <!-- Category -->
+          <div class="col">
+            <div class="hover-effect-scale">
+              <a class="d-block bg-body-tertiary rounded p-4 mb-4" href="{{ route('second', ['shop', 'catalog-electronics']) }}">
+                <div class="ratio" style="--cz-aspect-ratio: calc(184 / 258 * 100%)">
+                  <img src="/img/shop/electronics/categories/08.png" class="hover-effect-target" alt="Video Games">
+                </div>
+              </a>
+              <h2 class="h6 d-flex w-100 pb-2 mb-1">
+                <a class="animate-underline animate-target d-inline text-truncate" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Video Games</a>
+              </h2>
+              <ul class="nav flex-column gap-2 mt-n1">
+                <li class="d-flex w-100 pt-1">
+                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">PlayStation 5</a>
+                </li>
+                <li class="d-flex w-100 pt-1">
+                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">PlayStation Controllers</a>
+                </li>
+                <li class="d-flex w-100 pt-1">
+                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">PlayStation Games</a>
+                </li>
+                <li class="d-flex w-100 pt-1">
+                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Gaming PCs</a>
+                </li>
+                <li class="d-flex w-100 pt-1">
+                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Nintendo Switch</a>
+                </li>
+                <li class="d-flex w-100 pt-1">
+                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Xbox Series X/S</a>
+                </li>
+                <li class="d-flex w-100 pt-1">
+                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Gaming Peripherals</a>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </section>
+
+
+      <!-- Banners -->
+      <section class="container pb-4 pt-5 mb-3">
+        <div class="row g-3 g-lg-4">
+          <div class="col-md-7">
+            <div class="position-relative d-flex flex-column flex-sm-row align-items-center h-100 rounded-5 overflow-hidden px-5 px-sm-0 pe-sm-4">
+              <span class="position-absolute top-0 start-0 w-100 h-100 d-none-dark rtl-flip" style="background: linear-gradient(90deg, #accbee 0%, #e7f0fd 100%)"></span>
+              <span class="position-absolute top-0 start-0 w-100 h-100 d-none d-block-dark rtl-flip" style="background: linear-gradient(90deg, #1b273a 0%, #1f2632 100%)"></span>
+              <div class="position-relative z-1 text-center text-sm-start pt-4 pt-sm-0 ps-xl-4 mt-2 mt-sm-0 order-sm-2">
+                <h2 class="h3 mb-2">iPhone 14</h2>
+                <p class="fs-sm text-light-emphasis mb-sm-4">Apple iPhone 14 128GB Blue</p>
+                <a class="btn btn-primary" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                  From $899
+                  <i class="ci-arrow-up-right fs-base ms-1 me-n1"></i>
+                </a>
+              </div>
+              <div class="position-relative z-1 w-100 align-self-end order-sm-1" style="max-width: 416px">
+                <div class="ratio rtl-flip" style="--cz-aspect-ratio: calc(320 / 416 * 100%)">
+                  <img src="/img/shop/electronics/banners/iphone-1.png" alt="iPhone 14">
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col-md-5">
+            <div class="position-relative d-flex flex-column align-items-center justify-content-between h-100 rounded-5 overflow-hidden pt-3">
+              <span class="position-absolute top-0 start-0 w-100 h-100 d-none-dark rtl-flip" style="background: linear-gradient(90deg, #fdcbf1 0%, #fdcbf1 1%, #ffecfa 100%)"></span>
+              <span class="position-absolute top-0 start-0 w-100 h-100 d-none d-block-dark rtl-flip" style="background: linear-gradient(90deg, #362131 0%, #322730 100%)"></span>
+              <div class="position-relative z-1 text-center pt-3 mx-4">
+                <i class="ci-apple text-body-emphasis fs-3 mb-3"></i>
+                <p class="fs-sm text-light-emphasis mb-1">Deal of the week</p>
+                <h2 class="h3 mb-4">iPad Pro M1</h2>
+              </div>
+              <a class="position-relative z-1 d-block w-100" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                <div class="ratio rtl-flip" style="--cz-aspect-ratio: calc(159 / 525 * 100%)">
+                  <img src="/img/shop/electronics/banners/ipad.png" width="525" alt="iPad">
+                </div>
+              </a>
+            </div>
+          </div>
+        </div>
+      </section>
+
+
+      <!-- Trending products (Grid) -->
+      <section class="container pb-5 mb-sm-2 mb-md-3 mb-lg-4 mb-xl-5">
+        <div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 g-4">
+
+          <!-- Item -->
+          <div class="col">
+            <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+              <div class="position-relative">
+                <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                  <div class="d-flex flex-column gap-2">
+                    <button type="button" class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex" aria-label="Add to Wishlist">
+                      <i class="ci-heart fs-base animate-target"></i>
+                    </button>
+                    <button type="button" class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex" aria-label="Compare">
+                      <i class="ci-refresh-cw fs-base animate-target"></i>
+                    </button>
+                  </div>
+                </div>
+                <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                  <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body" data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                    <i class="ci-more-vertical fs-lg"></i>
+                  </button>
+                  <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                    <li>
+                      <a class="dropdown-item" href="#!">
+                        <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                        Add to Wishlist
+                      </a>
+                    </li>
+                    <li>
+                      <a class="dropdown-item" href="#!">
+                        <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                        Compare
+                      </a>
+                    </li>
+                  </ul>
+                </div>
+                <a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                  <span class="badge bg-danger position-absolute top-0 start-0 mt-2 ms-2 mt-lg-3 ms-lg-3">-21%</span>
+                  <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                    <img src="/img/shop/electronics/01.png" alt="VR Glasses">
+                  </div>
+                </a>
+              </div>
+              <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                <div class="d-flex align-items-center gap-2 mb-2">
+                  <div class="d-flex gap-1 fs-xs">
+                    <i class="ci-star-filled text-warning"></i>
+                    <i class="ci-star-filled text-warning"></i>
+                    <i class="ci-star-filled text-warning"></i>
+                    <i class="ci-star-filled text-warning"></i>
+                    <i class="ci-star text-body-tertiary opacity-75"></i>
+                  </div>
+                  <span class="text-body-tertiary fs-xs">(123)</span>
+                </div>
+                <h3 class="pb-1 mb-2">
+                  <a class="d-block fs-sm fw-medium text-truncate" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                    <span class="animate-target">VRB01 Virtual Reality Glasses</span>
+                  </a>
+                </h3>
+                <div class="d-flex align-items-center justify-content-between">
+                  <div class="h5 lh-1 mb-0">$340.99 <del class="text-body-tertiary fs-sm fw-normal">$430.00</del></div>
+                  <button type="button" class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2" aria-label="Add to Cart">
+                    <i class="ci-shopping-cart fs-base animate-target"></i>
+                  </button>
+                </div>
+              </div>
+              <div class="product-card-details position-absolute top-100 start-0 w-100 bg-body rounded-bottom shadow mt-n2 p-3 pt-1">
+                <span class="position-absolute top-0 start-0 w-100 bg-body mt-n2 py-2"></span>
+                <ul class="list-unstyled d-flex flex-column gap-2 m-0">
+                  <li class="d-flex align-items-center">
+                    <span class="fs-xs">Display:</span>
+                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                    <span class="text-dark-emphasis fs-xs fw-medium text-end">OLED 1440x1600</span>
+                  </li>
+                  <li class="d-flex align-items-center">
+                    <span class="fs-xs">Graphics:</span>
+                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                    <span class="text-dark-emphasis fs-xs fw-medium text-end">Adreno 540</span>
+                  </li>
+                  <li class="d-flex align-items-center">
+                    <span class="fs-xs">Sound:</span>
+                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                    <span class="text-dark-emphasis fs-xs fw-medium text-end">2x3.5mm jack</span>
+                  </li>
+                  <li class="d-flex align-items-center">
+                    <span class="fs-xs">Input:</span>
+                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                    <span class="text-dark-emphasis fs-xs fw-medium text-end">4 built-in cameras</span>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+
+          <!-- Item -->
+          <div class="col">
+            <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+              <div class="position-relative">
+                <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                  <div class="d-flex flex-column gap-2">
+                    <button type="button" class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex" aria-label="Add to Wishlist">
+                      <i class="ci-heart fs-base animate-target"></i>
+                    </button>
+                    <button type="button" class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex" aria-label="Compare">
+                      <i class="ci-refresh-cw fs-base animate-target"></i>
+                    </button>
+                  </div>
+                </div>
+                <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                  <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body" data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                    <i class="ci-more-vertical fs-lg"></i>
+                  </button>
+                  <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                    <li>
+                      <a class="dropdown-item" href="#!">
+                        <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                        Add to Wishlist
+                      </a>
+                    </li>
+                    <li>
+                      <a class="dropdown-item" href="#!">
+                        <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                        Compare
+                      </a>
+                    </li>
+                  </ul>
+                </div>
+                <a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                  <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                    <img src="/img/shop/electronics/02.png" alt="iPhone 14">
+                  </div>
+                </a>
+              </div>
+              <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                <div class="d-flex align-items-center gap-2 mb-2">
+                  <div class="d-flex gap-1 fs-xs">
+                    <i class="ci-star-filled text-warning"></i>
+                    <i class="ci-star-filled text-warning"></i>
+                    <i class="ci-star-filled text-warning"></i>
+                    <i class="ci-star-filled text-warning"></i>
+                    <i class="ci-star-half text-warning"></i>
+                  </div>
+                  <span class="text-body-tertiary fs-xs">(142)</span>
+                </div>
+                <h3 class="pb-1 mb-2">
+                  <a class="d-block fs-sm fw-medium text-truncate" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                    <span class="animate-target">Apple iPhone 14 128GB White</span>
+                  </a>
+                </h3>
+                <div class="d-flex align-items-center justify-content-between">
+                  <div class="h5 lh-1 mb-0">$899.00</div>
+                  <button type="button" class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2" aria-label="Add to Cart">
+                    <i class="ci-shopping-cart fs-base animate-target"></i>
+                  </button>
+                </div>
+              </div>
+              <div class="product-card-details position-absolute top-100 start-0 w-100 bg-body rounded-bottom shadow mt-n2 p-3 pt-1">
+                <span class="position-absolute top-0 start-0 w-100 bg-body mt-n2 py-2"></span>
+                <ul class="list-unstyled d-flex flex-column gap-2 m-0">
+                  <li class="d-flex align-items-center">
+                    <span class="fs-xs">Display:</span>
+                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                    <span class="text-dark-emphasis fs-xs fw-medium text-end">6.1" XDR</span>
+                  </li>
+                  <li class="d-flex align-items-center">
+                    <span class="fs-xs">Capacity:</span>
+                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                    <span class="text-dark-emphasis fs-xs fw-medium text-end">128 GB</span>
+                  </li>
+                  <li class="d-flex align-items-center">
+                    <span class="fs-xs">Chip:</span>
+                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                    <span class="text-dark-emphasis fs-xs fw-medium text-end">A15 Bionic</span>
+                  </li>
+                  <li class="d-flex align-items-center">
+                    <span class="fs-xs">Camera:</span>
+                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                    <span class="text-dark-emphasis fs-xs fw-medium text-end">12 + 12 MP</span>
+                  </li>
+                  <li class="d-flex align-items-center">
+                    <span class="fs-xs">Weight:</span>
+                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                    <span class="text-dark-emphasis fs-xs fw-medium text-end">172 grams</span>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+
+          <!-- Item -->
+          <div class="col">
+            <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+              <div class="position-relative">
+                <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                  <div class="d-flex flex-column gap-2">
+                    <button type="button" class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex" aria-label="Add to Wishlist">
+                      <i class="ci-heart fs-base animate-target"></i>
+                    </button>
+                    <button type="button" class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex" aria-label="Compare">
+                      <i class="ci-refresh-cw fs-base animate-target"></i>
+                    </button>
+                  </div>
+                </div>
+                <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                  <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body" data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                    <i class="ci-more-vertical fs-lg"></i>
+                  </button>
+                  <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                    <li>
+                      <a class="dropdown-item" href="#!">
+                        <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                        Add to Wishlist
+                      </a>
+                    </li>
+                    <li>
+                      <a class="dropdown-item" href="#!">
+                        <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                        Compare
+                      </a>
+                    </li>
+                  </ul>
+                </div>
+                <a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                  <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                    <img src="/img/shop/electronics/03.png" alt="Smart Watch">
+                  </div>
+                </a>
+              </div>
+              <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                <div class="d-flex align-items-center gap-2 mb-2">
+                  <div class="d-flex gap-1 fs-xs">
+                    <i class="ci-star-filled text-warning"></i>
+                    <i class="ci-star-filled text-warning"></i>
+                    <i class="ci-star-filled text-warning"></i>
+                    <i class="ci-star-filled text-warning"></i>
+                    <i class="ci-star-filled text-warning"></i>
+                  </div>
+                  <span class="text-body-tertiary fs-xs">(67)</span>
+                </div>
+                <h3 class="pb-1 mb-2">
+                  <a class="d-block fs-sm fw-medium text-truncate" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                    <span class="animate-target">Smart Watch Series 7, White</span>
+                  </a>
+                </h3>
+                <div class="d-flex align-items-center justify-content-between">
+                  <div class="h5 lh-1 mb-0">$429.00</div>
+                  <button type="button" class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2" aria-label="Add to Cart">
+                    <i class="ci-shopping-cart fs-base animate-target"></i>
+                  </button>
+                </div>
+              </div>
+              <div class="product-card-details position-absolute top-100 start-0 w-100 bg-body rounded-bottom shadow mt-n2 p-3 pt-1">
+                <span class="position-absolute top-0 start-0 w-100 bg-body mt-n2 py-2"></span>
+                <ul class="list-unstyled d-flex flex-column gap-2 m-0">
+                  <li class="d-flex align-items-center">
+                    <span class="fs-xs">Display:</span>
+                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                    <span class="text-dark-emphasis fs-xs fw-medium text-end">45mm OLED</span>
+                  </li>
+                  <li class="d-flex align-items-center">
+                    <span class="fs-xs">Chip:</span>
+                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                    <span class="text-dark-emphasis fs-xs fw-medium text-end">64-bit Dual-core</span>
+                  </li>
+                  <li class="d-flex align-items-center">
+                    <span class="fs-xs">Connectivity:</span>
+                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                    <span class="text-dark-emphasis fs-xs fw-medium text-end">Wi-Fi, Bluetooth</span>
+                  </li>
+                  <li class="d-flex align-items-center">
+                    <span class="fs-xs">Power:</span>
+                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                    <span class="text-dark-emphasis fs-xs fw-medium text-end">Lithium-ion battery</span>
+                  </li>
+                  <li class="d-flex align-items-center">
+                    <span class="fs-xs">Weight:</span>
+                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                    <span class="text-dark-emphasis fs-xs fw-medium text-end">37.0 grams</span>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+
+          <!-- Item -->
+          <div class="col">
+            <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+              <div class="position-relative">
+                <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                  <div class="d-flex flex-column gap-2">
+                    <button type="button" class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex" aria-label="Add to Wishlist">
+                      <i class="ci-heart fs-base animate-target"></i>
+                    </button>
+                    <button type="button" class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex" aria-label="Compare">
+                      <i class="ci-refresh-cw fs-base animate-target"></i>
+                    </button>
+                  </div>
+                </div>
+                <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                  <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body" data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                    <i class="ci-more-vertical fs-lg"></i>
+                  </button>
+                  <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                    <li>
+                      <a class="dropdown-item" href="#!">
+                        <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                        Add to Wishlist
+                      </a>
+                    </li>
+                    <li>
+                      <a class="dropdown-item" href="#!">
+                        <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                        Compare
+                      </a>
+                    </li>
+                  </ul>
+                </div>
+                <a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                  <span class="badge bg-info position-absolute top-0 start-0 mt-2 ms-2 mt-lg-3 ms-lg-3">New</span>
+                  <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                    <img src="/img/shop/electronics/04.png" alt="MacBook">
+                  </div>
+                </a>
+              </div>
+              <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                <div class="d-flex align-items-center gap-2 mb-2">
+                  <div class="d-flex gap-1 fs-xs">
+                    <i class="ci-star-filled text-warning"></i>
+                    <i class="ci-star-filled text-warning"></i>
+                    <i class="ci-star-filled text-warning"></i>
+                    <i class="ci-star-filled text-warning"></i>
+                    <i class="ci-star-half text-warning"></i>
+                  </div>
+                  <span class="text-body-tertiary fs-xs">(51)</span>
+                </div>
+                <h3 class="pb-1 mb-2">
+                  <a class="d-block fs-sm fw-medium text-truncate" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                    <span class="animate-target">Laptop Apple MacBook Pro 13 M2</span>
+                  </a>
+                </h3>
+                <div class="d-flex align-items-center justify-content-between">
+                  <div class="h5 lh-1 mb-0">$1,200.00</div>
+                  <button type="button" class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2" aria-label="Add to Cart">
+                    <i class="ci-shopping-cart fs-base animate-target"></i>
+                  </button>
+                </div>
+              </div>
+              <div class="product-card-details position-absolute top-100 start-0 w-100 bg-body rounded-bottom shadow mt-n2 p-3 pt-1">
+                <span class="position-absolute top-0 start-0 w-100 bg-body mt-n2 py-2"></span>
+                <ul class="list-unstyled d-flex flex-column gap-2 m-0">
+                  <li class="d-flex align-items-center">
+                    <span class="fs-xs">Chip:</span>
+                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                    <span class="text-dark-emphasis fs-xs fw-medium text-end">Apple M2</span>
+                  </li>
+                  <li class="d-flex align-items-center">
+                    <span class="fs-xs">Memory:</span>
+                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                    <span class="text-dark-emphasis fs-xs fw-medium text-end">8 GB unified</span>
+                  </li>
+                  <li class="d-flex align-items-center">
+                    <span class="fs-xs">Storage:</span>
+                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                    <span class="text-dark-emphasis fs-xs fw-medium text-end">256 GB SSD</span>
+                  </li>
+                  <li class="d-flex align-items-center">
+                    <span class="fs-xs">Display:</span>
+                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                    <span class="text-dark-emphasis fs-xs fw-medium text-end">13.3-inch Retina</span>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+
+          <!-- Item -->
+          <div class="col">
+            <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+              <div class="posittion-relative">
+                <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                  <div class="d-flex flex-column gap-2">
+                    <button type="button" class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex" aria-label="Add to Wishlist">
+                      <i class="ci-heart fs-base animate-target"></i>
+                    </button>
+                    <button type="button" class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex" aria-label="Compare">
+                      <i class="ci-refresh-cw fs-base animate-target"></i>
+                    </button>
+                  </div>
+                </div>
+                <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                  <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body" data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                    <i class="ci-more-vertical fs-lg"></i>
+                  </button>
+                  <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                    <li>
+                      <a class="dropdown-item" href="#!">
+                        <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                        Add to Wishlist
+                      </a>
+                    </li>
+                    <li>
+                      <a class="dropdown-item" href="#!">
+                        <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                        Compare
+                      </a>
+                    </li>
+                  </ul>
+                </div>
+                <a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                  <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                    <img src="/img/shop/electronics/05.png" alt="iPad Air">
+                  </div>
+                </a>
+              </div>
+              <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                <div class="d-flex align-items-center gap-2 mb-2">
+                  <div class="d-flex gap-1 fs-xs">
+                    <i class="ci-star-filled text-warning"></i>
+                    <i class="ci-star-filled text-warning"></i>
+                    <i class="ci-star-filled text-warning"></i>
+                    <i class="ci-star-filled text-warning"></i>
+                    <i class="ci-star-filled text-warning"></i>
+                  </div>
+                  <span class="text-body-tertiary fs-xs">(12)</span>
+                </div>
+                <h3 class="pb-1 mb-2">
+                  <a class="d-block fs-sm fw-medium text-truncate" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                    <span class="animate-target">Tablet Apple iPad Air M1</span>
+                  </a>
+                </h3>
+                <div class="d-flex align-items-center justify-content-between">
+                  <div class="h5 lh-1 mb-0">$540.00</div>
+                  <button type="button" class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2" aria-label="Add to Cart">
+                    <i class="ci-shopping-cart fs-base animate-target"></i>
+                  </button>
+                </div>
+              </div>
+              <div class="product-card-details position-absolute top-100 start-0 w-100 bg-body rounded-bottom shadow mt-n2 p-3 pt-1">
+                <span class="position-absolute top-0 start-0 w-100 bg-body mt-n2 py-2"></span>
+                <ul class="list-unstyled d-flex flex-column gap-2 m-0">
+                  <li class="d-flex align-items-center">
+                    <span class="fs-xs">Display:</span>
+                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                    <span class="text-dark-emphasis fs-xs fw-medium text-end">10.9" LED</span>
+                  </li>
+                  <li class="d-flex align-items-center">
+                    <span class="fs-xs">Capacity:</span>
+                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                    <span class="text-dark-emphasis fs-xs fw-medium text-end">64 GB</span>
+                  </li>
+                  <li class="d-flex align-items-center">
+                    <span class="fs-xs">Chip:</span>
+                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                    <span class="text-dark-emphasis fs-xs fw-medium text-end">Apple M1</span>
+                  </li>
+                  <li class="d-flex align-items-center">
+                    <span class="fs-xs">Camera:</span>
+                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                    <span class="text-dark-emphasis fs-xs fw-medium text-end">12 MP Wide</span>
+                  </li>
+                  <li class="d-flex align-items-center">
+                    <span class="fs-xs">Weight:</span>
+                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                    <span class="text-dark-emphasis fs-xs fw-medium text-end">462 grams</span>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+
+          <!-- Item -->
+          <div class="col">
+            <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+              <div class="position-relative">
+                <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                  <div class="d-flex flex-column gap-2">
+                    <button type="button" class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex" aria-label="Add to Wishlist">
+                      <i class="ci-heart fs-base animate-target"></i>
+                    </button>
+                    <button type="button" class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex" aria-label="Compare">
+                      <i class="ci-refresh-cw fs-base animate-target"></i>
+                    </button>
+                  </div>
+                </div>
+                <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                  <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body" data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                    <i class="ci-more-vertical fs-lg"></i>
+                  </button>
+                  <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                    <li>
+                      <a class="dropdown-item" href="#!">
+                        <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                        Add to Wishlist
+                      </a>
+                    </li>
+                    <li>
+                      <a class="dropdown-item" href="#!">
+                        <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                        Compare
+                      </a>
+                    </li>
+                  </ul>
+                </div>
+                <a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                  <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                    <img src="/img/shop/electronics/06.png" alt="AirPods 2">
+                  </div>
+                </a>
+              </div>
+              <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                <div class="d-flex align-items-center gap-2 mb-2">
+                  <div class="d-flex gap-1 fs-xs">
+                    <i class="ci-star-filled text-warning"></i>
+                    <i class="ci-star-filled text-warning"></i>
+                    <i class="ci-star-filled text-warning"></i>
+                    <i class="ci-star-filled text-warning"></i>
+                    <i class="ci-star text-body-tertiary opacity-75"></i>
+                  </div>
+                  <span class="text-body-tertiary fs-xs">(78)</span>
+                </div>
+                <h3 class="pb-1 mb-2">
+                  <a class="d-block fs-sm fw-medium text-truncate" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                    <span class="animate-target">Headphones Apple AirPods 2 Pro</span>
+                  </a>
+                </h3>
+                <div class="d-flex align-items-center justify-content-between">
+                  <div class="h5 lh-1 mb-0">$224.00</div>
+                  <button type="button" class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2" aria-label="Add to Cart">
+                    <i class="ci-shopping-cart fs-base animate-target"></i>
+                  </button>
+                </div>
+              </div>
+              <div class="product-card-details position-absolute top-100 start-0 w-100 bg-body rounded-bottom shadow mt-n2 p-3 pt-1">
+                <span class="position-absolute top-0 start-0 w-100 bg-body mt-n2 py-2"></span>
+                <ul class="list-unstyled d-flex flex-column gap-2 m-0">
+                  <li class="d-flex align-items-center">
+                    <span class="fs-xs">Audio:</span>
+                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                    <span class="text-dark-emphasis fs-xs fw-medium text-end">Noise Cancellation</span>
+                  </li>
+                  <li class="d-flex align-items-center">
+                    <span class="fs-xs">Sensors:</span>
+                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                    <span class="text-dark-emphasis fs-xs fw-medium text-end">Touch control</span>
+                  </li>
+                  <li class="d-flex align-items-center">
+                    <span class="fs-xs">Chip:</span>
+                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                    <span class="text-dark-emphasis fs-xs fw-medium text-end">Apple H2</span>
+                  </li>
+                  <li class="d-flex align-items-center">
+                    <span class="fs-xs">Weight:</span>
+                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                    <span class="text-dark-emphasis fs-xs fw-medium text-end">50.8 grams</span>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+
+          <!-- Item -->
+          <div class="col">
+            <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+              <div class="posittion-relative">
+                <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                  <div class="d-flex flex-column gap-2">
+                    <button type="button" class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex" aria-label="Add to Wishlist">
+                      <i class="ci-heart fs-base animate-target"></i>
+                    </button>
+                    <button type="button" class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex" aria-label="Compare">
+                      <i class="ci-refresh-cw fs-base animate-target"></i>
+                    </button>
+                  </div>
+                </div>
+                <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                  <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body" data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                    <i class="ci-more-vertical fs-lg"></i>
+                  </button>
+                  <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                    <li>
+                      <a class="dropdown-item" href="#!">
+                        <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                        Add to Wishlist
+                      </a>
+                    </li>
+                    <li>
+                      <a class="dropdown-item" href="#!">
+                        <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                        Compare
+                      </a>
+                    </li>
+                  </ul>
+                </div>
+                <a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                  <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                    <img src="/img/shop/electronics/07.png" alt="iPad Pro">
+                  </div>
+                </a>
+              </div>
+              <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                <div class="d-flex align-items-center gap-2 mb-2">
+                  <div class="d-flex gap-1 fs-xs">
+                    <i class="ci-star-filled text-warning"></i>
+                    <i class="ci-star-filled text-warning"></i>
+                    <i class="ci-star-filled text-warning"></i>
+                    <i class="ci-star-filled text-warning"></i>
+                    <i class="ci-star-half text-warning"></i>
+                  </div>
+                  <span class="text-body-tertiary fs-xs">(49)</span>
+                </div>
+                <h3 class="pb-1 mb-2">
+                  <a class="d-block fs-sm fw-medium text-truncate" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                    <span class="animate-target">Tablet Apple iPad Pro M1</span>
+                  </a>
+                </h3>
+                <div class="d-flex align-items-center justify-content-between">
+                  <div class="h5 lh-1 mb-0">$739.00</div>
+                  <button type="button" class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2" aria-label="Add to Cart">
+                    <i class="ci-shopping-cart fs-base animate-target"></i>
+                  </button>
+                </div>
+              </div>
+              <div class="product-card-details position-absolute top-100 start-0 w-100 bg-body rounded-bottom shadow mt-n2 p-3 pt-1">
+                <span class="position-absolute top-0 start-0 w-100 bg-body mt-n2 py-2"></span>
+                <ul class="list-unstyled d-flex flex-column gap-2 m-0">
+                  <li class="d-flex align-items-center">
+                    <span class="fs-xs">Display:</span>
+                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                    <span class="text-dark-emphasis fs-xs fw-medium text-end">11" LED</span>
+                  </li>
+                  <li class="d-flex align-items-center">
+                    <span class="fs-xs">Capacity:</span>
+                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                    <span class="text-dark-emphasis fs-xs fw-medium text-end">128 GB</span>
+                  </li>
+                  <li class="d-flex align-items-center">
+                    <span class="fs-xs">Chip:</span>
+                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                    <span class="text-dark-emphasis fs-xs fw-medium text-end">Apple M1</span>
+                  </li>
+                  <li class="d-flex align-items-center">
+                    <span class="fs-xs">Camera:</span>
+                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                    <span class="text-dark-emphasis fs-xs fw-medium text-end">12 MP Wide</span>
+                  </li>
+                  <li class="d-flex align-items-center">
+                    <span class="fs-xs">Weight:</span>
+                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                    <span class="text-dark-emphasis fs-xs fw-medium text-end">470 grams</span>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+
+          <!-- Item -->
+          <div class="col">
+            <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+              <div class="posittion-relative">
+                <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                  <div class="d-flex flex-column gap-2">
+                    <button type="button" class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex" aria-label="Add to Wishlist">
+                      <i class="ci-heart fs-base animate-target"></i>
+                    </button>
+                    <button type="button" class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex" aria-label="Compare">
+                      <i class="ci-refresh-cw fs-base animate-target"></i>
+                    </button>
+                  </div>
+                </div>
+                <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                  <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body" data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                    <i class="ci-more-vertical fs-lg"></i>
+                  </button>
+                  <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                    <li>
+                      <a class="dropdown-item" href="#!">
+                        <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                        Add to Wishlist
+                      </a>
+                    </li>
+                    <li>
+                      <a class="dropdown-item" href="#!">
+                        <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                        Compare
+                      </a>
+                    </li>
+                  </ul>
+                </div>
+                <a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                  <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                    <img src="/img/shop/electronics/08.png" alt="Bluetooth Headphones">
+                  </div>
+                </a>
+              </div>
+              <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                <div class="d-flex align-items-center gap-2 mb-2">
+                  <div class="d-flex gap-1 fs-xs">
+                    <i class="ci-star-filled text-warning"></i>
+                    <i class="ci-star-filled text-warning"></i>
+                    <i class="ci-star-filled text-warning"></i>
+                    <i class="ci-star-half text-warning"></i>
+                    <i class="ci-star text-body-tertiary opacity-75"></i>
+                  </div>
+                  <span class="text-body-tertiary fs-xs">(136)</span>
+                </div>
+                <h3 class="pb-1 mb-2">
+                  <a class="d-block fs-sm fw-medium text-truncate" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
+                    <span class="animate-target">Wireless Bluetooth Headphones Sony</span>
+                  </a>
+                </h3>
+                <div class="d-flex align-items-center justify-content-between">
+                  <div class="h5 lh-1 mb-0">$299.00</div>
+                  <button type="button" class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2" aria-label="Add to Cart">
+                    <i class="ci-shopping-cart fs-base animate-target"></i>
+                  </button>
+                </div>
+              </div>
+              <div class="product-card-details position-absolute top-100 start-0 w-100 bg-body rounded-bottom shadow mt-n2 p-3 pt-1">
+                <span class="position-absolute top-0 start-0 w-100 bg-body mt-n2 py-2"></span>
+                <ul class="list-unstyled d-flex flex-column gap-2 m-0">
+                  <li class="d-flex align-items-center">
+                    <span class="fs-xs">Audio:</span>
+                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                    <span class="text-dark-emphasis fs-xs fw-medium text-end">Noise Cancellation</span>
+                  </li>
+                  <li class="d-flex align-items-center">
+                    <span class="fs-xs">Connectivity:</span>
+                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                    <span class="text-dark-emphasis fs-xs fw-medium text-end">Bluetooth, 3.5mm jack</span>
+                  </li>
+                  <li class="d-flex align-items-center">
+                    <span class="fs-xs">Material:</span>
+                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                    <span class="text-dark-emphasis fs-xs fw-medium text-end">Leather, Plastic</span>
+                  </li>
+                  <li class="d-flex align-items-center">
+                    <span class="fs-xs">Weight:</span>
+                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                    <span class="text-dark-emphasis fs-xs fw-medium text-end">185 grams</span>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+
+      <!-- Subscription form + Vlog -->
+      <section class="bg-body-tertiary py-5">
+        <div class="container pt-sm-2 pt-md-3 pt-lg-4 pt-xl-5">
+          <div class="row">
+            <div class="col-md-6 col-lg-5 mb-5 mb-md-0">
+              <h2 class="h4 mb-2">Sign up to our newsletter</h2>
+              <p class="text-body pb-2 pb-ms-3">Receive our latest updates about our products &amp; promotions</p>
+              <form class="d-flex needs-validation pb-1 pb-sm-2 pb-md-3 pb-lg-0 mb-4 mb-lg-5" novalidate>
+                <div class="position-relative w-100 me-2">
+                  <input type="email" class="form-control form-control-lg" placeholder="Your email" required>
+                </div>
+                <button type="submit" class="btn btn-lg btn-primary">Subscribe</button>
+              </form>
+              <div class="d-flex gap-3">
+                <a class="btn btn-icon btn-secondary rounded-circle" href="#!" aria-label="Instagram">
+                  <i class="ci-instagram fs-base"></i>
+                </a>
+                <a class="btn btn-icon btn-secondary rounded-circle" href="#!" aria-label="Facebook">
+                  <i class="ci-facebook fs-base"></i>
+                </a>
+                <a class="btn btn-icon btn-secondary rounded-circle" href="#!" aria-label="YouTube">
+                  <i class="ci-youtube fs-base"></i>
+                </a>
+                <a class="btn btn-icon btn-secondary rounded-circle" href="#!" aria-label="Telegram">
+                  <i class="ci-telegram fs-base"></i>
+                </a>
+              </div>
+            </div>
+            <div class="col-md-6 col-lg-5 col-xl-4 offset-lg-1 offset-xl-2">
+              <ul class="list-unstyled d-flex flex-column gap-4 ps-md-4 ps-lg-0 mb-3">
+                <li class="nav flex-nowrap align-items-center position-relative">
+                  <img src="/img/home/electronics/vlog/01.jpg" class="rounded" width="140" alt="Video cover">
+                  <div class="ps-3">
+                    <div class="fs-xs text-body-secondary lh-sm mb-2">6:16</div>
+                    <a class="nav-link fs-sm hover-effect-underline stretched-link p-0" href="#!">5 New Cool Gadgets You Must See on Cartzilla - Cheap Budget</a>
+                  </div>
+                </li>
+                <li class="nav flex-nowrap align-items-center position-relative">
+                  <img src="/img/home/electronics/vlog/02.jpg" class="rounded" width="140" alt="Video cover">
+                  <div class="ps-3">
+                    <div class="fs-xs text-body-secondary lh-sm mb-2">10:20</div>
+                    <a class="nav-link fs-sm hover-effect-underline stretched-link p-0" href="#!">5 Super Useful Gadgets on Cartzilla You Must Have in 2023</a>
+                  </div>
+                </li>
+                <li class="nav flex-nowrap align-items-center position-relative">
+                  <img src="/img/home/electronics/vlog/03.jpg" class="rounded" width="140" alt="Video cover">
+                  <div class="ps-3">
+                    <div class="fs-xs text-body-secondary lh-sm mb-2">8:40</div>
+                    <a class="nav-link fs-sm hover-effect-underline stretched-link p-0" href="#!">Top 5 New Amazing Gadgets on Cartzilla You Must See</a>
+                  </div>
+                </li>
+              </ul>
+              <div class="nav ps-md-4 ps-lg-0">
+                <a class="btn nav-link animate-underline text-decoration-none px-0" href="#!">
+                  <span class="animate-target">View all</span>
+                  <i class="ci-chevron-right fs-base ms-1"></i>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+
+    @include('layouts.partials/footer')
+
+@endsection
+
+@section('scripts')
+@endsection
diff --git a/resources/views/shop/product-details-electronics.blade.php b/resources/views/shop/product-details-electronics.blade.php
new file mode 100644
index 0000000..703fbfa
--- /dev/null
+++ b/resources/views/shop/product-details-electronics.blade.php
@@ -0,0 +1,771 @@
+@extends('layouts.landing', ['title' => 'Electronics Store - Product Details'])
+
+@section('content')
+    @include('layouts.partials/offcanvas')
+
+    @include('layouts.partials/navbar', ['wishlist' => true])
+
+    <!-- Page content -->
+    <main class="content-wrapper">
+
+        <!-- Breadcrumb -->
+        <nav class="container pt-3 my-3 my-md-4" aria-label="breadcrumb">
+            <ol class="breadcrumb">
+                <li class="breadcrumb-item"><a href="{{ route('second', ['home', 'electronics'])}}">Home</a></li>
+                <li class="breadcrumb-item"><a href="{{ route('second', ['shop', 'catalog-electronics'])}}">Shop</a></li>
+                <li class="breadcrumb-item active" aria-current="page">Product page</li>
+            </ol>
+        </nav>
+
+
+        <!-- Page title -->
+        <h1 class="h3 container mb-4">Apple iPhone 14 Plus 128GB Blue</h1>
+
+
+        <!-- Nav links -->
+        <section class="container position-relative z-2 pb-4 pb-md-5 mb-2 mb-md-0">
+            <div class="border-bottom">
+                <ul class="nav nav-underline flex-nowrap gap-4">
+                    <li class="nav-item me-sm-2">
+                        <a class="nav-link" href="{{ route('second', ['shop', 'product-general-electronics'])}}">General info</a>
+                    </li>
+                    <li class="nav-item me-sm-2">
+                        <a class="nav-link pe-none active" href="#!">Product details</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="{{ route('second', ['shop', 'product-reviews-electronics'])}}">Reviews (68)</a>
+                    </li>
+                </ul>
+            </div>
+        </section>
+
+
+        <!-- Product details + Sticky sidebar -->
+        <section class="container pb-5 mb-2 mb-md-3 mb-lg-4 mb-xl-5">
+            <div class="row">
+
+                <!-- Sticky product preview -->
+                <aside class="col-md-5 col-xl-4 offset-xl-1 order-md-2 mb-5 mb-md-0" id="scrollPastPoint"
+                    style="margin-top: -100px">
+                    <div class="position-sticky top-0 ps-md-3 ps-lg-4 ps-xl-0" style="padding-top: 100px">
+                        <div class="border rounded p-3 p-lg-4">
+                            <div class="d-flex align-items-center mb-3">
+                                <div class="ratio ratio-1x1 flex-shrink-0" style="width: 110px">
+                                    <img src="/img/shop/electronics/thumbs/10.png" width="110" alt="iPhone 14">
+                                </div>
+                                <div class="w-100 min-w-0 ps-2 ps-sm-3">
+                                    <div class="d-flex align-items-center gap-2 mb-2">
+                                        <div class="d-flex gap-1 fs-xs">
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star text-body-tertiary opacity-75"></i>
+                                        </div>
+                                        <span class="text-body-tertiary fs-xs">68</span>
+                                    </div>
+                                    <h4 class="fs-sm fw-medium mb-2">Apple iPhone 14 Plus 128GB Blue</h4>
+                                    <div class="h5 mb-0">$940.00</div>
+                                </div>
+                            </div>
+                            <div class="d-flex gap-2 gap-lg-3">
+                                <button type="button" class="btn btn-primary w-100 animate-slide-end">
+                                    <i class="ci-shopping-cart fs-base animate-target ms-n1 me-2"></i>
+                                    Add to cart
+                                </button>
+                                <button type="button" class="btn btn-icon btn-secondary animate-pulse"
+                                    data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-sm"
+                                    data-bs-title="Add to Wishlist" aria-label="Add to Wishlist">
+                                    <i class="ci-heart fs-base animate-target"></i>
+                                </button>
+                                <button type="button" class="btn btn-icon btn-secondary animate-rotate"
+                                    data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-sm"
+                                    data-bs-title="Compare" aria-label="Compare">
+                                    <i class="ci-refresh-cw fs-base animate-target"></i>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </aside>
+
+
+                <!-- Sticky product preview + Add to cart CTA -->
+                <section class="sticky-product-banner sticky-top d-md-none start-0 ms-n4" data-sticky-element>
+                    <div class="sticky-product-banner-inner start-0 pt-5">
+                        <div class="vw-100 bg-body border-bottom border-light border-opacity-10 shadow pt-4 pb-2">
+                            <div class="container d-flex align-items-center">
+                                <div class="d-flex align-items-center min-w-0 ms-n2 me-3">
+                                    <div class="ratio ratio-1x1 flex-shrink-0" style="width: 50px">
+                                        <img src="/img/shop/electronics/thumbs/10.png" alt="iPhone 14">
+                                    </div>
+                                    <div class="w-100 min-w-0 ps-2">
+                                        <h4 class="fs-sm fw-medium text-truncate mb-1">Apple iPhone 14 Plus 128GB Blue</h4>
+                                        <div class="h6 mb-0">$940.00</div>
+                                    </div>
+                                </div>
+                                <div class="d-flex gap-2 ms-auto">
+                                    <button type="button" class="btn btn-icon btn-secondary animate-pulse"
+                                        aria-label="Add to Wishlist">
+                                        <i class="ci-heart fs-base animate-target"></i>
+                                    </button>
+                                    <button type="button"
+                                        class="btn btn-primary animate-slide-end d-none d-sm-inline-flex">
+                                        <i class="ci-shopping-cart fs-base animate-target ms-n1 me-2"></i>
+                                        Add to cart
+                                    </button>
+                                    <button type="button" class="btn btn-icon btn-primary animate-slide-end d-sm-none"
+                                        aria-label="Add to Cart">
+                                        <i class="ci-shopping-cart fs-lg animate-target"></i>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+
+
+                <!-- Product details -->
+                <div class="col-md-7 order-md-1">
+                    <h2 class="h3 pb-2 pb-md-3">Product details</h2>
+                    <h3 class="h6">General specs</h3>
+                    <ul class="list-unstyled d-flex flex-column gap-3 fs-sm pb-3 m-0 mb-2 mb-sm-3">
+                        <li class="d-flex align-items-center position-relative pe-4">
+                            <span>Model:</span>
+                            <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                            <span class="text-dark-emphasis fw-medium text-end">iPhone 14 Plus</span>
+                        </li>
+                        <li class="d-flex align-items-center position-relative pe-4">
+                            <span>Manufacturer:</span>
+                            <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                            <span class="text-dark-emphasis fw-medium text-end">Apple Inc.</span>
+                        </li>
+                        <li class="d-flex align-items-center position-relative pe-4">
+                            <span>Finish:</span>
+                            <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                            <span class="text-dark-emphasis fw-medium text-end">Ceramic, Glass, Aluminium</span>
+                            <i class="ci-info fs-base text-body-tertiary position-absolute top-50 end-0 translate-middle-y"
+                                data-bs-toggle="popover" data-bs-trigger="hover" data-bs-custom-class="popover-sm"
+                                data-bs-content="Ceramic shield front, Glass back and Aluminium design"></i>
+                        </li>
+                        <li class="d-flex align-items-center position-relative pe-4">
+                            <span>Capacity:</span>
+                            <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                            <span class="text-dark-emphasis fw-medium text-end">128GB</span>
+                        </li>
+                        <li class="d-flex align-items-center position-relative pe-4">
+                            <span>Chip:</span>
+                            <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                            <span class="text-dark-emphasis fw-medium text-end">A15 Bionic chip</span>
+                        </li>
+                    </ul>
+                    <h3 class="h6">Display</h3>
+                    <ul class="list-unstyled d-flex flex-column gap-3 fs-sm pb-3 m-0 mb-2 mb-sm-3">
+                        <li class="d-flex align-items-center position-relative pe-4">
+                            <span>Diagonal:</span>
+                            <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                            <span class="text-dark-emphasis fw-medium text-end">6.1"</span>
+                        </li>
+                        <li class="d-flex align-items-center position-relative pe-4">
+                            <span>Screen type:</span>
+                            <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                            <span class="text-dark-emphasis fw-medium text-end">Super Retina XDR</span>
+                            <i class="ci-info fs-base text-body-tertiary position-absolute top-50 end-0 translate-middle-y"
+                                data-bs-toggle="popover" data-bs-trigger="hover" data-bs-custom-class="popover-sm"
+                                data-bs-content="HDR display, True Tone, Wide color (P3), Haptic Touch, 800 nits brightness"></i>
+                        </li>
+                        <li class="d-flex align-items-center position-relative pe-4">
+                            <span>Resolution:</span>
+                            <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                            <span class="text-dark-emphasis fw-medium text-end">2778x1284px at 458ppi</span>
+                        </li>
+                        <li class="d-flex align-items-center position-relative pe-4">
+                            <span>Refresh rate:</span>
+                            <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                            <span class="text-dark-emphasis fw-medium text-end">120 Hz</span>
+                        </li>
+                    </ul>
+                    <h3 class="h6">Camera</h3>
+                    <ul class="list-unstyled d-flex flex-column gap-3 fs-sm pb-3 m-0 mb-2 mb-sm-3">
+                        <li class="d-flex align-items-center position-relative pe-4">
+                            <span>Front camera:</span>
+                            <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                            <span class="text-dark-emphasis fw-medium text-end">12MP</span>
+                        </li>
+                        <li class="d-flex align-items-center position-relative pe-4">
+                            <span>Main camera:</span>
+                            <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                            <span class="text-dark-emphasis fw-medium text-end">12MP Ultra Wide</span>
+                        </li>
+                        <li class="d-flex align-items-center position-relative pe-4">
+                            <span>Zoom:</span>
+                            <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                            <span class="text-dark-emphasis fw-medium text-end">2x opical, 5x digital</span>
+                        </li>
+                        <li class="d-flex align-items-center position-relative pe-4">
+                            <span>Video:</span>
+                            <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                            <span class="text-dark-emphasis fw-medium text-end">4K video recording</span>
+                            <i class="ci-info fs-base text-body-tertiary position-absolute top-50 end-0 translate-middle-y"
+                                data-bs-toggle="popover" data-bs-trigger="hover" data-bs-custom-class="popover-sm"
+                                data-bs-content="4K video, 1080p HD video, 720p HD video, Cinematic mode, Action mode"></i>
+                        </li>
+                    </ul>
+                    <h3 class="h6">Power and Battery</h3>
+                    <ul class="list-unstyled d-flex flex-column gap-3 fs-sm pb-3 m-0 mb-2 mb-sm-3">
+                        <li class="d-flex align-items-center position-relative pe-4">
+                            <span>Fast charging:</span>
+                            <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                            <span class="text-dark-emphasis fw-medium text-end">Yes</span>
+                        </li>
+                        <li class="d-flex align-items-center position-relative pe-4">
+                            <span>Wireless charging:</span>
+                            <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                            <span class="text-dark-emphasis fw-medium text-end">Yes</span>
+                        </li>
+                        <li class="d-flex align-items-center position-relative pe-4">
+                            <span>Charging power:</span>
+                            <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                            <span class="text-dark-emphasis fw-medium text-end">up to 15W</span>
+                        </li>
+                        <li class="d-flex align-items-center position-relative pe-4">
+                            <span>Video playback:</span>
+                            <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                            <span class="text-dark-emphasis fw-medium text-end">Up to 26 hours</span>
+                        </li>
+                        <li class="d-flex align-items-center position-relative pe-4">
+                            <span>Audio playback:</span>
+                            <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                            <span class="text-dark-emphasis fw-medium text-end">Up to 100 hours</span>
+                        </li>
+                    </ul>
+                    <h3 class="h6">Size and Weight</h3>
+                    <ul class="list-unstyled d-flex flex-column gap-3 fs-sm pb-3 m-0 mb-2 mb-sm-3">
+                        <li class="d-flex align-items-center position-relative pe-4">
+                            <span>Height:</span>
+                            <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                            <span class="text-dark-emphasis fw-medium text-end">160.8 mm</span>
+                        </li>
+                        <li class="d-flex align-items-center position-relative pe-4">
+                            <span>Width:</span>
+                            <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                            <span class="text-dark-emphasis fw-medium text-end">78.1 mm</span>
+                        </li>
+                        <li class="d-flex align-items-center position-relative pe-4">
+                            <span>Weight:</span>
+                            <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                            <span class="text-dark-emphasis fw-medium text-end">203 grams</span>
+                        </li>
+                    </ul>
+                    <div class="alert d-flex alert-info mb-2 mb-sm-3" role="alert">
+                        <i class="ci-info fs-lg pe-1 me-2" style="margin-top: .125rem"></i>
+                        <div class="fs-sm">Product specifications and equipment are subject to change without notice.
+                        </div>
+                    </div>
+                    <div class="pt-3">
+                        <h3 class="h6">Do you have any questions?</h3>
+                        <a class="btn btn-sm btn-primary" href="#!">Contact us</a>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Viewed products (Carousel) -->
+        <section class="container pb-4 pb-md-5 mb-2 mb-sm-0 mb-lg-2 mb-xl-4">
+            <h2 class="h3 border-bottom pb-4 mb-0">Viewed products</h2>
+
+            <!-- Product carousel -->
+            <div class="position-relative mx-md-1">
+
+                <!-- External slider prev/next buttons visible on screens > 500px wide (sm breakpoint) -->
+                <button type="button"
+                    class="viewed-prev btn btn-prev btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-start position-absolute top-50 start-0 z-2 translate-middle-y ms-n1 d-none d-sm-inline-flex"
+                    aria-label="Prev">
+                    <i class="ci-chevron-left fs-lg animate-target"></i>
+                </button>
+                <button type="button"
+                    class="viewed-next btn btn-next btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-end position-absolute top-50 end-0 z-2 translate-middle-y me-n1 d-none d-sm-inline-flex"
+                    aria-label="Next">
+                    <i class="ci-chevron-right fs-lg animate-target"></i>
+                </button>
+
+                <!-- Slider -->
+                <div class="swiper py-4 px-sm-3"
+                    data-swiper='{
+            "slidesPerView": 2,
+            "spaceBetween": 24,
+            "loop": true,
+            "navigation": {
+              "prevEl": ".viewed-prev",
+              "nextEl": ".viewed-next"
+            },
+            "breakpoints": {
+              "768": {
+                "slidesPerView": 3
+              },
+              "992": {
+                "slidesPerView": 4
+              }
+            }
+          }'>
+                    <div class="swiper-wrapper">
+
+                        <!-- Item -->
+                        <div class="swiper-slide">
+                            <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+                                <div class="position-relative">
+                                    <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                                        <div class="d-flex flex-column gap-2">
+                                            <button type="button"
+                                                class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex"
+                                                aria-label="Add to Wishlist">
+                                                <i class="ci-heart fs-base animate-target"></i>
+                                            </button>
+                                            <button type="button"
+                                                class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex"
+                                                aria-label="Compare">
+                                                <i class="ci-refresh-cw fs-base animate-target"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                                        <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body"
+                                            data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                                            <i class="ci-more-vertical fs-lg"></i>
+                                        </button>
+                                        <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                                            <li>
+                                                <a class="dropdown-item" href="#!">
+                                                    <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                                                    Add to Wishlist
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a class="dropdown-item" href="#!">
+                                                    <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                                                    Compare
+                                                </a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                    <a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="#!">
+                                        <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                                            <img src="/img/shop/electronics/13.png" alt="Dualsense Edge">
+                                        </div>
+                                    </a>
+                                </div>
+                                <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                                    <div class="d-flex align-items-center gap-2 mb-2">
+                                        <div class="d-flex gap-1 fs-xs">
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                        </div>
+                                        <span class="text-body-tertiary fs-xs">(187)</span>
+                                    </div>
+                                    <h3 class="pb-1 mb-2">
+                                        <a class="d-block fs-sm fw-medium text-truncate" href="#!">
+                                            <span class="animate-target">Sony Dualsense Edge Controller</span>
+                                        </a>
+                                    </h3>
+                                    <div class="d-flex align-items-center justify-content-between">
+                                        <div class="h5 lh-1 mb-0">$200.00</div>
+                                        <button type="button"
+                                            class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2"
+                                            aria-label="Add to Cart">
+                                            <i class="ci-shopping-cart fs-base animate-target"></i>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Item -->
+                        <div class="swiper-slide">
+                            <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+                                <div class="position-relative">
+                                    <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                                        <div class="d-flex flex-column gap-2">
+                                            <button type="button"
+                                                class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex"
+                                                aria-label="Add to Wishlist">
+                                                <i class="ci-heart fs-base animate-target"></i>
+                                            </button>
+                                            <button type="button"
+                                                class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex"
+                                                aria-label="Compare">
+                                                <i class="ci-refresh-cw fs-base animate-target"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                                        <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body"
+                                            data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                                            <i class="ci-more-vertical fs-lg"></i>
+                                        </button>
+                                        <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                                            <li>
+                                                <a class="dropdown-item" href="#!">
+                                                    <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                                                    Add to Wishlist
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a class="dropdown-item" href="#!">
+                                                    <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                                                    Compare
+                                                </a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                    <a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="#!">
+                                        <span
+                                            class="badge bg-danger position-absolute top-0 start-0 mt-2 ms-2 mt-lg-3 ms-lg-3">-17%</span>
+                                        <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                                            <img src="/img/shop/electronics/11.png" alt="Nikon Camera">
+                                        </div>
+                                    </a>
+                                </div>
+                                <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                                    <div class="d-flex align-items-center gap-2 mb-2">
+                                        <div class="d-flex gap-1 fs-xs">
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                        </div>
+                                        <span class="text-body-tertiary fs-xs">(14)</span>
+                                    </div>
+                                    <h3 class="pb-1 mb-2">
+                                        <a class="d-block fs-sm fw-medium text-truncate" href="#!">
+                                            <span class="animate-target">VRB01 Camera Nikon Max</span>
+                                        </a>
+                                    </h3>
+                                    <div class="d-flex align-items-center justify-content-between">
+                                        <div class="h5 lh-1 mb-0">$652.00 <del
+                                                class="text-body-tertiary fs-sm fw-normal">$785.00</del></div>
+                                        <button type="button"
+                                            class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2"
+                                            aria-label="Add to Cart">
+                                            <i class="ci-shopping-cart fs-base animate-target"></i>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Item -->
+                        <div class="swiper-slide">
+                            <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+                                <div class="position-relative">
+                                    <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                                        <div class="d-flex flex-column gap-2">
+                                            <button type="button"
+                                                class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex"
+                                                aria-label="Add to Wishlist">
+                                                <i class="ci-heart fs-base animate-target"></i>
+                                            </button>
+                                            <button type="button"
+                                                class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex"
+                                                aria-label="Compare">
+                                                <i class="ci-refresh-cw fs-base animate-target"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                                        <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body"
+                                            data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                                            <i class="ci-more-vertical fs-lg"></i>
+                                        </button>
+                                        <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                                            <li>
+                                                <a class="dropdown-item" href="#!">
+                                                    <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                                                    Add to Wishlist
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a class="dropdown-item" href="#!">
+                                                    <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                                                    Compare
+                                                </a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                    <a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="#!">
+                                        <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                                            <img src="/img/shop/electronics/10.png" alt="iPhone 14">
+                                        </div>
+                                    </a>
+                                </div>
+                                <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                                    <div class="d-flex align-items-center gap-2 mb-2">
+                                        <div class="d-flex gap-1 fs-xs">
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-half text-warning"></i>
+                                        </div>
+                                        <span class="text-body-tertiary fs-xs">(335)</span>
+                                    </div>
+                                    <h3 class="pb-1 mb-2">
+                                        <a class="d-block fs-sm fw-medium text-truncate" href="#!">
+                                            <span class="animate-target">Apple iPhone 14 128GB Blue</span>
+                                        </a>
+                                    </h3>
+                                    <div class="d-flex align-items-center justify-content-between">
+                                        <div class="h5 lh-1 mb-0">$899.00</div>
+                                        <button type="button"
+                                            class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2"
+                                            aria-label="Add to Cart">
+                                            <i class="ci-shopping-cart fs-base animate-target"></i>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Item -->
+                        <div class="swiper-slide">
+                            <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+                                <div class="posittion-relative">
+                                    <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                                        <div class="d-flex flex-column gap-2">
+                                            <button type="button"
+                                                class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex"
+                                                aria-label="Add to Wishlist">
+                                                <i class="ci-heart fs-base animate-target"></i>
+                                            </button>
+                                            <button type="button"
+                                                class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex"
+                                                aria-label="Compare">
+                                                <i class="ci-refresh-cw fs-base animate-target"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                                        <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body"
+                                            data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                                            <i class="ci-more-vertical fs-lg"></i>
+                                        </button>
+                                        <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                                            <li>
+                                                <a class="dropdown-item" href="#!">
+                                                    <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                                                    Add to Wishlist
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a class="dropdown-item" href="#!">
+                                                    <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                                                    Compare
+                                                </a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                    <a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="#!">
+                                        <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                                            <img src="/img/shop/electronics/07.png" alt="iPad Pro">
+                                        </div>
+                                    </a>
+                                </div>
+                                <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                                    <div class="d-flex align-items-center gap-2 mb-2">
+                                        <div class="d-flex gap-1 fs-xs">
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-half text-warning"></i>
+                                        </div>
+                                        <span class="text-body-tertiary fs-xs">(49)</span>
+                                    </div>
+                                    <h3 class="pb-1 mb-2">
+                                        <a class="d-block fs-sm fw-medium text-truncate" href="#!">
+                                            <span class="animate-target">Tablet Apple iPad Pro M1</span>
+                                        </a>
+                                    </h3>
+                                    <div class="d-flex align-items-center justify-content-between">
+                                        <div class="h5 lh-1 mb-0">$739.00</div>
+                                        <button type="button"
+                                            class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2"
+                                            aria-label="Add to Cart">
+                                            <i class="ci-shopping-cart fs-base animate-target"></i>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Item -->
+                        <div class="swiper-slide">
+                            <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+                                <div class="position-relative">
+                                    <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                                        <div class="d-flex flex-column gap-2">
+                                            <button type="button"
+                                                class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex"
+                                                aria-label="Add to Wishlist">
+                                                <i class="ci-heart fs-base animate-target"></i>
+                                            </button>
+                                            <button type="button"
+                                                class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex"
+                                                aria-label="Compare">
+                                                <i class="ci-refresh-cw fs-base animate-target"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                                        <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body"
+                                            data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                                            <i class="ci-more-vertical fs-lg"></i>
+                                        </button>
+                                        <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                                            <li>
+                                                <a class="dropdown-item" href="#!">
+                                                    <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                                                    Add to Wishlist
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a class="dropdown-item" href="#!">
+                                                    <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                                                    Compare
+                                                </a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                    <a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="#!">
+                                        <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                                            <img src="/img/shop/electronics/06.png" alt="AirPods 2">
+                                        </div>
+                                    </a>
+                                </div>
+                                <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                                    <div class="d-flex align-items-center gap-2 mb-2">
+                                        <div class="d-flex gap-1 fs-xs">
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star text-body-tertiary opacity-75"></i>
+                                        </div>
+                                        <span class="text-body-tertiary fs-xs">(78)</span>
+                                    </div>
+                                    <h3 class="pb-1 mb-2">
+                                        <a class="d-block fs-sm fw-medium text-truncate" href="#!">
+                                            <span class="animate-target">Headphones Apple AirPods 2 Pro</span>
+                                        </a>
+                                    </h3>
+                                    <div class="d-flex align-items-center justify-content-between">
+                                        <div class="h5 lh-1 mb-0">$224.00</div>
+                                        <button type="button"
+                                            class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2"
+                                            aria-label="Add to Cart">
+                                            <i class="ci-shopping-cart fs-base animate-target"></i>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- External slider prev/next buttons visible on screens < 500px wide (sm breakpoint) -->
+                <div class="d-flex justify-content-center gap-2 mt-n2 mb-3 pb-1 d-sm-none">
+                    <button type="button"
+                        class="viewed-prev btn btn-prev btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-start me-1"
+                        aria-label="Prev">
+                        <i class="ci-chevron-left fs-lg animate-target"></i>
+                    </button>
+                    <button type="button"
+                        class="viewed-next btn btn-next btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-end"
+                        aria-label="Next">
+                        <i class="ci-chevron-right fs-lg animate-target"></i>
+                    </button>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Subscription form + Vlog -->
+        <section class="bg-body-tertiary py-5">
+            <div class="container pt-sm-2 pt-md-3 pt-lg-4 pt-xl-5">
+                <div class="row">
+                    <div class="col-md-6 col-lg-5 mb-5 mb-md-0">
+                        <h2 class="h4 mb-2">Sign up to our newsletter</h2>
+                        <p class="text-body pb-2 pb-ms-3">Receive our latest updates about our products &amp; promotions
+                        </p>
+                        <form class="d-flex needs-validation pb-1 pb-sm-2 pb-md-3 pb-lg-0 mb-4 mb-lg-5" novalidate>
+                            <div class="position-relative w-100 me-2">
+                                <input type="email" class="form-control form-control-lg" placeholder="Your email"
+                                    required>
+                            </div>
+                            <button type="submit" class="btn btn-lg btn-primary">Subscribe</button>
+                        </form>
+                        <div class="d-flex gap-3">
+                            <a class="btn btn-icon btn-secondary rounded-circle" href="#!" aria-label="Instagram">
+                                <i class="ci-instagram fs-base"></i>
+                            </a>
+                            <a class="btn btn-icon btn-secondary rounded-circle" href="#!" aria-label="Facebook">
+                                <i class="ci-facebook fs-base"></i>
+                            </a>
+                            <a class="btn btn-icon btn-secondary rounded-circle" href="#!" aria-label="YouTube">
+                                <i class="ci-youtube fs-base"></i>
+                            </a>
+                            <a class="btn btn-icon btn-secondary rounded-circle" href="#!" aria-label="Telegram">
+                                <i class="ci-telegram fs-base"></i>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="col-md-6 col-lg-5 col-xl-4 offset-lg-1 offset-xl-2">
+                        <ul class="list-unstyled d-flex flex-column gap-4 ps-md-4 ps-lg-0 mb-3">
+                            <li class="nav flex-nowrap align-items-center position-relative">
+                                <img src="/img/home/electronics/vlog/01.jpg" class="rounded" width="140"
+                                    alt="Video cover">
+                                <div class="ps-3">
+                                    <div class="fs-xs text-body-secondary lh-sm mb-2">6:16</div>
+                                    <a class="nav-link fs-sm hover-effect-underline stretched-link p-0" href="#!">5
+                                        New Cool Gadgets You Must See on Cartzilla - Cheap Budget</a>
+                                </div>
+                            </li>
+                            <li class="nav flex-nowrap align-items-center position-relative">
+                                <img src="/img/home/electronics/vlog/02.jpg" class="rounded" width="140"
+                                    alt="Video cover">
+                                <div class="ps-3">
+                                    <div class="fs-xs text-body-secondary lh-sm mb-2">10:20</div>
+                                    <a class="nav-link fs-sm hover-effect-underline stretched-link p-0" href="#!">5
+                                        Super Useful Gadgets on Cartzilla You Must Have in 2023</a>
+                                </div>
+                            </li>
+                            <li class="nav flex-nowrap align-items-center position-relative">
+                                <img src="/img/home/electronics/vlog/03.jpg" class="rounded" width="140"
+                                    alt="Video cover">
+                                <div class="ps-3">
+                                    <div class="fs-xs text-body-secondary lh-sm mb-2">8:40</div>
+                                    <a class="nav-link fs-sm hover-effect-underline stretched-link p-0" href="#!">Top
+                                        5 New Amazing Gadgets on Cartzilla You Must See</a>
+                                </div>
+                            </li>
+                        </ul>
+                        <div class="nav ps-md-4 ps-lg-0">
+                            <a class="btn nav-link animate-underline text-decoration-none px-0" href="#!">
+                                <span class="animate-target">View all</span>
+                                <i class="ci-chevron-right fs-base ms-1"></i>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    @include('layouts.partials/footer')
+@endsection
+
+@section('scripts')
+@endsection
diff --git a/resources/views/shop/product-fashion.blade.php b/resources/views/shop/product-fashion.blade.php
new file mode 100644
index 0000000..7392efc
--- /dev/null
+++ b/resources/views/shop/product-fashion.blade.php
@@ -0,0 +1,3398 @@
+@extends('layouts.landing', ['title' => 'Fashion Store - Product Page'])
+
+@section('content')
+    <div class="modal fade" id="reviewForm" data-bs-backdrop="static" tabindex="-1" aria-labelledby="reviewFormLabel"
+        aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
+            <form class="modal-content needs-validation" novalidate>
+                <div class="modal-header border-0">
+                    <h5 class="modal-title" id="reviewFormLabel">Leave a review</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body pb-3 pt-0">
+                    <div class="mb-3">
+                        <label for="review-name" class="form-label">Your name <span class="text-danger">*</span></label>
+                        <input type="text" class="form-control" id="review-name" required>
+                        <div class="invalid-feedback">Please enter your name!</div>
+                        <small class="form-text">Will be displayed on the comment.</small>
+                    </div>
+                    <div class="mb-3">
+                        <label for="review-email" class="form-label">Your email <span class="text-danger">*</span></label>
+                        <input type="email" class="form-control" id="review-email" required>
+                        <div class="invalid-feedback">Please provide a valid email address!</div>
+                        <small class="form-text">Authentication only - we won't spam you.</small>
+                    </div>
+                    <div class="mb-3">
+                        <label class="form-label">Rating <span class="text-danger">*</span></label>
+                        <select class="form-select"
+                            data-select='{
+                "classNames": {
+                  "containerInner": "form-select"
+                },
+                "placeholderValue": "Choose rating",
+                "choices": [
+                  {
+                    "value": "",
+                    "label": "Choose rating",
+                    "placeholder": true
+                  },
+                  {
+                    "value": "1",
+                    "label": "<span class=\"visually-hidden\">1 star</span>",
+                    "customProperties": {
+                      "icon": "<span class=\"d-flex gap-1 py-1\"><i class=\"ci-star-filled text-warning\"></i></span>",
+                      "selected": "1 star"
+                    }
+                  },
+                  {
+                    "value": "2",
+                    "label": "<span class=\"visually-hidden\">2 stars</span>",
+                    "customProperties": {
+                      "icon": "<span class=\"d-flex gap-1 py-1\"><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i></span>",
+                      "selected": "2 stars"
+                    }
+                  },
+                  {
+                    "value": "3",
+                    "label": "<span class=\"visually-hidden\">3 stars</span>",
+                    "customProperties": {
+                      "icon": "<span class=\"d-flex gap-1 py-1\"><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i></span>",
+                      "selected": "3 stars"
+                    }
+                  },
+                  {
+                    "value": "4",
+                    "label": "<span class=\"visually-hidden\">4 stars</span>",
+                    "customProperties": {
+                      "icon": "<span class=\"d-flex gap-1 py-1\"><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i></span>",
+                      "selected": "4 stars"
+                    }
+                  },
+                  {
+                    "value": "5",
+                    "label": "<span class=\"visually-hidden\">5 stars</span>",
+                    "customProperties": {
+                      "icon": "<span class=\"d-flex gap-1 py-1\"><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i></span>",
+                      "selected": "5 stars"
+                    }
+                  }
+                ]
+              }'
+                            data-select-template="true" required></select>
+                        <div class="invalid-feedback">Please choose your rating!</div>
+                    </div>
+                    <div class="mb-3">
+                        <label class="form-label" for="review-text">Review <span class="text-danger">*</span></label>
+                        <textarea class="form-control" rows="4" id="review-text" required></textarea>
+                        <div class="invalid-feedback">Please write a review!</div>
+                        <small class="form-text">Your review must be at least 50 characters.</small>
+                    </div>
+                    <div>
+                        <div class="form-check form-check-inline">
+                            <input type="radio" class="form-check-input" id="yes" name="recommend" checked>
+                            <label for="yes" class="form-check-label">Yes, I recommend</label>
+                        </div>
+                        <div class="form-check form-check-inline">
+                            <input type="radio" class="form-check-input" id="no" name="recommend">
+                            <label for="no" class="form-check-label">No, I don't recommend</label>
+                        </div>
+                    </div>
+                </div>
+                <div class="modal-footer flex-nowrap gap-3 border-0 px-4">
+                    <button type="reset" class="btn btn-secondary w-100 m-0" data-bs-dismiss="modal">Cancel</button>
+                    <button type="submit" class="btn btn-dark w-100 m-0">Submit review</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <div class="modal fade" id="sizeGuide" tabindex="-1" aria-labelledby="reviewFormLabel" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
+            <div class="modal-content">
+                <div class="modal-header bg-body-tertiary border-0 py-2 ps-2 pe-4">
+                    <ul class="nav nav-tabs flex-nowrap text-nowrap py-2" role="tablist">
+                        <li class="nav-item" role="presentation">
+                            <a class="nav-link active" href="#womens" id="womens-sizes" data-bs-toggle="tab" role="tab"
+                                aria-controls="mens" aria-selected="true">Women's sizes</a>
+                        </li>
+                        <li class="nav-item" role="presentation">
+                            <a class="nav-link" href="#mens" id="mens-sizes" data-bs-toggle="tab" role="tab"
+                                aria-controls="womens" aria-selected="false" tabindex="-1">Men's sizes</a>
+                        </li>
+                    </ul>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body p-0">
+                    <div class="tab-content">
+                        <div class="tab-pane fade show active" id="womens" role="tabpanel"
+                            aria-labelledby="womens-sizes">
+                            <div class="table-responsive">
+                                <table class="table fs-sm text-center mb-0">
+                                    <thead>
+                                        <tr>
+                                            <th scope="col" class="align-middle">US<br>Sizes</th>
+                                            <th scope="col" class="align-middle">Euro<br>Sizes</th>
+                                            <th scope="col" class="align-middle">UK<br>Sizes</th>
+                                            <th scope="col" class="align-middle">Inches</th>
+                                            <th scope="col" class="align-middle">CM</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <tr>
+                                            <td class="fw-medium">4</td>
+                                            <td>35</td>
+                                            <td>2</td>
+                                            <td>8.1875"</td>
+                                            <td>20.8</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="fw-medium">4.5</td>
+                                            <td>35</td>
+                                            <td>2.5</td>
+                                            <td>8.375"</td>
+                                            <td>21.3</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="fw-medium">5</td>
+                                            <td>35-36</td>
+                                            <td>3</td>
+                                            <td>8.5"</td>
+                                            <td>21.6</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="fw-medium">5.5</td>
+                                            <td>36</td>
+                                            <td>3.5</td>
+                                            <td>8.75"</td>
+                                            <td>22.2</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="fw-medium">6</td>
+                                            <td>36-37</td>
+                                            <td>4</td>
+                                            <td>8.875"</td>
+                                            <td>22.5</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="fw-medium">6.5</td>
+                                            <td>37</td>
+                                            <td>4.5</td>
+                                            <td>9.0625"</td>
+                                            <td>23</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="fw-medium">7</td>
+                                            <td>37-38</td>
+                                            <td>5</td>
+                                            <td>9.25"</td>
+                                            <td>23.5</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="fw-medium">7.5</td>
+                                            <td>38</td>
+                                            <td>5.5</td>
+                                            <td>9.375"</td>
+                                            <td>23.8</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="fw-medium">8</td>
+                                            <td>38-39</td>
+                                            <td>6</td>
+                                            <td>9.5"</td>
+                                            <td>24.1</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="fw-medium">8.5</td>
+                                            <td>39</td>
+                                            <td>6.5</td>
+                                            <td>9.6875"</td>
+                                            <td>24.6</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="fw-medium">9</td>
+                                            <td>39-40</td>
+                                            <td>7</td>
+                                            <td>9.875"</td>
+                                            <td>25.1</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="fw-medium">9.5</td>
+                                            <td>40</td>
+                                            <td>7.5</td>
+                                            <td>10"</td>
+                                            <td>25.4</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="fw-medium">10</td>
+                                            <td>40-41</td>
+                                            <td>8</td>
+                                            <td>10.1875"</td>
+                                            <td>25.9</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="fw-medium">10.5</td>
+                                            <td>41</td>
+                                            <td>8.5</td>
+                                            <td>10.3125"</td>
+                                            <td>26.2</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="fw-medium">11</td>
+                                            <td>41-42</td>
+                                            <td>9</td>
+                                            <td>10.5"</td>
+                                            <td>26.7</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="fw-medium">11.5</td>
+                                            <td>42</td>
+                                            <td>9.5</td>
+                                            <td>10.6875"</td>
+                                            <td>27.1</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="fw-medium">12</td>
+                                            <td>42-43</td>
+                                            <td>10</td>
+                                            <td>10.875"</td>
+                                            <td>27.6</td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+                        <div class="tab-pane fade" id="mens" role="tabpanel" aria-labelledby="mens-sizes">
+                            <div class="table-responsive">
+                                <table class="table fs-sm text-center mb-0">
+                                    <thead>
+                                        <tr>
+                                            <th scope="col" class="align-middle">US<br>Sizes</th>
+                                            <th scope="col" class="align-middle">Euro<br>Sizes</th>
+                                            <th scope="col" class="align-middle">UK<br>Sizes</th>
+                                            <th scope="col" class="align-middle">Inches</th>
+                                            <th scope="col" class="align-middle">CM</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <tr>
+                                            <td class="fw-medium">6</td>
+                                            <td>39</td>
+                                            <td>5.5</td>
+                                            <td>9.25"</td>
+                                            <td>23.5</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="fw-medium">6.5</td>
+                                            <td>39</td>
+                                            <td>6</td>
+                                            <td>9.5"</td>
+                                            <td>24.1</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="fw-medium">7</td>
+                                            <td>40</td>
+                                            <td>6.5</td>
+                                            <td>9.625"</td>
+                                            <td>24.4</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="fw-medium">7.5</td>
+                                            <td>40-41</td>
+                                            <td>7</td>
+                                            <td>9.75"</td>
+                                            <td>24.8</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="fw-medium">8</td>
+                                            <td>41</td>
+                                            <td>7.5</td>
+                                            <td>9.9375"</td>
+                                            <td>25.4</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="fw-medium">8.5</td>
+                                            <td>41-42</td>
+                                            <td>8</td>
+                                            <td>10.125"</td>
+                                            <td>25.7</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="fw-medium">9</td>
+                                            <td>42</td>
+                                            <td>8.5</td>
+                                            <td>10.25"</td>
+                                            <td>26</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="fw-medium">9.5</td>
+                                            <td>42-43</td>
+                                            <td>9</td>
+                                            <td>10.4375"</td>
+                                            <td>26.7</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="fw-medium">10</td>
+                                            <td>43</td>
+                                            <td>9.5</td>
+                                            <td>10.5625"</td>
+                                            <td>27</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="fw-medium">10.5</td>
+                                            <td>43-44</td>
+                                            <td>10</td>
+                                            <td>10.75"</td>
+                                            <td>27.3</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="fw-medium">11</td>
+                                            <td>44</td>
+                                            <td>10.5</td>
+                                            <td>10.9375"</td>
+                                            <td>27.9</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="fw-medium">11.5</td>
+                                            <td>44-45</td>
+                                            <td>11</td>
+                                            <td>11.125"</td>
+                                            <td>28.3</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="fw-medium">12</td>
+                                            <td>45</td>
+                                            <td>11.5</td>
+                                            <td>11.25"</td>
+                                            <td>28.6</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="fw-medium">13</td>
+                                            <td>46</td>
+                                            <td>12.5</td>
+                                            <td>11.5625"</td>
+                                            <td>29.4</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="fw-medium">14</td>
+                                            <td>47</td>
+                                            <td>13.5</td>
+                                            <td>11.875"</td>
+                                            <td>30.2</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="fw-medium">15</td>
+                                            <td>48</td>
+                                            <td>14.5</td>
+                                            <td>12.1875"</td>
+                                            <td>31</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="fw-medium">16</td>
+                                            <td>49</td>
+                                            <td>15.5</td>
+                                            <td>12.5"</td>
+                                            <td>31.8</td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="offcanvas offcanvas-end pb-sm-2 px-sm-2" id="shoppingCart" tabindex="-1"
+        aria-labelledby="shoppingCartLabel" style="width: 500px">
+
+        <!-- Header -->
+        <div class="offcanvas-header flex-column align-items-start py-3 pt-lg-4">
+            <div class="d-flex align-items-center justify-content-between w-100 mb-3 mb-lg-4">
+                <h4 class="offcanvas-title" id="shoppingCartLabel">Shopping cart</h4>
+                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+            </div>
+            <p class="fs-sm">Buy <span class="text-dark-emphasis fw-semibold">$53</span> more to get <span
+                    class="text-dark-emphasis fw-semibold">Free Shipping</span></p>
+            <div class="progress w-100" role="progressbar" aria-label="Free shipping progress" aria-valuenow="78"
+                aria-valuemin="0" aria-valuemax="100" style="height: 4px">
+                <div class="progress-bar bg-dark rounded-pill d-none-dark" style="width: 78%"></div>
+                <div class="progress-bar bg-light rounded-pill d-none d-block-dark" style="width: 78%"></div>
+            </div>
+        </div>
+
+        <!-- Items -->
+        <div class="offcanvas-body d-flex flex-column gap-4 pt-2">
+
+            <!-- Item -->
+            <div class="d-flex align-items-center">
+                <a class="flex-shrink-0" href="#!">
+                    <img src="/img/shop/fashion/thumbs/07.png" class="bg-body-tertiary rounded" width="110"
+                        alt="Thumbnail">
+                </a>
+                <div class="w-100 min-w-0 ps-3">
+                    <h5 class="d-flex animate-underline mb-2">
+                        <a class="d-block fs-sm fw-medium text-truncate animate-target" href="#!">Leather sneakers
+                            with golden laces</a>
+                    </h5>
+                    <div class="h6 pb-1 mb-2">$74.00</div>
+                    <div class="d-flex align-items-center justify-content-between">
+                        <div class="count-input rounded-2">
+                            <button type="button" class="btn btn-icon btn-sm" data-decrement
+                                aria-label="Decrement quantity">
+                                <i class="ci-minus"></i>
+                            </button>
+                            <input type="number" class="form-control form-control-sm" value="1" readonly>
+                            <button type="button" class="btn btn-icon btn-sm" data-increment
+                                aria-label="Increment quantity">
+                                <i class="ci-plus"></i>
+                            </button>
+                        </div>
+                        <button type="button" class="btn-close fs-sm" data-bs-toggle="tooltip"
+                            data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
+                            aria-label="Remove from cart"></button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Item -->
+            <div class="d-flex align-items-center">
+                <a class="flex-shrink-0" href="#!">
+                    <img src="/img/shop/fashion/thumbs/08.png" class="bg-body-tertiary rounded" width="110"
+                        alt="Thumbnail">
+                </a>
+                <div class="w-100 min-w-0 ps-3">
+                    <h5 class="d-flex animate-underline mb-2">
+                        <a class="d-block fs-sm fw-medium text-truncate animate-target" href="#!">Classic cotton
+                            men's shirt</a>
+                    </h5>
+                    <div class="h6 pb-1 mb-2">$27.00</div>
+                    <div class="d-flex align-items-center justify-content-between">
+                        <div class="count-input rounded-2">
+                            <button type="button" class="btn btn-icon btn-sm" data-decrement
+                                aria-label="Decrement quantity">
+                                <i class="ci-minus"></i>
+                            </button>
+                            <input type="number" class="form-control form-control-sm" value="1" readonly>
+                            <button type="button" class="btn btn-icon btn-sm" data-increment
+                                aria-label="Increment quantity">
+                                <i class="ci-plus"></i>
+                            </button>
+                        </div>
+                        <button type="button" class="btn-close fs-sm" data-bs-toggle="tooltip"
+                            data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
+                            aria-label="Remove from cart"></button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Item -->
+            <div class="d-flex align-items-center">
+                <a class="flex-shrink-0" href="#!">
+                    <img src="/img/shop/fashion/thumbs/09.png" class="bg-body-tertiary rounded" width="110"
+                        alt="Thumbnail">
+                </a>
+                <div class="w-100 min-w-0 ps-3">
+                    <h5 class="d-flex animate-underline mb-2">
+                        <a class="d-block fs-sm fw-medium text-truncate animate-target" href="#!">Polarized
+                            sunglasses for men</a>
+                    </h5>
+                    <div class="h6 pb-1 mb-2">$96.00 <del class="text-body-tertiary fs-xs fw-normal">112.00</del></div>
+                    <div class="d-flex align-items-center justify-content-between">
+                        <div class="count-input rounded-2">
+                            <button type="button" class="btn btn-icon btn-sm" data-decrement
+                                aria-label="Decrement quantity">
+                                <i class="ci-minus"></i>
+                            </button>
+                            <input type="number" class="form-control form-control-sm" value="1" readonly>
+                            <button type="button" class="btn btn-icon btn-sm" data-increment
+                                aria-label="Increment quantity">
+                                <i class="ci-plus"></i>
+                            </button>
+                        </div>
+                        <button type="button" class="btn-close fs-sm" data-bs-toggle="tooltip"
+                            data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
+                            aria-label="Remove from cart"></button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Footer -->
+        <div class="offcanvas-header flex-column align-items-start">
+            <div class="d-flex align-items-center justify-content-between w-100 mb-3 mb-md-4">
+                <span class="text-light-emphasis">Subtotal:</span>
+                <span class="h6 mb-0">$197.00</span>
+            </div>
+            <div class="d-flex w-100 gap-3">
+                <a class="btn btn-lg btn-secondary w-100" href="#!">View cart</a>
+                <a class="btn btn-lg btn-dark w-100" href="#!">Checkout</a>
+            </div>
+        </div>
+    </div>
+
+    <div class="offcanvas offcanvas-top" id="searchBox" data-bs-backdrop="static" tabindex="-1">
+        <div class="offcanvas-header border-bottom p-0 py-lg-1">
+            <form class="container d-flex align-items-center">
+                <input type="search" class="form-control form-control-lg fs-lg border-0 rounded-0 py-3 ps-0"
+                    placeholder="Search the products" data-autofocus="offcanvas">
+                <button type="reset" class="btn-close fs-lg" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+            </form>
+        </div>
+        <div class="offcanvas-body px-0">
+            <div class="container text-center">
+                <svg class="text-body-tertiary opacity-60 mb-4" xmlns="http://www.w3.org/2000/svg" width="60"
+                    viewBox="0 0 512 512" fill="currentColor">
+                    <path
+                        d="M340.115,361.412l-16.98-16.98c-34.237,29.36-78.733,47.098-127.371,47.098C87.647,391.529,0,303.883,0,195.765S87.647,0,195.765,0s195.765,87.647,195.765,195.765c0,48.638-17.738,93.134-47.097,127.371l16.98,16.98l11.94-11.94c5.881-5.881,15.415-5.881,21.296,0l112.941,112.941c5.881,5.881,5.881,15.416,0,21.296l-45.176,45.176c-5.881,5.881-15.415,5.881-21.296,0L328.176,394.648c-5.881-5.881-5.881-15.416,0-21.296L340.115,361.412z M195.765,361.412c91.484,0,165.647-74.163,165.647-165.647S287.249,30.118,195.765,30.118S30.118,104.28,30.118,195.765S104.28,361.412,195.765,361.412z M360.12,384l91.645,91.645l23.88-23.88L384,360.12L360.12,384z M233.034,233.033c5.881-5.881,15.415-5.881,21.296,0c5.881,5.881,5.881,15.416,0,21.296c-32.345,32.345-84.786,32.345-117.131,0c-5.881-5.881-5.881-15.415,0-21.296c5.881-5.881,15.416-5.881,21.296,0C179.079,253.616,212.45,253.616,233.034,233.033zM135.529,180.706c-12.475,0-22.588-10.113-22.588-22.588c0-12.475,10.113-22.588,22.588-22.588c12.475,0,22.588,10.113,22.588,22.588C158.118,170.593,148.005,180.706,135.529,180.706z M256,180.706c-12.475,0-22.588-10.113-22.588-22.588c0-12.475,10.113-22.588,22.588-22.588s22.588,10.113,22.588,22.588C278.588,170.593,268.475,180.706,256,180.706z" />
+                </svg>
+                <h6 class="mb-2">Your search results will appear here</h6>
+                <p class="fs-sm mb-0">Start typing in the search field above to see instant search results.</p>
+            </div>
+        </div>
+    </div>
+
+    <div class="alert alert-dismissible bg-dark text-white rounded-0 py-2 px-0 m-0 fade show" data-bs-theme="dark">
+        <div class="container position-relative d-flex min-w-0">
+            <div class="d-flex flex-nowrap align-items-center g-2 w-100 min-w-0 mx-auto mt-n1" style="max-width: 458px">
+                <div class="nav me-2">
+                    <button type="button" class="nav-link fs-lg p-0" id="topbarPrev" aria-label="Prev">
+                        <i class="ci-chevron-left"></i>
+                    </button>
+                </div>
+                <div class="swiper fs-sm text-white"
+                    data-swiper='{
+            "spaceBetween": 24,
+            "loop": true,
+            "autoplay": {
+              "delay": 5000,
+              "disableOnInteraction": false
+            },
+            "navigation": {
+              "prevEl": "#topbarPrev",
+              "nextEl": "#topbarNext"
+            }
+          }'>
+                    <div class="swiper-wrapper min-w-0">
+                        <div class="swiper-slide text-truncate text-center">🎉 Free Shipping on orders over $250. <span
+                                class="d-none d-sm-inline">Don't miss a discount!</span></div>
+                        <div class="swiper-slide text-truncate text-center">💰 Money back guarantee. <span
+                                class="d-none d-sm-inline">We return money within 30 days.</span></div>
+                        <div class="swiper-slide text-truncate text-center">💪 Friendly 24/7 customer support. <span
+                                class="d-none d-sm-inline">We've got you covered!</span></div>
+                    </div>
+                </div>
+                <div class="nav ms-2">
+                    <button type="button" class="nav-link fs-lg p-0" id="topbarNext" aria-label="Next">
+                        <i class="ci-chevron-right"></i>
+                    </button>
+                </div>
+            </div>
+            <button type="button" class="btn-close position-static flex-shrink-0 p-1 ms-3 ms-md-n4"
+                data-bs-dismiss="alert" aria-label="Close"></button>
+        </div>
+    </div>
+
+    <header class="navbar navbar-expand-lg navbar-sticky bg-body d-block z-fixed p-0"
+        data-sticky-navbar='{"offset": 500}'>
+        <div class="container py-2 py-lg-3">
+            <div class="d-flex align-items-center gap-3">
+
+                <!-- Mobile offcanvas menu toggler (Hamburger) -->
+                <button type="button" class="navbar-toggler me-4 me-md-2" data-bs-toggle="offcanvas"
+                    data-bs-target="#navbarNav" aria-controls="navbarNav" aria-label="Toggle navigation">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+
+                <!-- Country slect visible on screens > 768px wide (md breakpoint) -->
+                <div class="dropdown d-none d-md-block nav">
+                    <a class="nav-link dropdown-toggle py-1 px-0" href="#" data-bs-toggle="dropdown"
+                        aria-haspopup="true" aria-expanded="false" aria-label="Country select: USA">
+                        <div class="ratio ratio-1x1" style="width: 20px">
+                            <img src="/img/flags/en-us.png" alt="USA">
+                        </div>
+                    </a>
+                    <ul class="dropdown-menu fs-sm" style="--cz-dropdown-spacer: .5rem">
+                        <li>
+                            <a class="dropdown-item" href="#!">
+                                <img src="/img/flags/en-uk.png" class="flex-shrink-0 me-2" width="20"
+                                    alt="United Kingdom">
+                                United Kingdom
+                            </a>
+                        </li>
+                        <li>
+                            <a class="dropdown-item" href="#!">
+                                <img src="/img/flags/fr.png" class="flex-shrink-0 me-2" width="20" alt="France">
+                                France
+                            </a>
+                        </li>
+                        <li>
+                            <a class="dropdown-item" href="#!">
+                                <img src="/img/flags/de.png" class="flex-shrink-0 me-2" width="20"
+                                    alt="Deutschland">
+                                Deutschland
+                            </a>
+                        </li>
+                        <li>
+                            <a class="dropdown-item" href="#!">
+                                <img src="/img/flags/it.png" class="flex-shrink-0 me-2" width="20" alt="Italia">
+                                Italia
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+
+                <!-- City slect visible on screens > 768px wide (md breakpoint) -->
+                <div class="dropdown d-none d-md-block nav">
+                    <a class="nav-link animate-underline dropdown-toggle fw-normal py-1 px-0" href="#"
+                        data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        <span class="animate-target">Washington</span>
+                    </a>
+                    <ul class="dropdown-menu fs-sm" style="--cz-dropdown-spacer: .5rem">
+                        <li><a class="dropdown-item" href="#!">Chicago</a></li>
+                        <li><a class="dropdown-item" href="#!">Los Angeles</a></li>
+                        <li><a class="dropdown-item" href="#!">New York</a></li>
+                        <li><a class="dropdown-item" href="#!">Philadelphia</a></li>
+                    </ul>
+                </div>
+            </div>
+
+            <!-- Navbar brand (Logo) -->
+            <a class="navbar-brand fs-2 py-0 m-0 me-auto me-sm-n5" href="{{ route('second', ['home', 'fashion-v1']) }}">Cartzilla</a>
+
+            <!-- Button group -->
+            <div class="d-flex align-items-center">
+
+                <!-- Navbar stuck nav toggler -->
+                <button type="button" class="navbar-toggler d-none navbar-stuck-show me-3" data-bs-toggle="collapse"
+                    data-bs-target="#stuckNav" aria-controls="stuckNav" aria-expanded="false"
+                    aria-label="Toggle navigation in navbar stuck state">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+
+                <!-- Theme switcher (light/dark/auto) -->
+                <div class="dropdown">
+                    <button type="button"
+                        class="theme-switcher btn btn-icon btn-lg btn-outline-secondary fs-lg border-0 rounded-circle animate-scale"
+                        data-bs-toggle="dropdown" aria-expanded="false" aria-label="Toggle theme (light)">
+                        <span class="theme-icon-active d-flex animate-target">
+                            <i class="ci-sun"></i>
+                        </span>
+                    </button>
+                    <ul class="dropdown-menu" style="--cz-dropdown-min-width: 9rem">
+                        <li>
+                            <button type="button" class="dropdown-item active" data-bs-theme-value="light"
+                                aria-pressed="true">
+                                <span class="theme-icon d-flex fs-base me-2">
+                                    <i class="ci-sun"></i>
+                                </span>
+                                <span class="theme-label">Light</span>
+                                <i class="item-active-indicator ci-check ms-auto"></i>
+                            </button>
+                        </li>
+                        <li>
+                            <button type="button" class="dropdown-item" data-bs-theme-value="dark"
+                                aria-pressed="false">
+                                <span class="theme-icon d-flex fs-base me-2">
+                                    <i class="ci-moon"></i>
+                                </span>
+                                <span class="theme-label">Dark</span>
+                                <i class="item-active-indicator ci-check ms-auto"></i>
+                            </button>
+                        </li>
+                        <li>
+                            <button type="button" class="dropdown-item" data-bs-theme-value="auto"
+                                aria-pressed="false">
+                                <span class="theme-icon d-flex fs-base me-2">
+                                    <i class="ci-auto"></i>
+                                </span>
+                                <span class="theme-label">Auto</span>
+                                <i class="item-active-indicator ci-check ms-auto"></i>
+                            </button>
+                        </li>
+                    </ul>
+                </div>
+
+                <!-- Search toggle button visible on screens < 992px wide (lg breakpoint) -->
+                <button type="button"
+                    class="btn btn-icon btn-lg fs-xl btn-outline-secondary border-0 rounded-circle animate-shake d-lg-none"
+                    data-bs-toggle="offcanvas" data-bs-target="#searchBox" aria-controls="searchBox"
+                    aria-label="Toggle search bar">
+                    <i class="ci-search animate-target"></i>
+                </button>
+
+                <!-- Account button visible on screens > 768px wide (md breakpoint) -->
+                <a class="btn btn-icon btn-lg fs-lg btn-outline-secondary border-0 rounded-circle animate-shake d-none d-md-inline-flex"
+                    href="{{ route('second', ['account', 'signin']) }}">
+                    <i class="ci-user animate-target"></i>
+                    <span class="visually-hidden">Account</span>
+                </a>
+
+                <!-- Wishlist button visible on screens > 768px wide (md breakpoint) -->
+                <a class="btn btn-icon btn-lg fs-lg btn-outline-secondary border-0 rounded-circle animate-pulse d-none d-md-inline-flex"
+                    href="#!">
+                    <i class="ci-heart animate-target"></i>
+                    <span class="visually-hidden">Wishlist</span>
+                </a>
+
+                <!-- Cart button -->
+                <button type="button"
+                    class="btn btn-icon btn-lg fs-xl btn-outline-secondary position-relative border-0 rounded-circle animate-scale"
+                    data-bs-toggle="offcanvas" data-bs-target="#shoppingCart" aria-controls="shoppingCart"
+                    aria-label="Shopping cart">
+                    <span class="position-absolute top-0 start-100 badge fs-xs text-bg-primary rounded-pill mt-1 ms-n4 z-2"
+                        style="--cz-badge-padding-y: .25em; --cz-badge-padding-x: .42em">3</span>
+                    <i class="ci-shopping-bag animate-target me-1"></i>
+                </button>
+            </div>
+        </div>
+
+        <!-- Main navigation that turns into offcanvas on screens < 992px wide (lg breakpoint) -->
+        <div class="collapse navbar-stuck-hide" id="stuckNav">
+            <nav class="offcanvas offcanvas-start" id="navbarNav" tabindex="-1" aria-labelledby="navbarNavLabel">
+                <div class="offcanvas-header py-3">
+                    <h5 class="offcanvas-title" id="navbarNavLabel">Browse Cartzilla</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+                </div>
+
+                <!-- Country and City slects visible on screens < 768px wide (md breakpoint) -->
+                <div class="offcanvas-header gap-3 d-md-none pt-0 pb-3">
+                    <div class="dropdown nav">
+                        <a class="nav-link dropdown-toggle py-1 px-0" href="#" data-bs-toggle="dropdown"
+                            aria-haspopup="true" aria-expanded="false" aria-label="Country select: USA">
+                            <div class="ratio ratio-1x1" style="width: 20px">
+                                <img src="/img/flags/en-us.png" alt="USA">
+                            </div>
+                        </a>
+                        <ul class="dropdown-menu fs-sm" style="--cz-dropdown-spacer: .5rem">
+                            <li>
+                                <a class="dropdown-item" href="#!">
+                                    <img src="/img/flags/en-uk.png" class="flex-shrink-0 me-2" width="20"
+                                        alt="United Kingdom">
+                                    United Kingdom
+                                </a>
+                            </li>
+                            <li>
+                                <a class="dropdown-item" href="#!">
+                                    <img src="/img/flags/fr.png" class="flex-shrink-0 me-2" width="20"
+                                        alt="France">
+                                    France
+                                </a>
+                            </li>
+                            <li>
+                                <a class="dropdown-item" href="#!">
+                                    <img src="/img/flags/de.png" class="flex-shrink-0 me-2" width="20"
+                                        alt="Deutschland">
+                                    Deutschland
+                                </a>
+                            </li>
+                            <li>
+                                <a class="dropdown-item" href="#!">
+                                    <img src="/img/flags/it.png" class="flex-shrink-0 me-2" width="20"
+                                        alt="Italia">
+                                    Italia
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="dropdown nav">
+                        <a class="nav-link animate-underline dropdown-toggle fw-normal py-1 px-0" href="#"
+                            data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            <span class="animate-target">Washington</span>
+                        </a>
+                        <ul class="dropdown-menu fs-sm" style="--cz-dropdown-spacer: .5rem">
+                            <li><a class="dropdown-item" href="#!">Chicago</a></li>
+                            <li><a class="dropdown-item" href="#!">Los Angeles</a></li>
+                            <li><a class="dropdown-item" href="#!">New York</a></li>
+                            <li><a class="dropdown-item" href="#!">Philadelphia</a></li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="offcanvas-body pt-1 pb-3 py-lg-0">
+                    <div class="container pb-lg-2 px-0 px-lg-3">
+
+                        <div class="position-relative d-lg-flex align-items-center justify-content-between">
+
+                            <!-- Categories mega menu -->
+                            <div class="navbar-nav">
+                                <div class="dropdown position-static pb-lg-2">
+                                    <button type="button"
+                                        class="nav-link animate-underline fw-semibold text-uppercase ps-0"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover" data-bs-auto-close="outside"
+                                        aria-expanded="false">
+                                        <i class="ci-menu fs-lg me-2"></i>
+                                        <span class="animate-target">Categories</span>
+                                    </button>
+                                    <div class="dropdown-menu w-100 p-4 px-xl-5" style="--cz-dropdown-spacer: .75rem">
+
+                                        <!-- Nav tabs -->
+                                        <ul class="nav nav-underline justify-content-lg-center mt-n2 mt-lg-0 mb-4"
+                                            role="tablist">
+                                            <li class="nav-item" role="presentation">
+                                                <button type="button" class="nav-link text-uppercase active"
+                                                    id="womens-tab" data-bs-toggle="tab"
+                                                    data-bs-target="#womens-tab-pane" role="tab"
+                                                    aria-controls="womens-tab-pane" aria-selected="true">
+                                                    Women's
+                                                </button>
+                                            </li>
+                                            <li class="nav-item" role="presentation">
+                                                <button type="button" class="nav-link text-uppercase" id="mens-tab"
+                                                    data-bs-toggle="tab" data-bs-target="#mens-tab-pane" role="tab"
+                                                    aria-controls="mens-tab-pane" aria-selected="false">
+                                                    Men's
+                                                </button>
+                                            </li>
+                                            <li class="nav-item" role="presentation">
+                                                <button type="button" class="nav-link text-uppercase" id="kids-tab"
+                                                    data-bs-toggle="tab" data-bs-target="#kids-tab-pane" role="tab"
+                                                    aria-controls="kids-tab-pane" aria-selected="false">
+                                                    Kids'
+                                                </button>
+                                            </li>
+                                        </ul>
+
+                                        <!-- Tab panes -->
+                                        <div class="tab-content pb-xl-4">
+
+                                            <!-- Women's tab -->
+                                            <div class="tab-pane fade show active" id="womens-tab-pane" role="tabpanel"
+                                                aria-labelledby="womens-tab">
+                                                <div class="row g-4">
+                                                    <div class="col-lg-2">
+                                                        <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
+                                                            href="{{ route('second', ['shop', 'catalog-fashion']) }}">
+                                                            <span class="animate-target">Clothing</span>
+                                                        </a>
+                                                        <ul class="nav flex-column gap-2 mt-0">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Shirts &amp; Tops</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Coats &amp;
+                                                                    Outerwear</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Underwear</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sweatshirts</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Dresses</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Swimwear</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion'])}}">View all</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="col-lg-2">
+                                                        <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
+                                                            href="{{ route('second', ['shop', 'catalog-fashion']) }}">
+                                                            <span class="animate-target">Shoes</span>
+                                                        </a>
+                                                        <ul class="nav flex-column gap-2 mt-0">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Boots</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sandals</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Heels</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Loafers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Slippers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Oxfords</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">View all</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="col-lg-2">
+                                                        <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
+                                                            href="{{ route('second', ['shop', 'catalog-fashion']) }}">
+                                                            <span class="animate-target">Accessories</span>
+                                                        </a>
+                                                        <ul class="nav flex-column gap-2 mt-0">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Handbags</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Eyewear</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Hats</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Watches</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Jewelry</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Belts</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">View all</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="col-lg-2">
+                                                        <div class="h6 mb-2">Specialty Sizes</div>
+                                                        <ul class="nav flex-column gap-2 mt-0">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Plus Size</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Petite</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Wide Shoes</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Narrow Shoes</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="col-lg-4 d-none d-lg-block" data-bs-theme="light">
+                                                        <div
+                                                            class="position-relative d-flex flex-column h-100 rounded-4 overflow-hidden p-4">
+                                                            <div
+                                                                class="position-relative d-flex flex-column justify-content-between h-100 z-2 pt-xl-2 ps-xl-2">
+                                                                <div class="h4 lh-base">Women's<br>Heels<br>Collection
+                                                                </div>
+                                                                <div>
+                                                                    <a class="btn btn-sm btn-dark stretched-link"
+                                                                        href="{{ route('second', ['shop', 'catalog-fashion']) }}"
+                                                                        data-bs-theme="light">Shop now</a>
+                                                                </div>
+                                                            </div>
+                                                            <img src="/img/mega-menu/fashion/01.jpg"
+                                                                class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rtl-flip"
+                                                                alt="Image">
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+
+                                            <!-- Men's tab -->
+                                            <div class="tab-pane fade" id="mens-tab-pane" role="tabpanel"
+                                                aria-labelledby="mens-tab">
+                                                <div class="row g-4">
+                                                    <div class="col-lg-2">
+                                                        <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
+                                                            href="{{ route('second', ['shop', 'catalog-fashion']) }}">
+                                                            <span class="animate-target">Clothing</span>
+                                                        </a>
+                                                        <ul class="nav flex-column gap-2 mt-0">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">T-Shirts</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Jeans</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Coats &amp;
+                                                                    Outerwear</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sweatshirts</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Underwear</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Pants</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">View all</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="col-lg-2">
+                                                        <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
+                                                            href="{{ route('second', ['shop', 'catalog-fashion']) }}">
+                                                            <span class="animate-target">Shoes</span>
+                                                        </a>
+                                                        <ul class="nav flex-column gap-2 mt-0">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sneakers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Oxfords</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Loafers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sandals</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Boots</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Slippers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">View all</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="col-lg-2">
+                                                        <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
+                                                            href="{{ route('second', ['shop', 'catalog-fashion']) }}">
+                                                            <span class="animate-target">Accessories</span>
+                                                        </a>
+                                                        <ul class="nav flex-column gap-2 mt-0">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Backpacks</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sunglasses</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Bags</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Watches</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Hats</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Belts</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">View all</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="col-lg-2">
+                                                        <div class="h6 mb-2">Specialty Shops</div>
+                                                        <ul class="nav flex-column gap-2 mt-0">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Active Wear</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sports Clothing</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Athletic Shoes</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="col-lg-4 d-none d-lg-block" data-bs-theme="dark">
+                                                        <div
+                                                            class="position-relative d-flex flex-column h-100 rounded-4 overflow-hidden p-4">
+                                                            <div
+                                                                class="position-relative d-flex flex-column justify-content-between h-100 z-2 pt-xl-2 ps-xl-2">
+                                                                <div class="h4 lh-base">Men's<br>Sunglasses<br>Offers</div>
+                                                                <div>
+                                                                    <a class="btn btn-sm btn-dark stretched-link"
+                                                                        href="{{ route('second', ['shop', 'catalog-fashion']) }}"
+                                                                        data-bs-theme="dark">Shop now</a>
+                                                                </div>
+                                                            </div>
+                                                            <img src="/img/mega-menu/fashion/02.jpg"
+                                                                class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rtl-flip"
+                                                                alt="Image">
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+
+                                            <!-- Kids' tab -->
+                                            <div class="tab-pane fade" id="kids-tab-pane" role="tabpanel"
+                                                aria-labelledby="kids-tab">
+                                                <div class="row g-4">
+                                                    <div class="col-lg-2">
+                                                        <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
+                                                            href="{{ route('second', ['shop', 'catalog-fashion']) }}">
+                                                            <span class="animate-target">Boys</span>
+                                                        </a>
+                                                        <ul class="nav flex-column gap-2 mt-0">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Pants</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sneakers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Coats &amp;
+                                                                    Outerwear</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sweatshirts</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Boots</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Shorts</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">View all</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="col-lg-2">
+                                                        <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
+                                                            href="{{ route('second', ['shop', 'catalog-fashion']) }}">
+                                                            <span class="animate-target">Girls</span>
+                                                        </a>
+                                                        <ul class="nav flex-column gap-2 mt-0">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Shirts &amp; Tops</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Dresses</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sneakers</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Hoodies</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Sandals</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Coats &amp;
+                                                                    Outerwear</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">View all</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="col-lg-2">
+                                                        <a class="d-inline-flex animate-underline h6 text-dark-emphasis text-decoration-none mb-2"
+                                                            href="{{ route('second', ['shop', 'catalog-fashion']) }}">
+                                                            <span class="animate-target">Accessories</span>
+                                                        </a>
+                                                        <ul class="nav flex-column gap-2 mt-0">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Backpacks</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Gloves</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Shoe Laces</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Scarves</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Hats</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Belts</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">View all</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="col-lg-2">
+                                                        <div class="h6 mb-2">Shop by Age</div>
+                                                        <ul class="nav flex-column gap-2 mt-0">
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Infant</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Toddler</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Little Kid</a>
+                                                            </li>
+                                                            <li class="d-flex w-100 pt-1">
+                                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Big Kid</a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="col-lg-4 d-none d-lg-block" data-bs-theme="light">
+                                                        <div
+                                                            class="position-relative d-flex flex-column h-100 rounded-4 overflow-hidden p-4">
+                                                            <div
+                                                                class="position-relative d-flex flex-column justify-content-between h-100 z-2 pt-xl-2 ps-xl-2">
+                                                                <div class="h4 lh-base">Kids'<br>Spring<br>Collection</div>
+                                                                <div>
+                                                                    <a class="btn btn-sm btn-dark stretched-link"
+                                                                        href="{{ route('second', ['shop', 'catalog-fashion']) }}"
+                                                                        data-bs-theme="light">Shop now</a>
+                                                                </div>
+                                                            </div>
+                                                            <img src="/img/mega-menu/fashion/03.jpg"
+                                                                class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rtl-flip"
+                                                                alt="Image">
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Navbar nav -->
+                            <ul class="navbar-nav position-relative me-xl-n5">
+                                <li class="nav-item dropdown pb-lg-2 me-lg-n1 me-xl-0">
+                                    <a class="nav-link dropdown-toggle" href="#" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Home</a>
+                                    <ul class="dropdown-menu" style="--cz-dropdown-spacer: .75rem">
+                                        <li class="hover-effect-opacity px-2 mx-n2">
+                                            <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'electronics']) }}">
+                                                <span class="fw-medium">Electronics Store</span>
+                                                <span class="d-block fs-xs text-body-secondary">Megamenu + Hero
+                                                    slider</span>
+                                                <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                                    style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                                    <img class="position-relative z-2 d-none-dark"
+                                                        src="/img/mega-menu/demo-preview/electronics-light.jpg"
+                                                        alt="Electronics Store">
+                                                    <img class="position-relative z-2 d-none d-block-dark"
+                                                        src="/img/mega-menu/demo-preview/electronics-dark.jpg"
+                                                        alt="Electronics Store">
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                        style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                        style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="hover-effect-opacity px-2 mx-n2">
+                                            <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'fashion-v1']) }}">
+                                                <span class="fw-medium">Fashion Store v.1</span>
+                                                <span class="d-block fs-xs text-body-secondary">Hero promo slider</span>
+                                                <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                                    style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                                    <img class="position-relative z-2 d-none-dark"
+                                                        src="/img/mega-menu/demo-preview/fashion-1-light.jpg"
+                                                        alt="Fashion Store v.1">
+                                                    <img class="position-relative z-2 d-none d-block-dark"
+                                                        src="/img/mega-menu/demo-preview/fashion-1-dark.jpg"
+                                                        alt="Fashion Store v.1">
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                        style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                        style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="hover-effect-opacity px-2 mx-n2">
+                                            <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'fashion-v2']) }}">
+                                                <span class="fw-medium">Fashion Store v.2</span>
+                                                <span class="d-block fs-xs text-body-secondary">Hero banner with
+                                                    hotspots</span>
+                                                <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                                    style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                                    <img class="position-relative z-2 d-none-dark"
+                                                        src="/img/mega-menu/demo-preview/fashion-2-light.jpg"
+                                                        alt="Fashion Store v.2">
+                                                    <img class="position-relative z-2 d-none d-block-dark"
+                                                        src="/img/mega-menu/demo-preview/fashion-2-dark.jpg"
+                                                        alt="Fashion Store v.2">
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                        style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                        style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="hover-effect-opacity px-2 mx-n2">
+                                            <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'furniture']) }}">
+                                                <span class="fw-medium">Furniture Store</span>
+                                                <span class="d-block fs-xs text-body-secondary">Fancy product
+                                                    carousel</span>
+                                                <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                                    style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                                    <img class="position-relative z-2 d-none-dark"
+                                                        src="/img/mega-menu/demo-preview/furniture-light.jpg"
+                                                        alt="Furniture Store">
+                                                    <img class="position-relative z-2 d-none d-block-dark"
+                                                        src="/img/mega-menu/demo-preview/furniture-dark.jpg"
+                                                        alt="Furniture Store">
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                        style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                        style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="hover-effect-opacity px-2 mx-n2">
+                                            <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'grocery']) }}">
+                                                <span class="fw-medium">Grocery Store</span>
+                                                <span class="d-block fs-xs text-body-secondary">Hero slider + Category
+                                                    cards</span>
+                                                <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                                    style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                                    <img class="position-relative z-2 d-none-dark"
+                                                        src="/img/mega-menu/demo-preview/grocery-light.jpg"
+                                                        alt="Grocery Store">
+                                                    <img class="position-relative z-2 d-none d-block-dark"
+                                                        src="/img/mega-menu/demo-preview/grocery-dark.jpg"
+                                                        alt="Grocery Store">
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                        style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                        style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="hover-effect-opacity px-2 mx-n2">
+                                            <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'marketplace']) }}">
+                                                <span class="fw-medium">Marketplace</span>
+                                                <span class="d-block fs-xs text-body-secondary">Multi-vendor, digital
+                                                    goods</span>
+                                                <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                                    style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                                    <img class="position-relative z-2 d-none-dark"
+                                                        src="/img/mega-menu/demo-preview/marketplace-light.jpg"
+                                                        alt="Marketplace">
+                                                    <img class="position-relative z-2 d-none d-block-dark"
+                                                        src="/img/mega-menu/demo-preview/marketplace-dark.jpg"
+                                                        alt="Marketplace">
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                        style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                        style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="hover-effect-opacity px-2 mx-n2">
+                                            <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'single-store']) }}">
+                                                <span class="fw-medium">Single Product Store</span>
+                                                <span class="d-block fs-xs text-body-secondary">Single product / mono
+                                                    brand</span>
+                                                <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                                    style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                                    <img class="position-relative z-2 d-none-dark"
+                                                        src="/img/mega-menu/demo-preview/single-store-light.jpg"
+                                                        alt="Single Product Store">
+                                                    <img class="position-relative z-2 d-none d-block-dark"
+                                                        src="/img/mega-menu/demo-preview/single-store-dark.jpg"
+                                                        alt="Single Product Store">
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                        style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                                    <span
+                                                        class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                        style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                                </div>
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </li>
+                                <li class="nav-item dropdown position-static pb-lg-2 me-lg-n1 me-xl-0">
+                                    <a class="nav-link dropdown-toggle active" aria-current="page" href="#"
+                                        role="button" data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                        aria-expanded="false">Shop</a>
+                                    <div class="dropdown-menu p-4" style="--cz-dropdown-spacer: .75rem">
+                                        <div class="d-flex flex-column flex-lg-row gap-4">
+                                            <div style="min-width: 190px">
+                                                <div class="h6 mb-2">Electronics Store</div>
+                                                <ul class="nav flex-column gap-2 mt-0">
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'categories-electronics']) }}">Categories Page</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'catalog-electronics']) }}">Catalog with Side
+                                                            Filters</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'product-general-electronics']) }}">Product General
+                                                            Info</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'product-details-electronics']) }}">Product
+                                                            Details</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'product-reviews-electronics']) }}">Product
+                                                            Reviews</a>
+                                                    </li>
+                                                </ul>
+                                                <div class="h6 pt-4 mb-2">Fashion Store</div>
+                                                <ul class="nav flex-column gap-2 mt-0">
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'catalog-fashion']) }}">Catalog with Side Filters</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'product-fashion']) }}">Product Page</a>
+                                                    </li>
+                                                </ul>
+                                                <div class="h6 pt-4 mb-2">Furniture Store</div>
+                                                <ul class="nav flex-column gap-2 mt-0">
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'catalog-furniture']) }}">Catalog with Top
+                                                            Filters</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'product-furniture']) }}">Product Page</a>
+                                                    </li>
+                                                </ul>
+                                            </div>
+                                            <div style="min-width: 190px">
+                                                <div class="h6 mb-2">Grocery Store</div>
+                                                <ul class="nav flex-column gap-2 mt-0">
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'catalog-grocery']) }}">Catalog with Side Filters</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'product-grocery']) }}">Product Page</a>
+                                                    </li>
+                                                </ul>
+                                                <div class="h6 pt-4 mb-2">Marketplace</div>
+                                                <ul class="nav flex-column gap-2 mt-0">
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'catalog-marketplace']) }}">Catalog with Top
+                                                            Filters</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['shop', 'product-marketplace']) }}">Digital Product Page</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'marketplace']) }}">Cart / Checkout</a>
+                                                    </li>
+                                                </ul>
+                                            </div>
+                                            <div style="min-width: 190px">
+                                                <div class="h6 mb-2">Checkout v.1</div>
+                                                <ul class="nav flex-column gap-2 mt-0">
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'v1-cart']) }}">Shopping Cart</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'v1-delivery-1']) }}">Delivery Info (Step 1)</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'v1-delivery-2']) }}">Delivery Info (Step 2)</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'v1-shipping']) }}">Shipping Address</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'v1-payment']) }}">Payment</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'v1-thankyou']) }}">Thank You Page</a>
+                                                    </li>
+                                                </ul>
+                                                <div class="h6 pt-4 mb-2">Checkout v.2</div>
+                                                <ul class="nav flex-column gap-2 mt-0">
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'v2-cart']) }}">Shopping Cart</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'v2-delivery']) }}">Delivery Info</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'v2-pickup']) }}">Pickup from Store</a>
+                                                    </li>
+                                                    <li class="d-flex w-100 pt-1">
+                                                        <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                            href="{{ route('second', ['checkout', 'v2-thankyou']) }}">Thank You Page</a>
+                                                    </li>
+                                                </ul>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </li>
+                                <li class="nav-item dropdown pb-lg-2 me-lg-n1 me-xl-0">
+                                    <a class="nav-link dropdown-toggle" href="#" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover" data-bs-auto-close="outside"
+                                        aria-expanded="false">Account</a>
+                                    <ul class="dropdown-menu" style="--cz-dropdown-spacer: .75rem">
+                                        <li class="dropend">
+                                            <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                                aria-expanded="false">Auth Pages</a>
+                                            <ul class="dropdown-menu">
+                                                <li><a class="dropdown-item" href="{{ route('second', ['account', 'signin']) }}">Sign In</a></li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['account', 'signup']) }}">Sign Up</a></li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'password-recovery']) }}">Password Recovery</a></li>
+                                            </ul>
+                                        </li>
+                                        <li class="dropend">
+                                            <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                                aria-expanded="false">Shop User</a>
+                                            <ul class="dropdown-menu">
+                                                <li><a class="dropdown-item" href="{{ route('second', ['account', 'orders']) }}">Orders
+                                                        History</a></li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['account', 'wishlist']) }}">Wishlist</a>
+                                                </li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['account', 'payment']) }}">Payment
+                                                        Methods</a></li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['account', 'reviews']) }}">My Reviews</a>
+                                                </li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['account', 'info']) }}">Personal Info</a>
+                                                </li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['account', 'addresses']) }}">Addresses</a>
+                                                </li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'notifications']) }}">Notifications</a></li>
+                                            </ul>
+                                        </li>
+                                        <li class="dropend">
+                                            <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                                aria-expanded="false">Marketplace User</a>
+                                            <ul class="dropdown-menu">
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'marketplace-dashboard']) }}">Dashboard</a></li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'marketplace-products']) }}">Products</a></li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'marketplace-sales']) }}">Sales</a></li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'marketplace-payouts']) }}">Payouts</a></li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'marketplace-purchases']) }}">Purchases</a></li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'marketplace-favorites']) }}">Favorites</a></li>
+                                                <li><a class="dropdown-item"
+                                                        href="{{ route('second', ['account', 'marketplace-settings']) }}">Settings</a></li>
+                                            </ul>
+                                        </li>
+                                    </ul>
+                                </li>
+                                <li class="nav-item dropdown pb-lg-2 me-lg-n1 me-xl-0">
+                                    <a class="nav-link dropdown-toggle" href="#" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover" data-bs-auto-close="outside"
+                                        aria-expanded="false">Pages</a>
+                                    <ul class="dropdown-menu" style="--cz-dropdown-spacer: .75rem">
+                                        <li class="dropend">
+                                            <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                                aria-expanded="false">About</a>
+                                            <ul class="dropdown-menu">
+                                                <li><a class="dropdown-item" href="{{ route('second', ['about', 'v1']) }}">About v.1</a></li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['about', 'v2']) }}">About v.2</a></li>
+                                            </ul>
+                                        </li>
+                                        <li class="dropend">
+                                            <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                                aria-expanded="false">Blog</a>
+                                            <ul class="dropdown-menu">
+                                                <li><a class="dropdown-item" href="{{ route('second', ['blog', 'grid-v1']) }}">Grid View v.1</a>
+                                                </li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['blog', 'grid-v2']) }}">Grid View v.2</a>
+                                                </li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['blog', 'list']) }}">List View</a></li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['blog', 'single-v1']) }}">Single Post
+                                                        v.1</a></li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['blog', 'single-v2']) }}">Single Post
+                                                        v.2</a></li>
+                                            </ul>
+                                        </li>
+                                        <li class="dropend">
+                                            <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                                aria-expanded="false">Contact</a>
+                                            <ul class="dropdown-menu">
+                                                <li><a class="dropdown-item" href="{{ route('second', ['contact', 'v1']) }}">Contact v.1</a></li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['contact', 'v2']) }}">Contact v.2</a></li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['contact', 'v3']) }}">Contact v.3</a></li>
+                                            </ul>
+                                        </li>
+                                        <li class="dropend">
+                                            <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                                aria-expanded="false">Help Center</a>
+                                            <ul class="dropdown-menu">
+                                                <li><a class="dropdown-item" href="{{ route('second', ['help', 'topics-v1']) }}">Help Topics
+                                                        v.1</a></li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['help', 'topics-v2']) }}">Help Topics
+                                                        v.2</a></li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['help', 'single-article-v1']) }}">Help
+                                                        Single Article v.1</a></li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['help', 'single-article-v2']) }}">Help
+                                                        Single Article v.2</a></li>
+                                            </ul>
+                                        </li>
+                                        <li class="dropend">
+                                            <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                                data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                                aria-expanded="false">404 Error</a>
+                                            <ul class="dropdown-menu">
+                                                <li><a class="dropdown-item" href="{{ route('second', ['404', 'electronics']) }}">404
+                                                        Electronics</a></li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['404', 'fashion']) }}">404 Fashion</a>
+                                                </li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['404', 'furniture']) }}">404 Furniture</a>
+                                                </li>
+                                                <li><a class="dropdown-item" href="{{ route('second', ['404', 'grocery']) }}">404 Grocery</a>
+                                                </li>
+                                            </ul>
+                                        </li>
+                                        <li><a class="dropdown-item" href="{{ route('any', 'terms-and-conditions')}}">Terms &amp;
+                                                Conditions</a></li>
+                                    </ul>
+                                </li>                                
+                            </ul>
+
+                            <!-- Search toggle visible on screens > 991px wide (lg breakpoint) -->
+                            <button type="button"
+                                class="btn btn-outline-secondary justify-content-start w-100 px-3 mb-lg-2 ms-3 d-none d-lg-inline-flex"
+                                style="max-width: 240px" data-bs-toggle="offcanvas" data-bs-target="#searchBox"
+                                aria-controls="searchBox">
+                                <i class="ci-search fs-base ms-n1 me-2"></i>
+                                <span class="text-body-tertiary fw-normal">Search</span>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Account and Wishlist buttons visible on screens < 768px wide (md breakpoint) -->
+                <div class="offcanvas-header border-top px-0 py-3 mt-3 d-md-none">
+                    <div class="nav nav-justified w-100">
+                        <a class="nav-link border-end" href="{{ route('second', ['account', 'signin']) }}">
+                            <i class="ci-user fs-lg opacity-60 me-2"></i>
+                            Account
+                        </a>
+                        <a class="nav-link" href="#!">
+                            <i class="ci-heart fs-lg opacity-60 me-2"></i>
+                            Wishlist
+                        </a>
+                    </div>
+                </div>
+            </nav>
+        </div>
+    </header>
+
+    <main class="content-wrapper">
+
+        <!-- Breadcrumb -->
+        <nav class="container pt-2 pt-xxl-3 my-3 my-md-4" aria-label="breadcrumb">
+            <ol class="breadcrumb">
+                <li class="breadcrumb-item"><a href="{{ route('second', ['home', 'fashion-v1']) }}">Home</a></li>
+                <li class="breadcrumb-item"><a href="{{ route('second', ['shop', 'catalog-fashion']) }}">Shop</a></li>
+                <li class="breadcrumb-item active" aria-current="page">Product page</li>
+            </ol>
+        </nav>
+
+
+        <!-- Product gallery and details -->
+        <section class="container">
+            <div class="row">
+
+                <!-- Gallery -->
+                <div class="col-md-6 pb-4 pb-md-0 mb-2 mb-sm-3 mb-md-0">
+                    <div class="position-relative">
+                        <span
+                            class="badge text-bg-danger position-absolute top-0 start-0 z-2 mt-3 mt-sm-4 ms-3 ms-sm-4">Sale</span>
+                        <button type="button"
+                            class="btn btn-icon btn-secondary animate-pulse fs-lg bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-2 mt-sm-3 me-2 me-sm-3"
+                            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-sm"
+                            data-bs-title="Add to Wishlist" aria-label="Add to Wishlist">
+                            <i class="ci-heart animate-target"></i>
+                        </button>
+                        <a class="hover-effect-scale hover-effect-opacity position-relative d-flex rounded overflow-hidden mb-3 mb-sm-4 mb-md-3 mb-lg-4"
+                            href="/img/shop/fashion/product/01.png" data-glightbox data-gallery="product-gallery">
+                            <i
+                                class="ci-zoom-in hover-effect-target fs-3 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
+                            <div class="ratio hover-effect-target bg-body-tertiary rounded"
+                                style="--cz-aspect-ratio: calc(706 / 636 * 100%)">
+                                <img src="/img/shop/fashion/product/01.png" alt="Image">
+                            </div>
+                        </a>
+                    </div>
+                    <div class="collapse d-md-block" id="morePictures">
+                        <div class="row row-cols-2 g-3 g-sm-4 g-md-3 g-lg-4 pb-3 pb-sm-4 pb-md-0">
+                            <div class="col">
+                                <a class="hover-effect-scale hover-effect-opacity position-relative d-flex rounded overflow-hidden"
+                                    href="/img/shop/fashion/product/02.png" data-glightbox
+                                    data-gallery="product-gallery">
+                                    <i
+                                        class="ci-zoom-in hover-effect-target fs-3 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
+                                    <div class="ratio hover-effect-target bg-body-tertiary rounded"
+                                        style="--cz-aspect-ratio: calc(342 / 306 * 100%)">
+                                        <img src="/img/shop/fashion/product/02.png" alt="Image">
+                                    </div>
+                                </a>
+                            </div>
+                            <div class="col">
+                                <a class="hover-effect-scale hover-effect-opacity position-relative d-flex rounded overflow-hidden"
+                                    href="/img/shop/fashion/product/03.png" data-glightbox
+                                    data-gallery="product-gallery">
+                                    <i
+                                        class="ci-zoom-in hover-effect-target fs-3 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
+                                    <div class="ratio hover-effect-target bg-body-tertiary rounded"
+                                        style="--cz-aspect-ratio: calc(342 / 306 * 100%)">
+                                        <img src="/img/shop/fashion/product/03.png" alt="Image">
+                                    </div>
+                                </a>
+                            </div>
+                            <div class="col">
+                                <a class="hover-effect-scale hover-effect-opacity position-relative d-flex rounded overflow-hidden"
+                                    href="/img/shop/fashion/product/04.png" data-glightbox
+                                    data-gallery="product-gallery">
+                                    <i
+                                        class="ci-zoom-in hover-effect-target fs-3 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
+                                    <div class="ratio hover-effect-target bg-body-tertiary rounded"
+                                        style="--cz-aspect-ratio: calc(342 / 306 * 100%)">
+                                        <img src="/img/shop/fashion/product/04.png" alt="Image">
+                                    </div>
+                                </a>
+                            </div>
+                            <div class="col">
+                                <a class="hover-effect-scale hover-effect-opacity position-relative d-flex rounded overflow-hidden"
+                                    href="/img/shop/fashion/product/05.png" data-glightbox
+                                    data-gallery="product-gallery">
+                                    <i
+                                        class="ci-zoom-in hover-effect-target fs-3 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
+                                    <div class="ratio hover-effect-target bg-body-tertiary rounded"
+                                        style="--cz-aspect-ratio: calc(342 / 306 * 100%)">
+                                        <img src="/img/shop/fashion/product/05.png" alt="Image">
+                                    </div>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                    <button type="button" class="btn btn-lg btn-outline-secondary w-100 collapsed d-md-none"
+                        data-bs-toggle="collapse" data-bs-target="#morePictures"
+                        data-label-collapsed="Show more pictures" data-label-expanded="Show less pictures"
+                        aria-expanded="false" aria-controls="morePictures" aria-label="Show / hide pictures">
+                        <i class="collapse-toggle-icon ci-chevron-down fs-lg ms-2 me-n2"></i>
+                    </button>
+                </div>
+
+
+                <!-- Product details and options -->
+                <div class="col-md-6">
+                    <div class="ps-md-4 ps-xl-5">
+
+                        <!-- Reviews -->
+                        <a class="d-none d-md-flex align-items-center gap-2 text-decoration-none mb-3" href="#reviews">
+                            <div class="d-flex gap-1 fs-sm">
+                                <i class="ci-star-filled text-warning"></i>
+                                <i class="ci-star-filled text-warning"></i>
+                                <i class="ci-star-filled text-warning"></i>
+                                <i class="ci-star-filled text-warning"></i>
+                                <i class="ci-star text-body-tertiary opacity-75"></i>
+                            </div>
+                            <span class="text-body-tertiary fs-sm">23 reviews</span>
+                        </a>
+
+                        <!-- Title -->
+                        <h1 class="h3">Denim midi skirt with pockets</h1>
+
+                        <!-- Description -->
+                        <p class="fs-sm mb-0">Made from high-quality denim fabric, this midi skirt offers durability and
+                            comfort for all-day wear. The mid-length design strikes the perfect balance between casual and
+                            chic, making it suitable for various occasions, from casual outings to semi-formal events.</p>
+                        <div class="collapse" id="moreDescription">
+                            <div class="fs-sm pt-3">
+                                <p>One of the standout features of this skirt is its functional pockets. With two spacious
+                                    pockets at the front, you can conveniently carry your essentials such as keys, phone, or
+                                    wallet without the need for a bulky bag. The pockets also add a touch of utility and
+                                    flair to the overall look.</p>
+                                <p class="mb-0">The skirt's classic denim color and timeless design make it easy to pair
+                                    with a variety of tops, blouses, and footwear, allowing you to create endless stylish
+                                    ensembles. Whether you prefer a laid-back look with a graphic tee and sneakers or a more
+                                    polished ensemble with a blouse and heels, this skirt effortlessly adapts to your style.
+                                </p>
+                            </div>
+                        </div>
+
+                        <!-- Price -->
+                        <a class="d-inline-block fs-sm fw-medium text-dark-emphasis collapsed mt-1"
+                            href="#moreDescription" data-bs-toggle="collapse" aria-expanded="false"
+                            aria-controls="moreDescription" data-label-collapsed="Read more"
+                            data-label-expanded="Show less" aria-label="Show / hide description"></a>
+                        <div class="h4 d-flex align-items-center my-4">
+                            $126.50
+                            <del class="fs-sm fw-normal text-body-tertiary ms-2">$156.00</del>
+                        </div>
+
+                        <!-- Color options -->
+                        <div class="mb-4">
+                            <label class="form-label fw-semibold pb-1 mb-2">Color: <span class="text-body fw-normal"
+                                    id="colorOption">Dark blue</span></label>
+                            <div class="d-flex flex-wrap gap-2" data-binded-label="#colorOption">
+                                <input type="radio" class="btn-check" name="colors" id="dark-blue" checked>
+                                <label for="dark-blue" class="btn btn-image p-0" data-label="Dark blue">
+                                    <img src="/img/shop/fashion/product/colors/color01.png" width="56"
+                                        alt="Dark blue">
+                                    <span class="visually-hidden">Dark blue</span>
+                                </label>
+                                <input type="radio" class="btn-check" name="colors" id="pink">
+                                <label for="pink" class="btn btn-image p-0" data-label="Pink">
+                                    <img src="/img/shop/fashion/product/colors/color02.png" width="56"
+                                        alt="Pink">
+                                    <span class="visually-hidden">Pink</span>
+                                </label>
+                                <input type="radio" class="btn-check" name="colors" id="light-blue">
+                                <label for="light-blue" class="btn btn-image p-0" data-label="Light blue">
+                                    <img src="/img/shop/fashion/product/colors/color03.png" width="56"
+                                        alt="Light blue">
+                                    <span class="visually-hidden">Light blue</span>
+                                </label>
+                            </div>
+                        </div>
+
+                        <!-- Size select -->
+                        <div class="mb-3">
+                            <div class="d-flex align-items-center justify-content-between mb-1">
+                                <label class="form-label fw-semibold mb-0">Size</label>
+                                <div class="nav">
+                                    <a class="nav-link animate-underline fw-normal px-0" href="#sizeGuide"
+                                        data-bs-toggle="modal">
+                                        <i class="ci-ruler fs-lg me-2"></i>
+                                        <span class="animate-target">Size guide</span>
+                                    </a>
+                                </div>
+                            </div>
+                            <select class="form-select form-select-lg"
+                                data-select='{
+                  "classNames": {
+                    "containerInner": ["form-select", "form-select-lg"]
+                  }
+                }'
+                                aria-label="Material select">
+                                <option value="">Choose a size</option>
+                                <option value="xs">6-8 (XS)</option>
+                                <option value="s">8-10 (S)</option>
+                                <option value="m">10-12 (M)</option>
+                                <option value="l">12-14 (L)</option>
+                                <option value="xl">14-16 (XL)</option>
+                            </select>
+                        </div>
+
+                        <!-- Count input + Add to cart button -->
+                        <div class="d-flex gap-3 pb-3 pb-lg-4 mb-3">
+                            <div class="count-input flex-shrink-0">
+                                <button type="button" class="btn btn-icon btn-lg" data-decrement
+                                    aria-label="Decrement quantity">
+                                    <i class="ci-minus"></i>
+                                </button>
+                                <input type="number" class="form-control form-control-lg" min="1"
+                                    value="1" readonly>
+                                <button type="button" class="btn btn-icon btn-lg" data-increment
+                                    aria-label="Increment quantity">
+                                    <i class="ci-plus"></i>
+                                </button>
+                            </div>
+                            <button type="button" class="btn btn-lg btn-dark w-100">Add to cart</button>
+                        </div>
+
+                        <!-- Info list -->
+                        <ul class="list-unstyled gap-3 pb-3 pb-lg-4 mb-3">
+                            <li class="d-flex flex-wrap fs-sm">
+                                <span class="d-flex align-items-center fw-medium text-dark-emphasis me-2">
+                                    <i class="ci-clock fs-base me-2"></i>
+                                    Estimated delivery:
+                                </span>
+                                15 - 27 Mar, 2024
+                            </li>
+                            <li class="d-flex flex-wrap fs-sm">
+                                <span class="d-flex align-items-center fw-medium text-dark-emphasis me-2">
+                                    <i class="ci-delivery fs-base me-2"></i>
+                                    Free shipping &amp; returns:
+                                </span>
+                                On all orders over $100.00
+                            </li>
+                        </ul>
+
+                        <!-- Stock status -->
+                        <div class="d-flex flex-wrap justify-content-between fs-sm mb-3">
+                            <span class="fw-medium text-dark-emphasis me-2">🔥 Hurry up! The sale is coming to an
+                                end</span>
+                            <span><span class="fw-medium text-dark-emphasis">6</span> items in stock!</span>
+                        </div>
+                        <div class="progress" role="progressbar" aria-label="Left in stock" aria-valuenow="25"
+                            aria-valuemin="0" aria-valuemax="100" style="height: 4px">
+                            <div class="progress-bar rounded-pill" style="width: 25%"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Sticky product preview + Add to cart CTA -->
+        <section class="sticky-product-banner sticky-top" data-sticky-element>
+            <div class="sticky-product-banner-inner pt-5">
+                <div class="navbar container flex-nowrap align-items-center bg-body pt-4 pt-lg-5 mt-lg-n2">
+                    <div class="d-flex align-items-center min-w-0 ms-lg-2 me-3">
+                        <div class="ratio ratio-1x1 flex-shrink-0" style="width: 50px">
+                            <img src="/img/shop/fashion/product/thumb.png" alt="Image">
+                        </div>
+                        <h4 class="h6 fw-medium d-none d-lg-block ps-3 mb-0">Denim midi skirt with pockets</h4>
+                        <div class="w-100 min-w-0 d-lg-none ps-2">
+                            <h4 class="fs-sm fw-medium text-truncate mb-1">Denim midi skirt with pockets</h4>
+                            <div class="h6 mb-0">$126.50 <del class="fs-xs fw-normal text-body-tertiary">$156.00</del>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="h4 d-none d-lg-block mb-0 ms-auto me-4">$126.50 <del
+                            class="fs-sm fw-normal text-body-tertiary">$156.00</del></div>
+                    <div class="d-flex gap-2">
+                        <button type="button" class="btn btn-icon btn-secondary animate-pulse"
+                            aria-label="Add to Wishlist">
+                            <i class="ci-heart fs-base animate-target"></i>
+                        </button>
+                        <button type="button" class="btn btn-dark ms-auto d-none d-md-inline-flex px-4">Add to
+                            cart</button>
+                        <button type="button" class="btn btn-icon btn-dark animate-slide-end ms-auto d-md-none"
+                            aria-label="Add to Cart">
+                            <i class="ci-shopping-cart fs-base animate-target"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Product details tabs -->
+        <section class="container pt-5 mt-2 mt-sm-3 mt-lg-4 mt-xl-5">
+
+            <!-- Nav tabs -->
+            <ul class="nav nav-underline flex-nowrap border-bottom" role="tablist">
+                <li class="nav-item me-md-1" role="presentation">
+                    <button type="button" class="nav-link active" id="description-tab" data-bs-toggle="tab"
+                        data-bs-target="#description-tab-pane" role="tab" aria-controls="description-tab-pane"
+                        aria-selected="true">
+                        Description
+                    </button>
+                </li>
+                <li class="nav-item me-md-1" role="presentation">
+                    <button type="button" class="nav-link" id="washing-tab" data-bs-toggle="tab"
+                        data-bs-target="#washing-tab-pane" role="tab" aria-controls="washing-tab-pane"
+                        aria-selected="false">
+                        Washing<span class="d-none d-md-inline">&nbsp;instructions</span>
+                    </button>
+                </li>
+                <li class="nav-item me-md-1" role="presentation">
+                    <button type="button" class="nav-link" id="delivery-tab" data-bs-toggle="tab"
+                        data-bs-target="#delivery-tab-pane" role="tab" aria-controls="delivery-tab-pane"
+                        aria-selected="false">
+                        Delivery<span class="d-none d-md-inline">&nbsp;and returns</span>
+                    </button>
+                </li>
+                <li class="nav-item" role="presentation">
+                    <button type="button" class="nav-link" id="reviews-tab" data-bs-toggle="tab"
+                        data-bs-target="#reviews-tab-pane" role="tab" aria-controls="reviews-tab-pane"
+                        aria-selected="false">
+                        Reviews<span class="d-none d-md-inline">&nbsp;(23)</span>
+                    </button>
+                </li>
+            </ul>
+
+            <div class="tab-content pt-4 mt-sm-1 mt-md-3">
+
+                <!-- Description tab -->
+                <div class="tab-pane fade show active" id="description-tab-pane" role="tabpanel"
+                    aria-labelledby="description-tab">
+                    <div class="row">
+                        <div class="col-lg-6 fs-sm">
+                            <ul class="list-unstyled">
+                                <li>Model's height: <span class="text-dark-emphasis fw-semibold">176 cm</span></li>
+                                <li>The model is wearing size: <span class="text-dark-emphasis fw-semibold">S/36</span>
+                                </li>
+                            </ul>
+                            <p>This skirt is designed to fall just below the knee, offering a flattering length that is
+                                suitable for various occasions. It is made from a soft and lightweight fabric that drapes
+                                beautifully, ensuring comfort and ease of movement. The blue color adds a vibrant touch,
+                                making it a standout piece in your wardrobe.</p>
+                            <ul>
+                                <li>fitted waistband</li>
+                                <li>fastened with a hidden zipper</li>
+                                <li>midi length</li>
+                            </ul>
+                            <p class="mb-0">The blue color of the skirt allows for easy pairing with a variety of tops.
+                                You can opt for a crisp white blouse for a classic and polished outfit, or choose a
+                                patterned or contrasting-colored top for a more vibrant and fashion-forward look.</p>
+                        </div>
+                        <div class="col-lg-6 col-xl-5 offset-xl-1">
+                            <div class="row row-cols-2 g-4 my-0 my-lg-n2">
+                                <div class="col">
+                                    <div class="py-md-1 py-lg-2 pe-sm-2">
+                                        <i class="ci-feather fs-3 text-body-emphasis mb-2 mb-md-3"></i>
+                                        <h6 class="fs-sm mb-2">Lightweight</h6>
+                                        <p class="fs-sm mb-0">Designed with lightweight European fabrics, perfect for life
+                                            on the go.</p>
+                                    </div>
+                                </div>
+                                <div class="col">
+                                    <div class="py-md-1 py-lg-2 ps-sm-2">
+                                        <i class="ci-hanger fs-3 text-body-emphasis mb-2 mb-md-3"></i>
+                                        <h6 class="fs-sm mb-2">Perfect fit</h6>
+                                        <p class="fs-sm mb-0">Our clothing is designed to fit any body type, find your
+                                            perfect look!</p>
+                                    </div>
+                                </div>
+                                <div class="col">
+                                    <div class="py-md-1 py-lg-2 pe-sm-2">
+                                        <i class="ci-delivery-2 fs-3 text-body-emphasis mb-2 mb-md-3"></i>
+                                        <h6 class="fs-sm mb-2">Free delivery</h6>
+                                        <p class="fs-sm mb-0">Get free door-to-door delivery for all orders over $250.</p>
+                                    </div>
+                                </div>
+                                <div class="col">
+                                    <div class="py-md-1 py-lg-2 ps-sm-2">
+                                        <i class="ci-leaf fs-3 text-body-emphasis mb-2 mb-md-3"></i>
+                                        <h6 class="fs-sm mb-2">Sustainability</h6>
+                                        <p class="fs-sm mb-0">We are proud to offer a Lifetime Guarantee on all products.
+                                        </p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Washing instructions tab -->
+                <div class="tab-pane fade fs-sm" id="washing-tab-pane" role="tabpanel"
+                    aria-labelledby="washing-tab">
+                    <p>Following below washing instructions can help prolong the life of your denim skirt and keep it
+                        looking its best for longer.</p>
+                    <div class="row row-cols-1 row-cols-md-2">
+                        <div class="col mb-3 mb-md-0">
+                            <dl class="pe-lg-2 pe-xl-3 mb-0">
+                                <dt>Machine wash cold</dt>
+                                <dd>Turn the denim midi skirt inside out before placing it in the washing machine. Use cold
+                                    water to help preserve the color and fabric integrity.</dd>
+                                <dt>Gentle cycle</dt>
+                                <dd>Select the gentle or delicate cycle on your washing machine to prevent excessive
+                                    agitation, which can cause unnecessary wear and tear on the denim.</dd>
+                                <dt>Mild detergent</dt>
+                                <dd>Use a mild detergent specifically formulated for denim or delicate fabrics. Avoid using
+                                    bleach or harsh chemicals, as they can damage the denim fibers.</dd>
+                                <dt>Avoid overloading</dt>
+                                <dd class="mb-0">Do not overcrowd the washing machine with too many garments. This can
+                                    lead to inadequate cleaning and may cause friction that damages the denim skirt.</dd>
+                            </dl>
+                        </div>
+                        <div class="col">
+                            <dl class="ps-lg-2 ps-xl-3 mb-0">
+                                <dt>Wash separately</dt>
+                                <dd>Wash the denim midi skirt separately from items with zippers, buttons, or other sharp
+                                    accessories that could snag or damage the fabric.</dd>
+                                <dt>Skip fabric softener</dt>
+                                <dd>Avoid using fabric softener, as it can leave a residue on the denim and reduce its
+                                    natural stiffness, which is characteristic of denim garments.</dd>
+                                <dt>Air dry or tumble dry low</dt>
+                                <dd>After washing, reshape the skirt and either lay it flat to air dry or tumble dry on a
+                                    low heat setting. Avoid high heat, as it can shrink or distort the denim.</dd>
+                                <dt>Ironing</dt>
+                                <dd class="mb-0">If necessary, iron the denim midi skirt inside out using a low to
+                                    medium heat setting. Avoid ironing directly on any embellishments or pockets to prevent
+                                    damage.</dd>
+                            </dl>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Delivery and returns tab -->
+                <div class="tab-pane fade fs-sm" id="delivery-tab-pane" role="tabpanel"
+                    aria-labelledby="delivery-tab">
+                    <div class="row row-cols-1 row-cols-md-2">
+                        <div class="col mb-3 mb-md-0">
+                            <div class="pe-lg-2 pe-xl-3">
+                                <h6>Delivery</h6>
+                                <p>We strive to deliver your denim midi skirt with pockets to you as quickly as possible.
+                                    Our estimated delivery times are as follows:</p>
+                                <ul class="list-unstyled">
+                                    <li>Standard delivery: <span class="text-dark-emphasis fw-semibold">Within 3-7
+                                            business days</span></li>
+                                    <li>Express delivery: <span class="text-dark-emphasis fw-semibold">Within 1-3 business
+                                            days</span></li>
+                                </ul>
+                                <p>Please note that delivery times may vary depending on your location and any ongoing
+                                    promotions or holidays. You can track your order using the provided tracking number once
+                                    your package has been dispatched.</p>
+                            </div>
+                        </div>
+                        <div class="col">
+                            <div class="ps-lg-2 ps-xl-3">
+                                <h6>Returns</h6>
+                                <p>We want you to be completely satisfied with your denim midi skirt with pockets. If for
+                                    any reason you are not happy with your purchase, you can return it within 30 days of
+                                    receiving your order for a full refund or exchange.</p>
+                                <p>To be eligible for a return, the skirt must be unused, unwashed, and in its original
+                                    condition with tags attached. Please ensure that all packaging is intact when returning
+                                    the item.</p>
+                                <p class="mb-0">To initiate a return, please contact our customer service team with your
+                                    order number and reason for the return. We will provide you with a return shipping label
+                                    and instructions on how to proceed. Please note that shipping fees are non-refundable.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Reviews tab -->
+                <div class="tab-pane fade" id="reviews-tab-pane" role="tabpanel" aria-labelledby="reviews-tab">
+
+                    <!-- Heading + Add review button -->
+                    <div class="d-sm-flex align-items-center justify-content-between border-bottom pb-2 pb-sm-3">
+                        <div class="mb-3 me-sm-3">
+                            <h2 class="h5 pb-2 mb-1">Customer reviews</h2>
+                            <div class="d-flex align-items-center text-body-secondary fs-sm">
+                                <div class="d-flex gap-1 me-2">
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star text-body-tertiary opacity-75"></i>
+                                </div>
+                                Based on 23 reviews
+                            </div>
+                        </div>
+                        <button type="button" class="btn btn-outline-dark mb-3" data-bs-toggle="modal"
+                            data-bs-target="#reviewForm">Leave a review</button>
+                    </div>
+
+                    <!-- Review -->
+                    <div class="border-bottom py-4">
+                        <div class="row py-sm-2">
+                            <div class="col-md-4 col-lg-3 mb-3 mb-md-0">
+                                <div class="d-flex h6 mb-2">
+                                    Rafael Marquez
+                                    <i class="ci-check-circle text-success mt-1 ms-2" data-bs-toggle="tooltip"
+                                        data-bs-custom-class="tooltip-sm" title="Verified customer"></i>
+                                </div>
+                                <div class="fs-sm mb-2 mb-md-3">June 25, 2024</div>
+                                <div class="d-flex gap-1 fs-sm">
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                </div>
+                            </div>
+                            <div class="col-md-8 col-lg-9">
+                                <p class="mb-md-4">Absolutely love this chair! It's exactly what I was looking for to
+                                    complete my Scandinavian-themed living room. The wooden legs add a touch of warmth and
+                                    the design is timeless. Comfortable and sturdy, couldn't be happier with my purchase!
+                                </p>
+                                <div class="d-sm-flex justify-content-between">
+                                    <div
+                                        class="d-flex align-items-center fs-sm fw-medium text-dark-emphasis pb-2 pb-sm-0 mb-1 mb-sm-0">
+                                        <i class="ci-check fs-base me-1" style="margin-top: .125rem"></i>
+                                        Yes, I recommend this product
+                                    </div>
+                                    <div class="d-flex align-items-center gap-2">
+                                        <div class="fs-sm fw-medium text-dark-emphasis me-1">Helpful?</div>
+                                        <button type="button" class="btn btn-sm btn-secondary">
+                                            <i class="ci-thumbs-up fs-sm ms-n1 me-1"></i>
+                                            0
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Review -->
+                    <div class="border-bottom py-4">
+                        <div class="row py-sm-2">
+                            <div class="col-md-4 col-lg-3 mb-3 mb-md-0">
+                                <div class="d-flex h6 mb-2">
+                                    Bessie Cooper
+                                    <i class="ci-check-circle text-success mt-1 ms-2" data-bs-toggle="tooltip"
+                                        data-bs-custom-class="tooltip-sm" title="Verified customer"></i>
+                                </div>
+                                <div class="fs-sm mb-2 mb-md-3">April 8, 2024</div>
+                                <div class="d-flex gap-1 fs-sm">
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star text-body-tertiary opacity-75"></i>
+                                    <i class="ci-star text-body-tertiary opacity-75"></i>
+                                </div>
+                            </div>
+                            <div class="col-md-8 col-lg-9">
+                                <p class="mb-md-4">While the design of the chair is nice and it does add a touch of retro
+                                    vibe to my space, I found the quality to be lacking. After just a few weeks of use, one
+                                    of the legs started to wobble, and the seat isn't as comfortable as I had hoped.
+                                    Disappointed with the durability. Additionally, the assembly process was a bit
+                                    frustrating as some of the screws didn't align properly with the holes, requiring extra
+                                    effort to secure them in place. Overall, while it looks good, I expected better quality
+                                    for the price.</p>
+                                <div class="d-sm-flex justify-content-between">
+                                    <div
+                                        class="d-flex align-items-center fs-sm fw-medium text-dark-emphasis pb-2 pb-sm-0 mb-1 mb-sm-0">
+                                        <i class="ci-close fs-base me-1" style="margin-top: .125rem"></i>
+                                        No, I don't recommend this product
+                                    </div>
+                                    <div class="d-flex align-items-center gap-2">
+                                        <div class="fs-sm fw-medium text-dark-emphasis me-1">Helpful?</div>
+                                        <button type="button" class="btn btn-sm btn-secondary">
+                                            <i class="ci-thumbs-up fs-sm ms-n1 me-1"></i>
+                                            3
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Review -->
+                    <div class="border-bottom py-4">
+                        <div class="row py-sm-2">
+                            <div class="col-md-4 col-lg-3 mb-3 mb-md-0">
+                                <div class="d-flex h6 mb-2">Savannah Nguyen</div>
+                                <div class="fs-sm mb-2 mb-md-3">March 30, 2024</div>
+                                <div class="d-flex gap-1 fs-sm">
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star text-body-tertiary opacity-75"></i>
+                                </div>
+                            </div>
+                            <div class="col-md-8 col-lg-9">
+                                <p class="mb-md-4">Great addition to our dining room! The chair looks fantastic and is
+                                    quite comfortable for short sits. Assembly was a breeze, and the quality seems decent
+                                    for the price. Overall, satisfied with the purchase.</p>
+                                <div class="d-sm-flex justify-content-between">
+                                    <div
+                                        class="d-flex align-items-center fs-sm fw-medium text-dark-emphasis pb-2 pb-sm-0 mb-1 mb-sm-0">
+                                        <i class="ci-check fs-base me-1" style="margin-top: .125rem"></i>
+                                        Yes, I recommend this product
+                                    </div>
+                                    <div class="d-flex align-items-center gap-2">
+                                        <div class="fs-sm fw-medium text-dark-emphasis me-1">Helpful?</div>
+                                        <button type="button" class="btn btn-sm btn-secondary">
+                                            <i class="ci-thumbs-up fs-sm ms-n1 me-1"></i>
+                                            7
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Review -->
+                    <div class="border-bottom py-4">
+                        <div class="row py-sm-2">
+                            <div class="col-md-4 col-lg-3 mb-3 mb-md-0">
+                                <div class="d-flex h6 mb-2">Daniel Adams</div>
+                                <div class="fs-sm mb-2 mb-md-3">March 16, 2024</div>
+                                <div class="d-flex gap-1 fs-sm">
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                </div>
+                            </div>
+                            <div class="col-md-8 col-lg-9">
+                                <p class="mb-md-4">Couldn't be happier with this chair! It's not only stylish but also
+                                    incredibly comfortable. The size is perfect for our space, and the wooden legs feel
+                                    sturdy. Definitely recommend it to anyone looking for a chic and functional seating
+                                    option.</p>
+                                <div class="d-sm-flex justify-content-between">
+                                    <div
+                                        class="d-flex align-items-center fs-sm fw-medium text-dark-emphasis pb-2 pb-sm-0 mb-1 mb-sm-0">
+                                        <i class="ci-check fs-base me-1" style="margin-top: .125rem"></i>
+                                        Yes, I recommend this product
+                                    </div>
+                                    <div class="d-flex align-items-center gap-2">
+                                        <div class="fs-sm fw-medium text-dark-emphasis me-1">Helpful?</div>
+                                        <button type="button" class="btn btn-sm btn-secondary">
+                                            <i class="ci-thumbs-up fs-sm ms-n1 me-1"></i>
+                                            14
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Review -->
+                    <div class="border-bottom py-4">
+                        <div class="row py-sm-2">
+                            <div class="col-md-4 col-lg-3 mb-3 mb-md-0">
+                                <div class="d-flex h6 mb-2">Kristin Watson</div>
+                                <div class="fs-sm mb-2 mb-md-3">February 7, 2024</div>
+                                <div class="d-flex gap-1 fs-sm">
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star text-body-tertiary opacity-75"></i>
+                                </div>
+                            </div>
+                            <div class="col-md-8 col-lg-9">
+                                <p class="mb-md-4">The chair is nice, but it's not the most comfortable for extended
+                                    periods of sitting. The wooden legs give it a nice aesthetic, but they seem a bit
+                                    fragile. It's a decent chair for occasional use, but I wouldn't recommend it for daily
+                                    use or long sitting sessions.</p>
+                                <div class="d-sm-flex justify-content-between">
+                                    <div
+                                        class="d-flex align-items-center fs-sm fw-medium text-dark-emphasis pb-2 pb-sm-0 mb-1 mb-sm-0">
+                                        <i class="ci-check fs-base me-1" style="margin-top: .125rem"></i>
+                                        Yes, I recommend this product
+                                    </div>
+                                    <div class="d-flex align-items-center gap-2">
+                                        <div class="fs-sm fw-medium text-dark-emphasis me-1">Helpful?</div>
+                                        <button type="button" class="btn btn-sm btn-secondary">
+                                            <i class="ci-thumbs-up fs-sm ms-n1 me-1"></i>
+                                            9
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Pagination -->
+                    <nav class="mt-3 pt-2 pt-md-3" aria-label="Reviews pagination">
+                        <ul class="pagination">
+                            <li class="page-item active" aria-current="page">
+                                <span class="page-link">
+                                    1
+                                    <span class="visually-hidden">(current)</span>
+                                </span>
+                            </li>
+                            <li class="page-item">
+                                <a class="page-link" href="#!">2</a>
+                            </li>
+                            <li class="page-item">
+                                <a class="page-link" href="#!">3</a>
+                            </li>
+                            <li class="page-item">
+                                <a class="page-link" href="#!">4</a>
+                            </li>
+                            <li class="page-item">
+                                <span class="page-link pe-none">...</span>
+                            </li>
+                            <li class="page-item">
+                                <a class="page-link" href="#!">6</a>
+                            </li>
+                        </ul>
+                    </nav>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Complete look (carousel) -->
+        <section class="container pt-5 mt-2 mt-sm-3 mt-lg-4 mt-xl-5">
+            <div class="d-flex align-items-center justify-content-between pt-1 pt-lg-0 pb-3 mb-2 mb-sm-3">
+                <h2 class="mb-0 me-3">Complete your look</h2>
+
+                <!-- Slider prev/next buttons -->
+                <div class="d-flex gap-2">
+                    <button type="button"
+                        class="btn btn-icon btn-outline-secondary animate-slide-start rounded-circle me-1"
+                        id="lookPrev" aria-label="Prev">
+                        <i class="ci-chevron-left fs-lg animate-target"></i>
+                    </button>
+                    <button type="button" class="btn btn-icon btn-outline-secondary animate-slide-end rounded-circle"
+                        id="lookNext" aria-label="Next">
+                        <i class="ci-chevron-right fs-lg animate-target"></i>
+                    </button>
+                </div>
+            </div>
+
+            <div class="row">
+                <div class="col-md-6 order-md-2 mb-4 mb-md-0">
+
+                    <!-- Slider -->
+                    <div class="swiper"
+                        data-swiper='{
+              "slidesPerView": 1,
+              "spaceBetween": 40,
+              "loop": true,
+              "navigation": {
+                "prevEl": "#lookPrev",
+                "nextEl": "#lookNext"
+              }
+            }'>
+                        <div class="swiper-wrapper">
+
+                            <!-- Slide -->
+                            <div class="swiper-slide">
+                                <div class="row row-cols-2">
+
+                                    <!-- Item -->
+                                    <div class="col">
+                                        <div class="animate-underline hover-effect-opacity">
+                                            <div class="position-relative mb-3">
+                                                <button type="button"
+                                                    class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                                    aria-label="Add to Wishlist">
+                                                    <i class="ci-heart animate-target"></i>
+                                                </button>
+                                                <a class="d-flex bg-body-tertiary rounded p-3" href="#!">
+                                                    <div class="ratio"
+                                                        style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
+                                                        <img src="/img/shop/fashion/02.png" alt="Image">
+                                                    </div>
+                                                </a>
+                                                <div
+                                                    class="hover-effect-target position-absolute start-0 bottom-0 w-100 z-2 opacity-0 pb-2 pb-sm-3 px-2 px-sm-3">
+                                                    <div
+                                                        class="d-flex align-items-center justify-content-center gap-2 gap-xl-3 bg-body rounded-2 p-2">
+                                                        <span
+                                                            class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">S</span>
+                                                        <span
+                                                            class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">M</span>
+                                                        <span
+                                                            class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">L</span>
+                                                        <span
+                                                            class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">XL</span>
+                                                        <div class="nav">
+                                                            <a class="nav-link fs-xs text-body-tertiary py-1 px-2"
+                                                                href="#!">+1</a>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="nav mb-2">
+                                                <a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
+                                                    href="#!">
+                                                    <span class="text-truncate">Cotton lace blouse with necklace</span>
+                                                </a>
+                                            </div>
+                                            <div class="h6 mb-2">$54.00</div>
+                                            <div class="position-relative">
+                                                <div class="hover-effect-target fs-xs text-body-secondary opacity-100">+2
+                                                    colors</div>
+                                                <div
+                                                    class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
+                                                    <input type="radio" class="btn-check" name="colors-2"
+                                                        id="color-2-1" checked>
+                                                    <label for="color-2-1" class="btn btn-color fs-base"
+                                                        style="color: #dcb1b1">
+                                                        <span class="visually-hidden">Pink</span>
+                                                    </label>
+                                                    <input type="radio" class="btn-check" name="colors-2"
+                                                        id="color-2-2">
+                                                    <label for="color-2-2" class="btn btn-color fs-base"
+                                                        style="color: #ced6f0">
+                                                        <span class="visually-hidden">Blue</span>
+                                                    </label>
+                                                    <input type="radio" class="btn-check" name="colors-2"
+                                                        id="color-2-3">
+                                                    <label for="color-2-3" class="btn btn-color fs-base"
+                                                        style="color: #e1e0cf">
+                                                        <span class="visually-hidden">Mustard</span>
+                                                    </label>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <!-- Item -->
+                                    <div class="col">
+                                        <div class="animate-underline hover-effect-opacity">
+                                            <div class="position-relative mb-3">
+                                                <button type="button"
+                                                    class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                                    aria-label="Add to Wishlist">
+                                                    <i class="ci-heart animate-target"></i>
+                                                </button>
+                                                <a class="d-flex bg-body-tertiary rounded p-3" href="#!">
+                                                    <div class="ratio"
+                                                        style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
+                                                        <img src="/img/shop/fashion/07.png" alt="Image">
+                                                    </div>
+                                                </a>
+                                                <div
+                                                    class="hover-effect-target position-absolute start-0 bottom-0 w-100 z-2 opacity-0 pb-2 pb-sm-3 px-2 px-sm-3">
+                                                    <div
+                                                        class="d-flex align-items-center justify-content-center gap-2 gap-xl-3 bg-body rounded-2 p-2">
+                                                        <span
+                                                            class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">6</span>
+                                                        <span
+                                                            class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">6.5</span>
+                                                        <span
+                                                            class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">7</span>
+                                                        <span
+                                                            class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">7.5</span>
+                                                        <div class="nav">
+                                                            <a class="nav-link fs-xs text-body-tertiary py-1 px-2"
+                                                                href="#!">+4</a>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="nav mb-2">
+                                                <a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
+                                                    href="#!">
+                                                    <span class="text-truncate">Black massive women's boots</span>
+                                                </a>
+                                            </div>
+                                            <div class="h6 mb-2">$160.00</div>
+                                            <div class="position-relative">
+                                                <div class="hover-effect-target fs-xs text-body-secondary opacity-100">+1
+                                                    color</div>
+                                                <div
+                                                    class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
+                                                    <input type="radio" class="btn-check" name="colors-7"
+                                                        id="color-7-1" checked>
+                                                    <label for="color-7-1" class="btn btn-color fs-base"
+                                                        style="color: #364254">
+                                                        <span class="visually-hidden">Black</span>
+                                                    </label>
+                                                    <input type="radio" class="btn-check" name="colors-7"
+                                                        id="color-7-2">
+                                                    <label for="color-7-2" class="btn btn-color fs-base"
+                                                        style="color: #e0e5eb">
+                                                        <span class="visually-hidden">White</span>
+                                                    </label>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Slide -->
+                            <div class="swiper-slide">
+                                <div class="row row-cols-2">
+
+                                    <!-- Item -->
+                                    <div class="col">
+                                        <div class="animate-underline hover-effect-opacity">
+                                            <div class="position-relative mb-3">
+                                                <button type="button"
+                                                    class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                                    aria-label="Add to Wishlist">
+                                                    <i class="ci-heart animate-target"></i>
+                                                </button>
+                                                <a class="d-flex bg-body-tertiary rounded p-3" href="#!">
+                                                    <div class="ratio"
+                                                        style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
+                                                        <img src="/img/shop/fashion/09.png" alt="Image">
+                                                    </div>
+                                                </a>
+                                                <div
+                                                    class="hover-effect-target position-absolute start-0 bottom-0 w-100 z-2 opacity-0 pb-2 pb-sm-3 px-2 px-sm-3">
+                                                    <div
+                                                        class="d-flex align-items-center justify-content-center gap-2 gap-xl-3 bg-body rounded-2 p-2">
+                                                        <span
+                                                            class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">XS</span>
+                                                        <span
+                                                            class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">S</span>
+                                                        <span
+                                                            class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">M</span>
+                                                        <span
+                                                            class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">L</span>
+                                                        <div class="nav">
+                                                            <a class="nav-link fs-xs text-body-tertiary py-1 px-2"
+                                                                href="#!">+3</a>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="nav mb-2">
+                                                <a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
+                                                    href="#!">
+                                                    <span class="text-truncate">White cotton blouse with necklace</span>
+                                                </a>
+                                            </div>
+                                            <div class="h6 mb-2">$38.50</div>
+                                            <div class="position-relative">
+                                                <div class="hover-effect-target fs-xs text-body-secondary opacity-100">+1
+                                                    color</div>
+                                                <div
+                                                    class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
+                                                    <input type="radio" class="btn-check" name="colors-9"
+                                                        id="color-9-1" checked>
+                                                    <label for="color-9-1" class="btn btn-color fs-base"
+                                                        style="color: #e0e5eb">
+                                                        <span class="visually-hidden">White</span>
+                                                    </label>
+                                                    <input type="radio" class="btn-check" name="colors-9"
+                                                        id="color-9-2">
+                                                    <label for="color-9-2" class="btn btn-color fs-base"
+                                                        style="color: #364254">
+                                                        <span class="visually-hidden">Black</span>
+                                                    </label>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <!-- Item -->
+                                    <div class="col">
+                                        <div class="animate-underline hover-effect-opacity">
+                                            <div class="position-relative mb-3">
+                                                <button type="button"
+                                                    class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                                    aria-label="Add to Wishlist">
+                                                    <i class="ci-heart animate-target"></i>
+                                                </button>
+                                                <a class="d-flex bg-body-tertiary rounded p-3" href="#!">
+                                                    <div class="ratio"
+                                                        style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
+                                                        <img src="/img/shop/fashion/08.png" alt="Image">
+                                                    </div>
+                                                </a>
+                                                <div
+                                                    class="hover-effect-target position-absolute start-0 bottom-0 w-100 z-2 opacity-0 pb-2 pb-sm-3 px-2 px-sm-3">
+                                                    <div
+                                                        class="d-flex align-items-center justify-content-center gap-2 gap-xl-3 bg-body rounded-2 p-2">
+                                                        <span
+                                                            class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">6.5</span>
+                                                        <span
+                                                            class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">7</span>
+                                                        <span
+                                                            class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">7.5</span>
+                                                        <span
+                                                            class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">8</span>
+                                                        <div class="nav">
+                                                            <a class="nav-link fs-xs text-body-tertiary py-1 px-2"
+                                                                href="#!">+3</a>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="nav mb-2">
+                                                <a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
+                                                    href="#!">
+                                                    <span class="text-truncate">Leather sneakers with golden laces</span>
+                                                </a>
+                                            </div>
+                                            <div class="h6 mb-2">$74.00</div>
+                                            <div class="position-relative">
+                                                <div class="hover-effect-target fs-xs text-body-secondary opacity-100">+2
+                                                    colors</div>
+                                                <div
+                                                    class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
+                                                    <input type="radio" class="btn-check" name="colors-8"
+                                                        id="color-8-1" checked>
+                                                    <label for="color-8-1" class="btn btn-color fs-base"
+                                                        style="color: #b1aa9b">
+                                                        <span class="visually-hidden">Cream</span>
+                                                    </label>
+                                                    <input type="radio" class="btn-check" name="colors-8"
+                                                        id="color-8-2">
+                                                    <label for="color-8-2" class="btn btn-color fs-base"
+                                                        style="color: #496c33">
+                                                        <span class="visually-hidden">Dark green</span>
+                                                    </label>
+                                                    <input type="radio" class="btn-check" name="colors-8"
+                                                        id="color-8-3">
+                                                    <label for="color-8-3" class="btn btn-color fs-base"
+                                                        style="color: #364254">
+                                                        <span class="visually-hidden">Black</span>
+                                                    </label>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Product image -->
+                <div class="col-md-6 order-md-1">
+                    <img src="/img/shop/fashion/product/01.png" class="d-block bg-body-tertiary rounded"
+                        alt="Image">
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Viewed products (carousel) -->
+        <section class="container pt-5 mt-2 mt-sm-3 mt-lg-4 mt-xl-5">
+            <div class="d-flex align-items-center justify-content-between pt-1 pt-lg-0 pb-3 mb-2 mb-sm-3">
+                <h2 class="mb-0 me-3">Viewed products</h2>
+
+                <!-- Slider prev/next buttons -->
+                <div class="d-flex gap-2">
+                    <button type="button"
+                        class="btn btn-icon btn-outline-secondary animate-slide-start rounded-circle me-1"
+                        id="viewedPrev" aria-label="Prev">
+                        <i class="ci-chevron-left fs-lg animate-target"></i>
+                    </button>
+                    <button type="button" class="btn btn-icon btn-outline-secondary animate-slide-end rounded-circle"
+                        id="viewedNext" aria-label="Next">
+                        <i class="ci-chevron-right fs-lg animate-target"></i>
+                    </button>
+                </div>
+            </div>
+
+            <!-- Slider -->
+            <div class="swiper"
+                data-swiper='{
+          "slidesPerView": 2,
+          "spaceBetween": 24,
+          "loop": true,
+          "navigation": {
+            "prevEl": "#viewedPrev",
+            "nextEl": "#viewedNext"
+          },
+          "breakpoints": {
+            "768": {
+              "slidesPerView": 3
+            },
+            "992": {
+              "slidesPerView": 4
+            }
+          }
+        }'>
+                <div class="swiper-wrapper">
+
+                    <!-- Item -->
+                    <div class="swiper-slide">
+                        <div class="animate-underline hover-effect-opacity">
+                            <div class="position-relative mb-3">
+                                <button type="button"
+                                    class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                    aria-label="Add to Wishlist">
+                                    <i class="ci-heart animate-target"></i>
+                                </button>
+                                <a class="d-flex bg-body-tertiary rounded p-3" href="#!">
+                                    <div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
+                                        <img src="/img/shop/fashion/11.png" alt="Image">
+                                    </div>
+                                </a>
+                                <div
+                                    class="hover-effect-target position-absolute start-0 bottom-0 w-100 z-2 opacity-0 pb-2 pb-sm-3 px-2 px-sm-3">
+                                    <div
+                                        class="d-flex align-items-center justify-content-center gap-2 gap-xl-3 bg-body rounded-2 p-2">
+                                        <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">S</span>
+                                        <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">M</span>
+                                        <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">L</span>
+                                        <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">XL</span>
+                                        <div class="nav">
+                                            <a class="nav-link fs-xs text-body-tertiary py-1 px-2" href="#!">+1</a>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="nav mb-2">
+                                <a class="nav-link animate-target min-w-0 text-dark-emphasis p-0" href="#!">
+                                    <span class="text-truncate">Warm sweatshirts without a hoodie</span>
+                                </a>
+                            </div>
+                            <div class="h6 mb-2">$32.99</div>
+                            <div class="position-relative">
+                                <div class="hover-effect-target fs-xs text-body-secondary opacity-100">+2 colors</div>
+                                <div class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
+                                    <input type="radio" class="btn-check" name="colors-11" id="color-11-1"
+                                        checked>
+                                    <label for="color-11-1" class="btn btn-color fs-base" style="color: #42675f">
+                                        <span class="visually-hidden">Green</span>
+                                    </label>
+                                    <input type="radio" class="btn-check" name="colors-11" id="color-11-2">
+                                    <label for="color-11-2" class="btn btn-color fs-base" style="color: #476585">
+                                        <span class="visually-hidden">Blue</span>
+                                    </label>
+                                    <input type="radio" class="btn-check" name="colors-11" id="color-11-3">
+                                    <label for="color-11-3" class="btn btn-color fs-base" style="color: #724c74">
+                                        <span class="visually-hidden">Purple</span>
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Item -->
+                    <div class="swiper-slide">
+                        <div class="animate-underline hover-effect-opacity">
+                            <div class="position-relative mb-3">
+                                <button type="button"
+                                    class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                    aria-label="Add to Wishlist">
+                                    <i class="ci-heart animate-target"></i>
+                                </button>
+                                <a class="d-flex bg-body-tertiary rounded p-3" href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                    <div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
+                                        <img src="/img/shop/fashion/03.png" alt="Image">
+                                    </div>
+                                </a>
+                                <div
+                                    class="hover-effect-target position-absolute start-0 bottom-0 w-100 z-2 opacity-0 pb-2 pb-sm-3 px-2 px-sm-3">
+                                    <div
+                                        class="d-flex align-items-center justify-content-center gap-2 gap-xl-3 bg-body rounded-2 p-2">
+                                        <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">6</span>
+                                        <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">6.5</span>
+                                        <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">7</span>
+                                        <span class="fs-xs fw-medium text-secondary-emphasis py-1 px-sm-2">7.5</span>
+                                        <div class="nav">
+                                            <a class="nav-link fs-xs text-body-tertiary py-1 px-2"
+                                                href="{{ route('second', ['shop', 'product-fashion']) }}">+4</a>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="nav mb-2">
+                                <a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
+                                    href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                    <span class="text-truncate">Sneakers with a massive sole</span>
+                                </a>
+                            </div>
+                            <div class="h6 mb-2">$86.50</div>
+                            <div class="position-relative">
+                                <div class="hover-effect-target fs-xs text-body-secondary opacity-100">+1 color</div>
+                                <div class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
+                                    <input type="radio" class="btn-check" name="colors-3" id="color-3-1" checked>
+                                    <label for="color-3-1" class="btn btn-color fs-base" style="color: #e0e5eb">
+                                        <span class="visually-hidden">White</span>
+                                    </label>
+                                    <input type="radio" class="btn-check" name="colors-3" id="color-3-2">
+                                    <label for="color-3-2" class="btn btn-color fs-base" style="color: #364254">
+                                        <span class="visually-hidden">Black</span>
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Item -->
+                    <div class="swiper-slide">
+                        <div class="animate-underline hover-effect-opacity">
+                            <div class="position-relative mb-3">
+                                <button type="button"
+                                    class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                    aria-label="Add to Wishlist">
+                                    <i class="ci-heart animate-target"></i>
+                                </button>
+                                <a class="d-flex bg-body-tertiary rounded p-3" href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                    <div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
+                                        <img src="/img/shop/fashion/04.png" alt="Image">
+                                    </div>
+                                </a>
+                            </div>
+                            <div class="nav mb-2">
+                                <a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
+                                    href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                    <span class="text-truncate">Knitted bag with a wooden handle</span>
+                                </a>
+                            </div>
+                            <div class="h6 mb-2">$105.00</div>
+                            <div class="position-relative">
+                                <div class="hover-effect-target fs-xs text-body-secondary opacity-100">+1 color</div>
+                                <div class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
+                                    <input type="radio" class="btn-check" name="colors-4" id="color-4-1" checked>
+                                    <label for="color-4-1" class="btn btn-color fs-base" style="color: #e7ddb4">
+                                        <span class="visually-hidden">Beige</span>
+                                    </label>
+                                    <input type="radio" class="btn-check" name="colors-4" id="color-4-2">
+                                    <label for="color-4-2" class="btn btn-color fs-base" style="color: #8b9bc4">
+                                        <span class="visually-hidden">Blue</span>
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Item -->
+                    <div class="swiper-slide">
+                        <div class="animate-underline hover-effect-opacity">
+                            <div class="position-relative mb-3">
+                                <span
+                                    class="badge text-bg-danger position-absolute top-0 start-0 z-2 mt-2 mt-sm-3 ms-2 ms-sm-3">-17%</span>
+                                <button type="button"
+                                    class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                    aria-label="Add to Wishlist">
+                                    <i class="ci-heart animate-target"></i>
+                                </button>
+                                <a class="d-flex bg-body-tertiary rounded p-3" href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                    <div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
+                                        <img src="/img/shop/fashion/05.png" alt="Image">
+                                    </div>
+                                </a>
+                            </div>
+                            <div class="nav mb-2">
+                                <a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
+                                    href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                    <span class="text-truncate">Polarized sunglasses for men</span>
+                                </a>
+                            </div>
+                            <div class="h6 mb-2">$96.00 <del class="fs-sm fw-normal text-body-tertiary">$112.00</del>
+                            </div>
+                            <div class="position-relative">
+                                <div class="hover-effect-target fs-xs text-body-secondary opacity-100">+2 colors</div>
+                                <div class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
+                                    <input type="radio" class="btn-check" name="colors-5" id="color-5-1" checked>
+                                    <label for="color-5-1" class="btn btn-color fs-base" style="color: #8cc4ac">
+                                        <span class="visually-hidden">Green</span>
+                                    </label>
+                                    <input type="radio" class="btn-check" name="colors-5" id="color-5-2">
+                                    <label for="color-5-2" class="btn btn-color fs-base" style="color: #8cb7c4">
+                                        <span class="visually-hidden">Blue</span>
+                                    </label>
+                                    <input type="radio" class="btn-check" name="colors-5" id="color-5-3">
+                                    <label for="color-5-3" class="btn btn-color fs-base" style="color: #ccb782">
+                                        <span class="visually-hidden">Brown</span>
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Item -->
+                    <div class="swiper-slide">
+                        <div class="animate-underline hover-effect-opacity">
+                            <div class="position-relative mb-3">
+                                <button type="button"
+                                    class="btn btn-icon btn-secondary animate-pulse fs-base bg-transparent border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                    aria-label="Add to Wishlist">
+                                    <i class="ci-heart animate-target"></i>
+                                </button>
+                                <a class="d-flex bg-body-tertiary rounded p-3" href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                    <div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
+                                        <img src="/img/shop/fashion/10.png" alt="Image">
+                                    </div>
+                                </a>
+                            </div>
+                            <div class="nav mb-2">
+                                <a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
+                                    href="{{ route('second', ['shop', 'product-fashion']) }}">
+                                    <span class="text-truncate">Leather handbag for women</span>
+                                </a>
+                            </div>
+                            <div class="h6 mb-2">$140.00</div>
+                            <div class="position-relative">
+                                <div class="hover-effect-target fs-xs text-body-secondary opacity-100">+2 colors</div>
+                                <div class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
+                                    <input type="radio" class="btn-check" name="colors-10" id="color-10-1"
+                                        checked>
+                                    <label for="color-10-1" class="btn btn-color fs-base" style="color: #869286">
+                                        <span class="visually-hidden">Olive</span>
+                                    </label>
+                                    <input type="radio" class="btn-check" name="colors-10" id="color-10-2">
+                                    <label for="color-10-2" class="btn btn-color fs-base" style="color: #364254">
+                                        <span class="visually-hidden">Black</span>
+                                    </label>
+                                    <input type="radio" class="btn-check" name="colors-10" id="color-10-3">
+                                    <label for="color-10-3" class="btn btn-color fs-base" style="color: #526f99">
+                                        <span class="visually-hidden">Blue</span>
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Instagram feed -->
+        <section class="container pt-5 mt-2 mt-sm-3 mt-lg-4 mt-xl-5">
+            <div class="text-center pt-1 pb-2 pb-md-3">
+                <h2 class="pb-2 mb-1">
+                    <span class="animate-underline">
+                        <a class="animate-target text-dark-emphasis text-decoration-none" href="#!">#cartzilla</a>
+                    </span>
+                </h2>
+                <p>Find more inspiration on our Instagram</p>
+            </div>
+            <div class="overflow-x-auto pb-3 mb-n3" data-simplebar>
+                <div class="d-flex gap-2 gap-md-3 gap-lg-4" style="min-width: 700px">
+                    <a class="hover-effect-scale hover-effect-opacity position-relative w-100 overflow-hidden"
+                        href="#!">
+                        <span
+                            class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
+                        <i
+                            class="ci-instagram hover-effect-target fs-4 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
+                        <div class="hover-effect-target ratio ratio-1x1">
+                            <img src="/img/instagram/01.jpg" alt="Instagram image">
+                        </div>
+                    </a>
+                    <a class="hover-effect-scale hover-effect-opacity position-relative w-100 overflow-hidden"
+                        href="#!">
+                        <span
+                            class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
+                        <i
+                            class="ci-instagram hover-effect-target fs-4 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
+                        <div class="hover-effect-target ratio ratio-1x1">
+                            <img src="/img/instagram/02.jpg" alt="Instagram image">
+                        </div>
+                    </a>
+                    <a class="hover-effect-scale hover-effect-opacity position-relative w-100 overflow-hidden"
+                        href="#!">
+                        <span
+                            class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
+                        <i
+                            class="ci-instagram hover-effect-target fs-4 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
+                        <div class="hover-effect-target ratio ratio-1x1">
+                            <img src="/img/instagram/03.jpg" alt="Instagram image">
+                        </div>
+                    </a>
+                    <a class="hover-effect-scale hover-effect-opacity position-relative w-100 overflow-hidden"
+                        href="#!">
+                        <span
+                            class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
+                        <i
+                            class="ci-instagram hover-effect-target fs-4 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
+                        <div class="hover-effect-target ratio ratio-1x1">
+                            <img src="/img/instagram/04.jpg" alt="Instagram image">
+                        </div>
+                    </a>
+                    <a class="hover-effect-scale hover-effect-opacity position-relative w-100 overflow-hidden"
+                        href="#!">
+                        <span
+                            class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
+                        <i
+                            class="ci-instagram hover-effect-target fs-4 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
+                        <div class="hover-effect-target ratio ratio-1x1">
+                            <img src="/img/instagram/05.jpg" alt="Instagram image">
+                        </div>
+                    </a>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <footer class="footer pt-5 pb-4">
+        <div class="container pt-sm-2 pt-md-3 pt-lg-4">
+            <div class="row pb-5 mb-lg-3">
+
+                <!-- Columns with links that are turned into accordion on screens < 500px wide (sm breakpoint) -->
+                <div class="col-md-8 col-xl-7 pb-2 pb-md-0 mb-4 mb-md-0 mt-n3 mt-sm-0">
+                    <div class="accordion" id="footerLinks">
+                        <div class="row row-cols-1 row-cols-sm-3">
+                            <div class="accordion-item col border-0">
+                                <h6 class="accordion-header" id="categoriesHeading">
+                                    <span class="text-dark-emphasis d-none d-sm-block">Categories</span>
+                                    <button type="button" class="accordion-button collapsed py-3 d-sm-none"
+                                        data-bs-toggle="collapse" data-bs-target="#categoriesLinks"
+                                        aria-expanded="false" aria-controls="categoriesLinks">Categories</button>
+                                </h6>
+                                <div class="accordion-collapse collapse d-sm-block" id="categoriesLinks"
+                                    aria-labelledby="categoriesHeading" data-bs-parent="#footerLinks">
+                                    <ul class="nav flex-column gap-2 pt-sm-3 pb-3 pb-sm-0 mt-n1 mb-1 mb-sm-0">
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">For women</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">For men</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Home clothes</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Accessories</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Sale</a>
+                                        </li>
+                                    </ul>
+                                </div>
+                                <hr class="d-sm-none my-0">
+                            </div>
+                            <div class="accordion-item col border-0">
+                                <h6 class="accordion-header" id="accountHeading">
+                                    <span class="text-dark-emphasis d-none d-sm-block">Account</span>
+                                    <button type="button" class="accordion-button collapsed py-3 d-sm-none"
+                                        data-bs-toggle="collapse" data-bs-target="#accountLinks" aria-expanded="false"
+                                        aria-controls="accountLinks">Account</button>
+                                </h6>
+                                <div class="accordion-collapse collapse d-sm-block" id="accountLinks"
+                                    aria-labelledby="accountHeading" data-bs-parent="#footerLinks">
+                                    <ul class="nav flex-column gap-2 pt-sm-3 pb-3 pb-sm-0 mt-n1 mb-1 mb-sm-0">
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Your account</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Shipping &amp; policies</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Refunds &amp; replacements</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Order tracking</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Delivery info</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Taxes &amp; fees</a>
+                                        </li>
+                                    </ul>
+                                </div>
+                                <hr class="d-sm-none my-0">
+                            </div>
+                            <div class="accordion-item col border-0">
+                                <h6 class="accordion-header" id="customerHeading">
+                                    <span class="text-dark-emphasis d-none d-sm-block">Customer service</span>
+                                    <button type="button" class="accordion-button collapsed py-3 d-sm-none"
+                                        data-bs-toggle="collapse" data-bs-target="#customerLinks"
+                                        aria-expanded="false" aria-controls="customerLinks">Customer service</button>
+                                </h6>
+                                <div class="accordion-collapse collapse d-sm-block" id="customerLinks"
+                                    aria-labelledby="customerHeading" data-bs-parent="#footerLinks">
+                                    <ul class="nav flex-column gap-2 pt-sm-3 pb-3 pb-sm-0 mt-n1 mb-1 mb-sm-0">
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Payment methods</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Money back guarantee</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Refunds &amp; replacements</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Product returns</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Support center</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Shipping</a>
+                                        </li>
+                                    </ul>
+                                </div>
+                                <hr class="d-sm-none my-0">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Subscription -->
+                <div class="col-md-4 offset-xl-1">
+                    <h6 class="mb-4">Join us and stay up to date</h6>
+                    <form class="needs-validation" novalidate>
+                        <div class="form-check form-check-inline">
+                            <input type="checkbox" class="form-check-input" id="check-woman" checked>
+                            <label for="check-woman" class="form-check-label">Woman</label>
+                        </div>
+                        <div class="form-check form-check-inline">
+                            <input type="checkbox" class="form-check-input" id="check-man">
+                            <label for="check-man" class="form-check-label">Man</label>
+                        </div>
+                        <div class="form-check form-check-inline">
+                            <input type="checkbox" class="form-check-input" id="check-sale">
+                            <label for="check-sale" class="form-check-label">Sale</label>
+                        </div>
+                        <div class="position-relative mt-3">
+                            <input type="email" class="form-control form-control-lg bg-image-none text-start"
+                                placeholder="Enter email" aria-label="Your email address" required>
+                            <div class="invalid-tooltip bg-transparent p-0">Please enter you email address!</div>
+                            <button type="submit"
+                                class="btn btn-icon btn-ghost fs-xl btn-secondary border-0 position-absolute top-0 end-0 mt-1 me-1"
+                                aria-label="Submit your email address">
+                                <i class="ci-arrow-up-right"></i>
+                            </button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+
+            <!-- Social account links -->
+            <div class="d-flex justify-content-center justify-content-lg-start gap-2 mt-n2 mt-md-0">
+                <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!" data-bs-toggle="tooltip"
+                    data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-body p-0"></div></div>'
+                    title="YouTube" aria-label="Follow us on YouTube">
+                    <i class="ci-youtube"></i>
+                </a>
+                <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!" data-bs-toggle="tooltip"
+                    data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-body p-0"></div></div>'
+                    title="Facebook" aria-label="Follow us on Facebook">
+                    <i class="ci-facebook"></i>
+                </a>
+                <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!" data-bs-toggle="tooltip"
+                    data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-body p-0"></div></div>'
+                    title="Instagram" aria-label="Follow us on Instagram">
+                    <i class="ci-instagram"></i>
+                </a>
+                <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!" data-bs-toggle="tooltip"
+                    data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-body p-0"></div></div>'
+                    title="Telegram" aria-label="Follow us on Telegram">
+                    <i class="ci-telegram"></i>
+                </a>
+                <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!" data-bs-toggle="tooltip"
+                    data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-body p-0"></div></div>'
+                    title="Pinterest" aria-label="Follow us on Pinterest">
+                    <i class="ci-pinterest"></i>
+                </a>
+            </div>
+
+            <!-- Copyright + Payment methods -->
+            <div class="d-lg-flex align-items-center border-top pt-4 mt-3">
+                <div class="d-flex gap-2 gap-sm-3 justify-content-center ms-lg-auto mb-3 mb-md-4 mb-lg-0 order-lg-2">
+                    <div>
+                        <img src="/img/payment-methods/visa-light-mode.svg" class="d-none-dark" alt="Visa">
+                        <img src="/img/payment-methods/visa-dark-mode.svg" class="d-none d-block-dark" alt="Visa">
+                    </div>
+                    <div>
+                        <img src="/img/payment-methods/paypal-light-mode.svg" class="d-none-dark" alt="PayPal">
+                        <img src="/img/payment-methods/paypal-dark-mode.svg" class="d-none d-block-dark"
+                            alt="PayPal">
+                    </div>
+                    <div>
+                        <img src="/img/payment-methods/mastercard.svg" alt="Mastercard">
+                    </div>
+                    <div>
+                        <img src="/img/payment-methods/google-pay-light-mode.svg" class="d-none-dark"
+                            alt="Google Pay">
+                        <img src="/img/payment-methods/google-pay-dark-mode.svg" class="d-none d-block-dark"
+                            alt="Google Pay">
+                    </div>
+                    <div>
+                        <img src="/img/payment-methods/apple-pay-light-mode.svg" class="d-none-dark" alt="Apple Pay">
+                        <img src="/img/payment-methods/apple-pay-dark-mode.svg" class="d-none d-block-dark"
+                            alt="Apple Pay">
+                    </div>
+                </div>
+                <div class="d-md-flex justify-content-center order-lg-1">
+                    <ul class="nav justify-content-center gap-4 order-md-3 mb-4 mb-md-0">
+                        <li class="animate-underline">
+                            <a class="nav-link fs-xs fw-normal p-0 animate-target" href="#!">Privacy</a>
+                        </li>
+                        <li class="animate-underline">
+                            <a class="nav-link fs-xs fw-normal p-0 animate-target" href="#!">Affiliates</a>
+                        </li>
+                        <li class="animate-underline">
+                            <a class="nav-link fs-xs fw-normal p-0 animate-target" href="#!">Terms of use</a>
+                        </li>
+                    </ul>
+                    <div class="vr text-body-secondary opacity-25 mx-4 d-none d-md-inline-block order-md-2"></div>
+                    <p class="fs-xs text-center text-lg-start mb-0 order-md-1">
+                        &copy; All rights reserved. Made by <span class="animate-underline"><a
+                                class="animate-target text-dark-emphasis text-decoration-none"
+                                href="https://coderthemes.com/" target="_blank" rel="noreferrer">Coderthemes
+                                Studio</a></span>
+                    </p>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+@endsection
+
+@section('scripts')
+@endsection
diff --git a/resources/views/shop/product-furniture.blade.php b/resources/views/shop/product-furniture.blade.php
new file mode 100644
index 0000000..d989e9f
--- /dev/null
+++ b/resources/views/shop/product-furniture.blade.php
@@ -0,0 +1,1525 @@
+@extends('layouts.landing', ['title' => 'Furniture Store - Product Page'])
+
+@section('content')
+    <div class="modal fade" id="reviewForm" data-bs-backdrop="static" tabindex="-1" aria-labelledby="reviewFormLabel"
+        aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
+            <form class="modal-content needs-validation" novalidate>
+                <div class="modal-header border-0">
+                    <h5 class="modal-title" id="reviewFormLabel">Leave a review</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body pb-3 pt-0">
+                    <div class="mb-3">
+                        <label for="review-name" class="form-label">Your name <span class="text-danger">*</span></label>
+                        <input type="text" class="form-control rounded-pill" id="review-name" required>
+                        <div class="invalid-feedback">Please enter your name!</div>
+                        <small class="form-text">Will be displayed on the comment.</small>
+                    </div>
+                    <div class="mb-3">
+                        <label for="review-email" class="form-label">Your email <span class="text-danger">*</span></label>
+                        <input type="email" class="form-control rounded-pill" id="review-email" required>
+                        <div class="invalid-feedback">Please provide a valid email address!</div>
+                        <small class="form-text">Authentication only - we won't spam you.</small>
+                    </div>
+                    <div class="mb-3">
+                        <label class="form-label">Rating <span class="text-danger">*</span></label>
+                        <select class="form-select rounded-pill"
+                            data-select='{
+                "classNames": {
+                  "containerInner": ["form-select", "rounded-pill"]
+                },
+                "placeholderValue": "Choose rating",
+                "choices": [
+                  {
+                    "value": "",
+                    "label": "Choose rating",
+                    "placeholder": true
+                  },
+                  {
+                    "value": "1",
+                    "label": "<span class=\"visually-hidden\">1 star</span>",
+                    "customProperties": {
+                      "icon": "<span class=\"d-flex gap-1 py-1\"><i class=\"ci-star-filled text-warning\"></i></span>",
+                      "selected": "1 star"
+                    }
+                  },
+                  {
+                    "value": "2",
+                    "label": "<span class=\"visually-hidden\">2 stars</span>",
+                    "customProperties": {
+                      "icon": "<span class=\"d-flex gap-1 py-1\"><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i></span>",
+                      "selected": "2 stars"
+                    }
+                  },
+                  {
+                    "value": "3",
+                    "label": "<span class=\"visually-hidden\">3 stars</span>",
+                    "customProperties": {
+                      "icon": "<span class=\"d-flex gap-1 py-1\"><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i></span>",
+                      "selected": "3 stars"
+                    }
+                  },
+                  {
+                    "value": "4",
+                    "label": "<span class=\"visually-hidden\">4 stars</span>",
+                    "customProperties": {
+                      "icon": "<span class=\"d-flex gap-1 py-1\"><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i></span>",
+                      "selected": "4 stars"
+                    }
+                  },
+                  {
+                    "value": "5",
+                    "label": "<span class=\"visually-hidden\">5 stars</span>",
+                    "customProperties": {
+                      "icon": "<span class=\"d-flex gap-1 py-1\"><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i></span>",
+                      "selected": "5 stars"
+                    }
+                  }
+                ]
+              }'
+                            data-select-template="true" required></select>
+                        <div class="invalid-feedback">Please choose your rating!</div>
+                    </div>
+                    <div class="mb-3">
+                        <label class="form-label" for="review-text">Review <span class="text-danger">*</span></label>
+                        <textarea class="form-control rounded-6" rows="4" id="review-text" required></textarea>
+                        <div class="invalid-feedback">Please write a review!</div>
+                        <small class="form-text">Your review must be at least 50 characters.</small>
+                    </div>
+                    <div>
+                        <div class="form-check form-check-inline">
+                            <input type="radio" class="form-check-input" id="yes" name="recommend" checked>
+                            <label for="yes" class="form-check-label">Yes, I recommend</label>
+                        </div>
+                        <div class="form-check form-check-inline">
+                            <input type="radio" class="form-check-input" id="no" name="recommend">
+                            <label for="no" class="form-check-label">No, I don't recommend</label>
+                        </div>
+                    </div>
+                </div>
+                <div class="modal-footer flex-nowrap gap-3 border-0 px-4">
+                    <button type="reset" class="btn btn-secondary w-100 rounded-pill m-0"
+                        data-bs-dismiss="modal">Cancel</button>
+                    <button type="submit" class="btn btn-dark w-100 rounded-pill m-0">Submit review</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <div class="offcanvas offcanvas-end pb-sm-2 px-sm-2" id="shoppingCart" tabindex="-1"
+        aria-labelledby="shoppingCartLabel" style="width: 500px">
+        <div class="offcanvas-header py-3 pt-lg-4">
+            <h4 class="offcanvas-title" id="shoppingCartLabel">Shopping cart</h4>
+            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+        </div>
+        <div class="offcanvas-body text-center">
+            <svg class="d-block mx-auto mb-4" xmlns="http://www.w3.org/2000/svg" width="60" viewBox="0 0 29.5 30">
+                <path class="text-body-tertiary"
+                    d="M17.8 4c.4 0 .8-.3.8-.8v-2c0-.4-.3-.8-.8-.8-.4 0-.8.3-.8.8v2c0 .4.3.8.8.8zm3.2.6c.4.2.8 0 1-.4l.4-.9c.2-.4 0-.8-.4-1s-.8 0-1 .4l-.4.9c-.2.4 0 .9.4 1zm-7.5-.4c.2.4.6.6 1 .4s.6-.6.4-1l-.4-.9c-.2-.4-.6-.6-1-.4s-.6.6-.4 1l.4.9z"
+                    fill="currentColor" />
+                <path class="text-body-emphasis"
+                    d="M10.7 24.5c-1.5 0-2.8 1.2-2.8 2.8S9.2 30 10.7 30s2.8-1.2 2.8-2.8-1.2-2.7-2.8-2.7zm0 4c-.7 0-1.2-.6-1.2-1.2s.6-1.2 1.2-1.2 1.2.6 1.2 1.2-.5 1.2-1.2 1.2zm11.1-4c-1.5 0-2.8 1.2-2.8 2.8a2.73 2.73 0 0 0 2.8 2.8 2.73 2.73 0 0 0 2.8-2.8c0-1.6-1.3-2.8-2.8-2.8zm0 4c-.7 0-1.2-.6-1.2-1.2s.6-1.2 1.2-1.2 1.2.6 1.2 1.2-.6 1.2-1.2 1.2zM8.7 18h16c.3 0 .6-.2.7-.5l4-10c.2-.5-.2-1-.7-1H9.3c-.4 0-.8.3-.8.8s.4.7.8.7h18.3l-3.4 8.5H9.3L5.5 1C5.4.7 5.1.5 4.8.5h-4c-.5 0-.8.3-.8.7s.3.8.8.8h3.4l3.7 14.6a3.24 3.24 0 0 0-2.3 3.1C5.5 21.5 7 23 8.7 23h16c.4 0 .8-.3.8-.8s-.3-.8-.8-.8h-16a1.79 1.79 0 0 1-1.8-1.8c0-1 .9-1.6 1.8-1.6z"
+                    fill="currentColor" />
+            </svg>
+            <h6 class="mb-2">Your shopping cart is currently empty!</h6>
+            <p class="fs-sm mb-4">Explore our wide range of products and add items to your cart to proceed with your
+                purchase.</p>
+            <a class="btn btn-dark rounded-pill" href="{{ route('second', ['shop', 'catalog-furniture']) }}">Continue shopping</a>
+        </div>
+    </div>
+
+    @include('layouts.partials/navbar2')
+
+    <main class="content-wrapper">
+        <div class="container">
+
+            <!-- Breadcrumb -->
+            <nav class="position-relative pt-3 mt-3 mt-md-4 mb-4" aria-label="breadcrumb">
+                <ol class="breadcrumb">
+                    <li class="breadcrumb-item"><a href="{{ route('second', ['home', 'furniture']) }}">Home</a></li>
+                    <li class="breadcrumb-item"><a href="{{ route('second', ['shop', 'catalog-furniture']) }}">Shop</a></li>
+                    <li class="breadcrumb-item active" aria-current="page">Product page</li>
+                </ol>
+            </nav>
+
+
+            <!-- Product gallery and details -->
+            <section class="row pb-4 pb-md-5 mb-2 mb-md-0 mb-xl-3">
+
+                <!-- Gallery -->
+                <div class="col-md-7 col-xl-8 pb-4 pb-md-0 mb-2 mb-sm-3 mb-md-0">
+                    <div class="row row-cols-2 g-3 g-sm-4 g-md-3 g-lg-4">
+                        <div class="col">
+                            <a class="hover-effect-scale hover-effect-opacity position-relative d-flex rounded-4 overflow-hidden"
+                                href="/img/shop/furniture/product/01.png" data-glightbox data-gallery="product-gallery">
+                                <i
+                                    class="ci-zoom-in hover-effect-target fs-3 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
+                                <div class="ratio ratio-1x1 hover-effect-target">
+                                    <img src="/img/shop/furniture/product/01.png" alt="Image">
+                                </div>
+                            </a>
+                        </div>
+                        <div class="col">
+                            <a class="hover-effect-scale hover-effect-opacity position-relative d-flex rounded-4 overflow-hidden"
+                                href="/img/shop/furniture/product/02.jpg" data-glightbox data-gallery="product-gallery">
+                                <span
+                                    class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
+                                <i
+                                    class="ci-zoom-in hover-effect-target fs-3 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
+                                <div class="ratio ratio-1x1 hover-effect-target">
+                                    <img src="/img/shop/furniture/product/02.jpg" alt="Image">
+                                </div>
+                            </a>
+                        </div>
+                        <div class="col-12">
+                            <div class="collapse d-md-block" id="morePictures">
+                                <div class="row row-cols-2 g-3 g-sm-4 g-md-3 g-lg-4 pb-3 pb-sm-4 pb-md-0">
+                                    <div class="col">
+                                        <a class="hover-effect-scale hover-effect-opacity position-relative d-flex rounded-4 overflow-hidden"
+                                            href="/img/shop/furniture/product/03.jpg" data-glightbox
+                                            data-gallery="product-gallery">
+                                            <span
+                                                class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
+                                            <i
+                                                class="ci-zoom-in hover-effect-target fs-3 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
+                                            <div class="ratio ratio-1x1 hover-effect-target">
+                                                <img src="/img/shop/furniture/product/03.jpg" alt="Image">
+                                            </div>
+                                        </a>
+                                    </div>
+                                    <div class="col">
+                                        <a class="hover-effect-scale hover-effect-opacity position-relative d-flex rounded-4 overflow-hidden"
+                                            href="/img/shop/furniture/product/04.jpg" data-glightbox
+                                            data-gallery="product-gallery">
+                                            <span
+                                                class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
+                                            <i
+                                                class="ci-zoom-in hover-effect-target fs-3 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
+                                            <div class="ratio ratio-1x1 hover-effect-target">
+                                                <img src="/img/shop/furniture/product/04.jpg" alt="Image">
+                                            </div>
+                                        </a>
+                                    </div>
+                                    <div class="col">
+                                        <a class="hover-effect-scale hover-effect-opacity position-relative d-flex rounded-4 overflow-hidden"
+                                            href="/img/shop/furniture/product/05.jpg" data-glightbox
+                                            data-gallery="product-gallery">
+                                            <span
+                                                class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
+                                            <i
+                                                class="ci-zoom-in hover-effect-target fs-3 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
+                                            <div class="ratio ratio-1x1 hover-effect-target">
+                                                <img src="/img/shop/furniture/product/05.jpg" alt="Image">
+                                            </div>
+                                        </a>
+                                    </div>
+                                    <div class="col">
+                                        <a class="hover-effect-scale hover-effect-opacity position-relative d-flex rounded-4 overflow-hidden"
+                                            href="/img/shop/furniture/product/06.jpg" data-glightbox
+                                            data-gallery="product-gallery">
+                                            <span
+                                                class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
+                                            <i
+                                                class="ci-zoom-in hover-effect-target fs-3 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
+                                            <div class="ratio ratio-1x1 hover-effect-target">
+                                                <img src="/img/shop/furniture/product/06.jpg" alt="Image">
+                                            </div>
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                            <button type="button" class="btn btn-lg btn-outline-secondary w-100 collapsed d-md-none"
+                                data-bs-toggle="collapse" data-bs-target="#morePictures"
+                                data-label-collapsed="Show more pictures" data-label-expanded="Show less pictures"
+                                aria-expanded="false" aria-controls="morePictures" aria-label="Show / hide pictures">
+                                <i class="collapse-toggle-icon ci-chevron-down fs-lg ms-2 me-n2"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+
+                <!-- Product details and options -->
+                <div class="col-md-5 col-xl-4">
+                    <div class="d-none d-md-block" style="margin-top: -90px"></div>
+                    <div class="sticky-md-top ps-md-2 ps-xl-4">
+                        <div class="d-none d-md-block" style="padding-top: 90px"></div>
+                        <div class="fs-xs text-body-secondary mb-3">V00273124</div>
+                        <h1 class="fs-xl fw-medium">Chair with wooden legs 60x100 cm</h1>
+                        <div class="h4 fw-bold mb-4">$357.00 <del class="fs-sm fw-normal text-body-tertiary">$416.00</del>
+                        </div>
+                        <ul class="list-unstyled fs-sm text-body-emphasis mb-4">
+                            <li>
+                                <span class="me-1">Pay 4 interest-free payments of <span
+                                        class="fw-semibold">$89.00</span> with</span>
+                                <a class="d-inline-block" href="#!" aria-label="Afterpay">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="80" viewBox="0 0 360 129.6">
+                                        <path
+                                            d="M297.4 127.4H62.7C28 127.4 0 99.4 0 64.8h0C0 30.2 28 2.1 62.7 2.1h234.7c34.6 0 62.6 28 62.6 62.6h0c0 34.7-28 62.7-62.6 62.7z"
+                                            fill="#b2fce4" />
+                                        <path
+                                            d="M306.8 49.8l-7.9-4.5-8-4.6c-5.3-3-11.9.8-11.9 6.9v1c0 .6.3 1.1.8 1.4l3.7 2.1c1 .6 2.3-.2 2.3-1.3v-2.4c0-1.2 1.3-2 2.3-1.4l7.3 4.2 7.3 4.2c1.1.6 1.1 2.1 0 2.7l-7.3 4.2-7.3 4.2c-1 .6-2.3-.2-2.3-1.4v-1.2c0-6.1-6.6-9.9-11.9-6.9l-8 4.6-7.9 4.5c-5.3 3-5.3 10.7 0 13.8l7.9 4.5 8 4.6c5.3 3 11.9-.8 11.9-6.9v-1c0-.6-.3-1.1-.8-1.4l-3.7-2.1c-1-.6-2.3.2-2.3 1.3v2.4c0 1.2-1.3 2-2.3 1.4l-7.3-4.2-7.3-4.2c-1.1-.6-1.1-2.1 0-2.7l7.3-4.2 7.3-4.2c1-.6 2.3.2 2.3 1.4v1.2c0 6.1 6.6 9.9 11.9 6.9l8-4.6 7.9-4.5c5.4-3.1 5.4-10.7 0-13.8zm-51.6 1.5l-18.5 38.1H229l6.9-14.2-10.8-23.9h7.9l7 16 7.6-16h7.6zM70.8 64.9c0-4.5-3.3-7.7-7.4-7.7S56 60.4 56 64.9c0 4.4 3.3 7.7 7.4 7.7s7.4-3.2 7.4-7.7m.1 13.5v-3.5c-2 2.4-5 3.9-8.5 3.9-7.4 0-13-5.9-13-14 0-8 5.8-14 13.2-14 3.5 0 6.4 1.5 8.4 3.9v-3.4h6.7v27h-6.8zm38.9-6c-2.3 0-3-.9-3-3.1v-12h4.3v-5.9h-4.3v-6.6H100v6.6h-8.8v-2.7c0-2.3.9-3.1 3.2-3.1H96v-5.2h-3.3c-5.6 0-8.3 1.8-8.3 7.5v3.6h-3.8v5.9h3.8v21.1h6.8V57.2h8.8v13.3c0 5.5 2.1 7.9 7.6 7.9h3.5v-6h-1.3zm24.5-10c-.5-3.5-3.4-5.6-6.7-5.6-3.4 0-6.1 2.1-6.8 5.6h13.5zm-13.6 4.2c.5 4 3.4 6.3 7 6.3 2.9 0 5.1-1.4 6.4-3.5h7c-1.6 5.7-6.8 9.4-13.5 9.4-8.2 0-13.9-5.7-13.9-13.9s6.1-14.1 14.1-14.1c8.1 0 13.9 5.9 13.9 14.1 0 .6-.1 1.2-.2 1.7h-20.8zm64.2-1.7c0-4.4-3.3-7.7-7.4-7.7s-7.4 3.2-7.4 7.7c0 4.4 3.3 7.7 7.4 7.7s7.4-3.4 7.4-7.7m-21.4 24.5V51.3h6.7v3.5c2-2.5 5-4 8.5-4 7.3 0 13 6 13 14s-5.8 14-13.2 14c-3.4 0-6.2-1.4-8.2-3.6v14.2h-6.8zm52.2-24.5c0-4.5-3.3-7.7-7.4-7.7s-7.4 3.2-7.4 7.7c0 4.4 3.3 7.7 7.4 7.7s7.4-3.2 7.4-7.7m.1 13.5v-3.5c-2 2.4-5 3.9-8.5 3.9-7.4 0-13-5.9-13-14 0-8 5.8-14 13.2-14 3.5 0 6.4 1.5 8.4 3.9v-3.4h6.7v27h-6.8zM151.5 54s1.7-3.1 5.8-3.1c1.8 0 2.9.6 2.9.6v6.9s-2.5-1.5-4.8-1.2-3.8 2.4-3.7 5.2v16h-6.9v-27h6.7V54z" />
+                                    </svg>
+                                </a>
+                            </li>
+                            <li>
+                                <span class="me-1">We provide a <span class="fw-semibold">3-year warranty</span></span>
+                                <svg class="text-body-emphasis" xmlns="http://www.w3.org/2000/svg" width="24"
+                                    height="24" fill="currentColor">
+                                    <path fill-rule="evenodd"
+                                        d="M22.287 10.967l-1.7-2c-.215-.254-.346-.568-.373-.9L20 5.46c-.029-.379-.193-.734-.462-1.002s-.625-.43-1.004-.458l-2.607-.213c-.332-.027-.646-.158-.9-.373l-2-1.7c-.288-.247-.654-.383-1.033-.383s-.746.136-1.033.383l-2 1.7c-.254.215-.568.346-.9.373L5.467 4c-.38.028-.737.191-1.006.461s-.433.626-.46 1.006l-.213 2.607c-.027.332-.158.646-.373.9l-1.7 2c-.247.288-.383.654-.383 1.033s.136.746.383 1.033l1.7 2c.215.254.346.568.373.9L4 18.547c.031.377.196.731.465.998s.624.428 1.002.456l2.607.213c.332.027.646.158.9.373l2 1.7c.288.247.654.383 1.033.383s.746-.136 1.033-.383l2-1.7c.254-.215.568-.346.9-.373L18.534 20c.38-.028.737-.191 1.006-.46s.433-.626.46-1.006l.213-2.607c.027-.332.158-.646.373-.9l1.7-2c.245-.287.38-.652.38-1.03s-.135-.743-.38-1.03zm-11.08 4.153l-2.96-2.96 1.127-1.127 1.833 1.827 3.42-3.42 1.127 1.127-4.547 4.553z" />
+                                </svg>
+                            </li>
+                        </ul>
+
+                        <!-- Color options -->
+                        <div class="mb-4">
+                            <label class="form-label fw-semibold pb-1 mb-2">Color: <span class="text-body fw-normal"
+                                    id="colorOption">Viridian</span></label>
+                            <div class="d-flex flex-wrap gap-2" data-binded-label="#colorOption">
+                                <input type="radio" class="btn-check" name="colors" id="viridian" checked>
+                                <label for="viridian" class="btn btn-image p-0" data-label="Viridian">
+                                    <img src="/img/shop/furniture/product/colors/color01.png" width="56"
+                                        alt="Viridian color">
+                                    <span class="visually-hidden">Viridian</span>
+                                </label>
+                                <input type="radio" class="btn-check" name="colors" id="green">
+                                <label for="green" class="btn btn-image p-0" data-label="Green">
+                                    <img src="/img/shop/furniture/product/colors/color02.png" width="56"
+                                        alt="Green color">
+                                    <span class="visually-hidden">Green</span>
+                                </label>
+                                <input type="radio" class="btn-check" name="colors" id="blue">
+                                <label for="blue" class="btn btn-image p-0" data-label="Blue">
+                                    <img src="/img/shop/furniture/product/colors/color03.png" width="56"
+                                        alt="Blue color">
+                                    <span class="visually-hidden">Blue</span>
+                                </label>
+                            </div>
+                        </div>
+
+                        <!-- Material select -->
+                        <div class="mb-4">
+                            <label class="form-label fw-semibold pb-1 mb-2">Material of the cover:</label>
+                            <select class="form-select form-select-lg rounded-pill"
+                                data-select='{
+                  "classNames": {
+                    "containerInner": ["form-select", "form-select-lg", "rounded-pill"]
+                  }
+                }'
+                                aria-label="Material select">
+                                <option value="">Choose a material</option>
+                                <option value="natural">Natural fabric</option>
+                                <option value="synthetic">Synthetic fabric</option>
+                                <option value="leather">Leather</option>
+                                <option value="cotton">Cotton</option>
+                            </select>
+                        </div>
+
+                        <!-- Add to cart + Wishlist buttons -->
+                        <div class="d-flex gap-3 pb-4 mb-2 mb-lg-3">
+                            <button type="button" class="btn btn-lg btn-dark w-100 rounded-pill">Add to cart</button>
+                            <button type="button" class="btn btn-icon btn-lg btn-secondary rounded-circle animate-pulse"
+                                aria-label="Add to Wishlist">
+                                <i class="ci-heart fs-lg animate-target"></i>
+                            </button>
+                        </div>
+
+                        <!-- Shipping info -->
+                        <div class="mb-4">
+                            <h6 class="d-flex align-items-center fs-sm mb-2">
+                                <i class="ci-delivery fs-lg me-2"></i>
+                                Free shipping
+                            </h6>
+                            <div class="fs-sm">
+                                <span class="me-1">Get it between May 24 - May 27 to</span>
+                                <div class="dropdown d-inline-block">
+                                    <a class="dropdown-toggle animate-underline fs-sm fw-semibold text-body-emphasis text-decoration-none"
+                                        href="#!" data-bs-toggle="dropdown" aria-haspopup="true"
+                                        aria-expanded="false">
+                                        <span class="animate-target">Preston - 06365</span>
+                                    </a>
+                                    <div class="dropdown-menu dropdown-menu-end text-body p-3">
+                                        Blackpool Road, 15<br>06365, Preston, UK
+                                        <div class="h6 fs-sm pt-1 mb-0">Susan Gardner</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Contact -->
+                        <div class="d-flex align-items-center justify-content-between bg-body-tertiary rounded p-3">
+                            <div class="me-3">
+                                <h6 class="fs-sm mb-1">Have a question?</h6>
+                                <p class="fs-sm mb-0">Contact us if you have questions</p>
+                            </div>
+                            <a class="btn btn-sm btn-outline-dark rounded-pill" href="{{ route('second', ['contact', 'v2']) }}">Contact us</a>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+
+            <!-- Sticky product preview + Add to cart CTA -->
+            <section class="sticky-product-banner sticky-top" data-sticky-element>
+                <div class="sticky-product-banner-inner pt-5">
+                    <div class="navbar flex-nowrap align-items-center bg-body pt-4 pb-2">
+                        <div class="d-flex align-items-center min-w-0 ms-lg-2 me-3">
+                            <div class="ratio ratio-1x1 flex-shrink-0" style="width: 50px">
+                                <img src="/img/shop/furniture/product/thumb.png" alt="Image">
+                            </div>
+                            <h4 class="h6 fw-medium d-none d-lg-block ps-3 mb-0">Chair with wooden legs 60x100 cm</h4>
+                            <div class="w-100 min-w-0 d-lg-none ps-2">
+                                <h4 class="fs-sm fw-medium text-truncate mb-1">Chair with wooden legs 60x100 cm</h4>
+                                <div class="h6 mb-0">$357.00 <del class="fs-xs fw-normal text-body-tertiary">$416.00</del>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="h4 d-none d-lg-block mb-0 ms-auto me-4">$357.00 <del
+                                class="fs-sm fw-normal text-body-tertiary">$416.00</del></div>
+                        <div class="d-flex gap-2">
+                            <button type="button" class="btn btn-icon btn-secondary rounded-circle animate-pulse"
+                                aria-label="Add to Wishlist">
+                                <i class="ci-heart fs-base animate-target"></i>
+                            </button>
+                            <button type="button"
+                                class="btn btn-dark rounded-pill ms-auto d-none d-md-inline-flex px-4">Add to cart</button>
+                            <button type="button"
+                                class="btn btn-icon btn-dark rounded-circle animate-slide-end ms-auto d-md-none"
+                                aria-label="Add to Cart">
+                                <i class="ci-shopping-cart fs-base animate-target"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+
+            <!-- Product description -->
+            <section class="row pb-5 mb-2 mb-sm-3 mb-lg-4 mb-xl-5">
+                <div class="col-md-7 col-xl-8 mb-xxl-3">
+                    <p>The chair will bring a stylish retro atmosphere to your room, inspired by the Scandinavian design.
+                        The classic look fits anywhere in your home and provides a sturdy and durable place to sit for years
+                        to come.</p>
+                    <ul class="list-unstyled pb-md-2 pb-lg-3">
+                        <li class="mt-1"><span class="h6 mb-0">Backrest height:</span> 46 cm</li>
+                        <li class="mt-1"><span class="h6 mb-0">Width:</span> 64 cm</li>
+                        <li class="mt-1"><span class="h6 mb-0">Depth:</span> 78 cm</li>
+                        <li class="mt-1"><span class="h6 mb-0">Height under furniture:</span> 22 cm</li>
+                        <li class="mt-1"><span class="h6 mb-0">Seat width:</span> 56 cm</li>
+                        <li class="mt-1"><span class="h6 mb-0">Armrest height:</span> 63 cm</li>
+                    </ul>
+
+                    <div class="accordion accordion-alt-icon" id="productAccordion">
+                        <div class="accordion-item">
+                            <h3 class="accordion-header" id="headingProductInfo">
+                                <button type="button" class="accordion-button animate-underline fs-xl collapsed"
+                                    data-bs-toggle="collapse" data-bs-target="#productInfo" aria-expanded="false"
+                                    aria-controls="productInfo">
+                                    <span class="animate-target me-2">Product info</span>
+                                </button>
+                            </h3>
+                            <div class="accordion-collapse collapse" id="productInfo"
+                                aria-labelledby="headingProductInfo" data-bs-parent="#productAccordion">
+                                <div class="accordion-body fs-base">Introducing our Scandinavian-inspired chair,
+                                    meticulously designed to infuse your living space with a touch of retro elegance.
+                                    Crafted with the finest materials and attention to detail, this chair embodies the
+                                    timeless charm of Scandinavian design, making it a versatile addition to any home decor.
+                                    With its classic silhouette and understated sophistication, it seamlessly integrates
+                                    into various interior styles, bringing both style and functionality to your room.</div>
+                            </div>
+                        </div>
+                        <div class="accordion-item">
+                            <h3 class="accordion-header" id="headingProductFeatures">
+                                <button type="button" class="accordion-button animate-underline fs-xl collapsed"
+                                    data-bs-toggle="collapse" data-bs-target="#productFeatures" aria-expanded="false"
+                                    aria-controls="productFeatures">
+                                    <span class="animate-target me-2">Features</span>
+                                </button>
+                            </h3>
+                            <div class="accordion-collapse collapse" id="productFeatures"
+                                aria-labelledby="headingProductFeatures" data-bs-parent="#productAccordion">
+                                <div class="accordion-body fs-base">
+                                    <ul class="m-0">
+                                        <li><span class="text-body-emphasis fw-semibold">Timeless design:</span> Inspired
+                                            by Scandinavian aesthetics, this chair boasts a sleek and retro-inspired
+                                            silhouette that adds a touch of elegance to any space.</li>
+                                        <li><span class="text-body-emphasis fw-semibold">Durable construction:</span>
+                                            Crafted with high-quality materials, the chair is built to last, providing
+                                            sturdy and reliable seating for years to come.</li>
+                                        <li><span class="text-body-emphasis fw-semibold">Versatile placement:</span>
+                                            Whether as a focal point in your living room, a cozy reading corner in your
+                                            study, or an inviting seat around the dining table, this chair effortlessly
+                                            adapts to different settings.</li>
+                                        <li><span class="text-body-emphasis fw-semibold">Comfortable seating:</span> The
+                                            chair features a well-padded seat and backrest, ensuring optimal comfort for
+                                            extended periods of relaxation or conversation.</li>
+                                        <li><span class="text-body-emphasis fw-semibold">Easy maintenance:</span> Designed
+                                            for convenience, the chair's upholstery is easy to clean, allowing for
+                                            hassle-free maintenance and care.</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="accordion-item">
+                            <h3 class="accordion-header" id="headingProductWarranty">
+                                <button type="button" class="accordion-button animate-underline fs-xl collapsed"
+                                    data-bs-toggle="collapse" data-bs-target="#productWarranty" aria-expanded="false"
+                                    aria-controls="productWarranty">
+                                    <span class="animate-target me-2">Warranty information</span>
+                                </button>
+                            </h3>
+                            <div class="accordion-collapse collapse" id="productWarranty"
+                                aria-labelledby="headingProductWarranty" data-bs-parent="#productAccordion">
+                                <div class="accordion-body fs-base">We stand behind the quality of our products. Our chair
+                                    comes with a 10-year warranty, guaranteeing against defects in materials and workmanship
+                                    under normal use. In the unlikely event that you encounter any issues with your chair,
+                                    contact our customer service team, and we will be happy to assist you with a replacement
+                                    or repair.</div>
+                            </div>
+                        </div>
+                        <div class="accordion-item">
+                            <h3 class="accordion-header" id="headingProductDelivery">
+                                <button type="button" class="accordion-button animate-underline fs-xl collapsed"
+                                    data-bs-toggle="collapse" data-bs-target="#productDelivery" aria-expanded="false"
+                                    aria-controls="productDelivery">
+                                    <span class="animate-target me-2">Delivery and shipping</span>
+                                </button>
+                            </h3>
+                            <div class="accordion-collapse collapse" id="productDelivery"
+                                aria-labelledby="headingProductDelivery" data-bs-parent="#productAccordion">
+                                <div class="accordion-body fs-base">We understand the importance of timely delivery and
+                                    strive to provide a seamless shipping experience for our customers. Upon placing your
+                                    order, our team will process it promptly, and you will receive a notification once your
+                                    chair is ready for shipment. We offer various shipping options to accommodate your
+                                    preferences, with estimated delivery times provided at checkout. Rest assured, your
+                                    chair will be carefully packaged to ensure it arrives safely at your doorstep, ready to
+                                    enhance your home with its timeless charm.</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+
+            <!-- Popular products carousel -->
+            <section class="pb-5 mb-1 mb-sm-3 mb-lg-4 mb-xl-5">
+                <h2 class="h3 pb-2 pb-sm-3">Popular products</h2>
+                <div class="position-relative pb-xxl-3">
+
+                    <!-- External slider prev/next buttons visible on screens > 500px wide (sm breakpoint) -->
+                    <button type="button"
+                        class="popular-prev btn btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-start position-absolute top-50 start-0 z-2 translate-middle mt-n5 d-none d-sm-inline-flex"
+                        aria-label="Prev">
+                        <i class="ci-chevron-left fs-lg animate-target"></i>
+                    </button>
+                    <button type="button"
+                        class="popular-next btn btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-end position-absolute top-50 start-100 z-2 translate-middle mt-n5 d-none d-sm-inline-flex"
+                        aria-label="Next">
+                        <i class="ci-chevron-right fs-lg animate-target"></i>
+                    </button>
+
+                    <!-- Slider -->
+                    <div class="swiper"
+                        data-swiper='{
+              "slidesPerView": 2,
+              "spaceBetween": 24,
+              "loop": true,
+              "navigation": {
+                "prevEl": ".popular-prev",
+                "nextEl": ".popular-next"
+              },
+              "breakpoints": {
+                "768": {
+                  "slidesPerView": 3
+                },
+                "992": {
+                  "slidesPerView": 4
+                }
+              }
+            }'>
+                        <div class="swiper-wrapper">
+
+                            <!-- Item -->
+                            <div class="swiper-slide">
+                                <div class="animate-underline">
+                                    <a class="hover-effect-opacity ratio ratio-1x1 d-block mb-3"
+                                        href="{{ route('second', ['shop', 'product-furniture']) }}">
+                                        <img src="/img/shop/furniture/04.png" class="hover-effect-target opacity-100"
+                                            alt="Product">
+                                        <img src="/img/shop/furniture/04-hover.jpg"
+                                            class="position-absolute top-0 start-0 hover-effect-target opacity-0 rounded-4"
+                                            alt="Room">
+                                    </a>
+                                    <div class="d-flex gap-2 mb-3">
+                                        <input type="radio" class="btn-check" name="colors-4" id="color-4-1" checked>
+                                        <label for="color-4-1" class="btn btn-color fs-base" style="color: #384043">
+                                            <span class="visually-hidden">Dark gray</span>
+                                        </label>
+                                        <input type="radio" class="btn-check" name="colors-4" id="color-4-2">
+                                        <label for="color-4-2" class="btn btn-color fs-base" style="color: #bdc5da">
+                                            <span class="visually-hidden">Light gray</span>
+                                        </label>
+                                        <input type="radio" class="btn-check" name="colors-4" id="color-4-3">
+                                        <label for="color-4-3" class="btn btn-color fs-base" style="color: #526f99">
+                                            <span class="visually-hidden">Bluish gray</span>
+                                        </label>
+                                    </div>
+                                    <h3 class="mb-2">
+                                        <a class="d-block fs-sm fw-medium text-truncate"
+                                            href="{{ route('second', ['shop', 'product-furniture']) }}">
+                                            <span class="animate-target">Bed frame light gray 140x200 cm</span>
+                                        </a>
+                                    </h3>
+                                    <div class="h6">$760.00</div>
+                                    <div class="d-flex gap-2">
+                                        <button type="button" class="btn btn-dark w-100 rounded-pill px-3">Add to
+                                            cart</button>
+                                        <button type="button"
+                                            class="btn btn-icon btn-secondary rounded-circle animate-pulse"
+                                            aria-label="Add to wishlist">
+                                            <i class="ci-heart fs-base animate-target"></i>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Item -->
+                            <div class="swiper-slide">
+                                <div class="animate-underline">
+                                    <a class="hover-effect-opacity ratio ratio-1x1 d-block mb-3"
+                                        href="{{ route('second', ['shop', 'product-furniture']) }}">
+                                        <img src="/img/shop/furniture/05.png" class="hover-effect-target opacity-100"
+                                            alt="Product">
+                                        <img src="/img/shop/furniture/05-hover.jpg"
+                                            class="position-absolute top-0 start-0 hover-effect-target opacity-0 rounded-4"
+                                            alt="Room">
+                                    </a>
+                                    <div class="d-flex gap-2 mb-3">
+                                        <input type="radio" class="btn-check" name="colors-5" id="color-5-1" checked>
+                                        <label for="color-5-1" class="btn btn-color fs-base" style="color: #3a94b5">
+                                            <span class="visually-hidden">Blue</span>
+                                        </label>
+                                        <input type="radio" class="btn-check" name="colors-5" id="color-5-2">
+                                        <label for="color-5-2" class="btn btn-color fs-base" style="color: #777d7E">
+                                            <span class="visually-hidden">Gray</span>
+                                        </label>
+                                    </div>
+                                    <h3 class="mb-2">
+                                        <a class="d-block fs-sm fw-medium text-truncate"
+                                            href="{{ route('second', ['shop', 'product-furniture']) }}">
+                                            <span class="animate-target">Blue armchair with iron legs</span>
+                                        </a>
+                                    </h3>
+                                    <div class="h6">$220.00</div>
+                                    <div class="d-flex gap-2">
+                                        <button type="button" class="btn btn-dark w-100 rounded-pill px-3">Add to
+                                            cart</button>
+                                        <button type="button"
+                                            class="btn btn-icon btn-secondary rounded-circle animate-pulse"
+                                            aria-label="Add to wishlist">
+                                            <i class="ci-heart fs-base animate-target"></i>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Item -->
+                            <div class="swiper-slide">
+                                <div class="animate-underline">
+                                    <a class="hover-effect-opacity ratio ratio-1x1 d-block mb-3"
+                                        href="{{ route('second', ['shop', 'product-furniture']) }}">
+                                        <div class="position-absolute top-0 start-0 z-2 mt-2 mt-sm-3 ms-2 ms-sm-3">
+                                            <span class="badge text-bg-danger">-13%</span>
+                                        </div>
+                                        <img src="/img/shop/furniture/06.png" class="hover-effect-target opacity-100"
+                                            alt="Product">
+                                        <img src="/img/shop/furniture/06-hover.jpg"
+                                            class="position-absolute top-0 start-0 hover-effect-target opacity-0 rounded-4"
+                                            alt="Room">
+                                    </a>
+                                    <div class="d-flex gap-2 mb-3">
+                                        <input type="radio" class="btn-check" name="colors-6" id="color-6-1" checked>
+                                        <label for="color-6-1" class="btn btn-color fs-base" style="color: #bdaB9e">
+                                            <span class="visually-hidden">Beige</span>
+                                        </label>
+                                        <input type="radio" class="btn-check" name="colors-6" id="color-6-2">
+                                        <label for="color-6-2" class="btn btn-color fs-base" style="color: #d65c46">
+                                            <span class="visually-hidden">Terracotta</span>
+                                        </label>
+                                        <input type="radio" class="btn-check" name="colors-6" id="color-6-3">
+                                        <label for="color-6-3" class="btn btn-color fs-base" style="color: #e0e5eb">
+                                            <span class="visually-hidden">White</span>
+                                        </label>
+                                    </div>
+                                    <h3 class="mb-2">
+                                        <a class="d-block fs-sm fw-medium text-truncate"
+                                            href="{{ route('second', ['shop', 'product-furniture']) }}">
+                                            <span class="animate-target">Loft-style lamp 120x80 cm</span>
+                                        </a>
+                                    </h3>
+                                    <div class="h6">$140.00 <del
+                                            class="fs-sm fw-normal text-body-tertiary">$160.00</del></div>
+                                    <div class="d-flex gap-2">
+                                        <button type="button" class="btn btn-dark w-100 rounded-pill px-3">Add to
+                                            cart</button>
+                                        <button type="button"
+                                            class="btn btn-icon btn-secondary rounded-circle animate-pulse"
+                                            aria-label="Add to wishlist">
+                                            <i class="ci-heart fs-base animate-target"></i>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Item -->
+                            <div class="swiper-slide">
+                                <div class="animate-underline">
+                                    <a class="hover-effect-opacity ratio ratio-1x1 d-block mb-3"
+                                        href="{{ route('second', ['shop', 'product-furniture']) }}">
+                                        <img src="/img/shop/furniture/08.png" class="hover-effect-target opacity-100"
+                                            alt="Product">
+                                        <img src="/img/shop/furniture/08-hover.jpg"
+                                            class="position-absolute top-0 start-0 hover-effect-target opacity-0 rounded-4"
+                                            alt="Room">
+                                    </a>
+                                    <div class="d-flex gap-2 mb-3">
+                                        <input type="radio" class="btn-check" name="colors-8" id="color-8-1"
+                                            checked>
+                                        <label for="color-8-1" class="btn btn-color fs-base" style="color: #305853">
+                                            <span class="visually-hidden">Green</span>
+                                        </label>
+                                        <input type="radio" class="btn-check" name="colors-8" id="color-8-2">
+                                        <label for="color-8-2" class="btn btn-color fs-base" style="color: #34598f">
+                                            <span class="visually-hidden">Blue</span>
+                                        </label>
+                                    </div>
+                                    <h3 class="mb-2">
+                                        <a class="d-block fs-sm fw-medium text-truncate"
+                                            href="{{ route('second', ['shop', 'product-furniture']) }}">
+                                            <span class="animate-target">Armchair with wooden legs 60x100 cm</span>
+                                        </a>
+                                    </h3>
+                                    <div class="h6">$320.50</div>
+                                    <div class="d-flex gap-2">
+                                        <button type="button" class="btn btn-dark w-100 rounded-pill px-3">Add to
+                                            cart</button>
+                                        <button type="button"
+                                            class="btn btn-icon btn-secondary rounded-circle animate-pulse"
+                                            aria-label="Add to wishlist">
+                                            <i class="ci-heart fs-base animate-target"></i>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Item -->
+                            <div class="swiper-slide">
+                                <div class="animate-underline">
+                                    <a class="hover-effect-opacity ratio ratio-1x1 d-block mb-3"
+                                        href="{{ route('second', ['shop', 'product-furniture']) }}">
+                                        <img src="/img/shop/furniture/02.png" class="hover-effect-target opacity-100"
+                                            alt="Product">
+                                        <img src="/img/shop/furniture/02-hover.jpg"
+                                            class="position-absolute top-0 start-0 hover-effect-target opacity-0 rounded-4"
+                                            alt="Room">
+                                    </a>
+                                    <div class="d-flex gap-2 mb-3">
+                                        <input type="radio" class="btn-check" name="colors-2" id="color-2-1"
+                                            checked>
+                                        <label for="color-2-1" class="btn btn-color fs-base" style="color: #6a6f7b">
+                                            <span class="visually-hidden">Gray</span>
+                                        </label>
+                                        <input type="radio" class="btn-check" name="colors-2" id="color-2-2">
+                                        <label for="color-2-2" class="btn btn-color fs-base" style="color: #373b42">
+                                            <span class="visually-hidden">Dark gray</span>
+                                        </label>
+                                        <input type="radio" class="btn-check" name="colors-2" id="color-2-3">
+                                        <label for="color-2-3" class="btn btn-color fs-base" style="color: #216aae">
+                                            <span class="visually-hidden">Blue</span>
+                                        </label>
+                                        <input type="radio" class="btn-check" name="colors-2" id="color-2-4">
+                                        <label for="color-2-4" class="btn btn-color fs-base" style="color: #187c1c">
+                                            <span class="visually-hidden">Green</span>
+                                        </label>
+                                    </div>
+                                    <h3 class="mb-2">
+                                        <a class="d-block fs-sm fw-medium text-truncate"
+                                            href="{{ route('second', ['shop', 'product-furniture']) }}">
+                                            <span class="animate-target">Decorative flowerpot with a plant</span>
+                                        </a>
+                                    </h3>
+                                    <div class="h6">$107.50</div>
+                                    <div class="d-flex gap-2">
+                                        <button type="button" class="btn btn-dark w-100 rounded-pill px-3">Add to
+                                            cart</button>
+                                        <button type="button"
+                                            class="btn btn-icon btn-secondary rounded-circle animate-pulse"
+                                            aria-label="Add to wishlist">
+                                            <i class="ci-heart fs-base animate-target"></i>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Item -->
+                            <div class="swiper-slide">
+                                <div class="animate-underline">
+                                    <a class="hover-effect-opacity ratio ratio-1x1 d-block mb-3"
+                                        href="{{ route('second', ['shop', 'product-furniture']) }}">
+                                        <img src="/img/shop/furniture/07.png" class="hover-effect-target opacity-100"
+                                            alt="Product">
+                                        <img src="/img/shop/furniture/07-hover.jpg"
+                                            class="position-absolute top-0 start-0 hover-effect-target opacity-0 rounded-4"
+                                            alt="Room">
+                                    </a>
+                                    <div class="d-flex gap-2 mb-3">
+                                        <input type="radio" class="btn-check" name="colors-7" id="color-7-1"
+                                            checked>
+                                        <label for="color-7-1" class="btn btn-color fs-base" style="color: #71706c">
+                                            <span class="visually-hidden">Dark gray</span>
+                                        </label>
+                                        <input type="radio" class="btn-check" name="colors-7" id="color-7-2">
+                                        <label for="color-7-2" class="btn btn-color fs-base" style="color: #c1c3b8">
+                                            <span class="visually-hidden">Light gray</span>
+                                        </label>
+                                    </div>
+                                    <h3 class="mb-2">
+                                        <a class="d-block fs-sm fw-medium text-truncate"
+                                            href="{{ route('second', ['shop', 'product-furniture']) }}">
+                                            <span class="animate-target">Chair with a cushion for the legs</span>
+                                        </a>
+                                    </h3>
+                                    <div class="h6">$435.00</div>
+                                    <div class="d-flex gap-2">
+                                        <button type="button" class="btn btn-dark w-100 rounded-pill px-3">Add to
+                                            cart</button>
+                                        <button type="button"
+                                            class="btn btn-icon btn-secondary rounded-circle animate-pulse"
+                                            aria-label="Add to wishlist">
+                                            <i class="ci-heart fs-base animate-target"></i>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- External slider prev/next buttons visible on screens < 500px wide (sm breakpoint) -->
+                <div class="d-flex justify-content-center gap-2 mt-1 pt-4 d-sm-none">
+                    <button type="button"
+                        class="popular-prev btn btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-start me-1"
+                        aria-label="Prev">
+                        <i class="ci-chevron-left fs-lg animate-target"></i>
+                    </button>
+                    <button type="button"
+                        class="popular-next btn btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-end"
+                        aria-label="Next">
+                        <i class="ci-chevron-right fs-lg animate-target"></i>
+                    </button>
+                </div>
+            </section>
+
+
+            <!-- Blog articles -->
+            <section class="pb-5 mb-2 mb-sm-3 mb-lg-4 mb-xl-5">
+                <h2 class="h3 pb-2 pb-sm-3">From the blog</h2>
+                <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 mb-xxl-3">
+
+                    <!-- Article -->
+                    <article class="col">
+                        <a class="ratio d-flex hover-effect-scale rounded-4 overflow-hidden" href="#!"
+                            style="--cz-aspect-ratio: calc(260 / 306 * 100%)">
+                            <img src="/img/blog/grid/v2/10.jpg" class="hover-effect-target" alt="Image">
+                        </a>
+                        <div class="pt-4">
+                            <div class="nav pb-2 mb-1">
+                                <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Furniture</a>
+                            </div>
+                            <h3 class="h6 mb-3">
+                                <a class="hover-effect-underline" href="#!">Furnishing your space: a guide to
+                                    choosing the perfect furniture pieces</a>
+                            </h3>
+                            <div class="nav align-items-center gap-2 fs-xs">
+                                <a class="nav-link text-body-secondary fs-xs fw-normal p-0" href="#!">Oliver
+                                    Harris</a>
+                                <hr class="vr my-1 mx-1">
+                                <span class="text-body-secondary">September 5, 2024</span>
+                            </div>
+                        </div>
+                    </article>
+
+                    <!-- Article -->
+                    <article class="col">
+                        <a class="ratio d-flex hover-effect-scale rounded-4 overflow-hidden" href="#!"
+                            style="--cz-aspect-ratio: calc(260 / 306 * 100%)">
+                            <img src="/img/blog/grid/v2/11.jpg" class="hover-effect-target" alt="Image">
+                        </a>
+                        <div class="pt-4">
+                            <div class="nav pb-2 mb-1">
+                                <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Interior
+                                    design</a>
+                            </div>
+                            <h3 class="h6 mb-3">
+                                <a class="hover-effect-underline" href="#!">Transform your living space with these
+                                    chic interior design tips</a>
+                            </h3>
+                            <div class="nav align-items-center gap-2 fs-xs">
+                                <a class="nav-link text-body-secondary fs-xs fw-normal p-0" href="#!">Ethan
+                                    Miller</a>
+                                <hr class="vr my-1 mx-1">
+                                <span class="text-body-secondary">August 23, 2024</span>
+                            </div>
+                        </div>
+                    </article>
+
+                    <!-- Article -->
+                    <article class="col">
+                        <a class="ratio d-flex hover-effect-scale rounded-4 overflow-hidden" href="#!"
+                            style="--cz-aspect-ratio: calc(260 / 306 * 100%)">
+                            <img src="/img/blog/grid/v2/13.jpg" class="hover-effect-target" alt="Image">
+                        </a>
+                        <div class="pt-4">
+                            <div class="nav pb-2 mb-1">
+                                <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Home
+                                    decoration</a>
+                            </div>
+                            <h3 class="h6 mb-3">
+                                <a class="hover-effect-underline" href="#!">Elevate your space with trendy home
+                                    decoration ideas</a>
+                            </h3>
+                            <div class="nav align-items-center gap-2 fs-xs">
+                                <a class="nav-link text-body-secondary fs-xs fw-normal p-0" href="#!">Olivia
+                                    Anderson</a>
+                                <hr class="vr my-1 mx-1">
+                                <span class="text-body-secondary">August 9, 2024</span>
+                            </div>
+                        </div>
+                    </article>
+                </div>
+            </section>
+
+
+            <!-- Reviews -->
+            <section class="pb-5 mb-2 mb-sm-3 mb-lg-4 mb-xl-5">
+
+                <!-- Heading + Add review button -->
+                <div class="d-sm-flex align-items-center justify-content-between border-bottom pb-2 pb-sm-3">
+                    <div class="mb-3 me-sm-3">
+                        <h2 class="h3 pb-2 mb-1">Customer reviews</h2>
+                        <div class="d-flex align-items-center fs-sm">
+                            <div class="d-flex gap-1 me-2">
+                                <i class="ci-star-filled text-body-emphasis"></i>
+                                <i class="ci-star-filled text-body-emphasis"></i>
+                                <i class="ci-star-filled text-body-emphasis"></i>
+                                <i class="ci-star-filled text-body-emphasis"></i>
+                                <i class="ci-star text-body-tertiary opacity-75"></i>
+                            </div>
+                            Based on 6 reviews
+                        </div>
+                    </div>
+                    <button type="button" class="btn btn-lg btn-outline-dark rounded-pill mb-3"
+                        data-bs-toggle="modal" data-bs-target="#reviewForm">Leave a review</button>
+                </div>
+
+                <!-- Review -->
+                <div class="border-bottom py-4">
+                    <div class="row py-sm-2">
+                        <div class="col-md-4 col-lg-3 mb-3 mb-md-0">
+                            <div class="d-flex h6 mb-2">
+                                Rafael Marquez
+                                <i class="ci-check-circle text-success mt-1 ms-2" data-bs-toggle="tooltip"
+                                    data-bs-custom-class="tooltip-sm" title="Verified customer"></i>
+                            </div>
+                            <div class="fs-sm mb-2 mb-md-3">June 25, 2024</div>
+                            <div class="d-flex gap-1 fs-sm">
+                                <i class="ci-star-filled text-body-emphasis"></i>
+                                <i class="ci-star-filled text-body-emphasis"></i>
+                                <i class="ci-star-filled text-body-emphasis"></i>
+                                <i class="ci-star-filled text-body-emphasis"></i>
+                                <i class="ci-star-filled text-body-emphasis"></i>
+                            </div>
+                        </div>
+                        <div class="col-md-8 col-lg-9">
+                            <p class="mb-md-4">Absolutely love this chair! It's exactly what I was looking for to complete
+                                my Scandinavian-themed living room. The wooden legs add a touch of warmth and the design is
+                                timeless. Comfortable and sturdy, couldn't be happier with my purchase!</p>
+                            <div class="d-sm-flex justify-content-between">
+                                <div
+                                    class="d-flex align-items-center fs-sm fw-medium text-dark-emphasis pb-2 pb-sm-0 mb-1 mb-sm-0">
+                                    <i class="ci-check fs-base me-1" style="margin-top: .125rem"></i>
+                                    Yes, I recommend this product
+                                </div>
+                                <div class="d-flex align-items-center gap-2">
+                                    <div class="fs-sm fw-medium text-dark-emphasis me-1">Helpful?</div>
+                                    <button type="button" class="btn btn-sm btn-secondary">
+                                        <i class="ci-thumbs-up fs-sm ms-n1 me-1"></i>
+                                        0
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Review -->
+                <div class="border-bottom py-4">
+                    <div class="row py-sm-2">
+                        <div class="col-md-4 col-lg-3 mb-3 mb-md-0">
+                            <div class="d-flex h6 mb-2">
+                                Bessie Cooper
+                                <i class="ci-check-circle text-success mt-1 ms-2" data-bs-toggle="tooltip"
+                                    data-bs-custom-class="tooltip-sm" title="Verified customer"></i>
+                            </div>
+                            <div class="fs-sm mb-2 mb-md-3">April 8, 2024</div>
+                            <div class="d-flex gap-1 fs-sm">
+                                <i class="ci-star-filled text-body-emphasis"></i>
+                                <i class="ci-star-filled text-body-emphasis"></i>
+                                <i class="ci-star text-body-tertiary opacity-75"></i>
+                                <i class="ci-star text-body-tertiary opacity-75"></i>
+                                <i class="ci-star text-body-tertiary opacity-75"></i>
+                            </div>
+                        </div>
+                        <div class="col-md-8 col-lg-9">
+                            <p class="mb-md-4">While the design of the chair is nice and it does add a touch of retro vibe
+                                to my space, I found the quality to be lacking. After just a few weeks of use, one of the
+                                legs started to wobble, and the seat isn't as comfortable as I had hoped. Disappointed with
+                                the durability. Additionally, the assembly process was a bit frustrating as some of the
+                                screws didn't align properly with the holes, requiring extra effort to secure them in place.
+                                Overall, while it looks good, I expected better quality for the price.</p>
+                            <div class="d-sm-flex justify-content-between">
+                                <div
+                                    class="d-flex align-items-center fs-sm fw-medium text-dark-emphasis pb-2 pb-sm-0 mb-1 mb-sm-0">
+                                    <i class="ci-close fs-base me-1" style="margin-top: .125rem"></i>
+                                    No, I don't recommend this product
+                                </div>
+                                <div class="d-flex align-items-center gap-2">
+                                    <div class="fs-sm fw-medium text-dark-emphasis me-1">Helpful?</div>
+                                    <button type="button" class="btn btn-sm btn-secondary">
+                                        <i class="ci-thumbs-up fs-sm ms-n1 me-1"></i>
+                                        3
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Review -->
+                <div class="border-bottom py-4">
+                    <div class="row py-sm-2">
+                        <div class="col-md-4 col-lg-3 mb-3 mb-md-0">
+                            <div class="d-flex h6 mb-2">Savannah Nguyen</div>
+                            <div class="fs-sm mb-2 mb-md-3">March 30, 2024</div>
+                            <div class="d-flex gap-1 fs-sm">
+                                <i class="ci-star-filled text-body-emphasis"></i>
+                                <i class="ci-star-filled text-body-emphasis"></i>
+                                <i class="ci-star-filled text-body-emphasis"></i>
+                                <i class="ci-star-filled text-body-emphasis"></i>
+                                <i class="ci-star text-body-tertiary opacity-75"></i>
+                            </div>
+                        </div>
+                        <div class="col-md-8 col-lg-9">
+                            <p class="mb-md-4">Great addition to our dining room! The chair looks fantastic and is quite
+                                comfortable for short sits. Assembly was a breeze, and the quality seems decent for the
+                                price. Overall, satisfied with the purchase.</p>
+                            <div class="d-sm-flex justify-content-between">
+                                <div
+                                    class="d-flex align-items-center fs-sm fw-medium text-dark-emphasis pb-2 pb-sm-0 mb-1 mb-sm-0">
+                                    <i class="ci-check fs-base me-1" style="margin-top: .125rem"></i>
+                                    Yes, I recommend this product
+                                </div>
+                                <div class="d-flex align-items-center gap-2">
+                                    <div class="fs-sm fw-medium text-dark-emphasis me-1">Helpful?</div>
+                                    <button type="button" class="btn btn-sm btn-secondary">
+                                        <i class="ci-thumbs-up fs-sm ms-n1 me-1"></i>
+                                        7
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- More reviews collaspe -->
+                <div class="collapse" id="moreReviews">
+
+                    <!-- Review -->
+                    <div class="border-bottom py-4">
+                        <div class="row py-sm-2">
+                            <div class="col-md-4 col-lg-3 mb-3 mb-md-0">
+                                <div class="d-flex h6 mb-2">Daniel Adams</div>
+                                <div class="fs-sm mb-2 mb-md-3">March 16, 2024</div>
+                                <div class="d-flex gap-1 fs-sm">
+                                    <i class="ci-star-filled text-body-emphasis"></i>
+                                    <i class="ci-star-filled text-body-emphasis"></i>
+                                    <i class="ci-star-filled text-body-emphasis"></i>
+                                    <i class="ci-star-filled text-body-emphasis"></i>
+                                    <i class="ci-star-filled text-body-emphasis"></i>
+                                </div>
+                            </div>
+                            <div class="col-md-8 col-lg-9">
+                                <p class="mb-md-4">Couldn't be happier with this chair! It's not only stylish but also
+                                    incredibly comfortable. The size is perfect for our space, and the wooden legs feel
+                                    sturdy. Definitely recommend it to anyone looking for a chic and functional seating
+                                    option.</p>
+                                <div class="d-sm-flex justify-content-between">
+                                    <div
+                                        class="d-flex align-items-center fs-sm fw-medium text-dark-emphasis pb-2 pb-sm-0 mb-1 mb-sm-0">
+                                        <i class="ci-check fs-base me-1" style="margin-top: .125rem"></i>
+                                        Yes, I recommend this product
+                                    </div>
+                                    <div class="d-flex align-items-center gap-2">
+                                        <div class="fs-sm fw-medium text-dark-emphasis me-1">Helpful?</div>
+                                        <button type="button" class="btn btn-sm btn-secondary">
+                                            <i class="ci-thumbs-up fs-sm ms-n1 me-1"></i>
+                                            14
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Review -->
+                    <div class="border-bottom py-4">
+                        <div class="row py-sm-2">
+                            <div class="col-md-4 col-lg-3 mb-3 mb-md-0">
+                                <div class="d-flex h6 mb-2">
+                                    Jenny Wilson
+                                    <i class="ci-check-circle text-success mt-1 ms-2" data-bs-toggle="tooltip"
+                                        data-bs-custom-class="tooltip-sm" title="Verified customer"></i>
+                                </div>
+                                <div class="fs-sm mb-2 mb-md-3">February 19, 2024</div>
+                                <div class="d-flex gap-1 fs-sm">
+                                    <i class="ci-star-filled text-body-emphasis"></i>
+                                    <i class="ci-star-filled text-body-emphasis"></i>
+                                    <i class="ci-star-filled text-body-emphasis"></i>
+                                    <i class="ci-star-filled text-body-emphasis"></i>
+                                    <i class="ci-star-filled text-body-emphasis"></i>
+                                </div>
+                            </div>
+                            <div class="col-md-8 col-lg-9">
+                                <p class="mb-md-4">This chair exceeded my expectations! It's well-made, comfortable, and
+                                    looks even better in person. The Scandinavian design adds a sophisticated touch to my
+                                    home office. I've received so many compliments already. Five stars all the way!</p>
+                                <div class="d-sm-flex justify-content-between">
+                                    <div
+                                        class="d-flex align-items-center fs-sm fw-medium text-dark-emphasis pb-2 pb-sm-0 mb-1 mb-sm-0">
+                                        <i class="ci-check fs-base me-1" style="margin-top: .125rem"></i>
+                                        Yes, I recommend this product
+                                    </div>
+                                    <div class="d-flex align-items-center gap-2">
+                                        <div class="fs-sm fw-medium text-dark-emphasis me-1">Helpful?</div>
+                                        <button type="button" class="btn btn-sm btn-secondary">
+                                            <i class="ci-thumbs-up fs-sm ms-n1 me-1"></i>
+                                            2
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Review -->
+                    <div class="border-bottom py-4">
+                        <div class="row py-sm-2">
+                            <div class="col-md-4 col-lg-3 mb-3 mb-md-0">
+                                <div class="d-flex h6 mb-2">Kristin Watson</div>
+                                <div class="fs-sm mb-2 mb-md-3">February 7, 2024</div>
+                                <div class="d-flex gap-1 fs-sm">
+                                    <i class="ci-star-filled text-body-emphasis"></i>
+                                    <i class="ci-star-filled text-body-emphasis"></i>
+                                    <i class="ci-star-filled text-body-emphasis"></i>
+                                    <i class="ci-star text-body-tertiary opacity-75"></i>
+                                    <i class="ci-star text-body-tertiary opacity-75"></i>
+                                </div>
+                            </div>
+                            <div class="col-md-8 col-lg-9">
+                                <p class="mb-md-4">The chair is nice, but it's not the most comfortable for extended
+                                    periods of sitting. The wooden legs give it a nice aesthetic, but they seem a bit
+                                    fragile. It's a decent chair for occasional use, but I wouldn't recommend it for daily
+                                    use or long sitting sessions.</p>
+                                <div class="d-sm-flex justify-content-between">
+                                    <div
+                                        class="d-flex align-items-center fs-sm fw-medium text-dark-emphasis pb-2 pb-sm-0 mb-1 mb-sm-0">
+                                        <i class="ci-close fs-base me-1" style="margin-top: .125rem"></i>
+                                        No, I don't recommend this product
+                                    </div>
+                                    <div class="d-flex align-items-center gap-2">
+                                        <div class="fs-sm fw-medium text-dark-emphasis me-1">Helpful?</div>
+                                        <button type="button" class="btn btn-sm btn-secondary">
+                                            <i class="ci-thumbs-up fs-sm ms-n1 me-1"></i>
+                                            9
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Toggle reviews collapse button -->
+                <div class="nav pt-3 mt-md-2 mb-xxl-2">
+                    <a class="nav-link animate-underline collapsed px-0" href="#moreReviews" data-bs-toggle="collapse"
+                        aria-expanded="false" aria-controls="moreReviews" aria-label="Show / hide reviews">
+                        <span class="animate-target" data-label-collapsed="Show more reviews"
+                            data-label-expanded="Show less reviews"></span>
+                        <i class="collapse-toggle-icon ci-chevron-down fs-base mt-1 ms-1"></i>
+                    </a>
+                </div>
+            </section>
+
+
+            <!-- Viewed products carousel -->
+            <section class="pb-5 mb-2 mb-sm-3 mb-md-4 mb-lg-5">
+                <h2 class="h3 pb-2 pb-sm-3">Viewed products</h2>
+                <div class="position-relative pb-xxl-3">
+
+                    <!-- External slider prev/next buttons visible on screens > 500px wide (sm breakpoint) -->
+                    <button type="button"
+                        class="viewed-prev btn btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-start position-absolute top-50 start-0 z-2 translate-middle mt-n5 d-none d-sm-inline-flex"
+                        aria-label="Prev">
+                        <i class="ci-chevron-left fs-lg animate-target"></i>
+                    </button>
+                    <button type="button"
+                        class="viewed-next btn btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-end position-absolute top-50 start-100 z-2 translate-middle mt-n5 d-none d-sm-inline-flex"
+                        aria-label="Next">
+                        <i class="ci-chevron-right fs-lg animate-target"></i>
+                    </button>
+
+                    <!-- Slider -->
+                    <div class="swiper"
+                        data-swiper='{
+              "slidesPerView": 2,
+              "spaceBetween": 24,
+              "navigation": {
+                "prevEl": ".viewed-prev",
+                "nextEl": ".viewed-next"
+              },
+              "breakpoints": {
+                "768": {
+                  "slidesPerView": 3
+                },
+                "992": {
+                  "slidesPerView": 4
+                }
+              }
+            }'>
+                        <div class="swiper-wrapper">
+
+                            <!-- Item -->
+                            <div class="swiper-slide">
+                                <div class="animate-underline">
+                                    <a class="hover-effect-opacity ratio ratio-1x1 d-block mb-3"
+                                        href="{{ route('second', ['shop', 'product-furniture']) }}">
+                                        <img src="/img/shop/furniture/16.png" class="hover-effect-target opacity-100"
+                                            alt="Product">
+                                        <img src="/img/shop/furniture/16-hover.jpg"
+                                            class="position-absolute top-0 start-0 hover-effect-target opacity-0 rounded-4"
+                                            alt="Room">
+                                    </a>
+                                    <div class="d-flex gap-2 mb-3">
+                                        <input type="radio" class="btn-check" name="colors-16" id="color-16-1"
+                                            checked>
+                                        <label for="color-16-1" class="btn btn-color fs-base" style="color: #b2b8c0">
+                                            <span class="visually-hidden">Light gray</span>
+                                        </label>
+                                        <input type="radio" class="btn-check" name="colors-16" id="color-16-2">
+                                        <label for="color-16-2" class="btn btn-color fs-base" style="color: #6a6662">
+                                            <span class="visually-hidden">Dark gray</span>
+                                        </label>
+                                    </div>
+                                    <h3 class="mb-2">
+                                        <a class="d-block fs-sm fw-medium text-truncate"
+                                            href="{{ route('second', ['shop', 'product-furniture']) }}">
+                                            <span class="animate-target">Soft armchair with wooden legs</span>
+                                        </a>
+                                    </h3>
+                                    <div class="h6">$215.00</div>
+                                    <div class="d-flex gap-2">
+                                        <button type="button" class="btn btn-dark w-100 rounded-pill px-3">Add to
+                                            cart</button>
+                                        <button type="button"
+                                            class="btn btn-icon btn-secondary rounded-circle animate-pulse"
+                                            aria-label="Add to wishlist">
+                                            <i class="ci-heart fs-base animate-target"></i>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Item -->
+                            <div class="swiper-slide">
+                                <div class="animate-underline">
+                                    <a class="hover-effect-opacity ratio ratio-1x1 d-block mb-3"
+                                        href="{{ route('second', ['shop', 'product-furniture']) }}">
+                                        <img src="/img/shop/furniture/10.png" class="hover-effect-target opacity-100"
+                                            alt="Product">
+                                        <img src="/img/shop/furniture/10-hover.jpg"
+                                            class="position-absolute top-0 start-0 hover-effect-target opacity-0 rounded-4"
+                                            alt="Room">
+                                    </a>
+                                    <div class="d-flex gap-2 mb-3">
+                                        <input type="radio" class="btn-check" name="colors-10" id="color-10-1"
+                                            checked>
+                                        <label for="color-10-1" class="btn btn-color fs-base" style="color: #677382">
+                                            <span class="visually-hidden">Navy blue</span>
+                                        </label>
+                                        <input type="radio" class="btn-check" name="colors-10" id="color-10-2">
+                                        <label for="color-10-2" class="btn btn-color fs-base" style="color: #919384">
+                                            <span class="visually-hidden">Gray</span>
+                                        </label>
+                                        <input type="radio" class="btn-check" name="colors-10" id="color-10-3">
+                                        <label for="color-10-3" class="btn btn-color fs-base" style="color: #b2b8c0">
+                                            <span class="visually-hidden">Light gray</span>
+                                        </label>
+                                    </div>
+                                    <h3 class="mb-2">
+                                        <a class="d-block fs-sm fw-medium text-truncate"
+                                            href="{{ route('second', ['shop', 'product-furniture']) }}">
+                                            <span class="animate-target">Navy blue low sofa for relaxation</span>
+                                        </a>
+                                    </h3>
+                                    <div class="h6">$1,250.00</div>
+                                    <div class="d-flex gap-2">
+                                        <button type="button" class="btn btn-dark w-100 rounded-pill px-3">Add to
+                                            cart</button>
+                                        <button type="button"
+                                            class="btn btn-icon btn-secondary rounded-circle animate-pulse"
+                                            aria-label="Add to wishlist">
+                                            <i class="ci-heart fs-base animate-target"></i>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Item -->
+                            <div class="swiper-slide">
+                                <div class="animate-underline">
+                                    <a class="hover-effect-opacity ratio ratio-1x1 d-block mb-3"
+                                        href="{{ route('second', ['shop', 'product-furniture']) }}">
+                                        <img src="/img/shop/furniture/11.png" class="hover-effect-target opacity-100"
+                                            alt="Product">
+                                        <img src="/img/shop/furniture/11-hover.jpg"
+                                            class="position-absolute top-0 start-0 hover-effect-target opacity-0 rounded-4"
+                                            alt="Room">
+                                    </a>
+                                    <div class="d-flex gap-2 mb-3">
+                                        <input type="radio" class="btn-check" name="colors-11" id="color-11-1"
+                                            checked>
+                                        <label for="color-11-1" class="btn btn-color fs-base" style="color: #677382">
+                                            <span class="visually-hidden">Green</span>
+                                        </label>
+                                        <input type="radio" class="btn-check" name="colors-11" id="color-11-2">
+                                        <label for="color-11-2" class="btn btn-color fs-base" style="color: #548294">
+                                            <span class="visually-hidden">Blue</span>
+                                        </label>
+                                    </div>
+                                    <h3 class="mb-2">
+                                        <a class="d-block fs-sm fw-medium text-truncate"
+                                            href="{{ route('second', ['shop', 'product-furniture']) }}">
+                                            <span class="animate-target">Armchair with wooden legs 70x120 cm</span>
+                                        </a>
+                                    </h3>
+                                    <div class="h6">$269.99</div>
+                                    <div class="d-flex gap-2">
+                                        <button type="button" class="btn btn-dark w-100 rounded-pill px-3">Add to
+                                            cart</button>
+                                        <button type="button"
+                                            class="btn btn-icon btn-secondary rounded-circle animate-pulse"
+                                            aria-label="Add to wishlist">
+                                            <i class="ci-heart fs-base animate-target"></i>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Item -->
+                            <div class="swiper-slide">
+                                <div class="animate-underline">
+                                    <a class="hover-effect-opacity ratio ratio-1x1 d-block mb-3"
+                                        href="{{ route('second', ['shop', 'product-furniture']) }}">
+                                        <img src="/img/shop/furniture/03.png" class="hover-effect-target opacity-100"
+                                            alt="Product">
+                                        <img src="/img/shop/furniture/03-hover.jpg"
+                                            class="position-absolute top-0 start-0 hover-effect-target opacity-0 rounded-4"
+                                            alt="Room">
+                                    </a>
+                                    <div class="d-flex gap-2 mb-3">
+                                        <input type="radio" class="btn-check" name="colors-3" id="color-3-1"
+                                            checked>
+                                        <label for="color-3-1" class="btn btn-color fs-base" style="color: #a36540">
+                                            <span class="visually-hidden">Brown</span>
+                                        </label>
+                                        <input type="radio" class="btn-check" name="colors-3" id="color-3-2">
+                                        <label for="color-3-2" class="btn btn-color fs-base" style="color: #f8d7b5">
+                                            <span class="visually-hidden">Beige</span>
+                                        </label>
+                                        <input type="radio" class="btn-check" name="colors-3" id="color-3-3">
+                                        <label for="color-3-3" class="btn btn-color fs-base" style="color: #e0e5eb">
+                                            <span class="visually-hidden">White</span>
+                                        </label>
+                                    </div>
+                                    <h3 class="mb-2">
+                                        <a class="d-block fs-sm fw-medium text-truncate"
+                                            href="{{ route('second', ['shop', 'product-furniture']) }}">
+                                            <span class="animate-target">Home fragrance with the aroma of spices</span>
+                                        </a>
+                                    </h3>
+                                    <div class="h6">$24.00</div>
+                                    <div class="d-flex gap-2">
+                                        <button type="button" class="btn btn-dark w-100 rounded-pill px-3">Add to
+                                            cart</button>
+                                        <button type="button"
+                                            class="btn btn-icon btn-secondary rounded-circle animate-pulse"
+                                            aria-label="Add to wishlist">
+                                            <i class="ci-heart fs-base animate-target"></i>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- External slider prev/next buttons visible on screens < 500px wide (sm breakpoint) -->
+                <div class="d-flex justify-content-center gap-2 mt-1 pt-4 d-sm-none">
+                    <button type="button"
+                        class="viewed-prev btn btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-start me-1"
+                        aria-label="Prev">
+                        <i class="ci-chevron-left fs-lg animate-target"></i>
+                    </button>
+                    <button type="button"
+                        class="viewed-next btn btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-end"
+                        aria-label="Next">
+                        <i class="ci-chevron-right fs-lg animate-target"></i>
+                    </button>
+                </div>
+            </section>
+        </div>
+    </main>
+
+    <footer class="footer bg-dark pb-4 py-lg-5" data-bs-theme="dark">
+        <div class="container pt-5 pt-lg-4 mt-sm-2 mt-md-3">
+            <div class="row pb-5">
+
+                <!-- Subscription + Social account links -->
+                <div class="col-md col-xl-8 order-md-2">
+                    <div class="text-center px-sm-4 mx-auto" style="max-width: 568px">
+                        <h3 class="pb-1 mb-2">Stay in touch with us</h3>
+                        <p class="fs-sm text-body pb-2 pb-sm-3">Receive the latest updates about our products &amp;
+                            promotions</p>
+                        <form class="needs-validation position-relative" novalidate>
+                            <input type="email" class="form-control form-control-lg rounded-pill text-start"
+                                placeholder="You email" aria-label="Your email address" required>
+                            <div class="invalid-tooltip bg-transparent p-0">Please enter you email address!</div>
+                            <button type="submit"
+                                class="btn btn-icon fs-xl btn-dark rounded-circle position-absolute top-0 end-0 mt-1 me-1"
+                                aria-label="Submit your email address" data-bs-theme="light">
+                                <i class="ci-arrow-up-right"></i>
+                            </button>
+                        </form>
+                        <div class="d-flex justify-content-center gap-2 pt-4 pt-md-5 mt-1 mt-md-0">
+                            <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
+                                data-bs-toggle="tooltip"
+                                data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-white p-0"></div></div>'
+                                title="YouTube" aria-label="Follow us on YouTube">
+                                <i class="ci-youtube"></i>
+                            </a>
+                            <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
+                                data-bs-toggle="tooltip"
+                                data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-white p-0"></div></div>'
+                                title="Facebook" aria-label="Follow us on Facebook">
+                                <i class="ci-facebook"></i>
+                            </a>
+                            <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
+                                data-bs-toggle="tooltip"
+                                data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-white p-0"></div></div>'
+                                title="Instagram" aria-label="Follow us on Instagram">
+                                <i class="ci-instagram"></i>
+                            </a>
+                            <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
+                                data-bs-toggle="tooltip"
+                                data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-white p-0"></div></div>'
+                                title="Telegram" aria-label="Follow us on Telegram">
+                                <i class="ci-telegram"></i>
+                            </a>
+                            <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
+                                data-bs-toggle="tooltip"
+                                data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-white p-0"></div></div>'
+                                title="Pinterest" aria-label="Follow us on Pinterest">
+                                <i class="ci-pinterest"></i>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Category links -->
+                <div class="col-md-auto col-xl-2 text-center order-md-1 pt-4 pt-md-0">
+                    <ul class="nav d-inline-flex flex-md-column justify-content-center align-items-center gap-md-2">
+                        <li class="animate-underline my-1 mx-2 m-md-0">
+                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Bedroom</a>
+                        </li>
+                        <li class="animate-underline my-1 mx-2 m-md-0">
+                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Living
+                                room</a>
+                        </li>
+                        <li class="animate-underline my-1 mx-2 m-md-0">
+                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Bathroom</a>
+                        </li>
+                        <li class="animate-underline my-1 mx-2 m-md-0">
+                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Decoration</a>
+                        </li>
+                        <li class="animate-underline my-1 mx-2 m-md-0">
+                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Kitchen</a>
+                        </li>
+                        <li class="animate-underline my-1 mx-2 m-md-0">
+                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Sale</a>
+                        </li>
+                    </ul>
+                </div>
+
+                <!-- Customer links -->
+                <div class="col-md-auto col-xl-2 text-center order-md-3 pt-3 pt-md-0">
+                    <ul class="nav d-inline-flex flex-md-column justify-content-center align-items-center gap-md-2">
+                        <li class="animate-underline my-1 mx-2 m-md-0">
+                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Shipping
+                                options</a>
+                        </li>
+                        <li class="animate-underline my-1 mx-2 m-md-0">
+                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Tracking a
+                                package</a>
+                        </li>
+                        <li class="animate-underline my-1 mx-2 m-md-0">
+                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Help
+                                center</a>
+                        </li>
+                        <li class="animate-underline my-1 mx-2 m-md-0">
+                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Contact us</a>
+                        </li>
+                        <li class="animate-underline my-1 mx-2 m-md-0">
+                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Product
+                                returns</a>
+                        </li>
+                        <li class="animate-underline my-1 mx-2 m-md-0">
+                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Locations</a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+
+            <!-- Copyright -->
+            <p class="fs-xs text-body text-center pt-lg-4 mt-n2 mt-md-0 mb-0">
+                &copy; All rights reserved. Made by <span class="animate-underline"><a
+                        class="animate-target text-white text-decoration-none" href="https://coderthemes.com/"
+                        target="_blank" rel="noreferrer">Coderthemes</a></span>
+            </p>
+        </div>
+    </footer>
+@endsection
+
+@section('scripts')
+@endsection
diff --git a/resources/views/shop/product-general-electronics.blade.php b/resources/views/shop/product-general-electronics.blade.php
new file mode 100644
index 0000000..dc75cb7
--- /dev/null
+++ b/resources/views/shop/product-general-electronics.blade.php
@@ -0,0 +1,1958 @@
+@extends('layouts.landing', ['title' => 'Electronics Store - Product General Info'])
+
+@section('content')
+    <div class="modal fade" id="reviewForm" data-bs-backdrop="static" tabindex="-1" aria-labelledby="reviewFormLabel"
+        aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
+            <form class="modal-content needs-validation" novalidate>
+                <div class="modal-header border-0">
+                    <h5 class="modal-title" id="reviewFormLabel">Leave a review</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body pb-3 pt-0">
+                    <div class="mb-3">
+                        <label for="review-name" class="form-label">Your name <span class="text-danger">*</span></label>
+                        <input type="text" class="form-control" id="review-name" required>
+                        <div class="invalid-feedback">Please enter your name!</div>
+                        <small class="form-text">Will be displayed on the comment.</small>
+                    </div>
+                    <div class="mb-3">
+                        <label for="review-email" class="form-label">Your email <span class="text-danger">*</span></label>
+                        <input type="email" class="form-control" id="review-email" required>
+                        <div class="invalid-feedback">Please provide a valid email address!</div>
+                        <small class="form-text">Authentication only - we won't spam you.</small>
+                    </div>
+                    <div class="mb-3">
+                        <label class="form-label">Rating <span class="text-danger">*</span></label>
+                        <select class="form-select"
+                            data-select='{
+                "placeholderValue": "Choose rating",
+                "choices": [
+                  {
+                    "value": "",
+                    "label": "Choose rating",
+                    "placeholder": true
+                  },
+                  {
+                    "value": "1",
+                    "label": "<span class=\"visually-hidden\">1 star</span>",
+                    "customProperties": {
+                      "icon": "<span class=\"d-flex gap-1 py-1\"><i class=\"ci-star-filled text-warning\"></i></span>",
+                      "selected": "1 star"
+                    }
+                  },
+                  {
+                    "value": "2",
+                    "label": "<span class=\"visually-hidden\">2 stars</span>",
+                    "customProperties": {
+                      "icon": "<span class=\"d-flex gap-1 py-1\"><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i></span>",
+                      "selected": "2 stars"
+                    }
+                  },
+                  {
+                    "value": "3",
+                    "label": "<span class=\"visually-hidden\">3 stars</span>",
+                    "customProperties": {
+                      "icon": "<span class=\"d-flex gap-1 py-1\"><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i></span>",
+                      "selected": "3 stars"
+                    }
+                  },
+                  {
+                    "value": "4",
+                    "label": "<span class=\"visually-hidden\">4 stars</span>",
+                    "customProperties": {
+                      "icon": "<span class=\"d-flex gap-1 py-1\"><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i></span>",
+                      "selected": "4 stars"
+                    }
+                  },
+                  {
+                    "value": "5",
+                    "label": "<span class=\"visually-hidden\">5 stars</span>",
+                    "customProperties": {
+                      "icon": "<span class=\"d-flex gap-1 py-1\"><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i></span>",
+                      "selected": "5 stars"
+                    }
+                  }
+                ]
+              }'
+                            data-select-template="true" required></select>
+                        <div class="invalid-feedback">Please choose your rating!</div>
+                    </div>
+                    <div class="mb-3">
+                        <label class="form-label" for="review-text">Review <span class="text-danger">*</span></label>
+                        <textarea class="form-control" rows="4" id="review-text" required></textarea>
+                        <div class="invalid-feedback">Please write a review!</div>
+                        <small class="form-text">Your review must be at least 50 characters.</small>
+                    </div>
+                    <div class="mb-3">
+                        <label class="form-label">Pros</label>
+                        <input type="text" class="form-select"
+                            data-select='{"placeholderValue": "Type and hit \"Enter\""}'>
+                    </div>
+                    <div>
+                        <label class="form-label">Cons</label>
+                        <input type="text" class="form-select"
+                            data-select='{"placeholderValue": "Type and hit \"Enter\""}'>
+                    </div>
+                </div>
+                <div class="modal-footer flex-nowrap gap-3 border-0 px-4">
+                    <button type="reset" class="btn btn-secondary w-100 m-0" data-bs-dismiss="modal">Cancel</button>
+                    <button type="submit" class="btn btn-primary w-100 m-0">Submit review</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    @include('layouts.partials/offcanvas')
+
+    @include('layouts.partials/navbar', ['wishlist' => true])
+
+    <main class="content-wrapper">
+
+        <!-- Breadcrumb -->
+        <nav class="container pt-3 my-3 my-md-4" aria-label="breadcrumb">
+            <ol class="breadcrumb">
+                <li class="breadcrumb-item"><a href="{{ route('second', ['home', 'electronics'])}}">Home</a></li>
+                <li class="breadcrumb-item"><a href="{{ route('second', ['shop', 'catalog-electronics'])}}">Shop</a></li>
+                <li class="breadcrumb-item active" aria-current="page">Product page</li>
+            </ol>
+        </nav>
+
+
+        <!-- Page title -->
+        <h1 class="h3 container mb-4">Apple iPhone 14 Plus 128GB Blue</h1>
+
+
+        <!-- Nav links + Reviews -->
+        <section class="container pb-2 pb-lg-4">
+            <div class="d-flex align-items-center border-bottom">
+                <ul class="nav nav-underline flex-nowrap gap-4">
+                    <li class="nav-item me-sm-2">
+                        <a class="nav-link pe-none active" href="#!">General info</a>
+                    </li>
+                    <li class="nav-item me-sm-2">
+                        <a class="nav-link" href="{{ route('second', ['shop', 'product-details-electronics'])}}">Product details</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="{{ route('second', ['shop', 'product-reviews-electronics'])}}">Reviews (68)</a>
+                    </li>
+                </ul>
+                <a class="d-none d-md-flex align-items-center gap-2 text-decoration-none ms-auto mb-1" href="#reviews">
+                    <div class="d-flex gap-1 fs-sm">
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-half text-warning"></i>
+                    </div>
+                    <span class="text-body-tertiary fs-xs">68 reviews</span>
+                </a>
+            </div>
+        </section>
+
+
+        <!-- Gallery + Product options -->
+        <section class="container pb-5 mb-1 mb-sm-2 mb-md-3 mb-lg-4 mb-xl-5">
+            <div class="row">
+
+                <!-- Product gallery -->
+                <div class="col-md-6">
+
+                    <!-- Preview (Large image) -->
+                    <div class="swiper"
+                        data-swiper='{
+              "loop": true,
+              "navigation": {
+                "prevEl": ".btn-prev",
+                "nextEl": ".btn-next"
+              },
+              "thumbs": {
+                "swiper": "#thumbs"
+              }
+            }'>
+                        <div class="swiper-wrapper">
+                            <div class="swiper-slide">
+                                <div class="ratio ratio-1x1">
+                                    <img src="/img/shop/electronics/product/gallery/01.png"
+                                        data-zoom="/img/shop/electronics/product/gallery/01.png"
+                                        data-zoom-options='{
+                      "paneSelector": "#zoomPane",
+                      "inlinePane": 768,
+                      "hoverDelay": 500,
+                      "touchDisable": true
+                    }'
+                                        alt="Preview">
+                                </div>
+                            </div>
+                            <div class="swiper-slide">
+                                <div class="ratio ratio-1x1">
+                                    <img src="/img/shop/electronics/product/gallery/02.png"
+                                        data-zoom="/img/shop/electronics/product/gallery/02.png"
+                                        data-zoom-options='{
+                      "paneSelector": "#zoomPane",
+                      "inlinePane": 768,
+                      "hoverDelay": 500,
+                      "touchDisable": true
+                    }'
+                                        alt="Preview">
+                                </div>
+                            </div>
+                            <div class="swiper-slide">
+                                <div class="ratio ratio-1x1">
+                                    <img src="/img/shop/electronics/product/gallery/03.png"
+                                        data-zoom="/img/shop/electronics/product/gallery/03.png"
+                                        data-zoom-options='{
+                      "paneSelector": "#zoomPane",
+                      "inlinePane": 768,
+                      "hoverDelay": 500,
+                      "touchDisable": true
+                    }'
+                                        alt="Preview">
+                                </div>
+                            </div>
+                            <div class="swiper-slide">
+                                <div class="ratio ratio-1x1">
+                                    <img src="/img/shop/electronics/product/gallery/04.png"
+                                        data-zoom="/img/shop/electronics/product/gallery/04.png"
+                                        data-zoom-options='{
+                      "paneSelector": "#zoomPane",
+                      "inlinePane": 768,
+                      "hoverDelay": 500,
+                      "touchDisable": true
+                    }'
+                                        alt="Preview">
+                                </div>
+                            </div>
+                            <div class="swiper-slide">
+                                <div class="ratio ratio-1x1">
+                                    <img src="/img/shop/electronics/product/gallery/05.png"
+                                        data-zoom="/img/shop/electronics/product/gallery/05.png"
+                                        data-zoom-options='{
+                      "paneSelector": "#zoomPane",
+                      "inlinePane": 768,
+                      "hoverDelay": 500,
+                      "touchDisable": true
+                    }'
+                                        alt="Preview">
+                                </div>
+                            </div>
+                            <div class="swiper-slide">
+                                <div class="ratio ratio-1x1">
+                                    <img src="/img/shop/electronics/product/gallery/06.png"
+                                        data-zoom="/img/shop/electronics/product/gallery/06.png"
+                                        data-zoom-options='{
+                      "paneSelector": "#zoomPane",
+                      "inlinePane": 768,
+                      "hoverDelay": 500,
+                      "touchDisable": true
+                    }'
+                                        alt="Preview">
+                                </div>
+                            </div>
+                            <div class="swiper-slide">
+                                <div class="ratio ratio-1x1">
+                                    <img src="/img/shop/electronics/product/gallery/07.png"
+                                        data-zoom="/img/shop/electronics/product/gallery/07.png"
+                                        data-zoom-options='{
+                      "paneSelector": "#zoomPane",
+                      "inlinePane": 768,
+                      "hoverDelay": 500,
+                      "touchDisable": true
+                    }'
+                                        alt="Preview">
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Prev button -->
+                        <div class="position-absolute top-50 start-0 z-2 translate-middle-y ms-sm-2 ms-lg-3">
+                            <button type="button"
+                                class="btn btn-prev btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-start"
+                                aria-label="Prev">
+                                <i class="ci-chevron-left fs-lg animate-target"></i>
+                            </button>
+                        </div>
+
+                        <!-- Next button -->
+                        <div class="position-absolute top-50 end-0 z-2 translate-middle-y me-sm-2 me-lg-3">
+                            <button type="button"
+                                class="btn btn-next btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-end"
+                                aria-label="Next">
+                                <i class="ci-chevron-right fs-lg animate-target"></i>
+                            </button>
+                        </div>
+                    </div>
+
+                    <!-- Thumbnails -->
+                    <div class="swiper swiper-load swiper-thumbs pt-2 mt-1" id="thumbs"
+                        data-swiper='{
+              "loop": true,
+              "spaceBetween": 12,
+              "slidesPerView": 3,
+              "watchSlidesProgress": true,
+              "breakpoints": {
+                "340": {
+                  "slidesPerView": 4
+                },
+                "500": {
+                  "slidesPerView": 5
+                },
+                "600": {
+                  "slidesPerView": 6
+                },
+                "768": {
+                  "slidesPerView": 4
+                },
+                "992": {
+                  "slidesPerView": 5
+                },
+                "1200": {
+                  "slidesPerView": 6
+                }
+              }
+            }'>
+                        <div class="swiper-wrapper">
+                            <div class="swiper-slide swiper-thumb">
+                                <div class="ratio ratio-1x1" style="max-width: 94px">
+                                    <img src="/img/shop/electronics/product/gallery/th01.png" class="swiper-thumb-img"
+                                        alt="Thumbnail">
+                                </div>
+                            </div>
+                            <div class="swiper-slide swiper-thumb">
+                                <div class="ratio ratio-1x1" style="max-width: 94px">
+                                    <img src="/img/shop/electronics/product/gallery/th02.png" class="swiper-thumb-img"
+                                        alt="Thumbnail">
+                                </div>
+                            </div>
+                            <div class="swiper-slide swiper-thumb">
+                                <div class="ratio ratio-1x1" style="max-width: 94px">
+                                    <img src="/img/shop/electronics/product/gallery/th03.png" class="swiper-thumb-img"
+                                        alt="Thumbnail">
+                                </div>
+                            </div>
+                            <div class="swiper-slide swiper-thumb">
+                                <div class="ratio ratio-1x1" style="max-width: 94px">
+                                    <img src="/img/shop/electronics/product/gallery/th04.png" class="swiper-thumb-img"
+                                        alt="Thumbnail">
+                                </div>
+                            </div>
+                            <div class="swiper-slide swiper-thumb">
+                                <div class="ratio ratio-1x1" style="max-width: 94px">
+                                    <img src="/img/shop/electronics/product/gallery/th05.png" class="swiper-thumb-img"
+                                        alt="Thumbnail">
+                                </div>
+                            </div>
+                            <div class="swiper-slide swiper-thumb">
+                                <div class="ratio ratio-1x1" style="max-width: 94px">
+                                    <img src="/img/shop/electronics/product/gallery/th06.png" class="swiper-thumb-img"
+                                        alt="Thumbnail">
+                                </div>
+                            </div>
+                            <div class="swiper-slide swiper-thumb">
+                                <div class="ratio ratio-1x1" style="max-width: 94px">
+                                    <img src="/img/shop/electronics/product/gallery/th07.png" class="swiper-thumb-img"
+                                        alt="Thumbnail">
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+
+                <!-- Product options -->
+                <div class="col-md-6 col-xl-5 offset-xl-1 pt-4">
+                    <div class="ps-md-4 ps-xl-0">
+                        <div class="position-relative" id="zoomPane">
+
+                            <!-- Model -->
+                            <div class="pb-3 mb-2 mb-lg-3">
+                                <label class="form-label fw-semibold pb-1 mb-2">Model</label>
+                                <div class="d-flex flex-wrap gap-2">
+                                    <input type="radio" class="btn-check" name="model-options" id="gb-64">
+                                    <label for="gb-64" class="btn btn-sm btn-outline-secondary">64 GB</label>
+                                    <input type="radio" class="btn-check" name="model-options" id="gb-128" checked>
+                                    <label for="gb-128" class="btn btn-sm btn-outline-secondary">128 GB</label>
+                                    <input type="radio" class="btn-check" name="model-options" id="gb-256">
+                                    <label for="gb-256" class="btn btn-sm btn-outline-secondary">256 GB</label>
+                                    <input type="radio" class="btn-check" name="model-options" id="gb-512">
+                                    <label for="gb-512" class="btn btn-sm btn-outline-secondary">512 GB</label>
+                                </div>
+                            </div>
+
+                            <!-- Color -->
+                            <div class="pb-3 mb-2 mb-lg-3">
+                                <label class="form-label fw-semibold pb-1 mb-2">Color: <span class="text-body fw-normal"
+                                        id="colorOption">Gray blue</span></label>
+                                <div class="d-flex flex-wrap gap-2" data-binded-label="#colorOption">
+                                    <input type="radio" class="btn-check" name="color-options" id="color-1" checked>
+                                    <label for="color-1" class="btn btn-color fs-xl" data-label="Gray blue"
+                                        style="color: #5a7aa1">
+                                        <span class="visually-hidden">Gray blue</span>
+                                    </label>
+                                    <input type="radio" class="btn-check" name="color-options" id="color-2">
+                                    <label for="color-2" class="btn btn-color fs-xl" data-label="Pink"
+                                        style="color: #ee7976">
+                                        <span class="visually-hidden">Pink</span>
+                                    </label>
+                                    <input type="radio" class="btn-check" name="color-options" id="color-3">
+                                    <label for="color-3" class="btn btn-color fs-xl" data-label="Light blue"
+                                        style="color: #9acbf1">
+                                        <span class="visually-hidden">Light blue</span>
+                                    </label>
+                                    <input type="radio" class="btn-check" name="color-options" id="color-4">
+                                    <label for="color-4" class="btn btn-color fs-xl" data-label="Green"
+                                        style="color: #8cd1ab">
+                                        <span class="visually-hidden">Green</span>
+                                    </label>
+                                </div>
+                            </div>
+
+                            <!-- Price -->
+                            <div class="d-flex flex-wrap align-items-center mb-3">
+                                <div class="h4 mb-0 me-3">$940.00</div>
+                                <div class="d-flex align-items-center text-success fs-sm ms-auto">
+                                    <i class="ci-check-circle fs-base me-2"></i>
+                                    Available to order
+                                </div>
+                            </div>
+
+                            <!-- Count + Buttons -->
+                            <div
+                                class="d-flex flex-wrap flex-sm-nowrap flex-md-wrap flex-lg-nowrap gap-3 gap-lg-2 gap-xl-3 mb-4">
+                                <div class="count-input flex-shrink-0 order-sm-1">
+                                    <button type="button" class="btn btn-icon btn-lg" data-decrement
+                                        aria-label="Decrement quantity">
+                                        <i class="ci-minus"></i>
+                                    </button>
+                                    <input type="number" class="form-control form-control-lg" value="1"
+                                        min="1" max="5" readonly>
+                                    <button type="button" class="btn btn-icon btn-lg" data-increment
+                                        aria-label="Increment quantity">
+                                        <i class="ci-plus"></i>
+                                    </button>
+                                </div>
+                                <button type="button"
+                                    class="btn btn-icon btn-lg btn-secondary animate-pulse order-sm-3 order-md-2 order-lg-3"
+                                    data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-sm"
+                                    data-bs-title="Add to Wishlist" aria-label="Add to Wishlist">
+                                    <i class="ci-heart fs-lg animate-target"></i>
+                                </button>
+                                <button type="button"
+                                    class="btn btn-icon btn-lg btn-secondary animate-rotate order-sm-4 order-md-3 order-lg-4"
+                                    data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-sm"
+                                    data-bs-title="Compare" aria-label="Compare">
+                                    <i class="ci-refresh-cw fs-lg animate-target"></i>
+                                </button>
+                                <button type="button"
+                                    class="btn btn-lg btn-primary w-100 animate-slide-end order-sm-2 order-md-4 order-lg-2">
+                                    <i class="ci-shopping-cart fs-lg animate-target ms-n1 me-2"></i>
+                                    Add to cart
+                                </button>
+                            </div>
+
+                            <!-- Features -->
+                            <div class="d-flex flex-wrap gap-3 gap-xl-4 pb-4 pb-lg-5 mb-2 mb-lg-0 mb-xl-2">
+                                <div class="d-flex align-items-center fs-sm">
+                                    <svg class="text-warning me-2" xmlns="http://www.w3.org/2000/svg" width="16"
+                                        height="16" fill="currentColor">
+                                        <path
+                                            d="M1.333 9.667H7.5V16h-5c-.64 0-1.167-.527-1.167-1.167V9.667zm13.334 0v5.167c0 .64-.527 1.167-1.167 1.167h-5V9.667h6.167zM0 5.833V7.5c0 .64.527 1.167 1.167 1.167h.167H7.5v-1-3H1.167C.527 4.667 0 5.193 0 5.833zm14.833-1.166H8.5v3 1h6.167.167C15.473 8.667 16 8.14 16 7.5V5.833c0-.64-.527-1.167-1.167-1.167z" />
+                                        <path
+                                            d="M8 5.363a.5.5 0 0 1-.495-.573C7.752 3.123 9.054-.03 12.219-.03c1.807.001 2.447.977 2.447 1.813 0 1.486-2.069 3.58-6.667 3.58zM12.219.971c-2.388 0-3.295 2.27-3.595 3.377 1.884-.088 3.072-.565 3.756-.971.949-.563 1.287-1.193 1.287-1.595 0-.599-.747-.811-1.447-.811z" />
+                                        <path
+                                            d="M8.001 5.363c-4.598 0-6.667-2.094-6.667-3.58 0-.836.641-1.812 2.448-1.812 3.165 0 4.467 3.153 4.713 4.819a.5.5 0 0 1-.495.573zM3.782.971c-.7 0-1.448.213-1.448.812 0 .851 1.489 2.403 5.042 2.566C7.076 3.241 6.169.971 3.782.971z" />
+                                    </svg>
+                                    <div class="text-body-emphasis text-nowrap"><span class="fw-semibold">+32</span>
+                                        bonuses</div>
+                                </div>
+                                <div class="d-flex align-items-center fs-sm">
+                                    <svg class="text-primary me-2" xmlns="http://www.w3.org/2000/svg" width="16"
+                                        height="16" fill="none">
+                                        <path
+                                            d="M15.264 8.001l.702-1.831a.5.5 0 0 0-.152-.568l-1.522-1.234-.308-1.937a.5.5 0 0 0-.416-.415l-1.937-.308L10.399.185a.5.5 0 0 0-.567-.152L8 .736 6.169.034a.5.5 0 0 0-.567.152L4.368 1.709l-1.937.308a.5.5 0 0 0-.415.415l-.308 1.937L.185 5.603a.5.5 0 0 0-.152.567l.702 1.831-.702 1.831a.5.5 0 0 0 .152.567l1.523 1.233.308 1.937a.5.5 0 0 0 .415.416l1.937.308 1.234 1.522c.137.17.366.23.568.152L8 15.265l1.831.702a.5.5 0 0 0 .568-.153l1.233-1.522 1.937-.308a.5.5 0 0 0 .416-.416l.308-1.937 1.522-1.233a.5.5 0 0 0 .152-.567l-.702-1.831z"
+                                            fill="currentColor" />
+                                        <path
+                                            d="M6.5 7.001a1.5 1.5 0 1 1 0-3 1.5 1.5 0 1 1 0 3zm0-2a.5.5 0 1 0 0 1 .5.5 0 1 0 0-1zM9.5 12a1.5 1.5 0 1 1 0-3 1.5 1.5 0 1 1 0 3zm0-2a.5.5 0 1 0 0 1 .5.5 0 1 0 0-1zm-4 2c-.101 0-.202-.03-.29-.093a.5.5 0 0 1-.116-.698l5-7a.5.5 0 1 1 .814.581l-5 7A.5.5 0 0 1 5.5 12z"
+                                            fill="white" />
+                                    </svg>
+                                    <div class="text-body-emphasis text-nowrap">Interest-free loan</div>
+                                </div>
+                                <div class="d-flex align-items-center fs-sm">
+                                    <svg class="me-2" xmlns="http://www.w3.org/2000/svg" width="16"
+                                        height="16">
+                                        <path class="text-success"
+                                            d="M7.42169 1.15662C3.3228 1.15662 0 4.47941 0 8.5783C0 12.6772 3.3228 16 7.42169 16C11.5206 16 14.8434 12.6772 14.8434 8.5783H7.42169V1.15662Z"
+                                            fill="currentColor" />
+                                        <path class="text-info"
+                                            d="M8.57812 0V7.42169H15.9998C15.9998 3.3228 12.677 0 8.57812 0Z"
+                                            fill="currentColor" />
+                                        <defs>
+                                            <rect width="16" height="16" fill="white" />
+                                        </defs>
+                                    </svg>
+                                    <div class="text-body-emphasis text-nowrap">Pay by installments</div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Shipping options -->
+                        <div class="d-flex align-items-center pb-2">
+                            <h3 class="h6 mb-0">Shipping options</h3>
+                            <a class="btn btn-sm btn-secondary ms-auto" href="#!">
+                                <i class="ci-map-pin fs-sm ms-n1 me-1"></i>
+                                Find local store
+                            </a>
+                        </div>
+                        <table class="table table-borderless fs-sm mb-2">
+                            <tbody>
+                                <tr>
+                                    <td class="py-2 ps-0">Pickup from the store</td>
+                                    <td class="py-2">Today</td>
+                                    <td class="text-body-emphasis fw-semibold text-end py-2 pe-0">Free</td>
+                                </tr>
+                                <tr>
+                                    <td class="py-2 ps-0">Pickup from postal offices</td>
+                                    <td class="py-2">Tomorrow</td>
+                                    <td class="text-body-emphasis fw-semibold text-end py-2 pe-0">$25.00</td>
+                                </tr>
+                                <tr>
+                                    <td class="py-2 ps-0">Delivery by courier</td>
+                                    <td class="py-2">2-3 days</td>
+                                    <td class="text-body-emphasis fw-semibold text-end py-2 pe-0">$35.00</td>
+                                </tr>
+                            </tbody>
+                        </table>
+
+                        <!-- Warranty + Payment info accordion -->
+                        <div class="accordion" id="infoAccordion">
+                            <div class="accordion-item border-top">
+                                <h3 class="accordion-header" id="headingWarranty">
+                                    <button type="button" class="accordion-button animate-underline collapsed"
+                                        data-bs-toggle="collapse" data-bs-target="#warranty" aria-expanded="false"
+                                        aria-controls="warranty">
+                                        <span class="animate-target me-2">Warranty information</span>
+                                    </button>
+                                </h3>
+                                <div class="accordion-collapse collapse" id="warranty" aria-labelledby="headingWarranty"
+                                    data-bs-parent="#infoAccordion">
+                                    <div class="accordion-body">
+                                        <div class="alert d-flex alert-info mb-3" role="alert">
+                                            <i class="ci-check-shield fs-xl mt-1 me-2"></i>
+                                            <div class="fs-sm"><span class="fw-semibold">Warranty:</span> 12 months of
+                                                official manufacturer's warranty. Exchange/return of the product within 14
+                                                days.</div>
+                                        </div>
+                                        <p class="mb-0">Explore the details of our <a class="fw-medium"
+                                                href="#!">product warranties here</a>, including duration, coverage,
+                                            and any additional protection plans available. We prioritize your satisfaction,
+                                            and our warranty information is designed to keep you informed and confident in
+                                            your purchase.</p>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="accordion-item">
+                                <h3 class="accordion-header" id="headingPayment">
+                                    <button type="button" class="accordion-button animate-underline collapsed"
+                                        data-bs-toggle="collapse" data-bs-target="#payment" aria-expanded="false"
+                                        aria-controls="payment">
+                                        <span class="animate-target me-2">Payment and credit</span>
+                                    </button>
+                                </h3>
+                                <div class="accordion-collapse collapse" id="payment" aria-labelledby="headingPayment"
+                                    data-bs-parent="#infoAccordion">
+                                    <div class="accordion-body">Experience hassle-free transactions with our <a
+                                            class="fw-medium" href="#!">flexible payment options</a> and credit
+                                        facilities. Learn more about the various payment methods accepted, installment
+                                        plans, and any exclusive credit offers available to make your shopping experience
+                                        seamless.</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Sticky product preview + Add to cart CTA -->
+        <section class="sticky-product-banner sticky-top d-md-none" data-sticky-element>
+            <div class="sticky-product-banner-inner pt-5">
+                <div class="bg-body border-bottom border-light border-opacity-10 shadow pt-4 pb-2">
+                    <div class="container d-flex align-items-center">
+                        <div class="d-flex align-items-center min-w-0 ms-n2 me-3">
+                            <div class="ratio ratio-1x1 flex-shrink-0" style="width: 50px">
+                                <img src="/img/shop/electronics/thumbs/10.png" alt="iPhone 14">
+                            </div>
+                            <div class="w-100 min-w-0 ps-2">
+                                <h4 class="fs-sm fw-medium text-truncate mb-1">Apple iPhone 14 Plus 128GB Blue</h4>
+                                <div class="h6 mb-0">$940.00</div>
+                            </div>
+                        </div>
+                        <div class="d-flex gap-2 ms-auto">
+                            <button type="button" class="btn btn-icon btn-secondary animate-pulse"
+                                aria-label="Add to Wishlist">
+                                <i class="ci-heart fs-base animate-target"></i>
+                            </button>
+                            <button type="button" class="btn btn-primary animate-slide-end d-none d-sm-inline-flex">
+                                <i class="ci-shopping-cart fs-base animate-target ms-n1 me-2"></i>
+                                Add to cart
+                            </button>
+                            <button type="button" class="btn btn-icon btn-primary animate-slide-end d-sm-none"
+                                aria-label="Add to Cart">
+                                <i class="ci-shopping-cart fs-lg animate-target"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Bundle discount (Cheaper together) -->
+        <section class="container pb-5 mb-1 mb-sm-2 mb-md-3 mb-lg-4 mb-xl-5">
+            <div class="bg-body-tertiary rounded-5 pt-5">
+                <h2 class="h3 text-center pb-2 py-lg-3">Cheaper together</h2>
+                <div class="row justify-content-center px-4 px-md-0">
+                    <div class="col-md-10">
+                        <div class="overflow-auto" data-simplebar data-simplebar-auto-hide="false">
+                            <div class="d-flex align-items-center justify-content-between pb-4 mb-2"
+                                style="min-width: 840px">
+
+                                <!-- Item -->
+                                <div class="w-100" style="max-width: 306px">
+                                    <div class="form-check position-relative p-0 m-0 mb-3">
+                                        <input type="checkbox"
+                                            class="form-check-input position-absolute top-0 end-0 mt-3 me-3"
+                                            id="iphone" checked disabled>
+                                        <label for="iphone" class="d-flex justify-content-center bg-body rounded p-3">
+                                            <span class="ratio d-block"
+                                                style="max-width: 258px; --cz-aspect-ratio: calc(240 / 258 * 100%)">
+                                                <img src="/img/shop/electronics/14.png" alt="iPhone 14">
+                                            </span>
+                                        </label>
+                                    </div>
+                                    <h3 class="mb-2">
+                                        <a class="d-block fs-sm fw-medium animate-underline text-truncate" href="#!">
+                                            <span class="animate-target">Apple iPhone 14 128GB White</span>
+                                        </a>
+                                    </h3>
+                                    <div class="h6 mb-0">$940.00</div>
+                                </div>
+
+                                <div class="ci-plus fs-4 mt-n5 mx-3 mx-lg-4"></div>
+
+                                <!-- Item -->
+                                <div class="w-100" style="max-width: 306px">
+                                    <div class="form-check position-relative p-0 m-0 mb-3">
+                                        <input type="checkbox"
+                                            class="form-check-input position-absolute top-0 end-0 mt-3 me-3"
+                                            id="airpods" checked>
+                                        <label for="airpods" class="d-flex justify-content-center bg-body rounded p-3">
+                                            <span class="ratio d-block"
+                                                style="max-width: 258px; --cz-aspect-ratio: calc(240 / 258 * 100%)">
+                                                <img src="/img/shop/electronics/06.png" alt="AirPods 2 Pro">
+                                            </span>
+                                        </label>
+                                    </div>
+                                    <h3 class="mb-2">
+                                        <a class="d-block fs-sm fw-medium animate-underline text-truncate" href="#!">
+                                            <span class="animate-target">Headphones Apple AirPods 2 Pro</span>
+                                        </a>
+                                    </h3>
+                                    <div class="d-flex align-items-center gap-2">
+                                        <span class="badge bg-danger">-32%</span>
+                                        <span class="h6 mb-0">$224.00</span>
+                                        <del class="text-body-tertiary fs-xs">$330.00</del>
+                                    </div>
+                                </div>
+
+                                <div class="ci-plus fs-4 mt-n5 mx-3 mx-lg-4"></div>
+
+                                <!-- Item -->
+                                <div class="w-100" style="max-width: 306px">
+                                    <div class="form-check position-relative p-0 m-0 mb-3">
+                                        <input type="checkbox"
+                                            class="form-check-input position-absolute top-0 end-0 mt-3 me-3"
+                                            id="charger">
+                                        <label for="charger" class="d-flex justify-content-center bg-body rounded p-3">
+                                            <span class="ratio d-block"
+                                                style="max-width: 258px; --cz-aspect-ratio: calc(240 / 258 * 100%)">
+                                                <img src="/img/shop/electronics/15.png" alt="Wireless charger">
+                                            </span>
+                                        </label>
+                                    </div>
+                                    <h3 class="mb-2">
+                                        <a class="d-block fs-sm fw-medium animate-underline text-truncate" href="#!">
+                                            <span class="animate-target">Wireless charger for iPhone</span>
+                                        </a>
+                                    </h3>
+                                    <div class="d-flex align-items-center gap-2">
+                                        <span class="badge bg-danger">-48%</span>
+                                        <span class="h6 mb-0">$26.00</span>
+                                        <del class="text-body-tertiary fs-xs">$50.00</del>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <hr class="mb-0">
+                <div class="row justify-content-center p-4 px-md-0">
+                    <div class="col-md-10 d-md-flex align-items-center py-md-3">
+                        <div class="fs-sm me-3 mb-3 mb-md-0">Total for selected products</div>
+                        <div class="d-flex align-items-center ms-auto">
+                            <span class="h5 mb-0 me-4">$1,164.00</span>
+                            <button type="button" class="btn btn-primary ms-auto">Purchase together</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Trending products (Carousel) -->
+        <section class="container pb-4 pb-md-5 mb-2 mb-sm-0 mb-lg-2 mb-xl-4">
+            <h2 class="h3 border-bottom pb-4 mb-0">Trending products</h2>
+
+            <!-- Product carousel -->
+            <div class="position-relative mx-md-1">
+
+                <!-- External slider prev/next buttons visible on screens > 500px wide (sm breakpoint) -->
+                <button type="button"
+                    class="trending-prev btn btn-prev btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-start position-absolute top-50 start-0 z-2 translate-middle-y ms-n1 d-none d-sm-inline-flex"
+                    aria-label="Prev">
+                    <i class="ci-chevron-left fs-lg animate-target"></i>
+                </button>
+                <button type="button"
+                    class="trending-next btn btn-next btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-end position-absolute top-50 end-0 z-2 translate-middle-y me-n1 d-none d-sm-inline-flex"
+                    aria-label="Next">
+                    <i class="ci-chevron-right fs-lg animate-target"></i>
+                </button>
+
+                <!-- Slider -->
+                <div class="swiper py-4 px-sm-3"
+                    data-swiper='{
+            "slidesPerView": 2,
+            "spaceBetween": 24,
+            "loop": true,
+            "navigation": {
+              "prevEl": ".trending-prev",
+              "nextEl": ".trending-next"
+            },
+            "breakpoints": {
+              "768": {
+                "slidesPerView": 3
+              },
+              "992": {
+                "slidesPerView": 4
+              }
+            }
+          }'>
+                    <div class="swiper-wrapper">
+
+                        <!-- Item -->
+                        <div class="swiper-slide">
+                            <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+                                <div class="position-relative">
+                                    <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                                        <div class="d-flex flex-column gap-2">
+                                            <button type="button"
+                                                class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex"
+                                                aria-label="Add to Wishlist">
+                                                <i class="ci-heart fs-base animate-target"></i>
+                                            </button>
+                                            <button type="button"
+                                                class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex"
+                                                aria-label="Compare">
+                                                <i class="ci-refresh-cw fs-base animate-target"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                                        <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body"
+                                            data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                                            <i class="ci-more-vertical fs-lg"></i>
+                                        </button>
+                                        <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                                            <li>
+                                                <a class="dropdown-item" href="#!">
+                                                    <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                                                    Add to Wishlist
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a class="dropdown-item" href="#!">
+                                                    <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                                                    Compare
+                                                </a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                    <a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="#!">
+                                        <span
+                                            class="badge bg-danger position-absolute top-0 start-0 mt-2 ms-2 mt-lg-3 ms-lg-3">-21%</span>
+                                        <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                                            <img src="/img/shop/electronics/01.png" alt="VR Glasses">
+                                        </div>
+                                    </a>
+                                </div>
+                                <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                                    <div class="d-flex align-items-center gap-2 mb-2">
+                                        <div class="d-flex gap-1 fs-xs">
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star text-body-tertiary opacity-75"></i>
+                                        </div>
+                                        <span class="text-body-tertiary fs-xs">(123)</span>
+                                    </div>
+                                    <h3 class="pb-1 mb-2">
+                                        <a class="d-block fs-sm fw-medium text-truncate" href="#!">
+                                            <span class="animate-target">VRB01 Virtual Reality Glasses</span>
+                                        </a>
+                                    </h3>
+                                    <div class="d-flex align-items-center justify-content-between">
+                                        <div class="h5 lh-1 mb-0">$340.99 <del
+                                                class="text-body-tertiary fs-sm fw-normal">$430.00</del></div>
+                                        <button type="button"
+                                            class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2"
+                                            aria-label="Add to Cart">
+                                            <i class="ci-shopping-cart fs-base animate-target"></i>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Item -->
+                        <div class="swiper-slide">
+                            <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+                                <div class="position-relative">
+                                    <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                                        <div class="d-flex flex-column gap-2">
+                                            <button type="button"
+                                                class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex"
+                                                aria-label="Add to Wishlist">
+                                                <i class="ci-heart fs-base animate-target"></i>
+                                            </button>
+                                            <button type="button"
+                                                class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex"
+                                                aria-label="Compare">
+                                                <i class="ci-refresh-cw fs-base animate-target"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                                        <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body"
+                                            data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                                            <i class="ci-more-vertical fs-lg"></i>
+                                        </button>
+                                        <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                                            <li>
+                                                <a class="dropdown-item" href="#!">
+                                                    <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                                                    Add to Wishlist
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a class="dropdown-item" href="#!">
+                                                    <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                                                    Compare
+                                                </a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                    <a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="#!">
+                                        <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                                            <img src="/img/shop/electronics/02.png" alt="iPhone 14">
+                                        </div>
+                                    </a>
+                                </div>
+                                <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                                    <div class="d-flex align-items-center gap-2 mb-2">
+                                        <div class="d-flex gap-1 fs-xs">
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-half text-warning"></i>
+                                        </div>
+                                        <span class="text-body-tertiary fs-xs">(142)</span>
+                                    </div>
+                                    <h3 class="pb-1 mb-2">
+                                        <a class="d-block fs-sm fw-medium text-truncate" href="#!">
+                                            <span class="animate-target">Apple iPhone 14 128GB White</span>
+                                        </a>
+                                    </h3>
+                                    <div class="d-flex align-items-center justify-content-between">
+                                        <div class="h5 lh-1 mb-0">$899.00</div>
+                                        <button type="button"
+                                            class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2"
+                                            aria-label="Add to Cart">
+                                            <i class="ci-shopping-cart fs-base animate-target"></i>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Item -->
+                        <div class="swiper-slide">
+                            <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+                                <div class="position-relative">
+                                    <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                                        <div class="d-flex flex-column gap-2">
+                                            <button type="button"
+                                                class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex"
+                                                aria-label="Add to Wishlist">
+                                                <i class="ci-heart fs-base animate-target"></i>
+                                            </button>
+                                            <button type="button"
+                                                class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex"
+                                                aria-label="Compare">
+                                                <i class="ci-refresh-cw fs-base animate-target"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                                        <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body"
+                                            data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                                            <i class="ci-more-vertical fs-lg"></i>
+                                        </button>
+                                        <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                                            <li>
+                                                <a class="dropdown-item" href="#!">
+                                                    <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                                                    Add to Wishlist
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a class="dropdown-item" href="#!">
+                                                    <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                                                    Compare
+                                                </a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                    <a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="#!">
+                                        <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                                            <img src="/img/shop/electronics/03.png" alt="Smart Watch">
+                                        </div>
+                                    </a>
+                                </div>
+                                <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                                    <div class="d-flex align-items-center gap-2 mb-2">
+                                        <div class="d-flex gap-1 fs-xs">
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                        </div>
+                                        <span class="text-body-tertiary fs-xs">(67)</span>
+                                    </div>
+                                    <h3 class="pb-1 mb-2">
+                                        <a class="d-block fs-sm fw-medium text-truncate" href="#!">
+                                            <span class="animate-target">Smart Watch Series 7, White</span>
+                                        </a>
+                                    </h3>
+                                    <div class="d-flex align-items-center justify-content-between pb-2 mb-1">
+                                        <div class="h5 lh-1 mb-0">$429.00</div>
+                                        <button type="button"
+                                            class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2"
+                                            aria-label="Add to Cart">
+                                            <i class="ci-shopping-cart fs-base animate-target"></i>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Item -->
+                        <div class="swiper-slide">
+                            <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+                                <div class="position-relative">
+                                    <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                                        <div class="d-flex flex-column gap-2">
+                                            <button type="button"
+                                                class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex"
+                                                aria-label="Add to Wishlist">
+                                                <i class="ci-heart fs-base animate-target"></i>
+                                            </button>
+                                            <button type="button"
+                                                class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex"
+                                                aria-label="Compare">
+                                                <i class="ci-refresh-cw fs-base animate-target"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                                        <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body"
+                                            data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                                            <i class="ci-more-vertical fs-lg"></i>
+                                        </button>
+                                        <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                                            <li>
+                                                <a class="dropdown-item" href="#!">
+                                                    <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                                                    Add to Wishlist
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a class="dropdown-item" href="#!">
+                                                    <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                                                    Compare
+                                                </a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                    <a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="#!">
+                                        <span
+                                            class="badge bg-info position-absolute top-0 start-0 mt-2 ms-2 mt-lg-3 ms-lg-3">New</span>
+                                        <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                                            <img src="/img/shop/electronics/04.png" alt="MacBook">
+                                        </div>
+                                    </a>
+                                </div>
+                                <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                                    <div class="d-flex align-items-center gap-2 mb-2">
+                                        <div class="d-flex gap-1 fs-xs">
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-half text-warning"></i>
+                                        </div>
+                                        <span class="text-body-tertiary fs-xs">(51)</span>
+                                    </div>
+                                    <h3 class="pb-1 mb-2">
+                                        <a class="d-block fs-sm fw-medium text-truncate" href="#!">
+                                            <span class="animate-target">Laptop Apple MacBook Pro 13 M2</span>
+                                        </a>
+                                    </h3>
+                                    <div class="d-flex align-items-center justify-content-between">
+                                        <div class="h5 lh-1 mb-0">$1,200.00</div>
+                                        <button type="button"
+                                            class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2"
+                                            aria-label="Add to Cart">
+                                            <i class="ci-shopping-cart fs-base animate-target"></i>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Item -->
+                        <div class="swiper-slide">
+                            <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+                                <div class="posittion-relative">
+                                    <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                                        <div class="d-flex flex-column gap-2">
+                                            <button type="button"
+                                                class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex"
+                                                aria-label="Add to Wishlist">
+                                                <i class="ci-heart fs-base animate-target"></i>
+                                            </button>
+                                            <button type="button"
+                                                class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex"
+                                                aria-label="Compare">
+                                                <i class="ci-refresh-cw fs-base animate-target"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                                        <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body"
+                                            data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                                            <i class="ci-more-vertical fs-lg"></i>
+                                        </button>
+                                        <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                                            <li>
+                                                <a class="dropdown-item" href="#!">
+                                                    <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                                                    Add to Wishlist
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a class="dropdown-item" href="#!">
+                                                    <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                                                    Compare
+                                                </a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                    <a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="#!">
+                                        <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                                            <img src="/img/shop/electronics/08.png" alt="Bluetooth Headphones">
+                                        </div>
+                                    </a>
+                                </div>
+                                <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                                    <div class="d-flex align-items-center gap-2 mb-2">
+                                        <div class="d-flex gap-1 fs-xs">
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-half text-warning"></i>
+                                            <i class="ci-star text-body-tertiary opacity-75"></i>
+                                        </div>
+                                        <span class="text-body-tertiary fs-xs">(136)</span>
+                                    </div>
+                                    <h3 class="pb-1 mb-2">
+                                        <a class="d-block fs-sm fw-medium text-truncate" href="#!">
+                                            <span class="animate-target">Wireless Bluetooth Headphones Sony</span>
+                                        </a>
+                                    </h3>
+                                    <div class="d-flex align-items-center justify-content-between">
+                                        <div class="h5 lh-1 mb-0">$299.00</div>
+                                        <button type="button"
+                                            class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2"
+                                            aria-label="Add to Cart">
+                                            <i class="ci-shopping-cart fs-base animate-target"></i>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- External slider prev/next buttons visible on screens < 500px wide (sm breakpoint) -->
+                <div class="d-flex justify-content-center gap-2 mt-n2 mb-3 pb-1 d-sm-none">
+                    <button type="button"
+                        class="trending-prev btn btn-prev btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-start me-1"
+                        aria-label="Prev">
+                        <i class="ci-chevron-left fs-lg animate-target"></i>
+                    </button>
+                    <button type="button"
+                        class="trending-next btn btn-next btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-end"
+                        aria-label="Next">
+                        <i class="ci-chevron-right fs-lg animate-target"></i>
+                    </button>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Product details and Reviews shared container -->
+        <section class="container pb-5 mb-2 mb-md-3 mb-lg-4 mb-xl-5">
+            <div class="row">
+                <div class="col-md-7">
+
+                    <!-- Product details -->
+                    <h2 class="h3 pb-2 pb-md-3">Product details</h2>
+                    <h3 class="h6">General specs</h3>
+                    <ul class="list-unstyled d-flex flex-column gap-3 fs-sm pb-3 m-0 mb-2 mb-sm-3">
+                        <li class="d-flex align-items-center position-relative pe-4">
+                            <span>Model:</span>
+                            <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                            <span class="text-dark-emphasis fw-medium text-end">iPhone 14 Plus</span>
+                        </li>
+                        <li class="d-flex align-items-center position-relative pe-4">
+                            <span>Manufacturer:</span>
+                            <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                            <span class="text-dark-emphasis fw-medium text-end">Apple Inc.</span>
+                        </li>
+                        <li class="d-flex align-items-center position-relative pe-4">
+                            <span>Finish:</span>
+                            <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                            <span class="text-dark-emphasis fw-medium text-end">Ceramic, Glass, Aluminium</span>
+                            <i class="ci-info fs-base text-body-tertiary position-absolute top-50 end-0 translate-middle-y"
+                                data-bs-toggle="popover" data-bs-trigger="hover" data-bs-custom-class="popover-sm"
+                                data-bs-content="Ceramic shield front, Glass back and Aluminium design"></i>
+                        </li>
+                        <li class="d-flex align-items-center position-relative pe-4">
+                            <span>Capacity:</span>
+                            <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                            <span class="text-dark-emphasis fw-medium text-end">128GB</span>
+                        </li>
+                        <li class="d-flex align-items-center position-relative pe-4">
+                            <span>Chip:</span>
+                            <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                            <span class="text-dark-emphasis fw-medium text-end">A15 Bionic chip</span>
+                        </li>
+                    </ul>
+                    <h3 class="h6">Display</h3>
+                    <ul class="list-unstyled d-flex flex-column gap-3 fs-sm pb-1 m-0 mb-2 mb-sm-3">
+                        <li class="d-flex align-items-center position-relative pe-4">
+                            <span>Diagonal:</span>
+                            <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                            <span class="text-dark-emphasis fw-medium text-end">6.1"</span>
+                        </li>
+                        <li class="d-flex align-items-center position-relative pe-4">
+                            <span>Screen type:</span>
+                            <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                            <span class="text-dark-emphasis fw-medium text-end">Super Retina XDR</span>
+                            <i class="ci-info fs-base text-body-tertiary position-absolute top-50 end-0 translate-middle-y"
+                                data-bs-toggle="popover" data-bs-trigger="hover" data-bs-custom-class="popover-sm"
+                                data-bs-content="HDR display, True Tone, Wide color (P3), Haptic Touch, 800 nits brightness"></i>
+                        </li>
+                        <li class="d-flex align-items-center position-relative pe-4">
+                            <span>Resolution:</span>
+                            <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                            <span class="text-dark-emphasis fw-medium text-end">2778x1284px at 458ppi</span>
+                        </li>
+                        <li class="d-flex align-items-center position-relative pe-4">
+                            <span>Refresh rate:</span>
+                            <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
+                            <span class="text-dark-emphasis fw-medium text-end">120 Hz</span>
+                        </li>
+                    </ul>
+                    <div class="nav">
+                        <a class="nav-link text-primary animate-underline px-0"
+                            href="{{ route('second', ['shop', 'product-details-electronics'])}}">
+                            <span class="animate-target">See all product details</span>
+                            <i class="ci-chevron-right fs-base ms-1"></i>
+                        </a>
+                    </div>
+
+
+                    <!-- Reviews -->
+                    <div class="d-flex align-items-center pt-5 mb-4 mt-2 mt-md-3 mt-lg-4" id="reviews"
+                        style="scroll-margin-top: 80px">
+                        <h2 class="h3 mb-0">Reviews</h2>
+                        <button type="button" class="btn btn-secondary ms-auto" data-bs-toggle="modal"
+                            data-bs-target="#reviewForm">
+                            <i class="ci-edit-3 fs-base ms-n1 me-2"></i>
+                            Leave a review
+                        </button>
+                    </div>
+
+                    <!-- Reviews stats -->
+                    <div class="row g-4 pb-3">
+                        <div class="col-sm-4">
+
+                            <!-- Overall rating card -->
+                            <div
+                                class="d-flex flex-column align-items-center justify-content-center h-100 bg-body-tertiary rounded p-4">
+                                <div class="h1 pb-2 mb-1">4.1</div>
+                                <div class="hstack justify-content-center gap-1 fs-sm mb-2">
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star-filled text-warning"></i>
+                                    <i class="ci-star text-body-tertiary opacity-60"></i>
+                                </div>
+                                <div class="fs-sm">68 reviews</div>
+                            </div>
+                        </div>
+                        <div class="col-sm-8">
+
+                            <!-- Rating breakdown by quantity -->
+                            <div class="vstack gap-3">
+
+                                <!-- 5 stars -->
+                                <div class="hstack gap-2">
+                                    <div class="hstack fs-sm gap-1">
+                                        5<i class="ci-star-filled text-warning"></i>
+                                    </div>
+                                    <div class="progress w-100" role="progressbar" aria-label="Five stars"
+                                        aria-valuenow="54" aria-valuemin="0" aria-valuemax="100" style="height: 4px">
+                                        <div class="progress-bar bg-warning rounded-pill" style="width: 54%"></div>
+                                    </div>
+                                    <div class="fs-sm text-nowrap text-end" style="width: 40px;">37</div>
+                                </div>
+
+                                <!-- 4 stars -->
+                                <div class="hstack gap-2">
+                                    <div class="hstack fs-sm gap-1">
+                                        4<i class="ci-star-filled text-warning"></i>
+                                    </div>
+                                    <div class="progress w-100" role="progressbar" aria-label="Four stars"
+                                        aria-valuenow="23.5" aria-valuemin="0" aria-valuemax="100" style="height: 4px">
+                                        <div class="progress-bar bg-warning rounded-pill" style="width: 23.5%"></div>
+                                    </div>
+                                    <div class="fs-sm text-nowrap text-end" style="width: 40px;">16</div>
+                                </div>
+
+                                <!-- 3 stars -->
+                                <div class="hstack gap-2">
+                                    <div class="hstack fs-sm gap-1">
+                                        3<i class="ci-star-filled text-warning"></i>
+                                    </div>
+                                    <div class="progress w-100" role="progressbar" aria-label="Three stars"
+                                        aria-valuenow="13" aria-valuemin="0" aria-valuemax="100" style="height: 4px">
+                                        <div class="progress-bar bg-warning rounded-pill" style="width: 13%"></div>
+                                    </div>
+                                    <div class="fs-sm text-nowrap text-end" style="width: 40px;">9</div>
+                                </div>
+
+                                <!-- 2 stars -->
+                                <div class="hstack gap-2">
+                                    <div class="hstack fs-sm gap-1">
+                                        2<i class="ci-star-filled text-warning"></i>
+                                    </div>
+                                    <div class="progress w-100" role="progressbar" aria-label="Two stars"
+                                        aria-valuenow="6" aria-valuemin="0" aria-valuemax="100" style="height: 4px">
+                                        <div class="progress-bar bg-warning rounded-pill" style="width: 6%"></div>
+                                    </div>
+                                    <div class="fs-sm text-nowrap text-end" style="width: 40px;">4</div>
+                                </div>
+
+                                <!-- 1 star -->
+                                <div class="hstack gap-2">
+                                    <div class="hstack fs-sm gap-1">
+                                        1<i class="ci-star-filled text-warning"></i>
+                                    </div>
+                                    <div class="progress w-100" role="progressbar" aria-label="One star"
+                                        aria-valuenow="3.5" aria-valuemin="0" aria-valuemax="100" style="height: 4px">
+                                        <div class="progress-bar bg-warning rounded-pill" style="width: 3.5%"></div>
+                                    </div>
+                                    <div class="fs-sm text-nowrap text-end" style="width: 40px;">3</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Review -->
+                    <div class="border-bottom py-3 mb-3">
+                        <div class="d-flex align-items-center mb-3">
+                            <div class="text-nowrap me-3">
+                                <span class="h6 mb-0">Rafael Marquez</span>
+                                <i class="ci-check-circle text-success align-middle ms-1" data-bs-toggle="tooltip"
+                                    data-bs-placement="top" data-bs-custom-class="tooltip-sm"
+                                    data-bs-title="Verified customer"></i>
+                            </div>
+                            <span class="text-body-secondary fs-sm ms-auto">June 28, 2024</span>
+                        </div>
+                        <div class="d-flex gap-1 fs-sm pb-2 mb-1">
+                            <i class="ci-star-filled text-warning"></i>
+                            <i class="ci-star-filled text-warning"></i>
+                            <i class="ci-star-filled text-warning"></i>
+                            <i class="ci-star-filled text-warning"></i>
+                            <i class="ci-star-filled text-warning"></i>
+                        </div>
+                        <ul class="list-inline gap-2 pb-2 mb-1">
+                            <li class="fs-sm me-4"><span class="text-dark-emphasis fw-medium">Color:</span> Blue</li>
+                            <li class="fs-sm"><span class="text-dark-emphasis fw-medium">Model:</span> 128GB</li>
+                        </ul>
+                        <p class="fs-sm">The phone has a new A15 Bionic chip, which makes it lightning-fast and
+                            responsive. The camera system has also been upgraded, and it now includes a 12-megapixel
+                            ultra-wide lens and a 12-megapixel wide lens.</p>
+                        <ul class="list-unstyled fs-sm pb-2 mb-1">
+                            <li><span class="text-dark-emphasis fw-medium">Pros:</span> Powerful A15 Bionic chip, improved
+                                camera</li>
+                            <li><span class="text-dark-emphasis fw-medium">Cons:</span> High price tag</li>
+                        </ul>
+                        <div class="nav align-items-center">
+                            <button type="button" class="nav-link animate-underline px-0">
+                                <i class="ci-corner-down-right fs-base ms-1 me-1"></i>
+                                <span class="animate-target">Reply</span>
+                            </button>
+                            <button type="button" class="nav-link text-body-secondary animate-scale px-0 ms-auto me-n1">
+                                <i class="ci-thumbs-up fs-base animate-target me-1"></i>
+                                0
+                            </button>
+                            <hr class="vr my-2 mx-3">
+                            <button type="button" class="nav-link text-body-secondary animate-scale px-0 ms-n1">
+                                <i class="ci-thumbs-down fs-base animate-target me-1"></i>
+                                0
+                            </button>
+                        </div>
+                    </div>
+
+                    <!-- Review -->
+                    <div class="border-bottom py-3 mb-3">
+                        <div class="d-flex align-items-center mb-3">
+                            <div class="text-nowrap me-3">
+                                <span class="h6 mb-0">Daniel Adams</span>
+                            </div>
+                            <span class="text-body-secondary fs-sm ms-auto">May 15, 2024</span>
+                        </div>
+                        <div class="d-flex gap-1 fs-sm pb-2 mb-1">
+                            <i class="ci-star-filled text-warning"></i>
+                            <i class="ci-star-filled text-warning"></i>
+                            <i class="ci-star-filled text-warning"></i>
+                            <i class="ci-star-filled text-warning"></i>
+                            <i class="ci-star text-body-tertiary opacity-75"></i>
+                        </div>
+                        <ul class="list-inline gap-2 pb-2 mb-1">
+                            <li class="fs-sm me-4"><span class="text-dark-emphasis fw-medium">Color:</span> Blue</li>
+                            <li class="fs-sm"><span class="text-dark-emphasis fw-medium">Model:</span> 128GB</li>
+                        </ul>
+                        <p class="fs-sm">The phone has a new A15 Bionic chip, which makes it lightning-fast and
+                            responsive. The camera system has also been upgraded, and it now includes a 12-megapixel
+                            ultra-wide lens and a 12-megapixel wide lens.</p>
+                        <ul class="list-unstyled fs-sm pb-2 mb-1">
+                            <li><span class="text-dark-emphasis fw-medium">Pros:</span> Powerful A15 Bionic chip, improved
+                                camera</li>
+                            <li><span class="text-dark-emphasis fw-medium">Cons:</span> High price tag</li>
+                        </ul>
+                        <div class="nav align-items-center">
+                            <button type="button" class="nav-link animate-underline px-0">
+                                <i class="ci-corner-down-right fs-base ms-1 me-1"></i>
+                                <span class="animate-target">Reply</span>
+                            </button>
+                            <button type="button" class="nav-link text-body-secondary animate-scale px-0 ms-auto me-n1">
+                                <i class="ci-thumbs-up text-success fs-base animate-target me-1"></i>
+                                18
+                            </button>
+                            <hr class="vr my-2 mx-3">
+                            <button type="button" class="nav-link text-body-secondary animate-scale px-0 ms-n1">
+                                <i class="ci-thumbs-down text-danger fs-base animate-target me-1"></i>
+                                2
+                            </button>
+                        </div>
+                    </div>
+
+                    <div class="nav">
+                        <a class="nav-link text-primary animate-underline px-0"
+                            href="{{ route('second', ['shop', 'product-reviews-electronics'])}}">
+                            <span class="animate-target">See all reviews</span>
+                            <i class="ci-chevron-right fs-base ms-1"></i>
+                        </a>
+                    </div>
+                </div>
+
+
+                <!-- Sticky product preview visible on screens > 991px wide (lg breakpoint) -->
+                <aside class="col-md-5 col-xl-4 offset-xl-1 d-none d-md-block" style="margin-top: -100px">
+                    <div class="position-sticky top-0 ps-3 ps-lg-4 ps-xl-0" style="padding-top: 100px">
+                        <div class="border rounded p-3 p-lg-4">
+                            <div class="d-flex align-items-center mb-3">
+                                <div class="ratio ratio-1x1 flex-shrink-0" style="width: 110px">
+                                    <img src="/img/shop/electronics/thumbs/10.png" width="110" alt="iPhone 14">
+                                </div>
+                                <div class="w-100 min-w-0 ps-2 ps-sm-3">
+                                    <div class="d-flex align-items-center gap-2 mb-2">
+                                        <div class="d-flex gap-1 fs-xs">
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star text-body-tertiary opacity-75"></i>
+                                        </div>
+                                        <span class="text-body-tertiary fs-xs">68</span>
+                                    </div>
+                                    <h4 class="fs-sm fw-medium mb-2">Apple iPhone 14 Plus 128GB Blue</h4>
+                                    <div class="h5 mb-0">$940.00</div>
+                                </div>
+                            </div>
+                            <div class="d-flex gap-2 gap-lg-3">
+                                <button type="button" class="btn btn-primary w-100 animate-slide-end">
+                                    <i class="ci-shopping-cart fs-base animate-target ms-n1 me-2"></i>
+                                    Add to cart
+                                </button>
+                                <button type="button" class="btn btn-icon btn-secondary animate-pulse"
+                                    data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-sm"
+                                    data-bs-title="Add to Wishlist" aria-label="Add to Wishlist">
+                                    <i class="ci-heart fs-base animate-target"></i>
+                                </button>
+                                <button type="button" class="btn btn-icon btn-secondary animate-rotate"
+                                    data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-sm"
+                                    data-bs-title="Compare" aria-label="Compare">
+                                    <i class="ci-refresh-cw fs-base animate-target"></i>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </aside>
+            </div>
+        </section>
+
+
+        <!-- Viewed products (Carousel) -->
+        <section class="container pb-4 pb-md-5 mb-2 mb-sm-0 mb-lg-2 mb-xl-4">
+            <h2 class="h3 border-bottom pb-4 mb-0">Viewed products</h2>
+
+            <!-- Product carousel -->
+            <div class="position-relative mx-md-1">
+
+                <!-- External slider prev/next buttons visible on screens > 500px wide (sm breakpoint) -->
+                <button type="button"
+                    class="viewed-prev btn btn-prev btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-start position-absolute top-50 start-0 z-2 translate-middle-y ms-n1 d-none d-sm-inline-flex"
+                    aria-label="Prev">
+                    <i class="ci-chevron-left fs-lg animate-target"></i>
+                </button>
+                <button type="button"
+                    class="viewed-next btn btn-next btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-end position-absolute top-50 end-0 z-2 translate-middle-y me-n1 d-none d-sm-inline-flex"
+                    aria-label="Next">
+                    <i class="ci-chevron-right fs-lg animate-target"></i>
+                </button>
+
+                <!-- Slider -->
+                <div class="swiper py-4 px-sm-3"
+                    data-swiper='{
+            "slidesPerView": 2,
+            "spaceBetween": 24,
+            "loop": true,
+            "navigation": {
+              "prevEl": ".viewed-prev",
+              "nextEl": ".viewed-next"
+            },
+            "breakpoints": {
+              "768": {
+                "slidesPerView": 3
+              },
+              "992": {
+                "slidesPerView": 4
+              }
+            }
+          }'>
+                    <div class="swiper-wrapper">
+
+                        <!-- Item -->
+                        <div class="swiper-slide">
+                            <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+                                <div class="position-relative">
+                                    <div
+                                        class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                                        <div class="d-flex flex-column gap-2">
+                                            <button type="button"
+                                                class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex"
+                                                aria-label="Add to Wishlist">
+                                                <i class="ci-heart fs-base animate-target"></i>
+                                            </button>
+                                            <button type="button"
+                                                class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex"
+                                                aria-label="Compare">
+                                                <i class="ci-refresh-cw fs-base animate-target"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                                        <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body"
+                                            data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                                            <i class="ci-more-vertical fs-lg"></i>
+                                        </button>
+                                        <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                                            <li>
+                                                <a class="dropdown-item" href="#!">
+                                                    <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                                                    Add to Wishlist
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a class="dropdown-item" href="#!">
+                                                    <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                                                    Compare
+                                                </a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                    <a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="#!">
+                                        <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                                            <img src="/img/shop/electronics/13.png" alt="Dualsense Edge">
+                                        </div>
+                                    </a>
+                                </div>
+                                <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                                    <div class="d-flex align-items-center gap-2 mb-2">
+                                        <div class="d-flex gap-1 fs-xs">
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                        </div>
+                                        <span class="text-body-tertiary fs-xs">(187)</span>
+                                    </div>
+                                    <h3 class="pb-1 mb-2">
+                                        <a class="d-block fs-sm fw-medium text-truncate" href="#!">
+                                            <span class="animate-target">Sony Dualsense Edge Controller</span>
+                                        </a>
+                                    </h3>
+                                    <div class="d-flex align-items-center justify-content-between">
+                                        <div class="h5 lh-1 mb-0">$200.00</div>
+                                        <button type="button"
+                                            class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2"
+                                            aria-label="Add to Cart">
+                                            <i class="ci-shopping-cart fs-base animate-target"></i>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Item -->
+                        <div class="swiper-slide">
+                            <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+                                <div class="position-relative">
+                                    <div
+                                        class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                                        <div class="d-flex flex-column gap-2">
+                                            <button type="button"
+                                                class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex"
+                                                aria-label="Add to Wishlist">
+                                                <i class="ci-heart fs-base animate-target"></i>
+                                            </button>
+                                            <button type="button"
+                                                class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex"
+                                                aria-label="Compare">
+                                                <i class="ci-refresh-cw fs-base animate-target"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                                        <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body"
+                                            data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                                            <i class="ci-more-vertical fs-lg"></i>
+                                        </button>
+                                        <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                                            <li>
+                                                <a class="dropdown-item" href="#!">
+                                                    <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                                                    Add to Wishlist
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a class="dropdown-item" href="#!">
+                                                    <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                                                    Compare
+                                                </a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                    <a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="#!">
+                                        <span
+                                            class="badge bg-danger position-absolute top-0 start-0 mt-2 ms-2 mt-lg-3 ms-lg-3">-17%</span>
+                                        <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                                            <img src="/img/shop/electronics/11.png" alt="Nikon Camera">
+                                        </div>
+                                    </a>
+                                </div>
+                                <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                                    <div class="d-flex align-items-center gap-2 mb-2">
+                                        <div class="d-flex gap-1 fs-xs">
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                        </div>
+                                        <span class="text-body-tertiary fs-xs">(14)</span>
+                                    </div>
+                                    <h3 class="pb-1 mb-2">
+                                        <a class="d-block fs-sm fw-medium text-truncate" href="#!">
+                                            <span class="animate-target">VRB01 Camera Nikon Max</span>
+                                        </a>
+                                    </h3>
+                                    <div class="d-flex align-items-center justify-content-between">
+                                        <div class="h5 lh-1 mb-0">$652.00 <del
+                                                class="text-body-tertiary fs-sm fw-normal">$785.00</del></div>
+                                        <button type="button"
+                                            class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2"
+                                            aria-label="Add to Cart">
+                                            <i class="ci-shopping-cart fs-base animate-target"></i>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Item -->
+                        <div class="swiper-slide">
+                            <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+                                <div class="position-relative">
+                                    <div
+                                        class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                                        <div class="d-flex flex-column gap-2">
+                                            <button type="button"
+                                                class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex"
+                                                aria-label="Add to Wishlist">
+                                                <i class="ci-heart fs-base animate-target"></i>
+                                            </button>
+                                            <button type="button"
+                                                class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex"
+                                                aria-label="Compare">
+                                                <i class="ci-refresh-cw fs-base animate-target"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                                        <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body"
+                                            data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                                            <i class="ci-more-vertical fs-lg"></i>
+                                        </button>
+                                        <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                                            <li>
+                                                <a class="dropdown-item" href="#!">
+                                                    <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                                                    Add to Wishlist
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a class="dropdown-item" href="#!">
+                                                    <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                                                    Compare
+                                                </a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                    <a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="#!">
+                                        <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                                            <img src="/img/shop/electronics/10.png" alt="iPhone 14">
+                                        </div>
+                                    </a>
+                                </div>
+                                <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                                    <div class="d-flex align-items-center gap-2 mb-2">
+                                        <div class="d-flex gap-1 fs-xs">
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-half text-warning"></i>
+                                        </div>
+                                        <span class="text-body-tertiary fs-xs">(335)</span>
+                                    </div>
+                                    <h3 class="pb-1 mb-2">
+                                        <a class="d-block fs-sm fw-medium text-truncate" href="#!">
+                                            <span class="animate-target">Apple iPhone 14 128GB Blue</span>
+                                        </a>
+                                    </h3>
+                                    <div class="d-flex align-items-center justify-content-between">
+                                        <div class="h5 lh-1 mb-0">$899.00</div>
+                                        <button type="button"
+                                            class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2"
+                                            aria-label="Add to Cart">
+                                            <i class="ci-shopping-cart fs-base animate-target"></i>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Item -->
+                        <div class="swiper-slide">
+                            <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+                                <div class="posittion-relative">
+                                    <div
+                                        class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                                        <div class="d-flex flex-column gap-2">
+                                            <button type="button"
+                                                class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex"
+                                                aria-label="Add to Wishlist">
+                                                <i class="ci-heart fs-base animate-target"></i>
+                                            </button>
+                                            <button type="button"
+                                                class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex"
+                                                aria-label="Compare">
+                                                <i class="ci-refresh-cw fs-base animate-target"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                                        <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body"
+                                            data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                                            <i class="ci-more-vertical fs-lg"></i>
+                                        </button>
+                                        <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                                            <li>
+                                                <a class="dropdown-item" href="#!">
+                                                    <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                                                    Add to Wishlist
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a class="dropdown-item" href="#!">
+                                                    <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                                                    Compare
+                                                </a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                    <a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="#!">
+                                        <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                                            <img src="/img/shop/electronics/07.png" alt="iPad Pro">
+                                        </div>
+                                    </a>
+                                </div>
+                                <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                                    <div class="d-flex align-items-center gap-2 mb-2">
+                                        <div class="d-flex gap-1 fs-xs">
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-half text-warning"></i>
+                                        </div>
+                                        <span class="text-body-tertiary fs-xs">(49)</span>
+                                    </div>
+                                    <h3 class="pb-1 mb-2">
+                                        <a class="d-block fs-sm fw-medium text-truncate" href="#!">
+                                            <span class="animate-target">Tablet Apple iPad Pro M1</span>
+                                        </a>
+                                    </h3>
+                                    <div class="d-flex align-items-center justify-content-between">
+                                        <div class="h5 lh-1 mb-0">$739.00</div>
+                                        <button type="button"
+                                            class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2"
+                                            aria-label="Add to Cart">
+                                            <i class="ci-shopping-cart fs-base animate-target"></i>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Item -->
+                        <div class="swiper-slide">
+                            <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+                                <div class="position-relative">
+                                    <div
+                                        class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                                        <div class="d-flex flex-column gap-2">
+                                            <button type="button"
+                                                class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex"
+                                                aria-label="Add to Wishlist">
+                                                <i class="ci-heart fs-base animate-target"></i>
+                                            </button>
+                                            <button type="button"
+                                                class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex"
+                                                aria-label="Compare">
+                                                <i class="ci-refresh-cw fs-base animate-target"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                                        <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body"
+                                            data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                                            <i class="ci-more-vertical fs-lg"></i>
+                                        </button>
+                                        <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                                            <li>
+                                                <a class="dropdown-item" href="#!">
+                                                    <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                                                    Add to Wishlist
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a class="dropdown-item" href="#!">
+                                                    <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                                                    Compare
+                                                </a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                    <a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="#!">
+                                        <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                                            <img src="/img/shop/electronics/06.png" alt="AirPods 2">
+                                        </div>
+                                    </a>
+                                </div>
+                                <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                                    <div class="d-flex align-items-center gap-2 mb-2">
+                                        <div class="d-flex gap-1 fs-xs">
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star-filled text-warning"></i>
+                                            <i class="ci-star text-body-tertiary opacity-75"></i>
+                                        </div>
+                                        <span class="text-body-tertiary fs-xs">(78)</span>
+                                    </div>
+                                    <h3 class="pb-1 mb-2">
+                                        <a class="d-block fs-sm fw-medium text-truncate" href="#!">
+                                            <span class="animate-target">Headphones Apple AirPods 2 Pro</span>
+                                        </a>
+                                    </h3>
+                                    <div class="d-flex align-items-center justify-content-between">
+                                        <div class="h5 lh-1 mb-0">$224.00</div>
+                                        <button type="button"
+                                            class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2"
+                                            aria-label="Add to Cart">
+                                            <i class="ci-shopping-cart fs-base animate-target"></i>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- External slider prev/next buttons visible on screens < 500px wide (sm breakpoint) -->
+                <div class="d-flex justify-content-center gap-2 mt-n2 mb-3 pb-1 d-sm-none">
+                    <button type="button"
+                        class="viewed-prev btn btn-prev btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-start me-1"
+                        aria-label="Prev">
+                        <i class="ci-chevron-left fs-lg animate-target"></i>
+                    </button>
+                    <button type="button"
+                        class="viewed-next btn btn-next btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-end"
+                        aria-label="Next">
+                        <i class="ci-chevron-right fs-lg animate-target"></i>
+                    </button>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Subscription form + Vlog -->
+        <section class="bg-body-tertiary py-5">
+            <div class="container pt-sm-2 pt-md-3 pt-lg-4 pt-xl-5">
+                <div class="row">
+                    <div class="col-md-6 col-lg-5 mb-5 mb-md-0">
+                        <h2 class="h4 mb-2">Sign up to our newsletter</h2>
+                        <p class="text-body pb-2 pb-ms-3">Receive our latest updates about our products &amp; promotions
+                        </p>
+                        <form class="d-flex needs-validation pb-1 pb-sm-2 pb-md-3 pb-lg-0 mb-4 mb-lg-5" novalidate>
+                            <div class="position-relative w-100 me-2">
+                                <input type="email" class="form-control form-control-lg" placeholder="Your email"
+                                    required>
+                            </div>
+                            <button type="submit" class="btn btn-lg btn-primary">Subscribe</button>
+                        </form>
+                        <div class="d-flex gap-3">
+                            <a class="btn btn-icon btn-secondary rounded-circle" href="#!"
+                                aria-label="Instagram">
+                                <i class="ci-instagram fs-base"></i>
+                            </a>
+                            <a class="btn btn-icon btn-secondary rounded-circle" href="#!" aria-label="Facebook">
+                                <i class="ci-facebook fs-base"></i>
+                            </a>
+                            <a class="btn btn-icon btn-secondary rounded-circle" href="#!" aria-label="YouTube">
+                                <i class="ci-youtube fs-base"></i>
+                            </a>
+                            <a class="btn btn-icon btn-secondary rounded-circle" href="#!" aria-label="Telegram">
+                                <i class="ci-telegram fs-base"></i>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="col-md-6 col-lg-5 col-xl-4 offset-lg-1 offset-xl-2">
+                        <ul class="list-unstyled d-flex flex-column gap-4 ps-md-4 ps-lg-0 mb-3">
+                            <li class="nav flex-nowrap align-items-center position-relative">
+                                <img src="/img/home/electronics/vlog/01.jpg" class="rounded" width="140"
+                                    alt="Video cover">
+                                <div class="ps-3">
+                                    <div class="fs-xs text-body-secondary lh-sm mb-2">6:16</div>
+                                    <a class="nav-link fs-sm hover-effect-underline stretched-link p-0" href="#!">5
+                                        New Cool Gadgets You Must See on Cartzilla - Cheap Budget</a>
+                                </div>
+                            </li>
+                            <li class="nav flex-nowrap align-items-center position-relative">
+                                <img src="/img/home/electronics/vlog/02.jpg" class="rounded" width="140"
+                                    alt="Video cover">
+                                <div class="ps-3">
+                                    <div class="fs-xs text-body-secondary lh-sm mb-2">10:20</div>
+                                    <a class="nav-link fs-sm hover-effect-underline stretched-link p-0" href="#!">5
+                                        Super Useful Gadgets on Cartzilla You Must Have in 2023</a>
+                                </div>
+                            </li>
+                            <li class="nav flex-nowrap align-items-center position-relative">
+                                <img src="/img/home/electronics/vlog/03.jpg" class="rounded" width="140"
+                                    alt="Video cover">
+                                <div class="ps-3">
+                                    <div class="fs-xs text-body-secondary lh-sm mb-2">8:40</div>
+                                    <a class="nav-link fs-sm hover-effect-underline stretched-link p-0"
+                                        href="#!">Top 5 New Amazing Gadgets on Cartzilla You Must See</a>
+                                </div>
+                            </li>
+                        </ul>
+                        <div class="nav ps-md-4 ps-lg-0">
+                            <a class="btn nav-link animate-underline text-decoration-none px-0" href="#!">
+                                <span class="animate-target">View all</span>
+                                <i class="ci-chevron-right fs-base ms-1"></i>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    @include('layouts.partials/footer')
+@endsection
+
+@section('scripts')
+@endsection
diff --git a/resources/views/shop/product-grocery.blade.php b/resources/views/shop/product-grocery.blade.php
new file mode 100644
index 0000000..da25678
--- /dev/null
+++ b/resources/views/shop/product-grocery.blade.php
@@ -0,0 +1,1996 @@
+@extends('layouts.landing', ['title' => 'Grocery Store - Product Page'])
+
+@section('content')
+    @include('layouts.partials/offcanvas2')
+
+    <div class="offcanvas offcanvas-end pb-sm-2 px-sm-2" id="deliveryOptions" tabindex="-1"
+        aria-labelledby="deliveryOptionsLabel" style="width: 500px">
+
+        <!-- Header with nav tabs -->
+        <div class="offcanvas-header flex-column align-items-start py-3 pt-lg-4">
+            <div class="d-flex align-items-center justify-content-between w-100 pb-xl-1 mb-4">
+                <h4 class="offcanvas-title" id="deliveryOptionsLabel">Delivery options</h4>
+                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+            </div>
+            <ul class="nav nav-pills nav-justified w-100" role="tablist">
+                <li class="nav-item" role="presentation">
+                    <button type="button" class="nav-link active" id="delivery-tab" data-bs-toggle="tab"
+                        data-bs-target="#delivery-tab-pane" role="tab" aria-controls="delivery-tab-pane"
+                        aria-selected="true">
+                        <i class="ci-shopping-bag fs-base ms-n1 me-2"></i>
+                        Delivery
+                    </button>
+                </li>
+                <li class="nav-item" role="presentation">
+                    <button type="button" class="nav-link" id="pickup-tab" data-bs-toggle="tab"
+                        data-bs-target="#pickup-tab-pane" role="tab" aria-controls="pickup-tab-pane"
+                        aria-selected="false">
+                        <i class="ci-box fs-base ms-n1 me-2"></i>
+                        Pickup
+                    </button>
+                </li>
+            </ul>
+        </div>
+
+        <div class="offcanvas-body tab-content py-2 py-sm-3">
+
+            <!-- Delivery tab -->
+            <div class="tab-pane fade show active" id="delivery-tab-pane" role="tabpanel" aria-labelledby="delivery-tab">
+
+                <!-- Address options collapse -->
+                <div class="collapse delivery-address show" id="deliveryAddressOptions">
+                    <div class="mt-n3">
+                        <div class="form-check border-bottom py-4 m-0">
+                            <input type="radio" class="form-check-input" id="address-1" name="delivery-address" checked>
+                            <label for="address-1" class="form-check-label text-dark-emphasis fw-semibold">567 Cherry Lane
+                                Apt B12
+                                Sacramento, 95829</label>
+                        </div>
+                        <div class="form-check border-bottom py-4 m-0">
+                            <input type="radio" class="form-check-input" id="address-2" name="delivery-address">
+                            <div class="d-flex w-100">
+                                <label for="address-2" class="form-check-label text-dark-emphasis me-3">1901 Thornridge Cir.
+                                    Shiloh,
+                                    Hawaii, 81063</label>
+                                <button type="button" class="btn-close fs-sm ms-auto" data-bs-toggle="tooltip"
+                                    data-bs-custom-class="tooltip-sm" data-bs-title="Remove" aria-label="Remove"></button>
+                            </div>
+                        </div>
+                        <div class="form-check border-bottom py-4 m-0">
+                            <input type="radio" class="form-check-input" id="address-3" name="delivery-address">
+                            <div class="d-flex w-100">
+                                <label for="address-3" class="form-check-label text-dark-emphasis me-3">3517 W. Gray St.
+                                    Utica,
+                                    Pennsylvania, 57867</label>
+                                <button type="button" class="btn-close fs-sm ms-auto" data-bs-toggle="tooltip"
+                                    data-bs-custom-class="tooltip-sm" data-bs-title="Remove" aria-label="Remove"></button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Add new address collapse -->
+                <div class="collapse delivery-address" id="deliveryAddressAdd">
+                    <div class="nav mb-4">
+                        <a class="nav-link animate-underline p-0" href=".delivery-address" data-bs-toggle="collapse"
+                            aria-expanded="true" aria-controls="deliveryAddressOptions deliveryAddressAdd">
+                            <i class="ci-chevron-left fs-lg ms-n1 me-1"></i>
+                            <span class="animate-target">Back to my addresses</span>
+                        </a>
+                    </div>
+                    <div class="d-flex align-items-center justify-content-between mb-3 mb-lg-4">
+                        <h5 class="h6 mb-0 me-3">Add an address to start ordering</h5>
+                        <a class="btn btn-sm btn-outline-primary rounded-pill" href="#!">
+                            <i class="ci-map-pin fs-base ms-n1 me-1"></i>
+                            Find on map
+                        </a>
+                    </div>
+                    <div class="mb-3 mb-lg-4">
+                        <label class="form-label">State *</label>
+                        <select class="form-select form-select-lg rounded-pill"
+                            data-select='{
+                "classNames": {
+                  "containerInner": ["form-select", "form-select-lg", "rounded-pill"]
+                }
+              }'
+                            aria-label="Large pill select">
+                            <option value="">Select state</option>
+                            <option value="Arizona">Arizona</option>
+                            <option value="California">California</option>
+                            <option value="Montana">Montana</option>
+                            <option value="Nevada">Nevada</option>
+                            <option value="New Mexico">New Mexico</option>
+                            <option value="Texas">Texas</option>
+                        </select>
+                    </div>
+                    <div class="mb-3 mb-lg-4">
+                        <label for="my-postcode" class="form-label">Postcode *</label>
+                        <input type="text" class="form-control form-control-lg rounded-pill" id="my-postcode">
+                    </div>
+                    <div class="mb-3 mb-lg-4">
+                        <label class="form-label">City *</label>
+                        <select class="form-select form-select-lg rounded-pill"
+                            data-select='{
+                "classNames": {
+                  "containerInner": ["form-select", "form-select-lg", "rounded-pill"]
+                }
+              }'
+                            aria-label="Large pill select">
+                            <option value="">Select city</option>
+                            <option value="Austin">Austin</option>
+                            <option value="Helena">Helena</option>
+                            <option value="Sacramento">Sacramento</option>
+                            <option value="Santa Fe">Santa Fe</option>
+                            <option value="Las Vegas">Las Vegas</option>
+                            <option value="Phoenix">Phoenix</option>
+                        </select>
+                    </div>
+                    <label for="my-address" class="form-label">Street address *</label>
+                    <input type="text" class="form-control form-control-lg rounded-pill" id="my-address">
+                </div>
+
+                <!-- Add address collapse toggle -->
+                <div class="nav">
+                    <a class="nav-link hiding-collapse-toggle animate-underline collapsed px-0 mt-4"
+                        href=".delivery-address" data-bs-toggle="collapse" aria-expanded="false"
+                        aria-controls="deliveryAddressOptions deliveryAddressAdd">
+                        <span class="animate-target">Add delivery address</span>
+                        <i class="ci-plus fs-base ms-1"></i>
+                    </a>
+                </div>
+            </div>
+
+            <!-- Pickup tab -->
+            <div class="tab-pane fade" id="pickup-tab-pane" role="tabpanel" aria-labelledby="pickup-tab">
+
+                <!-- Pickup store options collapse -->
+                <div class="collapse pickup-options show" id="pickupStoreOptions">
+                    <div class="mt-n3">
+                        <div class="form-check border-bottom py-4 m-0">
+                            <input type="radio" class="form-check-input" id="store-1" name="pickup-store" checked>
+                            <div>
+                                <div class="d-flex w-100 pb-2 mb-1">
+                                    <label for="store-1"
+                                        class="form-check-label text-dark-emphasis fw-semibold me-3">Sacramento
+                                        Supercenter</label>
+                                    <button type="button" class="btn-close fs-sm ms-auto" data-bs-toggle="tooltip"
+                                        data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
+                                        aria-label="Remove"></button>
+                                </div>
+                                <div class="fs-xs mb-2">8270 Delta Shores Cir S, Sacramento, CA 95832</div>
+                                <div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">07:00 - 22:00</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="form-check border-bottom py-4 m-0">
+                            <input type="radio" class="form-check-input" id="store-2" name="pickup-store">
+                            <div>
+                                <div class="d-flex w-100 pb-2 mb-1">
+                                    <label for="store-2"
+                                        class="form-check-label text-dark-emphasis fw-semibold me-3">West Sacramento
+                                        Supercenter</label>
+                                    <button type="button" class="btn-close fs-sm ms-auto" data-bs-toggle="tooltip"
+                                        data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
+                                        aria-label="Remove"></button>
+                                </div>
+                                <div class="fs-xs mb-2">755 Riverpoint Ct, West Sacramento, CA 95605</div>
+                                <div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">07:00 - 21:00</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="form-check border-bottom py-4 m-0">
+                            <input type="radio" class="form-check-input" id="store-3" name="pickup-store">
+                            <div>
+                                <div class="d-flex w-100 pb-2 mb-1">
+                                    <label for="store-3"
+                                        class="form-check-label text-dark-emphasis fw-semibold me-3">Rancho Cordova
+                                        Supercenter</label>
+                                    <button type="button" class="btn-close fs-sm ms-auto" data-bs-toggle="tooltip"
+                                        data-bs-custom-class="tooltip-sm" data-bs-title="Remove"
+                                        aria-label="Remove"></button>
+                                </div>
+                                <div class="fs-xs mb-2">10655 Folsom Blvd, Rancho Cordova, CA 95670</div>
+                                <div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">08:00 - 23:00</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Add new pickup store collapse -->
+                <div class="collapse pickup-options" id="pickupStoreAdd">
+                    <div class="nav mb-4">
+                        <a class="nav-link animate-underline p-0" href=".pickup-options" data-bs-toggle="collapse"
+                            aria-expanded="true" aria-controls="pickupStoreOptions pickupStoreAdd">
+                            <i class="ci-chevron-left fs-lg ms-n1 me-1"></i>
+                            <span class="animate-target">Back to my stores</span>
+                        </a>
+                    </div>
+                    <div class="d-flex align-items-center justify-content-between mb-3 mb-lg-4">
+                        <h5 class="h6 mb-0 me-3">Select a suitable store</h5>
+                        <a class="btn btn-sm btn-outline-primary rounded-pill" href="#!">
+                            <i class="ci-map-pin fs-base ms-n1 me-1"></i>
+                            Find on map
+                        </a>
+                    </div>
+                    <div class="mb-3 mb-lg-4">
+                        <label class="form-label">State *</label>
+                        <select class="form-select form-select-lg rounded-pill"
+                            data-select='{
+                "classNames": {
+                  "containerInner": ["form-select", "form-select-lg", "rounded-pill"]
+                }
+              }'
+                            aria-label="Large pill select">
+                            <option value="">Select state</option>
+                            <option value="Arizona">Arizona</option>
+                            <option value="California" selected>California</option>
+                            <option value="Montana">Montana</option>
+                            <option value="Nevada">Nevada</option>
+                            <option value="New Mexico">New Mexico</option>
+                            <option value="Texas">Texas</option>
+                        </select>
+                    </div>
+                    <div class="mb-4">
+                        <label class="form-label">City *</label>
+                        <select class="form-select form-select-lg rounded-pill"
+                            data-select='{
+                "classNames": {
+                  "containerInner": ["form-select", "form-select-lg", "rounded-pill"]
+                }
+              }'
+                            aria-label="Large pill select">
+                            <option value="">Select city</option>
+                            <option value="Austin">Austin</option>
+                            <option value="Helena">Helena</option>
+                            <option value="Sacramento" selected>Sacramento</option>
+                            <option value="Santa Fe">Santa Fe</option>
+                            <option value="Las Vegas">Las Vegas</option>
+                            <option value="Phoenix">Phoenix</option>
+                        </select>
+                    </div>
+                    <div class="fs-xs fw-medium text-uppercase text-body-secondary">Found stores:</div>
+                    <div class="form-check border-bottom py-4 m-0">
+                        <input type="radio" class="form-check-input" id="store-4" name="found-store">
+                        <div>
+                            <label for="store-4"
+                                class="form-check-label text-dark-emphasis fw-semibold pb-2 mb-1">Sacramento
+                                Supercenter</label>
+                            <div class="fs-xs mb-2">8270 Delta Shores Cir S, Sacramento, CA 95832</div>
+                            <div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">07:00 - 22:00</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="form-check border-bottom py-4 m-0">
+                        <input type="radio" class="form-check-input" id="store-5" name="found-store">
+                        <div>
+                            <label for="store-5" class="form-check-label text-dark-emphasis fw-semibold pb-2 mb-1">West
+                                Sacramento
+                                Supercenter</label>
+                            <div class="fs-xs mb-2">755 Riverpoint Ct, West Sacramento, CA 95605</div>
+                            <div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">07:00 - 21:00</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="form-check border-bottom py-4 m-0">
+                        <input type="radio" class="form-check-input" id="store-6" name="found-store">
+                        <div>
+                            <label for="store-6" class="form-check-label text-dark-emphasis fw-semibold pb-2 mb-1">Rancho
+                                Cordova
+                                Supercenter</label>
+                            <div class="fs-xs mb-2">10655 Folsom Blvd, Rancho Cordova, CA 95670</div>
+                            <div class="fs-xs">Open: <span class="text-dark-emphasis fw-medium">08:00 - 23:00</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Add address collapse toggle -->
+                <div class="nav">
+                    <a class="nav-link hiding-collapse-toggle animate-underline collapsed px-0 mt-4"
+                        href=".pickup-options" data-bs-toggle="collapse" aria-expanded="false"
+                        aria-controls="pickupStoreOptions pickupStoreAdd">
+                        <span class="animate-target">Add store address</span>
+                        <i class="ci-plus fs-base ms-1"></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+
+        <!-- Footer -->
+        <div class="offcanvas-header">
+            <button type="button" class="btn btn-lg btn-primary w-100 rounded-pill">Confirm address</button>
+        </div>
+    </div>
+
+    @include('layouts.partials/menu-offcanvas')
+
+    <header class="navbar navbar-expand navbar-sticky sticky-top d-block bg-body z-fixed py-1 py-lg-0 py-xl-1 px-0"
+        data-sticky-element>
+        <div class="container justify-content-start py-2 py-lg-3">
+
+            <!-- Offcanvas menu toggler (Hamburger) -->
+            <button type="button" class="navbar-toggler d-block flex-shrink-0 me-3 me-sm-4" data-bs-toggle="offcanvas"
+                data-bs-target="#navbarNav" aria-controls="navbarNav" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+
+            <!-- Navbar brand (Logo) -->
+            <a class="navbar-brand fs-2 p-0 pe-lg-2 pe-xxl-0 me-0 me-sm-3 me-md-4 me-xxl-5"
+                href="{{ route('second', ['home', 'grocery']) }}">Cartzilla</a>
+
+            <!-- Categories dropdown visible on screens > 991px wide (lg breakpoint) -->
+            <div class="dropdown d-none d-lg-block w-100 me-4" style="max-width: 200px">
+                <button type="button" class="btn btn-lg btn-secondary w-100 border-0 rounded-pill"
+                    data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    <i class="ci-grid fs-lg me-2 ms-n1"></i>
+                    Categories
+                    <i class="ci-chevron-down fs-lg me-2 ms-auto me-n1"></i>
+                </button>
+                <div class="dropdown-menu rounded-4 p-4" style="--cz-dropdown-spacer: .75rem; margin-left: -75px">
+                    <div class="d-flex gap-4">
+                        <div style="min-width: 170px">
+                            <div class="h6">Bakery &amp; bread</div>
+                            <ul class="nav flex-column gap-2 mt-n2">
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery']) }}'">Shop all</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery']) }}'">Bread</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery']) }}'">Pastries</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery']) }}'">Bakery cookies</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery']) }}'">Cupcakes</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery']) }}'">Buns &amp; rolls</a>
+                                </li>
+                            </ul>
+                            <div class="h6 pt-4">Meat products</div>
+                            <ul class="nav flex-column gap-2 mt-n2">
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery']) }}'">Shop all</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery']) }}'">Fresh meat</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery']) }}'">Processed meat</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery']) }}'">Seafood</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery']) }}'">Poultry products</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery']) }}'">Prepared meat</a>
+                                </li>
+                            </ul>
+                        </div>
+                        <div style="min-width: 170px">
+                            <div class="h6">Vegetables</div>
+                            <ul class="nav flex-column gap-2 mt-n2">
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery']) }}'">Shop all</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery']) }}'">Leafy greens</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery']) }}'">Root vegetables</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery']) }}'">Allium vegetables</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery']) }}'">Peppers and tomatoes</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery']) }}'">Cruciferous</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery']) }}'">Seasonal squashes</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery']) }}'">Beans, peas &amp; lentils</a>
+                                </li>
+                            </ul>
+                            <div class="h6 pt-4">Sauces and ketchup</div>
+                            <ul class="nav flex-column gap-2 mt-n2">
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery']) }}'">Shop all</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery']) }}'">Tomato-based sauces</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery']) }}'">Salad dressing</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery']) }}'">Hot sauces</a>
+                                </li>
+                            </ul>
+                        </div>
+                        <div style="min-width: 170px">
+                            <div class="h6">Fresh fruits</div>
+                            <ul class="nav flex-column gap-2 mt-n2">
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery']) }}">Shop all</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery']) }}">Citrus fruits</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery']) }}">Berries</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery']) }}">Tropical fruits</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery']) }}">Stone fruits</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery']) }}">Exotic fruits</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery']) }}">Melons</a>
+                                </li>
+                            </ul>
+                            <div class="h6 pt-4">Italian dinner</div>
+                            <ul class="nav flex-column gap-2 mt-n2">
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery']) }}">Shop all</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery']) }}">Pasta &amp; sauces</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery']) }}">Italian cheese</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery']) }}">Italian meats</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery']) }}">Desserts &amp; beverages</a>
+                                </li>
+                            </ul>
+                        </div>
+                        <div style="min-width: 170px">
+                            <div class="h6">Beverages</div>
+                            <ul class="nav flex-column gap-2 mt-n2">
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery']) }}">Shop all</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery']) }}">Soft drinks</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery']) }}">Juices</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery']) }}">Sports &amp; energy drinks</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery']) }}">Tea and coffee</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery']) }}">Alcoholic beverages</a>
+                                </li>
+                            </ul>
+                            <div class="h6 pt-4">Dairy &amp; eggs</div>
+                            <ul class="nav flex-column gap-2 mt-n2">
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery']) }}">Shop all</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery']) }}">Chees</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery']) }}">Milk &amp; yogurt</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery']) }}">Sour cream</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery']) }}">Eggs</a>
+                                </li>
+                                <li class="d-flex w-100 pt-1">
+                                    <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                        href="{{ route('second', ['shop', 'catalog-grocery']) }}">Butter &amp; margarine</a>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Search bar visible on screens > 768px wide (md breakpoint) -->
+            <div class="position-relative w-100 d-none d-md-block me-3 me-xl-4">
+                <input type="search" class="form-control form-control-lg rounded-pill" placeholder="Search for products"
+                    aria-label="Search">
+                <button type="button"
+                    class="btn btn-icon btn-ghost fs-lg btn-secondary text-bo border-0 position-absolute top-0 end-0 rounded-circle mt-1 me-1"
+                    aria-label="Search button">
+                    <i class="ci-search"></i>
+                </button>
+            </div>
+
+            <!-- Delivery options toggle visible on screens > 1200px wide (xl breakpoint) -->
+            <div class="nav me-4 me-xxl-5 d-none d-xl-block">
+                <a class="nav-link flex-column align-items-start animate-underline p-0" href="#deliveryOptions"
+                    data-bs-toggle="offcanvas" aria-controls="deliveryOptions">
+                    <div class="h6 fs-sm mb-0">Delivery</div>
+                    <div class="d-flex align-items-center fs-sm fw-normal text-body">
+                        <span class="animate-target text-nowrap">Set your address</span>
+                        <i class="ci-chevron-down fs-base ms-1"></i>
+                    </div>
+                </a>
+            </div>
+
+            <!-- Button group -->
+            <div class="d-flex align-items-center gap-md-1 gap-lg-2 ms-auto">
+
+                <!-- Theme switcher (light/dark/auto) -->
+                <div class="dropdown">
+                    <button type="button"
+                        class="theme-switcher btn btn-icon btn-outline-secondary fs-lg border-0 rounded-circle animate-scale"
+                        data-bs-toggle="dropdown" aria-expanded="false" aria-label="Toggle theme (light)">
+                        <span class="theme-icon-active d-flex animate-target">
+                            <i class="ci-sun"></i>
+                        </span>
+                    </button>
+                    <ul class="dropdown-menu" style="--cz-dropdown-min-width: 9rem">
+                        <li>
+                            <button type="button" class="dropdown-item active" data-bs-theme-value="light"
+                                aria-pressed="true">
+                                <span class="theme-icon d-flex fs-base me-2">
+                                    <i class="ci-sun"></i>
+                                </span>
+                                <span class="theme-label">Light</span>
+                                <i class="item-active-indicator ci-check ms-auto"></i>
+                            </button>
+                        </li>
+                        <li>
+                            <button type="button" class="dropdown-item" data-bs-theme-value="dark"
+                                aria-pressed="false">
+                                <span class="theme-icon d-flex fs-base me-2">
+                                    <i class="ci-moon"></i>
+                                </span>
+                                <span class="theme-label">Dark</span>
+                                <i class="item-active-indicator ci-check ms-auto"></i>
+                            </button>
+                        </li>
+                        <li>
+                            <button type="button" class="dropdown-item" data-bs-theme-value="auto"
+                                aria-pressed="false">
+                                <span class="theme-icon d-flex fs-base me-2">
+                                    <i class="ci-auto"></i>
+                                </span>
+                                <span class="theme-label">Auto</span>
+                                <i class="item-active-indicator ci-check ms-auto"></i>
+                            </button>
+                        </li>
+                    </ul>
+                </div>
+
+                <!-- Search toggle button visible on screens < 768px wide (md breakpoint) -->
+                <button type="button"
+                    class="btn btn-icon fs-xl btn-outline-secondary border-0 rounded-circle animate-shake d-md-none"
+                    data-bs-toggle="collapse" data-bs-target="#searchBar" aria-controls="searchBar"
+                    aria-label="Toggle search bar">
+                    <i class="ci-search animate-target"></i>
+                </button>
+
+                <!-- Delivery options button visible on screens < 1200px wide (xl breakpoint) -->
+                <button type="button"
+                    class="btn btn-icon fs-lg btn-outline-secondary border-0 rounded-circle animate-scale d-xl-none"
+                    data-bs-toggle="offcanvas" data-bs-target="#deliveryOptions" aria-controls="deliveryOptions"
+                    aria-label="Toggle delivery options offcanvas">
+                    <i class="ci-map-pin animate-target"></i>
+                </button>
+
+                <!-- Account button visible on screens > 768px wide (md breakpoint) -->
+                <a class="btn btn-icon fs-lg btn-outline-secondary border-0 rounded-circle animate-shake d-none d-md-inline-flex"
+                    href="{{ route('second', ['account', 'signin']) }}">
+                    <i class="ci-user animate-target"></i>
+                    <span class="visually-hidden">Account</span>
+                </a>
+
+                <!-- Cart button -->
+                <button type="button"
+                    class="btn btn-icon fs-xl btn-outline-secondary position-relative border-0 rounded-circle animate-scale"
+                    data-bs-toggle="offcanvas" data-bs-target="#shoppingCart" aria-controls="shoppingCart"
+                    aria-label="Shopping cart">
+                    <span class="position-absolute top-0 start-100 badge fs-xs text-bg-primary rounded-pill ms-n3 z-2"
+                        style="--cz-badge-padding-y: .25em; --cz-badge-padding-x: .42em">8</span>
+                    <i class="ci-shopping-cart animate-target"></i>
+                </button>
+            </div>
+        </div>
+
+        <!-- Search collapse available on screens < 768px wide (md breakpoint) -->
+        <div class="collapse d-md-none" id="searchBar">
+            <div class="container pt-2 pb-3">
+                <div class="position-relative">
+                    <i class="ci-search position-absolute top-50 translate-middle-y d-flex fs-lg ms-3"></i>
+                    <input type="search" class="form-control form-icon-start rounded-pill"
+                        placeholder="Search for products" data-autofocus="collapse">
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <section class="border-top">
+        <div class="container py-lg-1">
+            <div class="overflow-auto" data-simplebar>
+                <div class="nav flex-nowrap justify-content-between gap-4 py-2">
+                    <a class="nav-link align-items-center animate-underline gap-2 p-0" href="{{ route('second', ['shop', 'catalog-grocery']) }}">
+                        <span class="d-flex align-items-center justify-content-center bg-body-tertiary rounded-circle"
+                            style="width: 40px; height: 40px">
+                            <i class="ci-percent text-primary fs-xl"></i>
+                        </span>
+                        <span class="d-block animate-target fw-semibold text-nowrap ms-1">Weekly sale</span>
+                    </a>
+                    <a class="nav-link align-items-center animate-underline gap-2 p-0" href="{{ route('second', ['shop', 'catalog-grocery']) }}">
+                        <span class="d-flex align-items-center justify-content-center bg-body-tertiary rounded-circle"
+                            style="width: 40px; height: 40px">
+                            <img src="/img/mega-menu/grocery/th01.png" width="30" alt="Image">
+                        </span>
+                        <span class="d-block animate-target fw-semibold text-nowrap ms-1">Vegetables</span>
+                    </a>
+                    <a class="nav-link align-items-center animate-underline gap-2 p-0" href="{{ route('second', ['shop', 'catalog-grocery']) }}">
+                        <span class="d-flex align-items-center justify-content-center bg-body-tertiary rounded-circle"
+                            style="width: 40px; height: 40px">
+                            <img src="/img/mega-menu/grocery/th02.png" width="30" alt="Image">
+                        </span>
+                        <span class="d-block animate-target fw-semibold text-nowrap ms-1">Easter is coming</span>
+                    </a>
+                    <a class="nav-link align-items-center animate-underline gap-2 m-0" href="{{ route('second', ['shop', 'catalog-grocery']) }}">
+                        <span class="d-flex align-items-center justify-content-center bg-body-tertiary rounded-circle"
+                            style="width: 40px; height: 40px">
+                            <img src="/img/mega-menu/grocery/th03.png" width="30" alt="Image">
+                        </span>
+                        <span class="d-block animate-target fw-semibold text-nowrap ms-1">Poultry meat</span>
+                    </a>
+                    <a class="nav-link align-items-center animate-underline gap-2 p-0" href="{{ route('second', ['shop', 'catalog-grocery']) }}">
+                        <span class="d-flex align-items-center justify-content-center bg-body-tertiary rounded-circle"
+                            style="width: 40px; height: 40px">
+                            <img src="/img/mega-menu/grocery/th04.png" width="30" alt="Image">
+                        </span>
+                        <span class="d-block animate-target fw-semibold text-nowrap ms-1">Fresh fruits</span>
+                    </a>
+                    <a class="nav-link align-items-center animate-underline gap-2 p-0" href="{{ route('second', ['shop', 'catalog-grocery']) }}">
+                        <span class="d-flex align-items-center justify-content-center bg-body-tertiary rounded-circle"
+                            style="width: 40px; height: 40px">
+                            <img src="/img/mega-menu/grocery/th05.png" width="30" alt="Image">
+                        </span>
+                        <span class="d-block animate-target fw-semibold text-nowrap ms-1">St. Patrick's day</span>
+                    </a>
+                    <a class="nav-link align-items-center animate-underline gap-2 p-0" href="{{ route('second', ['shop', 'catalog-grocery']) }}">
+                        <span class="d-flex align-items-center justify-content-center bg-body-tertiary rounded-circle"
+                            style="width: 40px; height: 40px">
+                            <img src="/img/mega-menu/grocery/th06.png" width="30" alt="Image">
+                        </span>
+                        <span class="d-block animate-target fw-semibold text-nowrap ms-1">Exotic fruits</span>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <main class="content-wrapper">
+
+        <!-- Breadcrumb -->
+        <nav class="container position-relative z-2 pt-lg-2 mt-3 mt-lg-4" aria-label="breadcrumb">
+            <ol class="breadcrumb mb-0">
+                <li class="breadcrumb-item"><a href="{{ route('second', ['home', 'grocery']) }}">Home</a></li>
+                <li class="breadcrumb-item"><a href="{{ route('second', ['shop', 'catalog-grocery']) }}">Shop</a></li>
+                <li class="breadcrumb-item active" aria-current="page">Product page</li>
+            </ol>
+        </nav>
+
+        <!-- Product gallery + Product details -->
+        <section class="container pt-md-4 pb-5 mt-md-2 mt-lg-3 mb-2 mb-sm-3 mb-lg-4 mb-xl-5">
+            <div class="row align-items-start">
+
+                <!-- Product gallery -->
+                <div class="col-md-6 col-lg-7 sticky-md-top z-1 mb-4 mb-md-0" style="margin-top: -120px">
+                    <div class="d-flex" style="padding-top: 120px">
+
+                        <!-- Thumbnails -->
+                        <div class="swiper swiper-load swiper-thumbs d-none d-lg-block w-100 me-xl-3" id="thumbs"
+                            data-swiper='{
+                "direction": "vertical",
+                "spaceBetween": 12,
+                "slidesPerView": 4,
+                "watchSlidesProgress": true
+              }'
+                            style="max-width: 96px; height: 420px;">
+                            <div class="swiper-wrapper flex-column">
+                                <div class="swiper-slide swiper-thumb">
+                                    <div class="ratio ratio-1x1" style="max-width: 94px">
+                                        <img src="/img/shop/grocery/product/th01.png" class="swiper-thumb-img"
+                                            alt="Thumbnail">
+                                    </div>
+                                </div>
+                                <div class="swiper-slide swiper-thumb">
+                                    <div class="ratio ratio-1x1" style="max-width: 94px">
+                                        <img src="/img/shop/grocery/product/th02.png" class="swiper-thumb-img"
+                                            alt="Thumbnail">
+                                    </div>
+                                </div>
+                                <div class="swiper-slide swiper-thumb">
+                                    <div class="ratio ratio-1x1" style="max-width: 94px">
+                                        <img src="/img/shop/grocery/product/th03.png" class="swiper-thumb-img"
+                                            alt="Thumbnail">
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Preview (Large image) -->
+                        <div class="swiper w-100"
+                            data-swiper='{
+                "loop": false,
+                "thumbs": {
+                  "swiper": "#thumbs"
+                },
+                "pagination": {
+                  "el": ".swiper-pagination",
+                  "clickable": true
+                }
+              }'>
+                            <div class="swiper-wrapper">
+                                <div class="swiper-slide">
+                                    <a class="ratio ratio-1x1 d-block cursor-zoom-in"
+                                        href="/img/shop/grocery/product/01.png" data-glightbox
+                                        data-gallery="product-gallery">
+                                        <img src="/img/shop/grocery/product/01.png" alt="Preview">
+                                    </a>
+                                </div>
+                                <div class="swiper-slide">
+                                    <a class="ratio ratio-1x1 d-block cursor-zoom-in"
+                                        href="/img/shop/grocery/product/02.png" data-glightbox
+                                        data-gallery="product-gallery">
+                                        <img src="/img/shop/grocery/product/02.png" alt="Preview">
+                                    </a>
+                                </div>
+                                <div class="swiper-slide">
+                                    <a class="ratio ratio-1x1 d-block cursor-zoom-in"
+                                        href="/img/shop/grocery/product/03.png" data-glightbox
+                                        data-gallery="product-gallery">
+                                        <img src="/img/shop/grocery/product/03.png" alt="Preview">
+                                    </a>
+                                </div>
+                            </div>
+
+                            <!-- Slider pagination (Bullets) visible on screens > 991px wide (lg breakpoint) -->
+                            <div class="swiper-pagination mb-n3 d-lg-none"></div>
+                        </div>
+                    </div>
+                </div>
+
+
+                <!-- Product details -->
+                <div class="col-md-6 col-lg-5 position-relative">
+                    <div class="ps-xxl-3">
+                        <p class="fs-sm text-body-secondary">Cereals / Nestlé</p>
+                        <h1 class="h5 mb-2">Muesli Fitness Nutritious Energy, gluten free</h1>
+                        <div class="fs-sm fw-medium">500g</div>
+                        <div class="border rounded-pill px-4 py-2 my-4">
+                            <div class="text-dark-emphasis fs-sm py-1">
+                                We will deliver your goods as soon as possible
+                                <a class="text-dark-emphasis fw-medium ms-1" href="#!">Check availability</a>
+                            </div>
+                        </div>
+                        <div class="h3">$2.15</div>
+                        <div class="d-flex gap-3 mb-4">
+                            <div class="count-input flex-shrink-0 rounded-pill">
+                                <button type="button" class="btn btn-icon btn-lg" data-decrement
+                                    aria-label="Decrement quantity" disabled>
+                                    <i class="ci-minus"></i>
+                                </button>
+                                <input type="number" class="form-control form-control-lg" value="1"
+                                    min="1" readonly>
+                                <button type="button" class="btn btn-icon btn-lg" data-increment
+                                    aria-label="Increment quantity">
+                                    <i class="ci-plus"></i>
+                                </button>
+                            </div>
+                            <button type="button" class="btn btn-lg btn-primary rounded-pill w-100">Add to
+                                cart</button>
+                        </div>
+                        <p class="fs-sm mb-4">Muesli Fitness Nutritious Energy is a popular breakfast cereal that is a
+                            healthy and
+                            nutritious way to start your day. This delicious cereal is made up of a combination of whole
+                            grains, nuts,
+                            seeds, and dried fruits.</p>
+                        <div class="d-flex flex-wrap gap-3 gap-xxl-4 fs-sm text-dark-emphasis mb-2">
+                            <div class="d-flex align-items-center me-3">
+                                <i class="ci-gluten-free fs-xl text-body-emphasis me-2"></i>
+                                Gluten-free
+                            </div>
+                            <div class="d-flex align-items-center me-3">
+                                <i class="ci-broccoli fs-xl text-body-emphasis me-2"></i>
+                                Plant based
+                            </div>
+                            <div class="d-flex align-items-center me-3">
+                                <i class="ci-leaf fs-xl text-body-emphasis me-2"></i>
+                                Vegan
+                            </div>
+                            <div class="d-flex align-items-center">
+                                <i class="ci-avocado fs-xl text-body-emphasis me-2"></i>
+                                Keto
+                            </div>
+                        </div>
+
+                        <!-- Related products -->
+                        <h2 class="h5 pt-5">Related products</h2>
+                        <div class="d-flex border rounded-5 px-2 mb-4">
+                            <div class="w-50">
+                                <div class="card product-card h-100 bg-transparent border-0 shadow-none">
+                                    <div class="position-relative z-2">
+                                        <button type="button"
+                                            class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                            aria-label="Add to Wishlist">
+                                            <i class="ci-heart animate-target"></i>
+                                        </button>
+                                        <a class="d-block p-2 p-lg-3" href="#!">
+                                            <div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
+                                                <img src="/img/shop/grocery/12.png" alt="Image">
+                                            </div>
+                                        </a>
+                                        <div class="position-absolute w-100 start-0 bottom-0">
+                                            <div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
+                                                <div
+                                                    class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
+                                                    <button type="button" class="btn btn-icon btn-sm btn-primary"
+                                                        data-decrement aria-label="Decrement quantity">
+                                                        <i class="ci-minus fs-sm"></i>
+                                                    </button>
+                                                    <input type="number"
+                                                        class="form-control form-control-sm bg-primary text-white w-100"
+                                                        value="0" min="0" readonly>
+                                                    <button type="button"
+                                                        class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
+                                                        data-increment aria-label="Increment quantity">
+                                                        <span data-count-input-value></span>
+                                                        <i class="ci-plus fs-sm"></i>
+                                                    </button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
+                                        <div class="h6 mb-2">$2.59</div>
+                                        <h3 class="fs-sm lh-base mb-0">
+                                            <a class="hover-effect-underline fw-normal" href="#!">Soft creme cheese
+                                                with greens Exquisa</a>
+                                        </h3>
+                                    </div>
+                                    <div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">150g</div>
+                                </div>
+                            </div>
+                            <hr class="vr my-0 mx-2">
+                            <div class="w-50">
+                                <div class="card product-card h-100 bg-transparent border-0 shadow-none">
+                                    <div class="position-relative z-2">
+                                        <button type="button"
+                                            class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                            aria-label="Add to Wishlist">
+                                            <i class="ci-heart animate-target"></i>
+                                        </button>
+                                        <a class="d-block p-2 p-lg-3" href="#!">
+                                            <div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
+                                                <img src="/img/shop/grocery/11.png" alt="Image">
+                                            </div>
+                                        </a>
+                                        <div class="position-absolute w-100 start-0 bottom-0">
+                                            <div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
+                                                <div
+                                                    class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
+                                                    <button type="button" class="btn btn-icon btn-sm btn-primary"
+                                                        data-decrement aria-label="Decrement quantity">
+                                                        <i class="ci-minus fs-sm"></i>
+                                                    </button>
+                                                    <input type="number"
+                                                        class="form-control form-control-sm bg-primary text-white w-100"
+                                                        value="0" min="0" readonly>
+                                                    <button type="button"
+                                                        class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
+                                                        data-increment aria-label="Increment quantity">
+                                                        <span data-count-input-value></span>
+                                                        <i class="ci-plus fs-sm"></i>
+                                                    </button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
+                                        <div class="h6 mb-2">$3.40</div>
+                                        <h3 class="fs-sm lh-base mb-0">
+                                            <a class="hover-effect-underline fw-normal" href="#!">Fresh red
+                                                grapefruit</a>
+                                        </h3>
+                                    </div>
+                                    <div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">1kg</div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Product info accordion -->
+                        <div class="accordion accordion-alt-icon py-2 mb-4" id="productAccordion">
+                            <div class="accordion-item">
+                                <h3 class="accordion-header" id="headingProductInfo">
+                                    <button type="button" class="accordion-button animate-underline collapsed"
+                                        data-bs-toggle="collapse" data-bs-target="#productInfo" aria-expanded="false"
+                                        aria-controls="productInfo">
+                                        <span class="animate-target me-2">About this product</span>
+                                    </button>
+                                </h3>
+                                <div class="accordion-collapse collapse" id="productInfo"
+                                    aria-labelledby="headingProductInfo" data-bs-parent="#productAccordion">
+                                    <div class="accordion-body">Muesli Fitness Nutritious Energy is a delicious and
+                                        satisfying blend of
+                                        gluten-free oats, crunchy nuts, nutritious seeds, and flavorful dried fruits. Packed
+                                        with essential
+                                        nutrients and fiber, this muesli is perfect for those looking to start their day
+                                        with a nutritious
+                                        breakfast or for a healthy snack on the go. Enjoy the goodness of natural
+                                        ingredients without
+                                        compromising on taste or quality. Ideal for individuals following a gluten-free diet
+                                        or anyone
+                                        seeking a wholesome and energizing option.</div>
+                                </div>
+                            </div>
+                            <div class="accordion-item">
+                                <h3 class="accordion-header" id="headingProductIngredients">
+                                    <button type="button" class="accordion-button animate-underline collapsed"
+                                        data-bs-toggle="collapse" data-bs-target="#productIngredients"
+                                        aria-expanded="false" aria-controls="productIngredients">
+                                        <span class="animate-target me-2">Ingredients</span>
+                                    </button>
+                                </h3>
+                                <div class="accordion-collapse collapse" id="productIngredients"
+                                    aria-labelledby="headingProductIngredients" data-bs-parent="#productAccordion">
+                                    <div class="accordion-body">
+                                        <ul class="m-0">
+                                            <li>Gluten-free oats</li>
+                                            <li>Almonds</li>
+                                            <li>Sunflower seeds</li>
+                                            <li>Pumpkin seeds</li>
+                                            <li>Dried cranberries (cranberries, sugar, sunflower oil)</li>
+                                            <li>Dried apricots (apricots, rice flour)</li>
+                                            <li>Coconut flakes</li>
+                                            <li>Flax seeds</li>
+                                            <li>Chia seeds</li>
+                                            <li>Cinnamon</li>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="accordion-item">
+                                <h3 class="accordion-header" id="headingProductCalories">
+                                    <button type="button" class="accordion-button animate-underline collapsed"
+                                        data-bs-toggle="collapse" data-bs-target="#productCalories"
+                                        aria-expanded="false" aria-controls="productCalories">
+                                        <span class="animate-target me-2">Calories</span>
+                                    </button>
+                                </h3>
+                                <div class="accordion-collapse collapse" id="productCalories"
+                                    aria-labelledby="headingProductCalories" data-bs-parent="#productAccordion">
+                                    <div class="accordion-body">Approximately <span
+                                            class="text-body-emphasis fw-medium">400 kcal /
+                                            100g</span> of product</div>
+                                </div>
+                            </div>
+                            <div class="accordion-item">
+                                <h3 class="accordion-header" id="headingProductDelivery">
+                                    <button type="button" class="accordion-button animate-underline collapsed"
+                                        data-bs-toggle="collapse" data-bs-target="#productDelivery"
+                                        aria-expanded="false" aria-controls="productDelivery">
+                                        <span class="animate-target me-2">Delivery info</span>
+                                    </button>
+                                </h3>
+                                <div class="accordion-collapse collapse" id="productDelivery"
+                                    aria-labelledby="headingProductDelivery" data-bs-parent="#productAccordion">
+                                    <div class="accordion-body">
+                                        <ul class="m-0">
+                                            <li>Enjoy free delivery for orders <span
+                                                    class="text-body-emphasis fw-medium">over $50!</span>
+                                            </li>
+                                            <li>For orders <span class="text-body-emphasis fw-medium">below $50</span>, a
+                                                standard delivery
+                                                fee of <span class="text-body-emphasis fw-medium">$5</span> applies.</li>
+                                            <li>We strive to deliver your order in a timely manner to ensure your
+                                                satisfaction.</li>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="d-flex align-items-center position-relative text-dark-emphasis">
+                            <i class="ci-edit fs-lg me-2"></i>
+                            <a class="stretched-link fs-sm text-dark-emphasis" href="#!">Report incorrect product
+                                information</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Bought together carousel -->
+        <section class="container pb-5 mb-2 mb-sm-3 mb-lg-4 mb-xl-5">
+            <div class="d-flex align-items-center justify-content-between border-bottom pb-3 pb-md-4 mb-3 mb-md-4">
+                <h2 class="h3 mb-0">Often bought with</h2>
+
+                <!-- Slider prev/next buttons -->
+                <div class="d-flex gap-2 ms-3">
+                    <button type="button"
+                        class="btn btn-icon btn-outline-secondary animate-slide-start rounded-circle me-1"
+                        id="prevBtn" aria-label="Prev">
+                        <i class="ci-chevron-left fs-lg animate-target"></i>
+                    </button>
+                    <button type="button" class="btn btn-icon btn-outline-secondary animate-slide-end rounded-circle"
+                        id="nextBtn" aria-label="Next">
+                        <i class="ci-chevron-right fs-lg animate-target"></i>
+                    </button>
+                </div>
+            </div>
+
+            <!-- Slider -->
+            <div class="swiper"
+                data-swiper='{
+          "slidesPerView": 2,
+          "spaceBetween": 24,
+          "loop": true,
+          "navigation": {
+            "prevEl": "#prevBtn",
+            "nextEl": "#nextBtn"
+          },
+          "breakpoints": {
+            "500": {
+              "slidesPerView": 3
+            },
+            "768": {
+              "slidesPerView": 4
+            },
+            "1100": {
+              "slidesPerView": 5
+            }
+          }
+        }'>
+                <div class="swiper-wrapper">
+
+                    <!-- Product -->
+                    <div class="swiper-slide h-auto">
+                        <div class="card product-card h-100 bg-transparent border-0 shadow-none">
+                            <div class="position-relative z-2">
+                                <span
+                                    class="badge text-bg-danger position-absolute top-0 start-0 z-2 mt-1 mt-sm-2 ms-1 ms-sm-2">-30%</span>
+                                <button type="button"
+                                    class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                    aria-label="Add to Wishlist">
+                                    <i class="ci-heart animate-target"></i>
+                                </button>
+                                <a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
+                                    <div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
+                                        <img src="/img/shop/grocery/02.png" alt="Image">
+                                    </div>
+                                </a>
+                                <div class="position-absolute w-100 start-0 bottom-0">
+                                    <div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
+                                        <div
+                                            class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
+                                            <button type="button" class="btn btn-icon btn-sm btn-primary"
+                                                data-decrement aria-label="Decrement quantity">
+                                                <i class="ci-minus fs-sm"></i>
+                                            </button>
+                                            <input type="number"
+                                                class="form-control form-control-sm bg-primary text-white w-100"
+                                                value="0" min="0" readonly>
+                                            <button type="button"
+                                                class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
+                                                data-increment aria-label="Increment quantity">
+                                                <span data-count-input-value></span>
+                                                <i class="ci-plus fs-sm"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
+                                <div class="h6 mb-2">$3.12 <del
+                                        class="fs-sm fw-normal text-body-tertiary ms-1">$4.05</del></div>
+                                <h3 class="fs-sm lh-base mb-0">
+                                    <a class="hover-effect-underline fw-normal" href="{{ route('second', ['shop', 'product-grocery']) }}">Fresh
+                                        orange Klementina,
+                                        Spain</a>
+                                </h3>
+                            </div>
+                            <div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">1kg</div>
+                        </div>
+                    </div>
+
+                    <!-- Product -->
+                    <div class="swiper-slide h-auto">
+                        <div class="card product-card h-100 bg-transparent border-0 shadow-none">
+                            <div class="position-relative z-2">
+                                <button type="button"
+                                    class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                    aria-label="Add to Wishlist">
+                                    <i class="ci-heart animate-target"></i>
+                                </button>
+                                <a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
+                                    <div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
+                                        <img src="/img/shop/grocery/03.png" alt="Image">
+                                    </div>
+                                </a>
+                                <div class="position-absolute w-100 start-0 bottom-0">
+                                    <div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
+                                        <div
+                                            class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
+                                            <button type="button" class="btn btn-icon btn-sm btn-primary"
+                                                data-decrement aria-label="Decrement quantity">
+                                                <i class="ci-minus fs-sm"></i>
+                                            </button>
+                                            <input type="number"
+                                                class="form-control form-control-sm bg-primary text-white w-100"
+                                                value="0" min="0" readonly>
+                                            <button type="button"
+                                                class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
+                                                data-increment aria-label="Increment quantity">
+                                                <span data-count-input-value></span>
+                                                <i class="ci-plus fs-sm"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
+                                <div class="h6 mb-2">$0.80</div>
+                                <h3 class="fs-sm lh-base mb-0">
+                                    <a class="hover-effect-underline fw-normal" href="{{ route('second', ['shop', 'product-grocery']) }}">Pepsi
+                                        soda classic,
+                                        can</a>
+                                </h3>
+                            </div>
+                            <div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">330ml</div>
+                        </div>
+                    </div>
+
+                    <!-- Product -->
+                    <div class="swiper-slide h-auto">
+                        <div class="card product-card h-100 bg-transparent border-0 shadow-none">
+                            <div class="position-relative z-2">
+                                <button type="button"
+                                    class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                    aria-label="Add to Wishlist">
+                                    <i class="ci-heart animate-target"></i>
+                                </button>
+                                <a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
+                                    <div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
+                                        <img src="/img/shop/grocery/04.png" alt="Image">
+                                    </div>
+                                </a>
+                                <div class="position-absolute w-100 start-0 bottom-0">
+                                    <div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
+                                        <div
+                                            class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
+                                            <button type="button" class="btn btn-icon btn-sm btn-primary"
+                                                data-decrement aria-label="Decrement quantity">
+                                                <i class="ci-minus fs-sm"></i>
+                                            </button>
+                                            <input type="number"
+                                                class="form-control form-control-sm bg-primary text-white w-100"
+                                                value="0" min="0" readonly>
+                                            <button type="button"
+                                                class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
+                                                data-increment aria-label="Increment quantity">
+                                                <span data-count-input-value></span>
+                                                <i class="ci-plus fs-sm"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
+                                <div class="h6 mb-2">$2.99</div>
+                                <h3 class="fs-sm lh-base mb-0">
+                                    <a class="hover-effect-underline fw-normal"
+                                        href="{{ route('second', ['shop', 'product-grocery']) }}">Mozzarella mini cheese
+                                        Granaloro</a>
+                                </h3>
+                            </div>
+                            <div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">250g</div>
+                        </div>
+                    </div>
+
+                    <!-- Product -->
+                    <div class="swiper-slide h-auto">
+                        <div class="card product-card h-100 bg-transparent border-0 shadow-none">
+                            <div class="position-relative z-2">
+                                <button type="button"
+                                    class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                    aria-label="Add to Wishlist">
+                                    <i class="ci-heart animate-target"></i>
+                                </button>
+                                <a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
+                                    <div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
+                                        <img src="/img/shop/grocery/05.png" alt="Image">
+                                    </div>
+                                </a>
+                                <div class="position-absolute w-100 start-0 bottom-0">
+                                    <div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
+                                        <div
+                                            class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
+                                            <button type="button" class="btn btn-icon btn-sm btn-primary"
+                                                data-decrement aria-label="Decrement quantity">
+                                                <i class="ci-minus fs-sm"></i>
+                                            </button>
+                                            <input type="number"
+                                                class="form-control form-control-sm bg-primary text-white w-100"
+                                                value="0" min="0" readonly>
+                                            <button type="button"
+                                                class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
+                                                data-increment aria-label="Increment quantity">
+                                                <span data-count-input-value></span>
+                                                <i class="ci-plus fs-sm"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
+                                <div class="h6 mb-2">$1.24</div>
+                                <h3 class="fs-sm lh-base mb-0">
+                                    <a class="hover-effect-underline fw-normal"
+                                        href="{{ route('second', ['shop', 'product-grocery']) }}">Coconut, Indonesia</a>
+                                </h3>
+                            </div>
+                            <div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">1 coconut</div>
+                        </div>
+                    </div>
+
+                    <!-- Product -->
+                    <div class="swiper-slide h-auto">
+                        <div class="card product-card h-100 bg-transparent border-0 shadow-none">
+                            <div class="position-relative z-2">
+                                <button type="button"
+                                    class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                    aria-label="Add to Wishlist">
+                                    <i class="ci-heart animate-target"></i>
+                                </button>
+                                <a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
+                                    <div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
+                                        <img src="/img/shop/grocery/06.png" alt="Image">
+                                    </div>
+                                </a>
+                                <div class="position-absolute w-100 start-0 bottom-0">
+                                    <div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
+                                        <div
+                                            class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
+                                            <button type="button" class="btn btn-icon btn-sm btn-primary"
+                                                data-decrement aria-label="Decrement quantity">
+                                                <i class="ci-minus fs-sm"></i>
+                                            </button>
+                                            <input type="number"
+                                                class="form-control form-control-sm bg-primary text-white w-100"
+                                                value="0" min="0" readonly>
+                                            <button type="button"
+                                                class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
+                                                data-increment aria-label="Increment quantity">
+                                                <span data-count-input-value></span>
+                                                <i class="ci-plus fs-sm"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
+                                <div class="h6 mb-2">$3.95</div>
+                                <h3 class="fs-sm lh-base mb-0">
+                                    <a class="hover-effect-underline fw-normal" href="{{ route('second', ['shop', 'product-grocery']) }}">Pesto
+                                        sauce Barilla with
+                                        parmesan and basil</a>
+                                </h3>
+                            </div>
+                            <div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">200g</div>
+                        </div>
+                    </div>
+
+                    <!-- Product -->
+                    <div class="swiper-slide h-auto">
+                        <div class="card product-card h-100 bg-transparent border-0 shadow-none">
+                            <div class="position-relative z-2">
+                                <button type="button"
+                                    class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                    aria-label="Add to Wishlist">
+                                    <i class="ci-heart animate-target"></i>
+                                </button>
+                                <a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
+                                    <div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
+                                        <img src="/img/shop/grocery/09.png" alt="Image">
+                                    </div>
+                                </a>
+                                <div class="position-absolute w-100 start-0 bottom-0">
+                                    <div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
+                                        <div
+                                            class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
+                                            <button type="button" class="btn btn-icon btn-sm btn-primary"
+                                                data-decrement aria-label="Decrement quantity">
+                                                <i class="ci-minus fs-sm"></i>
+                                            </button>
+                                            <input type="number"
+                                                class="form-control form-control-sm bg-primary text-white w-100"
+                                                value="0" min="0" readonly>
+                                            <button type="button"
+                                                class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
+                                                data-increment aria-label="Increment quantity">
+                                                <span data-count-input-value></span>
+                                                <i class="ci-plus fs-sm"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
+                                <div class="h6 mb-2">$18.60</div>
+                                <h3 class="fs-sm lh-base mb-0">
+                                    <a class="hover-effect-underline fw-normal" href="{{ route('second', ['shop', 'product-grocery']) }}">Pure
+                                        virgin olive oil
+                                        Basso</a>
+                                </h3>
+                            </div>
+                            <div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">1000ml</div>
+                        </div>
+                    </div>
+
+                    <!-- Product -->
+                    <div class="swiper-slide h-auto">
+                        <div class="card product-card h-100 bg-transparent border-0 shadow-none">
+                            <div class="position-relative z-2">
+                                <button type="button"
+                                    class="btn btn-icon btn-sm btn-secondary animate-pulse fs-sm bg-body border-0 position-absolute top-0 end-0 z-2 mt-1 mt-sm-2 me-1 me-sm-2"
+                                    aria-label="Add to Wishlist">
+                                    <i class="ci-heart animate-target"></i>
+                                </button>
+                                <a class="d-block p-2 p-lg-3" href="{{ route('second', ['shop', 'product-grocery']) }}">
+                                    <div class="ratio" style="--cz-aspect-ratio: calc(160 / 191 * 100%)">
+                                        <img src="/img/shop/grocery/16.png" alt="Image">
+                                    </div>
+                                </a>
+                                <div class="position-absolute w-100 start-0 bottom-0">
+                                    <div class="d-flex justify-content-end px-2 px-lg-3 pb-2 pb-lg-3">
+                                        <div
+                                            class="count-input count-input-collapsible collapsed justify-content-between w-100 bg-transparent border-0 rounded-2">
+                                            <button type="button" class="btn btn-icon btn-sm btn-primary"
+                                                data-decrement aria-label="Decrement quantity">
+                                                <i class="ci-minus fs-sm"></i>
+                                            </button>
+                                            <input type="number"
+                                                class="form-control form-control-sm bg-primary text-white w-100"
+                                                value="0" min="0" readonly>
+                                            <button type="button"
+                                                class="product-card-button btn btn-icon btn-sm btn-secondary ms-auto"
+                                                data-increment aria-label="Increment quantity">
+                                                <span data-count-input-value></span>
+                                                <i class="ci-plus fs-sm"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="card-body pt-0 px-1 px-md-2 px-lg-3 pb-2">
+                                <div class="h6 mb-2">$2.65</div>
+                                <h3 class="fs-sm lh-base mb-0">
+                                    <a class="hover-effect-underline fw-normal" href="{{ route('second', ['shop', 'product-grocery']) }}">Reggia
+                                        penne rigate No.34
+                                        pasta, pack</a>
+                                </h3>
+                            </div>
+                            <div class="fs-xs text-body-secondary px-1 px-md-2 px-lg-3 pb-2 pb-md-3">500g</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Recipes + Top departments -->
+        <section class="container pb-5 mb-2 mb-sm-3 mb-lg-4">
+            <div class="row">
+
+                <!-- Recipes list -->
+                <div class="col-lg-5 pb-3 pb-lg-0 mb-4 mb-lg-0">
+                    <h2 class="h3 mb-4">Recipes</h2>
+                    <div class="d-flex flex-column gap-1 gap-md-2">
+
+                        <!-- Recipe -->
+                        <div class="position-relative d-flex align-items-start align-items-sm-center mb-4">
+                            <div class="ratio" style="--cz-aspect-ratio: calc(140 / 196 * 100%); max-width: 196px">
+                                <img src="/img/home/grocery/recipes/01.jpg" class="rounded" alt="Image">
+                            </div>
+                            <div class="ps-3 ps-xl-4">
+                                <h3 class="fs-base fw-medium lh-base mb-2 mb-xl-3">
+                                    <a class="hover-effect-underline stretched-link" href="#!">Garden salad with a
+                                        mix of lettuce,
+                                        cucumber and tomato</a>
+                                </h3>
+                                <div class="d-flex gap-3 gap-xl-4 fs-sm text-body-secondary">
+                                    <div class="d-flex align-items-center text-nowrap">
+                                        <i class="ci-clock fs-base me-2"></i>
+                                        30 min
+                                    </div>
+                                    <div class="d-flex align-items-center text-nowrap">
+                                        <i class="ci-zap fs-base me-2"></i>
+                                        Easy
+                                    </div>
+                                    <div class="d-flex align-items-center text-nowrap">
+                                        <i class="ci-food fs-base me-2"></i>
+                                        4 por
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Recipe -->
+                        <div class="position-relative d-flex align-items-start align-items-sm-center mb-4">
+                            <div class="ratio" style="--cz-aspect-ratio: calc(140 / 196 * 100%); max-width: 196px">
+                                <img src="/img/home/grocery/recipes/02.jpg" class="rounded" alt="Image">
+                            </div>
+                            <div class="ps-3 ps-xl-4">
+                                <h3 class="fs-base fw-medium lh-base mb-2 mb-xl-3">
+                                    <a class="hover-effect-underline stretched-link" href="#!">Raspberry fresh
+                                        lemonade with lemon,
+                                        strawberry syrup and mint</a>
+                                </h3>
+                                <div class="d-flex gap-3 gap-xl-4 fs-sm text-body-secondary">
+                                    <div class="d-flex align-items-center text-nowrap">
+                                        <i class="ci-clock fs-base me-2"></i>
+                                        50 min
+                                    </div>
+                                    <div class="d-flex align-items-center text-nowrap">
+                                        <i class="ci-zap fs-base me-2"></i>
+                                        Hard
+                                    </div>
+                                    <div class="d-flex align-items-center text-nowrap">
+                                        <i class="ci-food fs-base me-2"></i>
+                                        8 por
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Recipe -->
+                        <div class="position-relative d-flex align-items-start align-items-sm-center mb-4">
+                            <div class="ratio" style="--cz-aspect-ratio: calc(140 / 196 * 100%); max-width: 196px">
+                                <img src="/img/home/grocery/recipes/03.jpg" class="rounded" alt="Image">
+                            </div>
+                            <div class="ps-3 ps-xl-4">
+                                <h3 class="fs-base fw-medium lh-base mb-2 mb-xl-3">
+                                    <a class="hover-effect-underline stretched-link" href="#!">Penne pasta with
+                                        spinach and zucchini in a
+                                        creamy sauce</a>
+                                </h3>
+                                <div class="d-flex gap-3 gap-xl-4 fs-sm text-body-secondary">
+                                    <div class="d-flex align-items-center text-nowrap">
+                                        <i class="ci-clock fs-base me-2"></i>
+                                        25 min
+                                    </div>
+                                    <div class="d-flex align-items-center text-nowrap">
+                                        <i class="ci-zap fs-base me-2"></i>
+                                        Easy
+                                    </div>
+                                    <div class="d-flex align-items-center text-nowrap">
+                                        <i class="ci-food fs-base me-2"></i>
+                                        2 por
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="nav mt-n2 mt-lg-n1 mt-xxl-0">
+                        <a class="nav-link animate-underline px-0 py-2" href="#!">
+                            <span class="animate-target text-nowrap">View all</span>
+                            <i class="ci-chevron-right fs-base ms-1"></i>
+                        </a>
+                    </div>
+                </div>
+
+
+                <!-- Top departments -->
+                <div class="col-lg-7">
+                    <h2 class="h3 mb-4">Top departments</h2>
+                    <div class="border rounded-5 p-4">
+                        <div class="swiper p-md-2 p-lg-0 p-xl-2 p-xxl-3"
+                            data-swiper='{
+                "slidesPerView": 1,
+                "spaceBetween": 24,
+                "pagination": {
+                  "el": ".swiper-pagination",
+                  "clickable": true
+                },
+                "breakpoints": {
+                  "450": {
+                    "slidesPerView": 2
+                  },
+                  "680": {
+                    "slidesPerView": 3
+                  },
+                  "991": {
+                    "slidesPerView": 2
+                  },
+                  "1160": {
+                    "slidesPerView": 3
+                  }
+                }
+              }'>
+                            <div class="swiper-wrapper">
+
+                                <!-- Department -->
+                                <div class="swiper-slide text-center">
+                                    <a class="d-inline-flex align-items-center justify-content-center bg-body-secondary rounded-circle mb-3"
+                                        href="{{ route('second', ['shop', 'catalog-grocery']) }}" style="width: 174px; height: 174px">
+                                        <img src="/img/shop/grocery/categories/09.png" width="110" alt="Image">
+                                    </a>
+                                    <h3 class="h6">Sauces and ketchup</h3>
+                                    <ul class="list-unstyled fs-sm m-0 mb-1">
+                                        <li>
+                                            <a class="hover-effect-underline text-body text-decoration-none"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Tomato ketchup</a>
+                                        </li>
+                                        <li>
+                                            <a class="hover-effect-underline text-body text-decoration-none"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Hollandaise sauce</a>
+                                        </li>
+                                        <li>
+                                            <a class="hover-effect-underline text-body text-decoration-none"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Mayonnaise</a>
+                                        </li>
+                                        <li>
+                                            <a class="hover-effect-underline text-body text-decoration-none"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Caesar salad</a>
+                                        </li>
+                                    </ul>
+                                    <div class="nav justify-content-center">
+                                        <a class="nav-link animate-underline px-0" href="{{ route('second', ['shop', 'catalog-grocery']) }}">
+                                            <span class="animate-target text-nowrap">View all</span>
+                                            <i class="ci-chevron-right fs-base ms-1"></i>
+                                        </a>
+                                    </div>
+                                </div>
+
+                                <!-- Department -->
+                                <div class="swiper-slide text-center">
+                                    <a class="d-inline-flex align-items-center justify-content-center bg-body-secondary rounded-circle mb-3"
+                                        href="{{ route('second', ['shop', 'catalog-grocery']) }}" style="width: 174px; height: 174px">
+                                        <img src="/img/shop/grocery/categories/10.png" width="110" alt="Image">
+                                    </a>
+                                    <h3 class="h6">Fresh fruits</h3>
+                                    <ul class="list-unstyled fs-sm m-0 mb-1">
+                                        <li>
+                                            <a class="hover-effect-underline text-body text-decoration-none"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Oranges</a>
+                                        </li>
+                                        <li>
+                                            <a class="hover-effect-underline text-body text-decoration-none"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Apples</a>
+                                        </li>
+                                        <li>
+                                            <a class="hover-effect-underline text-body text-decoration-none"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Watermelons</a>
+                                        </li>
+                                        <li>
+                                            <a class="hover-effect-underline text-body text-decoration-none"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Exotic fruits</a>
+                                        </li>
+                                    </ul>
+                                    <div class="nav justify-content-center">
+                                        <a class="nav-link animate-underline px-0" href="{{ route('second', ['shop', 'catalog-grocery']) }}">
+                                            <span class="animate-target text-nowrap">View all</span>
+                                            <i class="ci-chevron-right fs-base ms-1"></i>
+                                        </a>
+                                    </div>
+                                </div>
+
+                                <!-- Department -->
+                                <div class="swiper-slide text-center">
+                                    <a class="d-inline-flex align-items-center justify-content-center bg-body-secondary rounded-circle mb-3"
+                                        href="{{ route('second', ['shop', 'catalog-grocery']) }}" style="width: 174px; height: 174px">
+                                        <img src="/img/shop/grocery/categories/11.png" width="110" alt="Image">
+                                    </a>
+                                    <h3 class="h6">Meat products</h3>
+                                    <ul class="list-unstyled fs-sm m-0 mb-1">
+                                        <li>
+                                            <a class="hover-effect-underline text-body text-decoration-none"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Poultry</a>
+                                        </li>
+                                        <li>
+                                            <a class="hover-effect-underline text-body text-decoration-none"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Kosher meat</a>
+                                        </li>
+                                        <li>
+                                            <a class="hover-effect-underline text-body text-decoration-none"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Veal and beef</a>
+                                        </li>
+                                        <li>
+                                            <a class="hover-effect-underline text-body text-decoration-none"
+                                                href="{{ route('second', ['shop', 'catalog-grocery']) }}">Turkey</a>
+                                        </li>
+                                    </ul>
+                                    <div class="nav justify-content-center">
+                                        <a class="nav-link animate-underline px-0" href="{{ route('second', ['shop', 'catalog-grocery']) }}">
+                                            <span class="animate-target text-nowrap">View all</span>
+                                            <i class="ci-chevron-right fs-base ms-1"></i>
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Slider pagination (Bullets) -->
+                            <div class="swiper-pagination position-static mt-3"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- CTA banners -->
+        <section class="container pb-5 mb-2 mb-sm-3 mb-lg-4 mb-xl-5">
+            <div class="row">
+
+                <!-- Mobile app CTA -->
+                <div class="col-lg-7 mb-4 mb-lg-0">
+                    <div
+                        class="d-flex flex-column flex-sm-row align-items-center h-100 bg-body-tertiary rounded-5 overflow-hidden">
+                        <div class="order-sm-2 text-center text-sm-start pt-4 px-4 pb-2 pb-sm-4 mt-3 mt-sm-0">
+                            <h2 class="h4 mb-4">Make online shop easier with our Cartzilla App</h2>
+                            <div
+                                class="d-flex flex-sm-wrap justify-content-center justify-content-sm-start gap-2 gap-sm-3">
+                                <a class="btn btn-market btn-lg btn-light rounded-pill flex-shrink-0" href="#!"
+                                    aria-label="Download on Google Play">
+                                    <svg class="flex-shrink-0 ms-n1 me-2" xmlns="http://www.w3.org/2000/svg"
+                                        width="24" height="24" viewBox="0 0 24 24" fill="none">
+                                        <path
+                                            d="M19.665 10.561l-3.251-1.878-3.329 3.329 3.328 3.329 3.263-1.884c.509-.309.812-.849.812-1.444s-.304-1.135-.823-1.451z"
+                                            fill="#ffce00" />
+                                        <path
+                                            d="M13.085 12.011L4.018 2.879a1.71 1.71 0 0 0-.507 1.216v15.804a1.71 1.71 0 0 0 .507 1.217l9.067-9.105z"
+                                            fill="#01daff" />
+                                        <path
+                                            d="M13.086 12.011l3.329-3.329.005-.005-4.46-2.568L6.08 2.654c-.529-.327-1.171-.338-1.712-.034a2.54 2.54 0 0 0-.349.259l9.067 9.132z"
+                                            fill="#00f076" />
+                                        <path
+                                            d="M4.019 21.116c.113.101.225.18.349.259.27.146.552.225.834.225.304 0 .597-.09.867-.248l5.891-3.439 4.46-2.568-.005-.005-3.329-3.329-9.067 9.104z"
+                                            fill="#f63448" />
+                                    </svg>
+                                    <svg class="flex-shrink-0" xmlns="http://www.w3.org/2000/svg" width="77"
+                                        height="24" viewBox="0 0 77 24" fill="currentColor">
+                                        <path
+                                            d="M24.575 9.45c-2.184 0-3.914 1.704-3.914 4.071 0 2.272 1.729 4.071 3.914 4.071s3.914-1.704 3.914-4.071c0-2.461-1.729-4.071-3.914-4.071zm0 6.438c-1.183 0-2.184-1.041-2.184-2.462s1.001-2.462 2.184-2.462 2.184.947 2.184 2.462c0 1.42-1.001 2.462-2.184 2.462zM16.11 9.45c-2.184 0-3.914 1.704-3.914 4.071 0 2.272 1.729 4.071 3.914 4.071s3.914-1.704 3.914-4.071c0-2.461-1.729-4.071-3.914-4.071zm0 6.438c-1.183 0-2.184-1.041-2.184-2.462s1.001-2.462 2.184-2.462 2.184.947 2.184 2.462c0 1.42-1.001 2.462-2.184 2.462zM6.007 10.681v1.704h3.914c-.091.947-.455 1.704-.91 2.177-.546.568-1.456 1.231-3.004 1.231-2.457 0-4.278-1.988-4.278-4.544s1.911-4.544 4.278-4.544c1.274 0 2.275.568 3.004 1.231l1.183-1.231C9.193 5.757 7.918 5 6.098 5 2.822 5 0 7.84 0 11.249s2.822 6.249 6.098 6.249c1.82 0 3.095-.568 4.187-1.799 1.092-1.136 1.456-2.745 1.456-3.976 0-.379 0-.757-.091-1.041H6.007zm41.322 1.325c-.364-.947-1.274-2.556-3.277-2.556s-3.641 1.61-3.641 4.071c0 2.272 1.638 4.071 3.823 4.071 1.729 0 2.822-1.136 3.186-1.799l-1.274-.947c-.455.663-1.001 1.136-1.911 1.136s-1.456-.379-1.911-1.231l5.188-2.272-.182-.473zm-5.279 1.326c0-1.515 1.183-2.367 2.002-2.367.637 0 1.274.379 1.456.852l-3.459 1.515zm-4.278 3.882h1.729V5.379h-1.729v11.834zm-2.73-6.911c-.455-.473-1.183-.947-2.093-.947-1.911 0-3.732 1.799-3.732 4.071s1.729 3.976 3.732 3.976c.91 0 1.638-.473 2.002-.947h.091v.568c0 1.515-.819 2.367-2.093 2.367-1.001 0-1.729-.757-1.911-1.42l-1.456.663C30.036 19.675 31.128 21 33.039 21c2.002 0 3.641-1.231 3.641-4.166V9.639h-1.638v.663zm-2.002 5.586c-1.183 0-2.184-1.041-2.184-2.462s1.001-2.462 2.184-2.462 2.093 1.041 2.093 2.462-.91 2.462-2.093 2.462zM55.247 5.379h-4.096v11.834h1.729v-4.45h2.367c1.911 0 3.732-1.42 3.732-3.692s-1.82-3.692-3.732-3.692zm.091 5.681h-2.457V6.988h2.457c1.274 0 2.002 1.136 2.002 1.988-.091 1.041-.819 2.083-2.002 2.083zm10.467-1.704c-1.274 0-2.549.568-3.004 1.799l1.547.663c.364-.663.91-.852 1.547-.852.91 0 1.729.568 1.82 1.515v.095c-.273-.189-1.001-.473-1.729-.473-1.638 0-3.277.947-3.277 2.651 0 1.609 1.365 2.651 2.821 2.651 1.183 0 1.729-.568 2.184-1.136h.091v.947h1.638v-4.544c-.182-2.083-1.729-3.314-3.641-3.314zm-.182 6.533c-.546 0-1.365-.284-1.365-1.041 0-.947 1.001-1.231 1.82-1.231.728 0 1.092.189 1.547.379-.182 1.136-1.092 1.894-2.002 1.894zm9.557-6.249l-1.911 5.112h-.091l-2.002-5.112h-1.82l3.004 7.195-1.729 3.976h1.729L77 9.639h-1.82zm-15.291 7.574h1.729V5.379h-1.729v11.834z" />
+                                    </svg>
+                                </a>
+                                <a class="btn btn-market btn-lg btn-light rounded-pill flex-shrink-0" href="#!"
+                                    aria-label="Download on App Store">
+                                    <i class="ci-apple lead ms-n1 me-2"></i>
+                                    <svg class="flex-shrink-0" xmlns="http://www.w3.org/2000/svg" width="77"
+                                        height="24" viewBox="0 0 77 24" fill="currentColor">
+                                        <path
+                                            d="M40.713 15.797c.701-.624 1.055-1.431 1.055-2.427 0-.806-.242-1.486-.733-2.032-.483-.546-1.232-1.02-2.255-1.423-.838-.324-1.418-.625-1.732-.901a1.41 1.41 0 0 1-.548-1.138 1.39 1.39 0 0 1 .475-1.059c.379-.316.91-.482 1.579-.482.854 0 1.611.182 2.288.538l.483-1.518c-.717-.372-1.619-.553-2.699-.553-1.216 0-2.191.308-2.924.917a2.94 2.94 0 0 0-1.103 2.356c0 1.463 1.039 2.577 3.142 3.344.765.277 1.313.577 1.643.901a1.63 1.63 0 0 1 .491 1.194c0 .53-.201.957-.604 1.273-.395.316-.959.474-1.675.474-.999 0-1.917-.245-2.755-.727l-.443 1.557c.773.482 1.796.727 3.077.727 1.386 0 2.465-.34 3.238-1.02zm-31.706.846h2.03L7.195 4.966H4.826L1 16.644h1.974l1.055-3.431h3.867l1.112 3.431zM6.558 8.729l1.007 3.044H4.367l.991-3.044.564-2.198h.04l.596 2.198zm13.122 6.997c.797-.83 1.192-1.961 1.192-3.392 0-1.289-.338-2.316-1.031-3.107-.677-.783-1.514-1.178-2.529-1.178-1.289 0-2.255.506-2.892 1.51h-.032l-.105-1.336h-1.675l.072 2.767v9.068h1.909v-4.42c.499.798 1.313 1.194 2.449 1.194 1.047 0 1.933-.364 2.642-1.107zm-1.313-5.353c.379.53.564 1.202.564 2.024 0 .893-.201 1.605-.604 2.15-.403.538-.959.814-1.675.814-.612 0-1.112-.213-1.49-.633s-.572-.941-.572-1.55v-1.407c0-.15.032-.34.089-.569a2.11 2.11 0 0 1 .749-1.202c.387-.3.814-.459 1.281-.459a1.96 1.96 0 0 1 1.659.83zm12.366 1.961c0 1.431-.395 2.562-1.192 3.392-.709.743-1.595 1.107-2.642 1.107-1.136 0-1.949-.395-2.449-1.194v4.42H22.54v-9.068l-.072-2.767h1.675l.105 1.336h.032c.636-1.004 1.603-1.51 2.892-1.51 1.015 0 1.853.395 2.529 1.178.693.791 1.031 1.818 1.031 3.107zm-1.941.063c0-.822-.185-1.494-.564-2.024a1.96 1.96 0 0 0-1.659-.83c-.467 0-.894.158-1.281.459-.379.308-.628.704-.749 1.202-.056.229-.089.419-.089.569v1.407c0 .609.193 1.131.572 1.55s.878.633 1.49.633c.717 0 1.281-.277 1.676-.814.411-.546.604-1.257.604-2.15zM48.083 9.63h-2.102v4.087c0 1.036.37 1.557 1.112 1.557.338 0 .62-.032.846-.087l.056 1.423c-.379.134-.87.206-1.482.206-.757 0-1.337-.229-1.764-.68s-.636-1.21-.636-2.269V9.623h-1.248V8.223h1.249V6.681l1.869-.553v2.095h2.102V9.63zm8.329 5.922c.749-.83 1.128-1.89 1.128-3.186 0-1.257-.362-2.285-1.096-3.075-.765-.822-1.78-1.233-3.037-1.233-1.305 0-2.344.419-3.117 1.249-.765.83-1.152 1.897-1.152 3.202 0 1.249.37 2.285 1.12 3.099s1.756 1.225 3.013 1.225c1.305 0 2.352-.427 3.142-1.281zm-1.353-5.131c.338.553.508 1.21.508 1.984s-.177 1.439-.524 2.008c-.419.68-.991 1.02-1.716 1.02-.741 0-1.321-.332-1.732-1.004-.338-.546-.508-1.21-.508-1.984 0-.799.161-1.471.508-2.024.395-.672.983-1.004 1.748-1.004.741 0 1.313.332 1.716 1.004zm8.683-.553c-.185-.032-.387-.047-.604-.047-.669 0-1.192.245-1.555.743-.314.435-.475.996-.475 1.66v4.419h-1.909v-5.771l-.056-2.649h1.659l.072 1.613h.056c.201-.553.516-1.004.951-1.336.427-.3.886-.451 1.377-.451a4.09 4.09 0 0 1 .475.032l.008 1.787zm8.451 3.012c.048-.229.072-.514.072-.846 0-1.051-.258-1.929-.765-2.656-.628-.901-1.571-1.352-2.803-1.352-1.257 0-2.255.451-2.997 1.352-.709.846-1.063 1.905-1.063 3.17 0 1.289.379 2.324 1.136 3.091s1.804 1.154 3.133 1.154c1.104 0 2.062-.174 2.876-.522l-.298-1.297c-.693.261-1.466.395-2.312.395-.765 0-1.386-.198-1.869-.585-.532-.435-.806-1.075-.83-1.905h5.719zm-2.119-2.767c.258.403.387.886.371 1.439l-3.963-.008c.056-.561.25-1.051.564-1.455a1.82 1.82 0 0 1 1.514-.759c.677 0 1.184.261 1.514.783z" />
+                                    </svg>
+                                </a>
+                            </div>
+                        </div>
+                        <div class="ratio align-self-sm-end order-sm-1 rtl-flip"
+                            style="--cz-aspect-ratio: calc(284 / 330 * 100%); max-width: 330px">
+                            <img src="/img/home/grocery/banner01.png" alt="Image">
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Feedback CTA -->
+                <div class="col-lg-5">
+                    <div class="d-flex align-items-center h-100 bg-body-tertiary rounded-5 overflow-hidden">
+                        <div class="ratio align-self-end rtl-flip"
+                            style="--cz-aspect-ratio: calc(284 / 244 * 100%); max-width: 244px">
+                            <img src="/img/home/grocery/banner02.png" alt="Image">
+                        </div>
+                        <div class="p-4">
+                            <h2 class="h4 mb-sm-4">We'd love to hear what you think!</h2>
+                            <div class="nav mt-n2 mt-sm-n1 mt-lg-0">
+                                <a class="nav-link animate-underline px-0 py-2" href="#!">
+                                    <span class="animate-target text-nowrap">Give a feedback</span>
+                                    <i class="ci-chevron-right fs-base ms-1"></i>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <footer class="footer bg-dark pb-4" data-bs-theme="dark">
+
+        <!-- Subscription -->
+        <div class="border-bottom py-5">
+            <div class="container py-sm-1 py-md-2 py-lg-3">
+                <div class="text-center mx-auto" style="max-width: 580px">
+                    <h3 class="pb-1 mb-2">Stay in touch with us</h3>
+                    <p class="fs-sm text-body">Receive the latest updates about our products &amp; promotions</p>
+                    <form class="needs-validation position-relative d-flex flex-column flex-sm-row gap-2 pt-3" novalidate>
+                        <input type="email" class="form-control form-control-lg rounded-pill text-start"
+                            placeholder="You email" aria-label="Your email address" required>
+                        <div class="invalid-tooltip bg-transparent p-0">Please enter you email address!</div>
+                        <button type="submit" class="btn btn-lg btn-primary rounded-pill">Subscribe</button>
+                    </form>
+                </div>
+            </div>
+        </div>
+
+        <div class="container py-4 py-md-5">
+            <div class="row pt-3 pb-4 py-md-1 py-lg-3">
+
+                <!-- Promo text + Social account links -->
+                <div class="col-lg-3 text-center text-lg-start pb-sm-2 pb-md-0 mb-4 mb-md-5 mb-lg-0">
+                    <h4 class="pb-2 mb-1">
+                        <a class="text-dark-emphasis text-decoration-none" href="{{ route('second', ['home', 'grocery']) }}">Cartzilla</a>
+                    </h4>
+                    <p class="fs-sm text-body mx-auto" style="max-width: 480px">With a wide selection of fresh produce,
+                        pantry
+                        staples, and household essentials, we've got everything you need just a click away.</p>
+                    <div class="d-flex justify-content-center justify-content-lg-start gap-2 pt-2 pt-md-3">
+                        <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
+                            data-bs-toggle="tooltip"
+                            data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-white p-0"></div></div>'
+                            title="Instagram" aria-label="Follow us on Instagram">
+                            <i class="ci-instagram"></i>
+                        </a>
+                        <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
+                            data-bs-toggle="tooltip"
+                            data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-white p-0"></div></div>'
+                            title="Facebook" aria-label="Follow us on Facebook">
+                            <i class="ci-facebook"></i>
+                        </a>
+                        <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
+                            data-bs-toggle="tooltip"
+                            data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-white p-0"></div></div>'
+                            title="Telegram" aria-label="Follow us on Telegram">
+                            <i class="ci-telegram"></i>
+                        </a>
+                        <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
+                            data-bs-toggle="tooltip"
+                            data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-white p-0"></div></div>'
+                            title="WhatsApp" aria-label="Follow us on WhatsApp">
+                            <i class="ci-whatsapp"></i>
+                        </a>
+                    </div>
+                </div>
+
+                <!-- Columns with links that are turned into accordion on screens < 500px wide (sm breakpoint) -->
+                <div class="col-lg-8 offset-lg-1">
+                    <div class="accordion" id="footerLinks">
+                        <div class="row">
+                            <div class="accordion-item col-sm-3 border-0">
+                                <h6 class="accordion-header" id="categoriesHeading">
+                                    <span class="text-dark-emphasis d-none d-sm-block">Categories</span>
+                                    <button type="button" class="accordion-button collapsed py-3 d-sm-none"
+                                        data-bs-toggle="collapse" data-bs-target="#categoriesLinks"
+                                        aria-expanded="false" aria-controls="categoriesLinks">Categories</button>
+                                </h6>
+                                <div class="accordion-collapse collapse d-sm-block" id="categoriesLinks"
+                                    aria-labelledby="categoriesHeading" data-bs-parent="#footerLinks">
+                                    <ul class="nav flex-column gap-2 pt-sm-3 pb-3 pb-sm-0 mt-n1 mb-1 mb-sm-0">
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Weekly sale</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Special price</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Easter is coming</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Italian dinner</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Fresh fruits</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Exotic fruits</a>
+                                        </li>
+                                    </ul>
+                                </div>
+                                <hr class="d-sm-none my-0">
+                            </div>
+                            <div class="accordion-item col-sm-3 border-0">
+                                <h6 class="accordion-header" id="companyHeading">
+                                    <span class="text-dark-emphasis d-none d-sm-block">Company</span>
+                                    <button type="button" class="accordion-button collapsed py-3 d-sm-none"
+                                        data-bs-toggle="collapse" data-bs-target="#companyLinks" aria-expanded="false"
+                                        aria-controls="companyLinks">Company</button>
+                                </h6>
+                                <div class="accordion-collapse collapse d-sm-block" id="companyLinks"
+                                    aria-labelledby="companyHeading" data-bs-parent="#footerLinks">
+                                    <ul class="nav flex-column gap-2 pt-sm-3 pb-3 pb-sm-0 mt-n1 mb-1 mb-sm-0">
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Blog and news</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">About us</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">FAQ page</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Contact us</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Careers</a>
+                                        </li>
+                                    </ul>
+                                </div>
+                                <hr class="d-sm-none my-0">
+                            </div>
+                            <div class="accordion-item col-sm-3 border-0">
+                                <h6 class="accordion-header" id="accountHeading">
+                                    <span class="text-dark-emphasis d-none d-sm-block">Account</span>
+                                    <button type="button" class="accordion-button collapsed py-3 d-sm-none"
+                                        data-bs-toggle="collapse" data-bs-target="#accountLinks" aria-expanded="false"
+                                        aria-controls="accountLinks">Account</button>
+                                </h6>
+                                <div class="accordion-collapse collapse d-sm-block" id="accountLinks"
+                                    aria-labelledby="accountHeading" data-bs-parent="#footerLinks">
+                                    <ul class="nav flex-column gap-2 pt-sm-3 pb-3 pb-sm-0 mt-n1 mb-1 mb-sm-0">
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Your account</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Shipping &amp; policies</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Refunds &amp; replacements</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Order tracking</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Delivery info</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Taxes &amp; fees</a>
+                                        </li>
+                                    </ul>
+                                </div>
+                                <hr class="d-sm-none my-0">
+                            </div>
+                            <div class="accordion-item col-sm-3 border-0">
+                                <h6 class="accordion-header" id="customerHeading">
+                                    <span class="text-dark-emphasis d-none d-sm-block">Customer service</span>
+                                    <button type="button" class="accordion-button collapsed py-3 d-sm-none"
+                                        data-bs-toggle="collapse" data-bs-target="#customerLinks"
+                                        aria-expanded="false" aria-controls="customerLinks">Customer
+                                        service</button>
+                                </h6>
+                                <div class="accordion-collapse collapse d-sm-block" id="customerLinks"
+                                    aria-labelledby="customerHeading" data-bs-parent="#footerLinks">
+                                    <ul class="nav flex-column gap-2 pt-sm-3 pb-3 pb-sm-0 mt-n1 mb-1 mb-sm-0">
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Payment methods</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Money back guarantee</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Refunds &amp; replacements</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Order tracking</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Delivery info</a>
+                                        </li>
+                                        <li class="d-flex w-100 pt-1">
+                                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                href="#!">Shipping</a>
+                                        </li>
+                                    </ul>
+                                </div>
+                                <hr class="d-sm-none my-0">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Copyright -->
+        <p class="container fs-xs text-body text-center text-lg-start pb-md-3 mb-0">
+            &copy; All rights reserved. Made with <i class="ci-heart-filled align-middle"></i> by <span
+                class="animate-underline"><a class="animate-target text-white text-decoration-none"
+                    href="https://coderthemes.com/" target="_blank" rel="noreferrer">Coderthemes</a></span>
+        </p>
+    </footer>
+@endsection
+
+@section('scripts')
+@endsection
diff --git a/resources/views/shop/product-marketplace.blade.php b/resources/views/shop/product-marketplace.blade.php
new file mode 100644
index 0000000..84a0e08
--- /dev/null
+++ b/resources/views/shop/product-marketplace.blade.php
@@ -0,0 +1,1346 @@
+@extends('layouts.landing', ['title' => 'Marketplace - Digital Product Page'])
+
+@section('content')
+    <div class="modal fade" id="commentForm" data-bs-backdrop="static" tabindex="-1" aria-labelledby="commentFormLabel"
+        aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
+            <form class="modal-content needs-validation" novalidate>
+                <div class="modal-header border-0">
+                    <h5 class="modal-title" id="commentFormLabel">Leave a comment</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body pb-3 pt-0">
+                    <div class="mb-3">
+                        <label for="review-name" class="form-label">Your name <span class="text-danger">*</span></label>
+                        <input type="text" class="form-control rounded-pill" id="review-name" required>
+                        <div class="invalid-feedback">Please enter your name!</div>
+                        <small class="form-text">Will be displayed on the comment.</small>
+                    </div>
+                    <div class="mb-3">
+                        <label for="review-email" class="form-label">Your email <span class="text-danger">*</span></label>
+                        <input type="email" class="form-control rounded-pill" id="review-email" required>
+                        <div class="invalid-feedback">Please provide a valid email address!</div>
+                        <small class="form-text">Authentication only - we won't spam you.</small>
+                    </div>
+                    <div>
+                        <label class="form-label" for="review-text">Comment <span class="text-danger">*</span></label>
+                        <textarea class="form-control rounded-6" rows="5" id="review-text" required></textarea>
+                        <div class="invalid-feedback">Please write your comment!</div>
+                        <small class="form-text">Your comment must be at least 50 characters.</small>
+                    </div>
+                </div>
+                <div class="modal-footer flex-nowrap gap-3 border-0 px-4">
+                    <button type="reset" class="btn btn-secondary w-100 rounded-pill m-0"
+                        data-bs-dismiss="modal">Cancel</button>
+                    <button type="submit" class="btn btn-dark w-100 rounded-pill m-0">Submit</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <div class="offcanvas offcanvas-top" id="searchBox" data-bs-backdrop="static" tabindex="-1">
+        <div class="offcanvas-header border-bottom p-0 py-lg-1">
+            <form class="container d-flex align-items-center">
+                <input type="search" class="form-control form-control-lg fs-lg border-0 rounded-0 py-3 ps-0"
+                    placeholder="Search the products" data-autofocus="offcanvas">
+                <button type="reset" class="btn-close fs-lg" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+            </form>
+        </div>
+        <div class="offcanvas-body px-0">
+            <div class="container text-center">
+                <svg class="text-body-tertiary opacity-60 mb-4" xmlns="http://www.w3.org/2000/svg" width="60"
+                    viewBox="0 0 512 512" fill="currentColor">
+                    <path
+                        d="M340.115,361.412l-16.98-16.98c-34.237,29.36-78.733,47.098-127.371,47.098C87.647,391.529,0,303.883,0,195.765S87.647,0,195.765,0s195.765,87.647,195.765,195.765c0,48.638-17.738,93.134-47.097,127.371l16.98,16.98l11.94-11.94c5.881-5.881,15.415-5.881,21.296,0l112.941,112.941c5.881,5.881,5.881,15.416,0,21.296l-45.176,45.176c-5.881,5.881-15.415,5.881-21.296,0L328.176,394.648c-5.881-5.881-5.881-15.416,0-21.296L340.115,361.412z M195.765,361.412c91.484,0,165.647-74.163,165.647-165.647S287.249,30.118,195.765,30.118S30.118,104.28,30.118,195.765S104.28,361.412,195.765,361.412z M360.12,384l91.645,91.645l23.88-23.88L384,360.12L360.12,384z M233.034,233.033c5.881-5.881,15.415-5.881,21.296,0c5.881,5.881,5.881,15.416,0,21.296c-32.345,32.345-84.786,32.345-117.131,0c-5.881-5.881-5.881-15.415,0-21.296c5.881-5.881,15.416-5.881,21.296,0C179.079,253.616,212.45,253.616,233.034,233.033zM135.529,180.706c-12.475,0-22.588-10.113-22.588-22.588c0-12.475,10.113-22.588,22.588-22.588c12.475,0,22.588,10.113,22.588,22.588C158.118,170.593,148.005,180.706,135.529,180.706z M256,180.706c-12.475,0-22.588-10.113-22.588-22.588c0-12.475,10.113-22.588,22.588-22.588s22.588,10.113,22.588,22.588C278.588,170.593,268.475,180.706,256,180.706z" />
+                </svg>
+                <h6 class="mb-2">Your search results will appear here</h6>
+                <p class="fs-sm mb-0">Start typing in the search field above to see instant search results.</p>
+            </div>
+        </div>
+    </div>
+
+    @include('layouts.partials/offcanvas2')
+
+    <header class="navbar navbar-expand-lg bg-body navbar-sticky sticky-top z-fixed px-0" data-sticky-element>
+        <div class="container flex-nowrap">
+
+            <!-- Mobile offcanvas menu toggler (Hamburger) -->
+            <button type="button" class="navbar-toggler me-4 me-lg-0" data-bs-toggle="offcanvas"
+                data-bs-target="#navbarNav" aria-controls="navbarNav" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+
+            <!-- Navbar brand (Logo) -->
+            <a class="navbar-brand py-1 py-md-2 py-xl-1" href="{{ route('second', ['home', 'marketplace']) }}">
+                <span class="d-none d-sm-flex flex-shrink-0 text-primary me-2">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36">
+                        <path
+                            d="M36 18.01c0 8.097-5.355 14.949-12.705 17.2a18.12 18.12 0 0 1-5.315.79C9.622 36 2.608 30.313.573 22.611.257 21.407.059 20.162 0 18.879v-1.758c.02-.395.059-.79.099-1.185.099-.908.277-1.817.514-2.686C2.687 5.628 9.682 0 18 0c5.572 0 10.551 2.528 13.871 6.517 1.502 1.797 2.648 3.91 3.359 6.201.494 1.659.771 3.436.771 5.292z"
+                            fill="currentColor" />
+                        <g fill="#fff">
+                            <path
+                                d="M17.466 21.624c-.514 0-.988-.316-1.146-.829-.198-.632.138-1.303.771-1.501l7.666-2.469-1.205-8.254-13.317 4.621a1.19 1.19 0 0 1-1.521-.75 1.19 1.19 0 0 1 .751-1.521l13.89-4.818c.553-.197 1.166-.138 1.64.158a1.82 1.82 0 0 1 .85 1.284l1.344 9.183c.138.987-.494 1.994-1.482 2.33l-7.864 2.528-.375.04zm7.31.138c-.178-.632-.85-1.007-1.482-.81l-5.177 1.58c-2.331.79-3.28.02-3.418-.099l-6.56-8.412a4.25 4.25 0 0 0-4.406-1.758l-3.122.987c-.237.889-.415 1.777-.514 2.686l4.228-1.363a1.84 1.84 0 0 1 1.857.81l6.659 8.551c.751.948 2.015 1.323 3.359 1.323.909 0 1.857-.178 2.687-.474l5.078-1.54c.632-.178 1.008-.829.81-1.481z" />
+                            <use href="#czlogo" />
+                            <use href="#czlogo" x="8.516" y="-2.172" />
+                        </g>
+                        <defs>
+                            <path id="czlogo"
+                                d="M18.689 28.654a1.94 1.94 0 0 1-1.936 1.935 1.94 1.94 0 0 1-1.936-1.935 1.94 1.94 0 0 1 1.936-1.935 1.94 1.94 0 0 1 1.936 1.935z" />
+                        </defs>
+                    </svg>
+                </span>
+                Cartzilla
+            </a>
+
+            <!-- Main navigation that turns into offcanvas on screens < 992px wide (lg breakpoint) -->
+            <nav class="offcanvas offcanvas-start" id="navbarNav" tabindex="-1" aria-labelledby="navbarNavLabel">
+                <div class="offcanvas-header py-3">
+                    <h5 class="offcanvas-title" id="navbarNavLabel">Browse Cartzilla</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+                </div>
+                <div class="offcanvas-body pt-3 pb-4 py-lg-0 mx-lg-auto">
+                    <ul class="navbar-nav position-relative">
+                        <li class="nav-item dropdown py-lg-2 me-lg-n1 me-xl-0">
+                            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
+                                data-bs-trigger="hover" aria-expanded="false">Home</a>
+                            <ul class="dropdown-menu" style="--cz-dropdown-spacer: .875rem">
+                                <li class="hover-effect-opacity px-2 mx-n2">
+                                    <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'electronics']) }}">
+                                        <span class="fw-medium">Electronics Store</span>
+                                        <span class="d-block fs-xs text-body-secondary">Megamenu + Hero slider</span>
+                                        <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                            style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                            <img class="position-relative z-2 d-none-dark"
+                                                src="/img/mega-menu/demo-preview/electronics-light.jpg"
+                                                alt="Electronics Store">
+                                            <img class="position-relative z-2 d-none d-block-dark"
+                                                src="/img/mega-menu/demo-preview/electronics-dark.jpg"
+                                                alt="Electronics Store">
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                        </div>
+                                    </a>
+                                </li>
+                                <li class="hover-effect-opacity px-2 mx-n2">
+                                    <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'fashion-v1']) }}">
+                                        <span class="fw-medium">Fashion Store v.1</span>
+                                        <span class="d-block fs-xs text-body-secondary">Hero promo slider</span>
+                                        <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                            style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                            <img class="position-relative z-2 d-none-dark"
+                                                src="/img/mega-menu/demo-preview/fashion-1-light.jpg"
+                                                alt="Fashion Store v.1">
+                                            <img class="position-relative z-2 d-none d-block-dark"
+                                                src="/img/mega-menu/demo-preview/fashion-1-dark.jpg"
+                                                alt="Fashion Store v.1">
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                        </div>
+                                    </a>
+                                </li>
+                                <li class="hover-effect-opacity px-2 mx-n2">
+                                    <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'fashion-v2']) }}">
+                                        <span class="fw-medium">Fashion Store v.2</span>
+                                        <span class="d-block fs-xs text-body-secondary">Hero banner with hotspots</span>
+                                        <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                            style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                            <img class="position-relative z-2 d-none-dark"
+                                                src="/img/mega-menu/demo-preview/fashion-2-light.jpg"
+                                                alt="Fashion Store v.2">
+                                            <img class="position-relative z-2 d-none d-block-dark"
+                                                src="/img/mega-menu/demo-preview/fashion-2-dark.jpg"
+                                                alt="Fashion Store v.2">
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                        </div>
+                                    </a>
+                                </li>
+                                <li class="hover-effect-opacity px-2 mx-n2">
+                                    <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'furniture']) }}">
+                                        <span class="fw-medium">Furniture Store</span>
+                                        <span class="d-block fs-xs text-body-secondary">Fancy product carousel</span>
+                                        <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                            style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                            <img class="position-relative z-2 d-none-dark"
+                                                src="/img/mega-menu/demo-preview/furniture-light.jpg"
+                                                alt="Furniture Store">
+                                            <img class="position-relative z-2 d-none d-block-dark"
+                                                src="/img/mega-menu/demo-preview/furniture-dark.jpg"
+                                                alt="Furniture Store">
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                        </div>
+                                    </a>
+                                </li>
+                                <li class="hover-effect-opacity px-2 mx-n2">
+                                    <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'grocery']) }}">
+                                        <span class="fw-medium">Grocery Store</span>
+                                        <span class="d-block fs-xs text-body-secondary">Hero slider + Category cards</span>
+                                        <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                            style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                            <img class="position-relative z-2 d-none-dark"
+                                                src="/img/mega-menu/demo-preview/grocery-light.jpg" alt="Grocery Store">
+                                            <img class="position-relative z-2 d-none d-block-dark"
+                                                src="/img/mega-menu/demo-preview/grocery-dark.jpg" alt="Grocery Store">
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                        </div>
+                                    </a>
+                                </li>
+                                <li class="hover-effect-opacity px-2 mx-n2">
+                                    <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'marketplace']) }}">
+                                        <span class="fw-medium">Marketplace</span>
+                                        <span class="d-block fs-xs text-body-secondary">Multi-vendor, digital goods</span>
+                                        <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                            style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                            <img class="position-relative z-2 d-none-dark"
+                                                src="/img/mega-menu/demo-preview/marketplace-light.jpg" alt="Marketplace">
+                                            <img class="position-relative z-2 d-none d-block-dark"
+                                                src="/img/mega-menu/demo-preview/marketplace-dark.jpg" alt="Marketplace">
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                        </div>
+                                    </a>
+                                </li>
+                                <li class="hover-effect-opacity px-2 mx-n2">
+                                    <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'single-store']) }}">
+                                        <span class="fw-medium">Single Product Store</span>
+                                        <span class="d-block fs-xs text-body-secondary">Single product / mono brand</span>
+                                        <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
+                                            style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
+                                            <img class="position-relative z-2 d-none-dark"
+                                                src="/img/mega-menu/demo-preview/single-store-light.jpg"
+                                                alt="Single Product Store">
+                                            <img class="position-relative z-2 d-none d-block-dark"
+                                                src="/img/mega-menu/demo-preview/single-store-dark.jpg"
+                                                alt="Single Product Store">
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
+                                                style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
+                                            <span
+                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
+                                                style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
+                                        </div>
+                                    </a>
+                                </li>
+                            </ul>
+                        </li>
+                        <li class="nav-item dropdown position-static py-lg-2 me-lg-n1 me-xl-0">
+                            <a class="nav-link dropdown-toggle active" aria-current="page" href="#" role="button"
+                                data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Shop</a>
+                            <div class="dropdown-menu rounded-4 p-4" style="--cz-dropdown-spacer: .875rem">
+                                <div class="d-flex flex-column flex-lg-row gap-4">
+                                    <div style="min-width: 190px">
+                                        <div class="h6 mb-2">Electronics Store</div>
+                                        <ul class="nav flex-column gap-2 mt-0">
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'categories-electronics']) }}">Categories Page</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Catalog with Side Filters</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'product-general-electronics']) }}">Product General Info</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'product-details-electronics']) }}">Product Details</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'product-reviews-electronics']) }}">Product Reviews</a>
+                                            </li>
+                                        </ul>
+                                        <div class="h6 pt-4 mb-2">Fashion Store</div>
+                                        <ul class="nav flex-column gap-2 mt-0">
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Catalog with Side Filters</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'product-fashion']) }}">Product Page</a>
+                                            </li>
+                                        </ul>
+                                        <div class="h6 pt-4 mb-2">Furniture Store</div>
+                                        <ul class="nav flex-column gap-2 mt-0">
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'catalog-furniture']) }}">Catalog with Top Filters</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'product-furniture']) }}">Product Page</a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                    <div style="min-width: 190px">
+                                        <div class="h6 mb-2">Grocery Store</div>
+                                        <ul class="nav flex-column gap-2 mt-0">
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Catalog with Side Filters</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'product-grocery']) }}">Product Page</a>
+                                            </li>
+                                        </ul>
+                                        <div class="h6 pt-4 mb-2">Marketplace</div>
+                                        <ul class="nav flex-column gap-2 mt-0">
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'catalog-marketplace']) }}">Catalog with Top Filters</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['shop', 'product-marketplace']) }}">Digital Product Page</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'marketplace']) }}">Cart / Checkout</a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                    <div style="min-width: 190px">
+                                        <div class="h6 mb-2">Checkout v.1</div>
+                                        <ul class="nav flex-column gap-2 mt-0">
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'v1-cart']) }}">Shopping Cart</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'v1-delivery-1']) }}">Delivery Info (Step 1)</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'v1-delivery-2']) }}">Delivery Info (Step 2)</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'v1-shipping']) }}">Shipping Address</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'v1-payment']) }}">Payment</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'v1-thankyou']) }}">Thank You Page</a>
+                                            </li>
+                                        </ul>
+                                        <div class="h6 pt-4 mb-2">Checkout v.2</div>
+                                        <ul class="nav flex-column gap-2 mt-0">
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'v2-cart']) }}">Shopping Cart</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'v2-delivery']) }}">Delivery Info</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'v2-pickup']) }}">Pickup from Store</a>
+                                            </li>
+                                            <li class="d-flex w-100 pt-1">
+                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
+                                                    href="{{ route('second', ['checkout', 'v2-thankyou']) }}">Thank You Page</a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+                        </li>
+                        <li class="nav-item dropdown py-lg-2 me-lg-n1 me-xl-0">
+                            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
+                                data-bs-trigger="hover" data-bs-auto-close="outside" aria-expanded="false">Account</a>
+                            <ul class="dropdown-menu" style="--cz-dropdown-spacer: .875rem">
+                                <li class="dropend">
+                                    <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Auth
+                                        Pages</a>
+                                    <ul class="dropdown-menu">
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'signin']) }}">Sign In</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'signup']) }}">Sign Up</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'password-recovery']) }}">Password
+                                                Recovery</a></li>
+                                    </ul>
+                                </li>
+                                <li class="dropend">
+                                    <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Shop
+                                        User</a>
+                                    <ul class="dropdown-menu">
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'orders']) }}">Orders History</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'wishlist']) }}">Wishlist</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'payment']) }}">Payment Methods</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'reviews']) }}">My Reviews</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'info']) }}">Personal Info</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'addresses']) }}">Addresses</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'notifications']) }}">Notifications</a>
+                                        </li>
+                                    </ul>
+                                </li>
+                                <li class="dropend">
+                                    <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                        aria-expanded="false">Marketplace User</a>
+                                    <ul class="dropdown-menu">
+                                        <li><a class="dropdown-item"
+                                                href="{{ route('second', ['account', 'marketplace-dashboard']) }}">Dashboard</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-products']) }}">Products</a>
+                                        </li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-sales']) }}">Sales</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-payouts']) }}">Payouts</a>
+                                        </li>
+                                        <li><a class="dropdown-item"
+                                                href="{{ route('second', ['account', 'marketplace-purchases']) }}">Purchases</a></li>
+                                        <li><a class="dropdown-item"
+                                                href="{{ route('second', ['account', 'marketplace-favorites']) }}">Favorites</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-settings']) }}">Settings</a>
+                                        </li>
+                                    </ul>
+                                </li>
+                            </ul>
+                        </li>
+                        <li class="nav-item dropdown py-lg-2 me-lg-n1 me-xl-0">
+                            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
+                                data-bs-trigger="hover" data-bs-auto-close="outside" aria-expanded="false">Pages</a>
+                            <ul class="dropdown-menu" style="--cz-dropdown-spacer: .875rem">
+                                <li class="dropend">
+                                    <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">About</a>
+                                    <ul class="dropdown-menu">
+                                        <li><a class="dropdown-item" href="{{ route('second', ['about', 'v1']) }}">About v.1</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['about', 'v2']) }}">About v.2</a></li>
+                                    </ul>
+                                </li>
+                                <li class="dropend">
+                                    <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Blog</a>
+                                    <ul class="dropdown-menu">
+                                        <li><a class="dropdown-item" href="{{ route('second', ['blog', 'grid-v1']) }}">Grid View v.1</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['blog', 'grid-v2']) }}">Grid View v.2</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['blog', 'list']) }}">List View</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['blog', 'single-v1']) }}">Single Post v.1</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['blog', 'single-v2']) }}">Single Post v.2</a></li>
+                                    </ul>
+                                </li>
+                                <li class="dropend">
+                                    <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover"
+                                        aria-expanded="false">Contact</a>
+                                    <ul class="dropdown-menu">
+                                        <li><a class="dropdown-item" href="{{ route('second', ['contact', 'v1']) }}">Contact v.1</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['contact', 'v2']) }}">Contact v.2</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['contact', 'v3']) }}">Contact v.3</a></li>
+                                    </ul>
+                                </li>
+                                <li class="dropend">
+                                    <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Help
+                                        Center</a>
+                                    <ul class="dropdown-menu">
+                                        <li><a class="dropdown-item" href="{{ route('second', ['help', 'topics-v1']) }}">Help Topics v.1</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['help', 'topics-v2']) }}">Help Topics v.2</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['help', 'single-article-v1']) }}">Help Single
+                                                Article v.1</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['help', 'single-article-v2']) }}">Help Single
+                                                Article v.2</a></li>
+                                    </ul>
+                                </li>
+                                <li class="dropend">
+                                    <a class="dropdown-item dropdown-toggle" href="#!" role="button"
+                                        data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">404
+                                        Error</a>
+                                    <ul class="dropdown-menu">
+                                        <li><a class="dropdown-item" href="{{ route('second', ['404', 'electronics']) }}">404 Electronics</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['404', 'fashion']) }}">404 Fashion</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['404', 'furniture']) }}">404 Furniture</a></li>
+                                        <li><a class="dropdown-item" href="{{ route('second', ['404', 'grocery']) }}">404 Grocery</a></li>
+                                    </ul>
+                                </li>
+                                <li><a class="dropdown-item" href="{{ route('any', 'terms-and-conditions')}}">Terms &amp; Conditions</a>
+                                </li>
+                            </ul>
+                        </li>                        
+                    </ul>
+                </div>
+
+                <!-- Account button visible on screens < 768px wide (md breakpoint) -->
+                <div class="offcanvas-header nav border-top px-0 py-3 mt-3 d-md-none">
+                    <a class="nav-link justify-content-center w-100" href="{{ route('second', ['account', 'signin']) }}">
+                        <i class="ci-user fs-lg opacity-60 ms-n2 me-2"></i>
+                        Account
+                    </a>
+                </div>
+            </nav>
+
+            <!-- Button group -->
+            <div class="d-flex align-items-center">
+
+                <!-- Theme switcher (light/dark/auto) -->
+                <div class="dropdown">
+                    <button type="button"
+                        class="theme-switcher btn btn-icon btn-lg btn-outline-secondary fs-lg border-0 rounded-circle animate-scale"
+                        data-bs-toggle="dropdown" aria-expanded="false" aria-label="Toggle theme (light)">
+                        <span class="theme-icon-active d-flex animate-target">
+                            <i class="ci-sun"></i>
+                        </span>
+                    </button>
+                    <ul class="dropdown-menu" style="--cz-dropdown-min-width: 9rem">
+                        <li>
+                            <button type="button" class="dropdown-item active" data-bs-theme-value="light"
+                                aria-pressed="true">
+                                <span class="theme-icon d-flex fs-base me-2">
+                                    <i class="ci-sun"></i>
+                                </span>
+                                <span class="theme-label">Light</span>
+                                <i class="item-active-indicator ci-check ms-auto"></i>
+                            </button>
+                        </li>
+                        <li>
+                            <button type="button" class="dropdown-item" data-bs-theme-value="dark"
+                                aria-pressed="false">
+                                <span class="theme-icon d-flex fs-base me-2">
+                                    <i class="ci-moon"></i>
+                                </span>
+                                <span class="theme-label">Dark</span>
+                                <i class="item-active-indicator ci-check ms-auto"></i>
+                            </button>
+                        </li>
+                        <li>
+                            <button type="button" class="dropdown-item" data-bs-theme-value="auto"
+                                aria-pressed="false">
+                                <span class="theme-icon d-flex fs-base me-2">
+                                    <i class="ci-auto"></i>
+                                </span>
+                                <span class="theme-label">Auto</span>
+                                <i class="item-active-indicator ci-check ms-auto"></i>
+                            </button>
+                        </li>
+                    </ul>
+                </div>
+
+                <!-- Search toggle button -->
+                <button type="button"
+                    class="btn btn-icon btn-lg fs-xl btn-outline-secondary border-0 rounded-circle animate-shake"
+                    data-bs-toggle="offcanvas" data-bs-target="#searchBox" aria-controls="searchBox"
+                    aria-label="Toggle search bar">
+                    <i class="ci-search animate-target"></i>
+                </button>
+
+                <!-- Account button visible on screens > 768px wide (md breakpoint) -->
+                <a class="btn btn-icon btn-lg fs-lg btn-outline-secondary border-0 rounded-circle animate-shake d-none d-md-inline-flex"
+                    href="{{ route('second', ['account', 'signin']) }}">
+                    <i class="ci-user animate-target"></i>
+                    <span class="visually-hidden">Account</span>
+                </a>
+
+                <!-- Cart button -->
+                <button type="button"
+                    class="btn btn-icon btn-lg fs-xl btn-outline-secondary position-relative border-0 rounded-circle animate-scale"
+                    data-bs-toggle="offcanvas" data-bs-target="#shoppingCart" aria-controls="shoppingCart"
+                    aria-label="Shopping cart">
+                    <span class="position-absolute top-0 start-100 badge fs-xs text-bg-primary rounded-pill mt-1 ms-n4 z-2"
+                        style="--cz-badge-padding-y: .25em; --cz-badge-padding-x: .42em">3</span>
+                    <i class="ci-shopping-bag animate-target me-1"></i>
+                </button>
+            </div>
+        </div>
+    </header>
+
+    <main class="content-wrapper">
+
+        <!-- Product details -->
+        <section class="container pb-2 pb-sm-3 pb-md-4 pb-lg-5 mb-xxl-3">
+
+            <!-- Breadcrumb -->
+            <ol class="breadcrumb pt-3 mt-2 mt-md-3 mb-md-4">
+                <li class="breadcrumb-item"><a href="{{ route('second', ['home', 'marketplace']) }}">Home</a></li>
+                <li class="breadcrumb-item"><a href="{{ route('second', ['shop', 'catalog-marketplace']) }}">Catalog</a></li>
+                <li class="breadcrumb-item active" aria-current="page">Digital product page</li>
+            </ol>
+
+            <!-- Page title + Product meta -->
+            <div class="row">
+                <div class="col-lg-8 col-xl-9">
+                    <h1 class="h3 mb-sm-4">A stunning set of tablet pro mockups for professionals</h1>
+
+                    <!-- Product meta + Action buttons -->
+                    <div class="d-flex flex-column flex-md-row align-items-md-center gap-3 gap-md-4">
+                        <div class="nav align-items-center gap-2 fs-sm">
+                            <a class="nav-link text-body gap-1 p-0" href="{{ route('second', ['shop', 'catalog-marketplace']) }}">
+                                <div class="flex-shrink-0 border rounded-circle" style="width: 32px">
+                                    <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
+                                        <img src="/img/shop/marketplace/single/avatar.png" alt="Avatar">
+                                    </div>
+                                </div>
+                                Coderthemes
+                            </a>
+                            <div class="text-body-secondary">in</div>
+                            <a class="nav-link text-body p-0" href="{{ route('second', ['shop', 'catalog-marketplace']) }}">Mockups</a>
+                        </div>
+                        <div class="d-flex justify-content-between flex-grow-1 gap-4">
+
+                            <!-- Number of sales badge -->
+                            <span class="badge text-info bg-info-subtle d-inline-flex align-items-center fs-sm">
+                                <i class="ci-download fs-base me-1"></i>
+                                65 sales
+                            </span>
+
+                            <!-- Likes + Comments + Sharing -->
+                            <div class="d-flex gap-2">
+                                <button type="button" class="btn btn-sm btn-secondary rounded-pill animate-pulse">
+                                    <i class="ci-heart animate-target fs-sm ms-n1 me-1"></i>
+                                    12
+                                </button>
+                                <a class="btn btn-sm btn-secondary rounded-pill animate-scale" href="#comments">
+                                    <i class="ci-message-circle animate-target fs-sm ms-n1 me-1"></i>
+                                    3
+                                </a>
+                                <div class="dropdown">
+                                    <button type="button"
+                                        class="btn btn-icon btn-sm btn-secondary animate-scale rounded-circle"
+                                        data-bs-toggle="dropdown" aria-expanded="false" aria-label="Share">
+                                        <i class="ci-share-2 animate-target fs-sm"></i>
+                                    </button>
+                                    <ul class="dropdown-menu dropdown-menu-end" style="--cz-dropdown-min-width: 8.5rem">
+                                        <li>
+                                            <a class="dropdown-item" href="#!">
+                                                <i class="ci-facebook fs-base me-2"></i>
+                                                Facebook
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="dropdown-item" href="#!">
+                                                <i class="ci-instagram fs-base me-2"></i>
+                                                Instagram
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a class="dropdown-item" href="#">
+                                                <i class="ci-linkedin fs-base me-2"></i>
+                                                LinkedIn
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row pb-5 pt-4">
+
+                <!-- Product gallery + Description -->
+                <div class="col-lg-8 col-xl-9">
+
+                    <!-- Gallery -->
+                    <div class="vstack gap-3">
+                        <a class="hover-effect-scale hover-effect-opacity position-relative d-flex rounded-4 overflow-hidden"
+                            href="/img/shop/marketplace/single/01.jpg" data-glightbox data-gallery="product-gallery">
+                            <i
+                                class="ci-zoom-in hover-effect-target fs-3 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
+                            <div class="ratio hover-effect-target bg-body-tertiary"
+                                style="--cz-aspect-ratio: calc(640 / 966 * 100%)">
+                                <img src="/img/shop/marketplace/single/01.jpg" alt="Image">
+                            </div>
+                        </a>
+                        <div class="row row-cols-2 g-3">
+                            <div class="col">
+                                <a class="hover-effect-scale hover-effect-opacity position-relative d-flex rounded-4 overflow-hidden"
+                                    href="/img/shop/marketplace/single/02.jpg" data-glightbox
+                                    data-gallery="product-gallery">
+                                    <i
+                                        class="ci-zoom-in hover-effect-target fs-3 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
+                                    <div class="ratio ratio-1x1 hover-effect-target bg-body-tertiary">
+                                        <img src="/img/shop/marketplace/single/th02.jpg" alt="Image">
+                                    </div>
+                                </a>
+                            </div>
+                            <div class="col">
+                                <a class="hover-effect-scale hover-effect-opacity position-relative d-flex rounded-4 overflow-hidden"
+                                    href="/img/shop/marketplace/single/03.jpg" data-glightbox
+                                    data-gallery="product-gallery">
+                                    <i
+                                        class="ci-zoom-in hover-effect-target fs-3 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
+                                    <div class="ratio ratio-1x1 hover-effect-target bg-body-tertiary">
+                                        <img src="/img/shop/marketplace/single/th03.jpg" alt="Image">
+                                    </div>
+                                </a>
+                            </div>
+                        </div>
+                        <a class="hover-effect-scale hover-effect-opacity position-relative d-flex rounded-4 overflow-hidden"
+                            href="/img/shop/marketplace/single/04.jpg" data-glightbox data-gallery="product-gallery">
+                            <i
+                                class="ci-zoom-in hover-effect-target fs-3 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
+                            <div class="ratio hover-effect-target bg-body-tertiary"
+                                style="--cz-aspect-ratio: calc(640 / 966 * 100%)">
+                                <img src="/img/shop/marketplace/single/04.jpg" alt="Image">
+                            </div>
+                        </a>
+                    </div>
+
+                    <!-- Product info visible on screens < 992px wide (lg breakpoint) -->
+                    <h2 class="h4 d-lg-none pt-5 mt-md-2 mb-lg-4">Product info</h2>
+                    <table class="table table-borderless table-sm d-lg-none mb-0">
+                        <tbody>
+                            <tr>
+                                <td class="text-body-secondary ps-0">Format</td>
+                                <td class="text-dark-emphasis pe-0">
+                                    <div class="d-flex gap-3">
+                                        <div class="ratio ratio-1x1 d-flex flex-shrink-0" style="width: 20px">
+                                            <img src="/img/home/marketplace/formats/figma.png" alt="Figma">
+                                        </div>
+                                        <div class="ratio ratio-1x1 d-flex flex-shrink-0" style="width: 20px">
+                                            <img src="/img/home/marketplace/formats/photoshop.png" alt="Photoshop">
+                                        </div>
+                                    </div>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="text-body-secondary ps-0">Last update</td>
+                                <td class="text-dark-emphasis pe-0">21 October 2024</td>
+                            </tr>
+                            <tr>
+                                <td class="text-body-secondary ps-0">Published</td>
+                                <td class="text-dark-emphasis pe-0">10 August 2024</td>
+                            </tr>
+                            <tr>
+                                <td class="text-body-secondary ps-0">High resolution</td>
+                                <td class="text-dark-emphasis pe-0">Yes</td>
+                            </tr>
+                            <tr>
+                                <td class="text-body-secondary ps-0">File type</td>
+                                <td class="text-dark-emphasis pe-0">FIG, PSD, JPG</td>
+                            </tr>
+                            <tr>
+                                <td class="text-body-secondary ps-0">File size</td>
+                                <td class="text-dark-emphasis pe-0">140.8 MB</td>
+                            </tr>
+                        </tbody>
+                    </table>
+
+                    <!-- Overview -->
+                    <h2 class="h4 pt-5 mt-md-2 mb-lg-4">Overview</h2>
+                    <p>Elevate your presentations and design projects with this meticulously crafted set of Tablet Pro
+                        Mockups. Designed with professionals in mind, these mockups are perfect for showcasing your apps,
+                        websites, or digital products in a sleek and modern way. Here's what makes this set stand out.</p>
+                    <p class="mb-0">This Tablet Pro Mockup Set is an essential tool for designers who want to present
+                        their work professionally and impress clients or audiences with stunning, high-quality visuals.</p>
+
+                    <!-- Highlights -->
+                    <h2 class="h4 pt-5 mt-md-2 mb-lg-4">Highlights</h2>
+                    <ul class="mb-0">
+                        <li>The set includes a variety of angles and perspectives</li>
+                        <li>Easily insert your designs into the mockups using smart objects in Adobe Photoshop</li>
+                        <li>These mockups feature professionally crafted lighting and shadow effects</li>
+                        <li>The backgrounds of these mockups are fully customizable</li>
+                        <li>Choose from different color options for the tablet device</li>
+                    </ul>
+
+                    <!-- Tags visible on screens < 992px wide (lg breakpoint) -->
+                    <h2 class="h4 d-lg-none pt-5 mt-md-2 mb-lg-4">Tags</h2>
+                    <div class="d-flex d-lg-none flex-wrap gap-2 mt-n1">
+                        <a class="badge fs-sm text-body-emphasis bg-body-secondary text-decoration-none mt-1 me-1"
+                            href="#!">mockup tablet</a>
+                        <a class="badge fs-sm text-body-emphasis bg-body-secondary text-decoration-none mt-1 me-1"
+                            href="#!">device mockup</a>
+                        <a class="badge fs-sm text-body-emphasis bg-body-secondary text-decoration-none mt-1 me-1"
+                            href="#!">screen</a>
+                        <a class="badge fs-sm text-body-emphasis bg-body-secondary text-decoration-none mt-1 me-1"
+                            href="#!">application</a>
+                        <a class="badge fs-sm text-body-emphasis bg-body-secondary text-decoration-none mt-1 me-1"
+                            href="#!">app mockup</a>
+                        <a class="badge fs-sm text-body-emphasis bg-body-secondary text-decoration-none mt-1 me-1"
+                            href="#!">mobile</a>
+                        <a class="badge fs-sm text-body-emphasis bg-body-secondary text-decoration-none mt-1 me-1"
+                            href="#!">ui/ux</a>
+                        <a class="badge fs-sm text-body-emphasis bg-body-secondary text-decoration-none mt-1 me-1"
+                            href="#!">placeholder</a>
+                    </div>
+
+                    <!-- Comments -->
+                    <div class="d-flex align-items-center gap-3 pt-5 mt-md-2 mb-3" id="comments"
+                        style="scroll-margin-top: 60px">
+                        <h2 class="h4 mb-0">Comments (3)</h2>
+                        <button type="button" class="btn btn-outline-secondary rounded-pill ms-auto"
+                            data-bs-toggle="modal" data-bs-target="#commentForm">
+                            <i class="ci-edit-3 fs-base ms-n1 me-2"></i>
+                            Leave a comment
+                        </button>
+                    </div>
+                    <div class="bg-body-tertiary rounded-4 p-4 p-sm-5">
+                        <div class="vstack gap-3 gap-md-4 mt-n3">
+
+                            <!-- Comment -->
+                            <div class="mt-3">
+                                <div class="d-flex align-items-center justify-content-between gap-3 mb-3">
+                                    <div class="d-flex align-items-center">
+                                        <div class="ratio ratio-1x1 flex-shrink-0 bg-body-secondary rounded-circle overflow-hidden"
+                                            style="width: 40px">
+                                            <img src="/img/shop/marketplace/single/comments/01.jpg" alt="Avatar">
+                                        </div>
+                                        <div class="ps-2 ms-1">
+                                            <div class="fs-sm fw-semibold text-dark-emphasis mb-1">Randy Walker</div>
+                                            <div class="fs-xs text-body-secondary">October 28, 2024</div>
+                                        </div>
+                                    </div>
+                                    <div class="d-flex gap-2">
+                                        <button type="button"
+                                            class="btn btn-sm btn-secondary bg-body border-0 animate-pulse rounded-pill">
+                                            <i class="ci-heart animate-target fs-sm ms-n1 me-1"></i>
+                                            12
+                                        </button>
+                                        <button type="button"
+                                            class="btn btn-icon btn-sm btn-secondary bg-body border-0 animate-slide-end rounded-circle"
+                                            aria-label="Reply">
+                                            <i class="ci-corner-up-right animate-target fs-sm"></i>
+                                        </button>
+                                    </div>
+                                </div>
+                                <p class="fs-sm mb-0">This set of Tablet Pro mockups exceeded my expectations! The high
+                                    resolution and attention to detail make my designs look incredibly polished. The smart
+                                    objects make editing a breeze, and the realistic lighting adds a professional touch to
+                                    all my presentations. Highly recommend it for anyone serious about their design work.
+                                </p>
+                            </div>
+
+                            <!-- Comment -->
+                            <div class="mt-3">
+                                <div class="d-flex align-items-center justify-content-between gap-3 mb-3">
+                                    <div class="d-flex align-items-center">
+                                        <div class="ratio ratio-1x1 flex-shrink-0 bg-body-secondary rounded-circle overflow-hidden"
+                                            style="width: 40px">
+                                            <img src="/img/shop/marketplace/single/comments/02.jpg" alt="Avatar">
+                                        </div>
+                                        <div class="ps-2 ms-1">
+                                            <div class="fs-sm fw-semibold text-dark-emphasis mb-1">Daniel Adams</div>
+                                            <div class="fs-xs text-body-secondary">August 15, 2024</div>
+                                        </div>
+                                    </div>
+                                    <div class="d-flex gap-2">
+                                        <button type="button"
+                                            class="btn btn-sm btn-secondary bg-body border-0 animate-pulse rounded-pill">
+                                            <i class="ci-heart animate-target fs-sm ms-n1 me-1"></i>
+                                            6
+                                        </button>
+                                        <button type="button"
+                                            class="btn btn-icon btn-sm btn-secondary bg-body border-0 animate-slide-end rounded-circle"
+                                            aria-label="Reply">
+                                            <i class="ci-corner-up-right animate-target fs-sm"></i>
+                                        </button>
+                                    </div>
+                                </div>
+                                <p class="fs-sm mb-0">I've used a lot of mockups, but these are some of the best. The
+                                    variety of angles and perspectives really helped me showcase my app from different
+                                    viewpoints. Plus, the customizable backgrounds are a fantastic feature—I could easily
+                                    match the mockups to my brand colors. A must-have for designers!</p>
+                            </div>
+
+                            <!-- Comment -->
+                            <div class="mt-3">
+                                <div class="d-flex align-items-center justify-content-between gap-3 mb-3">
+                                    <div class="d-flex align-items-center">
+                                        <div class="ratio ratio-1x1 flex-shrink-0 bg-body-secondary rounded-circle overflow-hidden"
+                                            style="width: 40px">
+                                            <img src="/img/shop/marketplace/single/comments/03.jpg" alt="Avatar">
+                                        </div>
+                                        <div class="ps-2 ms-1">
+                                            <div class="fs-sm fw-semibold text-dark-emphasis mb-1">Darrell Steward</div>
+                                            <div class="fs-xs text-body-secondary">June 2, 2024</div>
+                                        </div>
+                                    </div>
+                                    <div class="d-flex gap-2">
+                                        <button type="button"
+                                            class="btn btn-sm btn-secondary bg-body border-0 animate-pulse rounded-pill">
+                                            <i class="ci-heart animate-target fs-sm ms-n1 me-1"></i>
+                                            19
+                                        </button>
+                                        <button type="button"
+                                            class="btn btn-icon btn-sm btn-secondary bg-body border-0 animate-slide-end rounded-circle"
+                                            aria-label="Reply">
+                                            <i class="ci-corner-up-right animate-target fs-sm"></i>
+                                        </button>
+                                    </div>
+                                </div>
+                                <p class="fs-sm mb-0">The quality of these mockups is superb, and they're incredibly easy
+                                    to use. The only thing I'd love to see is a few more device color options to match
+                                    different product lines. Other than that, it's a fantastic set that's well worth the
+                                    investment.</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+
+                <!-- Sidebar: Licenses + Info visible on screens > 991px wide (lg breakpoint) -->
+                <aside class="col-lg-4 col-xl-3 d-none d-lg-block">
+                    <div class="d-none d-lg-block" style="margin-top: -110px"></div>
+                    <div class="sticky-lg-top">
+                        <div class="d-none d-lg-block" style="padding-top: 110px"></div>
+
+                        <!-- License selection + Add to cart button -->
+                        <div class="border rounded-4 py-2 px-4 mb-4">
+                            <div class="accordion accordion-flush" id="licenses">
+                                <div class="accordion-item">
+                                    <div class="accordion-header d-flex justify-content-between align-items-center py-3">
+                                        <div class="form-check m-0 collapsed" data-bs-toggle="collapse"
+                                            data-bs-target="#standard-license">
+                                            <input class="form-check-input" type="radio" name="license"
+                                                id="license-std" checked>
+                                            <label class="form-check-label fw-medium text-dark-emphasis"
+                                                for="license-std">Standard license</label>
+                                        </div>
+                                        <div class="h6 mb-0">$16</div>
+                                    </div>
+                                    <div class="accordion-collapse collapse show" id="standard-license"
+                                        data-bs-parent="#licenses">
+                                        <div class="accordion-body py-0 pb-2">
+                                            <ul class="list-unstyled fs-sm">
+                                                <li class="d-flex align-items-center">
+                                                    <i class="ci-check-circle text-info me-2"></i>
+                                                    <span class="fs-ms">Quality verified</span>
+                                                </li>
+                                                <li class="d-flex align-items-center">
+                                                    <i class="ci-check-circle text-info me-2"></i>
+                                                    <span class="fs-ms">Use for a single project</span>
+                                                </li>
+                                                <li class="d-flex align-items-center">
+                                                    <i class="ci-check-circle text-info me-2"></i>
+                                                    <span class="fs-ms">Non-paying users only</span>
+                                                </li>
+                                            </ul>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="accordion-item">
+                                    <div class="accordion-header d-flex justify-content-between align-items-center py-3">
+                                        <div class="form-check m-0" data-bs-toggle="collapse"
+                                            data-bs-target="#extended-license">
+                                            <input type="radio" class="form-check-input" name="license"
+                                                id="license-ext">
+                                            <label class="form-check-label fw-medium text-dark-emphasis"
+                                                for="license-ext">Extended license</label>
+                                        </div>
+                                        <div class="h6 mb-0">$99</div>
+                                    </div>
+                                    <div class="accordion-collapse collapse border-0" id="extended-license"
+                                        data-bs-parent="#licenses">
+                                        <div class="accordion-body py-0 pb-2">
+                                            <ul class="list-unstyled fs-sm">
+                                                <li class="d-flex align-items-center">
+                                                    <i class="ci-check-circle text-info me-2"></i>
+                                                    <span class="fs-ms">Quality verified</span>
+                                                </li>
+                                                <li class="d-flex align-items-center">
+                                                    <i class="ci-check-circle text-info me-2"></i>
+                                                    <span class="fs-ms">Use for a single project</span>
+                                                </li>
+                                                <li class="d-flex align-items-center">
+                                                    <i class="ci-check-circle text-info me-2"></i>
+                                                    <span class="fs-ms">Paying users allowed</span>
+                                                </li>
+                                            </ul>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <button type="button" class="btn btn-lg btn-dark w-100 rounded-pill animate-scale mt-1 mb-3">
+                                <i class="ci-shopping-bag fs-lg animate-target me-2 ms-n1"></i>
+                                Add to cart
+                            </button>
+                        </div>
+
+                        <!-- Product info -->
+                        <div class="ps-4 pe-3 mb-4">
+                            <h4 class="h6 pb-2 mb-1">Product info</h4>
+                            <table class="table table-borderless table-sm fs-sm mb-0">
+                                <tbody>
+                                    <tr>
+                                        <td class="text-body-secondary ps-0">Format</td>
+                                        <td class="text-dark-emphasis pe-0">
+                                            <div class="d-flex gap-3">
+                                                <div class="ratio ratio-1x1 d-flex flex-shrink-0" style="width: 18px">
+                                                    <img src="/img/home/marketplace/formats/figma.png" alt="Figma">
+                                                </div>
+                                                <div class="ratio ratio-1x1 d-flex flex-shrink-0" style="width: 18px">
+                                                    <img src="/img/home/marketplace/formats/photoshop.png"
+                                                        alt="Photoshop">
+                                                </div>
+                                            </div>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td class="text-body-secondary ps-0">Last update</td>
+                                        <td class="text-dark-emphasis pe-0">21 October 2024</td>
+                                    </tr>
+                                    <tr>
+                                        <td class="text-body-secondary ps-0">Published</td>
+                                        <td class="text-dark-emphasis pe-0">10 August 2024</td>
+                                    </tr>
+                                    <tr>
+                                        <td class="text-body-secondary ps-0">High resolution</td>
+                                        <td class="text-dark-emphasis pe-0">Yes</td>
+                                    </tr>
+                                    <tr>
+                                        <td class="text-body-secondary ps-0">File type</td>
+                                        <td class="text-dark-emphasis pe-0">FIG, PSD, JPG</td>
+                                    </tr>
+                                    <tr>
+                                        <td class="text-body-secondary ps-0">File size</td>
+                                        <td class="text-dark-emphasis pe-0">140.8 MB</td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+
+                        <!-- Tags -->
+                        <div class="ps-4 pe-3">
+                            <h4 class="h6 pb-2 mb-1">Tags</h4>
+                            <div class="d-flex flex-wrap gap-2 mt-n1">
+                                <a class="badge text-body-emphasis bg-body-secondary text-decoration-none mt-1 me-1"
+                                    href="#!">mockup tablet</a>
+                                <a class="badge text-body-emphasis bg-body-secondary text-decoration-none mt-1 me-1"
+                                    href="#!">device mockup</a>
+                                <a class="badge text-body-emphasis bg-body-secondary text-decoration-none mt-1 me-1"
+                                    href="#!">screen</a>
+                                <a class="badge text-body-emphasis bg-body-secondary text-decoration-none mt-1 me-1"
+                                    href="#!">application</a>
+                                <a class="badge text-body-emphasis bg-body-secondary text-decoration-none mt-1 me-1"
+                                    href="#!">app mockup</a>
+                                <a class="badge text-body-emphasis bg-body-secondary text-decoration-none mt-1 me-1"
+                                    href="#!">mobile</a>
+                                <a class="badge text-body-emphasis bg-body-secondary text-decoration-none mt-1 me-1"
+                                    href="#!">ui/ux</a>
+                                <a class="badge text-body-emphasis bg-body-secondary text-decoration-none mt-1 me-1"
+                                    href="#!">placeholder</a>
+                            </div>
+                        </div>
+                    </div>
+                </aside>
+            </div>
+        </section>
+
+
+        <!-- Similar products carousel -->
+        <section class="container pb-2 pb-sm-3 pb-md-4 pb-lg-5 mb-xxl-3">
+            <div class="d-flex align-items-center justify-content-between gap-4 pb-3 mb-1 mb-sm-2 mb-md-3">
+                <h2 class="h3 mb-0">You may like this</h2>
+
+                <!-- Prev/next buttons -->
+                <div class="d-flex gap-2">
+                    <button type="button"
+                        class="btn btn-icon btn-outline-secondary animate-slide-start bg-body rounded-circle me-1"
+                        id="prod-prev" aria-label="Prev">
+                        <i class="ci-chevron-left fs-lg animate-target"></i>
+                    </button>
+                    <button type="button"
+                        class="btn btn-icon btn-outline-secondary animate-slide-end bg-body rounded-circle" id="prod-next"
+                        aria-label="Next">
+                        <i class="ci-chevron-right fs-lg animate-target"></i>
+                    </button>
+                </div>
+            </div>
+
+            <!-- Carousel -->
+            <div class="swiper pb-5"
+                data-swiper='{
+          "slidesPerView": 2,
+          "spaceBetween": 16,
+          "loop": true,
+          "navigation": {
+            "prevEl": "#prod-prev",
+            "nextEl": "#prod-next"
+          },
+          "breakpoints": {
+            "500": {
+              "slidesPerView": 2,
+              "spaceBetween": 24
+            },
+            "768": {
+              "slidesPerView": 3,
+              "spaceBetween": 24
+            },
+            "992": {
+              "slidesPerView": 4,
+              "spaceBetween": 16
+            },
+            "1200": {
+              "slidesPerView": 4,
+              "spaceBetween": 24
+            }
+          }
+        }'>
+                <div class="swiper-wrapper">
+
+                    <!-- Product -->
+                    <div class="swiper-slide h-auto">
+                        <div
+                            class="card h-100 animate-underline hover-effect-opacity hover-effect-scale rounded-4 overflow-hidden">
+                            <div class="card-img-top position-relative bg-body-tertiary overflow-hidden">
+                                <a class="ratio d-block hover-effect-target"
+                                    style="--cz-aspect-ratio: calc(220 / 304 * 100%)" href="#!">
+                                    <img src="/img/shop/marketplace/07.jpg" alt="Image">
+                                </a>
+                                <div
+                                    class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 pt-1 pt-sm-0 pe-1 pe-sm-0 mt-2 mt-sm-3 me-2 me-sm-3">
+                                    <button type="button"
+                                        class="btn btn-sm btn-icon btn-light bg-light border-0 rounded-circle animate-pulse"
+                                        aria-label="Add to wishlist">
+                                        <i class="ci-heart animate-target fs-sm"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="card-body p-3">
+                                <div class="d-flex min-w-0 justify-content-between gap-2 gap-sm-3 mb-2">
+                                    <h3 class="nav min-w-0 mb-0">
+                                        <a class="nav-link text-truncate p-0" href="#!">
+                                            <span class="text-truncate animate-target">Isometric smartphone mockups</span>
+                                        </a>
+                                    </h3>
+                                    <div class="h6 mb-0">$24</div>
+                                </div>
+                                <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
+                                    <div class="nav align-items-center gap-1 fs-xs">
+                                        <a class="nav-link fs-xs text-body gap-1 p-0" href="#!">
+                                            <div class="flex-shrink-0 border rounded-circle" style="width: 22px">
+                                                <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
+                                                    <img src="/img/shop/marketplace/avatars/03.png" alt="Avatar">
+                                                </div>
+                                            </div>
+                                            MD Studio
+                                        </a>
+                                        <div class="text-body-secondary">in</div>
+                                        <a class="nav-link fs-xs text-body p-0" href="#!">Mockups</a>
+                                    </div>
+                                    <div class="fs-xs text-body-secondary">95 sales</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Product -->
+                    <div class="swiper-slide h-auto">
+                        <div
+                            class="card h-100 animate-underline hover-effect-opacity hover-effect-scale rounded-4 overflow-hidden">
+                            <div class="card-img-top position-relative bg-body-tertiary overflow-hidden">
+                                <a class="ratio d-block hover-effect-target"
+                                    style="--cz-aspect-ratio: calc(220 / 304 * 100%)" href="#!">
+                                    <img src="/img/shop/marketplace/08.jpg" alt="Image">
+                                </a>
+                                <div
+                                    class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 pt-1 pt-sm-0 pe-1 pe-sm-0 mt-2 mt-sm-3 me-2 me-sm-3">
+                                    <button type="button"
+                                        class="btn btn-sm btn-icon btn-light bg-light border-0 rounded-circle animate-pulse"
+                                        aria-label="Add to wishlist">
+                                        <i class="ci-heart animate-target fs-sm"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="card-body p-3">
+                                <div class="d-flex min-w-0 justify-content-between gap-2 gap-sm-3 mb-2">
+                                    <h3 class="nav min-w-0 mb-0">
+                                        <a class="nav-link text-truncate p-0" href="#!">
+                                            <span class="text-truncate animate-target">iPhone 15 pro mockups</span>
+                                        </a>
+                                    </h3>
+                                    <div class="h6 mb-0">$19</div>
+                                </div>
+                                <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
+                                    <div class="nav align-items-center gap-1 fs-xs">
+                                        <a class="nav-link fs-xs text-body gap-1 p-0" href="#!">
+                                            <div class="flex-shrink-0 border rounded-circle" style="width: 22px">
+                                                <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
+                                                    <img src="/img/shop/marketplace/avatars/01.png" alt="Avatar">
+                                                </div>
+                                            </div>
+                                            Coderthemes
+                                        </a>
+                                        <div class="text-body-secondary">in</div>
+                                        <a class="nav-link fs-xs text-body p-0" href="#!">Mockups</a>
+                                    </div>
+                                    <div class="fs-xs text-body-secondary">47 sales</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Product -->
+                    <div class="swiper-slide h-auto">
+                        <div
+                            class="card h-100 animate-underline hover-effect-opacity hover-effect-scale rounded-4 overflow-hidden">
+                            <div class="card-img-top position-relative bg-body-tertiary overflow-hidden">
+                                <a class="ratio d-block hover-effect-target"
+                                    style="--cz-aspect-ratio: calc(220 / 304 * 100%)" href="#!">
+                                    <img src="/img/shop/marketplace/02.jpg" alt="Image">
+                                </a>
+                                <div
+                                    class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 pt-1 pt-sm-0 pe-1 pe-sm-0 mt-2 mt-sm-3 me-2 me-sm-3">
+                                    <button type="button"
+                                        class="btn btn-sm btn-icon btn-light bg-light border-0 rounded-circle animate-pulse"
+                                        aria-label="Add to wishlist">
+                                        <i class="ci-heart animate-target fs-sm"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="card-body p-3">
+                                <div class="d-flex min-w-0 justify-content-between gap-2 gap-sm-3 mb-2">
+                                    <h3 class="nav min-w-0 mb-0">
+                                        <a class="nav-link text-truncate p-0" href="#!">
+                                            <span class="text-truncate animate-target">Smart watches series 9 mockup</span>
+                                        </a>
+                                    </h3>
+                                    <div class="h6 mb-0">$15</div>
+                                </div>
+                                <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
+                                    <div class="nav align-items-center gap-1 fs-xs">
+                                        <a class="nav-link fs-xs text-body gap-1 p-0" href="#!">
+                                            <div class="flex-shrink-0 border rounded-circle" style="width: 22px">
+                                                <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
+                                                    <img src="/img/shop/marketplace/avatars/03.png" alt="Avatar">
+                                                </div>
+                                            </div>
+                                            MD Studio
+                                        </a>
+                                        <div class="text-body-secondary">in</div>
+                                        <a class="nav-link fs-xs text-body p-0" href="#!">Mockups</a>
+                                    </div>
+                                    <div class="fs-xs text-body-secondary">132 sales</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Product -->
+                    <div class="swiper-slide h-auto">
+                        <div
+                            class="card h-100 animate-underline hover-effect-opacity hover-effect-scale rounded-4 overflow-hidden">
+                            <div class="card-img-top position-relative bg-body-tertiary overflow-hidden">
+                                <a class="ratio d-block hover-effect-target"
+                                    style="--cz-aspect-ratio: calc(220 / 304 * 100%)" href="#!">
+                                    <img src="/img/shop/marketplace/06.jpg" alt="Image">
+                                </a>
+                                <div
+                                    class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 pt-1 pt-sm-0 pe-1 pe-sm-0 mt-2 mt-sm-3 me-2 me-sm-3">
+                                    <button type="button"
+                                        class="btn btn-sm btn-icon btn-light bg-light border-0 rounded-circle animate-pulse"
+                                        aria-label="Add to wishlist">
+                                        <i class="ci-heart animate-target fs-sm"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="card-body p-3">
+                                <div class="d-flex min-w-0 justify-content-between gap-2 gap-sm-3 mb-2">
+                                    <h3 class="nav min-w-0 mb-0">
+                                        <a class="nav-link text-truncate p-0" href="#!">
+                                            <span class="text-truncate animate-target">A stunning set of tablet pro
+                                                mockups</span>
+                                        </a>
+                                    </h3>
+                                    <div class="h6 mb-0">$18</div>
+                                </div>
+                                <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
+                                    <div class="nav align-items-center gap-1 fs-xs">
+                                        <a class="nav-link fs-xs text-body gap-1 p-0" href="#!">
+                                            <div class="flex-shrink-0 border rounded-circle" style="width: 22px">
+                                                <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
+                                                    <img src="/img/shop/marketplace/avatars/04.png" alt="Avatar">
+                                                </div>
+                                            </div>
+                                            Fireby
+                                        </a>
+                                        <div class="text-body-secondary">in</div>
+                                        <a class="nav-link fs-xs text-body p-0" href="#!">Mockups</a>
+                                    </div>
+                                    <div class="fs-xs text-body-secondary">33 sales</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Product -->
+                    <div class="swiper-slide h-auto">
+                        <div
+                            class="card h-100 animate-underline hover-effect-opacity hover-effect-scale rounded-4 overflow-hidden">
+                            <div class="card-img-top position-relative bg-body-tertiary overflow-hidden">
+                                <a class="ratio d-block hover-effect-target"
+                                    style="--cz-aspect-ratio: calc(220 / 304 * 100%)" href="#!">
+                                    <img src="/img/shop/marketplace/13.jpg" alt="Image">
+                                </a>
+                                <div
+                                    class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 pt-1 pt-sm-0 pe-1 pe-sm-0 mt-2 mt-sm-3 me-2 me-sm-3">
+                                    <button type="button"
+                                        class="btn btn-sm btn-icon btn-light bg-light border-0 rounded-circle animate-pulse"
+                                        aria-label="Add to wishlist">
+                                        <i class="ci-heart animate-target fs-sm"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="card-body p-3">
+                                <div class="d-flex min-w-0 justify-content-between gap-2 gap-sm-3 mb-2">
+                                    <h3 class="nav min-w-0 mb-0">
+                                        <a class="nav-link text-truncate p-0" href="#!">
+                                            <span class="text-truncate animate-target">Multi device mockup PSD</span>
+                                        </a>
+                                    </h3>
+                                    <div class="h6 mb-0">$27</div>
+                                </div>
+                                <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
+                                    <div class="nav align-items-center gap-1 fs-xs">
+                                        <a class="nav-link fs-xs text-body gap-1 p-0" href="#!">
+                                            <div class="flex-shrink-0 border rounded-circle" style="width: 22px">
+                                                <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
+                                                    <img src="/img/shop/marketplace/avatars/01.png" alt="Avatar">
+                                                </div>
+                                            </div>
+                                            Coderthemes
+                                        </a>
+                                        <div class="text-body-secondary">in</div>
+                                        <a class="nav-link fs-xs text-body p-0" href="#!">Mockups</a>
+                                    </div>
+                                    <div class="fs-xs text-body-secondary">43 sales</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    @include('layouts.partials/footer3')
+@endsection
+
+@section('scripts')
+@endsection
diff --git a/resources/views/shop/product-reviews-electronics.blade.php b/resources/views/shop/product-reviews-electronics.blade.php
new file mode 100644
index 0000000..7226fc3
--- /dev/null
+++ b/resources/views/shop/product-reviews-electronics.blade.php
@@ -0,0 +1,1006 @@
+@extends('layouts.landing', ['title' => 'Electronics Store - Product Reviews'])
+
+@section('content')
+    <div class="modal fade" id="reviewForm" data-bs-backdrop="static" tabindex="-1" aria-labelledby="reviewFormLabel"
+        aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
+            <form class="modal-content needs-validation" novalidate>
+                <div class="modal-header border-0">
+                    <h5 class="modal-title" id="reviewFormLabel">Leave a review</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body pb-3 pt-0">
+                    <div class="mb-3">
+                        <label for="review-name" class="form-label">Your name <span class="text-danger">*</span></label>
+                        <input type="text" class="form-control" id="review-name" required>
+                        <div class="invalid-feedback">Please enter your name!</div>
+                        <small class="form-text">Will be displayed on the comment.</small>
+                    </div>
+                    <div class="mb-3">
+                        <label for="review-email" class="form-label">Your email <span class="text-danger">*</span></label>
+                        <input type="email" class="form-control" id="review-email" required>
+                        <div class="invalid-feedback">Please provide valid email address!</div>
+                        <small class="form-text">Authentication only - we won't spam you.</small>
+                    </div>
+                    <div class="mb-3">
+                        <label class="form-label">Rating <span class="text-danger">*</span></label>
+                        <select class="form-select"
+                            data-select='{
+                "placeholderValue": "Choose rating",
+                "choices": [
+                  {
+                    "value": "",
+                    "label": "Choose rating",
+                    "placeholder": true
+                  },
+                  {
+                    "value": "1",
+                    "label": "<span class=\"visually-hidden\">1 star</span>",
+                    "customProperties": {
+                      "icon": "<span class=\"d-flex gap-1 py-1\"><i class=\"ci-star-filled text-warning\"></i></span>",
+                      "selected": "1 star"
+                    }
+                  },
+                  {
+                    "value": "2",
+                    "label": "<span class=\"visually-hidden\">2 stars</span>",
+                    "customProperties": {
+                      "icon": "<span class=\"d-flex gap-1 py-1\"><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i></span>",
+                      "selected": "2 stars"
+                    }
+                  },
+                  {
+                    "value": "3",
+                    "label": "<span class=\"visually-hidden\">3 stars</span>",
+                    "customProperties": {
+                      "icon": "<span class=\"d-flex gap-1 py-1\"><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i></span>",
+                      "selected": "3 stars"
+                    }
+                  },
+                  {
+                    "value": "4",
+                    "label": "<span class=\"visually-hidden\">4 stars</span>",
+                    "customProperties": {
+                      "icon": "<span class=\"d-flex gap-1 py-1\"><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i></span>",
+                      "selected": "4 stars"
+                    }
+                  },
+                  {
+                    "value": "5",
+                    "label": "<span class=\"visually-hidden\">5 stars</span>",
+                    "customProperties": {
+                      "icon": "<span class=\"d-flex gap-1 py-1\"><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i></span>",
+                      "selected": "5 stars"
+                    }
+                  }
+                ]
+              }'
+                            data-select-template="true" required></select>
+                        <div class="invalid-feedback">Please choose your rating!</div>
+                    </div>
+                    <div class="mb-3">
+                        <label class="form-label" for="review-text">Review <span class="text-danger">*</span></label>
+                        <textarea class="form-control" rows="4" id="review-text" required></textarea>
+                        <div class="invalid-feedback">Please write a review!</div>
+                        <small class="form-text">Your review must be at least 50 characters.</small>
+                    </div>
+                    <div class="mb-3">
+                        <label class="form-label">Pros</label>
+                        <input type="text" class="form-select"
+                            data-select='{"placeholderValue": "Type and hit \"Enter\""}'>
+                    </div>
+                    <div>
+                        <label class="form-label">Cons</label>
+                        <input type="text" class="form-select"
+                            data-select='{"placeholderValue": "Type and hit \"Enter\""}'>
+                    </div>
+                </div>
+                <div class="modal-footer flex-nowrap gap-3 border-0 px-4">
+                    <button type="reset" class="btn btn-secondary w-100 m-0" data-bs-dismiss="modal">Cancel</button>
+                    <button type="submit" class="btn btn-primary w-100 m-0">Submit review</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    @include('layouts.partials/offcanvas')
+
+    @include('layouts.partials/navbar', ['wishlist' => True])
+
+    <!-- Page content -->
+    <main class="content-wrapper">
+
+      <!-- Breadcrumb -->
+      <nav class="container pt-3 my-3 my-md-4" aria-label="breadcrumb">
+        <ol class="breadcrumb">
+          <li class="breadcrumb-item"><a href="{{ route('second', ['home', 'electronics']) }}">Home</a></li>
+          <li class="breadcrumb-item"><a href="{{ route('second', ['shop', 'catalog-electronics']) }}">Shop</a></li>
+          <li class="breadcrumb-item active" aria-current="page">Product page</li>
+        </ol>
+      </nav>
+
+
+      <!-- Page title -->
+      <h1 class="h3 container mb-4">Apple iPhone 14 Plus 128GB Blue</h1>
+
+
+      <!-- Nav links -->
+      <section class="container position-relative z-2 pb-4 pb-md-5 mb-2 mb-md-0">
+        <div class="border-bottom">
+          <ul class="nav nav-underline flex-nowrap gap-4">
+            <li class="nav-item me-sm-2">
+              <a class="nav-link" href="{{ route('second', ['shop', 'product-general-electronics']) }}">General info</a>
+            </li>
+            <li class="nav-item me-sm-2">
+              <a class="nav-link" href="{{ route('second', ['shop', 'product-details-electronics']) }}">Product details</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link pe-none active" href="#!">Reviews (68)</a>
+            </li>
+          </ul>
+        </div>
+      </section>
+
+
+      <!-- Product details + Sticky sidebar -->
+      <section class="container pb-5 mb-2 mb-md-3 mb-lg-4 mb-xl-5">
+        <div class="row">
+
+          <!-- Sticky product preview -->
+          <aside class="col-md-5 col-xl-4 offset-xl-1 order-md-2 mb-5 mb-md-0" id="scrollPastPoint" style="margin-top: -100px">
+            <div class="position-sticky top-0 ps-md-3 ps-lg-4 ps-xl-0" style="padding-top: 100px">
+              <div class="border rounded p-3 p-lg-4">
+                <div class="d-flex align-items-center mb-3">
+                  <div class="ratio ratio-1x1 flex-shrink-0" style="width: 110px">
+                    <img src="/img/shop/electronics/thumbs/10.png" width="110" alt="iPhone 14">
+                  </div>
+                  <div class="w-100 min-w-0 ps-2 ps-sm-3">
+                    <div class="d-flex align-items-center gap-2 mb-2">
+                      <div class="d-flex gap-1 fs-xs">
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star text-body-tertiary opacity-75"></i>
+                      </div>
+                      <span class="text-body-tertiary fs-xs">68</span>
+                    </div>
+                    <h4 class="fs-sm fw-medium mb-2">Apple iPhone 14 Plus 128GB Blue</h4>
+                    <div class="h5 mb-0">$940.00</div>
+                  </div>
+                </div>
+                <div class="d-flex gap-2 gap-lg-3">
+                  <button type="button" class="btn btn-primary w-100 animate-slide-end">
+                    <i class="ci-shopping-cart fs-base animate-target ms-n1 me-2"></i>
+                    Add to cart
+                  </button>
+                  <button type="button" class="btn btn-icon btn-secondary animate-pulse" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-sm" data-bs-title="Add to Wishlist" aria-label="Add to Wishlist">
+                    <i class="ci-heart fs-base animate-target"></i>
+                  </button>
+                  <button type="button" class="btn btn-icon btn-secondary animate-rotate" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-sm" data-bs-title="Compare" aria-label="Compare">
+                    <i class="ci-refresh-cw fs-base animate-target"></i>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </aside>
+
+
+          <!-- Sticky product preview + Add to cart CTA -->
+          <section class="sticky-product-banner sticky-top d-md-none start-0 ms-n4" data-sticky-element>
+            <div class="sticky-product-banner-inner start-0 pt-5">
+              <div class="vw-100 bg-body border-bottom border-light border-opacity-10 shadow pt-4 pb-2">
+                <div class="container d-flex align-items-center">
+                  <div class="d-flex align-items-center min-w-0 ms-n2 me-3">
+                    <div class="ratio ratio-1x1 flex-shrink-0" style="width: 50px">
+                      <img src="/img/shop/electronics/thumbs/10.png" alt="iPhone 14">
+                    </div>
+                    <div class="w-100 min-w-0 ps-2">
+                      <h4 class="fs-sm fw-medium text-truncate mb-1">Apple iPhone 14 Plus 128GB Blue</h4>
+                      <div class="h6 mb-0">$940.00</div>
+                    </div>
+                  </div>
+                  <div class="d-flex gap-2 ms-auto">
+                    <button type="button" class="btn btn-icon btn-secondary animate-pulse" aria-label="Add to Wishlist">
+                      <i class="ci-heart fs-base animate-target"></i>
+                    </button>
+                    <button type="button" class="btn btn-primary animate-slide-end d-none d-sm-inline-flex">
+                      <i class="ci-shopping-cart fs-base animate-target ms-n1 me-2"></i>
+                      Add to cart
+                    </button>
+                    <button type="button" class="btn btn-icon btn-primary animate-slide-end d-sm-none" aria-label="Add to Cart">
+                      <i class="ci-shopping-cart fs-lg animate-target"></i>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </section>
+
+
+          <!-- Product reviews -->
+          <div class="col-md-7 order-md-1">
+            <div class="d-flex align-items-center mb-4">
+              <h2 class="h3 mb-0">Reviews</h2>
+              <button type="button" class="btn btn-secondary ms-auto" data-bs-toggle="modal" data-bs-target="#reviewForm">
+                <i class="ci-edit-3 fs-base ms-n1 me-2"></i>
+                Leave a review
+              </button>
+            </div>
+
+            <!-- Reviews stats -->
+            <div class="row g-4 pb-3">
+              <div class="col-sm-4">
+
+                <!-- Overall rating card -->
+                <div class="d-flex flex-column align-items-center justify-content-center h-100 bg-body-tertiary rounded p-4">
+                  <div class="h1 pb-2 mb-1">4.1</div>
+                  <div class="hstack justify-content-center gap-1 fs-sm mb-2">
+                    <i class="ci-star-filled text-warning"></i>
+                    <i class="ci-star-filled text-warning"></i>
+                    <i class="ci-star-filled text-warning"></i>
+                    <i class="ci-star-filled text-warning"></i>
+                    <i class="ci-star text-body-tertiary opacity-60"></i>
+                  </div>
+                  <div class="fs-sm">68 reviews</div>
+                </div>
+              </div>
+              <div class="col-sm-8">
+
+                <!-- Rating breakdown by quantity -->
+                <div class="vstack gap-3">
+
+                  <!-- 5 stars -->
+                  <div class="hstack gap-2">
+                    <div class="hstack fs-sm gap-1">
+                      5<i class="ci-star-filled text-warning"></i>
+                    </div>
+                    <div class="progress w-100" role="progressbar" aria-label="Five stars" aria-valuenow="54" aria-valuemin="0" aria-valuemax="100" style="height: 4px">
+                      <div class="progress-bar bg-warning rounded-pill" style="width: 54%"></div>
+                    </div>
+                    <div class="fs-sm text-nowrap text-end" style="width: 40px;">37</div>
+                  </div>
+
+                  <!-- 4 stars -->
+                  <div class="hstack gap-2">
+                    <div class="hstack fs-sm gap-1">
+                      4<i class="ci-star-filled text-warning"></i>
+                    </div>
+                    <div class="progress w-100" role="progressbar" aria-label="Four stars" aria-valuenow="23.5" aria-valuemin="0" aria-valuemax="100" style="height: 4px">
+                      <div class="progress-bar bg-warning rounded-pill" style="width: 23.5%"></div>
+                    </div>
+                    <div class="fs-sm text-nowrap text-end" style="width: 40px;">16</div>
+                  </div>
+
+                  <!-- 3 stars -->
+                  <div class="hstack gap-2">
+                    <div class="hstack fs-sm gap-1">
+                      3<i class="ci-star-filled text-warning"></i>
+                    </div>
+                    <div class="progress w-100" role="progressbar" aria-label="Three stars" aria-valuenow="13" aria-valuemin="0" aria-valuemax="100" style="height: 4px">
+                      <div class="progress-bar bg-warning rounded-pill" style="width: 13%"></div>
+                    </div>
+                    <div class="fs-sm text-nowrap text-end" style="width: 40px;">9</div>
+                  </div>
+
+                  <!-- 2 stars -->
+                  <div class="hstack gap-2">
+                    <div class="hstack fs-sm gap-1">
+                      2<i class="ci-star-filled text-warning"></i>
+                    </div>
+                    <div class="progress w-100" role="progressbar" aria-label="Two stars" aria-valuenow="6" aria-valuemin="0" aria-valuemax="100" style="height: 4px">
+                      <div class="progress-bar bg-warning rounded-pill" style="width: 6%"></div>
+                    </div>
+                    <div class="fs-sm text-nowrap text-end" style="width: 40px;">4</div>
+                  </div>
+
+                  <!-- 1 star -->
+                  <div class="hstack gap-2">
+                    <div class="hstack fs-sm gap-1">
+                      1<i class="ci-star-filled text-warning"></i>
+                    </div>
+                    <div class="progress w-100" role="progressbar" aria-label="One star" aria-valuenow="3.5" aria-valuemin="0" aria-valuemax="100" style="height: 4px">
+                      <div class="progress-bar bg-warning rounded-pill" style="width: 3.5%"></div>
+                    </div>
+                    <div class="fs-sm text-nowrap text-end" style="width: 40px;">3</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Review -->
+            <div class="border-bottom py-3 mb-3">
+              <div class="d-flex align-items-center mb-3">
+                <div class="text-nowrap me-3">
+                  <span class="h6 mb-0">Rafael Marquez</span>
+                  <i class="ci-check-circle text-success align-middle ms-1" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-sm" data-bs-title="Verified customer"></i>
+                </div>
+                <span class="text-body-secondary fs-sm ms-auto">June 28, 2024</span>
+              </div>
+              <div class="d-flex gap-1 fs-sm pb-2 mb-1">
+                <i class="ci-star-filled text-warning"></i>
+                <i class="ci-star-filled text-warning"></i>
+                <i class="ci-star-filled text-warning"></i>
+                <i class="ci-star-filled text-warning"></i>
+                <i class="ci-star-filled text-warning"></i>
+              </div>
+              <ul class="list-inline gap-2 pb-2 mb-1">
+                <li class="fs-sm me-4"><span class="text-dark-emphasis fw-medium">Color:</span> Blue</li>
+                <li class="fs-sm"><span class="text-dark-emphasis fw-medium">Model:</span> 128GB</li>
+              </ul>
+              <p class="fs-sm">The phone has a new A15 Bionic chip, which makes it lightning-fast and responsive. The camera system has also been upgraded, and it now includes a 12-megapixel ultra-wide lens and a 12-megapixel wide lens.</p>
+              <ul class="list-unstyled fs-sm pb-2 mb-1">
+                <li><span class="text-dark-emphasis fw-medium">Pros:</span> Powerful A15 Bionic chip, improved camera</li>
+                <li><span class="text-dark-emphasis fw-medium">Cons:</span> High price tag</li>
+              </ul>
+              <div class="nav align-items-center">
+                <button type="button" class="nav-link animate-underline px-0">
+                  <i class="ci-corner-down-right fs-base ms-1 me-1"></i>
+                  <span class="animate-target">Reply</span>
+                </button>
+                <button type="button" class="nav-link text-body-secondary animate-scale px-0 ms-auto me-n1">
+                  <i class="ci-thumbs-up fs-base animate-target me-1"></i>
+                  0
+                </button>
+                <hr class="vr my-2 mx-3">
+                <button type="button" class="nav-link text-body-secondary animate-scale px-0 ms-n1">
+                  <i class="ci-thumbs-down fs-base animate-target me-1"></i>
+                  0
+                </button>
+              </div>
+            </div>
+
+            <!-- Review -->
+            <div class="border-bottom py-3 mb-3">
+              <div class="d-flex align-items-center mb-3">
+                <div class="text-nowrap me-3">
+                  <span class="h6 mb-0">Daniel Adams</span>
+                </div>
+                <span class="text-body-secondary fs-sm ms-auto">May 15, 2024</span>
+              </div>
+              <div class="d-flex gap-1 fs-sm pb-2 mb-1">
+                <i class="ci-star-filled text-warning"></i>
+                <i class="ci-star-filled text-warning"></i>
+                <i class="ci-star-filled text-warning"></i>
+                <i class="ci-star-filled text-warning"></i>
+                <i class="ci-star text-body-tertiary opacity-75"></i>
+              </div>
+              <ul class="list-inline gap-2 pb-2 mb-1">
+                <li class="fs-sm me-4"><span class="text-dark-emphasis fw-medium">Color:</span> Midnight</li>
+                <li class="fs-sm"><span class="text-dark-emphasis fw-medium">Model:</span> 256GB</li>
+              </ul>
+              <p class="fs-sm">Overall, the iPhone 14 Plus was a solid upgrade for me. However, potential buyers should weigh the high price against the incremental nature of the upgrades and consider their specific needs before making a purchase.</p>
+              <ul class="list-unstyled fs-sm pb-2 mb-1">
+                <li><span class="text-dark-emphasis fw-medium">Pros:</span> Elegant design, great storage capacity</li>
+                <li><span class="text-dark-emphasis fw-medium">Cons:</span> Battery life, overpriced</li>
+              </ul>
+              <div class="nav align-items-center">
+                <button type="button" class="nav-link animate-underline px-0">
+                  <i class="ci-corner-down-right fs-base ms-1 me-1"></i>
+                  <span class="animate-target">Reply</span>
+                </button>
+                <button type="button" class="nav-link text-body-secondary animate-scale px-0 ms-auto me-n1">
+                  <i class="ci-thumbs-up text-success fs-base animate-target me-1"></i>
+                  18
+                </button>
+                <hr class="vr my-2 mx-3">
+                <button type="button" class="nav-link text-body-secondary animate-scale px-0 ms-n1">
+                  <i class="ci-thumbs-down text-danger fs-base animate-target me-1"></i>
+                  2
+                </button>
+              </div>
+            </div>
+
+            <!-- Review -->
+            <div class="border-bottom py-3 mb-3">
+              <div class="d-flex align-items-center mb-3">
+                <div class="text-nowrap me-3">
+                  <span class="h6 mb-0">Andrew Richards</span>
+                  <i class="ci-check-circle text-success align-middle ms-1" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-sm" data-bs-title="Verified customer"></i>
+                </div>
+                <span class="text-body-secondary fs-sm ms-auto">May 7, 2024</span>
+              </div>
+              <div class="d-flex gap-1 fs-sm pb-2 mb-1">
+                <i class="ci-star-filled text-warning"></i>
+                <i class="ci-star-filled text-warning"></i>
+                <i class="ci-star-filled text-warning"></i>
+                <i class="ci-star-filled text-warning"></i>
+                <i class="ci-star-filled text-warning"></i>
+              </div>
+              <ul class="list-inline gap-2 pb-2 mb-1">
+                <li class="fs-sm me-4"><span class="text-dark-emphasis fw-medium">Color:</span> Purple</li>
+                <li class="fs-sm"><span class="text-dark-emphasis fw-medium">Model:</span> 128GB</li>
+              </ul>
+              <p class="fs-sm">The iPhone 14 is nothing short of exceptional, combining cutting-edge technology with a design that continues to set the standard for premium smartphones. That's why it deserves a perfect 5-star rating.</p>
+              <ul class="list-unstyled fs-sm pb-2 mb-1">
+                <li><span class="text-dark-emphasis fw-medium">Pros:</span> Unparalleled performance, great camera, stunning design</li>
+                <li><span class="text-dark-emphasis fw-medium">Cons:</span> No in my opinion</li>
+              </ul>
+              <div class="nav align-items-center">
+                <button type="button" class="nav-link animate-underline px-0">
+                  <i class="ci-corner-down-right fs-base ms-1 me-1"></i>
+                  <span class="animate-target">Reply</span>
+                </button>
+                <button type="button" class="nav-link text-body-secondary animate-scale px-0 ms-auto me-n1">
+                  <i class="ci-thumbs-up text-success fs-base animate-target me-1"></i>
+                  29
+                </button>
+                <hr class="vr my-2 mx-3">
+                <button type="button" class="nav-link text-body-secondary animate-scale px-0 ms-n1">
+                  <i class="ci-thumbs-down text-danger fs-base animate-target me-1"></i>
+                  5
+                </button>
+              </div>
+
+              <!-- Reply -->
+              <div class="ps-3 pb-2">
+                <div class="d-flex align-items-center pt-3 pb-2 mb-1">
+                  <span class="badge bg-primary me-2">Reply</span>
+                  <span class="h6 mb-0 me-4">Cartzilla Company</span>
+                  <span class="text-body-secondary fs-sm">May 8, 2024</span>
+                </div>
+                <p class="fs-sm mb-0">Thank you for your feedback! We are glad that you were satisfied with your purchase :)</p>
+              </div>
+            </div>
+
+            <!-- Review -->
+            <div class="border-bottom py-3 mb-3">
+              <div class="d-flex align-items-center mb-3">
+                <div class="text-nowrap me-3">
+                  <span class="h6 mb-0">Jenny Wilson</span>
+                  <i class="ci-check-circle text-success align-middle ms-1" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-sm" data-bs-title="Verified customer"></i>
+                </div>
+                <span class="text-body-secondary fs-sm ms-auto">April 26, 2024</span>
+              </div>
+              <div class="d-flex gap-1 fs-sm pb-2 mb-1">
+                <i class="ci-star-filled text-warning"></i>
+                <i class="ci-star-filled text-warning"></i>
+                <i class="ci-star-filled text-warning"></i>
+                <i class="ci-star-filled text-warning"></i>
+                <i class="ci-star text-body-tertiary opacity-75"></i>
+              </div>
+              <ul class="list-inline gap-2 pb-2 mb-1">
+                <li class="fs-sm me-4"><span class="text-dark-emphasis fw-medium">Color:</span> Blue</li>
+                <li class="fs-sm"><span class="text-dark-emphasis fw-medium">Model:</span> 64GB</li>
+              </ul>
+              <p class="fs-sm">iPhone 14 is a reliable upgrade with notable improvements in performance and camera quality. However, the higher price and the lack of groundbreaking design changes might make potential buyers pause. If you're due for an upgrade and prioritize performance and camera enhancements, the iPhone 14 is a solid choice, but budget-conscious consumers may want to weigh their options.</p>
+              <div class="d-flex gap-2 pt-1 pb-3">
+                <img src="/img/shop/electronics/product/reviews/01.png" class="d-block rounded-2 me-1" width="86" alt="Image">
+                <img src="/img/shop/electronics/product/reviews/02.png" class="d-block rounded-2 me-1" width="86" alt="Image">
+                <img src="/img/shop/electronics/product/reviews/03.png" class="d-block rounded-2 me-1" width="86" alt="Image">
+              </div>
+              <div class="nav align-items-center">
+                <button type="button" class="nav-link animate-underline px-0">
+                  <i class="ci-corner-down-right fs-base ms-1 me-1"></i>
+                  <span class="animate-target">Reply</span>
+                </button>
+                <button type="button" class="nav-link text-body-secondary animate-scale px-0 ms-auto me-n1">
+                  <i class="ci-thumbs-up text-success fs-base animate-target me-1"></i>
+                  13
+                </button>
+                <hr class="vr my-2 mx-3">
+                <button type="button" class="nav-link text-body-secondary animate-scale px-0 ms-n1">
+                  <i class="ci-thumbs-down text-danger fs-base animate-target me-1"></i>
+                  1
+                </button>
+              </div>
+            </div>
+
+            <!-- Review -->
+            <div class="border-bottom py-3 mb-3">
+              <div class="d-flex align-items-center mb-3">
+                <div class="text-nowrap me-3">
+                  <span class="h6 mb-0">Kristin Watson</span>
+                </div>
+                <span class="text-body-secondary fs-sm ms-auto">April 19, 2024</span>
+              </div>
+              <div class="d-flex gap-1 fs-sm pb-2 mb-1">
+                <i class="ci-star-filled text-warning"></i>
+                <i class="ci-star-filled text-warning"></i>
+                <i class="ci-star-filled text-warning"></i>
+                <i class="ci-star-filled text-warning"></i>
+                <i class="ci-star text-body-tertiary opacity-75"></i>
+              </div>
+              <ul class="list-inline gap-2 pb-2 mb-1">
+                <li class="fs-sm me-4"><span class="text-dark-emphasis fw-medium">Color:</span> Starlight</li>
+                <li class="fs-sm"><span class="text-dark-emphasis fw-medium">Model:</span> 128GB</li>
+              </ul>
+              <p class="fs-sm">iPhone 14 impresses with its camera prowess, delivering high-quality images. However, the decision to eliminate the 3.5mm headphone jack may impact users who rely on wired audio accessories, requiring them to adapt to wireless alternatives or use an adapter.</p>
+              <ul class="list-unstyled fs-sm pb-2 mb-1">
+                <li><span class="text-dark-emphasis fw-medium">Pros:</span> 12-megapixel ultra-wide lens and a 12-megapixel wide lens</li>
+                <li><span class="text-dark-emphasis fw-medium">Cons:</span> Does not have a headphone jack</li>
+              </ul>
+              <div class="nav align-items-center">
+                <button type="button" class="nav-link animate-underline px-0">
+                  <i class="ci-corner-down-right fs-base ms-1 me-1"></i>
+                  <span class="animate-target">Reply</span>
+                </button>
+                <button type="button" class="nav-link text-body-secondary animate-scale px-0 ms-auto me-n1">
+                  <i class="ci-thumbs-up text-success fs-base animate-target me-1"></i>
+                  32
+                </button>
+                <hr class="vr my-2 mx-3">
+                <button type="button" class="nav-link text-body-secondary animate-scale px-0 ms-n1">
+                  <i class="ci-thumbs-down text-danger fs-base animate-target me-1"></i>
+                  7
+                </button>
+              </div>
+            </div>
+
+            <!-- Pagination -->
+            <nav class="mt-3 pt-2 pt-md-3" aria-label="Reviews pagination">
+              <ul class="pagination">
+                <li class="page-item active" aria-current="page">
+                  <span class="page-link">
+                    1
+                    <span class="visually-hidden">(current)</span>
+                  </span>
+                </li>
+                <li class="page-item">
+                  <a class="page-link" href="#!">2</a>
+                </li>
+                <li class="page-item">
+                  <a class="page-link" href="#!">3</a>
+                </li>
+                <li class="page-item">
+                  <a class="page-link" href="#!">4</a>
+                </li>
+                <li class="page-item">
+                  <span class="page-link pe-none">...</span>
+                </li>
+                <li class="page-item">
+                  <a class="page-link" href="#!">16</a>
+                </li>
+              </ul>
+            </nav>
+          </div>
+        </div>
+      </section>
+
+
+      <!-- Viewed products (Carousel) -->
+      <section class="container pb-4 pb-md-5 mb-2 mb-sm-0 mb-lg-2 mb-xl-4">
+        <h2 class="h3 border-bottom pb-4 mb-0">Viewed products</h2>
+
+        <!-- Product carousel -->
+        <div class="position-relative mx-md-1">
+
+          <!-- External slider prev/next buttons visible on screens > 500px wide (sm breakpoint) -->
+          <button type="button" class="viewed-prev btn btn-prev btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-start position-absolute top-50 start-0 z-2 translate-middle-y ms-n1 d-none d-sm-inline-flex" aria-label="Prev">
+            <i class="ci-chevron-left fs-lg animate-target"></i>
+          </button>
+          <button type="button" class="viewed-next btn btn-next btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-end position-absolute top-50 end-0 z-2 translate-middle-y me-n1 d-none d-sm-inline-flex" aria-label="Next">
+            <i class="ci-chevron-right fs-lg animate-target"></i>
+          </button>
+
+          <!-- Slider -->
+          <div class="swiper py-4 px-sm-3" data-swiper='{
+            "slidesPerView": 2,
+            "spaceBetween": 24,
+            "loop": true,
+            "navigation": {
+              "prevEl": ".viewed-prev",
+              "nextEl": ".viewed-next"
+            },
+            "breakpoints": {
+              "768": {
+                "slidesPerView": 3
+              },
+              "992": {
+                "slidesPerView": 4
+              }
+            }
+          }'>
+            <div class="swiper-wrapper">
+
+              <!-- Item -->
+              <div class="swiper-slide">
+                <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+                  <div class="position-relative">
+                    <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                      <div class="d-flex flex-column gap-2">
+                        <button type="button" class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex" aria-label="Add to Wishlist">
+                          <i class="ci-heart fs-base animate-target"></i>
+                        </button>
+                        <button type="button" class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex" aria-label="Compare">
+                          <i class="ci-refresh-cw fs-base animate-target"></i>
+                        </button>
+                      </div>
+                    </div>
+                    <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                      <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body" data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                        <i class="ci-more-vertical fs-lg"></i>
+                      </button>
+                      <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                        <li>
+                          <a class="dropdown-item" href="#!">
+                            <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                            Add to Wishlist
+                          </a>
+                        </li>
+                        <li>
+                          <a class="dropdown-item" href="#!">
+                            <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                            Compare
+                          </a>
+                        </li>
+                      </ul>
+                    </div>
+                    <a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="#!">
+                      <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                        <img src="/img/shop/electronics/13.png" alt="Dualsense Edge">
+                      </div>
+                    </a>
+                  </div>
+                  <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                    <div class="d-flex align-items-center gap-2 mb-2">
+                      <div class="d-flex gap-1 fs-xs">
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                      </div>
+                      <span class="text-body-tertiary fs-xs">(187)</span>
+                    </div>
+                    <h3 class="pb-1 mb-2">
+                      <a class="d-block fs-sm fw-medium text-truncate" href="#!">
+                        <span class="animate-target">Sony Dualsense Edge Controller</span>
+                      </a>
+                    </h3>
+                    <div class="d-flex align-items-center justify-content-between">
+                      <div class="h5 lh-1 mb-0">$200.00</div>
+                      <button type="button" class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2" aria-label="Add to Cart">
+                        <i class="ci-shopping-cart fs-base animate-target"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Item -->
+              <div class="swiper-slide">
+                <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+                  <div class="position-relative">
+                    <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                      <div class="d-flex flex-column gap-2">
+                        <button type="button" class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex" aria-label="Add to Wishlist">
+                          <i class="ci-heart fs-base animate-target"></i>
+                        </button>
+                        <button type="button" class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex" aria-label="Compare">
+                          <i class="ci-refresh-cw fs-base animate-target"></i>
+                        </button>
+                      </div>
+                    </div>
+                    <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                      <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body" data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                        <i class="ci-more-vertical fs-lg"></i>
+                      </button>
+                      <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                        <li>
+                          <a class="dropdown-item" href="#!">
+                            <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                            Add to Wishlist
+                          </a>
+                        </li>
+                        <li>
+                          <a class="dropdown-item" href="#!">
+                            <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                            Compare
+                          </a>
+                        </li>
+                      </ul>
+                    </div>
+                    <a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="#!">
+                      <span class="badge bg-danger position-absolute top-0 start-0 mt-2 ms-2 mt-lg-3 ms-lg-3">-17%</span>
+                      <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                        <img src="/img/shop/electronics/11.png" alt="Nikon Camera">
+                      </div>
+                    </a>
+                  </div>
+                  <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                    <div class="d-flex align-items-center gap-2 mb-2">
+                      <div class="d-flex gap-1 fs-xs">
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                      </div>
+                      <span class="text-body-tertiary fs-xs">(14)</span>
+                    </div>
+                    <h3 class="pb-1 mb-2">
+                      <a class="d-block fs-sm fw-medium text-truncate" href="#!">
+                        <span class="animate-target">VRB01 Camera Nikon Max</span>
+                      </a>
+                    </h3>
+                    <div class="d-flex align-items-center justify-content-between">
+                      <div class="h5 lh-1 mb-0">$652.00 <del class="text-body-tertiary fs-sm fw-normal">$785.00</del></div>
+                      <button type="button" class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2" aria-label="Add to Cart">
+                        <i class="ci-shopping-cart fs-base animate-target"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Item -->
+              <div class="swiper-slide">
+                <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+                  <div class="position-relative">
+                    <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                      <div class="d-flex flex-column gap-2">
+                        <button type="button" class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex" aria-label="Add to Wishlist">
+                          <i class="ci-heart fs-base animate-target"></i>
+                        </button>
+                        <button type="button" class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex" aria-label="Compare">
+                          <i class="ci-refresh-cw fs-base animate-target"></i>
+                        </button>
+                      </div>
+                    </div>
+                    <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                      <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body" data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                        <i class="ci-more-vertical fs-lg"></i>
+                      </button>
+                      <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                        <li>
+                          <a class="dropdown-item" href="#!">
+                            <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                            Add to Wishlist
+                          </a>
+                        </li>
+                        <li>
+                          <a class="dropdown-item" href="#!">
+                            <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                            Compare
+                          </a>
+                        </li>
+                      </ul>
+                    </div>
+                    <a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="#!">
+                      <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                        <img src="/img/shop/electronics/10.png" alt="iPhone 14">
+                      </div>
+                    </a>
+                  </div>
+                  <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                    <div class="d-flex align-items-center gap-2 mb-2">
+                      <div class="d-flex gap-1 fs-xs">
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-half text-warning"></i>
+                      </div>
+                      <span class="text-body-tertiary fs-xs">(335)</span>
+                    </div>
+                    <h3 class="pb-1 mb-2">
+                      <a class="d-block fs-sm fw-medium text-truncate" href="#!">
+                        <span class="animate-target">Apple iPhone 14 128GB Blue</span>
+                      </a>
+                    </h3>
+                    <div class="d-flex align-items-center justify-content-between">
+                      <div class="h5 lh-1 mb-0">$899.00</div>
+                      <button type="button" class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2" aria-label="Add to Cart">
+                        <i class="ci-shopping-cart fs-base animate-target"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Item -->
+              <div class="swiper-slide">
+                <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+                  <div class="posittion-relative">
+                    <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                      <div class="d-flex flex-column gap-2">
+                        <button type="button" class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex" aria-label="Add to Wishlist">
+                          <i class="ci-heart fs-base animate-target"></i>
+                        </button>
+                        <button type="button" class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex" aria-label="Compare">
+                          <i class="ci-refresh-cw fs-base animate-target"></i>
+                        </button>
+                      </div>
+                    </div>
+                    <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                      <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body" data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                        <i class="ci-more-vertical fs-lg"></i>
+                      </button>
+                      <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                        <li>
+                          <a class="dropdown-item" href="#!">
+                            <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                            Add to Wishlist
+                          </a>
+                        </li>
+                        <li>
+                          <a class="dropdown-item" href="#!">
+                            <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                            Compare
+                          </a>
+                        </li>
+                      </ul>
+                    </div>
+                    <a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="#!">
+                      <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                        <img src="/img/shop/electronics/07.png" alt="iPad Pro">
+                      </div>
+                    </a>
+                  </div>
+                  <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                    <div class="d-flex align-items-center gap-2 mb-2">
+                      <div class="d-flex gap-1 fs-xs">
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-half text-warning"></i>
+                      </div>
+                      <span class="text-body-tertiary fs-xs">(49)</span>
+                    </div>
+                    <h3 class="pb-1 mb-2">
+                      <a class="d-block fs-sm fw-medium text-truncate" href="#!">
+                        <span class="animate-target">Tablet Apple iPad Pro M1</span>
+                      </a>
+                    </h3>
+                    <div class="d-flex align-items-center justify-content-between">
+                      <div class="h5 lh-1 mb-0">$739.00</div>
+                      <button type="button" class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2" aria-label="Add to Cart">
+                        <i class="ci-shopping-cart fs-base animate-target"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Item -->
+              <div class="swiper-slide">
+                <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
+                  <div class="position-relative">
+                    <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
+                      <div class="d-flex flex-column gap-2">
+                        <button type="button" class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex" aria-label="Add to Wishlist">
+                          <i class="ci-heart fs-base animate-target"></i>
+                        </button>
+                        <button type="button" class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex" aria-label="Compare">
+                          <i class="ci-refresh-cw fs-base animate-target"></i>
+                        </button>
+                      </div>
+                    </div>
+                    <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
+                      <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body" data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
+                        <i class="ci-more-vertical fs-lg"></i>
+                      </button>
+                      <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
+                        <li>
+                          <a class="dropdown-item" href="#!">
+                            <i class="ci-heart fs-sm ms-n1 me-2"></i>
+                            Add to Wishlist
+                          </a>
+                        </li>
+                        <li>
+                          <a class="dropdown-item" href="#!">
+                            <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
+                            Compare
+                          </a>
+                        </li>
+                      </ul>
+                    </div>
+                    <a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="#!">
+                      <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
+                        <img src="/img/shop/electronics/06.png" alt="AirPods 2">
+                      </div>
+                    </a>
+                  </div>
+                  <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
+                    <div class="d-flex align-items-center gap-2 mb-2">
+                      <div class="d-flex gap-1 fs-xs">
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star-filled text-warning"></i>
+                        <i class="ci-star text-body-tertiary opacity-75"></i>
+                      </div>
+                      <span class="text-body-tertiary fs-xs">(78)</span>
+                    </div>
+                    <h3 class="pb-1 mb-2">
+                      <a class="d-block fs-sm fw-medium text-truncate" href="#!">
+                        <span class="animate-target">Headphones Apple AirPods 2 Pro</span>
+                      </a>
+                    </h3>
+                    <div class="d-flex align-items-center justify-content-between">
+                      <div class="h5 lh-1 mb-0">$224.00</div>
+                      <button type="button" class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2" aria-label="Add to Cart">
+                        <i class="ci-shopping-cart fs-base animate-target"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- External slider prev/next buttons visible on screens < 500px wide (sm breakpoint) -->
+          <div class="d-flex justify-content-center gap-2 mt-n2 mb-3 pb-1 d-sm-none">
+            <button type="button" class="viewed-prev btn btn-prev btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-start me-1" aria-label="Prev">
+              <i class="ci-chevron-left fs-lg animate-target"></i>
+            </button>
+            <button type="button" class="viewed-next btn btn-next btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-end" aria-label="Next">
+              <i class="ci-chevron-right fs-lg animate-target"></i>
+            </button>
+          </div>
+        </div>
+      </section>
+
+
+      <!-- Subscription form + Vlog -->
+      <section class="bg-body-tertiary py-5">
+        <div class="container pt-sm-2 pt-md-3 pt-lg-4 pt-xl-5">
+          <div class="row">
+            <div class="col-md-6 col-lg-5 mb-5 mb-md-0">
+              <h2 class="h4 mb-2">Sign up to our newsletter</h2>
+              <p class="text-body pb-2 pb-ms-3">Receive our latest updates about our products &amp; promotions</p>
+              <form class="d-flex needs-validation pb-1 pb-sm-2 pb-md-3 pb-lg-0 mb-4 mb-lg-5" novalidate>
+                <div class="position-relative w-100 me-2">
+                  <input type="email" class="form-control form-control-lg" placeholder="Your email" required>
+                </div>
+                <button type="submit" class="btn btn-lg btn-primary">Subscribe</button>
+              </form>
+              <div class="d-flex gap-3">
+                <a class="btn btn-icon btn-secondary rounded-circle" href="#!" aria-label="Instagram">
+                  <i class="ci-instagram fs-base"></i>
+                </a>
+                <a class="btn btn-icon btn-secondary rounded-circle" href="#!" aria-label="Facebook">
+                  <i class="ci-facebook fs-base"></i>
+                </a>
+                <a class="btn btn-icon btn-secondary rounded-circle" href="#!" aria-label="YouTube">
+                  <i class="ci-youtube fs-base"></i>
+                </a>
+                <a class="btn btn-icon btn-secondary rounded-circle" href="#!" aria-label="Telegram">
+                  <i class="ci-telegram fs-base"></i>
+                </a>
+              </div>
+            </div>
+            <div class="col-md-6 col-lg-5 col-xl-4 offset-lg-1 offset-xl-2">
+              <ul class="list-unstyled d-flex flex-column gap-4 ps-md-4 ps-lg-0 mb-3">
+                <li class="nav flex-nowrap align-items-center position-relative">
+                  <img src="/img/home/electronics/vlog/01.jpg" class="rounded" width="140" alt="Video cover">
+                  <div class="ps-3">
+                    <div class="fs-xs text-body-secondary lh-sm mb-2">6:16</div>
+                    <a class="nav-link fs-sm hover-effect-underline stretched-link p-0" href="#!">5 New Cool Gadgets You Must See on Cartzilla - Cheap Budget</a>
+                  </div>
+                </li>
+                <li class="nav flex-nowrap align-items-center position-relative">
+                  <img src="/img/home/electronics/vlog/02.jpg" class="rounded" width="140" alt="Video cover">
+                  <div class="ps-3">
+                    <div class="fs-xs text-body-secondary lh-sm mb-2">10:20</div>
+                    <a class="nav-link fs-sm hover-effect-underline stretched-link p-0" href="#!">5 Super Useful Gadgets on Cartzilla You Must Have in 2023</a>
+                  </div>
+                </li>
+                <li class="nav flex-nowrap align-items-center position-relative">
+                  <img src="/img/home/electronics/vlog/03.jpg" class="rounded" width="140" alt="Video cover">
+                  <div class="ps-3">
+                    <div class="fs-xs text-body-secondary lh-sm mb-2">8:40</div>
+                    <a class="nav-link fs-sm hover-effect-underline stretched-link p-0" href="#!">Top 5 New Amazing Gadgets on Cartzilla You Must See</a>
+                  </div>
+                </li>
+              </ul>
+              <div class="nav ps-md-4 ps-lg-0">
+                <a class="btn nav-link animate-underline text-decoration-none px-0" href="#!">
+                  <span class="animate-target">View all</span>
+                  <i class="ci-chevron-right fs-base ms-1"></i>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+
+    @include('layouts.partials/footer')
+
+@endsection
+
+@section('scripts')
+@endsection
diff --git a/resources/views/terms-and-conditions.blade.php b/resources/views/terms-and-conditions.blade.php
new file mode 100644
index 0000000..8a8f169
--- /dev/null
+++ b/resources/views/terms-and-conditions.blade.php
@@ -0,0 +1,187 @@
+@extends('layouts.landing', ['title' => 'Terms and Conditions'])
+
+@section('content')
+    @include('layouts.partials/offcanvas')
+
+    @include('layouts.partials/navbar', ['wishlist' => true])
+
+    <main class="content-wrapper">
+        <div class="container py-5 mb-2 mt-n2 mt-sm-1 my-md-3 my-lg-4 mb-xl-5">
+            <div class="row justify-content-center">
+                <div class="col-lg-11 col-xl-10 col-xxl-9">
+                    <h1 class="h2 pb-2 pb-sm-3 pb-lg-4">Terms and conditions</h1>
+                    <hr class="mt-0">
+
+                    <div class="h6 pt-2 pt-lg-3"><span class="text-body-secondary fw-medium">Last updated:</span> June 26,
+                        2024</div>
+                    <p>Welcome to Cartzilla! These Terms and Conditions ("Terms") govern your access to and use of the
+                        Cartzilla website and mobile application (collectively referred to as the "Platform"). Please read
+                        these Terms carefully before using the Platform. By accessing or using the Platform, you agree to be
+                        bound by these Terms.</p>
+
+                    <h2 class="h4 pt-3 pt-lg-4">1. Overview</h2>
+                    <p>Cartzilla provides an online platform that enables users to purchase groceries and other products
+                        from local stores and have them delivered to their designated location. By using the Platform, you
+                        acknowledge and agree that Cartzilla is not a store or retailer but merely acts as an intermediary
+                        to facilitate transactions between users and participating stores.</p>
+                    <p>Welcome to the family of websites and applications provided by Cartzilla. These Terms of Use govern
+                        your access to and use of all Cartzilla Sites, among other things. By using the Cartzilla Sites, you
+                        affirm that you are of legal age to enter into these Terms of Use, or, if you are not, that you have
+                        obtained parental or guardian consent to enter into these Terms of Use and your parent or guardian
+                        consents to these Terms of Use on your behalf. If you violate or do not agree to these Terms of Use,
+                        then your access to and use of the Cartzilla Sites is unauthorized. Additional terms and conditions
+                        apply to some services offered on the Cartzilla Sites (e.g., Cartzilla Pharmacy, Cartzilla +, and
+                        Gift Cards) or through other channels. Those terms and conditions can be found where the relevant
+                        service is offered on the Cartzilla Sites or otherwise and are incorporated into these Terms of Use
+                        by reference.</p>
+
+                    <h2 class="h4 pt-3 pt-lg-4">2. Your use of the Cartzilla Sites</h2>
+                    <p>You certify that the Content you provide on or through the Cartzilla Sites is accurate and that the
+                        information you provide on or through the Cartzilla Sites is complete. You are solely responsible
+                        for maintaining the confidentiality and security of your account including username, password, and
+                        PIN. Cartzilla is not responsible for any losses arising out of the unauthorized use of your
+                        account. You agree that Cartzilla does not have any responsibility if you lose or share access to
+                        your device. Any agreement between you and the issuer of your credit card, debit card, or other form
+                        of payment will continue to govern your use of such payment method on the Cartzilla Sites. You agree
+                        that Cartzilla is not a party to any such agreement, nor is Cartzilla responsible for the content,
+                        accuracy, or unavailability of any method used for payment. Your account may be restricted or
+                        terminated for any reason, at our sole discretion. Except as otherwise provided by law, at any time
+                        without notice to you, we may (1) change, restrict access to, suspend, or discontinue the Cartzilla
+                        Sites or any portion of the Cartzilla Sites, and (2) charge, modify, or waive any fees required to
+                        use any services, functionality, or other content available through the Cartzilla Sites or any
+                        portion of the Cartzilla Sites.</p>
+                    <h3 class="h6">In connection with the Cartzilla Sites, you will not:</h3>
+                    <ul class="gap-3">
+                        <li>Make available any Content through or in connection with the Cartzilla Sites that is or may be
+                            in violation of the content guidelines set forth in Section 3.C (Prohibited Content) below.</li>
+                        <li>Make available through or in connection with the Cartzilla Sites any virus, worm, Trojan horse,
+                            Easter egg, time bomb, spyware, or other computer code, file, or program that is or is
+                            potentially harmful or invasive or intended to damage or hijack the operation of, or to monitor
+                            the use of, any hardware, software, or equipment.</li>
+                        <li>Use the Cartzilla Sites for any commercial purpose, or for any purpose that is fraudulent or
+                            otherwise tortious or unlawful.</li>
+                        <li>Harvest or collect information about users of the Cartzilla Sites.</li>
+                        <li>Interfere with or disrupt the operation of the Cartzilla Sites or the systems, servers, or
+                            networks used to make the Cartzilla Sites available, including by hacking or defacing any
+                            portion of the Cartzilla Sites; or violate any requirement, procedure, or policy of such servers
+                            or networks.</li>
+                        <li>Reproduce, modify, adapt, translate, create derivative works of, sell, rent, lease, loan,
+                            timeshare, distribute, or otherwise exploit any portion of (or any use of) the Cartzilla Sites
+                            except as expressly authorized in these Terms of Use, without Cartzilla's express prior written
+                            consent.</li>
+                        <li>Reverse engineer, decompile, or disassemble any portion of the Cartzilla Sites, except where
+                            such restriction is expressly prohibited by applicable law.</li>
+                        <li>Remove any copyright, trademark, or other proprietary rights notice from the Cartzilla Sites.
+                        </li>
+                        <li>You will not attempt to do anything, or permit, encourage, assist, or allow any third party to
+                            do anything, prohibited in this Section, or attempt, permit, encourage, assist, or allow any
+                            other violation of these Terms of Use.</li>
+                    </ul>
+
+                    <h2 class="h4 pt-3 pt-lg-4">3. Ordering and delivery</h2>
+                    <p>When placing an order through Cartzilla, you are responsible for ensuring the accuracy of the items,
+                        quantities, and delivery details. Cartzilla does not guarantee the availability of any specific
+                        product and reserves the right to substitute products based on availability. Delivery times provided
+                        are estimates and may vary due to various factors.</p>
+                    <ul class="gap-3">
+                        <li>Reverse engineer, decompile, or disassemble any portion of the Cartzilla Sites, except where
+                            such restriction is expressly prohibited by applicable law.</li>
+                        <li>Reproduce, modify, adapt, translate, create derivative works of, sell, rent, lease, loan,
+                            timeshare, distribute, or otherwise exploit any portion of (or any use of) the Cartzilla Sites
+                            except as expressly authorized in these Terms of Use, without Cartzilla's express prior written
+                            consent.</li>
+                        <li>You will not attempt to do anything, or permit, encourage, assist, or allow any third party to
+                            do anything, prohibited in this Section, or attempt, permit, encourage, assist, or allow any
+                            other violation of these Terms of Use.</li>
+                        <li>Remove any copyright, trademark, or other proprietary rights notice from the Cartzilla Sites.
+                        </li>
+                    </ul>
+
+                    <h2 class="h4 pt-3 pt-lg-4">4. Payments</h2>
+                    <p>Cartzilla facilitates payments for orders made through the Platform. By using Cartzilla's payment
+                        services, you agree to provide accurate payment information and authorize Cartzilla to charge the
+                        applicable amount for your order. Cartzilla may use third-party payment processors to process
+                        transactions and may store your payment information in accordance with its Privacy Policy.</p>
+
+                    <h2 class="h4 pt-3 pt-lg-4">5. User conduct</h2>
+                    <p>You agree to use the Platform in compliance with all applicable laws and regulations. You shall not
+                        engage in any unlawful, harmful, or abusive behavior while using the Platform. Cartzilla reserves
+                        the right to suspend or terminate your account if you violate these Terms or engage in any
+                        prohibited activities.</p>
+                    <h3 class="h6 pt-2">Intellectual property</h3>
+                    <p>All content on the Cartzilla Platform, including but not limited to text, graphics, logos, and
+                        software, is the property of Cartzilla or its licensors and is protected by intellectual property
+                        laws. You may not use, reproduce, modify, or distribute any content from the Platform without prior
+                        written consent from Cartzilla.</p>
+                    <h3 class="h6 pt-2">Third-party links and content</h3>
+                    <p>The Platform may contain links to third-party websites or resources. Cartzilla does not endorse,
+                        control, or assume responsibility for any third-party content or websites. You acknowledge and agree
+                        that Cartzilla is not liable for any loss or damage caused by your reliance on such content or
+                        websites.</p>
+                    <h3 class="h6 pt-2">Disclaimer of warranties</h3>
+                    <p>The Platform is provided on an "as is" and "as available" basis, without warranties of any kind,
+                        either express or implied. Cartzilla does not guarantee the accuracy, reliability, or availability
+                        of the Platform and disclaims all warranties to the fullest extent permitted by law.</p>
+                    <h3 class="h6 pt-2">Limitation of liability</h3>
+                    <p>To the maximum extent permitted by law, Cartzilla and its affiliates shall not be liable for any
+                        indirect, incidental, consequential, or punitive damages arising out of or in connection with the
+                        use of the Platform, even if advised of the possibility of such damages.</p>
+
+                    <h2 class="h4 pt-3 pt-lg-4">6. Entire agreement and severability</h2>
+                    <p>These Terms, subject to any amendments, modifications, or additional agreements you enter into with
+                        Cartzilla, shall constitute the entire agreement between you and Cartzilla with respect to the
+                        Services and any use of the Services. If any provision of these Terms is found to be invalid by a
+                        court of competent jurisdiction, that provision only will be limited to the minimum extent
+                        necessary, and the remaining provisions will remain in full force and effect.</p>
+                    <p>Cartzilla reserves the right to modify or update these Terms at any time without prior notice. Your
+                        continued use of the Platform after any changes to the Terms constitutes acceptance of those
+                        changes.</p>
+
+                    <h2 class="h4 pt-3 pt-lg-4">7. Contact information</h2>
+                    <p>If you have any questions, or comments about these Terms please contact Cartzilla at:</p>
+                    <ul class="list-unstyled pb-1">
+                        <li class="nav pt-1">
+                            <a class="nav-link align-items-start fs-base p-0" href="tel:+15053753082">
+                                <i class="ci-phone fs-xl mt-1 me-2"></i>
+                                +1&nbsp;50&nbsp;537&nbsp;53&nbsp;082
+                            </a>
+                        </li>
+                        <li class="nav pt-1">
+                            <a class="nav-link align-items-start fs-base p-0" href="mailto:contact@catzillastore.com">
+                                <i class="ci-mail fs-xl mt-1 me-2"></i>
+                                contact@catzillastore.com
+                            </a>
+                        </li>
+                        <li class="nav pt-1">
+                            <a class="nav-link align-items-start fs-base p-0" href="#!">
+                                <i class="ci-map-pin fs-xl mt-1 me-2"></i>
+                                12 Beale St. Suite 600 San Francisco, California 94105
+                            </a>
+                        </li>
+                    </ul>
+                    <p class="pb-3 mb-0">For customer service inquiries, please review Your Account Settings, visit
+                        Cartzilla's <a class="fw-medium" href="{{ route('second', ['help', 'topics-v1'])}}">Help Center.</a></p>
+
+                    <hr class="my-3 my-lg-4">
+
+                    <h2 class="h5 pt-3 mb-lg-4">Was this information helpful?</h2>
+                    <div class="d-flex gap-3">
+                        <button type="button" class="btn btn-outline-secondary">
+                            <i class="ci-thumbs-up fs-base me-2 ms-n1"></i>
+                            Yes
+                        </button>
+                        <button type="button" class="btn btn-outline-secondary">
+                            <i class="ci-thumbs-down fs-base me-2 ms-n1"></i>
+                            No
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    @include('layouts.partials/footer')
+@endsection
+
+@section('scripts')
+@endsection
diff --git a/routes/console.php b/routes/console.php
new file mode 100644
index 0000000..3c9adf1
--- /dev/null
+++ b/routes/console.php
@@ -0,0 +1,8 @@
+<?php
+
+use Illuminate\Foundation\Inspiring;
+use Illuminate\Support\Facades\Artisan;
+
+Artisan::command('inspire', function () {
+    $this->comment(Inspiring::quote());
+})->purpose('Display an inspiring quote');
diff --git a/routes/web.php b/routes/web.php
new file mode 100644
index 0000000..7911874
--- /dev/null
+++ b/routes/web.php
@@ -0,0 +1,12 @@
+<?php
+
+use Illuminate\Support\Facades\Route;
+use App\Http\Controllers\RoutingController;
+
+Route::group(['prefix' => '/'], function () {
+    Route::get('', [RoutingController::class, 'index'])->name('root');
+    Route::get('{first}/{second}/{third}', [RoutingController::class, 'thirdLevel'])->name('third');
+    Route::get('{first}/{second}', [RoutingController::class, 'secondLevel'])->name('second');
+    Route::get('{any}', [RoutingController::class, 'root'])->name('any');
+    
+});
diff --git a/storage/app/.gitignore b/storage/app/.gitignore
new file mode 100644
index 0000000..fedb287
--- /dev/null
+++ b/storage/app/.gitignore
@@ -0,0 +1,4 @@
+*
+!private/
+!public/
+!.gitignore
diff --git a/storage/app/private/.gitignore b/storage/app/private/.gitignore
new file mode 100644
index 0000000..d6b7ef3
--- /dev/null
+++ b/storage/app/private/.gitignore
@@ -0,0 +1,2 @@
+*
+!.gitignore
diff --git a/storage/app/public/.gitignore b/storage/app/public/.gitignore
new file mode 100644
index 0000000..d6b7ef3
--- /dev/null
+++ b/storage/app/public/.gitignore
@@ -0,0 +1,2 @@
+*
+!.gitignore
diff --git a/storage/framework/.gitignore b/storage/framework/.gitignore
new file mode 100644
index 0000000..05c4471
--- /dev/null
+++ b/storage/framework/.gitignore
@@ -0,0 +1,9 @@
+compiled.php
+config.php
+down
+events.scanned.php
+maintenance.php
+routes.php
+routes.scanned.php
+schedule-*
+services.json
diff --git a/storage/framework/cache/.gitignore b/storage/framework/cache/.gitignore
new file mode 100644
index 0000000..01e4a6c
--- /dev/null
+++ b/storage/framework/cache/.gitignore
@@ -0,0 +1,3 @@
+*
+!data/
+!.gitignore
diff --git a/storage/framework/cache/data/.gitignore b/storage/framework/cache/data/.gitignore
new file mode 100644
index 0000000..d6b7ef3
--- /dev/null
+++ b/storage/framework/cache/data/.gitignore
@@ -0,0 +1,2 @@
+*
+!.gitignore
diff --git a/storage/framework/sessions/.gitignore b/storage/framework/sessions/.gitignore
new file mode 100644
index 0000000..d6b7ef3
--- /dev/null
+++ b/storage/framework/sessions/.gitignore
@@ -0,0 +1,2 @@
+*
+!.gitignore
diff --git a/storage/framework/testing/.gitignore b/storage/framework/testing/.gitignore
new file mode 100644
index 0000000..d6b7ef3
--- /dev/null
+++ b/storage/framework/testing/.gitignore
@@ -0,0 +1,2 @@
+*
+!.gitignore
diff --git a/storage/framework/views/.gitignore b/storage/framework/views/.gitignore
new file mode 100644
index 0000000..d6b7ef3
--- /dev/null
+++ b/storage/framework/views/.gitignore
@@ -0,0 +1,2 @@
+*
+!.gitignore
diff --git a/storage/logs/.gitignore b/storage/logs/.gitignore
new file mode 100644
index 0000000..d6b7ef3
--- /dev/null
+++ b/storage/logs/.gitignore
@@ -0,0 +1,2 @@
+*
+!.gitignore
diff --git a/tests/Feature/ExampleTest.php b/tests/Feature/ExampleTest.php
new file mode 100644
index 0000000..8364a84
--- /dev/null
+++ b/tests/Feature/ExampleTest.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace Tests\Feature;
+
+// use Illuminate\Foundation\Testing\RefreshDatabase;
+use Tests\TestCase;
+
+class ExampleTest extends TestCase
+{
+    /**
+     * A basic test example.
+     */
+    public function test_the_application_returns_a_successful_response(): void
+    {
+        $response = $this->get('/');
+
+        $response->assertStatus(200);
+    }
+}
diff --git a/tests/TestCase.php b/tests/TestCase.php
new file mode 100644
index 0000000..fe1ffc2
--- /dev/null
+++ b/tests/TestCase.php
@@ -0,0 +1,10 @@
+<?php
+
+namespace Tests;
+
+use Illuminate\Foundation\Testing\TestCase as BaseTestCase;
+
+abstract class TestCase extends BaseTestCase
+{
+    //
+}
diff --git a/tests/Unit/ExampleTest.php b/tests/Unit/ExampleTest.php
new file mode 100644
index 0000000..5773b0c
--- /dev/null
+++ b/tests/Unit/ExampleTest.php
@@ -0,0 +1,16 @@
+<?php
+
+namespace Tests\Unit;
+
+use PHPUnit\Framework\TestCase;
+
+class ExampleTest extends TestCase
+{
+    /**
+     * A basic test example.
+     */
+    public function test_that_true_is_true(): void
+    {
+        $this->assertTrue(true);
+    }
+}
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 0000000..cc136f5
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,26 @@
+import { defineConfig } from "vite";
+import laravel from "laravel-vite-plugin";
+
+export default defineConfig({
+    plugins: [
+        laravel({
+            input: [
+                //scss
+                "resources/scss/theme.scss",                
+                "resources/icons/cartzilla-icons.min.css",
+                "node_modules/img-comparison-slider/dist/styles.css",
+                "node_modules/swiper/swiper-bundle.min.css",
+                "node_modules/choices.js/public/assets/styles/choices.min.css",
+                "node_modules/glightbox/dist/css/glightbox.min.css",
+                "node_modules/simplebar/dist/simplebar.min.css",
+                'node_modules/flatpickr/dist/flatpickr.min.css',
+                "node_modules/nouislider/dist/nouislider.min.css",
+
+                //js
+                "resources/js/theme-switcher.js",
+                "resources/js/theme.js",
+            ],
+            refresh: true,
+        }),
+    ],
+});
diff --git a/yarn.lock b/yarn.lock
new file mode 100644
index 0000000..9139bfd
--- /dev/null
+++ b/yarn.lock
@@ -0,0 +1,933 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@esbuild/aix-ppc64@0.25.12":
+  version "0.25.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz#80fcbe36130e58b7670511e888b8e88a259ed76c"
+  integrity sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==
+
+"@esbuild/android-arm64@0.25.12":
+  version "0.25.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.25.12.tgz#8aa4965f8d0a7982dc21734bf6601323a66da752"
+  integrity sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg==
+
+"@esbuild/android-arm@0.25.12":
+  version "0.25.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.25.12.tgz#300712101f7f50f1d2627a162e6e09b109b6767a"
+  integrity sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg==
+
+"@esbuild/android-x64@0.25.12":
+  version "0.25.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.25.12.tgz#87dfb27161202bdc958ef48bb61b09c758faee16"
+  integrity sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg==
+
+"@esbuild/darwin-arm64@0.25.12":
+  version "0.25.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.25.12.tgz#79197898ec1ff745d21c071e1c7cc3c802f0c1fd"
+  integrity sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg==
+
+"@esbuild/darwin-x64@0.25.12":
+  version "0.25.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.25.12.tgz#146400a8562133f45c4d2eadcf37ddd09718079e"
+  integrity sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA==
+
+"@esbuild/freebsd-arm64@0.25.12":
+  version "0.25.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.12.tgz#1c5f9ba7206e158fd2b24c59fa2d2c8bb47ca0fe"
+  integrity sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg==
+
+"@esbuild/freebsd-x64@0.25.12":
+  version "0.25.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.25.12.tgz#ea631f4a36beaac4b9279fa0fcc6ca29eaeeb2b3"
+  integrity sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ==
+
+"@esbuild/linux-arm64@0.25.12":
+  version "0.25.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.25.12.tgz#e1066bce58394f1b1141deec8557a5f0a22f5977"
+  integrity sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ==
+
+"@esbuild/linux-arm@0.25.12":
+  version "0.25.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.25.12.tgz#452cd66b20932d08bdc53a8b61c0e30baf4348b9"
+  integrity sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw==
+
+"@esbuild/linux-ia32@0.25.12":
+  version "0.25.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.25.12.tgz#b24f8acc45bcf54192c7f2f3be1b53e6551eafe0"
+  integrity sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA==
+
+"@esbuild/linux-loong64@0.25.12":
+  version "0.25.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.25.12.tgz#f9cfffa7fc8322571fbc4c8b3268caf15bd81ad0"
+  integrity sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng==
+
+"@esbuild/linux-mips64el@0.25.12":
+  version "0.25.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.25.12.tgz#575a14bd74644ffab891adc7d7e60d275296f2cd"
+  integrity sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw==
+
+"@esbuild/linux-ppc64@0.25.12":
+  version "0.25.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.25.12.tgz#75b99c70a95fbd5f7739d7692befe60601591869"
+  integrity sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA==
+
+"@esbuild/linux-riscv64@0.25.12":
+  version "0.25.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.25.12.tgz#2e3259440321a44e79ddf7535c325057da875cd6"
+  integrity sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w==
+
+"@esbuild/linux-s390x@0.25.12":
+  version "0.25.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.25.12.tgz#17676cabbfe5928da5b2a0d6df5d58cd08db2663"
+  integrity sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg==
+
+"@esbuild/linux-x64@0.25.12":
+  version "0.25.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.25.12.tgz#0583775685ca82066d04c3507f09524d3cd7a306"
+  integrity sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw==
+
+"@esbuild/netbsd-arm64@0.25.12":
+  version "0.25.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.12.tgz#f04c4049cb2e252fe96b16fed90f70746b13f4a4"
+  integrity sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg==
+
+"@esbuild/netbsd-x64@0.25.12":
+  version "0.25.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.25.12.tgz#77da0d0a0d826d7c921eea3d40292548b258a076"
+  integrity sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ==
+
+"@esbuild/openbsd-arm64@0.25.12":
+  version "0.25.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.12.tgz#6296f5867aedef28a81b22ab2009c786a952dccd"
+  integrity sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A==
+
+"@esbuild/openbsd-x64@0.25.12":
+  version "0.25.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.25.12.tgz#f8d23303360e27b16cf065b23bbff43c14142679"
+  integrity sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw==
+
+"@esbuild/openharmony-arm64@0.25.12":
+  version "0.25.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.12.tgz#49e0b768744a3924be0d7fd97dd6ce9b2923d88d"
+  integrity sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg==
+
+"@esbuild/sunos-x64@0.25.12":
+  version "0.25.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.25.12.tgz#a6ed7d6778d67e528c81fb165b23f4911b9b13d6"
+  integrity sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w==
+
+"@esbuild/win32-arm64@0.25.12":
+  version "0.25.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.25.12.tgz#9ac14c378e1b653af17d08e7d3ce34caef587323"
+  integrity sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg==
+
+"@esbuild/win32-ia32@0.25.12":
+  version "0.25.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.25.12.tgz#918942dcbbb35cc14fca39afb91b5e6a3d127267"
+  integrity sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ==
+
+"@esbuild/win32-x64@0.25.12":
+  version "0.25.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.25.12.tgz#9bdad8176be7811ad148d1f8772359041f46c6c5"
+  integrity sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==
+
+"@kurkle/color@^0.3.0":
+  version "0.3.4"
+  resolved "https://registry.yarnpkg.com/@kurkle/color/-/color-0.3.4.tgz#4d4ff677e1609214fc71c580125ddddd86abcabf"
+  integrity sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==
+
+"@rollup/rollup-android-arm-eabi@4.53.2":
+  version "4.53.2"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.53.2.tgz#7131f3d364805067fd5596302aad9ebef1434b32"
+  integrity sha512-yDPzwsgiFO26RJA4nZo8I+xqzh7sJTZIWQOxn+/XOdPE31lAvLIYCKqjV+lNH/vxE2L2iH3plKxDCRK6i+CwhA==
+
+"@rollup/rollup-android-arm64@4.53.2":
+  version "4.53.2"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.53.2.tgz#7ede14d7fcf7c57821a2731c04b29ccc03145d82"
+  integrity sha512-k8FontTxIE7b0/OGKeSN5B6j25EuppBcWM33Z19JoVT7UTXFSo3D9CdU39wGTeb29NO3XxpMNauh09B+Ibw+9g==
+
+"@rollup/rollup-darwin-arm64@4.53.2":
+  version "4.53.2"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.53.2.tgz#d59bf9ed582b38838e86a17f91720c17db6575b9"
+  integrity sha512-A6s4gJpomNBtJ2yioj8bflM2oogDwzUiMl2yNJ2v9E7++sHrSrsQ29fOfn5DM/iCzpWcebNYEdXpaK4tr2RhfQ==
+
+"@rollup/rollup-darwin-x64@4.53.2":
+  version "4.53.2"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.53.2.tgz#a76278d9b9da9f84ea7909a14d93b915d5bbe01e"
+  integrity sha512-e6XqVmXlHrBlG56obu9gDRPW3O3hLxpwHpLsBJvuI8qqnsrtSZ9ERoWUXtPOkY8c78WghyPHZdmPhHLWNdAGEw==
+
+"@rollup/rollup-freebsd-arm64@4.53.2":
+  version "4.53.2"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.53.2.tgz#1a94821a1f565b9eaa74187632d482e4c59a1707"
+  integrity sha512-v0E9lJW8VsrwPux5Qe5CwmH/CF/2mQs6xU1MF3nmUxmZUCHazCjLgYvToOk+YuuUqLQBio1qkkREhxhc656ViA==
+
+"@rollup/rollup-freebsd-x64@4.53.2":
+  version "4.53.2"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.53.2.tgz#aad2274680106b2b6549b1e35e5d3a7a9f1f16af"
+  integrity sha512-ClAmAPx3ZCHtp6ysl4XEhWU69GUB1D+s7G9YjHGhIGCSrsg00nEGRRZHmINYxkdoJehde8VIsDC5t9C0gb6yqA==
+
+"@rollup/rollup-linux-arm-gnueabihf@4.53.2":
+  version "4.53.2"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.53.2.tgz#100fe4306399ffeec47318a3c9b8c0e5e8b07ddb"
+  integrity sha512-EPlb95nUsz6Dd9Qy13fI5kUPXNSljaG9FiJ4YUGU1O/Q77i5DYFW5KR8g1OzTcdZUqQQ1KdDqsTohdFVwCwjqg==
+
+"@rollup/rollup-linux-arm-musleabihf@4.53.2":
+  version "4.53.2"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.53.2.tgz#b84634952604b950e18fa11fddebde898c5928d8"
+  integrity sha512-BOmnVW+khAUX+YZvNfa0tGTEMVVEerOxN0pDk2E6N6DsEIa2Ctj48FOMfNDdrwinocKaC7YXUZ1pHlKpnkja/Q==
+
+"@rollup/rollup-linux-arm64-gnu@4.53.2":
+  version "4.53.2"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.53.2.tgz#dad6f2fb41c2485f29a98e40e9bd78253255dbf3"
+  integrity sha512-Xt2byDZ+6OVNuREgBXr4+CZDJtrVso5woFtpKdGPhpTPHcNG7D8YXeQzpNbFRxzTVqJf7kvPMCub/pcGUWgBjA==
+
+"@rollup/rollup-linux-arm64-musl@4.53.2":
+  version "4.53.2"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.53.2.tgz#0f3f77c8ce9fbf982f8a8378b70a73dc6704a706"
+  integrity sha512-+LdZSldy/I9N8+klim/Y1HsKbJ3BbInHav5qE9Iy77dtHC/pibw1SR/fXlWyAk0ThnpRKoODwnAuSjqxFRDHUQ==
+
+"@rollup/rollup-linux-loong64-gnu@4.53.2":
+  version "4.53.2"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.53.2.tgz#870bb94e9dad28bb3124ba49bd733deaa6aa2635"
+  integrity sha512-8ms8sjmyc1jWJS6WdNSA23rEfdjWB30LH8Wqj0Cqvv7qSHnvw6kgMMXRdop6hkmGPlyYBdRPkjJnj3KCUHV/uQ==
+
+"@rollup/rollup-linux-ppc64-gnu@4.53.2":
+  version "4.53.2"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.53.2.tgz#188427d11abefc6c9926e3870b3e032170f5577c"
+  integrity sha512-3HRQLUQbpBDMmzoxPJYd3W6vrVHOo2cVW8RUo87Xz0JPJcBLBr5kZ1pGcQAhdZgX9VV7NbGNipah1omKKe23/g==
+
+"@rollup/rollup-linux-riscv64-gnu@4.53.2":
+  version "4.53.2"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.53.2.tgz#9dec6eadbbb5abd3b76fe624dc4f006913ff4a7f"
+  integrity sha512-fMjKi+ojnmIvhk34gZP94vjogXNNUKMEYs+EDaB/5TG/wUkoeua7p7VCHnE6T2Tx+iaghAqQX8teQzcvrYpaQA==
+
+"@rollup/rollup-linux-riscv64-musl@4.53.2":
+  version "4.53.2"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.53.2.tgz#b26ba1c80b6f104dc5bd83ed83181fc0411a0c38"
+  integrity sha512-XuGFGU+VwUUV5kLvoAdi0Wz5Xbh2SrjIxCtZj6Wq8MDp4bflb/+ThZsVxokM7n0pcbkEr2h5/pzqzDYI7cCgLQ==
+
+"@rollup/rollup-linux-s390x-gnu@4.53.2":
+  version "4.53.2"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.53.2.tgz#dc83647189b68ad8d56a956a6fcaa4ee9c728190"
+  integrity sha512-w6yjZF0P+NGzWR3AXWX9zc0DNEGdtvykB03uhonSHMRa+oWA6novflo2WaJr6JZakG2ucsyb+rvhrKac6NIy+w==
+
+"@rollup/rollup-linux-x64-gnu@4.53.2":
+  version "4.53.2"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.53.2.tgz#42c3b8c94e9de37bd103cb2e26fb715118ef6459"
+  integrity sha512-yo8d6tdfdeBArzC7T/PnHd7OypfI9cbuZzPnzLJIyKYFhAQ8SvlkKtKBMbXDxe1h03Rcr7u++nFS7tqXz87Gtw==
+
+"@rollup/rollup-linux-x64-musl@4.53.2":
+  version "4.53.2"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.53.2.tgz#d0e216ee1ea16bfafe35681b899b6a05258988e5"
+  integrity sha512-ah59c1YkCxKExPP8O9PwOvs+XRLKwh/mV+3YdKqQ5AMQ0r4M4ZDuOrpWkUaqO7fzAHdINzV9tEVu8vNw48z0lA==
+
+"@rollup/rollup-openharmony-arm64@4.53.2":
+  version "4.53.2"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.53.2.tgz#3acd0157cb8976f659442bfd8a99aca46f8a2931"
+  integrity sha512-4VEd19Wmhr+Zy7hbUsFZ6YXEiP48hE//KPLCSVNY5RMGX2/7HZ+QkN55a3atM1C/BZCGIgqN+xrVgtdak2S9+A==
+
+"@rollup/rollup-win32-arm64-msvc@4.53.2":
+  version "4.53.2"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.53.2.tgz#3eb9e7d4d0e1d2e0850c4ee9aa2d0ddf89a8effa"
+  integrity sha512-IlbHFYc/pQCgew/d5fslcy1KEaYVCJ44G8pajugd8VoOEI8ODhtb/j8XMhLpwHCMB3yk2J07ctup10gpw2nyMA==
+
+"@rollup/rollup-win32-ia32-msvc@4.53.2":
+  version "4.53.2"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.53.2.tgz#d69280bc6680fe19e0956e965811946d542f6365"
+  integrity sha512-lNlPEGgdUfSzdCWU176ku/dQRnA7W+Gp8d+cWv73jYrb8uT7HTVVxq62DUYxjbaByuf1Yk0RIIAbDzp+CnOTFg==
+
+"@rollup/rollup-win32-x64-gnu@4.53.2":
+  version "4.53.2"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.53.2.tgz#d182ce91e342bad9cbb8b284cf33ac542b126ead"
+  integrity sha512-S6YojNVrHybQis2lYov1sd+uj7K0Q05NxHcGktuMMdIQ2VixGwAfbJ23NnlvvVV1bdpR2m5MsNBViHJKcA4ADw==
+
+"@rollup/rollup-win32-x64-msvc@4.53.2":
+  version "4.53.2"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.53.2.tgz#d9ab606437fd072b2cb7df7e54bcdc7f1ccbe8b4"
+  integrity sha512-k+/Rkcyx//P6fetPoLMb8pBeqJBNGx81uuf7iljX9++yNBVRDQgD04L+SVXmXmh5ZP4/WOp4mWF0kmi06PW2tA==
+
+"@types/estree@1.0.8":
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.8.tgz#958b91c991b1867ced318bedea0e215ee050726e"
+  integrity sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==
+
+ansi-regex@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
+  integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
+
+ansi-styles@^4.0.0, ansi-styles@^4.1.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
+  integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
+  dependencies:
+    color-convert "^2.0.1"
+
+anymatch@~3.1.2:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e"
+  integrity sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==
+  dependencies:
+    normalize-path "^3.0.0"
+    picomatch "^2.0.4"
+
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+  integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
+
+axios@^1.8.2:
+  version "1.13.2"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.13.2.tgz#9ada120b7b5ab24509553ec3e40123521117f687"
+  integrity sha512-VPk9ebNqPcy5lRGuSlKx752IlDatOjT9paPlm8A7yOuW2Fbvp4X3JznJtT4f0GzGLLiWE9W8onz51SqLYwzGaA==
+  dependencies:
+    follow-redirects "^1.15.6"
+    form-data "^4.0.4"
+    proxy-from-env "^1.1.0"
+
+binary-extensions@^2.0.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.3.0.tgz#f6e14a97858d327252200242d4ccfe522c445522"
+  integrity sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==
+
+bootstrap@^5.3.8:
+  version "5.3.8"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.3.8.tgz#6401a10057a22752d21f4e19055508980656aeed"
+  integrity sha512-HP1SZDqaLDPwsNiqRqi5NcP0SSXciX2s9E+RyqJIIqGo+vJeN5AJVM98CXmW/Wux0nQ5L7jeWUdplCEf0Ee+tg==
+
+braces@~3.0.2:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.3.tgz#490332f40919452272d55a8480adc0c441358789"
+  integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==
+  dependencies:
+    fill-range "^7.1.1"
+
+call-bind-apply-helpers@^1.0.1, call-bind-apply-helpers@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz#4b5428c222be985d79c3d82657479dbe0b59b2d6"
+  integrity sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==
+  dependencies:
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+
+chalk@4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
+  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
+chart.js@^4.5.0:
+  version "4.5.1"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-4.5.1.tgz#19dd1a9a386a3f6397691672231cb5fc9c052c35"
+  integrity sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==
+  dependencies:
+    "@kurkle/color" "^0.3.0"
+
+choices.js@^11.1.0:
+  version "11.1.0"
+  resolved "https://registry.yarnpkg.com/choices.js/-/choices.js-11.1.0.tgz#4fcfb5834fdf0c7d1959f0261d1bbe526a7c9222"
+  integrity sha512-mIt0uLhedHg2ea/K2PACrVpt391vRGHuOoctPAiHcyemezwzNMxj7jOzNEk8e7EbjLh0S0sspDkSCADOKz9kcw==
+  dependencies:
+    fuse.js "^7.0.0"
+
+"chokidar@>=3.0.0 <4.0.0":
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b"
+  integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==
+  dependencies:
+    anymatch "~3.1.2"
+    braces "~3.0.2"
+    glob-parent "~5.1.2"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.6.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
+cleave.js@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/cleave.js/-/cleave.js-1.6.0.tgz#0e4e011943bdd70c67c9dcf4ff800ce710529171"
+  integrity sha512-ivqesy3j5hQVG3gywPfwKPbi/7ZSftY/UNp5uphnqjr25yI2CP8FS2ODQPzuLXXnNLi29e2+PgPkkiKUXLs/Nw==
+
+cliui@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-8.0.1.tgz#0c04b075db02cbfe60dc8e6cf2f5486b1a3608aa"
+  integrity sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==
+  dependencies:
+    string-width "^4.2.0"
+    strip-ansi "^6.0.1"
+    wrap-ansi "^7.0.0"
+
+color-convert@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
+  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
+  dependencies:
+    color-name "~1.1.4"
+
+color-name@~1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
+  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+
+combined-stream@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
+  integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
+  dependencies:
+    delayed-stream "~1.0.0"
+
+concurrently@^9.0.1:
+  version "9.2.1"
+  resolved "https://registry.yarnpkg.com/concurrently/-/concurrently-9.2.1.tgz#248ea21b95754947be2dad9c3e4b60f18ca4e44f"
+  integrity sha512-fsfrO0MxV64Znoy8/l1vVIjjHa29SZyyqPgQBwhiDcaW8wJc2W3XWVOGx4M3oJBnv/zdUZIIp1gDeS98GzP8Ng==
+  dependencies:
+    chalk "4.1.2"
+    rxjs "7.8.2"
+    shell-quote "1.8.3"
+    supports-color "8.1.1"
+    tree-kill "1.2.2"
+    yargs "17.7.2"
+
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+  integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
+
+drift-zoom@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/drift-zoom/-/drift-zoom-1.5.1.tgz#1f815c34590f4c8adda31a437d681c5b62f5d70d"
+  integrity sha512-GNLWl0ydTkgyFxfPouKvAZXvJhTt2dqUGkXCqENe+Y1OlQuQ+nUNKgvSpNvjp3nrbcij75GbJR/iMf/qdZbgPw==
+
+dunder-proto@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/dunder-proto/-/dunder-proto-1.0.1.tgz#d7ae667e1dc83482f8b70fd0f6eefc50da30f58a"
+  integrity sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==
+  dependencies:
+    call-bind-apply-helpers "^1.0.1"
+    es-errors "^1.3.0"
+    gopd "^1.2.0"
+
+emoji-regex@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
+  integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
+
+es-define-property@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/es-define-property/-/es-define-property-1.0.1.tgz#983eb2f9a6724e9303f61addf011c72e09e0b0fa"
+  integrity sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==
+
+es-errors@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/es-errors/-/es-errors-1.3.0.tgz#05f75a25dab98e4fb1dcd5e1472c0546d5057c8f"
+  integrity sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==
+
+es-object-atoms@^1.0.0, es-object-atoms@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/es-object-atoms/-/es-object-atoms-1.1.1.tgz#1c4f2c4837327597ce69d2ca190a7fdd172338c1"
+  integrity sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==
+  dependencies:
+    es-errors "^1.3.0"
+
+es-set-tostringtag@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz#f31dbbe0c183b00a6d26eb6325c810c0fd18bd4d"
+  integrity sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==
+  dependencies:
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.6"
+    has-tostringtag "^1.0.2"
+    hasown "^2.0.2"
+
+esbuild@^0.25.0:
+  version "0.25.12"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.25.12.tgz#97a1d041f4ab00c2fce2f838d2b9969a2d2a97a5"
+  integrity sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==
+  optionalDependencies:
+    "@esbuild/aix-ppc64" "0.25.12"
+    "@esbuild/android-arm" "0.25.12"
+    "@esbuild/android-arm64" "0.25.12"
+    "@esbuild/android-x64" "0.25.12"
+    "@esbuild/darwin-arm64" "0.25.12"
+    "@esbuild/darwin-x64" "0.25.12"
+    "@esbuild/freebsd-arm64" "0.25.12"
+    "@esbuild/freebsd-x64" "0.25.12"
+    "@esbuild/linux-arm" "0.25.12"
+    "@esbuild/linux-arm64" "0.25.12"
+    "@esbuild/linux-ia32" "0.25.12"
+    "@esbuild/linux-loong64" "0.25.12"
+    "@esbuild/linux-mips64el" "0.25.12"
+    "@esbuild/linux-ppc64" "0.25.12"
+    "@esbuild/linux-riscv64" "0.25.12"
+    "@esbuild/linux-s390x" "0.25.12"
+    "@esbuild/linux-x64" "0.25.12"
+    "@esbuild/netbsd-arm64" "0.25.12"
+    "@esbuild/netbsd-x64" "0.25.12"
+    "@esbuild/openbsd-arm64" "0.25.12"
+    "@esbuild/openbsd-x64" "0.25.12"
+    "@esbuild/openharmony-arm64" "0.25.12"
+    "@esbuild/sunos-x64" "0.25.12"
+    "@esbuild/win32-arm64" "0.25.12"
+    "@esbuild/win32-ia32" "0.25.12"
+    "@esbuild/win32-x64" "0.25.12"
+
+escalade@^3.1.1:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.2.0.tgz#011a3f69856ba189dffa7dc8fcce99d2a87903e5"
+  integrity sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==
+
+fdir@^6.4.4, fdir@^6.5.0:
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/fdir/-/fdir-6.5.0.tgz#ed2ab967a331ade62f18d077dae192684d50d350"
+  integrity sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==
+
+fill-range@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.1.1.tgz#44265d3cac07e3ea7dc247516380643754a05292"
+  integrity sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==
+  dependencies:
+    to-regex-range "^5.0.1"
+
+flatpickr@^4.6.13:
+  version "4.6.13"
+  resolved "https://registry.yarnpkg.com/flatpickr/-/flatpickr-4.6.13.tgz#8a029548187fd6e0d670908471e43abe9ad18d94"
+  integrity sha512-97PMG/aywoYpB4IvbvUJi0RQi8vearvU0oov1WW3k0WZPBMrTQVqekSX5CjSG/M4Q3i6A/0FKXC7RyAoAUUSPw==
+
+follow-redirects@^1.15.6:
+  version "1.15.11"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.11.tgz#777d73d72a92f8ec4d2e410eb47352a56b8e8340"
+  integrity sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==
+
+form-data@^4.0.4:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.5.tgz#b49e48858045ff4cbf6b03e1805cebcad3679053"
+  integrity sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    es-set-tostringtag "^2.1.0"
+    hasown "^2.0.2"
+    mime-types "^2.1.12"
+
+fsevents@~2.3.2, fsevents@~2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
+  integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
+
+function-bind@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c"
+  integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
+
+fuse.js@^7.0.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-7.1.0.tgz#306228b4befeee11e05b027087c2744158527d09"
+  integrity sha512-trLf4SzuuUxfusZADLINj+dE8clK1frKdmqiJNb1Es75fmI5oY6X2mxLVUciLLjxqw/xr72Dhy+lER6dGd02FQ==
+
+get-caller-file@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
+  integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
+
+get-intrinsic@^1.2.6:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.3.0.tgz#743f0e3b6964a93a5491ed1bffaae054d7f98d01"
+  integrity sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==
+  dependencies:
+    call-bind-apply-helpers "^1.0.2"
+    es-define-property "^1.0.1"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.1.1"
+    function-bind "^1.1.2"
+    get-proto "^1.0.1"
+    gopd "^1.2.0"
+    has-symbols "^1.1.0"
+    hasown "^2.0.2"
+    math-intrinsics "^1.1.0"
+
+get-proto@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/get-proto/-/get-proto-1.0.1.tgz#150b3f2743869ef3e851ec0c49d15b1d14d00ee1"
+  integrity sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==
+  dependencies:
+    dunder-proto "^1.0.1"
+    es-object-atoms "^1.0.0"
+
+glightbox@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/glightbox/-/glightbox-3.3.1.tgz#01d4c01394e437ac61792dc88fadca2e3f433eae"
+  integrity sha512-nXoKfJRnQTDaAFAw5799hjpfAAHx5aLvOLG0SIGudeMCwtHgO3P2/avNYapJ+SL4UEZxO2YNBPtq6pzMhSx42g==
+
+glob-parent@~5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
+  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
+  dependencies:
+    is-glob "^4.0.1"
+
+gopd@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.2.0.tgz#89f56b8217bdbc8802bd299df6d7f1081d7e51a1"
+  integrity sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==
+
+has-flag@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
+  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
+
+has-symbols@^1.0.3, has-symbols@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.1.0.tgz#fc9c6a783a084951d0b971fe1018de813707a338"
+  integrity sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==
+
+has-tostringtag@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-tostringtag/-/has-tostringtag-1.0.2.tgz#2cdc42d40bef2e5b4eeab7c01a73c54ce7ab5abc"
+  integrity sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==
+  dependencies:
+    has-symbols "^1.0.3"
+
+hasown@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.2.tgz#003eaf91be7adc372e84ec59dc37252cedb80003"
+  integrity sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==
+  dependencies:
+    function-bind "^1.1.2"
+
+img-comparison-slider@^8.0.6:
+  version "8.0.6"
+  resolved "https://registry.yarnpkg.com/img-comparison-slider/-/img-comparison-slider-8.0.6.tgz#a94385e49ee630903f8a6a4f9959658078668c87"
+  integrity sha512-ej4de7mWyjcXZvDgHq8K2a/dG8Vv+qYTdUjZa3cVILf316rLtDrHyGbh9fPvixmAFgbs30zTLfmaRDa7abjtzw==
+
+immutable@^4.0.0:
+  version "4.3.7"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.7.tgz#c70145fc90d89fb02021e65c84eb0226e4e5a381"
+  integrity sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==
+
+is-binary-path@~2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
+  integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
+  dependencies:
+    binary-extensions "^2.0.0"
+
+is-extglob@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
+  integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==
+
+is-fullwidth-code-point@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
+  integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
+
+is-glob@^4.0.1, is-glob@~4.0.1:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
+  integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
+  dependencies:
+    is-extglob "^2.1.1"
+
+is-number@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
+  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
+
+laravel-vite-plugin@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/laravel-vite-plugin/-/laravel-vite-plugin-2.0.1.tgz#6708acd1db21e626b300b528c0447c935ce30d84"
+  integrity sha512-zQuvzWfUKQu9oNVi1o0RZAJCwhGsdhx4NEOyrVQwJHaWDseGP9tl7XUPLY2T8Cj6+IrZ6lmyxlR1KC8unf3RLA==
+  dependencies:
+    picocolors "^1.0.0"
+    vite-plugin-full-reload "^1.1.0"
+
+list.js@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/list.js/-/list.js-2.3.1.tgz#48961989ffe52b0505e352f7a521f819f51df7e7"
+  integrity sha512-jnmm7DYpKtH3DxtO1E2VNCC9Gp7Wrp/FWA2JxQrZUhVJ2RCQBd57pCN6W5w6jpsfWZV0PCAbTX2NOPgyFeeZZg==
+  dependencies:
+    string-natural-compare "^2.0.2"
+
+lodash-es@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
+  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
+
+lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
+math-intrinsics@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz#a0dd74be81e2aa5c2f27e65ce283605ee4e2b7f9"
+  integrity sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==
+
+mime-db@1.52.0:
+  version "1.52.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
+  integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
+
+mime-types@^2.1.12:
+  version "2.1.35"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
+  integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
+  dependencies:
+    mime-db "1.52.0"
+
+nanoid@^3.3.11:
+  version "3.3.11"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.11.tgz#4f4f112cefbe303202f2199838128936266d185b"
+  integrity sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==
+
+normalize-path@^3.0.0, normalize-path@~3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
+  integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
+
+nouislider@^15.8.1:
+  version "15.8.1"
+  resolved "https://registry.yarnpkg.com/nouislider/-/nouislider-15.8.1.tgz#18729ed29738d2d328a1b5e0429d38eb8be8a696"
+  integrity sha512-93TweAi8kqntHJSPiSWQ1o/uZ29VWOmal9YKb6KKGGlCkugaNfAupT7o1qTHqdJvNQ7S0su5rO6qRFCjP8fxtw==
+
+picocolors@^1.0.0, picocolors@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b"
+  integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==
+
+picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
+  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
+
+picomatch@^4.0.2, picomatch@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-4.0.3.tgz#796c76136d1eead715db1e7bad785dedd695a042"
+  integrity sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==
+
+postcss@^8.5.3:
+  version "8.5.6"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.5.6.tgz#2825006615a619b4f62a9e7426cc120b349a8f3c"
+  integrity sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==
+  dependencies:
+    nanoid "^3.3.11"
+    picocolors "^1.1.1"
+    source-map-js "^1.2.1"
+
+proxy-from-env@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
+  integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
+
+readdirp@~3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
+  integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
+  dependencies:
+    picomatch "^2.2.1"
+
+require-directory@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
+  integrity sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==
+
+rollup@^4.34.9:
+  version "4.53.2"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-4.53.2.tgz#98e73ee51e119cb9d88b07d026c959522416420a"
+  integrity sha512-MHngMYwGJVi6Fmnk6ISmnk7JAHRNF0UkuucA0CUW3N3a4KnONPEZz+vUanQP/ZC/iY1Qkf3bwPWzyY84wEks1g==
+  dependencies:
+    "@types/estree" "1.0.8"
+  optionalDependencies:
+    "@rollup/rollup-android-arm-eabi" "4.53.2"
+    "@rollup/rollup-android-arm64" "4.53.2"
+    "@rollup/rollup-darwin-arm64" "4.53.2"
+    "@rollup/rollup-darwin-x64" "4.53.2"
+    "@rollup/rollup-freebsd-arm64" "4.53.2"
+    "@rollup/rollup-freebsd-x64" "4.53.2"
+    "@rollup/rollup-linux-arm-gnueabihf" "4.53.2"
+    "@rollup/rollup-linux-arm-musleabihf" "4.53.2"
+    "@rollup/rollup-linux-arm64-gnu" "4.53.2"
+    "@rollup/rollup-linux-arm64-musl" "4.53.2"
+    "@rollup/rollup-linux-loong64-gnu" "4.53.2"
+    "@rollup/rollup-linux-ppc64-gnu" "4.53.2"
+    "@rollup/rollup-linux-riscv64-gnu" "4.53.2"
+    "@rollup/rollup-linux-riscv64-musl" "4.53.2"
+    "@rollup/rollup-linux-s390x-gnu" "4.53.2"
+    "@rollup/rollup-linux-x64-gnu" "4.53.2"
+    "@rollup/rollup-linux-x64-musl" "4.53.2"
+    "@rollup/rollup-openharmony-arm64" "4.53.2"
+    "@rollup/rollup-win32-arm64-msvc" "4.53.2"
+    "@rollup/rollup-win32-ia32-msvc" "4.53.2"
+    "@rollup/rollup-win32-x64-gnu" "4.53.2"
+    "@rollup/rollup-win32-x64-msvc" "4.53.2"
+    fsevents "~2.3.2"
+
+rxjs@7.8.2:
+  version "7.8.2"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.8.2.tgz#955bc473ed8af11a002a2be52071bf475638607b"
+  integrity sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==
+  dependencies:
+    tslib "^2.1.0"
+
+sass@1.77.6:
+  version "1.77.6"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.77.6.tgz#898845c1348078c2e6d1b64f9ee06b3f8bd489e4"
+  integrity sha512-ByXE1oLD79GVq9Ht1PeHWCPMPB8XHpBuz1r85oByKHjZY6qV6rWnQovQzXJXuQ/XyE1Oj3iPk3lo28uzaRA2/Q==
+  dependencies:
+    chokidar ">=3.0.0 <4.0.0"
+    immutable "^4.0.0"
+    source-map-js ">=0.6.2 <2.0.0"
+
+shell-quote@1.8.3:
+  version "1.8.3"
+  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.8.3.tgz#55e40ef33cf5c689902353a3d8cd1a6725f08b4b"
+  integrity sha512-ObmnIF4hXNg1BqhnHmgbDETF8dLPCggZWBjkQfhZpbszZnYur5DUljTcCHii5LC3J5E0yeO/1LIMyH+UvHQgyw==
+
+simplebar-core@^1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/simplebar-core/-/simplebar-core-1.3.2.tgz#e249caf38625afb7c316b2d219b66afd6227e301"
+  integrity sha512-qKgTTuTqapjsFGkNhCjyPhysnbZGpQqNmjk0nOYjFN5ordC/Wjvg+RbYCyMSnW60l/Z0ZS82GbNltly6PMUH1w==
+  dependencies:
+    lodash "^4.17.21"
+    lodash-es "^4.17.21"
+
+simplebar@^6.3.2:
+  version "6.3.3"
+  resolved "https://registry.yarnpkg.com/simplebar/-/simplebar-6.3.3.tgz#08b4763e2a8e2b121f444fba613797a82ac33481"
+  integrity sha512-ni9cIiA8GRitiaenV7A/gh8nTStiVqO3gLxrfCMmq6CSy/pB+fz+QxqvJLo142QHb2Tvgvr8ILwZxf3qzAq7pg==
+  dependencies:
+    simplebar-core "^1.3.2"
+
+"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
+  integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
+
+string-natural-compare@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-2.0.3.tgz#9dbe1dd65490a5fe14f7a5c9bc686fc67cb9c6e4"
+  integrity sha512-4Kcl12rNjc+6EKhY8QyDVuQTAlMWwRiNbsxnVwBUKFr7dYPQuXVrtNU4sEkjF9LHY0AY6uVbB3ktbkIH4LC+BQ==
+
+string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+supports-color@8.1.1:
+  version "8.1.1"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-8.1.1.tgz#cd6fc17e28500cff56c1b86c0a7fd4a54a73005c"
+  integrity sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==
+  dependencies:
+    has-flag "^4.0.0"
+
+supports-color@^7.1.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
+  integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
+  dependencies:
+    has-flag "^4.0.0"
+
+swiper@^11.2.10:
+  version "11.2.10"
+  resolved "https://registry.yarnpkg.com/swiper/-/swiper-11.2.10.tgz#ed0b17286b56f7fe8d4b46ed61e6e0bd8daaccad"
+  integrity sha512-RMeVUUjTQH+6N3ckimK93oxz6Sn5la4aDlgPzB+rBrG/smPdCTicXyhxa+woIpopz+jewEloiEE3lKo1h9w2YQ==
+
+timezz@^9.0.2:
+  version "9.0.2"
+  resolved "https://registry.yarnpkg.com/timezz/-/timezz-9.0.2.tgz#c075e2f097950d34a34d71a6a3ce0f562d24ab75"
+  integrity sha512-oZrPwr4MJtzuD1R+2zy1rLaorF2c1urprqLI39IUj9et8b5xW2Zylbye0V1UbqMLGal/Z8bnoBNxyLZ9qnXhXQ==
+
+tinyglobby@^0.2.13:
+  version "0.2.15"
+  resolved "https://registry.yarnpkg.com/tinyglobby/-/tinyglobby-0.2.15.tgz#e228dd1e638cea993d2fdb4fcd2d4602a79951c2"
+  integrity sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==
+  dependencies:
+    fdir "^6.5.0"
+    picomatch "^4.0.3"
+
+to-regex-range@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
+  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
+  dependencies:
+    is-number "^7.0.0"
+
+tree-kill@1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.2.2.tgz#4ca09a9092c88b73a7cdc5e8a01b507b0790a0cc"
+  integrity sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==
+
+tslib@^2.1.0:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
+  integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
+
+vite-plugin-full-reload@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/vite-plugin-full-reload/-/vite-plugin-full-reload-1.2.0.tgz#bc4bfdc842abb4d24309ca802be8b955fce1c0c6"
+  integrity sha512-kz18NW79x0IHbxRSHm0jttP4zoO9P9gXh+n6UTwlNKnviTTEpOlum6oS9SmecrTtSr+muHEn5TUuC75UovQzcA==
+  dependencies:
+    picocolors "^1.0.0"
+    picomatch "^2.3.1"
+
+vite@^6.2.4:
+  version "6.4.1"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-6.4.1.tgz#afbe14518cdd6887e240a4b0221ab6d0ce733f96"
+  integrity sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==
+  dependencies:
+    esbuild "^0.25.0"
+    fdir "^6.4.4"
+    picomatch "^4.0.2"
+    postcss "^8.5.3"
+    rollup "^4.34.9"
+    tinyglobby "^0.2.13"
+  optionalDependencies:
+    fsevents "~2.3.3"
+
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
+y18n@^5.0.5:
+  version "5.0.8"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55"
+  integrity sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==
+
+yargs-parser@^21.1.1:
+  version "21.1.1"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-21.1.1.tgz#9096bceebf990d21bb31fa9516e0ede294a77d35"
+  integrity sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==
+
+yargs@17.7.2:
+  version "17.7.2"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.7.2.tgz#991df39aca675a192b816e1e0363f9d75d2aa269"
+  integrity sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==
+  dependencies:
+    cliui "^8.0.1"
+    escalade "^3.1.1"
+    get-caller-file "^2.0.5"
+    require-directory "^2.1.1"
+    string-width "^4.2.3"
+    y18n "^5.0.5"
+    yargs-parser "^21.1.1"