diff --git a/src/app/app.menu.component.ts b/src/app/app.menu.component.ts index 8c9f0ff..18f9725 100644 --- a/src/app/app.menu.component.ts +++ b/src/app/app.menu.component.ts @@ -71,6 +71,7 @@ export class AppMenuComponent implements OnInit { items: [ {label: 'Crud', icon: 'pi pi-fw pi-user-edit', routerLink: ['/pages/crud']}, {label: 'Timeline', icon: 'pi pi-fw pi-calendar', routerLink: ['/pages/timeline']}, + {label: 'Landing', icon: 'pi pi-fw pi-globe', routerLink: ['/landing']}, {label: 'Empty', icon: 'pi pi-fw pi-circle', routerLink: ['/pages/empty']} ] }, diff --git a/src/app/components/landing/landing.component.html b/src/app/components/landing/landing.component.html index 434134f..30b73d5 100644 --- a/src/app/components/landing/landing.component.html +++ b/src/app/components/landing/landing.component.html @@ -1,12 +1,12 @@
- Sakai LogoSAKAI + Sakai LogoSAKAI - -
+
-

Eu sem integer eget magna fermentum

-

Sed blandit libero volutpat sed cras. Fames ac turpis egestas integer. Placerat in egestas erat...

- +

Eu sem integereget magna fermentum

+

Sed blandit libero volutpat sed cras. Fames ac turpis egestas integer. Placerat in egestas erat...

+
- +
-

Marvelous Features

Placerat in egestas erat...
-
-
-
-
+
+
+
+
Easy to Use
@@ -65,10 +64,10 @@
-
-
-
-
+
+
+
+
Fresh Design
@@ -77,10 +76,10 @@
-
-
-
-
+
+
+
+
Well Documented
@@ -89,10 +88,10 @@
-
-
-
-
+
+
+
+
Responsive Layout
@@ -101,87 +100,91 @@
-
-
-
- +
+
+
+
+ +
+
Clean Code
+ Condimentum lacinia quis vel eros.
-
Clean Code
- Condimentum lacinia quis vel eros.
-
-
-
- +
+
+
+
+ +
+
Dark Mode
+ Convallis tellus id interdum velit laoreet.
-
Dark Mode
- Convallis tellus id interdum velit laoreet.
-
-
-
- +
+
+
+
+ +
+
Ready to Use
+ Mauris sit amet massa vitae.
-
Ready to Use
- Mauris sit amet massa vitae.
-
-
-
- +
+
+
+
+ +
+
Modern Practices
+ Elementum nibh tellus molestie nunc non.
-
Modern Practices
- Elementum nibh tellus molestie nunc non.
-
-
-
- -
-
Privacy
- Neque egestas congue quisque. -
-
- -
-
-
-

Joséphine Miller

- Peak Interactive -
-
-

“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.”

-
-
- +
+
+
+
+ +
+
Privacy
+ Neque egestas congue quisque.
+
+
+

Joséphine Miller

+ Peak Interactive +

“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.”

+ + +
+
-
+

Powerful Everywhere

Amet consectetur adipiscing elit...
-
-
+
+
mockup mobile
-
-
+
+

Congue Quisque Egestas

@@ -189,22 +192,22 @@
-
+
-
+

Congue Quisque Egestas

- 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. + 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.
-
+
mockup
-
+

Matchless Pricing

Amet consectetur adipiscing elit... @@ -212,8 +215,8 @@
-
-
+
+

Free

@@ -225,26 +228,26 @@
  • - Responsive Layout + Responsive Layout
  • - Unlimited Push Messages + Unlimited Push Messages
  • - 50 Support Ticket + 50 Support Ticket
  • - Free Shipping + Free Shipping
-
-
+
+

Startup

@@ -256,26 +259,26 @@
  • - Responsive Layout + Responsive Layout
  • - Unlimited Push Messages + Unlimited Push Messages
  • - 50 Support Ticket + 50 Support Ticket
  • - Free Shipping + Free Shipping
-
-
+
+

Free

@@ -287,19 +290,19 @@
  • - Responsive Layout + Responsive Layout
  • - Unlimited Push Messages + Unlimited Push Messages
  • - 50 Support Ticket + 50 Support Ticket
  • - Free Shipping + Free Shipping
@@ -309,45 +312,44 @@
-
- footer sections + footer sections

SAKAI

-
+
-

Company

- About Us - News - Investor Relations - Careers - Media Kit +

Company

+ About Us + News + Investor Relations + Careers + Media Kit
-
-

Resources

- Get Started - Learn - Case Studies +
+

Resources

+ Get Started + Learn + Case Studies
-
-

Community

- Discord - Events - FAQ - Blog +
+

Community

+ Discord + Events + FAQ + Blog
-
-

Legal

- Brand Policy - Privacy Policy - Terms of Service +
+

Legal

+ Brand Policy + Privacy Policy + Terms of Service
diff --git a/src/app/components/landing/landing.component.scss b/src/app/components/landing/landing.component.scss deleted file mode 100644 index ed84233..0000000 --- a/src/app/components/landing/landing.component.scss +++ /dev/null @@ -1,53 +0,0 @@ -#hero-content{ - 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%, #EEEFAF 0%, #C3E3FA 100%); - -webkit-clip-path: ellipse(150% 87% at 93% 13%); - clip-path: ellipse(150% 87% at 93% 13%); - min-height: 630px; - -} - -#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%); -} - -.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){ - #hero-img{ - top:30% !important; - right:0 !important; - } -} - -@media (min-width: 992px) { - #hero-img{ - top:7% !important; - right:7% !important; - } -} diff --git a/src/app/components/landing/landing.component.ts b/src/app/components/landing/landing.component.ts index 4bcb679..778185d 100644 --- a/src/app/components/landing/landing.component.ts +++ b/src/app/components/landing/landing.component.ts @@ -2,7 +2,21 @@ import { Component, OnInit, OnDestroy } from '@angular/core'; @Component({ selector: 'app-landing', templateUrl: './landing.component.html', - styleUrls: ['./landing.component.scss'] + styles: [` + #hero{ + 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%, #EEEFAF 0%, #C3E3FA 100%); + height:700px; + overflow:hidden; + } + + @media (min-width: 768px) { + #hero{ + -webkit-clip-path: ellipse(150% 87% at 93% 13%); + clip-path: ellipse(150% 87% at 93% 13%); + height: 430px; + } + } + `] }) export class LandingComponent implements OnInit { @@ -11,14 +25,12 @@ export class LandingComponent implements OnInit { constructor() { } ngOnInit(): void { - let themeElement = document.getElementById('theme-css'); this.themeElement = document.getElementById('theme-css'); - console.log(this.themeElement); - themeElement.setAttribute('href','assets/theme/saga-blue/theme.css'); + this.themeElement.setAttribute('href','assets/theme/saga-blue/theme.css'); } ngOnDestroy(): void { - + this.themeElement.setAttribute('href', 'assets/theme/lara-light-indigo/theme.css'); } }