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

Migrated Landing

pull/5507/head
Cagatay Civici 2024-03-28 17:11:57 +03:00
parent c25b2e0559
commit 90ba486108
14 changed files with 83 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
assets/styles/layout/_news.scss
View File

@ -52,6 +52,7 @@
}
.layout-news-close {
color:var(--primary-inverse-color);
line-height: 1.5;
cursor: pointer;
display: inline-flex;

30
assets/styles/layout/landing/_blocks.scss
View File

@ -3,8 +3,6 @@
box-sizing: content-box;
}
background: var(--home-blocks-bg);
.prime-blocks {
transform: rotateX(55deg) rotateY(0deg) rotateZ(-45deg);
margin: -12rem 0;
@ -23,10 +21,10 @@
}
.prime-block {
background: var(--home-blocks-block-bg);
background: var(--ground-surface);
box-shadow:var(--home-blocks-block-shadow);
border-left: var(--home-blocks-border-left);
border-bottom: var(--home-blocks-border-bottom);
border-left: 5px solid var(--border-color);
border-bottom: 7px solid var(--border-color);
border-radius: 10px;
height: 300px;
width: 600px;
@ -53,7 +51,7 @@
right:0;
bottom: 0;
border-radius: 6px;
border: var(--home-blocks-border)
border: 1px solid var(--border-color);
}
.block-sidebar,
@ -68,7 +66,7 @@
.block-content {
.block-main {
border: var(--home-blocks-main-border);
border: 1px solid var(--border-color);
border-radius: 13px;
background: var(--home-blocks-main-bg);
}
@ -118,12 +116,12 @@
}
&.block-item-active {
box-shadow: var(--home-blocks-active-shadow);
box-shadow: 0px 30px 50px 0px rgba(0, 0, 0, .1);
border-radius: 6px;
border-top: var(--home-blocks-active-border-top);
border-right: var(--home-blocks-active-border-right);
border-bottom: var(--home-blocks-active-border-bottom);
border-left: var(--home-blocks-active-border-left);
border-top: 1px solid var(--border-color);
border-right: 1px solid var(--border-color);
border-bottom: 4px solid var(--border-color);
border-left: 4px solid var(--border-color);
position: relative;
z-index: 5;
animation: block-animation 1500ms ease-in-out alternate infinite;
@ -159,10 +157,10 @@
border-radius: 10px;
&.bar-highlight {
background: var(--home-highlight-color);
background: var(--primary-color);
&:before {
background: var(--home-highlight-fore-color) !important ;
background: var(--primary-inverse-color) !important ;
}
}
@ -201,7 +199,7 @@
}
&.circle-highlight {
background: var(--home-highlight-color);
background: var(--primary-color);
}
}
}
@ -217,6 +215,6 @@
@keyframes block-animation {
to {
transform: translateY(-10px) translateX(10px) scale(1.02);
box-shadow: var(--home-blocks-animation-shadow);
box-shadow: 0px 30px 50px 10px rgba(0, 0, 0, .2);
}
}

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

@ -1,6 +1,6 @@
.landing-features {
.box {
box-shadow: var(--home-features-card-shadow);
box-shadow: var(--home-card-shadow);
}
.features-container{
max-width: 1250px !important;

11
assets/styles/layout/landing/_getstarted.scss
View File

@ -1,11 +0,0 @@
.landing-getstarted {
.download-icon {
color: var(--home-highlight-color);
}
.download-box {
span {
color: var(--home-primary-text-color);
}
}
}

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

@ -6,7 +6,6 @@ $landingBreakpointXL: 1199px;
@import './_main';
@import './_hero';
@import './_users';
@import './_getstarted';
@import './_themes';
@import './_blocks';
@import './_templates';

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

@ -1,12 +1,12 @@
.landing {
background-color: var(--home-bg);
scroll-behavior: smooth;
padding-top: 4rem;
background-color: var(--ground-background);
.box {
border: 1px solid var(--home-border-color);
border: 1px solid var(--border-color);
border-radius: 10px;
background-color: var(--home-box-bg);
background-color: var(--card-background);
position: relative;
z-index: 0;
@ -59,32 +59,32 @@
transition: background-color .2s, border-color .2s;
display: inline-flex;
align-items: center;
color: var(--home-linkbox-text-color);
color: var(--text-color);
padding: 0.5rem 1rem;
border: var(--home-linkbox-border);
background-color: var(--home-linkbox-bg);
border: 1px solid var(--border-color);
background-color: var(--card-background);
border-radius: 10px;
cursor: pointer;
@include focus-visible();
&:hover {
background: var(--home-linkbox-hover-bg);
background: var(--hover-background);
}
&.active {
background: var(--home-highlight-color);
color: var(--home-highlight-fore-color);
background: var(--primary-color);
color: var(--primary-inverse-color);
&:hover {
background: var(--home-highlight-darker-color);
background: var(--primary-hover-color);
}
}
}
.section-header {
font-size: 2rem;
color: var(--home-primary-text-color);
color: var(--text-color);
font-weight: 700;
text-align: center;
padding: 0 2rem;
@ -92,7 +92,7 @@
.section-detail {
text-align: center;
color: var(--home-secondary-text-color);
color: var(--text-secondary-color);
font-weight: 500;
font-size: 1.25rem;
margin: 1.5rem 0 0 0;
@ -100,7 +100,7 @@
}
.section-divider {
border: 1px solid var(--home-border-color);
border: 1px solid var(--border-color);
height: 1px;
border-bottom: 0 none;
overflow: hidden;
@ -112,11 +112,11 @@
}
.text-secondary {
color: var(--home-secondary-text-color);
color: var(--text-secondary-color);
}
.hover\:surface-hover:hover {
background-color: var(--surface-hover);
background-color: var(--hover-background);
}
.landing-footer-container {
@ -127,14 +127,13 @@
.animated-text {
position: relative;
color: var(--home-text-color);
padding: 0.25rem 0.5rem;
border-radius: var(--border-radius);
border-radius: var(--rounded-base);
display: inline-block;
width: 14.45rem;
&::before {
border-radius: var(--border-radius);
border-radius: var(--rounded-base);
animation: color-animation 2s linear infinite;
background-size: auto auto;
background-clip: border-box;
@ -144,7 +143,7 @@
height: 1.5rem;
position: absolute;
z-index: 0;
background-image: linear-gradient(-225deg, var(--blue-400) 30%, var(--cyan-400) 60%, var(--purple-400) 80%);
background-image: linear-gradient(-225deg, var(--p-blue-400) 30%, var(--p-cyan-400) 60%, var(--p-purple-400) 80%);
filter: blur(24px);
opacity: 0.6;
}
@ -152,13 +151,12 @@
> span {
position: relative;
z-index: 3;
background-image: linear-gradient(-225deg, var(--blue-400) 30%, var(--cyan-400) 60%, var(--purple-400) 80%);
background-image: linear-gradient(-225deg, var(--p-blue-400) 30%, var(--p-cyan-400) 60%, var(--p-purple-400) 80%);
animation: color-animation 2s linear infinite;
background-size: auto auto;
background-clip: border-box;
background-size: 200% auto;
background-clip: text;
text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

19
assets/styles/layout/landing/_templates.scss
View File

@ -1,6 +1,5 @@
.landing-templates {
overflow: hidden;
background: var(--home-templates-bg);
.templates {
transform: rotateX(55deg) rotateY(0deg) rotateZ(-45deg);
@ -14,8 +13,8 @@
border-radius: 6px;
overflow: hidden;
box-shadow: var(--home-templates-block-shadow);
border-left: var(--home-templates-block-border-left);
border-bottom: var(--home-templates-block-border-bottom);
border-left: 5px solid var(--border-color);
border-bottom: 7px solid var(--border-color);
position: relative;
z-index: 1;
transition: 1.5s;
@ -80,17 +79,17 @@
opacity: 0;
visibility: hidden;
transform: scale(0.4);
background: var(--home-templates-btn-bg);
background: var(--card-background);
border-radius: 30px;
padding: 8px 10px;
color: var(--home-templates-btn-text-color);
color: var(--text-color);
font-size: 14px;
text-decoration: none;
box-shadow: var(--home-templates-btn-shadow);
border-top: var(--home-templates-btn-border-top);
border-right: var(--home-templates-btn-border-right);
border-left: var(--home-templates-btn-border-left);
border-bottom: var(--home-templates-btn-border-bottom);
box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.25);
border-top: 1px solid var(--border-color);
border-right: 1px solid var(--border-color);
border-left: 3px solid var(--border-color);
border-bottom: 4px solid var(--border-color);
}
&.border-none {

5
assets/styles/layout/landing/_users.scss
View File

@ -1,10 +1,11 @@
.landing-users {
.fade-right {
background: linear-gradient(to left, var(--home-bg), transparent);
background: linear-gradient(to left, var(--ground-background), transparent);
}
.fade-left {
background: linear-gradient(to right, var(--home-bg), transparent);
background: linear-gradient(to right, var(--ground-background), transparent);
}
.section-detail {
max-width: 1250px !important;
margin-left: auto !important;

63
assets/styles/layout/variables/landing/_dark.scss
View File

@ -1,53 +1,18 @@
.landing.layout-dark {
--home-highlight-color:#34d399;
--home-highlight-darker-color:#6ee7b7;
--home-highlight-fore-color:#020617;
--home-bg:#09090b;
--home-border-color:#27272a;
--home-primary-text-color:#ffffff;
--home-secondary-text-color:#a1a1aa;
:root[class="p-dark"] {
--home-box-ring-color: color-mix(in srgb, var(--primary-color), transparent 70%);
--home-card-shadow:0px 50px 100px rgba(0, 0, 0, 0.25);
--home-box-bg:#18181b;
--home-linkbox-bg:rgba(255, 255, 255, .05);
--home-linkbox-border:1px solid rgba(255, 255, 255, .1);
--home-linkbox-text-color:#ffffff;
--home-linkbox-hover-bg:rgba(255, 255, 255, .1);
--home-blocks-bg:transparent;
--home-blocks-block-bg:#09090b;
--home-blocks-block-shadow:0px 5px 10px 0px rgba(0, 0, 0, 0.25) , 0px 4px 25px rgba(0, 0, 0, 0.25);
--home-blocks-border-left:5px solid #27272a;
--home-blocks-border-bottom:7px solid #27272a;
--home-blocks-border:1px solid #27272a;
--home-blocks-sidebar-bg:#18181b;
--home-blocks-list-bg:#27272a;
--home-blocks-main-bg:#09090b;
--home-blocks-main-border:1px solid #27272a;
--home-blocks-item-bg:#18181b;
--home-blocks-image-bg:#27272a;
--home-blocks-text-color:#52525b;
--home-blocks-active-shadow:0px 30px 50px 0px rgba(0, 0, 0, 0.25);
--home-blocks-active-border-top:1px solid #27272a;
--home-blocks-active-border-right:1px solid #27272a;
--home-blocks-active-border-bottom:6px solid #27272a;
--home-blocks-active-border-left:4px solid #27272a;
--home-blocks-animation-shadow:0px 30px 50px 20px rgba(0, 0, 0, 0.25);
--home-blocks-tablebar-bg:#3f3f46;
--home-blocks-bar-bg:#3f3f46;
--home-blocks-bar-button-bg:#3f3f46;
--home-blocks-circle-bg:#27272a;
--home-templates-bg:transparent;
--home-templates-block-shadow:0px 5px 10px 0px rgba(0, 0, 0, 0.25);
--home-templates-block-border-left:5px solid #27272a;
--home-templates-block-border-bottom:7px solid #27272a;
--home-templates-line:rgba(255,255,255,.1);
--home-templates-block-hover-bg:rgba(255,255,255,.1);
--home-templates-btn-bg:#18181b;
--home-templates-btn-text-color:#ffffff;
--home-templates-btn-shadow:0px 10px 15px 0px rgba(0, 0, 0, 0.25);
--home-templates-btn-border-top:1px solid #27272a;
--home-templates-btn-border-right:1px solid #27272a;
--home-templates-btn-border-bottom:4px solid #27272a;
--home-templates-btn-border-left:3px solid #27272a;
--home-features-card-shadow: none;
--home-box-ring-color: rgba(52, 211, 153, .3);
--home-templates-block-hover-bg:var(--p-mask-background);
--home-blocks-block-shadow:0px 5px 10px 0px rgba(0, 0, 0, 0.25) , 0px 4px 25px rgba(0, 0, 0, 0.25);
--home-blocks-sidebar-bg:var(--p-surface-900);
--home-blocks-list-bg:var(--p-surface-800);
--home-blocks-main-bg:var(--p-surface-950);
--home-blocks-item-bg:var(--p-surface-900);
--home-blocks-image-bg:var(--p-surface-800);
--home-blocks-text-color:var(--p-surface-600);
--home-blocks-tablebar-bg:var(--p-surface-700);
--home-blocks-bar-bg:var(--p-surface-700);
--home-blocks-bar-button-bg:var(--p-surface-700);
--home-blocks-circle-bg:var(--p-surface-800);
}

63
assets/styles/layout/variables/landing/_light.scss
View File

@ -1,53 +1,18 @@
.landing.layout-light {
--home-highlight-color:#10b981;
--home-highlight-darker-color:#059669;
--home-highlight-fore-color:#ffffff;
--home-bg:#f8fafc;
--home-border-color:#e2e8f0;
--home-primary-text-color:#334155;
--home-secondary-text-color:#64748b;
:root {
--home-box-ring-color: var(--p-primary-200);
--home-card-shadow:0px 7px 15px 0px rgba(0, 0, 0, 0.02), 0px 28px 28px 0px rgba(0, 0, 0, 0.02), 0px 63px 38px 0px rgba(0, 0, 0, 0.01);
--home-box-bg:#ffffff;
--home-linkbox-bg:#ffffff;
--home-linkbox-border:1px solid #e2e8f0;
--home-linkbox-text-color:#334155;
--home-linkbox-hover-bg:#f1f5f9;
--home-blocks-bg:transparent;
--home-blocks-block-bg:#ffffff;
--home-blocks-block-shadow:-10px 4px 10px 0px rgba(0, 0, 0, .1), -10px 4px 25px rgba(0, 0, 0, .1);
--home-blocks-border-left:5px solid #e2e8f0;
--home-blocks-border-bottom:7px solid #e2e8f0;
--home-blocks-border:1px solid #e2e8f0;
--home-blocks-sidebar-bg:#f1f5f9;
--home-blocks-list-bg:#f8fafc;
--home-blocks-main-bg:#ffffff;
--home-blocks-main-border:1px solid #e2e8f0;
--home-blocks-item-bg:#f1f5f9;
--home-blocks-image-bg:#e2e8f0;
--home-blocks-text-color:#cbd5e1;
--home-blocks-active-shadow:0px 30px 50px 0px rgba(0, 0, 0, .1);
--home-blocks-active-border-top:1px solid rgba(0,0,0,.07);
--home-blocks-active-border-right:1px solid rgba(0,0,0,.07);
--home-blocks-active-border-bottom:4px solid rgba(0,0,0,.07);
--home-blocks-active-border-left:4px solid rgba(0,0,0,.07);
--home-blocks-animation-shadow:0px 30px 50px 10px rgba(0, 0, 0, .2);
--home-blocks-tablebar-bg:#cbd5e1;
--home-blocks-bar-bg:#cbd5e1;
--home-blocks-bar-button-bg:#ffffff;
--home-blocks-circle-bg:#cbd5e1;
--home-templates-bg:transparent;
--home-templates-block-shadow:0px 5px 10px 0px rgba(0,0,0,.1);
--home-templates-block-border-left:5px solid #d1d5db;
--home-templates-block-border-bottom:7px solid #d1d5db;
--home-templates-line:rgba(0,0,0,.1);
--home-templates-block-hover-bg:rgba(0, 0, 0, 0.2);
--home-templates-btn-bg:rgba(0, 0, 0, 0.5);
--home-templates-btn-text-color:#ffffff;
--home-templates-btn-shadow:0px 10px 15px 0px rgba(0, 0, 0, 0.5);
--home-templates-btn-border-top:1px solid rgba(0,0,0,.1);
--home-templates-btn-border-right:1px solid rgba(0,0,0,.1);
--home-templates-btn-border-bottom:4px solid rgba(0,0,0,.1);
--home-templates-btn-border-left:3px solid rgba(0,0,0,.1);
--home-features-card-shadow: 0px 7px 15px 0px rgba(0, 0, 0, 0.02), 0px 28px 28px 0px rgba(0, 0, 0, 0.02), 0px 63px 38px 0px rgba(0, 0, 0, 0.01);
--home-box-ring-color: var(--primary-200);
--home-templates-block-hover-bg:var(--p-mask-background);
--home-blocks-block-shadow:-10px 4px 10px 0px rgba(0, 0, 0, .1), -10px 4px 25px rgba(0, 0, 0, .1);
--home-blocks-sidebar-bg:var(--p-surface-100);
--home-blocks-list-bg:var(--p-surface-50);
--home-blocks-main-bg:var(--p-surface-0);
--home-blocks-item-bg:var(--p-surface-100);
--home-blocks-image-bg:var(--p-surface-200);
--home-blocks-text-color:var(--p-surface-300);
--home-blocks-tablebar-bg:var(--p-surface-300);
--home-blocks-bar-bg:var(--p-surface-300);
--home-blocks-bar-button-bg:var(--p-surface-0);
--home-blocks-circle-bg:var(--p-surface-300);
}

1
assets/styles/layout/variables/main/_dark.scss
View File

@ -2,6 +2,7 @@
--primary-text-color:var(--p-primary-400);
--primary-color: var(--p-primary-color);
--primary-inverse-color:var(--p-primary-inverse-color);
--primary-hover-color: var(--p-primary-hover-color);
--text-color: var(--p-surface-0);
--text-secondary-color: var(--p-surface-400);
--glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/pattern.png), radial-gradient(50% 50% at center -25px, var(--p-primary-color) 0%, #000000 100%);

1
assets/styles/layout/variables/main/_light.scss
View File

@ -2,6 +2,7 @@
--primary-text-color:var(--p-primary-600);
--primary-color: var(--p-primary-color);
--primary-inverse-color:var(--p-primary-inverse-color);
--primary-hover-color: var(--p-primary-hover-color);
--text-color: var(--p-surface-700);
--text-secondary-color: var(--p-surface-500);
--glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/pattern.png);

7
layouts/default.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="layout-wrapper" :class="containerClass" :data-p-theme="$appState.theme">
<div :class="containerClass" :data-p-theme="$appState.theme">
<AppNews />
<AppTopBar @menubutton-click="onMenuButtonClick" />
<div :class="['layout-mask', { 'layout-mask-active': sidebarActive }]" @click="onMaskClick"></div>
@ -71,11 +71,10 @@ export default {
computed: {
containerClass() {
return [
'layout-wrapper',
{
'layout-news-active': this.$appState.newsActive,
'p-ripple-disabled': this.$appState.ripple === false,
'layout-dark': this.$appState.darkTheme,
'layout-light': !this.$appState.darkTheme
'p-ripple-disabled': this.$appState.ripple === false
}
];
}

6
pages/index.vue
View File

@ -1,5 +1,5 @@
<template>
<div :class="landingClass">
<div :class="containerClass">
<AppNews />
<AppTopBar :showMenuButton="false" />
<HeroSection />
@ -47,8 +47,8 @@ export default {
}
},
computed: {
landingClass() {
return ['landing', { 'layout-dark': this.$appState?.darkTheme, 'layout-light': !this.$appState?.darkTheme, 'layout-news-active': this.$appState?.newsActive }];
containerClass() {
return ['landing', { 'layout-news-active': this.$appState?.newsActive, 'p-ripple-disabled': this.$appState.ripple === false }];
}
},
components: {