Gava/agenciapsilmno
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Format fixes

Browse Source
This commit is contained in:
tugcekucukoglu
2024-07-29 10:14:47 +03:00
parent a60346c2da
commit 2726aeb8a1
11 changed files with 137 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.eslintrc.cjs
View File

@@ -3,6 +3,9 @@ require('@rushstack/eslint-patch/modern-module-resolution');
module.exports = { module.exports = {
root: true, root: true,
env: {
node: true
},
extends: ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/eslint-config-prettier'], extends: ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/eslint-config-prettier'],
parserOptions: { parserOptions: {
ecmaVersion: 'latest' ecmaVersion: 'latest'

25
.vscode/settings.json vendored
View File

@@ -1,8 +1,23 @@
{ {
"editor.codeActionsOnSave": { "editor.codeActionsOnSave": {
"source.fixAll": "explicit" "source.fixAll.eslint": "explicit",
"source.organizeImports": "explicit"
}, },
"editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.defaultFormatter": "esbenp.prettier-vscode" "[javascript]": {
} "editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
}
}

2
package.json
View File

@@ -5,7 +5,7 @@
"dev": "vite", "dev": "vite",
"build": "vite build", "build": "vite build",
"preview": "vite preview", "preview": "vite preview",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore" "lint": "eslint --fix . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
}, },
"dependencies": { "dependencies": {
"@primevue/themes": "^4.0.0", "@primevue/themes": "^4.0.0",

10
postcss.config.js
View File

@@ -1,6 +1,6 @@
module.exports = { module.exports = {
plugins: { plugins: {
tailwindcss: {}, tailwindcss: {},
autoprefixer: {}, autoprefixer: {}
}, }
} };

23
src/layout/AppConfigurator.vue
View File

@@ -246,25 +246,34 @@ const preset = computed(() => {
<div class="config-panel-colors"> <div class="config-panel-colors">
<span class="config-panel-label">Primary</span> <span class="config-panel-label">Primary</span>
<div> <div>
<button v-for="primaryColor of primaryColors" :key="primaryColor.name" type="button" <button
:title="primaryColor.name" @click="updateColors('primary', primaryColor)" v-for="primaryColor of primaryColors"
:key="primaryColor.name"
type="button"
:title="primaryColor.name"
@click="updateColors('primary', primaryColor)"
:class="{ 'active-color': selectedPrimaryColor === primaryColor.name }" :class="{ 'active-color': selectedPrimaryColor === primaryColor.name }"
:style="{ backgroundColor: `${primaryColor.name === 'noir' ? 'var(--text-color)' : primaryColor.palette['500']}` }"></button> :style="{ backgroundColor: `${primaryColor.name === 'noir' ? 'var(--text-color)' : primaryColor.palette['500']}` }"
></button>
</div> </div>
</div> </div>
<div class="config-panel-colors"> <div class="config-panel-colors">
<span class="config-panel-label">Surface</span> <span class="config-panel-label">Surface</span>
<div> <div>
<button v-for="surface of surfaces" :key="surface.name" type="button" :title="surface.name" <button
v-for="surface of surfaces"
:key="surface.name"
type="button"
:title="surface.name"
@click="updateColors('surface', surface)" @click="updateColors('surface', surface)"
:class="{ 'active-color': selectedSurfaceColor ? selectedSurfaceColor === surface.name : isDarkTheme ? surface.name === 'zinc' : surface.name === 'slate' }" :class="{ 'active-color': selectedSurfaceColor ? selectedSurfaceColor === surface.name : isDarkTheme ? surface.name === 'zinc' : surface.name === 'slate' }"
:style="{ backgroundColor: `${surface.palette['500']}` }"></button> :style="{ backgroundColor: `${surface.palette['500']}` }"
></button>
</div> </div>
</div> </div>
<div class="config-panel-settings"> <div class="config-panel-settings">
<span class="config-panel-label">Presets</span> <span class="config-panel-label">Presets</span>
<SelectButton v-model="preset" @update:modelValue="onPresetChange" :options="presetOptions" <SelectButton v-model="preset" @update:modelValue="onPresetChange" :options="presetOptions" :allowEmpty="false" />
:allowEmpty="false" />
</div> </div>
</div> </div>
</div> </div>

4
src/layout/AppTopbar.vue
View File

@@ -91,7 +91,9 @@ const isOutsideClicked = (event) => {
<div class="relative"> <div class="relative">
<button <button
v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'animate-scalein', leaveToClass: 'hidden', leaveActiveClass: 'animate-fadeout', hideOnOutsideClick: true }" v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'animate-scalein', leaveToClass: 'hidden', leaveActiveClass: 'animate-fadeout', hideOnOutsideClick: true }"
type="button" class="p-link layout-topbar-button"> type="button"
class="p-link layout-topbar-button"
>
<i class="pi pi-palette"></i> <i class="pi pi-palette"></i>
</button> </button>
<AppConfigurator /> <AppConfigurator />

175
src/views/pages/Landing.vue
View File

@@ -18,63 +18,50 @@ const logoUrl = computed(() => {
<template> <template>
<div class="bg-surface-0 dark:bg-surface-900 flex justify-center"> <div class="bg-surface-0 dark:bg-surface-900 flex justify-center">
<div id="home" class="landing-wrapper overflow-hidden"> <div id="home" class="landing-wrapper overflow-hidden">
<div <div class="py-6 px-6 mx-0 md:mx-12 lg:mx-20 lg:px-20 flex items-center justify-between relative lg:static mb-4">
class="py-6 px-6 mx-0 md:mx-12 lg:mx-20 lg:px-20 flex items-center justify-between relative lg:static mb-4"> <a class="flex items-center" href="#"> <img :src="logoUrl" alt="Sakai Logo" height="50" class="mr-0 lg:mr-2" /><span class="text-surface-900 dark:text-surface-0 font-medium text-2xl leading-normal mr-20">SAKAI</span> </a>
<a class="flex items-center" href="#"> <img :src="logoUrl" alt="Sakai Logo" height="50" <a class="cursor-pointer block lg:hidden text-surface-700 dark:text-surface-100 p-ripple" v-ripple v-styleclass="{ selector: '@next', enterClass: 'hidden', leaveToClass: 'hidden', hideOnOutsideClick: true }">
class="mr-0 lg:mr-2" /><span
class="text-surface-900 dark:text-surface-0 font-medium text-2xl leading-normal mr-20">SAKAI</span> </a>
<a class="cursor-pointer block lg:hidden text-surface-700 dark:text-surface-100 p-ripple" v-ripple
v-styleclass="{ selector: '@next', enterClass: 'hidden', leaveToClass: 'hidden', hideOnOutsideClick: true }">
<i class="pi pi-bars text-4xl"></i> <i class="pi pi-bars text-4xl"></i>
</a> </a>
<div class="items-center bg-surface-0 dark:bg-surface-900 grow justify-between hidden lg:flex absolute lg:static w-full left-0 px-12 lg:px-0 z-20" <div class="items-center bg-surface-0 dark:bg-surface-900 grow justify-between hidden lg:flex absolute lg:static w-full left-0 px-12 lg:px-0 z-20" style="top: 120px">
style="top: 120px"> <ul class="list-none p-0 m-0 flex lg:items-center select-none flex-col lg:flex-row cursor-pointer">
<ul
class="list-none p-0 m-0 flex lg:items-center select-none flex-col lg:flex-row cursor-pointer">
<li> <li>
<a @click="smoothScroll('#hero')" <a @click="smoothScroll('#hero')" class="flex m-0 md:ml-8 px-0 py-4 text-surface-900 dark:text-surface-0 font-medium leading-normal p-ripple" v-ripple>
class="flex m-0 md:ml-8 px-0 py-4 text-surface-900 dark:text-surface-0 font-medium leading-normal p-ripple" v-ripple>
<span>Home</span> <span>Home</span>
</a> </a>
</li> </li>
<li> <li>
<a @click="smoothScroll('#features')" <a @click="smoothScroll('#features')" class="flex m-0 md:ml-8 px-0 py-4 text-surface-900 dark:text-surface-0 font-medium leading-normal p-ripple" v-ripple>
class="flex m-0 md:ml-8 px-0 py-4 text-surface-900 dark:text-surface-0 font-medium leading-normal p-ripple" v-ripple>
<span>Features</span> <span>Features</span>
</a> </a>
</li> </li>
<li> <li>
<a @click="smoothScroll('#highlights')" <a @click="smoothScroll('#highlights')" class="flex m-0 md:ml-8 px-0 py-4 text-surface-900 dark:text-surface-0 font-medium leading-normal p-ripple" v-ripple>
class="flex m-0 md:ml-8 px-0 py-4 text-surface-900 dark:text-surface-0 font-medium leading-normal p-ripple" v-ripple>
<span>Highlights</span> <span>Highlights</span>
</a> </a>
</li> </li>
<li> <li>
<a @click="smoothScroll('#pricing')" <a @click="smoothScroll('#pricing')" class="flex m-0 md:ml-8 px-0 py-4 text-surface-900 dark:text-surface-0 font-medium leading-normal p-ripple" v-ripple>
class="flex m-0 md:ml-8 px-0 py-4 text-surface-900 dark:text-surface-0 font-medium leading-normal p-ripple" v-ripple>
<span>Pricing</span> <span>Pricing</span>
</a> </a>
</li> </li>
</ul> </ul>
<div <div class="flex justify-between lg:block border-t lg:border-t-0 border-surface py-4 lg:py-0 mt-4 lg:mt-0">
class="flex justify-between lg:block border-t lg:border-t-0 border-surface py-4 lg:py-0 mt-4 lg:mt-0"> <Button label="Login" class="p-button-text p-button-rounded border-0 font-light leading-tight text-blue-500"></Button>
<Button label="Login" <Button label="Register" class="p-button-rounded border-0 ml-8 font-light text-white leading-tight bg-blue-500"></Button>
class="p-button-text p-button-rounded border-0 font-light leading-tight text-blue-500"></Button>
<Button label="Register"
class="p-button-rounded border-0 ml-8 font-light text-white leading-tight bg-blue-500"></Button>
</div> </div>
</div> </div>
</div> </div>
<div id="hero" class="flex flex-col pt-6 px-6 lg:px-20 overflow-hidden" <div
style="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%, rgb(238, 239, 175) 0%, rgb(195, 227, 250) 100%); clip-path: ellipse(150% 87% at 93% 13%)"> id="hero"
class="flex flex-col pt-6 px-6 lg:px-20 overflow-hidden"
style="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%, rgb(238, 239, 175) 0%, rgb(195, 227, 250) 100%); clip-path: ellipse(150% 87% at 93% 13%)"
>
<div class="mx-6 md:mx-20 mt-0 md:mt-6"> <div class="mx-6 md:mx-20 mt-0 md:mt-6">
<h1 class="text-6xl font-bold text-gray-900 leading-tight"><span class="font-light block">Eu sem <h1 class="text-6xl font-bold text-gray-900 leading-tight"><span class="font-light block">Eu sem integer</span>eget magna fermentum</h1>
integer</span>eget magna fermentum</h1> <p class="font-normal text-2xl leading-normal md:mt-4 text-gray-700">Sed blandit libero volutpat sed cras. Fames ac turpis egestas integer. Placerat in egestas erat...</p>
<p class="font-normal text-2xl leading-normal md:mt-4 text-gray-700">Sed blandit libero volutpat sed <Button label="Get Started" class="p-button-rounded text-xl border-0 mt-8 bg-blue-500 font-normal text-white leading-normal px-4"></Button>
cras. Fames ac turpis egestas integer. Placerat in egestas erat...</p>
<Button label="Get Started"
class="p-button-rounded text-xl border-0 mt-8 bg-blue-500 font-normal text-white leading-normal px-4"></Button>
</div> </div>
<div class="flex justify-center md:justify-end"> <div class="flex justify-center md:justify-end">
<img src="/demo/images/landing/screen-1.png" alt="Hero Image" class="w-9/12 md:w-auto" /> <img src="/demo/images/landing/screen-1.png" alt="Hero Image" class="w-9/12 md:w-auto" />
@@ -90,10 +77,10 @@ const logoUrl = computed(() => {
<div class="col-span-12 md:col-span-12 lg:col-span-4 p-0 lg:pr-8 lg:pb-8 mt-6 lg:mt-0"> <div class="col-span-12 md:col-span-12 lg:col-span-4 p-0 lg:pr-8 lg:pb-8 mt-6 lg:mt-0">
<div <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))"> 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-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px"> <div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
<div class="flex items-center justify-center bg-yellow-200 mb-4" <div class="flex items-center justify-center bg-yellow-200 mb-4" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
<i class="pi pi-fw pi-users text-2xl text-yellow-700"></i> <i class="pi pi-fw pi-users text-2xl text-yellow-700"></i>
</div> </div>
<h5 class="mb-2 text-surface-900 dark:text-surface-0">Easy to Use</h5> <h5 class="mb-2 text-surface-900 dark:text-surface-0">Easy to Use</h5>
@@ -104,10 +91,10 @@ const logoUrl = computed(() => {
<div class="col-span-12 md:col-span-12 lg:col-span-4 p-0 lg:pr-8 lg:pb-8 mt-6 lg:mt-0"> <div class="col-span-12 md:col-span-12 lg:col-span-4 p-0 lg:pr-8 lg:pb-8 mt-6 lg:mt-0">
<div <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))"> 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-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px"> <div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
<div class="flex items-center justify-center bg-cyan-200 mb-4" <div class="flex items-center justify-center bg-cyan-200 mb-4" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
<i class="pi pi-fw pi-palette text-2xl text-cyan-700"></i> <i class="pi pi-fw pi-palette text-2xl text-cyan-700"></i>
</div> </div>
<h5 class="mb-2 text-surface-900 dark:text-surface-0">Fresh Design</h5> <h5 class="mb-2 text-surface-900 dark:text-surface-0">Fresh Design</h5>
@@ -118,10 +105,10 @@ const logoUrl = computed(() => {
<div class="col-span-12 md:col-span-12 lg:col-span-4 p-0 lg:pb-8 mt-6 lg:mt-0"> <div class="col-span-12 md:col-span-12 lg:col-span-4 p-0 lg:pb-8 mt-6 lg:mt-0">
<div <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))"> 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-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px"> <div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
<div class="flex items-center justify-center bg-indigo-200" <div class="flex items-center justify-center bg-indigo-200" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
<i class="pi pi-fw pi-map text-2xl text-indigo-700"></i> <i class="pi pi-fw pi-map text-2xl text-indigo-700"></i>
</div> </div>
<h5 class="mb-2 text-surface-900 dark:text-surface-0">Well Documented</h5> <h5 class="mb-2 text-surface-900 dark:text-surface-0">Well Documented</h5>
@@ -132,10 +119,10 @@ const logoUrl = computed(() => {
<div class="col-span-12 md:col-span-12 lg:col-span-4 p-0 lg:pr-8 lg:pb-8 mt-6 lg:mt-0"> <div class="col-span-12 md:col-span-12 lg:col-span-4 p-0 lg:pr-8 lg:pb-8 mt-6 lg:mt-0">
<div <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))"> 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-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px"> <div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
<div class="flex items-center justify-center bg-slate-200 mb-4" <div class="flex items-center justify-center bg-slate-200 mb-4" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
<i class="pi pi-fw pi-id-card text-2xl text-slate-700"></i> <i class="pi pi-fw pi-id-card text-2xl text-slate-700"></i>
</div> </div>
<h5 class="mb-2 text-surface-900 dark:text-surface-0">Responsive Layout</h5> <h5 class="mb-2 text-surface-900 dark:text-surface-0">Responsive Layout</h5>
@@ -146,10 +133,10 @@ const logoUrl = computed(() => {
<div class="col-span-12 md:col-span-12 lg:col-span-4 p-0 lg:pr-8 lg:pb-8 mt-6 lg:mt-0"> <div class="col-span-12 md:col-span-12 lg:col-span-4 p-0 lg:pr-8 lg:pb-8 mt-6 lg:mt-0">
<div <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))"> 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-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px"> <div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
<div class="flex items-center justify-center bg-orange-200 mb-4" <div class="flex items-center justify-center bg-orange-200 mb-4" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
<i class="pi pi-fw pi-star text-2xl text-orange-700"></i> <i class="pi pi-fw pi-star text-2xl text-orange-700"></i>
</div> </div>
<h5 class="mb-2 text-surface-900 dark:text-surface-0">Clean Code</h5> <h5 class="mb-2 text-surface-900 dark:text-surface-0">Clean Code</h5>
@@ -160,10 +147,10 @@ const logoUrl = computed(() => {
<div class="col-span-12 md:col-span-12 lg:col-span-4 p-0 lg:pb-8 mt-6 lg:mt-0"> <div class="col-span-12 md:col-span-12 lg:col-span-4 p-0 lg:pb-8 mt-6 lg:mt-0">
<div <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))"> 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-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px"> <div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
<div class="flex items-center justify-center bg-pink-200 mb-4" <div class="flex items-center justify-center bg-pink-200 mb-4" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
<i class="pi pi-fw pi-moon text-2xl text-pink-700"></i> <i class="pi pi-fw pi-moon text-2xl text-pink-700"></i>
</div> </div>
<h5 class="mb-2 text-surface-900 dark:text-surface-0">Dark Mode</h5> <h5 class="mb-2 text-surface-900 dark:text-surface-0">Dark Mode</h5>
@@ -174,10 +161,10 @@ const logoUrl = computed(() => {
<div class="col-span-12 md:col-span-12 lg:col-span-4 p-0 lg:pr-8 mt-6 lg:mt-0"> <div class="col-span-12 md:col-span-12 lg:col-span-4 p-0 lg:pr-8 mt-6 lg:mt-0">
<div <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))"> 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-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px"> <div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
<div class="flex items-center justify-center bg-teal-200 mb-4" <div class="flex items-center justify-center bg-teal-200 mb-4" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
<i class="pi pi-fw pi-shopping-cart text-2xl text-teal-700"></i> <i class="pi pi-fw pi-shopping-cart text-2xl text-teal-700"></i>
</div> </div>
<h5 class="mb-2 text-surface-900 dark:text-surface-0">Ready to Use</h5> <h5 class="mb-2 text-surface-900 dark:text-surface-0">Ready to Use</h5>
@@ -188,10 +175,10 @@ const logoUrl = computed(() => {
<div class="col-span-12 md:col-span-12 lg:col-span-4 p-0 lg:pr-8 mt-6 lg:mt-0"> <div class="col-span-12 md:col-span-12 lg:col-span-4 p-0 lg:pr-8 mt-6 lg:mt-0">
<div <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))"> 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-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px"> <div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
<div class="flex items-center justify-center bg-blue-200 mb-4" <div class="flex items-center justify-center bg-blue-200 mb-4" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
<i class="pi pi-fw pi-globe text-2xl text-blue-700"></i> <i class="pi pi-fw pi-globe text-2xl text-blue-700"></i>
</div> </div>
<h5 class="mb-2 text-surface-900 dark:text-surface-0">Modern Practices</h5> <h5 class="mb-2 text-surface-900 dark:text-surface-0">Modern Practices</h5>
@@ -202,10 +189,10 @@ const logoUrl = computed(() => {
<div class="col-span-12 md:col-span-12 lg:col-span-4 p-0 lg-4 mt-6 lg:mt-0"> <div class="col-span-12 md:col-span-12 lg:col-span-4 p-0 lg-4 mt-6 lg:mt-0">
<div <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))"> 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-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px"> <div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
<div class="flex items-center justify-center bg-purple-200 mb-4" <div class="flex items-center justify-center bg-purple-200 mb-4" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
<i class="pi pi-fw pi-eye text-2xl text-purple-700"></i> <i class="pi pi-fw pi-eye text-2xl text-purple-700"></i>
</div> </div>
<h5 class="mb-2 text-surface-900 dark:text-surface-0">Privacy</h5> <h5 class="mb-2 text-surface-900 dark:text-surface-0">Privacy</h5>
@@ -214,17 +201,15 @@ const logoUrl = computed(() => {
</div> </div>
</div> </div>
<div class="col-span-12 mt-20 mb-20 p-2 md:p-20" <div
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%)"> class="col-span-12 mt-20 mb-20 p-2 md:p-20"
<div 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%)"
class="flex flex-col justify-center items-center text-center px-4 py-4 md:py-0"> >
<div class="flex flex-col justify-center items-center text-center px-4 py-4 md:py-0">
<h3 class="text-gray-900 mb-2">Joséphine Miller</h3> <h3 class="text-gray-900 mb-2">Joséphine Miller</h3>
<span class="text-gray-600 text-2xl">Peak Interactive</span> <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-6" <p class="text-gray-900 sm:line-height-2 md:line-height-4 text-2xl mt-6" style="max-width: 800px">
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.”
“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> </p>
<img src="/demo/images/landing/peak-logo.svg" class="mt-6" alt="Company logo" /> <img src="/demo/images/landing/peak-logo.svg" class="mt-6" alt="Company logo" />
</div> </div>
@@ -239,38 +224,33 @@ const logoUrl = computed(() => {
</div> </div>
<div class="grid grid-cols-12 gap-4 mt-20 pb-2 md:pb-20"> <div class="grid grid-cols-12 gap-4 mt-20 pb-2 md:pb-20">
<div class="flex justify-center col-span-12 lg:col-span-6 bg-purple-100 p-0 order-1 lg:order-none" <div class="flex justify-center col-span-12 lg:col-span-6 bg-purple-100 p-0 order-1 lg:order-none" style="border-radius: 8px">
style="border-radius: 8px">
<img src="/demo/images/landing/mockup.svg" class="w-11/12" alt="mockup mobile" /> <img src="/demo/images/landing/mockup.svg" class="w-11/12" alt="mockup mobile" />
</div> </div>
<div class="col-span-12 lg:col-span-6 my-auto flex flex-col lg:items-end text-center lg:text-right"> <div class="col-span-12 lg:col-span-6 my-auto flex flex-col lg:items-end text-center lg:text-right">
<div class="flex items-center justify-center bg-purple-200 self-center lg:self-end" <div class="flex items-center justify-center bg-purple-200 self-center lg:self-end" style="width: 4.2rem; height: 4.2rem; border-radius: 10px">
style="width: 4.2rem; height: 4.2rem; border-radius: 10px">
<i class="pi pi-fw pi-mobile text-5xl text-purple-700"></i> <i class="pi pi-fw pi-mobile text-5xl text-purple-700"></i>
</div> </div>
<h2 class="leading-none text-surface-900 dark:text-surface-0 text-4xl font-normal">Congue Quisque Egestas</h2> <h2 class="leading-none text-surface-900 dark:text-surface-0 text-4xl font-normal">Congue Quisque Egestas</h2>
<span class="text-surface-700 dark:text-surface-100 text-2xl leading-normal ml-0 md:ml-2" style="max-width: 650px">Lectus arcu <span class="text-surface-700 dark:text-surface-100 text-2xl leading-normal ml-0 md:ml-2" style="max-width: 650px"
bibendum at varius vel pharetra vel turpis nunc. Eget aliquet nibh praesent tristique magna >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
sit amet purus gravida. Sit amet mattis vulputate enim nulla aliquet.</span> >
</div> </div>
</div> </div>
<div class="grid grid-cols-12 gap-4 my-20 pt-2 md:pt-20"> <div class="grid grid-cols-12 gap-4 my-20 pt-2 md:pt-20">
<div class="col-span-12 lg:col-span-6 my-auto flex flex-col text-center lg:text-left lg:items-start"> <div class="col-span-12 lg:col-span-6 my-auto flex flex-col text-center lg:text-left lg:items-start">
<div class="flex items-center justify-center bg-yellow-200 self-center lg:self-start" <div class="flex items-center justify-center bg-yellow-200 self-center lg:self-start" style="width: 4.2rem; height: 4.2rem; border-radius: 10px">
style="width: 4.2rem; height: 4.2rem; border-radius: 10px">
<i class="pi pi-fw pi-desktop text-5xl text-yellow-700"></i> <i class="pi pi-fw pi-desktop text-5xl text-yellow-700"></i>
</div> </div>
<h2 class="leading-none text-surface-900 dark:text-surface-0 text-4xl font-normal">Celerisque Eu Ultrices</h2> <h2 class="leading-none text-surface-900 dark:text-surface-0 text-4xl font-normal">Celerisque Eu Ultrices</h2>
<span class="text-surface-700 dark:text-surface-100 text-2xl leading-normal mr-0 md:mr-2" style="max-width: 650px">Adipiscing <span class="text-surface-700 dark:text-surface-100 text-2xl leading-normal mr-0 md:mr-2" style="max-width: 650px"
commodo elit at imperdiet dui. Viverra nibh cras pulvinar mattis nunc sed blandit libero. >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
Suspendisse in est ante in. Mauris pharetra et ultrices neque ornare aenean euismod >
elementum nisi.</span>
</div> </div>
<div class="flex justify-end order-1 sm:order-2 col-span-12 lg:col-span-6 bg-yellow-100 p-0" <div class="flex justify-end order-1 sm:order-2 col-span-12 lg:col-span-6 bg-yellow-100 p-0" style="border-radius: 8px">
style="border-radius: 8px">
<img src="/demo/images/landing/mockup-desktop.svg" class="w-11/12" alt="mockup" /> <img src="/demo/images/landing/mockup-desktop.svg" class="w-11/12" alt="mockup" />
</div> </div>
</div> </div>
@@ -284,15 +264,13 @@ const logoUrl = computed(() => {
<div class="grid grid-cols-12 gap-4 justify-between mt-20 md:mt-0"> <div class="grid grid-cols-12 gap-4 justify-between mt-20 md:mt-0">
<div class="col-span-12 lg:col-span-4 p-0 md:p-4"> <div class="col-span-12 lg:col-span-4 p-0 md:p-4">
<div class="p-4 flex flex-col border-surface-200 dark:border-surface-600 pricing-card cursor-pointer border-2 hover:border-primary duration-300 transition-all" <div class="p-4 flex flex-col border-surface-200 dark:border-surface-600 pricing-card cursor-pointer border-2 hover:border-primary duration-300 transition-all" style="border-radius: 10px">
style="border-radius: 10px">
<h3 class="text-surface-900 dark:text-surface-0 text-center my-8">Free</h3> <h3 class="text-surface-900 dark:text-surface-0 text-center my-8">Free</h3>
<img src="/demo/images/landing/free.svg" class="w-10/12 h-10 mx-auto" alt="free" /> <img src="/demo/images/landing/free.svg" class="w-10/12 h-10 mx-auto" alt="free" />
<div class="my-8 text-center"> <div class="my-8 text-center">
<span class="text-5xl font-bold mr-2 text-surface-900 dark:text-surface-0">$0</span> <span class="text-5xl font-bold mr-2 text-surface-900 dark:text-surface-0">$0</span>
<span class="text-surface-600 dark:text-surface-200">per month</span> <span class="text-surface-600 dark:text-surface-200">per month</span>
<Button label="Get Started" <Button label="Get Started" class="block mx-auto mt-6 p-button-rounded border-0 ml-4 font-light leading-tight bg-blue-500 text-white"></Button>
class="block mx-auto mt-6 p-button-rounded border-0 ml-4 font-light leading-tight bg-blue-500 text-white"></Button>
</div> </div>
<Divider class="w-full bg-surface-200"></Divider> <Divider class="w-full bg-surface-200"></Divider>
<ul class="my-8 list-none p-0 flex text-surface-900 dark:text-surface-0 flex-col"> <ul class="my-8 list-none p-0 flex text-surface-900 dark:text-surface-0 flex-col">
@@ -317,15 +295,13 @@ const logoUrl = computed(() => {
</div> </div>
<div class="col-span-12 lg:col-span-4 p-0 md:p-4 mt-6 md:mt-0"> <div class="col-span-12 lg:col-span-4 p-0 md:p-4 mt-6 md:mt-0">
<div class="p-4 flex flex-col border-surface-200 dark:border-surface-600 pricing-card cursor-pointer border-2 hover:border-primary duration-300 transition-all" <div class="p-4 flex flex-col border-surface-200 dark:border-surface-600 pricing-card cursor-pointer border-2 hover:border-primary duration-300 transition-all" style="border-radius: 10px">
style="border-radius: 10px">
<h3 class="text-surface-900 dark:text-surface-0 text-center my-8">Startup</h3> <h3 class="text-surface-900 dark:text-surface-0 text-center my-8">Startup</h3>
<img src="/demo/images/landing/startup.svg" class="w-10/12 h-10 mx-auto" alt="startup" /> <img src="/demo/images/landing/startup.svg" class="w-10/12 h-10 mx-auto" alt="startup" />
<div class="my-8 text-center"> <div class="my-8 text-center">
<span class="text-5xl font-bold mr-2 text-surface-900 dark:text-surface-0">$1</span> <span class="text-5xl font-bold mr-2 text-surface-900 dark:text-surface-0">$1</span>
<span class="text-surface-600 dark:text-surface-200">per month</span> <span class="text-surface-600 dark:text-surface-200">per month</span>
<Button label="Try Free" <Button label="Try Free" class="block mx-auto mt-6 p-button-rounded border-0 ml-4 font-light leading-tight bg-blue-500 text-white"></Button>
class="block mx-auto mt-6 p-button-rounded border-0 ml-4 font-light leading-tight bg-blue-500 text-white"></Button>
</div> </div>
<Divider class="w-full bg-surface-200"></Divider> <Divider class="w-full bg-surface-200"></Divider>
<ul class="my-8 list-none p-0 flex text-surface-900 dark:text-surface-0 flex-col"> <ul class="my-8 list-none p-0 flex text-surface-900 dark:text-surface-0 flex-col">
@@ -350,15 +326,13 @@ const logoUrl = computed(() => {
</div> </div>
<div class="col-span-12 lg:col-span-4 p-0 md:p-4 mt-6 md:mt-0"> <div class="col-span-12 lg:col-span-4 p-0 md:p-4 mt-6 md:mt-0">
<div class="p-4 flex flex-col border-surface-200 dark:border-surface-600 pricing-card cursor-pointer border-2 hover:border-primary duration-300 transition-all" <div class="p-4 flex flex-col border-surface-200 dark:border-surface-600 pricing-card cursor-pointer border-2 hover:border-primary duration-300 transition-all" style="border-radius: 10px">
style="border-radius: 10px">
<h3 class="text-surface-900 dark:text-surface-0 text-center my-8">Enterprise</h3> <h3 class="text-surface-900 dark:text-surface-0 text-center my-8">Enterprise</h3>
<img src="/demo/images/landing/enterprise.svg" class="w-10/12 h-10 mx-auto" alt="enterprise" /> <img src="/demo/images/landing/enterprise.svg" class="w-10/12 h-10 mx-auto" alt="enterprise" />
<div class="my-8 text-center"> <div class="my-8 text-center">
<span class="text-5xl font-bold mr-2 text-surface-900 dark:text-surface-0">$999</span> <span class="text-5xl font-bold mr-2 text-surface-900 dark:text-surface-0">$999</span>
<span class="text-surface-600 dark:text-surface-200">per month</span> <span class="text-surface-600 dark:text-surface-200">per month</span>
<Button label="Get a Quote" <Button label="Get a Quote" class="block mx-auto mt-6 p-button-rounded border-0 ml-4 font-light leading-tight bg-blue-500 text-white"></Button>
class="block mx-auto mt-6 p-button-rounded border-0 ml-4 font-light leading-tight bg-blue-500 text-white"></Button>
</div> </div>
<Divider class="w-full bg-surface-200"></Divider> <Divider class="w-full bg-surface-200"></Divider>
<ul class="my-8 list-none p-0 flex text-surface-900 dark:text-surface-0 flex-col"> <ul class="my-8 list-none p-0 flex text-surface-900 dark:text-surface-0 flex-col">
@@ -387,8 +361,7 @@ const logoUrl = computed(() => {
<div class="py-6 px-6 mx-0 mt-20 lg:mx-20"> <div class="py-6 px-6 mx-0 mt-20 lg:mx-20">
<div class="grid grid-cols-12 gap-4 justify-between"> <div class="grid grid-cols-12 gap-4 justify-between">
<div class="col-span-12 md:col-span-2" style="margin-top: -1.5rem"> <div class="col-span-12 md:col-span-2" style="margin-top: -1.5rem">
<a @click="smoothScroll('#home')" <a @click="smoothScroll('#home')" class="flex flex-wrap items-center justify-center md:justify-start md:mb-0 mb-4 cursor-pointer">
class="flex flex-wrap items-center justify-center md:justify-start md:mb-0 mb-4 cursor-pointer">
<img :src="logoUrl" alt="footer sections" width="50" height="50" class="mr-2" /> <img :src="logoUrl" alt="footer sections" width="50" height="50" class="mr-2" />
<h4 class="font-medium text-3xl text-surface-900 dark:text-surface-0">SAKAI</h4> <h4 class="font-medium text-3xl text-surface-900 dark:text-surface-0">SAKAI</h4>
</a> </a>
@@ -400,8 +373,7 @@ const logoUrl = computed(() => {
<h4 class="font-medium text-2xl leading-normal mb-4 text-surface-900 dark:text-surface-0">Company</h4> <h4 class="font-medium text-2xl leading-normal mb-4 text-surface-900 dark:text-surface-0">Company</h4>
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">About Us</a> <a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">About Us</a>
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">News</a> <a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">News</a>
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Investor <a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Investor Relations</a>
Relations</a>
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Careers</a> <a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Careers</a>
<a class="leading-normal text-xl block cursor-pointer text-surface-700 dark:text-surface-100">Media Kit</a> <a class="leading-normal text-xl block cursor-pointer text-surface-700 dark:text-surface-100">Media Kit</a>
</div> </div>
@@ -416,8 +388,7 @@ const logoUrl = computed(() => {
<div class="col-span-12 md:col-span-3 mt-6 md:mt-0"> <div class="col-span-12 md:col-span-3 mt-6 md:mt-0">
<h4 class="font-medium text-2xl leading-normal mb-4 text-surface-900 dark:text-surface-0">Community</h4> <h4 class="font-medium text-2xl leading-normal mb-4 text-surface-900 dark:text-surface-0">Community</h4>
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Discord</a> <a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Discord</a>
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Events<img <a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Events<img src="/demo/images/landing/new-badge.svg" class="ml-2" /></a>
src="/demo/images/landing/new-badge.svg" class="ml-2" /></a>
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">FAQ</a> <a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">FAQ</a>
<a class="leading-normal text-xl block cursor-pointer text-surface-700 dark:text-surface-100">Blog</a> <a class="leading-normal text-xl block cursor-pointer text-surface-700 dark:text-surface-100">Blog</a>
</div> </div>

18
src/views/pages/NotFound.vue
View File

@@ -1,20 +1,16 @@
<script setup></script> <script setup></script>
<template> <template>
<div <div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
<div class="flex flex-col items-center justify-center"> <div class="flex flex-col items-center justify-center">
<img src="/demo/images/notfound/logo-blue.svg" alt="Sakai logo" class="mb-8 w-24 shrink-0" /> <img src="/demo/images/notfound/logo-blue.svg" alt="Sakai logo" class="mb-8 w-24 shrink-0" />
<div <div style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, rgba(33, 150, 243, 0.4) 10%, rgba(33, 150, 243, 0) 30%)">
style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, rgba(33, 150, 243, 0.4) 10%, rgba(33, 150, 243, 0) 30%)"> <div class="w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20 flex flex-col items-center" style="border-radius: 53px">
<div class="w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20 flex flex-col items-center"
style="border-radius: 53px">
<span class="text-blue-500 font-bold text-3xl">404</span> <span class="text-blue-500 font-bold text-3xl">404</span>
<h1 class="text-surface-900 dark:text-surface-0 font-bold text-3xl lg:text-5xl mb-2">Not Found</h1> <h1 class="text-surface-900 dark:text-surface-0 font-bold text-3xl lg:text-5xl mb-2">Not Found</h1>
<div class="text-surface-600 dark:text-surface-200 mb-8">Requested resource is not available.</div> <div class="text-surface-600 dark:text-surface-200 mb-8">Requested resource is not available.</div>
<router-link to="/" class="w-full flex items-center py-8 border-surface-300 dark:border-surface-500 border-b"> <router-link to="/" class="w-full flex items-center py-8 border-surface-300 dark:border-surface-500 border-b">
<span class="flex justify-center items-center bg-cyan-400 rounded-border" <span class="flex justify-center items-center bg-cyan-400 rounded-border" style="height: 3.5rem; width: 3.5rem">
style="height: 3.5rem; width: 3.5rem">
<i class="text-surface-50 dark:text-surface-800 pi pi-fw pi-table text-2xl"></i> <i class="text-surface-50 dark:text-surface-800 pi pi-fw pi-table text-2xl"></i>
</span> </span>
<span class="ml-6 flex flex-col"> <span class="ml-6 flex flex-col">
@@ -23,8 +19,7 @@
</span> </span>
</router-link> </router-link>
<router-link to="/" class="w-full flex items-center py-8 border-surface-300 dark:border-surface-500 border-b"> <router-link to="/" class="w-full flex items-center py-8 border-surface-300 dark:border-surface-500 border-b">
<span class="flex justify-center items-center bg-orange-400 rounded-border" <span class="flex justify-center items-center bg-orange-400 rounded-border" style="height: 3.5rem; width: 3.5rem">
style="height: 3.5rem; width: 3.5rem">
<i class="pi pi-fw pi-question-circle text-surface-50 dark:text-surface-800 text-2xl"></i> <i class="pi pi-fw pi-question-circle text-surface-50 dark:text-surface-800 text-2xl"></i>
</span> </span>
<span class="ml-6 flex flex-col"> <span class="ml-6 flex flex-col">
@@ -33,8 +28,7 @@
</span> </span>
</router-link> </router-link>
<router-link to="/" class="w-full flex items-center mb-8 py-8 border-surface-300 dark:border-surface-500 border-b"> <router-link to="/" class="w-full flex items-center mb-8 py-8 border-surface-300 dark:border-surface-500 border-b">
<span class="flex justify-center items-center bg-indigo-400 rounded-border" <span class="flex justify-center items-center bg-indigo-400 rounded-border" style="height: 3.5rem; width: 3.5rem">
style="height: 3.5rem; width: 3.5rem">
<i class="pi pi-fw pi-unlock text-surface-50 dark:text-surface-800 text-2xl"></i> <i class="pi pi-fw pi-unlock text-surface-50 dark:text-surface-800 text-2xl"></i>
</span> </span>
<span class="ml-6 flex flex-col"> <span class="ml-6 flex flex-col">

18
src/views/uikit/MenuDoc.vue
View File

@@ -82,24 +82,6 @@ const nestedMenuitems = ref([
]); ]);
const breadcrumbHome = ref({ icon: 'pi pi-home', to: '/' }); const breadcrumbHome = ref({ icon: 'pi pi-home', to: '/' });
const breadcrumbItems = ref([{ label: 'Computer' }, { label: 'Notebook' }, { label: 'Accessories' }, { label: 'Backpacks' }, { label: 'Item' }]); const breadcrumbItems = ref([{ label: 'Computer' }, { label: 'Notebook' }, { label: 'Accessories' }, { label: 'Backpacks' }, { label: 'Item' }]);
const nestedRouteItems = ref([
{
label: 'Personal',
to: '/uikit/menu'
},
{
label: 'Seat',
to: '/uikit/menu/seat'
},
{
label: 'Payment',
to: '/uikit/menu/payment'
},
{
label: 'Confirmation',
to: '/uikit/menu/confirmation'
}
]);
const tieredMenuItems = ref([ const tieredMenuItems = ref([
{ {
label: 'Customers', label: 'Customers',

4
src/views/utilities/Blocks.vue
View File

@@ -784,7 +784,9 @@ const checked = ref(false);
</li> </li>
<li class="flex items-center py-4 px-2 border-t border-b border-surface flex-wrap"> <li class="flex items-center py-4 px-2 border-t border-b border-surface flex-wrap">
<div class="text-surface-500 dark:text-surface-300 w-6/12 md:w-2/12 font-medium">Plot</div> <div class="text-surface-500 dark:text-surface-300 w-6/12 md:w-2/12 font-medium">Plot</div>
<div class="text-surface-900 dark:text-surface-0 w-full md:w-8/12 md:order-none order-1 leading-normal">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="text-surface-900 dark:text-surface-0 w-full md:w-8/12 md:order-none order-1 leading-normal">
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/12 md:w-2/12 flex justify-end"> <div class="w-6/12 md:w-2/12 flex justify-end">
<Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button> <Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
</div> </div>

24
src/views/utilities/Documentation.vue
View File

@@ -2,17 +2,12 @@
<div class="card"> <div class="card">
<h3>Documentation</h3> <h3>Documentation</h3>
<p class="bg-primary text-primary-contrast rounded-border p-4"> <p class="bg-primary text-primary-contrast rounded-border p-4">
This page covers the Vite version, for Nuxt 3 visit the <a href="https://github.com/primefaces/sakai-nuxt" This page covers the Vite version, for Nuxt 3 visit the <a href="https://github.com/primefaces/sakai-nuxt" class="font-bold bg-primary text-primary-contrast hover:underline">sakai-nuxt</a> repository instead.
class="font-bold bg-primary text-primary-contrast hover:underline">sakai-nuxt</a> repository instead.
</p> </p>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p> <p>
Sakai is an application template for Vue based on the <a href="https://github.com/vuejs/create-vue" Sakai is an application template for Vue based on the <a href="https://github.com/vuejs/create-vue" class="font-medium text-primary hover:underline">create-vue</a>, the recommended way to start a <strong>Vite-powered</strong> Vue
class="font-medium text-primary hover:underline">create-vue</a>, the recommended way to start a projects. To get started, clone the <a href="https://github.com/primefaces/sakai-vue" class="font-medium text-primary hover:underline">repository</a> from GitHub and install the dependencies with npm or yarn.
<strong>Vite-powered</strong> Vue
projects. To get started, clone the <a href="https://github.com/primefaces/sakai-vue"
class="font-medium text-primary hover:underline">repository</a> from GitHub and install the dependencies
with npm or yarn.
</p> </p>
<pre class="app-code"><code> npm install </code></pre> <pre class="app-code"><code> npm install </code></pre>
@@ -20,15 +15,12 @@
<pre class="app-code"><code> yarn </code></pre> <pre class="app-code"><code> yarn </code></pre>
<p>Next step is running the application using the serve script and navigate to <i>http://localhost:5173/</i> to <p>Next step is running the application using the serve script and navigate to <i>http://localhost:5173/</i> to view the application. That is it, you may now start with the development of your application using the Sakai template.</p>
view the application. That is it, you may now start with the development of your application using the Sakai
template.</p>
<pre class="app-code"><code> npm run dev </code></pre> <pre class="app-code"><code> npm run dev </code></pre>
<h5>Structure</h5> <h5>Structure</h5>
<p>Sakai consists of a couple folders, demos and layout have been separated so that you can easily remove what <p>Sakai consists of a couple folders, demos and layout have been separated so that you can easily remove what is not necessary for your application.</p>
is not necessary for your application.</p>
<ul class="leading-normal"> <ul class="leading-normal">
<li><span class="text-primary font-medium">src/layout</span>: Main layout files, needs to be present</li> <li><span class="text-primary font-medium">src/layout</span>: Main layout files, needs to be present</li>
<li><span class="text-primary font-medium">src/views</span>: Demo pages</li> <li><span class="text-primary font-medium">src/views</span>: Demo pages</li>
@@ -42,12 +34,10 @@
<p>Main menu is defined at <span class="text-primary font-medium">src/layout/AppMenu.vue</span> file.</p> <p>Main menu is defined at <span class="text-primary font-medium">src/layout/AppMenu.vue</span> file.</p>
<h5>Integration with Existing Vite Applications</h5> <h5>Integration with Existing Vite Applications</h5>
<p>Only the folders that are related to the layout needs to move in to your project. We've created a short <p>Only the folders that are related to the layout needs to move in to your project. We've created a short tutorial with details.</p>
tutorial with details.</p>
<div class="video-container"> <div class="video-container">
<iframe className="video" width="560" height="315" src="https://www.youtube.com/embed/AHeSjJFR3ZE" <iframe className="video" width="560" height="315" src="https://www.youtube.com/embed/AHeSjJFR3ZE" frameborder="0" allowfullscreen></iframe>
frameborder="0" allowfullscreen></iframe>
</div> </div>
<h5>PrimeVue Theme</h5> <h5>PrimeVue Theme</h5>