Login page finished

This commit is contained in:
Martin Araneda 2023-01-30 21:32:32 -03:00 committed by Chris Cromer
parent 055dc9867e
commit 1be368a905
Signed by: cromer
GPG Key ID: FA91071797BEEEC2
5 changed files with 456 additions and 324 deletions

View File

@ -4,10 +4,12 @@ import { createPinia } from 'pinia';
import App from './App.vue';
import router from './router';
import Button from 'primevue/button';
import PrimeVue from 'primevue/config';
import Chart from 'primevue/chart';
import Dropdown from 'primevue/dropdown';
import InputText from 'primevue/inputtext';
import Password from 'primevue/password';
import '@/assets/styles.scss';
const app = createApp(App);
@ -17,9 +19,11 @@ app.use(router);
app.use(PrimeVue, { ripple: true });
app.component('Button', Button);
app.component('Chart', Chart);
app.component('Dropdown', Dropdown);
app.component('InputText', InputText);
app.component('Password', Password);
app.mount('#app');

View File

@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router';
import AppLayout from '@/layout/AppLayout.vue';
import HomeView from '../views/HomeView.vue';
import Landing from '../views/Landing.vue';
import Login from '../views/Login.vue';
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
@ -10,6 +11,10 @@ const router = createRouter({
path: '/',
component: Landing
},
{
path: '/login',
component: Login
},
{
path: '/home',
component: AppLayout,

View File

@ -0,0 +1,360 @@
<script setup>
import { ref } from 'vue';
const items = ref([
{
label: 'Update',
icon: 'pi pi-refresh'
},
{
label: 'Delete',
icon: 'pi pi-times'
},
{
separator: true
},
{
label: 'Home',
icon: 'pi pi-home'
}
]);
const loading = ref([false, false, false]);
const load = (index) => {
loading.value[index] = true;
setTimeout(() => (loading.value[index] = false), 1000);
};
</script>
<template>
<div class="grid">
<div class="col-12 md:col-6">
<div class="card">
<h5>Default</h5>
<Button label="Submit" class="mr-2 mb-2"></Button>
<Button label="Disabled" class="mr-2 mb-2" :disabled="true"></Button>
<Button label="Link" class="p-button-link mr-2 mb-2" />
</div>
<div class="card">
<h5>Severities</h5>
<Button label="Primary" class="mr-2 mb-2" />
<Button label="Secondary" class="p-button-secondary mr-2 mb-2" />
<Button label="Success" class="p-button-success mr-2 mb-2" />
<Button label="Info" class="p-button-info mr-2 mb-2" />
<Button label="Warning" class="p-button-warning mr-2 mb-2" />
<Button label="Danger" class="p-button-danger mr-2 mb-2" />
</div>
<div class="card">
<h5>Text</h5>
<Button label="Primary" class="p-button-text mr-2 mb-2" />
<Button label="Secondary" class="p-button-secondary p-button-text mr-2 mb-2" />
<Button label="Success" class="p-button-success p-button-text mr-2 mb-2" />
<Button label="Info" class="p-button-info p-button-text mr-2 mb-2" />
<Button label="Warning" class="p-button-warning p-button-text mr-2 mb-2" />
<Button label="Help" class="p-button-help p-button-text mr-2 mb-2" />
<Button label="Danger" class="p-button-danger p-button-text mr-2 mb-2" />
<Button label="Plain" class="p-button-plain p-button-text mr-2 mb-2" />
</div>
<div class="card">
<h5>Outlined</h5>
<Button label="Primary" class="p-button-outlined mr-2 mb-2" />
<Button label="Secondary" class="p-button-outlined p-button-secondary mr-2 mb-2" />
<Button label="Success" class="p-button-outlined p-button-success mr-2 mb-2" />
<Button label="Info" class="p-button-outlined p-button-info mr-2 mb-2" />
<Button label="Warning" class="p-button-outlined p-button-warning mr-2 mb-2" />
<Button label="Help" class="p-button-outlined p-button-help mr-2 mb-2" />
<Button label="Danger" class="p-button-outlined p-button-danger mr-2 mb-2" />
</div>
<div class="card">
<h5>Button Group</h5>
<span class="p-buttonset">
<Button label="Save" icon="pi pi-check" />
<Button label="Delete" icon="pi pi-trash" />
<Button label="Cancel" icon="pi pi-times" />
</span>
</div>
<div class="card">
<h5>SplitButton</h5>
<SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-secondary mr-2 mb-2">
</SplitButton>
<SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-success mr-2 mb-2">
</SplitButton>
<SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-info mr-2 mb-2">
</SplitButton>
<SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-warning mr-2 mb-2">
</SplitButton>
<SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-danger mr-2 mb-2">
</SplitButton>
</div>
<div class="card">
<h5>Templating</h5>
<div class="flex flex-wrap gap-2">
<Button type="button" class="google">
<span class="flex align-items-center px-2 bg-purple-700 text-white">
<i className="pi pi-google"></i>
</span>
<span className="px-3 py-2 flex align-items-center text-white">Google</span>
</Button>
<Button type="button" class="twitter">
<span class="flex align-items-center px-2 bg-blue-500 text-white">
<i className="pi pi-twitter"></i>
</span>
<span className="px-3 py-2 flex align-items-center text-white">Twitter</span>
</Button>
<Button type="button" class="discord">
<span class="flex align-items-center px-2 bg-bluegray-800 text-white">
<i className="pi pi-discord"></i>
</span>
<span className="px-3 py-2 flex align-items-center text-white">Discord</span>
</Button>
</div>
</div>
</div>
<div class="col-12 md:col-6">
<div class="card">
<h5>Icons</h5>
<Button icon="pi pi-star-fill" class="mr-2 mb-2"></Button>
<Button label="Bookmark" icon="pi pi-bookmark" class="mr-2 mb-2"></Button>
<Button label="Bookmark" icon="pi pi-bookmark" iconPos="right" class="mr-2 mb-2"></Button>
</div>
<div class="card">
<h5>Raised</h5>
<Button label="Primary" class="p-button-raised mr-2 mb-2" />
<Button label="Secondary" class="p-button-raised p-button-secondary mr-2 mb-2" />
<Button label="Success" class="p-button-raised p-button-success mr-2 mb-2" />
<Button label="Info" class="p-button-raised p-button-info mr-2 mb-2" />
<Button label="Warning" class="p-button-raised p-button-warning mr-2 mb-2" />
<Button label="Danger" class="p-button-raised p-button-danger mr-2 mb-2" />
</div>
<div class="card">
<h5>Rounded</h5>
<Button label="Primary" class="p-button-rounded mr-2 mb-2" />
<Button label="Secondary" class="p-button-rounded p-button-secondary mr-2 mb-2" />
<Button label="Success" class="p-button-rounded p-button-success mr-2 mb-2" />
<Button label="Info" class="p-button-rounded p-button-info mr-2 mb-2" />
<Button label="Warning" class="p-button-rounded p-button-warning mr-2 mb-2" />
<Button label="Danger" class="p-button-rounded p-button-danger mr-2 mb-2" />
</div>
<div class="card">
<h5>Rounded Icons</h5>
<Button icon="pi pi-star-fill" class="p-button-rounded mr-2 mb-2" />
<Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary mr-2 mb-2" />
<Button icon="pi pi-check" class="p-button-rounded p-button-success mr-2 mb-2" />
<Button icon="pi pi-search" class="p-button-rounded p-button-info mr-2 mb-2" />
<Button icon="pi pi-user" class="p-button-rounded p-button-warning mr-2 mb-2" />
<Button icon="pi pi-sign-out" class="p-button-rounded p-button-danger mr-2 mb-2" />
</div>
<div class="card">
<h5>Rounded Text</h5>
<Button icon="pi pi-check" class="p-button-rounded p-button-text mr-2 mb-2" />
<Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-text mr-2 mb-2" />
<Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-text mr-2 mb-2" />
<Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-text mr-2 mb-2" />
<Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text mr-2 mb-2" />
<Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text mr-2 mb-2" />
<Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text mr-2 mb-2" />
<Button icon="pi pi-filter" class="p-button-rounded p-button-plain p-button-text mr-2 mb-2" />
</div>
<div class="card">
<h5>Rounded Outlined</h5>
<Button icon="pi pi-check" class="p-button-rounded p-button-outlined mr-2 mb-2" />
<Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-outlined mr-2 mb-2" />
<Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-outlined mr-2 mb-2" />
<Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-outlined mr-2 mb-2" />
<Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-outlined mr-2 mb-2" />
<Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined mr-2 mb-2" />
<Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined mr-2 mb-2" />
</div>
<div class="card">
<h5>Loading</h5>
<Button type="button" class="mr-2 mb-2" label="Search" icon="pi pi-search" :loading="loading[0]"
@click="load(0)" />
<Button type="button" class="mr-2 mb-2" label="Search" icon="pi pi-search" iconPos="right"
:loading="loading[1]" @click="load(1)" />
<Button type="button" class="mr-2 mb-2" icon="pi pi-search" :loading="loading[2]" @click="load(2)" />
<Button type="button" class="mr-2 mb-2" label="Search" :loading="loading[3]" @click="load(3)" />
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.google {
background: linear-gradient(to left, var(--purple-600) 50%, var(--purple-700) 50%);
background-size: 200% 100%;
background-position: right bottom;
transition: background-position 0.5s ease-out;
border-color: var(--purple-700);
display: flex;
align-items: stretch;
padding: 0;
&:enabled:hover {
background: linear-gradient(to left, var(--purple-600) 50%, var(--purple-700) 50%);
background-size: 200% 100%;
background-position: left bottom;
border-color: var(--purple-700);
}
&:focus {
box-shadow: 0 0 0 1px var(--purple-400);
}
}
.twitter {
background: linear-gradient(to left, var(--blue-400) 50%, var(--blue-500) 50%);
background-size: 200% 100%;
background-position: right bottom;
transition: background-position 0.5s ease-out;
border-color: var(--blue-500);
padding: 0;
display: flex;
align-items: stretch;
&:enabled:hover {
background: linear-gradient(to left, var(--blue-400) 50%, var(--blue-500) 50%);
background-size: 200% 100%;
background-position: left bottom;
border-color: var(--blue-500);
}
&:focus {
box-shadow: 0 0 0 1px var(--blue-200);
}
}
.discord {
background: linear-gradient(to left, var(--bluegray-700) 50%, var(--bluegray-800) 50%);
background-size: 200% 100%;
background-position: right bottom;
transition: background-position 0.5s ease-out;
border-color: var(--bluegray-800);
padding: 0;
display: flex;
align-items: stretch;
&:enabled:hover {
background: linear-gradient(to left, var(--bluegray-700) 50%, var(--bluegray-800) 50%);
background-size: 200% 100%;
background-position: left bottom;
border-color: var(--bluegray-800);
}
&:focus {
box-shadow: 0 0 0 1px var(--purple-500);
}
}
.template-button .p-button.twitter {
background: linear-gradient(to left, var(--blue-400) 50%, var(--blue-500) 50%);
background-size: 200% 100%;
background-position: right bottom;
transition: background-position 0.5s ease-out;
color: #fff;
border-color: var(--blue-500);
}
.template-button .p-button.twitter:hover {
background-position: left bottom;
}
.template-button .p-button.twitter i {
background-color: var(--blue-500);
}
.template-button .p-button.twitter:focus {
box-shadow: 0 0 0 1px var(--blue-200);
}
.template-button .p-button.slack {
background: linear-gradient(to left, var(--orange-400) 50%, var(--orange-500) 50%);
background-size: 200% 100%;
background-position: right bottom;
transition: background-position 0.5s ease-out;
color: #fff;
border-color: var(--orange-500);
}
.template-button .p-button.slack:hover {
background-position: left bottom;
}
.template-button .p-button.slack i {
background-color: var(--orange-500);
}
.template-button .p-button.slack:focus {
box-shadow: 0 0 0 1px var(--orange-200);
}
.template-button .p-button.amazon {
background: linear-gradient(to left, var(--yellow-400) 50%, var(--yellow-500) 50%);
background-size: 200% 100%;
background-position: right bottom;
transition: background-position 0.5s ease-out;
color: #000;
border-color: var(--yellow-500);
}
.template-button .p-button.amazon:hover {
background-position: left bottom;
}
.template-button .p-button.amazon i {
background-color: var(--yellow-500);
}
.template-button .p-button.amazon:focus {
box-shadow: 0 0 0 1px var(--yellow-200);
}
.template-button .p-button.discord {
background: linear-gradient(to left, var(--bluegray-700) 50%, var(--bluegray-800) 50%);
background-size: 200% 100%;
background-position: right bottom;
transition: background-position 0.5s ease-out;
color: #fff;
border-color: var(--bluegray-800);
}
.template-button .p-button.discord:hover {
background-position: left bottom;
}
.template-button .p-button.discord i {
background-color: var(--bluegray-800);
}
.template-button .p-button.discord:focus {
box-shadow: 0 0 0 1px var(--bluegray-500);
}
@media screen and (max-width: 960px) {
-button .p-button {
margin-bottom: 0.5rem;
}
-button .p-button:not(.p-button-icon-only) {
display: flex;
flex-wrap: wrap;
}
-button .p-buttonset .p-button {
margin-bottom: 0;
}
}
</style>

View File

@ -20,9 +20,7 @@ const logoUrl = computed(() => {
<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="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
v-styleclass="{ selector: '@next', enterClass: 'hidden', leaveToClass: 'hidden', hideOnOutsideClick: true }">
<i class="pi pi-bars text-4xl"></i>
@ -33,7 +31,8 @@ const logoUrl = computed(() => {
class="list-none p-0 m-0 flex lg:align-items-center select-none flex-column lg:flex-row cursor-pointer">
<li>
<a @click="smoothScroll('#hero')"
class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3 p-ripple" v-ripple>
class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3 p-ripple" v-ripple
href="home">
<span>Home</span>
</a>
</li>
@ -44,35 +43,39 @@ const logoUrl = computed(() => {
</a>
</li>
<li>
<a @click="smoothScroll('#highlights')"
<a @click="smoothScroll('#moreinfo')"
class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3 p-ripple" v-ripple>
<span>Highlights</span>
<span>More info</span>
</a>
</li>
<li>
<a @click="smoothScroll('#pricing')"
<a @click="smoothScroll('#downloads')"
class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3 p-ripple" v-ripple>
<span>Pricing</span>
<span>Downloads</span>
</a>
</li>
</ul>
<div
class="flex justify-content-between lg:block border-top-1 lg:border-top-none surface-border py-3 lg:py-0 mt-3 lg:mt-0">
<Button label="Login"
class="p-button-text p-button-rounded border-none font-light line-height-2 text-blue-500"></Button>
<Button label="Register"
class="p-button-rounded border-none ml-5 font-light text-white line-height-2 bg-blue-500"></Button>
<a href="/login">
<Button label="Login"
class="p-button-text p-button-rounded border-none font-light text-white line-height-2 bg-blue-500">
</Button>
</a>
</div>
</div>
</div>
<div id="hero" class="flex flex-column pt-4 px-4 lg:px-8 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
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>
<h1 class="text-6xl font-bold text-gray-900 line-height-2"><span class="font-light block">A.I.
Development</span>Alai &
Obelisk</h1>
<p class="font-normal text-2xl line-height-3 md:mt-3 text-gray-700">Artificial Intelligence
implementation in a 2D-based platform videogame using a self-made declarative language</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>
@ -81,161 +84,11 @@ const logoUrl = computed(() => {
</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>
<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="/demo/images/landing/peak-logo.svg" class="mt-4" 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="features" class="py-4 px-4 lg:px-8 mx-0 my-6 lg:mx-8">
<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-900 font-normal mb-2">Features</h2>
</div>
<div class="grid mt-8 pb-2 md:pb-8">
@ -247,26 +100,26 @@ const logoUrl = computed(() => {
<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>
<i class="pi pi-fw pi-palette 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>
<h2 class="line-height-1 text-900 text-4xl font-normal">Alai</h2>
<span class="text-700 text-2xl line-height-3 ml-0 md:ml-2" style="max-width: 650px">Alai is a
2D-based platform videogame made with a friendly and easy-to-use game engine called
"Godot". Alai contains within the game a player registration menu and recollection of data
for each playthrough so the data can be analyzed for future use</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="flex align-items-center justify-content-center bg-blue-200 align-self-center lg:align-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>
<i class="pi pi-fw pi-globe text-5xl text-blue-700"></i>
</div>
<h2 class="line-height-1 text-900 text-4xl font-normal">Celerisque Eu Ultrices</h2>
<span class="text-700 text-2xl line-height-3 mr-0 md:mr-2" style="max-width: 650px">Adipiscing
commodo elit at imperdiet dui. Viverra nibh cras pulvinar mattis nunc sed blandit libero.
Suspendisse in est ante in. Mauris pharetra et ultrices neque ornare aenean euismod
elementum nisi.</span>
<h2 class="line-height-1 text-900 text-4xl font-normal">Obelisk</h2>
<span class="text-700 text-2xl line-height-3 mr-0 md:mr-2" style="max-width: 650px">A compiled
and declarative self-made language with the purpose of the creation of an Artifitial
Intelligence, inspired on the logical language "Prolog"</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"
@ -276,157 +129,19 @@ const logoUrl = computed(() => {
</div>
</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="/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 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 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"
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>
<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>
</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 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">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>
<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>
</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="col-12 md:col-10 lg:col-2">
<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>
<h4 class="font-medium text-2xl line-height-3 mb-3 text-900">Project</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="/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>

View File

@ -0,0 +1,48 @@
<script setup>
import { ref } from 'vue';
const username = ref('');
const password = ref('');
</script>
<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">
<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">
<span class="text-600 font-medium">Log in to continue</span>
</div>
<div>
<label for="username1" class="block text-900 text-xl font-medium mb-2">Username</label>
<InputText id="username1" type="text" placeholder="Username" class="w-full md:w-30rem mb-5"
style="padding: 1rem" v-model="username" />
<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" :feedback="false">
</Password>
<Button label="Log In" class="w-full p-3 text-xl"></Button>
</div>
</div>
</div>
</div>
</div>
</template>
<style scoped>
.pi-eye {
transform: scale(1.6);
margin-right: 1rem;
}
.pi-eye-slash {
transform: scale(1.6);
margin-right: 1rem;
}
</style>