feat: create a new support us donation page

src/lib/components/Header.svelte

@@ -37,7 +37,7 @@
     <ul id="menu">
       <a href={resolve('/about')}><li>{$t('header.aboutNav')}</li></a>
       <a href={resolve('/viewer')}><li>{$t('header.viewerNav')}</li></a>
-      <a href={resolve('/donate')}><li>{$t('header.donateNav')}</li></a>
+      <a href={resolve('/support-us')}><li>{$t('header.supportUsNav')}</li></a>
 
       <li><LanguageSwitch /></li>
     </ul>

src/lib/translations/en-US/donate.json

@@ -1,18 +0,0 @@
-{
-  "title": "💖 Donate",
-  "subtitle": "Help support Embroidery Viewer and its development!",
-  "description": "⭐️ <strong>Embroidery Viewer</strong> is free to use. If you find this tool helpful, please consider making a donation to keep it running and fund future improvements.",
-  "ways": "💸 Ways to Donate",
-  "bitcoin.description": "Scan or copy the address",
-  "copy": "Copy Address",
-  "copied": "Copied to Clipboard!",
-  "copy.failed": "Copy Failed!",
-  "monero.description": "Private and secure donation option.",
-  "paypal.description": "Want to show support in a friendly way?",
-  "paypal.link": "Open Donation link",
-  "seo.title": "💖 Donate – Support Embroidery Viewer",
-  "seo.description": "Help keep Embroidery Viewer free and improving by making a donation. Choose from Bitcoin, Monero, PayPal, or other secure options to support ongoing development and hosting.",
-  "seo.keywords": "donate embroidery viewer, support embroidery viewer, embroidery viewer donations, help embroidery viewer, fund embroidery viewer, bitcoin donation embroidery, monero donation embroidery, paypal donation embroidery",
-  "url": "https://embroideryviewer.xyz/donate",
-  "image": "https://embroideryviewer.xyz/og/donate.png"
-}

src/lib/translations/en-US/header.json

@@ -2,5 +2,5 @@
   "homeNav": "Home",
   "aboutNav": "About",
   "viewerNav": "Viewer",
-  "donateNav": "Donate"
+  "supportUsNav": "Support Us"
 }

src/lib/translations/en-US/support-us.json

@@ -0,0 +1,10 @@
+{
+  "title": "Keep embroidery simple for everyone",
+  "description": "Embroidery Viewer saves you time and removes the hassle of dealing with complex software. Your support helps keep it <strong>free, fast, and continuously improving</strong> for everyone.",
+  "cta": "Support the project",
+  "seo.title": "Support Embroidery Viewer",
+  "seo.description": "Help keep Embroidery Viewer free and improving by making a donation. Choose from Bitcoin, Monero, PayPal, or other secure options to support ongoing development and hosting.",
+  "seo.keywords": "donate embroidery viewer, support embroidery viewer, embroidery viewer donations, help embroidery viewer, fund embroidery viewer, bitcoin donation embroidery, monero donation embroidery, paypal donation embroidery",
+  "url": "https://embroideryviewer.xyz/support-us",
+  "image": "https://embroideryviewer.xyz/og/donate.png"
+}

src/lib/translations/index.js

@@ -43,9 +43,9 @@ const config = {
     },
     {
       locale: SUPPORTED_LOCALES.EN_US,
-      key: 'donate',
+      key: 'support-us',
-      routes: ['/donate'],
+      routes: ['/support-us'],
-      loader: async () => (await import('./en-US/donate.json')).default,
+      loader: async () => (await import('./en-US/support-us.json')).default,
     },
     {
       locale: SUPPORTED_LOCALES.EN_US,
@@ -97,9 +97,9 @@ const config = {
     },
     {
       locale: SUPPORTED_LOCALES.PT_BR,
-      key: 'donate',
+      key: 'support-us',
-      routes: ['/donate'],
+      routes: ['/support-us'],
-      loader: async () => (await import('./pt-BR/donate.json')).default,
+      loader: async () => (await import('./pt-BR/support-us.json')).default,
     },
     {
       locale: SUPPORTED_LOCALES.PT_BR,

src/lib/translations/pt-BR/donate.json

@@ -1,18 +0,0 @@
-{
-  "title": "💖 Doe",
-  "subtitle": "Ajude a apoiar o Embroidery Viewer e seu desenvolvimento!",
-  "description": "⭐️ O <strong>Embroidery Viewer</strong> é gratuito. Se você achar esta ferramenta útil, considere fazer uma doação para mantê-la funcionando e financiar melhorias futuras.",
-  "ways": "💸 Formas de doar",
-  "bitcoin.description": "Escaneie ou copie o endereço",
-  "copy": "Copiar Endereço",
-  "copied": "Copiado para a área de transferência!",
-  "copy.failed": "Falha na Cópia!",
-  "monero.description": "Opção de doação privada e segura.",
-  "paypal.description": "Quer demonstrar apoio de uma forma amigável?",
-  "paypal.link": "Abrir Link de Doação",
-  "seo.title": "💖 Doe – Apoie o Embroidery Viewer",
-  "seo.description": "Ajude a manter o Embroidery Viewer gratuito e em constante melhoria fazendo uma doação. Escolha entre Bitcoin, Monero, PayPal ou outras opções seguras para apoiar o desenvolvimento e hospedagem.",
-  "seo.keywords": "doar embroidery viewer, apoie embroidery viewer, doações embroidery viewer, ajudar embroidery viewer, financiar embroidery viewer, doação bitcoin embroidery, doação monero embroidery, doação paypal embroidery",
-  "url": "https://embroideryviewer.xyz/doar",
-  "image": "https://embroideryviewer.xyz/og/doar.png"
-}

src/lib/translations/pt-BR/header.json

@@ -2,5 +2,5 @@
   "homeNav": "Página Inicial",
   "aboutNav": "Sobre",
   "viewerNav": "Visualizador",
-  "donateNav": "Doe"
+  "supportUsNav": "Apoie-nos"
 }

src/lib/translations/pt-BR/support-us.json

@@ -0,0 +1,10 @@
+{
+  "title": "Mantenha o bordado simples para todos",
+  "description": "O Embroidery Viewer economiza seu tempo e elimina a complexidade de softwares complicados. Seu apoio ajuda a mantê-lo <strong>gratuito, rápido e em constante evolução</strong> para todos.",
+  "cta": "Apoiar o projeto",
+  "seo.title": "Apoie o Embroidery Viewer",
+  "seo.description": "Ajude a manter o Embroidery Viewer gratuito e em constante evolução fazendo uma doação. Escolha entre Bitcoin, Monero, PayPal ou outras opções seguras para apoiar o desenvolvimento e a infraestrutura.",
+  "seo.keywords": "doar embroidery viewer, apoiar embroidery viewer, doações embroidery viewer, ajudar embroidery viewer, financiar embroidery viewer, doação bitcoin bordado, doação monero bordado, doação paypal bordado",
+  "url": "https://embroideryviewer.xyz/support-us",
+  "image": "https://embroideryviewer.xyz/og/donate.png"
+}

src/routes/about/+page.svelte

@@ -99,7 +99,7 @@
     </div>
   </div>
   <div class="button-container">
-    <a class="organic-btn-secondary" href={resolve('/donate')}>
+    <a class="organic-btn-secondary" href={resolve('/support-us')}>
       {$t('about.support.cta')}
     </a>
   </div>

src/routes/donate/+page.js

@@ -1,12 +0,0 @@
-/** @type {import('./$types').PageLoad} */
-export function load() {
-  return {
-    metadata: {
-      title: 'donate.seo.title',
-      description: 'donate.seo.description',
-      keywords: 'donate.seo.keywords',
-      url: 'donate.seo.url',
-      image: 'donate.seo.image',
-    },
-  };
-}

src/routes/donate/+page.svelte

@@ -1,189 +0,0 @@
-<script>
-  import { t } from '$lib/translations';
-
-  import bitcoin from '$lib/assets/bitcoin.svg';
-  import monero from '$lib/assets/monero.svg';
-  import paypal from '$lib/assets/paypal.svg';
-
-  import Seo from '$lib/components/Seo.svelte';
-
-  /** @type {import('./$types').PageProps} */
-  let { data } = $props();
-
-  // svelte-ignore state_referenced_locally
-  const metadata = data.metadata;
-
-  const BTC_ADDRESS = 'bc1qpc4lpyr6stxrrg3u0k4clp4crlt6z4j6q845rq';
-  const XMR_ADDRESS =
-    '8A9iyTskiBh6f6GDUwnUJaYhAW13gNjDYaZYJBftX434D3XLrcGBko4a8kC4pLSfiuJAoSJ7e8rwP8W4StsVypftCp6FGwm';
-
-  let copyStatus = {
-    btc: '',
-    xmr: '',
-  };
-
-  /**
-   * @param {string} text
-   * @param {'btc' | 'xmr'} key
-   */
-  async function copyToClipboard(text, key) {
-    try {
-      await navigator.clipboard.writeText(text);
-      copyStatus[key] = 'donate.copied';
-    } catch (err) {
-      console.error('Copy failed:', err);
-      copyStatus[key] = 'donate.copy.failed';
-    }
-
-    setTimeout(() => (copyStatus[key] = ''), 2000);
-  }
-</script>
-
-<Seo {...metadata} />
-
-<section aria-labelledby="donate-title" class="donate-container">
-  <header>
-    <h1 id="donate-title">{$t('donate.title')}</h1>
-    <p class="donate-subtitle">{$t('donate.subtitle')}</p>
-    <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-    <p>{@html $t('donate.description')}</p>
-  </header>
-
-  <h2 id="ways-title">{$t('donate.ways')}</h2>
-  <div class="donation-options" aria-labelledby="ways-title">
-    <article class="donation-method" aria-labelledby="btc-label">
-      <img src={bitcoin} alt="Bitcoin QR code" width="200" height="200" />
-      <h3 id="btc-label">Bitcoin</h3>
-      <p>{$t('donate.bitcoin.description')}</p>
-      <button
-        aria-label="Copy Bitcoin address"
-        onclick={() => copyToClipboard(BTC_ADDRESS, 'btc')}
-      >
-        {#if copyStatus.btc}
-          {$t(copyStatus.btc)}
-        {:else}
-          {$t('donate.copy')}
-        {/if}
-      </button>
-    </article>
-
-    <article class="donation-method" aria-labelledby="xmr-label">
-      <img src={monero} alt="Monero QR code" width="200" height="200" />
-      <h3 id="xmr-label">Monero</h3>
-      <p>{$t('donate.monero.description')}</p>
-      <button
-        aria-label="Copy Monero address"
-        onclick={() => copyToClipboard(XMR_ADDRESS, 'xmr')}
-      >
-        {#if copyStatus.xmr}
-          {$t(copyStatus.xmr)}
-        {:else}
-          {$t('donate.copy')}
-        {/if}
-      </button>
-    </article>
-
-    <article class="donation-method" aria-labelledby="paypal-label">
-      <img src={paypal} alt="PayPal" width="200" height="200" />
-      <h3 id="paypal-label">PayPal</h3>
-      <p>{$t('donate.paypal.description')}</p>
-      <a
-        class="donation-link"
-        href="https://www.paypal.com/donate/?business=leo@leomurca.xyz&currency_code=USD"
-        target="_blank"
-        rel="noopener noreferrer"
-        aria-label="PayPal donation link"
-      >
-        {$t('donate.paypal.link')}
-      </a>
-    </article>
-  </div>
-</section>
-
-<style>
-  .donate-container {
-    width: 70%;
-    margin: 0 auto;
-    margin-top: 130px;
-  }
-
-  h1 {
-    margin-bottom: 7px;
-  }
-
-  .donate-subtitle {
-    font-weight: bold;
-    color: #06345f;
-    margin: 0;
-  }
-
-  .donation-options {
-    display: flex;
-    gap: 2rem;
-    margin-top: 2rem;
-  }
-
-  .donation-method {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 30rem;
-  }
-
-  .donation-method p {
-    margin-top: 0.5rem;
-    text-align: center;
-    display: block;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  button,
-  .donation-link {
-    font-size: 14px;
-    background-color: #05345f;
-    font-weight: bold;
-    color: white;
-    padding: 10px;
-    border: none;
-    border-radius: 10px;
-    width: 200px;
-    height: 45px;
-    text-align: center;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-top: 1rem;
-    transition: background-color 0.2s ease;
-  }
-
-  button:hover,
-  .donation-link:hover {
-    cursor: pointer;
-    background-color: black;
-    color: white;
-  }
-
-  @media (max-width: 768px) {
-    .donate-container {
-      width: 90%;
-    }
-
-    .donation-options {
-      flex-direction: column;
-      align-items: center;
-    }
-
-    .donation-method {
-      width: 100%;
-    }
-
-    button,
-    .donation-link {
-      width: 100%;
-      height: 55px;
-      font-size: 1em;
-    }
-  }
-</style>

src/routes/support-us/+page.js

@@ -0,0 +1,12 @@
+/** @type {import('./$types').PageLoad} */
+export function load() {
+  return {
+    metadata: {
+      title: 'support-us.seo.title',
+      description: 'support-us.seo.description',
+      keywords: 'support-us.seo.keywords',
+      url: 'support-us.seo.url',
+      image: 'support-us.seo.image',
+    },
+  };
+}

src/routes/support-us/+page.svelte

@@ -0,0 +1,108 @@
+<script>
+  import { t } from '$lib/translations';
+  import { PUBLIC_IMAGE_BASE_URL } from '$env/static/public';
+  import { isMobile } from '$lib/utils/isMobile';
+
+  import BuyMeACoffeeIcon from '$lib/components/icons/BuyMeACoffeeIcon.svelte';
+
+  const backgroundImage = isMobile()
+    ? `${PUBLIC_IMAGE_BASE_URL}/t/f_webp/embroidery-viewer/route-wallpaper-mobile.webp`
+    : `${PUBLIC_IMAGE_BASE_URL}/t/f_webp,w_1920,h_1080/embroidery-viewer/route-wallpaper.webp`;
+</script>
+
+<section aria-labelledby="support-us">
+  <div
+    class="heading-container"
+    style={`background: url(${backgroundImage}) center/cover no-repeat`}
+  >
+    <div class="overlay">
+      <h1 id="support-us">{$t('support-us.title')}</h1>
+      <p>
+        <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+        {@html $t('support-us.description')}
+      </p>
+
+      <a
+        class="bmac-button"
+        href="https://buymeacoffee.com/embroideryviewerxyz"
+        target="_blank"
+      >
+        <BuyMeACoffeeIcon size={30} />
+        {$t('support-us.cta')}
+      </a>
+    </div>
+  </div>
+</section>
+
+<style>
+  .bmac-button {
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    background-color: #ffdd03;
+    border: none;
+    padding: 15px 20px;
+    border-radius: 15px;
+    font-weight: 700;
+    color: black;
+    gap: 10px;
+    transition: transform 0.3s ease;
+    margin-top: 100px;
+  }
+
+  .bmac-button:hover {
+    transform: scale(1.1);
+  }
+  .heading-container {
+    position: relative;
+    z-index: 0;
+    width: 100%;
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .overlay {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 80%;
+    z-index: 1;
+    text-align: center;
+    margin-bottom: 100px;
+  }
+
+  .heading-container h1 {
+    font-size: clamp(3.5rem, 4vw, 3.5rem);
+    font-weight: 700;
+    margin-bottom: 1rem;
+    line-height: 1.2;
+    margin-top: 0;
+  }
+
+  p {
+    font-size: 1.4rem;
+    line-height: 1.5;
+  }
+
+  strong {
+    font-weight: 900;
+  }
+
+  @media (max-width: 768px) {
+    .heading-container {
+      width: 100%;
+    }
+    .heading-container h1 {
+      font-size: clamp(2.5rem, 4vw, 3rem);
+    }
+    .bmac-button {
+      margin-top: 20px;
+    }
+
+    p {
+      font-size: 1rem;
+    }
+  }
+</style>