Update to PrimeVue v4
This commit is contained in:
Cagatay Civici
+102
-75
@@ -1,7 +1,6 @@
|
||||
<script setup>
|
||||
import { useLayout } from '@/layout/composables/layout';
|
||||
import { computed } from 'vue';
|
||||
import AppConfig from '@/layout/AppConfig.vue';
|
||||
|
||||
const { layoutConfig } = useLayout();
|
||||
|
||||
@@ -19,50 +18,63 @@ const logoUrl = computed(() => {
|
||||
<template>
|
||||
<div class="surface-0 flex justify-content-center">
|
||||
<div id="home" class="landing-wrapper overflow-hidden">
|
||||
<div class="py-4 px-4 mx-0 md:mx-6 lg:mx-8 lg:px-8 flex align-items-center justify-content-between relative lg:static mb-3">
|
||||
<a class="flex align-items-center" href="#"> <img :src="logoUrl" alt="Sakai Logo" height="50" class="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 }">
|
||||
<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>
|
||||
</a>
|
||||
<div class="align-items-center surface-0 flex-grow-1 justify-content-between hidden lg:flex absolute lg:static w-full left-0 px-6 lg:px-0 z-2" style="top: 120px">
|
||||
<ul class="list-none p-0 m-0 flex lg:align-items-center select-none flex-column lg:flex-row cursor-pointer">
|
||||
<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">
|
||||
<ul
|
||||
class="list-none p-0 m-0 flex lg:align-items-center select-none flex-column lg:flex-row cursor-pointer">
|
||||
<li>
|
||||
<a @click="smoothScroll('#hero')" class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3 p-ripple" v-ripple>
|
||||
<a @click="smoothScroll('#hero')"
|
||||
class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3 p-ripple" v-ripple>
|
||||
<span>Home</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a @click="smoothScroll('#features')" class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3 p-ripple" v-ripple>
|
||||
<a @click="smoothScroll('#features')"
|
||||
class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3 p-ripple" v-ripple>
|
||||
<span>Features</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a @click="smoothScroll('#highlights')" class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3 p-ripple" v-ripple>
|
||||
<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>
|
||||
<span>Highlights</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a @click="smoothScroll('#pricing')" class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3 p-ripple" v-ripple>
|
||||
<a @click="smoothScroll('#pricing')"
|
||||
class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3 p-ripple" v-ripple>
|
||||
<span>Pricing</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="flex justify-content-between lg:block border-top-1 lg:border-top-none surface-border py-3 lg:py-0 mt-3 lg:mt-0">
|
||||
<Button label="Login" class="p-button-text p-button-rounded border-none font-light line-height-2 text-blue-500"></Button>
|
||||
<Button label="Register" class="p-button-rounded border-none ml-5 font-light text-white line-height-2 bg-blue-500"></Button>
|
||||
<div
|
||||
class="flex justify-content-between lg:block border-top-1 lg:border-top-none surface-border py-3 lg:py-0 mt-3 lg:mt-0">
|
||||
<Button label="Login"
|
||||
class="p-button-text p-button-rounded border-none font-light line-height-2 text-blue-500"></Button>
|
||||
<Button label="Register"
|
||||
class="p-button-rounded border-none ml-5 font-light text-white line-height-2 bg-blue-500"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
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 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>
|
||||
<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>
|
||||
<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="/demo/images/landing/screen-1.png" alt="Hero Image" class="w-9 md:w-auto" />
|
||||
@@ -78,10 +90,10 @@ const logoUrl = computed(() => {
|
||||
|
||||
<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))"
|
||||
>
|
||||
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">
|
||||
<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>
|
||||
@@ -92,10 +104,10 @@ const logoUrl = computed(() => {
|
||||
|
||||
<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))"
|
||||
>
|
||||
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">
|
||||
<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>
|
||||
@@ -106,10 +118,10 @@ const logoUrl = computed(() => {
|
||||
|
||||
<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))"
|
||||
>
|
||||
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">
|
||||
<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>
|
||||
@@ -120,10 +132,10 @@ const logoUrl = computed(() => {
|
||||
|
||||
<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))"
|
||||
>
|
||||
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">
|
||||
<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>
|
||||
@@ -134,10 +146,10 @@ const logoUrl = computed(() => {
|
||||
|
||||
<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))"
|
||||
>
|
||||
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">
|
||||
<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>
|
||||
@@ -148,10 +160,10 @@ const logoUrl = computed(() => {
|
||||
|
||||
<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))"
|
||||
>
|
||||
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">
|
||||
<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>
|
||||
@@ -162,10 +174,10 @@ const logoUrl = computed(() => {
|
||||
|
||||
<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))"
|
||||
>
|
||||
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">
|
||||
<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>
|
||||
@@ -176,10 +188,10 @@ const logoUrl = computed(() => {
|
||||
|
||||
<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))"
|
||||
>
|
||||
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">
|
||||
<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>
|
||||
@@ -190,10 +202,10 @@ const logoUrl = computed(() => {
|
||||
|
||||
<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))"
|
||||
>
|
||||
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">
|
||||
<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>
|
||||
@@ -202,15 +214,17 @@ const logoUrl = computed(() => {
|
||||
</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">
|
||||
<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 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>
|
||||
@@ -225,33 +239,38 @@ const logoUrl = computed(() => {
|
||||
</div>
|
||||
|
||||
<div class="grid mt-8 pb-2 md:pb-8">
|
||||
<div class="flex justify-content-center col-12 lg:col-6 bg-purple-100 p-0 flex-order-1 lg:flex-order-0" style="border-radius: 8px">
|
||||
<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="/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">
|
||||
<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
|
||||
>
|
||||
<span class="text-700 text-2xl line-height-3 ml-0 md:ml-2" style="max-width: 650px">Lectus arcu
|
||||
bibendum at varius vel pharetra vel turpis nunc. Eget aliquet nibh praesent tristique magna
|
||||
sit amet purus gravida. Sit amet mattis vulputate enim nulla aliquet.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid my-8 pt-2 md:pt-8">
|
||||
<div class="col-12 lg:col-6 my-auto flex flex-column 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" style="width: 4.2rem; height: 4.2rem; border-radius: 10px">
|
||||
<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">
|
||||
<i class="pi pi-fw pi-desktop text-5xl text-yellow-700"></i>
|
||||
</div>
|
||||
<h2 class="line-height-1 text-900 text-4xl font-normal">Celerisque Eu Ultrices</h2>
|
||||
<span class="text-700 text-2xl line-height-3 mr-0 md:mr-2" style="max-width: 650px"
|
||||
>Adipiscing commodo elit at imperdiet dui. Viverra nibh cras pulvinar mattis nunc sed blandit libero. Suspendisse in est ante in. Mauris pharetra et ultrices neque ornare aenean euismod elementum nisi.</span
|
||||
>
|
||||
<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">
|
||||
<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="/demo/images/landing/mockup-desktop.svg" class="w-11" alt="mockup" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -265,13 +284,15 @@ const logoUrl = computed(() => {
|
||||
|
||||
<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">
|
||||
<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>
|
||||
<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">
|
||||
@@ -296,13 +317,15 @@ const logoUrl = computed(() => {
|
||||
</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">
|
||||
<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>
|
||||
<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">
|
||||
@@ -327,13 +350,15 @@ const logoUrl = computed(() => {
|
||||
</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">
|
||||
<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>
|
||||
<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">
|
||||
@@ -362,7 +387,8 @@ const logoUrl = computed(() => {
|
||||
<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">
|
||||
<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>
|
||||
@@ -374,7 +400,8 @@ const logoUrl = computed(() => {
|
||||
<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">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>
|
||||
@@ -389,7 +416,8 @@ const logoUrl = computed(() => {
|
||||
<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">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>
|
||||
@@ -406,7 +434,6 @@ const logoUrl = computed(() => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<AppConfig simple />
|
||||
</template>
|
||||
|
||||
<!-- <style scoped>
|
||||
|
||||
Reference in New Issue
Block a user