From 15121168bc8d57410cc6bffb8f08d47a7c76205e Mon Sep 17 00:00:00 2001
From: nsemets <nsemets@exoft.net>
Date: Tue, 24 Jun 2025 13:52:34 +0300
Subject: [PATCH 1/2] fix(home-logged-out): updated page

---
 src/app/app.routes.ts                         |   1 +
 .../core/components/root/root.component.html  |   8 +-
 .../home-logged-out.component.html            | 310 ++++++-------
 .../home-logged-out.component.scss            | 425 +-----------------
 .../home-logged-out.component.ts              |  17 +-
 .../institutions/institutions.component.ts    |  13 +-
 .../add-project-form.component.ts             |   3 +-
 .../components/icon/icon.component.html       |   2 +-
 src/assets/styles/_base.scss                  |   9 +-
 src/assets/styles/_common.scss                |   7 +
 src/assets/styles/overrides/carousel.scss     |  26 +-
 src/assets/styles/overrides/checkbox.scss     |   2 -
 12 files changed, 190 insertions(+), 633 deletions(-)

diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index 79f8d23fe..9433e3d50 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -52,6 +52,7 @@ export const routes: Routes = [
           import('@osf/features/home/pages/home-logged-out/home-logged-out.component').then(
             (mod) => mod.HomeLoggedOutComponent
           ),
+        data: { skipBreadcrumbs: true },
       },
       {
         path: 'support',
diff --git a/src/app/core/components/root/root.component.html b/src/app/core/components/root/root.component.html
index 516deac12..f2bfc1c0e 100644
--- a/src/app/core/components/root/root.component.html
+++ b/src/app/core/components/root/root.component.html
@@ -5,9 +5,7 @@
     <div class="content-wrapper">
       <osf-header></osf-header>
 
-      <main class="flex flex-1">
-        <router-outlet />
-      </main>
+      <router-outlet />
 
       <osf-footer></osf-footer>
     </div>
@@ -21,9 +19,7 @@
         <osf-breadcrumb></osf-breadcrumb>
       }
 
-      <main class="flex flex-1">
-        <router-outlet />
-      </main>
+      <router-outlet />
 
       <osf-footer></osf-footer>
     </div>
diff --git a/src/app/features/home/pages/home-logged-out/home-logged-out.component.html b/src/app/features/home/pages/home-logged-out/home-logged-out.component.html
index 2b22afa06..fbbbe31ac 100644
--- a/src/app/features/home/pages/home-logged-out/home-logged-out.component.html
+++ b/src/app/features/home/pages/home-logged-out/home-logged-out.component.html
@@ -1,103 +1,117 @@
-<section class="home-container" [class.tablet]="isMedium()" [class.small]="isSmall()" [class.mobile]="isXSmall()">
-  <div class="better-way-container">
-    <div class="text-container">
+<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="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>
-      <h3 [innerHTML]="'home.loggedOut.hero.subtitle' | translate"></h3>
-      <div class="mt-5">
-        <p-button
-          [label]="'home.loggedOut.hero.signUp' | translate"
-          severity="success"
-          [class.btn-full-width]="isXSmall() || isSmall() || isMedium()"
-        />
+
+      <p class="mt-3" [innerHTML]="'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" />
       </div>
     </div>
-    <div class="image-container">
-      <img ngSrc="assets/images/better-research-background.svg" alt="better-research" height="377" width="585" />
+
+    <div class="flex justify-content-center my-5 md:mt-7 xl:m-0">
+      <img
+        class="research-image"
+        ngSrc="assets/images/better-research-background.svg"
+        priority
+        height="377"
+        width="585"
+        alt="Better research"
+      />
     </div>
   </div>
 
-  <div class="discover-research-container">
-    <div class="text-container">
+  <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>
-      <h3>{{ 'home.loggedOut.discover.subtitle' | translate }}</h3>
+
+      <p class="mt-3">{{ 'home.loggedOut.discover.subtitle' | translate }}</p>
     </div>
 
-    <div class="input-search">
-      <i class="osf-icon-search"></i>
-      <input
-        type="text"
-        [placeholder]="'home.loggedOut.discover.searchPlaceholder' | translate"
-        pInputText
-        [(ngModel)]="searchValue"
-      />
+    <div class="w-full mt-4">
+      <osf-search-input [placeholder]="'home.loggedOut.discover.searchPlaceholder' | translate" />
     </div>
   </div>
 
-  <div class="supports-container">
+  <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">
     <h1 [innerHTML]="'home.loggedOut.support.title' | translate"></h1>
-    <div class="content-container">
-      <div class="left-bar">
-        <div class="info-section">
-          <div class="icons-wrapper">
-            <img ngSrc="assets/icons/colored/search.svg" alt="search icon" width="48" height="48" />
-            <i class="osf-icon-arrow-down"></i>
+
+    <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="text-wrapper">
+
+          <div class="flex flex-column gap-2 mt-3">
             <h2>
               {{ 'home.loggedOut.support.sections.search.title' | translate }}
             </h2>
-            <h3>
+
+            <p>
               {{ 'home.loggedOut.support.sections.search.description' | translate }}
-            </h3>
+            </p>
           </div>
         </div>
 
-        <div class="info-section">
-          <div class="icons-wrapper">
-            <img ngSrc="assets/icons/colored/design.svg" alt="search icon" width="48" height="48" />
-            <i class="osf-icon-arrow-down"></i>
+        <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="text-wrapper">
+
+          <div class="flex flex-column gap-2 mt-3">
             <h2>
               {{ 'home.loggedOut.support.sections.design.title' | translate }}
             </h2>
-            <h3>
+
+            <p>
               {{ 'home.loggedOut.support.sections.design.description' | translate }}
-            </h3>
+            </p>
           </div>
         </div>
 
-        <div class="info-section">
-          <div class="icons-wrapper">
-            <img ngSrc="assets/icons/colored/collect.svg" alt="search icon" width="48" height="48" />
-            <i class="osf-icon-arrow-down"></i>
+        <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="text-wrapper">
+
+          <div class="flex flex-column gap-2 mt-3">
             <h2>
               {{ 'home.loggedOut.support.sections.collect.title' | translate }}
             </h2>
-            <h3>
+
+            <p>
               {{ 'home.loggedOut.support.sections.collect.description' | translate }}
-            </h3>
+            </p>
           </div>
         </div>
 
-        <div class="info-section">
-          <div class="icons-wrapper">
-            <img ngSrc="assets/icons/colored/publish.svg" alt="search icon" width="48" height="48" />
+        <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="text-wrapper">
+
+          <div class="flex flex-column gap-2 mt-3">
             <h2>
               {{ 'home.loggedOut.support.sections.publish.title' | translate }}
             </h2>
-            <h3>
+
+            <p>
               {{ 'home.loggedOut.support.sections.publish.description' | translate }}
-            </h3>
+            </p>
           </div>
         </div>
       </div>
-      <div class="right-bar">
+
+      <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"
@@ -107,151 +121,89 @@ <h3>
       </div>
     </div>
 
-    <div class="learn-more-container">
-      <p-button [label]="'home.loggedOut.support.learnMore' | translate" class="learn-more" />
+    <div class="flex justify-content-center mt-4 xl:mt-6">
+      <p-button class="w-6 btn-full-width xl:w-auto" [label]="'home.loggedOut.support.learnMore' | translate" />
     </div>
   </div>
 
-  <div class="others-saying-container">
+  <div class="flex justify-content-center pt-6 px-3 text-center md:mt-8 md:px-5 xl:px-4">
     <h1 [innerHTML]="'home.loggedOut.testimonials.title' | translate"></h1>
   </div>
 
-  <div class="carousel-container">
-    <p-carousel [value]="slides" [numVisible]="1" [numScroll]="1" [circular]="true" [autoplayInterval]="5000">
+  <div class="carousel-container max-w-full pt-5 px-3 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="slide">
-          <div class="content-container">
-            <i class="osf-icon-quotes quote-icon"></i>
-            <div class="text-container">
-              <div class="title-container">
-                <h2>{{ slide.title | translate }}</h2>
-              </div>
-              <h3 class="author">{{ slide.author }}</h3>
-              <h3>{{ slide.facility | translate }}</h3>
+        <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>
+
+              <p class="font-semibold mt-4">{{ slide.author }}</p>
+              <p class="mt-2">{{ slide.facility | translate }}</p>
             </div>
           </div>
-          <img src="{{ slide.img }}" class="user-image" [alt]="slide.name" />
+
+          <img class="user-image hidden md:flex" [src]="slide.img" [alt]="slide.name" />
         </div>
       </ng-template>
     </p-carousel>
   </div>
 
-  <h1 class="integrations-title" [innerHTML]="'home.loggedOut.integrations.title' | translate"></h1>
+  <h1
+    class="text-center pt-6 px-3 md:mt-8 md:px-5 xl:px-4"
+    [innerHTML]="'home.loggedOut.integrations.title' | translate"
+  ></h1>
 
-  @if (isMedium() || isWeb()) {
-    <div class="integrations-main">
-      <div class="integrations-container">
-        <div class="integrations-bundle">
-          <h3>
-            {{ 'home.loggedOut.integrations.categories.authentication' | translate }}
-          </h3>
-        </div>
-        <div class="integrations-bundle">
-          <h3>
-            {{ 'home.loggedOut.integrations.categories.discovery' | translate }}
-          </h3>
-        </div>
-        <div class="integrations-bundle">
-          <h3>
-            {{ 'home.loggedOut.integrations.categories.references' | translate }}
-          </h3>
-        </div>
-        <div class="integrations-bundle">
-          <h3>
-            {{ 'home.loggedOut.integrations.categories.storage' | translate }}
-          </h3>
-        </div>
-      </div>
+  <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>
 
-      <div class="integrations-container">
-        <div class="integrations-bundle-border">
-          <img ngSrc="assets/icons/socials/integrations/incommon.png" alt="incommon" height="36" width="200" />
-          <img ngSrc="assets/icons/socials/integrations/sso.png" alt="sso" height="59" width="135" />
-        </div>
-
-        <div class="integrations-bundle-border">
-          <img
-            ngSrc="assets/icons/socials/integrations/google-scholar.png"
-            alt="google-scholar"
-            height="36"
-            width="215"
-          />
-          <img ngSrc="assets/icons/socials/integrations/orcid.png" alt="orcid" height="34" width="111" />
-        </div>
-
-        <div class="integrations-bundle-border">
-          <img ngSrc="assets/icons/socials/integrations/mendeley.png" alt="mendeley" height="42" width="214" />
-          <img ngSrc="assets/icons/socials/integrations/zotero.png" alt="zotero" height="36" width="152" />
-        </div>
-
-        <div class="integrations-bundle">
-          <img ngSrc="assets/icons/socials/integrations/dropbox.png" alt="dropbox" height="34" width="175" />
-          <img ngSrc="assets/icons/socials/integrations/google-drive.png" alt="google-drive" height="35" width="207" />
-        </div>
-      </div>
-    </div>
-  } @else if (isSmall()) {
-    <div class="integrations-main-small">
-      <div class="integrations-bundle">
-        <h3>
-          {{ 'home.loggedOut.integrations.categories.authentication' | translate }}
-        </h3>
-        <img ngSrc="assets/icons/socials/integrations/incommon.png" alt="incommon" height="36" width="200" />
-        <img ngSrc="assets/icons/socials/integrations/sso.png" alt="sso" height="59" width="135" />
-      </div>
+        <img [ngSrc]="icon.first.path" [width]="icon.first.width" [height]="icon.first.height" alt="Integration icon" />
 
-      <div class="integrations-bundle">
-        <h3>
-          {{ 'home.loggedOut.integrations.categories.discovery' | translate }}
-        </h3>
         <img
-          ngSrc="assets/icons/socials/integrations/google-scholar.png"
-          alt="google-scholar"
-          height="36"
-          width="215"
+          [ngSrc]="icon.second.path"
+          [width]="icon.second.width"
+          [height]="icon.second.height"
+          alt="Integration icon"
         />
-        <img ngSrc="assets/icons/socials/integrations/orcid.png" alt="orcid" height="34" width="111" />
       </div>
+    }
+  </div>
 
-      <div class="integrations-bundle">
-        <h3>
-          {{ 'home.loggedOut.integrations.categories.references' | translate }}
-        </h3>
-        <img ngSrc="assets/icons/socials/integrations/mendeley.png" alt="mendeley" height="42" width="214" />
-        <img ngSrc="assets/icons/socials/integrations/zotero.png" alt="zotero" height="36" width="152" />
-      </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" />
 
-      <div class="integrations-bundle">
-        <h3>
-          {{ 'home.loggedOut.integrations.categories.storage' | translate }}
-        </h3>
-        <img ngSrc="assets/icons/socials/integrations/dropbox.png" alt="dropbox" height="34" width="175" />
-        <img ngSrc="assets/icons/socials/integrations/google-drive.png" alt="google-drive" height="35" width="207" />
-      </div>
-    </div>
-  } @else {
-    <div class="integrations-main-mobile">
-      <p-carousel [value]="icons" [numVisible]="1" [numScroll]="1" [circular]="true" [autoplayInterval]="5000">
-        <ng-template let-icon #item>
-          <div class="slide">
-            <h3>{{ icon.title | translate }}</h3>
-            <img
-              ngSrc="{{ icon.first.path }}"
-              class="quote-icon"
-              alt="search icon"
-              width="{{ icon.first.width }}"
-              height="{{ icon.first.height }}"
-            />
-            <img
-              ngSrc="{{ icon.second.path }}"
-              class="quote-icon"
-              alt="search icon"
-              width="{{ icon.second.width }}"
-              height="{{ icon.second.height }}"
-            />
-          </div>
-        </ng-template>
-      </p-carousel>
-    </div>
-  }
+          <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>
 </section>
diff --git a/src/app/features/home/pages/home-logged-out/home-logged-out.component.scss b/src/app/features/home/pages/home-logged-out/home-logged-out.component.scss
index 9d2e8ce47..36e22cde8 100644
--- a/src/app/features/home/pages/home-logged-out/home-logged-out.component.scss
+++ b/src/app/features/home/pages/home-logged-out/home-logged-out.component.scss
@@ -1,416 +1,33 @@
-@use "assets/styles/variables" as var;
-@use "assets/styles/mixins" as mix;
+.home-container {
+  background-color: var(--white);
 
-:host {
-  .home-container {
-    display: flex;
-    flex-direction: column;
-    background: var.$white;
-
-    h3 {
-      font-weight: 400;
-      margin-top: 0.86rem;
-    }
-
-    .better-way-container {
-      margin: 8.5rem 2.5rem 8.5rem 2.5rem;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      .text-container {
-        display: flex;
-        flex-direction: column;
-        padding-top: 0.63rem;
-        width: 40.29rem;
-      }
-
-      .image-container {
-        display: flex;
-        justify-content: center;
-
-        img {
-          width: 42.07rem;
-          height: 26.86rem;
-        }
-      }
-    }
-
-    .discover-research-container {
-      width: 100%;
-      background: var.$gradient-1;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      padding: 8.57rem 1.71rem 8.57rem 1.71rem;
-      row-gap: 3.43rem;
-
-      .text-container {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        text-align: center;
-      }
-    }
-
-    .supports-container {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      padding: 4.57rem 1.71rem 8.57rem 1.71rem;
-      row-gap: 3.43rem;
-
-      .content-container {
-        display: flex;
-
-        .left-bar {
-          width: 50%;
-          display: flex;
-          flex-direction: column;
-          row-gap: 1.71rem;
-          padding-right: 3.57rem;
-
-          .info-section {
-            display: flex;
-
-            .icons-wrapper {
-              display: flex;
-              flex-direction: column;
-              justify-content: space-between;
-              align-items: center;
-              padding-left: 0.86rem;
-              padding-right: 0.86rem;
-
-              .osf-icon-arrow-down {
-                color: var.$grey-1;
-                font-size: mix.rem(16px);
-              }
-            }
-
-            .text-wrapper {
-              display: flex;
-              flex-direction: column;
-              row-gap: 0.43rem;
-              padding-top: 0.86rem;
-
-              h3 {
-                margin-top: 0;
-                line-height: 1.71rem;
-                font-weight: 400;
-                text-transform: none;
-              }
-            }
-          }
-        }
-
-        .right-bar {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          width: 50%;
-
-          iframe {
-            width: 38.36rem;
-            height: 21.57rem;
-            border: none;
-          }
-        }
-      }
-
-      .learn-more-container {
-        display: flex;
-        justify-content: center;
-      }
-    }
-
-    .others-saying-container {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      padding-bottom: 2.86rem;
-    }
-
-    .carousel-container {
-      width: 100%;
-      padding-bottom: 8.57rem;
-      flex: 0;
-
-      .slide {
-        position: relative;
-        background: var.$bg-blue-3;
-        height: 28.57rem;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        .user-image {
-          height: 26.57rem;
-          align-self: end;
-        }
-
-        .quote-icon {
-          font-size: 2rem;
-          width: 4rem;
-          color: var.$pr-blue-1;
-        }
-
-        .content-container {
-          display: flex;
-          flex-direction: column;
-          .text-container {
-            padding-left: 3.43rem;
-            width: 32.79rem;
-
-            .title-container {
-              margin-bottom: 3.43rem;
-            }
-
-            .author {
-              font-weight: 600;
-            }
-          }
-        }
-      }
-    }
-
-    .integrations-title {
-      text-align: center;
-    }
-
-    .integrations-main {
-      display: flex;
-      flex-direction: column;
-      padding-top: 3.43rem;
-      padding-bottom: 8.57rem;
-      row-gap: 1.71rem;
-
-      .integrations-container {
-        display: flex;
-        justify-content: space-between;
-
-        .integrations-bundle {
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          row-gap: 1.71rem;
-          width: 25%;
-        }
-
-        .integrations-bundle-border {
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          row-gap: 1.71rem;
-          width: 25%;
-          border-right: 1px solid var.$grey-2;
-        }
-      }
-    }
+  .research-image {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
   }
 
-  .tablet {
-    .better-way-container {
-      flex-direction: column;
-      align-items: center;
-
-      p-button {
-        width: 55%;
-      }
-
-      .text-container {
-        align-items: center;
-        margin-bottom: 4.2rem;
-      }
-    }
-
-    .supports-container {
-      padding: 4.2rem 2.5rem 8.5rem 2.5rem;
-
-      .content-container {
-        flex-direction: column;
-        align-items: center;
-
-        .left-bar {
-          width: 100%;
-          padding: 0 4.8rem 3.4rem 4.8rem;
-        }
-
-        .right-bar {
-          width: 100%;
-          padding: 0 4.8rem 0 4.8rem;
-          iframe {
-            width: 100%;
-            aspect-ratio: 1.77 / 1;
-          }
-        }
-      }
-    }
-
-    .carousel-container {
-      .slide {
-        max-width: 100vw;
-        padding-left: 2.5rem;
-
-        .content-container {
-          .text-container {
-            padding-left: 3.43rem;
-            width: 40vw;
-          }
-        }
-      }
-    }
+  .discover-research-container {
+    background: var(--gradient-1);
   }
 
-  .small {
-    .better-way-container {
-      flex-direction: column;
-      align-items: center;
-
-      p-button {
-        width: 55%;
-      }
-
-      .text-container {
-        align-items: center;
-        margin-bottom: 4.2rem;
-      }
-    }
-
-    .supports-container {
-      padding: 4.2rem 2.5rem 8.5rem 2.5rem;
-
-      .content-container {
-        flex-direction: column;
-        align-items: center;
-
-        .left-bar {
-          width: 100%;
-          padding: 0 4.8rem 3.4rem 4.8rem;
-        }
-
-        .right-bar {
-          width: 100%;
-          padding: 0 4.8rem 3.4rem 4.8rem;
-          iframe {
-            width: 100%;
-            aspect-ratio: 1.77 / 1;
-          }
-        }
-      }
-    }
-
-    .carousel-container {
-      .slide {
-        justify-content: center;
-        padding: 2.5rem 8rem 2.5rem 8rem;
-        height: 100%;
-
-        .user-image {
-          display: none;
-        }
-
-        .content-container {
-          .text-container {
-            padding-left: 3.43rem;
-            width: 100%;
-          }
-        }
-      }
-    }
-
-    .integrations-main-small {
-      padding: 4.2rem 0 8.5rem 0;
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
-      gap: 10px;
-
-      .integrations-bundle {
-        display: flex;
-        flex-direction: column;
-        row-gap: 1.7rem;
-        align-items: center;
-      }
-    }
+  .arrow-down {
+    color: var(--grey-1);
   }
 
-  .mobile {
-    .better-way-container {
-      flex-direction: column;
-      align-items: center;
-
-      p-button {
-        width: 75%;
-      }
-
-      .text-container {
-        width: 100%;
-        text-align: center;
-        align-items: center;
-        margin-bottom: 4.2rem;
-      }
-
-      img {
-        width: 100%;
-      }
-    }
-
-    .supports-container {
-      padding: 4.2rem 2.5rem 8.5rem 2.5rem;
-
-      .content-container {
-        flex-direction: column;
-        align-items: center;
-
-        .left-bar {
-          width: 100%;
-          padding: 0 0 3.4rem 0;
-
-          .info-section {
-            .icons-wrapper {
-              padding: 0 1rem 0 0;
-            }
-          }
-        }
-
-        .right-bar {
-          width: 100%;
-          iframe {
-            width: 100%;
-            aspect-ratio: 1.77 / 1;
-          }
-        }
-      }
-    }
-
-    .carousel-container {
-      .slide {
-        justify-content: center;
-        padding: 2.5rem 1.1rem 2.5rem 1.1rem;
-        height: 100%;
-
-        .user-image {
-          display: none;
-        }
-
-        .content-container {
-          .text-container {
-            padding-left: 3.43rem;
-            width: 100%;
-          }
-        }
-      }
-    }
+  .youtube-frame {
+    border: none;
+    width: 100%;
+    aspect-ratio: 2 / 1;
+  }
 
-    .integrations-main-mobile {
-      padding-bottom: 4.2rem;
+  .carousel-container {
+    background: var(--bg-blue-3);
 
-      .slide {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        row-gap: 2rem;
-        width: 100%;
-      }
+    .quote-icon {
+      color: var(--pr-blue-1);
+      width: 2rem;
+      height: 2rem;
     }
   }
 }
diff --git a/src/app/features/home/pages/home-logged-out/home-logged-out.component.ts b/src/app/features/home/pages/home-logged-out/home-logged-out.component.ts
index 16dd66261..ffb90d2da 100644
--- a/src/app/features/home/pages/home-logged-out/home-logged-out.component.ts
+++ b/src/app/features/home/pages/home-logged-out/home-logged-out.component.ts
@@ -1,31 +1,22 @@
 import { TranslatePipe } from '@ngx-translate/core';
 
 import { Button } from 'primeng/button';
-import { CarouselModule } from 'primeng/carousel';
-import { InputText } from 'primeng/inputtext';
+import { Carousel } from 'primeng/carousel';
 
 import { NgOptimizedImage } from '@angular/common';
-import { Component, inject, signal } from '@angular/core';
-import { toSignal } from '@angular/core/rxjs-interop';
-import { FormsModule } from '@angular/forms';
+import { Component } from '@angular/core';
 
-import { IS_MEDIUM, IS_SMALL, IS_WEB, IS_XSMALL } from '@shared/utils';
+import { IconComponent, SearchInputComponent } from '@osf/shared/components';
 
 import { integrationIcons, slides } from './data';
 
 @Component({
   selector: 'osf-home-logged-out',
-  imports: [CarouselModule, FormsModule, Button, InputText, NgOptimizedImage, TranslatePipe],
+  imports: [Carousel, Button, SearchInputComponent, IconComponent, NgOptimizedImage, TranslatePipe],
   templateUrl: './home-logged-out.component.html',
   styleUrl: './home-logged-out.component.scss',
 })
 export class HomeLoggedOutComponent {
-  searchValue = signal('');
-  isWeb = toSignal(inject(IS_WEB));
-  isMedium = toSignal(inject(IS_MEDIUM));
-  isSmall = toSignal(inject(IS_SMALL));
-  isXSmall = toSignal(inject(IS_XSMALL));
-
   icons = integrationIcons;
   slides = slides;
 }
diff --git a/src/app/features/institutions/institutions.component.ts b/src/app/features/institutions/institutions.component.ts
index 2b5557c25..f1c6c4d17 100644
--- a/src/app/features/institutions/institutions.component.ts
+++ b/src/app/features/institutions/institutions.component.ts
@@ -7,7 +7,16 @@ import { PaginatorState } from 'primeng/paginator';
 import { debounceTime, distinctUntilChanged } from 'rxjs';
 
 import { NgOptimizedImage } from '@angular/common';
-import { ChangeDetectionStrategy, Component, DestroyRef, effect, inject, signal, untracked } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  DestroyRef,
+  effect,
+  HostBinding,
+  inject,
+  signal,
+  untracked,
+} from '@angular/core';
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import { FormControl } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -38,6 +47,8 @@ import { FetchInstitutions, InstitutionsSelectors } from '@shared/stores';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class InstitutionsComponent {
+  @HostBinding('class') classes = 'flex-1 flex flex-column w-full h-full';
+
   private readonly route = inject(ActivatedRoute);
   private readonly router = inject(Router);
   private readonly destroyRef = inject(DestroyRef);
diff --git a/src/app/shared/components/add-project-form/add-project-form.component.ts b/src/app/shared/components/add-project-form/add-project-form.component.ts
index c14fbf65c..561f0559b 100644
--- a/src/app/shared/components/add-project-form/add-project-form.component.ts
+++ b/src/app/shared/components/add-project-form/add-project-form.component.ts
@@ -20,10 +20,9 @@ import { CreateProject, GetMyProjects, MyProjectsSelectors } from '@osf/features
 import { ProjectFormControls } from '@osf/shared/enums/create-project-form-controls.enum';
 import { ProjectForm } from '@osf/shared/models/create-project-form.model';
 import { CustomValidators } from '@osf/shared/utils';
+import { InstitutionsSelectors } from '@shared/stores/institutions';
 import { IS_XSMALL } from '@shared/utils/breakpoints.tokens';
 
-import { InstitutionsSelectors } from 'src/app/shared/stores/institutions';
-
 @Component({
   selector: 'osf-add-project-form',
   imports: [
diff --git a/src/app/shared/components/icon/icon.component.html b/src/app/shared/components/icon/icon.component.html
index 45428a6dc..fcc291098 100644
--- a/src/app/shared/components/icon/icon.component.html
+++ b/src/app/shared/components/icon/icon.component.html
@@ -1,3 +1,3 @@
-<span class="flex align-items-center">
+<span class="flex align-items-center w-full h-full">
   <i [class]="iconClass()"></i>
 </span>
diff --git a/src/assets/styles/_base.scss b/src/assets/styles/_base.scss
index 3186e37a4..10379dc16 100644
--- a/src/assets/styles/_base.scss
+++ b/src/assets/styles/_base.scss
@@ -89,8 +89,11 @@
   svg {
     outline: none;
   }
-}
 
-.cursor-not-allowed {
-  cursor: not-allowed;
+  label {
+    display: block;
+    color: var(--dark-blue-1);
+    margin-bottom: mix.rem(4px);
+    font-weight: 400;
+  }
 }
diff --git a/src/assets/styles/_common.scss b/src/assets/styles/_common.scss
index 88760866c..70e6783a9 100644
--- a/src/assets/styles/_common.scss
+++ b/src/assets/styles/_common.scss
@@ -93,6 +93,13 @@
 }
 
 // ------------------------- Universal custom hover state -------------------------
+
 .grey-border-color {
   border-color: var(--grey-2);
 }
+
+// ------------------------- Cursor not allowed -------------------------
+
+.cursor-not-allowed {
+  cursor: not-allowed;
+}
diff --git a/src/assets/styles/overrides/carousel.scss b/src/assets/styles/overrides/carousel.scss
index 0ace65d1a..24c20c789 100644
--- a/src/assets/styles/overrides/carousel.scss
+++ b/src/assets/styles/overrides/carousel.scss
@@ -1,26 +1,8 @@
 @use "../variables" as var;
 
 .p-carousel {
-  .p-carousel-prev-button,
-  .p-carousel-next-button {
-    display: none;
-  }
-
-  .p-carousel-indicator-active {
-    .p-carousel-indicator-button {
-      background: var.$pr-blue-1;
-    }
-  }
-
-  .p-carousel-indicator-button {
-    background: var.$grey-2;
-    width: 1.1rem;
-    height: 1.1rem;
-    border-radius: 50%;
-  }
-
-  .p-carousel-indicator-list {
-    margin-top: 1.7rem;
-    column-gap: 1.7rem;
-  }
+  --p-carousel-indicator-width: 1rem;
+  --p-carousel-indicator-height: 1rem;
+  --p-carousel-indicator-border-radius: 50%;
+  --p-carousel-indicator-list-gap: 1.5rem;
 }
diff --git a/src/assets/styles/overrides/checkbox.scss b/src/assets/styles/overrides/checkbox.scss
index 873bb2dff..3ad2f5311 100644
--- a/src/assets/styles/overrides/checkbox.scss
+++ b/src/assets/styles/overrides/checkbox.scss
@@ -1,5 +1,3 @@
-@use "../variables" as var;
-
 .affiliation-checkbox {
   --p-checkbox-border-color: var(--pr-blue-1);
 }

From 09f98f45f2e49a6f774aed8142f33f507b3982fd Mon Sep 17 00:00:00 2001
From: nsemets <nsemets@exoft.net>
Date: Tue, 24 Jun 2025 14:18:49 +0300
Subject: [PATCH 2/2] fix(styles): fixed styles

---
 .../add-project-form.component.scss           | 14 ++-
 src/assets/styles/_base.scss                  |  6 +-
 src/assets/styles/_variables.scss             |  3 +
 src/assets/styles/overrides/input.scss        | 91 +++----------------
 4 files changed, 27 insertions(+), 87 deletions(-)

diff --git a/src/app/shared/components/add-project-form/add-project-form.component.scss b/src/app/shared/components/add-project-form/add-project-form.component.scss
index c2a84a205..a18b1b4c4 100644
--- a/src/app/shared/components/add-project-form/add-project-form.component.scss
+++ b/src/app/shared/components/add-project-form/add-project-form.component.scss
@@ -1,12 +1,10 @@
 @use "assets/styles/variables" as var;
 
-:host {
-  label {
-    color: var.$dark-blue-1;
-  }
+label {
+  color: var.$dark-blue-1;
+}
 
-  h3 {
-    text-transform: none;
-    color: var.$dark-blue-1;
-  }
+h3 {
+  text-transform: none;
+  color: var.$dark-blue-1;
 }
diff --git a/src/assets/styles/_base.scss b/src/assets/styles/_base.scss
index 10379dc16..e76385c06 100644
--- a/src/assets/styles/_base.scss
+++ b/src/assets/styles/_base.scss
@@ -3,15 +3,13 @@
 
 @layer reset, base, primeng;
 
-@layer base {
+@layer reset {
   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }
-}
 
-@layer reset {
   html,
   body {
     color: var.$dark-blue-1;
@@ -89,7 +87,9 @@
   svg {
     outline: none;
   }
+}
 
+@layer base {
   label {
     display: block;
     color: var(--dark-blue-1);
diff --git a/src/assets/styles/_variables.scss b/src/assets/styles/_variables.scss
index e50aed655..0a452f422 100644
--- a/src/assets/styles/_variables.scss
+++ b/src/assets/styles/_variables.scss
@@ -138,8 +138,11 @@ $white-60: var(--white-60);
   --gradient-3: linear-gradient(90.12deg, #dbedfb 0.03%, #eff4fc 54.38%, #dbedfb 98.07%);
 
   // Primeng changes
+  --p-form-field-color: var(--dark-blue-1);
   --p-form-field-border-color: var(--grey-2);
   --p-form-field-hover-border-color: var(--grey-1);
+  --p-form-field-disabled-background: var(--white);
+  --p-form-field-disabled-color: var(--grey-1);
 
   // Stepper
   --stepper-step-background: var(--white);
diff --git a/src/assets/styles/overrides/input.scss b/src/assets/styles/overrides/input.scss
index 33d934082..aa4405dec 100644
--- a/src/assets/styles/overrides/input.scss
+++ b/src/assets/styles/overrides/input.scss
@@ -2,91 +2,30 @@
 @use "../mixins" as mix;
 
 .p-inputtext {
-  color: var.$dark-blue-1;
-  background: var.$white;
-  border-color: var.$grey-2;
+  --p-inputtext-padding-y: 0.6rem;
+  --p-inputtext-hover-border-color: var(--pr-blue-1);
 
-  &:not([readonly]):enabled:hover {
-    border-color: var.$pr-blue-1;
-  }
-}
-
-.p-password,
-.p-inputtext {
-  box-shadow: none;
-  border-radius: mix.rem(8px);
-  font-size: mix.rem(16px);
-  height: mix.rem(44px);
   width: 100%;
-}
 
-label {
-  display: block;
-  color: var.$dark-blue-1;
-  margin-bottom: mix.rem(4px);
-  font-weight: 400;
+  &[readonly] {
+    --p-inputtext-hover-border-color: var(--grey-2);
+    --p-inputtext-border-color: var(--grey-2);
+    --p-inputtext-focus-border-color: var(--grey-2);
+    --p-inputtext-focus-active-color: var(--grey-2);
+  }
 }
 
 .p-inputtext.ng-touched.ng-invalid,
 .p-inputtext.ng-dirty.ng-invalid {
-  border: 1px solid var.$red-1;
+  --p-inputtext-border-color: var(--red-1);
+  --p-inputtext-placeholder-color: var(--red-1);
 }
 
-p-password.ng-touched.ng-invalid {
-  .p-password-input {
-    border: 1px solid var.$red-1;
-  }
-}
-
-.p-inputtext.ng-touched.ng-invalid::placeholder,
-.p-inputtext.ng-dirty.ng-invalid::placeholder {
-  color: var.$grey-1;
-}
-
-.input-search {
-  position: relative;
-  width: 100%;
-  display: flex;
-  align-items: center;
-
-  i {
-    position: absolute;
-    left: 0.86rem;
-    color: var.$dark-blue-1;
-    font-size: 1.1rem;
-  }
-
-  .p-inputtext {
-    height: 3.2rem;
-    padding-left: 2.86rem;
-  }
-}
+.p-textarea {
+  --p-textarea-shadow: none;
+  --p-textarea-hover-border-color: var(--pr-blue-1);
+  --p-textarea-focus-border-color: var(--pr-blue-1);
+  --p-textarea-active-border-color: var(--pr-blue-1);
 
-.p-textarea,
-.p-textarea:enabled:focus {
-  border-color: var.$grey-2;
-  font-size: mix.rem(16px);
-  border-radius: mix.rem(8px);
-  box-shadow: none;
   resize: none;
-
-  &:enabled:hover {
-    border-color: var.$pr-blue-1;
-  }
-}
-
-.addon-input {
-  .p-inputtext {
-    border-bottom-left-radius: 0;
-    border-top-left-radius: 0;
-    border-left-style: none;
-  }
-
-  .p-inputtext.ng-touched.ng-invalid,
-  .p-inputtext.ng-dirty.ng-invalid {
-    border-color: var.$grey-2;
-    border-bottom-left-radius: 0;
-    border-top-left-radius: 0;
-    border-left-style: none;
-  }
 }