feat: donate button

src/app/layout.tsx

@@ -1,16 +1,20 @@
 'use client';
 
-import { AlertDialog, Button, Flex, Theme } from '@radix-ui/themes';
+import { CaretRightIcon } from '@radix-ui/react-icons';
+import { AlertDialog, Button, Flex, Text, Theme } from '@radix-ui/themes';
 import '@radix-ui/themes/styles.css';
 import { Analytics } from '@vercel/analytics/react';
 import { config } from 'dotenv';
 import { Roboto_Flex } from 'next/font/google';
 import { usePathname } from 'next/navigation';
 import { ReactNode, useEffect, useState } from 'react';
+import { SkyLine } from '../assets/art/SkyLine';
 import Navbar from '../components/Navbar';
+import PageWrapper from '../components/PageWrapper';
 import isDev from '../core/blitzkrieg/isDev';
 import { isLocalhost } from '../core/blitzkrieg/isLocalhost';
 import { useApp } from '../stores/app';
+import { mintTheme } from '../themes/mint';
 
 config();
 
@@ -65,7 +69,6 @@ export default function RootLayout({ children }: RootLayoutProps) {
           suppressContentEditableWarning
         >
           {!isEmbed && <Navbar />}
-
           <AlertDialog.Root open={showDevBuildAlert}>
             <AlertDialog.Content>
               <AlertDialog.Title>Experimental version!</AlertDialog.Title>
@@ -96,6 +99,60 @@ export default function RootLayout({ children }: RootLayoutProps) {
           </AlertDialog.Root>
 
           <Flex direction="column">{children}</Flex>
+
+          <PageWrapper>
+            <a
+              target="_blank"
+              href="https://ko-fi.com/tresabhi"
+              style={{ textDecoration: 'none' }}
+            >
+              <Flex
+                align="center"
+                style={{
+                  padding: 16,
+                  borderRadius: 8,
+                  backgroundColor: mintTheme.colors.componentInteractive,
+                  position: 'relative',
+                  overflow: 'hidden',
+                }}
+              >
+                <Flex
+                  direction="column"
+                  gap="1"
+                  style={{
+                    flex: 1,
+                    zIndex: 1,
+                  }}
+                >
+                  <Text size="4" color="mint">
+                    Blitzkrieg. Free forever. For everyone.
+                  </Text>
+                  <Text color="mint">
+                    <b>Consider supporting today 🍀</b>
+                  </Text>
+                </Flex>
+
+                <Text
+                  color="mint"
+                  style={{
+                    zIndex: 1,
+                  }}
+                >
+                  <Flex>
+                    <CaretRightIcon width={32} height={32} />
+                  </Flex>
+                </Text>
+
+                <SkyLine
+                  style={{
+                    position: 'absolute',
+                    right: 'min(8vw, 15%)',
+                    top: '5%',
+                  }}
+                />
+              </Flex>
+            </a>
+          </PageWrapper>
         </Theme>
       </body>
     </html>

src/assets/art/SkyLine.tsx

@@ -0,0 +1,58 @@
+import { ComponentProps } from 'react';
+
+export function SkyLine(props: ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="294"
+      height="99"
+      viewBox="0 0 294 99"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M80.2779 23.3701C80.2779 23.3701 73.8679 13.2501 67.5679 18.3701C67.5679 18.3701 65.5679 9.69007 59.1579 12.9301C52.7479 16.1701 55.4779 21.4901 55.4779 21.4901C55.4779 21.4901 47.2779 20.6101 46.4279 24.8101C46.4279 24.8101 39.2879 24.8101 38.5579 30.8101H81.9579L80.2779 23.3701Z"
+        fill="#082424"
+      />
+      <path
+        d="M89.8678 90.33C92.4159 88.2998 95.5978 87.2321 98.8547 87.3144C102.112 87.3967 105.236 88.6237 107.678 90.78C107.448 90.56 110.008 88.53 110.258 88.38C111.377 87.6722 112.624 87.1899 113.928 86.96C116.408 86.52 119.358 87.04 121.088 89.02C121.116 88.7441 121.226 88.483 121.405 88.2708C121.583 88.0585 121.821 87.9049 122.088 87.83C122.359 87.7706 122.641 87.7932 122.9 87.8946C123.158 87.9961 123.38 88.172 123.538 88.4C122.718 87.14 125.278 85.35 126.068 84.91C127.406 84.2635 128.837 83.8283 130.308 83.62C133.736 82.9624 137.235 82.7473 140.718 82.98C147.715 83.4087 154.471 85.6975 160.288 89.61C160.918 90.05 161.538 90.5 162.138 90.97C165.328 87.55 168.738 85.66 173.558 86.17C174.583 86.2315 175.58 86.5254 176.474 87.0296C177.368 87.5338 178.135 88.235 178.718 89.08C178.968 88.4817 179.403 87.9788 179.959 87.6443C180.514 87.3098 181.162 87.1612 181.808 87.22C182.452 87.2962 183.074 87.5053 183.633 87.8341C184.193 88.1628 184.678 88.6041 185.058 89.13C183.768 87.46 189.648 84.44 190.618 84.26C193.668 83.71 196.618 85.71 199.008 87.43C201.189 85.0982 204.063 83.5308 207.204 82.9599C210.345 82.389 213.586 82.8448 216.448 84.26C218.627 82.7527 221.302 82.1396 223.92 82.5471C226.538 82.9546 228.9 84.3517 230.518 86.45C231.368 85.7343 232.356 85.2011 233.421 84.8836C234.485 84.566 235.604 84.4709 236.707 84.6041C237.81 84.7372 238.874 85.0959 239.832 85.6578C240.791 86.2196 241.623 86.9726 242.278 87.87C242.088 87.58 245.968 86.11 246.428 86.14C247.21 86.2189 247.955 86.5104 248.583 86.9829C249.21 87.4553 249.696 88.0907 249.988 88.82C250.566 88.33 251.291 88.0483 252.048 88.02C252.494 88.0752 252.901 88.3007 253.184 88.6492C253.468 88.9978 253.605 89.4423 253.568 89.89C254.07 89.4425 254.67 89.1189 255.319 88.9453C255.969 88.7716 256.65 88.7527 257.308 88.89C260.708 89.63 261.658 95.18 261.648 98.09H68.3578C68.0578 98.07 79.9878 83.84 89.8678 90.33Z"
+        fill="#082424"
+      />
+      <path d="M249.299 63.98H187.048V70.17H249.299V63.98Z" fill="#082424" />
+      <path
+        d="M246.628 70.1699H189.708V97.5099H246.628V70.1699Z"
+        fill="#082424"
+      />
+      <path d="M283.819 47.53H254.069V52.35H283.819V47.53Z" fill="#082424" />
+      <path
+        d="M281.669 52.3401H256.219V98.0801H281.669V52.3401Z"
+        fill="#082424"
+      />
+      <path
+        d="M164.078 73.6901V68.8501H142.238V73.6901H122.458V79.7901H125.808V98.0901H180.498V79.7901H183.848V73.6901H164.078Z"
+        fill="#082424"
+      />
+      <path
+        d="M73.1879 59.22V52H55.9079V59.22H47.9079V52H30.6279V59.22H22.8879V98.09H81.9579V59.22H73.1879Z"
+        fill="#082424"
+      />
+      <path
+        d="M115.578 31.3701V25.3601H111.968V19.3401H109.638V13.3301H95.9577V19.3401H93.6277V25.3601H90.0277V31.3701H86.4177V98.0901H119.178V31.3701H115.578Z"
+        fill="#082424"
+      />
+      <path
+        d="M102.798 14.33C102.533 14.33 102.279 14.2247 102.091 14.0371C101.903 13.8496 101.798 13.5952 101.798 13.33V1.91003C101.798 1.64482 101.903 1.39046 102.091 1.20293C102.279 1.01539 102.533 0.910034 102.798 0.910034C103.063 0.910034 103.318 1.01539 103.505 1.20293C103.693 1.39046 103.798 1.64482 103.798 1.91003V13.33C103.798 13.5952 103.693 13.8496 103.505 14.0371C103.318 14.2247 103.063 14.33 102.798 14.33Z"
+        fill="#082424"
+      />
+      <path
+        d="M179.959 48.8401C179.959 48.8401 180.779 41.3601 186.509 40.9201C190.559 40.6101 191.729 43.6201 191.729 43.6201C191.598 42.1914 191.866 40.7543 192.503 39.469C193.14 38.1836 194.122 37.1005 195.339 36.3401C199.609 33.5901 203.919 34.4601 205.339 38.0901C207.263 37.0072 209.491 36.5916 211.677 36.9082C213.862 37.2248 215.881 38.2556 217.419 39.8401C223.119 45.4601 223.069 48.8401 223.069 48.8401H179.959Z"
+        fill="#082424"
+      />
+      <path
+        d="M26.6637 84.6301V79.7901H4.82372V84.6301H0.499809V90.7301L0.499512 98.09H43.0838L43.0837 90.7301H46.4337V84.6301H26.6637Z"
+        fill="#082424"
+      />
+      <path d="M293.627 84H236.707V98.09H293.627V84Z" fill="#082424" />
+    </svg>
+  );
+}

src/themes/mint.ts

@@ -0,0 +1,6 @@
+import { mintDark } from '@radix-ui/colors';
+import { createColors } from 'bepaint';
+
+export const mintTheme = {
+  colors: createColors(mintDark),
+};