feat(ui): add platform logos to landing page (#2148)

* add new section under Organizations

* update text; update layout

* typo

* remove platforms section from challenge-host-list

* add new platform component

* update padding

* update platform count

* add svg of platform logos

* add responsiveness

* add bold emphasis on section titles

* add CodaLab as platform

* text update

* remove OpenML and PapersWithCode as challenge platforms

* remove subtexts

* move list of platform logos to s3

* fix test

* add sub-texts back in

* update spacing

* update description

* fix layout

* use png image instead of svg

* update description pt 2

libs/openchallenges/home/src/lib/challenge-host-list/challenge-host-list.component.html

@@ -2,7 +2,10 @@
   <div class="container">
     <div class="text-center">
       <h3 class="section-title">Discover Organizations</h3>
-      It takes a village to run a challenge - see who has been contributing their time and effort.
+      <p>
+        It takes a village to run a challenge. Explore from 300+ organizations who contributed their
+        time and effort.
+      </p>
     </div>
     <div class="card-group">
       <openchallenges-organization-card

libs/openchallenges/home/src/lib/challenge-host-list/challenge-host-list.component.scss

@@ -11,7 +11,7 @@
   justify-items: center;
 }
 #organizations {
-  padding: 88px 0;
+  padding-top: 88px;
 
   .see-more {
     margin-top: 18px;

libs/openchallenges/home/src/lib/challenge-search/challenge-search.component.html

@@ -74,7 +74,7 @@ <h1>
     <div class="metrics-text-box">
       <h2
         *ngIf="orgCount$ | async as orgCount"
-        [countUp]="16"
+        [countUp]="12"
         [reanimateOnClick]="reanimateOnClick"
       >
         0

libs/openchallenges/home/src/lib/home.component.html

@@ -17,6 +17,7 @@ <h4>
   <openchallenges-random-challenge-list *sageAppShellNoRender/>
   <openchallenges-challenge-registration *sageAppShellNoRender/>
   <openchallenges-challenge-host-list *sageAppShellNoRender/>
+  <openchallenges-platforms *sageAppShellNoRender/>
   <openchallenges-sponsor-list *sageAppShellNoRender/>
 </main>
 

libs/openchallenges/home/src/lib/home.component.ts

@@ -11,6 +11,7 @@ import { ChallengeRegistrationComponent } from './challenge-registration/challen
 import { ChallengeSearchComponent } from './challenge-search/challenge-search.component';
 import { FeaturedChallengeListComponent } from './featured-challenge-list/featured-challenge-list.component';
 import { SponsorListComponent } from './sponsor-list/sponsor-list.component';
+import { PlatformsComponent } from './platforms/platforms.component';
 import { StatisticsViewerComponent } from './statistics-viewer/statistics-viewer.component';
 import { TopicsViewerComponent } from './topics-viewer/topics-viewer.component';
 import { getSeoData } from './home-seo-data';
@@ -27,6 +28,7 @@ import { RandomChallengeListComponent } from './random-challenge-list/random-cha
     FeaturedChallengeListComponent,
     RandomChallengeListComponent,
     SponsorListComponent,
+    PlatformsComponent,
     StatisticsViewerComponent,
     TopicsViewerComponent,
     FooterComponent,

libs/openchallenges/home/src/lib/platforms/platforms.component.html

@@ -0,0 +1,12 @@
+<section id="platforms">
+  <div class="container text-center">
+    <h3 class="section-title">Platforms</h3>
+    <p>
+      OC provides a catalog of various platforms used by the biomedical and research community.
+      These platforms enable participants to benchmark their computational tools and algorithms.
+    </p>
+    <div class="row">
+      <img [src]="(platforms$ | async)?.url" alt="Platforms on OpenChallenges" />
+    </div>
+  </div>
+</section>

libs/openchallenges/home/src/lib/platforms/platforms.component.scss

@@ -0,0 +1,12 @@
+@use 'libs/openchallenges/styles/src/lib/_constants' as constants;
+
+#platforms {
+  max-width: 1210px;
+  margin: 0 auto;
+  padding: 68px 0 88px;
+
+  img {
+    width: 100%;
+    padding: 15px 8px 0;
+  }
+}

libs/openchallenges/home/src/lib/platforms/platforms.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { PlatformsComponent } from './platforms.component';
+import { HttpClientModule } from '@angular/common/http';
+
+describe('PlatformsComponent', () => {
+  let component: PlatformsComponent;
+  let fixture: ComponentFixture<PlatformsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HttpClientModule, PlatformsComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PlatformsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

libs/openchallenges/home/src/lib/platforms/platforms.component.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {
+  Image,
+  ImageService,
+} from '@sagebionetworks/openchallenges/api-client-angular';
+import { Observable } from 'rxjs';
+
+@Component({
+  selector: 'openchallenges-platforms',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './platforms.component.html',
+  styleUrls: ['./platforms.component.scss'],
+})
+export class PlatformsComponent implements OnInit {
+  public platforms$: Observable<Image> | undefined;
+
+  constructor(private imageService: ImageService) {}
+
+  ngOnInit() {
+    this.platforms$ = this.imageService.getImage({
+      objectKey: 'logo/platforms.png',
+    });
+  }
+}