From 8309caa1facdfad784e0ee60097f705cbae21e46 Mon Sep 17 00:00:00 2001
From: ibrahimjaved12 <ibrahim.javed@arbisoft.com>
Date: Wed, 6 Nov 2024 19:03:30 +0500
Subject: [PATCH 01/18] Refactor layout: Adjust flex properties for
 responsiveness

---
 www/assets/css/carousel.scss           | 18 ++++++++++++++++++
 www/assets/css/home.scss               |  7 ++++---
 www/layouts/partials/home_stories.html | 22 +++++++++++-----------
 www/layouts/partials/stories_card.html | 16 ++++++++++++----
 4 files changed, 45 insertions(+), 18 deletions(-)

diff --git a/www/assets/css/carousel.scss b/www/assets/css/carousel.scss
index e895f4eaf..a0193bac6 100644
--- a/www/assets/css/carousel.scss
+++ b/www/assets/css/carousel.scss
@@ -65,6 +65,7 @@
 
   .item-wrapper {
     padding: 0 10px;
+    max-width: 411px;
 
     &:first-child {
       padding-left: 0;
@@ -75,3 +76,20 @@
     }
   }
 }
+
+.testimonial-image-wrapper {
+  position: relative;
+  width: 100%;
+  // max-width:391px;
+  padding-top: 56.25%; // 16:9 aspect ratio
+
+  .testimonial-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    // max-height:197px;
+    object-fit: cover;
+  }
+}
diff --git a/www/assets/css/home.scss b/www/assets/css/home.scss
index 0cbcc6ace..d77e421d0 100644
--- a/www/assets/css/home.scss
+++ b/www/assets/css/home.scss
@@ -368,9 +368,10 @@ $searchbox-height: 50px;
   }
 
   .testimonial {
-    height: 280px;
-    width: 280px;
-    color: white;
+    // height: 280px;
+    // height: 450px;
+    // width: 411px;
+    // color: white;
     background-size: cover;
 
     .name {
diff --git a/www/layouts/partials/home_stories.html b/www/layouts/partials/home_stories.html
index 2888c0565..3f071fdd3 100644
--- a/www/layouts/partials/home_stories.html
+++ b/www/layouts/partials/home_stories.html
@@ -1,6 +1,6 @@
 {{- $stories := where .Site.RegularPages "Type" "==" "stories" -}}
 {{- $storiesSection := .Site.GetPage "section" "stories" -}}
-{{- $breakdowns := (dict "xs-sm" (dict "size" 1 "class" "d-flex d-md-none") "md" (dict "size" 2 "class" "d-none d-md-flex d-lg-none") "lg" (dict "size" 3 "class" "d-none d-lg-flex d-xl-none") "xl" (dict "size" 4 "class" "d-none d-xl-flex")) -}}
+{{- $breakdowns := (dict "xs-sm" (dict "size" 1 "class" "d-flex d-md-none") "md" (dict "size" 2 "class" "d-none d-md-flex d-lg-none") "lg" (dict "size" 3 "class" "d-none d-lg-flex d-xl-none") "xl" (dict "size" 3 "class" "d-none d-xl-flex")) -}}
 <div class="home-testimonials standard-width container mx-auto my-3">
   {{ range $breakpoint, $carouselInfo := $breakdowns }}
     {{ $itemsInCarousel := index $carouselInfo "size" }}
@@ -11,24 +11,24 @@
       <div id="{{ $carouselId }}" class="carousel slide" data-interval="false" data-touch="true" data-ride="carousel">
         <div class="carousel-header d-flex flex-row justify-content-between font-weight-bold">
           <h2>OCW Stories</h2>
-          {{ if gt (len $stories) 4 }}
-          {{ partial "carousel_controls.html" $carouselId }}
+          {{ if gt (len $stories) 3 }}
+            {{ partial "carousel_controls.html" $carouselId }}
           {{ end }}
         </div>
-        <div class="carousel-inner d-flex {{ if not $isMobile }}container{{ end }} mt-2 px-0">
+        <div class="carousel-inner">
           {{ range $index, $testimonial := $stories  }}
             {{ with $testimonial }}
               {{ $modulo := (mod $index $itemsInCarousel) }}
               {{ $group := (div $index $itemsInCarousel) }}
               {{ if eq $modulo 0 }}
-              <div class="carousel-item {{ if not $isMobile }}row{{end}} {{ if eq $group 0 }}active{{ end }}">
-              {{ end }}
-                <div class="item-wrapper {{ if not $isMobile }}col-{{ (div 12 $itemsInCarousel) }}{{ end }} w-100 d-flex justify-content-center">
-                  <div class="item-wrapper w-100 d-flex justify-content-center">
-                    {{ partial "stories_card.html" $testimonial }}
+              <div class="carousel-item {{ if not $isMobile }}row{{end}} {{ if eq $group 0 }}active{{ end }} justify-content-around">
+                {{ end }}
+                  <div class="item-wrapper {{ if not $isMobile }}col-{{ (div 12 $itemsInCarousel) }}{{ end }} align-items-center justify-content-center">
+                    <!-- <div class="item-wrapper w-100 d-flex justify-content-center"> -->
+                      {{ partial "stories_card.html" $testimonial }}
+                    <!-- </div> -->
                   </div>
-                </div>
-              {{ if (or (eq $modulo (sub $itemsInCarousel 1)) (eq $index (sub (len $stories) 1))) }}
+                {{ if (or (eq $modulo (sub $itemsInCarousel 1)) (eq $index (sub (len $stories) 1))) }}
               </div>
               {{ end }}
             {{ end }}
diff --git a/www/layouts/partials/stories_card.html b/www/layouts/partials/stories_card.html
index 8e63f2d99..c3e87d7f0 100644
--- a/www/layouts/partials/stories_card.html
+++ b/www/layouts/partials/stories_card.html
@@ -1,14 +1,22 @@
 {{- $testimonial := . -}}
 <a href="{{ $testimonial.RelPermalink }}" class="testimonial-link">
-  <div
-    class="testimonial d-flex flex-column justify-content-end rounded"
-    style="background-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000000 100%), url({{ partial "resource_url.html" (dict "context" . "url" (partial "resource_metadata.html" $testimonial.Params.image.content).Params.file) }});"
-  >
+  <div class="testimonial d-flex flex-column rounded">
+    <div class="testimonial-image-wrapper">
+      <img 
+        src="{{ partial "resource_url.html" (dict "context" . "url" (partial "resource_metadata.html" $testimonial.Params.image.content).Params.file) }}" 
+        alt="{{ $testimonial.Title }}" 
+        class="testimonial-image"
+      >
+    </div>
     <div class="name font-weight-bold pl-3">
       {{ $testimonial.Title }}
     </div>
     <div class="occupation-location pl-3 pb-2">
       {{ $testimonial.Params.occupation }} - {{ $testimonial.Params.location }}
     </div>
+    <div class="story-body pl-3 pb-2">
+      {{ $testimonial.Content | plainify | replaceRE "\\s+" " " | truncate 100 }}
+    </div>
   </div>
+
 </a>

From f75a64553653661644d3b5ea71cbcbb487c69dff Mon Sep 17 00:00:00 2001
From: ibrahimjaved12 <ibrahim.javed@arbisoft.com>
Date: Thu, 7 Nov 2024 16:32:13 +0500
Subject: [PATCH 02/18] Improve homepage

---
 www/assets/css/carousel.scss           |  7 +++++++
 www/layouts/partials/home_stories.html |  4 ++--
 www/layouts/partials/stories_card.html | 28 ++++++++++++++++++--------
 3 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/www/assets/css/carousel.scss b/www/assets/css/carousel.scss
index a0193bac6..8fcf42ab2 100644
--- a/www/assets/css/carousel.scss
+++ b/www/assets/css/carousel.scss
@@ -66,6 +66,12 @@
   .item-wrapper {
     padding: 0 10px;
     max-width: 411px;
+    border-radius: 10px;
+    border: 1px solid var(--Border-Grey, #dfe5ec);
+    background: #fff;
+
+    /* Shadow */
+    box-shadow: 0px 2px 10px 0px rgba(120, 169, 197, 0.15);
 
     &:first-child {
       padding-left: 0;
@@ -91,5 +97,6 @@
     height: 100%;
     // max-height:197px;
     object-fit: cover;
+    border-radius: 5px;
   }
 }
diff --git a/www/layouts/partials/home_stories.html b/www/layouts/partials/home_stories.html
index 3f071fdd3..6d69c9ce1 100644
--- a/www/layouts/partials/home_stories.html
+++ b/www/layouts/partials/home_stories.html
@@ -21,9 +21,9 @@ <h2>OCW Stories</h2>
               {{ $modulo := (mod $index $itemsInCarousel) }}
               {{ $group := (div $index $itemsInCarousel) }}
               {{ if eq $modulo 0 }}
-              <div class="carousel-item {{ if not $isMobile }}row{{end}} {{ if eq $group 0 }}active{{ end }} justify-content-around">
+              <div class="carousel-item {{ if not $isMobile }}row{{end}} {{ if eq $group 0 }}active{{ end }} justify-content-between ml-0">
                 {{ end }}
-                  <div class="item-wrapper {{ if not $isMobile }}col-{{ (div 12 $itemsInCarousel) }}{{ end }} align-items-center justify-content-center">
+                  <div style="padding:10px;" class="item-wrapper {{ if not $isMobile }}col-{{ (div 12 $itemsInCarousel) }}{{ end }} align-items-center justify-content-center">
                     <!-- <div class="item-wrapper w-100 d-flex justify-content-center"> -->
                       {{ partial "stories_card.html" $testimonial }}
                     <!-- </div> -->
diff --git a/www/layouts/partials/stories_card.html b/www/layouts/partials/stories_card.html
index c3e87d7f0..4493d8113 100644
--- a/www/layouts/partials/stories_card.html
+++ b/www/layouts/partials/stories_card.html
@@ -1,21 +1,33 @@
 {{- $testimonial := . -}}
 <a href="{{ $testimonial.RelPermalink }}" class="testimonial-link">
   <div class="testimonial d-flex flex-column rounded">
-    <div class="testimonial-image-wrapper">
+    <div class="testimonial-image-wrapper" style="margin-bottom: 20px">
       <img 
         src="{{ partial "resource_url.html" (dict "context" . "url" (partial "resource_metadata.html" $testimonial.Params.image.content).Params.file) }}" 
         alt="{{ $testimonial.Title }}" 
         class="testimonial-image"
       >
     </div>
-    <div class="name font-weight-bold pl-3">
-      {{ $testimonial.Title }}
+    <div style="padding: 0px 20px; margin-bottom: 20px">
+      <div class="name font-weight-bold" style="font-size: 20px">
+        {{ $testimonial.Title }}
+      </div>
+      <div class="occupation-wrapper d-flex justify-content-between">
+        <div class="occupation">
+          {{ $testimonial.Params.occupation }}
+        </div>
+        <div class="occupation-location">
+          {{ $testimonial.Params.location }}
+        </div>
+      </div>
     </div>
-    <div class="occupation-location pl-3 pb-2">
-      {{ $testimonial.Params.occupation }} - {{ $testimonial.Params.location }}
-    </div>
-    <div class="story-body pl-3 pb-2">
-      {{ $testimonial.Content | plainify | replaceRE "\\s+" " " | truncate 100 }}
+    <div class="story-body" style="padding: 0px 20px 20px 20px">
+      <div style="margin-bottom: 20px">
+        {{ $testimonial.Content | plainify | replaceRE "\\s+" " " | truncate 150 }}
+      </div>
+      <div>
+        <a href="">Read Full Story</a>
+      </div>
     </div>
   </div>
 

From 9b34fa7eca03611713ccc1c2c8f9b4f9c348b90e Mon Sep 17 00:00:00 2001
From: ibrahimjaved12 <ibrahim.javed@arbisoft.com>
Date: Thu, 7 Nov 2024 17:28:59 +0500
Subject: [PATCH 03/18] Add View All Stories Button

---
 .../images/ocw_stories_btn_arrow_right.svg    | 34 +++++++++++++++++++
 www/layouts/partials/home_stories.html        | 19 ++++++++---
 www/layouts/partials/stories_card.html        |  2 +-
 3 files changed, 50 insertions(+), 5 deletions(-)
 create mode 100644 base-theme/assets/images/ocw_stories_btn_arrow_right.svg

diff --git a/base-theme/assets/images/ocw_stories_btn_arrow_right.svg b/base-theme/assets/images/ocw_stories_btn_arrow_right.svg
new file mode 100644
index 000000000..592eeabf3
--- /dev/null
+++ b/base-theme/assets/images/ocw_stories_btn_arrow_right.svg
@@ -0,0 +1,34 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="7" height="12" viewBox="0 0 7 12" fill="none">
+  <path d="M1 0H2V1H1V0Z" fill="#A31F34"/>
+  <path d="M2 1H3V2H2V1Z" fill="#A31F34"/>
+  <path d="M3 2H4V3H3V2Z" fill="#A31F34"/>
+  <path d="M4 3H5V4H4V3Z" fill="#A31F34"/>
+  <path d="M5 4H6V5H5V4Z" fill="#A31F34"/>
+  <path d="M6 5H7V6H6V5Z" fill="#A31F34"/>
+  <path d="M6 7V8H5V7H6Z" fill="#A31F34"/>
+  <path d="M5 8V9H4V8H5Z" fill="#A31F34"/>
+  <path d="M4 9V10H3V9H4Z" fill="#A31F34"/>
+  <path d="M3 10V11H2V10H3Z" fill="#A31F34"/>
+  <path d="M2 11V12H1V11H2Z" fill="#A31F34"/>
+  <path d="M1 1H2V2H1V1Z" fill="#A31F34"/>
+  <path d="M2 2H3V3H2V2Z" fill="#A31F34"/>
+  <path d="M3 3H4V4H3V3Z" fill="#A31F34"/>
+  <path d="M4 4H5V5H4V4Z" fill="#A31F34"/>
+  <path d="M5 5H6V6H5V5Z" fill="#A31F34"/>
+  <path d="M6 6H7V7H6V6Z" fill="#A31F34"/>
+  <path d="M5 7V8H4V7H5Z" fill="#A31F34"/>
+  <path d="M4 8V9H3V8H4Z" fill="#A31F34"/>
+  <path d="M3 9V10H2V9H3Z" fill="#A31F34"/>
+  <path d="M2 10V11H1V10H2Z" fill="#A31F34"/>
+  <path d="M4.37113e-08 1H1V2H4.37113e-08V1Z" fill="#A31F34"/>
+  <path d="M1 2H2V3H1V2Z" fill="#A31F34"/>
+  <path d="M2 3H3V4H2V3Z" fill="#A31F34"/>
+  <path d="M3 4H4V5H3V4Z" fill="#A31F34"/>
+  <path d="M4 5H5V6H4V5Z" fill="#A31F34"/>
+  <path d="M5 6H6V7H5V6Z" fill="#A31F34"/>
+  <path d="M5 6V7H4V6H5Z" fill="#A31F34"/>
+  <path d="M4 7V8H3V7H4Z" fill="#A31F34"/>
+  <path d="M3 8V9H2V8H3Z" fill="#A31F34"/>
+  <path d="M2 9V10H1V9H2Z" fill="#A31F34"/>
+  <path d="M1 10V11H0L4.37113e-08 10H1Z" fill="#A31F34"/>
+</svg>
\ No newline at end of file
diff --git a/www/layouts/partials/home_stories.html b/www/layouts/partials/home_stories.html
index 6d69c9ce1..ebba3dd1f 100644
--- a/www/layouts/partials/home_stories.html
+++ b/www/layouts/partials/home_stories.html
@@ -37,9 +37,20 @@ <h2>OCW Stories</h2>
       </div>
     </div>
   {{ end }}
-  <div class="d-flex py-4">
-      <div class="ml-auto">
-          <a class="view-all-link" href="{{ $storiesSection.RelPermalink }}">View All OCW Stories</a>
-      </div>
+  <!-- <div class="d-flex py-4">
+    <div class="ml-auto">
+      <a class="view-all-link" href="{{ $storiesSection.RelPermalink }}">View All OCW Stories</a>
+    </div>
+  </div> -->
+  <div class="d-flex justify-content-center my-4">
+    <a href="#" class="btn px-4 py-3 text-decoration-none d-flex align-items-center" style="padding: 15px 20px; border-radius: 3px; border: 1px solid var(--Border-Grey, #DFE5EC); background: var(--white-mit-brand, #FFF); font-weight: 600; color:#03152D;">
+      View All OCW Stories
+      <img
+        class=""
+        src="{{ partial "get_asset_webpack_url.html" "images/ocw_stories_btn_arrow_right.svg" }}"
+        alt=""
+        style="margin-left:10px"
+      />
+    </a>
   </div>
 </div>
diff --git a/www/layouts/partials/stories_card.html b/www/layouts/partials/stories_card.html
index 4493d8113..3b9932cc5 100644
--- a/www/layouts/partials/stories_card.html
+++ b/www/layouts/partials/stories_card.html
@@ -26,7 +26,7 @@
         {{ $testimonial.Content | plainify | replaceRE "\\s+" " " | truncate 150 }}
       </div>
       <div>
-        <a href="">Read Full Story</a>
+        <a href="" style="color:#0A3E56">Read Full Story</a>
       </div>
     </div>
   </div>

From 994e6a27a50ffcbb2bea41a883ff0c7a15cbe8c7 Mon Sep 17 00:00:00 2001
From: ibrahimjaved12 <ibrahim.javed@arbisoft.com>
Date: Fri, 8 Nov 2024 12:06:08 +0500
Subject: [PATCH 04/18] Add line-wise truncation for consistent layout

---
 www/assets/css/carousel.scss           | 7 +++++++
 www/layouts/partials/stories_card.html | 6 +++---
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/www/assets/css/carousel.scss b/www/assets/css/carousel.scss
index 8fcf42ab2..f100bba28 100644
--- a/www/assets/css/carousel.scss
+++ b/www/assets/css/carousel.scss
@@ -100,3 +100,10 @@
     border-radius: 5px;
   }
 }
+.story-body div {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 5;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
diff --git a/www/layouts/partials/stories_card.html b/www/layouts/partials/stories_card.html
index 3b9932cc5..ab6a06a74 100644
--- a/www/layouts/partials/stories_card.html
+++ b/www/layouts/partials/stories_card.html
@@ -1,6 +1,6 @@
 {{- $testimonial := . -}}
 <a href="{{ $testimonial.RelPermalink }}" class="testimonial-link">
-  <div class="testimonial d-flex flex-column rounded">
+  <div class="testimonial d-flex flex-column rounded h-100">
     <div class="testimonial-image-wrapper" style="margin-bottom: 20px">
       <img 
         src="{{ partial "resource_url.html" (dict "context" . "url" (partial "resource_metadata.html" $testimonial.Params.image.content).Params.file) }}" 
@@ -21,9 +21,9 @@
         </div>
       </div>
     </div>
-    <div class="story-body" style="padding: 0px 20px 20px 20px">
+    <div class="story-body d-flex flex-column justify-content-between h-100" style="padding: 0px 20px 20px 20px">
       <div style="margin-bottom: 20px">
-        {{ $testimonial.Content | plainify | replaceRE "\\s+" " " | truncate 150 }}
+        {{ $testimonial.Content | plainify | replaceRE "\\s+" " " }}
       </div>
       <div>
         <a href="" style="color:#0A3E56">Read Full Story</a>

From c2c1c8ae710c68a1944de676434c5c02fae08eb8 Mon Sep 17 00:00:00 2001
From: ibrahimjaved12 <ibrahim.javed@arbisoft.com>
Date: Fri, 8 Nov 2024 14:55:19 +0500
Subject: [PATCH 05/18] Remove pre-existing bootstrap col-X properties and use
 flex instead

---
 www/layouts/partials/home_stories.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/www/layouts/partials/home_stories.html b/www/layouts/partials/home_stories.html
index ebba3dd1f..e005f8d20 100644
--- a/www/layouts/partials/home_stories.html
+++ b/www/layouts/partials/home_stories.html
@@ -21,9 +21,9 @@ <h2>OCW Stories</h2>
               {{ $modulo := (mod $index $itemsInCarousel) }}
               {{ $group := (div $index $itemsInCarousel) }}
               {{ if eq $modulo 0 }}
-              <div class="carousel-item {{ if not $isMobile }}row{{end}} {{ if eq $group 0 }}active{{ end }} justify-content-between ml-0">
+              <div class="carousel-item {{ if not $isMobile }}row{{end}} {{ if eq $group 0 }}active{{ end }} flex-nowrap" style="flex: nowrap">
                 {{ end }}
-                  <div style="padding:10px;" class="item-wrapper {{ if not $isMobile }}col-{{ (div 12 $itemsInCarousel) }}{{ end }} align-items-center justify-content-center">
+                  <div style="padding:10px; flex: 1 1; margin-left: 10px; max-width: 100%" class="item-wrapper">
                     <!-- <div class="item-wrapper w-100 d-flex justify-content-center"> -->
                       {{ partial "stories_card.html" $testimonial }}
                     <!-- </div> -->

From 96418858e6e72e0ddfb59fc7084213524f334fe5 Mon Sep 17 00:00:00 2001
From: ibrahimjaved12 <ibrahim.javed@arbisoft.com>
Date: Fri, 8 Nov 2024 17:55:17 +0500
Subject: [PATCH 06/18] Revamp OCW Stories mobile responsiveness

---
 base-theme/assets/css/_breakpoints.scss |  4 ++++
 www/assets/css/carousel.scss            | 12 ++++++++++++
 www/layouts/partials/home_stories.html  |  4 ++--
 3 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/base-theme/assets/css/_breakpoints.scss b/base-theme/assets/css/_breakpoints.scss
index 9463ceeca..aebf12bcb 100644
--- a/base-theme/assets/css/_breakpoints.scss
+++ b/base-theme/assets/css/_breakpoints.scss
@@ -15,6 +15,10 @@
     @media (max-width: 800px) {
       @content;
     }
+  } @else if $name == sm-mobile {
+    @media (max-width: 767px) {
+      @content;
+    }
   } @else if $name == phone {
     @media (max-width: 580px) {
       @content;
diff --git a/www/assets/css/carousel.scss b/www/assets/css/carousel.scss
index f100bba28..922fb1d28 100644
--- a/www/assets/css/carousel.scss
+++ b/www/assets/css/carousel.scss
@@ -80,6 +80,18 @@
     &:last-child {
       padding-right: 0;
     }
+    // 801px - 991px (tablet)
+    @include breakpoint(tablet) {
+      max-width: 470.5px;
+    }
+    // 768px - 800px (mobile)
+    @include breakpoint(mobile) {
+      max-width: 335px;
+    }
+    // <= 767px (sm-mobile)
+    @include breakpoint(sm-mobile) {
+      max-width: 650px;
+    }
   }
 }
 
diff --git a/www/layouts/partials/home_stories.html b/www/layouts/partials/home_stories.html
index e005f8d20..99959ad89 100644
--- a/www/layouts/partials/home_stories.html
+++ b/www/layouts/partials/home_stories.html
@@ -21,9 +21,9 @@ <h2>OCW Stories</h2>
               {{ $modulo := (mod $index $itemsInCarousel) }}
               {{ $group := (div $index $itemsInCarousel) }}
               {{ if eq $modulo 0 }}
-              <div class="carousel-item {{ if not $isMobile }}row{{end}} {{ if eq $group 0 }}active{{ end }} flex-nowrap" style="flex: nowrap">
+              <div class="carousel-item row {{ if eq $group 0 }}active{{ end }} flex-nowrap justify-content-center" style="flex: nowrap">
                 {{ end }}
-                  <div style="padding:10px; flex: 1 1; margin-left: 10px; max-width: 100%" class="item-wrapper">
+                  <div style="padding:10px; flex: 1 1; margin-left: 10px;" class="item-wrapper">
                     <!-- <div class="item-wrapper w-100 d-flex justify-content-center"> -->
                       {{ partial "stories_card.html" $testimonial }}
                     <!-- </div> -->

From 455e4a887b3288547c87bbbf9a2c24070c24bf6c Mon Sep 17 00:00:00 2001
From: ibrahimjaved12 <ibrahim.javed@arbisoft.com>
Date: Fri, 8 Nov 2024 18:30:24 +0500
Subject: [PATCH 07/18] Add OCW Stories Banner

---
 www/layouts/home.html | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/www/layouts/home.html b/www/layouts/home.html
index e538dc264..f5674dd69 100644
--- a/www/layouts/home.html
+++ b/www/layouts/home.html
@@ -115,6 +115,28 @@ <h2>Your Donation Makes a Difference</h2>
   </div>
   {{ partial "ocw_news.html" . }}
   {{ partial "home_stories.html" . }}
+  <div class="d-flex justify-content-center my-4">
+    <div class="d-flex justify-content-between align-items-center" style="background: var(--Primary, #03152D); border-radius: 10px; padding: 40px; color: var(--white, #FFF);">
+      <div>
+        <h2 style="margin: 0; font-weight: bold; color:white;">Share your OCW story. We'd love to hear from you!</h2>
+        <p style="margin: 0;">How OCW has made an impact in your life.</p>
+      </div>
+      <a href="#" class="btn" style="padding: 15px 20px; border-radius: 3px; background: var(--white, #FFF); color: var(--Primary, #03152D); border: 1px solid var(--white, #FFF); font-weight: 600;">
+        Share your Story
+      </a>
+    </div>
+  </div>
+  <div class="d-flex justify-content-center my-4">
+    <div class="d-flex flex-column flex-md-row justify-content-between align-items-center" style="background: var(--Primary, #03152D); border-radius: 10px; padding: 40px; color: var(--white, #FFF);">
+      <div class="mb-3 mb-md-0 text-center text-md-left">
+        <h2 style="margin: 0; font-weight: bold; color:white;">Share your OCW story. We'd love to hear from you!</h2>
+        <p style="margin: 0;">How OCW has made an impact in your life.</p>
+      </div>
+      <a href="#" class="btn mt-3 mt-md-0 text-decoration-none" style="padding: 15px 20px; border-radius: 3px; background: var(--white, #FFF); color: var(--Primary, #03152D); border: 1px solid var(--white, #FFF); font-weight: 600;">
+        Share your Story
+      </a>
+    </div>
+  </div>  
   <div class="social-cards-wrapper">
     <div class="social-cards standard-width d-flex justify-content-center container">
       <div class="row w-100">

From a461015771ceb2b08e8eb6e463c99e11cbc2d460 Mon Sep 17 00:00:00 2001
From: ibrahimjaved12 <ibrahim.javed@arbisoft.com>
Date: Mon, 11 Nov 2024 20:02:40 +0500
Subject: [PATCH 08/18] Single Story Page and Stories List

---
 www/assets/css/carousel.scss    | 29 ++++++++++++++++
 www/layouts/stories/list.html   | 36 ++++++--------------
 www/layouts/stories/single.html | 60 ++++++++++++++++++++++++---------
 3 files changed, 85 insertions(+), 40 deletions(-)

diff --git a/www/assets/css/carousel.scss b/www/assets/css/carousel.scss
index 922fb1d28..68acc7690 100644
--- a/www/assets/css/carousel.scss
+++ b/www/assets/css/carousel.scss
@@ -94,7 +94,36 @@
     }
   }
 }
+.item-wrapper {
+  padding: 0 10px;
+  // max-width: 411px;
+  border-radius: 10px;
+  border: 1px solid var(--Border-Grey, #dfe5ec);
+  background: #fff;
+
+  /* Shadow */
+  box-shadow: 0px 2px 10px 0px rgba(120, 169, 197, 0.15);
+
+  &:first-child {
+    padding-left: 0;
+  }
 
+  &:last-child {
+    padding-right: 0;
+  }
+  // // 801px - 991px (tablet)
+  // @include breakpoint(tablet) {
+  //   max-width: 470.5px;
+  // }
+  // // 768px - 800px (mobile)
+  // @include breakpoint(mobile) {
+  //   max-width: 335px;
+  // }
+  // // <= 767px (sm-mobile)
+  // @include breakpoint(sm-mobile) {
+  //   max-width: 650px;
+  // }
+}
 .testimonial-image-wrapper {
   position: relative;
   width: 100%;
diff --git a/www/layouts/stories/list.html b/www/layouts/stories/list.html
index 8367ba8bb..a8cd5318b 100644
--- a/www/layouts/stories/list.html
+++ b/www/layouts/stories/list.html
@@ -5,33 +5,19 @@
   {{ block "header" . }}
   {{ partialCached "header" . }}
   {{end}}
-  <div class="testimonial-section container standard-width mx-auto mt-5 mb-5">
-    <h1>OCW Stories</h1>
-    <h3>Share your OCW story.</h3>
-    <p>
-      We'd love to hear from you! Please <a href="https://forms.gle/LvmpocNJBujDafqt9" target="_blank">share your story</a> about how OCW has made an impact in your life.
-    </p>
-    <div class="testimonials">
-      {{ range $story := $stories }}
-      <div class="testimonial d-flex flex-wrap flex-sm-nowrap">
-        <div class="img-container">
-          <img src="{{ partial "resource_url.html" (dict "context" . "url" (partial "resource_metadata.html" $story.Params.image.content).Params.file) }}" alt="" />
-        </div>
-        <div class="detail d-flex flex-column flex-nowrap justify-content-between p-0 ml-sm-5">
-          <div class="text">
-            <h2>{{ $story.Title }}</h2>
-            <p>{{ $story.Params.occupation }}</p>
-            <p class="location">{{ $story.Params.location }}</p>
-            <p class="summary">
-              {{ $story.Params.leadquote }}
-            </p>
-          </div>
-          <div>
-            <a href="{{ $story.RelPermalink }}">Read Full Story</a>
+  <div class="">
+    <div class="row">
+    {{ range $index, $testimonial := $stories  }}
+      {{ if or (eq (mod $index 8) 0) (eq (mod $index 8) 1) }}
+        <div class="row flex-nowrap justify-content-center col-12 col-md-6 col-lg-6 mb-4">
+      {{ else }}  
+        <div class="row flex-nowrap justify-content-center col-12 col-md-6 col-lg-4 mb-4">
+      {{ end }}
+          <div style="padding:10px; flex: 1 1; margin-left: 10px;" class="item-wrapper">
+            {{ partial "stories_card.html" $testimonial }}
           </div>
         </div>
-      </div>
-      {{ end }}
+    {{ end }}
     </div>
   </div>
   {{ block "footer" . }} {{ partialCached "footer" . }} {{end}}
diff --git a/www/layouts/stories/single.html b/www/layouts/stories/single.html
index e55ff9d6f..9e41ff50c 100644
--- a/www/layouts/stories/single.html
+++ b/www/layouts/stories/single.html
@@ -4,26 +4,56 @@
   {{ block "header" . }}
   {{ partialCached "header" . }}
   {{ end }}
-  <div class="testimonial-single container standard-width mx-auto mt-5 mb-5">
-    <h1>OCW Stories</h1>
-    <div class="testimonials">
-      <div class="testimonial d-flex flex-wrap flex-sm-nowrap">
-        <div class="img-container">
-          <img src="{{ partial "resource_url.html" (dict "context" . "url" (partial "resource_metadata.html" $story.Params.image.content).Params.file) }}" alt="" />
+
+  <!-- <div class="header-bar bg-secondary py-2 mb-4">
+    <h1 class="text-white text-center">OCW Stories</h1>
+  </div> -->
+  <div class="standard-width mx-auto mt-5 mb-5">
+    <div class="row">
+      <div class="testimonial-single">
+        <div class="testimonials w-100">
+          <div class="testimonial d-flex flex-wrap flex-sm-nowrap">
+            <div class="img-container">
+              <img src="{{ partial "resource_url.html" (dict "context" . "url" (partial "resource_metadata.html" $story.Params.image.content).Params.file) }}" alt="" />
+            </div>
+            <div class="detail d-flex flex-column flex-nowrap justify-content-between p-0 ml-sm-5">
+              <div class="text">
+                <h2>{{ $story.Title }}</h2>
+                <p class="font-weight-bold">{{ $story.Params.occupation }} | {{ $story.Params.location }}</p>
+                <p class="summary">
+                  "{{ $story.Params.leadquote }}"
+                </p>
+              </div>
+            </div>
+          </div>
         </div>
-        <div class="detail d-flex flex-column flex-nowrap justify-content-between p-0 ml-sm-5">
-          <div class="text">
-            <h2>{{ $story.Title }}</h2>
-            <p class="font-weight-bold">{{ $story.Params.occupation }} | {{ $story.Params.location }}</p>
-            <p class="summary">
-              "{{ $story.Params.leadquote }}"
-            </p>
+      </div>
+      <div class="full-testimonial pt-5 pb-3 col-md-8">
+        {{ .Content }}
+      </div>
+      <!-- Sidebar -->
+      <div class="col-md-4">
+      <div class="">
+        <h3 class="mb-4">More Stories</h3>
+        <div class="flex-nowrap justify-content-center">
+        {{ range first 3 (where .Site.RegularPages "Type" "==" "stories") }}
+          <div style="padding:10px; flex: 1 1; margin-left: 10px;" class="item-wrapper">
+            {{ partial "stories_card.html" . }}
           </div>
+        {{ end }}
+        </div>
+        <div class="d-flex justify-content-center mt-4">
+          <a href="/stories" class="btn px-4 py-3 text-decoration-none d-flex align-items-center" style="padding: 15px 20px; border-radius: 3px; border: 1px solid var(--Border-Grey, #DFE5EC); background: var(--white-mit-brand, #FFF); font-weight: 600; color:#03152D;">
+            View All OCW Stories
+            <img
+              class="ml-2"
+              src="{{ partial "get_asset_webpack_url.html" "images/ocw_stories_btn_arrow_right.svg" }}"
+              alt=""
+            />
+          </a>
         </div>
       </div>
     </div>
-    <div class="full-testimonial pt-5 pb-3">
-      {{ .Content }}
     </div>
   </div>
   {{ block "footer" . }} {{ partialCached "footer" . }} {{end}}

From 1a12d4ada0021a868eb9be44d16d3f9b7cedaaaa Mon Sep 17 00:00:00 2001
From: ibrahimjaved12 <ibrahim.javed@arbisoft.com>
Date: Tue, 12 Nov 2024 21:24:13 +0500
Subject: [PATCH 09/18] Work on homepage and single story page

---
 www/assets/css/carousel.scss           | 18 +++++
 www/assets/css/home.scss               | 16 +++++
 www/layouts/home.html                  |  6 +-
 www/layouts/partials/home_stories.html | 93 +++++++++++++-------------
 www/layouts/partials/stories_card.html | 53 ++++++++-------
 www/layouts/stories/single.html        | 42 ++++++------
 6 files changed, 132 insertions(+), 96 deletions(-)

diff --git a/www/assets/css/carousel.scss b/www/assets/css/carousel.scss
index 68acc7690..06d888e21 100644
--- a/www/assets/css/carousel.scss
+++ b/www/assets/css/carousel.scss
@@ -124,6 +124,24 @@
   //   max-width: 650px;
   // }
 }
+.share-story-text {
+  @include breakpoint(desktop) {
+    margin-right: 70px;
+  }
+}
+.quotation-btn {
+  position: relative;
+  // padding: 20px 50px;
+}
+
+.quotation-btn::before {
+  content: "”";
+  font-size: 50px;
+  position: absolute;
+  right: 20px;
+  top: -10px;
+  color: var(--Primary, #03152d);
+}
 .testimonial-image-wrapper {
   position: relative;
   width: 100%;
diff --git a/www/assets/css/home.scss b/www/assets/css/home.scss
index d77e421d0..f9bf72588 100644
--- a/www/assets/css/home.scss
+++ b/www/assets/css/home.scss
@@ -763,3 +763,19 @@ $promo-carousel-height: 200px;
     display: none;
   }
 }
+.img-container.single-testimonial-page {
+  width: 100%;
+  padding-top: 61%;
+  position: relative;
+  overflow: hidden;
+  border-radius: 8px;
+}
+
+.img-container.single-testimonial-page img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
diff --git a/www/layouts/home.html b/www/layouts/home.html
index f5674dd69..46e8131af 100644
--- a/www/layouts/home.html
+++ b/www/layouts/home.html
@@ -126,13 +126,13 @@ <h2 style="margin: 0; font-weight: bold; color:white;">Share your OCW story. We'
       </a>
     </div>
   </div>
-  <div class="d-flex justify-content-center my-4">
+  <div class="d-flex standard-width container justify-content-center my-4">
     <div class="d-flex flex-column flex-md-row justify-content-between align-items-center" style="background: var(--Primary, #03152D); border-radius: 10px; padding: 40px; color: var(--white, #FFF);">
-      <div class="mb-3 mb-md-0 text-center text-md-left">
+      <div class="share-story-text mb-3 mb-md-0 text-center text-md-left">
         <h2 style="margin: 0; font-weight: bold; color:white;">Share your OCW story. We'd love to hear from you!</h2>
         <p style="margin: 0;">How OCW has made an impact in your life.</p>
       </div>
-      <a href="#" class="btn mt-3 mt-md-0 text-decoration-none" style="padding: 15px 20px; border-radius: 3px; background: var(--white, #FFF); color: var(--Primary, #03152D); border: 1px solid var(--white, #FFF); font-weight: 600;">
+      <a href="#" class="btn mt-3 mt-md-0 text-decoration-none quotation-btn" style="padding: 20px 30px; border-radius: 3px; background: var(--white, #FFF); color: var(--Primary, #03152D); border: 1px solid var(--white, #FFF); font-weight: 600;">
         Share your Story
       </a>
     </div>
diff --git a/www/layouts/partials/home_stories.html b/www/layouts/partials/home_stories.html
index 99959ad89..3440be336 100644
--- a/www/layouts/partials/home_stories.html
+++ b/www/layouts/partials/home_stories.html
@@ -1,56 +1,55 @@
 {{- $stories := where .Site.RegularPages "Type" "==" "stories" -}}
 {{- $storiesSection := .Site.GetPage "section" "stories" -}}
-{{- $breakdowns := (dict "xs-sm" (dict "size" 1 "class" "d-flex d-md-none") "md" (dict "size" 2 "class" "d-none d-md-flex d-lg-none") "lg" (dict "size" 3 "class" "d-none d-lg-flex d-xl-none") "xl" (dict "size" 3 "class" "d-none d-xl-flex")) -}}
-<div class="home-testimonials standard-width container mx-auto my-3">
-  {{ range $breakpoint, $carouselInfo := $breakdowns }}
-    {{ $itemsInCarousel := index $carouselInfo "size" }}
-    {{ $breakpointVisibilityClass := index $carouselInfo "class" }}
-    {{ $isMobile := (eq $itemsInCarousel 1) }}
-    {{ $carouselId := (printf "testimonial-carousel-%v" $breakpoint) }}
-    <div class="{{ $breakpointVisibilityClass }}">
-      <div id="{{ $carouselId }}" class="carousel slide" data-interval="false" data-touch="true" data-ride="carousel">
-        <div class="carousel-header d-flex flex-row justify-content-between font-weight-bold">
-          <h2>OCW Stories</h2>
-          {{ if gt (len $stories) 3 }}
-            {{ partial "carousel_controls.html" $carouselId }}
-          {{ end }}
-        </div>
-        <div class="carousel-inner">
-          {{ range $index, $testimonial := $stories  }}
-            {{ with $testimonial }}
-              {{ $modulo := (mod $index $itemsInCarousel) }}
-              {{ $group := (div $index $itemsInCarousel) }}
-              {{ if eq $modulo 0 }}
-              <div class="carousel-item row {{ if eq $group 0 }}active{{ end }} flex-nowrap justify-content-center" style="flex: nowrap">
-                {{ end }}
-                  <div style="padding:10px; flex: 1 1; margin-left: 10px;" class="item-wrapper">
-                    <!-- <div class="item-wrapper w-100 d-flex justify-content-center"> -->
-                      {{ partial "stories_card.html" $testimonial }}
-                    <!-- </div> -->
+{{- $breakdowns := dict
+    "xs-sm" (dict "size" 1 "class" "d-flex d-md-none")
+    "md"    (dict "size" 2 "class" "d-none d-md-flex d-lg-none")
+    "lg"    (dict "size" 3 "class" "d-none d-lg-flex d-xl-none")
+    "xl"    (dict "size" 3 "class" "d-none d-xl-flex")
+-}}
+<div class="carousel-section">
+  <div class="home-testimonials mx-auto my-3">
+    {{ range $breakpoint, $carouselInfo := $breakdowns }}
+      {{ $itemsInCarousel := index $carouselInfo "size" }}
+      {{ $breakpointVisibilityClass := index $carouselInfo "class" }}
+      {{ $carouselId := printf "testimonial-carousel-%v" $breakpoint }}
+      <div class="{{ $breakpointVisibilityClass }}">
+        <div class="d-flex flex-direction-row align-items-sm-center justify-content-between w-100">
+          <a href="#{{ $carouselId }}" role="button" data-slide="prev" class="bg-white prev">
+            <span class="material-icons" aria-hidden="true" style="font-size: 3.75rem">keyboard_arrow_left</span>
+            <span class="sr-only">Previous</span>
+          </a>
+          <div id="{{ $carouselId }}" class="carousel slide" data-interval="false" data-touch="true" data-ride="carousel">
+            <div class="carousel-header d-flex flex-row justify-content-between font-weight-bold">
+              <h2>OCW Stories</h2>
+              {{ if gt (len $stories) 3 }}
+                {{ partial "carousel_controls.html" $carouselId }}
+              {{ end }}
+            </div>
+            <div class="carousel-inner standard-width container">
+              {{ range $index, $testimonial := $stories }}
+                {{ with $testimonial }}
+                  {{ $modulo := mod $index $itemsInCarousel }}
+                  {{ $group := div $index $itemsInCarousel }}
+                  {{ if eq $modulo 0 }}
+                  <div class="carousel-item row {{ if eq $group 0 }}active{{ end }} flex-nowrap justify-content-center">
+                  {{ end }}
+                    {{ partial "stories_card.html" $testimonial }}
+                  {{ if or (eq $modulo (sub $itemsInCarousel 1)) (eq $index (sub (len $stories) 1)) }}
                   </div>
-                {{ if (or (eq $modulo (sub $itemsInCarousel 1)) (eq $index (sub (len $stories) 1))) }}
-              </div>
+                  {{ end }}
+                {{ end }}
               {{ end }}
-            {{ end }}
-          {{ end }}
+            </div>
+          </div>
+          <a href="#{{ $carouselId }}" role="button" data-slide="next" class="bg-white next" >
+            <span class="material-icons" aria-hidden="true" style="font-size: 3.75rem">keyboard_arrow_right</span>
+            <span class="sr-only">Next</span>
+          </a>
         </div>
       </div>
+    {{ end }}
+    <div class="d-flex justify-content-center my-4">
+      // button to be re-added here
     </div>
-  {{ end }}
-  <!-- <div class="d-flex py-4">
-    <div class="ml-auto">
-      <a class="view-all-link" href="{{ $storiesSection.RelPermalink }}">View All OCW Stories</a>
-    </div>
-  </div> -->
-  <div class="d-flex justify-content-center my-4">
-    <a href="#" class="btn px-4 py-3 text-decoration-none d-flex align-items-center" style="padding: 15px 20px; border-radius: 3px; border: 1px solid var(--Border-Grey, #DFE5EC); background: var(--white-mit-brand, #FFF); font-weight: 600; color:#03152D;">
-      View All OCW Stories
-      <img
-        class=""
-        src="{{ partial "get_asset_webpack_url.html" "images/ocw_stories_btn_arrow_right.svg" }}"
-        alt=""
-        style="margin-left:10px"
-      />
-    </a>
   </div>
 </div>
diff --git a/www/layouts/partials/stories_card.html b/www/layouts/partials/stories_card.html
index ab6a06a74..76ec8bb3a 100644
--- a/www/layouts/partials/stories_card.html
+++ b/www/layouts/partials/stories_card.html
@@ -1,34 +1,35 @@
 {{- $testimonial := . -}}
-<a href="{{ $testimonial.RelPermalink }}" class="testimonial-link">
-  <div class="testimonial d-flex flex-column rounded h-100">
-    <div class="testimonial-image-wrapper" style="margin-bottom: 20px">
-      <img 
-        src="{{ partial "resource_url.html" (dict "context" . "url" (partial "resource_metadata.html" $testimonial.Params.image.content).Params.file) }}" 
-        alt="{{ $testimonial.Title }}" 
-        class="testimonial-image"
-      >
-    </div>
-    <div style="padding: 0px 20px; margin-bottom: 20px">
-      <div class="name font-weight-bold" style="font-size: 20px">
-        {{ $testimonial.Title }}
+<a href="{{ $testimonial.RelPermalink }}" class="item-wrapper d-block testimonial-link " style="flex: 1 1; padding:10px; margin-left: 10px;">
+  <div class="h-100">
+    <div class="testimonial d-flex flex-column rounded h-100">
+      <div class="testimonial-image-wrapper" style="margin-bottom: 20px">
+        <img 
+          src="{{ partial "resource_url.html" (dict "context" . "url" (partial "resource_metadata.html" $testimonial.Params.image.content).Params.file) }}" 
+          alt="{{ $testimonial.Title }}" 
+          class="testimonial-image"
+        >
       </div>
-      <div class="occupation-wrapper d-flex justify-content-between">
-        <div class="occupation">
-          {{ $testimonial.Params.occupation }}
+      <div style="padding: 0px 20px; margin-bottom: 20px">
+        <div class="name font-weight-bold" style="font-size: 20px">
+          {{ $testimonial.Title }}
         </div>
-        <div class="occupation-location">
-          {{ $testimonial.Params.location }}
+        <div class="occupation-wrapper d-flex justify-content-between">
+          <div class="occupation">
+            {{ $testimonial.Params.occupation }}
+          </div>
+          <div class="occupation-location">
+            {{ $testimonial.Params.location }}
+          </div>
         </div>
       </div>
-    </div>
-    <div class="story-body d-flex flex-column justify-content-between h-100" style="padding: 0px 20px 20px 20px">
-      <div style="margin-bottom: 20px">
-        {{ $testimonial.Content | plainify | replaceRE "\\s+" " " }}
-      </div>
-      <div>
-        <a href="" style="color:#0A3E56">Read Full Story</a>
+      <div class="story-body d-flex flex-column justify-content-between h-100" style="padding: 0px 20px 20px 20px">
+        <div style="margin-bottom: 20px">
+          {{ $testimonial.Content | plainify | replaceRE "\\s+" " " }}
+        </div>
+        <div>
+          <span style="color:#0A3E56">Read Full Story</span>
+        </div>
       </div>
     </div>
   </div>
-
-</a>
+</a>
\ No newline at end of file
diff --git a/www/layouts/stories/single.html b/www/layouts/stories/single.html
index 9e41ff50c..ad6f62a72 100644
--- a/www/layouts/stories/single.html
+++ b/www/layouts/stories/single.html
@@ -4,30 +4,32 @@
   {{ block "header" . }}
   {{ partialCached "header" . }}
   {{ end }}
-
-  <!-- <div class="header-bar bg-secondary py-2 mb-4">
+  
+  <div class="header-bar bg-secondary py-2 mb-4">
     <h1 class="text-white text-center">OCW Stories</h1>
-  </div> -->
-  <div class="standard-width mx-auto mt-5 mb-5">
-    <div class="row">
-      <div class="testimonial-single">
-        <div class="testimonials w-100">
-          <div class="testimonial d-flex flex-wrap flex-sm-nowrap">
-            <div class="img-container">
-              <img src="{{ partial "resource_url.html" (dict "context" . "url" (partial "resource_metadata.html" $story.Params.image.content).Params.file) }}" alt="" />
-            </div>
-            <div class="detail d-flex flex-column flex-nowrap justify-content-between p-0 ml-sm-5">
-              <div class="text">
-                <h2>{{ $story.Title }}</h2>
-                <p class="font-weight-bold">{{ $story.Params.occupation }} | {{ $story.Params.location }}</p>
-                <p class="summary">
-                  "{{ $story.Params.leadquote }}"
-                </p>
-              </div>
-            </div>
+  </div>
+  <div class="testimonial-single navbar navbar-light bg-light">
+    <div class="testimonials w-100">
+      <div class="testimonial standard-width mx-auto d-flex">
+        <div style="max-width:180px; width: 100%">
+          <div class="img-container single-testimonial-page">
+            <img src="{{ partial "resource_url.html" (dict "context" . "url" (partial "resource_metadata.html" $story.Params.image.content).Params.file) }}" alt="" />
+          </div>
+        </div>
+        <div class="detail d-flex flex-column flex-nowrap justify-content-between p-0 ml-sm-5">
+          <div class="text">
+            <h2>{{ $story.Title }}</h2>
+            <p class="font-weight-bold">{{ $story.Params.occupation }} | {{ $story.Params.location }}</p>
+            <p class="summary">
+              "{{ $story.Params.leadquote }}"
+            </p>
           </div>
         </div>
       </div>
+    </div>
+  </div>
+  <div class="standard-width mx-auto mt-5 mb-5">
+    <div class="row">
       <div class="full-testimonial pt-5 pb-3 col-md-8">
         {{ .Content }}
       </div>

From 4263bf27c3869a8416d9a38eb62080e682a6cb97 Mon Sep 17 00:00:00 2001
From: ibrahimjaved12 <ibrahim.javed@arbisoft.com>
Date: Thu, 14 Nov 2024 14:58:38 +0500
Subject: [PATCH 10/18] Add quotesUI

---
 www/assets/css/carousel.scss           | 65 ++++++++++++++++++++++++--
 www/assets/css/home.scss               | 16 +++++++
 www/layouts/home.html                  |  2 +-
 www/layouts/partials/home_stories.html | 20 ++++++--
 www/layouts/partials/stories_card.html | 18 ++++---
 5 files changed, 106 insertions(+), 15 deletions(-)

diff --git a/www/assets/css/carousel.scss b/www/assets/css/carousel.scss
index 06d888e21..95840eca1 100644
--- a/www/assets/css/carousel.scss
+++ b/www/assets/css/carousel.scss
@@ -94,6 +94,9 @@
     }
   }
 }
+.item-wrapper:hover {
+  border: 1px solid #a31f34 !important;
+}
 .item-wrapper {
   padding: 0 10px;
   // max-width: 411px;
@@ -136,11 +139,34 @@
 
 .quotation-btn::before {
   content: "”";
+  position: absolute;
+  right: -4px;
+  top: -0.64rem;
+  color: white;
+  color: var(--white, var(--white-mit-brand, #fff));
+  font-family: Arial;
   font-size: 50px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 30px;
+}
+.testimonial-title.quote {
+  position: relative;
+  // padding: 20px 50px;
+}
+
+.testimonial-title.quote::before {
+  content: "“";
   position: absolute;
-  right: 20px;
-  top: -10px;
-  color: var(--Primary, #03152d);
+  // right: 1px;
+  left: 1.1rem;
+  top: -3rem;
+  font-family: Arial;
+  color: var(--Red-Brand, var(--Red, #a31f34)) !important;
+  font-size: 100px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
 }
 .testimonial-image-wrapper {
   position: relative;
@@ -166,3 +192,36 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.quote-body div.content {
+  // background-color: purple;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 6;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border-left: 1px solid var(--DarkBorder, #9c9d9e);
+  padding-left: 20px;
+  align-self: stretch;
+  color: #000;
+  text-overflow: ellipsis;
+  font-family: Arial;
+  font-size: 16px;
+  font-style: italic;
+  font-weight: 400;
+  line-height: 22px; /* 137.5% */
+}
+
+.view-all-stories-btn:hover {
+  color: white !important;
+  background: #a31f34 !important;
+
+  img {
+    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7486%)
+      hue-rotate(142deg) brightness(96%) contrast(103%);
+  }
+
+  // .view-all-stories-arrow {
+  //   fill: #fff;
+  //   background:white !important;
+  // }
+}
diff --git a/www/assets/css/home.scss b/www/assets/css/home.scss
index f9bf72588..c72dcb7d6 100644
--- a/www/assets/css/home.scss
+++ b/www/assets/css/home.scss
@@ -779,3 +779,19 @@ $promo-carousel-height: 200px;
   height: 100%;
   object-fit: cover;
 }
+
+.share-story-btn:hover {
+  color: white !important;
+  background: #a31f34 !important;
+}
+a.share-story-btn {
+  color: var(--Primary, #03152d);
+  font-family: Arial;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  // line-height: 35px; /* 194.444% */
+  background: var(--white, #fff);
+  border-radius: 3px;
+  padding: 20px 30px;
+}
diff --git a/www/layouts/home.html b/www/layouts/home.html
index 46e8131af..79ed0b8ed 100644
--- a/www/layouts/home.html
+++ b/www/layouts/home.html
@@ -132,7 +132,7 @@ <h2 style="margin: 0; font-weight: bold; color:white;">Share your OCW story. We'
         <h2 style="margin: 0; font-weight: bold; color:white;">Share your OCW story. We'd love to hear from you!</h2>
         <p style="margin: 0;">How OCW has made an impact in your life.</p>
       </div>
-      <a href="#" class="btn mt-3 mt-md-0 text-decoration-none quotation-btn" style="padding: 20px 30px; border-radius: 3px; background: var(--white, #FFF); color: var(--Primary, #03152D); border: 1px solid var(--white, #FFF); font-weight: 600;">
+      <a href="#" class="share-story-btn btn mt-3 mt-md-0 text-decoration-none quotation-btn">
         Share your Story
       </a>
     </div>
diff --git a/www/layouts/partials/home_stories.html b/www/layouts/partials/home_stories.html
index 3440be336..c8613e877 100644
--- a/www/layouts/partials/home_stories.html
+++ b/www/layouts/partials/home_stories.html
@@ -13,18 +13,18 @@
       {{ $breakpointVisibilityClass := index $carouselInfo "class" }}
       {{ $carouselId := printf "testimonial-carousel-%v" $breakpoint }}
       <div class="{{ $breakpointVisibilityClass }}">
-        <div class="d-flex flex-direction-row align-items-sm-center justify-content-between w-100">
+        <div class="d-flex flex-direction-row align-items-center justify-content-between w-100">
           <a href="#{{ $carouselId }}" role="button" data-slide="prev" class="bg-white prev">
             <span class="material-icons" aria-hidden="true" style="font-size: 3.75rem">keyboard_arrow_left</span>
             <span class="sr-only">Previous</span>
           </a>
           <div id="{{ $carouselId }}" class="carousel slide" data-interval="false" data-touch="true" data-ride="carousel">
-            <div class="carousel-header d-flex flex-row justify-content-between font-weight-bold">
-              <h2>OCW Stories</h2>
+            <h2>OCW Stories</h2>
+            <!-- <div class="carousel-header d-flex flex-row justify-content-between font-weight-bold">
               {{ if gt (len $stories) 3 }}
                 {{ partial "carousel_controls.html" $carouselId }}
               {{ end }}
-            </div>
+            </div> -->
             <div class="carousel-inner standard-width container">
               {{ range $index, $testimonial := $stories }}
                 {{ with $testimonial }}
@@ -49,7 +49,17 @@ <h2>OCW Stories</h2>
       </div>
     {{ end }}
     <div class="d-flex justify-content-center my-4">
-      // button to be re-added here
+      <div class="d-flex justify-content-center my-4">
+        <a href="#" class="btn view-all-stories-btn px-4 py-3 text-decoration-none d-flex align-items-center" style="padding: 15px 20px; border-radius: 3px; border: 1px solid var(--Border-Grey, #DFE5EC); background: var(--white-mit-brand, #FFF); font-weight: 600; color:#03152D;">
+          View All OCW Stories
+          <img
+            class="view-all-stories-arrow"
+            src="{{ partial "get_asset_webpack_url.html" "images/ocw_stories_btn_arrow_right.svg" }}"
+            alt=""
+            style="margin-left:10px; color: white;"
+          />
+        </a>
+      </div>
     </div>
   </div>
 </div>
diff --git a/www/layouts/partials/stories_card.html b/www/layouts/partials/stories_card.html
index 76ec8bb3a..e2c009316 100644
--- a/www/layouts/partials/stories_card.html
+++ b/www/layouts/partials/stories_card.html
@@ -9,7 +9,7 @@
           class="testimonial-image"
         >
       </div>
-      <div style="padding: 0px 20px; margin-bottom: 20px">
+      <div class="testimonial-title {{if $testimonial.Params.is_quote}}quote{{ end }}" style="padding: 0px 20px; margin-bottom: 20px">
         <div class="name font-weight-bold" style="font-size: 20px">
           {{ $testimonial.Title }}
         </div>
@@ -22,13 +22,19 @@
           </div>
         </div>
       </div>
-      <div class="story-body d-flex flex-column justify-content-between h-100" style="padding: 0px 20px 20px 20px">
-        <div style="margin-bottom: 20px">
+      <div class="{{ if not $testimonial.Params.is_quote}}story-body{{ else }}quote-body{{ end }} d-flex flex-column justify-content-between h-100" style="padding: 0px 20px 20px 20px">
+        <div class="content" style="margin-bottom: 20px">
           {{ $testimonial.Content | plainify | replaceRE "\\s+" " " }}
         </div>
-        <div>
-          <span style="color:#0A3E56">Read Full Story</span>
-        </div>
+        {{ if $testimonial.Params.is_quote }}
+          <div>
+            <span style="color:#0A3E56">Read Full Quote</span>
+          </div>
+        {{ else }}
+          <div>
+            <span style="color:#0A3E56">Read Full Story</span>
+          </div>
+        {{ end }}
       </div>
     </div>
   </div>

From 91151b5d08fa38153382504fbf8163429de7ec0b Mon Sep 17 00:00:00 2001
From: ibrahimjaved12 <ibrahim.javed@arbisoft.com>
Date: Fri, 15 Nov 2024 20:08:32 +0500
Subject: [PATCH 11/18] Reusable Dialog Component

---
 www/assets/css/carousel.scss                  | 57 ++++++++++++++---
 www/layouts/home.html                         |  2 +-
 www/layouts/partials/home_stories.html        | 42 ++++++++++++-
 .../partials/quotes_card_modal_handler.html   | 11 ++++
 www/layouts/partials/stories_card.html        | 23 ++++---
 www/layouts/stories/list.html                 | 59 ++++++++++++++----
 www/layouts/stories/single.html               | 61 +++++++++++++------
 7 files changed, 203 insertions(+), 52 deletions(-)
 create mode 100644 www/layouts/partials/quotes_card_modal_handler.html

diff --git a/www/assets/css/carousel.scss b/www/assets/css/carousel.scss
index 95840eca1..f142c3570 100644
--- a/www/assets/css/carousel.scss
+++ b/www/assets/css/carousel.scss
@@ -65,6 +65,15 @@
 
   .item-wrapper {
     padding: 0 10px;
+    &:first-child {
+      padding-left: 0;
+    }
+
+    &:last-child {
+      padding-right: 0;
+    }
+  }
+  .item-wrapper.testimonial-link {
     max-width: 411px;
     border-radius: 10px;
     border: 1px solid var(--Border-Grey, #dfe5ec);
@@ -73,13 +82,6 @@
     /* Shadow */
     box-shadow: 0px 2px 10px 0px rgba(120, 169, 197, 0.15);
 
-    &:first-child {
-      padding-left: 0;
-    }
-
-    &:last-child {
-      padding-right: 0;
-    }
     // 801px - 991px (tablet)
     @include breakpoint(tablet) {
       max-width: 470.5px;
@@ -94,10 +96,10 @@
     }
   }
 }
-.item-wrapper:hover {
+.item-wrapper.testimonial-link:hover {
   border: 1px solid #a31f34 !important;
 }
-.item-wrapper {
+.item-wrapper.testimonial-link {
   padding: 0 10px;
   // max-width: 411px;
   border-radius: 10px;
@@ -210,6 +212,15 @@
   font-weight: 400;
   line-height: 22px; /* 137.5% */
 }
+div.content {
+  margin-bottom: 20px;
+}
+.modal-body .quote-body {
+}
+.modal-body .quote-body div.content.testimonial-modal {
+  // padding: 0px 20px;
+  margin: 0px;
+}
 
 .view-all-stories-btn:hover {
   color: white !important;
@@ -225,3 +236,31 @@
   //   background:white !important;
   // }
 }
+.carousel-inner::after {
+  display: block;
+  clear: both;
+  content: "";
+}
+.modal-dialog-centered::before {
+  display: block !important;
+  height: calc(100vh - 3.5rem) !important;
+  height: -webkit-min-content !important;
+  height: -moz-min-content !important;
+  height: min-content !important;
+}
+.modal {
+  display: block !important;
+  opacity: 0;
+  visibility: hidden;
+  position: fixed !important;
+  z-index: 1050 !important;
+}
+
+.modal.show {
+  opacity: 1;
+  visibility: visible;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
diff --git a/www/layouts/home.html b/www/layouts/home.html
index 79ed0b8ed..7f3298bed 100644
--- a/www/layouts/home.html
+++ b/www/layouts/home.html
@@ -136,7 +136,7 @@ <h2 style="margin: 0; font-weight: bold; color:white;">Share your OCW story. We'
         Share your Story
       </a>
     </div>
-  </div>  
+  </div>
   <div class="social-cards-wrapper">
     <div class="social-cards standard-width d-flex justify-content-center container">
       <div class="row w-100">
diff --git a/www/layouts/partials/home_stories.html b/www/layouts/partials/home_stories.html
index c8613e877..1e1505c61 100644
--- a/www/layouts/partials/home_stories.html
+++ b/www/layouts/partials/home_stories.html
@@ -6,8 +6,15 @@
     "lg"    (dict "size" 3 "class" "d-none d-lg-flex d-xl-none")
     "xl"    (dict "size" 3 "class" "d-none d-xl-flex")
 -}}
-<div class="carousel-section">
+<div class="test-div">
+  <div class="test-div2">content goes here!</div>
+</div>
+
+<div class="test-div3">empty placeholder content</div>
+
+
   <div class="home-testimonials mx-auto my-3">
+
     {{ range $breakpoint, $carouselInfo := $breakdowns }}
       {{ $itemsInCarousel := index $carouselInfo "size" }}
       {{ $breakpointVisibilityClass := index $carouselInfo "class" }}
@@ -25,6 +32,7 @@ <h2>OCW Stories</h2>
                 {{ partial "carousel_controls.html" $carouselId }}
               {{ end }}
             </div> -->
+
             <div class="carousel-inner standard-width container">
               {{ range $index, $testimonial := $stories }}
                 {{ with $testimonial }}
@@ -33,7 +41,14 @@ <h2>OCW Stories</h2>
                   {{ if eq $modulo 0 }}
                   <div class="carousel-item row {{ if eq $group 0 }}active{{ end }} flex-nowrap justify-content-center">
                   {{ end }}
-                    {{ partial "stories_card.html" $testimonial }}
+                  <a data-modal-content-id="modal-content-{{ $index }}" class="item-wrapper d-block testimonial-link" style="flex: 1 1; padding:10px; margin-left: 10px;" {{if $testimonial.Params.is_quote}} onclick="updateContent(this); return false;" href="#" data-testimonial="{{ $testimonial }}" data-toggle="modal" data-target="#exampleModalCenter"{{else}}href="{{ $testimonial.RelPermalink }}"{{end}}>
+                    {{ partial "stories_card.html" (dict "testimonial" $testimonial) }}
+                  </a>
+                  {{ if $testimonial.Params.is_quote }}
+                  <div id="modal-content-{{ $index }}" style="display: none;">
+                    {{ partial "stories_card.html" (dict "testimonial" $testimonial "context" "modal") }}
+                  </div>
+                  {{ end }}
                   {{ if or (eq $modulo (sub $itemsInCarousel 1)) (eq $index (sub (len $stories) 1)) }}
                   </div>
                   {{ end }}
@@ -50,7 +65,7 @@ <h2>OCW Stories</h2>
     {{ end }}
     <div class="d-flex justify-content-center my-4">
       <div class="d-flex justify-content-center my-4">
-        <a href="#" class="btn view-all-stories-btn px-4 py-3 text-decoration-none d-flex align-items-center" style="padding: 15px 20px; border-radius: 3px; border: 1px solid var(--Border-Grey, #DFE5EC); background: var(--white-mit-brand, #FFF); font-weight: 600; color:#03152D;">
+        <a href="/stories" class="btn view-all-stories-btn px-4 py-3 text-decoration-none d-flex align-items-center" style="padding: 15px 20px; border-radius: 3px; border: 1px solid var(--Border-Grey, #DFE5EC); background: var(--white-mit-brand, #FFF); font-weight: 600; color:#03152D;">
           View All OCW Stories
           <img
             class="view-all-stories-arrow"
@@ -63,3 +78,24 @@ <h2>OCW Stories</h2>
     </div>
   </div>
 </div>
+
+<!-- Modal -->
+<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered" style="max-width: 600px" role="document">
+    <div class="modal-content">
+      <!-- <div class="modal-header"> -->
+        <!-- <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5> -->
+      <!-- </div> -->
+      <!-- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+        <span aria-hidden="true">&times;</span>
+      </button> -->
+      <div class="modal-body" style="padding: 10px;">
+      </div>
+      <!-- <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-primary">Save changes</button>
+      </div> -->
+    </div>
+  </div>
+</div>
+<!-- {{ partialCached "quotes_card_modal_handler.html" . }} -->
diff --git a/www/layouts/partials/quotes_card_modal_handler.html b/www/layouts/partials/quotes_card_modal_handler.html
new file mode 100644
index 000000000..4c76df0f5
--- /dev/null
+++ b/www/layouts/partials/quotes_card_modal_handler.html
@@ -0,0 +1,11 @@
+<script>
+    function updateContent(element) {
+    var modalContentId = element.getAttribute('data-modal-content-id');
+    var contentDiv = document.getElementById(modalContentId);
+    if (contentDiv) {
+      var content = contentDiv.innerHTML;
+      var modalElement = document.getElementById('exampleModalCenter');
+      modalElement.querySelector('.modal-body').innerHTML = content;
+    }
+  }
+  </script>
diff --git a/www/layouts/partials/stories_card.html b/www/layouts/partials/stories_card.html
index e2c009316..90ce8b71a 100644
--- a/www/layouts/partials/stories_card.html
+++ b/www/layouts/partials/stories_card.html
@@ -1,6 +1,11 @@
-{{- $testimonial := . -}}
-<a href="{{ $testimonial.RelPermalink }}" class="item-wrapper d-block testimonial-link " style="flex: 1 1; padding:10px; margin-left: 10px;">
-  <div class="h-100">
+{{$testimonial := .testimonial}}
+{{$jsurls := .jsurls}}
+{{$context := .context | default "carousel"}}
+<!-- <div>{{$testimonial.Title}}</div> -->
+<!-- <div>{{$jsurls}}</div> -->
+<!-- <div>{{$context}}</div> -->
+<!-- <div>otherwise</div> -->
+<div class="h-100">
     <div class="testimonial d-flex flex-column rounded h-100">
       <div class="testimonial-image-wrapper" style="margin-bottom: 20px">
         <img 
@@ -10,8 +15,9 @@
         >
       </div>
       <div class="testimonial-title {{if $testimonial.Params.is_quote}}quote{{ end }}" style="padding: 0px 20px; margin-bottom: 20px">
-        <div class="name font-weight-bold" style="font-size: 20px">
+        <div class="name font-weight-bold" style="font-size: 20px; margin-bottom: 10px;">
           {{ $testimonial.Title }}
+          <!-- <div>{{$context}}</div> -->
         </div>
         <div class="occupation-wrapper d-flex justify-content-between">
           <div class="occupation">
@@ -23,19 +29,18 @@
         </div>
       </div>
       <div class="{{ if not $testimonial.Params.is_quote}}story-body{{ else }}quote-body{{ end }} d-flex flex-column justify-content-between h-100" style="padding: 0px 20px 20px 20px">
-        <div class="content" style="margin-bottom: 20px">
+        <div class="content {{ if eq $context "carousel" }}testimonial-carousel{{ else }}testimonial-modal{{ end }}">
           {{ $testimonial.Content | plainify | replaceRE "\\s+" " " }}
         </div>
-        {{ if $testimonial.Params.is_quote }}
+        {{ if and (eq $testimonial.Params.is_quote true) (eq $context "carousel") }}
           <div>
             <span style="color:#0A3E56">Read Full Quote</span>
           </div>
-        {{ else }}
+        {{ else if not $testimonial.Params.is_quote }}
           <div>
             <span style="color:#0A3E56">Read Full Story</span>
           </div>
         {{ end }}
       </div>
     </div>
-  </div>
-</a>
\ No newline at end of file
+</div>
diff --git a/www/layouts/stories/list.html b/www/layouts/stories/list.html
index a8cd5318b..997b3664a 100644
--- a/www/layouts/stories/list.html
+++ b/www/layouts/stories/list.html
@@ -7,19 +7,54 @@
   {{end}}
   <div class="">
     <div class="row">
-    {{ range $index, $testimonial := $stories  }}
-      {{ if or (eq (mod $index 8) 0) (eq (mod $index 8) 1) }}
-        <div class="row flex-nowrap justify-content-center col-12 col-md-6 col-lg-6 mb-4">
-      {{ else }}  
-        <div class="row flex-nowrap justify-content-center col-12 col-md-6 col-lg-4 mb-4">
-      {{ end }}
-          <div style="padding:10px; flex: 1 1; margin-left: 10px;" class="item-wrapper">
-            {{ partial "stories_card.html" $testimonial }}
+      {{ range $index, $testimonial := $stories }}
+        {{ if or (eq (mod $index 8) 0) (eq (mod $index 8) 1) }}
+          <div class="row flex-nowrap justify-content-center col-12 col-md-6 col-lg-6 mb-4">
+        {{ else }}  
+          <div class="row flex-nowrap justify-content-center col-12 col-md-6 col-lg-4 mb-4">
+        {{ end }}
+            <a 
+              data-modal-content-id="modal-content-{{ $index }}" 
+              class="item-wrapper d-block testimonial-link" 
+              style="padding:10px; flex: 1 1; margin-left: 10px;" 
+              {{ if $testimonial.Params.is_quote }} 
+                onclick="updateContent(this); return false;" 
+                href="#" 
+                data-toggle="modal" 
+                data-target="#exampleModalCenter"
+              {{ else }} 
+                href="{{ $testimonial.RelPermalink }}" 
+              {{ end }}
+            >
+              {{ partial "stories_card.html" (dict "testimonial" $testimonial "index" $index) }}
+            </a>
+            {{ if $testimonial.Params.is_quote }}
+              <div id="modal-content-{{ $index }}" style="display: none;">
+                {{ partial "stories_card.html" (dict "testimonial" $testimonial "context" "modal") }}
+              </div>
+            {{ end }}
           </div>
-        </div>
-    {{ end }}
+      {{ end }}
     </div>
   </div>
   {{ block "footer" . }} {{ partialCached "footer" . }} {{end}}
-</div>
-{{ end }}
+  <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered" style="max-width: 600px" role="document">
+      <div class="modal-content">
+        <!-- <div class="modal-header"> -->
+          <!-- <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5> -->
+        <!-- </div> -->
+        <!-- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button> -->
+        <div class="modal-body" style="padding: 10px;">
+        </div>
+        <!-- <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+          <button type="button" class="btn btn-primary">Save changes</button>
+        </div> -->
+      </div>
+    </div>
+  </div>
+  <!-- {{ partialCached "quotes_card_modal_handler.html" . }} -->
+  {{ end }}
diff --git a/www/layouts/stories/single.html b/www/layouts/stories/single.html
index ad6f62a72..a2964983d 100644
--- a/www/layouts/stories/single.html
+++ b/www/layouts/stories/single.html
@@ -1,5 +1,6 @@
 {{ define "main" }}
 {{- $story := . -}}
+
 <div>
   {{ block "header" . }}
   {{ partialCached "header" . }}
@@ -35,29 +36,53 @@ <h2>{{ $story.Title }}</h2>
       </div>
       <!-- Sidebar -->
       <div class="col-md-4">
-      <div class="">
-        <h3 class="mb-4">More Stories</h3>
-        <div class="flex-nowrap justify-content-center">
-        {{ range first 3 (where .Site.RegularPages "Type" "==" "stories") }}
-          <div style="padding:10px; flex: 1 1; margin-left: 10px;" class="item-wrapper">
-            {{ partial "stories_card.html" . }}
+        <div>
+          <h3 class="mb-4">More Stories</h3>
+          <div class="flex-nowrap justify-content-center">
+            {{ range $index, $testimonial := first 3 (where .Site.RegularPages "Type" "==" "stories") }}
+              <a 
+                data-modal-content-id="modal-content-{{ $index }}" 
+                class="item-wrapper d-block testimonial-link js-modal-trigger" 
+                style="flex: 1 1; padding:10px; margin-left: 10px;" 
+                {{ if $testimonial.Params.is_quote }} 
+                  href="#" 
+                  data-toggle="modal" 
+                  data-target="#exampleModalCenter"
+                {{ else }} 
+                  href="{{ $testimonial.RelPermalink }}" 
+                {{ end }}
+              >
+                {{ partial "stories_card.html" (dict "testimonial" $testimonial "index" $index) }}
+              </a>
+              <div id="modal-content-{{ $index }}" style="display: none;">
+                {{ partial "stories_card.html" (dict "testimonial" $testimonial "context" "modal") }}
+              </div>
+            {{ end }}
+          </div>
+          <div class="d-flex justify-content-center mt-4">
+            <a href="/stories" class="btn px-4 py-3 text-decoration-none d-flex align-items-center" style="padding: 15px 20px; border-radius: 3px; border: 1px solid var(--Border-Grey, #DFE5EC); background: var(--white-mit-brand, #FFF); font-weight: 600; color:#03152D;">
+              View All OCW Stories
+              <img
+                class="ml-2"
+                src="{{ partial "get_asset_webpack_url.html" "images/ocw_stories_btn_arrow_right.svg" }}"
+                alt=""
+              />
+            </a>
           </div>
-        {{ end }}
-        </div>
-        <div class="d-flex justify-content-center mt-4">
-          <a href="/stories" class="btn px-4 py-3 text-decoration-none d-flex align-items-center" style="padding: 15px 20px; border-radius: 3px; border: 1px solid var(--Border-Grey, #DFE5EC); background: var(--white-mit-brand, #FFF); font-weight: 600; color:#03152D;">
-            View All OCW Stories
-            <img
-              class="ml-2"
-              src="{{ partial "get_asset_webpack_url.html" "images/ocw_stories_btn_arrow_right.svg" }}"
-              alt=""
-            />
-          </a>
         </div>
       </div>
     </div>
-    </div>
   </div>
   {{ block "footer" . }} {{ partialCached "footer" . }} {{end}}
 </div>
+
+<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered" style="max-width: 600px" role="document">
+    <div class="modal-content">
+      <div class="modal-body" style="padding: 10px;">
+      </div>
+    </div>
+  </div>
+</div>
+
 {{ end }}

From 251f481952af4722f0a38eb8b2dafdb8f1d6d8a5 Mon Sep 17 00:00:00 2001
From: ibrahimjaved12 <ibrahim.javed@arbisoft.com>
Date: Mon, 18 Nov 2024 19:22:36 +0500
Subject: [PATCH 12/18] Dynamically load Modal via Webpack

---
 .../images/ocw_story_single_arrow_left.svg    |   3 +
 base-theme/assets/images/quote_close.svg      |   4 +
 base-theme/assets/index.ts                    |  10 ++
 .../assets/quotes_card_modal_handler.js       |  27 +++++
 www/assets/css/carousel.scss                  | 100 +++++++++++-------
 www/assets/css/home.scss                      |   2 +-
 www/layouts/partials/home_stories.html        |  61 +++++------
 www/layouts/partials/stories_card.html        |   7 +-
 www/layouts/stories/list.html                 |  10 +-
 www/layouts/stories/single.html               |  41 +++++--
 10 files changed, 178 insertions(+), 87 deletions(-)
 create mode 100644 base-theme/assets/images/ocw_story_single_arrow_left.svg
 create mode 100644 base-theme/assets/images/quote_close.svg
 create mode 100644 base-theme/assets/quotes_card_modal_handler.js

diff --git a/base-theme/assets/images/ocw_story_single_arrow_left.svg b/base-theme/assets/images/ocw_story_single_arrow_left.svg
new file mode 100644
index 000000000..5f2bce79a
--- /dev/null
+++ b/base-theme/assets/images/ocw_story_single_arrow_left.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none">
+  <path d="M16.0209 17.7771L10.4452 11.9565L16.0209 6.13584L14.3043 4.3478L7 11.9565L14.3043 19.5652L16.0209 17.7771Z" fill="#344055"/>
+</svg>
\ No newline at end of file
diff --git a/base-theme/assets/images/quote_close.svg b/base-theme/assets/images/quote_close.svg
new file mode 100644
index 000000000..bd2959ff2
--- /dev/null
+++ b/base-theme/assets/images/quote_close.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
+<path d="M12 2L2 12" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="square"/>
+<path d="M12 12L2 2" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="square"/>
+</svg>
\ No newline at end of file
diff --git a/base-theme/assets/index.ts b/base-theme/assets/index.ts
index b692fc9de..3aa2dc538 100644
--- a/base-theme/assets/index.ts
+++ b/base-theme/assets/index.ts
@@ -18,6 +18,7 @@ export interface OCWWindow extends Window {
   Sentry: typeof Sentry
   PDFObject: typeof PDFObject
   initVideoJS: () => void
+  initModalHandler: () => void
 }
 
 declare let window: OCWWindow
@@ -38,6 +39,15 @@ window.initVideoJS = () => {
   videoJSLoaded = true
 }
 
+let modalHandlerLoaded = false
+
+window.initModalHandler = () => {
+  if (modalHandlerLoaded) return
+  import("./quotes_card_modal_handler").then(module => {
+    module.initModalHandler()
+  })
+  modalHandlerLoaded = true
+}
 $(function() {
   window.Sentry = initSentry()
   initExternalLinkModal()
diff --git a/base-theme/assets/quotes_card_modal_handler.js b/base-theme/assets/quotes_card_modal_handler.js
new file mode 100644
index 000000000..da78b0e19
--- /dev/null
+++ b/base-theme/assets/quotes_card_modal_handler.js
@@ -0,0 +1,27 @@
+export const updateContent = (
+  /** @type {{ getAttribute: (arg0: string) => any; }} */ element
+) => {
+  console.log("inside")
+  const modalContentId = element.getAttribute("data-modal-content-id")
+  const contentDiv = document.getElementById(modalContentId)
+
+  if (contentDiv) {
+    const content = contentDiv.innerHTML
+    const modalElement = document.getElementById("exampleModalCenter")
+    // @ts-ignore
+    modalElement.querySelector(".modal-body").innerHTML = content
+  } else {
+    console.error("Modal content not found for ID:", modalContentId)
+  }
+}
+
+export const initModalHandler = () => {
+  console.log("Modal handler initialized.")
+  const modalTriggers = document.querySelectorAll(".js-modal-trigger")
+  modalTriggers.forEach(trigger => {
+    trigger.addEventListener("click", event => {
+      event.preventDefault()
+      updateContent(trigger)
+    })
+  })
+}
diff --git a/www/assets/css/carousel.scss b/www/assets/css/carousel.scss
index f142c3570..68ce9f96e 100644
--- a/www/assets/css/carousel.scss
+++ b/www/assets/css/carousel.scss
@@ -101,7 +101,6 @@
 }
 .item-wrapper.testimonial-link {
   padding: 0 10px;
-  // max-width: 411px;
   border-radius: 10px;
   border: 1px solid var(--Border-Grey, #dfe5ec);
   background: #fff;
@@ -136,7 +135,6 @@
 }
 .quotation-btn {
   position: relative;
-  // padding: 20px 50px;
 }
 
 .quotation-btn::before {
@@ -146,7 +144,6 @@
   top: -0.64rem;
   color: white;
   color: var(--white, var(--white-mit-brand, #fff));
-  font-family: Arial;
   font-size: 50px;
   font-style: normal;
   font-weight: 700;
@@ -154,16 +151,13 @@
 }
 .testimonial-title.quote {
   position: relative;
-  // padding: 20px 50px;
 }
 
 .testimonial-title.quote::before {
   content: "“";
   position: absolute;
-  // right: 1px;
   left: 1.1rem;
   top: -3rem;
-  font-family: Arial;
   color: var(--Red-Brand, var(--Red, #a31f34)) !important;
   font-size: 100px;
   font-style: normal;
@@ -173,7 +167,6 @@
 .testimonial-image-wrapper {
   position: relative;
   width: 100%;
-  // max-width:391px;
   padding-top: 56.25%; // 16:9 aspect ratio
 
   .testimonial-image {
@@ -182,7 +175,6 @@
     left: 0;
     width: 100%;
     height: 100%;
-    // max-height:197px;
     object-fit: cover;
     border-radius: 5px;
   }
@@ -195,7 +187,6 @@
   text-overflow: ellipsis;
 }
 .quote-body div.content {
-  // background-color: purple;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 6;
@@ -204,9 +195,8 @@
   border-left: 1px solid var(--DarkBorder, #9c9d9e);
   padding-left: 20px;
   align-self: stretch;
-  color: #000;
+  color: hsl(0, 0%, 0%);
   text-overflow: ellipsis;
-  font-family: Arial;
   font-size: 16px;
   font-style: italic;
   font-weight: 400;
@@ -230,37 +220,75 @@ div.content {
     filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7486%)
       hue-rotate(142deg) brightness(96%) contrast(103%);
   }
+}
+body.modal-open {
+  overflow: auto;
+  overflow-y: auto;
+}
 
-  // .view-all-stories-arrow {
-  //   fill: #fff;
-  //   background:white !important;
-  // }
+.modal-open,
+body {
+  overflow: inherit !important;
 }
-.carousel-inner::after {
-  display: block;
-  clear: both;
-  content: "";
+
+.modal-close-btn {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  line-height: 1;
+  color: black;
+  cursor: pointer;
+  z-index: 999;
+  padding: 15px !important;
+  background: #a31f34 !important;
+  opacity: 1 !important;
+  border-bottom-left-radius: 8px;
+  border-top-right-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.3s ease;
 }
-.modal-dialog-centered::before {
-  display: block !important;
-  height: calc(100vh - 3.5rem) !important;
-  height: -webkit-min-content !important;
-  height: -moz-min-content !important;
-  height: min-content !important;
+
+.modal-close-btn:hover {
+  background: black !important;
 }
-.modal {
-  display: block !important;
-  opacity: 0;
-  visibility: hidden;
-  position: fixed !important;
-  z-index: 1050 !important;
+
+.modal-content {
+  position: relative;
 }
 
-.modal.show {
+.carousel-control-prev,
+.carousel-control-next {
+  width: auto;
+  background: none;
   opacity: 1;
-  visibility: visible;
-  position: fixed;
+}
+
+.carousel-control-prev .material-icons,
+.carousel-control-next .material-icons {
+  font-size: 3.75rem;
+  color: inherit;
+}
+
+.carousel-control-prev-icon,
+.carousel-control-next-icon {
+  display: none;
+}
+
+.carousel-control-prev {
+  left: auto;
+}
+
+.carousel-control-next {
+  right: auto;
+}
+
+.carousel-control-prev,
+.carousel-control-next {
   top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  transform: translateY(-50%);
 }
diff --git a/www/assets/css/home.scss b/www/assets/css/home.scss
index c72dcb7d6..992ee7d49 100644
--- a/www/assets/css/home.scss
+++ b/www/assets/css/home.scss
@@ -786,7 +786,7 @@ $promo-carousel-height: 200px;
 }
 a.share-story-btn {
   color: var(--Primary, #03152d);
-  font-family: Arial;
+  // font-family: Arial;
   font-size: 18px;
   font-style: normal;
   font-weight: 400;
diff --git a/www/layouts/partials/home_stories.html b/www/layouts/partials/home_stories.html
index 1e1505c61..ca744d4d6 100644
--- a/www/layouts/partials/home_stories.html
+++ b/www/layouts/partials/home_stories.html
@@ -6,42 +6,33 @@
     "lg"    (dict "size" 3 "class" "d-none d-lg-flex d-xl-none")
     "xl"    (dict "size" 3 "class" "d-none d-xl-flex")
 -}}
-<div class="test-div">
-  <div class="test-div2">content goes here!</div>
-</div>
-
-<div class="test-div3">empty placeholder content</div>
-
 
-  <div class="home-testimonials mx-auto my-3">
+<div class="home-testimonials mx-auto my-3">
 
     {{ range $breakpoint, $carouselInfo := $breakdowns }}
       {{ $itemsInCarousel := index $carouselInfo "size" }}
       {{ $breakpointVisibilityClass := index $carouselInfo "class" }}
       {{ $carouselId := printf "testimonial-carousel-%v" $breakpoint }}
       <div class="{{ $breakpointVisibilityClass }}">
-        <div class="d-flex flex-direction-row align-items-center justify-content-between w-100">
+        <div class="d-flex flex-direction-row align-items-center justify-content-between w-100 mx-auto carousel slide" data-interval="false" data-touch="true" data-ride="carousel" style="max-width: 1447px;">
           <a href="#{{ $carouselId }}" role="button" data-slide="prev" class="bg-white prev">
             <span class="material-icons" aria-hidden="true" style="font-size: 3.75rem">keyboard_arrow_left</span>
             <span class="sr-only">Previous</span>
           </a>
-          <div id="{{ $carouselId }}" class="carousel slide" data-interval="false" data-touch="true" data-ride="carousel">
-            <h2>OCW Stories</h2>
-            <!-- <div class="carousel-header d-flex flex-row justify-content-between font-weight-bold">
-              {{ if gt (len $stories) 3 }}
-                {{ partial "carousel_controls.html" $carouselId }}
-              {{ end }}
-            </div> -->
-
-            <div class="carousel-inner standard-width container">
+          <div id="{{ $carouselId }}" class="carousel slide standard-width mx-auto" data-interval="false" data-touch="true" data-ride="carousel">
+            <div class="d-flex flex-column">
+            <h2 class="mx-auto">OpenCourseWare Stories</h2>
+            <p class="mx-auto" style="text-align: center">MIT students' stories reflect a relentless pursuit of knowledge and innovation. From coding breakthroughs to launching startups, their journey showcases the Institute's commitment to pushing boundaries and changing the world.</p>
+            </div>
+            <div class="carousel-inner standard-width">
               {{ range $index, $testimonial := $stories }}
                 {{ with $testimonial }}
                   {{ $modulo := mod $index $itemsInCarousel }}
                   {{ $group := div $index $itemsInCarousel }}
                   {{ if eq $modulo 0 }}
-                  <div class="carousel-item row {{ if eq $group 0 }}active{{ end }} flex-nowrap justify-content-center">
+                  <div class="carousel-item row {{ if eq $group 0 }}active{{ end }} flex-nowrap justify-content-between">
                   {{ end }}
-                  <a data-modal-content-id="modal-content-{{ $index }}" class="item-wrapper d-block testimonial-link" style="flex: 1 1; padding:10px; margin-left: 10px;" {{if $testimonial.Params.is_quote}} onclick="updateContent(this); return false;" href="#" data-testimonial="{{ $testimonial }}" data-toggle="modal" data-target="#exampleModalCenter"{{else}}href="{{ $testimonial.RelPermalink }}"{{end}}>
+                  <a data-modal-content-id="modal-content-{{ $index }}" class="item-wrapper d-block testimonial-link {{if $testimonial.Params.is_quote}}js-modal-trigger{{end}}" style="flex: 1 1; padding:10px; margin-left: 10px;" {{if $testimonial.Params.is_quote}} onclick="updateContent(this); return false;" href="#" data-testimonial="{{ $testimonial }}" data-toggle="modal" data-target="#exampleModalCenter"{{else}}href="{{ $testimonial.RelPermalink }}"{{end}}>
                     {{ partial "stories_card.html" (dict "testimonial" $testimonial) }}
                   </a>
                   {{ if $testimonial.Params.is_quote }}
@@ -56,7 +47,7 @@ <h2>OCW Stories</h2>
               {{ end }}
             </div>
           </div>
-          <a href="#{{ $carouselId }}" role="button" data-slide="next" class="bg-white next" >
+          <a href="#{{ $carouselId }}" role="button" data-slide="next" class="bg-white next" tabindex="0">
             <span class="material-icons" aria-hidden="true" style="font-size: 3.75rem">keyboard_arrow_right</span>
             <span class="sr-only">Next</span>
           </a>
@@ -79,23 +70,27 @@ <h2>OCW Stories</h2>
   </div>
 </div>
 
-<!-- Modal -->
 <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
-  <div class="modal-dialog modal-dialog-centered" style="max-width: 600px" role="document">
+  <div class="modal-dialog modal-dialog-centered" style="max-width: 600px; margin: 1rem auto;" role="document">
     <div class="modal-content">
-      <!-- <div class="modal-header"> -->
-        <!-- <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5> -->
-      <!-- </div> -->
-      <!-- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-        <span aria-hidden="true">&times;</span>
-      </button> -->
+      <button type="button" class="close modal-close-btn" data-dismiss="modal" aria-label="Close">
+        <!-- <span aria-hidden="true">&times;</span> -->
+        <img
+        class="p-0 m-0"
+        src="{{ partial "get_asset_webpack_url.html" "images/quote_close.svg" }}"
+        alt=""
+        style="margin-left:10px; color: white;"
+      />
+      </button>
       <div class="modal-body" style="padding: 10px;">
       </div>
-      <!-- <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-        <button type="button" class="btn btn-primary">Save changes</button>
-      </div> -->
     </div>
   </div>
 </div>
-<!-- {{ partialCached "quotes_card_modal_handler.html" . }} -->
+<script>
+  window.addEventListener("load", function () {
+    if (window.initModalHandler) {
+      window.initModalHandler();
+    }
+  });
+</script>
\ No newline at end of file
diff --git a/www/layouts/partials/stories_card.html b/www/layouts/partials/stories_card.html
index 90ce8b71a..e1f9471bd 100644
--- a/www/layouts/partials/stories_card.html
+++ b/www/layouts/partials/stories_card.html
@@ -1,10 +1,6 @@
 {{$testimonial := .testimonial}}
 {{$jsurls := .jsurls}}
 {{$context := .context | default "carousel"}}
-<!-- <div>{{$testimonial.Title}}</div> -->
-<!-- <div>{{$jsurls}}</div> -->
-<!-- <div>{{$context}}</div> -->
-<!-- <div>otherwise</div> -->
 <div class="h-100">
     <div class="testimonial d-flex flex-column rounded h-100">
       <div class="testimonial-image-wrapper" style="margin-bottom: 20px">
@@ -17,7 +13,6 @@
       <div class="testimonial-title {{if $testimonial.Params.is_quote}}quote{{ end }}" style="padding: 0px 20px; margin-bottom: 20px">
         <div class="name font-weight-bold" style="font-size: 20px; margin-bottom: 10px;">
           {{ $testimonial.Title }}
-          <!-- <div>{{$context}}</div> -->
         </div>
         <div class="occupation-wrapper d-flex justify-content-between">
           <div class="occupation">
@@ -28,7 +23,7 @@
           </div>
         </div>
       </div>
-      <div class="{{ if not $testimonial.Params.is_quote}}story-body{{ else }}quote-body{{ end }} d-flex flex-column justify-content-between h-100" style="padding: 0px 20px 20px 20px">
+      <div class="{{ if not $testimonial.Params.is_quote}}story-body{{ else }}quote-body{{ end }}{{if eq $context "carousel"}} carousel{{else}}modal{{end}} d-flex flex-column justify-content-between h-100" style="padding: 0px 20px 20px 20px">
         <div class="content {{ if eq $context "carousel" }}testimonial-carousel{{ else }}testimonial-modal{{ end }}">
           {{ $testimonial.Content | plainify | replaceRE "\\s+" " " }}
         </div>
diff --git a/www/layouts/stories/list.html b/www/layouts/stories/list.html
index 997b3664a..2de04a8c4 100644
--- a/www/layouts/stories/list.html
+++ b/www/layouts/stories/list.html
@@ -15,7 +15,7 @@
         {{ end }}
             <a 
               data-modal-content-id="modal-content-{{ $index }}" 
-              class="item-wrapper d-block testimonial-link" 
+              class="item-wrapper d-block testimonial-link {{if $testimonial.Params.is_quote}}js-modal-trigger{{end}}" 
               style="padding:10px; flex: 1 1; margin-left: 10px;" 
               {{ if $testimonial.Params.is_quote }} 
                 onclick="updateContent(this); return false;" 
@@ -56,5 +56,11 @@
       </div>
     </div>
   </div>
-  <!-- {{ partialCached "quotes_card_modal_handler.html" . }} -->
+  <script>
+    window.addEventListener("load", function () {
+      if (window.initModalHandler) {
+        window.initModalHandler();
+      }
+    });
+  </script>
   {{ end }}
diff --git a/www/layouts/stories/single.html b/www/layouts/stories/single.html
index a2964983d..b6e0614d0 100644
--- a/www/layouts/stories/single.html
+++ b/www/layouts/stories/single.html
@@ -10,18 +10,34 @@
     <h1 class="text-white text-center">OCW Stories</h1>
   </div>
   <div class="testimonial-single navbar navbar-light bg-light">
-    <div class="testimonials w-100">
-      <div class="testimonial standard-width mx-auto d-flex">
-        <div style="max-width:180px; width: 100%">
+    <div class="testimonials w-100 standard-width mx-auto">
+      <a href="/stories" class="view-all-stories-left-btn text-decoration-none d-inline-flex align-items-center" style="font-weight: 600;">
+        <img
+          class="view-all-stories-left-arrow"
+          src="{{ partial "get_asset_webpack_url.html" "images/ocw_story_single_arrow_left.svg" }}"
+          alt=""
+          style="margin-right:10px;"
+        />
+        <h1 style="margin: 0; font-size: 35px">OCW Stories</h1>
+      </a>
+      
+      <div class="testimonial standard-width mx-auto d-flex align-items-center">
+        <div style="max-width: 180px; width: 100%;">
           <div class="img-container single-testimonial-page">
-            <img src="{{ partial "resource_url.html" (dict "context" . "url" (partial "resource_metadata.html" $story.Params.image.content).Params.file) }}" alt="" />
+            <img
+              src="{{ partial "resource_url.html" (dict "context" . "url" (partial "resource_metadata.html" $story.Params.image.content).Params.file) }}"
+              alt=""
+              style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;"
+            />
           </div>
         </div>
-        <div class="detail d-flex flex-column flex-nowrap justify-content-between p-0 ml-sm-5">
+        <div class="detail d-flex flex-column flex-nowrap justify-content-center" style="margin-left: 30px;">
           <div class="text">
-            <h2>{{ $story.Title }}</h2>
-            <p class="font-weight-bold">{{ $story.Params.occupation }} | {{ $story.Params.location }}</p>
-            <p class="summary">
+            <h2 style="margin-bottom: 20px; font-size: 30px; font-weight: 700;">{{ $story.Title }}</h2>
+            <p style="margin-bottom: 20px; font-weight: 400;">
+              {{ $story.Params.occupation }} | {{ $story.Params.location }}
+            </p>
+            <p class="summarys mb-0 pb-0" style="font-size: 18px; color: var(--Primary, #03152D); font-weight: 700;">
               "{{ $story.Params.leadquote }}"
             </p>
           </div>
@@ -42,7 +58,7 @@ <h3 class="mb-4">More Stories</h3>
             {{ range $index, $testimonial := first 3 (where .Site.RegularPages "Type" "==" "stories") }}
               <a 
                 data-modal-content-id="modal-content-{{ $index }}" 
-                class="item-wrapper d-block testimonial-link js-modal-trigger" 
+                class="item-wrapper d-block testimonial-link {{if $testimonial.Params.is_quote}}js-modal-trigger{{end}}" 
                 style="flex: 1 1; padding:10px; margin-left: 10px;" 
                 {{ if $testimonial.Params.is_quote }} 
                   href="#" 
@@ -85,4 +101,11 @@ <h3 class="mb-4">More Stories</h3>
   </div>
 </div>
 
+<script>
+  window.addEventListener("load", function () {
+    if (window.initModalHandler) {
+      window.initModalHandler();
+    }
+  });
+</script>
 {{ end }}

From 0035f2ebc07534b6896d170e817d276fb649ddea Mon Sep 17 00:00:00 2001
From: ibrahimjaved12 <ibrahim.javed@arbisoft.com>
Date: Tue, 19 Nov 2024 19:48:23 +0500
Subject: [PATCH 13/18] Adjust everything

---
 base-theme/assets/index.ts                    |  11 +-
 .../assets/quotes_card_modal_handler.js       |  27 ---
 .../assets/quotes_card_modal_handler.ts       |  37 ++++
 www/assets/css/carousel.scss                  | 179 +++++++++++++++++-
 www/assets/css/home.scss                      |   2 +-
 www/assets/css/testimonials.scss              |   8 +-
 www/layouts/home.html                         |  11 --
 www/layouts/partials/home_stories.html        | 134 +++++++------
 www/layouts/partials/quotes_modal.html        |  28 +++
 www/layouts/stories/list.html                 |  47 ++---
 www/layouts/stories/single.html               |  52 ++---
 11 files changed, 336 insertions(+), 200 deletions(-)
 delete mode 100644 base-theme/assets/quotes_card_modal_handler.js
 create mode 100644 base-theme/assets/quotes_card_modal_handler.ts
 create mode 100644 www/layouts/partials/quotes_modal.html

diff --git a/base-theme/assets/index.ts b/base-theme/assets/index.ts
index 3aa2dc538..5d3962da7 100644
--- a/base-theme/assets/index.ts
+++ b/base-theme/assets/index.ts
@@ -9,6 +9,7 @@ import PDFObject from "pdfobject"
 import "./js/polyfill"
 import "video.js/dist/video-js.css"
 import { initExternalLinkModal } from "./js/external_link_modal"
+import { initQuotesModalHandler } from "./quotes_card_modal_handler"
 import { initVideoDownloadPopup } from "./js/video_download_popup"
 
 export interface OCWWindow extends Window {
@@ -39,16 +40,8 @@ window.initVideoJS = () => {
   videoJSLoaded = true
 }
 
-let modalHandlerLoaded = false
-
-window.initModalHandler = () => {
-  if (modalHandlerLoaded) return
-  import("./quotes_card_modal_handler").then(module => {
-    module.initModalHandler()
-  })
-  modalHandlerLoaded = true
-}
 $(function() {
   window.Sentry = initSentry()
   initExternalLinkModal()
+  initQuotesModalHandler()
 })
diff --git a/base-theme/assets/quotes_card_modal_handler.js b/base-theme/assets/quotes_card_modal_handler.js
deleted file mode 100644
index da78b0e19..000000000
--- a/base-theme/assets/quotes_card_modal_handler.js
+++ /dev/null
@@ -1,27 +0,0 @@
-export const updateContent = (
-  /** @type {{ getAttribute: (arg0: string) => any; }} */ element
-) => {
-  console.log("inside")
-  const modalContentId = element.getAttribute("data-modal-content-id")
-  const contentDiv = document.getElementById(modalContentId)
-
-  if (contentDiv) {
-    const content = contentDiv.innerHTML
-    const modalElement = document.getElementById("exampleModalCenter")
-    // @ts-ignore
-    modalElement.querySelector(".modal-body").innerHTML = content
-  } else {
-    console.error("Modal content not found for ID:", modalContentId)
-  }
-}
-
-export const initModalHandler = () => {
-  console.log("Modal handler initialized.")
-  const modalTriggers = document.querySelectorAll(".js-modal-trigger")
-  modalTriggers.forEach(trigger => {
-    trigger.addEventListener("click", event => {
-      event.preventDefault()
-      updateContent(trigger)
-    })
-  })
-}
diff --git a/base-theme/assets/quotes_card_modal_handler.ts b/base-theme/assets/quotes_card_modal_handler.ts
new file mode 100644
index 000000000..045692934
--- /dev/null
+++ b/base-theme/assets/quotes_card_modal_handler.ts
@@ -0,0 +1,37 @@
+export function initQuotesModalHandler() {
+  $(document).ready(() => {
+    const modalElement = $("#exampleModalCenter")
+
+    let carouselId: string | undefined
+
+    $(".js-modal-trigger").on("click", event => {
+      event.preventDefault()
+
+      const target = $(event.currentTarget)
+      const modalContentId = target.data("modal-content-id")
+      const contentDiv = $(`#${modalContentId}`)
+
+      const carouselElement = target.closest(".carousel")
+      carouselId = carouselElement.attr("id")
+
+      if (contentDiv.length) {
+        const content = contentDiv.html()
+        modalElement.find(".modal-body").html(content)
+        // @ts-ignore
+        modalElement.modal("show")
+      } else {
+        console.error("Modal content not found for ID:", modalContentId)
+      }
+    })
+
+    modalElement.on("shown.bs.modal", () => {
+      modalElement.focus()
+    })
+
+    modalElement.on("hidden.bs.modal", () => {
+      if (carouselId) {
+        $(`#${carouselId}`).focus()
+      }
+    })
+  })
+}
diff --git a/www/assets/css/carousel.scss b/www/assets/css/carousel.scss
index 68ce9f96e..71ac966ac 100644
--- a/www/assets/css/carousel.scss
+++ b/www/assets/css/carousel.scss
@@ -64,7 +64,7 @@
   }
 
   .item-wrapper {
-    padding: 0 10px;
+    padding: 0 8px;
     &:first-child {
       padding-left: 0;
     }
@@ -74,7 +74,7 @@
     }
   }
   .item-wrapper.testimonial-link {
-    max-width: 411px;
+    // max-width: 411px;
     border-radius: 10px;
     border: 1px solid var(--Border-Grey, #dfe5ec);
     background: #fff;
@@ -157,7 +157,7 @@
   content: "“";
   position: absolute;
   left: 1.1rem;
-  top: -3rem;
+  top: -3.2rem;
   color: var(--Red-Brand, var(--Red, #a31f34)) !important;
   font-size: 100px;
   font-style: normal;
@@ -292,3 +292,176 @@ body {
   top: 50%;
   transform: translateY(-50%);
 }
+
+.home-testimonials {
+  max-width: 1447px !important;
+  margin: auto !important;
+
+  .carousel {
+    &.slide {
+      max-width: 1447px !important;
+    }
+
+    .carousel-header {
+      h2 {
+        text-align: center;
+        font-size: 32px;
+        font-weight: 700;
+        line-height: 25px;
+        margin-bottom: 20px;
+      }
+      p {
+        font-size: 18px;
+        font-weight: 400;
+        line-height: 25px; /* 138.889% */
+        margin-bottom: 30px;
+      }
+
+      p {
+        text-align: center;
+      }
+    }
+
+    .carousel-section {
+      .prev,
+      .next {
+        font-size: 3.75rem !important;
+      }
+    }
+
+    .carousel-inner {
+      margin-top: 2rem;
+      padding: 0;
+    }
+  }
+}
+
+.hidden-modal-content {
+  display: none;
+}
+
+.modal-dialog {
+  max-width: 600px;
+  margin: 1rem auto;
+}
+
+.modal-body {
+  padding: 10px;
+}
+
+.view-all-stories-btn {
+  padding: 15px 20px;
+  border-radius: 3px;
+  border: 1px solid var(--Border-Grey, #dfe5ec) !important;
+  background: var(--white-mit-brand, #fff);
+  font-weight: 600 !important;
+  color: #03152d !important;
+
+  .view-all-stories-arrow {
+    margin-left: 10px;
+    color: white;
+  }
+}
+
+// List styling
+.list-container {
+  .testimonial-link {
+    padding: 10px !important;
+    flex: 1 1 auto;
+    // margin-left: 10px;
+  }
+
+  .hidden-modal-content {
+    display: none;
+  }
+}
+//  Single styling
+.single-container {
+  .testimonial-single.navbar {
+    border-bottom: 1px solid var(--Border-Grey, #dfe5ec);
+    background: var(--Background-Grey, #f0f5f7);
+    box-shadow: 0px 2px 10px 0px rgba(120, 169, 197, 0.15);
+    .testimonial > div {
+      width: 100%;
+    }
+    // .testimonial img {
+    //   position: absolute;
+    //   top: 0;
+    //   left: 0;
+    //   width: 100%;
+    //   height: 100%;
+    //   object-fit: cover;
+    // }
+  }
+  .view-all-stories-left-btn {
+    .view-all-stories-left-arrow {
+      margin-right: 10px;
+    }
+    h1 {
+      margin: 0;
+      font-size: 35px;
+    }
+  }
+  .more-stories {
+    h3 {
+      font-size: 22px;
+      font-weight: 700;
+      line-height: 28px;
+      padding: 0 0 20px 0;
+      margin: 0;
+    }
+    .item-wrapper.testimonial-link {
+      flex: 1 1;
+      padding: 10px;
+      margin-top: 16px;
+    }
+    .hidden-modal-content {
+      display: none;
+    }
+    .view-all-stories {
+      margin-top: 16px;
+      color: white;
+      font-size: 14px;
+      font-weight: 700;
+      border-radius: 5px;
+      background: var(--Primary, #03152d);
+    }
+  }
+}
+.list-container {
+  .standard-width.container {
+    // padding-top: 50px;
+    // padding-bottom: 50px;
+  }
+  .standard-width.container > * {
+    margin: 0 auto;
+  }
+  .item-wrapper {
+    margin-top: 1rem;
+    margin-right: 1rem;
+    // margin-right: 1rem;
+    // &:nth-child(1),
+    // &:nth-child(2) {
+    //   margin-top: 0;
+    // }
+  }
+  .testimonial-single.navbar {
+    border-bottom: 1px solid var(--Border-Grey, #dfe5ec);
+    background: var(--Background-Grey, #f0f5f7);
+    box-shadow: 0px 2px 10px 0px rgba(120, 169, 197, 0.15);
+    padding: 50px 100px;
+    h1 {
+      font-size: 35px;
+      font-weight: 700;
+      line-height: 25px;
+      margin-bottom: 25px;
+    }
+    p {
+      font-size: 18px;
+      font-weight: 400;
+      line-height: 25px;
+      text-align: center;
+      margin: 0;
+    }
+  }
+}
diff --git a/www/assets/css/home.scss b/www/assets/css/home.scss
index 992ee7d49..60bdec217 100644
--- a/www/assets/css/home.scss
+++ b/www/assets/css/home.scss
@@ -765,7 +765,7 @@ $promo-carousel-height: 200px;
 }
 .img-container.single-testimonial-page {
   width: 100%;
-  padding-top: 61%;
+  padding-top: 56.25%;
   position: relative;
   overflow: hidden;
   border-radius: 8px;
diff --git a/www/assets/css/testimonials.scss b/www/assets/css/testimonials.scss
index 343f653e9..ea1311fb3 100644
--- a/www/assets/css/testimonials.scss
+++ b/www/assets/css/testimonials.scss
@@ -9,15 +9,9 @@ $row-max-height: 200px;
   }
 
   .testimonial {
-    border-bottom: $border-style;
+    // border-bottom: $border-style;
     padding: $row-padding 0;
 
-    img {
-      width: $row-max-height;
-      height: $row-max-height;
-      object-fit: cover;
-    }
-
     .detail {
       h2,
       p {
diff --git a/www/layouts/home.html b/www/layouts/home.html
index 7f3298bed..42ad0281b 100644
--- a/www/layouts/home.html
+++ b/www/layouts/home.html
@@ -115,17 +115,6 @@ <h2>Your Donation Makes a Difference</h2>
   </div>
   {{ partial "ocw_news.html" . }}
   {{ partial "home_stories.html" . }}
-  <div class="d-flex justify-content-center my-4">
-    <div class="d-flex justify-content-between align-items-center" style="background: var(--Primary, #03152D); border-radius: 10px; padding: 40px; color: var(--white, #FFF);">
-      <div>
-        <h2 style="margin: 0; font-weight: bold; color:white;">Share your OCW story. We'd love to hear from you!</h2>
-        <p style="margin: 0;">How OCW has made an impact in your life.</p>
-      </div>
-      <a href="#" class="btn" style="padding: 15px 20px; border-radius: 3px; background: var(--white, #FFF); color: var(--Primary, #03152D); border: 1px solid var(--white, #FFF); font-weight: 600;">
-        Share your Story
-      </a>
-    </div>
-  </div>
   <div class="d-flex standard-width container justify-content-center my-4">
     <div class="d-flex flex-column flex-md-row justify-content-between align-items-center" style="background: var(--Primary, #03152D); border-radius: 10px; padding: 40px; color: var(--white, #FFF);">
       <div class="share-story-text mb-3 mb-md-0 text-center text-md-left">
diff --git a/www/layouts/partials/home_stories.html b/www/layouts/partials/home_stories.html
index ca744d4d6..921ccceb1 100644
--- a/www/layouts/partials/home_stories.html
+++ b/www/layouts/partials/home_stories.html
@@ -3,94 +3,88 @@
 {{- $breakdowns := dict
     "xs-sm" (dict "size" 1 "class" "d-flex d-md-none")
     "md"    (dict "size" 2 "class" "d-none d-md-flex d-lg-none")
-    "lg"    (dict "size" 3 "class" "d-none d-lg-flex d-xl-none")
+    "lg"    (dict "size" 2 "class" "d-none d-lg-flex d-xl-none")
     "xl"    (dict "size" 3 "class" "d-none d-xl-flex")
 -}}
-
+{{ partial "quotes_modal.html" }}
 <div class="home-testimonials mx-auto my-3">
-
-    {{ range $breakpoint, $carouselInfo := $breakdowns }}
-      {{ $itemsInCarousel := index $carouselInfo "size" }}
-      {{ $breakpointVisibilityClass := index $carouselInfo "class" }}
-      {{ $carouselId := printf "testimonial-carousel-%v" $breakpoint }}
-      <div class="{{ $breakpointVisibilityClass }}">
-        <div class="d-flex flex-direction-row align-items-center justify-content-between w-100 mx-auto carousel slide" data-interval="false" data-touch="true" data-ride="carousel" style="max-width: 1447px;">
+  {{ range $breakpoint, $carouselInfo := $breakdowns }}
+    {{ $itemsInCarousel := index $carouselInfo "size" }}
+    {{ $breakpointVisibilityClass := index $carouselInfo "class" }}
+    {{ $isMobile := (eq $itemsInCarousel 1) }}
+    {{ $carouselId := (printf "testimonial-carousel-%v" $breakpoint) }}
+    <div class="{{ $breakpointVisibilityClass }}">
+      <div id="{{ $carouselId }}" class="carousel slide" style="max-width: 1447px;" data-interval="false" data-touch="true" data-ride="carousel">
+        <div class="carousel-header d-flex flex-column mx-auto">
+          <h2 class="mx-auto">OpenCourseWare Stories</h2>
+          <p class="mx-auto text-center">
+            MIT students' stories reflect a relentless pursuit of knowledge and innovation.
+            From coding breakthroughs to launching startups, their journey showcases the Institute's
+            commitment to pushing boundaries and changing the world.
+          </p>
+        </div>
+        <div class="carousel-section d-flex align-items-center">
           <a href="#{{ $carouselId }}" role="button" data-slide="prev" class="bg-white prev">
             <span class="material-icons" aria-hidden="true" style="font-size: 3.75rem">keyboard_arrow_left</span>
             <span class="sr-only">Previous</span>
           </a>
-          <div id="{{ $carouselId }}" class="carousel slide standard-width mx-auto" data-interval="false" data-touch="true" data-ride="carousel">
-            <div class="d-flex flex-column">
-            <h2 class="mx-auto">OpenCourseWare Stories</h2>
-            <p class="mx-auto" style="text-align: center">MIT students' stories reflect a relentless pursuit of knowledge and innovation. From coding breakthroughs to launching startups, their journey showcases the Institute's commitment to pushing boundaries and changing the world.</p>
-            </div>
-            <div class="carousel-inner standard-width">
-              {{ range $index, $testimonial := $stories }}
-                {{ with $testimonial }}
-                  {{ $modulo := mod $index $itemsInCarousel }}
-                  {{ $group := div $index $itemsInCarousel }}
-                  {{ if eq $modulo 0 }}
-                  <div class="carousel-item row {{ if eq $group 0 }}active{{ end }} flex-nowrap justify-content-between">
-                  {{ end }}
-                  <a data-modal-content-id="modal-content-{{ $index }}" class="item-wrapper d-block testimonial-link {{if $testimonial.Params.is_quote}}js-modal-trigger{{end}}" style="flex: 1 1; padding:10px; margin-left: 10px;" {{if $testimonial.Params.is_quote}} onclick="updateContent(this); return false;" href="#" data-testimonial="{{ $testimonial }}" data-toggle="modal" data-target="#exampleModalCenter"{{else}}href="{{ $testimonial.RelPermalink }}"{{end}}>
-                    {{ partial "stories_card.html" (dict "testimonial" $testimonial) }}
-                  </a>
-                  {{ if $testimonial.Params.is_quote }}
-                  <div id="modal-content-{{ $index }}" style="display: none;">
-                    {{ partial "stories_card.html" (dict "testimonial" $testimonial "context" "modal") }}
-                  </div>
-                  {{ end }}
-                  {{ if or (eq $modulo (sub $itemsInCarousel 1)) (eq $index (sub (len $stories) 1)) }}
+          <div class="carousel-inner d-flex {{ if not $isMobile }}container{{ end }} mt-2 px-0">
+            {{ range $index, $testimonial := $stories }}
+              {{ with $testimonial }}
+                {{ $modulo := mod $index $itemsInCarousel }}
+                {{ $group := div $index $itemsInCarousel }}
+                {{ if eq $modulo 0 }}
+                <div class="carousel-item {{ if not $isMobile }}row{{ end }} {{ if eq $group 0 }}active{{ end }}">
+                {{ end }}
+                  <div class="item-wrapper {{ if not $isMobile }}col-{{ div 12 $itemsInCarousel }}{{ end }} w-100 d-flex justify-content-center">
+                    <div class="item-wrapper w-100 d-flex justify-content-center">
+                      {{ if $testimonial.Params.is_quote }}
+                        <div id="modal-content-{{ $index }}" style="display: none;">
+                          {{ partial "stories_card.html" (dict "testimonial" $testimonial "context" "modal") }}
+                        </div>
+                      {{ end }}
+                      <a
+                        data-modal-content-id="modal-content-{{ $index }}"
+                        class="d-block w-100 item-wrapper testimonial-link {{ if $testimonial.Params.is_quote }}js-modal-trigger{{ end }}"
+                        style="padding: 10px;"
+                        {{ if $testimonial.Params.is_quote }}
+                          href="#"
+                          data-testimonial="{{ $testimonial }}"
+                          data-toggle="modal"
+                          data-target="#exampleModalCenter"
+                        {{ else }}
+                          href="{{ $testimonial.RelPermalink }}"
+                        {{ end }}
+                      >
+                        {{ partial "stories_card.html" (dict "testimonial" $testimonial) }}
+                      </a>
+                    </div>
                   </div>
-                  {{ end }}
+                {{ if or (eq $modulo (sub $itemsInCarousel 1)) (eq $index (sub (len $stories) 1)) }}
+                </div>
                 {{ end }}
               {{ end }}
-            </div>
+            {{ end }}
           </div>
-          <a href="#{{ $carouselId }}" role="button" data-slide="next" class="bg-white next" tabindex="0">
+          <a href="#{{ $carouselId }}" role="button" data-slide="next" class="bg-white next">
             <span class="material-icons" aria-hidden="true" style="font-size: 3.75rem">keyboard_arrow_right</span>
             <span class="sr-only">Next</span>
           </a>
         </div>
       </div>
-    {{ end }}
-    <div class="d-flex justify-content-center my-4">
-      <div class="d-flex justify-content-center my-4">
-        <a href="/stories" class="btn view-all-stories-btn px-4 py-3 text-decoration-none d-flex align-items-center" style="padding: 15px 20px; border-radius: 3px; border: 1px solid var(--Border-Grey, #DFE5EC); background: var(--white-mit-brand, #FFF); font-weight: 600; color:#03152D;">
-          View All OCW Stories
-          <img
-            class="view-all-stories-arrow"
-            src="{{ partial "get_asset_webpack_url.html" "images/ocw_stories_btn_arrow_right.svg" }}"
-            alt=""
-            style="margin-left:10px; color: white;"
-          />
-        </a>
-      </div>
     </div>
-  </div>
-</div>
-
-<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
-  <div class="modal-dialog modal-dialog-centered" style="max-width: 600px; margin: 1rem auto;" role="document">
-    <div class="modal-content">
-      <button type="button" class="close modal-close-btn" data-dismiss="modal" aria-label="Close">
-        <!-- <span aria-hidden="true">&times;</span> -->
-        <img
-        class="p-0 m-0"
-        src="{{ partial "get_asset_webpack_url.html" "images/quote_close.svg" }}"
+  {{ end }}
+  <div class="d-flex justify-content-center my-4">
+    <a
+      href="{{ $storiesSection.RelPermalink }}"
+      class="btn view-all-stories-btn px-4 py-3 text-decoration-none d-flex align-items-center"
+    >
+      View All OCW Stories
+      <img
+        class="view-all-stories-arrow"
+        src="{{ partial "get_asset_webpack_url.html" "images/ocw_stories_btn_arrow_right.svg" }}"
         alt=""
-        style="margin-left:10px; color: white;"
       />
-      </button>
-      <div class="modal-body" style="padding: 10px;">
-      </div>
-    </div>
+    </a>
   </div>
 </div>
-<script>
-  window.addEventListener("load", function () {
-    if (window.initModalHandler) {
-      window.initModalHandler();
-    }
-  });
-</script>
\ No newline at end of file
diff --git a/www/layouts/partials/quotes_modal.html b/www/layouts/partials/quotes_modal.html
new file mode 100644
index 000000000..854c2b686
--- /dev/null
+++ b/www/layouts/partials/quotes_modal.html
@@ -0,0 +1,28 @@
+<div
+  class="modal fade"
+  id="exampleModalCenter"
+  tabindex="-1"
+  role="dialog"
+  aria-labelledby="exampleModalCenterTitle"
+  aria-hidden="true"
+>
+  <div
+    class="modal-dialog modal-dialog-centered"
+    style="max-width: 600px; margin: 1rem auto;"
+    role="document"
+  >
+    <div class="modal-content">
+      <button type="button" class="close modal-close-btn" data-dismiss="modal" aria-label="Close">
+        <img
+          class="p-0 m-0"
+          src="{{ partial "get_asset_webpack_url.html" "images/quote_close.svg" }}"
+          alt=""
+          style="margin-left:10px; color: white;"
+        />
+      </button>
+      <div class="modal-body" style="padding: 10px;">
+        <!-- Modal content will be injected here by JavaScript -->
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/www/layouts/stories/list.html b/www/layouts/stories/list.html
index 2de04a8c4..a314d23a4 100644
--- a/www/layouts/stories/list.html
+++ b/www/layouts/stories/list.html
@@ -1,22 +1,27 @@
 {{ define "main" }}
 {{- $pages := .Site.RegularPages -}}
 {{- $stories := where $pages "Type" "==" "stories" -}}
-<div>
+<div class="list-container">
   {{ block "header" . }}
   {{ partialCached "header" . }}
   {{end}}
-  <div class="">
-    <div class="row">
+  <div class="testimonial-single navbar d-flex flex-column">
+    <div class="standard-width container">
+    <h1>OpenCourseWare Stories</h1>
+    <p>MIT students' stories reflect a relentless pursuit of knowledge and innovation. From coding breakthroughs to launching startups, their journey showcases the Institute's commitment to pushing boundaries and changing the world.</p>
+    </div>
+  </div>
+  <div class="standard-width container">
+    <div class="d-flex flex-wrap">
       {{ range $index, $testimonial := $stories }}
         {{ if or (eq (mod $index 8) 0) (eq (mod $index 8) 1) }}
-          <div class="row flex-nowrap justify-content-center col-12 col-md-6 col-lg-6 mb-4">
+          <div class="d-flex flex-nowrap justify-content-center col-12 col-md-6 col-lg-6 m-0 p-0">
         {{ else }}  
-          <div class="row flex-nowrap justify-content-center col-12 col-md-6 col-lg-4 mb-4">
+          <div class="d-flex flex-nowrap justify-content-center col-12 col-md-6 col-lg-4 m-0 p-0">
         {{ end }}
             <a 
               data-modal-content-id="modal-content-{{ $index }}" 
-              class="item-wrapper d-block testimonial-link {{if $testimonial.Params.is_quote}}js-modal-trigger{{end}}" 
-              style="padding:10px; flex: 1 1; margin-left: 10px;" 
+              class="item-wrapper d-block testimonial-link {{if $testimonial.Params.is_quote}}js-modal-trigger{{end}} text-decoration-none" 
               {{ if $testimonial.Params.is_quote }} 
                 onclick="updateContent(this); return false;" 
                 href="#" 
@@ -29,7 +34,7 @@
               {{ partial "stories_card.html" (dict "testimonial" $testimonial "index" $index) }}
             </a>
             {{ if $testimonial.Params.is_quote }}
-              <div id="modal-content-{{ $index }}" style="display: none;">
+              <div id="modal-content-{{ $index }}" class="hidden-modal-content">
                 {{ partial "stories_card.html" (dict "testimonial" $testimonial "context" "modal") }}
               </div>
             {{ end }}
@@ -38,29 +43,5 @@
     </div>
   </div>
   {{ block "footer" . }} {{ partialCached "footer" . }} {{end}}
-  <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
-    <div class="modal-dialog modal-dialog-centered" style="max-width: 600px" role="document">
-      <div class="modal-content">
-        <!-- <div class="modal-header"> -->
-          <!-- <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5> -->
-        <!-- </div> -->
-        <!-- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          <span aria-hidden="true">&times;</span>
-        </button> -->
-        <div class="modal-body" style="padding: 10px;">
-        </div>
-        <!-- <div class="modal-footer">
-          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-          <button type="button" class="btn btn-primary">Save changes</button>
-        </div> -->
-      </div>
-    </div>
-  </div>
-  <script>
-    window.addEventListener("load", function () {
-      if (window.initModalHandler) {
-        window.initModalHandler();
-      }
-    });
-  </script>
+  {{ partial "quotes_modal.html" }}
   {{ end }}
diff --git a/www/layouts/stories/single.html b/www/layouts/stories/single.html
index b6e0614d0..79c6a1cb4 100644
--- a/www/layouts/stories/single.html
+++ b/www/layouts/stories/single.html
@@ -1,33 +1,28 @@
 {{ define "main" }}
 {{- $story := . -}}
 
-<div>
+<div class="single-container">
   {{ block "header" . }}
   {{ partialCached "header" . }}
   {{ end }}
   
-  <div class="header-bar bg-secondary py-2 mb-4">
-    <h1 class="text-white text-center">OCW Stories</h1>
-  </div>
-  <div class="testimonial-single navbar navbar-light bg-light">
+  <div class="testimonial-single navbar">
     <div class="testimonials w-100 standard-width mx-auto">
-      <a href="/stories" class="view-all-stories-left-btn text-decoration-none d-inline-flex align-items-center" style="font-weight: 600;">
+      <a href="/stories" class="view-all-stories-left-btn text-decoration-none d-inline-flex align-items-center">
         <img
           class="view-all-stories-left-arrow"
           src="{{ partial "get_asset_webpack_url.html" "images/ocw_story_single_arrow_left.svg" }}"
           alt=""
-          style="margin-right:10px;"
         />
-        <h1 style="margin: 0; font-size: 35px">OCW Stories</h1>
+        <h1>OCW Stories</h1>
       </a>
       
       <div class="testimonial standard-width mx-auto d-flex align-items-center">
-        <div style="max-width: 180px; width: 100%;">
+        <div style="max-width: 200px;">
           <div class="img-container single-testimonial-page">
             <img
               src="{{ partial "resource_url.html" (dict "context" . "url" (partial "resource_metadata.html" $story.Params.image.content).Params.file) }}"
               alt=""
-              style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;"
             />
           </div>
         </div>
@@ -45,21 +40,20 @@ <h2 style="margin-bottom: 20px; font-size: 30px; font-weight: 700;">{{ $story.Ti
       </div>
     </div>
   </div>
-  <div class="standard-width mx-auto mt-5 mb-5">
+  <div class="container standard-width mx-auto mt-5 mb-5">
     <div class="row">
       <div class="full-testimonial pt-5 pb-3 col-md-8">
         {{ .Content }}
       </div>
       <!-- Sidebar -->
       <div class="col-md-4">
-        <div>
-          <h3 class="mb-4">More Stories</h3>
+        <div class="more-stories">
+          <h3>More Stories</h3>
           <div class="flex-nowrap justify-content-center">
             {{ range $index, $testimonial := first 3 (where .Site.RegularPages "Type" "==" "stories") }}
               <a 
                 data-modal-content-id="modal-content-{{ $index }}" 
-                class="item-wrapper d-block testimonial-link {{if $testimonial.Params.is_quote}}js-modal-trigger{{end}}" 
-                style="flex: 1 1; padding:10px; margin-left: 10px;" 
+                class="item-wrapper d-block testimonial-link {{if $testimonial.Params.is_quote}}js-modal-trigger{{end}} text-decoration-none" 
                 {{ if $testimonial.Params.is_quote }} 
                   href="#" 
                   data-toggle="modal" 
@@ -70,19 +64,14 @@ <h3 class="mb-4">More Stories</h3>
               >
                 {{ partial "stories_card.html" (dict "testimonial" $testimonial "index" $index) }}
               </a>
-              <div id="modal-content-{{ $index }}" style="display: none;">
+              <div id="modal-content-{{ $index }}" class="hidden-modal-content">
                 {{ partial "stories_card.html" (dict "testimonial" $testimonial "context" "modal") }}
               </div>
             {{ end }}
           </div>
-          <div class="d-flex justify-content-center mt-4">
-            <a href="/stories" class="btn px-4 py-3 text-decoration-none d-flex align-items-center" style="padding: 15px 20px; border-radius: 3px; border: 1px solid var(--Border-Grey, #DFE5EC); background: var(--white-mit-brand, #FFF); font-weight: 600; color:#03152D;">
+          <div>
+            <a href="/stories" class="btn view-all-stories px-4 py-3 text-decoration-none d-flex justify-content-center align-items-center w-100">
               View All OCW Stories
-              <img
-                class="ml-2"
-                src="{{ partial "get_asset_webpack_url.html" "images/ocw_stories_btn_arrow_right.svg" }}"
-                alt=""
-              />
             </a>
           </div>
         </div>
@@ -92,20 +81,5 @@ <h3 class="mb-4">More Stories</h3>
   {{ block "footer" . }} {{ partialCached "footer" . }} {{end}}
 </div>
 
-<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
-  <div class="modal-dialog modal-dialog-centered" style="max-width: 600px" role="document">
-    <div class="modal-content">
-      <div class="modal-body" style="padding: 10px;">
-      </div>
-    </div>
-  </div>
-</div>
-
-<script>
-  window.addEventListener("load", function () {
-    if (window.initModalHandler) {
-      window.initModalHandler();
-    }
-  });
-</script>
+{{ partial "quotes_modal.html" }}
 {{ end }}

From 535cdc13d5f0790ec2ae80753f99bb4ee22d6603 Mon Sep 17 00:00:00 2001
From: ibrahimjaved12 <ibrahim.javed@arbisoft.com>
Date: Tue, 19 Nov 2024 20:00:45 +0500
Subject: [PATCH 14/18] Add Eslint disable next line

---
 base-theme/assets/quotes_card_modal_handler.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/base-theme/assets/quotes_card_modal_handler.ts b/base-theme/assets/quotes_card_modal_handler.ts
index 045692934..d1dfd2a2a 100644
--- a/base-theme/assets/quotes_card_modal_handler.ts
+++ b/base-theme/assets/quotes_card_modal_handler.ts
@@ -17,6 +17,7 @@ export function initQuotesModalHandler() {
       if (contentDiv.length) {
         const content = contentDiv.html()
         modalElement.find(".modal-body").html(content)
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         modalElement.modal("show")
       } else {

From 9f3b31c17e8369c3d1ae90b9b362d1d6c7d18139 Mon Sep 17 00:00:00 2001
From: ibrahimjaved12 <ibrahim.javed@arbisoft.com>
Date: Wed, 20 Nov 2024 20:44:34 +0500
Subject: [PATCH 15/18] Work on homepage margins and paddings for all screen
 sizes

---
 www/assets/css/carousel.scss                  | 74 ++++++++++++++++++-
 www/assets/css/home.scss                      |  1 -
 www/layouts/home.html                         | 12 +--
 www/layouts/partials/home_stories.html        |  8 +-
 www/layouts/partials/home_stories_banner.html | 11 +++
 5 files changed, 87 insertions(+), 19 deletions(-)
 create mode 100644 www/layouts/partials/home_stories_banner.html

diff --git a/www/assets/css/carousel.scss b/www/assets/css/carousel.scss
index 71ac966ac..2852d831a 100644
--- a/www/assets/css/carousel.scss
+++ b/www/assets/css/carousel.scss
@@ -19,7 +19,9 @@
   }
 
   .carousel-header {
-    max-width: $max-home-width;
+    &:not(.stories-carousel-header) {
+      max-width: $max-home-width;
+    }
     margin: 0;
     align-items: center;
 
@@ -296,6 +298,14 @@ body {
 .home-testimonials {
   max-width: 1447px !important;
   margin: auto !important;
+  padding-top: 60px;
+
+  @include media-breakpoint-down(md) {
+    padding-top: 40px;
+  }
+  @include media-breakpoint-down(sm) {
+    padding-top: 30px;
+  }
 
   .carousel {
     &.slide {
@@ -303,18 +313,25 @@ body {
     }
 
     .carousel-header {
+      margin-bottom: 40px;
+      @include media-breakpoint-down(xs) {
+        margin-bottom: 20px;
+      }
       h2 {
         text-align: center;
         font-size: 32px;
         font-weight: 700;
         line-height: 25px;
         margin-bottom: 20px;
+        @include media-breakpoint-down(xs) {
+          line-height: 40px;
+        }
       }
       p {
         font-size: 18px;
         font-weight: 400;
         line-height: 25px; /* 138.889% */
-        margin-bottom: 30px;
+        margin: 0;
       }
 
       p {
@@ -323,6 +340,7 @@ body {
     }
 
     .carousel-section {
+      // padding-top: 10px;
       .prev,
       .next {
         font-size: 3.75rem !important;
@@ -330,7 +348,6 @@ body {
     }
 
     .carousel-inner {
-      margin-top: 2rem;
       padding: 0;
     }
   }
@@ -465,3 +482,54 @@ body {
     }
   }
 }
+
+.view-all-stories {
+  margin-top: 40px;
+  padding-bottom: 30px;
+  @include media-breakpoint-down(xs) {
+    margin-top: 20px;
+    padding-bottom: 20px;
+  }
+}
+
+.home-stories-banner {
+  margin-top: 30px;
+  padding-bottom: 60px;
+
+  @include media-breakpoint-down(md) {
+    margin-top: 10px;
+  }
+
+  @include media-breakpoint-down(xs) {
+    margin-top: 0;
+    padding-bottom: 30px;
+  }
+
+  .home-stories-banner-content {
+    background: var(--Primary, #03152d);
+    border-radius: 10px;
+    padding: 40px;
+    color: white;
+
+    @include media-breakpoint-down(md) {
+      padding: 30px;
+    }
+
+    a.share-story-btn {
+      padding: 20px 30px;
+      @include media-breakpoint-down(md) {
+        padding: 16px 20px;
+      }
+    }
+
+    .share-story-title {
+      margin: 0;
+      font-weight: bold;
+      color: white;
+    }
+
+    .share-story-description {
+      margin: 0;
+    }
+  }
+}
diff --git a/www/assets/css/home.scss b/www/assets/css/home.scss
index 60bdec217..b471fb083 100644
--- a/www/assets/css/home.scss
+++ b/www/assets/css/home.scss
@@ -793,5 +793,4 @@ a.share-story-btn {
   // line-height: 35px; /* 194.444% */
   background: var(--white, #fff);
   border-radius: 3px;
-  padding: 20px 30px;
 }
diff --git a/www/layouts/home.html b/www/layouts/home.html
index 42ad0281b..f851b4a34 100644
--- a/www/layouts/home.html
+++ b/www/layouts/home.html
@@ -115,17 +115,7 @@ <h2>Your Donation Makes a Difference</h2>
   </div>
   {{ partial "ocw_news.html" . }}
   {{ partial "home_stories.html" . }}
-  <div class="d-flex standard-width container justify-content-center my-4">
-    <div class="d-flex flex-column flex-md-row justify-content-between align-items-center" style="background: var(--Primary, #03152D); border-radius: 10px; padding: 40px; color: var(--white, #FFF);">
-      <div class="share-story-text mb-3 mb-md-0 text-center text-md-left">
-        <h2 style="margin: 0; font-weight: bold; color:white;">Share your OCW story. We'd love to hear from you!</h2>
-        <p style="margin: 0;">How OCW has made an impact in your life.</p>
-      </div>
-      <a href="#" class="share-story-btn btn mt-3 mt-md-0 text-decoration-none quotation-btn">
-        Share your Story
-      </a>
-    </div>
-  </div>
+  {{ partial "home_stories_banner.html" }}
   <div class="social-cards-wrapper">
     <div class="social-cards standard-width d-flex justify-content-center container">
       <div class="row w-100">
diff --git a/www/layouts/partials/home_stories.html b/www/layouts/partials/home_stories.html
index 921ccceb1..158331464 100644
--- a/www/layouts/partials/home_stories.html
+++ b/www/layouts/partials/home_stories.html
@@ -7,7 +7,7 @@
     "xl"    (dict "size" 3 "class" "d-none d-xl-flex")
 -}}
 {{ partial "quotes_modal.html" }}
-<div class="home-testimonials mx-auto my-3">
+<div class="home-testimonials mx-auto">
   {{ range $breakpoint, $carouselInfo := $breakdowns }}
     {{ $itemsInCarousel := index $carouselInfo "size" }}
     {{ $breakpointVisibilityClass := index $carouselInfo "class" }}
@@ -15,7 +15,7 @@
     {{ $carouselId := (printf "testimonial-carousel-%v" $breakpoint) }}
     <div class="{{ $breakpointVisibilityClass }}">
       <div id="{{ $carouselId }}" class="carousel slide" style="max-width: 1447px;" data-interval="false" data-touch="true" data-ride="carousel">
-        <div class="carousel-header d-flex flex-column mx-auto">
+        <div class="carousel-header d-flex flex-column mx-auto container stories-carousel-header">
           <h2 class="mx-auto">OpenCourseWare Stories</h2>
           <p class="mx-auto text-center">
             MIT students' stories reflect a relentless pursuit of knowledge and innovation.
@@ -28,7 +28,7 @@ <h2 class="mx-auto">OpenCourseWare Stories</h2>
             <span class="material-icons" aria-hidden="true" style="font-size: 3.75rem">keyboard_arrow_left</span>
             <span class="sr-only">Previous</span>
           </a>
-          <div class="carousel-inner d-flex {{ if not $isMobile }}container{{ end }} mt-2 px-0">
+          <div class="carousel-inner d-flex {{ if not $isMobile }}container{{ end }} px-0">
             {{ range $index, $testimonial := $stories }}
               {{ with $testimonial }}
                 {{ $modulo := mod $index $itemsInCarousel }}
@@ -74,7 +74,7 @@ <h2 class="mx-auto">OpenCourseWare Stories</h2>
       </div>
     </div>
   {{ end }}
-  <div class="d-flex justify-content-center my-4">
+  <div class="d-flex justify-content-center view-all-stories">
     <a
       href="{{ $storiesSection.RelPermalink }}"
       class="btn view-all-stories-btn px-4 py-3 text-decoration-none d-flex align-items-center"
diff --git a/www/layouts/partials/home_stories_banner.html b/www/layouts/partials/home_stories_banner.html
new file mode 100644
index 000000000..8b6171ff0
--- /dev/null
+++ b/www/layouts/partials/home_stories_banner.html
@@ -0,0 +1,11 @@
+<div class="d-flex standard-width container justify-content-center home-stories-banner">
+  <div class="d-flex flex-column flex-md-row justify-content-between align-items-center home-stories-banner-content">
+    <div class="share-story-text mb-3 mb-md-0 text-center text-md-left">
+      <h2 class="share-story-title">Share your OCW story. We'd love to hear from you!</h2>
+      <p class="share-story-description">How OCW has made an impact in your life.</p>
+    </div>
+    <a href="#" class="share-story-btn btn mt-3 mt-md-0 text-decoration-none quotation-btn">
+      Share your Story
+    </a>
+  </div>
+</div>
\ No newline at end of file

From ae14e6ffa1e54063beb3f5f9b10e11df941e20b3 Mon Sep 17 00:00:00 2001
From: ibrahimjaved12 <ibrahim.javed@arbisoft.com>
Date: Thu, 21 Nov 2024 19:43:18 +0500
Subject: [PATCH 16/18] Single page layout, image alignment, other adjustments

---
 base-theme/assets/css/_breakpoints.scss       |  4 --
 .../assets/quotes_card_modal_handler.ts       | 18 ++---
 www/assets/css/carousel.scss                  |  9 ++-
 www/assets/css/home.scss                      |  1 +
 www/assets/css/testimonials.scss              | 72 +++++++++----------
 www/layouts/partials/home_stories.html        | 20 +++---
 www/layouts/partials/quotes_modal.html        |  6 +-
 www/layouts/stories/list.html                 |  8 ++-
 www/layouts/stories/single.html               | 20 +++---
 9 files changed, 82 insertions(+), 76 deletions(-)

diff --git a/base-theme/assets/css/_breakpoints.scss b/base-theme/assets/css/_breakpoints.scss
index aebf12bcb..9463ceeca 100644
--- a/base-theme/assets/css/_breakpoints.scss
+++ b/base-theme/assets/css/_breakpoints.scss
@@ -15,10 +15,6 @@
     @media (max-width: 800px) {
       @content;
     }
-  } @else if $name == sm-mobile {
-    @media (max-width: 767px) {
-      @content;
-    }
   } @else if $name == phone {
     @media (max-width: 580px) {
       @content;
diff --git a/base-theme/assets/quotes_card_modal_handler.ts b/base-theme/assets/quotes_card_modal_handler.ts
index d1dfd2a2a..347d8b05d 100644
--- a/base-theme/assets/quotes_card_modal_handler.ts
+++ b/base-theme/assets/quotes_card_modal_handler.ts
@@ -1,6 +1,6 @@
 export function initQuotesModalHandler() {
   $(document).ready(() => {
-    const modalElement = $("#exampleModalCenter")
+    const modalElement = $(".js-quotes-modal")
 
     let carouselId: string | undefined
 
@@ -25,14 +25,14 @@ export function initQuotesModalHandler() {
       }
     })
 
-    modalElement.on("shown.bs.modal", () => {
-      modalElement.focus()
-    })
+    // modalElement.on("shown.bs.modal", () => {
+    //   modalElement.focus()
+    // })
 
-    modalElement.on("hidden.bs.modal", () => {
-      if (carouselId) {
-        $(`#${carouselId}`).focus()
-      }
-    })
+    // modalElement.on("hidden.bs.modal", () => {
+    //   if (carouselId) {
+    //     $(`#${carouselId}`).focus()
+    //   }
+    // })
   })
 }
diff --git a/www/assets/css/carousel.scss b/www/assets/css/carousel.scss
index 2852d831a..a67c40e5c 100644
--- a/www/assets/css/carousel.scss
+++ b/www/assets/css/carousel.scss
@@ -179,6 +179,7 @@
     height: 100%;
     object-fit: cover;
     border-radius: 5px;
+    object-position: 50% 25%;
   }
 }
 .story-body div {
@@ -424,13 +425,16 @@ body {
       font-size: 22px;
       font-weight: 700;
       line-height: 28px;
-      padding: 0 0 20px 0;
+      @include media-breakpoint-down(md) {
+        padding: 30px 0 10px 0;
+      }
       margin: 0;
     }
     .item-wrapper.testimonial-link {
       flex: 1 1;
       padding: 10px;
       margin-top: 16px;
+      margin-right: 16px;
     }
     .hidden-modal-content {
       display: none;
@@ -533,3 +537,6 @@ body {
     }
   }
 }
+.home-testimonials .carousel-item {
+  padding: 0 8px;
+}
diff --git a/www/assets/css/home.scss b/www/assets/css/home.scss
index b471fb083..c7817d601 100644
--- a/www/assets/css/home.scss
+++ b/www/assets/css/home.scss
@@ -778,6 +778,7 @@ $promo-carousel-height: 200px;
   width: 100%;
   height: 100%;
   object-fit: cover;
+  object-position: 50% 25%;
 }
 
 .share-story-btn:hover {
diff --git a/www/assets/css/testimonials.scss b/www/assets/css/testimonials.scss
index ea1311fb3..0ea91aa30 100644
--- a/www/assets/css/testimonials.scss
+++ b/www/assets/css/testimonials.scss
@@ -2,14 +2,12 @@ $border-style: 1px solid $medium-gray;
 $row-padding: 20px;
 $row-max-height: 200px;
 
-.testimonial-section,
 .testimonial-single {
   .full-testimonial {
     border-bottom: $border-style;
   }
 
   .testimonial {
-    // border-bottom: $border-style;
     padding: $row-padding 0;
 
     .detail {
@@ -20,45 +18,43 @@ $row-max-height: 200px;
     }
   }
 }
+.testimonial-content-container {
+  .row {
+    padding-top: 40px;
+    padding-bottom: 40px;
+  }
+  .more-stories h3 {
+    padding-bottom: 20px;
+  }
+}
+.testimonial-single.navbar {
+  .testimonials {
+    padding: 30px 15px;
+  }
+}
 
-.testimonial-section {
+.testimonial {
   .detail {
-    max-height: $row-max-height;
-
     .text {
-      position: relative;
-      overflow: hidden;
-    }
-
-    .text:after {
-      position: absolute;
-      bottom: 0;
-      height: 100%;
-      width: 100%;
-      content: "";
-      background: linear-gradient(
-        to top,
-        rgba(255, 255, 255, 1) 0%,
-        rgba(255, 255, 255, 0) 10%
-      );
-      pointer-events: none; /* so the text is still selectable */
-    }
-
-    .location {
-      text-transform: uppercase;
-    }
-
-    .summary {
-      text-overflow: ellipsis;
+      h2 {
+        margin-bottom: 17px;
+        font-size: 28.5px;
+        font-weight: 700;
+        line-height: normal;
+      }
+      p.occupation {
+        margin-bottom: 18px;
+        font-weight: 400;
+        font-size: 18px;
+        line-height: normal;
+      }
+      p.summary {
+        text-overflow: ellipsis;
+        font-size: 18px;
+        color: var(--Primary, #03152d);
+        font-weight: 700;
+        line-height: normal;
+      }
     }
   }
 }
-
-.testimonial-single {
-  .summary {
-    font-size: $font-lg;
-    font-weight: 600;
-    font-style: italic;
-    color: $medium-gray;
-  }
-}
diff --git a/www/layouts/partials/home_stories.html b/www/layouts/partials/home_stories.html
index 158331464..60c12efdc 100644
--- a/www/layouts/partials/home_stories.html
+++ b/www/layouts/partials/home_stories.html
@@ -24,10 +24,12 @@ <h2 class="mx-auto">OpenCourseWare Stories</h2>
           </p>
         </div>
         <div class="carousel-section d-flex align-items-center">
-          <a href="#{{ $carouselId }}" role="button" data-slide="prev" class="bg-white prev">
-            <span class="material-icons" aria-hidden="true" style="font-size: 3.75rem">keyboard_arrow_left</span>
-            <span class="sr-only">Previous</span>
-          </a>
+          {{ if gt (len $stories) 3 }}
+            <a href="#{{ $carouselId }}" role="button" data-slide="prev" class="bg-white prev">
+              <span class="material-icons" aria-hidden="true" style="font-size: 3.75rem">keyboard_arrow_left</span>
+              <span class="sr-only">Previous</span>
+            </a>
+          {{ end }}
           <div class="carousel-inner d-flex {{ if not $isMobile }}container{{ end }} px-0">
             {{ range $index, $testimonial := $stories }}
               {{ with $testimonial }}
@@ -66,10 +68,12 @@ <h2 class="mx-auto">OpenCourseWare Stories</h2>
               {{ end }}
             {{ end }}
           </div>
-          <a href="#{{ $carouselId }}" role="button" data-slide="next" class="bg-white next">
-            <span class="material-icons" aria-hidden="true" style="font-size: 3.75rem">keyboard_arrow_right</span>
-            <span class="sr-only">Next</span>
-          </a>
+          {{ if gt (len $stories) 3 }}
+            <a href="#{{ $carouselId }}" role="button" data-slide="next" class="bg-white next">
+              <span class="material-icons" aria-hidden="true" style="font-size: 3.75rem">keyboard_arrow_right</span>
+              <span class="sr-only">Next</span>
+            </a>
+          {{ end }}
         </div>
       </div>
     </div>
diff --git a/www/layouts/partials/quotes_modal.html b/www/layouts/partials/quotes_modal.html
index 854c2b686..a8079dc31 100644
--- a/www/layouts/partials/quotes_modal.html
+++ b/www/layouts/partials/quotes_modal.html
@@ -1,10 +1,8 @@
 <div
-  class="modal fade"
-  id="exampleModalCenter"
+  class="modal fade js-quotes-modal"
   tabindex="-1"
   role="dialog"
-  aria-labelledby="exampleModalCenterTitle"
-  aria-hidden="true"
+    aria-hidden="true"
 >
   <div
     class="modal-dialog modal-dialog-centered"
diff --git a/www/layouts/stories/list.html b/www/layouts/stories/list.html
index a314d23a4..9d5a086d0 100644
--- a/www/layouts/stories/list.html
+++ b/www/layouts/stories/list.html
@@ -42,6 +42,8 @@ <h1>OpenCourseWare Stories</h1>
       {{ end }}
     </div>
   </div>
-  {{ block "footer" . }} {{ partialCached "footer" . }} {{end}}
-  {{ partial "quotes_modal.html" }}
-  {{ end }}
+</div>
+{{ partial "home_stories_banner.html" }}
+{{ block "footer" . }} {{ partialCached "footer" . }} {{end}}
+{{ partial "quotes_modal.html" }}
+{{ end }}
diff --git a/www/layouts/stories/single.html b/www/layouts/stories/single.html
index 79c6a1cb4..266a7f54f 100644
--- a/www/layouts/stories/single.html
+++ b/www/layouts/stories/single.html
@@ -5,7 +5,7 @@
   {{ block "header" . }}
   {{ partialCached "header" . }}
   {{ end }}
-  
+
   <div class="testimonial-single navbar">
     <div class="testimonials w-100 standard-width mx-auto">
       <a href="/stories" class="view-all-stories-left-btn text-decoration-none d-inline-flex align-items-center">
@@ -28,11 +28,11 @@ <h1>OCW Stories</h1>
         </div>
         <div class="detail d-flex flex-column flex-nowrap justify-content-center" style="margin-left: 30px;">
           <div class="text">
-            <h2 style="margin-bottom: 20px; font-size: 30px; font-weight: 700;">{{ $story.Title }}</h2>
-            <p style="margin-bottom: 20px; font-weight: 400;">
+            <h2>{{ $story.Title }}</h2>
+            <p class="occupation">
               {{ $story.Params.occupation }} | {{ $story.Params.location }}
             </p>
-            <p class="summarys mb-0 pb-0" style="font-size: 18px; color: var(--Primary, #03152D); font-weight: 700;">
+            <p class="summary mb-0 pb-0">
               "{{ $story.Params.leadquote }}"
             </p>
           </div>
@@ -40,17 +40,18 @@ <h2 style="margin-bottom: 20px; font-size: 30px; font-weight: 700;">{{ $story.Ti
       </div>
     </div>
   </div>
-  <div class="container standard-width mx-auto mt-5 mb-5">
+  <div class="container standard-width mx-auto testimonial-content-container">
     <div class="row">
-      <div class="full-testimonial pt-5 pb-3 col-md-8">
+      <div class="full-testimonial col-lg-8">
         {{ .Content }}
       </div>
       <!-- Sidebar -->
-      <div class="col-md-4">
+      <div class="col-12 col-lg-4">
         <div class="more-stories">
           <h3>More Stories</h3>
-          <div class="flex-nowrap justify-content-center">
-            {{ range $index, $testimonial := first 3 (where .Site.RegularPages "Type" "==" "stories") }}
+          <div class="d-flex flex-wrap">
+            {{ range $index, $testimonial := first 4 (where .Site.RegularPages "Type" "==" "stories") }}
+              <div class="d-flex flex-nowrap justify-content-center col-12 col-md-6 col-lg-12 m-0 p-0">
               <a 
                 data-modal-content-id="modal-content-{{ $index }}" 
                 class="item-wrapper d-block testimonial-link {{if $testimonial.Params.is_quote}}js-modal-trigger{{end}} text-decoration-none" 
@@ -67,6 +68,7 @@ <h3>More Stories</h3>
               <div id="modal-content-{{ $index }}" class="hidden-modal-content">
                 {{ partial "stories_card.html" (dict "testimonial" $testimonial "context" "modal") }}
               </div>
+            </div>
             {{ end }}
           </div>
           <div>

From 183753392562369954d42a8af714ef407f2bf328 Mon Sep 17 00:00:00 2001
From: ibrahimjaved12 <ibrahim.javed@arbisoft.com>
Date: Thu, 21 Nov 2024 19:46:32 +0500
Subject: [PATCH 17/18] Fix lint error

---
 base-theme/assets/quotes_card_modal_handler.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/base-theme/assets/quotes_card_modal_handler.ts b/base-theme/assets/quotes_card_modal_handler.ts
index 347d8b05d..23b66dde2 100644
--- a/base-theme/assets/quotes_card_modal_handler.ts
+++ b/base-theme/assets/quotes_card_modal_handler.ts
@@ -2,7 +2,7 @@ export function initQuotesModalHandler() {
   $(document).ready(() => {
     const modalElement = $(".js-quotes-modal")
 
-    let carouselId: string | undefined
+    // let carouselId: string | undefined
 
     $(".js-modal-trigger").on("click", event => {
       event.preventDefault()
@@ -12,7 +12,7 @@ export function initQuotesModalHandler() {
       const contentDiv = $(`#${modalContentId}`)
 
       const carouselElement = target.closest(".carousel")
-      carouselId = carouselElement.attr("id")
+      // carouselId = carouselElement.attr("id")
 
       if (contentDiv.length) {
         const content = contentDiv.html()

From d2cbae9f5dcb65ead39e46295b4dfee51f18dd3e Mon Sep 17 00:00:00 2001
From: ibrahimjaved12 <ibrahim.javed@arbisoft.com>
Date: Thu, 21 Nov 2024 19:50:02 +0500
Subject: [PATCH 18/18] Fix lint error

---
 base-theme/assets/quotes_card_modal_handler.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/base-theme/assets/quotes_card_modal_handler.ts b/base-theme/assets/quotes_card_modal_handler.ts
index 23b66dde2..076d3791c 100644
--- a/base-theme/assets/quotes_card_modal_handler.ts
+++ b/base-theme/assets/quotes_card_modal_handler.ts
@@ -11,7 +11,7 @@ export function initQuotesModalHandler() {
       const modalContentId = target.data("modal-content-id")
       const contentDiv = $(`#${modalContentId}`)
 
-      const carouselElement = target.closest(".carousel")
+      // const carouselElement = target.closest(".carousel")
       // carouselId = carouselElement.attr("id")
 
       if (contentDiv.length) {