diff --git a/apps/playground/src/components/card/card-title-desc-image.tsx b/apps/playground/src/components/card/card-title-desc-image.tsx index 8bf1e2c5b..5464d0d91 100644 --- 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 ( - {thumbnailHeroicon ? ( -
- {React.createElement(thumbnailHeroicon)} -
- ) : thumbnailNotioly ? ( -
- -
{title}
- - {title} - {title} -
- ) : ( - thumbnailImage && ( - {title} - ) - )} -

- {title} -

+
+ {thumbnailHeroicon ? ( +
+ {React.createElement(thumbnailHeroicon)} +
+ ) : thumbnailNotioly ? ( +
+ +
{title}
+ + {title} + {title} +
+ ) : ( + thumbnailImage && ( + {title} + ) + )} +

+ {title} +

+
{desc && (

{desc}

)} diff --git a/apps/playground/src/components/svgs/hydra.tsx b/apps/playground/src/components/svgs/hydra.tsx new file mode 100644 index 000000000..5b5347d1c --- /dev/null +++ b/apps/playground/src/components/svgs/hydra.tsx @@ -0,0 +1,31 @@ +export default function SvgHydra({ + className, + fill = "currentColor", +}: { + className?: string; + fill?: string; +}) { + return ( + + + + + + ); +} diff --git a/apps/playground/src/components/svgs/midnight.tsx b/apps/playground/src/components/svgs/midnight.tsx new file mode 100644 index 000000000..de98aea56 --- /dev/null +++ b/apps/playground/src/components/svgs/midnight.tsx @@ -0,0 +1,75 @@ +export default function SvgMidnight({ + className, + fill = "currentColor", +}: { + className?: string; + fill?: string; +}) { + return ( + + + + + + + + + + + + + + + + + ); +} diff --git a/apps/playground/src/data/links-hydra.ts b/apps/playground/src/data/links-hydra.ts new file mode 100644 index 000000000..4b07b1de8 --- /dev/null +++ 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 new file mode 100644 index 000000000..bf2795984 --- /dev/null +++ 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 index 62dc7c951..b65664f9c 100644 --- a/apps/playground/src/pages/home/features.tsx +++ b/apps/playground/src/pages/home/features.tsx @@ -1,6 +1,6 @@ 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() { @@ -8,11 +8,12 @@ export default function SectionFeatures() {
{linksApi.map((item, i) => ( - ))} @@ -20,32 +21,3 @@ export default function SectionFeatures() {
); } - -function Item({ - title, - desc, - icon, - link, -}: { - title: string; - desc: string; - link: string; - icon?: any; -}) { - return ( - -
- {icon && ( -
- {React.createElement(icon, { - className: - "text-primary-600 dark:text-primary-300 h-5 w-5 lg:h-6 lg:w-6", - })} -
- )} -

{title}

-

{desc}

-
- - ); -} diff --git a/apps/playground/src/pages/hydra/common.tsx b/apps/playground/src/pages/hydra/common.tsx new file mode 100644 index 000000000..cf1a3bdb6 --- /dev/null +++ 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 new file mode 100644 index 000000000..ac251b83a --- /dev/null +++ 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 ( + <> + + + + <> + + + + + + ); +}; + +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 new file mode 100644 index 000000000..2d544a822 --- /dev/null +++ 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 ( + + ); +} + +function Left() { + return ( + <> +

+ How to get started? +

+ +

Check your installation

+

+ More instructions here. +

+ + ); +} diff --git a/apps/playground/src/pages/hydra/index.tsx b/apps/playground/src/pages/hydra/index.tsx new file mode 100644 index 000000000..0a6172fb3 --- /dev/null +++ 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 ( + <> + + + + + } + 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; diff --git a/apps/playground/src/pages/midnight/common.tsx b/apps/playground/src/pages/midnight/common.tsx new file mode 100644 index 000000000..856248c3e --- /dev/null +++ b/apps/playground/src/pages/midnight/common.tsx @@ -0,0 +1,11 @@ +import { linksMidnight } from "~/data/links-midnight"; + +export function getPageLinks() { + const sidebarItems = linksMidnight.map((link) => ({ + label: link.title, + to: link.link, + })); + return sidebarItems; +} + +export default function Placeholder() {} diff --git a/apps/playground/src/pages/midnight/getting-started/index.tsx b/apps/playground/src/pages/midnight/getting-started/index.tsx new file mode 100644 index 000000000..65369b569 --- /dev/null +++ b/apps/playground/src/pages/midnight/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 { metaMidnightGettingStarted } from "~/data/links-midnight"; +import { getPageLinks } from "../common"; +import MidnightInstallationInstructions from "./install"; + +const ReactPage: NextPage = () => { + return ( + <> + + + + <> + + + + + + ); +}; + +export default ReactPage; diff --git a/apps/playground/src/pages/midnight/getting-started/install.tsx b/apps/playground/src/pages/midnight/getting-started/install.tsx new file mode 100644 index 000000000..2d544a822 --- /dev/null +++ b/apps/playground/src/pages/midnight/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 ( + + ); +} + +function Left() { + return ( + <> +

+ How to get started? +

+ +

Check your installation

+

+ More instructions here. +

+ + ); +} diff --git a/apps/playground/src/pages/midnight/index.tsx b/apps/playground/src/pages/midnight/index.tsx new file mode 100644 index 000000000..a8a9f0e43 --- /dev/null +++ b/apps/playground/src/pages/midnight/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 SvgMidnight from "~/components/svgs/midnight"; +import { linksMidnight, metaMidnight } from "~/data/links-midnight"; +import { useDarkmode } from "~/hooks/useDarkmode"; + +const ReactPage: NextPage = () => { + const isDark = useDarkmode((state) => state.isDark); + + return ( + <> + + + + + } + title="Empowering data protection apps" + description="Midnight introduces data protection to the blockchain, enabling organizations to build regulation-friendly applications that empower users to retain control over their own information. By leveraging zero-knowledge technology, Midnight provides a platform for innovative business models, revolutionizing how data is managed and protected." + links={linksMidnight} + /> + + ); +}; + +export default ReactPage;