website: added discord cta on cancel and success pages, pricing footnote cleanup

This commit is contained in:
bflatastic committed 2026-01-27 21:42:17 +07:00
1 parent 8899b3dcb5
commit a31138535e
5 files changed
+67 -37

No files matched your search

@@ -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
@@ -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>
@@ -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>
@@ -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>
@@ -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>