From 0602bba3b218bfe2ce7bf6df8969b1cc2af09b75 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andrei=20Ioni=C8=9B=C4=83?= <hi@andrei.io>
Date: Wed, 8 Nov 2023 17:29:09 +0000
Subject: [PATCH] feat: SSR support (#303)

* init ssr support

* wip

* wip

* add SSR support to the Dockerfile

* replace Vue3PictureSwipe component
---
 .dockerignore                                 |  32 ++
 .nvmrc                                        |   1 +
 Dockerfile                                    |  12 +-
 app/Http/Middleware/HandleInertiaRequests.php |  46 ++-
 composer.json                                 |   2 +-
 composer.lock                                 |   2 +-
 config/ziggy.php                              |  18 +
 docker/s6-rc.d/ssr/run                        |   5 +
 docker/s6-rc.d/ssr/type                       |   1 +
 docker/s6-rc.d/user/contents.d/ssr            |   0
 package-lock.json                             | 381 ++++++++++-------
 package.json                                  |  23 +-
 postcss.config.js                             |   2 +-
 resources/css/app.css                         |   7 -
 resources/js/Components/ClientOnly.vue        |  21 +
 resources/js/Components/Footer.vue            |   1 +
 resources/js/Components/Gallery.vue           |  58 +++
 resources/js/Components/Head.vue              |  14 +-
 resources/js/Components/Navbar.vue            |   3 +-
 resources/js/Components/Notification.vue      |  77 ++--
 .../js/Components/OrganizationStatus.vue      |  40 +-
 resources/js/Components/Title.vue             |   1 +
 resources/js/Components/cards/ProjectCard.vue |  16 +-
 resources/js/Components/charts/BarChart.vue   | 154 +++----
 resources/js/Components/charts/LineChart.vue  | 158 ++++----
 .../js/Components/dropdowns/FlyoutMenu.vue    |   1 +
 resources/js/Components/filters/Sort.vue      |   2 +-
 resources/js/Components/gallery/Gallery.vue   | 157 -------
 .../Components/modals/ConfirmationModal.vue   |   1 -
 .../js/Components/modals/DonateModal.vue      |  24 +-
 resources/js/Components/modals/Modal.vue      |   2 +-
 .../js/Components/tables/TableHeader.vue      |   2 +-
 resources/js/Helpers/useRoute.js              |  22 +
 resources/js/Helpers/useSort.js               |   2 +-
 resources/js/Layouts/DashboardLayout.vue      |   5 +-
 resources/js/Layouts/PageLayout.vue           |   3 +-
 .../js/Pages/AdminOng/Donations/Index.vue     |   2 +-
 .../js/Pages/AdminOng/Organizations/Edit.vue  |   7 +-
 .../js/Pages/AdminOng/Projects/AddProject.vue | 165 ++++----
 .../AdminOng/Projects/AddRegionalProject.vue  |   1 +
 .../Pages/AdminOng/Projects/EditProject.vue   |  60 ++-
 .../AdminOng/Projects/EditRegionalProject.vue |   1 +
 resources/js/Pages/Auth/ConfirmPassword.vue   |   1 +
 resources/js/Pages/Auth/ForgotPassword.vue    |   1 +
 resources/js/Pages/Auth/Login.vue             |  15 +-
 resources/js/Pages/Auth/Register.vue          |   1 +
 resources/js/Pages/Auth/ResetPassword.vue     |   1 +
 resources/js/Pages/Donor/Donations.vue        | 228 +++++------
 .../Profile/Partials/UpdatePasswordForm.vue   |   1 +
 .../js/Pages/Public/Articles/Articles.vue     |   5 +-
 resources/js/Pages/Public/Articles/Show.vue   |  21 +-
 resources/js/Pages/Public/Bcr/Index.vue       |   5 +-
 resources/js/Pages/Public/Bcr/Show.vue        | 382 +++++++++---------
 .../Public/Championship/Championship.vue      |   6 +-
 .../js/Pages/Public/Championship/Edition.vue  |   5 +-
 .../js/Pages/Public/Championship/Rules.vue    |  15 +-
 resources/js/Pages/Public/Donor/Donor.vue     |  21 +-
 resources/js/Pages/Public/Donor/ThankYou.vue  |  58 +--
 .../js/Pages/Public/Evolution/Evolution.vue   |  40 +-
 resources/js/Pages/Public/Home.vue            |  11 +-
 .../js/Pages/Public/Organizations/Index.vue   |   1 +
 .../js/Pages/Public/Organizations/Show.vue    |  10 +-
 .../js/Pages/Public/Projects/Gallery.vue      |  43 +-
 resources/js/Pages/Public/Projects/Index.vue  |   1 +
 resources/js/Pages/Public/Projects/Show.vue   | 218 +++++-----
 .../js/Pages/Public/Regional/Edition.vue      |   4 +-
 .../js/Pages/Public/Regional/LastEdition.vue  |   4 +-
 .../js/Pages/Public/Regional/Project.vue      |   5 +-
 .../js/Pages/Public/Regional/Regional.vue     |   4 +-
 resources/js/Pages/Public/Regional/Rules.vue  |  13 +-
 resources/js/Pages/Public/Website/About.vue   |  10 +-
 resources/js/Pages/Public/Website/Contact.vue |   7 +-
 resources/js/Pages/Public/Website/Faqs.vue    |   6 +-
 resources/js/Pages/Public/Website/Policy.vue  |  11 +-
 resources/js/Pages/Public/Website/Terms.vue   |  10 +-
 resources/js/app.js                           |  15 +-
 resources/js/ssr.js                           |  22 +-
 resources/views/app.blade.php                 |   3 +-
 vite.config.js                                |   2 +-
 79 files changed, 1407 insertions(+), 1331 deletions(-)
 create mode 100644 .dockerignore
 create mode 100644 .nvmrc
 create mode 100644 config/ziggy.php
 create mode 100644 docker/s6-rc.d/ssr/run
 create mode 100644 docker/s6-rc.d/ssr/type
 create mode 100644 docker/s6-rc.d/user/contents.d/ssr
 create mode 100644 resources/js/Components/ClientOnly.vue
 create mode 100644 resources/js/Components/Gallery.vue
 delete mode 100644 resources/js/Components/gallery/Gallery.vue
 create mode 100644 resources/js/Helpers/useRoute.js

diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 00000000..a345ea06
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1,32 @@
+/.git
+/.github
+/.husky
+/.idea
+/.vscode
+/bootstrap/cache/*.php
+/coverage
+/node_modules
+/public/assets
+/public/hot
+/public/storage
+/public/vendor
+/storage/*.key
+/storage/app/*
+/storage/clockwork
+/storage/debugbar
+/storage/framework/cache/data/*
+/storage/framework/sessions/*
+/storage/framework/testing/*
+/storage/framework/views/*
+/storage/logs/*
+/vendor
+_ide_helper_models.php
+_ide_helper.php
+.DS_Store
+.env
+.php_cs.cache
+.php-cs-fixer.cache
+.phpstorm.meta.php
+.phpunit.result.cache
+docker-compose.yml
+Dockerfile
diff --git a/.nvmrc b/.nvmrc
new file mode 100644
index 00000000..209e3ef4
--- /dev/null
+++ b/.nvmrc
@@ -0,0 +1 @@
+20
diff --git a/Dockerfile b/Dockerfile
index 1733399c..9a63df13 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,4 +1,4 @@
-FROM php:8.1-fpm-alpine as vendor
+FROM php:8.1-fpm-alpine AS vendor
 
 ENV COMPOSER_ALLOW_SUPERUSER 1
 ENV COMPOSER_HOME /tmp
@@ -33,7 +33,7 @@ RUN composer install \
     --no-dev \
     --prefer-dist
 
-FROM node:18-alpine as assets
+FROM node:20-alpine AS assets
 
 WORKDIR /build
 
@@ -52,7 +52,7 @@ RUN npm run build
 
 FROM vendor
 
-ARG S6_OVERLAY_VERSION=3.1.2.1
+ARG S6_OVERLAY_VERSION=3.1.6.0
 
 ADD https://github.com/just-containers/s6-overlay/releases/download/v${S6_OVERLAY_VERSION}/s6-overlay-noarch.tar.xz /tmp
 RUN tar -C / -Jxpf /tmp/s6-overlay-noarch.tar.xz
@@ -67,6 +67,12 @@ COPY docker/php/www.conf /usr/local/etc/php-fpm.d/zz-docker.conf
 COPY docker/s6-rc.d /etc/s6-overlay/s6-rc.d
 
 COPY --from=assets --chown=www-data:www-data /build/public/build /var/www/public/build
+COPY --from=assets /build/node_modules /var/www/node_modules
+COPY --from=assets /usr/lib /usr/lib
+COPY --from=assets /usr/local/share /usr/local/share
+COPY --from=assets /usr/local/lib /usr/local/lib
+COPY --from=assets /usr/local/include /usr/local/include
+COPY --from=assets /usr/local/bin /usr/local/bin
 
 ENV APP_ENV production
 ENV APP_DEBUG false
diff --git a/app/Http/Middleware/HandleInertiaRequests.php b/app/Http/Middleware/HandleInertiaRequests.php
index 011b443c..e2029984 100644
--- a/app/Http/Middleware/HandleInertiaRequests.php
+++ b/app/Http/Middleware/HandleInertiaRequests.php
@@ -6,6 +6,7 @@
 
 use Illuminate\Http\Request;
 use Inertia\Middleware;
+use Tightenco\Ziggy\Ziggy;
 
 class HandleInertiaRequests extends Middleware
 {
@@ -23,17 +24,40 @@ class HandleInertiaRequests extends Middleware
      */
     public function share(Request $request): array
     {
-        return array_merge(parent::share($request), [
-            'flash' => fn () => $this->flash($request),
-            'auth' => [
-                'user' => $request->user(),
-            ],
-            'organization_status' => fn () => $request->user()?->organization?->status,
-            'locales' => fn () => [
-                'available' => locales(),
-                'current' => app()->getLocale(),
-            ],
-        ]);
+        return array_merge(
+            parent::share($request),
+            $this->shareOnce($request),
+            [
+                'appName' => config('app.name'),
+                'flash' => fn () => $this->flash($request),
+                'auth' => fn () => [
+                    'user' => $request->user(),
+                    'organization' => [
+                        'status' => $request->user()?->organization?->status,
+                    ],
+                ],
+                'locales' => [
+                    'available' => locales(),
+                    'current' => app()->getLocale(),
+                ],
+            ]
+        );
+    }
+
+    /**
+     * Define the props that are shared on first load only.
+     *
+     * @return array<string, mixed>
+     */
+    public function shareOnce(Request $request): array
+    {
+        if ($request->inertia()) {
+            return [];
+        }
+
+        return [
+            'ziggy' => new Ziggy,
+        ];
     }
 
     protected function flash(Request $request): ?array
diff --git a/composer.json b/composer.json
index 3e817162..b18d3a60 100644
--- a/composer.json
+++ b/composer.json
@@ -28,7 +28,7 @@
         "spatie/laravel-newsletter": "^5.1",
         "spatie/laravel-query-builder": "^5.3",
         "stevegrunwell/time-constants": "^1.1",
-        "tightenco/ziggy": "^1.6"
+        "tightenco/ziggy": "^1.8"
     },
     "require-dev": {
         "barryvdh/laravel-debugbar": "^3.9",
diff --git a/composer.lock b/composer.lock
index 1dca8d4e..8bde093e 100644
--- a/composer.lock
+++ b/composer.lock
@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "be0d4e8f0908e794b3fbe76125cf8c1b",
+    "content-hash": "3c764bf43a2cc641437b72883d8ea76b",
     "packages": [
         {
             "name": "akaunting/laravel-money",
diff --git a/config/ziggy.php b/config/ziggy.php
new file mode 100644
index 00000000..d3cfe2c3
--- /dev/null
+++ b/config/ziggy.php
@@ -0,0 +1,18 @@
+<?php
+
+declare(strict_types=1);
+
+return [
+
+    'skip-route-function' => true,
+
+    'except' => [
+        'debugbar.*',
+        'dusk.*',
+        'filament.*',
+        'horizon.*',
+        'ignition.*',
+        'telescope',
+    ],
+
+];
diff --git a/docker/s6-rc.d/ssr/run b/docker/s6-rc.d/ssr/run
new file mode 100644
index 00000000..43b0c515
--- /dev/null
+++ b/docker/s6-rc.d/ssr/run
@@ -0,0 +1,5 @@
+#!/command/with-contenv sh
+
+cd /var/www
+
+php artisan inertia:start-ssr
diff --git a/docker/s6-rc.d/ssr/type b/docker/s6-rc.d/ssr/type
new file mode 100644
index 00000000..5883cff0
--- /dev/null
+++ b/docker/s6-rc.d/ssr/type
@@ -0,0 +1 @@
+longrun
diff --git a/docker/s6-rc.d/user/contents.d/ssr b/docker/s6-rc.d/user/contents.d/ssr
new file mode 100644
index 00000000..e69de29b
diff --git a/package-lock.json b/package-lock.json
index 1ce7c668..b49e1810 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4,36 +4,34 @@
     "requires": true,
     "packages": {
         "": {
-            "dependencies": {
-                "vue3-picture-swipe": "^3.0.6"
-            },
             "devDependencies": {
                 "@headlessui/vue": "^1.7.16",
                 "@heroicons/vue": "^1.0.6",
-                "@inertiajs/vue3": "^1.0.11",
+                "@inertiajs/vue3": "^1.0.14",
                 "@tailwindcss/aspect-ratio": "^0.4.2",
                 "@tailwindcss/forms": "^0.5.6",
                 "@tailwindcss/typography": "^0.5.10",
-                "@vitejs/plugin-vue": "^4.3.4",
-                "@vue/server-renderer": "^3.3.4",
+                "@vitejs/plugin-vue": "^4.4.0",
+                "@vue/server-renderer": "^3.3.7",
                 "@vueform/multiselect": "^2.6.2",
                 "@vuepic/vue-datepicker": "^6.0.3",
                 "@vueuse/core": "^10.4.1",
-                "autoprefixer": "^10.4.15",
+                "autoprefixer": "^10.4.16",
                 "axios": "^1.5.0",
                 "chart.js": "^4.4.0",
-                "laravel-vite-plugin": "^0.8.0",
+                "laravel-vite-plugin": "^0.8.1",
                 "laravel-vue-i18n": "^2.7.1",
-                "postcss": "^8.4.29",
-                "tailwindcss": "^3.3.3",
+                "photoswipe": "^5.4.2",
+                "postcss": "^8.4.31",
+                "tailwindcss": "^3.3.5",
                 "tippy.js": "^6.3.7",
-                "vite": "^4.4.9",
+                "vite": "^4.5.0",
                 "vite-plugin-svg-icons": "^2.0.1",
                 "vite-svg-loader": "^4.0.0",
                 "vue": "^3.3.4",
                 "vue-chartjs": "^5.2.0",
                 "vue3-carousel": "^0.3.1",
-                "ziggy-js": "^1.6.2"
+                "ziggy-js": "^1.8.1"
             }
         },
         "node_modules/@alloc/quick-lru": {
@@ -49,9 +47,9 @@
             }
         },
         "node_modules/@babel/parser": {
-            "version": "7.22.11",
-            "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.11.tgz",
-            "integrity": "sha512-R5zb8eJIBPJriQtbH/htEQy4k7E2dHWlD2Y2VT07JCzwYZHBxV5ZYtM0UhXSNMT74LyxuM+b1jdL7pSesXbC/g==",
+            "version": "7.23.0",
+            "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.0.tgz",
+            "integrity": "sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==",
             "dev": true,
             "bin": {
                 "parser": "bin/babel-parser.js"
@@ -446,9 +444,9 @@
             }
         },
         "node_modules/@inertiajs/core": {
-            "version": "1.0.11",
-            "resolved": "https://registry.npmjs.org/@inertiajs/core/-/core-1.0.11.tgz",
-            "integrity": "sha512-EFUvVsq8TvvIaUDrfbL/pvEBvu67gdBvV/cyepDZqCdAolld0N3AO+TZ7i7UtwKwLKw8eAFbixgbkicugojhGA==",
+            "version": "1.0.14",
+            "resolved": "https://registry.npmjs.org/@inertiajs/core/-/core-1.0.14.tgz",
+            "integrity": "sha512-S33PU6mWEYbn/s2Op+CJ6MN7ON354vWw8Y+UvtQzPt0r7pVgOuIArrqqsoulf9oQz9sbP1+vp/tCvyBzm4XmpA==",
             "dev": true,
             "dependencies": {
                 "axios": "^1.2.0",
@@ -458,12 +456,12 @@
             }
         },
         "node_modules/@inertiajs/vue3": {
-            "version": "1.0.11",
-            "resolved": "https://registry.npmjs.org/@inertiajs/vue3/-/vue3-1.0.11.tgz",
-            "integrity": "sha512-4lqOsXWXxbeqq5dXZhpNSFabNfxHItHjc005+dqd+cKbhZ5n+dr8n2IGSDBfMNcT7bJfDUyUS2XKdY5y1EnAuw==",
+            "version": "1.0.14",
+            "resolved": "https://registry.npmjs.org/@inertiajs/vue3/-/vue3-1.0.14.tgz",
+            "integrity": "sha512-lKL3Bm9k95Gw1GAq4RxgjfwSMfklkeMbvEfzwmsEBsZ4BbbWwfpC/+KS+4O4faTjjijczvkDPhMKv4duzFxtGw==",
             "dev": true,
             "dependencies": {
-                "@inertiajs/core": "1.0.11",
+                "@inertiajs/core": "1.0.14",
                 "lodash.clonedeep": "^4.5.0",
                 "lodash.isequal": "^4.5.0"
             },
@@ -656,9 +654,9 @@
             "dev": true
         },
         "node_modules/@vitejs/plugin-vue": {
-            "version": "4.3.4",
-            "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.3.4.tgz",
-            "integrity": "sha512-ciXNIHKPriERBisHFBvnTbfKa6r9SAesOYXeGDzgegcvy9Q4xdScSHAmKbNT0M3O0S9LKhIf5/G+UYG4NnnzYw==",
+            "version": "4.4.0",
+            "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.4.0.tgz",
+            "integrity": "sha512-xdguqb+VUwiRpSg+nsc2HtbAUSGak25DXYvpQQi4RVU1Xq1uworyoH/md9Rfd8zMmPR/pSghr309QNcftUVseg==",
             "dev": true,
             "engines": {
                 "node": "^14.18.0 || >=16.0.0"
@@ -669,115 +667,115 @@
             }
         },
         "node_modules/@vue/compiler-core": {
-            "version": "3.3.4",
-            "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.4.tgz",
-            "integrity": "sha512-cquyDNvZ6jTbf/+x+AgM2Arrp6G4Dzbb0R64jiG804HRMfRiFXWI6kqUVqZ6ZR0bQhIoQjB4+2bhNtVwndW15g==",
+            "version": "3.3.7",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.7.tgz",
+            "integrity": "sha512-pACdY6YnTNVLXsB86YD8OF9ihwpolzhhtdLVHhBL6do/ykr6kKXNYABRtNMGrsQXpEXXyAdwvWWkuTbs4MFtPQ==",
             "dev": true,
             "dependencies": {
-                "@babel/parser": "^7.21.3",
-                "@vue/shared": "3.3.4",
+                "@babel/parser": "^7.23.0",
+                "@vue/shared": "3.3.7",
                 "estree-walker": "^2.0.2",
                 "source-map-js": "^1.0.2"
             }
         },
         "node_modules/@vue/compiler-dom": {
-            "version": "3.3.4",
-            "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.3.4.tgz",
-            "integrity": "sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==",
+            "version": "3.3.7",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.3.7.tgz",
+            "integrity": "sha512-0LwkyJjnUPssXv/d1vNJ0PKfBlDoQs7n81CbO6Q0zdL7H1EzqYRrTVXDqdBVqro0aJjo/FOa1qBAPVI4PGSHBw==",
             "dev": true,
             "dependencies": {
-                "@vue/compiler-core": "3.3.4",
-                "@vue/shared": "3.3.4"
+                "@vue/compiler-core": "3.3.7",
+                "@vue/shared": "3.3.7"
             }
         },
         "node_modules/@vue/compiler-sfc": {
-            "version": "3.3.4",
-            "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.3.4.tgz",
-            "integrity": "sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==",
+            "version": "3.3.7",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.3.7.tgz",
+            "integrity": "sha512-7pfldWy/J75U/ZyYIXRVqvLRw3vmfxDo2YLMwVtWVNew8Sm8d6wodM+OYFq4ll/UxfqVr0XKiVwti32PCrruAw==",
             "dev": true,
             "dependencies": {
-                "@babel/parser": "^7.20.15",
-                "@vue/compiler-core": "3.3.4",
-                "@vue/compiler-dom": "3.3.4",
-                "@vue/compiler-ssr": "3.3.4",
-                "@vue/reactivity-transform": "3.3.4",
-                "@vue/shared": "3.3.4",
+                "@babel/parser": "^7.23.0",
+                "@vue/compiler-core": "3.3.7",
+                "@vue/compiler-dom": "3.3.7",
+                "@vue/compiler-ssr": "3.3.7",
+                "@vue/reactivity-transform": "3.3.7",
+                "@vue/shared": "3.3.7",
                 "estree-walker": "^2.0.2",
-                "magic-string": "^0.30.0",
-                "postcss": "^8.1.10",
+                "magic-string": "^0.30.5",
+                "postcss": "^8.4.31",
                 "source-map-js": "^1.0.2"
             }
         },
         "node_modules/@vue/compiler-ssr": {
-            "version": "3.3.4",
-            "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.4.tgz",
-            "integrity": "sha512-m0v6oKpup2nMSehwA6Uuu+j+wEwcy7QmwMkVNVfrV9P2qE5KshC6RwOCq8fjGS/Eak/uNb8AaWekfiXxbBB6gQ==",
+            "version": "3.3.7",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.7.tgz",
+            "integrity": "sha512-TxOfNVVeH3zgBc82kcUv+emNHo+vKnlRrkv8YvQU5+Y5LJGJwSNzcmLUoxD/dNzv0bhQ/F0s+InlgV0NrApJZg==",
             "dev": true,
             "dependencies": {
-                "@vue/compiler-dom": "3.3.4",
-                "@vue/shared": "3.3.4"
+                "@vue/compiler-dom": "3.3.7",
+                "@vue/shared": "3.3.7"
             }
         },
         "node_modules/@vue/reactivity": {
-            "version": "3.3.4",
-            "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.4.tgz",
-            "integrity": "sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==",
+            "version": "3.3.7",
+            "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.7.tgz",
+            "integrity": "sha512-cZNVjWiw00708WqT0zRpyAgduG79dScKEPYJXq2xj/aMtk3SKvL3FBt2QKUlh6EHBJ1m8RhBY+ikBUzwc7/khg==",
             "dev": true,
             "dependencies": {
-                "@vue/shared": "3.3.4"
+                "@vue/shared": "3.3.7"
             }
         },
         "node_modules/@vue/reactivity-transform": {
-            "version": "3.3.4",
-            "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.3.4.tgz",
-            "integrity": "sha512-MXgwjako4nu5WFLAjpBnCj/ieqcjE2aJBINUNQzkZQfzIZA4xn+0fV1tIYBJvvva3N3OvKGofRLvQIwEQPpaXw==",
+            "version": "3.3.7",
+            "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.3.7.tgz",
+            "integrity": "sha512-APhRmLVbgE1VPGtoLQoWBJEaQk4V8JUsqrQihImVqKT+8U6Qi3t5ATcg4Y9wGAPb3kIhetpufyZ1RhwbZCIdDA==",
             "dev": true,
             "dependencies": {
-                "@babel/parser": "^7.20.15",
-                "@vue/compiler-core": "3.3.4",
-                "@vue/shared": "3.3.4",
+                "@babel/parser": "^7.23.0",
+                "@vue/compiler-core": "3.3.7",
+                "@vue/shared": "3.3.7",
                 "estree-walker": "^2.0.2",
-                "magic-string": "^0.30.0"
+                "magic-string": "^0.30.5"
             }
         },
         "node_modules/@vue/runtime-core": {
-            "version": "3.3.4",
-            "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.3.4.tgz",
-            "integrity": "sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA==",
+            "version": "3.3.7",
+            "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.3.7.tgz",
+            "integrity": "sha512-LHq9du3ubLZFdK/BP0Ysy3zhHqRfBn80Uc+T5Hz3maFJBGhci1MafccnL3rpd5/3wVfRHAe6c+PnlO2PAavPTQ==",
             "dev": true,
             "dependencies": {
-                "@vue/reactivity": "3.3.4",
-                "@vue/shared": "3.3.4"
+                "@vue/reactivity": "3.3.7",
+                "@vue/shared": "3.3.7"
             }
         },
         "node_modules/@vue/runtime-dom": {
-            "version": "3.3.4",
-            "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.3.4.tgz",
-            "integrity": "sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ==",
+            "version": "3.3.7",
+            "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.3.7.tgz",
+            "integrity": "sha512-PFQU1oeJxikdDmrfoNQay5nD4tcPNYixUBruZzVX/l0eyZvFKElZUjW4KctCcs52nnpMGO6UDK+jF5oV4GT5Lw==",
             "dev": true,
             "dependencies": {
-                "@vue/runtime-core": "3.3.4",
-                "@vue/shared": "3.3.4",
-                "csstype": "^3.1.1"
+                "@vue/runtime-core": "3.3.7",
+                "@vue/shared": "3.3.7",
+                "csstype": "^3.1.2"
             }
         },
         "node_modules/@vue/server-renderer": {
-            "version": "3.3.4",
-            "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.3.4.tgz",
-            "integrity": "sha512-Q6jDDzR23ViIb67v+vM1Dqntu+HUexQcsWKhhQa4ARVzxOY2HbC7QRW/ggkDBd5BU+uM1sV6XOAP0b216o34JQ==",
+            "version": "3.3.7",
+            "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.3.7.tgz",
+            "integrity": "sha512-UlpKDInd1hIZiNuVVVvLgxpfnSouxKQOSE2bOfQpBuGwxRV/JqqTCyyjXUWiwtVMyeRaZhOYYqntxElk8FhBhw==",
             "dev": true,
             "dependencies": {
-                "@vue/compiler-ssr": "3.3.4",
-                "@vue/shared": "3.3.4"
+                "@vue/compiler-ssr": "3.3.7",
+                "@vue/shared": "3.3.7"
             },
             "peerDependencies": {
-                "vue": "3.3.4"
+                "vue": "3.3.7"
             }
         },
         "node_modules/@vue/shared": {
-            "version": "3.3.4",
-            "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.4.tgz",
-            "integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==",
+            "version": "3.3.7",
+            "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.7.tgz",
+            "integrity": "sha512-N/tbkINRUDExgcPTBvxNkvHGu504k8lzlNQRITVnm6YjOjwa4r0nnbd4Jb01sNpur5hAllyRJzSK5PvB9PPwRg==",
             "dev": true
         },
         "node_modules/@vueform/multiselect": {
@@ -997,9 +995,9 @@
             }
         },
         "node_modules/autoprefixer": {
-            "version": "10.4.15",
-            "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.15.tgz",
-            "integrity": "sha512-KCuPB8ZCIqFdA4HwKXsvz7j6gvSDNhDP7WnUjBleRkKjPdvCmHFuQ77ocavI8FT6NdvlBnE2UFr2H4Mycn8Vew==",
+            "version": "10.4.16",
+            "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.16.tgz",
+            "integrity": "sha512-7vd3UC6xKp0HLfua5IjZlcXvGAGy7cBAXTg2lyQ/8WpNhd6SiZ8Be+xm3FyBSYJx5GKcpRCzBh7RH4/0dnY+uQ==",
             "dev": true,
             "funding": [
                 {
@@ -1017,8 +1015,8 @@
             ],
             "dependencies": {
                 "browserslist": "^4.21.10",
-                "caniuse-lite": "^1.0.30001520",
-                "fraction.js": "^4.2.0",
+                "caniuse-lite": "^1.0.30001538",
+                "fraction.js": "^4.3.6",
                 "normalize-range": "^0.1.2",
                 "picocolors": "^1.0.0",
                 "postcss-value-parser": "^4.2.0"
@@ -1191,13 +1189,14 @@
             }
         },
         "node_modules/call-bind": {
-            "version": "1.0.2",
-            "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
-            "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+            "version": "1.0.5",
+            "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.5.tgz",
+            "integrity": "sha512-C3nQxfFZxFRVoJoGKKI8y3MOEo129NQ+FgQ08iye+Mk4zNZZGdjfs06bVTr+DBSlA66Q2VEcMki/cUCP4SercQ==",
             "dev": true,
             "dependencies": {
-                "function-bind": "^1.1.1",
-                "get-intrinsic": "^1.0.2"
+                "function-bind": "^1.1.2",
+                "get-intrinsic": "^1.2.1",
+                "set-function-length": "^1.1.1"
             },
             "funding": {
                 "url": "https://github.com/sponsors/ljharb"
@@ -1213,9 +1212,9 @@
             }
         },
         "node_modules/caniuse-lite": {
-            "version": "1.0.30001524",
-            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001524.tgz",
-            "integrity": "sha512-Jj917pJtYg9HSJBF95HVX3Cdr89JUyLT4IZ8SvM5aDRni95swKgYi3TgYLH5hnGfPE/U1dg6IfZ50UsIlLkwSA==",
+            "version": "1.0.30001559",
+            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001559.tgz",
+            "integrity": "sha512-cPiMKZgqgkg5LY3/ntGeLFUpi6tzddBNS58A4tnTgQw1zON7u2sZMU7SzOeVH4tj20++9ggL+V6FDOFMTaFFYA==",
             "dev": true,
             "funding": [
                 {
@@ -1635,6 +1634,20 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/define-data-property": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.1.tgz",
+            "integrity": "sha512-E7uGkTzkk1d0ByLeSc6ZsFS79Axg+m1P/VsgYsxHgiuc3tFSj+MjMIwe90FC4lOAZzNBdY7kkO2P2wKdsQ1vgQ==",
+            "dev": true,
+            "dependencies": {
+                "get-intrinsic": "^1.2.1",
+                "gopd": "^1.0.1",
+                "has-property-descriptors": "^1.0.0"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            }
+        },
         "node_modules/define-property": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
@@ -1959,9 +1972,9 @@
             }
         },
         "node_modules/fast-glob": {
-            "version": "3.2.12",
-            "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
-            "integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==",
+            "version": "3.3.1",
+            "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz",
+            "integrity": "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==",
             "dev": true,
             "dependencies": {
                 "@nodelib/fs.stat": "^2.0.2",
@@ -2051,16 +2064,16 @@
             }
         },
         "node_modules/fraction.js": {
-            "version": "4.2.0",
-            "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
-            "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==",
+            "version": "4.3.7",
+            "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
+            "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
             "dev": true,
             "engines": {
                 "node": "*"
             },
             "funding": {
                 "type": "patreon",
-                "url": "https://www.patreon.com/infusion"
+                "url": "https://github.com/sponsors/rawify"
             }
         },
         "node_modules/fragment-cache": {
@@ -2110,21 +2123,24 @@
             }
         },
         "node_modules/function-bind": {
-            "version": "1.1.1",
-            "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-            "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
-            "dev": true
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+            "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+            "dev": true,
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
         },
         "node_modules/get-intrinsic": {
-            "version": "1.2.1",
-            "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.1.tgz",
-            "integrity": "sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==",
+            "version": "1.2.2",
+            "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.2.tgz",
+            "integrity": "sha512-0gSo4ml/0j98Y3lngkFEot/zhiCeWsbYIlZ+uZOVgzLyLaUw7wxUL+nCTP0XJvJg1AXulJRI3UJi8GsbDuxdGA==",
             "dev": true,
             "dependencies": {
-                "function-bind": "^1.1.1",
-                "has": "^1.0.3",
+                "function-bind": "^1.1.2",
                 "has-proto": "^1.0.1",
-                "has-symbols": "^1.0.3"
+                "has-symbols": "^1.0.3",
+                "hasown": "^2.0.0"
             },
             "funding": {
                 "url": "https://github.com/sponsors/ljharb"
@@ -2171,6 +2187,18 @@
                 "node": ">=10.13.0"
             }
         },
+        "node_modules/gopd": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
+            "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
+            "dev": true,
+            "dependencies": {
+                "get-intrinsic": "^1.1.3"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
         "node_modules/graceful-fs": {
             "version": "4.2.11",
             "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
@@ -2210,6 +2238,18 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/has-property-descriptors": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.1.tgz",
+            "integrity": "sha512-VsX8eaIewvas0xnvinAe9bw4WfIeODpGYikiWYLH+dma0Jw6KHYqWiWfhQlgOVK8D6PvjubK5Uc4P0iIhIcNVg==",
+            "dev": true,
+            "dependencies": {
+                "get-intrinsic": "^1.2.2"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
         "node_modules/has-proto": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
@@ -2306,6 +2346,18 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/hasown": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.0.tgz",
+            "integrity": "sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==",
+            "dev": true,
+            "dependencies": {
+                "function-bind": "^1.1.2"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            }
+        },
         "node_modules/he": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
@@ -2611,9 +2663,9 @@
             }
         },
         "node_modules/jiti": {
-            "version": "1.18.2",
-            "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.18.2.tgz",
-            "integrity": "sha512-QAdOptna2NYiSSpv0O/BwoHBSmz4YhpzJHyi+fnMRTXFjp7B8i/YG5Z8IfusxB1ufjcD2Sre1F3R+nX3fvy7gg==",
+            "version": "1.21.0",
+            "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.0.tgz",
+            "integrity": "sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==",
             "dev": true,
             "bin": {
                 "jiti": "bin/jiti.js"
@@ -2647,9 +2699,9 @@
             }
         },
         "node_modules/laravel-vite-plugin": {
-            "version": "0.8.0",
-            "resolved": "https://registry.npmjs.org/laravel-vite-plugin/-/laravel-vite-plugin-0.8.0.tgz",
-            "integrity": "sha512-6VjLI+azBpeK6rWBiKcb/En5GnTdYpL0U4zS8gXYvb2/VSq4mlau5H3NWpSktUDBMM1b97LLgICx5zevi8IY0w==",
+            "version": "0.8.1",
+            "resolved": "https://registry.npmjs.org/laravel-vite-plugin/-/laravel-vite-plugin-0.8.1.tgz",
+            "integrity": "sha512-fxzUDjOA37kOsYq8dP+3oPIlw8/kJVXwu0hOXLun82R1LpV02shGeWGYKx2lbpKffL5I0sfPPjfqbYxuqBluAA==",
             "dev": true,
             "dependencies": {
                 "picocolors": "^1.0.0",
@@ -2744,9 +2796,9 @@
             "dev": true
         },
         "node_modules/magic-string": {
-            "version": "0.30.3",
-            "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.3.tgz",
-            "integrity": "sha512-B7xGbll2fG/VjP+SWg4sX3JynwIU0mjoTc6MPpKNuIvftk6u6vqhDnk1R80b8C2GBR6ywqy+1DcKBrevBg+bmw==",
+            "version": "0.30.5",
+            "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.5.tgz",
+            "integrity": "sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==",
             "dev": true,
             "dependencies": {
                 "@jridgewell/sourcemap-codec": "^1.4.15"
@@ -3151,9 +3203,9 @@
             }
         },
         "node_modules/object-inspect": {
-            "version": "1.12.3",
-            "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
-            "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==",
+            "version": "1.13.1",
+            "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
+            "integrity": "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==",
             "dev": true,
             "funding": {
                 "url": "https://github.com/sponsors/ljharb"
@@ -3234,6 +3286,15 @@
             "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
             "dev": true
         },
+        "node_modules/photoswipe": {
+            "version": "5.4.2",
+            "resolved": "https://registry.npmjs.org/photoswipe/-/photoswipe-5.4.2.tgz",
+            "integrity": "sha512-z5hr36nAIPOZbHJPbCJ/mQ3+ZlizttF9za5gKXKH/us1k4KNHaRbC63K1Px5sVVKUtGb/2+ixHpKqtwl0WAwvA==",
+            "dev": true,
+            "engines": {
+                "node": ">= 0.12.0"
+            }
+        },
         "node_modules/php-parser": {
             "version": "3.1.3",
             "resolved": "https://registry.npmjs.org/php-parser/-/php-parser-3.1.3.tgz",
@@ -3286,9 +3347,9 @@
             }
         },
         "node_modules/postcss": {
-            "version": "8.4.29",
-            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.29.tgz",
-            "integrity": "sha512-cbI+jaqIeu/VGqXEarWkRCCffhjgXc0qjBtXpqJhTBohMUjUQnbBr0xqX3vEKudc4iviTewcJo5ajcec5+wdJw==",
+            "version": "8.4.31",
+            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+            "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
             "dev": true,
             "funding": [
                 {
@@ -3740,6 +3801,21 @@
                 "ret": "~0.1.10"
             }
         },
+        "node_modules/set-function-length": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.1.1.tgz",
+            "integrity": "sha512-VoaqjbBJKiWtg4yRcKBQ7g7wnGnLV3M8oLvVWwOk2PdYY6PEFegR1vezXR0tw6fZGF9csVakIRjrJiy2veSBFQ==",
+            "dev": true,
+            "dependencies": {
+                "define-data-property": "^1.1.1",
+                "get-intrinsic": "^1.2.1",
+                "gopd": "^1.0.1",
+                "has-property-descriptors": "^1.0.0"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            }
+        },
         "node_modules/set-value": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz",
@@ -4364,9 +4440,9 @@
             }
         },
         "node_modules/tailwindcss": {
-            "version": "3.3.3",
-            "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.3.tgz",
-            "integrity": "sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==",
+            "version": "3.3.5",
+            "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.5.tgz",
+            "integrity": "sha512-5SEZU4J7pxZgSkv7FP1zY8i2TIAOooNZ1e/OGtxIEv6GltpoiXUqWvLy89+a10qYTB1N5Ifkuw9lqQkN9sscvA==",
             "dev": true,
             "dependencies": {
                 "@alloc/quick-lru": "^5.2.0",
@@ -4374,10 +4450,10 @@
                 "chokidar": "^3.5.3",
                 "didyoumean": "^1.2.2",
                 "dlv": "^1.1.3",
-                "fast-glob": "^3.2.12",
+                "fast-glob": "^3.3.0",
                 "glob-parent": "^6.0.2",
                 "is-glob": "^4.0.3",
-                "jiti": "^1.18.2",
+                "jiti": "^1.19.1",
                 "lilconfig": "^2.1.0",
                 "micromatch": "^4.0.5",
                 "normalize-path": "^3.0.0",
@@ -4686,9 +4762,9 @@
             }
         },
         "node_modules/vite": {
-            "version": "4.4.9",
-            "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.9.tgz",
-            "integrity": "sha512-2mbUn2LlUmNASWwSCNSJ/EG2HuSRTnVNaydp6vMCm5VIqJsjMfbIWtbH2kDuwUVW5mMUKKZvGPX/rqeqVvv1XA==",
+            "version": "4.5.0",
+            "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.0.tgz",
+            "integrity": "sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==",
             "dev": true,
             "dependencies": {
                 "esbuild": "^0.18.10",
@@ -4918,16 +4994,24 @@
             }
         },
         "node_modules/vue": {
-            "version": "3.3.4",
-            "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.4.tgz",
-            "integrity": "sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==",
+            "version": "3.3.7",
+            "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.7.tgz",
+            "integrity": "sha512-YEMDia1ZTv1TeBbnu6VybatmSteGOS3A3YgfINOfraCbf85wdKHzscD6HSS/vB4GAtI7sa1XPX7HcQaJ1l24zA==",
             "dev": true,
             "dependencies": {
-                "@vue/compiler-dom": "3.3.4",
-                "@vue/compiler-sfc": "3.3.4",
-                "@vue/runtime-dom": "3.3.4",
-                "@vue/server-renderer": "3.3.4",
-                "@vue/shared": "3.3.4"
+                "@vue/compiler-dom": "3.3.7",
+                "@vue/compiler-sfc": "3.3.7",
+                "@vue/runtime-dom": "3.3.7",
+                "@vue/server-renderer": "3.3.7",
+                "@vue/shared": "3.3.7"
+            },
+            "peerDependencies": {
+                "typescript": "*"
+            },
+            "peerDependenciesMeta": {
+                "typescript": {
+                    "optional": true
+                }
             }
         },
         "node_modules/vue-chartjs": {
@@ -4949,11 +5033,6 @@
                 "vue": "^3.2.0"
             }
         },
-        "node_modules/vue3-picture-swipe": {
-            "version": "3.0.6",
-            "resolved": "https://registry.npmjs.org/vue3-picture-swipe/-/vue3-picture-swipe-3.0.6.tgz",
-            "integrity": "sha512-tCoWJr5cXZMk8hlycPPdo9UCl5m3ZChDVdDhHdiJedtkTZL6H0wYV6mZvL8Lz6e80kpiIXxsoltJobcePnKB0A=="
-        },
         "node_modules/wrappy": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
@@ -4970,9 +5049,9 @@
             }
         },
         "node_modules/ziggy-js": {
-            "version": "1.6.2",
-            "resolved": "https://registry.npmjs.org/ziggy-js/-/ziggy-js-1.6.2.tgz",
-            "integrity": "sha512-abUqQ1hatBLZnxqfgytxB+Rd3uey+ivPxU5alKxB8GS1xbc0mtntxHX/+tZ9q9UjFGxAUHd4IGGkhg5TboxulQ==",
+            "version": "1.8.1",
+            "resolved": "https://registry.npmjs.org/ziggy-js/-/ziggy-js-1.8.1.tgz",
+            "integrity": "sha512-fnf30uG0yvUQBPL4T8YPgmkBHUdjYaOFgUb1K1gj0+rclnLTNr9/K/cxC3xkCZyYCZz8oTnXkdf3oJXRPSzavw==",
             "dev": true,
             "dependencies": {
                 "qs": "~6.9.7"
diff --git a/package.json b/package.json
index 22f753ae..8318b3e7 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,6 @@
 {
     "private": true,
+    "type": "module",
     "scripts": {
         "dev": "vite",
         "build": "vite build && vite build --ssr"
@@ -7,32 +8,30 @@
     "devDependencies": {
         "@headlessui/vue": "^1.7.16",
         "@heroicons/vue": "^1.0.6",
-        "@inertiajs/vue3": "^1.0.11",
+        "@inertiajs/vue3": "^1.0.14",
         "@tailwindcss/aspect-ratio": "^0.4.2",
         "@tailwindcss/forms": "^0.5.6",
         "@tailwindcss/typography": "^0.5.10",
-        "@vitejs/plugin-vue": "^4.3.4",
-        "@vue/server-renderer": "^3.3.4",
+        "@vitejs/plugin-vue": "^4.4.0",
+        "@vue/server-renderer": "^3.3.7",
         "@vueform/multiselect": "^2.6.2",
         "@vuepic/vue-datepicker": "^6.0.3",
         "@vueuse/core": "^10.4.1",
-        "autoprefixer": "^10.4.15",
+        "autoprefixer": "^10.4.16",
         "axios": "^1.5.0",
         "chart.js": "^4.4.0",
-        "laravel-vite-plugin": "^0.8.0",
+        "laravel-vite-plugin": "^0.8.1",
         "laravel-vue-i18n": "^2.7.1",
-        "postcss": "^8.4.29",
-        "tailwindcss": "^3.3.3",
+        "photoswipe": "^5.4.2",
+        "postcss": "^8.4.31",
+        "tailwindcss": "^3.3.5",
         "tippy.js": "^6.3.7",
-        "vite": "^4.4.9",
+        "vite": "^4.5.0",
         "vite-plugin-svg-icons": "^2.0.1",
         "vite-svg-loader": "^4.0.0",
         "vue": "^3.3.4",
         "vue-chartjs": "^5.2.0",
         "vue3-carousel": "^0.3.1",
-        "ziggy-js": "^1.6.2"
-    },
-    "dependencies": {
-        "vue3-picture-swipe": "^3.0.6"
+        "ziggy-js": "^1.8.1"
     }
 }
diff --git a/postcss.config.js b/postcss.config.js
index bfc1a9a8..c302ad66 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,4 +1,4 @@
-module.exports = {
+export default {
     plugins: {
         'tailwindcss/nesting': {},
         tailwindcss: {},
diff --git a/resources/css/app.css b/resources/css/app.css
index 6768bcea..f8001a0c 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -1,10 +1,3 @@
 @import '../../vendor/filament/filament/resources/css/app.css';
 @import './tiptap.css';
 @import "./typography.css";
-
-.my-gallery
-{
-    display: grid;
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-    gap:0.20%
-}
diff --git a/resources/js/Components/ClientOnly.vue b/resources/js/Components/ClientOnly.vue
new file mode 100644
index 00000000..9e0c5fed
--- /dev/null
+++ b/resources/js/Components/ClientOnly.vue
@@ -0,0 +1,21 @@
+<template>
+    <template v-if="isMounted">
+        <slot />
+    </template>
+
+    <template v-else>
+        <slot name="placeholder">
+            <div></div>
+        </slot>
+    </template>
+</template>
+
+<script setup>
+    import { ref, onMounted } from 'vue';
+
+    const isMounted = ref(false);
+
+    onMounted(() => {
+        isMounted.value = true;
+    });
+</script>
diff --git a/resources/js/Components/Footer.vue b/resources/js/Components/Footer.vue
index 8098e6ae..9d2f4f82 100644
--- a/resources/js/Components/Footer.vue
+++ b/resources/js/Components/Footer.vue
@@ -151,6 +151,7 @@
 <script setup>
     /** Import from inertia. */
     import { useForm } from '@inertiajs/vue3';
+    // import route from '@/Helpers/useRoute';
 
     /** Import componets. */
     import Input from '@/Components/form/Input.vue';
diff --git a/resources/js/Components/Gallery.vue b/resources/js/Components/Gallery.vue
new file mode 100644
index 00000000..a50eb01e
--- /dev/null
+++ b/resources/js/Components/Gallery.vue
@@ -0,0 +1,58 @@
+<template>
+    <div :id="galleryID" class="grid gap-2 mt-10 sm:grid-cols-2 lg:grid-cols-4 my-gallery">
+        <a
+            v-for="(image, key) in images"
+            :key="key"
+            :href="image.src"
+            :data-pswp-width="image.w"
+            :data-pswp-height="image.h"
+            target="_blank"
+            rel="noreferrer"
+        >
+            <img :src="image.thumbnail" alt="" />
+        </a>
+    </div>
+</template>
+
+<script setup>
+    import { ref, onMounted, onUnmounted } from 'vue';
+    import PhotoSwipeLightbox from 'photoswipe/lightbox';
+    import 'photoswipe/style.css';
+
+    const props = defineProps({
+        galleryID: {
+            type: String,
+            required: false,
+            default: 'test',
+        },
+        images: {
+            type: Array,
+            required: true,
+        },
+    });
+
+    const lightbox = ref(null);
+
+    onMounted(() => {
+        if (lightbox.value !== null) {
+            return;
+        }
+
+        lightbox.value = new PhotoSwipeLightbox({
+            gallery: '#' + props.galleryID,
+            children: 'a',
+            pswpModule: () => import('photoswipe'),
+        });
+
+        lightbox.value.init();
+    });
+
+    onUnmounted(() => {
+        if (!lightbox.value) {
+            return;
+        }
+
+        lightbox.value.destroy();
+        lightbox.value = null;
+    });
+</script>
diff --git a/resources/js/Components/Head.vue b/resources/js/Components/Head.vue
index 4e2cb125..a364b238 100644
--- a/resources/js/Components/Head.vue
+++ b/resources/js/Components/Head.vue
@@ -1,6 +1,10 @@
 <template>
-    <Head :title="title">
+    <Head>
+        <title v-if="title">{{ title }} - {{ $page.props.appName }}</title>
+        <title v-else>{{ $page.props.appName }}</title>
+
         <meta property="og:title" :content="title" />
+        <meta property="og:site_name" :content="$page.props.appName" />
 
         <template v-if="description">
             <meta property="og:description" :content="description" />
@@ -9,22 +13,20 @@
 
         <meta v-if="image" property="og:image" :content="image" />
 
+        <meta name="twitter:card" content="summary_large_image" />
+
         <slot />
     </Head>
 </template>
 
 
 <script setup>
-    /** Import from inertia. */
     import { Head } from '@inertiajs/vue3';
 
-    /** Import components. */
-    import PageLayout from '@/Layouts/PageLayout.vue';
-
     const props = defineProps({
         title: {
             type: String,
-            required: true,
+            default: null,
         },
         description: {
             type: String,
diff --git a/resources/js/Components/Navbar.vue b/resources/js/Components/Navbar.vue
index 5489896d..5a700c3c 100644
--- a/resources/js/Components/Navbar.vue
+++ b/resources/js/Components/Navbar.vue
@@ -218,9 +218,10 @@
 <script setup>
     import { computed } from 'vue';
     import { usePage } from '@inertiajs/vue3';
+    import route from '@/Helpers/useRoute';
 
     import { Disclosure, DisclosureButton, DisclosurePanel, Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue';
-    import { MenuIcon, BellIcon, XIcon } from '@heroicons/vue/outline';
+    import { MenuIcon, XIcon } from '@heroicons/vue/outline';
     import { UserCircleIcon } from '@heroicons/vue/solid';
 
     import NavLink from '@/Components/links/NavLink.vue';
diff --git a/resources/js/Components/Notification.vue b/resources/js/Components/Notification.vue
index cdc04f47..72ea3518 100644
--- a/resources/js/Components/Notification.vue
+++ b/resources/js/Components/Notification.vue
@@ -1,50 +1,53 @@
 <template>
-    <Teleport to="#notification-teleport-target">
-        <transition
-            enter-active-class="transition duration-300 ease-out transform"
-            enter-from-class="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
-            enter-to-class="translate-y-0 opacity-100 sm:translate-x-0"
-            leave-active-class="transition duration-100 ease-in"
-            leave-from-class="opacity-100"
-            leave-to-class="opacity-0"
-        >
-            <div
-                v-if="isVisible"
-                class="w-full max-w-sm p-4 overflow-hidden bg-white rounded-lg shadow-lg pointer-events-auto ring-1 ring-black ring-opacity-5"
+    <ClientOnly>
+        <Teleport to="#notification-teleport-target">
+            <transition
+                enter-active-class="transition duration-300 ease-out transform"
+                enter-from-class="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
+                enter-to-class="translate-y-0 opacity-100 sm:translate-x-0"
+                leave-active-class="transition duration-100 ease-in"
+                leave-from-class="opacity-100"
+                leave-to-class="opacity-0"
             >
-                <div class="flex items-center gap-3">
-                    <Component
-                        :is="isSuccess ? CheckCircleIcon : ExclamationCircleIcon"
-                        class="w-6 h-6 shrink-0"
-                        :class="{
-                            'text-green-500': isSuccess,
-                            'text-red-500': !isSuccess,
-                        }"
-                        aria-hidden="true"
-                    />
+                <div
+                    v-if="isVisible"
+                    class="w-full max-w-sm p-4 overflow-hidden bg-white rounded-lg shadow-lg pointer-events-auto ring-1 ring-black ring-opacity-5"
+                >
+                    <div class="flex items-center gap-3">
+                        <Component
+                            :is="isSuccess ? CheckCircleIcon : ExclamationCircleIcon"
+                            class="w-6 h-6 shrink-0"
+                            :class="{
+                                'text-green-500': isSuccess,
+                                'text-red-500': !isSuccess,
+                            }"
+                            aria-hidden="true"
+                        />
 
-                    <div class="flex-1 w-0">
-                        <p class="text-sm font-medium text-gray-900" v-text="message" />
-                    </div>
+                        <div class="flex-1 w-0">
+                            <p class="text-sm font-medium text-gray-900" v-text="message" />
+                        </div>
 
-                    <button
-                        type="button"
-                        @click="hide"
-                        class="inline-flex text-gray-400 bg-white rounded-md shrink-0 hover:text-gray-500"
-                    >
-                        <span class="sr-only">Close</span>
-                        <XIcon class="w-5 h-5" aria-hidden="true" />
-                    </button>
+                        <button
+                            type="button"
+                            @click="hide"
+                            class="inline-flex text-gray-400 bg-white rounded-md shrink-0 hover:text-gray-500"
+                        >
+                            <span class="sr-only">Close</span>
+                            <XIcon class="w-5 h-5" aria-hidden="true" />
+                        </button>
+                    </div>
                 </div>
-            </div>
-        </transition>
-    </Teleport>
+            </transition>
+        </Teleport>
+    </ClientOnly>
 </template>
 
 <script setup>
-    import { ref, computed, watch, nextTick } from 'vue';
+    import { ref, computed, watch } from 'vue';
     import { usePage } from '@inertiajs/vue3';
     import { ExclamationCircleIcon, CheckCircleIcon, XIcon } from '@heroicons/vue/solid';
+    import ClientOnly from '@/Components/ClientOnly.vue';
 
     const isSuccess = computed(() => new Boolean(usePage().props.flash?.success));
     const message = computed(() => usePage().props.flash?.message || null);
diff --git a/resources/js/Components/OrganizationStatus.vue b/resources/js/Components/OrganizationStatus.vue
index c28f6c92..c0f274d9 100644
--- a/resources/js/Components/OrganizationStatus.vue
+++ b/resources/js/Components/OrganizationStatus.vue
@@ -13,11 +13,7 @@
                 class="w-full max-w-sm p-4 overflow-hidden bg-white rounded-lg shadow-lg pointer-events-auto ring-1 ring-black ring-opacity-5"
             >
                 <div class="flex items-center gap-3">
-                    <Component
-                        :is="ExclamationCircleIcon"
-                        class="w-6 h-6 shrink-0 text-red-500"
-                        aria-hidden="true"
-                    />
+                    <Component :is="ExclamationCircleIcon" class="w-6 h-6 text-red-500 shrink-0" aria-hidden="true" />
 
                     <div class="flex-1 w-0">
                         <p class="text-sm font-medium text-gray-900" v-text="message" />
@@ -38,24 +34,24 @@
 </template>
 
 <script setup>
-import {ref, computed, onMounted} from 'vue';
-import { usePage } from '@inertiajs/vue3';
-import { ExclamationCircleIcon, CheckCircleIcon, XIcon } from '@heroicons/vue/solid';
-import {trans} from "laravel-vue-i18n";
+    import { ref, computed, onMounted } from 'vue';
+    import { usePage } from '@inertiajs/vue3';
+    import { ExclamationCircleIcon, CheckCircleIcon, XIcon } from '@heroicons/vue/solid';
+    import { trans } from 'laravel-vue-i18n';
 
-const status = computed(() => usePage().props.organization_status || null);
+    const status = computed(() => usePage().props.auth.organization.status || null);
 
-const isVisible = ref(false);
-let message = '';
+    const isVisible = ref(false);
+    let message = '';
 
-const show = () => (isVisible.value = true);
-const hide = () => (isVisible.value = false);
-onMounted(()=>{
-    if (!status || status.value === 'active') {
-        hide();
-    } else {
-        message = trans('organization_status_'+status.value);
-        show();
-    }
-});
+    const show = () => (isVisible.value = true);
+    const hide = () => (isVisible.value = false);
+    onMounted(() => {
+        if (!status || status.value === 'active') {
+            hide();
+        } else {
+            message = trans('organization_status_' + status.value);
+            show();
+        }
+    });
 </script>
diff --git a/resources/js/Components/Title.vue b/resources/js/Components/Title.vue
index d71a46f6..93ea532d 100644
--- a/resources/js/Components/Title.vue
+++ b/resources/js/Components/Title.vue
@@ -12,6 +12,7 @@
 
 <script setup>
     import { ViewListIcon } from '@heroicons/vue/solid';
+    import Head from '@/Components/Head.vue';
 
     const props = defineProps({
         title: {
diff --git a/resources/js/Components/cards/ProjectCard.vue b/resources/js/Components/cards/ProjectCard.vue
index b17020d1..a1a18a8e 100644
--- a/resources/js/Components/cards/ProjectCard.vue
+++ b/resources/js/Components/cards/ProjectCard.vue
@@ -1,8 +1,7 @@
 <template>
-
     <article class="flex flex-col overflow-hidden bg-white divide-y divide-gray-200 rounded-lg drop-shadow-lg">
         <Link
-            :href="project.type==='project' ? route('project', project.slug):route('bcr.show', project.slug)"
+            :href="project.type === 'project' ? route('project', project.slug) : route('bcr.show', project.slug)"
             class="relative w-full overflow-hidden group aspect-w-5 aspect-h-3"
         >
             <img
@@ -14,7 +13,7 @@
                 alt=""
             />
 
-            <div class="flex flex-col items-start justify-end gap-2 p-3" v-show="project.type==='project'">
+            <div class="flex flex-col items-start justify-end gap-2 p-3" v-show="project.type === 'project'">
                 <ProjectTag v-if="project.is_pending" :label="$t('project_waiting_for_approval')" />
                 <ProjectTag v-else-if="project.is_draft" :label="$t('project_draft')" />
 
@@ -47,7 +46,7 @@
 
         <div class="p-6 text-left">
             <Link
-                v-if="project.type==='project'"
+                v-if="project.type === 'project'"
                 :href="route('organization', project.organization.id)"
                 class="inline-block mb-4 font-medium text-black/75 hover:underline"
             >
@@ -55,7 +54,11 @@
             </Link>
 
             <h1 class="text-xl font-extrabold text-gray-700 sm:text-2xl md:text-xl 2xl:text-2xl line-clamp-2">
-                <Link :href="project.type==='project' ? route('project', project.slug) : route('bcr.show', project.slug)">
+                <Link
+                    :href="
+                        project.type === 'project' ? route('project', project.slug) : route('bcr.show', project.slug)
+                    "
+                >
                     {{ project.name }}
                 </Link>
             </h1>
@@ -158,9 +161,6 @@
 <script setup>
     import { computed, onMounted } from 'vue';
 
-    /** Import from inertia. */
-    import { Link, useForm } from '@inertiajs/vue3';
-
     /** Import components. */
     import Icon from '@/Components/Icon.vue';
     import SecondaryButton from '@/Components/buttons/SecondaryButton.vue';
diff --git a/resources/js/Components/charts/BarChart.vue b/resources/js/Components/charts/BarChart.vue
index 20ab83e5..d4ef4837 100644
--- a/resources/js/Components/charts/BarChart.vue
+++ b/resources/js/Components/charts/BarChart.vue
@@ -3,96 +3,96 @@ Bar chart
 
 <template>
     <div>
-      <canvas ref="chartCanvas" style="height: 400px;"></canvas>
+        <canvas ref="chartCanvas" style="height: 400px"></canvas>
     </div>
-  </template>
+</template>
 
-  <script setup>
-  import { ref, onMounted, onUnmounted, defineProps } from 'vue';
-  import Chart from 'chart.js/auto';
+<script setup>
+    import { ref, onMounted, defineProps } from 'vue';
+    import Chart from 'chart.js/auto';
 
-  const chartCanvas = ref(null);
+    const chartCanvas = ref(null);
 
-  const props = defineProps({
-    data: Array,
-    xAxe: Array,
-    yAxeId: String
-  });
+    const props = defineProps({
+        data: Array,
+        xAxe: Array,
+        yAxeId: String,
+    });
 
-  const generateRandomColor = () => {
-    return '#' + Math.floor(Math.random() * 16777215).toString(16);
-  };
+    const generateRandomColor = () => {
+        return '#' + Math.floor(Math.random() * 16777215).toString(16);
+    };
 
-  const reactiveChartData = (labels, data) => {
-    const colors = labels.map(() => generateRandomColor());
+    const reactiveChartData = (labels, data) => {
+        const colors = labels.map(() => generateRandomColor());
 
-    return {
-      labels: labels,
-      datasets: [
-        {
-          data: data,
-          backgroundColor: colors,
-        },
-      ],
+        return {
+            labels: labels,
+            datasets: [
+                {
+                    data: data,
+                    backgroundColor: colors,
+                },
+            ],
+        };
     };
-  };
 
-  const chartOptions = {
-    responsive: true,
-    maintainAspectRatio: false,
-    layout: {
-      padding: {
-        top: 10,
-        bottom: 10,
-      },
-    },
-    scales: {
-      x: {
-        grid: {
-          display: true,
+    const chartOptions = {
+        responsive: true,
+        maintainAspectRatio: false,
+        layout: {
+            padding: {
+                top: 10,
+                bottom: 10,
+            },
+        },
+        scales: {
+            x: {
+                grid: {
+                    display: true,
+                },
+            },
+            y: {
+                grid: {
+                    display: false,
+                },
+            },
         },
-      },
-      y: {
-        grid: {
-          display: false
+        plugins: {
+            tooltip: {
+                callbacks: {
+                    title: (tooltipItems) => {
+                        const month = tooltipItems[0].label;
+                        return month;
+                    },
+                    label: (context) => {
+                        const index = context.dataIndex;
+                        const yAxe = context.dataset.data[index];
+                        const { sales, expenses } = props.data[index];
+                        return `Amount: ${yAxe}, Sales: ${sales}, Expenses: ${expenses}`;
+                    },
+                },
+            },
         },
-      },
-    },
-    plugins: {
-      tooltip: {
-        callbacks: {
-          title: (tooltipItems) => {
-            const month = tooltipItems[0].label;
-            return month;
-          },
-          label: (context) => {
-            const index = context.dataIndex;
-            const yAxe = context.dataset.data[index];
-            const { sales, expenses } = props.data[index];
-            return `Amount: ${yAxe}, Sales: ${sales}, Expenses: ${expenses}`;
-          },
+        interaction: {
+            intersect: false,
         },
-      },
-    },
-    interaction: {
-      intersect: false,
-    },
-  };
+    };
 
-  const renderChart = () => {
-    const yAxe = props.data.map((entry) => entry[props.yAxeId]);
+    const renderChart = () => {
+        const yAxe = props.data.map((entry) => entry[props.yAxeId]);
 
-    const chartData = reactiveChartData(props.xAxe, yAxe);
+        const chartData = reactiveChartData(props.xAxe, yAxe);
 
-    const ctx = chartCanvas.value.getContext('2d');
-    new Chart(ctx, {
-      type: 'bar',
-      data: chartData,
-      options: chartOptions,
-    });
-  };
+        const ctx = chartCanvas.value.getContext('2d');
+        new Chart(ctx, {
+            type: 'bar',
+            data: chartData,
+            options: chartOptions,
+        });
+    };
 
-  onMounted(() => {
-    renderChart();
-  });
-  </script>
+    onMounted(() => {
+        renderChart();
+    });
+</script>
diff --git a/resources/js/Components/charts/LineChart.vue b/resources/js/Components/charts/LineChart.vue
index d8c15d79..c6d63079 100644
--- a/resources/js/Components/charts/LineChart.vue
+++ b/resources/js/Components/charts/LineChart.vue
@@ -1,102 +1,102 @@
 <template>
     <div>
-        <canvas ref="chartCanvas" style="height: 400px;"></canvas>
+        <canvas ref="chartCanvas" style="height: 400px"></canvas>
     </div>
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted } from 'vue';
-import Chart from 'chart.js/auto';
+    import { ref, onMounted } from 'vue';
+    import Chart from 'chart.js/auto';
 
-const chartCanvas = ref(null);
+    const chartCanvas = ref(null);
 
-const props = defineProps({
-    data:Array,
-    xAxe:Array,
-    yAxeId: String
-})
+    const props = defineProps({
+        data: Array,
+        xAxe: Array,
+        yAxeId: String,
+    });
 
-const reactiveChartData = (labels, data) => {
-    return {
-        labels: labels,
-        datasets: [
-            {
-                label: '',
-                data: data,
-                borderWidth: 0,
-                tension: 0.4,
-                fill: {
-                    target: 'origin',
-                    above: '#C1E8E8',
-                    below: 'green',
+    const reactiveChartData = (labels, data) => {
+        return {
+            labels: labels,
+            datasets: [
+                {
+                    label: '',
+                    data: data,
+                    borderWidth: 0,
+                    tension: 0.4,
+                    fill: {
+                        target: 'origin',
+                        above: '#C1E8E8',
+                        below: 'green',
+                    },
+                    pointRadius: 0,
+                    hoverRadius: 5,
+                    hoverBackgroundColor: 'white',
+                    hoverBorderColor: '#53BFBF',
+                    hoverBorderWidth: 2,
                 },
-                pointRadius: 0,
-                hoverRadius: 5,
-                hoverBackgroundColor: 'white',
-                hoverBorderColor: '#53BFBF',
-                hoverBorderWidth: 2,
-            },
-        ],
+            ],
+        };
     };
-};
 
-const chartOptions = {
-    responsive: true,
-    maintainAspectRatio: false,
-    layout: {
-        padding: {
-        top: 10,
-        bottom: 10,
-        },
-    },
-    scales: {
-        x: {
-            grid: {
-                display: true,
+    const chartOptions = {
+        responsive: true,
+        maintainAspectRatio: false,
+        layout: {
+            padding: {
+                top: 10,
+                bottom: 10,
             },
         },
-        y: {
-            grid: {
-                display: false
+        scales: {
+            x: {
+                grid: {
+                    display: true,
+                },
             },
-        },
-    },
-    plugins: {
-        tooltip: {
-            intersect: false,
-            callbacks: {
-                title: (tooltipItems) => {
-                    const month = tooltipItems[0].label;
-                    return month;
+            y: {
+                grid: {
+                    display: false,
                 },
-                label: (context) => {
-                    const index = context.dataIndex;
-                    const yAxe = context.parsed.y;
-                    const { sales, expenses } = props.data[index];
-                    return `Amount: ${yAxe}, Sales: ${sales}, Expenses: ${expenses}`;
+            },
+        },
+        plugins: {
+            tooltip: {
+                intersect: false,
+                callbacks: {
+                    title: (tooltipItems) => {
+                        const month = tooltipItems[0].label;
+                        return month;
+                    },
+                    label: (context) => {
+                        const index = context.dataIndex;
+                        const yAxe = context.parsed.y;
+                        const { sales, expenses } = props.data[index];
+                        return `Amount: ${yAxe}, Sales: ${sales}, Expenses: ${expenses}`;
+                    },
                 },
             },
         },
-    },
-    interaction: {
-        intersect: false,
-    },
-};
+        interaction: {
+            intersect: false,
+        },
+    };
 
-const renderChart = () => {
-    const yAxe = props.data.map((entry) => entry[props.yAxeId]);
+    const renderChart = () => {
+        const yAxe = props.data.map((entry) => entry[props.yAxeId]);
 
-    const chartData = reactiveChartData(props.xAxe, yAxe);
+        const chartData = reactiveChartData(props.xAxe, yAxe);
 
-    const ctx = chartCanvas.value.getContext('2d');
-    new Chart(ctx, {
-        type: 'line',
-        data: chartData,
-        options: chartOptions,
-    });
-}
+        const ctx = chartCanvas.value.getContext('2d');
+        new Chart(ctx, {
+            type: 'line',
+            data: chartData,
+            options: chartOptions,
+        });
+    };
 
-onMounted(() => {
-    renderChart()
-});
-  </script>
+    onMounted(() => {
+        renderChart();
+    });
+</script>
diff --git a/resources/js/Components/dropdowns/FlyoutMenu.vue b/resources/js/Components/dropdowns/FlyoutMenu.vue
index 4f8043e3..3cbfeaf8 100644
--- a/resources/js/Components/dropdowns/FlyoutMenu.vue
+++ b/resources/js/Components/dropdowns/FlyoutMenu.vue
@@ -45,6 +45,7 @@
     /** Import plugins. */
     import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue';
     import { ChevronDownIcon } from '@heroicons/vue/solid';
+    import route from '@/Helpers/useRoute';
 
     /** Import components. */
     import NavLink from '@/Components/links/NavLink.vue';
diff --git a/resources/js/Components/filters/Sort.vue b/resources/js/Components/filters/Sort.vue
index 1e25dfd1..4bf5cba9 100644
--- a/resources/js/Components/filters/Sort.vue
+++ b/resources/js/Components/filters/Sort.vue
@@ -48,7 +48,7 @@
     import { computed } from 'vue';
     import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue';
     import { MenuAlt1Icon, SortAscendingIcon, SortDescendingIcon } from '@heroicons/vue/solid';
-    import route from 'ziggy-js';
+    import route from '@/Helpers/useRoute';
     import useSort from '@/Helpers/useSort.js';
 
     const props = defineProps({
diff --git a/resources/js/Components/gallery/Gallery.vue b/resources/js/Components/gallery/Gallery.vue
deleted file mode 100644
index 600aa43a..00000000
--- a/resources/js/Components/gallery/Gallery.vue
+++ /dev/null
@@ -1,157 +0,0 @@
-<template>
-    <div id="grid-list" class="grid grid-cols-4 gap-4 py-10">
-        <div
-            v-for="(image, index) in images"
-            :key="index"
-            :class="[getGridClass(index), 'relative']"
-
-        >
-            <div v-if="0===index" class="flex gap-4 h-1/4">
-                <div class="flex items-center justify-center rounded-lg bg-primary-500 w-9 h-9">
-                    <SvgLoader class="fill-primary-500 shrink-0" name="brand_icon" />
-                </div>
-                <h3 class="text-2xl font-bold text-gray-900">{{ $t('gallery') }}</h3>
-            </div>
-
-            <video
-                v-if="'video' === image.type"
-                @click="openGallery=true; currentSlide=index"
-                :src="image.src"
-                :class="[
-                    (3 < index) && (index === getLastEl(index)) ? 'pb-14' :
-                    index === 0 ? 'h-3/4' : 'h-full',
-                    'object-cover w-full rounded-lg'
-                ]"
-                controls
-            ></video>
-
-            <img
-                v-if="'image' === image.type"
-                @click="openGallery=true; currentSlide=index"
-                :src="image.src"
-                :class="[
-                    (3 < index) && (index === getLastEl(index)) ? 'pb-14' :
-                    index === 0 ? 'h-3/4' : 'h-full',
-                    'object-cover w-full rounded-lg'
-                ]"
-            >
-
-            <div
-                @click="load = 4"
-                :class="[
-                    ((3 < index) && (index === getLastEl(index))) ? '' : 'hidden',
-                    'w-full flex items-center justify-end absolute bottom-0 right-0',
-                ]"
-            >
-                Restrange
-            </div>
-
-            <div
-                @click="loadMore"
-                :class="[
-                    index !== getLastEl(index) ? 'hidden' : 'h-4/6',
-                    'absolute top-0 left-0 w-full flex rounded-t-lg items-center justify-center text-white font-bold text-lg cursor-pointer'
-                ]"
-                style="background:rgba(0,0,0,.6)"
-            >
-                Vezi mai mult
-            </div>
-        </div>
-    </div>
-
-    <div v-if="openGallery" class="fixed top-0 left-0 w-full h-full z-101 bg-primary-500">
-        <carousel
-            class="mx-auto max-w-7xl"
-            :items-to-show="1"
-            :modelValue="currenSlide"
-            ref="controls"
-        >
-            <slide
-                v-for="(media, index) in gallery"
-                :key="index"
-            >
-
-                <video
-                    v-if="'video' === media.type"
-                    :src="media.src"
-                    class="w-full h-3/4"
-                    controls
-                ></video>
-
-                <img
-                    v-if="'image' === media.type"
-                    :src="media.src"
-                    class="object-cover w-full h-3/4"
-                >
-            </slide>
-
-            <template #addons>
-                <Navigation />
-            </template>
-        </carousel>
-
-        <div class="absolute w-10 h-10 text-white cursor-pointer top-10 right-10" @click="openGallery=false">
-            <SvgLoader name="big_close" class="w-full h-full fill-white"/>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref, computed } from 'vue';
-
-import SvgLoader from '@/Components/SvgLoader.vue';
-
-/** Import plugins */
-import 'vue3-carousel/dist/carousel.css';
-import { Carousel, Slide, Navigation } from 'vue3-carousel';
-
-const props = defineProps({
-    gallery: Array
-});
-
-
-
-const load = ref(4);
-const last = ref(3);
-const openGallery = ref(false);
-const currenSlide = ref(0);
-const controls = ref(null);
-
-const images = computed(() => {
-    return props.gallery.slice(0, load.value);
-});
-
-const loadMore = () => {
-    if (4 <= props.gallery.length - images.value.length) {
-        load.value += 4;
-    } else {
-        load.value += props.gallery.length - images.value.length
-    }
-}
-
-const getGridClass = (index) => {
-    if (0 === index % 8) {
-        return 'col-span-2 row-span-2';
-    } else if (1 === index % 8) {
-        return 'col-span-1 row-span-2';
-    } else if (2 === index % 8 || 3 === index % 8) {
-        return 'col-span-1 row-span-1';
-    } else if (4 === index % 8) {
-        return 'col-span-1 row-span-2';
-    } else if (5 === index % 8 || 7 === index % 8) {
-        return 'col-span-1 row-span-1';
-    } else if (6 === index % 8) {
-        return 'col-span-2 row-span-2';
-    } else {
-        return 'col-span-1 row-span-1';
-    }
-};
-
-const getLastEl = (index) => {
-    if ((index === images.value.length - 2) && (6 === index % 8)) {
-        return last.value = index
-    } else if ((index === images.value.length - 1 ) && (3 === index % 8)) {
-        return last.value = index
-    }
-}
-</script>
diff --git a/resources/js/Components/modals/ConfirmationModal.vue b/resources/js/Components/modals/ConfirmationModal.vue
index 21920d6d..281a12e6 100644
--- a/resources/js/Components/modals/ConfirmationModal.vue
+++ b/resources/js/Components/modals/ConfirmationModal.vue
@@ -89,7 +89,6 @@
 <script setup>
     import { computed, ref } from 'vue';
     import { useForm } from '@inertiajs/vue3';
-    import { wTrans, trans } from 'laravel-vue-i18n';
     import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue';
     import { ExclamationIcon } from '@heroicons/vue/outline';
 
diff --git a/resources/js/Components/modals/DonateModal.vue b/resources/js/Components/modals/DonateModal.vue
index 6d0338c7..bc34b414 100644
--- a/resources/js/Components/modals/DonateModal.vue
+++ b/resources/js/Components/modals/DonateModal.vue
@@ -176,6 +176,7 @@
 <script setup>
     /** Import from vue */
     import { ref } from 'vue';
+    import route from '@/Helpers/useRoute';
 
     /** Import from inertia. */
     import { Link, useForm, usePage } from '@inertiajs/vue3';
@@ -210,24 +211,23 @@
     /** Initialize inertia from Object. */
     const authForm = useForm({
         amount: '',
-
     });
 
     /** Donate action */
     const donate = () => {
         /** Trigger donate post method. */
         if (usePage().props.auth.user) {
-          guestForm.name = usePage().props.auth.user.name;
-          guestForm.email = usePage().props.auth.user.email;
-          guestForm.terms = true;
-          guestForm.amount = authForm.amount;
+            guestForm.name = usePage().props.auth.user.name;
+            guestForm.email = usePage().props.auth.user.email;
+            guestForm.terms = true;
+            guestForm.amount = authForm.amount;
         }
-      guestForm.post(route('project.donation', props.data.slug), {
-        onSuccess: () => (open.value = false),
-        onError: (errors) => {
-          console.log('error', errors);
-        },
-        onFinish: () => guestForm.reset(),
-      });
+        guestForm.post(route('project.donation', props.data.slug), {
+            onSuccess: () => (open.value = false),
+            onError: (errors) => {
+                console.log('error', errors);
+            },
+            onFinish: () => guestForm.reset(),
+        });
     };
 </script>
diff --git a/resources/js/Components/modals/Modal.vue b/resources/js/Components/modals/Modal.vue
index 39d84d6b..943f546c 100644
--- a/resources/js/Components/modals/Modal.vue
+++ b/resources/js/Components/modals/Modal.vue
@@ -69,7 +69,7 @@
 </template>
 
 <script setup>
-    import { ref, nextTick } from 'vue';
+    import { ref } from 'vue';
     import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue';
     import { XIcon } from '@heroicons/vue/outline';
 
diff --git a/resources/js/Components/tables/TableHeader.vue b/resources/js/Components/tables/TableHeader.vue
index 42f4afec..83fa7e51 100644
--- a/resources/js/Components/tables/TableHeader.vue
+++ b/resources/js/Components/tables/TableHeader.vue
@@ -38,7 +38,7 @@
 <script setup>
     import { computed } from 'vue';
     import { usePage } from '@inertiajs/vue3';
-    import route from 'ziggy-js';
+    import route from '@/Helpers/useRoute';
     import { SortAscendingIcon, SortDescendingIcon } from '@heroicons/vue/solid';
 
     const props = defineProps({
diff --git a/resources/js/Helpers/useRoute.js b/resources/js/Helpers/useRoute.js
new file mode 100644
index 00000000..2c35e7ad
--- /dev/null
+++ b/resources/js/Helpers/useRoute.js
@@ -0,0 +1,22 @@
+import { ref } from 'vue'
+import ZiggyRoute from 'ziggy-js';
+
+const Ziggy = ref(null);
+
+export default function route(name, params, absolute, config = Ziggy.value) {
+    return ZiggyRoute(name, params, absolute, config);
+}
+
+export const ZiggyVue = {
+    install(app, options) {
+        Ziggy.value = options;
+
+        app.mixin({
+            methods: {
+                route,
+            },
+        });
+
+        app.provide('route', route);
+    },
+}
diff --git a/resources/js/Helpers/useSort.js b/resources/js/Helpers/useSort.js
index 18887661..14955c22 100644
--- a/resources/js/Helpers/useSort.js
+++ b/resources/js/Helpers/useSort.js
@@ -1,5 +1,5 @@
 import { computed } from 'vue';
-import route from 'ziggy-js';
+import route from '@/Helpers/useRoute';
 
 export default function (sort) {
     const isSortingBy = (column, direction = null) => {
diff --git a/resources/js/Layouts/DashboardLayout.vue b/resources/js/Layouts/DashboardLayout.vue
index 12a73c70..85dd0f5b 100644
--- a/resources/js/Layouts/DashboardLayout.vue
+++ b/resources/js/Layouts/DashboardLayout.vue
@@ -69,6 +69,7 @@
     import Navbar from '@/Components/Navbar.vue';
     import Footer from '@/Components/Footer.vue';
     import Notification from '@/Components/Notification.vue';
+    import route from '@/Helpers/useRoute';
 
     import {
         AnnotationIcon,
@@ -83,8 +84,8 @@
         UserGroupIcon,
         UserRemoveIcon,
     } from '@heroicons/vue/outline';
-    import OrganizationStatus from "@/Components/OrganizationStatus.vue";
-    import {trans} from "laravel-vue-i18n";
+    import OrganizationStatus from '@/Components/OrganizationStatus.vue';
+    import { trans } from 'laravel-vue-i18n';
 
     const props = defineProps({
         gridClass: {
diff --git a/resources/js/Layouts/PageLayout.vue b/resources/js/Layouts/PageLayout.vue
index 9b0ec863..2ed519fc 100644
--- a/resources/js/Layouts/PageLayout.vue
+++ b/resources/js/Layouts/PageLayout.vue
@@ -14,7 +14,7 @@
 
                 <h1 class="text-2xl font-bold leading-none text-gray-900 md:text-3xl" v-text="title" />
 
-                <Head :title="title" />
+                <Head v-if="title" :title="title" />
             </header>
 
             <slot />
@@ -25,6 +25,7 @@
 </template>
 
 <script setup>
+    import Head from '@/Components/Head.vue';
     import Navbar from '@/Components/Navbar.vue';
     import Footer from '@/Components/Footer.vue';
     import Notification from '@/Components/Notification.vue';
diff --git a/resources/js/Pages/AdminOng/Donations/Index.vue b/resources/js/Pages/AdminOng/Donations/Index.vue
index 6579cea1..e67d8353 100644
--- a/resources/js/Pages/AdminOng/Donations/Index.vue
+++ b/resources/js/Pages/AdminOng/Donations/Index.vue
@@ -3,7 +3,6 @@
         <Title :title="$t('donations')" :icon="CurrencyEuroIcon" />
 
         <!-- Filters -->
-
         <div class="grid grid-cols-12 gap-6">
             <div class="grid grid-cols-12 col-span-12 gap-6">
                 <SearchFilter
@@ -81,6 +80,7 @@
 
 <script setup>
     import { ref } from 'vue';
+    import route from '@/Helpers/useRoute';
     import { CurrencyEuroIcon } from '@heroicons/vue/outline';
     import DashboardLayout from '@/Layouts/DashboardLayout.vue';
     import Title from '@/Components/Title.vue';
diff --git a/resources/js/Pages/AdminOng/Organizations/Edit.vue b/resources/js/Pages/AdminOng/Organizations/Edit.vue
index dcbded08..7ce15c19 100644
--- a/resources/js/Pages/AdminOng/Organizations/Edit.vue
+++ b/resources/js/Pages/AdminOng/Organizations/Edit.vue
@@ -1,6 +1,6 @@
 <template>
     <DashboardLayout gridClass="gap-10">
-        <Title :title="$t('ong_description')" />
+        <Head :title="$t('administrate_link')" />
 
         <FieldSection>
             <!-- Edit organization name -->
@@ -417,10 +417,9 @@
 
 <script setup>
     import { ref, computed } from 'vue';
-    /** Import from inertia. */
     import { router, useForm } from '@inertiajs/vue3';
-
-    /** Import components. */
+    import route from '@/Helpers/useRoute';
+    import Head from '@/Components/Head.vue';
     import DashboardLayout from '@/Layouts/DashboardLayout.vue';
     import Title from '@/Components/Title.vue';
     import Alert from '@/Components/Alert.vue';
diff --git a/resources/js/Pages/AdminOng/Projects/AddProject.vue b/resources/js/Pages/AdminOng/Projects/AddProject.vue
index e0a30bea..49841a44 100644
--- a/resources/js/Pages/AdminOng/Projects/AddProject.vue
+++ b/resources/js/Pages/AdminOng/Projects/AddProject.vue
@@ -16,7 +16,6 @@
                     :error="form.errors.name"
                 />
 
-
                 <!-- Project amount target -->
                 <Input
                     class="w-full xl:w-1/2"
@@ -60,9 +59,13 @@
                     />
                 </div>
                 <label class="flex items-center">
-                    <Checkbox name="remember" v-model:checked="form.is_national"  />
-                    <span class="ml-2 text-sm text-gray-700" v-html="$t('is_national') "/>
-                    <p v-show="form.errors.is_national" class="mt-2 text-sm text-red-600" v-html="form.errors.is_national"/>
+                    <Checkbox name="remember" v-model:checked="form.is_national" />
+                    <span class="ml-2 text-sm text-gray-700" v-html="$t('is_national')" />
+                    <p
+                        v-show="form.errors.is_national"
+                        class="mt-2 text-sm text-red-600"
+                        v-html="form.errors.is_national"
+                    />
                 </label>
 
                 <!-- County -->
@@ -82,7 +85,7 @@
                     :label="$t('project_description_label')"
                     id="about-project"
                     color="gray-700"
-                    numberOfCharacters=800
+                    numberOfCharacters="800"
                     v-model="form.description"
                     :error="form.errors.description"
                     :more-info="$t('project_description_extra')"
@@ -122,23 +125,33 @@
 
                 <label class="flex items-center">
                     <Checkbox name="remember" v-model:checked="form.accepting_volunteers" />
-                    <span class="ml-2 text-sm text-gray-700" v-html="$t('has_volunteers_label')"/>
-                    <p v-show="form.errors.accepting_volunteers" class="mt-2 text-sm text-red-600" v-html="form.errors.accepting_volunteers"/>
+                    <span class="ml-2 text-sm text-gray-700" v-html="$t('has_volunteers_label')" />
+                    <p
+                        v-show="form.errors.accepting_volunteers"
+                        class="mt-2 text-sm text-red-600"
+                        v-html="form.errors.accepting_volunteers"
+                    />
                 </label>
 
                 <label class="flex items-center">
                     <Checkbox name="remember" v-model:checked="form.accepting_comments" />
-                    <span class="ml-2 text-sm text-gray-700" v-html="$t('has_comments_label')"/>
-                    <p v-show="form.errors.accepting_comments" class="mt-2 text-sm text-red-600" v-html="form.errors.accepting_comments"/>
+                    <span class="ml-2 text-sm text-gray-700" v-html="$t('has_comments_label')" />
+                    <p
+                        v-show="form.errors.accepting_comments"
+                        class="mt-2 text-sm text-red-600"
+                        v-html="form.errors.accepting_comments"
+                    />
                 </label>
 
                 <label class="flex items-center">
-                    <FileInput  v-model="form.preview"  :label="$t('project.labels.preview_image')" accept=""
-                                @upload="(file)=>form.preview=file"
-                                previewable
+                    <FileInput
+                        v-model="form.preview"
+                        :label="$t('project.labels.preview_image')"
+                        accept=""
+                        @upload="(file) => (form.preview = file)"
+                        previewable
                     />
-                    <p v-show="form.errors.preview" class="mt-2 text-sm text-red-600" v-html="form.errors.preview"/>
-
+                    <p v-show="form.errors.preview" class="mt-2 text-sm text-red-600" v-html="form.errors.preview" />
                 </label>
 
                 <FileGroup v-model="form.gallery" :label="$t('photo_gallery')" />
@@ -147,7 +160,7 @@
                     :elements="form.videos"
                     :label="$t('project.labels.videos')"
                     :description="$t('project.labels.videos_extra')"
-                    :structure="[{label:$t('video_link_label'),key:'url',error:arrayError('videos.0.url')}]"
+                    :structure="[{ label: $t('video_link_label'), key: 'url', error: arrayError('videos.0.url') }]"
                     :error="arrayError('videos.0.url')"
                     name="videos"
                 />
@@ -158,9 +171,17 @@
                     :label="$t('external_links_title')"
                     :description="$t('external_links_text')"
                     :structure="[
-                        {label:$t('project.labels.external_links_title'),key:'title',error:arrayError('external_links.0.title')},
-                        {label:$t('project.labels.external_links_url'),key:'url',error:arrayError('external_links.0.url')}
-                        ]"
+                        {
+                            label: $t('project.labels.external_links_title'),
+                            key: 'title',
+                            error: arrayError('external_links.0.title'),
+                        },
+                        {
+                            label: $t('project.labels.external_links_url'),
+                            key: 'url',
+                            error: arrayError('external_links.0.url'),
+                        },
+                    ]"
                     name="external_links"
                 />
                 <div class="flex items-center justify-end gap-6">
@@ -180,60 +201,60 @@
 </template>
 
 <script setup>
-/** Import from inertia. */
-import {useForm} from '@inertiajs/vue3';
-
-/** Import components. */
-import DashboardLayout from '@/Layouts/DashboardLayout.vue';
-import Title from '@/Components/Title.vue';
-import Input from '@/Components/form/Input.vue';
-import Select from '@/Components/form/Select.vue';
-import Textarea from '@/Components/form/Textarea.vue';
-import Checkbox from '@/Components/form/Checkbox.vue';
-import FileGroup from '@/Components/form/FileGroup.vue';
-import PrimaryButton from '@/Components/buttons/PrimaryButton.vue';
-import SecondaryButton from '@/Components/buttons/SecondaryButton.vue';
-import DangerButton from '@/Components/buttons/DangerButton.vue';
-import {ref} from 'vue';
-import FileInput from "@/Components/form/FileInput.vue";
-import RepeaterComponent from "@/Components/RepeaterComponent.vue";
-
-/** Initialize inertia from Object. */
-const form = useForm({
-    name: '',
-    target_budget: '',
-    categories: [],
-    start: '',
-    end: '',
-    counties: [],
-    description: '',
-    scope: '',
-    beneficiaries: '',
-    reason_to_donate: '',
-    is_national: false,
-    accepting_comments: false,
-    accepting_volunteers: false,
-    preview: null,
-    gallery: [],
-    videos: [],
-    external_links: [],
-});
-const props = defineProps(['projectCategories', 'counties']);
-const  external_links = ref(form.external_links)
-const  videos = ref(form.videos)
-
-/** Create project. */
-const createProject = () => {
-
-    form.post(route('dashboard.projects.store'), {
-        preserveScroll: true,
-        onError: () => {},
+    /** Import from inertia. */
+    import { useForm } from '@inertiajs/vue3';
+    import route from '@/Helpers/useRoute';
+
+    /** Import components. */
+    import DashboardLayout from '@/Layouts/DashboardLayout.vue';
+    import Title from '@/Components/Title.vue';
+    import Input from '@/Components/form/Input.vue';
+    import Select from '@/Components/form/Select.vue';
+    import Textarea from '@/Components/form/Textarea.vue';
+    import Checkbox from '@/Components/form/Checkbox.vue';
+    import FileGroup from '@/Components/form/FileGroup.vue';
+    import PrimaryButton from '@/Components/buttons/PrimaryButton.vue';
+    import SecondaryButton from '@/Components/buttons/SecondaryButton.vue';
+    import DangerButton from '@/Components/buttons/DangerButton.vue';
+    import { ref } from 'vue';
+    import FileInput from '@/Components/form/FileInput.vue';
+    import RepeaterComponent from '@/Components/RepeaterComponent.vue';
+
+    /** Initialize inertia from Object. */
+    const form = useForm({
+        name: '',
+        target_budget: '',
+        categories: [],
+        start: '',
+        end: '',
+        counties: [],
+        description: '',
+        scope: '',
+        beneficiaries: '',
+        reason_to_donate: '',
+        is_national: false,
+        accepting_comments: false,
+        accepting_volunteers: false,
+        preview: null,
+        gallery: [],
+        videos: [],
+        external_links: [],
     });
-};
-function arrayError(key) {
-    if (form.errors[key]) {
-        return form.errors[key];
+    const props = defineProps(['projectCategories', 'counties']);
+    const external_links = ref(form.external_links);
+    const videos = ref(form.videos);
+
+    /** Create project. */
+    const createProject = () => {
+        form.post(route('dashboard.projects.store'), {
+            preserveScroll: true,
+            onError: () => {},
+        });
+    };
+    function arrayError(key) {
+        if (form.errors[key]) {
+            return form.errors[key];
+        }
+        return null;
     }
-    return null;
-}
 </script>
diff --git a/resources/js/Pages/AdminOng/Projects/AddRegionalProject.vue b/resources/js/Pages/AdminOng/Projects/AddRegionalProject.vue
index e4ca6054..72df05dd 100644
--- a/resources/js/Pages/AdminOng/Projects/AddRegionalProject.vue
+++ b/resources/js/Pages/AdminOng/Projects/AddRegionalProject.vue
@@ -338,6 +338,7 @@
 
 <script setup>
     import { ref } from 'vue';
+    import route from '@/Helpers/useRoute';
 
     /** Import from inertia. */
     import { useForm } from '@inertiajs/vue3';
diff --git a/resources/js/Pages/AdminOng/Projects/EditProject.vue b/resources/js/Pages/AdminOng/Projects/EditProject.vue
index 0bc833bc..37eed5c6 100644
--- a/resources/js/Pages/AdminOng/Projects/EditProject.vue
+++ b/resources/js/Pages/AdminOng/Projects/EditProject.vue
@@ -30,16 +30,12 @@
                     </EditModal>
                 </template>
             </Field>
-            <Field
-                :label="$t('project_slug_label')"
-                :errors="formChangeStatus.errors.slug"
-            >
+            <Field :label="$t('project_slug_label')" :errors="formChangeStatus.errors.slug">
                 <template #value>
-                    <a :href="route('project',project.slug)" target="_blank" v-text="project.slug" />
+                    <a :href="route('project', project.slug)" target="_blank" v-text="project.slug" />
                 </template>
 
-                <template #action>
-                </template>
+                <template #action> </template>
             </Field>
 
             <Field
@@ -197,32 +193,30 @@
                         @cancel="resetField('is_national')"
                         class="flex justify-end col-span-1"
                     >
-                      <fieldset>
-                        <legend class="text-sm font-semibold leading-6 text-gray-900">
-                          {{ $t('accepting_volunteers') }}
-                        </legend>
-                        <div class="mt-6 space-y-6">
-                          <div class="relative flex gap-x-3">
-                            <div class="flex items-center h-6">
-                              <Checkbox
-                                  class="form-checkbox"
-                                  id="accepting_comments"
-                                  color="gray-700"
-                                  v-model="project.is_national"
-                                  :checked="project.is_national === 'Da'"
-                                  :error="errors.is_national"
-                              />
-                            </div>
-                            <div class="text-sm leading-6">
-                              <label for="accepting_comments" class="font-medium text-gray-900">
-                                {{ $t('is_national') }}
-                              </label>
-
+                        <fieldset>
+                            <legend class="text-sm font-semibold leading-6 text-gray-900">
+                                {{ $t('accepting_volunteers') }}
+                            </legend>
+                            <div class="mt-6 space-y-6">
+                                <div class="relative flex gap-x-3">
+                                    <div class="flex items-center h-6">
+                                        <Checkbox
+                                            class="form-checkbox"
+                                            id="accepting_comments"
+                                            color="gray-700"
+                                            v-model="project.is_national"
+                                            :checked="project.is_national === 'Da'"
+                                            :error="errors.is_national"
+                                        />
+                                    </div>
+                                    <div class="text-sm leading-6">
+                                        <label for="accepting_comments" class="font-medium text-gray-900">
+                                            {{ $t('is_national') }}
+                                        </label>
+                                    </div>
+                                </div>
                             </div>
-                          </div>
-                        </div>
-                      </fieldset>
-
+                        </fieldset>
                     </EditModal>
                 </template>
             </Field>
@@ -387,7 +381,6 @@
                                         <label for="accepting_comments" class="font-medium text-gray-900">
                                             {{ $t('accepting_volunteers') }}
                                         </label>
-
                                     </div>
                                 </div>
                             </div>
@@ -572,6 +565,7 @@
 <script setup>
     import { ref, computed } from 'vue';
     import { useForm } from '@inertiajs/vue3';
+    import route from '@/Helpers/useRoute';
 
     /** Import components. */
     import DashboardLayout from '@/Layouts/DashboardLayout.vue';
diff --git a/resources/js/Pages/AdminOng/Projects/EditRegionalProject.vue b/resources/js/Pages/AdminOng/Projects/EditRegionalProject.vue
index e67e912c..bc58b4d6 100644
--- a/resources/js/Pages/AdminOng/Projects/EditRegionalProject.vue
+++ b/resources/js/Pages/AdminOng/Projects/EditRegionalProject.vue
@@ -451,6 +451,7 @@
 <script setup>
     /** Import from inertia. */
     import { Head, Link, useForm } from '@inertiajs/vue3';
+    import route from '@/Helpers/useRoute';
 
     /** Import components. */
     import DashboardLayout from '@/Layouts/DashboardLayout.vue';
diff --git a/resources/js/Pages/Auth/ConfirmPassword.vue b/resources/js/Pages/Auth/ConfirmPassword.vue
index 43c520ad..4b9283b3 100644
--- a/resources/js/Pages/Auth/ConfirmPassword.vue
+++ b/resources/js/Pages/Auth/ConfirmPassword.vue
@@ -24,6 +24,7 @@
 
 <script setup>
     import { useForm } from '@inertiajs/vue3';
+    import route from '@/Helpers/useRoute';
     import AuthLayout from '@/Layouts/AuthLayout.vue';
     import Auth from '@/Components/templates/Auth.vue';
     import Input from '@/Components/form/Input.vue';
diff --git a/resources/js/Pages/Auth/ForgotPassword.vue b/resources/js/Pages/Auth/ForgotPassword.vue
index 0e2e6062..9a167f82 100644
--- a/resources/js/Pages/Auth/ForgotPassword.vue
+++ b/resources/js/Pages/Auth/ForgotPassword.vue
@@ -21,6 +21,7 @@
 
 <script setup>
     import { useForm } from '@inertiajs/vue3';
+    import route from '@/Helpers/useRoute';
     import AuthLayout from '@/Layouts/AuthLayout.vue';
     import Auth from '@/Components/templates/Auth.vue';
     import PrimaryButton from '@/Components/buttons/PrimaryButton.vue';
diff --git a/resources/js/Pages/Auth/Login.vue b/resources/js/Pages/Auth/Login.vue
index d1677092..e73a99b0 100644
--- a/resources/js/Pages/Auth/Login.vue
+++ b/resources/js/Pages/Auth/Login.vue
@@ -57,13 +57,13 @@
                     :label="$t('log_in')"
                 />
 
-<!--                <SecondaryButton-->
-<!--                    class="col-span-2 md:col-span-1 w-full flex items-center justify-center flex-1 gap-x-2 py-2.5"-->
-<!--                    @click="googleLogin"-->
-<!--                >-->
-<!--                    <SvgLoader name="google" />-->
-<!--                    {{ $t('google_login') }}-->
-<!--                </SecondaryButton>-->
+                <!--                <SecondaryButton-->
+                <!--                    class="col-span-2 md:col-span-1 w-full flex items-center justify-center flex-1 gap-x-2 py-2.5"-->
+                <!--                    @click="googleLogin"-->
+                <!--                >-->
+                <!--                    <SvgLoader name="google" />-->
+                <!--                    {{ $t('google_login') }}-->
+                <!--                </SecondaryButton>-->
             </div>
         </form>
     </AuthLayout>
@@ -71,6 +71,7 @@
 
 <script setup>
     import { useForm } from '@inertiajs/vue3';
+    import route from '@/Helpers/useRoute';
     import AuthLayout from '@/Layouts/AuthLayout.vue';
     import Input from '@/Components/form/Input.vue';
     import Checkbox from '@/Components/form/Checkbox.vue';
diff --git a/resources/js/Pages/Auth/Register.vue b/resources/js/Pages/Auth/Register.vue
index f14f5219..589e4fcf 100644
--- a/resources/js/Pages/Auth/Register.vue
+++ b/resources/js/Pages/Auth/Register.vue
@@ -18,6 +18,7 @@
 <script setup>
     import { ref, computed } from 'vue';
     import { useForm } from '@inertiajs/vue3';
+    import route from '@/Helpers/useRoute';
     import AuthLayout from '@/Layouts/AuthLayout.vue';
     import Auth from '@/Components/templates/Auth.vue';
     import Step1 from '@/Pages/Auth/Registration/Step1.vue';
diff --git a/resources/js/Pages/Auth/ResetPassword.vue b/resources/js/Pages/Auth/ResetPassword.vue
index 313eb8b6..c9a410e7 100644
--- a/resources/js/Pages/Auth/ResetPassword.vue
+++ b/resources/js/Pages/Auth/ResetPassword.vue
@@ -31,6 +31,7 @@
 
 <script setup>
     import { Head, useForm } from '@inertiajs/vue3';
+    import route from '@/Helpers/useRoute';
     import AuthLayout from '@/Layouts/AuthLayout.vue';
     import PrimaryButton from '@/Components/buttons/PrimaryButton.vue';
     import Input from '@/Components/form/Input.vue';
diff --git a/resources/js/Pages/Donor/Donations.vue b/resources/js/Pages/Donor/Donations.vue
index 85f88b20..237343bb 100644
--- a/resources/js/Pages/Donor/Donations.vue
+++ b/resources/js/Pages/Donor/Donations.vue
@@ -1,130 +1,130 @@
 <template>
-  <PageLayout>
-    <div class="mx-auto my-10 space-y-10 max-w-7xl">
-      <!-- Header -->
-      <Title :title="$t('my_donations')" />
-      <div class="grid grid-cols-12 gap-6">
-        <div class="grid grid-cols-12 col-span-12 gap-6">
-          <SearchFilter
-              class="col-span-4"
-              v-model="filter.search"
-              :placeholder="$t('search')"
-              @keydown.enter="applyFilters"
-          />
+    <PageLayout>
+        <div class="mx-auto my-10 space-y-10 max-w-7xl">
+            <!-- Header -->
+            <Title :title="$t('my_donations')" />
+            <div class="grid grid-cols-12 gap-6">
+                <div class="grid grid-cols-12 col-span-12 gap-6">
+                    <SearchFilter
+                        class="col-span-4"
+                        v-model="filter.search"
+                        :placeholder="$t('search')"
+                        @keydown.enter="applyFilters"
+                    />
 
-          <SecondaryButton @click="applyFilters" class="col-span-2 py-2 text-center">
-            {{ $t('search') }}
-          </SecondaryButton>
+                    <SecondaryButton @click="applyFilters" class="col-span-2 py-2 text-center">
+                        {{ $t('search') }}
+                    </SecondaryButton>
 
-          <SecondaryButton
-              v-if="hasValues"
-              @click="clearFilters"
-              class="flex items-center justify-center col-span-2 gap-2 py-2 text-center"
-          >
-            <SvgLoader name="close" />
-            {{ $t('empty_filters') }}
-          </SecondaryButton>
+                    <SecondaryButton
+                        v-if="hasValues"
+                        @click="clearFilters"
+                        class="flex items-center justify-center col-span-2 gap-2 py-2 text-center"
+                    >
+                        <SvgLoader name="close" />
+                        {{ $t('empty_filters') }}
+                    </SecondaryButton>
 
-          <div :class="['col-span-12 flex justify-end', hasValues ? 'sm:col-span-4' : 'sm:col-span-6']">
-            <SecondaryButton class="flex items-center justify-center gap-4 py-2">
-              <SvgLoader class="shrink-0" name="download" />
-              {{ $t('download_table') }}
-            </SecondaryButton>
-          </div>
-        </div>
-
-        <Select
-            class="col-span-12 sm:col-span-6 lg:col-span-4"
-            :label="$t('donation_status')"
-            v-model="filter.status"
-            :options="statuses"
-            @update:modelValue="applyFilters"
-        />
+                    <div :class="['col-span-12 flex justify-end', hasValues ? 'sm:col-span-4' : 'sm:col-span-6']">
+                        <SecondaryButton class="flex items-center justify-center gap-4 py-2">
+                            <SvgLoader class="shrink-0" name="download" />
+                            {{ $t('download_table') }}
+                        </SecondaryButton>
+                    </div>
+                </div>
 
-        <Select
-            class="col-span-12 sm:col-span-6 lg:col-span-4"
-            :label="$t('project')"
-            v-model="filter.project"
-            :options="projects"
-            @update:modelValue="applyFilters"
-        />
-        <Select
-            class="col-span-12 sm:col-span-6 lg:col-span-4"
-            :label="$t('organization')"
-            v-model="filter.organization"
-            :options="organizations"
-            @update:modelValue="applyFilters"
-        />
+                <Select
+                    class="col-span-12 sm:col-span-6 lg:col-span-4"
+                    :label="$t('donation_status')"
+                    v-model="filter.status"
+                    :options="statuses"
+                    @update:modelValue="applyFilters"
+                />
 
-        <Select
-            class="col-span-12 sm:col-span-6 lg:col-span-4"
-            :label="$t('start_date')"
-            v-model="filter.start_date"
-            :options="dates"
-            @update:modelValue="applyFilters"
-        />
+                <Select
+                    class="col-span-12 sm:col-span-6 lg:col-span-4"
+                    :label="$t('project')"
+                    v-model="filter.project"
+                    :options="projects"
+                    @update:modelValue="applyFilters"
+                />
+                <Select
+                    class="col-span-12 sm:col-span-6 lg:col-span-4"
+                    :label="$t('organization')"
+                    v-model="filter.organization"
+                    :options="organizations"
+                    @update:modelValue="applyFilters"
+                />
 
-        <Select
-            class="col-span-12 sm:col-span-6 lg:col-span-4"
-            :label="$t('start_date')"
-            v-model="filter.end_date"
-            :options="dates"
-            @update:modelValue="applyFilters"
+                <Select
+                    class="col-span-12 sm:col-span-6 lg:col-span-4"
+                    :label="$t('start_date')"
+                    v-model="filter.start_date"
+                    :options="dates"
+                    @update:modelValue="applyFilters"
+                />
 
-        />
-      </div>
-      <Table :collection="collection" />
-    </div>
-  </PageLayout>
+                <Select
+                    class="col-span-12 sm:col-span-6 lg:col-span-4"
+                    :label="$t('start_date')"
+                    v-model="filter.end_date"
+                    :options="dates"
+                    @update:modelValue="applyFilters"
+                />
+            </div>
+            <Table :collection="collection" />
+        </div>
+    </PageLayout>
 </template>
 
 <script setup>
-import { ref } from 'vue';
-import { CurrencyEuroIcon } from '@heroicons/vue/outline';
-import DashboardLayout from '@/Layouts/DashboardLayout.vue';
-import Title from '@/Components/Title.vue';
-import SvgLoader from '@/Components/SvgLoader.vue';
-import Table from '@/Components/tables/Table.vue';
-import Select from '@/Components/form/Select.vue';
-import SearchFilter from '@/Components/filters/SearchFilter.vue';
-import SecondaryButton from '@/Components/buttons/SecondaryButton.vue';
-import PrimaryButton from '@/Components/buttons/PrimaryButton.vue';
-import useFilters from '@/Helpers/useFilters.js';
-import {Head} from "@inertiajs/vue3";
-import PageLayout from "@/Layouts/PageLayout.vue";
+    import { ref } from 'vue';
+    import route from '@/Helpers/useRoute';
+    import { CurrencyEuroIcon } from '@heroicons/vue/outline';
+    import DashboardLayout from '@/Layouts/DashboardLayout.vue';
+    import Title from '@/Components/Title.vue';
+    import SvgLoader from '@/Components/SvgLoader.vue';
+    import Table from '@/Components/tables/Table.vue';
+    import Select from '@/Components/form/Select.vue';
+    import SearchFilter from '@/Components/filters/SearchFilter.vue';
+    import SecondaryButton from '@/Components/buttons/SecondaryButton.vue';
+    import PrimaryButton from '@/Components/buttons/PrimaryButton.vue';
+    import useFilters from '@/Helpers/useFilters.js';
+    import { Head } from '@inertiajs/vue3';
+    import PageLayout from '@/Layouts/PageLayout.vue';
 
-const props = defineProps({
-  collection: {
-    type: Object,
-    required: true,
-  },
-  filter: {
-    type: Object,
-    required: false,
-  },
-  projects: Array,
-  organizations: Array,
-  statuses: Array,
-  amounts: Array,
-  dates : Array,
-  //     start_dates: Array,
-  //     end_dates: Array
-});
+    const props = defineProps({
+        collection: {
+            type: Object,
+            required: true,
+        },
+        filter: {
+            type: Object,
+            required: false,
+        },
+        projects: Array,
+        organizations: Array,
+        statuses: Array,
+        amounts: Array,
+        dates: Array,
+        //     start_dates: Array,
+        //     end_dates: Array
+    });
 
-/** Active filter state. */
-const hasValues = ref(false);
+    /** Active filter state. */
+    const hasValues = ref(false);
 
-/** Filter values. */
-const filter = ref({
-  search: props.filter?.search || null,
-  status: props.filter?.status || null,
-  amount: props.filter?.amount || null,
-  project: props.filter?.project || null,
-  organization: props.filter?.organization || null,
-  start_date: props.filter?.start_date || null,
-  end_date: props.filter?.end_date || null,
-});
+    /** Filter values. */
+    const filter = ref({
+        search: props.filter?.search || null,
+        status: props.filter?.status || null,
+        amount: props.filter?.amount || null,
+        project: props.filter?.project || null,
+        organization: props.filter?.organization || null,
+        start_date: props.filter?.start_date || null,
+        end_date: props.filter?.end_date || null,
+    });
 
-const sort = ref(null);
-const { applyFilters, clearFilters } = useFilters(filter, sort, route('donor.donations'));
+    const sort = ref(null);
+    const { applyFilters, clearFilters } = useFilters(filter, sort, route('donor.donations'));
 </script>
diff --git a/resources/js/Pages/Profile/Partials/UpdatePasswordForm.vue b/resources/js/Pages/Profile/Partials/UpdatePasswordForm.vue
index 493965dd..2ceaf6ce 100644
--- a/resources/js/Pages/Profile/Partials/UpdatePasswordForm.vue
+++ b/resources/js/Pages/Profile/Partials/UpdatePasswordForm.vue
@@ -55,6 +55,7 @@
 <script setup>
     /** Import from vue. */
     import { ref } from 'vue';
+    import route from '@/Helpers/useRoute';
 
     /** Import form inertia. */
     import { useForm } from '@inertiajs/vue3';
diff --git a/resources/js/Pages/Public/Articles/Articles.vue b/resources/js/Pages/Public/Articles/Articles.vue
index 938fefc6..366051a2 100644
--- a/resources/js/Pages/Public/Articles/Articles.vue
+++ b/resources/js/Pages/Public/Articles/Articles.vue
@@ -1,5 +1,7 @@
 <template>
     <PageLayout>
+        <Head title="Articole" />
+
         <Carousel
             v-if="query?.data?.length"
             class="w-full"
@@ -130,7 +132,6 @@
 <script setup>
     import PageLayout from '@/Layouts/PageLayout.vue';
     import Head from '@/Components/Head.vue';
-    import Icon from '@/Components/Icon.vue';
     import SvgLoader from '@/Components/SvgLoader.vue';
     import Pagination from '@/Components/pagination/Pagination.vue';
     import ArticleCard from '@/Components/cards/ArticleCard.vue';
@@ -147,7 +148,7 @@
             type: Object,
             required: true,
         },
-      topArticles: {
+        topArticles: {
             type: Object,
             required: true,
         },
diff --git a/resources/js/Pages/Public/Articles/Show.vue b/resources/js/Pages/Public/Articles/Show.vue
index c9ab0e28..01b4052e 100644
--- a/resources/js/Pages/Public/Articles/Show.vue
+++ b/resources/js/Pages/Public/Articles/Show.vue
@@ -1,6 +1,6 @@
 <template>
     <PageLayout>
-        <Head :title="resource.title" :description="resource.description" />
+        <Head :title="resource.title" :description="resource.description" :image="resource.cover" />
 
         <figure class="container">
             <div class="aspect-w-2 aspect-h-1">
@@ -29,9 +29,9 @@
 
         <div class="w-full bg-gray-100">
             <div class="mx-auto max-w-7xl">
-              <Vue3PictureSwipe :items="resource.swipe_gallery" :options="{mainClass:'grid sm:grid-cols-1 gap-2 lg:grid-cols-4 mt-10'}" class="mt-10"></Vue3PictureSwipe>
+                <Gallery :images="resource.swipe_gallery" class="mt-10" />
 
-                <div class="flex items-center justify-between pt-6 pb-20 ">
+                <div class="flex items-center justify-between pt-6 pb-20">
                     <div class="flex items-center justify-start w-full text-gray-500 f">
                         <p>{{ resource.author }}</p>
                     </div>
@@ -64,18 +64,13 @@
 </template>
 
 <script setup>
-    /** Import from inertia. */
-    import { Head } from '@inertiajs/vue3';
-
-    /** Import components. */
-    import PageLayout from '@/Layouts/PageLayout.vue';
-    import SvgLoader from '@/Components/SvgLoader.vue';
     import ArticleCard from '@/Components/cards/ArticleCard.vue';
-    import Gallery from '@/Components/gallery/Gallery.vue';
-    import SharePage from '@/Components/SharePage.vue';
-
+    import Head from '@/Components/Head.vue';
     import LargeSquarePattern from '@/Components/patterns/LargeSquarePattern.vue';
-    import Vue3PictureSwipe from "vue3-picture-swipe";
+    import PageLayout from '@/Layouts/PageLayout.vue';
+    import SharePage from '@/Components/SharePage.vue';
+    import SvgLoader from '@/Components/SvgLoader.vue';
+    import Gallery from '@/Components/Gallery.vue';
 
     defineProps({
         resource: {
diff --git a/resources/js/Pages/Public/Bcr/Index.vue b/resources/js/Pages/Public/Bcr/Index.vue
index 432285fa..856f69b7 100644
--- a/resources/js/Pages/Public/Bcr/Index.vue
+++ b/resources/js/Pages/Public/Bcr/Index.vue
@@ -27,9 +27,7 @@
                 <Sort class="w-full md:w-auto" :sort="collection.sort" />
             </div>
 
-            <div class="flex flex-col justify-end gap-6 md:col-span-6 lg:col-span-4 md:flex-row">
-
-            </div>
+            <div class="flex flex-col justify-end gap-6 md:col-span-6 lg:col-span-4 md:flex-row"></div>
 
             <Select
                 class="relative md:col-span-6 lg:col-span-3"
@@ -75,6 +73,7 @@
 
 <script setup>
     import { ref } from 'vue';
+    import route from '@/Helpers/useRoute';
     import { ViewGridIcon, LocationMarkerIcon, XIcon } from '@heroicons/vue/solid';
     import PageLayout from '@/Layouts/PageLayout.vue';
     import Sort from '@/Components/filters/Sort.vue';
diff --git a/resources/js/Pages/Public/Bcr/Show.vue b/resources/js/Pages/Public/Bcr/Show.vue
index 1ecd4358..5c0bfe2f 100644
--- a/resources/js/Pages/Public/Bcr/Show.vue
+++ b/resources/js/Pages/Public/Bcr/Show.vue
@@ -1,210 +1,208 @@
 <template>
-  <PageLayout>
-    <!-- Inertia page head -->
-    <Head title="Proiect" />
-
-    <!-- Header -->
-    <div class="flex flex-col-reverse w-full mx-auto mt-2 mb-8 lg:flex-row lg:max-w-7xl sm:mt-0 px-9">
-      <div class="flex flex-col justify-center w-full lg:w-6/12">
-        <div class="flex gap-6 pt-4 mr-6 bg-white">
-
-          <div v-if="project.category" class="flex items-center gap-2">
-            <div class="flex items-center justify-center rounded-lg bg-primary-50 w-9 h-9">
-              <SvgLoader class="shrink-0 fill-primary-50 stroke-primary-500" name="badge" />
+    <PageLayout>
+        <Head :title="project.name" :description="project.description" :image="project.image" />
+
+        <!-- Header -->
+        <div class="flex flex-col-reverse w-full mx-auto mt-2 mb-8 lg:flex-row lg:max-w-7xl sm:mt-0 px-9">
+            <div class="flex flex-col justify-center w-full lg:w-6/12">
+                <div class="flex gap-6 pt-4 mr-6 bg-white">
+                    <div v-if="project.category" class="flex items-center gap-2">
+                        <div class="flex items-center justify-center rounded-lg bg-primary-50 w-9 h-9">
+                            <SvgLoader class="shrink-0 fill-primary-50 stroke-primary-500" name="badge" />
+                        </div>
+                        <p class="w-40 text-base font-semibold leading-6 text-gray-900 truncate lg:w-60">
+                            {{ project.category }}
+                        </p>
+                    </div>
+                </div>
+
+                <h1 v-if="project.name" class="py-12 text-6xl font-extrabold text-gray-900">{{ project.name }}</h1>
             </div>
-            <p class="w-40 text-base font-semibold leading-6 text-gray-900 truncate lg:w-60">
-              {{ project.category }}
-            </p>
-          </div>
-        </div>
-
-        <h1 v-if="project.name" class="py-12 text-6xl font-extrabold text-gray-900">{{ project.name }}</h1>
-      </div>
 
-      <div class="relative items-center justify-center hidden w-full p-20 lg:w-6/12 sm:flex">
-        <LargeSquarePattern class="absolute bottom-0 right-0 fill-primary-500" />
+            <div class="relative items-center justify-center hidden w-full p-20 lg:w-6/12 sm:flex">
+                <LargeSquarePattern class="absolute bottom-0 right-0 fill-primary-500" />
 
-        <div class="relative flex items-center p-8 bg-white rounded shadow w-fit">
-          <img class="mx-auto" :src="project.image" alt="" />
+                <div class="relative flex items-center p-8 bg-white rounded shadow w-fit">
+                    <img class="mx-auto" :src="project.image" alt="" />
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
-
-    <div class="relative flex items-center w-full mb-20 bg-white rounded shadow sm:hidden">
-      <img class="mx-auto" :src="project.image" alt="" />
-    </div>
-
-    <!-- Social share -->
-    <div class="container grid mx-auto mb-8 gap-y-8 gap-x-20 lg:grid-cols-5">
-      <div class="lg:col-span-3">
-        <h2 class="mb-8 text-3xl font-bold text-cyan-900">{{ $t('share_project') }}</h2>
-        <SharePage class="mb-20" :pageRoute="route('bcr.show', project.slug)" />
-      </div>
-
-      <div class="bg-white shadow-lg drop-shadow-sm lg:col-span-2">
-        <div class="px-10 pt-10 pb-8 border-b border-gray-200">
-          <h3 class="text-4xl font-bold leading-6 text-gray-900">{{ $t('project_details') }}</h3>
+
+        <div class="relative flex items-center w-full mb-20 bg-white rounded shadow sm:hidden">
+            <img class="mx-auto" :src="project.image" alt="" />
         </div>
 
-        <div class="px-10 py-8 space-y-8 bg-gray-50">
-          <div class="flex justify-start gap-x-4">
-            <Icon class="w-5 h-5 mt-1 shrink-0 fill-primary-500" name="location" />
-            <div>
-              <h3 class="text-base font-semibold text-gray-600 leading-0">{{ $t('range') }}</h3>
-              <p class="mt-2 text-base font-normal text-gray-500">
-                {{ project.area }}
-              </p>
+        <!-- Social share -->
+        <div class="container grid mx-auto mb-8 gap-y-8 gap-x-20 lg:grid-cols-5">
+            <div class="lg:col-span-3">
+                <h2 class="mb-8 text-3xl font-bold text-cyan-900">{{ $t('share_project') }}</h2>
+                <SharePage class="mb-20" :pageRoute="route('bcr.show', project.slug)" />
             </div>
-          </div>
-
-          <div class="flex justify-start gap-x-4">
-            <SvgLoader class="mt-1 shrink-0 fill-primary-500 stroke-primary-500" name="calendar" />
-            <div>
-              <h3 class="text-base font-semibold text-gray-600 leading-0">{{ $t('project_period') }}</h3>
-              <p class="mt-2 text-base font-normal text-gray-500">
-                {{ project.start }} - {{ project.end }}
-              </p>
+
+            <div class="bg-white shadow-lg drop-shadow-sm lg:col-span-2">
+                <div class="px-10 pt-10 pb-8 border-b border-gray-200">
+                    <h3 class="text-4xl font-bold leading-6 text-gray-900">{{ $t('project_details') }}</h3>
+                </div>
+
+                <div class="px-10 py-8 space-y-8 bg-gray-50">
+                    <div class="flex justify-start gap-x-4">
+                        <Icon class="w-5 h-5 mt-1 shrink-0 fill-primary-500" name="location" />
+                        <div>
+                            <h3 class="text-base font-semibold text-gray-600 leading-0">{{ $t('range') }}</h3>
+                            <p class="mt-2 text-base font-normal text-gray-500">
+                                {{ project.area }}
+                            </p>
+                        </div>
+                    </div>
+
+                    <div class="flex justify-start gap-x-4">
+                        <SvgLoader class="mt-1 shrink-0 fill-primary-500 stroke-primary-500" name="calendar" />
+                        <div>
+                            <h3 class="text-base font-semibold text-gray-600 leading-0">{{ $t('project_period') }}</h3>
+                            <p class="mt-2 text-base font-normal text-gray-500">
+                                {{ project.start }} - {{ project.end }}
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="container grid mx-auto mb-8 gap-y-8 gap-x-20">
+            <div class="mb-10" v-if="project.description">
+                <h2 class="mb-6 text-3xl font-bold text-cyan-900">{{ $t('description') }}</h2>
+                <div class="text-lg text-gray-500" v-html="project.description"></div>
             </div>
-          </div>
         </div>
-      </div>
-    </div>
-    <div class="container grid mx-auto mb-8 gap-y-8 gap-x-20">
-      <div class="mb-10" v-if="project.description">
-        <h2 class="mb-6 text-3xl font-bold text-cyan-900">{{ $t('description') }}</h2>
-        <div class="text-lg text-gray-500" v-html="project.description"></div>
-      </div>
-    </div>
-    <div class="container space-y-10">
-      <div v-if="project.external_links.length">
-        <div class="flex items-center gap-4 mb-8">
-          <div class="flex items-center justify-center w-10 h-10 p-2 text-white rounded-lg bg-primary-500">
-            <ExternalLinkIcon />
-          </div>
-          <h3 class="text-3xl font-bold text-cyan-900">{{ $t('external_links_title') }}</h3>
+        <div class="container space-y-10">
+            <div v-if="project.external_links.length">
+                <div class="flex items-center gap-4 mb-8">
+                    <div class="flex items-center justify-center w-10 h-10 p-2 text-white rounded-lg bg-primary-500">
+                        <ExternalLinkIcon />
+                    </div>
+                    <h3 class="text-3xl font-bold text-cyan-900">{{ $t('external_links_title') }}</h3>
+                </div>
+
+                <ul class="pl-8 leading-relaxed border-l-8 border-primary-500">
+                    <li
+                        v-for="({ url, title, source }, index) in project.external_links"
+                        :key="index"
+                        class="overflow-hidden text-gray-800"
+                    >
+                        <a :href="url" class="inline group" target="_blank" rel="noopener">
+                            <span v-text="title" class="text-blue-500 underline group-hover:no-underline" />
+                        </a>
+
+                        <span> &ndash; </span>
+                        <span v-text="source" />
+                    </li>
+                </ul>
+            </div>
         </div>
 
-        <ul class="pl-8 leading-relaxed border-l-8 border-primary-500">
-          <li
-              v-for="({ url, title, source }, index) in project.external_links"
-              :key="index"
-              class="overflow-hidden text-gray-800"
-          >
-            <a :href="url" class="inline group" target="_blank" rel="noopener">
-              <span v-text="title" class="text-blue-500 underline group-hover:no-underline" />
-            </a>
-
-            <span> &ndash; </span>
-            <span v-text="source" />
-          </li>
-        </ul>
-      </div>
-    </div>
-
-    <div class="bg-gray-100">
-      <div class="container flex flex-col gap-8 py-10 mx-auto sm:flex-row">
-        <div class="flex-col justify-between w-full sm:flex">
-          <div class="flex items-center gap-4">
-            <div class="flex items-center justify-center rounded-lg bg-primary-500 w-9 h-9">
-              <SvgLoader class="fill-primary-500 shrink-0" name="brand_icon" />
+        <div class="bg-gray-100">
+            <div class="container flex flex-col gap-8 py-10 mx-auto sm:flex-row">
+                <div class="flex-col justify-between w-full sm:flex">
+                    <div class="flex items-center gap-4">
+                        <div class="flex items-center justify-center rounded-lg bg-primary-500 w-9 h-9">
+                            <SvgLoader class="fill-primary-500 shrink-0" name="brand_icon" />
+                        </div>
+                        <h3 class="text-2xl font-bold text-gray-900">{{ $t('gallery') }}</h3>
+                    </div>
+                    <div class="grid grid-cols-2 gap-3">
+                        <div
+                            class="mt-10 overflow-hidden rounded-lg group aspect-w-2 aspect-h-1"
+                            v-for="(video, index) in project.embedded_videos"
+                            :key="index"
+                            v-html="video?.html"
+                        />
+                    </div>
+
+                    <Gallery :images="project.swipe_gallery" class="mt-10" />
+                </div>
             </div>
-            <h3 class="text-2xl font-bold text-gray-900">{{ $t('gallery') }}</h3>
-          </div>
-          <div class="grid grid-cols-2 gap-3">
-
-            <div class="mt-10 overflow-hidden rounded-lg group aspect-w-2 aspect-h-1"
-                 v-for="(video,index) in project.embedded_videos"
-                 :key="index"
-                 v-html="video?.html"
-            />
-          </div>
-
-          <Vue3PictureSwipe :items="project.swipe_gallery" :options="{mainClass:'grid sm:grid-cols-1 gap-2 lg:grid-cols-4 mt-10'}" class="mt-10"></Vue3PictureSwipe>
         </div>
-      </div>
-    </div>
-  </PageLayout>
+    </PageLayout>
 </template>
 
 <script setup>
-/** Import form vue */
-import { computed, onMounted, ref } from 'vue';
-
-/** Import from inertia. */
-import { Head, Link, usePage, useForm } from '@inertiajs/vue3';
-
-
-/** Import components. */
-import PageLayout from '@/Layouts/PageLayout.vue';
-import Icon from '@/Components/Icon.vue';
-import SvgLoader from '@/Components/SvgLoader.vue';
-import Modal from '@/Components/modals/Modal.vue';
-import DonateModal from '@/Components/modals/DonateModal.vue';
-import VolunteerModal from '@/Components/modals/VolunteerModal.vue';
-import HowCanYouHelp from '@/Components/HowCanYouHelp.vue';
-import SharePage from '@/Components/SharePage.vue';
-import Vue3PictureSwipe from "vue3-picture-swipe";
-
-import LargeSquarePattern from '@/Components/patterns/LargeSquarePattern.vue';
-import { ExternalLinkIcon } from '@heroicons/vue/outline';
-
-const props = defineProps({
-  project: {
-    type: Object,
-    required: true,
-  },
-});
-onMounted(() => {
-  console.log(project);
-});
-const project = ref(props.project);
-
-/**
- * Copy embed code.
- */
-const copyEmbed = () => {
-  /** Embed iframe. */
-  const embedCode = `<iframe src="${window.location.href}" width="800px" height="600px"></iframe>`;
-
-  /** Check if navigator object exists and copy iframe. */
-  if (navigator.clipboard) {
-    navigator.clipboard
-        .writeText(embedCode)
-        .then(() => alert('Embed code copied to clipboard!'))
-        .catch(() => alert('Failed to copy embed code to clipboard!'));
-  } else {
-    /** Create textarea element. */
-    const tempInput = document.createElement('textarea');
-
-    /** Set textarea value as embed code. */
-    tempInput.value = embedCode;
-
-    /** Apend textarea to body. */
-    document.body.appendChild(tempInput);
-
-    /** Select textarea text. */
-    tempInput.select();
-
-    /** Copy textarea content. */
-    document.execCommand('copy');
-
-    /** Remove textarea. */
-    document.body.removeChild(tempInput);
-  }
-};
-
-/** Trigger volunteer modal from card. */
-const triggerVolunteer = () => {
-  document.getElementById('volunteer-active-modal').click();
-};
-
-/** Trigger donate modal from card. */
-const triggerDonate = () => {
-  if (false === props.project.is_period_active) {
-    document.getElementById('project-donation-expired').click();
-    return;
-  }
-
-  document.getElementById('donate-active-modal').click();
-};
+    /** Import form vue */
+    import { computed, onMounted, ref } from 'vue';
+
+    /** Import from inertia. */
+    import { Link, usePage, useForm } from '@inertiajs/vue3';
+    import Head from '@/Components/Head.vue';
+
+    /** Import components. */
+    import PageLayout from '@/Layouts/PageLayout.vue';
+    import Icon from '@/Components/Icon.vue';
+    import SvgLoader from '@/Components/SvgLoader.vue';
+    import Modal from '@/Components/modals/Modal.vue';
+    import DonateModal from '@/Components/modals/DonateModal.vue';
+    import VolunteerModal from '@/Components/modals/VolunteerModal.vue';
+    import HowCanYouHelp from '@/Components/HowCanYouHelp.vue';
+    import SharePage from '@/Components/SharePage.vue';
+    import Gallery from '@/Components/Gallery.vue';
+
+    import LargeSquarePattern from '@/Components/patterns/LargeSquarePattern.vue';
+    import { ExternalLinkIcon } from '@heroicons/vue/outline';
+
+    const props = defineProps({
+        project: {
+            type: Object,
+            required: true,
+        },
+    });
+    onMounted(() => {
+        console.log(project);
+    });
+    const project = ref(props.project);
+
+    /**
+     * Copy embed code.
+     */
+    const copyEmbed = () => {
+        /** Embed iframe. */
+        const embedCode = `<iframe src="${window.location.href}" width="800px" height="600px"></iframe>`;
+
+        /** Check if navigator object exists and copy iframe. */
+        if (navigator.clipboard) {
+            navigator.clipboard
+                .writeText(embedCode)
+                .then(() => alert('Embed code copied to clipboard!'))
+                .catch(() => alert('Failed to copy embed code to clipboard!'));
+        } else {
+            /** Create textarea element. */
+            const tempInput = document.createElement('textarea');
+
+            /** Set textarea value as embed code. */
+            tempInput.value = embedCode;
+
+            /** Apend textarea to body. */
+            document.body.appendChild(tempInput);
+
+            /** Select textarea text. */
+            tempInput.select();
+
+            /** Copy textarea content. */
+            document.execCommand('copy');
+
+            /** Remove textarea. */
+            document.body.removeChild(tempInput);
+        }
+    };
+
+    /** Trigger volunteer modal from card. */
+    const triggerVolunteer = () => {
+        document.getElementById('volunteer-active-modal').click();
+    };
+
+    /** Trigger donate modal from card. */
+    const triggerDonate = () => {
+        if (false === props.project.is_period_active) {
+            document.getElementById('project-donation-expired').click();
+            return;
+        }
+
+        document.getElementById('donate-active-modal').click();
+    };
 </script>
diff --git a/resources/js/Pages/Public/Championship/Championship.vue b/resources/js/Pages/Public/Championship/Championship.vue
index 2c28da4d..bf22cacd 100644
--- a/resources/js/Pages/Public/Championship/Championship.vue
+++ b/resources/js/Pages/Public/Championship/Championship.vue
@@ -1,7 +1,5 @@
 <template>
     <PageLayout>
-        <!-- Inertia page head -->
-
         <Head :title="$t('championship_title')" />
 
         <div class="w-full lg:hidden">
@@ -358,9 +356,11 @@
 <script setup>
     /** Import from vue */
     import { onMounted, ref } from 'vue';
+    import route from '@/Helpers/useRoute';
 
     /** Import from inertia. */
-    import { Head, Link, useForm, router } from '@inertiajs/vue3';
+    import { Link, useForm, router } from '@inertiajs/vue3';
+    import Head from '@/Components/Head.vue';
 
     /** Import plugins */
     import 'vue3-carousel/dist/carousel.css';
diff --git a/resources/js/Pages/Public/Championship/Edition.vue b/resources/js/Pages/Public/Championship/Edition.vue
index 6857e0ff..a416b416 100644
--- a/resources/js/Pages/Public/Championship/Edition.vue
+++ b/resources/js/Pages/Public/Championship/Edition.vue
@@ -1,6 +1,5 @@
 <template>
     <PageLayout>
-        <!-- Inertia page head -->
         <Head :title="$t('championship_title')" />
 
         <!-- Header -->
@@ -237,9 +236,11 @@
 <script setup>
     /** Import from vue */
     import { ref } from 'vue';
+    import route from '@/Helpers/useRoute';
 
     /** Import from inertia. */
-    import { Head, Link, useForm, router } from '@inertiajs/vue3';
+    import { Link, useForm, router } from '@inertiajs/vue3';
+    import Head from '@/Components/Head.vue';
 
     /** Import plugins */
     import 'vue3-carousel/dist/carousel.css';
diff --git a/resources/js/Pages/Public/Championship/Rules.vue b/resources/js/Pages/Public/Championship/Rules.vue
index bcbeeff7..d63e0698 100644
--- a/resources/js/Pages/Public/Championship/Rules.vue
+++ b/resources/js/Pages/Public/Championship/Rules.vue
@@ -1,7 +1,7 @@
 <template>
     <PageLayout>
-        <!-- Inertia page head -->
         <Head :title="$t('regional_rules_title')" />
+
         <div class="w-full mx-auto space-y-9 lg:max-w-7xl p-9">
             <h1 class="text-6xl font-bold text-cyan-900">{{ content?.title }}</h1>
             <h2 class="text-lg font-semibold text-gray-700">{{ content?.subtitle }}</h2>
@@ -11,13 +11,10 @@
 </template>
 
 <script setup>
-/** Import from inertia. */
-import { Head } from '@inertiajs/vue3';
-
-/** Import components. */
-import PageLayout from '@/Layouts/PageLayout.vue';
+    import Head from '@/Components/Head.vue';
+    import PageLayout from '@/Layouts/PageLayout.vue';
 
-const props = defineProps({
-    content: Object
-})
+    const props = defineProps({
+        content: Object,
+    });
 </script>
diff --git a/resources/js/Pages/Public/Donor/Donor.vue b/resources/js/Pages/Public/Donor/Donor.vue
index d44fbe74..6752d507 100644
--- a/resources/js/Pages/Public/Donor/Donor.vue
+++ b/resources/js/Pages/Public/Donor/Donor.vue
@@ -3,32 +3,21 @@
         <!-- Inertia page head -->
         <Head :title="$t('thank_you')" />
 
-        <div class="p-9 mx-auto max-w-7xl mb-10">
+        <div class="mx-auto mb-10 p-9 max-w-7xl">
             <form :action="props.data.payment_url" method="post" id="paymentForm">
                 <div v-for="(value, key) in props.data">
-                    <input type="hidden" :name="key" :value="value">
+                    <input type="hidden" :name="key" :value="value" />
                 </div>
             </form>
-
         </div>
     </PageLayout>
 </template>
 
 <script setup>
+    import Head from '@/Components/Head.vue';
+    import PageLayout from '@/Layouts/PageLayout.vue';
 
-    /** Import from inertia. */
-    import {Head, Link, useForm} from '@inertiajs/vue3';
-    const  props = defineProps({
+    const props = defineProps({
         data: Object,
     });
-    onMounted(() => {
-        // console.log(props.data);
-        document.getElementById('paymentForm').submit();
-
-    });
-
-
-    /** Import components. */
-    import PageLayout from '@/Layouts/PageLayout.vue';
-    import {onMounted} from "vue";
 </script>
diff --git a/resources/js/Pages/Public/Donor/ThankYou.vue b/resources/js/Pages/Public/Donor/ThankYou.vue
index 86857855..b6e5ce1b 100644
--- a/resources/js/Pages/Public/Donor/ThankYou.vue
+++ b/resources/js/Pages/Public/Donor/ThankYou.vue
@@ -17,7 +17,7 @@
                     <p class="mt-8 text-lg font-medium text-gray-500">{{ $t('reward_auth') }}</p>
 
                     <div v-if="badge" class="flex items-center col-span-12 gap-6 md:col-span-6">
-                        <img :src="`/images/badges/${badge.name}.png`" alt="">
+                        <img :src="`/images/badges/${badge.name}.png`" alt="" />
                         <div class="pr-4 space-y-6 text-gray-500">
                             <h3 class="text-lg font-bold">{{ $t(`${badge.title}`) }}</h3>
                             <p class="text-sm">{{ $t(`${badge.description}`) }}</p>
@@ -27,18 +27,23 @@
 
                 <div class="w-full lg:w-1/2 lg:px-10">
                     <div class="bg-white shadow-lg">
-
                         <div class="p-8 space-y-8">
-                            <div class="inline-flex items-center justify-start px-3 py-1 text-base font-semibold rounded-full cursor-pointer text-primary-500 bg-primary-50">
+                            <div
+                                class="inline-flex items-center justify-start px-3 py-1 text-base font-semibold rounded-full cursor-pointer text-primary-500 bg-primary-50"
+                            >
                                 {{ $t('woohoo') }}
                             </div>
                             <h3 class="text-6xl font-bold leading-6 text-gray-900">{{ donation.place }}</h3>
-                            <p class="text-lg text-gray-500">{{ $t('donations_place_1') }} {{ donation.place }} {{ $t('donations_place_2') }}</p>
+                            <p class="text-lg text-gray-500">
+                                {{ $t('donations_place_1') }} {{ donation.place }} {{ $t('donations_place_2') }}
+                            </p>
                         </div>
 
                         <div class="px-10 py-8 space-y-6 bg-gray-50">
-
-                            <div v-for="info in profile.donations_status" class="flex items-center justify-start gap-x-4">
+                            <div
+                                v-for="info in profile.donations_status"
+                                class="flex items-center justify-start gap-x-4"
+                            >
                                 <SvgLoader class="shrink-0 fill-gray-50" name="check" />
                                 <p class="text-base font-normal text-gray-500">{{ info }}</p>
                             </div>
@@ -60,7 +65,6 @@
         <div v-else class="mx-auto mb-10 p-9 max-w-7xl">
             <div class="flex flex-col w-full gap-6 sm:flex-row">
                 <div class="w-full sm:w-6/12">
-
                     <div class="flex items-center gap-4">
                         <div class="flex items-center justify-center rounded-lg bg-primary-500 w-9 h-9">
                             <SvgLoader class="fill-primary-500 shrink-0" name="brand_icon" />
@@ -97,24 +101,16 @@
         />
 
         <!-- Donate modal -->
-        <DonateModal
-            triggerModalClasses="h-0"
-            triggerModalText=""
-            :data="project"
-        />
+        <DonateModal triggerModalClasses="h-0" triggerModalText="" :data="project" />
 
         <!-- Volunteer modal -->
-        <VolunteerModal
-            triggerModalClasses="h-0"
-            triggerModalText=""
-            :data="project"
-        />
+        <VolunteerModal triggerModalClasses="h-0" triggerModalText="" :data="project" />
     </PageLayout>
 </template>
 
 <script setup>
-    /** Import from inertia. */
-    import { Head, Link } from '@inertiajs/vue3';
+    import { Link } from '@inertiajs/vue3';
+    import Head from '@/Components/Head.vue';
 
     /** Import components. */
     import PageLayout from '@/Layouts/PageLayout.vue';
@@ -124,22 +120,22 @@
     import HowCanYouHelp from '@/Components/HowCanYouHelp.vue';
 
     const props = defineProps({
-        project: Object
-    })
+        project: Object,
+    });
 
     /**
      * Copy embed code.
      */
-     const copyEmbed = () => {
-
+    const copyEmbed = () => {
         /** Embed iframe. */
         const embedCode = `<iframe src="${window.location.href}" width="800px" height="600px"></iframe>`;
 
         /** Check if navigator object exists and copy iframe. */
         if (navigator.clipboard) {
-            navigator.clipboard.writeText(embedCode)
-            .then(() => alert('Embed code copied to clipboard!'))
-            .catch(() => alert('Failed to copy embed code to clipboard!'));
+            navigator.clipboard
+                .writeText(embedCode)
+                .then(() => alert('Embed code copied to clipboard!'))
+                .catch(() => alert('Failed to copy embed code to clipboard!'));
         } else {
             /** Create textarea element. */
             const tempInput = document.createElement('textarea');
@@ -159,11 +155,15 @@
             /** Remove textarea. */
             document.body.removeChild(tempInput);
         }
-    }
+    };
 
     /** Trigger volunteer modal from card. */
-    const triggerVolunteer = (() => { document.getElementById('volunteer-active-modal').click(); });
+    const triggerVolunteer = () => {
+        document.getElementById('volunteer-active-modal').click();
+    };
 
     /** Trigger donate modal from card. */
-    const triggerDonate = (() => { document.getElementById('donate-active-modal').click(); });
+    const triggerDonate = () => {
+        document.getElementById('donate-active-modal').click();
+    };
 </script>
diff --git a/resources/js/Pages/Public/Evolution/Evolution.vue b/resources/js/Pages/Public/Evolution/Evolution.vue
index 1132d872..8b21a0cc 100644
--- a/resources/js/Pages/Public/Evolution/Evolution.vue
+++ b/resources/js/Pages/Public/Evolution/Evolution.vue
@@ -1,7 +1,7 @@
 <template>
     <PageLayout>
-        <!-- Inertia page head -->
         <Head :title="$t('evolution')" />
+
         <div class="mx-auto my-10 space-y-12 max-w-7xl">
             <TimeEvolution
                 :donations="donations"
@@ -19,30 +19,28 @@
                 :table_data="table_data"
             />
 
-            <AppChart
-                :projects="projects"
-                :projects_number="projects_number"
-            />
+            <AppChart :projects="projects" :projects_number="projects_number" />
         </div>
     </PageLayout>
 </template>
 
 <script setup>
-import { Head } from '@inertiajs/vue3';
-import PageLayout from '@/Layouts/PageLayout.vue';
-import TimeEvolution from '@/Components/charts/TimeEvolution.vue';
-import ProjectsChart from '@/Components/charts/ProjectsChart.vue';
-import AppChart from '@/Components/charts/AppChart.vue';
+    import Head from '@/Components/Head.vue';
+
+    import PageLayout from '@/Layouts/PageLayout.vue';
+    import TimeEvolution from '@/Components/charts/TimeEvolution.vue';
+    import ProjectsChart from '@/Components/charts/ProjectsChart.vue';
+    import AppChart from '@/Components/charts/AppChart.vue';
 
-const props = defineProps({
-    donations: Number,
-    amount: Number,
-    donations_number: Array,
-    donations_amount: Array,
-    projects: Number,
-    projects_number: Array,
-    counties: Array,
-    domains: Array,
-    table_data: Array
-});
+    const props = defineProps({
+        donations: Number,
+        amount: Number,
+        donations_number: Array,
+        donations_amount: Array,
+        projects: Number,
+        projects_number: Array,
+        counties: Array,
+        domains: Array,
+        table_data: Array,
+    });
 </script>
diff --git a/resources/js/Pages/Public/Home.vue b/resources/js/Pages/Public/Home.vue
index 416ddb43..22f353e1 100644
--- a/resources/js/Pages/Public/Home.vue
+++ b/resources/js/Pages/Public/Home.vue
@@ -1,6 +1,6 @@
 <template>
     <PageLayout>
-        <Head title="Acasa" />
+        <Head />
 
         <!-- Header -->
         <header class="container grid items-center lg:gap-10 xl:gap-20 lg:grid-cols-2">
@@ -159,7 +159,12 @@
                 </div>
 
                 <ul role="list" class="grid grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3">
-                    <ArticleCard v-for="article,index in articles.data" :key="index" :article="article" class="relative" />
+                    <ArticleCard
+                        v-for="(article, index) in articles.data"
+                        :key="index"
+                        :article="article"
+                        class="relative"
+                    />
                 </ul>
             </div>
         </div>
@@ -225,6 +230,7 @@
 <script setup>
     /** Import from vue */
     import { ref } from 'vue';
+    import route from '@/Helpers/useRoute';
 
     /** Import plugins */
     import 'vue3-carousel/dist/carousel.css';
@@ -232,6 +238,7 @@
 
     /** Import components. */
     import PageLayout from '@/Layouts/PageLayout.vue';
+    import Head from '@/Components/Head.vue';
     import Icon from '@/Components/Icon.vue';
     import SvgLoader from '@/Components/SvgLoader.vue';
     import ProjectCard from '@/Components/cards/ProjectCard.vue';
diff --git a/resources/js/Pages/Public/Organizations/Index.vue b/resources/js/Pages/Public/Organizations/Index.vue
index 151f6c54..a3a12a81 100644
--- a/resources/js/Pages/Public/Organizations/Index.vue
+++ b/resources/js/Pages/Public/Organizations/Index.vue
@@ -78,6 +78,7 @@
     import { ref } from 'vue';
     import { router } from '@inertiajs/vue3';
     import { XIcon } from '@heroicons/vue/solid';
+    import route from '@/Helpers/useRoute';
 
     import PageLayout from '@/Layouts/PageLayout.vue';
     import PaginatedGrid from '@/Components/templates/PaginatedGrid.vue';
diff --git a/resources/js/Pages/Public/Organizations/Show.vue b/resources/js/Pages/Public/Organizations/Show.vue
index 99b39297..23d4df9c 100644
--- a/resources/js/Pages/Public/Organizations/Show.vue
+++ b/resources/js/Pages/Public/Organizations/Show.vue
@@ -1,7 +1,6 @@
 <template>
     <PageLayout>
-        <!-- Inertia page head -->
-        <Head title="Organizatie" />
+        <Head :title="organization.name" :description="organization.description" :image="organization.image" />
 
         <div class="mt-4 mb-20 bg-white">
             <!-- Header -->
@@ -80,8 +79,8 @@
                                 <div>
                                     <h3 class="text-base font-semibold text-gray-600">{{ $t('ong_address') }}</h3>
                                     <p class="mt-2 text-base font-normal text-gray-500">
-                                        {{ organization.street_address }}<br/>  {{ organization.location }} <br />
-
+                                        {{ organization.street_address }}<br />
+                                        {{ organization.location }} <br />
                                     </p>
                                 </div>
                             </div>
@@ -158,8 +157,7 @@
 </template>
 
 <script setup>
-    /** Import from inertia. */
-    import { Head, Link } from '@inertiajs/vue3';
+    import Head from '@/Components/Head.vue';
 
     /** Import components. */
     import PageLayout from '@/Layouts/PageLayout.vue';
diff --git a/resources/js/Pages/Public/Projects/Gallery.vue b/resources/js/Pages/Public/Projects/Gallery.vue
index 64686595..3cad802a 100644
--- a/resources/js/Pages/Public/Projects/Gallery.vue
+++ b/resources/js/Pages/Public/Projects/Gallery.vue
@@ -3,29 +3,33 @@
         <!-- Inertia page head -->
         <Head :title="$t('gallery')" />
 
-
-        <div class="p-9 mt-4 mx-auto max-w-7xl mb-24">
-
-
+        <div class="mx-auto mt-4 mb-24 p-9 max-w-7xl">
             <div class="flex items-center gap-4">
-                <div class="bg-primary-500 w-9 h-9 rounded-lg flex items-center justify-center">
+                <div class="flex items-center justify-center rounded-lg bg-primary-500 w-9 h-9">
                     <SvgLoader class="fill-primary-500 shrink-0" name="brand_icon" />
                 </div>
-                <h1 class="text-gray-900 font-bold text-2xl">{{ $t('gallery') }}</h1>
+                <h1 class="text-2xl font-bold text-gray-900">{{ $t('gallery') }}</h1>
             </div>
 
-            <div class="group aspect-w-3 aspect-h-1 overflow-hidden rounded-lg mt-10">
-                <img src="https://plus.unsplash.com/premium_photo-1683299153726-55202102e9b5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="" class="object-cover object-center group-hover:opacity-75" />
-                <div aria-hidden="true" class="bg-gradient-to-b from-transparent to-black opacity-90 sm:absolute sm:inset-0" />
-                    <div class="flex justify-center items-center p-6 sm:absolute sm:inset-0">
-                        <h3 class="font-semibold text-white text-center flex items-center gap-4">
-                            <SvgLoader name="play"/>
-                            {{ $t('play_video') }}
-                        </h3>
-                    </div>
+            <div class="mt-10 overflow-hidden rounded-lg group aspect-w-3 aspect-h-1">
+                <img
+                    src="https://plus.unsplash.com/premium_photo-1683299153726-55202102e9b5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
+                    alt=""
+                    class="object-cover object-center group-hover:opacity-75"
+                />
+                <div
+                    aria-hidden="true"
+                    class="bg-gradient-to-b from-transparent to-black opacity-90 sm:absolute sm:inset-0"
+                />
+                <div class="flex items-center justify-center p-6 sm:absolute sm:inset-0">
+                    <h3 class="flex items-center gap-4 font-semibold text-center text-white">
+                        <SvgLoader name="play" />
+                        {{ $t('play_video') }}
+                    </h3>
+                </div>
             </div>
 
-            <div class="mt-6 grid grid-cols-1 sm:grid-cols-4 gap-6">
+            <div class="grid grid-cols-1 gap-6 mt-6 sm:grid-cols-4">
                 <div v-for="(image, index) in project.gallery" :key="index" class="h-52">
                     <img
                         :src="image"
@@ -39,12 +43,7 @@
 </template>
 
 <script setup>
-
-
-    /** Import from inertia. */
-    import { Head } from '@inertiajs/vue3';
-
-    /** Import components. */
+    import Head from '@/Components/Head.vue';
     import PageLayout from '@/Layouts/PageLayout.vue';
     import SvgLoader from '@/Components/SvgLoader.vue';
 </script>
diff --git a/resources/js/Pages/Public/Projects/Index.vue b/resources/js/Pages/Public/Projects/Index.vue
index 414b6d5f..823f61fc 100644
--- a/resources/js/Pages/Public/Projects/Index.vue
+++ b/resources/js/Pages/Public/Projects/Index.vue
@@ -114,6 +114,7 @@
 <script setup>
     import { ref } from 'vue';
     import { ViewGridIcon, LocationMarkerIcon, XIcon } from '@heroicons/vue/solid';
+    import route from '@/Helpers/useRoute';
     import PageLayout from '@/Layouts/PageLayout.vue';
     import Sort from '@/Components/filters/Sort.vue';
     import SearchFilter from '@/Components/filters/SearchFilter.vue';
diff --git a/resources/js/Pages/Public/Projects/Show.vue b/resources/js/Pages/Public/Projects/Show.vue
index b686c65d..99b1856a 100644
--- a/resources/js/Pages/Public/Projects/Show.vue
+++ b/resources/js/Pages/Public/Projects/Show.vue
@@ -1,7 +1,6 @@
 <template>
     <PageLayout>
-        <!-- Inertia page head -->
-        <Head title="Proiect" />
+        <Head :title="project.name" :description="project.description" :image="project.image" />
 
         <!-- Header -->
         <div class="flex flex-col-reverse w-full mx-auto mt-2 mb-8 lg:flex-row lg:max-w-7xl sm:mt-0 px-9">
@@ -10,15 +9,15 @@
                     <div class="flex items-center gap-2">
                         <div
                             :class="[
-                                    'w-8 h-8 rounded-lg flex items-center justify-center',
-                                    project.is_period_active ? 'bg-red-500' : 'bg-cyan-900',
-                                ]"
+                                'w-8 h-8 rounded-lg flex items-center justify-center',
+                                project.is_period_active ? 'bg-red-500' : 'bg-cyan-900',
+                            ]"
                         >
                             <SvgLoader
                                 :class="[
-                                        'shrink-0 stroke-white',
-                                        project.is_period_active ? 'fill-red-500' : 'fill-cyan-900',
-                                    ]"
+                                    'shrink-0 stroke-white',
+                                    project.is_period_active ? 'fill-red-500' : 'fill-cyan-900',
+                                ]"
                                 name="thunder"
                             />
                         </div>
@@ -89,9 +88,9 @@
                     <div class="w-full h-6 bg-gray-300">
                         <div
                             :class="[
-                                    `h-6`,
-                                    project.donations.total === project.donations.target ? 'bg-primary-500' : 'bg-cyan-900',
-                                ]"
+                                `h-6`,
+                                project.donations.total === project.donations.target ? 'bg-primary-500' : 'bg-cyan-900',
+                            ]"
                             :style="`width: ${project.donations.percentage}%`"
                         ></div>
                     </div>
@@ -226,40 +225,15 @@
                         <h3 class="text-2xl font-bold text-gray-900">{{ $t('gallery') }}</h3>
                     </div>
                     <div class="grid grid-cols-2 gap-3">
-
-                        <div class="mt-10 overflow-hidden rounded-lg group aspect-w-2 aspect-h-1"
-                             v-for="(video,index) in project.embedded_videos"
-                             :key="index"
-                             v-html="video?.html"
+                        <div
+                            class="mt-10 overflow-hidden rounded-lg group aspect-w-2 aspect-h-1"
+                            v-for="(video, index) in project.embedded_videos"
+                            :key="index"
+                            v-html="video?.html"
                         />
                     </div>
 
-                    <Vue3PictureSwipe :items="project.swipe_gallery" :options="{mainClass:'grid sm:grid-cols-1 gap-2 lg:grid-cols-4 mt-10'}" class="mt-10"></Vue3PictureSwipe>
-                    <!--                            <div-->
-                    <!--                                v-for="(image, index) in project.gallery"-->
-                    <!--                                :class="{-->
-                    <!--                            'h-full overflow-hidden rounded-lg group aspect-h-1 aspect-w-2 sm:aspect-h-3 sm:row-span-2' : ((index+1)%2===0),-->
-                    <!--                            'overflow-hidden rounded-lg group aspect-h-1 aspect-w-2 sm:aspect-none sm:relative sm:h-full' : ((index)+1%2===1),-->
-                    <!--                            }"-->
-                    <!--                                :key="index"-->
-                    <!--                            >-->
-                    <!--                                <img-->
-                    <!--                                    :src="image.url"-->
-                    <!--                                    alt=""-->
-                    <!--                                    :class="{-->
-                    <!--                                    'object-cover object-center group-hover:opacity-75': (index+1)%2===0,-->
-                    <!--                                    'object-cover object-center group-hover:opacity-75 sm:absolute sm:inset-0 sm:h-full sm:w-full': (index+1)%2===1-->
-                    <!--                                }"-->
-                    <!--                                />-->
-                    <!--                            </div>-->
-
-                    <!--                            <img v-for="(images,index) in project.gallery"-->
-                    <!--                                 :key="index"-->
-                    <!--                                 :src="images.url"-->
-                    <!--                                 alt=""-->
-                    <!--                                 class="object-cover object-center group-hover:opacity-75"-->
-                    <!--                            />-->
-
+                    <Gallery :images="project.swipe_gallery" class="mt-10" />
                 </div>
             </div>
         </div>
@@ -296,84 +270,84 @@
 </template>
 
 <script setup>
-/** Import form vue */
-import { computed, onMounted, ref } from 'vue';
-
-/** Import from inertia. */
-import { Head, Link, usePage, useForm } from '@inertiajs/vue3';
-
-
-/** Import components. */
-import PageLayout from '@/Layouts/PageLayout.vue';
-import Icon from '@/Components/Icon.vue';
-import SvgLoader from '@/Components/SvgLoader.vue';
-import Modal from '@/Components/modals/Modal.vue';
-import DonateModal from '@/Components/modals/DonateModal.vue';
-import VolunteerModal from '@/Components/modals/VolunteerModal.vue';
-import HowCanYouHelp from '@/Components/HowCanYouHelp.vue';
-import SharePage from '@/Components/SharePage.vue';
-import Vue3PictureSwipe from "vue3-picture-swipe";
-
-import LargeSquarePattern from '@/Components/patterns/LargeSquarePattern.vue';
-import { ExternalLinkIcon } from '@heroicons/vue/outline';
-
-const props = defineProps({
-    project: {
-        type: Object,
-        required: true,
-    },
-});
-onMounted(() => {
-    console.log(project);
-});
-const project = ref(props.project);
-
-/**
- * Copy embed code.
- */
-const copyEmbed = () => {
-    /** Embed iframe. */
-    const embedCode = `<iframe src="${window.location.href}" width="800px" height="600px"></iframe>`;
-
-    /** Check if navigator object exists and copy iframe. */
-    if (navigator.clipboard) {
-        navigator.clipboard
-            .writeText(embedCode)
-            .then(() => alert('Embed code copied to clipboard!'))
-            .catch(() => alert('Failed to copy embed code to clipboard!'));
-    } else {
-        /** Create textarea element. */
-        const tempInput = document.createElement('textarea');
-
-        /** Set textarea value as embed code. */
-        tempInput.value = embedCode;
-
-        /** Apend textarea to body. */
-        document.body.appendChild(tempInput);
-
-        /** Select textarea text. */
-        tempInput.select();
-
-        /** Copy textarea content. */
-        document.execCommand('copy');
-
-        /** Remove textarea. */
-        document.body.removeChild(tempInput);
-    }
-};
-
-/** Trigger volunteer modal from card. */
-const triggerVolunteer = () => {
-    document.getElementById('volunteer-active-modal').click();
-};
-
-/** Trigger donate modal from card. */
-const triggerDonate = () => {
-    if (false === props.project.is_period_active) {
-        document.getElementById('project-donation-expired').click();
-        return;
-    }
-
-    document.getElementById('donate-active-modal').click();
-};
+    /** Import form vue */
+    import { computed, onMounted, ref } from 'vue';
+
+    /** Import from inertia. */
+    import { Link, usePage, useForm } from '@inertiajs/vue3';
+    import Head from '@/Components/Head.vue';
+
+    /** Import components. */
+    import PageLayout from '@/Layouts/PageLayout.vue';
+    import Icon from '@/Components/Icon.vue';
+    import SvgLoader from '@/Components/SvgLoader.vue';
+    import Modal from '@/Components/modals/Modal.vue';
+    import DonateModal from '@/Components/modals/DonateModal.vue';
+    import VolunteerModal from '@/Components/modals/VolunteerModal.vue';
+    import HowCanYouHelp from '@/Components/HowCanYouHelp.vue';
+    import SharePage from '@/Components/SharePage.vue';
+    import Gallery from '@/Components/Gallery.vue';
+
+    import LargeSquarePattern from '@/Components/patterns/LargeSquarePattern.vue';
+    import { ExternalLinkIcon } from '@heroicons/vue/outline';
+
+    const props = defineProps({
+        project: {
+            type: Object,
+            required: true,
+        },
+    });
+    onMounted(() => {
+        console.log(project);
+    });
+    const project = ref(props.project);
+
+    /**
+     * Copy embed code.
+     */
+    const copyEmbed = () => {
+        /** Embed iframe. */
+        const embedCode = `<iframe src="${window.location.href}" width="800px" height="600px"></iframe>`;
+
+        /** Check if navigator object exists and copy iframe. */
+        if (navigator.clipboard) {
+            navigator.clipboard
+                .writeText(embedCode)
+                .then(() => alert('Embed code copied to clipboard!'))
+                .catch(() => alert('Failed to copy embed code to clipboard!'));
+        } else {
+            /** Create textarea element. */
+            const tempInput = document.createElement('textarea');
+
+            /** Set textarea value as embed code. */
+            tempInput.value = embedCode;
+
+            /** Apend textarea to body. */
+            document.body.appendChild(tempInput);
+
+            /** Select textarea text. */
+            tempInput.select();
+
+            /** Copy textarea content. */
+            document.execCommand('copy');
+
+            /** Remove textarea. */
+            document.body.removeChild(tempInput);
+        }
+    };
+
+    /** Trigger volunteer modal from card. */
+    const triggerVolunteer = () => {
+        document.getElementById('volunteer-active-modal').click();
+    };
+
+    /** Trigger donate modal from card. */
+    const triggerDonate = () => {
+        if (false === props.project.is_period_active) {
+            document.getElementById('project-donation-expired').click();
+            return;
+        }
+
+        document.getElementById('donate-active-modal').click();
+    };
 </script>
diff --git a/resources/js/Pages/Public/Regional/Edition.vue b/resources/js/Pages/Public/Regional/Edition.vue
index c1f0b5cb..db4bcf01 100644
--- a/resources/js/Pages/Public/Regional/Edition.vue
+++ b/resources/js/Pages/Public/Regional/Edition.vue
@@ -353,9 +353,11 @@
 <script setup>
     /** Import from vue */
     import { ref } from 'vue';
+    import route from '@/Helpers/useRoute';
 
     /** Import from inertia. */
-    import { Head, Link, useForm, router } from '@inertiajs/vue3';
+    import { Link, useForm, router } from '@inertiajs/vue3';
+    import Head from '@/Components/Head.vue';
 
     /** Import components. */
     import PageLayout from '@/Layouts/PageLayout.vue';
diff --git a/resources/js/Pages/Public/Regional/LastEdition.vue b/resources/js/Pages/Public/Regional/LastEdition.vue
index 14bad12e..fbcb693a 100644
--- a/resources/js/Pages/Public/Regional/LastEdition.vue
+++ b/resources/js/Pages/Public/Regional/LastEdition.vue
@@ -198,9 +198,11 @@
 <script setup>
     /** Import from vue */
     import { ref } from 'vue';
+    import route from '@/Helpers/useRoute';
 
     /** Import from inertia. */
-    import { Head, Link, useForm, router } from '@inertiajs/vue3';
+    import { Link, useForm, router } from '@inertiajs/vue3';
+    import Head from '@/Components/Head.vue';
 
     /** Import components. */
     import PageLayout from '@/Layouts/PageLayout.vue';
diff --git a/resources/js/Pages/Public/Regional/Project.vue b/resources/js/Pages/Public/Regional/Project.vue
index 9ac32a98..14e5116b 100644
--- a/resources/js/Pages/Public/Regional/Project.vue
+++ b/resources/js/Pages/Public/Regional/Project.vue
@@ -242,7 +242,8 @@
     import { computed, onMounted, ref } from 'vue';
 
     /** Import from inertia. */
-    import { Head, Link, usePage, useForm } from '@inertiajs/vue3';
+    import { Link, usePage, useForm } from '@inertiajs/vue3';
+    import Head from '@/Components/Head.vue';
 
     /** Import components. */
     import PageLayout from '@/Layouts/PageLayout.vue';
@@ -251,7 +252,7 @@
     import DonateModal from '@/Components/modals/DonateModal.vue';
     import HowCanYouHelp from '@/Components/HowCanYouHelp.vue';
     import SharePage from '@/Components/SharePage.vue';
-    import Gallery from '@/Components/gallery/Gallery.vue';
+    import Gallery from '@/Components/Gallery.vue';
 
     import LargeSquarePattern from '@/Components/patterns/LargeSquarePattern.vue';
 
diff --git a/resources/js/Pages/Public/Regional/Regional.vue b/resources/js/Pages/Public/Regional/Regional.vue
index de06f979..9e4aa92c 100644
--- a/resources/js/Pages/Public/Regional/Regional.vue
+++ b/resources/js/Pages/Public/Regional/Regional.vue
@@ -222,9 +222,11 @@
 <script setup>
     /** Import from vue */
     import { ref } from 'vue';
+    import route from '@/Helpers/useRoute';
 
     /** Import from inertia. */
-    import { Head, Link, useForm, router } from '@inertiajs/vue3';
+    import { Link, useForm, router } from '@inertiajs/vue3';
+    import Head from '@/Components/Head.vue';
 
     /** Import components. */
     import PageLayout from '@/Layouts/PageLayout.vue';
diff --git a/resources/js/Pages/Public/Regional/Rules.vue b/resources/js/Pages/Public/Regional/Rules.vue
index bcbeeff7..fdfc476f 100644
--- a/resources/js/Pages/Public/Regional/Rules.vue
+++ b/resources/js/Pages/Public/Regional/Rules.vue
@@ -11,13 +11,10 @@
 </template>
 
 <script setup>
-/** Import from inertia. */
-import { Head } from '@inertiajs/vue3';
+    import Head from '@/Components/Head.vue';
+    import PageLayout from '@/Layouts/PageLayout.vue';
 
-/** Import components. */
-import PageLayout from '@/Layouts/PageLayout.vue';
-
-const props = defineProps({
-    content: Object
-})
+    const props = defineProps({
+        content: Object,
+    });
 </script>
diff --git a/resources/js/Pages/Public/Website/About.vue b/resources/js/Pages/Public/Website/About.vue
index 9a356862..31325707 100644
--- a/resources/js/Pages/Public/Website/About.vue
+++ b/resources/js/Pages/Public/Website/About.vue
@@ -2,16 +2,12 @@
     <PageLayout>
         <!-- Inertia page head -->
         <Head :title="$t('thank_you')" />
-        <div class="p-9 mx-auto max-w-7xl mt-4 mb-10">
-
-        </div>
+        <div class="mx-auto mt-4 mb-10 p-9 max-w-7xl"></div>
     </PageLayout>
 </template>
 
 <script setup>
-    /** Import from inertia. */
-    import { Head, Link } from '@inertiajs/vue3';
-
-    /** Import components. */
+    import { Link } from '@inertiajs/vue3';
+    import Head from '@/Components/Head.vue';
     import PageLayout from '@/Layouts/PageLayout.vue';
 </script>
diff --git a/resources/js/Pages/Public/Website/Contact.vue b/resources/js/Pages/Public/Website/Contact.vue
index 50808ab3..835cafc1 100644
--- a/resources/js/Pages/Public/Website/Contact.vue
+++ b/resources/js/Pages/Public/Website/Contact.vue
@@ -70,10 +70,9 @@
 </template>
 
 <script setup>
-    /** Import from inertia. */
-    import { Head, useForm } from '@inertiajs/vue3';
-
-    /** Import components. */
+    import { useForm } from '@inertiajs/vue3';
+    import route from '@/Helpers/useRoute';
+    import Head from '@/Components/Head.vue';
     import PageLayout from '@/Layouts/PageLayout.vue';
     import SvgLoader from '@/Components/SvgLoader.vue';
     import Input from '@/Components/form/Input.vue';
diff --git a/resources/js/Pages/Public/Website/Faqs.vue b/resources/js/Pages/Public/Website/Faqs.vue
index e4464225..b66a2145 100644
--- a/resources/js/Pages/Public/Website/Faqs.vue
+++ b/resources/js/Pages/Public/Website/Faqs.vue
@@ -29,10 +29,8 @@
 </template>
 
 <script setup>
-    /** Import from inertia. */
-    import { Head, Link } from '@inertiajs/vue3';
-
-    /** Import components. */
+    import { Link } from '@inertiajs/vue3';
+    import Head from '@/Components/Head.vue';
     import PageLayout from '@/Layouts/PageLayout.vue';
     import Faqs from '@/Components/faqs/Faqs.vue';
     import Icon from '@/Components/Icon.vue';
diff --git a/resources/js/Pages/Public/Website/Policy.vue b/resources/js/Pages/Public/Website/Policy.vue
index e1ee05de..514cc11b 100644
--- a/resources/js/Pages/Public/Website/Policy.vue
+++ b/resources/js/Pages/Public/Website/Policy.vue
@@ -2,18 +2,13 @@
     <PageLayout>
         <!-- Inertia page head -->
         <Head :title="$t('thank_you')" />
-        <div class="p-9 mt-4 mx-auto max-w-7xl mb-10">
-
-
-        </div>
+        <div class="mx-auto mt-4 mb-10 p-9 max-w-7xl"></div>
     </PageLayout>
 </template>
 
 <script setup>
+    import { Link } from '@inertiajs/vue3';
+    import Head from '@/Components/Head.vue';
 
-    /** Import from inertia. */
-    import { Head, Link } from '@inertiajs/vue3';
-
-    /** Import components. */
     import PageLayout from '@/Layouts/PageLayout.vue';
 </script>
diff --git a/resources/js/Pages/Public/Website/Terms.vue b/resources/js/Pages/Public/Website/Terms.vue
index c7e2141b..31325707 100644
--- a/resources/js/Pages/Public/Website/Terms.vue
+++ b/resources/js/Pages/Public/Website/Terms.vue
@@ -2,16 +2,12 @@
     <PageLayout>
         <!-- Inertia page head -->
         <Head :title="$t('thank_you')" />
-        <div class="mx-auto mt-4 mb-10 p-9 max-w-7xl">
-
-        </div>
+        <div class="mx-auto mt-4 mb-10 p-9 max-w-7xl"></div>
     </PageLayout>
 </template>
 
 <script setup>
-    /** Import from inertia. */
-    import { Head, Link } from '@inertiajs/vue3';
-
-    /** Import components. */
+    import { Link } from '@inertiajs/vue3';
+    import Head from '@/Components/Head.vue';
     import PageLayout from '@/Layouts/PageLayout.vue';
 </script>
diff --git a/resources/js/app.js b/resources/js/app.js
index e8f8adc3..b8ce0183 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -1,20 +1,18 @@
-import { createApp, h } from 'vue';
-import { createInertiaApp, Head, Link } from '@inertiajs/vue3';
+import { createSSRApp, h } from 'vue';
+import { createInertiaApp, Link } from '@inertiajs/vue3';
 import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
-import { ZiggyVue } from 'ziggy-js/dist/vue';
 import { i18nVue } from 'laravel-vue-i18n';
+import { ZiggyVue } from '@/Helpers/useRoute';
 
 import 'virtual:svg-icons-register';
 
 import.meta.glob(['../images/**']);
 
 createInertiaApp({
-    title: (title) => `${title} - Bursa Binelui`,
     resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
-
     setup({ el, App, props, plugin }) {
-        return createApp({ render: () => h(App, props) })
-            .use(ZiggyVue)
+        return createSSRApp({ render: () => h(App, props) })
+            .use(ZiggyVue, props.initialPage.props.ziggy)
             .use(i18nVue, {
                 resolve: async lang => {
                     const langs = import.meta.glob('../../lang/*.json');
@@ -22,9 +20,8 @@ createInertiaApp({
                 }
             })
             .use(plugin)
-            .component('Head', Head)
             .component('Link', Link)
-            .mount(el);
+            .mount(el)
     },
     progress: {
         color: '#53BFBF',
diff --git a/resources/js/ssr.js b/resources/js/ssr.js
index 1a79283f..33c65418 100644
--- a/resources/js/ssr.js
+++ b/resources/js/ssr.js
@@ -1,31 +1,35 @@
 import { createSSRApp, h } from 'vue';
 import { renderToString } from '@vue/server-renderer';
-import { createInertiaApp } from '@inertiajs/vue3';
+import { createInertiaApp, Link } from '@inertiajs/vue3';
 import createServer from '@inertiajs/vue3/server';
 import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
-import { ZiggyVue } from 'ziggy-js/dist/vue';
 import { i18nVue } from 'laravel-vue-i18n';
+import { ZiggyVue } from '@/Helpers/useRoute';
 
 createServer((page) =>
     createInertiaApp({
         page,
         render: renderToString,
         title: (title) => `${title} - Bursa Binelui`,
-        resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
+        resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue', { eager: true })),
         setup({ App, props, plugin }) {
             return createSSRApp({ render: () => h(App, props) })
-                .use(plugin)
                 .use(ZiggyVue, {
-                    ...page.props.ziggy,
-                    location: new URL(page.props.ziggy.location),
+                    // Pull the Ziggy config off of the props.
+                    ...props.initialPage.props.ziggy,
+                    // Build the location, since there is
+                    // no window.location in Node.
+                    location: new URL(props.initialPage.props.ziggy.url)
                 })
                 .use(i18nVue, {
-                    // lang: 'ro',
+                    lang: props.initialPage.props.locales.current,
                     resolve: lang => {
                         const langs = import.meta.glob('../../lang/*.json', { eager: true });
                         return langs[`../../lang/${lang}.json`].default;
-                    },
-                });
+                    }
+                })
+                .use(plugin)
+                .component('Link', Link)
         },
     })
 );
diff --git a/resources/views/app.blade.php b/resources/views/app.blade.php
index 3e9fd690..2fa095be 100644
--- a/resources/views/app.blade.php
+++ b/resources/views/app.blade.php
@@ -8,9 +8,8 @@
     <title inertia>{{ config('app.name', 'Laravel') }}</title>
 
     <!-- Scripts -->
-    @routes
-    @vite(['resources/css/app.css', 'resources/js/app.js', "resources/js/Pages/{$page['component']}.vue"])
     @inertiaHead
+    @vite(['resources/css/app.css', 'resources/js/app.js', "resources/js/Pages/{$page['component']}.vue"])
 </head>
 
 <body class="font-sans antialiased">
diff --git a/vite.config.js b/vite.config.js
index a91e77b6..68d09c25 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,5 +1,5 @@
 import { defineConfig } from 'vite';
-import { resolve, dirname } from 'node:path';
+import { resolve } from 'node:path';
 import laravel from 'laravel-vite-plugin';
 import vue from '@vitejs/plugin-vue';
 import svgLoader from 'vite-svg-loader';