Upgrade homepage

.github/workflows/alex.yaml

@@ -6,6 +6,8 @@ on:
 jobs:
   alex:
     runs-on: ubuntu-latest
+    permissions:
+      pull-requests: write
     steps:
       - uses: actions/checkout@v3
       - uses: reviewdog/action-alex@8ffbae4a38ecf138503f7b9ea5cd2765ddde022f

_components/AcademicIcon.jsx

@@ -0,0 +1,17 @@
+function AcademicIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      className="tw-w-6 tw-h-6 tw-stroke-lime-500 tw-mr-1"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5"
+      />
+    </svg>
+  );
+}

_components/Benefits.jsx

@@ -0,0 +1,78 @@
+import ShellIcon from "./ShellIcon";
+import CommunityIcon from "./CommunityIcon";
+import DocumentCheckIcon from "./DocumentCheckIcon";
+import CheckIcon from "./CheckIcon";
+import ChatBubbleIcon from "./ChatBubbleIcon";
+import RocketIcon from "./RocketIcon";
+const features = [
+  {
+    name: "Open Source",
+    description: "We make our work open and accessible, for anyone to verify.",
+    icon: ShellIcon,
+  },
+  {
+    name: "Lean and Agile",
+    description:
+      "We focus on clearly defined problems and deliver viable products.",
+    icon: RocketIcon,
+  },
+  {
+    name: "Documentation as Code",
+    description:
+      "Quality code requires quality documentation, so we regard docs as code.",
+    icon: DocumentCheckIcon,
+  },
+  {
+    name: "Co-creation",
+    description:
+      "Your suggestions help shape Epiverse - surfacing needs is encouraged.",
+    icon: ChatBubbleIcon,
+  },
+  {
+    name: "Social Impact",
+    description:
+      "We close access gaps and transfer our software into practice.",
+    icon: CommunityIcon,
+  },
+  {
+    name: "Quality control",
+    description:
+      "All our software gets community reviewed. We are in this together!",
+    icon: CheckIcon,
+  },
+];
+
+function Benefits() {
+  return (
+    <>
+      <div className="tw-py-12 sm:tw-py-16 tw-text-white">
+        <div className="tw-mx-auto tw-max-w-7xl tw-px-6 lg:tw-px-8">
+          <div className="tw-mx-auto tw-max-w-2xl sm:tw-text-center">
+            <h2 className="tw-mt-2 tw-text-3xl tw-font-bold tw-tracking-tight sm:tw-text-4xl">
+              How we work
+            </h2>
+            {/* <p className="tw-mt-6 tw-text-lg tw-leading-8">
+              Epiverse 
+            </p> */}
+          </div>
+        </div>
+        <div className="tw-mx-auto tw-mt-16 tw-max-w-7xl tw-px-6 sm:tw-mt-20 md:tw-mt-24 lg:tw-px-8">
+          <dl className="tw-mx-auto tw-grid tw-max-w-2xl tw-grid-cols-1 tw-gap-x-6 tw-gap-y-10 tw-text-base tw-leading-7 sm:tw-grid-cols-2 lg:tw-mx-0 lg:tw-max-w-none lg:tw-grid-cols-3 lg:tw-gap-x-8 lg:tw-gap-y-16">
+            {features.map((feature) => {
+              const Component = feature.icon;
+              return (
+                <div key={feature.name} className="tw-flex tw-flex-col">
+                  <dt className="tw-flex tw-font-semibold ">
+                    <Component aria-hidden="true" />
+                    {feature.name}
+                  </dt>{" "}
+                  <dd className="tw-inline">{feature.description}</dd>
+                </div>
+              );
+            })}
+          </dl>
+        </div>
+      </div>
+    </>
+  );
+}

_components/ChatBubbleIcon.jsx

@@ -0,0 +1,18 @@
+function ChatBubbleIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className="tw-w-6 tw-h-6 tw-stroke-lime-500 tw-mr-1"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155"
+      />
+    </svg>
+  );
+}

_components/CheckIcon.jsx

@@ -0,0 +1,17 @@
+function CheckIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      className="tw-w-6 tw-h-6 tw-stroke-lime-500 tw-mr-1"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M9 12.75 11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 0 1-1.043 3.296 3.745 3.745 0 0 1-3.296 1.043A3.745 3.745 0 0 1 12 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 0 1-3.296-1.043 3.745 3.745 0 0 1-1.043-3.296A3.745 3.745 0 0 1 3 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 0 1 1.043-3.296 3.746 3.746 0 0 1 3.296-1.043A3.746 3.746 0 0 1 12 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 0 1 3.296 1.043 3.746 3.746 0 0 1 1.043 3.296A3.745 3.745 0 0 1 21 12Z"
+      />
+    </svg>
+  );
+}

_components/CommunityIcon.jsx

@@ -0,0 +1,17 @@
+function CommunityIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      className="tw-w-6 tw-h-6 tw-stroke-lime-500 tw-mr-1"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z"
+      />
+    </svg>
+  );
+}

_components/Cta.jsx

@@ -0,0 +1,60 @@
+function Cta() {
+  return (
+    <div className="tw-relative tw-isolate tw-pt-14">
+      <div
+        className="tw-absolute tw-inset-x-0 -tw-top-40 -tw-z-10 tw-transform-gpu tw-overflow-hidden tw-blur-3xl sm:-tw-top-80"
+        aria-hidden="true"
+      >
+        <div
+          className="tw-relative tw-left-[calc(50%-11rem)] tw-aspect-[1155/678] tw-w-[36.125rem] -tw-translate-x-1/2 tw-rotate-[30deg] tw-bg-gradient-to-tr tw-from-[#1063A0] tw-to-[#deff00] tw-opacity-20 sm:tw-w-left-[calc(50%-30rem)] sm:tw-w-[72.1875rem] tw-rotate-180"
+          style={{
+            clipPath:
+              "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
+          }}
+        />
+      </div>
+      <div className="tw-px-6 tw-py-24 sm:tw-px-6 sm:tw-py-32 lg:tw-px-8">
+        <div className="tw-mx-auto tw-max-w-2xl tw-text-center">
+          <h2 className="tw-text-3xl tw-font-bold tw-tracking-tight tw-text-white sm:tw-text-4xl">
+            Want to help prepare for the next epidemic?
+          </h2>
+          <p className="tw-mx-auto tw-mt-6 tw-max-w-xl tw-text-lg tw-leading-8 tw-text-gray-300">
+            Find the right pathway for your entry into Epiverse.
+          </p>
+          <div className="tw-mt-10 tw-flex tw-items-center tw-justify-center tw-gap-x-6">
+            <a
+              href="./getting-started.html"
+              className="tw-rounded-md tw-bg-lime-500 tw-px-3.5 tw-py-2.5 tw-text-sm tw-font-semibold tw-text-black tw-shadow-sm hover:tw-bg-gray-100 focus-visible:tw-outline focus-visible:tw-outline-2 focus-visible:tw-outline-offset-2 focus-visible:tw-outline-white"
+            >
+              Use
+            </a>
+            <a
+              href="./learn.html"
+              className="tw-rounded-md tw-bg-lime-500 tw-px-3.5 tw-py-2.5 tw-text-sm tw-font-semibold tw-text-black tw-shadow-sm hover:tw-bg-gray-100 focus-visible:tw-outline focus-visible:tw-outline-2 focus-visible:tw-outline-offset-2 focus-visible:tw-outline-white"
+            >
+              Learn
+            </a>
+            <a
+              href="./get-involved.html"
+              className="tw-rounded-md tw-bg-lime-500 tw-px-3.5 tw-py-2.5 tw-text-sm tw-font-semibold tw-text-black tw-shadow-sm hover:tw-bg-gray-100 focus-visible:tw-outline focus-visible:tw-outline-2 focus-visible:tw-outline-offset-2 focus-visible:tw-outline-white"
+            >
+              Contribute
+            </a>
+          </div>
+        </div>
+      </div>
+      <div
+        className="tw-w-absolute tw-w-inset-x-0 tw-w-top-[calc(100%-13rem)] -tw-w-z-10 tw-w-transform-gpu tw-w-overflow-hidden tw-w-blur-3xl sm:tw-w-top-[calc(100%-30rem)]"
+        aria-hidden="true"
+      >
+        <div
+          className="tw-w-relative tw-w-left-[calc(50%+3rem)] tw-w-aspect-[1155/678] tw-w-[36.125rem] -tw-translate-x-1/2 tw-bg-gradient-to-tr tw-from-[#ff80b5] tw-to-[#9089fc] tw-opacity-20 sm:tw-w-left-[calc(50%+36rem)] sm:tw-w-[72.1875rem] tw-rotate-180"
+          style={{
+            clipPath:
+              "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
+          }}
+        />
+      </div>
+    </div>
+  );
+}

_components/DocumentCheckIcon.jsx

@@ -0,0 +1,18 @@
+function DocumentCheckIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className="tw-w-6 tw-h-6 tw-stroke-lime-500 tw-mr-1"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M10.125 2.25h-4.5c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125v-9M10.125 2.25h.375a9 9 0 0 1 9 9v.375M10.125 2.25A3.375 3.375 0 0 1 13.5 5.625v1.5c0 .621.504 1.125 1.125 1.125h1.5a3.375 3.375 0 0 1 3.375 3.375M9 15l2.25 2.25L15 12"
+      />
+    </svg>
+  );
+}

_components/Hero.jsx

@@ -0,0 +1,66 @@
+function Hero() {
+  return (
+    <div className="tw-relative tw-isolate tw-pt-14">
+      <div
+        className="tw-absolute tw-inset-x-0 -tw-top-40 -tw-z-10 tw-transform-gpu tw-overflow-hidden tw-blur-3xl sm:-tw-top-80"
+        aria-hidden="true"
+      >
+        <div
+          className="tw-relative tw-left-[calc(50%-11rem)] tw-aspect-[1155/678] tw-w-[36.125rem] -tw-translate-x-1/2 tw-rotate-[30deg] tw-bg-gradient-to-tr tw-from-[#1063A0] tw-to-[#deff00] tw-opacity-20 sm:tw-w-left-[calc(50%-30rem)] sm:tw-w-[72.1875rem]"
+          style={{
+            clipPath:
+              "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
+          }}
+        />
+      </div>
+      <div className="tw-py-24 sm:tw-py-32">
+        <div className="tw-mx-auto tw-max-w-7xl tw-px-6 lg:tw-px-8">
+          <div className="tw-mx-auto tw-max-w-2xl tw-text-center">
+            <h1 className="tw-text-4xl tw-font-bold tw-tracking-tight tw-text-white sm:tw-text-6xl">
+              Developing tools for the next epidemic
+            </h1>
+            <p className="tw-mt-6 tw-text-lg tw-leading-8 tw-text-gray-300">
+              Epiverse is a universe of epidemiological tools to respond to
+              outbreaks. From reading your data through estimating vaccine
+              efficacy, Epiverse provides robust tools so you can focus on the
+              results.
+            </p>
+            <div className="tw-mt-10 tw-flex tw-items-center tw-justify-center tw-gap-x-6">
+              <a
+                href="./getting-started.html"
+                className="tw-rounded-md tw-bg-lime-500 tw-px-3.5 tw-py-2.5 tw-text-sm tw-font-semibold tw-text-black tw-shadow-sm hover:tw-bg-lime-400 focus-visible:tw-outline focus-visible:tw-outline-2 focus-visible:tw-outline-offset-2 focus-visible:tw-outline-lime-400"
+              >
+                Get started
+              </a>
+              <a
+                href="https://join.slack.com/t/epiversetrace/shared_invite/zt-2dl52uahe-vH1AtHgYUV_IptVk84Tzrw"
+                className="tw-text-sm tw-font-semibold tw-leading-6 tw-text-white"
+              >
+                Join our chat <span aria-hidden="true">→</span>
+              </a>
+            </div>
+          </div>
+          <img
+            src="public/render1717079674378.gif"
+            alt="Terminal recording introducing Epiverse"
+            width={2432}
+            height={1442}
+            className="tw-mt-16 tw-rounded-md tw-bg-white/5 tw-shadow-w-2xl tw-ring-1 tw-ring-white/10 sm:tw-mt-24"
+          />
+        </div>
+      </div>
+      <div
+        className="tw-w-absolute tw-w-inset-x-0 tw-w-top-[calc(100%-13rem)] -tw-w-z-10 tw-w-transform-gpu tw-w-overflow-hidden tw-w-blur-3xl sm:tw-w-top-[calc(100%-30rem)]"
+        aria-hidden="true"
+      >
+        <div
+          className="tw-w-relative tw-w-left-[calc(50%+3rem)] tw-w-aspect-[1155/678] tw-w-[36.125rem] -tw-translate-x-1/2 tw-bg-gradient-to-tr tw-from-[#ff80b5] tw-to-[#9089fc] tw-opacity-20 sm:tw-w-left-[calc(50%+36rem)] sm:tw-w-[72.1875rem]"
+          style={{
+            clipPath:
+              "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
+          }}
+        />
+      </div>
+    </div>
+  );
+}

_components/LogoCloud.jsx

@@ -0,0 +1,49 @@
+function LogoCloud() {
+  return (
+    <div className="tw-pb-24 sm:tw-pb-32">
+      <div className="tw-mx-auto tw-max-w-7xl tw-px-6 lg:tw-px-8">
+        <h2 className="tw-text-white/80 tw-text-center tw-w-full tw-font-bold tw-text-xl">
+          Partners
+        </h2>
+        <div className="-tw-mx-6 tw-grid tw-grid-cols-2 tw-gap-0.5 tw-overflow-hidden sm:tw-mx-0 sm:tw-rounded-2xl md:tw-grid-cols-4">
+          <div className="tw-flex tw-items-center tw-justify-center tw-bg-white/5 tw-p-6 sm:tw-p-10">
+            <img
+              className="tw-max-h-16 tw-w-full tw-object-contain tw-invert"
+              src="public/LogoDataDotOrg.png"
+              alt="DataDotOrg"
+              width={158}
+              height={48}
+            />
+          </div>
+          <div className="tw-flex tw-items-center tw-justify-center tw-bg-white/5 tw-p-6 sm:tw-p-10">
+            <img
+              className="tw-max-h-16 tw-w-full tw-object-contain tw-invert"
+              src="https://data.org/wp-content/uploads/2021/10/lshtm-logo-975x468.png"
+              alt="London School of Hygiene and Tropical Medicine"
+              width={158}
+              height={48}
+            />
+          </div>
+          <div className="tw-flex tw-items-center tw-justify-center tw-bg-white/5 tw-p-6 sm:tw-p-10">
+            <img
+              className="tw-max-h-16 tw-w-full tw-object-contain"
+              src="public/logo-andes.svg"
+              alt="Universidad de los Andes (Uniandes)"
+              width={158}
+              height={48}
+            />
+          </div>
+          <div className="tw-bg-white/5 tw-p-6 sm:tw-p-10">
+            <img
+              className="tw-max-h-24 tw-w-full tw-object-contain tw-invert"
+              src="public/Javeriana.png"
+              alt="Pontificia Universidad Javeriana"
+              width={158}
+              height={48}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}