Created and finished up the support page.

src/info/package-lock.json

@@ -4770,6 +4770,14 @@
         "scheduler": "^0.20.2"
       }
     },
+    "react-iframe": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/react-iframe/-/react-iframe-1.8.0.tgz",
+      "integrity": "sha512-NYi89+rEqREwQxW9sDf+akh6/dtwWd3bOjByoVEIQ7SicOxVawRMer3pLdWjFaHXpuxTB9NqobPf/Ohj2iAKkg==",
+      "requires": {
+        "object-assign": "^4.1.1"
+      }
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

src/info/package.json

@@ -15,6 +15,7 @@
     "postcss": "^8.2.13",
     "react": "17.0.2",
     "react-dom": "17.0.2",
+    "react-iframe": "^1.8.0",
     "tailwindcss": "^2.1.2"
   }
 }

src/info/pages/identities/fursona/index.js

@@ -2,7 +2,7 @@ import BasicPage from "../../../components/basic-page-template";
 import WCard from "../../../components/werefox-card";
 import IDCard from "../../../components/identity-card";
 
-export default function Gender() {
+export default function Fursona() {
   return (
     <BasicPage page_title="OwO What's this?" card_title="Fursona Details!">
       <WCard>

src/info/pages/identities/neuro/index.js

@@ -2,7 +2,7 @@ import BasicPage from "../../../components/basic-page-template";
 import WCard from "../../../components/werefox-card";
 import IDCard from "../../../components/identity-card";
 
-export default function Gender() {
+export default function Neurodiversity() {
   return (
     <BasicPage
       page_title="Neurodiversity, Fam"

src/info/pages/index.js

@@ -159,7 +159,7 @@ export default function Home() {
             extraClasses=""
             imageObj={{
               src: "/emoji/awoo.svg",
-              alt: "Testimonials",
+              alt: "Awoo emoji",
             }}
             innerText="See Testimonials!"
             url="/testimonials"
@@ -169,11 +169,21 @@ export default function Home() {
             extraClasses=""
             imageObj={{
               src: "/emoji/red_question_mark.svg",
-              alt: "Frequently Asked Question",
+              alt: "Question mark emoji",
             }}
             innerText="FAQ"
             url="/faq"
           />
+          <WCard
+            isCardButton="true"
+            extraClasses=""
+            imageObj={{
+              src: "/emoji/green_money.svg",
+              alt: "Support",
+            }}
+            innerText="Support Me?"
+            url="/support"
+          />
         </div>
       </WCard>
     </BasicPage>

src/info/pages/support/index.js

@@ -0,0 +1,61 @@
+import BasicPage from "../../components/basic-page-template";
+import WCard from "../../components/werefox-card";
+import Link from "next/link";
+import Iframe from "react-iframe";
+
+export default function Support() {
+  return (
+    <BasicPage page_title="Support" card_title="Support Me!">
+      <WCard>
+        <div className="p-4 space-y-4">
+          <p className="pt-6 text-lg md:text-2xl text-center text-werefox-blue-dark dark:text-werefox-blue">
+            I would sincerely appreciate if you would throw some financial
+            support my way!! 💙
+          </p>
+          <p className="text-lg md:text-2xl text-center text-werefox-blue-dark dark:text-werefox-blue">
+            You could support me through Patreon, Liberapay, or Ko-fi
+          </p>
+          <div className="w-full justify-center flex hover-werefox-pink">
+            <Link href="https://www.patreon.com/bePatron?u=16333959">
+              <a target="_blank">
+                <p className="rounded-lg pt-2 pb-2 pl-4 pr-4 w-full w-max-60 ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker text-lg text-center text-werefox-grey-darker dark:text-werefox-grey-lightest bg-werefox-blue dark:bg-werefox-blue-dark transition hover:bg-werefox-blue-light dark:hover:bg-werefox-blue-darker">
+                  <span>
+                    <img
+                      alt="Subscribe to Alexis' Patreon"
+                      src="/images/patreon_logo.png"
+                      className="inline-flex h-6"
+                    ></img>
+                  </span>{" "}
+                  Become a Patron!
+                </p>
+              </a>
+            </Link>
+          </div>
+          <div className="w-full justify-center flex">
+            <Link href="https://liberapay.com/shadow8t4/donate">
+              <a
+                target="_blank"
+                className="rounded-lg ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker"
+              >
+                <img
+                  alt="Donate using Liberapay"
+                  src="/images/liberapay_donate.svg"
+                  className="inline-flex h-10 filter transition hover:brightness-125"
+                />
+              </a>
+            </Link>
+          </div>
+          <div className="pb-6 flex justify-center">
+            <div className="rounded-lg ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker overflow-auto">
+              <Iframe
+                className="rounded-lg w-96 min-w-96"
+                url="https://ko-fi.com/shadow8t4/?hidefeed=true&widget=true&embed=true&preview=true"
+                height="680"
+              ></Iframe>
+            </div>
+          </div>
+        </div>
+      </WCard>
+    </BasicPage>
+  );
+}

src/info/public/emoji/green_money.svg

@@ -0,0 +1 @@
+<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="1.5" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path clip-rule="evenodd" d="m8 11h8v7h-8z"/></clipPath><metadata/><path d="m0 0h32v32h-32z" fill="none"/><path d="m2 7h28v18h-28z" fill="none" stroke="#000" stroke-width="4"/><path d="m29 21h-26l-1 1v3h28v-3z" fill="#60ae33"/><path d="m2 7h28v15h-28z" fill="#80c95b"/><g fill="#5da436"><path d="m8.5 9.5c0-.828-.672-1.5-1.5-1.5h-2.5c-.398 0-.779.158-1.061.439-.281.282-.439.663-.439 1.061 0 .828.672 1.5 1.5 1.5h2.5c.828 0 1.5-.672 1.5-1.5z"/><path d="m8.5 19.5c0-.828-.672-1.5-1.5-1.5h-2.5c-.398 0-.779.158-1.061.439-.281.282-.439.663-.439 1.061 0 .828.672 1.5 1.5 1.5h2.5c.828 0 1.5-.672 1.5-1.5z"/><path d="m29 9.5c0-.828-.672-1.5-1.5-1.5h-2.5c-.398 0-.779.158-1.061.439-.281.282-.439.663-.439 1.061 0 .828.672 1.5 1.5 1.5h2.5c.828 0 1.5-.672 1.5-1.5z"/><path d="m29 19.5c0-.828-.672-1.5-1.5-1.5h-2.5c-.398 0-.779.158-1.061.439-.281.282-.439.663-.439 1.061 0 .828.672 1.5 1.5 1.5h2.5c.828 0 1.5-.672 1.5-1.5z"/><path d="m21 14c0-.552-.448-1-1-1s-1 .448-1 1v1c0 .552.448 1 1 1s1-.448 1-1c0-.322 0-.678 0-1z"/><path d="m24 14c0-.552-.448-1-1-1s-1 .448-1 1v1c0 .552.448 1 1 1s1-.448 1-1c0-.322 0-.678 0-1z"/></g><path d="m8 11h8v7h-8z" fill="none"/><g clip-path="url(#a)" fill="#fff"><path d="m16 14h-8v-1h8z"/><path d="m16 16h-8v-1h8z"/><path d="m15 10.335v7.665h-1v-4.5l-1.771 4.25h-.458l-1.771-4.25v4.5h-1v-7.665l.706-.141 2.294 5.506 2.294-5.506z"/></g><path d="m27 20h-22v-11h22zm-21-10v9h20v-9z" fill="#5da436"/><path d="m20 22-1-1h-6l-1 1v3h8z" fill="#d9d9d9"/><path d="m12 7h8v15h-8z" fill="#fff"/></svg>

src/info/public/images/liberapay_donate.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="83" height="30"><rect id="back" fill="#f6c915" x="1" y=".5" width="82" height="29" rx="4"/><svg viewBox="0 0 80 80" height="16" width="16" x="7" y="7"><g transform="translate(-78.37-208.06)" fill="#1a171b"><path d="m104.28 271.1c-3.571 0-6.373-.466-8.41-1.396-2.037-.93-3.495-2.199-4.375-3.809-.88-1.609-1.308-3.457-1.282-5.544.025-2.086.313-4.311.868-6.675l9.579-40.05 11.69-1.81-10.484 43.44c-.202.905-.314 1.735-.339 2.489-.026.754.113 1.421.415 1.999.302.579.817 1.044 1.546 1.395.729.353 1.747.579 3.055.679l-2.263 9.278"/><path d="m146.52 246.14c0 3.671-.604 7.03-1.811 10.07-1.207 3.043-2.879 5.669-5.01 7.881-2.138 2.213-4.702 3.935-7.693 5.167-2.992 1.231-6.248 1.848-9.767 1.848-1.71 0-3.42-.151-5.129-.453l-3.394 13.651h-11.162l12.52-52.19c2.01-.603 4.311-1.143 6.901-1.622 2.589-.477 5.393-.716 8.41-.716 2.815 0 5.242.428 7.278 1.282 2.037.855 3.708 2.024 5.02 3.507 1.307 1.484 2.274 3.219 2.904 5.205.627 1.987.942 4.11.942 6.373m-27.378 15.461c.854.202 1.91.302 3.167.302 1.961 0 3.746-.364 5.355-1.094 1.609-.728 2.979-1.747 4.111-3.055 1.131-1.307 2.01-2.877 2.64-4.714.628-1.835.943-3.858.943-6.071 0-2.161-.479-3.998-1.433-5.506-.956-1.508-2.615-2.263-4.978-2.263-1.61 0-3.118.151-4.525.453l-5.28 21.948"/></g></svg><text fill="#1a171b" text-anchor="middle" font-family="Helvetica Neue,Helvetica,Arial,sans-serif" font-weight="700" font-size="14" x="50" y="20">Donate</text></svg>

src/info/tailwind.config.js

@@ -8,10 +8,11 @@ module.exports = {
       },
       colors: {
         "werefox-blue": {
+          light: "#94C2FF",
           DEFAULT: "#75B1FF",
           dark: "#0052B8",
-          darker: "#0052B8",
+          darker: "#00377A",
-          darkest: "#0052B8",
+          darkest: "#00326B",
         },
         "werefox-pink": {
           DEFAULT: "#FF84CA",
@@ -43,7 +44,9 @@ module.exports = {
     },
   },
   variants: {
-    extend: {},
+    extend: {
+      brightness: ["hover", "dark"],
+    },
   },
   plugins: [],
 };