From 9d3fbd117e59dae5cf27688e11e830724c45c859 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=87etin?=
 <69278826+cetincakiroglu@users.noreply.github.com>
Date: Fri, 7 Jan 2022 15:42:18 +0300
Subject: [PATCH] Update cards

---
 src/app/components/charts/charts.component.ts |  2 +-
 .../components/landing/landing.component.html | 62 +++++++++++--------
 .../components/landing/landing.component.scss | 29 ++++++++-
 .../components/landing/landing.component.ts   |  3 +-
 4 files changed, 65 insertions(+), 31 deletions(-)

diff --git a/src/app/components/charts/charts.component.ts b/src/app/components/charts/charts.component.ts
index 4554485..b246a45 100755
--- a/src/app/components/charts/charts.component.ts
+++ b/src/app/components/charts/charts.component.ts
@@ -52,7 +52,7 @@ export class ChartsComponent implements OnInit {
             plugins: {
                 legend: {
                     labels: {
-                        fontColor: '#A0A7B5'
+                        fontColor: '#FFFFFF'
                     }
                 }
             },
diff --git a/src/app/components/landing/landing.component.html b/src/app/components/landing/landing.component.html
index 9d4f96b..434134f 100644
--- a/src/app/components/landing/landing.component.html
+++ b/src/app/components/landing/landing.component.html
@@ -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>
diff --git a/src/app/components/landing/landing.component.scss b/src/app/components/landing/landing.component.scss
index 302bdd3..ed84233 100644
--- a/src/app/components/landing/landing.component.scss
+++ b/src/app/components/landing/landing.component.scss
@@ -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){
diff --git a/src/app/components/landing/landing.component.ts b/src/app/components/landing/landing.component.ts
index 02fd004..61fa5ca 100644
--- a/src/app/components/landing/landing.component.ts
+++ b/src/app/components/landing/landing.component.ts
@@ -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');
   }
 
 }