update

ssg/src/components/common/HearFromOurCustomersSection.tsx

@@ -50,9 +50,7 @@ const Item = ({
   <div className="pl-16.5 pr-8.5 lg:pr-30 flex h-full flex-col justify-between gap-y-20 sm:pl-24 sm:pr-20 md:pr-16">
     <div className="text-lg font-normal leading-9 text-white">{content}</div>
     <div>
-      <div className=" text-xl font-medium leading-tight text-white">
-        {name}
-      </div>
+      <div className="text-xl font-medium leading-tight text-white">{name}</div>
       <div className="mt-4 text-base font-normal leading-none text-zinc-300">
         {title}
       </div>

ssg/src/components/page/confidence/DontWorrySection.tsx

@@ -19,10 +19,10 @@ const Item = ({
       className="sm:w-18 row-span-2 aspect-square w-12"
     />
 
-    <div className=" h-fit text-base font-medium leading-tight text-[#333]">
+    <div className="h-fit text-base font-medium leading-tight text-[#333]">
       {title}
     </div>
-    <div className=" text-opacity-66 text-sm font-normal leading-snug text-[#333]">
+    <div className="text-opacity-66 text-sm font-normal leading-snug text-[#333]">
       {description}
     </div>
   </div>

ssg/src/components/page/pricing/PlanSection.tsx

@@ -67,7 +67,7 @@ const Section = ({
 }) => (
   <div
     className={clsx(
-      " col-span-full gap-5 pt-8",
+      "col-span-full gap-5 pt-8",
       id === selected ? "grid!" : "hidden!",
     )}
   >

ssg/src/components/page/solutions/collaboration/Header.tsx

@@ -0,0 +1,52 @@
+import React from "react"
+import Translate, { translate } from "@docusaurus/Translate"
+import SectionTitle from "../../../common/SectionTitle"
+import replace from "../../../../helper/replace"
+
+export const Header = () => {
+  const keyword = translate({
+    message: "transactions signed",
+  })
+  return (
+    <>
+      <SectionTitle
+        description={
+          <Translate>
+            {
+              "Stop wrangling signers, squinting at addresses, and spending hours creating transactions. Start executing fast."
+            }
+          </Translate>
+        }
+      >
+        {replace(
+          translate(
+            {
+              message: "Get your multisig {keyword} and executed fast",
+            },
+            {
+              keyword,
+            },
+          ),
+          [
+            {
+              match: keyword,
+              replace(part) {
+                return <span className="text-blue-500">{part}</span>
+              },
+            },
+          ],
+        )}
+      </SectionTitle>
+
+      <img
+        src={
+          require("@site/static/img/page/solutions/collaboration/1.1.webp")
+            .default
+        }
+        width={331}
+        height={173}
+        className="mx-a pb-30 container px-5"
+      />
+    </>
+  )
+}

ssg/src/components/page/solutions/collaboration/MultiRoleCollaborationSection.tsx

@@ -0,0 +1,99 @@
+import React, { ReactNode } from "react"
+import Translate from "@docusaurus/Translate"
+import SectionTitle from "../../../common/SectionTitle"
+import Svg1 from "@site/static/img/page/solutions/collaboration/2.2.svg"
+import Svg2 from "@site/static/img/page/solutions/collaboration/2.3.svg"
+import Svg3 from "@site/static/img/page/solutions/collaboration/2.4.svg"
+import clsx from "clsx"
+
+const Item = ({
+  icon,
+  title,
+  description,
+}: {
+  icon: ReactNode
+  title: ReactNode
+  description: ReactNode
+}) => {
+  return (
+    <div
+      className={clsx(
+        "border-#D9D9D9 bg-#F2F2F2 bg-op-50 border px-5 pb-8 pt-10",
+        "lg:pb-22.5",
+      )}
+    >
+      {icon}
+      <div className="text-6 mt-11.5 mt-9 font-medium">{title}</div>
+      <div className="mt-5">{description}</div>
+    </div>
+  )
+}
+
+export const MultiRoleCollaborationSection = () => {
+  return (
+    <>
+      <SectionTitle
+        description={
+          <Translate>
+            {
+              "The establishment of multiple roles facilitates institutions to establish customisable workflows according to their needs, allowing them to work more efficiently, and support operation scaling. Creators will be able to create a segregation of duties by managing users and assigning permissions and roles."
+            }
+          </Translate>
+        }
+      >
+        <Translate>Multi-Role Collaboration</Translate>
+      </SectionTitle>
+      <img
+        src={
+          require("@site/static/img/page/solutions/collaboration/2.1.webp")
+            .default
+        }
+        width={335}
+        height={181}
+        className="mx-a container px-5"
+      />
+
+      <div
+        className={clsx(
+          "mx-a mt-15 pb-15 container grid gap-5 px-5",
+          "gap-5 lg:gap-12",
+          "sm:grid-cols-3",
+        )}
+      >
+        <Item
+          icon={<Svg1 />}
+          title={<Translate>Two-of-three custody</Translate>}
+          description={
+            <Translate>
+              {
+                "A total of three keyscontrol your vault, withtwo of those keysrequired to approve a spend."
+              }
+            </Translate>
+          }
+        />
+        <Item
+          icon={<Svg2 />}
+          title={<Translate>You hold two of your keys</Translate>}
+          description={
+            <Translate>
+              {
+                "With two keys, you're intotal control of yourbitcoin. Keep each key ina separate location."
+              }
+            </Translate>
+          }
+        />
+        <Item
+          icon={<Svg3 />}
+          title={<Translate>We secure arecovery key</Translate>}
+          description={
+            <Translate>
+              {
+                "With only one key, wecan't move your bitcoin,but we can collaborate tomove bitcoin if you lose akey."
+              }
+            </Translate>
+          }
+        />
+      </div>
+    </>
+  )
+}

ssg/src/components/page/solutions/collaboration/StepsSection.tsx

@@ -0,0 +1,89 @@
+import React from "react"
+import Translate, { translate } from "@docusaurus/Translate"
+import SectionTitle from "../../../common/SectionTitle"
+import clsx from "clsx"
+
+const Itme = ({
+  cover,
+  name,
+  content,
+}: {
+  cover: string
+  name: string
+  content: string
+}) => (
+  <div
+    className={clsx(
+      "gap-y-15 group grid items-center",
+      "sm:grid-cols-2",
+      "sm:gap-x-6.7 md:gap-x-13.3 gap-x-0 lg:gap-x-20",
+    )}
+  >
+    <img
+      src={
+        require("@site/static/img/page/solutions/collaboration/" + cover)
+          .default
+      }
+      width={335}
+      height={224}
+      className="w-full group-odd:order-last"
+    />
+
+    <div className="sm:space-y-9.7 md:space-y-12.3 lg:space-y-15 space-y-7">
+      <div
+        className={clsx(
+          "font-medium",
+          "text-5.5 sm:text-5.7 md:text-5.8 lg:text-6",
+        )}
+      >
+        {name}
+      </div>
+      <div
+        className={clsx(
+          "grid",
+          "sm:gap-y-8.3 md:gap-y-9.7 gap-y-7 lg:gap-y-11",
+        )}
+      >
+        <div>{content}</div>
+      </div>
+    </div>
+  </div>
+)
+
+export const StepsSection = () => (
+  <div
+    className={clsx("bg-#F2F2F2 mt-20", "pb-70 sm:pb-61.7 md:pb-53.3 lg:pb-45")}
+  >
+    <SectionTitle
+      description={
+        <Translate>
+          Quickly approve and execute your multi-signature transactions.
+        </Translate>
+      }
+    >
+      <Translate>Notification Service</Translate>
+    </SectionTitle>
+    <div className={clsx("mx-a space-y-30 container grid px-5")}>
+      <Itme
+        cover="3.1.webp"
+        name={translate({
+          message: "crafted Notifications",
+        })}
+        content={translate({
+          message:
+            "Login to Safe dashboard, create a Safe, be set as a co-signer, approve transactions, recover Safe, etc. All related people will receive notifications, and the content of the notifications is clear at a glance.",
+        })}
+      />
+      <Itme
+        cover="3.2.webp"
+        name={translate({
+          message: "Repeated Notifications",
+        })}
+        content={translate({
+          message:
+            "Repeated notifications will be sent automatically by Mixin Messenger and SMS bot until your transaction is executed, so you don't need to manually remind the co-signers.",
+        })}
+      />
+    </div>
+  </div>
+)

ssg/src/pages/solutions/buy-cryptocurrencies/index.tsx

@@ -11,7 +11,7 @@ export default function Root() {
   return (
     <Layout
       title={translate({
-        message: "MPC Wallets",
+        message: "Buy Cryptocurrencies",
       })}
     >
       <Header />

ssg/src/pages/solutions/collaboration/index.tsx

@@ -0,0 +1,23 @@
+import Layout from "@theme/Layout"
+import "react-multi-carousel/lib/styles.css"
+import React from "react"
+import { GetStartedSection } from "../../../components/common/GetStartedSection"
+import { translate } from "@docusaurus/Translate"
+import { Header } from "../../../components/page/solutions/collaboration/Header"
+import { MultiRoleCollaborationSection } from "../../../components/page/solutions/collaboration/MultiRoleCollaborationSection"
+import { StepsSection } from "../../../components/page/solutions/collaboration/StepsSection"
+
+export default function Root() {
+  return (
+    <Layout
+      title={translate({
+        message: "Collaboration",
+      })}
+    >
+      <Header />
+      <MultiRoleCollaborationSection />
+      <StepsSection />
+      <GetStartedSection />
+    </Layout>
+  )
+}

ssg/src/theme/Navbar/index.tsx

@@ -144,7 +144,7 @@ const MobileItem = (data: NavItemProps) => {
         </details>
 
         <div className="peer-open:children:border-op-100 grid grid-rows-[0fr] transition-all duration-300 peer-open:grid-rows-[1fr]">
-          <div className="border-op-0 overflow-hidden border-t border-[#F2F2F2]  transition-all duration-300">
+          <div className="border-op-0 border-#F2F2F2 overflow-hidden border-t  transition-all duration-300">
             {data.groups.map((data) => (
               <div key={data.label}>
                 <div className="px-6 pb-5 pt-8 text-xs font-normal uppercase text-[#333] text-opacity-70">
@@ -266,7 +266,7 @@ export default function Navbar({ dark }: { dark?: boolean }): JSX.Element {
 
             {
               label: translate({ message: "Collaboration" }),
-              to: "/solutions/Collaboration",
+              to: "/solutions/collaboration",
               description: translate({
                 message:
                   "Complete approval process and timely notification service, allowing the owner of the vault to safely and conveniently manage the funds together with the co-manager.",