diff --git a/frontend/src/app/components/about/about.component.html b/frontend/src/app/components/about/about.component.html index c3f516fc7..391de5ce9 100644 --- a/frontend/src/app/components/about/about.component.html +++ b/frontend/src/app/components/about/about.component.html @@ -33,10 +33,21 @@ -

Sponsor the project

-
- Community - Enterprise +
+
+

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 f7aa0b965..54dc38a27 100644 --- a/frontend/src/app/components/about/about.component.scss +++ b/frontend/src/app/components/about/about.component.scss @@ -246,3 +246,48 @@ 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/shared/shared.module.ts b/frontend/src/app/shared/shared.module.ts index 76dbc65f1..0b4464727 100644 --- a/frontend/src/app/shared/shared.module.ts +++ b/frontend/src/app/shared/shared.module.ts @@ -4,7 +4,7 @@ import { NgbCollapseModule, NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstra import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome'; import { faFilter, faAngleDown, faAngleUp, faAngleRight, faAngleLeft, faBolt, faChartArea, faCogs, faCubes, faHammer, faDatabase, faExchangeAlt, faInfoCircle, faLink, faList, faSearch, faCaretUp, faCaretDown, faTachometerAlt, faThList, faTint, faTv, faClock, faAngleDoubleDown, faSortUp, faAngleDoubleUp, faChevronDown, - faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt, faBook, faListUl, faDownload, faQrcode, faArrowRightArrowLeft, faArrowsRotate, faCircleLeft, faFastForward, faWallet, faUserClock, faWrench, faUserFriends, faQuestionCircle, faHistory, faSignOutAlt, faKey, faSuitcase, faIdCardAlt, faNetworkWired, faUserCheck, faCircleCheck, faUserCircle } from '@fortawesome/free-solid-svg-icons'; + faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt, faBook, faListUl, faDownload, faQrcode, faArrowRightArrowLeft, faArrowsRotate, faCircleLeft, faFastForward, faWallet, faUserClock, faWrench, faUserFriends, faQuestionCircle, faHistory, faSignOutAlt, faKey, faSuitcase, faIdCardAlt, faNetworkWired, faUserCheck, faCircleCheck, faUserCircle, faCheck } from '@fortawesome/free-solid-svg-icons'; import { InfiniteScrollModule } from 'ngx-infinite-scroll'; import { MenuComponent } from '../components/menu/menu.component'; import { PreviewTitleComponent } from '../components/master-page-preview/preview-title.component'; @@ -364,5 +364,6 @@ export class SharedModule { library.addIcons(faUserCheck); library.addIcons(faCircleCheck); library.addIcons(faUserCircle); + library.addIcons(faCheck); } }