Scroll site-wide buy buttons to the pricing section.

Keep the CrowdRepublic modal only on tier cards in the pricing block.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/components/layout/Footer.module.css

@@ -34,11 +34,3 @@
 .link:hover {
   color: var(--color-gold);
 }
-
-.linkButton {
-  border: none;
-  background: none;
-  padding: 0;
-  font: inherit;
-  cursor: pointer;
-}

src/components/layout/Footer.tsx

@@ -1,6 +1,5 @@
 import { SITE_LINKS } from "../../data/siteContent";
 import { useLocale } from "../../i18n/LocaleProvider";
-import { useCrowdfundingModal } from "../../providers/CrowdfundingModalProvider";
 
 import styles from "./Footer.module.css";
 
@@ -12,11 +11,9 @@ const FOOTER_LINK_KEYS = [
   "support",
 ] as const;
 
-const FOOTER_HREFS: Record<
-  Exclude<(typeof FOOTER_LINK_KEYS)[number], "buy">,
-  string
-> = {
+const FOOTER_HREFS: Record<(typeof FOOTER_LINK_KEYS)[number], string> = {
   download: SITE_LINKS.download,
+  buy: SITE_LINKS.pricing,
   faq: SITE_LINKS.faq,
   enterKey: SITE_LINKS.enterKey,
   support: SITE_LINKS.support,
@@ -24,29 +21,17 @@ const FOOTER_HREFS: Record<
 
 export function Footer() {
   const { copy } = useLocale();
-  const { openModal } = useCrowdfundingModal();
 
   return (
     <footer className={styles.footer}>
       <div className={styles.inner}>
         <p className={styles.copy}>© TTRPGPlayer</p>
         <nav className={styles.links} aria-label={copy.footer.aria}>
-          {FOOTER_LINK_KEYS.map((key) =>
-            key === "buy" ? (
-              <button
-                key={key}
-                type="button"
-                className={`${styles.link} ${styles.linkButton}`}
-                onClick={openModal}
-              >
-                {copy.footer.links[key]}
-              </button>
-            ) : (
-              <a key={key} className={styles.link} href={FOOTER_HREFS[key]}>
-                {copy.footer.links[key]}
-              </a>
-            ),
-          )}
+          {FOOTER_LINK_KEYS.map((key) => (
+            <a key={key} className={styles.link} href={FOOTER_HREFS[key]}>
+              {copy.footer.links[key]}
+            </a>
+          ))}
         </nav>
       </div>
     </footer>

src/components/layout/Header.tsx

@@ -1,7 +1,6 @@
 import { NAV_HREFS, NAV_LINK_KEYS, SITE_LINKS } from "../../data/siteContent";
 import { useLocale } from "../../i18n/LocaleProvider";
 import { Button } from "../ui/Button";
-import { BuyButton } from "../ui/BuyButton";
 import { LanguageSwitcher } from "./LanguageSwitcher";
 
 import styles from "./Header.module.css";
@@ -40,9 +39,13 @@ export function Header() {
           >
             {copy.cta.download}
           </Button>
-          <BuyButton variant="secondary" className={styles.actionBtn}>
+          <Button
+            href={SITE_LINKS.pricing}
+            variant="secondary"
+            className={styles.actionBtn}
+          >
             {copy.cta.buy}
-          </BuyButton>
+          </Button>
         </div>
       </div>
     </header>

src/components/sections/CtaBanner.tsx

@@ -1,7 +1,6 @@
 import { SITE_LINKS } from "../../data/siteContent";
 import { useLocale } from "../../i18n/LocaleProvider";
 import { Button } from "../ui/Button";
-import { BuyButton } from "../ui/BuyButton";
 
 import styles from "./CtaBanner.module.css";
 
@@ -14,7 +13,9 @@ export function CtaBanner() {
         <h2 className={styles.title}>{copy.ctaBanner.title}</h2>
         <div className={styles.actions}>
           <Button href={SITE_LINKS.download}>{copy.cta.download}</Button>
-          <BuyButton variant="secondary">{copy.cta.buyLicense}</BuyButton>
+          <Button href={SITE_LINKS.pricing} variant="secondary">
+            {copy.cta.buyLicense}
+          </Button>
         </div>
       </div>
     </section>

src/components/sections/Hero.tsx

@@ -1,7 +1,6 @@
 import { HERO_HIGHLIGHT_IDS, SITE_LINKS } from "../../data/siteContent";
 import { useLocale } from "../../i18n/LocaleProvider";
 import { Button } from "../ui/Button";
-import { BuyButton } from "../ui/BuyButton";
 import { HeroMockup } from "./HeroMockup";
 
 import styles from "./Hero.module.css";
@@ -26,7 +25,9 @@ export function Hero() {
 
           <div className={styles.cta}>
             <Button href={SITE_LINKS.download}>{copy.cta.downloadFree}</Button>
-            <BuyButton variant="secondary">{copy.cta.buyLicense}</BuyButton>
+            <Button href={SITE_LINKS.pricing} variant="secondary">
+              {copy.cta.buyLicense}
+            </Button>
           </div>
 
           <p className={styles.platforms}>{copy.hero.platformsLine}</p>