three steps!

2026-01-09 12:27:59 -05:00 · 2022-03-19 16:57:52 -05:00
parent 4b566e1c59
commit 49359391fc
12 changed files with 564 additions and 30 deletions
--- a/components/DonationSteps.tsx
+++ b/components/DonationSteps.tsx
@@ -0,0 +1,96 @@
+import { useState } from "react";
+import Pay from "./Pay";
+
+const DonationSteps = () => {
+  const [step, setStep] = useState(1);
+
+  // STEP 1
+  const [deductable, setDeductable] = useState("yes");
+
+  const radioHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setDeductable(event.target.value);
+  };
+
+  function handleStep1() {
+    setStep(2);
+  }
+
+  // STEP 2
+  function handleStep2() {
+    setStep(3);
+  }
+
+  // STEP 3
+
+  switch (step) {
+    case 1:
+      return (
+        <section>
+          <form className="flex flex-col space-y-2" onSubmit={handleStep1}>
+            <h2>Do you want this donation as tax deductable?</h2>
+            <div className="flex space-x-4">
+              <label>
+                <input
+                  type="radio"
+                  id="yes"
+                  name="deductable"
+                  value="yes"
+                  onChange={radioHandler}
+                  defaultChecked={true}
+                />
+                Yes
+              </label>
+              <label>
+                <input
+                  type="radio"
+                  id="no"
+                  value="no"
+                  name="deductable"
+                  onChange={radioHandler}
+                />
+                No
+              </label>
+            </div>
+            <input
+              type="text"
+              placeholder={`Email address (${
+                deductable === "yes" ? "required" : "optional"
+              })`}
+              required={deductable === "yes"}
+            ></input>
+            <div className="h-4 w-4" />
+            <div className="justify-end flex space-x-4">
+              <button type="submit">Continue</button>
+            </div>
+          </form>
+        </section>
+      );
+    case 2:
+      return (
+        <section>
+          <form className="flex flex-col space-y-2" onSubmit={handleStep2}>
+            <h2>One-time donation amount</h2>
+            <input
+              type="number"
+              placeholder={`0.00`}
+              required={deductable === "yes"}
+            ></input>
+            <div className="h-4 w-4" />
+            <div className="justify-end flex space-x-4">
+              <button className="secondary" onClick={() => setStep(1)}>
+                Back
+              </button>
+              <button type="submit">Donate</button>
+            </div>
+          </form>
+        </section>
+      );
+    case 3:
+      return <Pay />;
+    // never forget the default case, otherwise VS code would be mad!
+    default:
+      return <p>DEFAULT</p>;
+  }
+};
+
+export default DonationSteps;
--- a/components/Pay.tsx
+++ b/components/Pay.tsx
@@ -0,0 +1,17 @@
+import { useState } from "react";
+import useSWR from "swr";
+import { fetchPostJSON } from "../utils/api-helpers";
+
+const Pay = ({ amount = 100.0 }) => {
+  //   const [stripeUrl, setStripeUrl] = useState("");
+  const [btcpayUrl, setBtcPayUrl] = useState("");
+
+  const { data: stripe } = useSWR(
+    ["/api/stripe_checkout", { amount }],
+    fetchPostJSON
+  );
+
+  return <p>{stripe && stripe.url}</p>;
+};
+
+export default Pay;
--- a/components/PaymentModal.tsx
+++ b/components/PaymentModal.tsx
@@ -0,0 +1,55 @@
+import { useState } from "react";
+import ReactModal from "react-modal";
+import Image from "next/image";
+import waffledog from "../public/waffledog.jpg";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faC, faClose } from "@fortawesome/free-solid-svg-icons";
+import DonationSteps from "./DonationSteps";
+
+type ModalProps = {
+  isOpen: boolean;
+  onRequestClose: () => void;
+};
+const PaymentModal: React.FC<ModalProps> = ({ isOpen, onRequestClose }) => {
+  return (
+    <ReactModal
+      isOpen={isOpen}
+      onRequestClose={onRequestClose}
+      className="p-4 bg-white shadow-xl overflow-y-scroll max-h-full"
+      overlayClassName="inset-0 fixed bg-[rgba(0,_0,_0,_0.75)] flex items-center justify-center"
+      appElement={
+        typeof window === "undefined"
+          ? undefined
+          : document?.getElementById("root") || undefined
+      }
+    >
+      <div className="flex justify-end">
+        <FontAwesomeIcon
+          icon={faClose}
+          className="w-[2rem] h-[2rem] hover:text-primary cursor-pointer"
+          onClick={onRequestClose}
+        />
+      </div>
+      <div className=" xl:flex">
+        <div className="flex flex-col items-center space-y-4 p-4">
+          <Image
+            alt="waffledog"
+            src={waffledog}
+            width={160}
+            height={160}
+            className="rounded-full"
+          />
+          <h2 className="font-bold">Double-spend problem</h2>
+        </div>
+        <div className="flex flex-col p-4 space-y-4">
+          <h2>You&apos;re contributing to:</h2>
+          <h1>Double-spend problem</h1>
+          <hr></hr>
+          <DonationSteps />
+        </div>
+      </div>
+    </ReactModal>
+  );
+};
+
+export default PaymentModal;
--- a/components/ProjectCard.tsx
+++ b/components/ProjectCard.tsx
@@ -0,0 +1,52 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import Image from "next/image";
+import waffledog from "../public/waffledog.jpg";
+
+import { faGithub } from "@fortawesome/free-brands-svg-icons";
+import { faTwitter } from "@fortawesome/free-brands-svg-icons";
+import Link from "next/link";
+const ProjectCard = () => {
+  return (
+    <figure className="shadow-md p-8 bg-white space-y-4">
+      <div className="flex flex-col items-center space-y-4">
+        <Image
+          alt="waffledog"
+          src={waffledog}
+          width={160}
+          height={160}
+          className="rounded-full"
+        />
+        <h2 className="font-bold">Double-spend problem</h2>
+      </div>
+      <figcaption className="space-y-4">
+        <p>
+          Bitcoin ipsum dolor sit amet. Digital signature outputs, pizza
+          hashrate money printer go brrrrr full node, timestamp server. Miner,
+          sats Merkle Tree proof-of-work hard fork UTXO wallet halvening.
+        </p>
+        <div className="flex justify-end"></div>
+        <div className="flex space-x-4">
+          <Link href="#" passHref>
+            <FontAwesomeIcon
+              icon={faGithub}
+              className="w-[2rem] h-[2rem] hover:text-primary cursor-pointer"
+            />
+          </Link>
+          <Link href="#" passHref>
+            <FontAwesomeIcon
+              icon={faTwitter}
+              className="w-[2rem] h-[2rem] hover:text-primary cursor-pointer"
+            />
+          </Link>
+        </div>
+        <div className="flex space-x-4 items-center justify-center pt-4">
+          {/* <button>Details</button> */}
+          <Link href="#">Details</Link>
+          <button className="bg-primary">Donate</button>
+        </div>
+      </figcaption>
+    </figure>
+  );
+};
+
+export default ProjectCard;
--- a/components/ProjectList.tsx
+++ b/components/ProjectList.tsx
@@ -0,0 +1,24 @@
+import Image from "next/image";
+import waffledog from "../public/waffledog.jpg";
+import ProjectCard from "./ProjectCard";
+const ProjectList = () => {
+  const projects = ["one", "two", "three", "four"];
+  return (
+    <section className="p-8 bg-gray-100">
+      <div className="flex justify-between items-center pb-8">
+        <h1>Projects</h1>
+        <a href="#">View All</a>
+      </div>
+      {/* <ul className="flex flex-col items-center xl:flex-row justify-center"> */}
+      <ul className="grid sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">
+        {projects.map((p, i) => (
+          <li key={i} className="">
+            <ProjectCard />
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+};
+
+export default ProjectList;
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,10 @@
      "name": "opensats",
      "version": "0.1.0",
      "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^6.1.0",
+        "@fortawesome/free-brands-svg-icons": "^6.1.0",
+        "@fortawesome/free-solid-svg-icons": "^6.1.0",
+        "@fortawesome/react-fontawesome": "^0.1.18",
        "@stripe/react-stripe-js": "^1.7.0",
        "@stripe/stripe-js": "^1.25.0",
        "micro": "^9.3.4",
@@ -15,12 +19,16 @@
        "next": "12.1.0",
        "react": "17.0.2",
        "react-dom": "17.0.2",
+        "react-modal": "^3.14.4",
        "stripe": "^8.210.0",
-        "swr": "^1.2.2"
+        "swr": "^1.2.2",
+        "wicg-inert": "^3.1.1"
      },
      "devDependencies": {
        "@types/node": "17.0.21",
        "@types/react": "17.0.40",
+        "@types/react-dom": "^17.0.14",
+        "@types/react-modal": "^3.13.1",
        "autoprefixer": "^10.4.4",
        "eslint": "8.11.0",
        "eslint-config-next": "12.1.0",
@@ -180,6 +188,63 @@
        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
      }
    },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.1.0.tgz",
+      "integrity": "sha512-lFIJ5opxOKG9q88xOsuJJAdRZ+2WRldsZwUR/7MJoOMUMhF/LkHUjwWACIEPTa5Wo6uTDHvGRIX+XutdN7zYxA==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.1.0.tgz",
+      "integrity": "sha512-racj+/EDnMZN0jcuHePOa+9kdHHOCpCAbBvVRnEi4G4DA5SWQiT/uXJ8WcfVEbLN51vPJjhukP4o+zH0cfYplg==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-brands-svg-icons": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.1.0.tgz",
+      "integrity": "sha512-9utHuoCL12LCpZqTphg+tPLZeK+qcOX6tjky1DWtRXFmRgm67BA692STRJ2CXGlDkXSqfRGId8WkvsKqFAgmAQ==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.1.0.tgz",
+      "integrity": "sha512-OOr0jRHl5d41RzBS3sZh5Z3HmdPjMr43PxxKlYeLtQxFSixPf4sJFVM12/rTepB2m0rVShI0vtjHQmzOTlBaXg==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/react-fontawesome": {
+      "version": "0.1.18",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.18.tgz",
+      "integrity": "sha512-RwLIB4TZw0M9gvy5u+TusAA0afbwM4JQIimNH/j3ygd6aIvYPQLqXMhC9ErY26J23rDPyDZldIfPq/HpTTJ/tQ==",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "react": ">=16.x"
+      }
+    },
    "node_modules/@humanwhocodes/config-array": {
      "version": "0.9.5",
      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz",
@@ -472,6 +537,24 @@
        "csstype": "^3.0.2"
      }
    },
+    "node_modules/@types/react-dom": {
+      "version": "17.0.14",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.14.tgz",
+      "integrity": "sha512-H03xwEP1oXmSfl3iobtmQ/2dHF5aBHr8aUMwyGZya6OW45G+xtdzmq6HkncefiBt5JU8DVyaWl/nWZbjZCnzAQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/react-modal": {
+      "version": "3.13.1",
+      "resolved": "https://registry.npmjs.org/@types/react-modal/-/react-modal-3.13.1.tgz",
+      "integrity": "sha512-iY/gPvTDIy6Z+37l+ibmrY+GTV4KQTHcCyR5FIytm182RQS69G5ps4PH2FxtC7bAQ2QRHXMevsBgck7IQruHNg==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
    "node_modules/@types/scheduler": {
      "version": "0.16.2",
      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
@@ -1685,6 +1768,11 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/exenv": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
+      "integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50="
+    },
    "node_modules/fast-deep-equal": {
      "version": "3.1.3",
      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -3117,6 +3205,29 @@
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
    },
+    "node_modules/react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
+    "node_modules/react-modal": {
+      "version": "3.14.4",
+      "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.14.4.tgz",
+      "integrity": "sha512-8surmulejafYCH9wfUmFyj4UfbSJwjcgbS9gf3oOItu4Hwd6ivJyVBETI0yHRhpJKCLZMUtnhzk76wXTsNL6Qg==",
+      "dependencies": {
+        "exenv": "^1.2.0",
+        "prop-types": "^15.7.2",
+        "react-lifecycles-compat": "^3.0.0",
+        "warning": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "peerDependencies": {
+        "react": "^0.14.0 || ^15.0.0 || ^16 || ^17",
+        "react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17"
+      }
+    },
    "node_modules/readdirp": {
      "version": "3.6.0",
      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -3649,6 +3760,14 @@
      "integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==",
      "dev": true
    },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
    "node_modules/which": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -3680,6 +3799,11 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/wicg-inert": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/wicg-inert/-/wicg-inert-3.1.1.tgz",
+      "integrity": "sha512-PhBaNh8ur9Xm4Ggy4umelwNIP6pPP1bv3EaWaKqfb/QNme2rdLjm7wIInvV4WhxVHhzA4Spgw9qNSqWtB/ca2A=="
+    },
    "node_modules/word-wrap": {
      "version": "1.2.3",
      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
@@ -3841,6 +3965,43 @@
        "strip-json-comments": "^3.1.1"
      }
    },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.1.0.tgz",
+      "integrity": "sha512-lFIJ5opxOKG9q88xOsuJJAdRZ+2WRldsZwUR/7MJoOMUMhF/LkHUjwWACIEPTa5Wo6uTDHvGRIX+XutdN7zYxA=="
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.1.0.tgz",
+      "integrity": "sha512-racj+/EDnMZN0jcuHePOa+9kdHHOCpCAbBvVRnEi4G4DA5SWQiT/uXJ8WcfVEbLN51vPJjhukP4o+zH0cfYplg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.1.0"
+      }
+    },
+    "@fortawesome/free-brands-svg-icons": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.1.0.tgz",
+      "integrity": "sha512-9utHuoCL12LCpZqTphg+tPLZeK+qcOX6tjky1DWtRXFmRgm67BA692STRJ2CXGlDkXSqfRGId8WkvsKqFAgmAQ==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.1.0"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.1.0.tgz",
+      "integrity": "sha512-OOr0jRHl5d41RzBS3sZh5Z3HmdPjMr43PxxKlYeLtQxFSixPf4sJFVM12/rTepB2m0rVShI0vtjHQmzOTlBaXg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.1.0"
+      }
+    },
+    "@fortawesome/react-fontawesome": {
+      "version": "0.1.18",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.18.tgz",
+      "integrity": "sha512-RwLIB4TZw0M9gvy5u+TusAA0afbwM4JQIimNH/j3ygd6aIvYPQLqXMhC9ErY26J23rDPyDZldIfPq/HpTTJ/tQ==",
+      "requires": {
+        "prop-types": "^15.8.1"
+      }
+    },
    "@humanwhocodes/config-array": {
      "version": "0.9.5",
      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz",
@@ -4017,6 +4178,24 @@
        "csstype": "^3.0.2"
      }
    },
+    "@types/react-dom": {
+      "version": "17.0.14",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.14.tgz",
+      "integrity": "sha512-H03xwEP1oXmSfl3iobtmQ/2dHF5aBHr8aUMwyGZya6OW45G+xtdzmq6HkncefiBt5JU8DVyaWl/nWZbjZCnzAQ==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
+    "@types/react-modal": {
+      "version": "3.13.1",
+      "resolved": "https://registry.npmjs.org/@types/react-modal/-/react-modal-3.13.1.tgz",
+      "integrity": "sha512-iY/gPvTDIy6Z+37l+ibmrY+GTV4KQTHcCyR5FIytm182RQS69G5ps4PH2FxtC7bAQ2QRHXMevsBgck7IQruHNg==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
    "@types/scheduler": {
      "version": "0.16.2",
      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
@@ -4892,6 +5071,11 @@
      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
      "dev": true
    },
+    "exenv": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
+      "integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50="
+    },
    "fast-deep-equal": {
      "version": "3.1.3",
      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -5899,6 +6083,22 @@
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
    },
+    "react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
+    "react-modal": {
+      "version": "3.14.4",
+      "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.14.4.tgz",
+      "integrity": "sha512-8surmulejafYCH9wfUmFyj4UfbSJwjcgbS9gf3oOItu4Hwd6ivJyVBETI0yHRhpJKCLZMUtnhzk76wXTsNL6Qg==",
+      "requires": {
+        "exenv": "^1.2.0",
+        "prop-types": "^15.7.2",
+        "react-lifecycles-compat": "^3.0.0",
+        "warning": "^4.0.3"
+      }
+    },
    "readdirp": {
      "version": "3.6.0",
      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -6266,6 +6466,14 @@
      "integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==",
      "dev": true
    },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
    "which": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -6288,6 +6496,11 @@
        "is-symbol": "^1.0.3"
      }
    },
+    "wicg-inert": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/wicg-inert/-/wicg-inert-3.1.1.tgz",
+      "integrity": "sha512-PhBaNh8ur9Xm4Ggy4umelwNIP6pPP1bv3EaWaKqfb/QNme2rdLjm7wIInvV4WhxVHhzA4Spgw9qNSqWtB/ca2A=="
+    },
    "word-wrap": {
      "version": "1.2.3",
      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
--- a/package.json
+++ b/package.json
@@ -9,6 +9,10 @@
    "lint": "next lint"
  },
  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.1.0",
+    "@fortawesome/free-brands-svg-icons": "^6.1.0",
+    "@fortawesome/free-solid-svg-icons": "^6.1.0",
+    "@fortawesome/react-fontawesome": "^0.1.18",
    "@stripe/react-stripe-js": "^1.7.0",
    "@stripe/stripe-js": "^1.25.0",
    "micro": "^9.3.4",
@@ -16,12 +20,16 @@
    "next": "12.1.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
+    "react-modal": "^3.14.4",
    "stripe": "^8.210.0",
-    "swr": "^1.2.2"
+    "swr": "^1.2.2",
+    "wicg-inert": "^3.1.1"
  },
  "devDependencies": {
    "@types/node": "17.0.21",
    "@types/react": "17.0.40",
+    "@types/react-dom": "^17.0.14",
+    "@types/react-modal": "^3.13.1",
    "autoprefixer": "^10.4.4",
    "eslint": "8.11.0",
    "eslint-config-next": "12.1.0",
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -4,34 +4,42 @@ import Image from "next/image";
 import { useState } from "react";
 import useSWR from "swr";
 import { fetchPostJSON } from "../utils/api-helpers";
+import logo from "../public/logo.png";
+import Link from "next/link";
+import ProjectList from "../components/ProjectList";
+import PaymentModal from "../components/PaymentModal";

 const Home: NextPage = () => {
  const [shouldFetch, setShouldFetch] = useState(false);
  const [data, setData] = useState(false);
-  const [stripeUrl, setStripeUrl] = useState("");
-  const [btcpayUrl, setBtcPayUrl] = useState("");

-  async function handleClick() {
-    // setShouldFetch(true);
-    // const { data, error } = useSWR(shouldFetch ? "/api/invoice" : null, fetchGetJSON);
-    // const res = await fetchGetJSON("/api/invoice");
-    const amount = 100.0;
-    try {
-      const stripe = await fetchPostJSON("/api/stripe_checkout", {
-        amount,
-      });
-      const btcpay = await fetchPostJSON("/api/btcpay", {
-        amount,
-      });
-      console.debug(stripe);
-      setStripeUrl(stripe.url);
-      setBtcPayUrl(btcpay.checkoutLink);
-      console.debug(btcpay);
-    } catch (e) {
-      console.error(e);
-    }
+  const [modalOpen, setModalOpen] = useState(false);
+
+  function closeModal() {
+    setModalOpen(false);
  }

+  // async function handleClick() {
+  //   // setShouldFetch(true);
+  //   // const { data, error } = useSWR(shouldFetch ? "/api/invoice" : null, fetchGetJSON);
+  //   // const res = await fetchGetJSON("/api/invoice");
+  //   const amount = 100.0;
+  //   try {
+  //     const stripe = await fetchPostJSON("/api/stripe_checkout", {
+  //       amount,
+  //     });
+  //     const btcpay = await fetchPostJSON("/api/btcpay", {
+  //       amount,
+  //     });
+  //     console.debug(stripe);
+  //     setStripeUrl(stripe.url);
+  //     setBtcPayUrl(btcpay.checkoutLink);
+  //     console.debug(btcpay);
+  //   } catch (e) {
+  //     console.error(e);
+  //   }
+  // }
+
  return (
    <div>
      <Head>
@@ -40,16 +48,51 @@ const Home: NextPage = () => {
        <link rel="icon" href="/favicon.ico" />
      </Head>

+      <header className="bg-white py-8 px-16 flex items-center justify-between">
+        <div className="space-y-4">
+          <Link href="/" passHref>
+            <Image alt="OpenSats logo" src={logo} width={132} height={20} />
+          </Link>
+          <nav>
+            <ul className="flex space-x-4">
+              <li>Projects</li>
+              <li>List Your Project</li>
+              <li>How It Works</li>
+              <li>About Us</li>
+              <li>Sponsors</li>
+            </ul>
+          </nav>
+        </div>
+
+        <div className="space-x-2">
+          <span>Developers: </span>
+          <button>Register</button>
+        </div>
+      </header>
      <main>
-        <h1>yooo</h1>
-        <button onClick={handleClick}>Heyo</button>
+        <section>
+          <div className="bg-hero-bloom p-8 space-y-8">
+            <h1 className="text-white">
+              Support contributors to Bitcoin and other free and open source
+              projects
+            </h1>
+            <button onClick={() => setModalOpen(true)}>
+              Donate to the General Fund
+            </button>
+          </div>
+        </section>
+        <ProjectList />
+        {/* <button onClick={handleClick}>Heyo</button>
        {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
        {stripeUrl && <a href={stripeUrl}>Stripe Checkout</a>}
        {btcpayUrl && <a href={btcpayUrl}>BTCPay Checkout</a>}
-        <p>testing 123</p>
+        <p>testing 123</p> */}
      </main>

-      <footer>footer</footer>
+      <footer className="py-8 px-16  flex">
+        <span>© Open Sats, 2022</span>
+      </footer>
+      <PaymentModal isOpen={modalOpen} onRequestClose={closeModal} />
    </div>
  );
 };
--- a/public/logo.png
+++ b/public/logo.png
--- a/public/waffledog.jpg
+++ b/public/waffledog.jpg
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -3,9 +3,27 @@
@tailwind utilities;

 h1 {
-  @apply text-2xl;
+  @apply text-4xl font-bold;
 }

-button {
+button,
+button[type="submit"] {
  @apply py-2 px-4 bg-black text-white rounded;
 }
+
+button.secondary {
+  @apply bg-white text-black border border-black;
+}
+
+a {
+  @apply font-bold underline underline-offset-2 hover:no-underline;
+}
+
+input[type="text"],
+input[type="number"] {
+  @apply border border-black p-2 invalid:border-red-500;
+}
+
+input[type="radio"] {
+  @apply mr-2;
+}
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,7 +4,15 @@ module.exports = {
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
-    extend: {},
+    extend: {
+      backgroundImage: {
+        "hero-bloom":
+          "radial-gradient(circle, #e95d1c 4%, #e93e1c 61%, #e91f1c 100%)",
+      },
+      colors: {
+        primary: "#EB4726",
+      },
+    },
  },
  plugins: [],
 };