Unveiling New Design HomePage of Darwinia Network (#418)

* feat newHomePage

add newDesign for 1920 and mobile

* add /new-home to routeList

* fix style for 1024 2560

* fix header bg color

* fix header Condition

* remove log

* Add links to buttons

* make new home the main page

* fix the target for links and image name

* fix the link columns remove the animation from the subscribe  and add coming soon tooltip

* add msgport link

* fix footer for 1024

* remove tooltip

* Fix links

* Update ringdao content

* update footer

* update footer sections

---------

Co-authored-by: Hamid Roohi <[email protected]>
Co-authored-by: Hamid Roohi <[email protected]>
Co-authored-by: fisher <[email protected]>

src/components/CrossChain/Comprehensive.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import TitleAndTextSection from "./TitleAndTextSection";
+
+const Comprehensive = () => {
+  return (
+    <section className="flex-col lg:flex-row flex items-center gap-[5rem] justify-center py-[6.25rem] bg-white px-[0.625rem]">
+      <img
+        src="/images/crossChain/comprehensive.png"
+        alt="Comprehensive"
+        className="lg:w-[25rem] lg:h-[22.25rem] 2xl:w-[32.5rem] 2xl:h-[28.813rem]"
+      />
+      <div className="flex flex-col items-center justify-center lg:block">
+        <TitleAndTextSection
+          text="Msgport is a programmable Cross-Chain Messaging Port. Just as smart contracts provide programmability for DApp developers, integration with Msgport will empower developers on Darwinia Chain with the capability for cross-chain programming."
+          title="Comprehensive Cross-Chain Stack"
+          classes="lg:w-[21.5rem] 2xl:w-[34.375rem]"
+        />
+        <TitleAndTextSection
+          text="To develop more interesting cross-chain DApps on Darwinia Chain using Msgport."
+          title=""
+          classes="lg:w-[21.5rem] 2xl:w-[34.375rem]"
+        />
+        <a href="https://msgport.xyz" rel="noreferrer" target="_blank" className="flex w-fit items-center gap-[0.625rem] text-[0.875rem] text-[#F6F6F7] leading-[1.375rem] tracking-[0.063rem] py-[0.625rem] px-[0.938rem] bg-black z-10 rounded-[6.25rem] mt-[1.25rem] font-[700] transition-all delay-75 hover:bg-[#FF0083]">
+          Learn more
+          <img src="/images/right-arrow-white-background-round.svg" alt="right-arrow" />
+        </a>
+      </div>
+    </section>
+  );
+};
+
+export default Comprehensive;

src/components/CrossChain/EVMChain.tsx

@@ -0,0 +1,20 @@
+import TitleAndTextSection from "./TitleAndTextSection";
+
+const EVMChain = () => {
+  return (
+    <section className="flex-col-reverse lg:flex-row flex items-center gap-[2.5rem] lg:gap-[5rem] justify-center py-[6.25rem] lg:py-[9.375rem] bg-white px-[0.625rem] lg:px-[3.125rem]">
+      <TitleAndTextSection
+        classes="lg:w-[29.75rem] 2xl:w-[36.25rem]"
+        text="Darwinia Chain is parachain sharing the same level of security with Polkadot, and It is developed using Substrate and fully compatible with EVM."
+        title="EVM Chain secured by Polkadot"
+      />
+      <img
+        src="/images/crossChain/eVMChain.png"
+        alt=""
+        className="lg:w-[25rem] lg:h-[20.313rem] 2xl:w-[37.063rem] 2xl:h-[30.125rem]"
+      />
+    </section>
+  );
+};
+
+export default EVMChain;

src/components/CrossChain/GovernedSection.tsx

@@ -0,0 +1,18 @@
+const GovernedSection = () => {
+  return (
+    <section className="flex items-center justify-center flex-col gap-[1.875rem] bg-black py-[6.25rem] px-[1.25rem]">
+      <h3 className="text-[1.375rem] lg:text-[1.875rem] leading-[1.75rem] lg:leading-[2.375rem] text-[#F6F6F7] tracking-[0.063rem] font-[700] lg:font-[600]">
+        Governed by
+      </h3>
+      <img src="/images/crossChain/ringDa.png" alt="ringDa" className="w-[16.25rem] lg:w-[25rem] 2xl:w-auto" />
+      <p className="text-[0.875rem] text-[#F6F6F7] leading-[1.4rem] tracking-[0.063rem] font-[400] mt-[1.25rem] text-center lg:w-[49rem] ">
+        RingDAO refers to the next governance version of Darwinia. RING serves as the governance token for RingDAO, and
+        the upgrades to Darwinia Chain will be governed by RingDAO. RING also functions as the Gas Token for Darwinia
+        Chain and plays a role in Collator Staking, among other aspects. RingDAO also governs other projects, including
+        Msgport and SubAPI. <a href="https://docs.darwinia.network/community/ringdao/">Learn more</a>.
+      </p>
+    </section>
+  );
+};
+
+export default GovernedSection;

src/components/CrossChain/Hero.tsx

@@ -0,0 +1,32 @@
+const Hero = () => {
+  return (
+    <section className="relative flex items-start justify-end lg:items-center lg:justify-center min-h-[31.938rem] lg:min-h-[35rem] flex-col gap-[1.375rem] lg:gap-[2.5rem] py-[3.125rem] lg:py-0 px-[1.25rem] lg:px-0 bg-white">
+      <div className="absolute inset-0 overflow-hidden lg:hidden block">
+        <img src="/images/crossChain/heroMobile.png" alt="heroMobile" className="object-cover w-full h-full" />
+      </div>
+      <div className="absolute inset-0 overflow-hidden hidden lg:block">
+        <video className="object-cover w-full h-full" autoPlay loop muted playsInline>
+          <source src="/images/heroBg.mp4" type="video/mp4" />
+        </video>
+      </div>
+      <div className="z-10 hidden lg:block">
+        <h2 className="lg:text-[3.125rem] lg:leading-[3.75rem] 2xl:text-[3.75rem] font-[300] 2xl:leading-[5.625rem] text-center text-black">
+          POWERING YOUR
+        </h2>
+        <h1 className="lg:text-[3.125rem] lg:leading-[3.75rem] 2xl:text-[3.75rem] font-[600] 2xl:leading-[5.625rem] text-center text-[#FF0083]">
+          {"DAPP’S CROSS-CHAIN CAPABILITIES"}
+        </h1>
+      </div>
+      <div className="z-10 lg:hidden block">
+        <h2 className="text-[1.5rem] font-[500] leading-[1.875rem] text-black">Powering Your DApp’s</h2>
+        <h1 className="text-[2.5rem] font-[600] leading-[3.169rem] text-[#FF0083]">CROSS-CHAIN CAPABILITES</h1>
+      </div>
+      <a href="https://docs.darwinia.network/" rel="noreferrer" target="_blank" className="px-[0.625rem] py-[0.75rem] flex items-center gap-[0.313rem] lg:gap-[0.625rem] font-[400] text-[0.875rem] lg:text-[1.25rem] text-[#F6F6F7] leading-[1.4rem] lg:leading-[1.563rem] tracking-[0.063rem] lg:px-[0.938rem] bg-black z-10 rounded-[6.25rem] lg:font-[500] lg:py-[0.938rem] transition-all delay-75 hover:bg-[#FF0083] cursor-pointer">
+        Develop with Darwinia
+        <img src="/images/right-arrow-white-background-round.svg" alt="right-arrow" />
+      </a>
+    </section>
+  );
+};
+
+export default Hero;

src/components/CrossChain/OmnichainAccount.tsx

@@ -0,0 +1,22 @@
+import TitleAndTextSection from "./TitleAndTextSection";
+
+const OmnichainAccount = () => {
+  return (
+    <section className="flex-col lg:flex-row flex items-center gap-[5rem] justify-center py-[6.25rem] px-[0.625rem] lg:px-[3.125rem]">
+      <img
+        src="/images/crossChain/omnichainAccount.png"
+        alt="omnichainAccount"
+        className="lg:w-[25rem] lg:h-[23.5rem] 2xl:w-[29.063] 2xl:h-[27.375rem]"
+      />
+      <TitleAndTextSection
+        classes="lg:w-[34.375rem]"
+        title="Omnichain Account"
+        text="XAccount, standing for Cross-Chain Abstract Account, represents a pioneering approach to account abstraction
+          at the cross-chain level. DApps on Darwinia will be able to interoperate with applications on other EVM chains
+          through XAccount will be able to interoperate with applications on other EVM chains through XAccount."
+      />
+    </section>
+  );
+};
+
+export default OmnichainAccount;

src/components/CrossChain/RelayStation.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import TitleAndTextSection from "./TitleAndTextSection";
+
+const RelayStation = () => {
+  return (
+    <section className="px-[0.625rem] lg:px-0 2xl:px-[14.188rem] bg-[#FFFFFF] flex items-center justify-center flex-col gap-[2.5rem] py-[6.25rem] lg:py-[9.375rem]">
+      <img src="/images/crossChain/relayStation.png" alt="relayStation" className="hidden lg:block" />
+      <img src="/images/crossChain/relayStationMobile.png" alt="relayStation" className="lg:hidden block" />
+      <TitleAndTextSection
+        text="Darwinia Chain serves as a Polkadot Parachain that connects to Assethub and other assets through XCMP.
+          Darwinia Chain collaborates deeply with Helix Bridge in a one-stop Bridge solution that can bridge various EVM
+          ecosystems."
+        title="Cross-Chain Asset Relay Station"
+        classes="lg:w-[58.688rem] text-center lg:!text-center"
+      />
+    </section>
+  );
+};
+
+export default RelayStation;

src/components/CrossChain/TitleAndTextSection.tsx

@@ -0,0 +1,20 @@
+interface props {
+  text: string;
+  title: string;
+  classes: string;
+}
+
+const TitleAndTextSection = ({ text, title, classes }: props) => {
+  return (
+    <div className={"text-center lg:text-left " + classes}>
+      <h2 className="text-[1.375rem] lg:text-[1.875rem] font-[700] lg:font-[600] leading-[1.688rem] lg:leading-[2.375rem] text-black tracking-[0.063rem]">
+        {title}
+      </h2>
+      <p className="text-[0.875rem] text-black leading-[1.375rem] tracking-[0.063rem] font-[400] mt-[1.25rem]">
+        {text}
+      </p>
+    </div>
+  );
+};
+
+export default TitleAndTextSection;

src/components/Footer/OthersPageDesktopFooter.tsx

@@ -6,17 +6,27 @@ import SubscribeWrap from "../SubscribeWrap";
 export default function OthersPageDesktopFooter() {
   return (
     <div className="bg-app-black py-[3.75rem]">
-      <div className="max-w-8xl mx-auto px-medium flex justify-between">
+      <div className="max-w-8xl mx-auto px-medium 2xl:flex justify-between lg:hidden ">
         <FooterLinks />
 
         <div className="flex flex-col justify-between">
-          <div className="flex flex-col gap-[2.5rem]" data-aos="fade-up">
+          <div className="flex flex-col gap-[2.5rem]">
             <SubscribeWrap />
             <FooterSocialMedia />
           </div>
           <Copyright />
         </div>
       </div>
+      <div className="flex items-center justify-between px-[3.125rem] xl:px-[6.25rem] 2xl:hidden">
+        <FooterLinks />
+      </div>
+      <div className="flex items-center justify-center mt-[7.5rem] 2xl:hidden">
+        <SubscribeWrap />
+      </div>
+      <div className="flex items-center justify-between px-[3.125rem] xl:px-[6.25rem] mt-[5rem] 2xl:hidden">
+        <FooterSocialMedia />
+        <Copyright />
+      </div>
     </div>
   );
 }

src/components/FooterLinks/Section.tsx

@@ -6,6 +6,8 @@ interface Props extends TSection {}
 
 export default function Section({ title, links }: Props) {
   const { isDesktopHeight } = useApp();
+  console.log(title);
+  console.log(links);
 
   return (
     <div className="hidden lg:flex flex-col gap-10 h-fit max-w-max">

src/components/FooterLinks/data.ts

@@ -4,22 +4,80 @@ export const columns: { sections: Section[] }[] = [
   {
     sections: [
       {
-        title: "Documentation",
+        title: "Build",
+        links: [
+          { text: "Smart Contract", href: "https://docs.darwinia.network/build/smart-contract/interact-with-web3js/", isExternal: true },
+          {
+            text: "Node Operator",
+            href: "https://docs.darwinia.network/build/chain/run-collator-node/",
+            isExternal: true,
+          },
+          {
+            text: "Frontier",
+            href: "https://github.com/polkadot-evm/frontier",
+            isExternal: true,
+          },
+          {
+            text: "Substrate",
+            href: "https://substrate.io/",
+            isExternal: true,
+          },
+          {
+            text: "Polkadot",
+            href: "https://polkadot.network/",
+            isExternal: true,
+          }
+        ],
+      },
+    ],
+  },
+  {
+    sections: [
+      {
+        title: "Community",
+        links: [
+          {
+            text: "Forum",
+            href: "https://github.com/orgs/darwinia-network/discussions",
+            isExternal: true
+          },
+          { 
+            text: "RingDAO",
+            href: "https://docs.darwinia.network/community/ringdao/",
+            isExternal: true,
+          },
+          { text: "DCDAO",
+            href: "https://github.com/orgs/dcdao/discussions",
+            isExternal: true,
+          },
+        ],
+      },
+      {
+        title: "Cross-Chain Stack",
         links: [
-          { text: "Darwinia", href: "https://docs.darwinia.network/", isExternal: true },
           {
             text: "Msgport",
-            href: "https://docs.msgport.xyz/",
+            href: "https://msgport.xyz/",
             isExternal: true,
           },
           {
-            text: "Helix Bridge",
-            href: "https://docs.helixbridge.app/",
+            text: "XAPI",
+            href: "https://github.com/xapi-box",
+            isExternal: true,
+          },
+          {
+            text: "HelixBridge",
+            href: "https://helixbridge.app/",
             isExternal: true,
           },
           {
             text: "XToken",
-            href: "https://xtoken.box/docs.html",
+            href: "https://xtoken.box/",
+            isExternal: true,
+          },
+          {
+            text: "XAccount",
+            href: "https://xaccount.box/",
             isExternal: true,
           },
         ],
@@ -45,26 +103,14 @@ export const columns: { sections: Section[] }[] = [
             isExternal: true,
           },
           { text: "Collaboration", href: "https://github.com/darwinia-network/collaboration", isExternal: true },
+//          { text: "Careers", href: "#", isExternal: true },
           {
             text: "Brand",
             href: "https://darwinia.notion.site/Brand-Assets-9bd35f88f0674232954737577616f2c2",
             isExternal: true,
           },
         ],
       },
-    ],
-  },
-  {
-    sections: [
-      {
-        title: "Collaboration",
-        links: [
-          { text: "Substrate_builders Program" },
-          { text: "Web3 Foundation" },
-          { text: "Web3.0 Bootcamp" },
-          { text: "Polkadot" },
-        ],
-      },
       {
         title: "Others",
         links: [{ text: "About darwinia.network", href: "/about", isExternal: false }],

src/components/FooterLinks/index.tsx

@@ -5,7 +5,7 @@ export default function FooterLinks() {
   return (
     <>
       {columns.map((column, index) => (
-        <div key={index} className="flex flex-col gap-[6.25rem]" data-aos="fade-up" data-aos-delay={(index + 1) * 50}>
+        <div key={index} className="flex flex-col gap-[6.25rem]">
           {column.sections.map((section) => (
             <Section key={section.title} title={section.title} links={section.links} />
           ))}

src/components/Header/OthersPageDesktopHeader.tsx

@@ -22,7 +22,7 @@ export default function OthersPageDesktopHeader() {
   return (
     <div
       className={`w-full h-[6.25rem] flex justify-center items-center fixed top-0 left-0 z-40 transition-colors ${
-        isScrollOver ? "bg-app-white/60 hover:bg-app-white backdrop-blur-[0.625rem]" : "bg-transparent"
+        isScrollOver ? "bg-app-white/60 hover:bg-app-white backdrop-blur-[0.625rem]" : "bg-white"
       }`}
       ref={ref}
     >

src/components/Header/data.ts

@@ -25,7 +25,7 @@ export const navigations: {
       },
       {
         label: "Explorer",
-        link: "https://darwinia.subscan.io",
+        link: "https://explorer.darwinia.network",
         isExternal: true,
       },
       {

src/components/Subscribe.tsx

@@ -60,6 +60,7 @@ export default function Subscribe() {
           >
             Subscribe
           </button>
+
           <button className="absolute -z-50 opacity-0" type="submit" />
         </form>
       </div>

src/components/SubscribeWrap.tsx

@@ -3,7 +3,9 @@ import Subscribe from "./Subscribe";
 export default function SubscribeWrap({ isHomePage }: { isHomePage?: boolean }) {
   return (
     <div
-      className={`hidden lg:flex flex-col gap-5 pb-5 max-w-max ${isHomePage ? "items-end self-end" : "items-start"}`}
+      className={`hidden lg:flex flex-col gap-5 pb-5 max-w-max lg:items-center lg:justify-center 2xl:items-start 2xl:justify-start ${
+        isHomePage ? "items-end self-end" : "items-start"
+      }`}
     >
       <h3 className="text-h2 text-app-white whitespace-nowrap">Subscribe to Project Updates</h3>
       <span className={`text-t16 ${isHomePage ? "text-app-white" : "text-app-gray"}`}>

src/pages/NewHome/index.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import OthersPageWrap from "../../components/OthersPageWrap";
+import Hero from "../../components/CrossChain/Hero";
+import RelayStation from "../../components/CrossChain/RelayStation";
+import OmnichainAccount from "../../components/CrossChain/OmnichainAccount";
+import EVMChain from "../../components/CrossChain/EVMChain";
+import Comprehensive from "../../components/CrossChain/Comprehensive";
+import GovernedSection from "../../components/CrossChain/GovernedSection";
+
+const CrossChain = () => {
+  return (
+    <OthersPageWrap>
+      <Hero />
+      <RelayStation />
+      <OmnichainAccount />
+      <EVMChain />
+      <Comprehensive />
+      <GovernedSection />
+    </OthersPageWrap>
+  );
+};
+
+export default CrossChain;