vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Landing cosmetics

pull/4591/head
Cagatay Civici 2023-10-10 11:38:49 +03:00
parent c30cd4e6dc
commit 49a7a1a3d8
19 changed files with 373 additions and 981 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
assets/styles/layout/_code.scss
View File

@ -345,7 +345,7 @@ pre[class*="language-"] {
display: none;
}
.layout-wrapper-dark {
.layout-dark {
pre[class*="language-"] {
code {
background: var(--surface-card) !important;
@ -353,7 +353,7 @@ pre[class*="language-"] {
}
}
.layout-wrapper-light {
.layout-light {
pre[class*="language-"] {
code {
background: #475569 !important;

4
assets/styles/layout/_content.scss
View File

@ -8,7 +8,7 @@
}
}
.layout-wrapper-light {
.layout-light {
.card {
background: var(--surface-ground);
border: 1px solid var(--surface-border);
@ -18,7 +18,7 @@
}
}
.layout-wrapper-dark {
.layout-dark {
.card {
background: var(--surface-card);
border: 0 none;

4
assets/styles/layout/_doc.scss
View File

@ -120,7 +120,7 @@
}
}
.layout-wrapper-light {
.layout-light {
.doc-section-description {
> p {
i {
@ -131,7 +131,7 @@
}
}
.layout-wrapper-dark {
.layout-dark {
.doc-section-description {
> p {
i {

17
assets/styles/layout/_topbar.scss
View File

@ -1,21 +1,24 @@
.layout-topbar {
height: 4rem;
position: fixed;
top: 0;
left: 0;
padding: 0 4rem;
width: 100%;
z-index: 1100;
transition: background-color 1s;
border-bottom: 1px solid var(--surface-border);
display: flex;
align-items: center;
justify-content: space-between;
&.layout-topbar-sticky {
backdrop-filter: blur(8px);
}
.layout-topbar-inner {
height: 4rem;
padding: 0 4rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.layout-topbar-logo-container {
width: 250px;
margin-right: 4rem;
@ -44,7 +47,7 @@
}
}
.layout-wrapper-light {
.layout-light {
.layout-topbar {
&.layout-topbar-sticky {
background-color: rgba(255,255,255,.7);
@ -52,7 +55,7 @@
}
}
.layout-wrapper-dark {
.layout-dark {
.layout-topbar {
&.layout-topbar-sticky {
background-color: rgba(0,0,0,.3);

33
assets/styles/layout/landing/_components.scss
View File

@ -1,33 +0,0 @@
.landing-components {
.components-main {
.components-strip-top {
background: var(--home-components-strip-bg);
transform: matrix(-1, 0, 0, 1, 0, 0);
}
.components-strip-bottom {
background: var(--home-components-strip-bg);
}
}
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
background: transparent;
}
.box {
box-shadow: var(--home-card-shadow);
}
.p-datepicker, .p-datepicker-header {
background: transparent;
border-color: transparent;
}
}
@media screen and (min-width: 1660px) {
.components-main-container {
width: 1504px !important;
margin-left: auto !important;
margin-right: auto !important;
}
}

2
assets/styles/layout/landing/_dark.scss
View File

@ -1,4 +1,4 @@
.landing-dark {
.layout-dark {
--home-highlight-color:#14B8A6;
--home-highlight-darker-color:#0D9488;
--home-highlight-fore-color:#ffffff;

111
assets/styles/layout/landing/_header.scss
View File

@ -1,111 +0,0 @@
.landing-header {
background-color: transparent;
position: fixed;
top: 0;
left: 0;
width: 100%;
padding-top: 1rem;
padding-bottom: 1rem;
z-index: 100;
.landing-header-container {
width: 100%;
max-width: 1250px !important;
margin-left: auto !important;
margin-right: auto !important;
display: flex;
align-items: center;
justify-content: space-between;
}
.landing-header-logo {
height: 2.5rem;
}
&.landing-header-sticky {
background-color: var(--home-header-bg);
backdrop-filter: blur(12px);
}
ol {
a {
display: block;
padding: .5rem 1.5rem;
text-align: center;
transition: background-color .3s;
border-radius: 10px;
color: var(--home-menu-link-text-color);
white-space: nowrap;
img {
display: none;
}
&:hover {
background: var(--home-menu-link-hover-bg);
}
}
}
.header-button {
width: 2.5rem;
height: 2.5rem;
}
}
@media screen and (max-width: $landingBreakpointLG) {
.landing-header {
align-items: flex-start;
nav {
display: none;
}
.landing-header-logo {
height: 2rem;
}
&.landing-header-active {
background-color: var(--home-header-bg);
backdrop-filter: blur(12px);
height: 100vh;
nav {
display: block;
position: fixed;
left: 100px;
top: 100px;
width: 100%;
padding: 4rem 2rem;
top: 5rem;
left: 0;
}
.menu-button {
i:before {
content: "\e90b";
}
}
}
ol {
a {
border: 1px solid var(--home-border-color);
background-color: var(--home-herobox-bg);
margin-bottom: 1rem;
color: var(--home-linkbox-text-color);
cursor: pointer;
font-size: 1.5rem;
text-align: left;
display: flex;
align-items: center;
padding: 1.5rem;
img {
display: block;
margin-right: 1.5rem;
}
}
}
}
}

194
assets/styles/layout/landing/_hero.scss
View File

@ -1,194 +1,22 @@
.landing-hero {
flex: 1 1 auto;
.hero-inner {
.hero-box {
position: relative;
z-index: 1;
.name {
text-align: center;
margin-top: 20px;
opacity: 0;
transition: 1s;
transition-delay: 1.8s;
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
background: transparent;
}
img {
transform: scale(0);
opacity: 0;
transition: 0.5s;
transition-delay: 1.8s;
.box {
box-shadow: var(--home-card-shadow);
}
b {
color: var(--home-primary-text-color);
display: block;
font-weight: 600;
font-size: 13px;
}
span {
color: var(--home-secondary-text-color);
font-weight: 500;
font-size: 12px;
}
&:before {
content: '';
background: var(--home-herobox-bg);
border: 1px solid var(--home-border-color);
box-shadow: 0px 50px 100px var(--home-herobox-shadow);
border-radius: 9px;
z-index: -1;
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 0%;
opacity: 0;
transform: translate(-50%, -50%);
transition: height 1s 1.4s, opacity 1s 1.4s, border-color .3s;
}
&:hover {
&:before {
border-color: var(--home-highlight-color);
}
.p-datepicker, .p-datepicker-header {
background: transparent;
border-color: transparent;
}
}
.hero-border-top {
opacity: 0;
border: 1px solid transparent;
width: 380px;
height: 0;
position: absolute;
top: 50%;
left: 50%;
z-index: -1;
transition: height 1.5s, opacity 1.5s;
transition-delay: 0.6s;
border-radius: 9px;
transform: translate(-50%, -50%);
}
.hero-border-left {
border: 1px solid var(--home-border-color);
border-right: transparent;
width: 0%;
border-radius: 9px 0 0 9px;
height: 35%;
position: absolute;
top: 50%;
left: -3%;
z-index: -1;
opacity: 0;
transition: width 1s, opacity 1s, transform 1s;
transition-delay: 1s;
transform: translate(108px, -50%);
}
.hero-border-right {
border: 1px solid var(--home-border-color);
border-left: transparent;
width: 0%;
border-radius: 0 9px 9px 0;
height: 35%;
position: absolute;
top: 50%;
right: -3%;
z-index: -1;
opacity: 0;
transition: width 1s, opacity 1s, transform 1s;
transition-delay: 1s;
transform: translate(-108px, -50%);
}
}
.hero-bg {
transition-delay: 1.4s;
.hero-strip-top {
transition: 1.6s;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 114px;
height: 0%;
opacity: 0;
background: var(--home-herobox-strip-top-bg);
}
.hero-strip-left {
transition: 1.6s;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0%;
height: 114px;
opacity: 0;
background: var(--home-herobox-strip-bottom-bg);
}
}
&.hero-animation {
.hero-bg {
.hero-strip-top {
opacity: 1;
height: 100%;
}
.hero-strip-left {
width: 100%;
opacity: 1;
}
}
.hero-inner {
.hero-box {
cursor: pointer;
img {
opacity: 1;
transform: scale(1);
}
.name {
opacity: 1;
}
&:before {
height: 100%;
opacity: 1;
}
}
.hero-border-top {
height: 70%;
opacity: 1;
border-color: var(--home-border-color);
}
.hero-border-left {
opacity: 1;
width: 19%;
transform: translate(0, -50%);
}
.hero-border-right {
opacity: 1;
width: 19%;
transform: translate(0, -50%);
}
}
}
}
@media screen and (max-width: $landingBreakpointLG) {
@media screen and (min-width: 1660px) {
.landing-hero {
padding: 0 2rem;
width: 1504px !important;
margin-left: auto !important;
margin-right: auto !important;
}
}

3
assets/styles/layout/landing/_landing.scss
View File

@ -5,10 +5,9 @@ $landingBreakpointXL: 1199px;
@import './_main';
@import './_light';
@import './_dark';
@import './_header';
@import './_hero';
@import './_users';
@import './_getstarted';
@import './_components';
@import './_themes';
@import './_blocks';
@import './_designer';

2
assets/styles/layout/landing/_light.scss
View File

@ -1,4 +1,4 @@
.landing-light {
.layout-light {
--home-highlight-color:#14B8A6;
--home-highlight-darker-color:#0D9488;
--home-highlight-fore-color:#ffffff;

51
assets/styles/layout/landing/_main.scss
View File

@ -1,6 +1,7 @@
.landing {
background: var(--home-bg);
scroll-behavior: smooth;
padding-top: 4rem;
.landing-intro {
background: var(--home-intro-bg);
@ -135,53 +136,3 @@
transform: translateX(calc(-100% - 3rem));
}
}
.landing-users {
.fade-right {
background: linear-gradient(to left, var(--home-bg), transparent);
}
.fade-left {
background: linear-gradient(to right, var(--home-bg), transparent);
}
.section-detail {
max-width: 1250px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.users-container {
max-width: 1250px !important;
margin-left: auto !important;
margin-right: auto !important;
.marquee-wrapper {
user-select: none;
gap: 3rem;
justify-content: center;
align-items: center;
flex-shrink: 0;
}
.marquee {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-around;
gap: 3rem;
min-width: 100%;
animation: scroll 30s linear infinite;
> div {
max-width: clamp(10rem, 1rem + 28vmin, 20rem);
aspect-ratio: 1;
display: flex;
justify-content: center;
align-items: center;
height: 8rem;
}
&.marquee-reverse{
animation-direction: reverse;
animation-delay: calc(30s / -2);
}
}
}
}

49
assets/styles/layout/landing/_users.scss Normal file
View File

@ -0,0 +1,49 @@
.landing-users {
.fade-right {
background: linear-gradient(to left, var(--home-bg), transparent);
}
.fade-left {
background: linear-gradient(to right, var(--home-bg), transparent);
}
.section-detail {
max-width: 1250px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.users-container {
max-width: 1250px !important;
margin-left: auto !important;
margin-right: auto !important;
.marquee-wrapper {
user-select: none;
gap: 3rem;
justify-content: center;
align-items: center;
flex-shrink: 0;
}
.marquee {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-around;
gap: 3rem;
min-width: 100%;
animation: scroll 30s linear infinite;
> div {
max-width: clamp(10rem, 1rem + 28vmin, 20rem);
aspect-ratio: 1;
display: flex;
justify-content: center;
align-items: center;
height: 8rem;
}
&.marquee-reverse{
animation-direction: reverse;
animation-delay: calc(30s / -2);
}
}
}
}

3
layouts/AppTopBar.vue
View File

@ -1,5 +1,7 @@
<template>
<div :ref="containerRef" class="layout-topbar">
<div class="layout-topbar-inner">
<div class="layout-topbar-logo-container">
<PrimeVueNuxtLink to="/" class="layout-topbar-logo" aria-label="PrimeVue logo">
<svg width="165" height="40" viewBox="0 0 165 40" fill="none" xmlns="http://www.w3.org/2000/svg">
@ -93,6 +95,7 @@
</li>
</ul>
</div>
</div>
</template>
<script>

22
layouts/default.vue
View File

@ -1,8 +1,8 @@
<template>
<div class="layout-wrapper" :class="containerClass">
<app-news v-if="$appState.newsActive" />
<app-topbar @menubutton-click="onMenuButtonClick" @configbutton-click="onConfigButtonClick" />
<app-configurator :configActive="appConfigActive" @updateConfigActive="onUpdateConfigActive" />
<AppNews v-if="$appState.newsActive" />
<AppTopBar @menubutton-click="onMenuButtonClick" @configbutton-click="onConfigButtonClick" />
<AppConfigurator :configActive="appConfigActive" @updateConfigActive="onUpdateConfigActive" />
<div :class="['layout-mask', { 'layout-mask-active': sidebarActive }]" @click="onMaskClick"></div>
<div class="layout-content">
<app-menu :active="sidebarActive" />
@ -10,7 +10,7 @@
<slot></slot>
</div>
</div>
<app-footer />
<AppFooter />
<Toast />
<Toast position="top-left" group="tl" />
<Toast position="bottom-left" group="bl" />
@ -105,18 +105,18 @@ export default {
'layout-news-active': this.$appState.newsActive,
'p-input-filled': this.$primevue.config.inputStyle === 'filled',
'p-ripple-disabled': this.$primevue.config.ripple === false,
'layout-wrapper-dark': this.$appState.darkTheme,
'layout-wrapper-light': !this.$appState.darkTheme
'layout-dark': this.$appState.darkTheme,
'layout-light': !this.$appState.darkTheme
}
];
}
},
components: {
'app-topbar': AppTopBar,
'app-menu': AppMenu,
'app-footer': AppFooter,
'app-configurator': AppConfigurator,
'app-news': AppNews
AppTopBar,
AppMenu,
AppFooter,
AppConfigurator,
AppNews
}
};
</script>

19
pages/index.vue
View File

@ -1,8 +1,9 @@
<template>
<div :class="landingClass">
<Intro @change:theme="onThemeToggle"></Intro>
<AppNews v-if="$appState.newsActive" />
<AppTopBar />
<HeroSection />
<UsersSection />
<ComponentSection />
<ThemeSection :theme="tableTheme" @table-theme-change="onTableThemeChange" />
<BlockSection />
<DesignerSection />
@ -18,8 +19,10 @@ definePageMeta({
});
import EventBus from '@/layouts/AppEventBus';
import AppNews from '@/layouts/AppNews';
import HeroSection from './landing/HeroSection';
import AppTopBar from '@/layouts/AppTopBar.vue';
import BlockSection from './landing/BlockSection';
import ComponentSection from './landing/ComponentSection';
import DesignerSection from './landing/DesignerSection';
import FeaturesSection from './landing/FeaturesSection';
import FooterSection from './landing/FooterSection';
@ -27,9 +30,6 @@ import TemplateSection from './landing/TemplateSection';
import ThemeSection from './landing/ThemeSection';
import UsersSection from './landing/UsersSection';
const Intro = defineAsyncComponent(() => import('./landing/Intro.vue'));
export default {
props: {
theme: {
@ -92,12 +92,13 @@ export default {
},
computed: {
landingClass() {
return ['landing', { 'landing-dark': this.$appState?.darkTheme, 'landing-light': !this.$appState?.darkTheme, 'landing-news-active': this.$appState?.newsActive }];
return ['landing', { 'layout-dark': this.$appState?.darkTheme, 'layout-light': !this.$appState?.darkTheme, 'landing-news-active': this.$appState?.newsActive }];
}
},
components: {
Intro,
ComponentSection,
AppNews,
AppTopBar,
HeroSection,
ThemeSection,
BlockSection,
DesignerSection,

243
pages/landing/ComponentSection.vue
View File

@ -1,243 +0,0 @@
<template>
<section class="landing-components py-8">
<div class="section-header">Components</div>
<p class="section-detail"><span class="font-bold text-900">Over 90</span> Vue UI Components with top-notch quality to help you implement all your UI requirements in style.</p>
<div class="components-main relative">
<div class="components-main-container flex flex-column xl:flex-row mt-7 gap-5 justify-content-center mx-auto w-full xl:w-auto px-5 lg:px-8">
<div class="flex flex-column md:flex-row gap-5 w-full xl:w-auto">
<div class="flex flex-column w-full gap-5 xl:mt-8 z-1 lg:w-28rem md:w-30rem">
<div class="box p-4">
<span class="text-secondary font-medium block mb-3">Balance</span>
<div class="flex flex-wrap lg:flex-nowrap justify-content-start gap-3">
<InputNumber v-model="value1" mode="currency" currency="USD" locale="en-US" class="w-full" inputClass="lg:w-6" />
<InputNumber v-model="value2" mode="currency" currency="USD" locale="en-US" class="w-full" inputClass="lg:w-6" />
</div>
<span class="text-secondary font-medium block mt-5 mb-3">Category</span>
<div class="flex justify-content-between flex-wrap gap-3">
<div class="flex align-items-center">
<RadioButton id="category1" v-model="radioValue" value="C" name="radiovalue" @change="setCategory('C')" />
<label for="category1" class="ml-2 font-medium">Clothing</label>
</div>
<div class="flex align-items-center">
<RadioButton id="category2" v-model="radioValue" value="F" name="radiovalue" @change="setCategory('F')" />
<label for="category2" class="ml-2 font-medium">Fitness</label>
</div>
<div class="flex align-items-center">
<RadioButton id="category3" v-model="radioValue" value="E" name="radiovalue" @change="setCategory('E')" />
<label for="category3" class="ml-2 font-medium">Electronics</label>
</div>
</div>
</div>
<div class="box p-4">
<Chart type="line" :data="chartData" :options="chartOptions" />
</div>
<div class="box p-4">
<TabMenu v-model:activeIndex="activeTabIndex" :model="items" />
</div>
<div class="box p-4">
<ul class="list-none p-0 m-0">
<li class="flex align-items-center mb-3">
<img src="https://primefaces.org/cdn/primevue/images/landing/avatar-1.svg" alt="avatar 1" class="w-2rem h-2rem mr-3" />
<span class="font-medium">Darrel Steward</span>
<ProgressBar :value="pbValue1" :showValue="false" class="w-10rem ml-auto mr-3" style="height: 0.5rem" />
<span class="text-secondary font-medium">15%</span>
</li>
<li class="flex align-items-center mb-3">
<img src="https://primefaces.org/cdn/primevue/images/landing/avatar-2.svg" alt="avatar 2" class="w-2rem h-2rem mr-3" />
<span class="font-medium">Albert Flores</span>
<ProgressBar :value="pbValue3" :showValue="false" class="w-10rem ml-auto mr-3" style="height: 0.5rem" />
<span class="text-secondary font-medium">85%</span>
</li>
<li class="flex align-items-center mb-3">
<img src="https://primefaces.org/cdn/primevue/images/landing/avatar-3.svg" alt="avatar 3" class="w-2rem h-2rem mr-3" />
<span class="font-medium">Kathryn Murphy</span>
<ProgressBar :value="pbValue3" :showValue="false" class="w-10rem ml-auto mr-3" style="height: 0.5rem" />
<span class="text-secondary font-medium">50%</span>
</li>
<li class="flex align-items-center mb-3">
<img src="https://primefaces.org/cdn/primevue/images/landing/avatar-4.svg" alt="avatar 4" class="w-2rem h-2rem mr-3" />
<span class="font-medium">Cody Fisher</span>
<ProgressBar :value="pbValue4" :showValue="false" class="w-10rem ml-auto mr-3" style="height: 0.5rem" />
<span class="text-secondary font-medium">75%</span>
</li>
<li class="flex align-items-center mb-3">
<img src="https://primefaces.org/cdn/primevue/images/landing/avatar-5.svg" alt="avatar 5" class="w-2rem h-2rem mr-3" />
<span class="font-medium">Brandon Atkinson</span>
<ProgressBar :value="pbValue5" :showValue="false" class="w-10rem ml-auto mr-3" style="height: 0.5rem" />
<span class="text-secondary font-medium">60%</span>
</li>
</ul>
</div>
</div>
<div class="flex flex-column w-full gap-5 justify-content-start xl:w-24rem z-1">
<div class="box p-4">
<div class="surface-card mb-4 w-full text-center p-5" style="border-radius: '10px'">
<img src="https://primefaces.org/cdn/primevue/images/landing/brown-watch.png" alt="Watch" class="w-14rem" />
</div>
<div class="flex align-items-center mb-4">
<div class="flex flex-column">
<span class="block font-semibold mb-1">Brown Watch</span>
<span class="text-secondary text-sm">Premium Quality</span>
</div>
<span class="font-medium text-xl ml-auto">$12.45</span>
</div>
<Button label="Add to Cart" icon="pi pi-shopping-cart" outlined class="w-full"></Button>
</div>
<div class="box p-4">
<Tree :value="nodes" class="bg-transparent border-none p-0" />
</div>
<div class="box p-4">
<div class="flex align-items-center">
<Chip label="Vue" class="mr-2 font-medium" removable />
<span class="font-medium">Typescript</span>
<InputSwitch v-model="switchValue" class="ml-auto"></InputSwitch>
</div>
<div class="mt-5">
<SelectButton v-model="selectButtonValue" :options="selectButtonOptions" optionLabel="name" />
</div>
</div>
<div class="box p-4 block xl:hidden">
<div class="flex justify-content-center">
<Slider v-model="rangeValues" range class="w-full" />
</div>
</div>
</div>
</div>
<div class="flex flex-column gap-5 flex-column md:flex-row xl:flex-column justify-content-between xl:justify-content-start z-1 w-full md:w-auto">
<div class="flex flex-column gap-5 xl:mt-5 w-full">
<div class="box p-4 hidden xl:block">
<div class="flex justify-content-center w-full">
<Slider v-model="rangeValues" range class="w-full" />
</div>
</div>
<div class="box p-4 w-full">
<ul class="list-none p-0 m-0">
<li class="flex mb-3">
<span class="mr-3">
<img src="https://primefaces.org/cdn/primevue/images/landing/avatar.png" alt="Avatar" class="w-3rem h-3rem" />
</span>
<div class="flex flex-column">
<span class="font-bold mb-2">Amanda Williams</span>
<p class="m-0 text-secondary">Webmaster</p>
</div>
</li>
<li class="flex">
<a class="flex align-items-center p-3 w-full hover:surface-hover transition-colors transition-duration-150 cursor-pointer" style="border-radius: '10px'">
<i class="pi pi-home text-xl mr-3"></i>
<span class="flex flex-column">
<span class="font-bold mb-1">Dashboard</span>
<span class="m-0 text-secondary">Control Panel</span>
</span>
</a>
</li>
<li class="flex">
<a class="flex align-items-center p-3 w-full hover:surface-hover transition-colors transition-duration-150 cursor-pointer" style="border-radius: '10px'">
<i class="pi pi-envelope text-xl mr-3"></i>
<span class="flex flex-column">
<span class="font-bold mb-1">Inbox</span>
<span class="m-0 text-secondary">View Messages</span>
</span>
<Badge value="3" class="ml-auto"></Badge>
</a>
</li>
<li class="flex">
<a class="flex align-items-center p-3 w-full hover:surface-hover transition-colors transition-duration-150 cursor-pointer" style="border-radius: '10px'">
<i class="pi pi-cog text-xl mr-3"></i>
<span class="flex flex-column">
<span class="font-bold mb-1">Profile</span>
<span class="m-0 text-secondary">Account Settings</span>
</span>
</a>
</li>
</ul>
</div>
</div>
<div class="box p-4 md:w-6 xl:w-full">
<Calendar v-model="dateValue" :inline="true" :showWeek="true" class="w-full" />
</div>
</div>
</div>
<div class="components-strip-top absolute w-full md:w-6 h-8rem top-0 left-0"></div>
<div class="components-strip-bottom absolute w-full md:w-6 h-8rem bottom-0 right-0"></div>
</div>
</section>
</template>
<script>
import { NodeService } from '@/service/NodeService';
export default {
data() {
return {
value1: 240,
value2: 356,
category: 'C',
chartData: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'Income',
data: [40, 59, 40, 50, 56, 40, 70],
fill: true,
borderColor: '#03C4E8',
tension: 0.4,
backgroundColor: 'rgba(3, 196, 232, .2)'
}
]
},
chartOptions: {
plugins: {
legend: {
display: false
}
},
scales: {
y: {
ticks: {
display: false
},
min: 0,
max: 100
},
x: {
ticks: {
display: false
}
}
}
},
pbValue1: 15,
pbValue2: 85,
pbValue3: 50,
pbValue4: 75,
pbValue5: 60,
activeTabIndex: 0,
radioValue: 'C',
nodes: null,
switchValue: true,
selectButtonValue: { name: 'Prime', value: 1 },
dateValue: null,
rangeValues: [20, 80],
items: [
{ label: 'Home', icon: 'pi pi-fw pi-home' },
{ label: 'Calendar', icon: 'pi pi-fw pi-calendar' },
{ label: 'Settings', icon: 'pi pi-fw pi-cog' }
],
selectButtonOptions: [
{ name: 'Prime', value: 1 },
{ name: 'Vue', value: 2 },
{ name: 'Themes', value: 3 }
]
};
},
mounted() {
NodeService.getTreeNodes().then((data) => (this.nodes = data));
},
methods: {
setCategory(category) {
this.category = category;
}
}
};
</script>

118
pages/landing/HeaderSection.vue
View File

@ -1,118 +0,0 @@
<template>
<section :ref="containerRef" :class="['landing-header px-5 lg:px-8', { 'landing-header-active': menuActive }]">
<div class="landing-header-container">
<span>
<img :src="'https://primefaces.org/cdn/primevue/images/primevue-logo-' + `${$appState.darkTheme ? 'light' : 'dark'}` + '.svg'" alt="primevue logo" class="landing-header-logo" />
</span>
<div class="flex align-items-center">
<nav class="scalein origin-top">
<ol class="list-none m-0 p-0 flex flex-column lg:flex-row flex-wrap lg:flex-nowrap lg:align-items-center font-semibold">
<li class="mr-0 lg:mr-2">
<router-link to="/installation">
<img src="https://primefaces.org/cdn/primevue/images/landing/core-icon.svg" alt="primevue core" />
<span>Components</span>
</router-link>
</li>
<li class="mr-0 lg:mr-2">
<a href="https://blocks.primevue.org">
<img src="https://primefaces.org/cdn/primevue/images/landing/blocks-icon.svg" alt="primevue blocks" />
<span>Blocks</span>
</a>
</li>
<li class="mr-0 lg:mr-2">
<a href="https://designer.primevue.org">
<img src="https://primefaces.org/cdn/primevue/images/landing/designer-icon.svg" alt="primevue designer" />
<span>Designer</span>
</a>
</li>
<li class="mr-0 lg:mr-2">
<router-link to="/uikit">
<img src="https://primefaces.org/cdn/primevue/images/landing/uikit-icon.svg" alt="primevue designer" width="30" />
<span>UI Kit</span>
</router-link>
</li>
<li class="mr-0 lg:mr-2">
<a href="https://www.primefaces.org/store/templates.xhtml">
<img src="https://primefaces.org/cdn/primevue/images/landing/templates-icon.svg" alt="primevue templates" />
<span>Templates</span>
</a>
</li>
</ol>
</nav>
<a href="https://github.com/primefaces/primevue" target="_blank" rel="noopener noreferrer" class="linkbox p-0 header-button mr-1 md:mr-2 flex align-items-center justify-content-center flex-shrink-0">
<i class="pi pi-github"></i>
</a>
<a href="https://discord.gg/gzKFYnpmCY" target="_blank" rel="noopener noreferrer" class="linkbox p-0 header-button mr-1 md:mr-2 flex align-items-center justify-content-center flex-shrink-0">
<i class="pi pi-discord"></i>
</a>
<a href="https://github.com/orgs/primefaces/discussions" target="_blank" rel="noopener noreferrer" class="linkbox p-0 header-button mr-1 md:mr-2 flex align-items-center justify-content-center flex-shrink-0">
<i class="pi pi-comments"></i>
</a>
<button type="button" class="linkbox header-button inline-flex align-items-center justify-content-center" @click="toggleTheme">
<i :class="['pi', { 'pi-sun': isDarkTheme(), 'pi-moon': !isDarkTheme() }]"></i>
</button>
<button type="button" class="linkbox header-button inline-flex align-items-center justify-content-center lg:hidden ml-1 md:ml-2 menu-button" @click="toggleMenuActive">
<i class="pi pi-bars"></i>
</button>
</div>
</div>
</section>
</template>
<script>
export default {
emits: ['theme-toggle'],
data() {
return {
menuActive: false
};
},
scrollListener: null,
container: null,
mounted() {
this.bindScrollListener();
},
beforeUnmount() {
if (this.scrollListener) {
this.unbindScrollListener();
}
},
updated() {
this.checkSticky();
},
methods: {
isDarkTheme() {
return this.$appState.darkTheme === true;
},
toggleTheme() {
this.$emit('theme-toggle');
},
toggleMenuActive() {
this.menuActive = !this.menuActive;
},
bindScrollListener() {
if (!this.scrollListener && this.container) {
this.scrollListener = () => {
this.checkSticky();
};
}
window.addEventListener('scroll', this.scrollListener);
},
unbindScrollListener() {
if (this.scrollListener) {
window.removeEventListener('scroll', this.scrollListener);
this.scrollListener = null;
}
},
containerRef(el) {
this.container = el;
},
checkSticky() {
if (window.scrollY > 0) this.container.classList.add('landing-header-sticky');
else this.container.classList.remove('landing-header-sticky');
}
}
};
</script>

255
pages/landing/HeroSection.vue
View File

@ -1,111 +1,196 @@
<template>
<section :class="['landing-hero flex align-items-center flex-column justify-content-center relative', { 'hero-animation': setAnimation }]">
<div class="hero-inner z-2 relative">
<div class="flex flex-column md:align-items-center md:flex-row">
<div class="p-2 flex flex-row md:flex-column">
<div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation flex align-items-center justify-content-center" @click="navigateTo('https://www.primefaces.org/store')">
<div class="flex flex-column align-items-center">
<img src="https://primefaces.org/cdn/primevue/images/landing/templates-icon.svg" alt="primevue templates" />
<div class="name">
<b>Templates</b>
<span>Spectacular Designs</span>
<section class="landing-hero py-8 px-5 lg:px-8">
<div class="flex flex-wrap">
<div class="w-full xl:w-6 flex flex-column justify-content-center px-8 align-items-center xl:align-items-stretch">
<h1 class="text-6xl font-bold text-center xl:text-left">The Most Complete UI Suite for <span class="font-bold text-primary">Vue.js</span></h1>
<p class="section-detail xl:text-left text-center px-0 mt-0 mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div>
<PrimeVueNuxtLink to="/installation" class="linkbox active font-semibold py-3 px-4 fadeinleft animation-duration-2000 animation-ease-out"> Get Started <i class="pi pi-arrow-right ml-3"></i> </PrimeVueNuxtLink>
</div>
</div>
<div class="w-full xl:w-6 pt-7 xl:pt-0 hidden md:block">
<div class="flex">
<div class="flex flex-column w-6 gap-5 pt-8 pr-3">
<div class="box p-4">
<span class="text-secondary font-medium block mb-3">Balance</span>
<div class="flex flex-wrap lg:flex-nowrap justify-content-start gap-3">
<InputNumber v-model="value1" mode="currency" currency="USD" locale="en-US" class="w-full" inputClass="lg:w-6" />
<InputNumber v-model="value2" mode="currency" currency="USD" locale="en-US" class="w-full" inputClass="lg:w-6" />
</div>
<span class="text-secondary font-medium block mt-5 mb-3">Category</span>
<div class="flex justify-content-between flex-wrap gap-3">
<div class="flex align-items-center">
<RadioButton id="category1" v-model="radioValue" value="C" name="radiovalue" @change="setCategory('C')" />
<label for="category1" class="ml-2 font-medium">Clothing</label>
</div>
<div class="flex align-items-center">
<RadioButton id="category2" v-model="radioValue" value="F" name="radiovalue" @change="setCategory('F')" />
<label for="category2" class="ml-2 font-medium">Fitness</label>
</div>
<div class="flex align-items-center">
<RadioButton id="category3" v-model="radioValue" value="E" name="radiovalue" @change="setCategory('E')" />
<label for="category3" class="ml-2 font-medium">Electronics</label>
</div>
</div>
<span class="text-secondary font-medium block mt-5 mb-3">Order Date</span>
<Calendar v-model="dateValue" :showWeek="true" class="w-full" />
</div>
<div class="box p-4">
<Chart type="line" :data="chartData" :options="chartOptions" />
</div>
<div class="box p-4">
<div class="flex align-items-center">
<Chip label="Vue" class="mr-2 font-medium" />
<span class="font-medium">Typescript</span>
<InputSwitch v-model="switchValue" class="ml-auto"></InputSwitch>
</div>
<div class="mt-5 flex justify-content-center">
<SelectButton v-model="selectButtonValue" :options="selectButtonOptions" optionLabel="name" />
</div>
<div class="mt-5">
<Slider v-model="rangeValues" range class="w-full" />
</div>
</div>
</div>
<div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation ml-4 md:ml-0 md:mt-4 flex align-items-center justify-content-center" @click="navigateTo('https://designer.primevue.org')">
<div class="flex flex-column align-items-center">
<img src="https://primefaces.org/cdn/primevue/images/landing/designer-icon.svg" alt="primevue templates" />
<div class="name">
<b>Theme Designer</b>
<span>Create Your Own</span>
<div class="flex flex-column w-6 gap-5 pl-3">
<div class="box p-4">
<div class="surface-card mb-4 w-full text-center p-5" style="border-radius: '10px'">
<img src="https://primefaces.org/cdn/primevue/images/landing/brown-watch.png" alt="Watch" class="w-14rem" />
</div>
<div class="flex align-items-center mb-4">
<div class="flex flex-column">
<span class="block font-semibold mb-1">Brown Watch</span>
<span class="text-secondary text-sm">Premium Quality</span>
</div>
<span class="font-medium text-xl ml-auto">$12.45</span>
</div>
<Button label="Add to Cart" icon="pi pi-shopping-cart" outlined class="w-full"></Button>
</div>
<div class="box p-4 w-full">
<ul class="list-none p-0 m-0">
<li class="flex mb-3">
<span class="mr-3">
<img src="https://primefaces.org/cdn/primevue/images/landing/avatar.png" alt="Avatar" class="w-3rem h-3rem" />
</span>
<div class="flex flex-column">
<span class="font-bold mb-2">Amanda Williams</span>
<p class="m-0 text-secondary">Webmaster</p>
</div>
</li>
<li class="flex">
<a class="flex align-items-center p-3 w-full hover:surface-hover transition-colors transition-duration-150 cursor-pointer" style="border-radius: '10px'">
<i class="pi pi-home text-xl mr-3"></i>
<span class="flex flex-column">
<span class="font-bold mb-1">Dashboard</span>
<span class="m-0 text-secondary">Control Panel</span>
</span>
</a>
</li>
<li class="flex">
<a class="flex align-items-center p-3 w-full hover:surface-hover transition-colors transition-duration-150 cursor-pointer" style="border-radius: '10px'">
<i class="pi pi-envelope text-xl mr-3"></i>
<span class="flex flex-column">
<span class="font-bold mb-1">Inbox</span>
<span class="m-0 text-secondary">View Messages</span>
</span>
<Badge value="3" class="ml-auto"></Badge>
</a>
</li>
<li class="flex">
<a class="flex align-items-center p-3 w-full hover:surface-hover transition-colors transition-duration-150 cursor-pointer" style="border-radius: '10px'">
<i class="pi pi-cog text-xl mr-3"></i>
<span class="flex flex-column">
<span class="font-bold mb-1">Profile</span>
<span class="m-0 text-secondary">Account Settings</span>
</span>
</a>
</li>
</ul>
</div>
<div class="box p-4">
<TabMenu v-model:activeIndex="activeTabIndex" :model="items" />
</div>
</div>
</div>
</div>
<div class="p-2 flex flex-row md:flex-column">
<div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation flex align-items-center justify-content-center" @click="navigateTo('https://github.com/primefaces/primevue')">
<div class="flex flex-column align-items-center">
<img src="https://primefaces.org/cdn/primevue/images/landing/core-icon.svg" alt="primevue core" />
<div class="name">
<b>Open Source</b>
<span>90+ UI Components</span>
</div>
</div>
</div>
<router-link to="/installation">
<div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation logo hidden md:flex my-4 align-items-center justify-content-center">
<div class="hero-box-inner text-center">
<img src="https://primefaces.org/cdn/primevue/images/landing/overview-icon.svg" alt="primevue main" />
<div class="name">
<b class="font-bold">NEXT-GEN VUE UI</b>
</div>
</div>
</div>
</router-link>
<div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation flex ml-4 md:ml-0 align-items-center justify-content-center" @click="navigateTo('https://primeflex.org')">
<div class="flex flex-column align-items-center">
<img src="https://primefaces.org/cdn/primevue/images/landing/css-icon.svg" alt="primevue icons" />
<div class="name">
<b>CSS Utilities</b>
<span>PrimeFlex CSS</span>
</div>
</div>
</div>
</div>
<div class="p-2 flex flex-row md:flex-column">
<div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation flex align-items-center justify-content-center" @click="navigateTo('https://blocks.primevue.org')">
<div class="flex flex-column align-items-center">
<img src="https://primefaces.org/cdn/primevue/images/landing/blocks-icon.svg" alt="primevue templates" />
<div class="name">
<b>Prime Blocks</b>
<span>400+ UI Blocks</span>
</div>
</div>
</div>
<router-link to="/icons">
<div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation flex ml-4 md:ml-0 md:mt-4 align-items-center justify-content-center">
<div class="flex flex-column align-items-center">
<img src="https://primefaces.org/cdn/primevue/images/landing/icons-icon.svg" alt="primevue templates" />
<div class="name">
<b>Icon Library</b>
<span>200+ Icons</span>
</div>
</div>
</div>
</router-link>
</div>
</div>
<div class="hero-border-top hidden md:block"></div>
<div class="hero-border-left hidden md:block"></div>
<div class="hero-border-right hidden md:block"></div>
</div>
<GetStartedSection />
<div class="hero-bg absolute top-0 left-0 right-0 bottom-0 z-0">
<div class="hero-strip-top"></div>
<div class="hero-strip-left"></div>
</div>
</section>
</template>
<script>
import GetStartedSection from './GetStartedSection';
import { NodeService } from '@/service/NodeService';
export default {
data() {
return {
setAnimation: false
value1: 240,
value2: 356,
category: 'C',
chartData: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'Income',
data: [40, 59, 40, 50, 56, 40, 70],
fill: true,
borderColor: '#03C4E8',
tension: 0.4,
backgroundColor: 'rgba(3, 196, 232, .2)'
}
]
},
chartOptions: {
plugins: {
legend: {
display: false
}
},
scales: {
y: {
ticks: {
display: false
},
min: 0,
max: 100
},
x: {
ticks: {
display: false
}
}
}
},
pbValue1: 15,
pbValue2: 85,
pbValue3: 50,
pbValue4: 75,
pbValue5: 60,
activeTabIndex: 0,
radioValue: 'C',
nodes: null,
switchValue: true,
selectButtonValue: { name: 'Styled', value: 1 },
dateValue: null,
rangeValues: [20, 80],
items: [
{ label: 'Home', icon: 'pi pi-fw pi-home' },
{ label: 'Calendar', icon: 'pi pi-fw pi-calendar' },
{ label: 'Settings', icon: 'pi pi-fw pi-cog' }
],
selectButtonOptions: [
{ name: 'Styled', value: 1 },
{ name: 'Unstyled', value: 2 }
]
};
},
mounted() {
this.setAnimation = true;
NodeService.getTreeNodes().then((data) => (this.nodes = data));
},
methods: {
navigateTo(url) {
window.location.href = url;
setCategory(category) {
this.category = category;
}
},
components: {
GetStartedSection: GetStartedSection
}
};
</script>

22
pages/landing/Intro.vue
View File

@ -1,22 +0,0 @@
<template>
<div class="landing-intro">
<AppNews v-if="$appState.newsActive" />
<HeaderSection @theme-toggle="$emit('change:theme')" />
<HeroSection />
</div>
</template>
<script>
import AppNews from '@/layouts/AppNews';
import HeaderSection from './HeaderSection';
import HeroSection from './HeroSection';
export default {
emits: ['change:theme'],
components: {
HeaderSection,
HeroSection,
AppNews
}
};
</script>