Redesign Shell website with charcoal ribbon artwork

Bring the shared responsive website layout to Shell, retain the original terminal branding and demo, and add keyboard-operable help. Preserve existing Slack OAuth, registration, status, and privacy behavior.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: dblock

.rubocop_todo.yml

@@ -1,6 +1,6 @@
 # This configuration was generated by
 # `rubocop --auto-gen-config`
-# on 2026-10-24 23:19:23 UTC using RuboCop version 1.92.1.
+# on 2026-10-25 15:08:27 UTC using RuboCop version 1.92.1.
 # The point is for the user to remove these configuration records
 # one by one as the offenses are removed from the code base.
 # Note that changes in the inspected code, or installation of new
@@ -72,7 +72,7 @@ RSpec/ContextWording:
     - 'spec/models/team_spec.rb'
     - 'spec/support/api/endpoints/it_behaves_like_a_cursor_api.rb'
 
-# Offense count: 9
+# Offense count: 13
 # Configuration parameters: CountAsOne.
 RSpec/ExampleLength:
   Max: 11
@@ -94,7 +94,7 @@ RSpec/LetSetup:
 RSpec/MessageSpies:
   EnforcedStyle: receive
 
-# Offense count: 23
+# Offense count: 29
 RSpec/MultipleExpectations:
   Max: 6
 
@@ -128,7 +128,7 @@ RSpec/SpecFilePathFormat:
     - 'spec/commands/whoami_spec.rb'
     - 'spec/version_spec.rb'
 
-# Offense count: 9
+# Offense count: 11
 # This cop supports safe autocorrection (--autocorrect).
 # Configuration parameters: AllowHeredoc, AllowURI, AllowQualifiedName, URISchemes, AllowRBSInlineAnnotation, AllowCopDirectives, AllowedPatterns, SplitStrings.
 # URISchemes: http, https

CHANGELOG.md

@@ -1,5 +1,6 @@
 ### Changelog
 
+* 2026/10/25: [#87](https://github.com/slack-ruby/slack-shellbot/pull/87): Redesign the Shell website with shared responsive layouts, charcoal ribbon artwork, a black-bordered animated demo, an "Is this a joke?" FAQ linked from the homepage, and recommendations with original logos for Slava, Strada, Gamebot, and S'Up above Open source while preserving Slack installation and status flows - [@dblock](https://github.com/dblock), [@Copilot](https://github.com/apps/copilot-swe-agent).
 * 2026/10/24: [#86](https://github.com/slack-ruby/slack-shellbot/pull/86): Upgrade slack-ruby-bot-server to 2.2.1 to fix Grape error handling for unsupported requests and failing health checks - [@dblock](https://github.com/dblock), [@Copilot](https://github.com/apps/copilot-swe-agent).
 * 2026/10/23: Upgrade to Ruby 4.0.9 and refresh dependencies and CI browser tooling - [@dblock](https://github.com/dblock), [@Copilot](https://github.com/apps/copilot-swe-agent).
 * 2025/09/29: Upgraded to Ruby 3.4.6 - [@dblock](https://github.com/dblock).

README.md

@@ -13,6 +13,12 @@ A shell bot for Slack. A demo is worth a thousand words.
 
 This bot is built with [slack-ruby-bot-server-events](https://github.com/slack-ruby/slack-ruby-bot-server-events). See [CONTRIBUTING](CONTRIBUTING.md).
 
+## Website artwork
+
+The website follows the shared Slava, Strata, and Strada layout with a terminal-inspired black/charcoal palette (base `#303035`). The editable `public/img/screenshot-background.svg` adapts the shared ribbon artwork and keeps `preserveAspectRatio="none"` on a fixed viewport-sized layer so expanding help does not resize the background. Preserve the original transparent `public/img/icon.png` terminal logo, its matching multi-resolution favicon, and the original `public/img/shell.gif` demonstration when updating the design.
+
+The bot recommendations use local copies of the original logos: `bot-slava.png` and `bot-strada.png` from their respective projects' `public/img/icon.png`, `bot-gamebot.png` from slack-gamebot2's `public/img/game.png`, and `bot-sup.png` from slack-sup2's `public/img/icon.png`. Preserve their original colors rather than applying the Shell website's monochrome styling.
+
 ## Copyright and License
 
 Copyright (c) 2016-2025, Daniel Doubrovkine, Artsy and [Contributors](CHANGELOG.md).

public/favicon.ico

@@ -1,18 +1,49 @@
-<html>
+<!DOCTYPE html>
+<html lang="en">
   <head>
     <title>Shell: Help</title>
     <%= partial 'public/partials/_head.html.erb' %>
   </head>
-  <body>
-    <p class='icon'>
-      <a href='/'><img src='img/icon.png'></a>
-    </p>
-    <div class='help'>
-      <pre>
-        <%= CGI.escapeHTML(SlackShellbot::Commands::Man::HELP) %>
-      </pre>
-    </div>
+  <body class="site-page help-page">
+    <%= partial 'public/partials/_navigation.html.erb' %>
+    <main id="main" class="page-container help-content">
+      <header class="help-header">
+        <h1>Shell: Help</h1>
+        <p class="section-intro">A little help for your channel's command line.</p>
+      </header>
+      <section id="get-started" class="help-section" aria-labelledby="start-title">
+        <h2 id="start-title">Get started</h2>
+        <ol class="getting-started-steps">
+          <li><%= partial 'public/partials/_install_button.html.erb' %> and authorize Shell for your workspace.</li>
+          <li>Invite <code>@sh</code> into a Slack channel.</li>
+          <li>Type <code>man</code> to see the commands, or <code>ls</code> to list files.</li>
+        </ol>
+        <p>Each channel has its own rudimentary file system. This is a shell bot inside Slack, not a connection to your computer's shell.</p>
+      </section>
+      <section class="help-section" aria-labelledby="commands-title">
+        <h2 id="commands-title">Commands &amp; questions</h2>
+        <details id="is-this-a-joke" class="help-topic" open>
+          <summary>Is this a joke?</summary>
+          <p>Yes. Also, it works! Shell is a tiny Unix-like shell inside Slack, because apparently Slack needed a command line. Its commands and per-channel file system really work, but it is a toy, not a remote terminal.</p>
+        </details>
+        <details class="help-topic">
+          <summary>Command reference</summary>
+          <pre><%= CGI.escapeHTML(SlackShellbot::Commands::Man::HELP) %></pre>
+        </details>
+        <details class="help-topic">
+          <summary>How do I create and read a file?</summary>
+          <p>Try <code>touch notes</code> to create a file, <code>ls</code> to see it, and <code>cat notes</code> to read its contents. Use <code>mkdir projects</code> to create a directory.</p>
+        </details>
+        <details class="help-topic">
+          <summary>How do I leave the editor?</summary>
+          <p>The basic <code>vi</code>-like editor updates messages in place. Use <code>:wq</code> to quit and save, or <code>:q</code> to quit without saving.</p>
+        </details>
+      </section>
+      <section id="support" class="help-section" aria-labelledby="support-title">
+        <h2 id="support-title">Need a hand?</h2>
+        <p>Contact <a href="mailto:dblock@vestris.com">dblock@vestris.com</a>, DM <a href="https://twitter.com/playplayio">@playplayio</a>, or <a href="https://github.com/slack-ruby/slack-shellbot/issues">report an issue on GitHub</a>.</p>
+      </section>
+    </main>
     <%= partial 'public/partials/_footer.html.erb' %>
   </body>
 </html>
-