update website

MeshJS · Dec 16, 2024 · 9837f0a · 9837f0a
1 parent 16525c1
commit 9837f0a
Show file tree

Hide file tree

Showing 14 changed files with 384 additions and 71 deletions.
diff --git a/apps/playground/src/components/card/card-title-desc-image.tsx b/apps/playground/src/components/card/card-title-desc-image.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import Image from "next/image";
-import Link from "~/components/link";
 
+import Link from "~/components/link";
 import Card from "./card";
 
 export default function CardTitleDescImage({
@@ -22,44 +22,46 @@ export default function CardTitleDescImage({
   return (
     <Link href={link}>
       <Card className="h-full cursor-pointer">
-        {thumbnailHeroicon ? (
-          <div className="w-16 dark:text-white">
-            {React.createElement(thumbnailHeroicon)}
-          </div>
-        ) : thumbnailNotioly ? (
-          <div className="relative h-40 w-full bg-white">
-            <span className="absolute right-0 top-0 flex h-full w-1/2 flex-col justify-center">
-              <div className="text-2xl font-black">{title}</div>
-            </span>
-            <Image
-              src="/logo-mesh/black/logo-mesh-black-64x64.png"
-              className="absolute bottom-2 right-2 h-8"
-              layout="fill"
-              objectFit="contain"
-              alt={title}
-            />
-            <Image
-              src={`/notioly/Main/${thumbnailNotioly}.svg`}
-              className="h-full"
-              layout="fill"
-              objectFit="contain"
-              alt={title}
-            />
-          </div>
-        ) : (
-          thumbnailImage && (
-            <Image
-              className="mb-5 rounded-lg object-contain h-48 w-full"
-              src={thumbnailImage}
-              alt={title}
-              width={640}
-              height={640}
-            />
-          )
-        )}
-        <h2 className="text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
-          {title}
-        </h2>
+        <div className="flex flex-row items-center gap-2">
+          {thumbnailHeroicon ? (
+            <div className="w-8 dark:text-white">
+              {React.createElement(thumbnailHeroicon)}
+            </div>
+          ) : thumbnailNotioly ? (
+            <div className="relative h-40 w-full bg-white">
+              <span className="absolute right-0 top-0 flex h-full w-1/2 flex-col justify-center">
+                <div className="text-2xl font-black">{title}</div>
+              </span>
+              <Image
+                src="/logo-mesh/black/logo-mesh-black-64x64.png"
+                className="absolute bottom-2 right-2 h-8"
+                layout="fill"
+                objectFit="contain"
+                alt={title}
+              />
+              <Image
+                src={`/notioly/Main/${thumbnailNotioly}.svg`}
+                className="h-full"
+                layout="fill"
+                objectFit="contain"
+                alt={title}
+              />
+            </div>
+          ) : (
+            thumbnailImage && (
+              <Image
+                className="mb-5 h-48 w-full rounded-lg object-contain"
+                src={thumbnailImage}
+                alt={title}
+                width={640}
+                height={640}
+              />
+            )
+          )}
+          <h2 className="text-xl font-bold tracking-tight text-gray-900 dark:text-white">
+            {title}
+          </h2>
+        </div>
         {desc && (
           <p className="font-light text-gray-500 dark:text-gray-400">{desc}</p>
         )}

diff --git a/apps/playground/src/components/svgs/hydra.tsx b/apps/playground/src/components/svgs/hydra.tsx
@@ -0,0 +1,31 @@
+export default function SvgHydra({
+  className,
+  fill = "currentColor",
+}: {
+  className?: string;
+  fill?: string;
+}) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="29"
+      height="29"
+      viewBox="0 0 29 29"
+      fill={fill}
+      className={className}
+    >
+      <path
+        d="M20.9294 16.3976C20.9294 16.3976 20.9358 15.3266 20.3616 14.1253C19.0297 11.3398 14.9511 6.74717 2.44965 8.86911L0 13.0703L2.54633 15.0556C4.06401 14.4519 14.2443 8.67912 20.9294 16.3974V16.3976ZM4.08846 10.8233L3.24446 12.1819L1.88586 11.3379L4.08846 10.8233Z"
+        fill="currentColor"
+      ></path>
+      <path
+        d="M20.5776 20.3707C20.4668 19.713 19.3421 17.1372 16.296 15.7499C13.2916 14.3817 8.6545 14.2215 2.01156 18.1487L1.30078 22.5083L4.03963 23.745C4.03963 23.745 12.8396 14.251 20.5778 20.3704L20.5776 20.3707ZM3.72907 20.8007L2.16445 20.4564L4.07336 19.2358L3.72935 20.8004L3.72907 20.8007Z"
+        fill="currentColor"
+      ></path>
+      <path
+        d="M24.8502 4.43443C23.7434 3.24952 22.3305 2.38107 20.8536 1.74477L22.5703 0H12.2523L5.80469 2.91929L7.20152 5.91558C16.105 5.48023 22.8094 9.08584 23.1751 15.9556C23.5638 23.2615 16.3385 27.8964 9.38191 26.5819C7.07645 26.1462 5.89041 25.6401 5.89041 25.6401C7.46317 27.0198 10.67 28.7297 14.5114 28.7789C22.2549 28.8775 28.6281 22.5603 28.7751 14.6779C28.8495 10.6999 27.3408 7.08194 24.8496 4.43472L24.8502 4.43443ZM12.2526 3.01822L10.9311 1.69671H13.5741L12.2526 3.01822Z"
+        fill="currentColor"
+      ></path>
+    </svg>
+  );
+}
diff --git a/apps/playground/src/components/svgs/midnight.tsx b/apps/playground/src/components/svgs/midnight.tsx
@@ -0,0 +1,75 @@
+export default function SvgMidnight({
+  className,
+  fill = "currentColor",
+}: {
+  className?: string;
+  fill?: string;
+}) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="116"
+      height="26"
+      viewBox="0 0 116 26"
+      fill={fill}
+      className={className}
+    >
+      <path
+        d="M12.5643 0C5.62539 0 0 5.62539 0 12.5643C0 19.5032 5.62539 25.1286 12.5643 25.1286C19.5032 25.1286 25.1286 19.5032 25.1286 12.5643C25.1286 5.62539 19.5032 0 12.5643 0ZM12.5643 22.8114C6.91398 22.8114 2.31711 18.2146 2.31711 12.5643C2.31711 6.91398 6.91325 2.31638 12.5643 2.31638C18.2153 2.31638 22.8114 6.91325 22.8114 12.5635C22.8114 18.2138 18.2146 22.8107 12.5643 22.8107V22.8114Z"
+        fill="currentColor"
+      ></path>
+      <path
+        d="M13.7437 11.3848H11.3849V13.7436H13.7437V11.3848Z"
+        fill="currentColor"
+      ></path>
+      <path
+        d="M13.7437 7.66113H11.3849V10.02H13.7437V7.66113Z"
+        fill="currentColor"
+      ></path>
+      <path
+        d="M13.7437 3.9375H11.3849V6.29637H13.7437V3.9375Z"
+        fill="currentColor"
+      ></path>
+      <path
+        d="M46.9137 7.55845C46.2463 7.20902 45.5013 7.03467 44.6786 7.03467C43.8559 7.03467 43.0838 7.21341 42.4091 7.57018C41.8531 7.86394 41.3857 8.25952 41.0033 8.75327C40.6502 8.24414 40.1997 7.84196 39.6503 7.54673C39.0137 7.20536 38.3075 7.03467 37.5317 7.03467C36.709 7.03467 35.9757 7.20902 35.3318 7.55845C34.9684 7.75552 34.6476 7.998 34.3655 8.2837V7.26689H31.4089V18.4876H34.3655V11.8528C34.3655 11.403 34.4666 11.0184 34.6681 10.7004C34.8695 10.3825 35.134 10.1378 35.46 9.96714C35.786 9.79645 36.1581 9.71147 36.5771 9.71147C37.1976 9.71147 37.7178 9.89754 38.1368 10.2704C38.5558 10.6426 38.7653 11.1707 38.7653 11.8535V18.4884H41.722V11.8535C41.722 11.4037 41.8231 11.0191 42.0245 10.7012C42.226 10.3832 42.4941 10.1386 42.8274 9.96787C43.1607 9.79718 43.5292 9.71221 43.9329 9.71221C44.538 9.71221 45.05 9.89828 45.4691 10.2712C45.8881 10.6433 46.0976 11.1715 46.0976 11.8542V18.4891H49.0777V11.3656C49.0777 10.4499 48.8836 9.67411 48.496 9.03751C48.1078 8.40164 47.5803 7.90862 46.9129 7.55919L46.9137 7.55845Z"
+        fill="currentColor"
+      ></path>
+      <path
+        d="M53.4196 7.26758H50.463V18.4883H53.4196V7.26758Z"
+        fill="currentColor"
+      ></path>
+      <path
+        d="M63.1642 8.28672C62.8646 7.9893 62.5196 7.73876 62.1284 7.53584C61.4845 7.20252 60.7512 7.0355 59.9285 7.0355C58.8882 7.0355 57.9571 7.29189 57.1352 7.80396C56.3125 8.31603 55.6642 9.0105 55.1917 9.88739C54.7177 10.7643 54.4818 11.7694 54.4818 12.9019C54.4818 14.0345 54.7185 14.9934 55.1917 15.8703C55.6649 16.7472 56.3125 17.4416 57.1352 17.9537C57.9579 18.4658 58.889 18.7222 59.9285 18.7222C60.735 18.7222 61.4683 18.5478 62.1284 18.1984C62.5328 17.9845 62.8851 17.7229 63.1877 17.416V18.4892H66.1209V1.68115H63.1642V8.28672ZM61.954 15.5787C61.5196 15.8424 61.0076 15.9743 60.4178 15.9743C59.8589 15.9743 59.3585 15.8461 58.9161 15.5904C58.4736 15.334 58.1286 14.9699 57.8802 14.496C57.6319 14.0227 57.5081 13.4836 57.5081 12.8785C57.5081 12.2734 57.6319 11.7188 57.8802 11.2602C58.1286 10.8024 58.4736 10.4375 58.9161 10.1658C59.3585 9.89471 59.8662 9.75845 60.4406 9.75845C61.0149 9.75845 61.5189 9.89471 61.954 10.1658C62.3885 10.4375 62.7298 10.8024 62.9782 11.2602C63.2265 11.7181 63.3503 12.2572 63.3503 12.8785C63.3503 13.4997 63.2258 14.0191 62.9782 14.485C62.7298 14.9509 62.3885 15.3157 61.954 15.5794V15.5787Z"
+        fill="currentColor"
+      ></path>
+      <path
+        d="M75.9747 7.65247C75.3227 7.2415 74.5857 7.03564 73.763 7.03564C72.9404 7.03564 72.1485 7.22172 71.4818 7.59459C71.1024 7.80631 70.7698 8.06637 70.4811 8.37038V7.2686H67.5245V18.4894H70.4811V12.0413C70.4811 11.5915 70.5822 11.1878 70.7837 10.8311C70.9851 10.4743 71.2613 10.1989 71.61 10.0047C71.9595 9.81061 72.3587 9.71392 72.8085 9.71392C73.4759 9.71392 74.0268 9.93149 74.4612 10.3659C74.8956 10.8003 75.1132 11.3593 75.1132 12.042V18.4901H78.0698V11.39C78.0698 10.645 77.8837 9.93881 77.5109 9.27144C77.1387 8.60407 76.6259 8.0649 75.9747 7.65393V7.65247Z"
+        fill="currentColor"
+      ></path>
+      <path
+        d="M82.3876 7.26758H79.4309V18.4883H82.3876V7.26758Z"
+        fill="currentColor"
+      ></path>
+      <path
+        d="M92.1351 8.25391C91.8465 7.97187 91.5103 7.73158 91.1227 7.53599C90.4627 7.20267 89.714 7.03564 88.8759 7.03564C87.8826 7.03564 86.9822 7.28032 86.1757 7.76895C85.3684 8.25757 84.7362 8.92128 84.2783 9.75933C83.8205 10.5974 83.5912 11.5439 83.5912 12.5995C83.5912 13.6551 83.8197 14.6053 84.2783 15.4514C84.7362 16.2975 85.3684 16.9685 86.1757 17.4652C86.9822 17.9619 87.8906 18.2102 88.8994 18.2102C89.7221 18.2102 90.459 18.044 91.111 17.7099C91.4912 17.515 91.8238 17.2755 92.1117 16.9934V17.9773C92.1117 18.8307 91.8362 19.5018 91.2854 19.9911C90.7345 20.4797 89.9704 20.7244 88.9924 20.7244C88.232 20.7244 87.58 20.5882 87.0372 20.3171C86.4936 20.0453 86.005 19.6453 85.5706 19.1179L83.685 21.0035C84.2278 21.7793 84.9538 22.3808 85.8614 22.8078C86.7691 23.2342 87.8284 23.4481 89.0393 23.4481C90.2502 23.4481 91.2627 23.2188 92.1703 22.7617C93.078 22.3038 93.7878 21.6636 94.3006 20.8409C94.8127 20.0182 95.0691 19.0564 95.0691 17.9546V7.26787H92.1359V8.25391H92.1351ZM90.9594 15.1247C90.5323 15.3657 90.0319 15.4858 89.4576 15.4858C88.8833 15.4858 88.4064 15.362 87.9793 15.1137C87.5522 14.8653 87.2189 14.524 86.9786 14.0895C86.7376 13.6551 86.6174 13.1665 86.6174 12.6229C86.6174 12.0486 86.7376 11.5483 86.9786 11.1212C87.2189 10.6948 87.5529 10.3571 87.9793 10.1088C88.4056 9.86043 88.9067 9.73663 89.481 9.73663C90.0554 9.73663 90.5323 9.86116 90.9594 10.1088C91.3857 10.3571 91.7161 10.6948 91.9491 11.1212C92.182 11.5483 92.2985 12.0486 92.2985 12.6229C92.2985 13.1973 92.182 13.6786 91.9491 14.113C91.7161 14.5474 91.3865 14.8851 90.9594 15.1254V15.1247Z"
+        fill="currentColor"
+      ></path>
+      <path
+        d="M104.791 7.58199C104.131 7.21717 103.375 7.03476 102.521 7.03476C101.668 7.03476 100.911 7.22084 100.252 7.59371C99.8864 7.8003 99.5656 8.0523 99.2857 8.34679V1.68115H96.3291V18.4885H99.2857V12.0404C99.2857 11.5906 99.3868 11.187 99.5883 10.8302C99.7897 10.4734 100.066 10.198 100.415 10.0039C100.764 9.80973 101.163 9.71303 101.613 9.71303C102.28 9.71303 102.831 9.93061 103.266 10.365C103.7 10.7994 103.918 11.3584 103.918 12.0411V18.4892H106.874V11.3891C106.874 10.5357 106.692 9.77896 106.327 9.11965C105.962 8.46034 105.45 7.94827 104.791 7.58346V7.58199Z"
+        fill="currentColor"
+      ></path>
+      <path
+        d="M116 7.26778H113.369V2.58887H110.413V7.26778H107.759V9.85228H110.413V18.4885H113.369V9.85228H116V7.26778Z"
+        fill="currentColor"
+      ></path>
+      <path
+        d="M51.9296 5.38202C52.8553 5.38202 53.6057 4.6316 53.6057 3.7059C53.6057 2.78021 52.8553 2.02979 51.9296 2.02979C51.0039 2.02979 50.2535 2.78021 50.2535 3.7059C50.2535 4.6316 51.0039 5.38202 51.9296 5.38202Z"
+        fill="currentColor"
+      ></path>
+      <path
+        d="M80.9092 5.38202C81.8349 5.38202 82.5854 4.6316 82.5854 3.7059C82.5854 2.78021 81.8349 2.02979 80.9092 2.02979C79.9835 2.02979 79.2331 2.78021 79.2331 3.7059C79.2331 4.6316 79.9835 5.38202 80.9092 5.38202Z"
+        fill="currentColor"
+      ></path>
+    </svg>
+  );
+}
diff --git a/apps/playground/src/data/links-hydra.ts b/apps/playground/src/data/links-hydra.ts
@@ -0,0 +1,16 @@
+import { MenuItem } from "~/types/menu-item";
+
+export const metaHydraGettingStarted = {
+  title: "Getting Started",
+  desc: "Setting up your system to work with Hydra",
+  link: "/hydra/getting-started",
+};
+
+export const linksHydra: MenuItem[] = [metaHydraGettingStarted];
+
+export const metaHydra: MenuItem = {
+  title: "Hydra",
+  desc: "Layer 2 scaling solution for Cardano",
+  link: "/hydra",
+  items: linksHydra,
+};
diff --git a/apps/playground/src/data/links-midnight.ts b/apps/playground/src/data/links-midnight.ts
@@ -0,0 +1,17 @@
+import { MenuItem } from "~/types/menu-item";
+
+export const metaMidnightGettingStarted = {
+  title: "Getting Started",
+  desc: "Setting up your system to work with Midnight",
+  link: "/midnight/getting-started",
+};
+
+export const linksMidnight: MenuItem[] = [metaMidnightGettingStarted];
+
+export const metaMidnight: MenuItem = {
+  title: "Midnight",
+  desc: "Leveraging zero-knowledge technology to enable data protection",
+  link: "/midnight",
+  items: linksMidnight,
+};
+
diff --git a/apps/playground/src/pages/home/features.tsx b/apps/playground/src/pages/home/features.tsx
@@ -1,51 +1,23 @@
 import React from "react";
 
-import Link from "~/components/link";
+import CardTitleDescImage from "~/components/card/card-title-desc-image";
 import { linksApi } from "~/data/links-api";
 
 export default function SectionFeatures() {
   return (
     <div className="mx-auto max-w-screen-xl px-4 py-8 sm:py-16 lg:px-6">
       <div className="space-y-8 md:grid md:grid-cols-2 md:gap-8 md:space-y-0 lg:grid-cols-3 xl:grid-cols-4 xl:gap-8">
         {linksApi.map((item, i) => (
-          <Item
+          <CardTitleDescImage
             title={item.title}
             desc={item.desc}
-            icon={item.icon}
             link={item.link}
+            thumbnailHeroicon={item.icon}
+            thumbnailImage={item.thumbnail}
             key={i}
           />
         ))}
       </div>
     </div>
   );
 }
-
-function Item({
-  title,
-  desc,
-  icon,
-  link,
-}: {
-  title: string;
-  desc: string;
-  link: string;
-  icon?: any;
-}) {
-  return (
-    <Link href={link}>
-      <div className="rounded bg-white p-6 shadow dark:bg-gray-800 h-52">
-        {icon && (
-          <div className="bg-primary-100 dark:bg-primary-900 mb-4 flex h-10 w-10 items-center justify-center rounded lg:h-12 lg:w-12">
-            {React.createElement(icon, {
-              className:
-                "text-primary-600 dark:text-primary-300 h-5 w-5 lg:h-6 lg:w-6",
-            })}
-          </div>
-        )}
-        <h3 className="mb-2 text-xl font-bold dark:text-white">{title}</h3>
-        <p className="font-light text-gray-500 dark:text-gray-400">{desc}</p>
-      </div>
-    </Link>
-  );
-}
diff --git a/apps/playground/src/pages/hydra/common.tsx b/apps/playground/src/pages/hydra/common.tsx
@@ -0,0 +1,11 @@
+import { linksHydra } from "~/data/links-hydra";
+
+export function getPageLinks() {
+  const sidebarItems = linksHydra.map((link) => ({
+    label: link.title,
+    to: link.link,
+  }));
+  return sidebarItems;
+}
+
+export default function Placeholder() {}
diff --git a/apps/playground/src/pages/hydra/getting-started/index.tsx b/apps/playground/src/pages/hydra/getting-started/index.tsx
@@ -0,0 +1,31 @@
+import type { NextPage } from "next";
+
+import SidebarFullwidth from "~/components/layouts/sidebar-fullwidth";
+import TitleIconDescriptionBody from "~/components/sections/title-icon-description-body";
+import Metatags from "~/components/site/metatags";
+import { metaHydraGettingStarted } from "~/data/links-hydra";
+import { getPageLinks } from "../common";
+import HydraInstallationInstructions from "./install";
+
+const ReactPage: NextPage = () => {
+  return (
+    <>
+      <Metatags
+        title={metaHydraGettingStarted.title}
+        description={metaHydraGettingStarted.desc}
+      />
+      <SidebarFullwidth sidebarItems={getPageLinks()}>
+        <TitleIconDescriptionBody
+          title={metaHydraGettingStarted.title}
+          description={metaHydraGettingStarted.desc}
+        >
+          <></>
+        </TitleIconDescriptionBody>
+
+        <HydraInstallationInstructions />
+      </SidebarFullwidth>
+    </>
+  );
+};
+
+export default ReactPage;
diff --git a/apps/playground/src/pages/hydra/getting-started/install.tsx b/apps/playground/src/pages/hydra/getting-started/install.tsx
@@ -0,0 +1,27 @@
+import TwoColumnsScroll from "~/components/sections/two-columns-scroll";
+import Codeblock from "~/components/text/codeblock";
+
+export default function MidnightInstallationInstructions() {
+  return (
+    <TwoColumnsScroll
+      sidebarTo="install"
+      title="Installation Instructions"
+      leftSection={Left()}
+    />
+  );
+}
+
+function Left() {
+  return (
+    <>
+      <p>
+        How to get started?
+      </p>
+      <Codeblock data={`$ do some cli`} />
+      <h3>Check your installation</h3>
+      <p>
+        More instructions here.
+      </p>
+    </>
+  );
+}
diff --git a/apps/playground/src/pages/hydra/index.tsx b/apps/playground/src/pages/hydra/index.tsx
@@ -0,0 +1,31 @@
+import type { NextPage } from "next";
+
+import HeroLogoTwoSectionsLinks from "~/components/sections/hero-logo-two-sections-links";
+import Metatags from "~/components/site/metatags";
+import SvgHydra from "~/components/svgs/hydra";
+import { linksHydra, metaHydra } from "~/data/links-hydra";
+import { useDarkmode } from "~/hooks/useDarkmode";
+
+const ReactPage: NextPage = () => {
+  const isDark = useDarkmode((state) => state.isDark);
+
+  return (
+    <>
+      <Metatags title={metaHydra.title} description={metaHydra.desc} />
+      <HeroLogoTwoSectionsLinks
+        logo={
+          <>
+            <SvgHydra
+              className={`mx-auto w-36 object-contain ${isDark ? "text-white" : "text-black"}`}
+            />
+          </>
+        }
+        title="Layer 2 scaling solution"
+        description="Scaling solution for Cardano that increases transaction throughput and ensures cost efficiency while maintaining rigorous security."
+        links={linksHydra}
+      />
+    </>
+  );
+};
+
+export default ReactPage;