Msgport home page (#16)

* fix style for 2560 reference * change scroll color * add taracking and to texts * fix button style * add Resources * add scroll logo animation * add desc and title * fix title phrase * fix the Favicon placement * lowcase the filename of favicon * fix text line breake * fix typos related to darwinia * format * add links and fix Resources component for 1024 1920 and 2560 * Update `Learn` and `Build` links * fix resources data * fix learn and build link in header * add hover for Buttons * fix hover effect * add link for try it now --------- Co-authored-by: fisher <[email protected]> Co-authored-by: bear <[email protected]>
ringecosystem · May 13, 2024 · d8e1fc1 · d8e1fc1
1 parent 7713bf0
commit d8e1fc1
Show file tree

Hide file tree

Showing 27 changed files with 311 additions and 121 deletions.
diff --git a/index.html b/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Programmable Cross-Chain Messaging Port" />
     <title>Msgport</title>
   </head>
   <body>

diff --git a/FAVICON.svg → public/favicon.svg b/FAVICON.svg → public/favicon.svg
diff --git a/public/images/DeveloperAssistance.png b/public/images/DeveloperAssistance.png
diff --git a/public/images/MessagesExplorer.png b/public/images/MessagesExplorer.png
diff --git a/public/images/MsgportGitHub.png b/public/images/MsgportGitHub.png
diff --git a/public/images/TechnicalDocs.png b/public/images/TechnicalDocs.png
diff --git a/public/images/arbitrum.png b/public/images/arbitrum.png
diff --git a/public/images/darwinia.png b/public/images/darwinia.png
diff --git a/public/images/ethereum.png b/public/images/ethereum.png
diff --git a/src/App.tsx b/src/App.tsx
@@ -5,15 +5,19 @@ import MsgportInterface from "./components/MsgportInterface";
 import EnablingDirverse from "./components/EnablingDiverse";
 import Governed from "./components/Governed";
 import Footer from "./components/Footer";
+import Resources from "./components/Resources";
+import RollingLogos from "./components/RollingLogos";
 
 function App() {
   return (
     <>
       <Header />
       <Hero />
+      <RollingLogos />
       <ChainFree />
       <MsgportInterface />
       <EnablingDirverse />
+      <Resources />
       <Governed />
       <Footer />
     </>

diff --git a/src/components/ChainFree.tsx b/src/components/ChainFree.tsx
@@ -6,7 +6,7 @@ import HowItWorks from "./HowItWorks";
 
 const ChainFree: React.FC = () => {
   return (
-    <Container classes="mt-[12.5rem] lg:mt-[6.25rem] lg:min-h-[120rem] relative relative">
+    <Container classes="mt-[6.25rem] lg:mt-[6.25rem] lg:min-h-[120rem] relative relative">
       <div className="flex-col lg:flex-row flex items-center gap-[1.875rem] lg:gap-[3.125rem] 3xl:gap-[6.25rem] lg:flex-wrap">
         {data.map((item) => (
           <ChainFreeItems key={item.id} data={item} />

diff --git a/src/components/ChainFreeItems.tsx b/src/components/ChainFreeItems.tsx
@@ -14,21 +14,21 @@ interface ChainFreeItemsProps {
 
 const ChainFreeItems: React.FC<ChainFreeItemsProps> = ({ data }) => {
   return (
-    <div className="lg:w-[27.313rem] 2xl:w-[38rem] 3xl:w-[40.625rem] 2xl:h-[17.688rem] 4xl:w-[50.625rem]">
+    <div className="lg:w-[27.313rem] 2xl:w-[38rem] 3xl:w-[40.625rem] 2xl:h-[17.688rem] 4xl:w-[50.625rem] 5xl:w-[70.625rem]">
       <img
         src={data.icon}
         alt={data.greenTitle}
         className="w-[3.75rem] h-[3.75rem]"
       />
       <div className="2xl:flex items-center border-b border-b-[#6F6F6F] lg:mb-[1.25rem] gap-[0.625rem] mt-[1.25rem] lg:mt-0">
-        <h3 className="text-[1.875rem] leading-[2.375rem] lg:text-[2.875rem] lg:leading-[3.625rem] font-[700] text-[#00D448] lg:py-[1.25rem]">
+        <h3 className="text-[1.875rem] leading-[2.375rem] lg:text-[2.875rem] lg:leading-[3.625rem] font-[700] text-[#00D448] lg:py-[1.25rem] tracking-[0.125rem]">
           {data.greenTitle}
         </h3>
-        <h4 className="text-[1.875rem] leading-[2.375rem] lg:text-[2.875rem] lg:leading-[3.625rem] font-[300] text-white pb-[1.25rem] lg:pb-0">
+        <h4 className="text-[1.875rem] leading-[2.375rem] lg:text-[2.875rem] lg:leading-[3.625rem] font-[300] text-white pb-[1.25rem] lg:pb-0 tracking-[0.125rem]">
           {data.whiteTitle}
         </h4>
       </div>
-      <p className="text-[1rem] leading-[1.563rem] font-[300] text-white mt-[1.25rem] lg:mt-0">
+      <p className="text-[1rem] leading-[1.563rem] font-[300] text-white mt-[1.25rem] lg:mt-0 tracking-[0.063rem]">
         {data.desc}
       </p>
     </div>

diff --git a/src/components/EnablingDiverseItems.tsx b/src/components/EnablingDiverseItems.tsx
@@ -11,43 +11,52 @@ const EnablingDiverseItems = ({ isDiverse, text }: EnablingDiverseTypes) => {
   const activeMenu = menu.find(({ title }) => title === activeTitle) || menu[2];
 
   return (
-    <div className="lg:max-w-[27.313rem] xl:max-w-[35rem] 2xl:max-w-[40.625rem] 4xl:max-w-[50.625rem]">
+    <div className="lg:max-w-[27.313rem] xl:max-w-[35rem] 2xl:max-w-[40.625rem] 4xl:max-w-[50.625rem] 5xl:min-w-[70.625rem]">
       {isDiverse && (
         <div>
-          <h3 className="text-[1.875rem] leading-[2.375rem] lg:text-[2.875rem] lg:leading-[3.625rem] font-[300] text-white">
+          <h3 className="text-[1.875rem] leading-[2.375rem] lg:text-[2.875rem] lg:leading-[3.625rem] font-[300] text-[#F2F3F5] tracking-[0.125rem]">
             Enabling Diverse
           </h3>
           <h4 className="text-[1.875rem] leading-[2.375rem] lg:text-[2.875rem] lg:leading-[3.625rem] font-[700] text-[#00D448] tracking-[0.125rem]">
             Cross-Chain Interactions
           </h4>
-          <h4 className="text-[1.5rem] leading-[1.875rem] lg:text-[2.5rem] lg:leading-[3.17rem] font-[700] text-white mt-[1.875rem] lg:mt-[6.25rem]">
+          <h4 className="text-[1.5rem] leading-[1.875rem] lg:text-[2.5rem] lg:leading-[3.17rem] font-[700] text-[#F6F6F7] mt-[1.875rem] lg:mt-[6.25rem] tracking-[0.125rem]">
             XAccount
           </h4>
         </div>
       )}
       {!isDiverse && (
-        <h4 className="text-[1.5rem] lg:text-[2.5rem] leading-[1.875rem] lg:leading-[3.17rem] font-[700] text-white mt-[1.875rem] 2xl:mt-0">
-          Order Clearing(Thirdparty bridge)
+        <h4 className="text-[1.5rem] lg:text-[2.5rem] leading-[1.875rem] lg:leading-[3.17rem] font-[700] text-[#F6F6F7] mt-[1.875rem] 2xl:mt-0 tracking-[0.125rem]">
+          Order Clearing (Thirdparty bridge)
         </h4>
       )}
-      <p className="text-[0.875rem] leading-[1.375rem] lg:text-[1rem] lg:leading-[1.563rem] font-[300] text-white my-[1.875rem]">
+      <p className="text-[0.875rem] leading-[1.375rem] lg:text-[1rem] lg:leading-[1.563rem] font-[300] text-[#F6F6F7] my-[1.875rem]">
         {text}
       </p>
       <PrettyCode
         code={activeMenu.code}
         language={activeMenu.language}
-        className="lg:max-w-[27.313rem] xl:max-w-[40.625rem] 4xl:max-w-[50.625rem]"
+        className="lg:max-w-[27.313rem] xl:max-w-[40.625rem] 4xl:max-w-[50.625rem] 5xl:max-w-[70.625rem]"
       />
-      <button className="flex items-center justify-center py-[0.438rem] bg-transparent border border-[#F2F3F5] rounded-[2.5rem] gap-[0.625rem] mt-[1.875rem] px-[0.625rem]">
-        <span className="font-[300] text-[1rem] text-white leading-[1.563rem]">
-          View use case in docs
-        </span>
-        <img
-          src="/assets/icons/go.svg"
-          alt="goArrow"
-          className="w-[1.5rem] h-[1.5rem]"
-        />
-      </button>
+      <a
+        href={
+          isDiverse
+            ? "https://docs.msgport.xyz/learn/use-cases/xaccount/"
+            : "https://docs.msgport.xyz/learn/use-cases/order-xclearing/"
+        }
+        target="_blank"
+      >
+        <button className="flex items-center justify-center py-[0.438rem] bg-transparent border border-[#F2F3F5] rounded-[2.5rem] gap-[0.625rem] mt-[1.875rem] px-[0.625rem] btnHover hover:text-[#00D448] hover:border-[#00D448] text-white">
+          <span className="font-[300] text-[1rem] leading-[1.563rem]">
+            View use case in docs
+          </span>
+          <img
+            src="/assets/icons/go.svg"
+            alt="goArrow"
+            className="w-[1.5rem] h-[1.5rem]"
+          />
+        </button>
+      </a>
     </div>
   );
 };

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -7,7 +7,7 @@ const Footer = () => {
         @ 2024 Msgport
       </p>
       <div className="flex items-center gap-[1.25rem] lg:gap-[1.875rem]">
-        <a href="" target="_blank">
+        <a href="" target="_blank" className="hidden">
           <img src="/assets/icons/x.svg" alt="x" />
         </a>
         <a href=" https://t.me/msgport " target="_blank">

diff --git a/src/components/Governed.tsx b/src/components/Governed.tsx
@@ -3,14 +3,14 @@ import Container from "./Container";
 const Governed = () => {
   return (
     <Container classes="flex flex-col lg:flex-row items-center justify-between mt-[6.25rem]">
-      <h2 className="text-[1rem] leading-[1.563rem] lg:text-[2.875rem] lg:leading-[3.625rem] font-[300] text-white">
+      <h2 className="text-[1rem] leading-[1.563rem] lg:text-[2.875rem] lg:leading-[3.625rem] font-[300] text-white tracking-[0.063rem]">
         Governed by
-        <span className="text-[1rem] leading-[1.563rem] lg:block 3xl:inline lg:text-[2.5rem] lg:leading-[3.17rem] font-[700] text-[#FF0083] tracking-[0.125rem]">
+        <span className="text-[1rem] leading-[1.563rem] lg:block 3xl:inline lg:text-[2.5rem] lg:leading-[3.17rem] font-[700] text-[#FF0083] tracking-[0.125rem] ml-[0.3rem]">
           RingDAO
         </span>
       </h2>
       <div className="flex flex-col lg:flex-row items-center gap-[1.25rem]">
-        <p className="text-[0.875rem] leading-[1.4rem] lg:text-[1.5rem] italic lg:leading-[1.902rem] text-[#F2F3F5] tracking-[0.125rem] opacity-50">
+        <p className="text-[0.875rem] leading-[1.4rem] lg:text-[1.5rem] italic lg:leading-[1.902rem] text-[#F2F3F5] tracking-[0.063rem] opacity-50 ">
           Other projects by RingDAO
         </p>
         <div className="flex gap-[1.875rem]">
@@ -21,11 +21,13 @@ const Governed = () => {
               className="w-[2.75rem] h-[2.75rem] lg:w-[4.625rem] lg:h-[4.625rem]"
             />
           </a>
-          <img
-            src="/images/GovernedLogo2.png"
-            alt=""
-            className="w-[2.75rem] h-[2.75rem] lg:w-[4.625rem] lg:h-[4.625rem]"
-          />
+          <a href="https://github.com/xapi-box" target="_blank">
+            <img
+              src="/images/GovernedLogo2.png"
+              alt=""
+              className="w-[2.75rem] h-[2.75rem] lg:w-[4.625rem] lg:h-[4.625rem]"
+            />
+          </a>
         </div>
       </div>
     </Container>

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -13,14 +13,14 @@ const Header = () => {
       <div className="lg:gap-[2.5rem] lg:flex items-center hidden">
         <a
           target="_blank"
-          href=" https://docs.msgport.xyz/learn/interfaces/"
+          href="https://docs.msgport.xyz/"
           className="text-white text-[1rem] font-[600] leading-[1.563rem]"
         >
           Learn
         </a>
         <a
           target="_blank"
-          href="https://docs.msgport.xyz/build/use-cases/overview/"
+          href="https://docs.msgport.xyz/build/networks/"
           className="text-white text-[1rem] font-[600] leading-[1.563rem]"
         >
           Build
@@ -45,14 +45,14 @@ const Header = () => {
         <div className="bg-[#000000b3] rounded-[1.25rem] flex flex-col items-center justify-center p-[2.5rem] absolute right-[1.25rem] top-[3.125rem] gap-[2.5rem]">
           <a
             target="_blank"
-            href=" https://docs.msgport.xyz/learn/interfaces/"
+            href="https://docs.msgport.xyz/"
             className="text-white text-[1rem] font-[600] leading-[1.563rem]"
           >
             Learn
           </a>
           <a
             target="_blank"
-            href="https://docs.msgport.xyz/build/use-cases/overview/"
+            href="https://docs.msgport.xyz/build/networks/"
             className="text-white text-[1rem] font-[600] leading-[1.563rem]"
           >
             Build

diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
@@ -13,26 +13,34 @@ const Hero = () => {
         autoPlay
         loop
         muted
-        className="w-full lg:w-[43.813rem] 3xl:w-[56.25rem] lg:top-[3.75rem] lg:right-[3.125rem] lg:h-[25.625rem] 3xl:h-[32.813rem] lg:absolute 3xl:top-[6.25rem] 3xl:right-[6.25rem] object-cover lg:rounded-[500px] 4xl-[56.25rem]"
+        className="w-full lg:w-[43.813rem] 3xl:w-[56.25rem] lg:top-[3.75rem] lg:right-[3.125rem] lg:h-[25.625rem] 3xl:h-[32.813rem] lg:absolute 3xl:top-[6.25rem] 3xl:right-[6.25rem] object-cover lg:rounded-[500px] 4xl:w-[56.25rem] 5xl:w-[75rem] 5xl:h-[43.813rem]"
       ></video>
 
-      <div className="mt-[1.875rem] 2xl:mt-0 flex items-center justify-center flex-col lg:block lg:w-[51.688rem] lg:h-[22.188rem] lg:absolute lg:top-[28.125rem] 2xl:right-[42.063rem] 4xl:right-[62.063rem]">
-        <h4 className="text-[#fff] text-[1.25rem] lg:text-[3.75rem] font-[300] lg:leading-[4.755rem] lg:tracking-[0.125rem] ">
+      <div className="mt-[1.875rem] 2xl:mt-0 flex items-center justify-center flex-col lg:block lg:h-[22.188rem] lg:absolute lg:top-[28.125rem] lg:left-[3.125rem] 2xl:left-[6.25rem]">
+        <h4 className="text-[#fff] text-[1.25rem] leading-[1.563rem] lg:text-[3.75rem] font-[300] lg:leading-[4.755rem] tracking-[0.125rem]">
           Programmable
         </h4>
-        <h1 className="text-[1.875rem] text-[#00D448] lg:text-[4.375rem] 3xl:text-[5.625rem] font-bold lg:leading-[4.375rem] 3xl:leading-[5.625rem]  lg:tracking-[0.125rem] italic w-[20.938rem] lg:w-[42.438rem] 3xl:w-auto">
-          Cross-Chain Messaging Port
+        <h1 className="text-[1.875rem] text-[#00D448] lg:text-[4.375rem] 3xl:text-[5.625rem] font-bold lg:leading-[4.375rem] 3xl:leading-[5.625rem]  tracking-[0.125rem] italic w-[20.938rem] lg:w-[42.438rem] 3xl:w-auto text-center lg:text-left lg:mt-[1.25rem]">
+          CROSS-CHAIN
         </h1>
-        <button className="flex items-center py-[0.5rem] px-[0.625rem] lg:pr-[0.625rem] lg:pl-[0.938rem] lg:py-[1.094rem] bg-transparent border border-[#F2F3F5] rounded-[2.5rem] gap-[0.625rem] mt-[1.25rem]">
-          <span className="font-[300] text-[1rem] lg:font-[500] lg:text-[1.25rem] text-white">
-            Get Started
-          </span>
-          <img
-            src="/assets/icons/go.svg"
-            alt="goArrow"
-            className="w-[1.5rem] h-[1.5rem]"
-          />
-        </button>
+        <h1 className="text-[1.875rem] text-[#00D448] lg:text-[4.375rem] 3xl:text-[5.625rem] font-bold lg:leading-[4.375rem] 3xl:leading-[5.625rem]  tracking-[0.125rem] italic w-[20.938rem] lg:w-[42.438rem] 3xl:w-auto text-center lg:text-left mt-[-0.8rem] lg:mt-0">
+          MESSAGING PORT
+        </h1>
+        <a
+          href=" https://docs.msgport.xyz/build/tutorial/remix-demo/"
+          target="_blank"
+        >
+          <button className="flex items-center py-[0.5rem] pr-[0.625rem] pl-[0.938rem] lg:py-[1.125rem] bg-transparent border border-[#F2F3F5] rounded-[2.5rem] gap-[0.625rem] mt-[1.25rem] hover:text-[#00D448] hover:border-[#00D448] text-white btnHover">
+            <span className="font-[300] text-[1rem] lg:font-[500] lg:text-[1.25rem]">
+              Get Started
+            </span>
+            <img
+              src="/assets/icons/go.svg"
+              alt="goArrow"
+              className="w-[1.5rem] h-[1.5rem]"
+            />
+          </button>
+        </a>
       </div>
     </Container>
   );

diff --git a/src/components/HowItWorks.tsx b/src/components/HowItWorks.tsx
@@ -5,28 +5,28 @@ const HowItWorks = () => {
         <h2 className="text-[1.875rem] leading-[2.375rem] lg:text-[4.375rem] lg:leading-[5.544rem] font-[300] text-white tracking-[0.125rem]">
           How It
         </h2>
-        <span className="text-[1.875rem] leading-[2.375rem] lg:text-[4.375rem] lg:leading-[5.544rem] font-[700] text-[#00D448] ">
-          Works
+        <span className="text-[1.875rem] leading-[2.375rem] lg:text-[4.375rem] lg:leading-[5.544rem] font-[700] text-[#00D448] tracking-[0.125rem]">
+          works
         </span>
       </div>
       <div className="mt-[1.875rem] 3xl:mt-0 4xl:mt-[3.125rem] lg:flex lg:gap-[3.125rem] 3xl:gap-[6.25rem] gap-[6.25rem] lg:bg-[#0d150fb3] w-full">
-        <div className="relative pl-[1.875rem] lg:w-[27.313rem] 3xl:w-[30.625rem]">
+        <div className="relative pl-[1.875rem] lg:w-[27.313rem] 3xl:w-[30.625rem] 5xl:w-[48.125rem]">
           <img
             src="/assets/icons/green.svg"
             alt="green"
             className="absolute top-0 left-0"
           />
-          <p className="text-[1rem] leading-[1.563rem] font-[300] text-white mb-[1.875rem]">
+          <p className="text-[1rem] leading-[1.563rem] font-[300] text-[#F6F6F7] mb-[1.875rem] tracking-[0.063rem]">
             To provide DApps with a simple and consistent chain-free capability,
             extensive foundational infrastructure is required
           </p>
-          <p className="text-[1rem] leading-[1.563rem] font-[300] text-white ">
+          <p className="text-[1rem] leading-[1.563rem] font-[300] text-[#F6F6F7] tracking-[0.063rem]">
             Various messaging protocols cater to different needs, each with
             distinct considerations for security and cost, and built on unique
             technologies
           </p>
         </div>
-        <div className="mt-[1.875rem] lg:mt-0 relative pl-[1.875rem] lg:w-[27.313rem] 3xl:w-[30.625rem]">
+        <div className="mt-[1.875rem] lg:mt-0 relative pl-[1.875rem] lg:w-[27.313rem] 3xl:w-[30.625rem] 5xl:w-[48.125rem]">
           <img
             src="/assets/icons/green.svg"
             alt="green"
@@ -42,7 +42,7 @@ const HowItWorks = () => {
           </p>
           <p className="text-[1rem] leading-[1.563rem] font-[300] text-white ">
             With Msgport service layer, direct usage is simplified, while the
-            Darwinia open-source community handle the intricate integration and
+            Msgport open-source community handle the intricate integration and
             construction efforts
           </p>
         </div>