Page changes
This commit is contained in:
Bahadır Sofuoğlu
@@ -19,17 +19,17 @@ const layoutState = reactive({
|
|||||||
menuHoverActive: false
|
menuHoverActive: false
|
||||||
});
|
});
|
||||||
|
|
||||||
export function useLayoutService () {
|
export function useLayoutService() {
|
||||||
const changeThemeSettings = (theme, darkTheme) => {
|
const changeThemeSettings = (theme, darkTheme) => {
|
||||||
layoutConfig.theme = theme;
|
layoutConfig.theme = theme;
|
||||||
layoutConfig.darkTheme = darkTheme;
|
layoutConfig.darkTheme = darkTheme;
|
||||||
};
|
};
|
||||||
|
|
||||||
const setScale = scale => {
|
const setScale = (scale) => {
|
||||||
layoutConfig.scale = scale;
|
layoutConfig.scale = scale;
|
||||||
};
|
};
|
||||||
|
|
||||||
const setActiveMenuItem = item => {
|
const setActiveMenuItem = (item) => {
|
||||||
layoutConfig.activeMenuItem = item.value || item;
|
layoutConfig.activeMenuItem = item.value || item;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { useLayoutService } from '@/layout/composables/layoutService';
|
import { useLayoutService } from '@/layout/composables/layoutService';
|
||||||
|
import AppConfig from '@/layout/AppConfig.vue';
|
||||||
const { isDarkTheme } = useLayoutService();
|
const { isDarkTheme } = useLayoutService();
|
||||||
|
|
||||||
const smoothScroll = (id) => {
|
const smoothScroll = (id) => {
|
||||||
@@ -15,366 +15,396 @@ const logoUrl = () => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="surface-0 overflow-hidden">
|
<div class="surface-0 flex justify-content-center">
|
||||||
<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">
|
<div id="home" class="landing-wrapper overflow-hidden">
|
||||||
<router-link to="/" class="flex align-items-center"> <img :src="logoUrl()" alt="Sakai Logo" height="50" class="mr-0 lg:mr-2" /><span class="text-900 font-medium text-2xl line-height-3 mr-8">SAKAI</span> </router-link>
|
<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="cursor-pointer block lg:hidden text-700 p-ripple" v-ripple v-styleclass="{ selector: '@next', enterClass: 'hidden', leaveToClass: 'hidden', hideOnOutsideClick: true }">
|
<a class="flex align-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>
|
||||||
<i class="pi pi-bars text-4xl"></i>
|
<a class="cursor-pointer block lg:hidden text-700 p-ripple" v-ripple v-styleclass="{ selector: '@next', enterClass: 'hidden', leaveToClass: 'hidden', hideOnOutsideClick: true }">
|
||||||
</a>
|
<i class="pi pi-bars text-4xl"></i>
|
||||||
<div class="surface-0 align-items-center flex-grow-1 justify-content-between hidden lg:flex absolute lg:static w-full left-0 px-6 lg:px-0 z-2" style="top: 92%">
|
</a>
|
||||||
<ul class="list-none p-0 m-0 flex lg:align-items-center select-none flex-column lg:flex-row cursor-pointer">
|
<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" style="top: 120px">
|
||||||
<li>
|
<ul class="list-none p-0 m-0 flex lg:align-items-center select-none flex-column lg:flex-row cursor-pointer">
|
||||||
<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>
|
<li>
|
||||||
<span>Home</span>
|
<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>
|
||||||
</a>
|
<span>Home</span>
|
||||||
</li>
|
</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>
|
<li>
|
||||||
<span>Features</span>
|
<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>
|
||||||
</a>
|
<span>Features</span>
|
||||||
</li>
|
</a>
|
||||||
<li>
|
</li>
|
||||||
<a @click="smoothScroll('#highlight')" class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3 p-ripple" v-ripple>
|
<li>
|
||||||
<span>Highlight</span>
|
<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>
|
||||||
</a>
|
<span>Highlights</span>
|
||||||
</li>
|
</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>
|
<li>
|
||||||
<span>Pricing</span>
|
<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>
|
||||||
</a>
|
<span>Pricing</span>
|
||||||
</li>
|
</a>
|
||||||
</ul>
|
</li>
|
||||||
<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">
|
</ul>
|
||||||
<Button label="Login" class="p-button-text p-button-rounded border-none font-light line-height-2 text-blue-500"></Button>
|
<div class="flex justify-content-between lg:block border-top-1 lg:border-top-none surface-border py-3 lg:py-0 mt-3 lg:mt-0">
|
||||||
<Button label="Register" class="p-button-rounded border-none ml-5 font-light text-white line-height-2 bg-blue-500"></Button>
|
<Button label="Login" class="p-button-text p-button-rounded border-none font-light line-height-2 text-blue-500"></Button>
|
||||||
</div>
|
<Button label="Register" class="p-button-rounded border-none ml-5 font-light text-white line-height-2 bg-blue-500"></Button>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid py-4 px-4 lg:px-8 relative" id="hero">
|
|
||||||
<div class="mx-4 md:mx-8 mt-0 md:mt-4">
|
|
||||||
<h1 class="text-6xl font-bold text-gray-900 line-height-2"><span class="font-light block">Eu sem integer</span>eget magna fermentum</h1>
|
|
||||||
<p class="font-normal text-2xl line-height-3 md:mt-3 text-gray-700">Sed blandit libero volutpat sed cras. Fames ac turpis egestas integer. Placerat in egestas erat...</p>
|
|
||||||
<Button label="Get Started" class="p-button-rounded text-xl border-none mt-5 bg-blue-500 font-normal text-white line-height-3 px-3"></Button>
|
|
||||||
</div>
|
|
||||||
<img src="@/assets/demo/images/landing/screen-1.png" class="bottom-0" alt="hero screen" style="right: 10%" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="py-4 px-4 lg:px-8 mt-5 mx-0 lg:mx-8" id="features">
|
|
||||||
<div class="grid justify-content-center">
|
|
||||||
<div class="col-12 text-center mt-8 mb-4">
|
|
||||||
<h2 class="text-900 font-normal mb-2">Marvelous Features</h2>
|
|
||||||
<span class="text-600 text-2xl">Placerat in egestas erat...</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 lg:pb-5 mt-4 lg:mt-0">
|
|
||||||
<div style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(253, 228, 165, 0.2), rgba(187, 199, 205, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2), rgba(187, 199, 205, 0.2))">
|
|
||||||
<div class="p-3 surface-card h-full" style="border-radius: 8px">
|
|
||||||
<div class="flex align-items-center justify-content-center bg-yellow-200 mb-3" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
|
|
||||||
<i class="pi pi-fw pi-users text-2xl text-yellow-700"></i>
|
|
||||||
</div>
|
|
||||||
<h5 class="mb-2 text-900">Easy to Use</h5>
|
|
||||||
<span class="text-600">Posuere morbi leo urna molestie.</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 lg:pb-5 mt-4 lg:mt-0">
|
|
||||||
<div style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(145, 226, 237, 0.2), rgba(251, 199, 145, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2), rgba(172, 180, 223, 0.2))">
|
|
||||||
<div class="p-3 surface-card h-full" style="border-radius: 8px">
|
|
||||||
<div class="flex align-items-center justify-content-center bg-cyan-200 mb-3" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
|
|
||||||
<i class="pi pi-fw pi-palette text-2xl text-cyan-700"></i>
|
|
||||||
</div>
|
|
||||||
<h5 class="mb-2 text-900">Fresh Design</h5>
|
|
||||||
<span class="text-600">Semper risus in hendrerit.</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pb-5 mt-4 lg:mt-0">
|
|
||||||
<div style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(145, 226, 237, 0.2), rgba(172, 180, 223, 0.2)), linear-gradient(180deg, rgba(172, 180, 223, 0.2), rgba(246, 158, 188, 0.2))">
|
|
||||||
<div class="p-3 surface-card h-full" style="border-radius: 8px">
|
|
||||||
<div class="flex align-items-center justify-content-center bg-indigo-200" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
|
|
||||||
<i class="pi pi-fw pi-map text-2xl text-indigo-700"></i>
|
|
||||||
</div>
|
|
||||||
<h5 class="mb-2 text-900">Well Documented</h5>
|
|
||||||
<span class="text-600">Non arcu risus quis varius quam quisque.</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 lg:pb-5 mt-4 lg:mt-0">
|
|
||||||
<div style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(187, 199, 205, 0.2), rgba(251, 199, 145, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2), rgba(145, 210, 204, 0.2))">
|
|
||||||
<div class="p-3 surface-card h-full" style="border-radius: 8px">
|
|
||||||
<div class="flex align-items-center justify-content-center bg-bluegray-200 mb-3" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
|
|
||||||
<i class="pi pi-fw pi-id-card text-2xl text-bluegray-700"></i>
|
|
||||||
</div>
|
|
||||||
<h5 class="mb-2 text-900">Responsive Layout</h5>
|
|
||||||
<span class="text-600">Nulla malesuada pellentesque elit.</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 lg:pb-5 mt-4 lg:mt-0">
|
|
||||||
<div style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(187, 199, 205, 0.2), rgba(246, 158, 188, 0.2)), linear-gradient(180deg, rgba(145, 226, 237, 0.2), rgba(160, 210, 250, 0.2))">
|
|
||||||
<div class="p-3 surface-card h-full" style="border-radius: 8px">
|
|
||||||
<div class="flex align-items-center justify-content-center bg-orange-200 mb-3" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
|
|
||||||
<i class="pi pi-fw pi-star text-2xl text-orange-700"></i>
|
|
||||||
</div>
|
|
||||||
<h5 class="mb-2 text-900">Clean Code</h5>
|
|
||||||
<span class="text-600">Condimentum lacinia quis vel eros.</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pb-5 mt-4 lg:mt-0">
|
|
||||||
<div style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(251, 199, 145, 0.2), rgba(246, 158, 188, 0.2)), linear-gradient(180deg, rgba(172, 180, 223, 0.2), rgba(212, 162, 221, 0.2))">
|
|
||||||
<div class="p-3 surface-card h-full" style="border-radius: 8px">
|
|
||||||
<div class="flex align-items-center justify-content-center bg-pink-200 mb-3" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
|
|
||||||
<i class="pi pi-fw pi-moon text-2xl text-pink-700"></i>
|
|
||||||
</div>
|
|
||||||
<h5 class="mb-2 text-900">Dark Mode</h5>
|
|
||||||
<span class="text-600">Convallis tellus id interdum velit laoreet.</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 mt-4 lg:mt-0">
|
|
||||||
<div style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(145, 210, 204, 0.2), rgba(160, 210, 250, 0.2)), linear-gradient(180deg, rgba(187, 199, 205, 0.2), rgba(145, 210, 204, 0.2))">
|
|
||||||
<div class="p-3 surface-card h-full" style="border-radius: 8px">
|
|
||||||
<div class="flex align-items-center justify-content-center bg-teal-200 mb-3" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
|
|
||||||
<i class="pi pi-fw pi-shopping-cart text-2xl text-teal-700"></i>
|
|
||||||
</div>
|
|
||||||
<h5 class="mb-2 text-900">Ready to Use</h5>
|
|
||||||
<span class="text-600">Mauris sit amet massa vitae.</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 mt-4 lg:mt-0">
|
|
||||||
<div style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(145, 210, 204, 0.2), rgba(212, 162, 221, 0.2)), linear-gradient(180deg, rgba(251, 199, 145, 0.2), rgba(160, 210, 250, 0.2))">
|
|
||||||
<div class="p-3 surface-card h-full" style="border-radius: 8px">
|
|
||||||
<div class="flex align-items-center justify-content-center bg-blue-200 mb-3" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
|
|
||||||
<i class="pi pi-fw pi-globe text-2xl text-blue-700"></i>
|
|
||||||
</div>
|
|
||||||
<h5 class="mb-2 text-900">Modern Practices</h5>
|
|
||||||
<span class="text-600">Elementum nibh tellus molestie nunc non.</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12 md:col-12 lg:col-4 p-0 lg-4 mt-4 lg:mt-0">
|
|
||||||
<div style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(160, 210, 250, 0.2), rgba(212, 162, 221, 0.2)), linear-gradient(180deg, rgba(246, 158, 188, 0.2), rgba(212, 162, 221, 0.2))">
|
|
||||||
<div class="p-3 surface-card h-full" style="border-radius: 8px">
|
|
||||||
<div class="flex align-items-center justify-content-center bg-purple-200 mb-3" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
|
|
||||||
<i class="pi pi-fw pi-eye text-2xl text-purple-700"></i>
|
|
||||||
</div>
|
|
||||||
<h5 class="mb-2 text-900">Privacy</h5>
|
|
||||||
<span class="text-600">Neque egestas congue quisque.</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12 mt-8 mb-8 p-2 md:p-8" style="border-radius: 20px; background: linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), radial-gradient(77.36% 256.97% at 77.36% 57.52%, #efe1af 0%, #c3dcfa 100%)">
|
|
||||||
<div class="flex flex-column justify-content-center align-items-center text-center px-3 py-3 md:py-0">
|
|
||||||
<h3 class="text-gray-900 mb-2">Joséphine Miller</h3>
|
|
||||||
<span class="text-gray-600 text-2xl">Peak Interactive</span>
|
|
||||||
<p class="text-gray-900 sm:line-height-2 md:line-height-4 text-2xl mt-4" style="max-width: 800px">
|
|
||||||
“Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”
|
|
||||||
</p>
|
|
||||||
<img src="@/assets/demo/images/landing/peak-logo.svg" class="mt-4" alt="" />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="py-4 px-4 lg:px-8 mx-0 my-6 lg:mx-8" id="highlight">
|
<div
|
||||||
<div class="text-center">
|
id="hero"
|
||||||
<h2 class="text-900 font-normal mb-2">Powerful Everywhere</h2>
|
class="flex flex-column pt-4 px-4 lg:px-8 overflow-hidden"
|
||||||
<span class="text-600 text-2xl">Amet consectetur adipiscing elit...</span>
|
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%, #eeefaf 0%, #c3e3fa 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 integer</span>eget magna fermentum</h1>
|
||||||
|
<p class="font-normal text-2xl line-height-3 md:mt-3 text-gray-700">Sed blandit libero volutpat sed cras. Fames ac turpis egestas integer. Placerat in egestas erat...</p>
|
||||||
|
<Button label="Get Started" class="p-button-rounded text-xl border-none mt-5 bg-blue-500 font-normal text-white line-height-3 px-3"></Button>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-content-center md:justify-content-end">
|
||||||
|
<img src="@/assets/demo/images/landing/screen-1.png" alt="Hero Image" class="w-9 md:w-auto" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="grid mt-8 pb-2 md:pb-8">
|
<div id="features" class="py-4 px-4 lg:px-8 mt-5 mx-0 lg:mx-8">
|
||||||
<div class="flex justify-content-center col-12 lg:col-6 bg-purple-100 p-0 flex-order-1 lg:flex-order-0" style="border-radius: 8px">
|
<div class="grid justify-content-center">
|
||||||
<img src="@/assets/demo/images/landing/mockup.svg" class="w-11" alt="mockup mobile" />
|
<div class="col-12 text-center mt-8 mb-4">
|
||||||
</div>
|
<h2 class="text-900 font-normal mb-2">Marvelous Features</h2>
|
||||||
|
<span class="text-600 text-2xl">Placerat in egestas erat...</span>
|
||||||
<div class="col-12 lg:col-6 my-auto flex flex-column lg:align-items-end lg:text-right align-items-center text-center">
|
|
||||||
<div class="flex align-items-center justify-content-center bg-purple-200" style="width: 4.2rem; height: 4.2rem; border-radius: 10px">
|
|
||||||
<i class="pi pi-fw pi-mobile text-5xl text-purple-700"></i>
|
|
||||||
</div>
|
</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"
|
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 lg:pb-5 mt-4 lg:mt-0">
|
||||||
>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
|
||||||
|
style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(253, 228, 165, 0.2), rgba(187, 199, 205, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2), rgba(187, 199, 205, 0.2))"
|
||||||
|
>
|
||||||
|
<div class="p-3 surface-card h-full" style="border-radius: 8px">
|
||||||
|
<div class="flex align-items-center justify-content-center bg-yellow-200 mb-3" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
|
||||||
|
<i class="pi pi-fw pi-users text-2xl text-yellow-700"></i>
|
||||||
|
</div>
|
||||||
|
<h5 class="mb-2 text-900">Easy to Use</h5>
|
||||||
|
<span class="text-600">Posuere morbi leo urna molestie.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 lg:pb-5 mt-4 lg:mt-0">
|
||||||
|
<div
|
||||||
|
style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(145, 226, 237, 0.2), rgba(251, 199, 145, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2), rgba(172, 180, 223, 0.2))"
|
||||||
|
>
|
||||||
|
<div class="p-3 surface-card h-full" style="border-radius: 8px">
|
||||||
|
<div class="flex align-items-center justify-content-center bg-cyan-200 mb-3" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
|
||||||
|
<i class="pi pi-fw pi-palette text-2xl text-cyan-700"></i>
|
||||||
|
</div>
|
||||||
|
<h5 class="mb-2 text-900">Fresh Design</h5>
|
||||||
|
<span class="text-600">Semper risus in hendrerit.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pb-5 mt-4 lg:mt-0">
|
||||||
|
<div
|
||||||
|
style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(145, 226, 237, 0.2), rgba(172, 180, 223, 0.2)), linear-gradient(180deg, rgba(172, 180, 223, 0.2), rgba(246, 158, 188, 0.2))"
|
||||||
|
>
|
||||||
|
<div class="p-3 surface-card h-full" style="border-radius: 8px">
|
||||||
|
<div class="flex align-items-center justify-content-center bg-indigo-200" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
|
||||||
|
<i class="pi pi-fw pi-map text-2xl text-indigo-700"></i>
|
||||||
|
</div>
|
||||||
|
<h5 class="mb-2 text-900">Well Documented</h5>
|
||||||
|
<span class="text-600">Non arcu risus quis varius quam quisque.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 lg:pb-5 mt-4 lg:mt-0">
|
||||||
|
<div
|
||||||
|
style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(187, 199, 205, 0.2), rgba(251, 199, 145, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2), rgba(145, 210, 204, 0.2))"
|
||||||
|
>
|
||||||
|
<div class="p-3 surface-card h-full" style="border-radius: 8px">
|
||||||
|
<div class="flex align-items-center justify-content-center bg-bluegray-200 mb-3" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
|
||||||
|
<i class="pi pi-fw pi-id-card text-2xl text-bluegray-700"></i>
|
||||||
|
</div>
|
||||||
|
<h5 class="mb-2 text-900">Responsive Layout</h5>
|
||||||
|
<span class="text-600">Nulla malesuada pellentesque elit.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 lg:pb-5 mt-4 lg:mt-0">
|
||||||
|
<div
|
||||||
|
style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(187, 199, 205, 0.2), rgba(246, 158, 188, 0.2)), linear-gradient(180deg, rgba(145, 226, 237, 0.2), rgba(160, 210, 250, 0.2))"
|
||||||
|
>
|
||||||
|
<div class="p-3 surface-card h-full" style="border-radius: 8px">
|
||||||
|
<div class="flex align-items-center justify-content-center bg-orange-200 mb-3" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
|
||||||
|
<i class="pi pi-fw pi-star text-2xl text-orange-700"></i>
|
||||||
|
</div>
|
||||||
|
<h5 class="mb-2 text-900">Clean Code</h5>
|
||||||
|
<span class="text-600">Condimentum lacinia quis vel eros.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pb-5 mt-4 lg:mt-0">
|
||||||
|
<div
|
||||||
|
style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(251, 199, 145, 0.2), rgba(246, 158, 188, 0.2)), linear-gradient(180deg, rgba(172, 180, 223, 0.2), rgba(212, 162, 221, 0.2))"
|
||||||
|
>
|
||||||
|
<div class="p-3 surface-card h-full" style="border-radius: 8px">
|
||||||
|
<div class="flex align-items-center justify-content-center bg-pink-200 mb-3" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
|
||||||
|
<i class="pi pi-fw pi-moon text-2xl text-pink-700"></i>
|
||||||
|
</div>
|
||||||
|
<h5 class="mb-2 text-900">Dark Mode</h5>
|
||||||
|
<span class="text-600">Convallis tellus id interdum velit laoreet.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 mt-4 lg:mt-0">
|
||||||
|
<div
|
||||||
|
style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(145, 210, 204, 0.2), rgba(160, 210, 250, 0.2)), linear-gradient(180deg, rgba(187, 199, 205, 0.2), rgba(145, 210, 204, 0.2))"
|
||||||
|
>
|
||||||
|
<div class="p-3 surface-card h-full" style="border-radius: 8px">
|
||||||
|
<div class="flex align-items-center justify-content-center bg-teal-200 mb-3" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
|
||||||
|
<i class="pi pi-fw pi-shopping-cart text-2xl text-teal-700"></i>
|
||||||
|
</div>
|
||||||
|
<h5 class="mb-2 text-900">Ready to Use</h5>
|
||||||
|
<span class="text-600">Mauris sit amet massa vitae.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 mt-4 lg:mt-0">
|
||||||
|
<div
|
||||||
|
style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(145, 210, 204, 0.2), rgba(212, 162, 221, 0.2)), linear-gradient(180deg, rgba(251, 199, 145, 0.2), rgba(160, 210, 250, 0.2))"
|
||||||
|
>
|
||||||
|
<div class="p-3 surface-card h-full" style="border-radius: 8px">
|
||||||
|
<div class="flex align-items-center justify-content-center bg-blue-200 mb-3" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
|
||||||
|
<i class="pi pi-fw pi-globe text-2xl text-blue-700"></i>
|
||||||
|
</div>
|
||||||
|
<h5 class="mb-2 text-900">Modern Practices</h5>
|
||||||
|
<span class="text-600">Elementum nibh tellus molestie nunc non.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 md:col-12 lg:col-4 p-0 lg-4 mt-4 lg:mt-0">
|
||||||
|
<div
|
||||||
|
style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(160, 210, 250, 0.2), rgba(212, 162, 221, 0.2)), linear-gradient(180deg, rgba(246, 158, 188, 0.2), rgba(212, 162, 221, 0.2))"
|
||||||
|
>
|
||||||
|
<div class="p-3 surface-card h-full" style="border-radius: 8px">
|
||||||
|
<div class="flex align-items-center justify-content-center bg-purple-200 mb-3" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
|
||||||
|
<i class="pi pi-fw pi-eye text-2xl text-purple-700"></i>
|
||||||
|
</div>
|
||||||
|
<h5 class="mb-2 text-900">Privacy</h5>
|
||||||
|
<span class="text-600">Neque egestas congue quisque.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="col-12 mt-8 mb-8 p-2 md:p-8"
|
||||||
|
style="border-radius: 20px; background: linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), radial-gradient(77.36% 256.97% at 77.36% 57.52%, #efe1af 0%, #c3dcfa 100%)"
|
||||||
>
|
>
|
||||||
</div>
|
<div class="flex flex-column justify-content-center align-items-center text-center px-3 py-3 md:py-0">
|
||||||
</div>
|
<h3 class="text-gray-900 mb-2">Joséphine Miller</h3>
|
||||||
|
<span class="text-gray-600 text-2xl">Peak Interactive</span>
|
||||||
<div class="grid my-8 pt-2 md:pt-8">
|
<p class="text-gray-900 sm:line-height-2 md:line-height-4 text-2xl mt-4" style="max-width: 800px">
|
||||||
<div class="col-12 lg:col-6 my-auto flex flex-column lg:align-items-start align-items-center">
|
“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.”
|
||||||
<div class="flex align-items-center justify-content-center bg-yellow-200" style="width: 4.2rem; height: 4.2rem; border-radius: 10px">
|
</p>
|
||||||
<i class="pi pi-fw pi-desktop text-5xl text-yellow-700"></i>
|
<img src="@/assets/demo/images/landing/peak-logo.svg" class="mt-4" alt="Company logo" />
|
||||||
</div>
|
|
||||||
<h2 class="line-height-1 text-900 text-4xl font-normal">Celerisque Eu Ultrices</h2>
|
|
||||||
<span class="text-700 text-2xl line-height-3 mr-0 md:mr-2" style="max-width: 650px"
|
|
||||||
>Adipiscing commodo elit at imperdiet dui. Viverra nibh cras pulvinar mattis nunc sed blandit libero. Suspendisse in est ante in. Mauris pharetra et ultrices neque ornare aenean euismod elementum nisi.</span
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex justify-content-end flex-order-1 sm:flex-order-2 col-12 lg:col-6 bg-yellow-100 p-0" style="border-radius: 8px">
|
|
||||||
<img src="@/assets/demo/images/landing/mockup-desktop.svg" class="w-11 pt-4" alt="mockup" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="py-4 px-4 lg:px-8 my-2 md:my-4" id="pricing">
|
|
||||||
<div class="text-center">
|
|
||||||
<h2 class="text-900 font-normal mb-2">Matchless Pricing</h2>
|
|
||||||
<span class="text-600 text-2xl">Amet consectetur adipiscing elit...</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid justify-content-between mt-8 md:mt-0">
|
|
||||||
<div class="col-12 lg:col-4 p-0 md:p-3">
|
|
||||||
<div class="p-3 flex flex-column border-200 hover:border-cyan-200" style="border: 2px solid; border-radius: 10px">
|
|
||||||
<h3 class="text-900 text-center">Free</h3>
|
|
||||||
<img src="@/assets/demo/images/landing/free.svg" class="w-10 h-10 mx-auto" alt="" />
|
|
||||||
<div class="my-5 text-center">
|
|
||||||
<span class="text-5xl font-bold mr-2 text-900">$0</span>
|
|
||||||
<span class="text-600">per month</span>
|
|
||||||
<Button label="Get Started" class="block mx-auto mt-4 p-button-rounded border-none ml-3 font-light text-white line-height-2 bg-blue-500"></Button>
|
|
||||||
</div>
|
</div>
|
||||||
<Divider class="w-full bg-surface-200"></Divider>
|
|
||||||
<ul class="my-5 list-none p-0 flex text-900 flex-column">
|
|
||||||
<li class="py-2">
|
|
||||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
|
||||||
<span class="text-xl line-height-3">Responsive Layout</span>
|
|
||||||
</li>
|
|
||||||
<li class="py-2">
|
|
||||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
|
||||||
<span class="text-xl line-height-3">Unlimited Push Messages</span>
|
|
||||||
</li>
|
|
||||||
<li class="py-2">
|
|
||||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
|
||||||
<span class="text-xl line-height-3">50 Support Ticket</span>
|
|
||||||
</li>
|
|
||||||
<li class="py-2">
|
|
||||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
|
||||||
<span class="text-xl line-height-3">Free Shipping</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12 lg:col-4 p-0 md:p-3 mt-4 md:mt-0">
|
|
||||||
<div class="p-3 flex flex-column border-200 hover:border-cyan-200" style="border: 2px solid; border-radius: 10px">
|
|
||||||
<h3 class="text-900 text-center">Startup</h3>
|
|
||||||
<img src="@/assets/demo/images/landing/startup.svg" class="w-10 h-10 mx-auto" alt="" />
|
|
||||||
<div class="my-5 text-center">
|
|
||||||
<span class="text-5xl font-bold mr-2 text-900">$1</span>
|
|
||||||
<span class="text-600">per month</span>
|
|
||||||
<Button label="Try Free" class="block mx-auto mt-4 p-button-rounded border-none ml-3 font-light text-white line-height-2 bg-blue-500"></Button>
|
|
||||||
</div>
|
|
||||||
<Divider class="w-full bg-surface-200"></Divider>
|
|
||||||
<ul class="my-5 list-none p-0 flex text-900 flex-column">
|
|
||||||
<li class="py-2">
|
|
||||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
|
||||||
<span class="text-xl line-height-3">Responsive Layout</span>
|
|
||||||
</li>
|
|
||||||
<li class="py-2">
|
|
||||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
|
||||||
<span class="text-xl line-height-3">Unlimited Push Messages</span>
|
|
||||||
</li>
|
|
||||||
<li class="py-2">
|
|
||||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
|
||||||
<span class="text-xl line-height-3">50 Support Ticket</span>
|
|
||||||
</li>
|
|
||||||
<li class="py-2">
|
|
||||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
|
||||||
<span class="text-xl line-height-3">Free Shipping</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12 lg:col-4 p-0 md:p-3 mt-4 md:mt-0">
|
|
||||||
<div class="p-3 flex flex-column border-200 hover:border-cyan-200" style="border: 2px solid; border-radius: 10px">
|
|
||||||
<h3 class="text-900 text-center">Enterprice</h3>
|
|
||||||
<img src="@/assets/demo/images/landing/enterprise.svg" class="w-10 h-10 mx-auto" alt="" />
|
|
||||||
<div class="my-5 text-center">
|
|
||||||
<span class="text-5xl font-bold mr-2 text-900">$999</span>
|
|
||||||
<span class="text-600">per month</span>
|
|
||||||
<Button label="Get a Quote" class="block mx-auto mt-4 p-button-rounded border-none ml-3 font-light text-white line-height-2 bg-blue-500"></Button>
|
|
||||||
</div>
|
|
||||||
<Divider class="w-full bg-surface-200"></Divider>
|
|
||||||
<ul class="my-5 list-none p-0 flex text-900 flex-column">
|
|
||||||
<li class="py-2">
|
|
||||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
|
||||||
<span class="text-xl line-height-3">Responsive Layout</span>
|
|
||||||
</li>
|
|
||||||
<li class="py-2">
|
|
||||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
|
||||||
<span class="text-xl line-height-3">Unlimited Push Messages</span>
|
|
||||||
</li>
|
|
||||||
<li class="py-2">
|
|
||||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
|
||||||
<span class="text-xl line-height-3">50 Support Ticket</span>
|
|
||||||
</li>
|
|
||||||
<li class="py-2">
|
|
||||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
|
||||||
<span class="text-xl line-height-3">Free Shipping</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="py-4 px-4 mx-0 mt-8 lg:mx-8" id="contact">
|
<div id="highlights" class="py-4 px-4 lg:px-8 mx-0 my-6 lg:mx-8">
|
||||||
<div class="grid justify-content-between">
|
<div class="text-center">
|
||||||
<div class="col-12 md:col-2" style="margin-top: -1.5rem">
|
<h2 class="text-900 font-normal mb-2">Powerful Everywhere</h2>
|
||||||
<div class="flex flex-wrap align-items-center justify-content-center md:justify-content-start md:mb-0 mb-3">
|
<span class="text-600 text-2xl">Amet consectetur adipiscing elit...</span>
|
||||||
<img :src="logoUrl()" alt="footer sections" width="50" height="50" class="mr-2" />
|
</div>
|
||||||
<h4 class="font-medium text-3xl text-900">SAKAI</h4>
|
|
||||||
|
<div class="grid mt-8 pb-2 md:pb-8">
|
||||||
|
<div class="flex justify-content-center col-12 lg:col-6 bg-purple-100 p-0 flex-order-1 lg:flex-order-0" style="border-radius: 8px">
|
||||||
|
<img src="@/assets/demo/images/landing/mockup.svg" class="w-11" 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" style="width: 4.2rem; height: 4.2rem; border-radius: 10px">
|
||||||
|
<i class="pi pi-fw pi-mobile text-5xl text-purple-700"></i>
|
||||||
|
</div>
|
||||||
|
<h2 class="line-height-1 text-900 text-4xl font-normal">Congue Quisque Egestas</h2>
|
||||||
|
<span class="text-700 text-2xl line-height-3 ml-0 md:ml-2" style="max-width: 650px"
|
||||||
|
>Lectus arcu bibendum at varius vel pharetra vel turpis nunc. Eget aliquet nibh praesent tristique magna sit amet purus gravida. Sit amet mattis vulputate enim nulla aliquet.</span
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-12 md:col-7">
|
<div class="grid my-8 pt-2 md:pt-8">
|
||||||
<div class="grid text-center md:text-left">
|
<div class="col-12 lg:col-6 my-auto flex flex-column text-center lg:text-left lg:align-items-start">
|
||||||
<div class="col-12 md:col-3">
|
<div class="flex align-items-center justify-content-center bg-yellow-200 align-self-center lg:align-self-start" style="width: 4.2rem; height: 4.2rem; border-radius: 10px">
|
||||||
<h4 class="font-medium text-2xl line-height-3 mb-3 text-900">Company</h4>
|
<i class="pi pi-fw pi-desktop text-5xl text-yellow-700"></i>
|
||||||
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">About Us</a>
|
|
||||||
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">News</a>
|
|
||||||
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Investor Relations</a>
|
|
||||||
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Careers</a>
|
|
||||||
<a class="line-height-3 text-xl block cursor-pointer text-700">Media Kit</a>
|
|
||||||
</div>
|
</div>
|
||||||
|
<h2 class="line-height-1 text-900 text-4xl font-normal">Celerisque Eu Ultrices</h2>
|
||||||
|
<span class="text-700 text-2xl line-height-3 mr-0 md:mr-2" style="max-width: 650px"
|
||||||
|
>Adipiscing commodo elit at imperdiet dui. Viverra nibh cras pulvinar mattis nunc sed blandit libero. Suspendisse in est ante in. Mauris pharetra et ultrices neque ornare aenean euismod elementum nisi.</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="col-12 md:col-3 mt-4 md:mt-0">
|
<div class="flex justify-content-end flex-order-1 sm:flex-order-2 col-12 lg:col-6 bg-yellow-100 p-0" style="border-radius: 8px">
|
||||||
<h4 class="font-medium text-2xl line-height-3 mb-3 text-900">Resources</h4>
|
<img src="@/assets/demo/images/landing/mockup-desktop.svg" class="w-11" alt="mockup" />
|
||||||
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Get Started</a>
|
</div>
|
||||||
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Learn</a>
|
</div>
|
||||||
<a class="line-height-3 text-xl block cursor-pointer text-700">Case Studies</a>
|
</div>
|
||||||
|
|
||||||
|
<div id="pricing" class="py-4 px-4 lg:px-8 my-2 md:my-4">
|
||||||
|
<div class="text-center">
|
||||||
|
<h2 class="text-900 font-normal mb-2">Matchless Pricing</h2>
|
||||||
|
<span class="text-600 text-2xl">Amet consectetur adipiscing elit...</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid justify-content-between mt-8 md:mt-0">
|
||||||
|
<div class="col-12 lg:col-4 p-0 md:p-3">
|
||||||
|
<div class="p-3 flex flex-column border-200 pricing-card cursor-pointer border-2 hover:border-primary transition-duration-300 transition-all" style="border-radius: 10px">
|
||||||
|
<h3 class="text-900 text-center my-5">Free</h3>
|
||||||
|
<img src="@/assets/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>
|
||||||
|
<button pButton pRipple 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>
|
||||||
|
</div>
|
||||||
|
<Divider class="w-full bg-surface-200"></Divider>
|
||||||
|
<ul class="my-5 list-none p-0 flex text-900 flex-column">
|
||||||
|
<li class="py-2">
|
||||||
|
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||||
|
<span class="text-xl line-height-3">Responsive Layout</span>
|
||||||
|
</li>
|
||||||
|
<li class="py-2">
|
||||||
|
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||||
|
<span class="text-xl line-height-3">Unlimited Push Messages</span>
|
||||||
|
</li>
|
||||||
|
<li class="py-2">
|
||||||
|
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||||
|
<span class="text-xl line-height-3">50 Support Ticket</span>
|
||||||
|
</li>
|
||||||
|
<li class="py-2">
|
||||||
|
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||||
|
<span class="text-xl line-height-3">Free Shipping</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="col-12 md:col-3 mt-4 md:mt-0">
|
<div class="col-12 lg:col-4 p-0 md:p-3 mt-4 md:mt-0">
|
||||||
<h4 class="font-medium text-2xl line-height-3 mb-3 text-900">Community</h4>
|
<div class="p-3 flex flex-column border-200 pricing-card cursor-pointer border-2 hover:border-primary transition-duration-300 transition-all" style="border-radius: 10px">
|
||||||
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Discord</a>
|
<h3 class="text-900 text-center my-5">Startup</h3>
|
||||||
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Events<img src="@/assets/demo/images/landing/new-badge.svg" class="ml-2" /></a>
|
<img src="@/assets/demo/images/landing/startup.svg" class="w-10 h-10 mx-auto" alt="startup" />
|
||||||
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">FAQ</a>
|
<div class="my-5 text-center">
|
||||||
<a class="line-height-3 text-xl block cursor-pointer text-700">Blog</a>
|
<span class="text-5xl font-bold mr-2 text-900">$1</span>
|
||||||
|
<span class="text-600">per month</span>
|
||||||
|
<button pButton pRipple 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>
|
||||||
|
</div>
|
||||||
|
<Divider class="w-full bg-surface-200"></Divider>
|
||||||
|
<ul class="my-5 list-none p-0 flex text-900 flex-column">
|
||||||
|
<li class="py-2">
|
||||||
|
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||||
|
<span class="text-xl line-height-3">Responsive Layout</span>
|
||||||
|
</li>
|
||||||
|
<li class="py-2">
|
||||||
|
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||||
|
<span class="text-xl line-height-3">Unlimited Push Messages</span>
|
||||||
|
</li>
|
||||||
|
<li class="py-2">
|
||||||
|
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||||
|
<span class="text-xl line-height-3">50 Support Ticket</span>
|
||||||
|
</li>
|
||||||
|
<li class="py-2">
|
||||||
|
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||||
|
<span class="text-xl line-height-3">Free Shipping</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="col-12 md:col-3 mt-4 md:mt-0">
|
<div class="col-12 lg:col-4 p-0 md:p-3 mt-4 md:mt-0">
|
||||||
<h4 class="font-medium text-2xl line-height-3 mb-3 text-900">Legal</h4>
|
<div class="p-3 flex flex-column border-200 pricing-card cursor-pointer border-2 hover:border-primary transition-duration-300 transition-all" style="border-radius: 10px">
|
||||||
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Brand Policy</a>
|
<h3 class="text-900 text-center my-5">Enterprise</h3>
|
||||||
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Privacy Policy</a>
|
<img src="@/assets/demo/images/landing/enterprise.svg" class="w-10 h-10 mx-auto" alt="enterprise" />
|
||||||
<a class="line-height-3 text-xl block cursor-pointer text-700">Terms of Service</a>
|
<div class="my-5 text-center">
|
||||||
|
<span class="text-5xl font-bold mr-2 text-900">$999</span>
|
||||||
|
<span class="text-600">per month</span>
|
||||||
|
<button pButton pRipple 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>
|
||||||
|
</div>
|
||||||
|
<Divider class="w-full bg-surface-200"></Divider>
|
||||||
|
<ul class="my-5 list-none p-0 flex text-900 flex-column">
|
||||||
|
<li class="py-2">
|
||||||
|
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||||
|
<span class="text-xl line-height-3">Responsive Layout</span>
|
||||||
|
</li>
|
||||||
|
<li class="py-2">
|
||||||
|
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||||
|
<span class="text-xl line-height-3">Unlimited Push Messages</span>
|
||||||
|
</li>
|
||||||
|
<li class="py-2">
|
||||||
|
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||||
|
<span class="text-xl line-height-3">50 Support Ticket</span>
|
||||||
|
</li>
|
||||||
|
<li class="py-2">
|
||||||
|
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||||
|
<span class="text-xl line-height-3">Free Shipping</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="py-4 px-4 mx-0 mt-8 lg:mx-8">
|
||||||
|
<div class="grid justify-content-between">
|
||||||
|
<div class="col-12 md:col-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">
|
||||||
|
<img :src="logoUrl()" alt="footer sections" width="50" height="50" class="mr-2" />
|
||||||
|
<h4 class="font-medium text-3xl text-900">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 Relations</a>
|
||||||
|
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Careers</a>
|
||||||
|
<a class="line-height-3 text-xl block cursor-pointer text-700">Media Kit</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 md:col-3 mt-4 md:mt-0">
|
||||||
|
<h4 class="font-medium text-2xl line-height-3 mb-3 text-900">Resources</h4>
|
||||||
|
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Get Started</a>
|
||||||
|
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Learn</a>
|
||||||
|
<a class="line-height-3 text-xl block cursor-pointer text-700">Case Studies</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 md:col-3 mt-4 md:mt-0">
|
||||||
|
<h4 class="font-medium text-2xl line-height-3 mb-3 text-900">Community</h4>
|
||||||
|
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Discord</a>
|
||||||
|
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Events<img src="@/assets/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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 md:col-3 mt-4 md:mt-0">
|
||||||
|
<h4 class="font-medium text-2xl line-height-3 mb-3 text-900">Legal</h4>
|
||||||
|
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Brand Policy</a>
|
||||||
|
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Privacy Policy</a>
|
||||||
|
<a class="line-height-3 text-xl block cursor-pointer text-700">Terms of Service</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<AppConfig />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|||||||
@@ -1,55 +1,46 @@
|
|||||||
|
<script setup>
|
||||||
|
import AppConfig from '@/layout/AppConfig.vue';
|
||||||
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="surface-0 flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
|
<div class="surface-ground flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
|
||||||
<div class="grid justify-content-center p-2 lg:p-0" style="min-width: 80%">
|
<div class="flex flex-column align-items-center justify-content-center">
|
||||||
<div class="col-12 mt-5 xl:mt-0 text-center">
|
<img src="@/assets/demo/images/notfound/logo-blue.svg" alt="Sakai logo" class="mb-5 w-6rem flex-shrink-0" />
|
||||||
<img src="@/assets/layout/images/logo-blue.svg" alt="Sakai logo" class="mb-5" style="width: 81px; height: 60px" />
|
<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>
|
<div class="w-full surface-card py-8 px-5 sm:px-8 flex flex-column align-items-center" style="border-radius: 53px">
|
||||||
<div class="col-12 xl:col-6" style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, rgba(33, 150, 243, 0.4) 10%, rgba(33, 150, 243, 0) 30%)">
|
<span class="text-blue-500 font-bold text-3xl">404</span>
|
||||||
<div class="flex justify-content-center h-full w-full m-0 py-7 px-4" style="border-radius: 53px; background: linear-gradient(180deg, var(--surface-50) 38.9%, var(--surface-0))">
|
<h1 class="text-900 font-bold text-3xl lg:text-5xl mb-2">Not Found</h1>
|
||||||
<div class="grid flex-column align-items-center">
|
<div class="text-600 mb-5">Requested resource is not available.</div>
|
||||||
<span class="text-blue-500 font-bold text-3xl">404</span>
|
<router-link to="/" class="w-full flex align-items-center py-5 border-300 border-bottom-1">
|
||||||
<h1 class="text-900 font-bold text-3xl lg:text-5xl mb-2">Looks like you are lost</h1>
|
<span class="flex justify-content-center align-items-center bg-cyan-400 border-round" style="height: 3.5rem; width: 3.5rem">
|
||||||
<span class="text-gray-600">Requested resource is not available.</span>
|
<i class="text-50 pi pi-fw pi-table text-2xl"></i>
|
||||||
<div class="col-12 flex align-items-center py-5 mt-6 border-300 border-bottom-1">
|
</span>
|
||||||
<div class="flex justify-content-center align-items-center bg-cyan-400 border-round" style="height: 3.5rem; width: 3.5rem">
|
<span class="ml-4 flex flex-column">
|
||||||
<i class="pi pi-fw pi-table text-50 text-2xl"></i>
|
<span class="text-900 lg:text-xl font-medium mb-0 block">Frequently Asked Questions</span>
|
||||||
</div>
|
<span class="text-600 lg:text-xl">Ultricies mi quis hendrerit dolor.</span>
|
||||||
<div class="ml-4">
|
</span>
|
||||||
<router-link to="/">
|
</router-link>
|
||||||
<p class="text-900 lg:text-xl font-medium mb-0">Frequently Asked Questions</p>
|
<router-link to="/" class="w-full flex align-items-center py-5 border-300 border-bottom-1">
|
||||||
</router-link>
|
<span class="flex justify-content-center align-items-center bg-orange-400 border-round" style="height: 3.5rem; width: 3.5rem">
|
||||||
<span class="text-gray-600 lg:text-xl">Ultricies mi quis hendrerit dolor.</span>
|
<i class="pi pi-fw pi-question-circle text-50 text-2xl"></i>
|
||||||
</div>
|
</span>
|
||||||
</div>
|
<span class="ml-4 flex flex-column">
|
||||||
<div class="col-12 flex align-items-center py-5 border-300 border-bottom-1">
|
<span class="text-900 lg:text-xl font-medium mb-0">Solution Center</span>
|
||||||
<div class="flex justify-content-center align-items-center bg-orange-400 border-round" style="height: 3.5rem; width: 3.5rem">
|
<span class="text-600 lg:text-xl">Phasellus faucibus scelerisque eleifend.</span>
|
||||||
<i class="pi pi-fw pi-question-circle text-50 text-2xl"></i>
|
</span>
|
||||||
</div>
|
</router-link>
|
||||||
<div class="ml-4">
|
<router-link to="/" class="w-full flex align-items-center mb-5 py-5 border-300 border-bottom-1">
|
||||||
<router-link to="/">
|
<span class="flex justify-content-center align-items-center bg-indigo-400 border-round" style="height: 3.5rem; width: 3.5rem">
|
||||||
<p class="text-900 lg:text-xl font-medium mb-0">Solution Center</p>
|
<i class="pi pi-fw pi-unlock text-50 text-2xl"></i>
|
||||||
</router-link>
|
</span>
|
||||||
<span class="text-gray-600 lg:text-xl">Phasellus faucibus scelerisque eleifend.</span>
|
<span class="ml-4 flex flex-column">
|
||||||
</div>
|
<span class="text-900 lg:text-xl font-medium mb-0">Permission Manager</span>
|
||||||
</div>
|
<span class="text-600 lg:text-xl">Accumsan in nisl nisi scelerisque</span>
|
||||||
<div class="col-12 flex align-items-center py-5 border-300 border-bottom-1">
|
</span>
|
||||||
<div class="flex justify-content-center align-items-center bg-indigo-400 border-round" style="height: 3.5rem; width: 3.5rem">
|
</router-link>
|
||||||
<i class="pi pi-fw pi-unlock text-50 text-2xl"></i>
|
|
||||||
</div>
|
|
||||||
<div class="ml-4">
|
|
||||||
<router-link to="/">
|
|
||||||
<p class="text-900 lg:text-xl font-medium mb-0">Permission Manager</p>
|
|
||||||
</router-link>
|
|
||||||
<span class="text-gray-600 lg:text-xl">Accumsan in nisl nisi scelerisque</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-12 mt-5 text-center">
|
|
||||||
<i class="pi pi-fw pi-arrow-left text-blue-500 mr-2" style="vertical-align: center"></i>
|
|
||||||
<router-link to="/" class="text-blue-500">Go to Dashboard</router-link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<AppConfig />
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -1,18 +1,20 @@
|
|||||||
|
<script setup>
|
||||||
|
import AppConfig from '@/layout/AppConfig.vue';
|
||||||
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="surface-0 flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
|
<div class="surface-ground flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
|
||||||
<div class="grid justify-content-center p-2 lg:p-0" style="min-width: 80%">
|
<div class="flex flex-column align-items-center justify-content-center">
|
||||||
<div class="col-12 mt-5 xl:mt-0 text-center">
|
<img src="@/assets/demo/images/access/logo-orange.svg" alt="Sakai logo" class="mb-5 w-6rem flex-shrink-0" />
|
||||||
<img src="@/assets/layout/images/logo-orange.svg" alt="Sakai logo" class="mb-5" style="width: 81px; height: 60px" />
|
<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>
|
<div class="w-full surface-card py-8 px-5 sm:px-8 flex flex-column align-items-center" style="border-radius: 53px">
|
||||||
<div class="col-12 xl:col-6" style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, rgba(247, 149, 48, 0.4) 10%, rgba(247, 149, 48, 0) 30%)">
|
|
||||||
<div class="h-full w-full m-0 py-7 px-4" style="border-radius: 53px; background: linear-gradient(180deg, var(--surface-50) 38.9%, var(--surface-0))">
|
|
||||||
<div class="grid flex flex-column align-items-center">
|
<div class="grid flex flex-column align-items-center">
|
||||||
<div class="flex justify-content-center align-items-center bg-orange-500 border-circle" style="width: 3.2rem; height: 3.2rem">
|
<div class="flex justify-content-center align-items-center bg-orange-500 border-circle" style="width: 3.2rem; height: 3.2rem">
|
||||||
<i class="pi pi-fw pi-lock text-2xl text-50"></i>
|
<i class="text-50 pi pi-fw pi-lock text-2xl"></i>
|
||||||
</div>
|
</div>
|
||||||
<h1 class="text-900 font-bold text-4xl lg:text-5xl mb-2">Access Denied</h1>
|
<h1 class="text-900 font-bold text-4xl lg:text-5xl mb-2">Access Denied</h1>
|
||||||
<span class="text-600 text-center">You do not have the necesary permisions. Please contact admins.</span>
|
<span class="text-600 mb-5">You do not have the necessary permisions. Please contact admins.</span>
|
||||||
<img src="@/assets/layout/images/asset-access.svg" alt="Access denied" class="mt-5" width="80%" />
|
<img src="@/assets/demo/images/access/asset-access.svg" alt="Access denied" class="mb-5" width="80%" />
|
||||||
<div class="col-12 mt-5 text-center">
|
<div class="col-12 mt-5 text-center">
|
||||||
<i class="pi pi-fw pi-arrow-left text-blue-500 mr-2" style="vertical-align: center"></i>
|
<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>
|
<router-link to="/" class="text-blue-500">Go to Dashboard</router-link>
|
||||||
@@ -22,4 +24,5 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<AppConfig />
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -1,18 +1,20 @@
|
|||||||
|
<script setup>
|
||||||
|
import AppConfig from '@/layout/AppConfig.vue';
|
||||||
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="surface-0 flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
|
<div class="surface-ground flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
|
||||||
<div class="grid justify-content-center p-2 lg:p-0" style="min-width: 80%">
|
<div class="flex flex-column align-items-center justify-content-center">
|
||||||
<div class="col-12 mt-5 xl:mt-0 text-center">
|
<img src="@/assets/demo/images/error/logo-error.svg" alt="Sakai logo" class="mb-5 w-6rem flex-shrink-0" />
|
||||||
<img src="@/assets/layout/images/logo-error.svg" alt="Sakai logo" class="mb-5" style="width: 81px; height: 60px" />
|
<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>
|
<div class="w-full surface-card py-8 px-5 sm:px-8 flex flex-column align-items-center" style="border-radius: 53px">
|
||||||
<div class="col-12 xl:col-6" style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, rgba(233, 30, 99, 0.4) 10%, rgba(33, 150, 243, 0) 30%)">
|
|
||||||
<div class="h-full w-full m-0 py-7 px-4" style="border-radius: 53px; background: linear-gradient(180deg, var(--surface-50) 38.9%, var(--surface-0))">
|
|
||||||
<div class="grid flex flex-column align-items-center">
|
<div class="grid flex flex-column align-items-center">
|
||||||
<div class="flex justify-content-center align-items-center bg-pink-500 border-circle" style="height: 3.2rem; width: 3.2rem">
|
<div class="flex justify-content-center align-items-center bg-pink-500 border-circle" style="height: 3.2rem; width: 3.2rem">
|
||||||
<i class="pi pi-fw pi-exclamation-circle text-2xl text-50"></i>
|
<i class="pi pi-fw pi-exclamation-circle text-2xl text-white"></i>
|
||||||
</div>
|
</div>
|
||||||
<h1 class="font-bold text-5xl text-900 mb-2">Error Occured</h1>
|
<h1 class="text-900 font-bold text-5xl mb-2">Error Occured</h1>
|
||||||
<span class="text-600">Requested resource is not available.</span>
|
<span class="text-600 mb-5">Requested resource is not available.</span>
|
||||||
<img src="@/assets/layout/images/asset-error.svg" alt="Error" class="mt-5" width="80%" />
|
<img src="@/assets/demo/images/error/asset-error.svg" alt="Error" class="mb-5" width="80%" />
|
||||||
<div class="col-12 mt-5 text-center">
|
<div class="col-12 mt-5 text-center">
|
||||||
<i class="pi pi-fw pi-arrow-left text-blue-500 mr-2" style="vertical-align: center"></i>
|
<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>
|
<router-link to="/" class="text-blue-500">Go to Dashboard</router-link>
|
||||||
@@ -22,4 +24,5 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<AppConfig />
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { useLayoutService } from '@/layout/composables/layoutService';
|
import { useLayoutService } from '@/layout/composables/layoutService';
|
||||||
import { ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
|
import AppConfig from '@/layout/AppConfig.vue';
|
||||||
|
|
||||||
const { isDarkTheme } = useLayoutService();
|
const { isDarkTheme } = useLayoutService();
|
||||||
|
|
||||||
@@ -14,29 +15,27 @@ const logoUrl = () => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="surface-0 flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
|
<div class="surface-ground flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
|
||||||
<div class="grid justify-content-center p-2 lg:p-0" style="min-width: 80%">
|
<div class="flex flex-column align-items-center justify-content-center">
|
||||||
<div class="col-12 mt-5 xl:mt-0 text-center">
|
<img :src="logoUrl()" alt="Sakai logo" class="mb-5 w-6rem flex-shrink-0" />
|
||||||
<img :src="logoUrl()" alt="Sakai logo" class="mb-5" style="width: 81px; height: 60px" />
|
<div style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, var(--primary-color) 10%, rgba(33, 150, 243, 0) 30%)">
|
||||||
</div>
|
<div class="w-full surface-card py-8 px-5 sm:px-8" style="border-radius: 53px">
|
||||||
<div class="col-12 xl:col-6" style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, var(--primary-color), rgba(33, 150, 243, 0) 30%)">
|
|
||||||
<div class="h-full w-full m-0 py-7 px-4" style="border-radius: 53px; background: linear-gradient(180deg, var(--surface-50) 38.9%, var(--surface-0))">
|
|
||||||
<div class="text-center mb-5">
|
<div class="text-center mb-5">
|
||||||
<img src="@/assets/layout/images/avatar.png" alt="Image" height="50" class="mb-3" />
|
<img src="@/assets/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>
|
<div class="text-900 text-3xl font-medium mb-3">Welcome, Isabel!</div>
|
||||||
<span class="text-600 font-medium">Sign in to continue</span>
|
<span class="text-600 font-medium">Sign in to continue</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="w-full md:w-10 mx-auto">
|
<div>
|
||||||
<label for="email1" class="block text-900 text-xl font-medium mb-2">Email</label>
|
<label for="email1" class="block text-900 text-xl font-medium mb-2">Email</label>
|
||||||
<InputText id="email1" v-model="email" type="text" class="w-full mb-3" placeholder="Email" style="padding: 1rem" />
|
<InputText id="email1" type="text" placeholder="Email address" class="w-full md:w-30rem mb-5" 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-900 font-medium text-xl mb-2">Password</label>
|
||||||
<Password id="password1" v-model="password" placeholder="Password" :toggleMask="true" class="w-full mb-3" inputClass="w-full" inputStyle="padding:1rem"></Password>
|
<Password id="password1" v-model="password" placeholder="Password" :toggleMask="true" class="w-full mb-3" inputClass="w-full" inputStyle="padding:1rem"></Password>
|
||||||
|
|
||||||
<div class="flex align-items-center justify-content-between mb-5">
|
<div class="flex align-items-center justify-content-between mb-5 gap-5">
|
||||||
<div class="flex align-items-center">
|
<div class="flex align-items-center">
|
||||||
<Checkbox id="rememberme1" v-model="checked" :binary="true" class="mr-2"></Checkbox>
|
<Checkbox v-model="checked" id="rememberme1" binary class="mr-2"></Checkbox>
|
||||||
<label for="rememberme1">Remember me</label>
|
<label for="rememberme1">Remember me</label>
|
||||||
</div>
|
</div>
|
||||||
<a class="font-medium no-underline ml-2 text-right cursor-pointer" style="color: var(--primary-color)">Forgot password?</a>
|
<a class="font-medium no-underline ml-2 text-right cursor-pointer" style="color: var(--primary-color)">Forgot password?</a>
|
||||||
@@ -47,6 +46,7 @@ const logoUrl = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<AppConfig />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|||||||
Reference in New Issue
Block a user