diff --git a/src/main/webapp/app/home/home.component.html b/src/main/webapp/app/home/home.component.html index 80b9fdf..5a1c998 100644 --- a/src/main/webapp/app/home/home.component.html +++ b/src/main/webapp/app/home/home.component.html @@ -76,3 +76,276 @@

+ +
+
+ + +
+
+
+
+
+
+

We are a branding and design studio

+

+ We are a group of creatives and developers who design, build, and optimize brands and digital experiences. +

+
+ +
+
+
+
+
+ + + + +
+
+
+
+
+
+
+

Design

+

We start by creating a set of brand guidelines and standards

+
+
+
+

Develop

+

Our award winning development team creates personalized digital experiences

+
+
+
+

Deliver

+

Our products are created on time, and to your exact specifications

+
+
+
+
+ + + + +
+
+ +
+
diff --git a/src/main/webapp/app/home/home.component.scss b/src/main/webapp/app/home/home.component.scss index c731f12..dd30232 100644 --- a/src/main/webapp/app/home/home.component.scss +++ b/src/main/webapp/app/home/home.component.scss @@ -10,6 +10,201 @@ Main page styles background-size: contain; } +.bg-img-cover { + background-position: center; + background-size: cover; + background-repeat: no-repeat; +} + +.overlay { + position: relative; +} +.overlay:before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #000; + opacity: 0.5; +} + +.overlay-10:before { + opacity: 0.1; +} + +.overlay-20:before { + opacity: 0.2; +} + +.overlay-30:before { + opacity: 0.3; +} + +.overlay-40:before { + opacity: 0.4; +} + +.overlay-50:before { + opacity: 0.5; +} + +.overlay-60:before { + opacity: 0.6; +} + +.overlay-70:before { + opacity: 0.7; +} + +.overlay-80:before { + opacity: 0.8; +} + +.overlay-90:before { + opacity: 0.9; +} + +.fixed-top, +.page-header-ui.navbar-fixed .navbar { + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: 1030; +} + +.text-white-75, +.page-header-ui-dark .page-header-ui-text a { + color: rgba(255, 255, 255, 0.75) !important; +} +.page-header-ui { + position: relative; + padding-top: 8rem; + padding-bottom: 8rem; +} +.page-header-ui .page-header-ui-content .page-header-ui-title { + font-size: 2.5rem; +} +.page-header-ui .page-header-ui-content .page-header-ui-text { + font-size: 1.15rem; +} +.page-header-ui .page-header-ui-content .page-header-ui-text.small { + font-size: 0.9rem; +} + +.page-header-ui-dark { + color: #fff; + background-color: #212832; +} + +.svg-border-rounded svg { + position: absolute; + bottom: 0; + left: 0; + height: 1rem; + width: 100%; +} +@media (min-width: 576px) { + .svg-border-rounded svg { + height: 1.5rem; + } +} +@media (min-width: 768px) { + .svg-border-rounded svg { + height: 2rem; + } +} +@media (min-width: 992px) { + .svg-border-rounded svg { + height: 2.5rem; + } +} +@media (min-width: 1200px) { + .svg-border-rounded svg { + height: 3rem; + } +} + +/** + Cards +**/ +.lift { + box-shadow: 0 0.15rem 1.75rem 0 rgba(33, 40, 50, 0.15); + transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out; +} +.lift:hover { + transform: translateY(-0.3333333333rem); + box-shadow: 0 0.5rem 2rem 0 rgba(33, 40, 50, 0.25); +} +.lift:active { + transform: none; + box-shadow: 0 0.15rem 1.75rem 0 rgba(33, 40, 50, 0.15); +} + +.lift-sm { + box-shadow: 0 0.125rem 0.25rem 0 rgba(33, 40, 50, 0.2); +} +.lift-sm:hover { + transform: translateY(-0.1666666667rem); + box-shadow: 0 0.25rem 1rem 0 rgba(33, 40, 50, 0.25); +} +.lift-sm:active { + transform: none; + box-shadow: 0 0.125rem 0.25rem 0 rgba(33, 40, 50, 0.2); +} + +.card.lift { + text-decoration: none; + color: inherit; +} + +.card-flag { + position: absolute; + font-size: 0.7rem; + padding: 0.3rem 0.5rem; + line-height: 1; +} + +.card-flag-dark { + background-color: rgba(33, 40, 50, 0.7); + color: #fff; +} + +.card-flag-light { + background-color: rgba(255, 255, 255, 0.7); + color: #69707a; +} + +.card-flag-lg { + font-size: 0.9rem; + padding: 0.5rem 0.65rem; +} + +.card-flag-top-right { + border-top-left-radius: 0.25rem; + border-bottom-left-radius: 0.25rem; + top: 0.5rem; + right: 0; +} + +.card-flag-top-left { + border-top-right-radius: 0.25rem; + border-bottom-right-radius: 0.25rem; + top: 0.5rem; + left: 0; +} + +.border-cyan { + border-color: #00cfd5 !important; +} + +.py-10 { + padding-top: 6rem !important; + padding-bottom: 6rem !important; +} + /* wait autoprefixer update to allow simple generation of high pixel density media query */ @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), @@ -21,3 +216,49 @@ Main page styles background-size: contain; } } + +.icon-stack { + display: inline-flex; + justify-content: center; + align-items: center; + border-radius: 100%; + height: 2.5rem; + width: 2.5rem; + font-size: 1rem; + background-color: #f2f6fc; + flex-shrink: 0; +} +.icon-stack svg { + height: 1rem; + width: 1rem; +} + +.icon-stack-sm { + height: 2rem; + width: 2rem; +} + +.icon-stack-lg { + height: 4rem; + width: 4rem; + font-size: 1.5rem; +} +.icon-stack-lg svg { + height: 1.5rem; + width: 1.5rem; +} + +.icon-stack-xl { + height: 5rem; + width: 5rem; + font-size: 1.75rem; +} +.icon-stack-xl svg { + height: 1.75rem; + width: 1.75rem; +} + +.bg-gradient-primary-to-secondary { + background-color: #1c44b2 !important; + background-image: linear-gradient(135deg, #1c44b2 0%, #00b88d 100%) !important; +} diff --git a/src/main/webapp/app/home/home.component.ts b/src/main/webapp/app/home/home.component.ts index 9010227..75056d2 100644 --- a/src/main/webapp/app/home/home.component.ts +++ b/src/main/webapp/app/home/home.component.ts @@ -2,6 +2,7 @@ import { Component, OnInit, OnDestroy } from '@angular/core'; import { Router } from '@angular/router'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; +import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; import { AccountService } from 'app/core/auth/account.service'; import { Account } from 'app/core/auth/account.model'; @@ -16,7 +17,7 @@ export class HomeComponent implements OnInit, OnDestroy { private readonly destroy$ = new Subject(); - constructor(private accountService: AccountService, private router: Router) {} + constructor(private accountService: AccountService, private router: Router, protected modalService: NgbModal) {} ngOnInit(): void { this.accountService diff --git a/src/main/webapp/app/home/home.module.ts b/src/main/webapp/app/home/home.module.ts index 758f5c4..18179b9 100644 --- a/src/main/webapp/app/home/home.module.ts +++ b/src/main/webapp/app/home/home.module.ts @@ -4,9 +4,10 @@ import { RouterModule } from '@angular/router'; import { SharedModule } from 'app/shared/shared.module'; import { HOME_ROUTE } from './home.route'; import { HomeComponent } from './home.component'; +import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; @NgModule({ - imports: [SharedModule, RouterModule.forChild([HOME_ROUTE])], + imports: [SharedModule, RouterModule.forChild([HOME_ROUTE]), FontAwesomeModule], declarations: [HomeComponent], }) export class HomeModule {} diff --git a/src/main/webapp/app/layouts/footer/footer.component.html b/src/main/webapp/app/layouts/footer/footer.component.html index 30aca31..9709bf7 100644 --- a/src/main/webapp/app/layouts/footer/footer.component.html +++ b/src/main/webapp/app/layouts/footer/footer.component.html @@ -1,3 +1,7 @@ diff --git a/src/main/webapp/content/img_datasurvey/banner-home.jpg b/src/main/webapp/content/img_datasurvey/banner-home.jpg new file mode 100644 index 0000000..423721a Binary files /dev/null and b/src/main/webapp/content/img_datasurvey/banner-home.jpg differ