Skip to content

Commit

Permalink
Refactor MPC wallet page
Browse files Browse the repository at this point in the history
  • Loading branch information
YeungKC committed Dec 21, 2023
1 parent 7f29cb6 commit c1d54e9
Show file tree
Hide file tree
Showing 2 changed files with 132 additions and 129 deletions.
130 changes: 130 additions & 0 deletions ssg/src/components/page/solutions/mpc-wallet/Header.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,130 @@
import React from "react"
import Translate, { translate } from "@docusaurus/Translate"
import SectionTitle from "../../../common/SectionTitle"
import clsx from "clsx"

const Item = ({
cover,
background,
title,
description,
className,
coverClassName,
}: {
cover: string
background: string
title: string
description: string
className?: string
coverClassName?: string
}) => {
return (
<div
className={clsx(
"relative flex flex-col gap-y-5 overflow-hidden bg-[#F2F2F2] px-5 pb-5 pt-10",
"sm:pl-15 sm:pt-12.5 sm:pb-6.5 sm:h-124.25 sm:justify-between sm:pr-10",
"md:h-88 md:px-10 md:py-5",
"lg:h-110 lg:pb-6.5 lg:p-10",
className,
)}
>
<img
src={
require("@site/static/img/page/solutions/mpc-wallet/" + background)
.default
}
className="fill op-0 sm:op-100"
/>
<img
src={
require("@site/static/img/page/solutions/mpc-wallet/" + cover).default
}
width={1098}
height={678}
className={clsx(
"z-1 w-full object-contain sm:order-last sm:self-end",
"sm:w-94",
"md:w-68.75 md:absolute md:bottom-3 md:right-3",
"lg:w-94 lg:bottom-6.5 lg:right-10",
coverClassName,
)}
/>
<div className="z-1">
<div className="text-5.5 sm:text-8">{title}</div>
<div className="mt-3 leading-[1.625]">{description}</div>
</div>
</div>
)
}

export const Header = () => (
<>
<SectionTitle
description={translate({
message:
"Using MPC technology for wallets offers several advantages, including eliminating the need to trust third parties, enhanced data privacy, increased accuracy, the removal of single points of failure, increased difficulty for hackers, and reduced reliance on cold storage.",
})}
>
<Translate>What are the benefits of MPC wallets?</Translate>
</SectionTitle>
<div className="grid gap-5 px-5 md:grid-cols-2 ">
<Item
cover="1.1.webp"
background="1.6.webp"
title={translate({ message: "Eliminate third-party trust" })}
description={translate({
message:
"Data can be shared in a distributed manner without any third parties",
})}
/>

<Item
cover="1.2.webp"
background="1.7.webp"
title={translate({ message: "Increased data privacy" })}
description={translate({
message:
"Data is encrypted at rest and in transit so no private information is revealed or compromised",
})}
/>

<Item
cover="1.3.webp"
background="1.8.webp"
title={translate({ message: "Reduced reliance on cold storage" })}
description={translate({
message:
"Users can only hold their assets online and no longer need cold-storage devices",
})}
className={clsx(
"!sm:h-160",
"!md:h-88 md:gap-x-18 md:col-span-full md:flex-row",
"!lg:h-110 lg:gap-x-25",
)}
coverClassName={clsx(
"!md:w-90 !md:static !md:self-center",
"!lg:w-122",
)}
/>

<Item
cover="1.4.webp"
background="1.9.webp"
title={translate({ message: "Removal of SPOF" })}
description={translate({
message: "Private keys are not stored in one single place",
})}
/>

<Item
cover="1.5.webp"
background="1.10.webp"
title={translate({ message: "Increased hacking difficulty" })}
description={translate({
message:
"A hacker would need to attack multiple parties across systems and locations",
})}
/>
</div>
</>
)
131 changes: 2 additions & 129 deletions ssg/src/pages/solutions/mpc-wallet/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,135 +3,8 @@ import "react-multi-carousel/lib/styles.css"
import React from "react"
import { GetStartedSection } from "../../../components/common/GetStartedSection"
import { MoreFeaturesSection } from "../../../components/common/MoreFeaturesSection"
import Translate, { translate } from "@docusaurus/Translate"
import SectionTitle from "../../../components/common/SectionTitle"
import clsx from "clsx"

const Item = ({
cover,
background,
title,
description,
className,
coverClassName,
}: {
cover: string
background: string
title: string
description: string
className?: string
coverClassName?: string
}) => {
return (
<div
className={clsx(
"relative flex flex-col gap-y-5 overflow-hidden bg-[#F2F2F2] px-5 pb-5 pt-10",
"sm:pl-15 sm:pt-12.5 sm:pb-6.5 sm:h-124.25 sm:justify-between sm:pr-10",
"md:h-88 md:px-10 md:py-5",
"lg:h-110 lg:pb-6.5 lg:p-10",
className,
)}
>
<img
src={
require("@site/static/img/page/solutions/mpc-wallet/" + background)
.default
}
className="fill op-0 sm:op-100"
/>
<img
src={
require("@site/static/img/page/solutions/mpc-wallet/" + cover).default
}
width={1098}
height={678}
className={clsx(
"z-1 w-full object-contain sm:order-last sm:self-end",
"sm:w-94",
"md:w-68.75 md:absolute md:bottom-3 md:right-3",
"lg:w-94 lg:bottom-6.5 lg:right-10",
coverClassName,
)}
/>
<div className="z-1">
<div className="text-5.5 sm:text-8">{title}</div>
<div className="mt-3 leading-[1.625]">{description}</div>
</div>
</div>
)
}

const Header = () => (
<>
<SectionTitle
description={translate({
message:
"Using MPC technology for wallets offers several advantages, including eliminating the need to trust third parties, enhanced data privacy, increased accuracy, the removal of single points of failure, increased difficulty for hackers, and reduced reliance on cold storage.",
})}
>
<Translate>What are the benefits of MPC wallets?</Translate>
</SectionTitle>
<div className="grid gap-5 px-5 md:grid-cols-2 ">
<Item
cover="1.1.webp"
background="1.6.webp"
title={translate({ message: "Eliminate third-party trust" })}
description={translate({
message:
"Data can be shared in a distributed manner without any third parties",
})}
/>

<Item
cover="1.2.webp"
background="1.7.webp"
title={translate({ message: "Increased data privacy" })}
description={translate({
message:
"Data is encrypted at rest and in transit so no private information is revealed or compromised",
})}
/>

<Item
cover="1.3.webp"
background="1.8.webp"
title={translate({ message: "Reduced reliance on cold storage" })}
description={translate({
message:
"Users can only hold their assets online and no longer need cold-storage devices",
})}
className={clsx(
"!sm:h-160",
"!md:h-88 md:gap-x-18 md:col-span-full md:flex-row",
"!lg:h-110 lg:gap-x-25",
)}
coverClassName={clsx(
"!md:w-90 !md:static !md:self-center",
"!lg:w-122",
)}
/>

<Item
cover="1.4.webp"
background="1.9.webp"
title={translate({ message: "Removal of SPOF" })}
description={translate({
message: "Private keys are not stored in one single place",
})}
/>

<Item
cover="1.5.webp"
background="1.10.webp"
title={translate({ message: "Increased hacking difficulty" })}
description={translate({
message:
"A hacker would need to attack multiple parties across systems and locations",
})}
/>
</div>
</>
)
import { translate } from "@docusaurus/Translate"
import { Header } from "../../../components/page/solutions/mpc-wallet/Header"

export default function Root() {
return (
Expand Down

0 comments on commit c1d54e9

Please sign in to comment.