Closing banner

index.html

@@ -52,7 +52,7 @@
     </div>
     <div class="desktop-only">
       <a href="https://app.backstoryai.com?utm_source=backstoryai_com&utm_medium=web&utm_campaign=home_page">Log in</a>
-      <a href="https://app.backstoryai.com?utm_source=backstoryai_com&utm_medium=web&utm_campaign=home_page" class="btn">Sign up <span class="desktop-only">for free!</span></a>
+      <a href="https://app.backstoryai.com?utm_source=backstoryai_com&utm_medium=web&utm_campaign=home_page" class="btn hide">Sign up <span class="desktop-only">for free!</span></a>
     </div>
     <div class="mobile-only">
       <button id="mobile-user-menu">
@@ -65,7 +65,10 @@ <h2 class="subtitle">
       BackstoryAI helps you create characters. Using cutting-edge generative AI technology, BackstoryAI generates 
       engaging biographies and stories for your characters.
     </h2>
-    <p><a href="https://app.backstoryai.com?utm_source=backstoryai_com&utm_medium=web&utm_campaign=home_page" class="btn btn-lg btn-gradient">Try it now</a></p>
+    <hr />
+    <h3 class="top-space">⚠️ BackstoryAI is shutting down</h3>
+    <p>It's been a great journey, but BackstoryAI is shutting down after December 31, 2024. Save any content you want to keep before then. It's been our pleasure to serve you.</p>
+    <p class="hide"><a href="https://app.backstoryai.com?utm_source=backstoryai_com&utm_medium=web&utm_campaign=home_page" class="btn btn-lg btn-gradient">Try it now</a></p>
   </header>
   <main>
     <section class="gradient">
@@ -136,11 +139,11 @@ <h3>
     </section>
     <section class="light center">
       <div>
-        <h3>BackstoryAI is in beta</h3>
+        <h3>BackstoryAI is shutting down</h3>
         <p>
-          Sign up now for free and start creating your characters!
+          It's been a great journey, but BackstoryAI is shutting down after December 31, 2024. Save any content you want to keep before then. It's been our pleasure to serve you.
         </p>
-        <a href="https://app.backstoryai.com?utm_source=backstoryai_com&utm_medium=web&utm_campaign=home_page" class="top-space btn btn-lg btn-gradient">Sign up</a>
+        <a href="https://app.backstoryai.com?utm_source=backstoryai_com&utm_medium=web&utm_campaign=home_page" class="top-space btn btn-lg btn-gradient hide">Sign up</a>
       </div>
     </section>
     <section>
@@ -160,7 +163,7 @@ <h3>BackstoryAI is in beta</h3>
     tippy('#mobile-user-menu', {
       content: `<ul>
         <li><a href="https://app.backstoryai.com">Log in</a></li>
-        <li><a href="/sign-up">Sign up</a></li>
+        <li><a href="/sign-up" class="hide">Sign up</a></li>
       </ul>`,
       allowHTML: true,
       trigger: 'click',

style.css

@@ -90,6 +90,12 @@ h2 {
 .home h2 {
   margin: 0 0 2rem;
 }
+h3 {
+  font-weight: 300;
+}
+h3 + p {
+  font-weight: 300;
+}
 .home .subtitle {
   font-size: 1.4rem;
   font-weight: 300;
@@ -300,3 +306,6 @@ body.stretch > header {
 .cm-modal {
   max-height: 80vh !important;
 }
+.hide {
+  display: none !important;
+}