diff --git a/frontend/src/app/components/about/about-sponsors.component.html b/frontend/src/app/components/about/about-sponsors.component.html new file mode 100644 index 000000000..f76d74f8b --- /dev/null +++ b/frontend/src/app/components/about/about-sponsors.component.html @@ -0,0 +1,16 @@ +
+
+

If you're an individual...

+ Become a Community Sponsor + + + +
+
+

If you're a business...

+ Become an Enterprise Sponsor + + + +
+
\ No newline at end of file diff --git a/frontend/src/app/components/about/about-sponsors.component.scss b/frontend/src/app/components/about/about-sponsors.component.scss new file mode 100644 index 000000000..f3e675fd4 --- /dev/null +++ b/frontend/src/app/components/about/about-sponsors.component.scss @@ -0,0 +1,45 @@ +#become-sponsor-container { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: center; + align-items: center; + gap: 20px; + margin: 68px auto; +} + +.become-sponsor { + background-color: #1d1f31; + border-radius: 16px; + padding: 12px 20px; + width: 400px; + padding: 40px 20px; +} + +.become-sponsor a { + margin-top: 10px; +} + +#become-sponsor-container .btn { + margin-bottom: 24px; +} + +#become-sponsor-container .ng-fa-icon { + color: #2ecc71; + margin-right: 5px; +} + +#become-sponsor-container .sponsor-feature { + text-align: left; + width: 250px; + margin: 12px auto; + white-space: nowrap; +} + +@media (max-width: 992px) { + + #become-sponsor-container { + flex-wrap: wrap; + } + +} diff --git a/frontend/src/app/components/about/about-sponsors.component.ts b/frontend/src/app/components/about/about-sponsors.component.ts new file mode 100644 index 000000000..31863cd8f --- /dev/null +++ b/frontend/src/app/components/about/about-sponsors.component.ts @@ -0,0 +1,22 @@ +import { Component } from '@angular/core'; +import { EnterpriseService } from '../../services/enterprise.service'; + +@Component({ + selector: 'app-about-sponsors', + templateUrl: './about-sponsors.component.html', + styleUrls: ['./about-sponsors.component.scss'], +}) +export class AboutSponsorsComponent { + constructor(private enterpriseService: EnterpriseService) { + } + + onSponsorClick(e): boolean { + this.enterpriseService.goal(5); + return true; + } + + onEnterpriseClick(e): boolean { + this.enterpriseService.goal(6); + return true; + } +} diff --git a/frontend/src/app/components/about/about.component.html b/frontend/src/app/components/about/about.component.html index cb45e9f19..e3ad51116 100644 --- a/frontend/src/app/components/about/about.component.html +++ b/frontend/src/app/components/about/about.component.html @@ -33,22 +33,7 @@ -
-
-

If you're an individual...

- Become a Community Sponsor - - - -
-
-

If you're a business...

- Become an Enterprise Sponsor - - - -
-
+
@@ -197,7 +182,7 @@
-
+

Whale Sponsors

diff --git a/frontend/src/app/components/about/about.component.scss b/frontend/src/app/components/about/about.component.scss index 94f6f11b5..f7aa0b965 100644 --- a/frontend/src/app/components/about/about.component.scss +++ b/frontend/src/app/components/about/about.component.scss @@ -246,49 +246,3 @@ width: 64px; height: 64px; } - -#become-sponsor-container { - display: flex; - flex-direction: row; - flex-wrap: nowrap; - justify-content: center; - align-items: center; - gap: 20px; - margin: 68px auto; -} - -.become-sponsor { - background-color: #1d1f31; - border-radius: 16px; - padding: 12px 20px; - width: 400px; - padding: 40px 20px; -} - -.become-sponsor a { - margin-top: 10px; -} - -#become-sponsor-container .btn { - margin-bottom: 24px; -} - -#become-sponsor-container .ng-fa-icon { - color: #2ecc71; - margin-right: 5px; -} - -#become-sponsor-container .sponsor-feature { - text-align: left; - width: 250px; - margin: 12px auto; - white-space: nowrap; -} - -@media (max-width: 992px) { - - #become-sponsor-container { - flex-wrap: wrap; - } - -} diff --git a/frontend/src/app/components/about/about.component.ts b/frontend/src/app/components/about/about.component.ts index 026076f16..3fea849a1 100644 --- a/frontend/src/app/components/about/about.component.ts +++ b/frontend/src/app/components/about/about.component.ts @@ -49,8 +49,13 @@ export class AboutComponent implements OnInit { this.websocketService.want(['blocks']); this.profiles$ = this.apiService.getAboutPageProfiles$().pipe( - tap(() => { - this.goToAnchor() + tap((profiles: any) => { + const scrollToSponsors = this.route.snapshot.fragment === 'community-sponsors'; + if (scrollToSponsors && !profiles?.whales?.length && !profiles?.chads?.length) { + return; + } else { + this.goToAnchor(scrollToSponsors) + } }), share(), ) @@ -85,11 +90,19 @@ export class AboutComponent implements OnInit { this.goToAnchor(); } - goToAnchor() { + goToAnchor(scrollToSponsor = false) { + if (!scrollToSponsor) { + return; + } setTimeout(() => { if (this.route.snapshot.fragment) { - if (this.document.getElementById(this.route.snapshot.fragment)) { - this.document.getElementById(this.route.snapshot.fragment).scrollIntoView({behavior: 'smooth'}); + const el = scrollToSponsor ? this.document.getElementById('community-sponsors-anchor') : this.document.getElementById(this.route.snapshot.fragment); + if (el) { + if (scrollToSponsor) { + el.scrollIntoView({behavior: 'smooth', block: 'center', inline: 'center'}); + } else { + el.scrollIntoView({behavior: 'smooth'}); + } } } }, 1); diff --git a/frontend/src/app/components/about/about.module.ts b/frontend/src/app/components/about/about.module.ts index 1eb471f14..7e8ed42d0 100644 --- a/frontend/src/app/components/about/about.module.ts +++ b/frontend/src/app/components/about/about.module.ts @@ -2,6 +2,7 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { Routes, RouterModule } from '@angular/router'; import { AboutComponent } from './about.component'; +import { AboutSponsorsComponent } from './about-sponsors.component'; import { SharedModule } from '../../shared/shared.module'; const routes: Routes = [ @@ -29,6 +30,10 @@ export class AboutRoutingModule { } ], declarations: [ AboutComponent, + AboutSponsorsComponent, + ], + exports: [ + AboutSponsorsComponent, ] }) export class AboutModule { }