Skip to content

[ENG-11843] Update homepage and dashboard copy and images for project transition #1040

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
adlius merged 3 commits into from
Aug 11, 2026
Merged

[ENG-11843] Update homepage and dashboard copy and images for project transition #1040

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4f45c4b
fix(home): updated home and dashboard pages
nsemets Aug 10, 2026
7084622
fix(dashboard): updated tests
nsemets Aug 10, 2026
35bdfa3
fix(banner): updated banner position
nsemets Aug 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 0 additions & 13 deletions src/app/features/home/constants/data.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,17 +62,4 @@ export const INTEGRATION_ICONS = [
width: '152',
},
},
{
title: 'home.loggedOut.integrations.categories.storage',
first: {
path: 'assets/images/integrations/dropbox.png',
height: '34',
width: '175',
},
second: {
path: 'assets/images/integrations/google-drive.png',
height: '35',
width: '207',
},
},
];
279 changes: 104 additions & 175 deletions src/app/features/home/home.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,18 @@
<section class="home-container flex flex-column">
<div class="flex flex-column pt-7 px-3 md:mt-7 md:px-5 xl:flex-row xl:mt-4 xl:px-4">
<div class="home-container flex flex-column">
<section class="flex flex-column pt-7 px-3 md:mt-7 md:px-5 xl:flex-row xl:mt-4 xl:px-4">
<div
class="flex flex-column align-items-center text-center xl:justify-content-center xl:text-left xl:align-items-start"
>
<h1 [innerHTML]="'home.loggedOut.hero.title' | translate"></h1>

<p class="mt-3" [innerHTML]="'home.loggedOut.hero.subtitle' | translate"></p>
<p class="mt-3">{{ 'home.loggedOut.hero.subtitle' | translate }}</p>

<div class="flex justify-content-center mt-4 w-6 xl:w-auto">
<p-button
class="btn-full-width"
[label]="'home.loggedOut.hero.signUp' | translate"
severity="success"
[routerLink]="['/register']"
/>
</div>
<p-button
class="btn-full-width mt-4 w-6 xl:w-auto"
[label]="'home.loggedOut.hero.signUp' | translate"
severity="success"
[routerLink]="['/register']"
/>
</div>

<div class="flex justify-content-center my-5 md:mt-7 xl:m-0">
Expand All @@ -24,17 +22,15 @@ <h1 [innerHTML]="'home.loggedOut.hero.title' | translate"></h1>
priority
height="377"
width="585"
alt="Better research"
[alt]="'home.loggedOut.hero.betterResearchImageAltText' | translate"
/>
</div>
</div>
</section>

<div class="discover-research-container flex flex-column text-center py-7 px-3 md:mt-7 md:px-5 xl:px-4">
<div class="flex flex-column">
<h1 [innerHTML]="'home.loggedOut.discover.title' | translate"></h1>
<section class="discover-research-container flex flex-column text-center py-7 px-3 md:mt-7 md:px-5 xl:px-4">
<h1 [innerHTML]="'home.loggedOut.discover.title' | translate"></h1>

<p class="mt-3">{{ 'home.loggedOut.discover.subtitle' | translate }}</p>
</div>
<p class="mt-3">{{ 'home.loggedOut.discover.subtitle' | translate }}</p>

<div class="w-full mt-4">
<osf-search-input
Expand All @@ -43,184 +39,117 @@ <h1 [innerHTML]="'home.loggedOut.discover.title' | translate"></h1>
(triggerSearch)="redirectToSearchPageWithValue()"
/>
</div>
</div>
</section>

<div class="supports-container flex flex-column text-center pt-6 px-3 md:mt-8 md:px-5 xl:mt-3 xl:px-4">
<section class="flex flex-column text-center pt-6 px-3 md:mt-8 md:px-5 xl:mt-3 xl:px-4">
<h1 [innerHTML]="'home.loggedOut.support.title' | translate"></h1>

<div class="flex flex-column mt-4 xl:flex-row">
<div class="flex flex-column gap-4 text-left xl:col-6 pr-6">
<div class="flex gap-3">
<div class="flex flex-column justify-content-between align-items-center">
<img ngSrc="assets/icons/colored/search.svg" alt="Search" width="48" height="48" />
<osf-icon class="arrow-down" iconClass="fas fa-chevron-down fa-xs"></osf-icon>
</div>

<div class="flex flex-column gap-2 mt-3">
<h2>
{{ 'home.loggedOut.support.sections.search.title' | translate }}
</h2>

<p>
{{ 'home.loggedOut.support.sections.search.description' | translate }}
</p>
</div>
</div>

<div class="flex gap-3">
<div class="flex flex-column justify-content-between align-items-center">
<img ngSrc="assets/icons/colored/design.svg" alt="Design" width="48" height="48" />
<osf-icon class="arrow-down" iconClass="fas fa-chevron-down fa-xs"></osf-icon>
</div>

<div class="flex flex-column gap-2 mt-3">
<h2>
{{ 'home.loggedOut.support.sections.design.title' | translate }}
</h2>

<p>
{{ 'home.loggedOut.support.sections.design.description' | translate }}
</p>
</div>
</div>

<div class="flex gap-3">
<div class="flex flex-column justify-content-between align-items-center">
<img ngSrc="assets/icons/colored/collect.svg" alt="Collect" width="48" height="48" />
<osf-icon class="arrow-down" iconClass="fas fa-chevron-down fa-xs"></osf-icon>
</div>

<div class="flex flex-column gap-2 mt-3">
<h2>
{{ 'home.loggedOut.support.sections.collect.title' | translate }}
</h2>

<p>
{{ 'home.loggedOut.support.sections.collect.description' | translate }}
</p>
</div>
</div>

<div class="flex gap-3">
<div class="flex flex-column justify-content-between">
<img ngSrc="assets/icons/colored/publish.svg" alt="Publish" width="48" height="48" />
</div>

<div class="flex flex-column gap-2 mt-3">
<h2>
{{ 'home.loggedOut.support.sections.publish.title' | translate }}
</h2>

<p>
{{ 'home.loggedOut.support.sections.publish.description' | translate }}
</p>
</div>
</div>
</div>

<div class="flex justify-content-center align-items-center mt-4 xl:col-6">
<iframe
class="youtube-frame"
src="https://www.youtube.com/embed/X07mBq2tnMg?si=jzOBeqyUPGJ6tm86"
title="YouTube video player"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen
></iframe>
</div>
<div class="flex justify-content-center mt-4">
<img
class="connected-record-image"
ngSrc="assets/images/connected-record.png"
width="896"
height="504"
[alt]="'home.loggedOut.support.connectedRecord' | translate"
/>
</div>

<div class="flex justify-content-center mt-4 xl:mt-6">
<a
class="w-6 btn-full-width xl:w-auto"
class="p-button font-bold w-6 xl:w-auto"
href="https://cos.io/our-products/osf/"
target="_blank"
rel="noopener noreferrer"
class="p-button font-bold"
>
{{ 'common.labels.learnMore' | translate }}
</a>
</div>
</div>
</section>

<div class="flex justify-content-center pt-6 px-3 text-center md:mt-8 md:px-5 xl:px-4">
<section class="flex flex-column text-center pt-6 px-3 md:mt-8 md:px-5 xl:px-4">
<h1 [innerHTML]="'home.loggedOut.testimonials.title' | translate"></h1>
</div>

<div class="carousel-container max-w-full mt-4 pt-5 px-3 md:mt-6 md:px-5 xl:px-4">
<p-carousel
[value]="slides"
[showNavigators]="false"
[numVisible]="1"
[numScroll]="1"
[circular]="true"
[autoplayInterval]="5000"
>
<ng-template let-slide #item>
<div class="flex align-items-center justify-content-center">
<div class="flex flex-column">
<osf-icon class="quote-icon" iconClass="fas fa-quote-left fa-2xl"></osf-icon>
<div class="carousel-container max-w-full mt-4 pt-5">
<p-carousel
[value]="slides"
[showNavigators]="false"
[numVisible]="1"
[numScroll]="1"
[circular]="true"
[autoplayInterval]="5000"
>
<ng-template let-slide #item>
<div class="flex align-items-center justify-content-center">
<div class="flex flex-column">
<osf-icon class="quote-icon" iconClass="fas fa-quote-left fa-2xl"></osf-icon>

<div class="text-container pl-6 max-w-full">
<h2>{{ slide.title | translate }}</h2>
<div class="pl-6 max-w-full text-left">
<h2>{{ slide.title | translate }}</h2>

<p class="font-semibold mt-4">{{ slide.author }}</p>
<p class="mt-2">{{ slide.facility | translate }}</p>
<p class="font-semibold mt-4">{{ slide.author }}</p>
<p class="mt-2">{{ slide.facility | translate }}</p>
</div>
</div>
</div>

<img class="user-image hidden md:flex" [src]="slide.img" [alt]="slide.name" />
<img class="hidden md:flex" [src]="slide.img" [alt]="slide.name" />
</div>
</ng-template>
</p-carousel>
</div>
</section>

<section class="flex flex-column pt-6 px-3 md:mt-8 md:px-5 xl:px-4">
<h1 class="text-center" [innerHTML]="'home.loggedOut.integrations.title' | translate"></h1>

<div class="hidden flex-wrap p-6 md:flex md:p-5 xl:px-0 xl:flex-nowrap">
@for (icon of icons; track icon.title) {
<div class="col-6 pb-6 xl:col-4">
<ng-container
[ngTemplateOutlet]="integrationIcons"
[ngTemplateOutletContext]="{ $implicit: icon }"
></ng-container>
</div>
</ng-template>
</p-carousel>
</div>

<h1
class="text-center pt-6 px-3 md:mt-8 md:px-5 xl:px-4"
[innerHTML]="'home.loggedOut.integrations.title' | translate"
></h1>

<div class="hidden flex-wrap p-6 md:flex xl:px-4 xl:flex-nowrap">
@for (icon of icons; track $index) {
<div class="flex flex-column align-items-center gap-4 col-6 pb-6 xl:col-3">
<p>{{ icon.title | translate }}</p>

<img [ngSrc]="icon.first.path" [width]="icon.first.width" [height]="icon.first.height" alt="Integration icon" />

<img
[ngSrc]="icon.second.path"
[width]="icon.second.width"
[height]="icon.second.height"
alt="Integration icon"
/>
</div>
}
</div>
}
</div>

<div class="my-4 md:hidden">
<p-carousel
[value]="icons"
[showNavigators]="false"
[numVisible]="1"
[numScroll]="1"
[circular]="true"
[autoplayInterval]="5000"
>
<ng-template let-icon #item>
<div class="flex flex-column align-items-center gap-4">
<p>{{ icon.title | translate }}</p>

<img [ngSrc]="icon.first.path" [width]="icon.first.width" [height]="icon.first.height" alt="Carousel icon" />

<img
class="mb-4"
[ngSrc]="icon.second.path"
[width]="icon.second.width"
[height]="icon.second.height"
alt="Carousel icon"
/>
</div>
</ng-template>
</p-carousel>
<div class="my-4 md:hidden">
<p-carousel
[value]="icons"
[showNavigators]="false"
[numVisible]="1"
[numScroll]="1"
[circular]="true"
[autoplayInterval]="5000"
>
<ng-template let-icon #item>
<div class="mb-4">
<ng-container
[ngTemplateOutlet]="integrationIcons"
[ngTemplateOutletContext]="{ $implicit: icon }"
></ng-container>
</div>
</ng-template>
</p-carousel>
</div>
</section>
</div>

<ng-template #integrationIcons let-icon>
<div class="flex flex-column align-items-center gap-4">
<p>{{ icon.title | translate }}</p>

<img
[ngSrc]="icon.first.path"
[width]="icon.first.width"
[height]="icon.first.height"
[alt]="'home.loggedOut.integrations.iconImageAltText' | translate"
/>

<img
[ngSrc]="icon.second.path"
[width]="icon.second.width"
[height]="icon.second.height"
[alt]="'home.loggedOut.integrations.iconImageAltText' | translate"
/>
</div>
</section>
</ng-template>
17 changes: 7 additions & 10 deletions src/app/features/home/home.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,18 +7,15 @@
object-fit: contain;
}

.discover-research-container {
background: var(--gradient-1);
}

.arrow-down {
color: var(--grey-1);
.connected-record-image {
width: 100%;
max-width: 60%;
height: auto;
object-fit: contain;
}

.youtube-frame {
border: none;
width: 100%;
aspect-ratio: 2 / 1;
.discover-research-container {
background: var(--gradient-1);
}

.carousel-container {
Expand Down
13 changes: 11 additions & 2 deletions src/app/features/home/home.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { TranslatePipe } from '@ngx-translate/core';
import { Button } from 'primeng/button';
import { Carousel } from 'primeng/carousel';

import { NgOptimizedImage } from '@angular/common';
import { NgOptimizedImage, NgTemplateOutlet } from '@angular/common';
import { Component, inject } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Router, RouterLink } from '@angular/router';
Expand All @@ -15,7 +15,16 @@ import { INTEGRATION_ICONS, SLIDES } from './constants/data';

@Component({
selector: 'osf-home',
imports: [Carousel, Button, SearchInputComponent, IconComponent, NgOptimizedImage, TranslatePipe, RouterLink],
imports: [
Carousel,
Button,
SearchInputComponent,
IconComponent,
NgOptimizedImage,
NgTemplateOutlet,
TranslatePipe,
RouterLink,
],
templateUrl: './home.component.html',
styleUrl: './home.component.scss',
})
Expand Down
Loading
Loading