From 9d81b0f255389abaffb2f9c8b57c5f47e2c83357 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 10 Feb 2026 04:22:11 +0000
Subject: [PATCH 1/2] Initial plan


From 7c9de43c083e51fdacc0c9e45429dbfce0858dab Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 10 Feb 2026 04:28:15 +0000
Subject: [PATCH 2/2] Update story share portal navigation and layout to match
 design

Co-authored-by: maebeale <7607813+maebeale@users.noreply.github.com>
---
 .../shared/_share_portal_navbar.html.erb      | 107 +++++--
 app/views/stories/share_portal.html.erb       | 303 +++++++++++-------
 2 files changed, 271 insertions(+), 139 deletions(-)

diff --git a/app/views/shared/_share_portal_navbar.html.erb b/app/views/shared/_share_portal_navbar.html.erb
index a7b48702c..65b357a5b 100644
--- a/app/views/shared/_share_portal_navbar.html.erb
+++ b/app/views/shared/_share_portal_navbar.html.erb
@@ -1,26 +1,87 @@
 <nav class="relative bg-white border-b-4 border-purple-700 print:hidden">
   <div class="px-2 sm:px-6 lg:px-8">
     <!-- Row 1: Logo and Main Navigation -->
-    <div class="nav-row relative flex items-center justify-between py-3">
-      <div class="flex items-center space-x-8">
+    <div class="nav-row relative flex items-center justify-center py-3">
+      <div class="flex items-center space-x-8 absolute left-2 sm:left-6 lg:left-8">
         <div class="flex shrink-0 items-center">
           <%= link_to share_portal_stories_path, class: "relative group" do %>
             <%= image_tag("logo.png", class: "h-12 sm:h-14 w-auto block") %>
             <%= image_tag("logo-color.png", class: "h-12 sm:h-14 absolute inset-0 w-auto opacity-0 transition-opacity duration-400 ease-out group-hover:opacity-100") %>
           <% end %>
         </div>
+      </div>
 
-        <div class="hidden lg:flex space-x-6">
-          <%= link_to "Who We Are", "#", class: "text-gray-700 hover:text-purple-700 text-sm font-medium transition-colors" %>
-          <%= link_to "What We Do", "#", class: "text-gray-700 hover:text-purple-700 text-sm font-medium transition-colors" %>
-          <%= link_to "Ways to Help", "#", class: "text-gray-700 hover:text-purple-700 text-sm font-medium transition-colors" %>
-          <%= link_to "Our Next Chapter", "#", class: "text-gray-700 hover:text-purple-700 text-sm font-medium transition-colors" %>
+      <div class="hidden lg:flex space-x-6 items-center">
+        <div class="relative group">
+          <%= link_to "Who We Are", "#", class: "font-telefon text-gray-700 hover:text-purple-700 text-sm font-medium transition-colors" %>
+          <!-- Dropdown -->
+          <div class="absolute left-0 mt-2 w-48 bg-white shadow-lg rounded-md opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all z-50">
+            <div class="py-1">
+              <%= link_to "Our Story", "#", class: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" %>
+              <%= link_to "Our Team", "#", class: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" %>
+              <%= link_to "Contact Us", "#", class: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" %>
+            </div>
+          </div>
+        </div>
+        <div class="relative group">
+          <%= link_to "What We Do", "#", class: "font-telefon text-gray-700 hover:text-purple-700 text-sm font-medium transition-colors" %>
+          <!-- Dropdown -->
+          <div class="absolute left-0 mt-2 w-48 bg-white shadow-lg rounded-md opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all z-50">
+            <div class="py-1">
+              <%= link_to "Workshops", "#", class: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" %>
+              <%= link_to "Training", "#", class: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" %>
+              <%= link_to "Research", "#", class: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" %>
+            </div>
+          </div>
+        </div>
+        <div class="relative group">
+          <%= link_to "Ways to Help", "#", class: "font-telefon text-gray-700 hover:text-purple-700 text-sm font-medium transition-colors" %>
+          <!-- Dropdown -->
+          <div class="absolute left-0 mt-2 w-48 bg-white shadow-lg rounded-md opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all z-50">
+            <div class="py-1">
+              <%= link_to "Donate", "#", class: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" %>
+              <%= link_to "Volunteer", "#", class: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" %>
+              <%= link_to "Partner", "#", class: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" %>
+            </div>
+          </div>
+        </div>
+        <div class="relative group">
+          <%= link_to "Our Next Chapter", "#", class: "font-telefon text-gray-700 hover:text-purple-700 text-sm font-medium transition-colors" %>
+          <!-- Dropdown -->
+          <div class="absolute left-0 mt-2 w-48 bg-white shadow-lg rounded-md opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all z-50">
+            <div class="py-1">
+              <%= link_to "Vision", "#", class: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" %>
+              <%= link_to "Goals", "#", class: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" %>
+              <%= link_to "Updates", "#", class: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" %>
+            </div>
+          </div>
         </div>
       </div>
 
-      <div class="flex items-center space-x-4">
+      <div class="flex items-center space-x-4 absolute right-2 sm:right-6 lg:right-8">
         <%= link_to "Donate", "#", class: "hidden md:inline-flex px-6 py-2 bg-gray-800 text-white text-sm font-medium hover:bg-gray-900 transition-colors" %>
         
+        <!-- Lock Icon -->
+        <button class="hidden md:inline-flex text-gray-700 hover:text-purple-700 transition-colors" aria-label="Login">
+          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+          </svg>
+        </button>
+        
+        <!-- Search Icon -->
+        <button class="hidden md:inline-flex text-gray-700 hover:text-purple-700 transition-colors" aria-label="Search">
+          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+          </svg>
+        </button>
+        
+        <!-- Exit Icon -->
+        <button class="hidden md:inline-flex text-gray-700 hover:text-purple-700 transition-colors" aria-label="Exit">
+          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
+          </svg>
+        </button>
+        
         <!-- Mobile menu button -->
         <div class="lg:hidden">
           <button
@@ -40,26 +101,26 @@
 
     <!-- Row 2: Focus Area Navigation -->
     <div class="nav-row border-t border-gray-200">
-      <div class="hidden lg:flex items-center justify-start py-3 space-x-6">
-        <%= link_to "Home", share_portal_stories_path, class: "text-gray-800 hover:text-purple-700 text-sm font-medium transition-colors" %>
-        <%= link_to "Domestic Violence", share_portal_stories_path(focus: "domestic_violence"), class: "text-red-700 hover:text-red-800 text-sm font-medium transition-colors" %>
-        <%= link_to "Self-Care & Personal Growth", share_portal_stories_path(focus: "self_care"), class: "text-gray-600 hover:text-gray-800 text-sm font-medium transition-colors" %>
-        <%= link_to "Social Justice", share_portal_stories_path(focus: "social_justice"), class: "text-green-700 hover:text-green-800 text-sm font-medium transition-colors" %>
-        <%= link_to "Facilitator Spotlights", share_portal_stories_path(focus: "facilitator_spotlights"), class: "text-purple-700 hover:text-purple-800 text-sm font-medium transition-colors" %>
-        <%= link_to "Additional Focus Areas", "#", class: "text-orange-600 hover:text-orange-700 text-sm font-medium transition-colors" %>
+      <div class="hidden lg:flex items-center justify-center py-3 space-x-6">
+        <%= link_to "Home", share_portal_stories_path, class: "font-telefon text-gray-800 hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
+        <%= link_to "Domestic Violence", share_portal_stories_path(focus: "domestic_violence"), class: "font-telefon text-red-700 hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
+        <%= link_to "Self-Care & Personal Growth", share_portal_stories_path(focus: "self_care"), class: "font-telefon text-gray-600 hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
+        <%= link_to "Social Justice", share_portal_stories_path(focus: "social_justice"), class: "font-telefon text-green-700 hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
+        <%= link_to "Facilitator Spotlights", share_portal_stories_path(focus: "facilitator_spotlights"), class: "font-telefon text-purple-700 hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
+        <%= link_to "Additional Focus Areas", "#", class: "font-telefon text-orange-600 hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
       </div>
     </div>
 
     <!-- Row 3: Participant Type Navigation -->
     <div class="nav-row border-t border-gray-200">
-      <div class="hidden lg:flex items-center justify-start py-3 space-x-6">
-        <%= link_to "Children", share_portal_stories_path(focus: "children"), class: "text-gray-600 hover:text-purple-700 text-sm font-medium transition-colors" %>
-        <%= link_to "Teens", share_portal_stories_path(focus: "teens"), class: "text-gray-600 hover:text-purple-700 text-sm font-medium transition-colors" %>
-        <%= link_to "Adults", share_portal_stories_path(focus: "adults"), class: "text-gray-600 hover:text-purple-700 text-sm font-medium transition-colors" %>
-        <%= link_to "Families", share_portal_stories_path(focus: "families"), class: "text-gray-600 hover:text-purple-700 text-sm font-medium transition-colors" %>
-        <%= link_to "Community", share_portal_stories_path(focus: "community"), class: "text-gray-600 hover:text-purple-700 text-sm font-medium transition-colors" %>
-        <%= link_to "Self", share_portal_stories_path(focus: "self"), class: "text-gray-600 hover:text-purple-700 text-sm font-medium transition-colors" %>
-        <%= link_to "Colleagues", share_portal_stories_path(focus: "colleagues"), class: "text-gray-600 hover:text-purple-700 text-sm font-medium transition-colors" %>
+      <div class="hidden lg:flex items-center justify-center py-3 space-x-6">
+        <%= link_to "Children", share_portal_stories_path(focus: "children"), class: "font-telefon text-gray-600 hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
+        <%= link_to "Teens", share_portal_stories_path(focus: "teens"), class: "font-telefon text-gray-600 hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
+        <%= link_to "Adults", share_portal_stories_path(focus: "adults"), class: "font-telefon text-gray-600 hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
+        <%= link_to "Families", share_portal_stories_path(focus: "families"), class: "font-telefon text-gray-600 hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
+        <%= link_to "Community", share_portal_stories_path(focus: "community"), class: "font-telefon text-gray-600 hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
+        <%= link_to "Self", share_portal_stories_path(focus: "self"), class: "font-telefon text-gray-600 hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
+        <%= link_to "Colleagues", share_portal_stories_path(focus: "colleagues"), class: "font-telefon text-gray-600 hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
         
         <!-- Search Box -->
         <div class="ml-auto">
diff --git a/app/views/stories/share_portal.html.erb b/app/views/stories/share_portal.html.erb
index 16e1eed24..ddd8e7d7e 100644
--- a/app/views/stories/share_portal.html.erb
+++ b/app/views/stories/share_portal.html.erb
@@ -28,38 +28,38 @@
 <% if @featured_story.present? %>
   <section class="bg-gray-50 py-12 -mx-2 sm:-mx-6 lg:-mx-8">
     <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
-      <div class="relative rounded-lg overflow-hidden shadow-lg">
-        <%= link_to story_path(@featured_story), class: "block relative" do %>
+      <div class="relative rounded-lg overflow-hidden shadow-lg" id="hero-carousel">
+        <%= link_to story_path(@featured_story), class: "block relative carousel-item active" do %>
           <div class="aspect-[16/6] bg-gray-200">
             <%= render "assets/display_image",
                        resource: @featured_story,
                        variant: :hero %>
           </div>
-          <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent flex items-end">
-            <div class="p-8 text-white w-full">
-              <div class="inline-block bg-purple-700 text-white text-xs font-semibold uppercase px-3 py-1 rounded mb-3">
-                FACILITATOR SPOTLIGHTS
-              </div>
-              <h2 class="font-telefon text-3xl mb-2">
-                <%= @featured_story.title %>
-              </h2>
-              <p class="text-sm opacity-90">
-                <%= @featured_story.organization_name %>
-                <% if @featured_story.organization.city_state.present? %>
-                  - <%= @featured_story.organization.city_state %>
-                <% end %>
-              </p>
-            </div>
+          <!-- Blue Sector Box on Top Left -->
+          <div class="absolute top-6 left-6 bg-blue-600 text-white text-xs font-semibold uppercase px-4 py-2 z-10">
+            <%= @featured_story.sectors.first&.name || "SELF-CARE & PERSONAL GROWTH" %>
+          </div>
+          <!-- Black overlay bar at bottom with title -->
+          <div class="absolute bottom-0 left-0 right-0 bg-black/70 p-8 text-white">
+            <h2 class="font-telefon text-3xl mb-2">
+              <%= @featured_story.title %>
+            </h2>
+            <p class="text-sm opacity-90">
+              <%= @featured_story.organization_name %>
+              <% if @featured_story.organization.city_state.present? %>
+                - <%= @featured_story.organization.city_state %>
+              <% end %>
+            </p>
           </div>
         <% end %>
 
         <!-- Carousel Navigation -->
-        <button aria-label="Previous story" class="absolute left-4 top-1/2 -translate-y-1/2 bg-white/80 hover:bg-white rounded-full p-2 shadow-lg" disabled>
+        <button aria-label="Previous story" class="carousel-prev absolute left-4 top-1/2 -translate-y-1/2 bg-white/80 hover:bg-white rounded-full p-2 shadow-lg z-10">
           <svg class="w-6 h-6 text-gray-800" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
           </svg>
         </button>
-        <button aria-label="Next story" class="absolute right-4 top-1/2 -translate-y-1/2 bg-white/80 hover:bg-white rounded-full p-2 shadow-lg" disabled>
+        <button aria-label="Next story" class="carousel-next absolute right-4 top-1/2 -translate-y-1/2 bg-white/80 hover:bg-white rounded-full p-2 shadow-lg z-10">
           <svg class="w-6 h-6 text-gray-800" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
           </svg>
@@ -67,33 +67,109 @@
       </div>
     </div>
   </section>
+  
+  <script>
+    // Auto-scrolling carousel
+    (function() {
+      const carousel = document.getElementById('hero-carousel');
+      if (!carousel) return;
+      
+      const items = carousel.querySelectorAll('.carousel-item');
+      let currentIndex = 0;
+      let autoplayInterval;
+      
+      function showItem(index) {
+        items.forEach((item, i) => {
+          if (i === index) {
+            item.classList.add('active');
+          } else {
+            item.classList.remove('active');
+          }
+        });
+      }
+      
+      function nextItem() {
+        currentIndex = (currentIndex + 1) % items.length;
+        showItem(currentIndex);
+      }
+      
+      function prevItem() {
+        currentIndex = (currentIndex - 1 + items.length) % items.length;
+        showItem(currentIndex);
+      }
+      
+      function startAutoplay() {
+        autoplayInterval = setInterval(nextItem, 5000); // Auto-scroll every 5 seconds
+      }
+      
+      function stopAutoplay() {
+        clearInterval(autoplayInterval);
+      }
+      
+      // Button handlers
+      const prevBtn = carousel.querySelector('.carousel-prev');
+      const nextBtn = carousel.querySelector('.carousel-next');
+      
+      if (prevBtn) {
+        prevBtn.addEventListener('click', (e) => {
+          e.preventDefault();
+          stopAutoplay();
+          prevItem();
+          startAutoplay();
+        });
+      }
+      
+      if (nextBtn) {
+        nextBtn.addEventListener('click', (e) => {
+          e.preventDefault();
+          stopAutoplay();
+          nextItem();
+          startAutoplay();
+        });
+      }
+      
+      // Start autoplay
+      if (items.length > 1) {
+        startAutoplay();
+      }
+      
+      // Pause on hover
+      carousel.addEventListener('mouseenter', stopAutoplay);
+      carousel.addEventListener('mouseleave', () => {
+        if (items.length > 1) startAutoplay();
+      });
+    })();
+  </script>
 <% end %>
 
 <!-- Story Sections -->
 <section class="bg-white py-12 -mx-2 sm:-mx-6 lg:-mx-8">
-  <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 space-y-12">
-    <!-- Domestic Violence Section -->
-    <div>
-      <h2 class="font-telefon text-3xl text-red-700 mb-6">Domestic Violence</h2>
-      
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-        <% @stories_by_focus["Domestic Violence"]&.first(3)&.each do |story| %>
-          <article class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-shadow">
-            <%= link_to story_path(story), class: "block relative" do %>
+  <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+    <!-- Three Column Layout for Main Sectors -->
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+      <!-- Domestic Violence Section -->
+      <div>
+        <h2 class="font-telefon text-2xl text-red-700 mb-4">Domestic Violence</h2>
+        
+        <!-- Featured Story -->
+        <% featured_dv_story = @stories_by_focus["Domestic Violence"]&.first %>
+        <% if featured_dv_story %>
+          <article class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-shadow mb-4">
+            <%= link_to story_path(featured_dv_story), class: "block relative" do %>
               <div class="aspect-[4/3] bg-gray-200 relative">
                 <%= render "assets/display_image",
-                           resource: story,
+                           resource: featured_dv_story,
                            variant: :hero %>
                 <!-- Title and Organization Overlay -->
                 <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent flex items-end">
                   <div class="p-4 w-full">
-                    <h3 class="font-telefon text-white text-lg mb-1 leading-tight">
-                      <%= story.title %>
+                    <h3 class="font-telefon text-white text-base mb-1 leading-tight">
+                      <%= featured_dv_story.title %>
                     </h3>
-                    <p class="text-white text-sm opacity-90">
-                      <%= story.organization_name %>
-                      <% if story.organization.city_state.present? %>
-                        - <%= story.organization.city_state %>
+                    <p class="text-white text-xs opacity-90">
+                      <%= featured_dv_story.organization_name %>
+                      <% if featured_dv_story.organization.city_state.present? %>
+                        - <%= featured_dv_story.organization.city_state %>
                       <% end %>
                     </p>
                   </div>
@@ -102,52 +178,49 @@
             <% end %>
           </article>
         <% end %>
-      </div>
 
-      <!-- More Stories Links -->
-      <div class="mt-6">
-        <ul class="space-y-2 text-gray-800">
-          <% additional_stories = @stories_by_focus["Domestic Violence"]&.drop(3)&.first(3) || [] %>
+        <!-- Additional Story Links -->
+        <ul class="space-y-2 text-sm">
+          <% additional_stories = @stories_by_focus["Domestic Violence"]&.drop(1)&.first(4) || [] %>
           <% additional_stories.each do |story| %>
             <li class="flex items-start">
-              <svg class="w-4 h-4 mr-2 mt-1 text-red-700 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <svg class="w-3 h-3 mr-2 mt-1 text-red-700 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
-              <%= link_to story.title, story_path(story), class: "hover:text-red-700 hover:underline" %>
+              <%= link_to story.title, story_path(story), class: "hover:text-red-700 hover:underline text-gray-800" %>
             </li>
           <% end %>
-          <li class="flex items-start">
-            <svg class="w-4 h-4 mr-2 mt-1 text-red-700 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
-            </svg>
-            <%= link_to "More Domestic Violence Stories...", stories_path(focus: "domestic_violence"), class: "text-red-700 hover:underline font-medium" %>
-          </li>
         </ul>
+        
+        <!-- More Link -->
+        <div class="mt-4">
+          <%= link_to "More Domestic Violence Stories...", stories_path(focus: "domestic_violence"), class: "text-red-700 hover:underline font-medium text-sm inline-flex items-center" %>
+        </div>
       </div>
-    </div>
 
-    <!-- Social Justice Section -->
-    <div>
-      <h2 class="font-telefon text-3xl text-green-700 mb-6">Social Justice</h2>
-      
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-        <% @stories_by_focus["Social Justice"]&.first(3)&.each do |story| %>
-          <article class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-shadow">
-            <%= link_to story_path(story), class: "block relative" do %>
+      <!-- Social Justice Section -->
+      <div>
+        <h2 class="font-telefon text-2xl text-green-700 mb-4">Social Justice</h2>
+        
+        <!-- Featured Story -->
+        <% featured_sj_story = @stories_by_focus["Social Justice"]&.first %>
+        <% if featured_sj_story %>
+          <article class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-shadow mb-4">
+            <%= link_to story_path(featured_sj_story), class: "block relative" do %>
               <div class="aspect-[4/3] bg-gray-200 relative">
                 <%= render "assets/display_image",
-                           resource: story,
+                           resource: featured_sj_story,
                            variant: :hero %>
                 <!-- Title and Organization Overlay -->
                 <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent flex items-end">
                   <div class="p-4 w-full">
-                    <h3 class="font-telefon text-white text-lg mb-1 leading-tight">
-                      <%= story.title %>
+                    <h3 class="font-telefon text-white text-base mb-1 leading-tight">
+                      <%= featured_sj_story.title %>
                     </h3>
-                    <p class="text-white text-sm opacity-90">
-                      <%= story.organization_name %>
-                      <% if story.organization.city_state.present? %>
-                        - <%= story.organization.city_state %>
+                    <p class="text-white text-xs opacity-90">
+                      <%= featured_sj_story.organization_name %>
+                      <% if featured_sj_story.organization.city_state.present? %>
+                        - <%= featured_sj_story.organization.city_state %>
                       <% end %>
                     </p>
                   </div>
@@ -156,52 +229,49 @@
             <% end %>
           </article>
         <% end %>
-      </div>
 
-      <!-- More Stories Links -->
-      <div class="mt-6">
-        <ul class="space-y-2 text-gray-800">
-          <% additional_stories = @stories_by_focus["Social Justice"]&.drop(3)&.first(3) || [] %>
+        <!-- Additional Story Links -->
+        <ul class="space-y-2 text-sm">
+          <% additional_stories = @stories_by_focus["Social Justice"]&.drop(1)&.first(4) || [] %>
           <% additional_stories.each do |story| %>
             <li class="flex items-start">
-              <svg class="w-4 h-4 mr-2 mt-1 text-green-700 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <svg class="w-3 h-3 mr-2 mt-1 text-green-700 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
-              <%= link_to story.title, story_path(story), class: "hover:text-green-700 hover:underline" %>
+              <%= link_to story.title, story_path(story), class: "hover:text-green-700 hover:underline text-gray-800" %>
             </li>
           <% end %>
-          <li class="flex items-start">
-            <svg class="w-4 h-4 mr-2 mt-1 text-green-700 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
-            </svg>
-            <%= link_to "More Social Justice Stories...", stories_path(focus: "social_justice"), class: "text-green-700 hover:underline font-medium" %>
-          </li>
         </ul>
+        
+        <!-- More Link -->
+        <div class="mt-4">
+          <%= link_to "More Social Justice Stories...", stories_path(focus: "social_justice"), class: "text-green-700 hover:underline font-medium text-sm inline-flex items-center" %>
+        </div>
       </div>
-    </div>
 
-    <!-- Facilitator Spotlights Section -->
-    <div>
-      <h2 class="font-telefon text-3xl text-purple-700 mb-6">Facilitator Spotlights</h2>
-      
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-        <% @stories_by_focus["Facilitator Spotlights"]&.first(3)&.each do |story| %>
-          <article class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-shadow">
-            <%= link_to story_path(story), class: "block relative" do %>
+      <!-- Facilitator Spotlights Section -->
+      <div>
+        <h2 class="font-telefon text-2xl text-purple-700 mb-4">Facilitator Spotlights</h2>
+        
+        <!-- Featured Story -->
+        <% featured_fs_story = @stories_by_focus["Facilitator Spotlights"]&.first %>
+        <% if featured_fs_story %>
+          <article class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-shadow mb-4">
+            <%= link_to story_path(featured_fs_story), class: "block relative" do %>
               <div class="aspect-[4/3] bg-gray-200 relative">
                 <%= render "assets/display_image",
-                           resource: story,
+                           resource: featured_fs_story,
                            variant: :hero %>
                 <!-- Title and Organization Overlay -->
                 <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent flex items-end">
                   <div class="p-4 w-full">
-                    <h3 class="font-telefon text-white text-lg mb-1 leading-tight">
-                      <%= story.title %>
+                    <h3 class="font-telefon text-white text-base mb-1 leading-tight">
+                      <%= featured_fs_story.title %>
                     </h3>
-                    <p class="text-white text-sm opacity-90">
-                      <%= story.organization_name %>
-                      <% if story.organization.city_state.present? %>
-                        - <%= story.organization.city_state %>
+                    <p class="text-white text-xs opacity-90">
+                      <%= featured_fs_story.organization_name %>
+                      <% if featured_fs_story.organization.city_state.present? %>
+                        - <%= featured_fs_story.organization.city_state %>
                       <% end %>
                     </p>
                   </div>
@@ -210,27 +280,24 @@
             <% end %>
           </article>
         <% end %>
-      </div>
 
-      <!-- More Stories Links -->
-      <div class="mt-6">
-        <ul class="space-y-2 text-gray-800">
-          <% additional_stories = @stories_by_focus["Facilitator Spotlights"]&.drop(3)&.first(3) || [] %>
+        <!-- Additional Story Links -->
+        <ul class="space-y-2 text-sm">
+          <% additional_stories = @stories_by_focus["Facilitator Spotlights"]&.drop(1)&.first(4) || [] %>
           <% additional_stories.each do |story| %>
             <li class="flex items-start">
-              <svg class="w-4 h-4 mr-2 mt-1 text-purple-700 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <svg class="w-3 h-3 mr-2 mt-1 text-purple-700 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
-              <%= link_to story.title, story_path(story), class: "hover:text-purple-700 hover:underline" %>
+              <%= link_to story.title, story_path(story), class: "hover:text-purple-700 hover:underline text-gray-800" %>
             </li>
           <% end %>
-          <li class="flex items-start">
-            <svg class="w-4 h-4 mr-2 mt-1 text-purple-700 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
-            </svg>
-            <%= link_to "More Facilitator Spotlights Stories...", stories_path(focus: "spotlights"), class: "text-purple-700 hover:underline font-medium" %>
-          </li>
         </ul>
+        
+        <!-- More Link -->
+        <div class="mt-4">
+          <%= link_to "More Facilitator Spotlights Stories...", stories_path(focus: "spotlights"), class: "text-purple-700 hover:underline font-medium text-sm inline-flex items-center" %>
+        </div>
       </div>
     </div>
   </div>
@@ -241,7 +308,7 @@
   <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
     <h2 class="font-telefon text-3xl text-black mb-8">What Others Are Reading</h2>
     
-    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-0">
       <% 
         # Define color mapping for different categories
         category_colors = {
@@ -265,21 +332,25 @@
           bg_color = category_colors[sector_name] || default_color
         %>
         
-        <%= link_to story_path(story), class: "group block relative aspect-square rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-shadow" do %>
+        <%= link_to story_path(story), class: "group block relative aspect-[3/4] overflow-hidden hover:opacity-90 transition-opacity" do %>
           <div class="absolute inset-0 bg-gray-200">
             <%= render "assets/display_image",
                        resource: story,
                        variant: :hero %>
           </div>
-          <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex flex-col justify-end">
-            <div class="p-4 w-full">
-              <div class="inline-block <%= bg_color %> text-white text-xs font-semibold uppercase px-2 py-1 mb-2">
-                <%= sector_name %>
-              </div>
-              <h3 class="font-telefon text-white text-sm leading-tight">
-                <%= story.title %>
-              </h3>
+          <!-- Overlay gradient -->
+          <div class="absolute inset-0 bg-gradient-to-b from-transparent via-black/30 to-black/60"></div>
+          
+          <!-- Centered content -->
+          <div class="absolute inset-0 flex flex-col items-center justify-center p-6 text-center">
+            <!-- Square sector box -->
+            <div class="<%= bg_color %> text-white text-xs font-bold uppercase px-4 py-3 mb-4 w-32 h-12 flex items-center justify-center">
+              <%= sector_name %>
             </div>
+            <!-- Title below -->
+            <h3 class="font-telefon text-white text-base leading-tight">
+              <%= story.title %>
+            </h3>
           </div>
         <% end %>
       <% end %>