rubyforgood · Copilot · Feb 10, 2026 · Feb 10, 2026 · Feb 10, 2026 · Feb 10, 2026
diff --git a/app/assets/images/logo-with-tagline-436x80.jpg b/app/assets/images/logo-with-tagline-436x80.jpg
diff --git a/app/controllers/story_share_controller.rb b/app/controllers/story_share_controller.rb
@@ -0,0 +1,50 @@
+class StoryShareController < ApplicationController
+  include ExternallyRedirectable, AhoyTracking
+  skip_before_action :authenticate_user!, only: [ :index, :show ]
+  before_action :set_story, only: [ :show ]
+
+  def index
+    authorize!
+    per_page = params[:number_of_items_per_page].presence || 12
+    base_scope = authorized_scope(Story.includes(:windows_type, :organization, :workshop, :created_by, :bookmarks, :primary_asset))
+    filtered = base_scope.search_by_params(params)
+                         .order(created_at: :desc)
+    @stories = filtered.paginate(page: params[:page], per_page: per_page).decorate
+
+    @count_display = filtered.count == base_scope.count ? base_scope.count : "#{filtered.count}/#{base_scope.count}"
+
+    @featured_story = Story.first
+    sector_names = [
+      "Domestic Violence",
+      "Social Justice",
+      "Facilitator Spotlights"
+    ]
+
+    @stories_by_focus =
+      sector_names.index_with do |focus|
+        # TODO: Implement sector-based filtering
+        # @stories.select { |story| story.sectors.any? { |s| s.name == focus } }
+        @stories.first(5)
+      end
+    @popular_stories = @stories.sort_by { |s| s.bookmarks.size }.reverse.first(6)
+
+    render layout: "story_share"
+  end
+
+  def show
+    @story = @story.decorate
+    authorize! @story
+    track_view(@story)
+
+    if @story.external_url.present? && !params[:no_redirect].present?
+      redirect_to_external @story.link_target
+      nil
+    end
+  end
+
+  private
+
+  def set_story
+    @story = Story.find(params[:id])
+  end
+end
diff --git a/app/frontend/stylesheets/application.tailwind.css b/app/frontend/stylesheets/application.tailwind.css
@@ -17,6 +17,16 @@
   --color-transparent: transparent;
 }
 
+/* Font face declarations */
+/* Note: Telefon-Bold.ttf is located in app/assets/fonts/ directory */
+@font-face {
+  font-family: "Telefon Bold";
+  src: url("/assets/Telefon-Bold.ttf") format("truetype");
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
 /* Used to generate classes from `domain_theme.rb`*/
 @source inline("{hover:,}bg-{indigo,purple,teal,violet,orange,rose,blue,sky,emerald,slate,lime,stone,green}-{50,{100..900..100},950}");
 
@@ -33,7 +43,7 @@
     bg-indigo-100
     bg-orange-100
     bg-pink-100
-    bg-purple-100 bg-purple-200 bg-purple-500
+    bg-purple-100 bg-purple-200 bg-purple-500 bg-purple-700 bg-purple-800
     bg-red-800
     bg-yellow-200
 

diff --git a/app/models/organization.rb b/app/models/organization.rb
@@ -82,6 +82,10 @@ def led_by?(user)
     leader.user == user
   end
 
+  def city_state
+    "#{organization_locality}, #{addresses.active.first&.state}"
+  end
+
   def type_name
     "#{name} #{ " (#{windows_type.short_name})" if windows_type}"
   end

diff --git a/app/views/layouts/share_portal.html.erb b/app/views/layouts/share_portal.html.erb
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+
+<html>
+  <head>
+    <title>Story Share - AWBW</title>
+    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
+    <%= javascript_include_tag "activestorage" %>
+    <%= csrf_meta_tags %>
+
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <link rel="shortcut icon" type="image/png" href="<%= asset_path("favicon.png") %>">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
+
+    <%= vite_stylesheet_tag "application.css" %>
+    <%= vite_client_tag %>
+    <%= vite_javascript_tag "application" %>
+
+    <style>
+      body {
+        font-family: 'Roboto', sans-serif;
+      }
+      .font-telefon {
+        font-family: 'Telefon Bold', sans-serif;
+      }
+
+      /* Hide secondary nav rows on scroll */
+      .nav-row {
+        max-height: 200px;
+        overflow: visible;
+        transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
+      }
+
+      .scrolled .nav-row:not(:first-child) {
+        max-height: 0;
+        overflow: hidden;
+        opacity: 0;
+      }
+    </style>
+  </head>
+
+  <body class="stories share_portal flex flex-col min-h-screen bg-white">
+    <div class="flex-grow" id="main">
+      <div class="sticky top-0 left-0 w-full z-50 print:hidden" id="share-portal-header">
+        <!-- Story Share Portal Navbar -->
+        <%= render "shared/share_portal_navbar" %>
+      </div>
+
+      <div class="not-signed-in-user flex flex-col">
+        <%= render "shared/flash_messages" %>
+        <%= yield %>
+      </div>
+    </div>
+
+    <div class="site-footer print:hidden"><%= render "shared/footer" %></div>
+    <%= render "shared/footer_nav" %>
+
+    <script>
+      // Hide navigation rows on scroll
+      const header = document.getElementById('share-portal-header');
+
+      window.addEventListener('scroll', () => {
+        if (window.pageYOffset > 100) {
+          header.classList.add('scrolled');
+        } else {
+          header.classList.remove('scrolled');
+        }
+      });
+    </script>
+  </body>
+</html>
diff --git a/app/views/layouts/story_share.html.erb b/app/views/layouts/story_share.html.erb
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+
+<html>
+  <head>
+    <title>Story Share - AWBW</title>
+    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
+    <%= javascript_include_tag "activestorage" %>
+    <%= csrf_meta_tags %>
+
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <link rel="shortcut icon" type="image/png" href="<%= asset_path("favicon.png") %>">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
+
+    <%= vite_stylesheet_tag "application.css" %>
+    <%= vite_client_tag %>
+    <%= vite_javascript_tag "application" %>
+
+    <style>
+      body {
+        font-family: 'Roboto', sans-serif;
+      }
+      .font-telefon {
+        font-family: 'Telefon Bold', sans-serif;
+      }
+
+      /* Hide secondary nav rows on scroll */
+      .nav-row {
+        max-height: 200px;
+        overflow: visible;
+        transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
+      }
+
+      .scrolled .nav-row:not(:first-child) {
+        max-height: 0;
+        overflow: hidden;
+        opacity: 0;
+      }
+    </style>
+  </head>
+
+  <body class="story_share flex flex-col min-h-screen bg-white">
+    <div class="flex-grow" id="main">
+      <div class="sticky top-0 left-0 w-full z-50 print:hidden" id="story-share-header">
+        <!-- Story Share Navbar -->
+        <%= render "shared/story_share_navbar" %>
+      </div>
+
+      <div class="not-signed-in-user flex flex-col">
+        <%= render "shared/flash_messages" %>
+        <%= yield %>
+      </div>
+    </div>
+
+    <div class="site-footer print:hidden"><%= render "shared/footer" %></div>
+    <%= render "shared/footer_nav" %>
+
+    <script>
+      // Hide navigation rows on scroll
+      const header = document.getElementById('story-share-header');
+
+      window.addEventListener('scroll', () => {
+        if (window.pageYOffset > 100) {
+          header.classList.add('scrolled');
+        } else {
+          header.classList.remove('scrolled');
+        }
+      });
+    </script>
+  </body>
+</html>