f.spilla/nx-primeng-sakai-v17
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update cards

Browse Source
This commit is contained in:
Çetin 2022-01-07 15:42:18 +03:00
parent e20ce76b28
commit 9d3fbd117e
4 changed files with 65 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/components/charts/charts.component.ts
View File

@ -52,7 +52,7 @@ export class ChartsComponent implements OnInit {
plugins: {
legend: {
labels: {
fontColor: '#A0A7B5'
fontColor: '#FFFFFF'
}
}
},

62
src/app/components/landing/landing.component.html
View File

@ -1,5 +1,5 @@
<div class="surface-card">
<div class="py-5 px-4 mx-0 md:mx-8 md:px-8 flex align-items-center justify-content-between relative lg:static">
<div class="py-4 px-4 mx-0 md:mx-8 md:px-8 flex align-items-center justify-content-between relative lg:static">
<a class="flex align-items-center">
<img src="assets/layout/images/logo-blue.svg" alt="Sakai Logo" height="50" class="mr-0 lg:mr-2"><span class="text-gray-900 text-2xl line-height-3 mr-8">SAKAI</span>
</a>
@ -54,42 +54,50 @@
</div>
<div class="col-12 md:col-6 lg:col-4 p-0 md:pr-5 md:pb-5">
<div class="shadow-1 p-3 border-round">
<div class="flex align-items-center justify-content-center bg-yellow-200 border-round" style="width:3.5rem;height:3.5rem">
<i class="pi pi-fw pi-users text-2xl text-yellow-700"></i>
<div class="box-wrapper border-10 gradient-yellow">
<div class="p-3 border-10 surface-card">
<div class="flex align-items-center justify-content-center bg-yellow-200 border-round" style="width:3.5rem;height:3.5rem">
<i class="pi pi-fw pi-users text-2xl text-yellow-700"></i>
</div>
<h5 class="line-height-2">Easy to Use</h5>
<span class="line-height-1 gray-600">Posuere morbi leo urna molestie.</span>
</div>
<h5 class="line-height-2">Easy to Use</h5>
<span class="line-height-1 gray-600">Posuere morbi leo urna molestie.</span>
</div>
</div>
<div class="col-12 md:col-6 lg:col-4 p-0 md:pr-5 md:pb-5">
<div class="shadow-1 p-3 border-round">
<div class="flex align-items-center justify-content-center bg-cyan-200 border-round" style="width:3.5rem;height:3.5rem">
<i class="pi pi-fw pi-palette text-2xl text-cyan-700"></i>
<div class="box-wrapper border-10 gradient-blue">
<div class="p-3 border-10 surface-card">
<div class="flex align-items-center justify-content-center bg-cyan-200 border-round" style="width:3.5rem;height:3.5rem">
<i class="pi pi-fw pi-palette text-2xl text-cyan-700"></i>
</div>
<h5 class="line-height-2 text-gray-900">Fresh Design</h5>
<span class="line-height-1 text-gray-600">Semper risus in hendrerit.</span>
</div>
<h5 class="line-height-1 text-gray-900">Fresh Design</h5>
<span class="line-height-1 text-gray-600">Semper risus in hendrerit.</span>
</div>
</div>
<div class="col-12 md:col-6 lg:col-4 p-0 md:pb-5">
<div class="shadow-1 p-3 border-round bg-1">
<div class="flex align-items-center justify-content-center bg-indigo-200 border-round" style="width:3.5rem;height:3.5rem">
<i class="pi pi-fw pi-map text-2xl text-indigo-700"></i>
<div class="box-wrapper border-10 gradient-purple">
<div class="p-3 border-10 surface-card">
<div class="flex align-items-center justify-content-center bg-indigo-200 border-round" style="width:3.5rem;height:3.5rem">
<i class="pi pi-fw pi-map text-2xl text-indigo-700"></i>
</div>
<h5 class="line-height-2 text-gray-900">Well Documented</h5>
<span class="line-height-1 text-gray-600">Non arcu risus quis varius quam quisque.</span>
</div>
<h5 class="line-height-1 text-gray-900">Well Documented</h5>
<span class="line-height-1 text-gray-600">Non arcu risus quis varius quam quisque.</span>
</div>
</div>
<div class="col-12 md:col-6 lg:col-4 p-0 md:pr-5 md:pb-5">
<div class="shadow-1 p-3 border-round">
<div class="flex align-items-center justify-content-center bg-bluegray-200 border-round" style="width:3.5rem;height:3.5rem">
<i class="pi pi-fw pi-id-card text-2xl text-bluegray-700"></i>
<div class="box-wrapper border-10 gradient-yellow-2">
<div class="p-3 border-10 surface-card">
<div class="flex align-items-center justify-content-center bg-bluegray-200 border-round" style="width:3.5rem;height:3.5rem">
<i class="pi pi-fw pi-id-card text-2xl text-bluegray-700"></i>
</div>
<h5 class="line-height-2 text-gray-900">Responsive Layout</h5>
<span class="line-height-1 text-gray-600">Nulla malesuada pellentesque elit.</span>
</div>
<h5 class="line-height-1 text-gray-900">Responsive Layout</h5>
<span class="line-height-1 text-gray-600">Nulla malesuada pellentesque elit.</span>
</div>
</div>
@ -167,9 +175,9 @@
<span class="text-gray-600 text-2xl">Amet consectetur adipiscing elit...</span>
</div>
<div class="grid mt-8 pb-8 justify-content-evenly">
<div class="flex justify-content-center col-12 sm:col-6 xl:col-4 border-round bg-purple-100 p-0">
<img src="assets/layout/images/mockup.png" alt="mockup mobile">
<div class="grid mt-8 pb-8 justify-content-between">
<div class="flex justify-content-center col-12 sm:col-6 border-round bg-purple-100 p-0">
<img src="assets/layout/images/mockup.png" class="w-11" alt="mockup mobile">
</div>
<div class="col-12 md:col-4 my-auto flex flex-column align-items-end text-right">
@ -181,7 +189,7 @@
</div>
</div>
<div class="grid my-8 pt-8 justify-content-evenly">
<div class="grid my-8 pt-8 justify-content-between">
<div class="col-12 md:col-4 my-auto flex flex-column align-items-start">
<div class="flex align-items-center justify-content-center bg-yellow-200 border-round" style="width:3.5rem;height:3.5rem">
<i class="pi pi-fw pi-desktop text-2xl text-yellow-700"></i>
@ -190,8 +198,8 @@
<span class="line-height-4 text-gray-700 text-2xl">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 class="flex justify-content-end flex-order-1 sm:flex-order-2 col-12 sm:col-6 xl:col-4 border-round bg-yellow-100 p-0">
<img src="assets/layout/images/mockup-desktop.png" alt="mockup">
<div class="flex justify-content-end flex-order-1 sm:flex-order-2 col-12 sm:col-6 border-round bg-yellow-100 p-0">
<img src="assets/layout/images/mockup-desktop.png" class="w-11" alt="mockup">
</div>
</div>
</div>

29
src/app/components/landing/landing.component.scss
View File

@ -9,8 +9,33 @@
#testimonial-card{
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%);
}
a{
color:none;
.box-wrapper{
padding:2px;
}
.border-10{
border-radius:10px;
}
.gradient-yellow{
background: linear-gradient(180deg, rgba(253, 228, 165, 0.2),rgba(187, 199, 205, 0.2)), linear-gradient(90deg, rgba(253, 228, 165, 0.2),rgba(187, 199, 205, 0.2));
}
.gradient-yellow-2{
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));
}
.gradient-blue{
background: linear-gradient(180deg, rgba(145,226,237,0.2),rgba(251, 199, 145, 0.2)), linear-gradient(90deg, rgba(253, 228, 165, 0.2), rgba(172, 180, 223, 0.2));
}
.gradient-purple{
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));
}
.gradient-purple-2{
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, 158, 188, 0.2));
}
@media (min-width:769px){

3
src/app/components/landing/landing.component.ts
View File

@ -1,5 +1,4 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-landing',
templateUrl: './landing.component.html',
@ -10,6 +9,8 @@ export class LandingComponent implements OnInit {
constructor() { }
ngOnInit(): void {
let themeElement = document.getElementById('theme-css');
themeElement.setAttribute('href','assets/theme/saga-blue/theme.css');
}
}