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..c24abc244 --- /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 + + + +
+
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..c9fddde91 --- /dev/null +++ b/frontend/src/app/components/about/about-sponsors.component.scss @@ -0,0 +1,44 @@ +#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; +} + +@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..98e7d4384 --- /dev/null +++ b/frontend/src/app/components/about/about-sponsors.component.ts @@ -0,0 +1,9 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-about-sponsors', + templateUrl: './about-sponsors.component.html', + styleUrls: ['./about-sponsors.component.scss'], +}) +export class AboutSponsorsComponent { +} diff --git a/frontend/src/app/components/about/about.component.html b/frontend/src/app/components/about/about.component.html index a4cc51f90..8ef59f29a 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 - - - -
-
+
diff --git a/frontend/src/app/components/about/about.component.scss b/frontend/src/app/components/about/about.component.scss index 54dc38a27..f7aa0b965 100644 --- a/frontend/src/app/components/about/about.component.scss +++ b/frontend/src/app/components/about/about.component.scss @@ -246,48 +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; -} - -@media (max-width: 992px) { - - #become-sponsor-container { - flex-wrap: wrap; - } - -} diff --git a/frontend/src/app/components/about/about.module.ts b/frontend/src/app/components/about/about.module.ts index 1eb471f14..58a8ed9be 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 = [ @@ -13,7 +14,7 @@ const routes: Routes = [ @NgModule({ imports: [ - RouterModule.forChild(routes) + RouterModule.forChild(routes), ], exports: [ RouterModule @@ -25,10 +26,14 @@ export class AboutRoutingModule { } imports: [ CommonModule, AboutRoutingModule, - SharedModule, + SharedModule ], declarations: [ AboutComponent, + AboutSponsorsComponent, + ], + exports: [ + AboutSponsorsComponent, ] }) export class AboutModule { }