From a31138535ecffae04d85912ce952f775ff85999f Mon Sep 17 00:00:00 2001
From: bflatastic <bombayapirat@gmail.com>
Date: Tue, 27 Jan 2026 21:42:17 +0700
Subject: [PATCH] website: added discord cta on cancel and success pages,
 pricing footnote cleanup

---
 frontend/apps/artcraft-website/_redirects     |  3 ++
 .../pricing-table/pricing-table.tsx           |  2 +-
 .../src/pages/checkout/cancel.tsx             | 40 +++++++++++-------
 .../src/pages/checkout/success.tsx            | 42 +++++++++++++------
 .../src/pages/pricing/pricing.tsx             | 17 ++++----
 5 files changed, 67 insertions(+), 37 deletions(-)

diff --git a/frontend/apps/artcraft-website/_redirects b/frontend/apps/artcraft-website/_redirects
index 2d852a4bfd..8498c25070 100644
--- a/frontend/apps/artcraft-website/_redirects
+++ b/frontend/apps/artcraft-website/_redirects
@@ -6,6 +6,9 @@
 /checkout_success/ /index.html 200
 /checkout_success/* /index.html 200
 
+/checkout* /index.html 200
+/checkout/* /index.html 200
+
 /download /index.html 200
 /download/ /index.html 200
 
diff --git a/frontend/apps/artcraft-website/src/components/pricing-table/pricing-table.tsx b/frontend/apps/artcraft-website/src/components/pricing-table/pricing-table.tsx
index 8550c1a360..40d66e3599 100644
--- a/frontend/apps/artcraft-website/src/components/pricing-table/pricing-table.tsx
+++ b/frontend/apps/artcraft-website/src/components/pricing-table/pricing-table.tsx
@@ -256,7 +256,7 @@ const PricingTable = ({
       {showHeader && (
         <div className={`text-center mx-auto ${compact ? "mb-6" : "mb-10"}`}>
           <h2
-            className={`font-bold mb-4 ${compact ? "text-2xl md:text-3xl" : "text-3xl sm:text-4xl md:text-5xl"}`}
+            className={`font-bold mb-4 ${compact ? "text-2xl md:text-3xl" : "text-4xl sm:text-4xl md:text-6xl"}`}
           >
             {title}
           </h2>
diff --git a/frontend/apps/artcraft-website/src/pages/checkout/cancel.tsx b/frontend/apps/artcraft-website/src/pages/checkout/cancel.tsx
index d68b2ee601..95a0b9ef9d 100644
--- a/frontend/apps/artcraft-website/src/pages/checkout/cancel.tsx
+++ b/frontend/apps/artcraft-website/src/pages/checkout/cancel.tsx
@@ -1,7 +1,9 @@
-import { faXmarkCircle, faArrowLeft } from "@fortawesome/pro-solid-svg-icons";
+import { faXmarkCircle } from "@fortawesome/pro-solid-svg-icons";
+import { faDiscord } from "@fortawesome/free-brands-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Button } from "@storyteller/ui-button";
 import { Link } from "react-router-dom";
+import { SOCIAL_LINKS } from "../../config/links";
 import Seo from "../../components/seo";
 
 const CheckoutCancel = () => {
@@ -60,34 +62,42 @@ const CheckoutCancel = () => {
               >
                 View Plans Again
               </Button>
+            </div>
+
+            {/* Discord CTA */}
+            <div className="mt-8 pt-6 border-t border-white/10 flex flex-col gap-2 items-center">
+              <div className="flex items-center justify-center gap-2 mb-2">
+                <span className="text-white/70 text-sm">
+                  Need help deciding?
+                </span>
+              </div>
               <Button
                 as="link"
-                href="/"
-                className="bg-white/10 hover:bg-white/20 px-8 py-3 text-sm font-bold rounded-xl justify-center border-transparent"
+                href={SOCIAL_LINKS.DISCORD}
+                target="_blank"
+                className="bg-white text-black hover:bg-white/80 px-4 py-2 text-sm font-bold rounded-xl justify-center border-transparent"
               >
-                <FontAwesomeIcon icon={faArrowLeft} />
-                Back to Home
+                <FontAwesomeIcon icon={faDiscord} />
+                Join Discord
               </Button>
             </div>
           </div>
 
           {/* Footer Links */}
-          <div className="text-center mt-8 flex justify-center gap-6">
+          <div className="text-center mt-8 flex justify-center gap-4">
+            <Link
+              to="/"
+              className="text-white/40 hover:text-white text-sm font-medium transition-colors"
+            >
+              Back to Home
+            </Link>
+            <span className="text-white/20">•</span>
             <Link
               to="/faq"
               className="text-white/40 hover:text-white text-sm font-medium transition-colors"
             >
               FAQ
             </Link>
-            <span className="text-white/20">•</span>
-            <a
-              href="https://discord.gg/artcraft"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-white/40 hover:text-white text-sm font-medium transition-colors"
-            >
-              Get Help
-            </a>
           </div>
         </div>
       </main>
diff --git a/frontend/apps/artcraft-website/src/pages/checkout/success.tsx b/frontend/apps/artcraft-website/src/pages/checkout/success.tsx
index 8da500f28c..20f778e60b 100644
--- a/frontend/apps/artcraft-website/src/pages/checkout/success.tsx
+++ b/frontend/apps/artcraft-website/src/pages/checkout/success.tsx
@@ -3,13 +3,14 @@ import {
   faDownload,
   faDesktop,
   faRocket,
-  faArrowLeft,
 } from "@fortawesome/pro-solid-svg-icons";
+import { faDiscord } from "@fortawesome/free-brands-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Button } from "@storyteller/ui-button";
 import { Link } from "react-router-dom";
 import { isMobile, isMacOs } from "react-device-detect";
 import { DOWNLOAD_LINKS } from "../../config/downloads";
+import { SOCIAL_LINKS } from "../../config/links";
 import Seo from "../../components/seo";
 
 const CheckoutSuccess = () => {
@@ -91,14 +92,6 @@ const CheckoutSuccess = () => {
                   <FontAwesomeIcon icon={faDownload} className="mr-2" />
                   Download ArtCraft
                 </Button>
-                <Button
-                  as="link"
-                  href="/"
-                  className="bg-white/10 hover:bg-white/20 px-8 py-3 text-sm font-bold rounded-xl justify-center border-transparent"
-                >
-                  <FontAwesomeIcon icon={faArrowLeft} />
-                  Back to Home
-                </Button>
               </div>
             ) : (
               <div className="bg-[#431407] border border-orange-900/50 rounded-2xl p-6 text-orange-200 text-sm leading-relaxed">
@@ -129,15 +122,40 @@ const CheckoutSuccess = () => {
                 </a>
               </div>
             )}
+
+            {/* Discord CTA */}
+            <div className="mt-8 pt-6 border-t border-white/10 flex flex-col gap-2 items-center">
+              <div className="flex items-center justify-center gap-2 mb-2">
+                <span className="text-white/70 text-sm">
+                  Join our community
+                </span>
+              </div>
+              <Button
+                as="link"
+                href={SOCIAL_LINKS.DISCORD}
+                target="_blank"
+                className="bg-white text-black hover:bg-white/80 px-4 py-2 text-sm font-bold rounded-xl justify-center border-transparent"
+              >
+                <FontAwesomeIcon icon={faDiscord} />
+                Join Discord
+              </Button>
+            </div>
           </div>
 
-          {/* Footer Link */}
-          <div className="text-center mt-8">
+          {/* Footer Links */}
+          <div className="text-center mt-8 flex justify-center gap-4">
+            <Link
+              to="/"
+              className="text-white/40 hover:text-white text-sm font-medium transition-colors"
+            >
+              Back to Home
+            </Link>
+            <span className="text-white/20">•</span>
             <Link
               to="/pricing"
               className="text-white/40 hover:text-white text-sm font-medium transition-colors"
             >
-              View Plan Details
+              View Plans
             </Link>
           </div>
         </div>
diff --git a/frontend/apps/artcraft-website/src/pages/pricing/pricing.tsx b/frontend/apps/artcraft-website/src/pages/pricing/pricing.tsx
index c83815677c..001da2897d 100644
--- a/frontend/apps/artcraft-website/src/pages/pricing/pricing.tsx
+++ b/frontend/apps/artcraft-website/src/pages/pricing/pricing.tsx
@@ -21,15 +21,14 @@ const Pricing = () => {
         />
       </main>
 
-      <p className="relative px-4 px-2                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         sm:px-6 lg:px-8">
-        &dagger; ArtCraft can be used without paying for a subscription. 
-        You can bring your own compute and third party subscriptions. 
-        We hope you'll subscribe, though, as that helps accelerate our development.
-      </p>
-
-      <p className="relative pb-4 px-2 sm:px-6 lg:px-8">
-        &Dagger; Pricing table is wrong, but we'll fix this shortly.
-      </p>
+      {/* Footnotes */}
+      <div className="relative z-10 max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 pb-12 text-center">
+        <p className="text-md text-white/80 leading-relaxed">
+          &dagger; ArtCraft can be used without paying for a subscription. You
+          can bring your own compute and third party subscriptions. We hope
+          you'll subscribe, though, as that helps accelerate our development.
+        </p>
+      </div>
 
       <Footer />
     </div>