all the changes from Tibi and Adrian

explorer/.env.development

@@ -5,7 +5,7 @@ GATSBY_GUARDIAN_DEVNET_RPC_URL=http://localhost:7071
 GATSBY_GUARDIAN_TESTNET_RPC_URL=https://wormhole-v2-testnet-api.certus.one
 GATSBY_GUARDIAN_MAINNET_RPC_URL=https://wormhole-v2-mainnet-api.certus.one
 
-GATSBY_BIGTABLE_FUNCTIONS_DEVNET_BASE_URL=http://localhost:8090
+GATSBY_BIGTABLE_FUNCTIONS_DEVNET_BASE_URL=http://localhost:8080/
 GATSBY_BIGTABLE_FUNCTIONS_TESTNET_BASE_URL=https://europe-west3-wormhole-315720.cloudfunctions.net/testnet-
 GATSBY_BIGTABLE_FUNCTIONS_MAINNET_BASE_URL=https://europe-west3-wormhole-315720.cloudfunctions.net/mainnet-
 

explorer/.env.production

@@ -5,7 +5,7 @@ GATSBY_GUARDIAN_DEVNET_RPC_URL=http://localhost:7071
 GATSBY_GUARDIAN_TESTNET_RPC_URL=https://wormhole-v2-testnet-api.certus.one
 GATSBY_GUARDIAN_MAINNET_RPC_URL=https://wormhole-v2-mainnet-api.certus.one
 
-GATSBY_BIGTABLE_FUNCTIONS_DEVNET_BASE_URL=http://localhost:8090
+GATSBY_BIGTABLE_FUNCTIONS_DEVNET_BASE_URL=http://localhost:8080/
 GATSBY_BIGTABLE_FUNCTIONS_TESTNET_BASE_URL=https://europe-west3-wormhole-315720.cloudfunctions.net/testnet-
 GATSBY_BIGTABLE_FUNCTIONS_MAINNET_BASE_URL=https://europe-west3-wormhole-315720.cloudfunctions.net/mainnet-
 

explorer/.env.sample

@@ -5,7 +5,7 @@ GATSBY_GUARDIAN_DEVNET_RPC_URL=http://localhost:7071
 GATSBY_GUARDIAN_TESTNET_RPC_URL=https://wormhole-v2-testnet-api.certus.one
 GATSBY_GUARDIAN_MAINNET_RPC_URL=https://wormhole-v2-mainnet-api.certus.one
 
-GATSBY_BIGTABLE_FUNCTIONS_DEVNET_BASE_URL=http://localhost:8090
+GATSBY_BIGTABLE_FUNCTIONS_DEVNET_BASE_URL=http://localhost:8080/
 GATSBY_BIGTABLE_FUNCTIONS_TESTNET_BASE_URL=https://europe-west3-wormhole-315720.cloudfunctions.net/testnet-
 GATSBY_BIGTABLE_FUNCTIONS_MAINNET_BASE_URL=https://europe-west3-wormhole-315720.cloudfunctions.net/mainnet-
 

explorer/gatsby-browser.js

@@ -1 +1,4 @@
-import "@fontsource/poppins"; // Defaults to weight 400 with all styles included.
+// import "@fontsource/poppins"; // Defaults to weight 400 with all styles included.
+import "@fontsource/poppins/300.css";
+import "@fontsource/poppins/400.css";
+import "./src/styles/global.css"; // bug loading multiple fonts in MuiCssBaseline

explorer/package-lock.json

@@ -28,6 +28,7 @@
         "gatsby-plugin-react-helmet": "^5.4.0",
         "gatsby-plugin-robots-txt": "^1.6.14",
         "gatsby-plugin-sitemap": "^5.4.0",
+        "gsap": "3.9.1",
         "javascript-time-ago": "^2.3.10",
         "path-browserify": "^1.0.1",
         "react": "^17.0.1",
@@ -12003,6 +12004,11 @@
         "graphql": ">=0.11 <=15"
       }
     },
+    "node_modules/gsap": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.9.1.tgz",
+      "integrity": "sha512-JSGVYoC6da4pIjdF/yxFU6Rz8OojOIDkbooveZlfNg0+JIoFoRruyfWAEi6R/gUeNcuOiTqUIb0gi1nCNrHf8w=="
+    },
     "node_modules/gzip-size": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.1.1.tgz",
@@ -29481,6 +29487,11 @@
       "integrity": "sha512-sHkK9+lUm20/BGawNEWNtVAeJzhZeBg21VmvmLoT5NdGVeZWv5PdIhkcayQIAgjSyyQ17WMKmbDijIPG2On+Ag==",
       "requires": {}
     },
+    "gsap": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.9.1.tgz",
+      "integrity": "sha512-JSGVYoC6da4pIjdF/yxFU6Rz8OojOIDkbooveZlfNg0+JIoFoRruyfWAEi6R/gUeNcuOiTqUIb0gi1nCNrHf8w=="
+    },
     "gzip-size": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.1.1.tgz",

explorer/package.json

@@ -30,6 +30,7 @@
     "gatsby-plugin-react-helmet": "^5.4.0",
     "gatsby-plugin-robots-txt": "^1.6.14",
     "gatsby-plugin-sitemap": "^5.4.0",
+    "gsap": "3.9.1",
     "javascript-time-ago": "^2.3.10",
     "path-browserify": "^1.0.1",
     "react": "^17.0.1",

explorer/plugins/gatsby-plugin-top-layout/TopLayout.js

@@ -8,6 +8,10 @@ import TimeAgo from "javascript-time-ago";
 import en from "javascript-time-ago/locale/en";
 import React from "react";
 import { NetworkContextProvider } from "../../src/contexts/NetworkContext";
+import bg from "../../src/images/bg.svg";
+import { Helmet } from "react-helmet";
+
+import Suisse from "../../src/fonts/SuisseBPIntlBold.woff2";
 
 TimeAgo.addDefaultLocale(en);
 
@@ -21,13 +25,54 @@ let theme = createTheme({
   typography: {
     fontFamily: ["Poppins", "Arial"].join(","),
     fontSize: 13,
+    body1: {
+      fontWeight: 300,
+    },
+    body2: {
+      fontWeight: 300,
+    },
     h1: {
       fontWeight: "bold",
+      fontFamily: ["Suisse BP Intl", "Arial"],
+      lineHeight: 0.9,
+      letterSpacing: -2.7,
+    },
+    h3: {
+      fontSize: 49,
+      fontWeight: "bold",
+      fontFamily: "Suisse BP Intl",
+      lineHeight: 0.9,
+      letterSpacing: -1.47,
+    },
+    h4: {
+      fontSize: 40,
+      fontWeight: "bold",
+      fontFamily: "Suisse BP Intl",
+      letterSpacing: -1.2,
+      lineHeight: 0.9,
+    },
+    caption: {
+      textTransform: "uppercase",
+      fontSize: 8,
+      letterSpacing: 2,
+      fontFamily: "Suisse BP Intl",
+      fontWeight: 400,
+      display: "block",
+      marginTop: 10,
     },
   },
+
   components: {
     MuiCssBaseline: {
       styleOverrides: {
+        body: {
+          overscrollBehaviorY: "none",
+          backgroundColor: "#17153f",
+          backgroundImage: `url(${bg})`,
+          backgroundPosition: "top center",
+          backgroundRepeat: "repeat-y",
+          backgroundSize: "120%",
+        },
         ul: {
           paddingLeft: "0px",
         },
@@ -57,9 +102,9 @@ let theme = createTheme({
           fontSize: 12,
           fontWeight: 700,
           letterSpacing: 1.5,
-          padding: "8px 22.5px 6px",
+          padding: "8px 22.5px 8px",
           "&:hover .MuiButton-endIcon": {
-            marginLeft: 16,
+            transform: "translateX(4px)",
           },
         },
         contained: {
@@ -73,7 +118,7 @@ let theme = createTheme({
         },
         endIcon: {
           marginLeft: 12,
-          transition: "margin-left 300ms",
+          transition: "transform 300ms",
         },
       },
     },
@@ -100,6 +145,15 @@ theme = responsiveFontSizes(theme);
 
 const TopLayout = ({ children }) => (
   <ThemeProvider theme={theme}>
+    <Helmet>
+      <link
+        rel="preload"
+        as="font"
+        href={Suisse}
+        type="font/woff2"
+        crossOrigin="anonymous"
+      />
+    </Helmet>
     <CssBaseline />
     <NetworkContextProvider>{children}</NetworkContextProvider>
   </ThemeProvider>

explorer/src/components/ExplorerStats/ChainOverviewCard.tsx

@@ -74,7 +74,7 @@ const ChainOverviewCard: React.FC<ChainOverviewCardProps> = ({
                 </Typography>
               </div>
               <div style={{ marginTop: -10 }}>
-                <Typography variant="subtitle1">received</Typography>
+                <Typography variant="caption">received</Typography>
               </div>
             </div>
           )}
@@ -99,7 +99,7 @@ const ChainOverviewCard: React.FC<ChainOverviewCardProps> = ({
               </Typography>
             </div>
             <div style={{ marginTop: -10 }}>
-              <Typography variant="subtitle1">sent</Typography>
+              <Typography variant="caption">sent</Typography>
             </div>
           </div>
         ) : (
@@ -124,7 +124,7 @@ const ChainOverviewCard: React.FC<ChainOverviewCardProps> = ({
               </Typography>
             </div>
             <div style={{ marginTop: -10 }}>
-              <Typography variant="subtitle1"> messages </Typography>
+              <Typography variant="caption"> messages </Typography>
             </div>
           </div>
         )}

explorer/src/components/ExplorerStats/DailyCountBarChart.tsx

@@ -49,7 +49,7 @@ const DailyCountBarChart = (props: DailyCountProps) => {
   const today = new Date().toISOString().slice(0, 10);
 
   return (
-    <div style={{ height: 400, minWidth: 200, flex: "1", marginBottom: 40 }}>
+    <div style={{ height: 400, minWidth: 360, flex: "1", marginBottom: 40 }}>
       <Typography variant="subtitle1">Messages/Day</Typography>
       <ResponsiveBar
         theme={{ textColor: "rgba(255, 255, 255, 0.85)" }}

explorer/src/components/ExplorerStats/DailyNotionalBarChart.tsx

@@ -75,7 +75,7 @@ const DailyNotionalBarChart = (props: DailyCountProps) => {
     const today = new Date().toISOString().slice(0, 10)
 
     return (
-        <div style={{ height: 400, minWidth: 400, flex: '1', marginBottom: 40 }}>
+        <div style={{ height: 400, minWidth: 360, flex: '1', marginBottom: 40 }}>
             <Typography variant="h4" style={{ marginLeft: 20 }}>value received (USD)</Typography>
 
             <ResponsiveBar

explorer/src/components/ExplorerStats/ExplorerStats.tsx

@@ -65,6 +65,26 @@ export interface NotionalTransferredToCumulative {
     [date: string]: DirectionalTransferData;
   };
 }
+interface LockedAsset {
+  Symbol: string
+  Name: string
+  Address: string
+  CoinGeckoId: string
+  Amount: number
+  Notional: number
+  TokenPrice: number
+}
+interface LockedAssets {
+  [tokenAddress: string]: LockedAsset
+}
+interface ChainsAssets {
+  [chainId: string]: LockedAssets
+}
+export interface NotionalTvl {
+  Last24HoursChange: ChainsAssets
+  AllTime: ChainsAssets
+}
+
 type GroupBy = undefined | "chain" | "address";
 type ForChain = undefined | StatsProps["emitterChain"];
 type ForAddress = undefined | StatsProps["emitterAddress"];
@@ -110,7 +130,7 @@ const ExplorerStats: React.FC<StatsProps> = ({
     signal: AbortSignal
   ) => {
     const totalsUrl = `${baseUrl}totals`;
-    let url = `${totalsUrl}?${daysSinceDataStart}&daily=true`
+    let url = `${totalsUrl}?&daily=true&last24Hours=true`
     if (groupBy) {
       url = `${url}&groupBy=${groupBy}`;
     }
@@ -402,6 +422,7 @@ const ExplorerStats: React.FC<StatsProps> = ({
 
   useEffect(() => {
     return function cleanup() {
+      controller.abort();
       if (pollInterval) {
         clearInterval(pollInterval);
       }

explorer/src/components/ExplorerStats/PastWeekCard.tsx

@@ -76,7 +76,7 @@ const PastWeekCard: React.FC<PastWeekCardProps> = ({
       >
         <DailyCountBarChart dailyCount={messagesForPeriod} />
 
-        {/* <DailyNotionalBarChart daily={notionalTransferredToInPeriod} /> */}
+        <DailyNotionalBarChart daily={notionalTransferredToInPeriod} />
       </div>
 
       <div

explorer/src/components/Footer.tsx

@@ -1,5 +1,6 @@
 import { Box, IconButton, Link, Typography } from "@mui/material";
 import { Link as RouterLink } from "gatsby";
+
 import React from "react";
 import Discord from "../images/Discord.svg";
 import shape from "../images/footer/shape.svg";
@@ -11,6 +12,7 @@ import {
   apps,
   blog,
   buidl,
+  brand,
   discord,
   docs,
   explorer,
@@ -39,6 +41,8 @@ const socialIcon = {
 };
 
 const Footer = () => (
+ <>
+ 
   <Box sx={{ position: "relative" }}>
     <Box
       sx={{
@@ -48,11 +52,26 @@ const Footer = () => (
         background: `url(${shape})`,
         backgroundRepeat: "no-repeat",
         backgroundPosition: { xs: "center center", md: "right top -426px" },
-        // backgroundSize: "cover",
         width: "100%",
         height: { xs: "100%", md: 540 },
+        bottom:0
       }}
     />
+    <Box
+        sx={{
+          position: "absolute",
+          zIndex: -2,
+          top: '-30%',
+          background: 'radial-gradient(closest-side at 50% 50%, #5189C8 0%, #5189C800 100%) ',
+          transform: 'matrix(0.67, 0.74, -0.74, 0.67, 0, 0)',
+          left: '-5%',
+          width: 1136,
+          height: 1489,
+          pointerEvents: 'none',
+          display:{xs: 'none', md: 'block'},
+          opacity: 0.7,
+        }}
+      />   
     <Box
       sx={{
         maxWidth: 1100,
@@ -136,6 +155,15 @@ const Footer = () => (
               >
                 Blog
               </Link>
+              <Link
+                component={RouterLink}
+                to={brand}
+                color="inherit"
+                underline="hover"
+                sx={linkStyle}
+              >
+                Brand
+              </Link>
             </Box>
             <Box>
               <Link
@@ -246,5 +274,7 @@ const Footer = () => (
       </Box>
     </Box>
   </Box>
+ 
+</>
 );
 export default Footer;

explorer/src/components/GridWithCards.tsx

@@ -1,3 +1,4 @@
+import { Block } from "@mui/icons-material";
 import {
   Card,
   CardActionArea,
@@ -12,6 +13,7 @@ import { OutboundLink } from "gatsby-plugin-google-gtag";
 import React from "react";
 
 interface CardData {
+
   key?: string;
   src: string;
   header: string;
@@ -19,6 +21,7 @@ interface CardData {
   href?: string;
   to?: string;
   imgStyle?: React.CSSProperties | undefined;
+  size: number;
 }
 
 const GridWithCards = ({
@@ -56,17 +59,16 @@ const GridWithCards = ({
     justifyContent="space-evenly"
     sx={{ "& > .MuiGrid-item": { pt: { xs: 8.25, md: 5.25 } } }}
   >
-    {data.map(({ key, src, header, description, href, to, imgStyle }) => (
+    {data.map(({ key, src, header, description, size, href, to, imgStyle }) => (
       <Grid key={key || header} item xs={12} sm={sm} md={md}>
         <Card
           sx={{
             backgroundColor: "rgba(255,255,255,.07)",
             backgroundImage: "none",
-            borderRadius: "28px",
-            display: "flex",
-            flexDirection: "column",
+            backdropFilter: 'blur(21px)',
             height: "100%",
             overflow: "visible",
+            borderRadius: "28px",
           }}
         >
           <CardActionArea
@@ -82,7 +84,10 @@ const GridWithCards = ({
               pt: cardPaddingTop,
               borderRadius: "28px",
               height: "100%",
-              "& > div": {
+              display: 'flex',
+              flexDirection: 'column',
+              "& > *": {
+                width: '100%',
                 transition: { md: "300ms top" },
               },
               "&:hover > div": {
@@ -97,17 +102,18 @@ const GridWithCards = ({
               sx={{
                 textAlign: { xs: "center", md: imgAlignMd },
                 position: "relative",
-                right: { xs: null, md: imgOffsetRightMd },
+                marginRight: { xs: 'auto', md: imgOffsetRightMd },
+                marginLeft: { xs: 'auto' },
                 top: { xs: imgOffsetTopXs, md: imgOffsetTopMd },
-                pb: { xs: imgPaddingBottomXs, md: imgPaddingBottomMd },
+                mb: { xs: imgPaddingBottomXs, md: imgPaddingBottomMd },
                 zIndex: 1,
+                width: size,
+                height: size,
               }}
             >
               <img src={src} alt="" style={imgStyle} />
             </Box>
-            <Typography variant="h4" textAlign={headerTextAlign}>
-              {header}
-            </Typography>
+            <Typography variant="h4" textAlign={headerTextAlign}>{header}</Typography>
             <Typography component="div" sx={{ mt: 2, flexGrow: 1 }}>
               {description}
             </Typography>

explorer/src/components/HeroText.tsx

@@ -15,7 +15,7 @@ const HeroText = ({
     <Typography variant="h1">
       <AvoidBreak spans={heroSpans} />
     </Typography>
-    <Typography sx={{ marginTop: 2 }}>
+    <Typography sx={{ marginTop: 2, fontWeight: 400 }}>
       {Array.isArray(subtitleText) ? (
         <AvoidBreak spans={subtitleText} />
       ) : (

explorer/src/components/Layout.tsx

@@ -3,7 +3,7 @@ import Footer from "./Footer";
 import NavBar from "./Navbar";
 
 const Layout: React.FC = ({ children }) => (
-  <main>
+  <main style={{overflow:'hidden'}}>
     <NavBar />
     {children}
     <Footer />

explorer/src/components/Navbar.tsx

@@ -1,6 +1,8 @@
-import { AppBar, Box, Link, Toolbar } from "@mui/material";
+import { AppBar, Hidden, Button,  Box, Link, Toolbar } from "@mui/material";
+import ArrowForward from "@mui/icons-material/ArrowForward";
 import { Link as RouterLink } from "gatsby";
 import React from "react";
+import { OutboundLink } from "gatsby-plugin-google-gtag";
 import hamburger from "../images/hamburger.svg";
 import { apps, blog, buidl, portal } from "../utils/urls";
 import LogoLink from "./LogoLink";
@@ -9,6 +11,30 @@ const linkStyle = { ml: 3, textUnderlineOffset: 6 };
 const linkActiveStyle = { textDecoration: "underline" };
 
 const NavBar = () => (
+  <>
+    <Box sx={{
+      display: 'flex',
+      flexWrap: 'wrap',
+      justifyContent: 'center',
+      alignItems: 'center',
+      background: '#17153f',
+      textAlign: 'center',
+      p: 1
+    }}>
+      <Box sx={{ m: '5px 10px' }}>ImmuneFi bug bounty</Box>
+      <Button
+          component={OutboundLink}
+          href="https://www.immunefi.com/bounty/wormhole/"
+          target='_blank'
+          sx={{m: '5px 10px', flex: '0 0 auto'}}
+          variant="outlined"
+          color="inherit"
+          endIcon={<ArrowForward />}
+        >
+            Learn More
+      </Button>
+    </Box>
+
   <AppBar
     position="static"
     sx={{ backgroundColor: "transparent" }}
@@ -50,5 +76,7 @@ const NavBar = () => (
       </Box> */}
     </Toolbar>
   </AppBar>
+  
+  </>
 );
 export default NavBar;

explorer/src/components/SEO.tsx

@@ -33,7 +33,7 @@ export function SEO({
     const siteUrl = site.siteMetadata.siteUrl
     const defaultTitle = site.siteMetadata?.defaultTitle
     const twitterUsername = `@wormholecrypto`
-    const socialImage = "/logo-and-name_social-card.png"
+    const socialImage = "/wormhole.png"
     const socialImageWidth = '800'
     const socialImageHeight = '400'
     const image = `${siteUrl}${socialImage}`
@@ -180,6 +180,7 @@ export function SEO({
                 // metadata from props
                 .concat(meta)}
         >
+            
             {children}
         </Helmet>
     )

explorer/src/images/bg.svg

@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" opacity="0.56" width="2323.848" height="2555.167" viewBox="0 0 2323.848 2555.167">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_1353" data-name="Rectangle 1353" width="1480.425" height="1527.483" transform="translate(-143)" fill="none" stroke="#fff" stroke-width="0.5"/>
+    </clipPath>
+    <clipPath id="clip-path-2">
+      <rect id="Rectangle_1353-2" data-name="Rectangle 1353" width="1144.425" height="1181.425" fill="none" stroke="#fff" stroke-width="0.5"/>
+    </clipPath>
+  </defs>
+  <g id="Group_3232" data-name="Group 3232" transform="translate(220.424 -104.575)">
+    <g id="Group_2633" data-name="Group 2633" transform="translate(766 1132.259)" opacity="0.25">
+      <g id="Group_2632" data-name="Group 2632" clip-path="url(#clip-path)">
+        <ellipse id="Ellipse_63" data-name="Ellipse 63" cx="667.75" cy="667.75" rx="667.75" ry="667.75" transform="translate(-111.522 154.819)" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="0.5"/>
+        <ellipse id="Ellipse_65" data-name="Ellipse 65" cx="533.168" cy="533.168" rx="533.168" ry="533.168" transform="translate(72.439 188.422)" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="0.5"/>
+        <ellipse id="Ellipse_67" data-name="Ellipse 67" cx="398.586" cy="398.586" rx="398.586" ry="398.586" transform="translate(262.864 280.206)" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="0.5"/>
+        <ellipse id="Ellipse_68" data-name="Ellipse 68" cx="285.397" cy="285.397" rx="285.397" ry="285.397" transform="matrix(-1, -0.008, 0.008, -1, 989.058, 923.378)" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="0.5"/>
+      </g>
+    </g>
+    <g id="Group_2679" data-name="Group 2679" transform="translate(-220.424 104.575)" opacity="0.25">
+      <g id="Group_2632-2" data-name="Group 2632" clip-path="url(#clip-path-2)">
+        <circle id="Ellipse_63-2" data-name="Ellipse 63" cx="516.468" cy="516.468" r="516.468" transform="translate(87.744 119.744)" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="0.5"/>
+        <circle id="Ellipse_65-2" data-name="Ellipse 65" cx="412.376" cy="412.376" r="412.376" transform="translate(153.644 145.734)" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="0.5"/>
+        <circle id="Ellipse_67-2" data-name="Ellipse 67" cx="308.284" cy="308.284" r="308.284" transform="translate(214.545 216.724)" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="0.5"/>
+        <circle id="Ellipse_68-2" data-name="Ellipse 68" cx="220.739" cy="220.739" r="220.739" transform="matrix(1, -0.008, 0.008, 1, 266.011, 272.717)" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="0.5"/>
+      </g>
+    </g>
+  </g>
+</svg>

explorer/src/images/brand/gradient1.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="196.9" height="83.865" viewBox="0 0 196.9 83.865">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_1658" data-name="Rectangle 1658" width="196.901" height="83.865" transform="translate(0 0)" fill="#17153f"/>
+    </clipPath>
+    <radialGradient id="radial-gradient" cx="0.5" cy="0.5" r="0.5" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#5189c8"/>
+      <stop offset="1" stop-color="#5189c8" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="radial-gradient-2" cx="0.5" cy="0.5" r="0.5" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#e72850"/>
+      <stop offset="1" stop-color="#e72850" stop-opacity="0"/>
+    </radialGradient>
+  </defs>
+  <g id="Mask_Group_16" data-name="Mask Group 16" clip-path="url(#clip-path)">
+    <ellipse id="Ellipse_160" data-name="Ellipse 160" cx="71.042" cy="104.16" rx="71.042" ry="104.16" transform="translate(94.295 -95.243) rotate(45)" opacity="0.679" fill="url(#radial-gradient)"/>
+    <ellipse id="Ellipse_161" data-name="Ellipse 161" cx="95.726" cy="53.792" rx="95.726" ry="53.792" transform="matrix(0.875, 0.485, -0.485, 0.875, 90.032, -9.592)" fill="url(#radial-gradient-2)"/>
+  </g>
+</svg>

explorer/src/images/brand/gradient2.svg

@@ -0,0 +1,38 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="156" height="85" viewBox="0 0 156 85">
+  <defs>
+    <linearGradient id="linear-gradient" x1="1" y1="0.012" x2="0" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#e72850"/>
+      <stop offset="1" stop-color="#3d2670"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-2" x1="1" x2="0" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#e72850"/>
+      <stop offset="1" stop-color="#5189c8"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-3" x1="1" x2="0" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#26276f"/>
+      <stop offset="1" stop-color="#5189c8"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-4" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#eeb430"/>
+      <stop offset="1" stop-color="#5189c8"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-5" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#f44b1b"/>
+      <stop offset="1" stop-color="#3d2670"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-6" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#f44b1b"/>
+      <stop offset="1" stop-color="#eeb430"/>
+    </linearGradient>
+  </defs>
+  <g id="Group_3235" data-name="Group 3235" transform="translate(9958 2714)">
+    <g id="Group_3234" data-name="Group 3234">
+      <rect id="Rectangle_1659" data-name="Rectangle 1659" width="47" height="40" transform="translate(-9958 -2714)" fill="url(#linear-gradient)"/>
+      <rect id="Rectangle_1660" data-name="Rectangle 1660" width="47" height="40" transform="translate(-9903 -2714)" fill="url(#linear-gradient-2)"/>
+      <rect id="Rectangle_1662" data-name="Rectangle 1662" width="47" height="40" transform="translate(-9849 -2714)" fill="url(#linear-gradient-3)"/>
+      <rect id="Rectangle_1663" data-name="Rectangle 1663" width="47" height="40" transform="translate(-9849 -2669)" fill="url(#linear-gradient-4)"/>
+      <rect id="Rectangle_1664" data-name="Rectangle 1664" width="47" height="40" transform="translate(-9903 -2669)" fill="url(#linear-gradient-5)"/>
+    </g>
+    <rect id="Rectangle_1665" data-name="Rectangle 1665" width="47" height="40" transform="translate(-9958 -2669)" fill="url(#linear-gradient-6)"/>
+  </g>
+</svg>

explorer/src/images/brand/logo-name.svg

@@ -0,0 +1,23 @@
+<svg id="Group_3063" data-name="Group 3063" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="249.332" height="43.464" viewBox="0 0 249.332 43.464">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_1331" data-name="Rectangle 1331" width="249.332" height="43.464" transform="translate(0 0)" fill="#fff"/>
+    </clipPath>
+  </defs>
+  <g id="Group_2614" data-name="Group 2614" transform="translate(0 0)" clip-path="url(#clip-path)">
+    <path id="Path_1571" data-name="Path 1571" d="M146.389,29.369l-5.7,16.127a.369.369,0,0,1-.379.251h-.433a.4.4,0,0,1-.386-.251l-4.276-11.311L130.945,45.5a.384.384,0,0,1-.379.251h-.44a.379.379,0,0,1-.378-.251l-5.7-16.121c-.088-.25.007-.406.251-.406h1.765a.367.367,0,0,1,.386.251l4.066,12.21,4.133-11.183a.391.391,0,0,1,.386-.25h.372a.383.383,0,0,1,.379.25l4.255,11.183,3.971-12.21a.367.367,0,0,1,.386-.251h1.739c.251,0,.345.156.257.4" transform="translate(-65.489 -15.299)" fill="#fff"/>
+    <path id="Path_1572" data-name="Path 1572" d="M205.2,36.951a8.416,8.416,0,1,1-16.83,0,8.416,8.416,0,1,1,16.83,0m-2.334,0c0-3.91-2.55-6.6-6.082-6.6s-6.082,2.693-6.082,6.6,2.55,6.6,6.082,6.6,6.082-2.693,6.082-6.6" transform="translate(-99.473 -15.026)" fill="#fff"/>
+    <path id="Path_1573" data-name="Path 1573" d="M257.029,44.807a.406.406,0,0,1-.359.67h-1.59a.314.314,0,0,1-.257-.149l-3.991-6.021h-4.289v5.831a.344.344,0,0,1-.338.338h-1.549a.344.344,0,0,1-.338-.338V29.308a.344.344,0,0,1,.338-.338h6.109c4.275,0,6.386,2.246,6.386,5.168a4.865,4.865,0,0,1-4.012,4.9Zm-6.7-7.394c3.362,0,4.492-1.394,4.492-3.274s-1.13-3.274-4.492-3.274h-3.781v6.548Z" transform="translate(-129.02 -15.299)" fill="#fff"/>
+    <path id="Path_1574" data-name="Path 1574" d="M308.354,28.4h.507a.32.32,0,0,1,.338.338v16.1a.32.32,0,0,1-.338.338h-1.549a.32.32,0,0,1-.338-.338V33.41l-6.258,9.058a.257.257,0,0,1-.467,0l-6.257-9.058V44.835a.32.32,0,0,1-.338.338h-1.549a.32.32,0,0,1-.338-.338v-16.1a.32.32,0,0,1,.338-.338h.5a.509.509,0,0,1,.42.23l7.455,10.411,7.461-10.411a.488.488,0,0,1,.412-.23" transform="translate(-154.077 -14.996)" fill="#fff"/>
+    <path id="Path_1575" data-name="Path 1575" d="M365.423,29.308v15.83a.344.344,0,0,1-.338.338h-1.549a.344.344,0,0,1-.338-.338V37.927H352.922v7.211a.344.344,0,0,1-.338.338h-1.549a.344.344,0,0,1-.338-.338V29.308a.344.344,0,0,1,.338-.338h1.549a.344.344,0,0,1,.338.338v6.724H363.2V29.308a.344.344,0,0,1,.338-.338h1.549a.344.344,0,0,1,.338.338" transform="translate(-185.196 -15.299)" fill="#fff"/>
+    <path id="Path_1576" data-name="Path 1576" d="M419.021,36.951a8.416,8.416,0,1,1-16.831,0,8.416,8.416,0,1,1,16.831,0m-2.334,0c0-3.91-2.55-6.6-6.082-6.6s-6.082,2.693-6.082,6.6,2.55,6.6,6.082,6.6,6.082-2.693,6.082-6.6" transform="translate(-212.389 -15.026)" fill="#fff"/>
+    <path id="Path_1577" data-name="Path 1577" d="M469.825,43.92v1.218a.32.32,0,0,1-.338.338H458.48a.344.344,0,0,1-.338-.338V29.308a.344.344,0,0,1,.338-.338h1.549a.344.344,0,0,1,.338.338V43.582h9.119a.32.32,0,0,1,.338.338" transform="translate(-241.937 -15.299)" fill="#fff"/>
+    <path id="Path_1578" data-name="Path 1578" d="M514.28,43.92v1.218a.32.32,0,0,1-.338.338H502.056a.344.344,0,0,1-.338-.338V29.308a.344.344,0,0,1,.338-.338h11.615a.32.32,0,0,1,.338.338v1.218a.32.32,0,0,1-.338.338h-9.728v5.168h8.646a.318.318,0,0,1,.338.331v1.225a.319.319,0,0,1-.338.338h-8.646v5.655h10a.32.32,0,0,1,.338.338" transform="translate(-264.948 -15.299)" fill="#fff"/>
+    <path id="Path_1579" data-name="Path 1579" d="M21.732,43.464A21.732,21.732,0,1,1,43.464,21.732,21.757,21.757,0,0,1,21.732,43.464m0-42.5A20.768,20.768,0,1,0,42.5,21.732,20.791,20.791,0,0,0,21.732.964" transform="translate(0 0)" fill="#fff"/>
+    <path id="Path_1580" data-name="Path 1580" d="M27.97,43.9A19.526,19.526,0,1,1,47.5,24.37,19.548,19.548,0,0,1,27.97,43.9m0-38.217A18.691,18.691,0,1,0,46.661,24.37,18.711,18.711,0,0,0,27.97,5.68" transform="translate(-4.459 -2.558)" fill="#fff"/>
+    <path id="Path_1581" data-name="Path 1581" d="M34.208,44.328a17.32,17.32,0,1,1,17.32-17.32,17.339,17.339,0,0,1-17.32,17.32m0-33.934A16.614,16.614,0,1,0,50.821,27.008,16.632,16.632,0,0,0,34.208,10.394" transform="translate(-8.918 -5.116)" fill="#fff"/>
+    <path id="Path_1582" data-name="Path 1582" d="M40.446,44.761A15.115,15.115,0,1,1,55.56,29.646,15.132,15.132,0,0,1,40.446,44.761m0-29.652A14.536,14.536,0,1,0,54.982,29.646,14.553,14.553,0,0,0,40.446,15.11" transform="translate(-13.377 -7.674)" fill="#fff"/>
+    <path id="Path_1583" data-name="Path 1583" d="M46.683,45.194A12.909,12.909,0,1,1,59.593,32.284,12.924,12.924,0,0,1,46.683,45.194m0-25.368A12.459,12.459,0,1,0,59.142,32.284,12.473,12.473,0,0,0,46.683,19.825" transform="translate(-17.835 -10.232)" fill="#fff"/>
+    <path id="Path_1584" data-name="Path 1584" d="M52.922,45.625a10.7,10.7,0,1,1,10.7-10.7,10.716,10.716,0,0,1-10.7,10.7m0-21.085A10.382,10.382,0,1,0,63.3,34.922,10.393,10.393,0,0,0,52.922,24.54" transform="translate(-22.295 -12.789)" fill="#fff"/>
+  </g>
+</svg>

explorer/src/images/brand/logo.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="66.26" height="66.26" viewBox="0 0 66.26 66.26">
+  <g id="Group_3067" data-name="Group 3067" transform="translate(12576.755 7336.418)">
+    <path id="Path_1579" data-name="Path 1579" d="M33.13,66.26A33.13,33.13,0,1,1,66.26,33.13,33.168,33.168,0,0,1,33.13,66.26m0-64.79A31.66,31.66,0,1,0,64.79,33.13,31.7,31.7,0,0,0,33.13,1.47" transform="translate(-12576.755 -7336.418)" fill="#fff"/>
+    <path id="Path_1580" data-name="Path 1580" d="M38.211,64.379A29.768,29.768,0,1,1,67.978,34.611,29.8,29.8,0,0,1,38.211,64.379m0-58.261A28.493,28.493,0,1,0,66.705,34.611,28.525,28.525,0,0,0,38.211,6.118" transform="translate(-12579.124 -7337.777)" fill="#fff"/>
+    <path id="Path_1581" data-name="Path 1581" d="M43.293,62.5a26.4,26.4,0,1,1,26.4-26.4,26.433,26.433,0,0,1-26.4,26.4m0-51.731A25.327,25.327,0,1,0,68.619,36.092,25.355,25.355,0,0,0,43.293,10.765" transform="translate(-12581.493 -7339.136)" fill="#fff"/>
+    <path id="Path_1582" data-name="Path 1582" d="M48.374,60.616A23.043,23.043,0,1,1,71.415,37.574,23.069,23.069,0,0,1,48.374,60.616m0-45.2a22.161,22.161,0,1,0,22.16,22.161,22.186,22.186,0,0,0-22.16-22.161" transform="translate(-12583.862 -7340.495)" fill="#fff"/>
+    <path id="Path_1583" data-name="Path 1583" d="M53.454,58.735a19.68,19.68,0,1,1,19.68-19.68,19.7,19.7,0,0,1-19.68,19.68m0-38.674A18.994,18.994,0,1,0,72.448,39.055,19.015,19.015,0,0,0,53.454,20.061" transform="translate(-12586.231 -7341.854)" fill="#fff"/>
+    <path id="Path_1584" data-name="Path 1584" d="M58.535,56.853A16.317,16.317,0,1,1,74.853,40.535,16.336,16.336,0,0,1,58.535,56.853m0-32.144A15.827,15.827,0,1,0,74.363,40.535,15.845,15.845,0,0,0,58.535,24.709" transform="translate(-12588.601 -7343.213)" fill="#fff"/>
+  </g>
+</svg>

explorer/src/images/brand/logos.svg

@@ -0,0 +1,66 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="327" height="271" viewBox="0 0 327 271">
+  <g id="Group_3236" data-name="Group 3236" transform="translate(-294 -1344)">
+    <g id="Group_3083" data-name="Group 3083" transform="translate(15640 10955.632)">
+      <rect id="Rectangle_1624" data-name="Rectangle 1624" width="144" height="35" transform="translate(-15254 -9484.632)" fill="#e72850" opacity="0.147"/>
+      <rect id="Rectangle_1626" data-name="Rectangle 1626" width="74" height="35" transform="translate(-15110 -9449.632) rotate(90)" fill="#e72850" opacity="0.147"/>
+      <rect id="Rectangle_1627" data-name="Rectangle 1627" width="74" height="35" transform="translate(-15219 -9449.632) rotate(90)" fill="#e72850" opacity="0.147"/>
+      <rect id="Rectangle_1625" data-name="Rectangle 1625" width="144" height="35" transform="translate(-15254 -9375.632)" fill="#e72850" opacity="0.147"/>
+      <circle id="Ellipse_146" data-name="Ellipse 146" cx="17.5" cy="17.5" r="17.5" transform="translate(-15184 -9429.632)" fill="#e72850" opacity="0.15"/>
+      <circle id="Ellipse_147" data-name="Ellipse 147" cx="17.5" cy="17.5" r="17.5" transform="translate(-15145 -9375.632)" fill="#e72850" opacity="0.15"/>
+      <circle id="Ellipse_150" data-name="Ellipse 150" cx="17.5" cy="17.5" r="17.5" transform="translate(-15254 -9375.632)" fill="#e72850" opacity="0.15"/>
+      <circle id="Ellipse_148" data-name="Ellipse 148" cx="17.5" cy="17.5" r="17.5" transform="translate(-15145 -9484.632)" fill="#e72850" opacity="0.15"/>
+      <circle id="Ellipse_149" data-name="Ellipse 149" cx="17.5" cy="17.5" r="17.5" transform="translate(-15254 -9484.632)" fill="#e72850" opacity="0.15"/>
+      <g id="Group_3082" data-name="Group 3082" transform="translate(-15218.682 -9449.713)">
+        <path id="Path_1579" data-name="Path 1579" d="M36.856,73.711A36.856,36.856,0,1,1,73.711,36.856,36.9,36.9,0,0,1,36.856,73.711m0-72.076a35.22,35.22,0,1,0,35.22,35.22,35.261,35.261,0,0,0-35.22-35.22" transform="translate(0 0)" fill="#fff"/>
+        <path id="Path_1580" data-name="Path 1580" d="M41.559,71.074A33.115,33.115,0,1,1,74.674,37.959,33.153,33.153,0,0,1,41.559,71.074m0-64.813a31.7,31.7,0,1,0,31.7,31.7,31.733,31.733,0,0,0-31.7-31.7" transform="translate(-1.686 -0.968)" fill="#fff"/>
+        <path id="Path_1581" data-name="Path 1581" d="M46.262,68.435A29.374,29.374,0,1,1,75.635,39.062,29.406,29.406,0,0,1,46.262,68.435m0-57.549A28.175,28.175,0,1,0,74.436,39.062,28.207,28.207,0,0,0,46.262,10.886" transform="translate(-3.371 -1.934)" fill="#fff"/>
+        <path id="Path_1582" data-name="Path 1582" d="M50.965,65.8A25.634,25.634,0,1,1,76.6,40.165,25.663,25.663,0,0,1,50.965,65.8m0-50.287A24.653,24.653,0,1,0,75.617,40.165,24.681,24.681,0,0,0,50.965,15.512" transform="translate(-5.058 -2.901)" fill="#fff"/>
+        <path id="Path_1583" data-name="Path 1583" d="M55.667,63.161A21.893,21.893,0,1,1,77.56,41.268,21.918,21.918,0,0,1,55.667,63.161m0-43.023A21.13,21.13,0,1,0,76.8,41.268a21.153,21.153,0,0,0-21.13-21.13" transform="translate(-6.744 -3.868)" fill="#fff"/>
+        <path id="Path_1584" data-name="Path 1584" d="M60.37,60.523A18.152,18.152,0,1,1,78.523,42.37,18.173,18.173,0,0,1,60.37,60.523m0-35.759A17.607,17.607,0,1,0,77.978,42.37,17.627,17.627,0,0,0,60.37,24.764" transform="translate(-8.43 -4.836)" fill="#fff"/>
+      </g>
+      <line id="Line_96" data-name="Line 96" x2="144" transform="translate(-15254 -9449.632)" fill="none" stroke="#e72850" stroke-width="0.3"/>
+      <line id="Line_97" data-name="Line 97" x2="144" transform="translate(-15254 -9375.632)" fill="none" stroke="#e72850" stroke-width="0.3"/>
+      <line id="Line_94" data-name="Line 94" y2="144" transform="translate(-15219 -9484.632)" fill="none" stroke="#e72850" stroke-width="0.3"/>
+      <line id="Line_95" data-name="Line 95" y2="144" transform="translate(-15145 -9484.632)" fill="none" stroke="#e72850" stroke-width="0.3"/>
+      <text id="x" transform="translate(-15169 -9409.632)" fill="#e72850" font-size="12" font-family="DMSans-Bold, DM Sans" font-weight="700" letter-spacing="-0.015em"><tspan x="0" y="0">x</tspan></text>
+      <text id="x-2" data-name="x" transform="translate(-15131 -9464.632)" fill="#e72850" font-size="12" font-family="DMSans-Bold, DM Sans" font-weight="700" letter-spacing="-0.015em"><tspan x="0" y="0">x</tspan></text>
+      <text id="x-3" data-name="x" transform="translate(-15131 -9355.632)" fill="#e72850" font-size="12" font-family="DMSans-Bold, DM Sans" font-weight="700" letter-spacing="-0.015em"><tspan x="0" y="0">x</tspan></text>
+      <text id="x-4" data-name="x" transform="translate(-15241 -9464.632)" fill="#e72850" font-size="12" font-family="DMSans-Bold, DM Sans" font-weight="700" letter-spacing="-0.015em"><tspan x="0" y="0">x</tspan></text>
+      <text id="x-5" data-name="x" transform="translate(-15241 -9355.632)" fill="#e72850" font-size="12" font-family="DMSans-Bold, DM Sans" font-weight="700" letter-spacing="-0.015em"><tspan x="0" y="0">x</tspan></text>
+    </g>
+    <g id="Group_3084" data-name="Group 3084" transform="translate(15615 10965)">
+      <rect id="Rectangle_1620" data-name="Rectangle 1620" width="327" height="23" transform="translate(-15321 -9621)" fill="#e72850" opacity="0.147"/>
+      <rect id="Rectangle_1622" data-name="Rectangle 1622" width="23" height="50" transform="translate(-15321 -9598)" fill="#e72850" opacity="0.147"/>
+      <rect id="Rectangle_1623" data-name="Rectangle 1623" width="23" height="50" transform="translate(-15017 -9598)" fill="#e72850" opacity="0.147"/>
+      <rect id="Rectangle_1621" data-name="Rectangle 1621" width="327" height="23" transform="translate(-15321 -9548)" fill="#e72850" opacity="0.147"/>
+      <circle id="Ellipse_145" data-name="Ellipse 145" cx="11.5" cy="11.5" r="11.5" transform="translate(-15275 -9584)" fill="#e72850" opacity="0.15"/>
+      <path id="Path_1571" data-name="Path 1571" d="M149.063,29.417l-6.384,18.054a.413.413,0,0,1-.424.281h-.484a.445.445,0,0,1-.432-.281l-4.786-12.662-4.778,12.662a.429.429,0,0,1-.424.281h-.492a.425.425,0,0,1-.424-.281l-6.384-18.047c-.1-.28.008-.454.281-.454h1.976a.411.411,0,0,1,.432.281l4.551,13.669L135.916,30.4a.438.438,0,0,1,.432-.28h.416a.429.429,0,0,1,.424.28l4.764,12.518L146.4,29.251a.411.411,0,0,1,.432-.281h1.946c.281,0,.386.174.288.447" transform="translate(-15356.057 -9611.165)" fill="#fff"/>
+      <path id="Path_1572" data-name="Path 1572" d="M207.207,37.966a9.421,9.421,0,1,1-18.841,0,9.421,9.421,0,1,1,18.841,0m-2.612,0c0-4.377-2.855-7.391-6.808-7.391s-6.808,3.014-6.808,7.391,2.855,7.391,6.808,7.391,6.808-3.014,6.808-7.391" transform="translate(-15386.412 -9610.922)" fill="#fff"/>
+      <path id="Path_1573" data-name="Path 1573" d="M258.548,46.7a.455.455,0,0,1-.4.75h-1.78a.351.351,0,0,1-.288-.166l-4.468-6.74h-4.8v6.528a.385.385,0,0,1-.379.379H244.7a.385.385,0,0,1-.378-.379V29.349a.385.385,0,0,1,.378-.379h6.839c4.786,0,7.149,2.515,7.149,5.786a5.446,5.446,0,0,1-4.491,5.483Zm-7.5-8.277c3.764,0,5.028-1.56,5.028-3.665s-1.265-3.665-5.028-3.665h-4.233v7.331Z" transform="translate(-15412.805 -9611.165)" fill="#fff"/>
+      <path id="Path_1574" data-name="Path 1574" d="M310.336,28.4h.568a.358.358,0,0,1,.379.379V46.8a.358.358,0,0,1-.379.379H309.17a.358.358,0,0,1-.379-.379V34.009l-7.005,10.14a.287.287,0,0,1-.522,0l-7-10.14V46.8a.358.358,0,0,1-.379.379h-1.734a.358.358,0,0,1-.379-.379V28.776a.358.358,0,0,1,.379-.379h.561a.57.57,0,0,1,.47.257l8.345,11.655,8.353-11.655a.547.547,0,0,1,.462-.257" transform="translate(-15435.187 -9610.896)" fill="#fff"/>
+      <path id="Path_1575" data-name="Path 1575" d="M367.182,29.349V47.069a.385.385,0,0,1-.379.379H365.07a.385.385,0,0,1-.379-.379V39h-11.5v8.073a.385.385,0,0,1-.379.379h-1.734a.385.385,0,0,1-.379-.379V29.349a.385.385,0,0,1,.379-.379h1.734a.385.385,0,0,1,.379.379v7.528h11.5V29.349a.385.385,0,0,1,.379-.379H366.8a.385.385,0,0,1,.379.379" transform="translate(-15462.983 -9611.165)" fill="#fff"/>
+      <path id="Path_1576" data-name="Path 1576" d="M421.031,37.966a9.421,9.421,0,1,1-18.841,0,9.421,9.421,0,1,1,18.841,0m-2.612,0c0-4.377-2.855-7.391-6.808-7.391s-6.808,3.014-6.808,7.391,2.855,7.391,6.808,7.391,6.808-3.014,6.808-7.391" transform="translate(-15487.273 -9610.922)" fill="#fff"/>
+      <path id="Path_1577" data-name="Path 1577" d="M471.221,45.706v1.363a.358.358,0,0,1-.379.379H458.521a.385.385,0,0,1-.379-.379V29.349a.385.385,0,0,1,.379-.379h1.734a.385.385,0,0,1,.378.379V45.328h10.208a.358.358,0,0,1,.379.379" transform="translate(-15513.667 -9611.165)" fill="#fff"/>
+      <path id="Path_1578" data-name="Path 1578" d="M515.781,45.706v1.363a.358.358,0,0,1-.379.379H502.1a.385.385,0,0,1-.379-.379V29.349a.385.385,0,0,1,.379-.379h13a.358.358,0,0,1,.379.379v1.363a.358.358,0,0,1-.379.379H504.21v5.786h9.678a.356.356,0,0,1,.378.371v1.371a.357.357,0,0,1-.378.378H504.21v6.331H515.4a.358.358,0,0,1,.379.379" transform="translate(-15534.222 -9611.165)" fill="#fff"/>
+      <path id="Path_1579-2" data-name="Path 1579" d="M24.328,48.656A24.328,24.328,0,1,1,48.656,24.328,24.356,24.356,0,0,1,24.328,48.656m0-47.577A23.249,23.249,0,1,0,47.577,24.328,23.275,23.275,0,0,0,24.328,1.079" transform="translate(-15297.559 -9597.5)" fill="#fff"/>
+      <path id="Path_1580-2" data-name="Path 1580" d="M30.3,48.562A21.859,21.859,0,1,1,52.161,26.7,21.884,21.884,0,0,1,30.3,48.562m0-42.782A20.923,20.923,0,1,0,51.226,26.7,20.947,20.947,0,0,0,30.3,5.78" transform="translate(-15301.542 -9599.785)" fill="#fff"/>
+      <path id="Path_1581-2" data-name="Path 1581" d="M36.277,48.466A19.389,19.389,0,1,1,55.666,29.077,19.411,19.411,0,0,1,36.277,48.466m0-37.988a18.6,18.6,0,1,0,18.6,18.6,18.619,18.619,0,0,0-18.6-18.6" transform="translate(-15305.524 -9602.069)" fill="#fff"/>
+      <path id="Path_1582-2" data-name="Path 1582" d="M42.252,48.372a16.921,16.921,0,1,1,16.92-16.921,16.94,16.94,0,0,1-16.92,16.921m0-33.194A16.273,16.273,0,1,0,58.524,31.452,16.292,16.292,0,0,0,42.252,15.179" transform="translate(-15309.508 -9604.354)" fill="#fff"/>
+      <path id="Path_1583-2" data-name="Path 1583" d="M48.226,48.278A14.452,14.452,0,1,1,62.677,33.827,14.468,14.468,0,0,1,48.226,48.278m0-28.4A13.948,13.948,0,1,0,62.173,33.827,13.963,13.963,0,0,0,48.226,19.879" transform="translate(-15313.49 -9606.64)" fill="#fff"/>
+      <path id="Path_1584-2" data-name="Path 1584" d="M54.2,48.183A11.982,11.982,0,1,1,66.182,36.2,12,12,0,0,1,54.2,48.183m0-23.6A11.622,11.622,0,1,0,65.823,36.2,11.635,11.635,0,0,0,54.2,24.578" transform="translate(-15317.473 -9608.924)" fill="#fff"/>
+      <circle id="Ellipse_141" data-name="Ellipse 141" cx="11.5" cy="11.5" r="11.5" transform="translate(-15321 -9548)" fill="#e72850" opacity="0.15"/>
+      <circle id="Ellipse_144" data-name="Ellipse 144" cx="11.5" cy="11.5" r="11.5" transform="translate(-15017 -9548)" fill="#e72850" opacity="0.15"/>
+      <circle id="Ellipse_142" data-name="Ellipse 142" cx="11.5" cy="11.5" r="11.5" transform="translate(-15321 -9621)" fill="#e72850" opacity="0.15"/>
+      <circle id="Ellipse_143" data-name="Ellipse 143" cx="11.5" cy="11.5" r="11.5" transform="translate(-15017 -9621)" fill="#e72850" opacity="0.15"/>
+      <line id="Line_90" data-name="Line 90" x2="327" transform="translate(-15321 -9598)" fill="none" stroke="#e72850" stroke-width="0.3"/>
+      <line id="Line_91" data-name="Line 91" x2="327" transform="translate(-15321 -9548)" fill="none" stroke="#e72850" stroke-width="0.3"/>
+      <line id="Line_92" data-name="Line 92" y2="96" transform="translate(-15298 -9621)" fill="none" stroke="#e72850" stroke-width="0.3"/>
+      <line id="Line_93" data-name="Line 93" y2="96" transform="translate(-15017 -9621)" fill="none" stroke="#e72850" stroke-width="0.3"/>
+      <text id="x-6" data-name="x" transform="translate(-15266 -9570)" fill="#e72850" font-size="12" font-family="DMSans-Bold, DM Sans" font-weight="700" letter-spacing="-0.015em"><tspan x="0" y="0">x</tspan></text>
+      <text id="x-7" data-name="x" transform="translate(-15313 -9607)" fill="#e72850" font-size="12" font-family="DMSans-Bold, DM Sans" font-weight="700" letter-spacing="-0.015em"><tspan x="0" y="0">x</tspan></text>
+      <text id="x-8" data-name="x" transform="translate(-15009 -9607)" fill="#e72850" font-size="12" font-family="DMSans-Bold, DM Sans" font-weight="700" letter-spacing="-0.015em"><tspan x="0" y="0">x</tspan></text>
+      <text id="x-9" data-name="x" transform="translate(-15313 -9533)" fill="#e72850" font-size="12" font-family="DMSans-Bold, DM Sans" font-weight="700" letter-spacing="-0.015em"><tspan x="0" y="0">x</tspan></text>
+      <text id="x-10" data-name="x" transform="translate(-15009 -9533)" fill="#e72850" font-size="12" font-family="DMSans-Bold, DM Sans" font-weight="700" letter-spacing="-0.015em"><tspan x="0" y="0">x</tspan></text>
+    </g>
+  </g>
+</svg>

explorer/src/images/brand/world.svg

@@ -0,0 +1,252 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 469.2 241.6" style="enable-background:new 0 0 469.2 241.6;" xml:space="preserve">
+<style type="text/css">
+	.st0{filter:url(#Rectangle_1586);}
+	.st1{fill:#FFFFFF;}
+	.st2{fill:url(#Rectangle_1588_00000072984838052793609770000016580739207881068976_);}
+	.st3{fill:#17153F;}
+	.st4{clip-path:url(#SVGID_00000111894869100567970070000008178852524558605244_);}
+	.st5{opacity:0.679;fill:url(#Path_1972_00000078045868472253129160000018245583812902236570_);enable-background:new    ;}
+	.st6{fill:url(#Path_1973_00000063591956186286342630000005807507703255243909_);}
+</style>
+<filter  filterUnits="userSpaceOnUse" height="190.251" id="Rectangle_1586" width="303.541" x="0" y="0">
+	<feOffset  input="SourceAlpha"></feOffset>
+	<feGaussianBlur  result="blur" stdDeviation="12.5"></feGaussianBlur>
+	<feFlood  flood-opacity="0.161"></feFlood>
+	<feComposite  in2="blur" operator="in"></feComposite>
+	<feComposite  in="SourceGraphic" operator="over"></feComposite>
+</filter>
+<g id="Group_3240" transform="translate(-721.5 -880.803)">
+	<g id="Group_3238">
+		<g id="Group_3237">
+			<g transform="matrix(1, 0, 0, 1, 721.5, 880.8)" class="st0">
+				<path id="Rectangle_1586-2_00000101083937350879403790000003057290472737524649_" class="st1" d="M13.1,1.4h206.5
+					c6.1,0,11,4.9,11,11v93.3c0,6.1-4.9,11-11,11H13.1c-6.1,0-11-4.9-11-11V12.4C2.1,6.3,7.1,1.4,13.1,1.4z"/>
+			</g>
+			<path id="Rectangle_1587" d="M975.2,882.2h202.5c7.2,0,13,5.8,13,13v89.3c0,7.2-5.8,13-13,13H975.2c-7.2,0-13-5.8-13-13v-89.3
+				C962.2,888,968,882.2,975.2,882.2z"/>
+			
+				<linearGradient id="Rectangle_1588_00000137823246902477658210000013075911900380249477_" gradientUnits="userSpaceOnUse" x1="258.4623" y1="1365.9044" x2="258.8013" y2="1366.8724" gradientTransform="matrix(228.541 0 0 -115.251 -58007.6953 158508.0938)">
+				<stop  offset="0" style="stop-color:#26276F"/>
+				<stop  offset="1" style="stop-color:#5189C8"/>
+			</linearGradient>
+			<path id="Rectangle_1588" style="fill:url(#Rectangle_1588_00000137823246902477658210000013075911900380249477_);" d="
+				M975.2,1007.2h202.5c7.2,0,13,5.8,13,13v89.3c0,7.2-5.8,13-13,13H975.2c-7.2,0-13-5.8-13-13v-89.3
+				C962.2,1013,968,1007.2,975.2,1007.2z"/>
+			<path id="Rectangle_1674" class="st3" d="M736.6,1007.2h202.5c7.2,0,13,5.8,13,13v89.3c0,7.2-5.8,13-13,13H736.6
+				c-7.2,0-13-5.8-13-13v-89.3C723.6,1013,729.5,1007.2,736.6,1007.2z"/>
+		</g>
+		<g>
+			<defs>
+				<path id="SVGID_1_" d="M734.6,1007.2h206.5c6.1,0,11,4.9,11,11v93.3c0,6.1-4.9,11-11,11H734.6c-6.1,0-11-4.9-11-11v-93.3
+					C723.6,1012.1,728.6,1007.2,734.6,1007.2z"/>
+			</defs>
+			<clipPath id="SVGID_00000116213729444295010020000007503588847360528798_">
+				<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+			</clipPath>
+			
+				<g id="Mask_Group_14" transform="translate(759.003 1043.281)" style="clip-path:url(#SVGID_00000116213729444295010020000007503588847360528798_);">
+				
+					<radialGradient id="Path_1972_00000146462170496474873880000014798572949226437285_" cx="-499.7274" cy="325.4244" r="0.5" gradientTransform="matrix(128.1554 128.1554 186.8015 -186.8015 3299.9165 124836.1875)" gradientUnits="userSpaceOnUse">
+					<stop  offset="0" style="stop-color:#5189C8"/>
+					<stop  offset="1" style="stop-color:#5189C8;stop-opacity:0"/>
+				</radialGradient>
+				
+					<path id="Path_1972" style="opacity:0.679;fill:url(#Path_1972_00000146462170496474873880000014798572949226437285_);enable-background:new    ;" d="
+					M132.4-97.4c32.2,38,20,114.1-27.2,169.9S-6.4,142.7-38.6,104.6S-58.6-9.5-11.4-65.3S100.2-135.4,132.4-97.4z"/>
+				
+					<radialGradient id="Path_1973_00000165935009589748603650000011754558051740521130_" cx="-500.2261" cy="324.892" r="0.5" gradientTransform="matrix(202.9145 112.4726 69.4791 -125.3489 79066.0078 97066)" gradientUnits="userSpaceOnUse">
+					<stop  offset="0" style="stop-color:#E72850"/>
+					<stop  offset="1" style="stop-color:#E72850;stop-opacity:0"/>
+				</radialGradient>
+				<path id="Path_1973" style="fill:url(#Path_1973_00000165935009589748603650000011754558051740521130_);" d="M166.4,14.9
+					c53.7,35.2,83.7,92.6,66.9,128.2s-73.8,36-127.5,0.9S22.1,51.4,38.9,15.7S112.7-20.3,166.4,14.9z"/>
+			</g>
+		</g>
+	</g>
+	<g id="Group_3239">
+		<g id="Component_11_1" transform="translate(816.956 1091.09)">
+			<path id="Path_1692" class="st1" d="M1.2-29.7l-2.6,7.3c0,0.1-0.1,0.1-0.2,0.1h-0.2c-0.1,0-0.1,0-0.2-0.1l-1.9-5.1l-1.9,5.1
+				c0,0.1-0.1,0.1-0.2,0.1h-0.2c-0.1,0-0.1,0-0.2-0.1l-2.6-7.3c0-0.1,0-0.2,0.1-0.2H-8c0.1,0,0.1,0,0.2,0.1l1.8,5.5l1.9-5.1
+				c0-0.1,0.1-0.1,0.2-0.1h0.2c0.1,0,0.1,0,0.2,0.1l1.9,5.1l1.8-5.5c0-0.1,0.1-0.1,0.2-0.1h0.8C1.2-29.9,1.2-29.8,1.2-29.7"/>
+			<path id="Path_1693" class="st1" d="M12.4-26.2c0,2.1-1.7,3.8-3.8,3.8c-2.1,0-3.8-1.7-3.8-3.8c0-2.1,1.7-3.8,3.8-3.8
+				c2.1,0,3.8,1.6,3.8,3.7C12.4-26.3,12.4-26.2,12.4-26.2 M11.4-26.2c0.1-1.5-1-2.8-2.5-3c-1.5-0.1-2.8,1-3,2.5c0,0.2,0,0.3,0,0.5
+				c-0.1,1.5,1,2.8,2.5,3c1.5,0.1,2.8-1,3-2.5C11.4-25.9,11.4-26,11.4-26.2"/>
+			<path id="Path_1694" class="st1" d="M22.5-22.8c0.1,0.1,0.1,0.2,0,0.3c0,0-0.1,0-0.1,0h-0.7c0,0-0.1,0-0.1-0.1l-1.8-2.7h-1.9v2.6
+				c0,0.1-0.1,0.2-0.2,0.2h-0.7c-0.1,0-0.2-0.1-0.2-0.2v-7.1c0-0.1,0.1-0.2,0.2-0.2h2.8c1.9,0,2.9,1,2.9,2.3c0,1.1-0.7,2-1.8,2.2
+				L22.5-22.8z M19.4-26.1c1.5,0,2-0.6,2-1.5s-0.5-1.5-2-1.5h-1.7v3H19.4z"/>
+			<path id="Path_1695" class="st1" d="M34.3-30h0.2c0.1,0,0.1,0.1,0.2,0.1c0,0,0,0,0,0v7.3c0,0.1-0.1,0.1-0.1,0.2c0,0,0,0,0,0h-0.7
+				c-0.1,0-0.1-0.1-0.2-0.1c0,0,0,0,0,0v-5.2l-2.8,4.1c0,0.1-0.1,0.1-0.2,0.1c0,0,0,0-0.1-0.1l-2.8-4.1v5.2c0,0.1-0.1,0.1-0.1,0.2
+				c0,0,0,0,0,0H27c-0.1,0-0.1-0.1-0.2-0.1c0,0,0,0,0,0v-7.3c0-0.1,0.1-0.1,0.1-0.2c0,0,0,0,0,0h0.2c0.1,0,0.1,0,0.2,0.1l3.4,4.7
+				l3.4-4.7C34.2-30,34.3-30,34.3-30"/>
+			<path id="Path_1696" class="st1" d="M46.1-29.8v7.2c0,0.1-0.1,0.2-0.2,0.2h-0.7c-0.1,0-0.2-0.1-0.2-0.2v-3.3h-4.6v3.3
+				c0,0.1-0.1,0.2-0.2,0.2h-0.7c-0.1,0-0.2-0.1-0.2-0.2v-7.2c0-0.1,0.1-0.2,0.2-0.2h0.7c0.1,0,0.2,0.1,0.2,0.2v3h4.6v-3
+				c0-0.1,0.1-0.2,0.2-0.2h0.7C46-29.9,46.1-29.9,46.1-29.8"/>
+			<path id="Path_1697" class="st1" d="M58-26.2c0,2.1-1.7,3.8-3.8,3.8c-2.1,0-3.8-1.7-3.8-3.8c0-2.1,1.7-3.8,3.8-3.8
+				c2.1,0,3.8,1.6,3.8,3.7C58-26.3,58-26.2,58-26.2 M56.9-26.2c0.1-1.5-1-2.8-2.5-3s-2.8,1-3,2.5c0,0.2,0,0.3,0,0.5
+				c-0.1,1.5,1,2.8,2.5,3c1.5,0.1,2.8-1,3-2.5C56.9-25.9,56.9-26,56.9-26.2"/>
+			<path id="Path_1698" class="st1" d="M67.6-23.2v0.5c0,0.1-0.1,0.1-0.1,0.2c0,0,0,0,0,0h-5c-0.1,0-0.2-0.1-0.2-0.2v-7.2
+				c0-0.1,0.1-0.2,0.2-0.2h0.7c0.1,0,0.2,0.1,0.2,0.2v6.4h4.1C67.5-23.3,67.6-23.3,67.6-23.2C67.6-23.2,67.6-23.2,67.6-23.2"/>
+			<path id="Path_1699" class="st1" d="M77.3-23.2v0.5c0,0.1-0.1,0.1-0.1,0.2c0,0,0,0,0,0h-5.4c-0.1,0-0.2-0.1-0.2-0.2v-7.2
+				c0-0.1,0.1-0.2,0.2-0.2H77c0.1,0,0.1,0.1,0.2,0.1c0,0,0,0,0,0v0.5c0,0.1-0.1,0.1-0.1,0.2c0,0,0,0,0,0h-4.4v2.3h3.9
+				c0.1,0,0.1,0.1,0.2,0.1c0,0,0,0,0,0v0.6c0,0.1-0.1,0.1-0.1,0.2c0,0,0,0,0,0h-3.9v2.6h4.5C77.2-23.3,77.3-23.3,77.3-23.2
+				C77.3-23.2,77.3-23.2,77.3-23.2"/>
+			<path id="Path_1700" class="st1" d="M-25.5-16.5c-5.4,0-9.8-4.4-9.8-9.8s4.4-9.8,9.8-9.8s9.8,4.4,9.8,9.8l0,0
+				C-15.7-20.9-20.1-16.5-25.5-16.5 M-25.5-35.7c-5.2,0-9.4,4.2-9.4,9.4s4.2,9.4,9.4,9.4c5.2,0,9.4-4.2,9.4-9.4
+				C-16.2-31.5-20.4-35.7-25.5-35.7"/>
+			<path id="Path_1701" class="st1" d="M-24.7-17.4c-4.9,0-8.8-3.9-8.8-8.8s3.9-8.8,8.8-8.8s8.8,3.9,8.8,8.8l0,0
+				C-15.9-21.4-19.9-17.4-24.7-17.4 M-24.7-34.7c-4.7,0-8.4,3.8-8.4,8.4s3.8,8.4,8.4,8.4s8.4-3.8,8.4-8.4
+				C-16.3-30.9-20.1-34.7-24.7-34.7"/>
+			<path id="Path_1702" class="st1" d="M-23.9-18.4c-4.3,0-7.8-3.5-7.8-7.8s3.5-7.8,7.8-7.8s7.8,3.5,7.8,7.8l0,0
+				C-16.1-21.9-19.6-18.4-23.9-18.4 M-23.9-33.7c-4.1,0-7.5,3.4-7.5,7.5s3.4,7.5,7.5,7.5c4.1,0,7.5-3.4,7.5-7.5
+				C-16.4-30.3-19.8-33.7-23.9-33.7"/>
+			<path id="Path_1703" class="st1" d="M-23.1-19.3c-3.8,0-6.8-3.1-6.8-6.8s3.1-6.8,6.8-6.8c3.8,0,6.8,3.1,6.8,6.8v0
+				C-16.3-22.4-19.4-19.3-23.1-19.3 M-23.1-32.7c-3.6,0-6.6,2.9-6.6,6.6c0,3.6,2.9,6.6,6.6,6.6c3.6,0,6.6-2.9,6.6-6.6c0,0,0,0,0,0
+				C-16.6-29.8-19.5-32.7-23.1-32.7"/>
+			<path id="Path_1704" class="st1" d="M-22.3-20.3c-3.2,0-5.8-2.6-5.8-5.8c0-3.2,2.6-5.8,5.8-5.8c3.2,0,5.8,2.6,5.8,5.8l0,0
+				C-16.5-22.9-19.1-20.3-22.3-20.3 M-22.3-31.8c-3.1,0-5.6,2.5-5.6,5.6s2.5,5.6,5.6,5.6c3.1,0,5.6-2.5,5.6-5.6l0,0
+				C-16.7-29.2-19.2-31.8-22.3-31.8"/>
+			<path id="Path_1705" class="st1" d="M-21.5-21.3c-2.7,0-4.8-2.2-4.8-4.8c0-2.7,2.2-4.8,4.8-4.8c2.7,0,4.8,2.2,4.8,4.8v0
+				C-16.7-23.4-18.9-21.3-21.5-21.3 M-21.5-30.8c-2.6,0-4.7,2.1-4.7,4.7s2.1,4.7,4.7,4.7c2.6,0,4.7-2.1,4.7-4.7c0,0,0,0,0,0
+				C-16.8-28.7-18.9-30.8-21.5-30.8"/>
+		</g>
+		<g id="Group_3076" transform="translate(1055.437 1091.09)">
+			<path id="Path_1692-2" class="st1" d="M1.2-29.7l-2.6,7.3c0,0.1-0.1,0.1-0.2,0.1h-0.2c-0.1,0-0.1,0-0.2-0.1l-1.9-5.1l-1.9,5.1
+				c0,0.1-0.1,0.1-0.2,0.1h-0.2c-0.1,0-0.1,0-0.2-0.1l-2.6-7.3c0-0.1,0-0.2,0.1-0.2H-8c0.1,0,0.1,0,0.2,0.1l1.8,5.5l1.9-5.1
+				c0-0.1,0.1-0.1,0.2-0.1h0.2c0.1,0,0.1,0,0.2,0.1l1.9,5.1l1.8-5.5c0-0.1,0.1-0.1,0.2-0.1h0.8C1.2-29.9,1.2-29.8,1.2-29.7"/>
+			<path id="Path_1693-2" class="st1" d="M12.4-26.2c0,2.1-1.7,3.8-3.8,3.8c-2.1,0-3.8-1.7-3.8-3.8c0-2.1,1.7-3.8,3.8-3.8
+				c2.1,0,3.8,1.6,3.8,3.7C12.4-26.3,12.4-26.2,12.4-26.2 M11.4-26.2c0.1-1.5-1-2.8-2.5-3c-1.5-0.1-2.8,1-3,2.5c0,0.2,0,0.3,0,0.5
+				c-0.1,1.5,1,2.8,2.5,3c1.5,0.1,2.8-1,3-2.5C11.4-25.9,11.4-26,11.4-26.2"/>
+			<path id="Path_1694-2" class="st1" d="M22.5-22.8c0.1,0.1,0.1,0.2,0,0.3c0,0-0.1,0-0.1,0h-0.7c0,0-0.1,0-0.1-0.1l-1.8-2.7h-1.9
+				v2.6c0,0.1-0.1,0.2-0.2,0.2h-0.7c-0.1,0-0.2-0.1-0.2-0.2v-7.1c0-0.1,0.1-0.2,0.2-0.2h2.8c1.9,0,2.9,1,2.9,2.3
+				c0,1.1-0.7,2-1.8,2.2L22.5-22.8z M19.4-26.1c1.5,0,2-0.6,2-1.5s-0.5-1.5-2-1.5h-1.7v3H19.4z"/>
+			<path id="Path_1695-2" class="st1" d="M34.3-30h0.2c0.1,0,0.1,0.1,0.2,0.1c0,0,0,0,0,0v7.3c0,0.1-0.1,0.1-0.1,0.2c0,0,0,0,0,0
+				h-0.7c-0.1,0-0.1-0.1-0.2-0.1c0,0,0,0,0,0v-5.2l-2.8,4.1c0,0.1-0.1,0.1-0.2,0.1c0,0,0,0-0.1-0.1l-2.8-4.1v5.2
+				c0,0.1-0.1,0.1-0.1,0.2c0,0,0,0,0,0H27c-0.1,0-0.1-0.1-0.2-0.1c0,0,0,0,0,0v-7.3c0-0.1,0.1-0.1,0.1-0.2c0,0,0,0,0,0h0.2
+				c0.1,0,0.1,0,0.2,0.1l3.4,4.7l3.4-4.7C34.2-30,34.3-30,34.3-30"/>
+			<path id="Path_1696-2" class="st1" d="M46.1-29.8v7.2c0,0.1-0.1,0.2-0.2,0.2h-0.7c-0.1,0-0.2-0.1-0.2-0.2v-3.3h-4.6v3.3
+				c0,0.1-0.1,0.2-0.2,0.2h-0.7c-0.1,0-0.2-0.1-0.2-0.2v-7.2c0-0.1,0.1-0.2,0.2-0.2h0.7c0.1,0,0.2,0.1,0.2,0.2v3h4.6v-3
+				c0-0.1,0.1-0.2,0.2-0.2h0.7C46-29.9,46.1-29.9,46.1-29.8"/>
+			<path id="Path_1697-2" class="st1" d="M58-26.2c0,2.1-1.7,3.8-3.8,3.8c-2.1,0-3.8-1.7-3.8-3.8c0-2.1,1.7-3.8,3.8-3.8
+				c2.1,0,3.8,1.6,3.8,3.7C58-26.3,58-26.2,58-26.2 M56.9-26.2c0.1-1.5-1-2.8-2.5-3s-2.8,1-3,2.5c0,0.2,0,0.3,0,0.5
+				c-0.1,1.5,1,2.8,2.5,3c1.5,0.1,2.8-1,3-2.5C56.9-25.9,56.9-26,56.9-26.2"/>
+			<path id="Path_1698-2" class="st1" d="M67.6-23.2v0.5c0,0.1-0.1,0.1-0.1,0.2c0,0,0,0,0,0h-5c-0.1,0-0.2-0.1-0.2-0.2v-7.2
+				c0-0.1,0.1-0.2,0.2-0.2h0.7c0.1,0,0.2,0.1,0.2,0.2v6.4h4.1C67.5-23.3,67.6-23.3,67.6-23.2C67.6-23.2,67.6-23.2,67.6-23.2"/>
+			<path id="Path_1699-2" class="st1" d="M77.3-23.2v0.5c0,0.1-0.1,0.1-0.1,0.2c0,0,0,0,0,0h-5.4c-0.1,0-0.2-0.1-0.2-0.2v-7.2
+				c0-0.1,0.1-0.2,0.2-0.2H77c0.1,0,0.1,0.1,0.2,0.1c0,0,0,0,0,0v0.5c0,0.1-0.1,0.1-0.1,0.2c0,0,0,0,0,0h-4.4v2.3h3.9
+				c0.1,0,0.1,0.1,0.2,0.1c0,0,0,0,0,0v0.6c0,0.1-0.1,0.1-0.1,0.2c0,0,0,0,0,0h-3.9v2.6h4.5C77.2-23.3,77.3-23.3,77.3-23.2
+				C77.3-23.2,77.3-23.2,77.3-23.2"/>
+			<path id="Path_1700-2" class="st1" d="M-25.5-16.5c-5.4,0-9.8-4.4-9.8-9.8s4.4-9.8,9.8-9.8s9.8,4.4,9.8,9.8l0,0
+				C-15.7-20.9-20.1-16.5-25.5-16.5 M-25.5-35.7c-5.2,0-9.4,4.2-9.4,9.4s4.2,9.4,9.4,9.4c5.2,0,9.4-4.2,9.4-9.4
+				C-16.2-31.5-20.4-35.7-25.5-35.7"/>
+			<path id="Path_1701-2" class="st1" d="M-24.7-17.4c-4.9,0-8.8-3.9-8.8-8.8s3.9-8.8,8.8-8.8s8.8,3.9,8.8,8.8l0,0
+				C-15.9-21.4-19.9-17.4-24.7-17.4 M-24.7-34.7c-4.7,0-8.4,3.8-8.4,8.4s3.8,8.4,8.4,8.4s8.4-3.8,8.4-8.4
+				C-16.3-30.9-20.1-34.7-24.7-34.7"/>
+			<path id="Path_1702-2" class="st1" d="M-23.9-18.4c-4.3,0-7.8-3.5-7.8-7.8s3.5-7.8,7.8-7.8s7.8,3.5,7.8,7.8l0,0
+				C-16.1-21.9-19.6-18.4-23.9-18.4 M-23.9-33.7c-4.1,0-7.5,3.4-7.5,7.5s3.4,7.5,7.5,7.5c4.1,0,7.5-3.4,7.5-7.5
+				C-16.4-30.3-19.8-33.7-23.9-33.7"/>
+			<path id="Path_1703-2" class="st1" d="M-23.1-19.3c-3.8,0-6.8-3.1-6.8-6.8s3.1-6.8,6.8-6.8c3.8,0,6.8,3.1,6.8,6.8v0
+				C-16.3-22.4-19.4-19.3-23.1-19.3 M-23.1-32.7c-3.6,0-6.6,2.9-6.6,6.6c0,3.6,2.9,6.6,6.6,6.6c3.6,0,6.6-2.9,6.6-6.6c0,0,0,0,0,0
+				C-16.6-29.8-19.5-32.7-23.1-32.7"/>
+			<path id="Path_1704-2" class="st1" d="M-22.3-20.3c-3.2,0-5.8-2.6-5.8-5.8c0-3.2,2.6-5.8,5.8-5.8c3.2,0,5.8,2.6,5.8,5.8l0,0
+				C-16.5-22.9-19.1-20.3-22.3-20.3 M-22.3-31.8c-3.1,0-5.6,2.5-5.6,5.6s2.5,5.6,5.6,5.6c3.1,0,5.6-2.5,5.6-5.6l0,0
+				C-16.7-29.2-19.2-31.8-22.3-31.8"/>
+			<path id="Path_1705-2" class="st1" d="M-21.5-21.3c-2.7,0-4.8-2.2-4.8-4.8c0-2.7,2.2-4.8,4.8-4.8c2.7,0,4.8,2.2,4.8,4.8v0
+				C-16.7-23.4-18.9-21.3-21.5-21.3 M-21.5-30.8c-2.6,0-4.7,2.1-4.7,4.7s2.1,4.7,4.7,4.7c2.6,0,4.7-2.1,4.7-4.7c0,0,0,0,0,0
+				C-16.8-28.7-18.9-30.8-21.5-30.8"/>
+		</g>
+		<g id="Group_3077" transform="translate(1055.437 967.111)">
+			<path id="Path_1692-3" class="st1" d="M1.2-29.7l-2.6,7.3c0,0.1-0.1,0.1-0.2,0.1h-0.2c-0.1,0-0.1,0-0.2-0.1l-1.9-5.1l-1.9,5.1
+				c0,0.1-0.1,0.1-0.2,0.1h-0.2c-0.1,0-0.1,0-0.2-0.1l-2.6-7.3c0-0.1,0-0.2,0.1-0.2H-8c0.1,0,0.1,0,0.2,0.1l1.8,5.5l1.9-5.1
+				c0-0.1,0.1-0.1,0.2-0.1h0.2c0.1,0,0.1,0,0.2,0.1l1.9,5.1l1.8-5.5c0-0.1,0.1-0.1,0.2-0.1h0.8C1.2-29.9,1.2-29.8,1.2-29.7"/>
+			<path id="Path_1693-3" class="st1" d="M12.4-26.2c0,2.1-1.7,3.8-3.8,3.8c-2.1,0-3.8-1.7-3.8-3.8c0-2.1,1.7-3.8,3.8-3.8
+				c2.1,0,3.8,1.6,3.8,3.7C12.4-26.3,12.4-26.2,12.4-26.2 M11.4-26.2c0.1-1.5-1-2.8-2.5-3c-1.5-0.1-2.8,1-3,2.5c0,0.2,0,0.3,0,0.5
+				c-0.1,1.5,1,2.8,2.5,3c1.5,0.1,2.8-1,3-2.5C11.4-25.9,11.4-26,11.4-26.2"/>
+			<path id="Path_1694-3" class="st1" d="M22.5-22.8c0.1,0.1,0.1,0.2,0,0.3c0,0-0.1,0-0.1,0h-0.7c0,0-0.1,0-0.1-0.1l-1.8-2.7h-1.9
+				v2.6c0,0.1-0.1,0.2-0.2,0.2h-0.7c-0.1,0-0.2-0.1-0.2-0.2v-7.1c0-0.1,0.1-0.2,0.2-0.2h2.8c1.9,0,2.9,1,2.9,2.3
+				c0,1.1-0.7,2-1.8,2.2L22.5-22.8z M19.4-26.1c1.5,0,2-0.6,2-1.5s-0.5-1.5-2-1.5h-1.7v3H19.4z"/>
+			<path id="Path_1695-3" class="st1" d="M34.3-30h0.2c0.1,0,0.1,0.1,0.2,0.1c0,0,0,0,0,0v7.3c0,0.1-0.1,0.1-0.1,0.2c0,0,0,0,0,0
+				h-0.7c-0.1,0-0.1-0.1-0.2-0.1c0,0,0,0,0,0v-5.2l-2.8,4.1c0,0.1-0.1,0.1-0.2,0.1c0,0,0,0-0.1-0.1l-2.8-4.1v5.2
+				c0,0.1-0.1,0.1-0.1,0.2c0,0,0,0,0,0H27c-0.1,0-0.1-0.1-0.2-0.1c0,0,0,0,0,0v-7.3c0-0.1,0.1-0.1,0.1-0.2c0,0,0,0,0,0h0.2
+				c0.1,0,0.1,0,0.2,0.1l3.4,4.7l3.4-4.7C34.2-30,34.3-30,34.3-30"/>
+			<path id="Path_1696-3" class="st1" d="M46.1-29.8v7.2c0,0.1-0.1,0.2-0.2,0.2h-0.7c-0.1,0-0.2-0.1-0.2-0.2v-3.3h-4.6v3.3
+				c0,0.1-0.1,0.2-0.2,0.2h-0.7c-0.1,0-0.2-0.1-0.2-0.2v-7.2c0-0.1,0.1-0.2,0.2-0.2h0.7c0.1,0,0.2,0.1,0.2,0.2v3h4.6v-3
+				c0-0.1,0.1-0.2,0.2-0.2h0.7C46-29.9,46.1-29.9,46.1-29.8"/>
+			<path id="Path_1697-3" class="st1" d="M58-26.2c0,2.1-1.7,3.8-3.8,3.8c-2.1,0-3.8-1.7-3.8-3.8c0-2.1,1.7-3.8,3.8-3.8
+				c2.1,0,3.8,1.6,3.8,3.7C58-26.3,58-26.2,58-26.2 M56.9-26.2c0.1-1.5-1-2.8-2.5-3s-2.8,1-3,2.5c0,0.2,0,0.3,0,0.5
+				c-0.1,1.5,1,2.8,2.5,3c1.5,0.1,2.8-1,3-2.5C56.9-25.9,56.9-26,56.9-26.2"/>
+			<path id="Path_1698-3" class="st1" d="M67.6-23.2v0.5c0,0.1-0.1,0.1-0.1,0.2c0,0,0,0,0,0h-5c-0.1,0-0.2-0.1-0.2-0.2v-7.2
+				c0-0.1,0.1-0.2,0.2-0.2h0.7c0.1,0,0.2,0.1,0.2,0.2v6.4h4.1C67.5-23.3,67.6-23.3,67.6-23.2C67.6-23.2,67.6-23.2,67.6-23.2"/>
+			<path id="Path_1699-3" class="st1" d="M77.3-23.2v0.5c0,0.1-0.1,0.1-0.1,0.2c0,0,0,0,0,0h-5.4c-0.1,0-0.2-0.1-0.2-0.2v-7.2
+				c0-0.1,0.1-0.2,0.2-0.2H77c0.1,0,0.1,0.1,0.2,0.1c0,0,0,0,0,0v0.5c0,0.1-0.1,0.1-0.1,0.2c0,0,0,0,0,0h-4.4v2.3h3.9
+				c0.1,0,0.1,0.1,0.2,0.1c0,0,0,0,0,0v0.6c0,0.1-0.1,0.1-0.1,0.2c0,0,0,0,0,0h-3.9v2.6h4.5C77.2-23.3,77.3-23.3,77.3-23.2
+				C77.3-23.2,77.3-23.2,77.3-23.2"/>
+			<path id="Path_1700-3" class="st1" d="M-25.5-16.5c-5.4,0-9.8-4.4-9.8-9.8s4.4-9.8,9.8-9.8s9.8,4.4,9.8,9.8l0,0
+				C-15.7-20.9-20.1-16.5-25.5-16.5 M-25.5-35.7c-5.2,0-9.4,4.2-9.4,9.4s4.2,9.4,9.4,9.4c5.2,0,9.4-4.2,9.4-9.4
+				C-16.2-31.5-20.4-35.7-25.5-35.7"/>
+			<path id="Path_1701-3" class="st1" d="M-24.7-17.4c-4.9,0-8.8-3.9-8.8-8.8s3.9-8.8,8.8-8.8s8.8,3.9,8.8,8.8l0,0
+				C-15.9-21.4-19.9-17.4-24.7-17.4 M-24.7-34.7c-4.7,0-8.4,3.8-8.4,8.4s3.8,8.4,8.4,8.4s8.4-3.8,8.4-8.4
+				C-16.3-30.9-20.1-34.7-24.7-34.7"/>
+			<path id="Path_1702-3" class="st1" d="M-23.9-18.4c-4.3,0-7.8-3.5-7.8-7.8s3.5-7.8,7.8-7.8s7.8,3.5,7.8,7.8l0,0
+				C-16.1-21.9-19.6-18.4-23.9-18.4 M-23.9-33.7c-4.1,0-7.5,3.4-7.5,7.5s3.4,7.5,7.5,7.5c4.1,0,7.5-3.4,7.5-7.5
+				C-16.4-30.3-19.8-33.7-23.9-33.7"/>
+			<path id="Path_1703-3" class="st1" d="M-23.1-19.3c-3.8,0-6.8-3.1-6.8-6.8s3.1-6.8,6.8-6.8c3.8,0,6.8,3.1,6.8,6.8v0
+				C-16.3-22.4-19.4-19.3-23.1-19.3 M-23.1-32.7c-3.6,0-6.6,2.9-6.6,6.6c0,3.6,2.9,6.6,6.6,6.6c3.6,0,6.6-2.9,6.6-6.6c0,0,0,0,0,0
+				C-16.6-29.8-19.5-32.7-23.1-32.7"/>
+			<path id="Path_1704-3" class="st1" d="M-22.3-20.3c-3.2,0-5.8-2.6-5.8-5.8c0-3.2,2.6-5.8,5.8-5.8c3.2,0,5.8,2.6,5.8,5.8l0,0
+				C-16.5-22.9-19.1-20.3-22.3-20.3 M-22.3-31.8c-3.1,0-5.6,2.5-5.6,5.6s2.5,5.6,5.6,5.6c3.1,0,5.6-2.5,5.6-5.6l0,0
+				C-16.7-29.2-19.2-31.8-22.3-31.8"/>
+			<path id="Path_1705-3" class="st1" d="M-21.5-21.3c-2.7,0-4.8-2.2-4.8-4.8c0-2.7,2.2-4.8,4.8-4.8c2.7,0,4.8,2.2,4.8,4.8v0
+				C-16.7-23.4-18.9-21.3-21.5-21.3 M-21.5-30.8c-2.6,0-4.7,2.1-4.7,4.7s2.1,4.7,4.7,4.7c2.6,0,4.7-2.1,4.7-4.7c0,0,0,0,0,0
+				C-16.8-28.7-18.9-30.8-21.5-30.8"/>
+		</g>
+		<g id="Component_10_1" transform="translate(816.956 967.111)">
+			<path id="Path_1692-4" d="M1.2-29.7l-2.6,7.3c0,0.1-0.1,0.1-0.2,0.1h-0.2c-0.1,0-0.1,0-0.2-0.1l-1.9-5.1l-1.9,5.1
+				c0,0.1-0.1,0.1-0.2,0.1h-0.2c-0.1,0-0.1,0-0.2-0.1l-2.6-7.3c0-0.1,0-0.2,0.1-0.2H-8c0.1,0,0.1,0,0.2,0.1l1.8,5.5l1.9-5.1
+				c0-0.1,0.1-0.1,0.2-0.1h0.2c0.1,0,0.1,0,0.2,0.1l1.9,5.1l1.8-5.5c0-0.1,0.1-0.1,0.2-0.1h0.8C1.2-29.9,1.2-29.8,1.2-29.7"/>
+			<path id="Path_1693-4" d="M12.4-26.2c0,2.1-1.7,3.8-3.8,3.8c-2.1,0-3.8-1.7-3.8-3.8c0-2.1,1.7-3.8,3.8-3.8c2.1,0,3.8,1.6,3.8,3.7
+				C12.4-26.3,12.4-26.2,12.4-26.2 M11.4-26.2c0.1-1.5-1-2.8-2.5-3c-1.5-0.1-2.8,1-3,2.5c0,0.2,0,0.3,0,0.5c-0.1,1.5,1,2.8,2.5,3
+				c1.5,0.1,2.8-1,3-2.5C11.4-25.9,11.4-26,11.4-26.2"/>
+			<path id="Path_1694-4" d="M22.5-22.8c0.1,0.1,0.1,0.2,0,0.3c0,0-0.1,0-0.1,0h-0.7c0,0-0.1,0-0.1-0.1l-1.8-2.7h-1.9v2.6
+				c0,0.1-0.1,0.2-0.2,0.2h-0.7c-0.1,0-0.2-0.1-0.2-0.2v-7.1c0-0.1,0.1-0.2,0.2-0.2h2.8c1.9,0,2.9,1,2.9,2.3c0,1.1-0.7,2-1.8,2.2
+				L22.5-22.8z M19.4-26.1c1.5,0,2-0.6,2-1.5s-0.5-1.5-2-1.5h-1.7v3H19.4z"/>
+			<path id="Path_1695-4" d="M34.3-30h0.2c0.1,0,0.1,0.1,0.2,0.1c0,0,0,0,0,0v7.3c0,0.1-0.1,0.1-0.1,0.2c0,0,0,0,0,0h-0.7
+				c-0.1,0-0.1-0.1-0.2-0.1c0,0,0,0,0,0v-5.2l-2.8,4.1c0,0.1-0.1,0.1-0.2,0.1c0,0,0,0-0.1-0.1l-2.8-4.1v5.2c0,0.1-0.1,0.1-0.1,0.2
+				c0,0,0,0,0,0H27c-0.1,0-0.1-0.1-0.2-0.1c0,0,0,0,0,0v-7.3c0-0.1,0.1-0.1,0.1-0.2c0,0,0,0,0,0h0.2c0.1,0,0.1,0,0.2,0.1l3.4,4.7
+				l3.4-4.7C34.2-30,34.3-30,34.3-30"/>
+			<path id="Path_1696-4" d="M46.1-29.8v7.2c0,0.1-0.1,0.2-0.2,0.2h-0.7c-0.1,0-0.2-0.1-0.2-0.2v-3.3h-4.6v3.3
+				c0,0.1-0.1,0.2-0.2,0.2h-0.7c-0.1,0-0.2-0.1-0.2-0.2v-7.2c0-0.1,0.1-0.2,0.2-0.2h0.7c0.1,0,0.2,0.1,0.2,0.2v3h4.6v-3
+				c0-0.1,0.1-0.2,0.2-0.2h0.7C46-29.9,46.1-29.9,46.1-29.8"/>
+			<path id="Path_1697-4" d="M58-26.2c0,2.1-1.7,3.8-3.8,3.8c-2.1,0-3.8-1.7-3.8-3.8c0-2.1,1.7-3.8,3.8-3.8c2.1,0,3.8,1.6,3.8,3.7
+				C58-26.3,58-26.2,58-26.2 M56.9-26.2c0.1-1.5-1-2.8-2.5-3s-2.8,1-3,2.5c0,0.2,0,0.3,0,0.5c-0.1,1.5,1,2.8,2.5,3
+				c1.5,0.1,2.8-1,3-2.5C56.9-25.9,56.9-26,56.9-26.2"/>
+			<path id="Path_1698-4" d="M67.6-23.2v0.5c0,0.1-0.1,0.1-0.1,0.2c0,0,0,0,0,0h-5c-0.1,0-0.2-0.1-0.2-0.2v-7.2
+				c0-0.1,0.1-0.2,0.2-0.2h0.7c0.1,0,0.2,0.1,0.2,0.2v6.4h4.1C67.5-23.3,67.6-23.3,67.6-23.2C67.6-23.2,67.6-23.2,67.6-23.2"/>
+			<path id="Path_1699-4" d="M77.3-23.2v0.5c0,0.1-0.1,0.1-0.1,0.2c0,0,0,0,0,0h-5.4c-0.1,0-0.2-0.1-0.2-0.2v-7.2
+				c0-0.1,0.1-0.2,0.2-0.2H77c0.1,0,0.1,0.1,0.2,0.1c0,0,0,0,0,0v0.5c0,0.1-0.1,0.1-0.1,0.2c0,0,0,0,0,0h-4.4v2.3h3.9
+				c0.1,0,0.1,0.1,0.2,0.1c0,0,0,0,0,0v0.6c0,0.1-0.1,0.1-0.1,0.2c0,0,0,0,0,0h-3.9v2.6h4.5C77.2-23.3,77.3-23.3,77.3-23.2
+				C77.3-23.2,77.3-23.2,77.3-23.2"/>
+			<path id="Path_1700-4" d="M-25.5-16.5c-5.4,0-9.8-4.4-9.8-9.8s4.4-9.8,9.8-9.8s9.8,4.4,9.8,9.8l0,0
+				C-15.7-20.9-20.1-16.5-25.5-16.5 M-25.5-35.7c-5.2,0-9.4,4.2-9.4,9.4s4.2,9.4,9.4,9.4c5.2,0,9.4-4.2,9.4-9.4
+				C-16.2-31.5-20.4-35.7-25.5-35.7"/>
+			<path id="Path_1701-4" d="M-24.7-17.4c-4.9,0-8.8-3.9-8.8-8.8s3.9-8.8,8.8-8.8s8.8,3.9,8.8,8.8l0,0
+				C-15.9-21.4-19.9-17.4-24.7-17.4 M-24.7-34.7c-4.7,0-8.4,3.8-8.4,8.4s3.8,8.4,8.4,8.4s8.4-3.8,8.4-8.4
+				C-16.3-30.9-20.1-34.7-24.7-34.7"/>
+			<path id="Path_1702-4" d="M-23.9-18.4c-4.3,0-7.8-3.5-7.8-7.8s3.5-7.8,7.8-7.8s7.8,3.5,7.8,7.8l0,0
+				C-16.1-21.9-19.6-18.4-23.9-18.4 M-23.9-33.7c-4.1,0-7.5,3.4-7.5,7.5s3.4,7.5,7.5,7.5c4.1,0,7.5-3.4,7.5-7.5
+				C-16.4-30.3-19.8-33.7-23.9-33.7"/>
+			<path id="Path_1703-4" d="M-23.1-19.3c-3.8,0-6.8-3.1-6.8-6.8s3.1-6.8,6.8-6.8c3.8,0,6.8,3.1,6.8,6.8v0
+				C-16.3-22.4-19.4-19.3-23.1-19.3 M-23.1-32.7c-3.6,0-6.6,2.9-6.6,6.6c0,3.6,2.9,6.6,6.6,6.6c3.6,0,6.6-2.9,6.6-6.6c0,0,0,0,0,0
+				C-16.6-29.8-19.5-32.7-23.1-32.7"/>
+			<path id="Path_1704-4" d="M-22.3-20.3c-3.2,0-5.8-2.6-5.8-5.8c0-3.2,2.6-5.8,5.8-5.8c3.2,0,5.8,2.6,5.8,5.8l0,0
+				C-16.5-22.9-19.1-20.3-22.3-20.3 M-22.3-31.8c-3.1,0-5.6,2.5-5.6,5.6s2.5,5.6,5.6,5.6c3.1,0,5.6-2.5,5.6-5.6l0,0
+				C-16.7-29.2-19.2-31.8-22.3-31.8"/>
+			<path id="Path_1705-4" d="M-21.5-21.3c-2.7,0-4.8-2.2-4.8-4.8c0-2.7,2.2-4.8,4.8-4.8c2.7,0,4.8,2.2,4.8,4.8v0
+				C-16.7-23.4-18.9-21.3-21.5-21.3 M-21.5-30.8c-2.6,0-4.7,2.1-4.7,4.7s2.1,4.7,4.7,4.7c2.6,0,4.7-2.1,4.7-4.7c0,0,0,0,0,0
+				C-16.8-28.7-18.9-30.8-21.5-30.8"/>
+		</g>
+	</g>
+</g>
+</svg>

explorer/src/pages/apps.tsx

@@ -15,6 +15,7 @@ import pyth from "../images/apps/pyth.png";
 import swim from "../images/apps/swim.png";
 import tiexo from "../images/apps/tiexo.png";
 import shape1 from "../images/index/shape1.svg";
+import shape from "../images/shape.png";
 
 const AppsPage = ({ location }: PageProps) => {
   return (
@@ -25,6 +26,20 @@ const AppsPage = ({ location }: PageProps) => {
         pathname={location.pathname}
       />
       <Box sx={{ position: "relative", marginTop: 17 }}>
+        <Box
+          sx={{
+            position: "absolute",
+            zIndex: -2,
+            bottom: '-250px',
+            left: '20%',
+            background: 'radial-gradient(closest-side at 50% 50%, #5189C8 0%, #5189C800 100%) ',
+            transform: 'matrix(-0.19, 0.98, -0.98, -0.19, 0, 0)',
+            width: 1609,
+            height: 1264,
+            pointerEvents: 'none',
+            opacity: 0.7,
+          }}
+        />
         <Box
           sx={{
             position: "absolute",
@@ -37,7 +52,9 @@ const AppsPage = ({ location }: PageProps) => {
             width: "100%",
             height: 1155,
           }}
+
         />
+
         <HeroText
           heroSpans={["Every chain", "at once"]}
           subtitleText={[
@@ -48,80 +65,148 @@ const AppsPage = ({ location }: PageProps) => {
           ]}
         />
       </Box>
-      <Box sx={{ maxWidth: 1220, mx: "auto", mt: 36, px: 3.75 }}>
-        <GridWithCards
-          spacing={3}
-          cardPaddingTop={3}
-          imgOffsetRightMd="0px"
-          imgOffsetTopXs="0px"
-          imgOffsetTopMd="-36px"
-          imgOffsetTopMdHover="-52px"
-          imgPaddingBottomXs={3}
-          data={[
-            {
-              src: lido,
-              header: "Lido",
-              href: "https://lido.fi/",
-              description:
-                "Stake in multiple networks while using the staked token for lending and yield farming.",
-            },
-            {
-              src: pyth,
-              header: "Pyth",
-              href: "https://pyth.network/markets/",
-              description:
-                "Make smart contracts more accurate by connecting high-fidelity market data.",
-            },
-            {
-              src: atlas,
-              header: "Atlas Dex",
-              href: "https://atlasdex.finance/",
-              description:
-                "Make faster transactions across chains to get the best exchange price.",
-            },
-            {
-              src: mercurial,
-              header: "Mercurial",
-              href: "https://mercurial.finance/",
-              description:
-                "Make faster transactions with greater cross-chain liquidity in stable assets.",
-            },
-            {
-              src: swim,
-              header: "Swim Protocol",
-              href: "https://swim.io/",
-              description:
-                "Swap chain-native assets without the need for wrapped assets or centralized exchanges.",
-            },
-            {
-              src: orion,
-              header: "Orion Money",
-              href: "https://www.orionprotocol.io/",
-              description:
-                "Earn stablecoin yields on multiple chains from one centralized location.",
-            },
-            {
-              src: tiexo,
-              header: "Tiexo",
-              href: "https://tiexo.com/",
-              description:
-                "Buy NFTs across chains from a wallet in multiple currencies.",
-            },
-            {
-              src: bridgesplit,
-              header: "Bridgesplit",
-              href: "https://bridgesplit.com/",
-              description: "Sell, buy, or lend portions of NFTs across chains.",
-            },
-            {
-              src: faraway,
-              header: "Faraway Games",
-              href: "https://faraway.gg/",
-              description:
-                "Validates membership to some game communities using ETH NFTs.",
-            },
-          ]}
+      <Box sx={{ position: 'relative' }}>
+        <Box
+          sx={{
+            position: "absolute",
+            zIndex: -2,
+            bottom: '-20%',
+            background: 'radial-gradient(closest-side at 50% 50%, #E72850 0%, #E7285000 100%)',
+            transform: 'transform: matrix(-0.77, -0.64, 0.64, -0.77, 0, 0)',
+            right: '75%',
+            width: 1494.89,
+            height: 861.05,
+            pointerEvents: 'none',
+            opacity: 0.7,
+          }}
+        />
+        <Box
+          sx={{
+            position: "absolute",
+            zIndex: -2,
+            top: '-20%',
+            background: 'radial-gradient(closest-side at 50% 50%, #5189C8 0%, #5189C800 100%) ',
+            transform: 'matrix(-0.67, 0.74, -0.74, -0.67, 0, 0)',
+            left: '70%',
+            width: 1709,
+            height: 1690,
+            pointerEvents: 'none',
+            opacity: 0.64,
+          }}
+        />
+        <Box
+          sx={{
+            position: "absolute",
+            zIndex: -1,
+            background: `url(${shape})`,
+            backgroundSize: 'contain',
+            top: -100,
+            right: '85vw',
+            width: 1012,
+            height: 839,
+            pointerEvents: 'none',
+            display: { xs: 'none', md: 'block' },
+          }}
+        />
+        <Box
+          sx={{
+            position: "absolute",
+            zIndex: -1,
+            background: `url(${shape})`,
+            backgroundSize: 'contain',
+            bottom: '-20%',
+            left: "80%",
+            transform: 'scaleX(-1)',
+            width: 1227,
+            height: 1018,
+            pointerEvents: 'none',
+            display: { xs: 'none', md: 'block' },
+          }}
         />
+        <Box sx={{ maxWidth: 1220, mx: "auto", mt: 36, px: 3.75 }}>
+          <GridWithCards
+            spacing={3}
+            cardPaddingTop={3}
+            imgOffsetRightMd="0px"
+            imgOffsetTopXs="0px"
+            imgOffsetTopMd="-36px"
+            imgOffsetTopMdHover="-52px"
+            imgPaddingBottomXs={3}
+            data={[
+              {
+                src: lido,
+                header: "Lido",
+                href: "https://lido.fi/",
+                size: 114,
+                description:
+                  "Stake in multiple networks while using the staked token for lending and yield farming.",
+              },
+              {
+                src: pyth,
+                header: "Pyth",
+                size: 114,
+                href: "https://pyth.network/markets/",
+                description:
+                  "Make smart contracts more accurate by connecting high-fidelity market data.",
+              },
+              {
+                src: atlas,
+                header: "Atlas Dex",
+                href: "https://atlasdex.finance/",
+                size: 114,
+                description:
+                  "Make faster transactions across chains to get the best exchange price.",
+              },
+              {
+                src: mercurial,
+                header: "Mercurial",
+                href: "https://mercurial.finance/",
+                size: 114,
+                description:
+                  "Make faster transactions with greater cross-chain liquidity in stable assets.",
+              },
+              {
+                src: swim,
+                header: "Swim Protocol",
+                href: "https://swim.io/",
+                size: 114,
+                description:
+                  "Swap chain-native assets without the need for wrapped assets or centralized exchanges.",
+              },
+              {
+                src: orion,
+                header: "Orion Money",
+                href: "https://www.orion.money/",
+                size: 114,
+                description:
+                  "Earn stablecoin yields on multiple chains from one centralized location.",
+              },
+              {
+                src: tiexo,
+                header: "Tiexo",
+                href: "https://tiexo.com/",
+                size: 114,
+                description:
+                  "Buy NFTs across chains from a wallet in multiple currencies.",
+              },
+              {
+                src: bridgesplit,
+                header: "Bridgesplit",
+                href: "https://bridgesplit.com/",
+                size: 114,
+                description: "Sell, buy, or lend portions of NFTs across chains.",
+              },
+              {
+                src: faraway,
+                header: "Faraway Games",
+                href: "https://faraway.gg/",
+                size: 114,
+                description:
+                  "Validates membership to some game communities using ETH NFTs.",
+              },
+            ]}
+          />
+        </Box>
       </Box>
     </Layout>
   );

explorer/src/pages/brand.tsx

@@ -0,0 +1,828 @@
+import * as React from "react";
+import { Box, Button, Grid, Typography } from "@mui/material";
+import ArrowCircleDownIcon from '@mui/icons-material/ArrowCircleDown';
+import { PageProps } from 'gatsby'
+import { OutboundLink } from "gatsby-plugin-google-gtag";
+import HeroText from "../components/HeroText";
+import Layout from "../components/Layout";
+import logos from "../images/brand/logos.svg";
+import world from "../images/brand/world.svg";
+import shape1 from "../images/index/shape1.svg";
+import { SEO } from "../components/SEO";
+import shapes from "../images/shape.png";
+import shapes2 from "../images/shape2.png";
+import icons1 from "../images/brand/icons1.png";
+import icons2 from "../images/brand/icons2.svg";
+import logo from "../images/brand/logo-name.svg";
+import logo2 from "../images/brand/logo.svg";
+import worm1 from "../images/brand/worm1.png";
+import worm2 from "../images/brand/worm2.png";
+import gradient1 from "../images/brand/gradient1.svg";
+import gradient2 from "../images/brand/gradient2.svg";
+import {
+  logopackage,
+  colors,
+  icons,
+  assets,
+  logonamesvg,
+  logonamepng,
+  logopng,
+  logosvg,
+  wormpng1,
+  wormpng2,
+  gradients,
+  gradient2svg,
+  contact
+} from "../utils/urls";
+
+const BrandPage = ({ location }: PageProps) => {
+  return (
+    <Layout>
+      <SEO
+        title="BRAND"
+        description="Please follow these guidelines when you’re sharing Wormhole with the world."
+        pathname={location.pathname}
+      />
+      <Box sx={{ position: "relative", marginTop: 17 }}>
+        <Box
+            sx={{
+              position: "absolute",
+              zIndex: -2,
+              bottom: '-220px',
+              left: '20%',
+              background: 'radial-gradient(closest-side at 50% 50%, #5189C8 0%, #5189C800 100%) ',
+              transform: 'matrix(-0.19, 0.98, -0.98, -0.19, 0, 0)',
+              width: 1609,
+              height: 1264,
+              pointerEvents: 'none',
+              opacity: 0.7,
+            }}
+          />   
+        <Box
+          sx={{
+            position: "absolute",
+            zIndex: -1,
+            transform: "translate(0px, -25%) scaleX(-1)",
+            background: `url(${shape1})`,
+            backgroundRepeat: "no-repeat",
+            backgroundPosition: "top -500px center",
+            backgroundSize: "2070px 1155px",
+            width: "100%",
+            height: 1155,
+          }}
+        />
+        <HeroText
+          heroSpans={["Brand"]}
+          subtitleText="Integrate proudly with everything you need to show off Wormhole."
+        />
+      </Box>
+      <Box sx={{ textAlign: "center", mt: 40, px: 2 }}>
+        <Typography variant="h3">
+          <Box component="span" sx={{ color: "#FFCE00" }}>
+          Brand {" "}
+          </Box>
+          <Box component="span"> assets</Box>
+        </Typography>
+        <Typography sx={{ mt: 2, maxWidth: 860, mx: "auto" }}>Everything you need to show off Wormhole to the world.</Typography>
+      </Box>
+      <Box sx={{position: 'relative'}}>
+        <Box
+            sx={{
+              position: "absolute",
+              zIndex: -2,
+              top: '-60%',
+              background: 'radial-gradient(closest-side at 50% 50%, #5189C8 0%, #5189C800 100%)',
+              transform: 'transform: matrix(-0.67, 0.74, -0.74, -0.67, 0, 0)',
+              right: '15%',
+              width: 1879,
+              height: 1832,
+              pointerEvents: 'none',
+              opacity: 0.64,
+            }}
+          />
+          <Box
+            sx={{
+              position: "absolute",
+              zIndex: -1,
+              background: `url(${shapes2})`,
+              backgroundSize: 'contain',
+              transform: 'scaleX(-1)',
+              top: 150,
+              right: '80vw',
+              width: 1318,
+              height: 1076,
+              pointerEvents: 'none',
+              display:{xs: 'none', md: 'block'},
+            }}
+          />
+        <Box sx={{ m: "auto", maxWidth: 1164, px: 3.75, mt: {xs: 10, md:15.5} }}>
+          <Box
+            sx={{
+              display: "flex",
+              flexWrap: "wrap",
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            <Box sx={{ flexBasis: { xs: "100%", md: "50%" }, flexGrow: 1 }}>
+              <Box sx={{ px: { xs: 0, md: 4 } }}>
+                <Box sx={{ maxWidth: 460, mx: "auto" }}>
+                  <Typography variant="h3">
+                    <Box component="span" sx={{ color: "#FFCE00" }}>
+                    World of {" "}
+                    </Box>
+                    <Box component="span" sx={{ display: "inline-block" }}>
+                      Wormhole
+                    </Box>
+                  </Typography>
+                  <Typography sx={{ mt: 2 }}>
+                    Combine the logo with a range of provided background colors and gradients to create the right feel.
+                  </Typography>
+                  <Button
+                    component={OutboundLink}
+                    href={logopackage}
+                    sx={{ mt: 3 }}
+                    variant="outlined"
+                    color="inherit"
+                    target="_blank"
+                    startIcon={<ArrowCircleDownIcon />}
+                  >
+                LOGO
+              </Button>
+                </Box>
+              </Box>
+            </Box>
+            <Box
+              sx={{
+                mt: { xs: 8, md: 0 },
+                flexBasis: { xs: "100%", md: "50%" },
+                textAlign: "center",
+                flexGrow: 1,
+                backgroundColor: "rgba(255,255,255,.06)",
+                backdropFilter: "blur(3px)",
+                borderRadius: "37px",
+                px: { xs: 3, md: 5 },
+                py: { xs: 3, md: 8 },
+              }}
+            >
+              <img src={world} alt="" style={{ maxWidth: "100%" }} />
+            </Box>
+          </Box>
+          <Box
+            sx={{
+              display: "flex",
+              flexWrap: "wrap-reverse",
+              alignItems: "center",
+              justifyContent: "center",
+              mt: { xs: 8, md: 0 },
+            }}
+          >
+            <Box
+              sx={{
+                mt: { xs: 8, md: null },
+                flexBasis: { xs: "100%", md: "50%" },
+                textAlign: "center",
+                flexGrow: 1,
+                backgroundColor: "rgba(255,255,255,.06)",
+                backdropFilter: "blur(3px)",
+                borderRadius: "37px",
+                pt: { xs: 3, md: 9.75 },
+                pb: { xs: 3, md: 9 },
+                px: { xs: 3, md: 8 },
+              }}
+            >
+              <img src={logos} alt="" style={{ maxWidth: "100%" }} />
+            </Box>
+            <Box sx={{ flexBasis: { xs: "100%", md: "50%" }, flexGrow: 1 }}>
+              <Box sx={{ px: { xs: 0, md: 4 } }}>
+                <Box sx={{ maxWidth: 460, mx: "auto" }}>
+                  <Typography variant="h3">
+                    <Box component="span" sx={{ color: "#FFCE00" }}>
+                      Give it {" "}
+                    </Box>
+                    <Box component="span" sx={{ display: "inline-block" }}>
+                      space
+                    </Box>
+                  </Typography>
+                  <Typography sx={{ mt: 2 }}>
+                    Please give Wormhole the space it needs by 1x, which represents the small circle in the Wormhole brand logo mark.
+                  </Typography>
+                </Box>
+              </Box>
+            </Box>
+          </Box>
+        </Box>
+      </Box>
+      <Box sx={{position: 'relative'}}>
+          <Box
+              sx={{
+                position: "absolute",
+                zIndex: -2,
+                top: '0',
+                background: 'radial-gradient(closest-side at 50% 50%, #E72850 0%, #E7285000 100%)',
+                transform: 'matrix(0.77, 0.64, -0.64, 0.77, 0, 0)',
+                right: '75%',
+                width: 1699,
+                height: 1621,
+                pointerEvents: 'none',
+                opacity: 0.7,
+              }}
+            />   
+             <Box
+                sx={{
+                  position: "absolute",
+                  zIndex: -1,
+                  background: `url(${shapes})`,
+                  backgroundSize: 'contain',
+                  transform: 'scaleX(-1)',
+                  top: 250,
+                  left: '75vw',
+                  width: 1594,
+                  height: 1322,
+                  pointerEvents: 'none',
+                  display:{xs: 'none', md: 'block'},
+                }}
+              />
+              <Box
+                sx={{
+                  position: "absolute",
+                  zIndex: -2,
+                  top: -400,
+                  background: 'radial-gradient(closest-side at 50% 50%, #5189C8 0%, #5189C800 100%)',
+                  transform: 'matrix(-0.67, 0.74, -0.74, -0.67, 0, 0)',
+                  left: '60%',
+                  width: 1879,
+                  height: 1832,
+                  pointerEvents: 'none',
+                  opacity: 0.7,
+              }}
+            />   
+          <Box sx={{ textAlign: "center", mt: 12, px: 2 }}>
+            <Typography variant="h3">
+              <Box component="span" sx={{ color: "#FFCE00" }}>
+              Color {" "}
+              </Box>
+              <Box component="span">palette</Box>
+            </Typography>
+            <Typography sx={{ mt: 2, maxWidth: 860, mx: "auto" }}>Mix and match from the color palette to fits your need.</Typography>
+          </Box>
+          <Box sx={{ m: "auto", maxWidth: 1006, px: 3.75 }}>
+          <Grid container spacing={2}>
+            <Grid item xs={12} md={4}>
+              <Box
+                  sx={{
+                    mt: { xs: 8, md: null },
+                    backgroundColor: "rgba(255,255,255,.06)",
+                    backdropFilter: "blur(3px)",
+                    borderRadius: "37px",
+                    p:{xs:3, md: 5}
+                  }}
+                >
+                  <Typography variant="caption"
+                        sx={{
+                          borderBottom: '1px solid #585587',
+                          pb: 2,
+                          mb: 5,
+                          mt: 0
+                        }}>
+                        PRIMARY
+                  </Typography>
+                  <Grid container spacing={2} sx={{ textAlign: 'center'}}>
+                    <Grid item xs={6}>
+                      <Box sx={{
+                        width: '100%',
+                        aspectRatio: '1/1',
+                        backgroundColor: '#E72850'
+                      }}></Box>
+                      <Typography variant="caption" >#E72850</Typography>
+                    </Grid>
+                    <Grid item xs={6}>
+                      <Box sx={{
+                          width: '100%',
+                          aspectRatio: '1/1',
+                          backgroundColor: '#26276F'
+                        }}></Box>
+                      <Typography variant="caption">#26276F</Typography>
+                    </Grid>
+                    <Grid item xs={6}>
+                      <Box sx={{
+                          width: '100%',
+                          aspectRatio: '1/1',
+                          backgroundColor: '#5189C8'
+                        }}></Box>
+                        <Typography variant="caption">#5189C8</Typography>
+                    </Grid>
+                    <Grid item xs={6}>
+                      <Box sx={{
+                          width: '100%',
+                          aspectRatio: '1/1',
+                          backgroundColor: '#374B92'
+                        }}></Box>
+                      <Typography variant="caption">#374B92</Typography>
+                    </Grid>
+                  </Grid>
+                </Box>
+            </Grid>
+            <Grid item xs={12} md={4}>
+              <Box
+                  sx={{
+                    mt: { xs: 8, md: null },
+                    backgroundColor: "rgba(255,255,255,.06)",
+                    backdropFilter: "blur(3px)",
+                    borderRadius: "37px",
+                    p:{xs:3, md: 5}
+                  }}
+                >
+                  <Typography variant="caption"
+                        sx={{
+                          borderBottom: '1px solid #585587',
+                          pb: 2,
+                          mb: 5,
+                          mt: 0
+                        }}>
+                        GRADIENTS
+                  </Typography>
+                  <Grid container spacing={2} sx={{ textAlign: 'center'}}>
+                    <Grid item xs={6}>
+                      <Box sx={{
+                        width: '100%',
+                        aspectRatio: '1/1',
+                        background: 'linear-gradient(180deg, #374B92 0%, #E72850 100%)'
+                      }}></Box>
+                      <Typography variant="caption">GRADIENT 1</Typography>
+                    </Grid>
+                    <Grid item xs={6}>
+                      <Box sx={{
+                           width: '100%',
+                           aspectRatio: '1/1',
+                          background: 'linear-gradient(180deg, #E72850 0%, #5189C8 100%)'
+                        }}></Box>
+                      <Typography variant="caption">GRADIENT 2</Typography>
+                    </Grid>
+                    <Grid item xs={6}>
+                      <Box sx={{
+                          width: '100%',
+                          aspectRatio: '1/1',
+                          background: 'linear-gradient(180deg, #17153F 0%, #E72850 100%)'
+                        }}></Box>
+                        <Typography variant="caption">GRADIENT 3</Typography>
+                    </Grid>
+                    <Grid item xs={6}>
+                      <Box sx={{
+                          width: '100%',
+                          aspectRatio: '1/1',
+                          background: 'linear-gradient(180deg, #26276F 0%, #5189C8 100%)'
+                        }}></Box>
+                      <Typography variant="caption">GRADIENT 4</Typography>
+                    </Grid>
+                  </Grid>
+                </Box>
+            </Grid>
+            <Grid item xs={12} md={4}>
+              <Box
+                  sx={{
+                    mt: { xs: 8, md: null },
+                    backgroundColor: "rgba(255,255,255,.06)",
+                    backdropFilter: "blur(3px)",
+                    borderRadius: "37px",
+                    p:{xs:3, md: 5}
+                  }}
+                >
+                  <Typography variant="caption"
+                        sx={{
+                          borderBottom: '1px solid #585587',
+                          pb: 2,
+                          mb: 5,
+                          mt: 0
+                        }}>
+                        ACCENTS
+                  </Typography>
+                  <Grid container spacing={2} sx={{ textAlign: 'center'}}>
+                    <Grid item xs={6}>
+                      <Box sx={{
+                        width: '100%',
+                        aspectRatio: '1/1',
+                        backgroundColor: '#FFCE00'
+                      }}></Box>
+                      <Typography variant="caption">#FFCE00</Typography>
+                    </Grid>
+                    <Grid item xs={6}>
+                      <Box sx={{
+                          width: '100%',
+                          aspectRatio: '1/1',
+                          background: 'linear-gradient(180deg, #F44B1B 0%, #EEB430 100%)'
+                        }}></Box>
+                      <Typography variant="caption">GRADIENT 5</Typography>
+                    </Grid>
+                    <Grid item xs={6}>
+                      <Box sx={{
+                          width: '100%',
+                          aspectRatio: '1/1',
+                          background: 'linear-gradient(180deg, #F44B1B 0%, #3D2670 100%)'
+                        }}></Box>
+                        <Typography variant="caption">GRADIENT 6</Typography>
+                    </Grid>
+                    <Grid item xs={6}>
+                      <Box sx={{
+                          width: '100%',
+                          aspectRatio: '1/1',
+                          background: 'linear-gradient(180deg, #EEB430 0%, #5189C8 100%)'
+                        }}></Box>
+                      <Typography variant="caption">GRADIENT 7</Typography>
+                    </Grid>
+                  </Grid>
+                </Box>
+            </Grid>
+
+              
+
+                
+          </Grid>  
+          <Box sx={{textAlign: 'center', mt: 5}}>
+            <Button
+                  component={OutboundLink}
+                  href={colors}
+                  sx={{ mt: 3 }}
+                  variant="outlined"
+                  color="inherit"
+                  target="_blank"
+                  startIcon={<ArrowCircleDownIcon />}
+                >
+                SVG
+              </Button>
+          </Box>
+        </Box>  
+
+      </Box>
+      <Box sx={{position: 'relative'}}>
+          <Box sx={{ textAlign: "center", mt: 12, px: 2 }}>
+            <Typography variant="h3">
+              <Box component="span" sx={{ color: "#FFCE00" }}>
+              Iconography
+              </Box>
+            </Typography>
+          </Box>
+        <Box sx={{ m: "auto", maxWidth: 950, px: 3.75 }}>
+          <Grid container spacing={2}>
+            <Grid item xs={12} md={6}>
+              <Box
+                  sx={{
+                    mt: { xs: 8, md: null },
+                    backgroundColor: "rgba(255,255,255,.06)",
+                    backdropFilter: "blur(3px)",
+                    borderRadius: "37px",
+                    p:{xs:3, md: 5}
+                  }}
+                >
+                  <Typography variant="caption"
+                        sx={{
+                          borderBottom: '1px solid #585587',
+                          pb: 2,
+                          mb: 5,
+                          mt: 0,
+                        }}>
+                        PRIMARY
+                  </Typography>
+                  <img src={icons1} alt="" style={{ maxWidth: "100%", display: 'block', margin: 'auto' }} />
+                </Box>
+            </Grid>
+            <Grid item xs={12} md={6}>
+              <Box
+                  sx={{
+                    mt: { xs: 8, md: null },
+                    backgroundColor: "rgba(255,255,255,.06)",
+                    backdropFilter: "blur(3px)",
+                    borderRadius: "37px",
+                    p:{xs:3, md: 5}
+                  }}
+                >
+                  <Typography variant="caption"
+                        sx={{
+                          borderBottom: '1px solid #585587',
+                          pb: 2,
+                          mb: 5,
+                          mt: 0
+                        }}>
+                        ALTERNATE
+                  </Typography>
+                  <img src={icons2} alt="" style={{ maxWidth: "100%", display: 'block', margin: 'auto' }} />
+                </Box>
+            </Grid>
+                
+          </Grid>  
+          <Box sx={{textAlign: 'center', mt: 5}}>
+            <Button
+                  component={OutboundLink}
+                  href={icons}
+                  sx={{ mt: 3 }}
+                  variant="outlined"
+                  color="inherit"
+                  target="_blank"
+                  startIcon={<ArrowCircleDownIcon />}
+                >
+                SVG
+              </Button>
+          </Box>
+        </Box>  
+
+      </Box>
+      <Box sx={{position: 'relative'}}>
+        <Box
+              sx={{
+                position: "absolute",
+                zIndex: -2,
+                top: '0',
+                background: 'radial-gradient(closest-side at 50% 50%, #E72850 0%, #E7285000 100%)',
+                transform: 'matrix(0.77, 0.64, -0.64, 0.77, 0, 0)',
+                left: '60%',
+                width: 1699,
+                height: 1621,
+                pointerEvents: 'none',
+                opacity: 0.5,
+              }}
+            />   
+          <Box
+              sx={{
+                position: "absolute",
+                zIndex: -1,
+                background: `url(${shapes})`,
+                backgroundSize: 'contain',
+                top: -200,
+                right: '80vw',
+                width: 1594,
+                height: 1322,
+                pointerEvents: 'none',
+                display:{xs: 'none', md: 'block'},
+              }}
+            />
+          <Box sx={{ textAlign: "center", mt: 12, px: 2 }}>
+            <Typography variant="h3">
+              <Box component="span" sx={{ color: "#FFCE00" }}>
+              Get the {" "}
+              </Box>
+              <Box component="span">assets</Box>
+            </Typography>
+            <Typography sx={{ mt: 2, maxWidth: 860, mx: "auto" }}>Mix and match from the color palette to fits your need.</Typography>
+            <Button
+                  component={OutboundLink}
+                  href={assets}
+                  sx={{ mt: 4 }}
+                  variant="outlined"
+                  color="inherit"
+                  target="_blank"
+                  startIcon={<ArrowCircleDownIcon />}
+                >
+                DOWNLOAD PACKAGE
+              </Button>
+          </Box>
+         
+          <Box sx={{maxWidth: 800, m:'60px auto 0',  borderTop: '1px solid #585587'}}>
+            <Box sx={{
+                      px: 3, 
+                      py:2 , 
+                      borderBottom: '1px solid #585587',
+                      display: "flex",
+                      flexWrap: "wrap",
+                      alignItems: "center",
+                      flexDirection: {xs: 'column-reverse', md:'row'},
+                      minHeight: 124,
+                      justifyContent: {xs: 'center', md:"space-between"},
+               }}>
+                  <Box 
+                    sx={{
+                      "a": {
+                        m: {xs: '30px 10px 0 ', md:"0 16px 0 0"},
+                      },
+                    }}
+                  >
+                    <Button
+                        component={OutboundLink}
+                        href={logonamepng}
+                        variant="outlined"
+                        color="inherit"
+                        target="_blank"
+                        startIcon={<ArrowCircleDownIcon />}
+                      >
+                      PNG
+                    </Button>
+                    <Button
+                        href={logonamesvg}
+                        variant="outlined"
+                        color="inherit"
+                        target="_blank"
+                        startIcon={<ArrowCircleDownIcon />}
+                      >
+                      SVG
+                    </Button>
+                  </Box>
+                  <Box sx={{flexBasis:{xs: 'auto', md:250}, textAlign: 'center'}}>
+                    <img src={logo} alt="" />
+                  </Box>
+            </Box>
+            <Box sx={{
+                      px: 3, 
+                      py:2 , 
+                      borderBottom: '1px solid #585587',
+                      minHeight: 124,
+                      display: "flex",
+                      flexWrap: "wrap",
+                      alignItems: "center",
+                      flexDirection: {xs: 'column-reverse', md:'row'},
+                      justifyContent: {xs: 'center', md:"space-between"},
+               }}>
+                  <Box 
+                    sx={{
+                      "a": {
+                        m: {xs: '30px 10px 0 ', md:"0 16px 0 0"},
+                      },
+                    }}
+                  >
+                    <Button
+                        component={OutboundLink}
+                        href={logopng}
+                        variant="outlined"
+                        color="inherit"
+                        target="_blank"
+                        startIcon={<ArrowCircleDownIcon />}
+                      >
+                      PNG
+                    </Button>
+                    <Button
+                        component={OutboundLink}
+                        href={logosvg}
+                        variant="outlined"
+                        color="inherit"
+                        target="_blank"
+                        startIcon={<ArrowCircleDownIcon />}
+                      >
+                      SVG
+                    </Button>
+                  </Box>
+                  
+                  <Box sx={{flexBasis:{xs: 'auto', md:250}, textAlign: 'center'}}>
+                    <img src={logo2} alt="" />
+                  </Box>
+
+            </Box>
+            <Box sx={{
+                      px: 3, 
+                      py:2 , 
+                      borderBottom: '1px solid #585587',
+                      minHeight: 124,
+                      display: "flex",
+                      flexWrap: "wrap",
+                      alignItems: "center",
+                      flexDirection: {xs: 'column-reverse', md:'row'},
+                      justifyContent: {xs: 'center', md:"space-between"},
+               }}>
+                  <Box 
+                    sx={{
+                      "a": {
+                        m: {xs: '30px 10px 0 ', md:"0 16px 0 0"},
+                      },
+                    }}
+                  >
+                    <Button
+                        component={OutboundLink}
+                        href={wormpng1}
+                        variant="outlined"
+                        color="inherit"
+                        target="_blank"
+                        startIcon={<ArrowCircleDownIcon />}
+                      >
+                      PNG
+                    </Button>
+                    
+                  </Box>
+                  
+                  <Box sx={{flexBasis:{xs: 'auto', md:250}, textAlign: 'center'}}>
+                    <img src={worm1} alt="" />
+                  </Box>
+
+            </Box>
+            <Box sx={{
+                      px: 3, 
+                      py:2 , 
+                      minHeight: 124,
+                      borderBottom: '1px solid #585587',
+                      display: "flex",
+                      flexWrap: "wrap",
+                      alignItems: "center",
+                      flexDirection: {xs: 'column-reverse', md:'row'},
+                      justifyContent: {xs: 'center', md:"space-between"},
+               }}>
+                  <Box 
+                    sx={{
+                      "a": {
+                        m: {xs: '30px 10px 0 ', md:"0 16px 0 0"},
+                      },
+                    }}
+                  >
+                    <Button
+                        component={OutboundLink}
+                        href={wormpng2}
+                        variant="outlined"
+                        color="inherit"
+                        target="_blank"
+                        startIcon={<ArrowCircleDownIcon />}
+                      >
+                      PNG
+                    </Button>
+                    
+                  </Box>
+                  <Box sx={{flexBasis:{xs: 'auto', md:250}, textAlign: 'center'}}>
+                    <img src={worm2} alt="" />
+                  </Box>
+            </Box>
+            <Box sx={{
+                      px: 3, 
+                      py:2 , 
+                      borderBottom: '1px solid #585587',
+                      minHeight: 124,
+                      display: "flex",
+                      flexWrap: "wrap",
+                      alignItems: "center",
+                      flexDirection: {xs: 'column-reverse', md:'row'},
+                      justifyContent: {xs: 'center', md:"space-between"},
+               }}>
+                  <Box 
+                    sx={{
+                      "a": {
+                        m: {xs: '30px 10px 0 ', md:"0 16px 0 0"},
+                      },
+                    }}
+                  >
+                    <Button
+                        component={OutboundLink}
+                        href={gradients}
+                        variant="outlined"
+                        color="inherit"
+                        target="_blank"
+                        startIcon={<ArrowCircleDownIcon />}
+                      >
+                      PNG
+                    </Button>
+                   
+                  </Box>
+                  <Box sx={{flexBasis:{xs: 'auto', md:250}, textAlign: 'center'}}>
+                    <img src={gradient1} alt="" />
+                  </Box>
+            </Box>
+            <Box sx={{
+                      px: 3, 
+                      py:2 , 
+                      borderBottom: '1px solid #585587',
+                      minHeight: 124,
+                      display: "flex",
+                      flexWrap: "wrap",
+                      flexDirection: {xs: 'column-reverse', md:'row'},
+                      alignItems: "center",
+                      justifyContent: {xs: 'center', md:"space-between"},
+               }}>
+                  <Box 
+                    sx={{
+                      "a": {
+                        m: {xs: '30px 10px 0 ', md:"0 16px 0 0"},
+                      },
+                    }}
+                  >
+                    <Button
+                        href={gradient2svg}
+                        variant="outlined"
+                        color="inherit"
+                        target="_blank"
+                        startIcon={<ArrowCircleDownIcon />}
+                      >
+                      PNG
+                    </Button>
+                  </Box>
+                  <Box sx={{flexBasis:{xs: 'auto', md:250}, textAlign: 'center'}}>
+                    <img src={gradient2} alt="" />
+                  </Box>
+            </Box>
+          </Box>
+
+      </Box>
+
+          {/* <Box sx={{ textAlign: "center", mt: 12, px: 2 }}>
+            <Typography variant="h3">
+                <Box component="span" sx={{ color: "#FFCE00" }}>
+                Press  {" "}
+                </Box>
+              <Box component="span">inquiries</Box>
+            </Typography>
+            <Typography sx={{ mt: 2, maxWidth: 860, mx: "auto" }}>Reach out to our team to get the information you need.</Typography>
+            <Button
+                  href={contact}
+                  sx={{ mt: 4 }}
+                  variant="outlined"
+                  color="inherit"
+                >
+                CONTACT US
+              </Button>
+          </Box> */}
+    </Layout>
+  );
+};
+
+export default BrandPage;

explorer/src/pages/buidl.tsx

@@ -16,6 +16,7 @@ import shape from "../images/buidl/shape.svg";
 import stack from "../images/buidl/stack.svg";
 import shape1 from "../images/index/shape1.svg";
 import { SEO } from "../components/SEO";
+import shapes from "../images/shape.png";
 
 const BuidlPage = ({ location }: PageProps) => {
   return (
@@ -26,6 +27,20 @@ const BuidlPage = ({ location }: PageProps) => {
         pathname={location.pathname}
       />
       <Box sx={{ position: "relative", marginTop: 17 }}>
+        <Box
+            sx={{
+              position: "absolute",
+              zIndex: -2,
+              bottom: '-220px',
+              left: '20%',
+              background: 'radial-gradient(closest-side at 50% 50%, #5189C8 0%, #5189C800 100%) ',
+              transform: 'matrix(-0.19, 0.98, -0.98, -0.19, 0, 0)',
+              width: 1609,
+              height: 1264,
+              pointerEvents: 'none',
+              opacity: 0.7,
+            }}
+          />   
         <Box
           sx={{
             position: "absolute",
@@ -58,195 +73,255 @@ const BuidlPage = ({ location }: PageProps) => {
           Bonding
         </Typography>
       </Box>
-      <Box sx={{ m: "auto", maxWidth: 1164, px: 3.75, mt: 15.5 }}>
-        <Box
-          sx={{
-            display: "flex",
-            flexWrap: "wrap",
-            alignItems: "center",
-            justifyContent: "center",
-          }}
-        >
-          <Box sx={{ flexBasis: { xs: "100%", md: "50%" }, flexGrow: 1 }}>
-            <Box sx={{ px: { xs: 0, md: 4 } }}>
-              <Box sx={{ maxWidth: 460, mx: "auto" }}>
-                <Typography variant="h3">
-                  <Box component="span" sx={{ color: "#FFCE00" }}>
-                    Integrate into{" "}
-                  </Box>
-                  <Box component="span" sx={{ display: "inline-block" }}>
-                    every chain at once
-                  </Box>
-                </Typography>
-                <Typography sx={{ mt: 2 }}>
-                  Wormhole SDK integrates your project with our generic
-                  messaging layer. Wormhole SDK makes it easier than ever for
-                  teams, apps, protocols, and users to move value seamlessly
-                  across networks without fees.
-                </Typography>
-              </Box>
-            </Box>
-          </Box>
+      <Box sx={{position: 'relative'}}>
           <Box
+              sx={{
+                position: "absolute",
+                zIndex: -2,
+                bottom: '0',
+                background: 'radial-gradient(closest-side at 50% 50%, #E72850 0%, #E7285000 100%)',
+                transform: 'matrix(-0.77, 0.64, -0.64, -0.77, 0, 0)',
+                right: '70%',
+                width: 1699,
+                height: 1621,
+                pointerEvents: 'none',
+                opacity: 0.7,
+              }}
+            />   
+          <Box
+              sx={{
+                position: "absolute",
+                zIndex: -2,
+                top: '0',
+                background: 'radial-gradient(closest-side at 50% 50%, #5189C8 0%, #5189C800 100%) ',
+                transform: 'matrix(-0.67, 0.74, -0.74, -0.67, 0, 0)',
+                left: '70%',
+                width: 1709,
+                height: 1690,
+                pointerEvents: 'none',
+                opacity: 0.64,
+              }}
+            />   
+      <Box
             sx={{
-              mt: { xs: 8, md: null },
-              flexBasis: { xs: "100%", md: "50%" },
-              textAlign: "center",
-              flexGrow: 1,
-              backgroundColor: "rgba(255,255,255,.06)",
-              backdropFilter: "blur(3px)",
-              borderRadius: "37px",
-              pt: 9.75,
-              pb: 9,
+              position: "absolute",
+              zIndex: -1,
+              background: `url(${shapes})`,
+              backgroundSize: 'contain',
+              top: -100,
+              right: '85vw',
+              width: 1012,
+              height: 839,
+              pointerEvents: 'none',
+              display:{xs: 'none', md: 'block'},
             }}
-          >
-            <img src={stack} alt="" />
-          </Box>
-        </Box>
+          />
         <Box
-          sx={{
-            display: "flex",
-            flexWrap: "wrap-reverse",
-            alignItems: "center",
-            justifyContent: "center",
-            mt: 12.75,
-          }}
-        >
+            sx={{
+              position: "absolute",
+              zIndex: -1,
+              background: `url(${shapes})`,
+              backgroundSize: 'contain',
+              bottom: '0',
+              left: "80%",
+              transform: 'scaleX(-1)',
+              width: 1227,
+              height: 1018,
+              pointerEvents: 'none',
+              display:{xs: 'none', md: 'block'},
+            }}
+          />  
+
+        <Box sx={{ m: "auto", maxWidth: 1164, px: 3.75, mt: 15.5 }}>
           <Box
             sx={{
-              mt: { xs: 8, md: null },
-              flexBasis: { xs: "100%", md: "50%" },
-              textAlign: "center",
-              flexGrow: 1,
-              backgroundColor: "rgba(255,255,255,.06)",
-              backdropFilter: "blur(3px)",
-              borderRadius: "37px",
-              pt: { xs: 3, md: 9.75 },
-              pb: { xs: 3, md: 9 },
-              px: { xs: 3, md: 8 },
+              display: "flex",
+              flexWrap: "wrap",
+              alignItems: "center",
+              justifyContent: "center",
             }}
           >
-            <img src={network} alt="" style={{ maxWidth: "100%" }} />
-          </Box>
-          <Box sx={{ flexBasis: { xs: "100%", md: "50%" }, flexGrow: 1 }}>
-            <Box sx={{ px: { xs: 0, md: 4 } }}>
-              <Box sx={{ maxWidth: 460, mx: "auto" }}>
-                <Typography variant="h3">
-                  <Box component="span" sx={{ color: "#FFCE00" }}>
-                    Connecting projects{" "}
-                  </Box>
-                  <Box component="span" sx={{ display: "inline-block" }}>
-                    to networks
-                  </Box>
-                </Typography>
-                <Typography sx={{ mt: 2 }}>
-                  Six high-value networks, two centralized exchanges, and 19 dexes.
-                  Anyone in the community can add new networks to the protocol
-                  and build the future of blockchain.
-                </Typography>
+            <Box sx={{ flexBasis: { xs: "100%", md: "50%" }, flexGrow: 1 }}>
+              <Box sx={{ px: { xs: 0, md: 4 } }}>
+                <Box sx={{ maxWidth: 460, mx: "auto" }}>
+                  <Typography variant="h3">
+                    <Box component="span" sx={{ color: "#FFCE00" }}>
+                      Integrate into{" "}
+                    </Box>
+                    <Box component="span" sx={{ display: "inline-block" }}>
+                      every chain at once
+                    </Box>
+                  </Typography>
+                  <Typography sx={{ mt: 2 }}>
+                    Wormhole SDK integrates your project with our generic
+                    messaging layer. Wormhole SDK makes it easier than ever for
+                    teams, apps, protocols, and users to move value seamlessly
+                    across networks without fees.
+                  </Typography>
+                </Box>
               </Box>
             </Box>
+            <Box
+              sx={{
+                mt: { xs: 8, md: 0 },
+                flexBasis: { xs: "100%", md: "50%" },
+                textAlign: "center",
+                flexGrow: 1,
+                backgroundColor: "rgba(255,255,255,.06)",
+                backdropFilter: "blur(3px)",
+                borderRadius: "37px",
+                pt: 9.75,
+                pb: 9,
+              }}
+            >
+              <img src={stack} alt="" />
+            </Box>
           </Box>
-        </Box>
-        <Box
-          sx={{
-            display: "flex",
-            flexWrap: "wrap",
-            alignItems: "center",
-            justifyContent: "center",
-            mt: 12.75,
-          }}
-        >
-          <Box sx={{ flexBasis: { xs: "100%", md: "50%" }, flexGrow: 1 }}>
-            <Box sx={{ px: { xs: 0, md: 4 } }}>
-              <Box sx={{ maxWidth: 460, mx: "auto" }}>
-                <Typography variant="h3">
-                  <Box component="span" sx={{ color: "#FFCE00" }}>
-                    <AvoidBreak spans={["A trust-minimized"]} />
-                  </Box>
-                  <Box component="span" sx={{ display: "inline-block" }}>
-                    build
-                  </Box>
-                </Typography>
-                <Typography sx={{ mt: 2 }}>
-                  Wormhole is built to be trust-minimized from the ground up
-                  with the networks secured by 19 equally weighted
-                  guardians in the core layer.
-                </Typography>
+          <Box
+            sx={{
+              display: "flex",
+              flexWrap: "wrap-reverse",
+              alignItems: "center",
+              justifyContent: "center",
+              mt: 12.75,
+            }}
+          >
+            <Box
+              sx={{
+                mt: { xs: 8, md: 0 },
+                flexBasis: { xs: "100%", md: "50%" },
+                textAlign: "center",
+                flexGrow: 1,
+                backgroundColor: "rgba(255,255,255,.06)",
+                backdropFilter: "blur(3px)",
+                borderRadius: "37px",
+                pt: { xs: 3, md: 9.75 },
+                pb: { xs: 3, md: 9 },
+                px: { xs: 3, md: 8 },
+              }}
+            >
+              <img src={network} alt="" style={{ maxWidth: "100%" }} />
+            </Box>
+            <Box sx={{ flexBasis: { xs: "100%", md: "50%" }, flexGrow: 1 }}>
+              <Box sx={{ px: { xs: 0, md: 4 } }}>
+                <Box sx={{ maxWidth: 460, mx: "auto" }}>
+                  <Typography variant="h3">
+                    <Box component="span" sx={{ color: "#FFCE00" }}>
+                      Connecting projects{" "}
+                    </Box>
+                    <Box component="span" sx={{ display: "inline-block" }}>
+                      to networks
+                    </Box>
+                  </Typography>
+                  <Typography sx={{ mt: 2 }}>
+                    Six high-value networks, two centralized exchanges, and 19 dexes.
+                    Anyone in the community can add new networks to the protocol
+                    and build the future of blockchain.
+                  </Typography>
+                </Box>
               </Box>
             </Box>
           </Box>
           <Box
             sx={{
-              mt: { xs: 8, md: null },
-              flexBasis: { xs: "100%", md: "50%" },
-              textAlign: "center",
-              flexGrow: 1,
-              backgroundColor: "rgba(255,255,255,.06)",
-              backdropFilter: "blur(3px)",
-              borderRadius: "37px",
-              pt: 9.75,
-              pb: 9,
-              pl: 8,
-              pr: 4,
+              display: "flex",
+              flexWrap: "wrap",
+              alignItems: "center",
+              justifyContent: "center",
+              mt: 12.75,
             }}
           >
-            <Timeline
+            <Box sx={{ flexBasis: { xs: "100%", md: "50%" }, flexGrow: 1 }}>
+              <Box sx={{ px: { xs: 0, md: 4 } }}>
+                <Box sx={{ maxWidth: 460, mx: "auto" }}>
+                  <Typography variant="h3">
+                    <Box component="span" sx={{ color: "#FFCE00" }}>
+                      <AvoidBreak spans={["A trust-minimized"]} />
+                    </Box>
+                    <Box component="span" sx={{ display: "inline-block" }}>
+                      build
+                    </Box>
+                  </Typography>
+                  <Typography sx={{ mt: 2 }}>
+                    Wormhole is built to be trust-minimized from the ground up
+                    with a group of six networks secured by 19 equally weighted
+                    guardians in the core layer.
+                  </Typography>
+                </Box>
+              </Box>
+            </Box>
+            <Box
               sx={{
-                p: 0,
-                m: 0,
-                "& .MuiTimelineItem-root": { minHeight: 52 },
-                "& .MuiTimelineItem-root:last-child": { minHeight: 0 },
-                "& .MuiTimelineItem-root:before": { display: "none" },
-                "& .MuiTimelineConnector-root": {
-                  width: "1px",
-                  my: 0.25,
-                  backgroundColor: "transparent",
-                  borderLeft: "1px dashed #bdbdbd",
-                },
+                mt: { xs: 8, md: 0 },
+                flexBasis: { xs: "100%", md: "50%" },
+                textAlign: "center",
+                flexGrow: 1,
+                backgroundColor: "rgba(255,255,255,.06)",
+                backdropFilter: "blur(3px)",
+                borderRadius: "37px",
+                pt: 9.75,
+                pb: 9,
+                pl: 8,
+                pr: 4,
               }}
             >
-              <TimelineItem>
-                <TimelineSeparator>
-                  <img src={shape} alt="" />
-                  <TimelineConnector />
-                </TimelineSeparator>
-                <TimelineContent>Send your message to Wormhole</TimelineContent>
-              </TimelineItem>
-              <TimelineItem>
-                <TimelineSeparator>
-                  <img src={shape} alt="" />
-                  <TimelineConnector />
-                </TimelineSeparator>
-                <TimelineContent>
-                  The Guardian network observes the transaction
-                </TimelineContent>
-              </TimelineItem>
-              <TimelineItem>
-                <TimelineSeparator>
-                  <img src={shape} alt="" />
-                  <TimelineConnector />
-                </TimelineSeparator>
-                <TimelineContent>Quorum is achieved in seconds</TimelineContent>
-              </TimelineItem>
-              <TimelineItem>
-                <TimelineSeparator>
-                  <img src={shape} alt="" />
-                  <TimelineConnector />
-                </TimelineSeparator>
-                <TimelineContent>
-                  Guardians make your attested message publicly available.
-                </TimelineContent>
-              </TimelineItem>
-              <TimelineItem>
-                <TimelineSeparator>
-                  <img src={shape} alt="" />
-                </TimelineSeparator>
-                <TimelineContent>
-                  Access your message on a different chain
-                </TimelineContent>
-              </TimelineItem>
-            </Timeline>
+              <Timeline
+                sx={{
+                  p: 0,
+                  m: 0,
+                  "& .MuiTimelineItem-root": { minHeight: 52 },
+                  "& .MuiTimelineItem-root:last-child": { minHeight: 0 },
+                  "& .MuiTimelineItem-root:before": { display: "none" },
+                  "& .MuiTimelineConnector-root": {
+                    width: "1px",
+                    my: 0.25,
+                    backgroundColor: "transparent",
+                    borderLeft: "1px dashed #bdbdbd",
+                  },
+                }}
+              >
+                <TimelineItem>
+                  <TimelineSeparator>
+                    <img src={shape} alt="" />
+                    <TimelineConnector />
+                  </TimelineSeparator>
+                  <TimelineContent>Send your message to Wormhole</TimelineContent>
+                </TimelineItem>
+                <TimelineItem>
+                  <TimelineSeparator>
+                    <img src={shape} alt="" />
+                    <TimelineConnector />
+                  </TimelineSeparator>
+                  <TimelineContent>
+                    The Guardian network observes the transaction
+                  </TimelineContent>
+                </TimelineItem>
+                <TimelineItem>
+                  <TimelineSeparator>
+                    <img src={shape} alt="" />
+                    <TimelineConnector />
+                  </TimelineSeparator>
+                  <TimelineContent>Quorum is achieved in seconds</TimelineContent>
+                </TimelineItem>
+                <TimelineItem>
+                  <TimelineSeparator>
+                    <img src={shape} alt="" />
+                    <TimelineConnector />
+                  </TimelineSeparator>
+                  <TimelineContent>
+                    Guardians make your attested message publicly available.
+                  </TimelineContent>
+                </TimelineItem>
+                <TimelineItem>
+                  <TimelineSeparator>
+                    <img src={shape} alt="" />
+                  </TimelineSeparator>
+                  <TimelineContent>
+                    Access your message on a different chain
+                  </TimelineContent>
+                </TimelineItem>
+              </Timeline>
+            </Box>
           </Box>
         </Box>
       </Box>

explorer/src/pages/explorer.tsx

@@ -8,6 +8,7 @@ import Layout from "../components/Layout";
 import NetworkSelect from "../components/NetworkSelect";
 import shape1 from "../images/index/shape1.svg";
 import { SEO } from "../components/SEO";
+import shapes from "../images/shape.png";
 
 
 interface ExplorerQueryValues {
@@ -70,6 +71,20 @@ const ExplorerPage = ({ location }: PageProps) => {
         pathname={location.pathname}
       />
       <Box sx={{ position: "relative", marginTop: 17 }}>
+        <Box
+            sx={{
+              position: "absolute",
+              zIndex: -2,
+              bottom: '-220px',
+              left: '20%',
+              background: 'radial-gradient(closest-side at 50% 50%, #5189C8 0%, #5189C800 100%) ',
+              transform: 'matrix(-0.19, 0.98, -0.98, -0.19, 0, 0)',
+              width: 1609,
+              height: 1264,
+              pointerEvents: 'none',
+              opacity: 0.7,
+            }}
+          />
         <Box
           sx={{
             position: "absolute",
@@ -91,6 +106,36 @@ const ExplorerPage = ({ location }: PageProps) => {
           ]}
         />
       </Box>
+      <Box sx={{position: 'relative'}}>
+      <Box
+          sx={{
+            position: "absolute",
+            zIndex: -2,
+            top: '0',
+            background: 'radial-gradient(closest-side at 50% 50%, #5189C8 0%, #5189C800 100%) ',
+            transform: 'matrix(-0.67, 0.74, -0.74, -0.67, 0, 0)',
+            left: '70%',
+            width: 1077,
+            height: 1329,
+            pointerEvents: 'none',
+            opacity: 0.64,
+          }}
+        /> 
+      <Box
+            sx={{
+              position: "absolute",
+              zIndex: -1,
+              background: `url(${shapes})`,
+              backgroundSize: 'contain',
+              top: '0',
+              left: "85%",
+              transform: 'scaleX(-1)',
+              width: 1227,
+              height: 1018,
+              pointerEvents: 'none',
+              display:{xs: 'none', md: 'block'},
+            }}
+          />  
       <Box sx={{ maxWidth: 1220, mx: "auto", mt: 30, px: 3.75 }}>
         <Box
           sx={{
@@ -106,21 +151,22 @@ const ExplorerPage = ({ location }: PageProps) => {
       </Box>
 
 
-      <Box sx={{ maxWidth: 1220, mx: "auto", px: 3.75 }}>
+        <Box sx={{ maxWidth: 1220, mx: "auto", px: 3.75 }}>
 
-        {doneReadingQueryParams && <>
+          {doneReadingQueryParams && <>
 
-          <ExplorerSearch location={location} />
+            <ExplorerSearch location={location} />
 
-          {!(emitterChain && emitterAddress && sequence) && // if there is no messageId query &&
-            !txId && (                                      // if there is no transactionId query
-              <ExplorerStats
-                emitterChain={emitterChain}
-                emitterAddress={emitterAddress}
-              />
-            )}
+            {!(emitterChain && emitterAddress && sequence) && // if there is no messageId query &&
+              !txId && (                                      // if there is no transactionId query
+                <ExplorerStats
+                  emitterChain={emitterChain}
+                  emitterAddress={emitterAddress}
+                />
+              )}
 
-        </>}
+          </>}
+        </Box>
       </Box>
     </Layout>
   );

explorer/src/pages/index.tsx

@@ -1,29 +1,46 @@
 import ArrowForward from "@mui/icons-material/ArrowForward";
-import { Box, Button, Typography } from "@mui/material";
+import { Box, Button, Grid, Typography } from "@mui/material";
 import {
   Link as RouterLink,
   PageProps,
   graphql,
   useStaticQuery
 } from "gatsby";
-import * as React from "react";
+import React, { useEffect, useState } from "react";
 import GridWithCards from "../components/GridWithCards";
 import HeroText from "../components/HeroText";
 import Layout from "../components/Layout";
 import { SEO } from "../components/SEO";
 import { portal as portalUrl } from "../utils/urls";
-import apps from "../images/index/apps.png";
+
+import { gsap } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+
+import apps from "../images/index/apps2.png";
 import blob from "../images/index/blob.svg";
 import cross from "../images/index/cross.svg";
 import cube from "../images/index/cube.svg";
 import portal from "../images/index/portal.png";
-import protocols from "../images/index/protocols.png";
+import protocols from "../images/index/protocol_new.png";
 import shape1 from "../images/index/shape1.svg";
+import shape from "../images/shape.png";
+import shape2 from "../images/shape2.png";
+import { Totals, NotionalTvl } from "../components/ExplorerStats/ExplorerStats";
+import { amountFormatter } from "../utils/explorer";
 
-const featuredNumber = { fontSize: 42, fontWeight: "bold" };
+const featuredNumber = { fontSize: 42, fontFamily: "Suisse BP Intl", fontWeight: "bold" };
+const statsBaseUrl = "https://europe-west3-wormhole-315720.cloudfunctions.net/mainnet-"
 
 const IndexPage = ({ location }: PageProps) => {
   const { site } = useStaticQuery<IndexQueryType>(IndexStaticQuery)
+  const [tvl, setTvl] = useState<number | undefined>(undefined)
+  const [messageTotal, setMessageTotal] = useState<number | undefined>(undefined)
+
+  let statsInterval: NodeJS.Timer | undefined = undefined
+  const controller = new AbortController()
+  const { signal } = controller
+
+
   const logo = {
     "@type": "ImageObject",
     "url": `${site.siteMetadata.siteUrl}/logo-and-name-stacked.png`,
@@ -69,6 +86,78 @@ const IndexPage = ({ location }: PageProps) => {
     logo: logo
   }
 
+  const headerImage = React.useRef<HTMLCanvasElement>(null);
+  const gradient1 = React.useRef<HTMLCanvasElement>(null);
+  const gradient2 = React.useRef<HTMLCanvasElement>(null);
+
+
+  function fetchStats() {
+    const tvlUrl = `${statsBaseUrl}notionaltvl`
+    const messagesUrl = `${statsBaseUrl}totals`
+
+    fetch(tvlUrl, { signal }).then((res) => {
+      if (res.ok) return res.json();
+    }).then((result: NotionalTvl) => {
+      setTvl(result.AllTime["*"]["*"].Notional);
+    }, (error) => {
+      if (error.name !== "AbortError") console.error("failed fetching notional TVL. error: ", error);
+    });
+    fetch(messagesUrl, { signal }).then((res) => {
+      if (res.ok) return res.json();
+    }).then((result: Totals) => {
+      setMessageTotal(result.TotalCount["*"]);
+    }, (error) => {
+      if (error.name !== "AbortError") console.error("failed fetching totals. error: ", error);
+    });
+  }
+
+  useEffect(() => {
+    statsInterval = setInterval(fetchStats, 30000)
+
+    gsap.registerPlugin(ScrollTrigger);
+
+
+    gsap.from(headerImage.current, {
+      scale: 1.1,
+      duration: 10,
+      delay: 1,
+      rotation: 3,
+      ease: "Power3.easeOut",
+    })
+
+    gsap.to(gradient1.current, {
+      scale: 1.2,
+      ease: "Power3.easeOut",
+      x: 300,
+      scrollTrigger: {
+        trigger: gradient1.current,
+        start: "-0% 0%",
+        end: "+=500",
+        scrub: 1,
+      },
+    })
+
+    gsap.from(gradient2.current, {
+      scale: 0.5,
+      ease: "Power3.easeOut",
+      scrollTrigger: {
+        trigger: gradient2.current,
+        start: "-50% 50%",
+        end: "+=1000",
+        scrub: 1,
+      },
+    })
+
+    return function cleanup() {
+      // clear any ongoing intervals
+      if (statsInterval) {
+        clearInterval(statsInterval);
+      }
+      // abort any in-flight requests
+      controller.abort();
+    }
+  }, [])
+
   return (
     <Layout>
       <SEO
@@ -82,6 +171,7 @@ const IndexPage = ({ location }: PageProps) => {
       </SEO>
       <Box sx={{ position: "relative", marginTop: 21 }}>
         <Box
+          ref={headerImage}
           sx={{
             position: "absolute",
             zIndex: -1,
@@ -116,7 +206,7 @@ const IndexPage = ({ location }: PageProps) => {
               justifyContent: "center",
             }}
           >
-            <Box
+            {tvl && <Box
               sx={{
                 mt: 2,
                 mx: 1,
@@ -128,9 +218,9 @@ const IndexPage = ({ location }: PageProps) => {
                 borderTop: "1px solid white",
               }}
             >
-              <Typography sx={featuredNumber}>$1bn</Typography>
+              <Typography sx={featuredNumber}>${amountFormatter(tvl)}</Typography>
               <Typography variant="body2">in TVL</Typography>
-            </Box>
+            </Box>}
             <Box
               sx={{
                 mt: 2,
@@ -146,7 +236,7 @@ const IndexPage = ({ location }: PageProps) => {
               <Typography sx={featuredNumber}>7</Typography>
               <Typography variant="body2">chain integrations</Typography>
             </Box>
-            <Box
+            {messageTotal && <Box
               sx={{
                 mt: 2,
                 mx: 1,
@@ -158,72 +248,125 @@ const IndexPage = ({ location }: PageProps) => {
                 borderTop: "1px solid white",
               }}
             >
-              <Typography sx={featuredNumber}>60k+</Typography>
+              <Typography sx={featuredNumber}>
+                {amountFormatter(messageTotal, 0)}
+              </Typography>
               <Typography variant="body2">txs</Typography>
-            </Box>
+            </Box>}
           </Box>
         </Box>
       </Box>
-      <Box
-        sx={{
-          display: "flex",
-          flexWrap: "wrap",
-          maxWidth: 1220,
-          px: 3.75,
-          mt: 35,
-          mx: "auto",
-          alignItems: "center",
-          justifyContent: "center",
-        }}
-      >
+
+
+      <Box sx={{ position: 'relative' }}>
         <Box
+          ref={gradient1}
           sx={{
-            flexBasis: { xs: "100%", md: "50%" },
-            flexGrow: 1,
+            position: "absolute",
+            zIndex: -1,
+            top: '50%',
+            background: 'radial-gradient(closest-side at 50% 50%, #E72850 0%, #E7285000 100%)',
+            transform: 'matrix(0.96, 0.29, -0.29, 0.96, 0, 0)',
+            left: '60%',
+            width: 1645,
+            height: 903,
+            pointerEvents: 'none',
+            opacity: 0.7,
           }}
-        >
-          <Box sx={{ px: { xs: 0, md: 4 } }}>
-            <Box sx={{ maxWidth: 348, mx: "auto" }}>
-              <Typography variant="h3">
-                <Box component="span" sx={{ color: "#FFCE00" }}>
-                  Protocol:{" "}
-                </Box>
-                <Box component="span" sx={{ display: "inline-block" }}>
-                  the core layer
-                </Box>
-              </Typography>
-              <Typography sx={{ mt: 2 }}>
-                The foundation that an ecosystem of apps is built on top of.
-              </Typography>
-              <Button
-                component={RouterLink}
-                to="/buidl/"
-                sx={{ mt: 3 }}
-                variant="outlined"
-                color="inherit"
-                endIcon={<ArrowForward />}
-              >
-                Learn More
-              </Button>
-            </Box>
-          </Box>
-        </Box>
+        />
         <Box
+          ref={gradient2}
           sx={{
-            mt: { xs: 8, md: null },
-            flexBasis: { xs: "100%", md: "50%" },
-            textAlign: "center",
-            flexGrow: 1,
+            position: "absolute",
+            zIndex: -1,
+            top: '65%',
+            background: 'radial-gradient(closest-side at 50% 50%, #5189C8 0%, #5189C800 100%) ',
+            transform: 'matrix(0.67, 0.74, -0.74, 0.67, 0, 0)',
+            left: '5%',
+            width: 1136,
+            height: 1489,
+            pointerEvents: 'none',
+            opacity: 0.64,
+          }}
+        />
+        <Box
+          sx={{
+            position: "absolute",
+            zIndex: -1,
+            background: `url(${shape})`,
+            backgroundSize: 'contain',
+            top: -100,
+            right: '70vw',
+            width: 1363,
+            height: 1130,
+            pointerEvents: 'none',
+            display: { xs: 'none', md: 'block' },
+          }}
+        />
+        <Box
+          sx={{
+            display: "flex",
+            flexWrap: "wrap",
+            maxWidth: 1220,
+            px: 3.75,
+            mt: 35,
+            mx: "auto",
+            alignItems: "center",
+            justifyContent: "center",
           }}
         >
+
+          <Box
+            sx={{
+              flexBasis: { xs: "100%", md: "40%" },
+              flexGrow: 1,
+            }}
+          >
+            <Box sx={{ px: { xs: 0, md: 4 } }}>
+              <Box sx={{ maxWidth: 348, mx: "auto" }}>
+                <Typography variant="h3">
+                  <Box component="span" sx={{ color: "#FFCE00" }}>
+                    Protocol:{" "}
+                  </Box>
+                  <Box component="span" sx={{ display: "inline-block" }}>
+                    the core layer
+                  </Box>
+                </Typography>
+                <Typography sx={{ mt: 2 }}>
+                  The foundation that an ecosystem of apps is built on top of.
+                </Typography>
+                <Button
+                  component={RouterLink}
+                  to="/buidl/"
+                  sx={{ mt: 3 }}
+                  variant="outlined"
+                  color="inherit"
+                  endIcon={<ArrowForward />}
+                >
+                  Learn More
+                </Button>
+              </Box>
+            </Box>
+          </Box>
           <Box
-            component="img"
-            src={protocols}
-            alt=""
-            sx={{ maxWidth: "100%" }}
-          />
+            sx={{
+              mt: { xs: 8, md: null },
+              flexBasis: { xs: "100%", md: "60%" },
+              textAlign: "center",
+              flexGrow: 1,
+            }}
+          >
+            <Box
+              component="img"
+              src={protocols}
+              alt=""
+              sx={{ maxWidth: "100%" }}
+            />
+          </Box>
         </Box>
       </Box>
+
+
       <Box
         sx={{
           display: "flex",
@@ -273,61 +416,89 @@ const IndexPage = ({ location }: PageProps) => {
           </Box>
         </Box>
       </Box>
-      <Box
-        sx={{
-          display: "flex",
-          flexWrap: "wrap",
-          maxWidth: 1220,
-          px: 3.75,
-          mt: 15.5,
-          mx: "auto",
-          alignItems: "center",
-          justifyContent: "center",
-        }}
-      >
+
+      <Box sx={{ position: 'relative' }}>
         <Box
           sx={{
-            flexBasis: { xs: "100%", md: "45%" },
-            flexGrow: 1,
+            position: "absolute",
+            zIndex: -1,
+            background: `url(${shape2})`,
+            backgroundSize: 'contain',
+            top: '50%',
+            transform: 'translateY(-50%)',
+            left: '75vw',
+            width: 1612,
+            height: 1316,
+            pointerEvents: 'none',
+            display: { xs: 'none', md: 'block' },
           }}
-        >
-          <Box sx={{ px: { xs: 0, md: 4 } }}>
-            <Box sx={{ maxWidth: 340, mx: "auto" }}>
-              <Typography variant="h3">
-                <Box component="span" sx={{ color: "#FFCE00" }}>
-                  Portal:{" "}
-                </Box>
-                <Box component="span" sx={{ display: "inline-block" }}>
-                  a token bridge
-                </Box>
-              </Typography>
-              <Typography sx={{ mt: 2 }}>
-                Never have to retrace your steps, with unlimited transfers
-                across chains for tokens and NFTs wrapped by Wormhole.
-              </Typography>
-              <Button
-                href={portalUrl}
-                sx={{ mt: 3 }}
-                variant="outlined"
-                color="inherit"
-                endIcon={<ArrowForward />}
-              >
-                Learn More
-              </Button>
-            </Box>
-          </Box>
-        </Box>
+        />
         <Box
           sx={{
-            mt: { xs: 8, md: null },
-            flexBasis: { xs: "100%", md: "55%" },
-            textAlign: "center",
-            flexGrow: 1,
+            display: "flex",
+            flexWrap: "wrap",
+            maxWidth: 1220,
+            px: 3.75,
+            mt: 15.5,
+            mx: "auto",
+            alignItems: "center",
+            justifyContent: "center",
           }}
         >
-          <Box component="img" src={portal} alt="" sx={{ maxWidth: "100%" }} />
+          <Box
+            sx={{
+              flexBasis: { xs: "100%", md: "40%" },
+              flexGrow: 1,
+            }}
+          >
+            <Box sx={{ px: { xs: 0, md: 4 } }}>
+              <Box sx={{ maxWidth: 340, mx: "auto" }}>
+                <Typography variant="h3">
+                  <Box component="span" sx={{ color: "#FFCE00" }}>
+                    Portal:{" "}
+                  </Box>
+                  <Box component="span" sx={{ display: "inline-block" }}>
+                    a token bridge
+                  </Box>
+                </Typography>
+                <Typography sx={{ mt: 2 }}>
+                  Never have to retrace your steps, with unlimited transfers
+                  across chains for tokens and NFTs wrapped by Wormhole.
+                </Typography>
+                <Button
+                  href={portalUrl}
+                  sx={{ mt: 3 }}
+                  variant="outlined"
+                  color="inherit"
+                  endIcon={<ArrowForward />}
+                >
+                  Learn More
+                </Button>
+              </Box>
+            </Box>
+          </Box>
+          <Box
+            sx={{
+              mt: { xs: 8, md: null },
+              flexBasis: { xs: "100%", md: "60%" },
+              textAlign: "center",
+              flexGrow: 1,
+            }}
+          >
+            <Button variant="text" href={portalUrl} sx={{
+              '&:hover': {
+                background: 'transparent'
+              },
+              'span': {
+                display: 'none'
+              }
+            }}>
+              <Box component="img" src={portal} alt="" sx={{ maxWidth: "100%" }} />
+            </Button>
+          </Box>
         </Box>
       </Box>
+
       <Box sx={{ textAlign: "center", mt: 12.5, px: 2 }}>
         <Typography variant="h3">
           <Box component="span" sx={{ color: "#FFCE00" }}>
@@ -335,7 +506,7 @@ const IndexPage = ({ location }: PageProps) => {
           </Box>
           <Box component="span"> everything</Box>
         </Typography>
-        <Typography sx={{ mt: 2, maxWidth: 480, mx: "auto" }}>
+        <Typography sx={{ mt: 2, maxWidth: 480, mx: "auto", fontWeight: 300 }}>
           Each blockchain has a distinct strength. Wormhole lets you get the
           best out of every blockchain without compromise.
         </Typography>
@@ -345,18 +516,21 @@ const IndexPage = ({ location }: PageProps) => {
           data={[
             {
               src: cross,
+              size: 220,
               header: "Never stop expanding",
               description:
                 "Chains, information, and users are growing everyday. Build on a protocol that is set up to scale, with no limits, right from the start.",
             },
             {
               src: blob,
+              size: 220,
               header: "Explore and experiment",
               description:
                 "Now is the time to explore and experiment. The only limit to what you're able to build is your imagination.",
             },
             {
               src: cube,
+              size: 220,
               header: "Power your project",
               description:
                 "Join the growing list of projects that are composing, raising, and succeeding with Wormhole core layer.",
@@ -364,6 +538,7 @@ const IndexPage = ({ location }: PageProps) => {
           ]}
         />
       </Box>
+
     </Layout>
   );
 };

explorer/src/pages/network.tsx

@@ -29,6 +29,7 @@ import { ChainId } from "@certusone/wormhole-sdk";
 import { KeyboardArrowDown, KeyboardArrowUp } from "@mui/icons-material";
 import { ChainID } from "../utils/consts";
 import { SEO } from "../components/SEO";
+import shapes from "../images/shape.png";
 
 const GuardianRow = ({ hb }: { hb: Heartbeat }) => {
   const [open, setOpen] = React.useState(false);
@@ -218,6 +219,20 @@ const NetworkPage = ({ location }: PageProps) => {
         pathname={location.pathname}
       />
       <Box sx={{ position: "relative", marginTop: 17 }}>
+          <Box
+            sx={{
+              position: "absolute",
+              zIndex: -2,
+              bottom: '-220px',
+              left: '20%',
+              background: 'radial-gradient(closest-side at 50% 50%, #5189C8 0%, #5189C800 100%) ',
+              transform: 'matrix(-0.19, 0.98, -0.98, -0.19, 0, 0)',
+              width: 1609,
+              height: 1264,
+              pointerEvents: 'none',
+              opacity: 0.7,
+            }}
+          />   
         <Box
           sx={{
             position: "absolute",
@@ -239,9 +254,41 @@ const NetworkPage = ({ location }: PageProps) => {
           ]}
         />
       </Box>
+      <Box sx={{position: 'relative'}}>
+        <Box
+            sx={{
+              position: "absolute",
+              zIndex: -2,
+              top: '0',
+              background: 'radial-gradient(closest-side at 50% 50%, #5189C8 0%, #5189C800 100%) ',
+              transform: 'matrix(-0.67, 0.74, -0.74, -0.67, 0, 0)',
+              left: '70%',
+              width: 1077,
+              height: 1329,
+              pointerEvents: 'none',
+              opacity: 0.64,
+            }}
+          /> 
+        <Box
+              sx={{
+                position: "absolute",
+                zIndex: -1,
+                background: `url(${shapes})`,
+                backgroundSize: 'contain',
+                top: '0',
+                left: "85%",
+                transform: 'scaleX(-1)',
+                width: 1227,
+                height: 1018,
+                pointerEvents: 'none',
+                display:{xs: 'none', md: 'block'},
+              }}
+            />  
+      
       <Box sx={{ maxWidth: 1220, mx: "auto", mt: 30, px: 3.75 }}>
         <GuardiansList />
       </Box>
+      </Box>
     </Layout>
   );
 };

explorer/src/styles/global.css

@@ -0,0 +1,34 @@
+/* @font-face {
+  font-family: "Suisse BP Intl";
+  src: url('../fonts/SuisseBPIntlLight.woff2') format('woff2');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Suisse BP Intl Antique";
+  src: url('../fonts/SuisseBPIntlAntique.woff2') format('woff2');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+} */
+
+@font-face {
+  font-family: "Suisse BP Intl";
+  src: url('../fonts/SuisseBPIntlBold.woff2') format('woff2');
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* @font-face {
+  font-family: "Suisse BP Intl";
+  src: url('../fonts/SuisseBPIntlRegular.woff2') format('woff2');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+} */
+
+
+

explorer/src/utils/urls.ts

@@ -4,6 +4,7 @@ export const apps = "/apps/";
 export const buidl = "/buidl/";
 export const explorer = "/explorer/";
 export const network = "/network/";
+export const brand = "/brand/";
 
 // External
 export const portal = "https://wormholebridge.com/";
@@ -14,3 +15,21 @@ export const discord = "https://discord.gg/wormholecrypto";
 export const github = "https://github.com/certusone/wormhole";
 export const telegram = "https://t.me/wormholecrypto";
 export const twitter = "https://twitter.com/wormholecrypto";
+
+
+
+// Brand
+
+export const logopackage = "https://drive.google.com/drive/folders/13I4_XdW8D0c1wMT_W2pie1cm6B4-57l3?usp=sharing";
+export const colors = "https://drive.google.com/drive/folders/1GOUAh5gCG41mBXCiPDSIGzIEdM8pQTsW?usp=sharing";
+export const icons = "https://drive.google.com/drive/folders/1UKLfHPwmssU8WBnAQckWD_WFriq5ntuE?usp=sharing";
+export const assets = "https://drive.google.com/drive/folders/1r3lCaTT44SX2sOf2njuwO8GmWQQnAlhF?usp=sharing";
+export const logonamesvg = "https://drive.google.com/drive/folders/16urPGWs5mC9e9F0CKuZSwwdQe-R5cvZ8?usp=sharing";
+export const logonamepng = "https://drive.google.com/drive/folders/12Ayj3ya0oBKI-ohI-BBTbtFMREnpBJJj?usp=sharing";
+export const logopng = "https://drive.google.com/drive/folders/1Upxwp2l9PTsjhBy6kYGpjo0YeSB8h-r4?usp=sharing";
+export const logosvg = "https://drive.google.com/drive/folders/1DMBmdv4wL-k6keVFUXV8NC9krGOtx6xC?usp=sharing";
+export const wormpng1 = "https://drive.google.com/file/d/1mqbbfvKoUD61dT0ojcMB2t3qL19TYZml/view?usp=sharing";
+export const wormpng2 = "https://drive.google.com/file/d/1BuYdcOuVD9s9ZVPyQBr6DEHbXnPDYN9y/view?usp=sharing";
+export const gradients = "https://drive.google.com/drive/folders/1XWIL47NhrMB_eWRtm3AnWKnI4m_mNbl2?usp=sharing";
+export const gradient2svg = "https://drive.google.com/drive/folders/1ZBV1hJMjvd6BKYnNYRx92E_PK5rTpzbf?usp=sharing";
+export const contact = "https://wormholebridge.com/";