From 5aabc9b5fb42ca8914ff1ddf151bea189ea04beb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bahad=C4=B1r=20Sofuo=C4=9Flu?= <bahadirsofuoglu@gmail.com>
Date: Fri, 4 Nov 2022 12:10:41 +0300
Subject: [PATCH] Pages added

---
 package-lock.json                          |  14 +
 package.json                               |   1 +
 src/assets/demo/styles/documentation.scss  |  54 ++
 src/layout/AppCodeHighlight.js             |  16 +
 src/main.js                                |   3 +
 src/router/index.js                        |  78 +-
 src/views/demo/Chart.vue                   | 357 ---------
 src/views/pages/Landing.vue                | 425 +++++++++++
 src/views/pages/auth/Access.vue            |  25 +
 src/views/pages/auth/Error.vue             |  25 +
 src/views/pages/auth/Login.vue             |  62 ++
 src/views/{demo => uikit}/Button.vue       |   0
 src/views/uikit/Chart.vue                  | 349 +++++++++
 src/views/{demo => uikit}/File.vue         |   0
 src/views/{demo => uikit}/FloatLabel.vue   |   0
 src/views/{demo => uikit}/FormLayout.vue   |   0
 src/views/{demo => uikit}/Icons.vue        |   0
 src/views/{demo => uikit}/Input.vue        |   0
 src/views/{demo => uikit}/InvalidState.vue |   0
 src/views/{demo => uikit}/List.vue         |   0
 src/views/{demo => uikit}/Media.vue        |   0
 src/views/{demo => uikit}/Menu.vue         |   0
 src/views/{demo => uikit}/Messages.vue     |   0
 src/views/{demo => uikit}/Misc.vue         |   0
 src/views/{demo => uikit}/Overlay.vue      |   0
 src/views/{demo => uikit}/Panels.vue       |   0
 src/views/{demo => uikit}/Table.vue        |   0
 src/views/{demo => uikit}/Tree.vue         |   0
 src/views/utilities/Blocks.vue             | 804 +++++++++++++++++++++
 src/views/utilities/Icons.vue              | 137 ++++
 30 files changed, 1964 insertions(+), 386 deletions(-)
 create mode 100644 src/assets/demo/styles/documentation.scss
 create mode 100644 src/layout/AppCodeHighlight.js
 delete mode 100644 src/views/demo/Chart.vue
 create mode 100644 src/views/pages/Landing.vue
 create mode 100644 src/views/pages/auth/Access.vue
 create mode 100644 src/views/pages/auth/Error.vue
 create mode 100644 src/views/pages/auth/Login.vue
 rename src/views/{demo => uikit}/Button.vue (100%)
 create mode 100644 src/views/uikit/Chart.vue
 rename src/views/{demo => uikit}/File.vue (100%)
 rename src/views/{demo => uikit}/FloatLabel.vue (100%)
 rename src/views/{demo => uikit}/FormLayout.vue (100%)
 rename src/views/{demo => uikit}/Icons.vue (100%)
 rename src/views/{demo => uikit}/Input.vue (100%)
 rename src/views/{demo => uikit}/InvalidState.vue (100%)
 rename src/views/{demo => uikit}/List.vue (100%)
 rename src/views/{demo => uikit}/Media.vue (100%)
 rename src/views/{demo => uikit}/Menu.vue (100%)
 rename src/views/{demo => uikit}/Messages.vue (100%)
 rename src/views/{demo => uikit}/Misc.vue (100%)
 rename src/views/{demo => uikit}/Overlay.vue (100%)
 rename src/views/{demo => uikit}/Panels.vue (100%)
 rename src/views/{demo => uikit}/Table.vue (100%)
 rename src/views/{demo => uikit}/Tree.vue (100%)
 create mode 100644 src/views/utilities/Blocks.vue
 create mode 100644 src/views/utilities/Icons.vue

diff --git a/package-lock.json b/package-lock.json
index dd4e397..2936256 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
                 "primeflex": "^3.2.1",
                 "primeicons": "^6.0.1",
                 "primevue": "^3.18.1",
+                "prismjs": "^1.29.0",
                 "vue": "^3.2.41",
                 "vue-router": "^4.1.5"
             },
@@ -1846,6 +1847,14 @@
                 "vue": "^3.0.0"
             }
         },
+        "node_modules/prismjs": {
+            "version": "1.29.0",
+            "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
+            "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==",
+            "engines": {
+                "node": ">=6"
+            }
+        },
         "node_modules/punycode": {
             "version": "2.1.1",
             "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
@@ -3576,6 +3585,11 @@
             "integrity": "sha512-5UYNooA6Qqx0iGaRxPUYLPamxRn6eQKMNU3wbqGyxWhoc944rMaOiT9mVQWhavPlKCgs7FY8SNhsDzqV4aRCxA==",
             "requires": {}
         },
+        "prismjs": {
+            "version": "1.29.0",
+            "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
+            "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q=="
+        },
         "punycode": {
             "version": "2.1.1",
             "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
diff --git a/package.json b/package.json
index 7f46791..709cbef 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
         "primeflex": "^3.2.1",
         "primeicons": "^6.0.1",
         "primevue": "^3.18.1",
+        "prismjs": "^1.29.0",
         "vue": "^3.2.41",
         "vue-router": "^4.1.5"
     },
diff --git a/src/assets/demo/styles/documentation.scss b/src/assets/demo/styles/documentation.scss
new file mode 100644
index 0000000..199c250
--- /dev/null
+++ b/src/assets/demo/styles/documentation.scss
@@ -0,0 +1,54 @@
+pre[class*='language-'] {
+    &:before,
+    &:after {
+        display: none !important;
+    }
+
+    code {
+        border-left: 6px solid var(--surface-border) !important;
+        box-shadow: none !important;
+        background: var(--surface-ground) !important;
+        margin: 1em 0;
+        color: var(--text-color);
+        font-size: 14px;
+    }
+
+    .token {
+        &.tag,
+        &.keyword {
+            color: #2196f3 !important;
+        }
+
+        &.attr-name,
+        &.attr-string {
+            color: #2196f3 !important;
+        }
+
+        &.attr-value {
+            color: #4caf50 !important;
+        }
+
+        &.punctuation {
+            color: var(--text-color);
+        }
+
+        &.operator,
+        &.string {
+            background: transparent;
+        }
+    }
+}
+
+i:not([class~='pi']) {
+    background-color: transparent;
+    color: #2196f3;
+    font-family: Monaco, courier, monospace;
+    font-style: normal;
+    font-size: 12px;
+    font-weight: 500;
+    padding: 0 4px;
+    letter-spacing: 0.5px;
+    font-weight: 600;
+    margin: 0 2px;
+    display: inline-flex;
+}
diff --git a/src/layout/AppCodeHighlight.js b/src/layout/AppCodeHighlight.js
new file mode 100644
index 0000000..efec602
--- /dev/null
+++ b/src/layout/AppCodeHighlight.js
@@ -0,0 +1,16 @@
+import Prism from 'prismjs';
+
+const CodeHighlight = {
+    beforeMount (el, binding) {
+        const modifiers = binding.modifiers;
+        const value = binding.value;
+
+        if (modifiers.script || value === 'script') el.className = 'language-javascript';
+        else if (modifiers.css || value === 'css') el.className = 'language-css';
+        else el.className = 'language-markup';
+
+        Prism.highlightElement(el.children[0]);
+    }
+};
+
+export default CodeHighlight;
diff --git a/src/main.js b/src/main.js
index ea5eba6..8ecc591 100644
--- a/src/main.js
+++ b/src/main.js
@@ -100,6 +100,8 @@ import TreeTable from 'primevue/treetable';
 import TriStateCheckbox from 'primevue/tristatecheckbox';
 import VirtualScroller from 'primevue/virtualscroller';
 
+import CodeHighlight from '@/layout/AppCodeHighlight';
+
 import '@/assets/styles.scss';
 
 const app = createApp(App);
@@ -114,6 +116,7 @@ app.directive('tooltip', Tooltip);
 app.directive('badge', BadgeDirective);
 app.directive('ripple', Ripple);
 app.directive('styleclass', StyleClass);
+app.directive('code', CodeHighlight);
 
 app.component('Accordion', Accordion);
 app.component('AccordionTab', AccordionTab);
diff --git a/src/router/index.js b/src/router/index.js
index 378614a..20a758a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -16,95 +16,115 @@ const router = createRouter({
                 {
                     path: '/uikit/formlayout',
                     name: 'formlayout',
-                    component: () => import('@/views/demo/FormLayout.vue')
+                    component: () => import('@/views/uikit/FormLayout.vue')
                 },
                 {
                     path: '/uikit/input',
                     name: 'input',
-                    component: () => import('@/views/demo/Input.vue')
+                    component: () => import('@/views/uikit/Input.vue')
                 },
                 {
                     path: '/uikit/floatlabel',
                     name: 'floatlabel',
-                    component: () => import('@/views/demo/FloatLabel.vue')
+                    component: () => import('@/views/uikit/FloatLabel.vue')
                 },
                 {
                     path: '/uikit/invalidstate',
                     name: 'invalidstate',
-                    component: () => import('@/views/demo/InvalidState.vue')
+                    component: () => import('@/views/uikit/InvalidState.vue')
                 },
                 {
                     path: '/uikit/button',
                     name: 'button',
-                    component: () => import('@/views/demo/Button.vue')
+                    component: () => import('@/views/uikit/Button.vue')
                 },
                 {
                     path: '/uikit/table',
                     name: 'table',
-                    component: () => import('@/views/demo/Table.vue')
+                    component: () => import('@/views/uikit/Table.vue')
                 },
                 {
                     path: '/uikit/list',
                     name: 'list',
-                    component: () => import('@/views/demo/List.vue')
+                    component: () => import('@/views/uikit/List.vue')
                 },
                 {
                     path: '/uikit/tree',
                     name: 'tree',
-                    component: () => import('@/views/demo/Tree.vue')
+                    component: () => import('@/views/uikit/Tree.vue')
                 },
                 {
                     path: '/uikit/panel',
                     name: 'panel',
-                    component: () => import('@/views/demo/Panels.vue')
+                    component: () => import('@/views/uikit/Panels.vue')
                 },
 
                 {
                     path: '/uikit/overlay',
                     name: 'overlay',
-                    component: () => import('@/views/demo/Overlay.vue')
+                    component: () => import('@/views/uikit/Overlay.vue')
                 },
                 {
                     path: '/uikit/media',
                     name: 'media',
-                    component: () => import('@/views/demo/Media.vue')
+                    component: () => import('@/views/uikit/Media.vue')
                 },
                 {
                     path: '/uikit/menu',
                     name: 'menu',
-                    component: () => import('@/views/demo/Menu.vue')
+                    component: () => import('@/views/uikit/Menu.vue')
                 },
                 {
                     path: '/uikit/message',
                     name: 'message',
-                    component: () => import('@/views/demo/Messages.vue')
+                    component: () => import('@/views/uikit/Messages.vue')
                 },
                 {
                     path: '/uikit/file',
                     name: 'file',
-                    component: () => import('@/views/demo/File.vue')
+                    component: () => import('@/views/uikit/File.vue')
+                },
+                {
+                    path: '/uikit/charts',
+                    name: 'charts',
+                    component: () => import('@/views/uikit/Chart.vue')
                 },
                 {
                     path: '/uikit/misc',
                     name: 'misc',
-                    component: () => import('@/views/demo/Misc.vue')
-                }
-                /*
-               
-               
-           
-               
-                {
-                    path: '/uikit/overlay',
-                    name: 'overlay',
-                    component: () => import('./components/OverlayDemo.vue')
+                    component: () => import('@/views/uikit/Misc.vue')
                 },
                 {
-                    path: '/uikit/media',
-                    name: 'media',
-                    component: () => import('./components/MediaDemo.vue')
-                } */
+                    path: '/utilities/blocks',
+                    name: 'blocks',
+                    component: () => import('@/views/utilities/Blocks.vue')
+                },
+                {
+                    path: '/utilities/icons',
+                    name: 'icons',
+                    component: () => import('@/views/utilities/Icons.vue')
+                }
             ]
+        },
+        {
+            path: '/landing',
+            name: 'landing',
+            component: () => import('@/views/pages/Landing.vue')
+        },
+        {
+            path: '/auth/login',
+            name: 'login',
+            component: () => import('@/views/pages/Landing.vue')
+        },
+        {
+            path: '/auth/access',
+            name: 'accessDenied',
+            component: () => import('@/views/pages/auth/Access.vue')
+        },
+        {
+            path: '/auth/error',
+            name: 'error',
+            component: () => import('@/views/pages/Error.vue')
         }
     ]
 });
diff --git a/src/views/demo/Chart.vue b/src/views/demo/Chart.vue
deleted file mode 100644
index db0cb8c..0000000
--- a/src/views/demo/Chart.vue
+++ /dev/null
@@ -1,357 +0,0 @@
-<template>
-    <div class="grid p-fluid">
-        <div class="col-12 lg:col-6">
-            <div class="card">
-                <h5>Linear Chart</h5>
-                <Chart type="line" :data="lineData" :options="lineOptions" />
-            </div>
-
-            <div class="card flex flex-column align-items-center">
-                <h5 class="align-self-start">Pie Chart</h5>
-                <Chart type="pie" :data="pieData" :options="pieOptions" style="width: 50%" />
-            </div>
-
-            <div class="card flex flex-column align-items-center">
-                <h5 class="align-self-start">Polar Area Chart</h5>
-                <Chart type="polarArea" :data="polarData" :options="polarOptions" style="width: 50%" />
-            </div>
-        </div>
-        <div class="col-12 lg:col-6">
-            <div class="card">
-                <h5>Bar Chart</h5>
-                <Chart type="bar" :data="barData" :options="barOptions" />
-            </div>
-
-            <div class="card flex flex-column align-items-center">
-                <h5 class="align-self-start">Doughnut Chart</h5>
-                <Chart type="doughnut" :data="pieData" :options="pieOptions" style="width: 50%" />
-            </div>
-
-            <div class="card flex flex-column align-items-center">
-                <h5 class="align-self-start">Radar Chart</h5>
-                <Chart type="radar" :data="radarData" :options="radarOptions" style="width: 50%" />
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-import EventBus from '@/AppEventBus';
-
-export default {
-    themeChangeListener: null,
-    mounted() {
-        this.themeChangeListener = (event) => {
-            if (event.dark) this.applyDarkTheme();
-            else this.applyLightTheme();
-        };
-        EventBus.on('change-theme', this.themeChangeListener);
-
-        if (this.isDarkTheme()) {
-            this.applyDarkTheme();
-        } else {
-            this.applyLightTheme();
-        }
-    },
-    beforeUnmount() {
-        EventBus.off('change-theme', this.themeChangeListener);
-    },
-    data() {
-        return {
-            lineData: {
-                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-                datasets: [
-                    {
-                        label: 'First Dataset',
-                        data: [65, 59, 80, 81, 56, 55, 40],
-                        fill: false,
-                        backgroundColor: '#2f4860',
-                        borderColor: '#2f4860',
-                        tension: 0.4
-                    },
-                    {
-                        label: 'Second Dataset',
-                        data: [28, 48, 40, 19, 86, 27, 90],
-                        fill: false,
-                        backgroundColor: '#00bb7e',
-                        borderColor: '#00bb7e',
-                        tension: 0.4
-                    }
-                ]
-            },
-            pieData: {
-                labels: ['A', 'B', 'C'],
-                datasets: [
-                    {
-                        data: [300, 50, 100],
-                        backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
-                        hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
-                    }
-                ]
-            },
-            polarData: {
-                datasets: [
-                    {
-                        data: [11, 16, 7, 3, 14],
-                        backgroundColor: ['#FF6384', '#4BC0C0', '#FFCE56', '#E7E9ED', '#36A2EB'],
-                        label: 'My dataset'
-                    }
-                ],
-                labels: ['Red', 'Green', 'Yellow', 'Grey', 'Blue']
-            },
-            barData: {
-                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-                datasets: [
-                    {
-                        label: 'My First dataset',
-                        backgroundColor: '#2f4860',
-                        data: [65, 59, 80, 81, 56, 55, 40]
-                    },
-                    {
-                        label: 'My Second dataset',
-                        backgroundColor: '#00bb7e',
-                        data: [28, 48, 40, 19, 86, 27, 90]
-                    }
-                ]
-            },
-            radarData: {
-                labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
-                datasets: [
-                    {
-                        label: 'My First dataset',
-                        backgroundColor: 'rgba(179,181,198,0.2)',
-                        borderColor: 'rgba(179,181,198,1)',
-                        pointBackgroundColor: 'rgba(179,181,198,1)',
-                        pointBorderColor: '#fff',
-                        pointHoverBackgroundColor: '#fff',
-                        pointHoverBorderColor: 'rgba(179,181,198,1)',
-                        data: [65, 59, 90, 81, 56, 55, 40]
-                    },
-                    {
-                        label: 'My Second dataset',
-                        backgroundColor: 'rgba(255,99,132,0.2)',
-                        borderColor: 'rgba(255,99,132,1)',
-                        pointBackgroundColor: 'rgba(255,99,132,1)',
-                        pointBorderColor: '#fff',
-                        pointHoverBackgroundColor: '#fff',
-                        pointHoverBorderColor: 'rgba(255,99,132,1)',
-                        data: [28, 48, 40, 19, 96, 27, 100]
-                    }
-                ]
-            },
-            lineOptions: null,
-            pieOptions: null,
-            polarOptions: null,
-            barOptions: null,
-            radarOptions: null
-        };
-    },
-    methods: {
-        isDarkTheme() {
-            return this.$appState.darkTheme === true;
-        },
-        applyLightTheme() {
-            this.lineOptions = {
-                plugins: {
-                    legend: {
-                        labels: {
-                            color: '#495057'
-                        }
-                    }
-                },
-                scales: {
-                    x: {
-                        ticks: {
-                            color: '#495057'
-                        },
-                        grid: {
-                            color: '#ebedef'
-                        }
-                    },
-                    y: {
-                        ticks: {
-                            color: '#495057'
-                        },
-                        grid: {
-                            color: '#ebedef'
-                        }
-                    }
-                }
-            };
-
-            this.barOptions = {
-                plugins: {
-                    legend: {
-                        labels: {
-                            color: '#495057'
-                        }
-                    }
-                },
-                scales: {
-                    x: {
-                        ticks: {
-                            color: '#495057'
-                        },
-                        grid: {
-                            color: '#ebedef'
-                        }
-                    },
-                    y: {
-                        ticks: {
-                            color: '#495057'
-                        },
-                        grid: {
-                            color: '#ebedef'
-                        }
-                    }
-                }
-            };
-
-            this.pieOptions = {
-                plugins: {
-                    legend: {
-                        labels: {
-                            color: '#495057'
-                        }
-                    }
-                }
-            };
-
-            this.polarOptions = {
-                plugins: {
-                    legend: {
-                        labels: {
-                            color: '#495057'
-                        }
-                    }
-                },
-                scales: {
-                    r: {
-                        grid: {
-                            color: '#ebedef'
-                        }
-                    }
-                }
-            };
-
-            this.radarOptions = {
-                plugins: {
-                    legend: {
-                        labels: {
-                            color: '#495057'
-                        }
-                    }
-                },
-                scales: {
-                    r: {
-                        grid: {
-                            color: '#ebedef'
-                        }
-                    }
-                }
-            };
-        },
-        applyDarkTheme() {
-            this.lineOptions = {
-                plugins: {
-                    legend: {
-                        labels: {
-                            color: '#ebedef'
-                        }
-                    }
-                },
-                scales: {
-                    x: {
-                        ticks: {
-                            color: '#ebedef'
-                        },
-                        grid: {
-                            color: 'rgba(160, 167, 181, .3)'
-                        }
-                    },
-                    y: {
-                        ticks: {
-                            color: '#ebedef'
-                        },
-                        grid: {
-                            color: 'rgba(160, 167, 181, .3)'
-                        }
-                    }
-                }
-            };
-
-            this.barOptions = {
-                plugins: {
-                    legend: {
-                        labels: {
-                            color: '#ebedef'
-                        }
-                    }
-                },
-                scales: {
-                    x: {
-                        ticks: {
-                            color: '#ebedef'
-                        },
-                        grid: {
-                            color: 'rgba(160, 167, 181, .3)'
-                        }
-                    },
-                    y: {
-                        ticks: {
-                            color: '#ebedef'
-                        },
-                        grid: {
-                            color: 'rgba(160, 167, 181, .3)'
-                        }
-                    }
-                }
-            };
-
-            this.pieOptions = {
-                plugins: {
-                    legend: {
-                        labels: {
-                            color: '#ebedef'
-                        }
-                    }
-                }
-            };
-
-            this.polarOptions = {
-                plugins: {
-                    legend: {
-                        labels: {
-                            color: '#ebedef'
-                        }
-                    }
-                },
-                scales: {
-                    r: {
-                        grid: {
-                            color: 'rgba(160, 167, 181, .3)'
-                        }
-                    }
-                }
-            };
-
-            this.radarOptions = {
-                plugins: {
-                    legend: {
-                        labels: {
-                            color: '#ebedef'
-                        }
-                    }
-                },
-                scales: {
-                    r: {
-                        grid: {
-                            color: 'rgba(160, 167, 181, .3)'
-                        }
-                    }
-                }
-            };
-        }
-    }
-};
-</script>
diff --git a/src/views/pages/Landing.vue b/src/views/pages/Landing.vue
new file mode 100644
index 0000000..a6d86f9
--- /dev/null
+++ b/src/views/pages/Landing.vue
@@ -0,0 +1,425 @@
+<template>
+    <div class="surface-0 overflow-hidden">
+        <div class="py-4 px-4 mx-0 md:mx-6 lg:mx-8 lg:px-8 flex align-items-center justify-content-between relative lg:static">
+            <router-link to="/" class="flex align-items-center"> <img :src="logoUrl()" alt="Sakai Logo" height="50" class="mr-0 lg:mr-2" /><span class="text-900 font-medium text-2xl line-height-3 mr-8">SAKAI</span> </router-link>
+            <a class="cursor-pointer block lg:hidden text-700 p-ripple" v-ripple v-styleclass="{ selector: '@next', enterClass: 'hidden', leaveToClass: 'hidden', hideOnOutsideClick: true }">
+                <i class="pi pi-bars text-4xl"></i>
+            </a>
+            <div class="surface-0 align-items-center flex-grow-1 justify-content-between hidden lg:flex absolute lg:static w-full left-0 px-6 lg:px-0 z-2" style="top: 92%">
+                <ul class="list-none p-0 m-0 flex lg:align-items-center select-none flex-column lg:flex-row cursor-pointer">
+                    <li>
+                        <a @click="smoothScroll('#hero')" class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3 p-ripple" v-ripple>
+                            <span>Home</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a @click="smoothScroll('#features')" class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3 p-ripple" v-ripple>
+                            <span>Features</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a @click="smoothScroll('#highlight')" class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3 p-ripple" v-ripple>
+                            <span>Highlight</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a @click="smoothScroll('#pricing')" class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3 p-ripple" v-ripple>
+                            <span>Pricing</span>
+                        </a>
+                    </li>
+                </ul>
+                <div class="flex justify-content-between lg:block border-top-1 lg:border-top-none surface-border py-3 lg:py-0 mt-3 lg:mt-0">
+                    <Button label="Login" class="p-button-text p-button-rounded border-none font-light line-height-2 text-blue-500"></Button>
+                    <Button label="Register" class="p-button-rounded border-none ml-5 font-light text-white line-height-2 bg-blue-500"></Button>
+                </div>
+            </div>
+        </div>
+
+        <div class="grid py-4 px-4 lg:px-8 relative" id="hero">
+            <div class="mx-4 md:mx-8 mt-0 md:mt-4">
+                <h1 class="text-6xl font-bold text-gray-900 line-height-2"><span class="font-light block">Eu sem integer</span>eget magna fermentum</h1>
+                <p class="font-normal text-2xl line-height-3 md:mt-3 text-gray-700">Sed blandit libero volutpat sed cras. Fames ac turpis egestas integer. Placerat in egestas erat...</p>
+                <Button label="Get Started" class="p-button-rounded text-xl border-none mt-5 bg-blue-500 font-normal text-white line-height-3 px-3"></Button>
+            </div>
+            <img src="layout/images/screen-1.png" class="bottom-0" alt="hero screen" style="right: 10%" />
+        </div>
+
+        <div class="py-4 px-4 lg:px-8 mt-5 mx-0 lg:mx-8" id="features">
+            <div class="grid justify-content-center">
+                <div class="col-12 text-center mt-8 mb-4">
+                    <h2 class="text-900 font-normal mb-2">Marvelous Features</h2>
+                    <span class="text-600 text-2xl">Placerat in egestas erat...</span>
+                </div>
+
+                <div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 lg:pb-5 mt-4 lg:mt-0">
+                    <div style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(253, 228, 165, 0.2), rgba(187, 199, 205, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2), rgba(187, 199, 205, 0.2))">
+                        <div class="p-3 surface-card h-full" style="border-radius: 8px">
+                            <div class="flex align-items-center justify-content-center bg-yellow-200 mb-3" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
+                                <i class="pi pi-fw pi-users text-2xl text-yellow-700"></i>
+                            </div>
+                            <h5 class="mb-2 text-900">Easy to Use</h5>
+                            <span class="text-600">Posuere morbi leo urna molestie.</span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 lg:pb-5 mt-4 lg:mt-0">
+                    <div style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(145, 226, 237, 0.2), rgba(251, 199, 145, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2), rgba(172, 180, 223, 0.2))">
+                        <div class="p-3 surface-card h-full" style="border-radius: 8px">
+                            <div class="flex align-items-center justify-content-center bg-cyan-200 mb-3" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
+                                <i class="pi pi-fw pi-palette text-2xl text-cyan-700"></i>
+                            </div>
+                            <h5 class="mb-2 text-900">Fresh Design</h5>
+                            <span class="text-600">Semper risus in hendrerit.</span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="col-12 md:col-12 lg:col-4 p-0 lg:pb-5 mt-4 lg:mt-0">
+                    <div style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(145, 226, 237, 0.2), rgba(172, 180, 223, 0.2)), linear-gradient(180deg, rgba(172, 180, 223, 0.2), rgba(246, 158, 188, 0.2))">
+                        <div class="p-3 surface-card h-full" style="border-radius: 8px">
+                            <div class="flex align-items-center justify-content-center bg-indigo-200" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
+                                <i class="pi pi-fw pi-map text-2xl text-indigo-700"></i>
+                            </div>
+                            <h5 class="mb-2 text-900">Well Documented</h5>
+                            <span class="text-600">Non arcu risus quis varius quam quisque.</span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 lg:pb-5 mt-4 lg:mt-0">
+                    <div style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(187, 199, 205, 0.2), rgba(251, 199, 145, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2), rgba(145, 210, 204, 0.2))">
+                        <div class="p-3 surface-card h-full" style="border-radius: 8px">
+                            <div class="flex align-items-center justify-content-center bg-bluegray-200 mb-3" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
+                                <i class="pi pi-fw pi-id-card text-2xl text-bluegray-700"></i>
+                            </div>
+                            <h5 class="mb-2 text-900">Responsive Layout</h5>
+                            <span class="text-600">Nulla malesuada pellentesque elit.</span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 lg:pb-5 mt-4 lg:mt-0">
+                    <div style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(187, 199, 205, 0.2), rgba(246, 158, 188, 0.2)), linear-gradient(180deg, rgba(145, 226, 237, 0.2), rgba(160, 210, 250, 0.2))">
+                        <div class="p-3 surface-card h-full" style="border-radius: 8px">
+                            <div class="flex align-items-center justify-content-center bg-orange-200 mb-3" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
+                                <i class="pi pi-fw pi-star text-2xl text-orange-700"></i>
+                            </div>
+                            <h5 class="mb-2 text-900">Clean Code</h5>
+                            <span class="text-600">Condimentum lacinia quis vel eros.</span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="col-12 md:col-12 lg:col-4 p-0 lg:pb-5 mt-4 lg:mt-0">
+                    <div style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(251, 199, 145, 0.2), rgba(246, 158, 188, 0.2)), linear-gradient(180deg, rgba(172, 180, 223, 0.2), rgba(212, 162, 221, 0.2))">
+                        <div class="p-3 surface-card h-full" style="border-radius: 8px">
+                            <div class="flex align-items-center justify-content-center bg-pink-200 mb-3" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
+                                <i class="pi pi-fw pi-moon text-2xl text-pink-700"></i>
+                            </div>
+                            <h5 class="mb-2 text-900">Dark Mode</h5>
+                            <span class="text-600">Convallis tellus id interdum velit laoreet.</span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 mt-4 lg:mt-0">
+                    <div style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(145, 210, 204, 0.2), rgba(160, 210, 250, 0.2)), linear-gradient(180deg, rgba(187, 199, 205, 0.2), rgba(145, 210, 204, 0.2))">
+                        <div class="p-3 surface-card h-full" style="border-radius: 8px">
+                            <div class="flex align-items-center justify-content-center bg-teal-200 mb-3" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
+                                <i class="pi pi-fw pi-shopping-cart text-2xl text-teal-700"></i>
+                            </div>
+                            <h5 class="mb-2 text-900">Ready to Use</h5>
+                            <span class="text-600">Mauris sit amet massa vitae.</span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 mt-4 lg:mt-0">
+                    <div style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(145, 210, 204, 0.2), rgba(212, 162, 221, 0.2)), linear-gradient(180deg, rgba(251, 199, 145, 0.2), rgba(160, 210, 250, 0.2))">
+                        <div class="p-3 surface-card h-full" style="border-radius: 8px">
+                            <div class="flex align-items-center justify-content-center bg-blue-200 mb-3" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
+                                <i class="pi pi-fw pi-globe text-2xl text-blue-700"></i>
+                            </div>
+                            <h5 class="mb-2 text-900">Modern Practices</h5>
+                            <span class="text-600">Elementum nibh tellus molestie nunc non.</span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="col-12 md:col-12 lg:col-4 p-0 lg-4 mt-4 lg:mt-0">
+                    <div style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(160, 210, 250, 0.2), rgba(212, 162, 221, 0.2)), linear-gradient(180deg, rgba(246, 158, 188, 0.2), rgba(212, 162, 221, 0.2))">
+                        <div class="p-3 surface-card h-full" style="border-radius: 8px">
+                            <div class="flex align-items-center justify-content-center bg-purple-200 mb-3" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
+                                <i class="pi pi-fw pi-eye text-2xl text-purple-700"></i>
+                            </div>
+                            <h5 class="mb-2 text-900">Privacy</h5>
+                            <span class="text-600">Neque egestas congue quisque.</span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="col-12 mt-8 mb-8 p-2 md:p-8" style="border-radius: 20px; background: linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), radial-gradient(77.36% 256.97% at 77.36% 57.52%, #efe1af 0%, #c3dcfa 100%)">
+                    <div class="flex flex-column justify-content-center align-items-center text-center px-3 py-3 md:py-0">
+                        <h3 class="text-gray-900 mb-2">Joséphine Miller</h3>
+                        <span class="text-gray-600 text-2xl">Peak Interactive</span>
+                        <p class="text-gray-900 sm:line-height-2 md:line-height-4 text-2xl mt-4" style="max-width: 800px">
+                            “Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”
+                        </p>
+                        <img src="layout/images/peak-logo.svg" class="mt-4" alt="" />
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="py-4 px-4 lg:px-8 mx-0 my-6 lg:mx-8" id="highlight">
+            <div class="text-center">
+                <h2 class="text-900 font-normal mb-2">Powerful Everywhere</h2>
+                <span class="text-600 text-2xl">Amet consectetur adipiscing elit...</span>
+            </div>
+
+            <div class="grid mt-8 pb-2 md:pb-8">
+                <div class="flex justify-content-center col-12 lg:col-6 bg-purple-100 p-0 flex-order-1 lg:flex-order-0" style="border-radius: 8px">
+                    <img src="layout/images/mockup.png" class="w-11" alt="mockup mobile" />
+                </div>
+
+                <div class="col-12 lg:col-6 my-auto flex flex-column lg:align-items-end lg:text-right align-items-center text-center">
+                    <div class="flex align-items-center justify-content-center bg-purple-200" style="width: 4.2rem; height: 4.2rem; border-radius: 10px">
+                        <i class="pi pi-fw pi-mobile text-5xl text-purple-700"></i>
+                    </div>
+                    <h2 class="line-height-1 text-900 text-4xl font-normal">Congue Quisque Egestas</h2>
+                    <span class="text-700 text-2xl line-height-3 ml-0 md:ml-2" style="max-width: 650px"
+                        >Lectus arcu bibendum at varius vel pharetra vel turpis nunc. Eget aliquet nibh praesent tristique magna sit amet purus gravida. Sit amet mattis vulputate enim nulla aliquet.</span
+                    >
+                </div>
+            </div>
+
+            <div class="grid my-8 pt-2 md:pt-8">
+                <div class="col-12 lg:col-6 my-auto flex flex-column lg:align-items-start align-items-center">
+                    <div class="flex align-items-center justify-content-center bg-yellow-200" style="width: 4.2rem; height: 4.2rem; border-radius: 10px">
+                        <i class="pi pi-fw pi-desktop text-5xl text-yellow-700"></i>
+                    </div>
+                    <h2 class="line-height-1 text-900 text-4xl font-normal">Celerisque Eu Ultrices</h2>
+                    <span class="text-700 text-2xl line-height-3 mr-0 md:mr-2" style="max-width: 650px"
+                        >Adipiscing commodo elit at imperdiet dui. Viverra nibh cras pulvinar mattis nunc sed blandit libero. Suspendisse in est ante in. Mauris pharetra et ultrices neque ornare aenean euismod elementum nisi.</span
+                    >
+                </div>
+
+                <div class="flex justify-content-end flex-order-1 sm:flex-order-2 col-12 lg:col-6 bg-yellow-100 p-0" style="border-radius: 8px">
+                    <img src="layout/images/mockup-desktop.png" class="w-11 pt-4" alt="mockup" />
+                </div>
+            </div>
+        </div>
+
+        <div class="py-4 px-4 lg:px-8 my-2 md:my-4" id="pricing">
+            <div class="text-center">
+                <h2 class="text-900 font-normal mb-2">Matchless Pricing</h2>
+                <span class="text-600 text-2xl">Amet consectetur adipiscing elit...</span>
+            </div>
+
+            <div class="grid justify-content-between mt-8 md:mt-0">
+                <div class="col-12 lg:col-4 p-0 md:p-3">
+                    <div class="p-3 flex flex-column border-200 hover:border-cyan-200" style="border: 2px solid; border-radius: 10px">
+                        <h3 class="text-900 text-center">Free</h3>
+                        <img src="layout/images/asset-tier-1.svg" class="w-10 h-10 mx-auto" alt="" />
+                        <div class="my-5 text-center">
+                            <span class="text-5xl font-bold mr-2 text-900">$0</span>
+                            <span class="text-600">per month</span>
+                            <Button label="Get Started" class="block mx-auto mt-4 p-button-rounded border-none ml-3 font-light text-white line-height-2 bg-blue-500"></Button>
+                        </div>
+                        <Divider class="w-full bg-surface-200"></Divider>
+                        <ul class="my-5 list-none p-0 flex text-900 flex-column">
+                            <li class="py-2">
+                                <i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
+                                <span class="text-xl line-height-3">Responsive Layout</span>
+                            </li>
+                            <li class="py-2">
+                                <i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
+                                <span class="text-xl line-height-3">Unlimited Push Messages</span>
+                            </li>
+                            <li class="py-2">
+                                <i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
+                                <span class="text-xl line-height-3">50 Support Ticket</span>
+                            </li>
+                            <li class="py-2">
+                                <i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
+                                <span class="text-xl line-height-3">Free Shipping</span>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="col-12 lg:col-4 p-0 md:p-3 mt-4 md:mt-0">
+                    <div class="p-3 flex flex-column border-200 hover:border-cyan-200" style="border: 2px solid; border-radius: 10px">
+                        <h3 class="text-900 text-center">Startup</h3>
+                        <img src="layout/images/asset-tier-2.svg" class="w-10 h-10 mx-auto" alt="" />
+                        <div class="my-5 text-center">
+                            <span class="text-5xl font-bold mr-2 text-900">$1</span>
+                            <span class="text-600">per month</span>
+                            <Button label="Try Free" class="block mx-auto mt-4 p-button-rounded border-none ml-3 font-light text-white line-height-2 bg-blue-500"></Button>
+                        </div>
+                        <Divider class="w-full bg-surface-200"></Divider>
+                        <ul class="my-5 list-none p-0 flex text-900 flex-column">
+                            <li class="py-2">
+                                <i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
+                                <span class="text-xl line-height-3">Responsive Layout</span>
+                            </li>
+                            <li class="py-2">
+                                <i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
+                                <span class="text-xl line-height-3">Unlimited Push Messages</span>
+                            </li>
+                            <li class="py-2">
+                                <i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
+                                <span class="text-xl line-height-3">50 Support Ticket</span>
+                            </li>
+                            <li class="py-2">
+                                <i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
+                                <span class="text-xl line-height-3">Free Shipping</span>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="col-12 lg:col-4 p-0 md:p-3 mt-4 md:mt-0">
+                    <div class="p-3 flex flex-column border-200 hover:border-cyan-200" style="border: 2px solid; border-radius: 10px">
+                        <h3 class="text-900 text-center">Enterprice</h3>
+                        <img src="layout/images/asset-tier-3.svg" class="w-10 h-10 mx-auto" alt="" />
+                        <div class="my-5 text-center">
+                            <span class="text-5xl font-bold mr-2 text-900">$999</span>
+                            <span class="text-600">per month</span>
+                            <Button label="Get a Quote" class="block mx-auto mt-4 p-button-rounded border-none ml-3 font-light text-white line-height-2 bg-blue-500"></Button>
+                        </div>
+                        <Divider class="w-full bg-surface-200"></Divider>
+                        <ul class="my-5 list-none p-0 flex text-900 flex-column">
+                            <li class="py-2">
+                                <i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
+                                <span class="text-xl line-height-3">Responsive Layout</span>
+                            </li>
+                            <li class="py-2">
+                                <i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
+                                <span class="text-xl line-height-3">Unlimited Push Messages</span>
+                            </li>
+                            <li class="py-2">
+                                <i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
+                                <span class="text-xl line-height-3">50 Support Ticket</span>
+                            </li>
+                            <li class="py-2">
+                                <i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
+                                <span class="text-xl line-height-3">Free Shipping</span>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="py-4 px-4 mx-0 mt-8 lg:mx-8" id="contact">
+            <div class="grid justify-content-between">
+                <div class="col-12 md:col-2" style="margin-top: -1.5rem">
+                    <div class="flex flex-wrap align-items-center justify-content-center md:justify-content-start md:mb-0 mb-3">
+                        <img :src="'layout/images/logo-' + logoColor + '.svg'" alt="footer sections" width="50" height="50" class="mr-2" />
+                        <h4 class="font-medium text-3xl text-900">SAKAI</h4>
+                    </div>
+                </div>
+
+                <div class="col-12 md:col-7">
+                    <div class="grid text-center md:text-left">
+                        <div class="col-12 md:col-3">
+                            <h4 class="font-medium text-2xl line-height-3 mb-3 text-900">Company</h4>
+                            <a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">About Us</a>
+                            <a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">News</a>
+                            <a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Investor Relations</a>
+                            <a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Careers</a>
+                            <a class="line-height-3 text-xl block cursor-pointer text-700">Media Kit</a>
+                        </div>
+
+                        <div class="col-12 md:col-3 mt-4 md:mt-0">
+                            <h4 class="font-medium text-2xl line-height-3 mb-3 text-900">Resources</h4>
+                            <a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Get Started</a>
+                            <a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Learn</a>
+                            <a class="line-height-3 text-xl block cursor-pointer text-700">Case Studies</a>
+                        </div>
+
+                        <div class="col-12 md:col-3 mt-4 md:mt-0">
+                            <h4 class="font-medium text-2xl line-height-3 mb-3 text-900">Community</h4>
+                            <a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Discord</a>
+                            <a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Events<img src="layout/images/new-badge.svg" class="ml-2" /></a>
+                            <a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">FAQ</a>
+                            <a class="line-height-3 text-xl block cursor-pointer text-700">Blog</a>
+                        </div>
+
+                        <div class="col-12 md:col-3 mt-4 md:mt-0">
+                            <h4 class="font-medium text-2xl line-height-3 mb-3 text-900">Legal</h4>
+                            <a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Brand Policy</a>
+                            <a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Privacy Policy</a>
+                            <a class="line-height-3 text-xl block cursor-pointer text-700">Terms of Service</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { useLayoutService } from '@/layout/composables/layoutService';
+
+const { isDarkTheme } = useLayoutService();
+
+const smoothScroll = (id) => {
+    document.querySelector(id).scrollIntoView({
+        behavior: 'smooth'
+    });
+};
+
+const logoUrl = () => {
+    return new URL(`/src/assets/layout/images/${isDarkTheme.value ? 'logo-white' : 'logo-dark'}.svg`, import.meta.url).href;
+};
+</script>
+
+<style scoped>
+#hero {
+    background: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), radial-gradient(77.36% 256.97% at 77.36% 57.52%, #eeefaf 0%, #c3e3fa 100%);
+    height: 700px;
+    overflow: hidden;
+}
+
+@media screen and (min-width: 768px) {
+    #hero {
+        -webkit-clip-path: ellipse(150% 87% at 93% 13%);
+        clip-path: ellipse(150% 87% at 93% 13%);
+        height: 530px;
+    }
+}
+
+@media screen and (min-width: 1300px) {
+    #hero > img {
+        position: absolute;
+    }
+
+    #hero > div > p {
+        max-width: 450px;
+    }
+}
+
+@media screen and (max-width: 1300px) {
+    #hero {
+        height: 600px;
+    }
+
+    #hero > img {
+        position: static;
+        transform: scale(1);
+        margin-left: auto;
+    }
+
+    #hero > div {
+        width: 100%;
+    }
+
+    #hero > div > p {
+        width: 100%;
+        max-width: 100%;
+    }
+}
+</style>
diff --git a/src/views/pages/auth/Access.vue b/src/views/pages/auth/Access.vue
new file mode 100644
index 0000000..4107ffb
--- /dev/null
+++ b/src/views/pages/auth/Access.vue
@@ -0,0 +1,25 @@
+<template>
+    <div class="surface-0 flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
+        <div class="grid justify-content-center p-2 lg:p-0" style="min-width: 80%">
+            <div class="col-12 mt-5 xl:mt-0 text-center">
+                <img src="layout/images/logo-orange.svg" alt="Sakai logo" class="mb-5" style="width: 81px; height: 60px" />
+            </div>
+            <div class="col-12 xl:col-6" style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, rgba(247, 149, 48, 0.4) 10%, rgba(247, 149, 48, 0) 30%)">
+                <div class="h-full w-full m-0 py-7 px-4" style="border-radius: 53px; background: linear-gradient(180deg, var(--surface-50) 38.9%, var(--surface-0))">
+                    <div class="grid flex flex-column align-items-center">
+                        <div class="flex justify-content-center align-items-center bg-orange-500 border-circle" style="width: 3.2rem; height: 3.2rem">
+                            <i class="pi pi-fw pi-lock text-2xl text-50"></i>
+                        </div>
+                        <h1 class="text-900 font-bold text-4xl lg:text-5xl mb-2">Access Denied</h1>
+                        <span class="text-600 text-center">You do not have the necesary permisions. Please contact admins.</span>
+                        <img src="layout/images/asset-access.svg" alt="Access denied" class="mt-5" width="80%" />
+                        <div class="col-12 mt-5 text-center">
+                            <i class="pi pi-fw pi-arrow-left text-blue-500 mr-2" style="vertical-align: center"></i>
+                            <router-link to="/" class="text-blue-500">Go to Dashboard</router-link>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/src/views/pages/auth/Error.vue b/src/views/pages/auth/Error.vue
new file mode 100644
index 0000000..2ab3a66
--- /dev/null
+++ b/src/views/pages/auth/Error.vue
@@ -0,0 +1,25 @@
+<template>
+    <div class="surface-0 flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
+        <div class="grid justify-content-center p-2 lg:p-0" style="min-width: 80%">
+            <div class="col-12 mt-5 xl:mt-0 text-center">
+                <img src="layout/images/logo-error.svg" alt="Sakai logo" class="mb-5" style="width: 81px; height: 60px" />
+            </div>
+            <div class="col-12 xl:col-6" style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, rgba(233, 30, 99, 0.4) 10%, rgba(33, 150, 243, 0) 30%)">
+                <div class="h-full w-full m-0 py-7 px-4" style="border-radius: 53px; background: linear-gradient(180deg, var(--surface-50) 38.9%, var(--surface-0))">
+                    <div class="grid flex flex-column align-items-center">
+                        <div class="flex justify-content-center align-items-center bg-pink-500 border-circle" style="height: 3.2rem; width: 3.2rem">
+                            <i class="pi pi-fw pi-exclamation-circle text-2xl text-50"></i>
+                        </div>
+                        <h1 class="font-bold text-5xl text-900 mb-2">Error Occured</h1>
+                        <span class="text-600">Requested resource is not available.</span>
+                        <img src="layout/images/asset-error.svg" alt="Error" class="mt-5" width="80%" />
+                        <div class="col-12 mt-5 text-center">
+                            <i class="pi pi-fw pi-arrow-left text-blue-500 mr-2" style="vertical-align: center"></i>
+                            <router-link to="/" class="text-blue-500">Go to Dashboard</router-link>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/src/views/pages/auth/Login.vue b/src/views/pages/auth/Login.vue
new file mode 100644
index 0000000..628114f
--- /dev/null
+++ b/src/views/pages/auth/Login.vue
@@ -0,0 +1,62 @@
+<template>
+    <div class="surface-0 flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
+        <div class="grid justify-content-center p-2 lg:p-0" style="min-width: 80%">
+            <div class="col-12 mt-5 xl:mt-0 text-center">
+                <img :src="logoUrl()" alt="Sakai logo" class="mb-5" style="width: 81px; height: 60px" />
+            </div>
+            <div class="col-12 xl:col-6" style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, var(--primary-color), rgba(33, 150, 243, 0) 30%)">
+                <div class="h-full w-full m-0 py-7 px-4" style="border-radius: 53px; background: linear-gradient(180deg, var(--surface-50) 38.9%, var(--surface-0))">
+                    <div class="text-center mb-5">
+                        <img src="layout/images/avatar.png" alt="Image" height="50" class="mb-3" />
+                        <div class="text-900 text-3xl font-medium mb-3">Welcome, Isabel!</div>
+                        <span class="text-600 font-medium">Sign in to continue</span>
+                    </div>
+
+                    <div class="w-full md:w-10 mx-auto">
+                        <label for="email1" class="block text-900 text-xl font-medium mb-2">Email</label>
+                        <InputText id="email1" v-model="email" type="text" class="w-full mb-3" placeholder="Email" style="padding: 1rem" />
+
+                        <label for="password1" class="block text-900 font-medium text-xl mb-2">Password</label>
+                        <Password id="password1" v-model="password" placeholder="Password" :toggleMask="true" class="w-full mb-3" inputClass="w-full" inputStyle="padding:1rem"></Password>
+
+                        <div class="flex align-items-center justify-content-between mb-5">
+                            <div class="flex align-items-center">
+                                <Checkbox id="rememberme1" v-model="checked" :binary="true" class="mr-2"></Checkbox>
+                                <label for="rememberme1">Remember me</label>
+                            </div>
+                            <a class="font-medium no-underline ml-2 text-right cursor-pointer" style="color: var(--primary-color)">Forgot password?</a>
+                        </div>
+                        <Button label="Sign In" class="w-full p-3 text-xl"></Button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { useLayoutService } from '@/layout/composables/layoutService';
+import { ref } from 'vue';
+
+const { isDarkTheme } = useLayoutService();
+
+const email = ref('');
+const password = ref('');
+const checked = ref(false);
+
+const logoUrl = () => {
+    return new URL(`/src/assets/layout/images/${isDarkTheme.value ? 'logo-white' : 'logo-dark'}.svg`, import.meta.url).href;
+};
+</script>
+
+<style scoped>
+.pi-eye {
+    transform: scale(1.6);
+    margin-right: 1rem;
+}
+
+.pi-eye-slash {
+    transform: scale(1.6);
+    margin-right: 1rem;
+}
+</style>
diff --git a/src/views/demo/Button.vue b/src/views/uikit/Button.vue
similarity index 100%
rename from src/views/demo/Button.vue
rename to src/views/uikit/Button.vue
diff --git a/src/views/uikit/Chart.vue b/src/views/uikit/Chart.vue
new file mode 100644
index 0000000..d78d601
--- /dev/null
+++ b/src/views/uikit/Chart.vue
@@ -0,0 +1,349 @@
+<template>
+    <div class="grid p-fluid">
+        <div class="col-12 lg:col-6">
+            <div class="card">
+                <h5>Linear Chart</h5>
+                <Chart type="line" :data="lineData" :options="lineOptions" />
+            </div>
+
+            <div class="card flex flex-column align-items-center">
+                <h5 class="align-self-start">Pie Chart</h5>
+                <Chart type="pie" :data="pieData" :options="pieOptions" style="width: 50%" />
+            </div>
+
+            <div class="card flex flex-column align-items-center">
+                <h5 class="align-self-start">Polar Area Chart</h5>
+                <Chart type="polarArea" :data="polarData" :options="polarOptions" style="width: 50%" />
+            </div>
+        </div>
+        <div class="col-12 lg:col-6">
+            <div class="card">
+                <h5>Bar Chart</h5>
+                <Chart type="bar" :data="barData" :options="barOptions" />
+            </div>
+
+            <div class="card flex flex-column align-items-center">
+                <h5 class="align-self-start">Doughnut Chart</h5>
+                <Chart type="doughnut" :data="pieData" :options="pieOptions" style="width: 50%" />
+            </div>
+
+            <div class="card flex flex-column align-items-center">
+                <h5 class="align-self-start">Radar Chart</h5>
+                <Chart type="radar" :data="radarData" :options="radarOptions" style="width: 50%" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+import { useLayoutService } from '@/layout/composables/layoutService';
+
+const { isDarkTheme } = useLayoutService();
+const lineData = ref({
+    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+    datasets: [
+        {
+            label: 'First Dataset',
+            data: [65, 59, 80, 81, 56, 55, 40],
+            fill: false,
+            backgroundColor: '#2f4860',
+            borderColor: '#2f4860',
+            tension: 0.4
+        },
+        {
+            label: 'Second Dataset',
+            data: [28, 48, 40, 19, 86, 27, 90],
+            fill: false,
+            backgroundColor: '#00bb7e',
+            borderColor: '#00bb7e',
+            tension: 0.4
+        }
+    ]
+});
+
+const pieData = ref({
+    labels: ['A', 'B', 'C'],
+    datasets: [
+        {
+            data: [300, 50, 100],
+            backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
+            hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
+        }
+    ]
+});
+
+const polarData = ref({
+    datasets: [
+        {
+            data: [11, 16, 7, 3, 14],
+            backgroundColor: ['#FF6384', '#4BC0C0', '#FFCE56', '#E7E9ED', '#36A2EB'],
+            label: 'My dataset'
+        }
+    ],
+    labels: ['Red', 'Green', 'Yellow', 'Grey', 'Blue']
+});
+const barData = ref({
+    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+    datasets: [
+        {
+            label: 'My First dataset',
+            backgroundColor: '#2f4860',
+            data: [65, 59, 80, 81, 56, 55, 40]
+        },
+        {
+            label: 'My Second dataset',
+            backgroundColor: '#00bb7e',
+            data: [28, 48, 40, 19, 86, 27, 90]
+        }
+    ]
+});
+
+const radarData = ref({
+    labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
+    datasets: [
+        {
+            label: 'My First dataset',
+            backgroundColor: 'rgba(179,181,198,0.2)',
+            borderColor: 'rgba(179,181,198,1)',
+            pointBackgroundColor: 'rgba(179,181,198,1)',
+            pointBorderColor: '#fff',
+            pointHoverBackgroundColor: '#fff',
+            pointHoverBorderColor: 'rgba(179,181,198,1)',
+            data: [65, 59, 90, 81, 56, 55, 40]
+        },
+        {
+            label: 'My Second dataset',
+            backgroundColor: 'rgba(255,99,132,0.2)',
+            borderColor: 'rgba(255,99,132,1)',
+            pointBackgroundColor: 'rgba(255,99,132,1)',
+            pointBorderColor: '#fff',
+            pointHoverBackgroundColor: '#fff',
+            pointHoverBorderColor: 'rgba(255,99,132,1)',
+            data: [28, 48, 40, 19, 96, 27, 100]
+        }
+    ]
+});
+
+const lineOptions = ref(null);
+const pieOptions = ref(null);
+const polarOptions = ref(null);
+const barOptions = ref(null);
+const radarOptions = ref(null);
+
+const applyLightTheme = () => {
+    lineOptions.value = {
+        plugins: {
+            legend: {
+                labels: {
+                    color: '#495057'
+                }
+            }
+        },
+        scales: {
+            x: {
+                ticks: {
+                    color: '#495057'
+                },
+                grid: {
+                    color: '#ebedef'
+                }
+            },
+            y: {
+                ticks: {
+                    color: '#495057'
+                },
+                grid: {
+                    color: '#ebedef'
+                }
+            }
+        }
+    };
+
+    barOptions.value = {
+        plugins: {
+            legend: {
+                labels: {
+                    color: '#495057'
+                }
+            }
+        },
+        scales: {
+            x: {
+                ticks: {
+                    color: '#495057'
+                },
+                grid: {
+                    color: '#ebedef'
+                }
+            },
+            y: {
+                ticks: {
+                    color: '#495057'
+                },
+                grid: {
+                    color: '#ebedef'
+                }
+            }
+        }
+    };
+
+    pieOptions.value = {
+        plugins: {
+            legend: {
+                labels: {
+                    color: '#495057'
+                }
+            }
+        }
+    };
+
+    polarOptions.value = {
+        plugins: {
+            legend: {
+                labels: {
+                    color: '#495057'
+                }
+            }
+        },
+        scales: {
+            r: {
+                grid: {
+                    color: '#ebedef'
+                }
+            }
+        }
+    };
+
+    radarOptions.value = {
+        plugins: {
+            legend: {
+                labels: {
+                    color: '#495057'
+                }
+            }
+        },
+        scales: {
+            r: {
+                grid: {
+                    color: '#ebedef'
+                }
+            }
+        }
+    };
+};
+
+const applyDarkTheme = () => {
+    lineOptions.value = {
+        plugins: {
+            legend: {
+                labels: {
+                    color: '#ebedef'
+                }
+            }
+        },
+        scales: {
+            x: {
+                ticks: {
+                    color: '#ebedef'
+                },
+                grid: {
+                    color: 'rgba(160, 167, 181, .3)'
+                }
+            },
+            y: {
+                ticks: {
+                    color: '#ebedef'
+                },
+                grid: {
+                    color: 'rgba(160, 167, 181, .3)'
+                }
+            }
+        }
+    };
+
+    barOptions.value = {
+        plugins: {
+            legend: {
+                labels: {
+                    color: '#ebedef'
+                }
+            }
+        },
+        scales: {
+            x: {
+                ticks: {
+                    color: '#ebedef'
+                },
+                grid: {
+                    color: 'rgba(160, 167, 181, .3)'
+                }
+            },
+            y: {
+                ticks: {
+                    color: '#ebedef'
+                },
+                grid: {
+                    color: 'rgba(160, 167, 181, .3)'
+                }
+            }
+        }
+    };
+
+    pieOptions.value = {
+        plugins: {
+            legend: {
+                labels: {
+                    color: '#ebedef'
+                }
+            }
+        }
+    };
+
+    polarOptions.value = {
+        plugins: {
+            legend: {
+                labels: {
+                    color: '#ebedef'
+                }
+            }
+        },
+        scales: {
+            r: {
+                grid: {
+                    color: 'rgba(160, 167, 181, .3)'
+                }
+            }
+        }
+    };
+
+    radarOptions.value = {
+        plugins: {
+            legend: {
+                labels: {
+                    color: '#ebedef'
+                }
+            }
+        },
+        scales: {
+            r: {
+                grid: {
+                    color: 'rgba(160, 167, 181, .3)'
+                }
+            }
+        }
+    };
+};
+
+watch(
+    isDarkTheme,
+    (val) => {
+        if (val) {
+            applyDarkTheme();
+        } else {
+            applyLightTheme();
+        }
+    },
+    { immediate: true }
+);
+</script>
diff --git a/src/views/demo/File.vue b/src/views/uikit/File.vue
similarity index 100%
rename from src/views/demo/File.vue
rename to src/views/uikit/File.vue
diff --git a/src/views/demo/FloatLabel.vue b/src/views/uikit/FloatLabel.vue
similarity index 100%
rename from src/views/demo/FloatLabel.vue
rename to src/views/uikit/FloatLabel.vue
diff --git a/src/views/demo/FormLayout.vue b/src/views/uikit/FormLayout.vue
similarity index 100%
rename from src/views/demo/FormLayout.vue
rename to src/views/uikit/FormLayout.vue
diff --git a/src/views/demo/Icons.vue b/src/views/uikit/Icons.vue
similarity index 100%
rename from src/views/demo/Icons.vue
rename to src/views/uikit/Icons.vue
diff --git a/src/views/demo/Input.vue b/src/views/uikit/Input.vue
similarity index 100%
rename from src/views/demo/Input.vue
rename to src/views/uikit/Input.vue
diff --git a/src/views/demo/InvalidState.vue b/src/views/uikit/InvalidState.vue
similarity index 100%
rename from src/views/demo/InvalidState.vue
rename to src/views/uikit/InvalidState.vue
diff --git a/src/views/demo/List.vue b/src/views/uikit/List.vue
similarity index 100%
rename from src/views/demo/List.vue
rename to src/views/uikit/List.vue
diff --git a/src/views/demo/Media.vue b/src/views/uikit/Media.vue
similarity index 100%
rename from src/views/demo/Media.vue
rename to src/views/uikit/Media.vue
diff --git a/src/views/demo/Menu.vue b/src/views/uikit/Menu.vue
similarity index 100%
rename from src/views/demo/Menu.vue
rename to src/views/uikit/Menu.vue
diff --git a/src/views/demo/Messages.vue b/src/views/uikit/Messages.vue
similarity index 100%
rename from src/views/demo/Messages.vue
rename to src/views/uikit/Messages.vue
diff --git a/src/views/demo/Misc.vue b/src/views/uikit/Misc.vue
similarity index 100%
rename from src/views/demo/Misc.vue
rename to src/views/uikit/Misc.vue
diff --git a/src/views/demo/Overlay.vue b/src/views/uikit/Overlay.vue
similarity index 100%
rename from src/views/demo/Overlay.vue
rename to src/views/uikit/Overlay.vue
diff --git a/src/views/demo/Panels.vue b/src/views/uikit/Panels.vue
similarity index 100%
rename from src/views/demo/Panels.vue
rename to src/views/uikit/Panels.vue
diff --git a/src/views/demo/Table.vue b/src/views/uikit/Table.vue
similarity index 100%
rename from src/views/demo/Table.vue
rename to src/views/uikit/Table.vue
diff --git a/src/views/demo/Tree.vue b/src/views/uikit/Tree.vue
similarity index 100%
rename from src/views/demo/Tree.vue
rename to src/views/uikit/Tree.vue
diff --git a/src/views/utilities/Blocks.vue b/src/views/utilities/Blocks.vue
new file mode 100644
index 0000000..d179779
--- /dev/null
+++ b/src/views/utilities/Blocks.vue
@@ -0,0 +1,804 @@
+<template>
+    <div>
+        <BlockViewer header="Hero" :code="block1">
+            <div class="grid grid-nogutter surface-section text-800">
+                <div class="col-12 md:col-6 p-6 text-center md:text-left flex align-items-center">
+                    <section>
+                        <span class="block text-6xl font-bold mb-1">Create the screens your</span>
+                        <div class="text-6xl text-primary font-bold mb-3">your visitors deserve to see</div>
+                        <p class="mt-0 mb-4 text-700 line-height-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+
+                        <Button label="Learn More" type="button" class="mr-3 p-button-raised"></Button>
+                        <Button label="Live Demo" type="button" class="p-button-outlined"></Button>
+                    </section>
+                </div>
+                <div class="col-12 md:col-6 overflow-hidden">
+                    <img src="images/blocks/hero/hero-1.png" alt="Image" class="md:ml-auto block md:h-full" style="clip-path: polygon(8% 0, 100% 0%, 100% 100%, 0 100%)" />
+                </div>
+            </div>
+        </BlockViewer>
+
+        <BlockViewer header="Feature" :code="block2">
+            <div class="surface-section px-4 py-8 md:px-6 lg:px-8 text-center">
+                <div class="mb-3 font-bold text-2xl">
+                    <span class="text-900">One Product, </span>
+                    <span class="text-blue-600">Many Solutions</span>
+                </div>
+                <div class="text-700 text-sm mb-6">Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna.</div>
+                <div class="grid">
+                    <div class="col-12 md:col-4 mb-4 px-5">
+                        <span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
+                            <i class="pi pi-desktop text-4xl text-blue-500"></i>
+                        </span>
+                        <div class="text-900 mb-3 font-medium">Built for Developers</div>
+                        <span class="text-700 text-sm line-height-3">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</span>
+                    </div>
+                    <div class="col-12 md:col-4 mb-4 px-5">
+                        <span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
+                            <i class="pi pi-lock text-4xl text-blue-500"></i>
+                        </span>
+                        <div class="text-900 mb-3 font-medium">End-to-End Encryption</div>
+                        <span class="text-700 text-sm line-height-3">Risus nec feugiat in fermentum posuere urna nec. Posuere sollicitudin aliquam ultrices sagittis.</span>
+                    </div>
+                    <div class="col-12 md:col-4 mb-4 px-5">
+                        <span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
+                            <i class="pi pi-check-circle text-4xl text-blue-500"></i>
+                        </span>
+                        <div class="text-900 mb-3 font-medium">Easy to Use</div>
+                        <span class="text-700 text-sm line-height-3">Ornare suspendisse sed nisi lacus sed viverra tellus. Neque volutpat ac tincidunt vitae semper.</span>
+                    </div>
+                    <div class="col-12 md:col-4 mb-4 px-5">
+                        <span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
+                            <i class="pi pi-globe text-4xl text-blue-500"></i>
+                        </span>
+                        <div class="text-900 mb-3 font-medium">Fast & Global Support</div>
+                        <span class="text-700 text-sm line-height-3">Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum tellus.</span>
+                    </div>
+                    <div class="col-12 md:col-4 mb-4 px-5">
+                        <span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
+                            <i class="pi pi-github text-4xl text-blue-500"></i>
+                        </span>
+                        <div class="text-900 mb-3 font-medium">Open Source</div>
+                        <span class="text-700 text-sm line-height-3">Nec tincidunt praesent semper feugiat. Sed adipiscing diam donec adipiscing tristique risus nec feugiat. </span>
+                    </div>
+                    <div class="col-12 md:col-4 md:mb-4 mb-0 px-3">
+                        <span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
+                            <i class="pi pi-shield text-4xl text-blue-500"></i>
+                        </span>
+                        <div class="text-900 mb-3 font-medium">Trusted Securitty</div>
+                        <span class="text-700 text-sm line-height-3">Mattis rhoncus urna neque viverra justo nec ultrices. Id cursus metus aliquam eleifend.</span>
+                    </div>
+                </div>
+            </div>
+        </BlockViewer>
+
+        <BlockViewer header="Pricing" :code="block3">
+            <div class="surface-ground px-4 py-8 md:px-6 lg:px-8">
+                <div class="text-900 font-bold text-6xl mb-4 text-center">Pricing Plans</div>
+                <div class="text-700 text-xl mb-6 text-center line-height-3">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.</div>
+
+                <div class="grid">
+                    <div class="col-12 lg:col-4">
+                        <div class="p-3 h-full">
+                            <div class="shadow-2 p-3 h-full flex flex-column surface-card" style="border-radius: 6px">
+                                <div class="text-900 font-medium text-xl mb-2">Basic</div>
+                                <div class="text-600">Plan description</div>
+                                <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
+                                <div class="flex align-items-center">
+                                    <span class="font-bold text-2xl text-900">$9</span>
+                                    <span class="ml-2 font-medium text-600">per month</span>
+                                </div>
+                                <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
+                                <ul class="list-none p-0 m-0 flex-grow-1">
+                                    <li class="flex align-items-center mb-3">
+                                        <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                                        <span>Arcu vitae elementum</span>
+                                    </li>
+                                    <li class="flex align-items-center mb-3">
+                                        <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                                        <span>Dui faucibus in ornare</span>
+                                    </li>
+                                    <li class="flex align-items-center mb-3">
+                                        <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                                        <span>Morbi tincidunt augue</span>
+                                    </li>
+                                </ul>
+                                <hr class="mb-3 mx-0 border-top-1 border-none surface-border mt-auto" />
+                                <Button label="Buy Now" class="p-3 w-full mt-auto"></Button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="col-12 lg:col-4">
+                        <div class="p-3 h-full">
+                            <div class="shadow-2 p-3 h-full flex flex-column surface-card" style="border-radius: 6px">
+                                <div class="text-900 font-medium text-xl mb-2">Premium</div>
+                                <div class="text-600">Plan description</div>
+                                <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
+                                <div class="flex align-items-center">
+                                    <span class="font-bold text-2xl text-900">$29</span>
+                                    <span class="ml-2 font-medium text-600">per month</span>
+                                </div>
+                                <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
+                                <ul class="list-none p-0 m-0 flex-grow-1">
+                                    <li class="flex align-items-center mb-3">
+                                        <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                                        <span>Arcu vitae elementum</span>
+                                    </li>
+                                    <li class="flex align-items-center mb-3">
+                                        <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                                        <span>Dui faucibus in ornare</span>
+                                    </li>
+                                    <li class="flex align-items-center mb-3">
+                                        <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                                        <span>Morbi tincidunt augue</span>
+                                    </li>
+                                    <li class="flex align-items-center mb-3">
+                                        <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                                        <span>Duis ultricies lacus sed</span>
+                                    </li>
+                                </ul>
+                                <hr class="mb-3 mx-0 border-top-1 border-none surface-border" />
+                                <Button label="Buy Now" class="p-3 w-full"></Button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="col-12 lg:col-4">
+                        <div class="p-3 h-full">
+                            <div class="shadow-2 p-3 flex flex-column surface-card" style="border-radius: 6px">
+                                <div class="text-900 font-medium text-xl mb-2">Enterprise</div>
+                                <div class="text-600">Plan description</div>
+                                <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
+                                <div class="flex align-items-center">
+                                    <span class="font-bold text-2xl text-900">$49</span>
+                                    <span class="ml-2 font-medium text-600">per month</span>
+                                </div>
+                                <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
+                                <ul class="list-none p-0 m-0 flex-grow-1">
+                                    <li class="flex align-items-center mb-3">
+                                        <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                                        <span>Arcu vitae elementum</span>
+                                    </li>
+                                    <li class="flex align-items-center mb-3">
+                                        <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                                        <span>Dui faucibus in ornare</span>
+                                    </li>
+                                    <li class="flex align-items-center mb-3">
+                                        <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                                        <span>Morbi tincidunt augue</span>
+                                    </li>
+                                    <li class="flex align-items-center mb-3">
+                                        <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                                        <span>Duis ultricies lacus sed</span>
+                                    </li>
+                                    <li class="flex align-items-center mb-3">
+                                        <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                                        <span>Imperdiet proin</span>
+                                    </li>
+                                    <li class="flex align-items-center mb-3">
+                                        <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                                        <span>Nisi scelerisque</span>
+                                    </li>
+                                </ul>
+                                <hr class="mb-3 mx-0 border-top-1 border-none surface-border" />
+                                <Button label="Buy Now" class="p-3 w-full p-button-outlined"></Button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </BlockViewer>
+
+        <BlockViewer header="Call to Action" :code="block4">
+            <div class="surface-section px-4 py-8 md:px-6 lg:px-8">
+                <div class="text-700 text-center">
+                    <div class="text-blue-600 font-bold mb-3"><i class="pi pi-discord"></i>&nbsp;POWERED BY DISCORD</div>
+                    <div class="text-900 font-bold text-5xl mb-3">Join Our Design Community</div>
+                    <div class="text-700 text-2xl mb-5">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.</div>
+                    <Button label="Join Now" icon="pi pi-discord" class="font-bold px-5 py-3 p-button-raised p-button-rounded white-space-nowrap"></Button>
+                </div>
+            </div>
+        </BlockViewer>
+
+        <BlockViewer header="Banner" :code="block5" containerClass="surface-section py-8">
+            <div class="bg-bluegray-900 text-gray-100 p-3 flex justify-content-between lg:justify-content-center align-items-center flex-wrap">
+                <div class="font-bold mr-8">🔥 Hot Deals!</div>
+                <div class="align-items-center hidden lg:flex">
+                    <span class="line-height-3">Libero voluptatum atque exercitationem praesentium provident odit.</span>
+                </div>
+                <a class="flex align-items-center ml-2 mr-8">
+                    <a class="text-white" href="#"><span class="underline font-bold">Learn More</span></a>
+                </a>
+                <a v-ripple class="flex align-items-center no-underline justify-content-center border-circle text-gray-50 hover:bg-bluegray-700 cursor-pointer transition-colors transition-duration-150 p-ripple" style="width: 2rem; height: 2rem">
+                    <i class="pi pi-times"></i>
+                </a>
+            </div>
+        </BlockViewer>
+
+        <BlockViewer header="Page Heading" :code="block6">
+            <div class="surface-section px-4 py-5 md:px-6 lg:px-8">
+                <ul class="list-none p-0 m-0 flex align-items-center font-medium mb-3">
+                    <li>
+                        <a class="text-500 no-underline line-height-3 cursor-pointer">Application</a>
+                    </li>
+                    <li class="px-2">
+                        <i class="pi pi-angle-right text-500 line-height-3"></i>
+                    </li>
+                    <li>
+                        <span class="text-900 line-height-3">Analytics</span>
+                    </li>
+                </ul>
+                <div class="flex align-items-start flex-column lg:justify-content-between lg:flex-row">
+                    <div>
+                        <div class="font-medium text-3xl text-900">Customers</div>
+                        <div class="flex align-items-center text-700 flex-wrap">
+                            <div class="mr-5 flex align-items-center mt-3">
+                                <i class="pi pi-users mr-2"></i>
+                                <span>332 Active Users</span>
+                            </div>
+                            <div class="mr-5 flex align-items-center mt-3">
+                                <i class="pi pi-globe mr-2"></i>
+                                <span>9402 Sessions</span>
+                            </div>
+                            <div class="flex align-items-center mt-3">
+                                <i class="pi pi-clock mr-2"></i>
+                                <span>2.32m Avg. Duration</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-3 lg:mt-0">
+                        <Button label="Add" class="p-button-outlined mr-2" icon="pi pi-user-plus"></Button>
+                        <Button label="Save" icon="pi pi-check"></Button>
+                    </div>
+                </div>
+            </div>
+        </BlockViewer>
+
+        <BlockViewer header="Stats" :code="block7">
+            <div class="surface-ground px-4 py-5 md:px-6 lg:px-8">
+                <div class="grid">
+                    <div class="col-12 md:col-6 lg:col-3">
+                        <div class="surface-card shadow-2 p-3 border-round">
+                            <div class="flex justify-content-between mb-3">
+                                <div>
+                                    <span class="block text-500 font-medium mb-3">Orders</span>
+                                    <div class="text-900 font-medium text-xl">152</div>
+                                </div>
+                                <div class="flex align-items-center justify-content-center bg-blue-100 border-round" style="width: 2.5rem; height: 2.5rem">
+                                    <i class="pi pi-shopping-cart text-blue-500 text-xl"></i>
+                                </div>
+                            </div>
+                            <span class="text-green-500 font-medium">24 new </span>
+                            <span class="text-500">since last visit</span>
+                        </div>
+                    </div>
+                    <div class="col-12 md:col-6 lg:col-3">
+                        <div class="surface-card shadow-2 p-3 border-round">
+                            <div class="flex justify-content-between mb-3">
+                                <div>
+                                    <span class="block text-500 font-medium mb-3">Revenue</span>
+                                    <div class="text-900 font-medium text-xl">$2.100</div>
+                                </div>
+                                <div class="flex align-items-center justify-content-center bg-orange-100 border-round" style="width: 2.5rem; height: 2.5rem">
+                                    <i class="pi pi-map-marker text-orange-500 text-xl"></i>
+                                </div>
+                            </div>
+                            <span class="text-green-500 font-medium">%52+ </span>
+                            <span class="text-500">since last week</span>
+                        </div>
+                    </div>
+                    <div class="col-12 md:col-6 lg:col-3">
+                        <div class="surface-card shadow-2 p-3 border-round">
+                            <div class="flex justify-content-between mb-3">
+                                <div>
+                                    <span class="block text-500 font-medium mb-3">Customers</span>
+                                    <div class="text-900 font-medium text-xl">28441</div>
+                                </div>
+                                <div class="flex align-items-center justify-content-center bg-cyan-100 border-round" style="width: 2.5rem; height: 2.5rem">
+                                    <i class="pi pi-inbox text-cyan-500 text-xl"></i>
+                                </div>
+                            </div>
+                            <span class="text-green-500 font-medium">520 </span>
+                            <span class="text-500">newly registered</span>
+                        </div>
+                    </div>
+                    <div class="col-12 md:col-6 lg:col-3">
+                        <div class="surface-card shadow-2 p-3 border-round">
+                            <div class="flex justify-content-between mb-3">
+                                <div>
+                                    <span class="block text-500 font-medium mb-3">Comments</span>
+                                    <div class="text-900 font-medium text-xl">152 Unread</div>
+                                </div>
+                                <div class="flex align-items-center justify-content-center bg-purple-100 border-round" style="width: 2.5rem; height: 2.5rem">
+                                    <i class="pi pi-comment text-purple-500 text-xl"></i>
+                                </div>
+                            </div>
+                            <span class="text-green-500 font-medium">85 </span>
+                            <span class="text-500">responded</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </BlockViewer>
+
+        <BlockViewer header="Sign-In" :code="block8" containerClass="surface-ground px-4 py-8 md:px-6 lg:px-8 flex align-items-center justify-content-center">
+            <div class="surface-card p-4 shadow-2 border-round w-full lg:w-6">
+                <div class="text-center mb-5">
+                    <img src="images/blocks/logos/hyper.svg" alt="Image" height="50" class="mb-3" />
+                    <div class="text-900 text-3xl font-medium mb-3">Welcome Back</div>
+                    <span class="text-600 font-medium line-height-3">Don't have an account?</span>
+                    <a class="font-medium no-underline ml-2 text-blue-500 cursor-pointer">Create today!</a>
+                </div>
+
+                <div>
+                    <label for="email1" class="block text-900 font-medium mb-2">Email</label>
+                    <InputText id="email1" type="text" class="w-full mb-3" />
+
+                    <label for="password1" class="block text-900 font-medium mb-2">Password</label>
+                    <InputText id="password1" type="password" class="w-full mb-3" />
+
+                    <div class="flex align-items-center justify-content-between mb-6">
+                        <div class="flex align-items-center">
+                            <Checkbox id="rememberme1" :binary="true" v-model="checked" class="mr-2"></Checkbox>
+                            <label for="rememberme1">Remember me</label>
+                        </div>
+                        <a class="font-medium no-underline ml-2 text-blue-500 text-right cursor-pointer">Forgot password?</a>
+                    </div>
+
+                    <Button label="Sign In" icon="pi pi-user" class="w-full"></Button>
+                </div>
+            </div>
+        </BlockViewer>
+
+        <BlockViewer header="Description List" :code="block9" containerClass="surface-section px-4 py-8 md:px-6 lg:px-8">
+            <div class="surface-section">
+                <div class="font-medium text-3xl text-900 mb-3">Movie Information</div>
+                <div class="text-500 mb-5">Morbi tristique blandit turpis. In viverra ligula id nulla hendrerit rutrum.</div>
+                <ul class="list-none p-0 m-0">
+                    <li class="flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap">
+                        <div class="text-500 w-6 md:w-2 font-medium">Title</div>
+                        <div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1">Heat</div>
+                        <div class="w-6 md:w-2 flex justify-content-end">
+                            <Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
+                        </div>
+                    </li>
+                    <li class="flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap">
+                        <div class="text-500 w-6 md:w-2 font-medium">Genre</div>
+                        <div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1">
+                            <Chip label="Crime" class="mr-2"></Chip>
+                            <Chip label="Drama" class="mr-2"></Chip>
+                            <Chip label="Thriller"></Chip>
+                        </div>
+                        <div class="w-6 md:w-2 flex justify-content-end">
+                            <Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
+                        </div>
+                    </li>
+                    <li class="flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap">
+                        <div class="text-500 w-6 md:w-2 font-medium">Director</div>
+                        <div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1">Michael Mann</div>
+                        <div class="w-6 md:w-2 flex justify-content-end">
+                            <Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
+                        </div>
+                    </li>
+                    <li class="flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap">
+                        <div class="text-500 w-6 md:w-2 font-medium">Actors</div>
+                        <div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1">Robert De Niro, Al Pacino</div>
+                        <div class="w-6 md:w-2 flex justify-content-end">
+                            <Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
+                        </div>
+                    </li>
+                    <li class="flex align-items-center py-3 px-2 border-top-1 border-bottom-1 surface-border flex-wrap">
+                        <div class="text-500 w-6 md:w-2 font-medium">Plot</div>
+                        <div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1 line-height-3">A group of professional bank robbers start to feel the heat from police when they unknowingly leave a clue at their latest heist.</div>
+                        <div class="w-6 md:w-2 flex justify-content-end">
+                            <Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+        </BlockViewer>
+
+        <BlockViewer header="Card" :code="block10" containerClass="px-4 py-8 md:px-6 lg:px-8">
+            <div class="surface-card p-4 shadow-2 border-round">
+                <div class="text-3xl font-medium text-900 mb-3">Card Title</div>
+                <div class="font-medium text-500 mb-3">Vivamus id nisl interdum, blandit augue sit amet, eleifend mi.</div>
+                <div style="height: 150px" class="border-2 border-dashed surface-border"></div>
+            </div>
+        </BlockViewer>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const block1 = ref(`
+<div class="grid grid-nogutter surface-section text-800">
+    <div class="col-12 md:col-6 p-6 text-center md:text-left flex align-items-center ">
+        <section>
+            <span class="block text-6xl font-bold mb-1">Create the screens your</span>
+            <div class="text-6xl text-primary font-bold mb-3">your visitors deserve to see</div>
+            <p class="mt-0 mb-4 text-700 line-height-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+
+            <Button label="Learn More" type="button" class="mr-3 p-button-raised"></Button>
+            <Button label="Live Demo" type="button" class="p-button-outlined"></Button>
+        </section>
+    </div>
+    <div class="col-12 md:col-6 overflow-hidden">
+        <img src="images/blocks/hero/hero-1.png" alt="Image" class="md:ml-auto block md:h-full" style="clip-path: polygon(8% 0, 100% 0%, 100% 100%, 0 100%)">
+    </div>
+</div>`);
+const block2 = ref(`
+<div class="surface-section px-4 py-8 md:px-6 lg:px-8 text-center">
+    <div class="mb-3 font-bold text-2xl">
+        <span class="text-900">One Product, </span>
+        <span class="text-blue-600">Many Solutions</span>
+    </div>
+    <div class="text-700 text-sm mb-6">Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna.</div>
+    <div class="grid">
+        <div class="col-12 md:col-4 mb-4 px-5">
+            <span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
+                <i class="pi pi-desktop text-4xl text-blue-500"></i>
+            </span>
+            <div class="text-900 mb-3 font-medium">Built for Developers</div>
+            <span class="text-700 text-sm line-height-3">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</span>
+        </div>
+        <div class="col-12 md:col-4 mb-4 px-5">
+            <span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
+                <i class="pi pi-lock text-4xl text-blue-500"></i>
+            </span>
+            <div class="text-900 mb-3 font-medium">End-to-End Encryption</div>
+            <span class="text-700 text-sm line-height-3">Risus nec feugiat in fermentum posuere urna nec. Posuere sollicitudin aliquam ultrices sagittis.</span>
+        </div>
+        <div class="col-12 md:col-4 mb-4 px-5">
+            <span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
+                <i class="pi pi-check-circle text-4xl text-blue-500"></i>
+            </span>
+            <div class="text-900 mb-3 font-medium">Easy to Use</div>
+            <span class="text-700 text-sm line-height-3">Ornare suspendisse sed nisi lacus sed viverra tellus. Neque volutpat ac tincidunt vitae semper.</span>
+        </div>
+        <div class="col-12 md:col-4 mb-4 px-5">
+            <span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
+                <i class="pi pi-globe text-4xl text-blue-500"></i>
+            </span>
+            <div class="text-900 mb-3 font-medium">Fast & Global Support</div>
+            <span class="text-700 text-sm line-height-3">Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum tellus.</span>
+        </div>
+        <div class="col-12 md:col-4 mb-4 px-5">
+            <span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
+                <i class="pi pi-github text-4xl text-blue-500"></i>
+            </span>
+            <div class="text-900 mb-3 font-medium">Open Source</div>
+            <span class="text-700 text-sm line-height-3">Nec tincidunt praesent semper feugiat. Sed adipiscing diam donec adipiscing tristique risus nec feugiat. </span>
+        </div>
+        <div class="col-12 md:col-4 md:mb-4 mb-0 px-3">
+            <span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
+                <i class="pi pi-shield text-4xl text-blue-500"></i>
+            </span>
+            <div class="text-900 mb-3 font-medium">Trusted Securitty</div>
+            <span class="text-700 text-sm line-height-3">Mattis rhoncus urna neque viverra justo nec ultrices. Id cursus metus aliquam eleifend.</span>
+        </div>
+    </div>
+</div>`);
+const block3 = ref(`
+<div class="surface-ground px-4 py-8 md:px-6 lg:px-8">
+    <div class="text-900 font-bold text-6xl mb-4 text-center">Pricing Plans</div>
+    <div class="text-700 text-xl mb-6 text-center line-height-3">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.</div>
+
+    <div class="grid">
+        <div class="col-12 lg:col-4">
+            <div class="p-3 h-full">
+                <div class="shadow-2 p-3 h-full flex flex-column surface-card" style="border-radius: 6px">
+                    <div class="text-900 font-medium text-xl mb-2">Basic</div>
+                    <div class="text-600">Plan description</div>
+                    <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
+                    <div class="flex align-items-center">
+                        <span class="font-bold text-2xl text-900">$9</span>
+                        <span class="ml-2 font-medium text-600">per month</span>
+                    </div>
+                    <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
+                    <ul class="list-none p-0 m-0 flex-grow-1">
+                        <li class="flex align-items-center mb-3">
+                            <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                            <span>Arcu vitae elementum</span>
+                        </li>
+                        <li class="flex align-items-center mb-3">
+                            <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                            <span>Dui faucibus in ornare</span>
+                        </li>
+                        <li class="flex align-items-center mb-3">
+                            <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                            <span>Morbi tincidunt augue</span>
+                        </li>
+                    </ul>
+                    <hr class="mb-3 mx-0 border-top-1 border-none surface-border mt-auto" />
+                    <Button label="Buy Now" class="p-3 w-full mt-auto"></Button>
+                </div>
+            </div>
+        </div>
+
+        <div class="col-12 lg:col-4">
+            <div class="p-3 h-full">
+                <div class="shadow-2 p-3 h-full flex flex-column surface-card" style="border-radius: 6px">
+                    <div class="text-900 font-medium text-xl mb-2">Premium</div>
+                    <div class="text-600">Plan description</div>
+                    <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
+                    <div class="flex align-items-center">
+                        <span class="font-bold text-2xl text-900">$29</span>
+                        <span class="ml-2 font-medium text-600">per month</span>
+                    </div>
+                    <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
+                    <ul class="list-none p-0 m-0 flex-grow-1">
+                        <li class="flex align-items-center mb-3">
+                            <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                            <span>Arcu vitae elementum</span>
+                        </li>
+                        <li class="flex align-items-center mb-3">
+                            <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                            <span>Dui faucibus in ornare</span>
+                        </li>
+                        <li class="flex align-items-center mb-3">
+                            <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                            <span>Morbi tincidunt augue</span>
+                        </li>
+                        <li class="flex align-items-center mb-3">
+                            <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                            <span>Duis ultricies lacus sed</span>
+                        </li>
+                    </ul>
+                    <hr class="mb-3 mx-0 border-top-1 border-none surface-border" />
+                    <Button label="Buy Now" class="p-3 w-full"></Button>
+                </div>
+            </div>
+        </div>
+
+        <div class="col-12 lg:col-4">
+            <div class="p-3 h-full">
+                <div class="shadow-2 p-3 flex flex-column surface-card" style="border-radius: 6px">
+                    <div class="text-900 font-medium text-xl mb-2">Enterprise</div>
+                    <div class="text-600">Plan description</div>
+                    <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
+                    <div class="flex align-items-center">
+                        <span class="font-bold text-2xl text-900">$49</span>
+                        <span class="ml-2 font-medium text-600">per month</span>
+                    </div>
+                    <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
+                    <ul class="list-none p-0 m-0 flex-grow-1">
+                        <li class="flex align-items-center mb-3">
+                            <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                            <span>Arcu vitae elementum</span>
+                        </li>
+                        <li class="flex align-items-center mb-3">
+                            <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                            <span>Dui faucibus in ornare</span>
+                        </li>
+                        <li class="flex align-items-center mb-3">
+                            <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                            <span>Morbi tincidunt augue</span>
+                        </li>
+                        <li class="flex align-items-center mb-3">
+                            <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                            <span>Duis ultricies lacus sed</span>
+                        </li>
+                        <li class="flex align-items-center mb-3">
+                            <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                            <span>Imperdiet proin</span>
+                        </li>
+                        <li class="flex align-items-center mb-3">
+                            <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                            <span>Nisi scelerisque</span>
+                        </li>
+                    </ul>
+                    <hr class="mb-3 mx-0 border-top-1 border-none surface-border" />
+                    <Button label="Buy Now" class="p-3 w-full p-button-outlined"></Button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>`);
+const block4 = ref(`
+<div class="surface-section px-4 py-8 md:px-6 lg:px-8">
+    <div class="text-700 text-center">
+        <div class="text-blue-600 font-bold mb-3"><i class="pi pi-discord"></i>&nbsp;POWERED BY DISCORD</div>
+        <div class="text-900 font-bold text-5xl mb-3">Join Our Design Community</div>
+        <div class="text-700 text-2xl mb-5">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.</div>
+        <Button label="Join Now" icon="pi pi-discord" class="font-bold px-5 py-3 p-button-raised p-button-rounded white-space-nowrap"></Button>
+    </div>
+</div>`);
+const block5 = ref(`
+<div class="bg-bluegray-900 text-gray-100 p-3 flex justify-content-between lg:justify-content-center align-items-center flex-wrap">
+    <div class="font-bold mr-8">🔥 Hot Deals!</div>
+    <div class="align-items-center hidden lg:flex">
+        <span class="line-height-3">Libero voluptatum atque exercitationem praesentium provident odit.</span>
+    </div>
+    <a class="flex align-items-center ml-2 mr-8">
+        <a class="text-white" href="#"><span class="underline font-bold">Learn More</span></a>
+    </a>
+    <a v-ripple class="flex align-items-center no-underline justify-content-center border-circle text-gray-50 hover:bg-bluegray-700 cursor-pointer transition-colors transition-duration-150 p-ripple" style="width:2rem; height: 2rem">
+        <i class="pi pi-times"></i>
+    </a>
+</div>`);
+const block6 = ref(`
+<div class="surface-section px-4 py-5 md:px-6 lg:px-8">
+    <ul class="list-none p-0 m-0 flex align-items-center font-medium mb-3">
+        <li>
+            <a class="text-500 no-underline line-height-3 cursor-pointer">Application</a>
+        </li>
+        <li class="px-2">
+            <i class="pi pi-angle-right text-500 line-height-3"></i>
+        </li>
+        <li>
+            <span class="text-900 line-height-3">Analytics</span>
+        </li>
+    </ul>
+    <div class="flex align-items-start flex-column lg:justify-content-between lg:flex-row">
+        <div>
+            <div class="font-medium text-3xl text-900">Customers</div>
+            <div class="flex align-items-center text-700 flex-wrap">
+                <div class="mr-5 flex align-items-center mt-3">
+                    <i class="pi pi-users mr-2"></i>
+                    <span>332 Active Users</span>
+                </div>
+                <div class="mr-5 flex align-items-center mt-3">
+                    <i class="pi pi-globe mr-2"></i>
+                    <span>9402 Sessions</span>
+                </div>
+                <div class="flex align-items-center mt-3">
+                    <i class="pi pi-clock mr-2"></i>
+                    <span>2.32m Avg. Duration</span>
+                </div>
+            </div>
+        </div>
+        <div class="mt-3 lg:mt-0">
+            <Button label="Add" class="p-button-outlined mr-2" icon="pi pi-user-plus"></Button>
+            <Button label="Save" icon="pi pi-check"></Button>
+        </div>
+    </div>
+</div>`);
+const block7 = ref(`
+<div class="surface-ground px-4 py-5 md:px-6 lg:px-8">
+    <div class="grid">
+        <div class="col-12 md:col-6 lg:col-3">
+            <div class="surface-card shadow-2 p-3 border-round">
+                <div class="flex justify-content-between mb-3">
+                    <div>
+                        <span class="block text-500 font-medium mb-3">Orders</span>
+                        <div class="text-900 font-medium text-xl">152</div>
+                    </div>
+                    <div class="flex align-items-center justify-content-center bg-blue-100 border-round" style="width:2.5rem;height:2.5rem">
+                        <i class="pi pi-shopping-cart text-blue-500 text-xl"></i>
+                    </div>
+                </div>
+                <span class="text-green-500 font-medium">24 new </span>
+                <span class="text-500">since last visit</span>
+            </div>
+        </div>
+        <div class="col-12 md:col-6 lg:col-3">
+            <div class="surface-card shadow-2 p-3 border-round">
+                <div class="flex justify-content-between mb-3">
+                    <div>
+                        <span class="block text-500 font-medium mb-3">Revenue</span>
+                        <div class="text-900 font-medium text-xl">$2.100</div>
+                    </div>
+                    <div class="flex align-items-center justify-content-center bg-orange-100 border-round" style="width:2.5rem;height:2.5rem">
+                        <i class="pi pi-map-marker text-orange-500 text-xl"></i>
+                    </div>
+                </div>
+                <span class="text-green-500 font-medium">%52+ </span>
+                <span class="text-500">since last week</span>
+            </div>
+        </div>
+        <div class="col-12 md:col-6 lg:col-3">
+            <div class="surface-card shadow-2 p-3 border-round">
+                <div class="flex justify-content-between mb-3">
+                    <div>
+                        <span class="block text-500 font-medium mb-3">Customers</span>
+                        <div class="text-900 font-medium text-xl">28441</div>
+                    </div>
+                    <div class="flex align-items-center justify-content-center bg-cyan-100 border-round" style="width:2.5rem;height:2.5rem">
+                        <i class="pi pi-inbox text-cyan-500 text-xl"></i>
+                    </div>
+                </div>
+                <span class="text-green-500 font-medium">520  </span>
+                <span class="text-500">newly registered</span>
+            </div>
+        </div>
+        <div class="col-12 md:col-6 lg:col-3">
+            <div class="surface-card shadow-2 p-3 border-round">
+                <div class="flex justify-content-between mb-3">
+                    <div>
+                        <span class="block text-500 font-medium mb-3">Comments</span>
+                        <div class="text-900 font-medium text-xl">152 Unread</div>
+                    </div>
+                    <div class="flex align-items-center justify-content-center bg-purple-100 border-round" style="width:2.5rem;height:2.5rem">
+                        <i class="pi pi-comment text-purple-500 text-xl"></i>
+                    </div>
+                </div>
+                <span class="text-green-500 font-medium">85 </span>
+                <span class="text-500">responded</span>
+            </div>
+        </div>
+    </div>
+</div>`);
+const block8 = ref(`
+<div class="surface-card p-4 shadow-2 border-round w-full lg:w-6">
+    <div class="text-center mb-5">
+        <img src="images/blocks/logos/hyper.svg" alt="Image" height="50" class="mb-3">
+        <div class="text-900 text-3xl font-medium mb-3">Welcome Back</div>
+        <span class="text-600 font-medium line-height-3">Don't have an account?</span>
+        <a class="font-medium no-underline ml-2 text-blue-500 cursor-pointer">Create today!</a>
+    </div>
+
+    <div>
+        <label for="email1" class="block text-900 font-medium mb-2">Email</label>
+        <InputText id="email1" type="text" class="w-full mb-3" />
+
+        <label for="password1" class="block text-900 font-medium mb-2">Password</label>
+        <InputText id="password1" type="password" class="w-full mb-3" />
+
+        <div class="flex align-items-center justify-content-between mb-6">
+            <div class="flex align-items-center">
+                <Checkbox id="rememberme1" :binary="true" v-model="checked" class="mr-2"></Checkbox>
+                <label for="rememberme1">Remember me</label>
+            </div>
+            <a class="font-medium no-underline ml-2 text-blue-500 text-right cursor-pointer">Forgot password?</a>
+        </div>
+
+        <Button label="Sign In" icon="pi pi-user" class="w-full"></Button>
+    </div>
+</div>`);
+const block9 = ref(`
+<div class="surface-section">
+    <div class="font-medium text-3xl text-900 mb-3">Movie Information</div>
+    <div class="text-500 mb-5">Morbi tristique blandit turpis. In viverra ligula id nulla hendrerit rutrum.</div>
+    <ul class="list-none p-0 m-0">
+        <li class="flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap">
+            <div class="text-500 w-6 md:w-2 font-medium">Title</div>
+            <div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1">Heat</div>
+            <div class="w-6 md:w-2 flex justify-content-end">
+                <Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
+            </div>
+        </li>
+        <li class="flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap">
+            <div class="text-500 w-6 md:w-2 font-medium">Genre</div>
+            <div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1">
+                <Chip label="Crime" class="mr-2"></Chip>
+                <Chip label="Drama" class="mr-2"></Chip>
+                <Chip label="Thriller"></Chip>
+            </div>
+            <div class="w-6 md:w-2 flex justify-content-end">
+                <Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
+            </div>
+        </li>
+        <li class="flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap">
+            <div class="text-500 w-6 md:w-2 font-medium">Director</div>
+            <div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1">Michael Mann</div>
+            <div class="w-6 md:w-2 flex justify-content-end">
+                <Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
+            </div>
+        </li>
+        <li class="flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap">
+            <div class="text-500 w-6 md:w-2 font-medium">Actors</div>
+            <div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1">Robert De Niro, Al Pacino</div>
+            <div class="w-6 md:w-2 flex justify-content-end">
+                <Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
+            </div>
+        </li>
+        <li class="flex align-items-center py-3 px-2 border-top-1 border-bottom-1 surface-border flex-wrap">
+            <div class="text-500 w-6 md:w-2 font-medium">Plot</div>
+            <div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1 line-height-3">
+                A group of professional bank robbers start to feel the heat from police
+                when they unknowingly leave a clue at their latest heist.</div>
+            <div class="w-6 md:w-2 flex justify-content-end">
+                <Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
+            </div>
+        </li>
+    </ul>
+</div>`);
+const block10 = ref(`
+<div class="surface-card p-4 shadow-2 border-round">
+    <div class="text-3xl font-medium text-900 mb-3">Card Title</div>
+    <div class="font-medium text-500 mb-3">Vivamus id nisl interdum, blandit augue sit amet, eleifend mi.</div>
+    <div style="height: 150px" class="border-2 border-dashed surface-border"></div>
+</div>`);
+const checked = ref(false);
+</script>
diff --git a/src/views/utilities/Icons.vue b/src/views/utilities/Icons.vue
new file mode 100644
index 0000000..24d6631
--- /dev/null
+++ b/src/views/utilities/Icons.vue
@@ -0,0 +1,137 @@
+<template>
+    <div>
+        <div class="card">
+            <h3>Icons</h3>
+            <p>PrimeVue components internally use <a href="https://github.com/primefaces/primeicons" class="font-medium">PrimeIcons</a> library, the official icons suite from <a href="https://www.primetek.com.tr" class="font-medium">PrimeTek</a>.</p>
+
+            <h5>Download</h5>
+            <p>PrimeIcons is available at npm, run the following command to download it to your project.</p>
+
+            <pre v-code><code>
+npm install primeicons --save
+
+</code></pre>
+
+            <h5>Getting Started</h5>
+            <p>PrimeIcons use the <strong>pi pi-&#123;icon&#125;</strong> syntax such as <strong>pi pi-check</strong>. A standalone icon can be displayed using an element like <i>i</i> or <i>span</i></p>
+
+            <pre v-code><code>
+&lt;i class="pi pi-check"&gt;&lt;/i&gt;
+&lt;i class="pi pi-times"&gt;&lt;/i&gt;
+
+</code></pre>
+
+            <i class="pi pi-check" style="margin-right: 0.5rem"></i>
+            <i class="pi pi-times"></i>
+
+            <h5>Size</h5>
+            <p>Size of the icons can easily be changed using font-size property.</p>
+
+            <pre v-code><code>
+&lt;i class="pi pi-check"&gt;&lt;/i&gt;
+
+</code></pre>
+
+            <i class="pi pi-check"></i>
+
+            <pre v-code><code>
+&lt;i class="pi pi-check" style="font-size: 2rem"&gt;&lt;/i&gt;
+
+</code></pre>
+
+            <i class="pi pi-check" style="font-size: 2rem"></i>
+
+            <h5>Spinning Animation</h5>
+            <p>Special pi-spin class applies continuous rotation to an icon.</p>
+            <pre v-code><code>
+&lt;i class="pi pi-spin pi-spinner" style="font-size: 2rem"&gt;&lt;/i&gt;
+
+</code></pre>
+
+            <i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>
+
+            <h5>Constants</h5>
+            <p>PrimeIcons constants API is provided to easily choose an icon with typescript e.g. when defining a menu model.</p>
+            <pre v-code><code>
+&lt;Menu :model="items" /&gt;
+
+</code></pre>
+
+            <pre v-code.script><code>
+import {PrimeIcons} from 'primevue/api';
+
+export default {
+data() {
+  return {
+    items: [
+      {
+        label: 'Update',
+        icon: PrimeIcons.REFRESH,
+                  to: '/update'
+      },
+      {
+        label: 'Delete',
+        icon: PrimeIcons.TIMES,
+                  to: '/delete'
+      }
+    ]
+  }
+}
+}
+
+</code></pre>
+
+            <h5>List of Icons</h5>
+            <p>Here is the current list of PrimeIcons, more icons are added periodically. You may also <a href="https://github.com/primefaces/primeicons/issues" class="font-medium">request new icons</a> at the issue tracker.</p>
+
+            <InputText v-model="filter" class="w-full p-3 mt-3 mb-5" placeholder="Search an icon" />
+
+            <div class="grid icons-list text-center">
+                <div class="col-6 sm:col-4 lg:col-3 xl:col-2 pb-5" v-for="icon of filteredIcons" :key="icon.properties.name">
+                    <i :class="'text-2xl mb-2 pi pi-' + icon.properties.name"></i>
+                    <div>pi-{{ icon.properties.name }}</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, computed } from 'vue';
+
+const icons = ref(null);
+const filter = ref(null);
+
+const filteredIcons = computed(() => {
+    if (filter.value) return icons.value.filter((icon) => icon.properties.name.indexOf(filter.value.toLowerCase()) > -1);
+    else return icons.value;
+});
+
+onMounted(() => {
+    fetch('data/icons.json', { headers: { 'Cache-Control': 'no-cache' } })
+        .then((res) => res.json())
+        .then((d) => {
+            let icons = d.icons;
+            let data = icons.filter((value) => {
+                return value.icon.tags.indexOf('deprecate') === -1;
+            });
+            data.sort((icon1, icon2) => {
+                if (icon1.properties.name < icon2.properties.name) return -1;
+                else if (icon1.properties.name > icon2.properties.name) return 1;
+                else return 0;
+            });
+
+            icons.value = data;
+        });
+});
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/demo/styles/documentation.scss';
+
+.icons-list {
+    i {
+        color: var(--text-color-secondary);
+    }
+}
+</style>