Merge tag '26.16.1' into develop

Hotfix to update homepage and dashboard copy and images 26.16.1

Author: adlius

CHANGELOG

@@ -2,6 +2,11 @@
 
 We follow the CalVer (https://calver.org/) versioning scheme: YY.MINOR.MICRO.
 
+26.16.1 (2026-08-11)
+====================
+
+* Hotfix to update homepage and dashboard copy and images
+
 26.16.0 (2026-08-10)
 ====================
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "osf",
-  "version": "26.16.0",
+  "version": "26.16.1",
   "scripts": {
     "ng": "ng",
     "analyze-bundle": "ng build --configuration=analyze-bundle && source-map-explorer dist/**/*.js --no-border-checks",

src/app/features/home/constants/data.ts

@@ -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',
-    },
-  },
 ];

src/app/features/home/home.component.html

@@ -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">
@@ -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
@@ -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>

src/app/features/home/home.component.scss

@@ -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 {