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

Migrated to new design tokens of v4

Browse Source
This commit is contained in:
Cagatay Civici
2024-07-25 17:37:08 +03:00
parent a7bec8d7a5
commit cafcd0449e
51 changed files with 1084 additions and 1030 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/views/pages/Crud.vue
View File

@@ -136,10 +136,10 @@ const initFilters = () => {
</script>
<template>
<div class="grid">
<div class="col-12">
<div class="grid grid-cols-12 gap-4">
<div class="col-span-12">
<div class="card">
<Toolbar class="mb-4">
<Toolbar class="mb-6">
<template v-slot:start>
<div class="my-2">
<Button label="New" icon="pi pi-plus" class="mr-2" severity="success" @click="openNew" />
@@ -161,7 +161,7 @@ const initFilters = () => {
:rowsPerPageOptions="[5, 10, 25]"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products">
<template #header>
<div class="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
<div class="flex flex-col md:flex-row md:justify-between md:items-center">
<h5 class="m-0">Manage Products</h5>
<IconField iconPosition="left" class="block mt-2 md:mt-0">
<InputIcon class="pi pi-search" />
@@ -188,7 +188,7 @@ const initFilters = () => {
<template #body="slotProps">
<span class="p-column-title">Image</span>
<img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image"
class="shadow-2" width="100" />
class="shadow" width="100" />
</template>
</Column>
<Column field="price" header="Price" :sortable="true" headerStyle="width:14%; min-width:8rem;">
@@ -231,7 +231,7 @@ const initFilters = () => {
<Dialog v-model:visible="productDialog" :style="{ width: '450px' }" header="Product Details"
:modal="true" class="p-fluid">
<img :src="'/demo/images/product/' + product.image" :alt="product.image" v-if="product.image"
width="150" class="mt-0 mx-auto mb-5 block shadow-2" />
width="150" class="mt-0 mx-auto mb-8 block shadow" />
<div class="field">
<label for="name">Name</label>
<InputText id="name" v-model.trim="product.name" required="true" autofocus
@@ -244,7 +244,7 @@ const initFilters = () => {
</div>
<div class="field">
<label for="inventoryStatus" class="mb-3">Inventory Status</label>
<label for="inventoryStatus" class="mb-4">Inventory Status</label>
<Dropdown id="inventoryStatus" v-model="product.inventoryStatus" :options="statuses"
optionLabel="label" placeholder="Select a Status">
<template #value="slotProps">
@@ -264,24 +264,24 @@ const initFilters = () => {
</div>
<div class="field">
<label class="mb-3">Category</label>
<div class="formgrid grid">
<div class="field-radiobutton col-6">
<label class="mb-4">Category</label>
<div class="formgrid grid grid-cols-12 gap-4">
<div class="field-radiobutton col-span-6">
<RadioButton id="category1" name="category" value="Accessories"
v-model="product.category" />
<label for="category1">Accessories</label>
</div>
<div class="field-radiobutton col-6">
<div class="field-radiobutton col-span-6">
<RadioButton id="category2" name="category" value="Clothing"
v-model="product.category" />
<label for="category2">Clothing</label>
</div>
<div class="field-radiobutton col-6">
<div class="field-radiobutton col-span-6">
<RadioButton id="category3" name="category" value="Electronics"
v-model="product.category" />
<label for="category3">Electronics</label>
</div>
<div class="field-radiobutton col-6">
<div class="field-radiobutton col-span-6">
<RadioButton id="category4" name="category" value="Fitness"
v-model="product.category" />
<label for="category4">Fitness</label>
@@ -289,7 +289,7 @@ const initFilters = () => {
</div>
</div>
<div class="formgrid grid">
<div class="formgrid grid grid-cols-12 gap-4">
<div class="field col">
<label for="price">Price</label>
<InputNumber id="price" v-model="product.price" mode="currency" currency="USD"
@@ -309,8 +309,8 @@ const initFilters = () => {
<Dialog v-model:visible="deleteProductDialog" :style="{ width: '450px' }" header="Confirm"
:modal="true">
<div class="flex align-items-center justify-content-center">
<i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
<div class="flex items-center justify-center">
<i class="pi pi-exclamation-triangle mr-4" style="font-size: 2rem" />
<span v-if="product">Are you sure you want to delete <b>{{ product.name }}</b>?</span>
</div>
<template #footer>
@@ -321,8 +321,8 @@ const initFilters = () => {
<Dialog v-model:visible="deleteProductsDialog" :style="{ width: '450px' }" header="Confirm"
:modal="true">
<div class="flex align-items-center justify-content-center">
<i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
<div class="flex items-center justify-center">
<i class="pi pi-exclamation-triangle mr-4" style="font-size: 2rem" />
<span v-if="product">Are you sure you want to delete the selected products?</span>
</div>
<template #footer>

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

@@ -16,367 +16,367 @@ const logoUrl = computed(() => {
</script>
<template>
<div class="surface-0 flex justify-content-center">
<div class="bg-surface-0 dark:bg-surface-900 flex justify-center">
<div id="home" class="landing-wrapper 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 mb-3">
<a class="flex align-items-center" href="#"> <img :src="logoUrl" alt="Sakai Logo" height="50"
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-900 font-medium text-2xl line-height-3 mr-8">SAKAI</span> </a>
<a class="cursor-pointer block lg:hidden text-700 p-ripple" v-ripple
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>
</a>
<div class="align-items-center surface-0 flex-grow-1 justify-content-between hidden lg:flex absolute lg:static w-full left-0 px-6 lg:px-0 z-2"
<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">
<ul
class="list-none p-0 m-0 flex lg:align-items-center select-none flex-column lg:flex-row cursor-pointer">
class="list-none p-0 m-0 flex lg:items-center select-none flex-col 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>
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>
</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>
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>
</a>
</li>
<li>
<a @click="smoothScroll('#highlights')"
class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3 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>
</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>
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>
</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">
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-none font-light line-height-2 text-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-none ml-5 font-light text-white line-height-2 bg-blue-500"></Button>
class="p-button-rounded border-0 ml-8 font-light text-white leading-tight bg-blue-500"></Button>
</div>
</div>
</div>
<div id="hero" class="flex flex-column pt-4 px-4 lg:px-8 overflow-hidden"
<div 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-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
<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
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
<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>
<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>
class="p-button-rounded text-xl border-0 mt-8 bg-blue-500 font-normal text-white leading-normal px-4"></Button>
</div>
<div class="flex justify-content-center md:justify-content-end">
<img src="/demo/images/landing/screen-1.png" alt="Hero Image" class="w-9 md:w-auto" />
<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" />
</div>
</div>
<div id="features" class="py-4 px-4 lg:px-8 mt-5 mx-0 lg:mx-8">
<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 id="features" class="py-6 px-6 lg:px-20 mt-8 mx-0 lg:mx-20">
<div class="grid grid-cols-12 gap-4 justify-center">
<div class="col-span-12 text-center mt-20 mb-6">
<h2 class="text-surface-900 dark:text-surface-0 font-normal mb-2">Marvelous Features</h2>
<span class="text-surface-600 dark:text-surface-200 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 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
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"
<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"
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>
<h5 class="mb-2 text-surface-900 dark:text-surface-0">Easy to Use</h5>
<span class="text-surface-600 dark:text-surface-200">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 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
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"
<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"
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>
<h5 class="mb-2 text-surface-900 dark:text-surface-0">Fresh Design</h5>
<span class="text-surface-600 dark:text-surface-200">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 class="col-span-12 md:col-span-12 lg:col-span-4 p-0 lg:pb-8 mt-6 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"
<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"
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>
<h5 class="mb-2 text-surface-900 dark:text-surface-0">Well Documented</h5>
<span class="text-surface-600 dark:text-surface-200">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 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
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"
<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"
style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
<i class="pi pi-fw pi-id-card text-2xl text-bluegray-700"></i>
<i class="pi pi-fw pi-id-card text-2xl text-slate-700"></i>
</div>
<h5 class="mb-2 text-900">Responsive Layout</h5>
<span class="text-600">Nulla malesuada pellentesque elit.</span>
<h5 class="mb-2 text-surface-900 dark:text-surface-0">Responsive Layout</h5>
<span class="text-surface-600 dark:text-surface-200">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 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
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"
<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"
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>
<h5 class="mb-2 text-surface-900 dark:text-surface-0">Clean Code</h5>
<span class="text-surface-600 dark:text-surface-200">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 class="col-span-12 md:col-span-12 lg:col-span-4 p-0 lg:pb-8 mt-6 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"
<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"
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>
<h5 class="mb-2 text-surface-900 dark:text-surface-0">Dark Mode</h5>
<span class="text-surface-600 dark:text-surface-200">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 class="col-span-12 md:col-span-12 lg:col-span-4 p-0 lg:pr-8 mt-6 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"
<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"
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>
<h5 class="mb-2 text-surface-900 dark:text-surface-0">Ready to Use</h5>
<span class="text-surface-600 dark:text-surface-200">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 class="col-span-12 md:col-span-12 lg:col-span-4 p-0 lg:pr-8 mt-6 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"
<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"
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>
<h5 class="mb-2 text-surface-900 dark:text-surface-0">Modern Practices</h5>
<span class="text-surface-600 dark:text-surface-200">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 class="col-span-12 md:col-span-12 lg:col-span-4 p-0 lg-4 mt-6 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"
<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"
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>
<h5 class="mb-2 text-surface-900 dark:text-surface-0">Privacy</h5>
<span class="text-surface-600 dark:text-surface-200">Neque egestas congue quisque.</span>
</div>
</div>
</div>
<div class="col-12 mt-8 mb-8 p-2 md:p-8"
<div class="col-span-12 mt-20 mb-20 p-2 md:p-20"
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">
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>
<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"
<p class="text-gray-900 sm:line-height-2 md:line-height-4 text-2xl mt-6"
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="/demo/images/landing/peak-logo.svg" class="mt-4" alt="Company logo" />
<img src="/demo/images/landing/peak-logo.svg" class="mt-6" alt="Company logo" />
</div>
</div>
</div>
</div>
<div id="highlights" class="py-4 px-4 lg:px-8 mx-0 my-6 lg:mx-8">
<div id="highlights" class="py-6 px-6 lg:px-20 mx-0 my-12 lg:mx-20">
<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>
<h2 class="text-surface-900 dark:text-surface-0 font-normal mb-2">Powerful Everywhere</h2>
<span class="text-surface-600 dark:text-surface-200 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"
<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"
style="border-radius: 8px">
<img src="/demo/images/landing/mockup.svg" class="w-11" alt="mockup mobile" />
<img src="/demo/images/landing/mockup.svg" class="w-11/12" alt="mockup mobile" />
</div>
<div class="col-12 lg:col-6 my-auto flex flex-column lg:align-items-end text-center lg:text-right">
<div class="flex align-items-center justify-content-center bg-purple-200 align-self-center lg:align-self-end"
<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"
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
<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
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 text-center lg:text-left lg:align-items-start">
<div class="flex align-items-center justify-content-center bg-yellow-200 align-self-center lg:align-self-start"
<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="flex items-center justify-center bg-yellow-200 self-center lg:self-start"
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
<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
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"
<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">
<img src="/demo/images/landing/mockup-desktop.svg" class="w-11" alt="mockup" />
<img src="/demo/images/landing/mockup-desktop.svg" class="w-11/12" alt="mockup" />
</div>
</div>
</div>
<div id="pricing" class="py-4 px-4 lg:px-8 my-2 md:my-4">
<div id="pricing" class="py-6 px-6 lg:px-20 my-2 md:my-6">
<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>
<h2 class="text-surface-900 dark:text-surface-0 font-normal mb-2">Matchless Pricing</h2>
<span class="text-surface-600 dark:text-surface-200 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 pricing-card cursor-pointer border-2 hover:border-primary transition-duration-300 transition-all"
<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="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">
<h3 class="text-900 text-center my-5">Free</h3>
<img src="/demo/images/landing/free.svg" class="w-10 h-10 mx-auto" alt="free" />
<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>
<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" />
<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-surface-600 dark:text-surface-200">per month</span>
<Button label="Get Started"
class="block mx-auto mt-4 p-button-rounded border-none ml-3 font-light line-height-2 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>
<Divider class="w-full bg-surface-200"></Divider>
<ul class="my-5 list-none p-0 flex text-900 flex-column">
<ul class="my-8 list-none p-0 flex text-surface-900 dark:text-surface-0 flex-col">
<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>
<span class="text-xl leading-normal">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>
<span class="text-xl leading-normal">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>
<span class="text-xl leading-normal">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>
<span class="text-xl leading-normal">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 pricing-card cursor-pointer border-2 hover:border-primary transition-duration-300 transition-all"
<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"
style="border-radius: 10px">
<h3 class="text-900 text-center my-5">Startup</h3>
<img src="/demo/images/landing/startup.svg" class="w-10 h-10 mx-auto" alt="startup" />
<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>
<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" />
<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-surface-600 dark:text-surface-200">per month</span>
<Button label="Try Free"
class="block mx-auto mt-4 p-button-rounded border-none ml-3 font-light line-height-2 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>
<Divider class="w-full bg-surface-200"></Divider>
<ul class="my-5 list-none p-0 flex text-900 flex-column">
<ul class="my-8 list-none p-0 flex text-surface-900 dark:text-surface-0 flex-col">
<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>
<span class="text-xl leading-normal">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>
<span class="text-xl leading-normal">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>
<span class="text-xl leading-normal">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>
<span class="text-xl leading-normal">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 pricing-card cursor-pointer border-2 hover:border-primary transition-duration-300 transition-all"
<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"
style="border-radius: 10px">
<h3 class="text-900 text-center my-5">Enterprise</h3>
<img src="/demo/images/landing/enterprise.svg" class="w-10 h-10 mx-auto" alt="enterprise" />
<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>
<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" />
<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-surface-600 dark:text-surface-200">per month</span>
<Button label="Get a Quote"
class="block mx-auto mt-4 p-button-rounded border-none ml-3 font-light line-height-2 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>
<Divider class="w-full bg-surface-200"></Divider>
<ul class="my-5 list-none p-0 flex text-900 flex-column">
<ul class="my-8 list-none p-0 flex text-surface-900 dark:text-surface-0 flex-col">
<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>
<span class="text-xl leading-normal">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>
<span class="text-xl leading-normal">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>
<span class="text-xl leading-normal">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>
<span class="text-xl leading-normal">Free Shipping</span>
</li>
</ul>
</div>
@@ -384,49 +384,49 @@ const logoUrl = computed(() => {
</div>
</div>
<div class="py-4 px-4 mx-0 mt-8 lg:mx-8">
<div class="grid justify-content-between">
<div class="col-12 md:col-2" style="margin-top: -1.5rem">
<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="col-span-12 md:col-span-2" style="margin-top: -1.5rem">
<a @click="smoothScroll('#home')"
class="flex flex-wrap align-items-center justify-content-center md:justify-content-start md:mb-0 mb-3 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" />
<h4 class="font-medium text-3xl text-900">SAKAI</h4>
<h4 class="font-medium text-3xl text-surface-900 dark:text-surface-0">SAKAI</h4>
</a>
</div>
<div class="col-12 md:col-10 lg: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
<div class="col-span-12 md:col-span-10 lg:col-span-7">
<div class="grid grid-cols-12 gap-4 text-center md:text-left">
<div class="col-span-12 md:col-span-3">
<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">News</a>
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">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>
<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>
</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 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">Resources</h4>
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Get Started</a>
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Learn</a>
<a class="leading-normal text-xl block cursor-pointer text-surface-700 dark:text-surface-100">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
<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>
<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
src="/demo/images/landing/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>
<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>
</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 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">Legal</h4>
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Brand Policy</a>
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Privacy Policy</a>
<a class="leading-normal text-xl block cursor-pointer text-surface-700 dark:text-surface-100">Terms of Service</a>
</div>
</div>
</div>

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

@@ -2,44 +2,44 @@
<template>
<div
class="surface-ground flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
<div class="flex flex-column align-items-center justify-content-center">
<img src="/demo/images/notfound/logo-blue.svg" alt="Sakai logo" class="mb-5 w-6rem flex-shrink-0" />
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">
<img src="/demo/images/notfound/logo-blue.svg" alt="Sakai logo" class="mb-8 w-24 shrink-0" />
<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%)">
<div class="w-full surface-card py-8 px-5 sm:px-8 flex flex-column align-items-center"
<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>
<h1 class="text-900 font-bold text-3xl lg:text-5xl mb-2">Not Found</h1>
<div class="text-600 mb-5">Requested resource is not available.</div>
<router-link to="/" class="w-full flex align-items-center py-5 border-300 border-bottom-1">
<span class="flex justify-content-center align-items-center bg-cyan-400 border-round"
<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>
<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"
style="height: 3.5rem; width: 3.5rem">
<i class="text-50 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 class="ml-4 flex flex-column">
<span class="text-900 lg:text-xl font-medium mb-0 block">Frequently Asked Questions</span>
<span class="text-600 lg:text-xl">Ultricies mi quis hendrerit dolor.</span>
<span class="ml-6 flex flex-col">
<span class="text-surface-900 dark:text-surface-0 lg:text-xl font-medium mb-0 block">Frequently Asked Questions</span>
<span class="text-surface-600 dark:text-surface-200 lg:text-xl">Ultricies mi quis hendrerit dolor.</span>
</span>
</router-link>
<router-link to="/" class="w-full flex align-items-center py-5 border-300 border-bottom-1">
<span class="flex justify-content-center align-items-center bg-orange-400 border-round"
<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"
style="height: 3.5rem; width: 3.5rem">
<i class="pi pi-fw pi-question-circle text-50 text-2xl"></i>
<i class="pi pi-fw pi-question-circle text-surface-50 dark:text-surface-800 text-2xl"></i>
</span>
<span class="ml-4 flex flex-column">
<span class="text-900 lg:text-xl font-medium mb-0">Solution Center</span>
<span class="text-600 lg:text-xl">Phasellus faucibus scelerisque eleifend.</span>
<span class="ml-6 flex flex-col">
<span class="text-surface-900 dark:text-surface-0 lg:text-xl font-medium mb-0">Solution Center</span>
<span class="text-surface-600 dark:text-surface-200 lg:text-xl">Phasellus faucibus scelerisque eleifend.</span>
</span>
</router-link>
<router-link to="/" class="w-full flex align-items-center mb-5 py-5 border-300 border-bottom-1">
<span class="flex justify-content-center align-items-center bg-indigo-400 border-round"
<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"
style="height: 3.5rem; width: 3.5rem">
<i class="pi pi-fw pi-unlock text-50 text-2xl"></i>
<i class="pi pi-fw pi-unlock text-surface-50 dark:text-surface-800 text-2xl"></i>
</span>
<span class="ml-4 flex flex-column">
<span class="text-900 lg:text-xl font-medium mb-0">Permission Manager</span>
<span class="text-600 lg:text-xl">Accumsan in nisl nisi scelerisque</span>
<span class="ml-6 flex flex-col">
<span class="text-surface-900 dark:text-surface-0 lg:text-xl font-medium mb-0">Permission Manager</span>
<span class="text-surface-600 dark:text-surface-200 lg:text-xl">Accumsan in nisl nisi scelerisque</span>
</span>
</router-link>
</div>

16
src/views/pages/Timeline.vue
View File

@@ -33,8 +33,8 @@ const horizontalEvents = ref(['2020', '2021', '2022', '2023']);
</script>
<template>
<div class="grid">
<div class="col-6">
<div class="grid grid-cols-12 gap-4">
<div class="col-span-6">
<div class="card">
<h5>Left Align</h5>
<Timeline :value="customEvents">
@@ -44,7 +44,7 @@ const horizontalEvents = ref(['2020', '2021', '2022', '2023']);
</Timeline>
</div>
</div>
<div class="col-6">
<div class="col-span-6">
<div class="card">
<h5>Right Align</h5>
<Timeline :value="customEvents" align="right">
@@ -54,7 +54,7 @@ const horizontalEvents = ref(['2020', '2021', '2022', '2023']);
</Timeline>
</div>
</div>
<div class="col-6">
<div class="col-span-6">
<div class="card">
<h5>Alternate Align</h5>
<Timeline :value="customEvents" align="alternate">
@@ -64,7 +64,7 @@ const horizontalEvents = ref(['2020', '2021', '2022', '2023']);
</Timeline>
</div>
</div>
<div class="col-6">
<div class="col-span-6">
<div class="card">
<h5>Opposite Content</h5>
<Timeline :value="customEvents">
@@ -82,7 +82,7 @@ const horizontalEvents = ref(['2020', '2021', '2022', '2023']);
<h5>Custom Timeline</h5>
<Timeline :value="customEvents" align="alternate" class="customized-timeline">
<template #marker="slotProps">
<span class="flex w-2rem h-2rem align-items-center justify-content-center text-white border-circle z-1 shadow-2" :style="{ backgroundColor: slotProps.item.color }">
<span class="flex w-8 h-8 items-center justify-center text-white rounded-full z-10 shadow" :style="{ backgroundColor: slotProps.item.color }">
<i :class="slotProps.item.icon"></i>
</span>
</template>
@@ -95,7 +95,7 @@ const horizontalEvents = ref(['2020', '2021', '2022', '2023']);
{{ slotProps.item.date }}
</template>
<template #content>
<img v-if="slotProps.item.image" :src="'/demo/images/product/' + slotProps.item.image" :alt="slotProps.item.name" width="200" class="shadow-2 mb-3" />
<img v-if="slotProps.item.image" :src="'/demo/images/product/' + slotProps.item.image" :alt="slotProps.item.name" width="200" class="shadow mb-4" />
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate
neque quas!
@@ -106,7 +106,7 @@ const horizontalEvents = ref(['2020', '2021', '2022', '2023']);
</template>
</Timeline>
</div>
<div class="card mt-3">
<div class="card mt-4">
<h5>Horizontal</h5>
<h6>Top Align</h6>
<Timeline :value="horizontalEvents" layout="horizontal" align="top">

22
src/views/pages/auth/Access.vue
View File

@@ -2,23 +2,23 @@
<template>
<div
class="surface-ground flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
<div class="flex flex-column align-items-center justify-content-center">
<img src="/demo/images/access/logo-orange.svg" alt="Sakai logo" class="mb-5 w-6rem flex-shrink-0" />
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">
<img src="/demo/images/access/logo-orange.svg" alt="Sakai logo" class="mb-8 w-24 shrink-0" />
<div
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="w-full surface-card py-8 px-5 sm:px-8 flex flex-column align-items-center"
<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="grid flex flex-column align-items-center">
<div class="flex justify-content-center align-items-center bg-orange-500 border-circle"
<div class="grid grid-cols-12 gap-4 flex flex-col items-center">
<div class="flex justify-center items-center bg-orange-500 rounded-full"
style="width: 3.2rem; height: 3.2rem">
<i class="text-50 pi pi-fw pi-lock text-2xl"></i>
<i class="text-surface-50 dark:text-surface-800 pi pi-fw pi-lock text-2xl"></i>
</div>
<h1 class="text-900 font-bold text-4xl lg:text-5xl mb-2">Access Denied</h1>
<span class="text-600 mb-5">You do not have the necessary permisions. Please contact
<h1 class="text-surface-900 dark:text-surface-0 font-bold text-4xl lg:text-5xl mb-2">Access Denied</h1>
<span class="text-surface-600 dark:text-surface-200 mb-8">You do not have the necessary permisions. Please contact
admins.</span>
<img src="/demo/images/access/asset-access.svg" alt="Access denied" class="mb-5" width="80%" />
<div class="col-12 mt-5 text-center">
<img src="/demo/images/access/asset-access.svg" alt="Access denied" class="mb-8" width="80%" />
<div class="col-span-12 mt-8 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>

20
src/views/pages/auth/Error.vue
View File

@@ -2,22 +2,22 @@
<template>
<div
class="surface-ground flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
<div class="flex flex-column align-items-center justify-content-center">
<img src="/demo/images/error/logo-error.svg" alt="Sakai logo" class="mb-5 w-6rem flex-shrink-0" />
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">
<img src="/demo/images/error/logo-error.svg" alt="Sakai logo" class="mb-8 w-24 shrink-0" />
<div
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="w-full surface-card py-8 px-5 sm:px-8 flex flex-column align-items-center"
<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="grid flex flex-column align-items-center">
<div class="flex justify-content-center align-items-center bg-pink-500 border-circle"
<div class="grid grid-cols-12 gap-4 flex flex-col items-center">
<div class="flex justify-center items-center bg-pink-500 rounded-full"
style="height: 3.2rem; width: 3.2rem">
<i class="pi pi-fw pi-exclamation-circle text-2xl text-white"></i>
</div>
<h1 class="text-900 font-bold text-5xl mb-2">Error Occured</h1>
<span class="text-600 mb-5">Requested resource is not available.</span>
<img src="/demo/images/error/asset-error.svg" alt="Error" class="mb-5" width="80%" />
<div class="col-12 mt-5 text-center">
<h1 class="text-surface-900 dark:text-surface-0 font-bold text-5xl mb-2">Error Occured</h1>
<span class="text-surface-600 dark:text-surface-200 mb-8">Requested resource is not available.</span>
<img src="/demo/images/error/asset-error.svg" alt="Error" class="mb-8" width="80%" />
<div class="col-span-12 mt-8 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>

30
src/views/pages/auth/Login.vue
View File

@@ -14,36 +14,36 @@ const logoUrl = computed(() => {
<template>
<div
class="surface-ground flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
<div class="flex flex-column align-items-center justify-content-center">
<img :src="logoUrl" alt="Sakai logo" class="mb-5 w-6rem flex-shrink-0" />
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">
<img :src="logoUrl" alt="Sakai logo" class="mb-8 w-24 shrink-0" />
<div
style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, var(--primary-color) 10%, rgba(33, 150, 243, 0) 30%)">
<div class="w-full surface-card py-8 px-5 sm:px-8" style="border-radius: 53px">
<div class="text-center mb-5">
<img src="/demo/images/login/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 class="w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20" style="border-radius: 53px">
<div class="text-center mb-8">
<img src="/demo/images/login/avatar.png" alt="Image" height="50" class="mb-4" />
<div class="text-surface-900 dark:text-surface-0 text-3xl font-medium mb-4">Welcome, Isabel!</div>
<span class="text-surface-600 dark:text-surface-200 font-medium">Sign in to continue</span>
</div>
<div>
<label for="email1" class="block text-900 text-xl font-medium mb-2">Email</label>
<InputText id="email1" type="text" placeholder="Email address" class="w-full md:w-30rem mb-5"
<label for="email1" class="block text-surface-900 dark:text-surface-0 text-xl font-medium mb-2">Email</label>
<InputText id="email1" type="text" placeholder="Email address" class="w-full md:w-[30rem] mb-8"
style="padding: 1rem" v-model="email" />
<label for="password1" class="block text-900 font-medium text-xl mb-2">Password</label>
<label for="password1" class="block text-surface-900 dark:text-surface-0 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>
class="w-full mb-4" inputClass="w-full" :inputStyle="{ padding: '1rem' }"></Password>
<div class="flex align-items-center justify-content-between mb-5 gap-5">
<div class="flex align-items-center">
<div class="flex items-center justify-between mb-8 gap-8">
<div class="flex items-center">
<Checkbox v-model="checked" id="rememberme1" binary 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>
<Button label="Sign In" class="w-full p-4 text-xl"></Button>
</div>
</div>
</div>