Feature/sc 712/add safe note section

cms.data.js

@@ -325,4 +325,29 @@ export const infoBlockContent = {
   cta : `Do one good thing before you croak: invest in ${entityTitle}`,
   ctaHref : "#invest"
 
-}
+};
+export const safeTermsContent = {
+  title : "Offering Details",
+  subTitle : "Y-Combinator SAFE",
+  description :
+      "We use the standard Y-Combinator SAFE note and offer all three versions for your convenience. The below are priced to our optimality but present to add choice for your investment and portfolio requirements.",
+  safeNoteContent : [
+    {
+      safeTitle : "Cap",
+      href : "",
+      description : '"Standard", valuation cap only.',
+    },
+    {
+      safeTitle : "Discount",
+      href : "",
+      description :
+          "Discount applies at conversion during the Liquidity Event.",
+    },
+    {
+      safeTitle : "MFN",
+      href : "",
+      description : "No cap and no discount with MFN provision.",
+    },
+  ],
+  cta : 'Learn more about our business.',
+};

components/FactSnippetsHero.jsx

@@ -1,4 +1,4 @@
-import { signIn, signOut } from "next-auth/react";
+import { signIn } from "next-auth/react";
 
 export default function FactSnippetsHero({
   subTitle,

components/Hero.jsx

@@ -50,7 +50,7 @@ export default function Hero({
       </div>
       <a
         href="#why-invest"
-        className="block mt-8 lg:mt-12 mx-auto w-16 h-16 p-5 rounded-full bg-indigo-50 hover:bg-indigo-100"
+        className="animate-pulse block mt-8 lg:mt-12 mx-auto w-16 h-16 p-5 rounded-full bg-indigo-50 hover:bg-indigo-100"
       >
         <svg
           className="mx-auto text-indigo-500"

components/MarkdownWrapper.jsx

@@ -0,0 +1,6 @@
+/* eslint-disable react/no-children-prop */
+import ReactMarkdown from "react-markdown";
+
+export default function MarkdownWrapper({ id, content, className }) {
+  return <ReactMarkdown id={id} className={className} children={content} />;
+}

components/Modal.jsx

@@ -0,0 +1,83 @@
+import { Fragment, useState } from "react";
+import { Dialog, Transition } from "@headlessui/react";
+import { CheckIcon } from "@heroicons/react/outline";
+
+export default function Modal({ title, buttonText, setIsClicked, children }) {
+  const [open, setOpen] = useState(true);
+
+  return (
+    <Transition.Root show={open} as={Fragment}>
+      <Dialog
+        as="div"
+        className="fixed z-10 inset-0 overflow-y-auto"
+        onClose={() => {
+          setOpen(!open);
+          setIsClicked(true);
+        }}
+      >
+        <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+          <Transition.Child
+            as={Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <Dialog.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+          </Transition.Child>
+
+          {/* This element is to trick the browser into centering the modal contents. */}
+          <span
+            className="hidden sm:inline-block sm:align-middle sm:h-screen"
+            aria-hidden="true"
+          >
+            &#8203;
+          </span>
+          <Transition.Child
+            as={Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            enterTo="opacity-100 translate-y-0 sm:scale-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+            leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+          >
+            <div className="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full sm:p-6">
+              <div>
+                <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100">
+                  <CheckIcon
+                    className="h-6 w-6 text-green-600"
+                    aria-hidden="true"
+                  />
+                </div>
+                <div className="mt-3 text-center sm:mt-5">
+                  <Dialog.Title
+                    as="h3"
+                    className="text-lg leading-6 font-medium text-gray-900"
+                  >
+                    {title}
+                  </Dialog.Title>
+                  <div className="mt-2">{children}</div>
+                </div>
+              </div>
+              <div className="mt-5 sm:mt-6">
+                <button
+                  type="button"
+                  className="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:text-sm"
+                  onClick={() => {
+                    setOpen(false);
+                    setIsClicked(true);
+                  }}
+                >
+                  {buttonText || "Email me this SAFE note"}
+                </button>
+              </div>
+            </div>
+          </Transition.Child>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+}

components/SafeDiscount.jsx

@@ -0,0 +1,8 @@
+import MarkdownWrapper from "./MarkdownWrapper";
+import { discountSafe } from "../safe-note-content.js";
+
+export default function SafeDiscount() {
+  return (
+    <MarkdownWrapper id="safe-valuation-cap-content" content={discountSafe} />
+  );
+}

components/SafeMfn.jsx

@@ -0,0 +1,6 @@
+import MarkdownWrapper from "./MarkdownWrapper";
+import { mfnSafe } from "../safe-note-content.js";
+
+export default function SafeMfn() {
+  return <MarkdownWrapper id="safe-mfn-content" content={mfnSafe} />;
+}

components/SafeNote.jsx

@@ -0,0 +1,6 @@
+import { resolveSafeTypeToComponent } from "../lib/utils";
+
+export default function SafeNote({ safeType }) {
+  const Safe = resolveSafeTypeToComponent(safeType);
+  return <Safe />;
+}

components/SafeValCap.jsx

@@ -0,0 +1,11 @@
+import MarkdownWrapper from "./MarkdownWrapper";
+import { valuationCapSafe } from "../safe-note-content.js";
+
+export default function ValCap() {
+  return (
+    <MarkdownWrapper
+      id="safe-valuation-cap-content"
+      content={valuationCapSafe}
+    />
+  );
+}

components/Sections/InfoBlock.jsx

@@ -1,6 +1,6 @@
 export default function InfoBlock({ title, description, cta, ctaHref }) {
   return (
-    <section id="info-carousel" className="py-20 bg-indigo-500">
+    <section id="info-block" className="py-20 bg-indigo-500">
       <div className="container px-4 mx-auto">
         <div className="flex flex-wrap items-center">
           <div className="max-w-2xl mb-8 mx-auto text-center">

components/Sections/SafeTerms.jsx

@@ -0,0 +1,84 @@
+import { useState } from "react";
+
+import Modal from "../Modal";
+import SafeNote from "../SafeNote";
+
+export default function SafeTerms({
+  title,
+  subTitle,
+  description,
+  safeNoteContent,
+  cta,
+}) {
+  const [isClicked, setIsClicked] = useState(true);
+  const [safeType, setSafeType] = useState(null);
+  return (
+    <section
+      id="safe-terms"
+      className="bg-gradient-to-b from-white to-indigo-500 pt-4 lg:pt-8"
+    >
+      {isClicked ? (
+        <>
+          <div className="px-4 max-w-3xl mx-auto mb-12 lg:mb-16 text-center">
+            <span className="text-sm text-indigo-500 font-bold uppercase">
+              {subTitle}
+            </span>
+            <h2 className="mt-2 mb-4 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-bold font-heading">
+              {title}
+            </h2>
+            <p className="text-lg text-slate-800 leading-loose">
+              {description}
+            </p>
+          </div>
+          <div className="max-w-3xl grid md:grid-cols-3 gap-2 mx-auto my-10">
+            {safeNoteContent?.map((item, index) => (
+              <div className="group" key={`${index + 1}-safe-button`}>
+                <button
+                  className="block w-2/5 md:w-3/5 lg:w-4/5 mx-auto px-5 py-3 mb-3 md:mb-0 text-sm bg-indigo-500 group-hover:bg-indigo-600 text-white font-semibold border border-indigo-500 group-hover:border-indigo-600 rounded transition duration-200"
+                  onClick={() => {
+                    setIsClicked(!isClicked);
+                    setSafeType(item?.safeTitle);
+                  }}
+                >
+                  {" "}
+                  {item?.safeTitle}
+                </button>
+                <p className="mx-auto text-center text-white group-hover:font-semibold mb-6 mt-1 md:mb-0 mt-4 text-xs italic w-2/5 md:w-3/5 lg:w-4/5">
+                  {item?.description}
+                </p>
+              </div>
+            ))}
+          </div>
+          <div className="pb-8 lg:pb-12">
+            <div className="mt-8 lg:mt-12 text-center text-white mx-auto text-gray-600">
+              {cta}
+            </div>
+            <a
+              href="#fact-cards"
+              className="block mx-auto mt-6 lg:mt-8 w-16 h-16 p-5 rounded-full bg-indigo-50 hover:bg-indigo-100"
+            >
+              <svg
+                className="animate-pulse mx-auto text-indigo-500"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M19 9l-7 7-7-7"
+                />
+              </svg>
+            </a>
+          </div>
+        </>
+      ) : (
+        <Modal setIsClicked={setIsClicked}>
+          <SafeNote safeType={safeType} />
+        </Modal>
+      )}
+    </section>
+  );
+}

components/Sections/WhyInvest.jsx

@@ -31,6 +31,14 @@ export default function WhyInvest({
               })}
             </div>
           </div>
+          <div className="text-center mx-auto">
+            <a
+              className="inline-block px-5 py-3 md:mr-3 mb-3 md:mb-0 text-sm bg-indigo-500 hover:bg-indigo-600 text-white font-semibold border border-indigo-500 hover:border-indigo-600 rounded transition duration-200"
+              href="#safe-terms"
+            >
+              {cta}
+            </a>
+          </div>
         </div>
       </div>
     </section>

components/WhyInvestHero.jsx

@@ -11,12 +11,6 @@ export default function WhyInvestHero({ subTitle, title, description, cta }) {
         <p className="mb-8 text-base leading-relaxed lg:text-xl lg:leading-relaxed text-gray-500">
           {description}
         </p>
-        <a
-          className="inline-block px-5 py-3 md:mr-3 mb-3 md:mb-0 text-sm bg-indigo-500 hover:bg-indigo-600 text-white font-semibold border border-indigo-500 hover:border-indigo-600 rounded transition duration-200"
-          href="#"
-        >
-          {cta}
-        </a>
       </div>
     </div>
   );

lib/utils.js

@@ -3,6 +3,10 @@
 // import { useRef, useState, useEffect, MutableRefObject } from 'react';
 import jwtDecode from "jwt-decode";
 
+import SafeDiscount from '../components/SafeDiscount'
+import SafeMfn from '../components/SafeMfn';
+import SafeValCap from '../components/SafeValCap'
+
 export function classNames(...classes) {
   return classes.filter(Boolean).join(" ");
 }
@@ -15,8 +19,10 @@ export function classNames(...classes) {
  */
 const fetcher = async (uri, options) => {
   let fetchOptions = options;
-  if (typeof options !== "object") fetchOptions = {};
-  const response = await fetch(uri, fetchOptions); // TODO can we just send an undefined
+  if (typeof options !== "object")
+    fetchOptions = {};
+  const response =
+      await fetch(uri, fetchOptions); // TODO can we just send an undefined
   // param and avoid the options nonsense?
   return response.json();
 };
@@ -30,9 +36,27 @@ const fetcher = async (uri, options) => {
 function clientJwtDecode(token) {
   if (!token)
     throw new Error(
-      "Token must be defined or not null. Do better next time, thanks."
-    );
+        "Token must be defined or not null. Do better next time, thanks.");
   return jwtDecode(token); // Returns with the JwtPayload type
+};
+
+/**
+ * A simple resolver for the safe note type
+ *
+ * @param safeType string "Cap", "Discount", or "MFN"
+ * @returns React component
+ */
+function resolveSafeTypeToComponent(safeType) {
+  const lower = safeType.toLowerCase();
+  if (lower.includes('cap')) {
+    return SafeValCap;
+  }
+  if (lower.includes('discount')) {
+    return SafeDiscount;
+  }
+  if (lower.includes('mfn')) {
+    return SafeMfn;
+  }
+  return null;
 }
-// Fall back to default handling
-export { clientJwtDecode, fetcher };
+export {clientJwtDecode, fetcher, resolveSafeTypeToComponent};

package.json

@@ -13,9 +13,13 @@
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
+    "@headlessui/react": "^1.4.3",
+    "@heroicons/react": "^1.0.5",
     "@next-auth/prisma-adapter": "^1.0.1",
+    "@tailwindcss/typography": "^0.5.1",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
+    "@types/react": "^17.0.38",
     "autoprefixer": "^10.4.2",
     "eslint": "8.8.0",
     "eslint-config-next": "12.0.9",
@@ -29,6 +33,7 @@
     "nodemailer": "^6.7.2",
     "postcss": "^8.4.5",
     "prisma": "^3.8.1",
+    "react-markdown": "^6.0.0",
     "swr": "^1.2.0",
     "tailwindcss": "^3.0.18",
     "typescript": "^4.5.5",