mirror of
https://github.com/storytold/artcraft.git
synced 2026-11-05 17:58:55 +00:00
website: added discord cta on cancel and success pages, pricing footnote cleanup
This commit is contained in:
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">
|
||||
† 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">
|
||||
‡ 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">
|
||||
† 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>
|
||||
|
||||
Reference in new issue
Block a user