Mainentance

.gitignore

@@ -33,3 +33,8 @@ yarn-error.log*
 
 # typescript
 *.tsbuildinfo
+
+# alternative package managers, until bun supports windows
+yarn.lock
+package-lock.json
+.pnpm-lock.yaml

.vscode/settings.json

@@ -4,7 +4,11 @@
   },
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
+  "eslint.runtime": "node",
+  "explorer.fileNesting.enabled": true,
+  "explorer.fileNesting.patterns": {
+    "style-kit.config.js": "eslint.config.js, prettier.config.js"
+  },
   "git.allowNoVerifyCommit": true,
-  "svg.preview.background": "black",
   "typescript.tsdk": "node_modules/typescript/lib"
 }

components/AboutPage/AboutCard.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+
+interface Props {
+  bodyText: string;
+  imgURL: string;
+  reverse?: boolean;
+  titleText: string;
+}
+
+export const AboutCard = ({
+  bodyText,
+  imgURL,
+  reverse = false,
+  titleText,
+}: Props) => {
+  if (!reverse) {
+    return (
+      <div className="flex w-full flex-col border">
+        <img alt="" className="aspect-video w-full object-cover" src={imgURL} />
+        <div className="flex w-full flex-col justify-around gap-5 p-5 md:my-10 md:flex-row md:items-center">
+          <h2 className="md:w-1/5">{titleText}</h2>
+          <p className="md:w-3/5">{bodyText}</p>
+        </div>
+      </div>
+    );
+  }
+  return (
+    <div className="flex w-full flex-col border">
+      <div className="flex w-full flex-col justify-around gap-5 p-5 md:my-10 md:flex-row md:items-center">
+        <h2 className="md:w-1/5">{titleText}</h2>
+        <p className="md:w-3/5">{bodyText}</p>
+      </div>
+      <img alt="" className="aspect-video w-full object-cover" src={imgURL} />
+    </div>
+  );
+};

components/AboutPage/AboutCardTall.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+
+interface Props {
+  bodyText: string;
+  imgURL: string;
+  reverse?: boolean;
+  titleText: string;
+}
+
+export const AboutCardTall = ({
+  bodyText,
+  imgURL,
+  reverse = false,
+  titleText,
+}: Props) => {
+  if (!reverse) {
+    return (
+      <div className="aspect-[1/2] w-full self-start border">
+        <img alt="" className="h-3/4 w-full object-cover" src={imgURL} />
+        <div className="flex w-full flex-col gap-5 p-5 md:px-12 md:py-10">
+          <h2>{titleText}</h2>
+          <p>{bodyText}</p>
+        </div>
+      </div>
+    );
+  }
+  return (
+    <div className="aspect-[1/2] w-full self-start border">
+      <div className="flex w-full flex-col gap-5 p-5 md:px-12 md:py-5">
+        <h2>{titleText}</h2>
+        <p>{bodyText}</p>
+      </div>
+      <img alt="" className="h-3/4 w-full object-cover" src={imgURL} />
+    </div>
+  );
+};

components/AboutPage/AboutCardWide.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+
+interface Props {
+  bodyText: string;
+  imgURL: string;
+  reverse?: boolean;
+  titleText: string;
+}
+
+export const AboutCardWide = ({
+  bodyText,
+  imgURL,
+  reverse = false,
+  titleText,
+}: Props) => {
+  if (!reverse) {
+    return (
+      <div className="flex aspect-auto h-fit w-full flex-col items-center overflow-hidden border md:h-[50svh] md:flex-row">
+        <img
+          alt=""
+          className="h-1/2 object-cover md:h-auto md:w-1/2"
+          src={imgURL}
+        />
+        <div className="h-1/2 w-full gap-10 p-5 md:h-auto md:w-1/2 md:p-20">
+          <h2 className="mb-5">{titleText}</h2>
+          <p>{bodyText}</p>
+        </div>
+      </div>
+    );
+  }
+  return (
+    <div className="flex aspect-auto h-1/2 w-full flex-col-reverse items-center overflow-hidden border md:h-[50svh] md:flex-row">
+      <div className="h-fit w-full gap-10 p-5 md:p-20">
+        <h2 className="mb-5">{titleText}</h2>
+        <p>{bodyText}</p>
+      </div>
+      <img
+        alt=""
+        className="h-1/2 object-cover md:h-auto md:w-1/2"
+        src={imgURL}
+      />
+    </div>
+  );
+};

components/BigButton.tsx

@@ -8,6 +8,7 @@ const BigButton = ({ children, ...props }: Props) => {
   return (
     <button
       className="flex w-full items-center justify-center bg-black px-2 py-4 text-3xl font-bold uppercase text-white hover:bg-hover-light dark:bg-white dark:text-black dark:hover:bg-hover-dark max-sm:text-xl"
+      type="button"
       {...props}
     >
       {children}

components/Button.tsx

@@ -1,13 +1,18 @@
 import React from "react";
+import { cn } from "utils/helpers";
 
 interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children: React.ReactNode;
 }
 
-const Button = ({ children, ...props }: Props) => {
+const Button = ({ children, className, ...props }: Props) => {
   return (
     <button
-      className="rounded-xs border-3 border-black bg-white px-4 py-2 font-bold text-black transition-all hover:bg-black hover:text-white dark:border-white dark:bg-black dark:text-white dark:hover:bg-white dark:hover:text-black"
+      className={cn(
+        "rounded-xs border-3 border-black bg-white px-4 py-2 font-bold text-black transition-all hover:bg-black hover:text-white dark:border-white dark:bg-black dark:text-white dark:hover:bg-white dark:hover:text-black",
+        className,
+      )}
+      type="button"
       {...props}
     >
       {children}

components/CustomWeb3Modal.tsx

@@ -1,9 +1,8 @@
 import { createWeb3Modal, useWeb3ModalTheme } from "@web3modal/wagmi/react";
+import { useTheme } from "contexts/ThemeProvider";
 import React, { useEffect } from "react";
-import { useTheme } from "styled-components";
-import { WagmiProvider } from "wagmi";
-
 import { wagmiConfig } from "services/wagmi";
+import { WagmiProvider } from "wagmi";
 
 const projectId = process.env.NEXT_PUBLIC_W3M_PROJECT_ID;
 
@@ -21,7 +20,7 @@ const Web3Modal = ({
   children,
 }: {
   children: React.ReactNode;
-}): JSX.Element => {
+}): React.JSX.Element => {
   const { isDark } = useTheme();
   const { setThemeMode } = useWeb3ModalTheme();
 

components/Footer.tsx

@@ -1,6 +1,6 @@
 import { MdCopyright } from "react-icons/md";
 
-const Footer = (): JSX.Element => {
+const Footer = (): React.JSX.Element => {
   const year = new Date().getFullYear();
 
   return (

components/Generator.tsx

@@ -1,11 +1,9 @@
-import React from "react";
-
 interface Props {
   aspectRatio?: number;
   generatorUrl: string;
 }
 
-const Generator = ({ aspectRatio, generatorUrl }: Props): JSX.Element => (
+const Generator = ({ aspectRatio, generatorUrl }: Props): React.JSX.Element => (
   <div className="relative overflow-hidden pt-[100%]" style={{ aspectRatio }}>
     <iframe
       className="absolute left-0 top-0 size-full border-none"