all the changes from Tibi and Adrian

This commit is contained in:
justinschuldt 2022-02-23 17:10:05 -06:00 committed by Justin Schuldt
parent 7e461f489c
commit a20b6adb18
50 changed files with 2574 additions and 407 deletions

View File

@ -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-

View File

@ -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-

View File

@ -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-

View File

@ -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

View File

@ -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",

View File

@ -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",

View File

@ -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>

View File

@ -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>
)}

View File

@ -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)" }}

View File

@ -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

View File

@ -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);
}

View File

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

View File

@ -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;

View File

@ -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>

View File

@ -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} />
) : (

View File

@ -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 />

View File

@ -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;

View File

@ -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>
)

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 8.3 KiB

View File

@ -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>

After

Width:  |  Height:  |  Size: 2.7 KiB

View File

@ -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>

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -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>

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 145 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 91 KiB

View File

@ -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>

After

Width:  |  Height:  |  Size: 4.8 KiB

View File

@ -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>

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

@ -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>

After

Width:  |  Height:  |  Size: 12 KiB

View File

@ -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>

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 84 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 59 KiB

After

Width:  |  Height:  |  Size: 109 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 271 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 391 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 446 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 478 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 264 KiB

View File

@ -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>
);

View File

@ -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 youre 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;

View File

@ -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={{
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,
}}
>
<img src={stack} alt="" />
</Box>
</Box>
<Box
sx={{
display: "flex",
flexWrap: "wrap-reverse",
alignItems: "center",
justifyContent: "center",
mt: 12.75,
}}
>
<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={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={{
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>
</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,
}}
>
<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",
},
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={{
position: "absolute",
zIndex: -1,
background: `url(${shapes})`,
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(${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={{
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={{
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,
}}
>
<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>
<img src={stack} alt="" />
</Box>
</Box>
<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={{
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 a group of six networks secured by 19 equally weighted
guardians in the core layer.
</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,
pl: 8,
pr: 4,
}}
>
<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>

View File

@ -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>
);

View File

@ -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={{
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
ref={gradient2}
sx={{
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={{
flexBasis: { xs: "100%", md: "50%" },
flexGrow: 1,
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={{ 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
sx={{
mt: { xs: 8, md: null },
flexBasis: { xs: "100%", md: "50%" },
textAlign: "center",
flexGrow: 1,
display: "flex",
flexWrap: "wrap",
maxWidth: 1220,
px: 3.75,
mt: 35,
mx: "auto",
alignItems: "center",
justifyContent: "center",
}}
>
<Box
component="img"
src={protocols}
alt=""
sx={{ maxWidth: "100%" }}
/>
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
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={{
display: "flex",
flexWrap: "wrap",
maxWidth: 1220,
px: 3.75,
mt: 15.5,
mx: "auto",
alignItems: "center",
justifyContent: "center",
}}
>
<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
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>
<Box
sx={{
mt: { xs: 8, md: null },
flexBasis: { xs: "100%", md: "55%" },
textAlign: "center",
flexGrow: 1,
}}
>
<Box component="img" src={portal} alt="" sx={{ maxWidth: "100%" }} />
<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>
);
};

View File

@ -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>
);
};

View File

@ -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;
} */

View File

@ -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/";