Addition of Get Ring page

README.md

@@ -1 +1,11 @@
 # Darwinia Home
+
+This repository is for the website of Darwinia Network. Learn more about Darwinia [here](https://darwinia.network).
+
+### Powering Your DApp’s Cross-Chain Capabilities.
+
+Darwinia is the community-run technology and service powering the cross-chain capabilities of decentralized applications. By crafting secure and efficient cross-chain messaging protocols, Darwinia is at the forefront of facilitating seamless communication between disparate blockchain networks. The newest addition to our suite of protocols is Msgport, an innovative messaging abstraction that has been successfully implemented across a wide array of mainstream smart contract platforms, broadening the potential for interoperability and enabling developers to create more versatile and connected blockchain ecosystems.
+
+### How to run
+```npm install```      
+``` npm start```

package.json

@@ -34,7 +34,7 @@
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "BROWSER=none PORT=3003 react-scripts start",
+    "start": "set PORT=3003 && react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",

src/components/Header/data.ts

@@ -2,52 +2,107 @@ export const navigations: { label: string; sub: { label: string; link: string; i
   {
     label: "Use Darwinia",
     sub: [
-      { label: "Get RING", link: "https://darwinia.notion.site/Where-can-I-get-the-RING-token-c0932eaa99454be99335fdfff106e789", isExternal: true },
-      { label: "Stake RING", link: "https://docs.darwinia.network/staking-guide-4306a2a3f25f4ea0b41377e267e1d319", isExternal: true },
-      { label: "Run A Node", link: "https://docs.darwinia.network/run-collator-node-af6bce360d5b49ddacc56e4587510210", isExternal: true },
-      { label: "Cross-Chain Asset Bridge", link: "https://docs.darwinia.network/tokenasset-bridge-c2b42b6e0c3348ddb91333a4f24ac4d9", isExternal: true },
-      { label: "Cross-Chain DAO Governance", link: "https://docs.darwinia.network/multi-chain-dao-governance-d3b2e194828d4af8bad8e3fa28219fc3", isExternal: true },
+      // { label: "Get RING", link: "https://darwinia.notion.site/Where-can-I-get-the-RING-token-c0932eaa99454be99335fdfff106e789", isExternal: true },
+      {
+        label: "Get RING",
+        link: "/get-ring",
+        isExternal: false,
+      },
+      {
+        label: "Stake RING",
+        link: "https://docs.darwinia.network/staking-guide-4306a2a3f25f4ea0b41377e267e1d319",
+        isExternal: true,
+      },
+      {
+        label: "Run A Node",
+        link: "https://docs.darwinia.network/run-collator-node-af6bce360d5b49ddacc56e4587510210",
+        isExternal: true,
+      },
+      {
+        label: "Cross-Chain Asset Bridge",
+        link: "https://docs.darwinia.network/tokenasset-bridge-c2b42b6e0c3348ddb91333a4f24ac4d9",
+        isExternal: true,
+      },
+      {
+        label: "Cross-Chain DAO Governance",
+        link: "https://docs.darwinia.network/multi-chain-dao-governance-d3b2e194828d4af8bad8e3fa28219fc3",
+        isExternal: true,
+      },
     ],
   },
   {
     label: "Learn",
     sub: [
       { label: "What Is Darwinia", link: "https://docs.darwinia.network/", isExternal: true },
-      { label: "What Is RING", link: "https://docs.darwinia.network/token-and-economic-model-ebfbf88c76794215a4abe75ae13f596b", isExternal: true },
+      {
+        label: "What Is RING",
+        link: "https://docs.darwinia.network/token-and-economic-model-ebfbf88c76794215a4abe75ae13f596b",
+        isExternal: true,
+      },
       { label: "Darwinia Ecosystem DApps", link: "https://apps.darwinia.network/", isExternal: true },
       { label: "Darwinia News & Updates", link: "https://medium.com/darwinianetwork", isExternal: true },
-      { label: "Darwinia Roadmap", link: "https://darwinia.notion.site/c700133dd5a04c2494ceab489c75c907?v=8ff88199019d4236a3b9a190f5e7b9d5", isExternal: true },
+      {
+        label: "Darwinia Roadmap",
+        link: "https://darwinia.notion.site/c700133dd5a04c2494ceab489c75c907?v=8ff88199019d4236a3b9a190f5e7b9d5",
+        isExternal: true,
+      },
       { label: "Darwinia Genepaper v4", link: "/Genepaper_v4.pdf", isExternal: true },
       { label: "Paper Resources", link: "/papers", isExternal: false },
-      { label: "Glossary", link: "https://docs.darwinia.network/glossary-8967fc4aa6a046a69b525dff7bf70a50", isExternal: true },
+      {
+        label: "Glossary",
+        link: "https://docs.darwinia.network/glossary-8967fc4aa6a046a69b525dff7bf70a50",
+        isExternal: true,
+      },
       { label: "FAQ", link: "https://darwinia.notion.site/FAQ-c9412ead803542f197ba1ccafb72c427", isExternal: true },
     ],
   },
   {
     label: "Developers",
     sub: [
       { label: "Documentation", link: "https://docs.darwinia.network/", isExternal: true },
-      { label: "Use Cases", link: "https://docs.darwinia.network/use-cases-d707f114326a4fed8cdc6c2b37b444b1", isExternal: true },
+      {
+        label: "Use Cases",
+        link: "https://docs.darwinia.network/use-cases-d707f114326a4fed8cdc6c2b37b444b1",
+        isExternal: true,
+      },
     ],
   },
   {
     label: "Technology",
     sub: [
-      { label: "Messaging Protocols", link: "https://docs.darwinia.network/messaging-protocols-69586eedc835438cbed676ef4f35cb93", isExternal: true },
-      { label: "Darwinia EVM+", link: "https://docs.darwinia.network/darwinia-evm-df814f681ec248438cb762df8aaddbd6", isExternal: true },
+      {
+        label: "Messaging Protocols",
+        link: "https://docs.darwinia.network/messaging-protocols-69586eedc835438cbed676ef4f35cb93",
+        isExternal: true,
+      },
+      {
+        label: "Darwinia EVM+",
+        link: "https://docs.darwinia.network/darwinia-evm-df814f681ec248438cb762df8aaddbd6",
+        isExternal: true,
+      },
     ],
   },
   {
     label: "Community",
     sub: [
       { label: "Online Communities", link: "/online-communities", isExternal: false },
       { label: "Get Involved", link: "/get-involved", isExternal: false },
-      { label: "Grants", link: "https://github.com/darwinia-network/collaboration/blob/master/grant/README.md", isExternal: true },
+      {
+        label: "Grants",
+        link: "https://github.com/darwinia-network/collaboration/blob/master/grant/README.md",
+        isExternal: true,
+      },
       { label: "Bug Bounty Program", link: "https://immunefi.com/bounty/darwinia/", isExternal: true },
-      { label: "Help Center", link: "https://darwinia.notion.site/a76d5bdc7ad242bea991c023dfca208f?v=5fb127fc9a7a4d67a3bbc3ed50445180", isExternal: true },
-      { label: "Brand Assets", link: "https://darwinia.notion.site/Brand-Assets-9bd35f88f0674232954737577616f2c2", isExternal: true },
+      {
+        label: "Help Center",
+        link: "https://darwinia.notion.site/a76d5bdc7ad242bea991c023dfca208f?v=5fb127fc9a7a4d67a3bbc3ed50445180",
+        isExternal: true,
+      },
+      {
+        label: "Brand Assets",
+        link: "https://darwinia.notion.site/Brand-Assets-9bd35f88f0674232954737577616f2c2",
+        isExternal: true,
+      },
     ],
   },
 ];
-
-

src/components/Navigation/DesktopNavigation.tsx

@@ -34,6 +34,15 @@ export default function DesktopNavigation({ data, isHomePage, isNavigationActive
           onActiveChange={handleActiveChange}
         />
       ))}
+      <a className="" href="https://helixbridge.app/?token_category=ring." target="_blank" rel="noopener noreferrer">
+        <span
+          className={`whitespace-nowrap transition-colors hover:text-app-main text-app-black ${
+            isHomePage ? "text-t20" : "text-t16b"
+          } `}
+        >
+          Bridge
+        </span>
+      </a>
     </div>
   );
 }
@@ -63,9 +72,9 @@ function Navigation({
       placement="bottom"
       label={
         <span
-          className={`whitespace-nowrap transition-colors hover:text-app-main ${isHomePage ? 'text-t20' : 'text-t16b'} ${
-            isActive ? "text-app-main" : "text-app-black"
-          }`}
+          className={`whitespace-nowrap transition-colors hover:text-app-main ${
+            isHomePage ? "text-t20" : "text-t16b"
+          } ${isActive ? "text-app-main" : "text-app-black"}`}
         >
           {label}
         </span>

src/components/ring/BgBlackContainer.tsx

@@ -0,0 +1,23 @@
+// BgBlackContainer.tsx
+import React, { ReactNode, forwardRef } from 'react';
+import PropTypes from 'prop-types';
+
+type BgBlackContainerProps = {
+  children: ReactNode;
+};
+
+const BgBlackContainer = forwardRef<HTMLDivElement, BgBlackContainerProps>(({ children }, ref) => {
+  return (
+    <div className='lg:w-[695px] bg-black rounded-[30px] p-[20px] lg:p-[40px] flex flex-col gap-[30px] mx-[20px] lg:mx-0 h-fit' ref={ref}>
+      {children}
+    </div>
+  );
+});
+
+BgBlackContainer.displayName = 'BgBlackContainer';
+
+BgBlackContainer.propTypes = {
+  children: PropTypes.node.isRequired
+};
+
+export default BgBlackContainer;

src/components/ring/CentralizedExchanges.tsx

@@ -0,0 +1,36 @@
+import React, { forwardRef, ReactNode } from 'react';
+import DecentralizedItems from './DecentralizedItems';
+import BgBlackContainer from './BgBlackContainer';
+import { Centralizeddata } from '../../data/ringdata';
+
+type CentralizedExchangesProps = {
+  children?: ReactNode;
+};
+
+const CentralizedExchanges = forwardRef<HTMLDivElement, CentralizedExchangesProps>((props, ref) => {
+  return (
+    <BgBlackContainer ref={ref}>
+      <h1 className='text-[#F2F3F5] text-[22px] leading-[27.9px] lg:text-[40px] font-[700] lg:leading-[50.72px] tracking-[2px]'>Centralized Exchanges(CEXs)</h1>
+      <p className='leading-[15.22px] text-[12px] lg:text-[14px] font-[400] lg:leading-[22.4px] tracking-[1px]'>
+        Centralized exchanges are platforms that are managed by a single entity or company. They act as middlemen between buyers and sellers of cryptocurrencies, similar to traditional stock exchanges. 
+        Typically, exchanges have restrictions on where they can sell crypto. Some exchanges may not be available in your country or area, you can consult the exchanges customer service or check the announcement from exchanges. As for the tax issue, you may also want to consult the local department for more information.
+      </p>
+      <div className='gap-[20px] grid lg:grid-cols-5 lg:gap-[34px]'>
+        {
+          Centralizeddata.map(item => {
+            return (
+              <DecentralizedItems key={item.text} item={item} />
+            )
+          })
+        }
+      </div>
+      <div>
+        <p className='text-[10px] font-[500] leading-[12.68px] text-[#6F6F6F]'>DISCLAIMER: The information presented herein, sourced from community and <span className='text-[10px] font-[500] leading-[12.68px] text-[#FF0083]'>CoinGecko</span> , is made available solely for general information purposes. It should not be construed as professional or financial advice of any kind. </p>
+      </div>
+    </BgBlackContainer>
+  );
+});
+
+CentralizedExchanges.displayName = 'CentralizedExchanges';
+
+export default CentralizedExchanges;

src/components/ring/DecentralizedExchanges.tsx

@@ -0,0 +1,40 @@
+// DecentralizedExchanges.tsx
+import React, { forwardRef, ReactNode } from 'react';
+import DecentralizedItems from './DecentralizedItems';
+import BgBlackContainer from './BgBlackContainer';
+import { Decentralizeddata } from '../../data/ringdata';
+
+type DecentralizedExchangesProps = {
+  children?: ReactNode;
+};
+
+const DecentralizedExchanges = forwardRef<HTMLDivElement, DecentralizedExchangesProps>((props, ref) => {
+  return (
+    <BgBlackContainer ref={ref}>
+      <h1 className='text-[#F2F3F5] text-[22px] leading-[27.9px] lg:text-[40px] font-[700] lg:leading-[50.72px] tracking-[2px]'>Decentralized Exchanges(DEXs)</h1>
+      <p className='leading-[15.22px] text-[12px] lg:text-[14px] font-[400] lg:leading-[22.4px] tracking-[1px]'>
+        DEXs operate without a central authority, serving as open marketplaces for tokens where buyers and sellers are connected directly. 
+        Instead of relying on a trusted third party to secure funds during transactions, DEXs utilize code, called smart contracts, to ensure transaction security. In this setup, the seller &apos s RING is only transferred once payment is guaranteed. 
+        DEXs offer fewer geographical restrictions compared to their centralized alternatives. As long as someone is selling what you need and accepting a payment method you can offer, you &apos re ready to proceed. This decentralized nature provides greater accessibility and flexibility for users.
+      </p>
+      <div className='gap-[20px] grid lg:grid-cols-5 lg:gap-[34px]'>
+        {
+          Decentralizeddata.map(item => {
+            return (
+              <DecentralizedItems key={item.text} item={item} />
+            )
+          })
+        }
+      </div>
+      <div>
+        <p className='text-[10px] font-[500] leading-[12.68px] text-[#6F6F6F]'>DISCLAIMER: The information presented herein, sourced from community and 
+        <span className='text-[10px] font-[500] leading-[12.68px] text-[#FF0083]'>CoinGecko</span> 
+        , is made available solely for general information purposes. These DEXs aren &apos t for beginners as you &apos ll need some RING to use them.  Do your own research!</p>
+      </div>
+    </BgBlackContainer>
+  );
+});
+
+DecentralizedExchanges.displayName = 'DecentralizedExchanges';
+
+export default DecentralizedExchanges;

src/components/ring/DecentralizedItems.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+
+interface DecentralizedType {
+  item : any
+}
+
+const DecentralizedItems = ({item} : DecentralizedType) => {
+  return (
+    <div className='flex items-center gap-[10px] lg:gap-0 lg:flex-col w-full bg-[#2A2A2A] lg:bg-transparent p-[10px] lg:p-0 rounded-[10px] lg:w-[104px] cursor-pointer' onClick={() => {
+      window.open(item.link, '_blank');
+  }}>
+        <img src={item.image} alt={item.text} className='w-[40px] h-[40px] lg:w-[70px] lg:h-[70px]'/>
+        <div className='flex items-center gap-[5px]'>
+            <p className='text-[14px] font-[700] leading-[22.4px] tracking-[1px] text-[#F2F3F5] flex-shrink-0'>{item.text}</p>
+            <img src="/images/ring/UnionBridge.svg" alt="union" className='hidden lg:block cursor-pointer' />
+        </div>
+        {
+            item.subtext &&
+            <p className='text-[12px] font-[300] leading-[15.22px] text-[#F2F3F5] flex-shrink-0 opacity-50 w-[106px] lg:w-auto'>{item.subtext}</p>
+          }
+          <img src="/images/ring/UnionBridge.svg" alt="union" className='lg:hidden cursor-pointer'/>
+    </div>
+  )
+}
+
+export default DecentralizedItems

src/components/ring/RingCards.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+const RingCards = ({ data, scrollToRef, DecentralizedExchangesRef, CentralizedExchangesRef}: any) => {
+    const handleScroll = (ref: React.RefObject<HTMLDivElement>) => {
+        scrollToRef(ref);
+    };
+
+    return (
+        <div className='lg:h-[300px] bg-[#EAF0F6] p-[30px] lg:w-[400px] rounded-[10px]'>
+            <img src={data.image} alt='' className='lg:w-[50px] lg:h-[50px] rounded-[10px] mb-[20px]' />
+            <h4 className='text-black text-[20px] font-[500] leading-[23.36px]'>{data.title}</h4>
+            <p className='text-black text-[12px] font-[300] mt-[10px] mb-[20px] h-[75px] leading-[15.22px]'>{data.desc}</p>
+            <button
+                className='text-[14px] font-[700] leading-[22px] flex items-center gap-[10px] pr-[10px] pl-[15px] py-[8px] rounded-[40px] border-[1px] border-black text-black lg:text-[12px] lg:font-[300]'
+                type='button'
+                onClick={() => 
+                {
+                    if(data.type === "decentralized") {
+                        handleScroll(DecentralizedExchangesRef)
+                    } else if(data.type === "decentralized2") {
+                        handleScroll(CentralizedExchangesRef)
+                    } else {
+                        window.open(data.link, '_blank');
+                    }
+                }}>
+                {data.buttonText}
+                <img src='/images/ring/cards/goIcon.svg' alt='' />
+            </button>
+        </div>
+    );
+};
+
+export default RingCards;

src/components/ring/RingHero.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+
+const RingHero = () => {
+  return (
+    <div className='h-[260px] lg:h-[440px] lg:bg-contain bg-no-repeat lg:bg-center w-[100%] flex items-center justify-center flex-col gap-[10px] bg-[url("/public/images/ring/bridgeHeroBg.png")] bg-top bg-cover' 
+    >
+        <h3 className='text-[22px] leading-[27.9px] text-center font-[700] tracking-[2px] lg:text-[40px] lg:leading-[50.72px]'>Where to get RING</h3>
+        <p className='text-[12px] leading-[15.22px] text-center font-[300] lg:text-[16px] lg:leading-[25.6px]'>You can earn RING, receive it from your peers, or buy it from exchanges and DApps</p>
+    </div>
+  )
+}
+
+export default RingHero

src/components/ring/UseYourRing.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+const UseYourRing = () => {
+  return (
+    <section className='flex flex-col lg:flex-wrap items-center justify-center pb-[140px] lg:pb-[48px] px-[20px] lg:px-0'>
+        <img src="/images/ring/ringformobile.png" alt="ringformobile" className='lg:hidden mb-[10px]'/>
+        <div className='flex items-center justify-center flex-col lg:bg-no-repeat lg:bg-contain lg:bg-center gap-[10px] lg:bg-[url("/public/images/ring/ringBg.png")] xl:w-[1262px]'>
+            <img src="/images/ring/ring.png" alt="ring" className='w-[100px] h-[100px] hidden lg:block'/>
+            <h2 className='font-[700] text-[22px] leading-[27.9px] tracking-[1px] text-[black]'>Use Your RING</h2>
+            <p className='text-[16px] font-[300] leading-[25.6px] text-center text-[#6F6F6F] lg:w-[800px]'>
+                Now that you own some RING, check out some Darwinia ecosystem applications (DApps). There are DApps for finance, social media, gaming and lots of other categories.
+            </p>
+            <a className='flex items-center gap-[10px] pr-[10px] pl-[15px] py-[8px] rounded-[40px] border-[1px] border-black text-black text-[16px] lg:text-[12px] font-[300] leading-[25.6px]' href='https://apps.darwinia.network/' target='_blank' rel='noopener noreferrer'>
+            Check out DApps
+            <img src="/images/ring/cards/goIcon.svg" alt="" />
+        </a>
+        </div>
+    </section>
+  )
+}
+
+export default UseYourRing