animations wip
This commit is contained in:
saml33
parent
1e8f18aa5d
commit
1ac58aa3c5
|
|
@ -0,0 +1,467 @@
|
|||
import {
|
||||
ArrowPathRoundedSquareIcon,
|
||||
BoltIcon,
|
||||
BuildingLibraryIcon,
|
||||
ChevronRightIcon,
|
||||
CurrencyDollarIcon,
|
||||
DevicePhoneMobileIcon,
|
||||
} from '@heroicons/react/20/solid'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import useSectionBg from '../../hooks/useSectionBg'
|
||||
import BotOne from '../icons/BotOne'
|
||||
import BotThree from '../icons/BotThree'
|
||||
import BotTwo from '../icons/BotTwo'
|
||||
import LiquidIcon from '../icons/LiquidIcon'
|
||||
import { LinkButton } from '../shared/Button'
|
||||
import ButtonLink from '../shared/ButtonLink'
|
||||
import ColorBlur from '../shared/ColorBlur'
|
||||
import HeadingTagline from '../shared/HeadingTagline'
|
||||
import IconWithText from '../shared/IconWithText'
|
||||
import InlineImageWithText from '../shared/InlineImageWithText'
|
||||
import SectionWrapper from '../shared/SectionWrapper'
|
||||
import Steps from '../shared/Steps'
|
||||
import HomeTopSection from './HomeTopSection'
|
||||
import Testimonials from './Testimonials'
|
||||
import { gsap } from 'gsap'
|
||||
import { ScrollTrigger } from 'gsap/ScrollTrigger'
|
||||
import { useLayoutEffect, useRef } from 'react'
|
||||
import { MotionPathPlugin } from 'gsap/dist/MotionPathPlugin'
|
||||
|
||||
gsap.registerPlugin(MotionPathPlugin)
|
||||
gsap.registerPlugin(ScrollTrigger)
|
||||
|
||||
const tokenIcons = [
|
||||
{ icon: 'mngo.svg', x: '15%', y: '20%' },
|
||||
{ icon: 'btc.svg', x: '2%', y: '10%' },
|
||||
{ icon: 'eth.svg', x: '90%', y: '23%' },
|
||||
{ icon: 'usdt.svg', x: '79%', y: '25%' },
|
||||
{ icon: 'sol.svg', x: '95%', y: '80%' },
|
||||
{ icon: 'usdc.svg', x: '3%', y: '65%' },
|
||||
{ icon: 'usdc.svg', x: '88%', y: '40%' },
|
||||
{ icon: 'btc.svg', x: '86%', y: '48%' },
|
||||
{ icon: 'eth.svg', x: '10%', y: '73%' },
|
||||
{ icon: 'usdt.svg', x: '14%', y: '78%' },
|
||||
{ icon: 'sol.svg', x: '12%', y: '40%' },
|
||||
{ icon: 'mngo.svg', x: '81%', y: '68%' },
|
||||
]
|
||||
|
||||
const STEPS = (t) => [
|
||||
{
|
||||
desc: 'home:get-wallet-desc',
|
||||
imagePath: '/images/img-placeholder.png',
|
||||
title: 'home:get-wallet',
|
||||
children: (
|
||||
<div className="flex items-center space-x-3 sm:space-x-6 mt-4 lg:mt-6">
|
||||
<a
|
||||
href="https://chrome.google.com/webstore/detail/phantom/bfnaelmomeimhlpmgjnjophhpkkoljpa"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<LinkButton className="flex items-center">
|
||||
{t('home:get-phantom')}
|
||||
<ChevronRightIcon className="h-6 w-6 ml-1.5" />
|
||||
</LinkButton>
|
||||
</a>
|
||||
<a
|
||||
href="https://chrome.google.com/webstore/detail/solflare-wallet/bhhhlbepdkbapadjdnnojkbgioiodbic"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<LinkButton className="flex items-center">
|
||||
{t('home:get-solflare')}
|
||||
<ChevronRightIcon className="h-6 w-6 ml-1.5" />
|
||||
</LinkButton>
|
||||
</a>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
desc: 'home:fund-wallet-desc',
|
||||
imagePath: '/images/img-placeholder.png',
|
||||
title: 'home:fund-wallet',
|
||||
},
|
||||
{
|
||||
desc: 'home:connect-mango-desc',
|
||||
imagePath: '/images/img-placeholder.png',
|
||||
title: 'home:connect-mango',
|
||||
},
|
||||
{
|
||||
desc: 'home:trade-earn-borrow-desc',
|
||||
imagePath: '/images/img-placeholder.png',
|
||||
title: 'home:trade-earn-borrow',
|
||||
children: (
|
||||
<ButtonLink
|
||||
className="mt-4 lg:mt-6"
|
||||
path="https://app.mango.markets/"
|
||||
linkText={t('home:get-started')}
|
||||
/>
|
||||
),
|
||||
},
|
||||
]
|
||||
|
||||
const HomePage = () => {
|
||||
const { t } = useTranslation(['common', 'home'])
|
||||
const sectionBg = useSectionBg()
|
||||
|
||||
const callouts = useRef()
|
||||
const swapPanel = useRef()
|
||||
const unlimitedTokens = useRef()
|
||||
|
||||
useLayoutEffect(() => {
|
||||
const ctx = gsap.context((self) => {
|
||||
const boxes = self.selector('.highlight-features')
|
||||
boxes.forEach((box) => {
|
||||
gsap.to(box, {
|
||||
opacity: 1,
|
||||
y: -40,
|
||||
scrollTrigger: {
|
||||
trigger: box,
|
||||
end: 'top 40%',
|
||||
scrub: true,
|
||||
},
|
||||
})
|
||||
})
|
||||
}, callouts) // <- Scope!
|
||||
return () => ctx.revert() // <- Cleanup!
|
||||
}, [])
|
||||
|
||||
useLayoutEffect(() => {
|
||||
const ctx = gsap.context((self) => {
|
||||
const icons = self.selector('.token-icon')
|
||||
icons.forEach((icon, i) => {
|
||||
gsap.to(icon, {
|
||||
y: i % 2 ? 100 : -100,
|
||||
rotateZ: i % 2 ? 45 : -45,
|
||||
opacity: 0,
|
||||
scrollTrigger: {
|
||||
trigger: icon,
|
||||
scrub: true,
|
||||
},
|
||||
})
|
||||
})
|
||||
}, swapPanel) // <- Scope!
|
||||
return () => ctx.revert() // <- Cleanup!
|
||||
}, [])
|
||||
|
||||
useLayoutEffect(() => {
|
||||
const ctx = gsap.context((self) => {
|
||||
const icons = self.selector('.unlimited-icon')
|
||||
const angle = 360 / 12
|
||||
const distance = 150 // distance from origin
|
||||
icons.forEach((icon, i) => {
|
||||
const radians = (angle * (i + 1) * Math.PI) / 180
|
||||
// Calculate x and y offsets
|
||||
const offsetX = distance * Math.cos(radians)
|
||||
const offsetY = distance * Math.sin(radians)
|
||||
const iconTl = gsap.timeline({
|
||||
scrollTrigger: {
|
||||
trigger: icon,
|
||||
start: 'bottom bottom',
|
||||
end: 'top -100%',
|
||||
scrub: true,
|
||||
markers: true,
|
||||
},
|
||||
})
|
||||
iconTl
|
||||
.to(icon, {
|
||||
x: offsetX,
|
||||
y: offsetY,
|
||||
})
|
||||
.to(icon, {
|
||||
rotateZ: 180,
|
||||
})
|
||||
})
|
||||
}, unlimitedTokens) // <- Scope!
|
||||
return () => ctx.revert() // <- Cleanup!
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
<HomeTopSection />
|
||||
<SectionWrapper className="pt-24 lg:pt-32 xl:pt-40" noPaddingY>
|
||||
<div className="grid grid-cols-6 gap-8" ref={callouts}>
|
||||
<IconWithText
|
||||
desc={t('home:competitive-fees-desc')}
|
||||
icon={<CurrencyDollarIcon className="h-5 w-5 text-th-fgd-2" />}
|
||||
title={t('home:competitive-fees')}
|
||||
showBackground
|
||||
/>
|
||||
<IconWithText
|
||||
desc={t('home:lightning-execution-desc')}
|
||||
icon={<BoltIcon className="h-5 w-5 text-th-fgd-2" />}
|
||||
title={t('home:lightning-execution')}
|
||||
showBackground
|
||||
/>
|
||||
<IconWithText
|
||||
desc={t('home:deeply-liquid-desc')}
|
||||
icon={<LiquidIcon className="h-5 w-5 text-th-fgd-2" />}
|
||||
title={t('home:deeply-liquid')}
|
||||
showBackground
|
||||
/>
|
||||
<IconWithText
|
||||
desc={t('home:cross-margin-desc')}
|
||||
icon={
|
||||
<ArrowPathRoundedSquareIcon className="h-5 w-5 text-th-fgd-2" />
|
||||
}
|
||||
title={t('home:cross-margin')}
|
||||
showBackground
|
||||
/>
|
||||
<IconWithText
|
||||
desc={t('home:community-governed-desc')}
|
||||
icon={<BuildingLibraryIcon className="h-5 w-5 text-th-fgd-2" />}
|
||||
title={t('home:community-governed')}
|
||||
showBackground
|
||||
/>
|
||||
<IconWithText
|
||||
desc={t('home:trade-your-way-desc')}
|
||||
icon={<DevicePhoneMobileIcon className="h-5 w-5 text-th-fgd-2" />}
|
||||
title={t('home:trade-your-way')}
|
||||
showBackground
|
||||
/>
|
||||
</div>
|
||||
</SectionWrapper>
|
||||
<SectionWrapper className="relative overflow-hidden">
|
||||
<div className="w-full h-full" ref={swapPanel}>
|
||||
<div className="border border-th-bkg-3 px-16 py-24 rounded-xl relative min-h-[730px]">
|
||||
<h2 className="mb-4 text-center">{t('home:swap-heading')}</h2>
|
||||
<p className="intro-p mb-10 text-center max-w-lg mx-auto">
|
||||
{t('home:swap-desc')}
|
||||
</p>
|
||||
{/* <div className="grid grid-cols-3 gap-8">
|
||||
<div className="col-span-1">
|
||||
<img
|
||||
className="w-20 h-auto"
|
||||
src="/images/img-placeholder.png"
|
||||
alt=""
|
||||
/>
|
||||
<div>
|
||||
<h3 className="mb-3">{t('home:swap-highlight-1-heading')}</h3>
|
||||
<p>{t('home:swap-highlight-1-desc')}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-1">
|
||||
<img
|
||||
className="w-20 h-auto"
|
||||
src="/images/img-placeholder.png"
|
||||
alt=""
|
||||
/>
|
||||
<div>
|
||||
<h3 className="mb-3">{t('home:swap-highlight-2-heading')}</h3>
|
||||
<p>{t('home:swap-highlight-2-desc')}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-1">
|
||||
<img
|
||||
className="w-20 h-auto"
|
||||
src="/images/img-placeholder.png"
|
||||
alt=""
|
||||
/>
|
||||
<div>
|
||||
<h3 className="mb-3">{t('home:swap-highlight-3-heading')}</h3>
|
||||
<p>{t('home:swap-highlight-3-desc')}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
<ButtonLink
|
||||
className="mx-auto"
|
||||
path="https://app.mango.markets/"
|
||||
linkText={t('home:swap-now')}
|
||||
size="large"
|
||||
/>
|
||||
<img
|
||||
className="shadow-lg mt-12 w-2/3 h-auto absolute left-1/2 -translate-x-1/2"
|
||||
src="/images/@1x-swap-desktop-dark-2.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
{tokenIcons.map((icon) => (
|
||||
<img
|
||||
className={`absolute token-icon w-10 h-10`}
|
||||
key={icon.icon}
|
||||
src={`/icons/mono/${icon.icon}`}
|
||||
style={{ top: icon.y, left: icon.x }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</SectionWrapper>
|
||||
<SectionWrapper className="relative sticky top-0">
|
||||
<div className="grid grid-cols-12 gap-8 md:gap-12 flex flex-col sm:flex-row items-end mb-10 md:mb-16 relative">
|
||||
<div
|
||||
className="col-span-12 sm:col-span-6 relative w-full h-full flex items-center justify-center sticky top-0 unlimited-icon-wrapper"
|
||||
ref={unlimitedTokens}
|
||||
>
|
||||
{/* <HeadingTagline text={t('home:risk-engine-desc')} /> */}
|
||||
{/* <p>Bubble illustration with token particles inside</p> */}
|
||||
{tokenIcons.map((icon) => (
|
||||
<div
|
||||
className="absolute bg-th-bkg-2 rounded-full h-16 w-16 unlimited-icon flex items-center justify-center"
|
||||
key={icon.icon}
|
||||
>
|
||||
<img className={`w-10 h-10`} src={`/icons/mono/${icon.icon}`} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="col-span-12 sm:col-span-6">
|
||||
<h2 className="mb-4">{t('home:token-listings')}</h2>
|
||||
<p className="intro-p mb-10 max-w-lg">{t('home:swap-desc')}</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* <div className="grid grid-cols-6 gap-x-8 gap-y-12 mt-12">
|
||||
<IconWithText
|
||||
desc={t('home:risk-engine-1-desc')}
|
||||
icon={
|
||||
<img
|
||||
src="/images/img-placeholder.png"
|
||||
className="h-20 w-20 mb-4"
|
||||
/>
|
||||
}
|
||||
linkPath="#"
|
||||
linkText={t('learn-more')}
|
||||
noBorder
|
||||
title={t('home:risk-engine-1')}
|
||||
/>
|
||||
<IconWithText
|
||||
desc={t('home:risk-engine-2-desc')}
|
||||
icon={
|
||||
<img
|
||||
src="/images/img-placeholder.png"
|
||||
className="h-20 w-20 mb-4"
|
||||
/>
|
||||
}
|
||||
linkPath="#"
|
||||
linkText={t('learn-more')}
|
||||
noBorder
|
||||
title={t('home:risk-engine-2')}
|
||||
/>
|
||||
<IconWithText
|
||||
desc={t('home:risk-engine-3-desc')}
|
||||
icon={
|
||||
<img
|
||||
src="/images/img-placeholder.png"
|
||||
className="h-20 w-20 mb-4"
|
||||
/>
|
||||
}
|
||||
linkPath="#"
|
||||
linkText={t('learn-more')}
|
||||
noBorder
|
||||
title={t('home:risk-engine-3')}
|
||||
/>
|
||||
</div> */}
|
||||
</SectionWrapper>
|
||||
<div className={`${sectionBg} z-20 relative`}>
|
||||
<SectionWrapper>
|
||||
<div className="text-center max-w-[800px] mx-auto">
|
||||
<h2 className="mb-4">{t('home:built-for-traders-holders')}</h2>
|
||||
<p className="intro-p">
|
||||
{t('home:built-for-traders-holders-desc')}
|
||||
</p>
|
||||
</div>
|
||||
{/* <InlineImageWithText
|
||||
desc={t('home:token-listings-desc')}
|
||||
title={t('home:token-listings')}
|
||||
imageSrc="/images/img-placeholder.png"
|
||||
linkPath="#"
|
||||
linkText={t('learn-more')}
|
||||
/> */}
|
||||
{/* <InlineImageWithText
|
||||
desc={t('home:risk-engine-desc')}
|
||||
title={t('home:risk-engine')}
|
||||
imageSrc="/images/img-placeholder.png"
|
||||
linkPath="#"
|
||||
linkText={t('learn-more')}
|
||||
reverse
|
||||
/> */}
|
||||
<InlineImageWithText
|
||||
desc={t('home:earn-interest-desc')}
|
||||
title={t('home:earn-interest')}
|
||||
imageSrc="/images/img-placeholder.png"
|
||||
linkPath="https://app.mango.markets"
|
||||
linkText={t('home:deposit-now')}
|
||||
reverse
|
||||
/>
|
||||
<InlineImageWithText
|
||||
desc={t('home:borrow-any-token-desc')}
|
||||
title={t('home:borrow-any-token')}
|
||||
imageSrc="/images/img-placeholder.png"
|
||||
linkPath="https://app.mango.markets"
|
||||
linkText={t('home:borrow-now')}
|
||||
// reverse
|
||||
/>
|
||||
</SectionWrapper>
|
||||
</div>
|
||||
<div className="relative overflow-hidden">
|
||||
<SectionWrapper>
|
||||
<h2 className="mb-4">{t('home:trading-bots-welcome')}</h2>
|
||||
<p className="intro-p max-w-[800px]">
|
||||
{t('home:trading-bots-welcome-desc')}
|
||||
</p>
|
||||
<div className="grid grid-cols-6 gap-x-8 gap-y-12 mt-12">
|
||||
<IconWithText
|
||||
desc={t('home:market-maker-desc')}
|
||||
icon={<BotOne className="h-16 w-16 mb-4 text-th-fgd-2" />}
|
||||
linkPath="https://github.com/blockworks-foundation/mango-v4/tree/dev/ts/client/scripts/mm"
|
||||
linkText={t('home:market-maker-link')}
|
||||
noBorder
|
||||
title={t('home:market-maker')}
|
||||
/>
|
||||
<IconWithText
|
||||
desc={t('home:liquidator-desc')}
|
||||
icon={<BotTwo className="h-16 w-16 mb-4 text-th-fgd-2" />}
|
||||
linkPath="#"
|
||||
linkText={t('home:liquidator-link')}
|
||||
noBorder
|
||||
title={t('home:liquidator')}
|
||||
/>
|
||||
<IconWithText
|
||||
desc={t('home:build-your-own-desc')}
|
||||
icon={<BotThree className="h-16 w-16 mb-4 text-th-fgd-2" />}
|
||||
linkPath="#"
|
||||
linkText={t('home:explore-the-code')}
|
||||
noBorder
|
||||
title={t('home:build-your-own')}
|
||||
/>
|
||||
</div>
|
||||
</SectionWrapper>
|
||||
<ColorBlur
|
||||
className="animate-blob -top-20 left-0 opacity-10"
|
||||
height="300px"
|
||||
width="66%"
|
||||
/>
|
||||
</div>
|
||||
<div className={`${sectionBg} z-20 relative`}>
|
||||
<SectionWrapper noPaddingX>
|
||||
<div className="grid grid-cols-12 gap-8 md:gap-12 flex flex-col sm:flex-row items-end mb-10 md:mb-16">
|
||||
<div className="col-span-12 sm:col-span-6 page-x-padding">
|
||||
<HeadingTagline text={t('home:getting-started')} />
|
||||
</div>
|
||||
<div className="col-span-12 sm:col-span-6 page-x-padding">
|
||||
<h2>{t('home:new-to-mango')}</h2>
|
||||
</div>
|
||||
</div>
|
||||
<Steps steps={STEPS(t)} />
|
||||
</SectionWrapper>
|
||||
</div>
|
||||
{/* add the below when we have some textimonials */}
|
||||
<div className="relative overflow-hidden">
|
||||
<SectionWrapper>
|
||||
<div className="grid grid-cols-12 gap-8 md:gap-12 flex flex-col sm:flex-row sm:items-end mb-10 md:mb-16">
|
||||
<div className="col-span-12 order-2 sm:order-1 sm:col-span-6">
|
||||
<h2>{t('home:crypto-loves-mango')}</h2>
|
||||
</div>
|
||||
<div className="col-span-12 order-1 sm:order-2 sm:col-span-6 flex sm:justify-end">
|
||||
<HeadingTagline text={t('home:saying-about-us')} />
|
||||
</div>
|
||||
</div>
|
||||
<Testimonials />
|
||||
</SectionWrapper>
|
||||
<ColorBlur
|
||||
className="animate-blob top-0 right-0 opacity-10"
|
||||
height="300px"
|
||||
width="50%"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default HomePage
|
||||
|
|
@ -2,365 +2,280 @@ import {
|
|||
ArrowPathRoundedSquareIcon,
|
||||
BoltIcon,
|
||||
BuildingLibraryIcon,
|
||||
ChevronRightIcon,
|
||||
CurrencyDollarIcon,
|
||||
DevicePhoneMobileIcon,
|
||||
} from '@heroicons/react/20/solid'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import { useTheme } from 'next-themes'
|
||||
import useSectionBg from '../../hooks/useSectionBg'
|
||||
import BotOne from '../icons/BotOne'
|
||||
import BotThree from '../icons/BotThree'
|
||||
import BotTwo from '../icons/BotTwo'
|
||||
import LiquidIcon from '../icons/LiquidIcon'
|
||||
import { LinkButton } from '../shared/Button'
|
||||
import ButtonLink from '../shared/ButtonLink'
|
||||
import ColorBlur from '../shared/ColorBlur'
|
||||
import HeadingTagline from '../shared/HeadingTagline'
|
||||
import IconWithText from '../shared/IconWithText'
|
||||
import InlineImageWithText from '../shared/InlineImageWithText'
|
||||
import SectionWrapper from '../shared/SectionWrapper'
|
||||
import Steps from '../shared/Steps'
|
||||
import HomeTopSection from './HomeTopSection'
|
||||
import Testimonials from './Testimonials'
|
||||
import { gsap } from 'gsap'
|
||||
import { ScrollTrigger } from 'gsap/ScrollTrigger'
|
||||
import { useLayoutEffect, useRef } from 'react'
|
||||
import { MotionPathPlugin } from 'gsap/dist/MotionPathPlugin'
|
||||
|
||||
const STEPS = (t) => [
|
||||
{
|
||||
desc: 'home:get-wallet-desc',
|
||||
imagePath: '/images/img-placeholder.png',
|
||||
title: 'home:get-wallet',
|
||||
children: (
|
||||
<div className="flex items-center space-x-3 sm:space-x-6 mt-4 lg:mt-6">
|
||||
<a
|
||||
href="https://chrome.google.com/webstore/detail/phantom/bfnaelmomeimhlpmgjnjophhpkkoljpa"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<LinkButton className="flex items-center">
|
||||
{t('home:get-phantom')}
|
||||
<ChevronRightIcon className="h-6 w-6 ml-1.5" />
|
||||
</LinkButton>
|
||||
</a>
|
||||
<a
|
||||
href="https://chrome.google.com/webstore/detail/solflare-wallet/bhhhlbepdkbapadjdnnojkbgioiodbic"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<LinkButton className="flex items-center">
|
||||
{t('home:get-solflare')}
|
||||
<ChevronRightIcon className="h-6 w-6 ml-1.5" />
|
||||
</LinkButton>
|
||||
</a>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
desc: 'home:fund-wallet-desc',
|
||||
imagePath: '/images/img-placeholder.png',
|
||||
title: 'home:fund-wallet',
|
||||
},
|
||||
{
|
||||
desc: 'home:connect-mango-desc',
|
||||
imagePath: '/images/img-placeholder.png',
|
||||
title: 'home:connect-mango',
|
||||
},
|
||||
{
|
||||
desc: 'home:trade-earn-borrow-desc',
|
||||
imagePath: '/images/img-placeholder.png',
|
||||
title: 'home:trade-earn-borrow',
|
||||
children: (
|
||||
<ButtonLink
|
||||
className="mt-4 lg:mt-6"
|
||||
path="https://app.mango.markets/"
|
||||
linkText={t('home:get-started')}
|
||||
/>
|
||||
),
|
||||
},
|
||||
gsap.registerPlugin(MotionPathPlugin)
|
||||
gsap.registerPlugin(ScrollTrigger)
|
||||
|
||||
const tokenIcons = [
|
||||
{ icon: 'mngo.svg', x: '15%', y: '20%' },
|
||||
{ icon: 'btc.svg', x: '2%', y: '10%' },
|
||||
{ icon: 'eth.svg', x: '90%', y: '23%' },
|
||||
{ icon: 'usdt.svg', x: '79%', y: '25%' },
|
||||
{ icon: 'sol.svg', x: '95%', y: '80%' },
|
||||
{ icon: 'usdc.svg', x: '3%', y: '65%' },
|
||||
{ icon: 'usdc.svg', x: '88%', y: '40%' },
|
||||
{ icon: 'btc.svg', x: '86%', y: '48%' },
|
||||
{ icon: 'eth.svg', x: '10%', y: '73%' },
|
||||
{ icon: 'usdt.svg', x: '14%', y: '78%' },
|
||||
{ icon: 'sol.svg', x: '12%', y: '40%' },
|
||||
{ icon: 'mngo.svg', x: '81%', y: '68%' },
|
||||
]
|
||||
|
||||
const HomePage = () => {
|
||||
const { t } = useTranslation(['common', 'home'])
|
||||
const { theme } = useTheme()
|
||||
const sectionBg = useSectionBg()
|
||||
|
||||
const callouts = useRef()
|
||||
const swapPanel = useRef()
|
||||
const unlimitedTokens = useRef()
|
||||
|
||||
useLayoutEffect(() => {
|
||||
const ctx = gsap.context((self) => {
|
||||
const boxes = self.selector('.highlight-features')
|
||||
boxes.forEach((box) => {
|
||||
gsap.to(box, {
|
||||
opacity: 1,
|
||||
y: -40,
|
||||
scrollTrigger: {
|
||||
trigger: box,
|
||||
end: 'top 40%',
|
||||
scrub: true,
|
||||
},
|
||||
})
|
||||
})
|
||||
}, callouts) // <- Scope!
|
||||
return () => ctx.revert() // <- Cleanup!
|
||||
}, [])
|
||||
|
||||
useLayoutEffect(() => {
|
||||
const ctx = gsap.context((self) => {
|
||||
const icons = self.selector('.token-icon')
|
||||
icons.forEach((icon, i) => {
|
||||
gsap.to(icon, {
|
||||
y: i % 2 ? 100 : -100,
|
||||
rotateZ: i % 2 ? 45 : -45,
|
||||
opacity: 0,
|
||||
scrollTrigger: {
|
||||
trigger: icon,
|
||||
scrub: true,
|
||||
},
|
||||
})
|
||||
})
|
||||
}, swapPanel) // <- Scope!
|
||||
return () => ctx.revert() // <- Cleanup!
|
||||
}, [])
|
||||
|
||||
useLayoutEffect(() => {
|
||||
const ctx = gsap.context((self) => {
|
||||
const featureText = self.selector('.feature-text')
|
||||
gsap.timeline({
|
||||
scrollTrigger: {
|
||||
trigger: '.core-features',
|
||||
start: 'top top',
|
||||
end: '+=15000',
|
||||
scrub: true,
|
||||
markers: true,
|
||||
pin: true,
|
||||
},
|
||||
})
|
||||
|
||||
const textTl = gsap.timeline({
|
||||
scrollTrigger: {
|
||||
trigger: '.core-features',
|
||||
start: 'bottom bottom',
|
||||
end: '+=15000',
|
||||
scrub: true,
|
||||
},
|
||||
})
|
||||
featureText.forEach(function (elem, i) {
|
||||
if (i !== 0) {
|
||||
textTl.from(elem, {
|
||||
opacity: 0,
|
||||
y: 600,
|
||||
})
|
||||
}
|
||||
textTl.to(elem, {
|
||||
autoAlpha: 1,
|
||||
y: 0,
|
||||
})
|
||||
if (i !== featureText.length - 1) {
|
||||
textTl.to(elem, {
|
||||
y: -600,
|
||||
})
|
||||
}
|
||||
})
|
||||
const icons = self.selector('.unlimited-icon-wrapper')
|
||||
const angle = 360 / 12
|
||||
const distanceToken = 150 // distance from origin
|
||||
const distanceInterest = 75 // distance from origin
|
||||
icons.forEach((icon, i) => {
|
||||
const interest = icon.querySelector('.interest-icon')
|
||||
const radians = (angle * (i + 1) * Math.PI) / 180
|
||||
// Calculate x and y offsets
|
||||
const tokenOffsetX = distanceToken * Math.cos(radians)
|
||||
const tokenOffsetY = distanceToken * Math.sin(radians)
|
||||
const interestOffsetX = distanceInterest * Math.cos(radians)
|
||||
const interestOffsetY = distanceInterest * Math.sin(radians)
|
||||
const iconTl = gsap.timeline({
|
||||
scrollTrigger: {
|
||||
trigger: '.core-features',
|
||||
start: 'top top',
|
||||
end: '+=8500',
|
||||
scrub: true,
|
||||
},
|
||||
})
|
||||
iconTl
|
||||
.to(icon, {
|
||||
x: tokenOffsetX,
|
||||
y: tokenOffsetY,
|
||||
})
|
||||
.to(icon, {
|
||||
rotateZ: 360,
|
||||
})
|
||||
.to(interest, {
|
||||
x: interestOffsetX,
|
||||
y: interestOffsetY,
|
||||
rotateZ: 360,
|
||||
})
|
||||
.to(interest, {
|
||||
opacity: 0,
|
||||
})
|
||||
})
|
||||
}, unlimitedTokens) // <- Scope!
|
||||
return () => ctx.revert() // <- Cleanup!
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
<HomeTopSection />
|
||||
<div className={`${sectionBg} z-20 relative`}>
|
||||
<SectionWrapper>
|
||||
<div className="grid grid-cols-6 gap-12">
|
||||
<IconWithText
|
||||
desc={t('home:competitive-fees-desc')}
|
||||
icon={<CurrencyDollarIcon className="h-5 w-5 text-th-fgd-2" />}
|
||||
title={t('home:competitive-fees')}
|
||||
/>
|
||||
<IconWithText
|
||||
desc={t('home:lightning-execution-desc')}
|
||||
icon={<BoltIcon className="h-5 w-5 text-th-fgd-2" />}
|
||||
title={t('home:lightning-execution')}
|
||||
/>
|
||||
<IconWithText
|
||||
desc={t('home:deeply-liquid-desc')}
|
||||
icon={<LiquidIcon className="h-5 w-5 text-th-fgd-2" />}
|
||||
title={t('home:deeply-liquid')}
|
||||
/>
|
||||
<IconWithText
|
||||
desc={t('home:cross-margin-desc')}
|
||||
icon={
|
||||
<ArrowPathRoundedSquareIcon className="h-5 w-5 text-th-fgd-2" />
|
||||
}
|
||||
title={t('home:cross-margin')}
|
||||
/>
|
||||
<IconWithText
|
||||
desc={t('home:community-governed-desc')}
|
||||
icon={<BuildingLibraryIcon className="h-5 w-5 text-th-fgd-2" />}
|
||||
title={t('home:community-governed')}
|
||||
/>
|
||||
<IconWithText
|
||||
desc={t('home:trade-your-way-desc')}
|
||||
icon={<DevicePhoneMobileIcon className="h-5 w-5 text-th-fgd-2" />}
|
||||
title={t('home:trade-your-way')}
|
||||
/>
|
||||
</div>
|
||||
</SectionWrapper>
|
||||
</div>
|
||||
<div className="relative overflow-hidden">
|
||||
<SectionWrapper className="z-10">
|
||||
<div className="grid grid-cols-12 md:gap-12">
|
||||
<div className="col-span-12 md:col-span-6 lg:col-span-5 h-[410px] md:h-auto flex justify-center order-2 md:order-1">
|
||||
<img
|
||||
className="absolute md:top-1/2 md:-translate-y-1/2 z-10 w-full h-auto max-w-[320px] xl:max-w-[330px]"
|
||||
src={
|
||||
theme === 'Light'
|
||||
? '/images/@1x-swap-light.png'
|
||||
: '/images/@1x-swap-dark.png'
|
||||
}
|
||||
alt="Swap"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-12 md:col-span-6 lg:col-span-7 order-1 md:order-2 mb-10 md:mb-0">
|
||||
<h2 className="mb-4">{t('home:swap-heading')}</h2>
|
||||
<p className="intro-p mb-10 md:mb-16">{t('home:swap-desc')}</p>
|
||||
<div className="flex items-center md:items-start lg:items-center space-x-6 mb-8">
|
||||
<img
|
||||
className="w-20 h-auto"
|
||||
src="/images/img-placeholder.png"
|
||||
alt=""
|
||||
/>
|
||||
<div>
|
||||
<h3 className="mb-3">{t('home:swap-highlight-1-heading')}</h3>
|
||||
<p>{t('home:swap-highlight-1-desc')}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center md:items-start lg:items-center space-x-6 mb-8">
|
||||
<img
|
||||
className="w-20 h-auto"
|
||||
src="/images/img-placeholder.png"
|
||||
alt=""
|
||||
/>
|
||||
<div>
|
||||
<h3 className="mb-3">{t('home:swap-highlight-2-heading')}</h3>
|
||||
<p>{t('home:swap-highlight-2-desc')}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center md:items-start lg:items-center space-x-6 mb-10">
|
||||
<img
|
||||
className="w-20 h-auto"
|
||||
src="/images/img-placeholder.png"
|
||||
alt=""
|
||||
/>
|
||||
<div>
|
||||
<h3 className="mb-3">{t('home:swap-highlight-3-heading')}</h3>
|
||||
<p>{t('home:swap-highlight-3-desc')}</p>
|
||||
</div>
|
||||
</div>
|
||||
<ButtonLink
|
||||
path="https://app.mango.markets/"
|
||||
linkText={t('home:swap-now')}
|
||||
size="large"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</SectionWrapper>
|
||||
<ColorBlur
|
||||
className="animate-blob -top-20 left-0 opacity-10"
|
||||
height="200px"
|
||||
width="50%"
|
||||
/>
|
||||
<ColorBlur
|
||||
className="animate-blob bg-th-down -bottom-20 right-0 opacity-10"
|
||||
height="200px"
|
||||
width="66%"
|
||||
/>
|
||||
</div>
|
||||
<div className="relative overflow-hidden">
|
||||
<SectionWrapper>
|
||||
<div className="grid grid-cols-12 gap-8 md:gap-12 flex flex-col sm:flex-row items-end mb-10 md:mb-16">
|
||||
<div className="col-span-12 sm:col-span-6">
|
||||
<HeadingTagline text={t('home:risk-engine-desc')} />
|
||||
</div>
|
||||
<div className="col-span-12 sm:col-span-6">
|
||||
<h2>{t('home:risk-engine')}</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-6 gap-x-8 gap-y-12 mt-12">
|
||||
<IconWithText
|
||||
desc={t('home:risk-engine-1-desc')}
|
||||
icon={
|
||||
<img
|
||||
src="/images/img-placeholder.png"
|
||||
className="h-20 w-20 mb-4"
|
||||
/>
|
||||
}
|
||||
linkPath="#"
|
||||
linkText={t('learn-more')}
|
||||
noBorder
|
||||
title={t('home:risk-engine-1')}
|
||||
/>
|
||||
<IconWithText
|
||||
desc={t('home:risk-engine-2-desc')}
|
||||
icon={
|
||||
<img
|
||||
src="/images/img-placeholder.png"
|
||||
className="h-20 w-20 mb-4"
|
||||
/>
|
||||
}
|
||||
linkPath="#"
|
||||
linkText={t('learn-more')}
|
||||
noBorder
|
||||
title={t('home:risk-engine-2')}
|
||||
/>
|
||||
<IconWithText
|
||||
desc={t('home:risk-engine-3-desc')}
|
||||
icon={
|
||||
<img
|
||||
src="/images/img-placeholder.png"
|
||||
className="h-20 w-20 mb-4"
|
||||
/>
|
||||
}
|
||||
linkPath="#"
|
||||
linkText={t('learn-more')}
|
||||
noBorder
|
||||
title={t('home:risk-engine-3')}
|
||||
/>
|
||||
</div>
|
||||
</SectionWrapper>
|
||||
<ColorBlur
|
||||
className="animate-blob -bottom-20 right-0 opacity-10"
|
||||
height="200px"
|
||||
width="66%"
|
||||
/>
|
||||
</div>
|
||||
<div className={`${sectionBg} z-20 relative`}>
|
||||
<SectionWrapper>
|
||||
<div className="text-center max-w-[800px] mx-auto">
|
||||
<h2 className="mb-4">{t('home:built-for-traders-holders')}</h2>
|
||||
<p className="intro-p">
|
||||
{t('home:built-for-traders-holders-desc')}
|
||||
<SectionWrapper className="pt-24 lg:pt-32 xl:pt-40" noPaddingY>
|
||||
<div className="grid grid-cols-6 gap-8" ref={callouts}>
|
||||
<IconWithText
|
||||
desc={t('home:competitive-fees-desc')}
|
||||
icon={<CurrencyDollarIcon className="h-5 w-5 text-th-fgd-2" />}
|
||||
title={t('home:competitive-fees')}
|
||||
showBackground
|
||||
/>
|
||||
<IconWithText
|
||||
desc={t('home:lightning-execution-desc')}
|
||||
icon={<BoltIcon className="h-5 w-5 text-th-fgd-2" />}
|
||||
title={t('home:lightning-execution')}
|
||||
showBackground
|
||||
/>
|
||||
<IconWithText
|
||||
desc={t('home:deeply-liquid-desc')}
|
||||
icon={<LiquidIcon className="h-5 w-5 text-th-fgd-2" />}
|
||||
title={t('home:deeply-liquid')}
|
||||
showBackground
|
||||
/>
|
||||
<IconWithText
|
||||
desc={t('home:cross-margin-desc')}
|
||||
icon={
|
||||
<ArrowPathRoundedSquareIcon className="h-5 w-5 text-th-fgd-2" />
|
||||
}
|
||||
title={t('home:cross-margin')}
|
||||
showBackground
|
||||
/>
|
||||
<IconWithText
|
||||
desc={t('home:community-governed-desc')}
|
||||
icon={<BuildingLibraryIcon className="h-5 w-5 text-th-fgd-2" />}
|
||||
title={t('home:community-governed')}
|
||||
showBackground
|
||||
/>
|
||||
<IconWithText
|
||||
desc={t('home:trade-your-way-desc')}
|
||||
icon={<DevicePhoneMobileIcon className="h-5 w-5 text-th-fgd-2" />}
|
||||
title={t('home:trade-your-way')}
|
||||
showBackground
|
||||
/>
|
||||
</div>
|
||||
</SectionWrapper>
|
||||
<SectionWrapper className="relative overflow-hidden">
|
||||
<div className="w-full h-full" ref={swapPanel}>
|
||||
<div className="border border-th-bkg-3 px-16 py-24 rounded-xl relative min-h-[730px]">
|
||||
<h2 className="mb-4 text-center">{t('home:swap-heading')}</h2>
|
||||
<p className="intro-p mb-10 text-center max-w-lg mx-auto">
|
||||
{t('home:swap-desc')}
|
||||
</p>
|
||||
</div>
|
||||
<InlineImageWithText
|
||||
desc={t('home:token-listings-desc')}
|
||||
title={t('home:token-listings')}
|
||||
imageSrc="/images/img-placeholder.png"
|
||||
linkPath="#"
|
||||
linkText={t('learn-more')}
|
||||
/>
|
||||
{/* <InlineImageWithText
|
||||
desc={t('home:risk-engine-desc')}
|
||||
title={t('home:risk-engine')}
|
||||
imageSrc="/images/img-placeholder.png"
|
||||
linkPath="#"
|
||||
linkText={t('learn-more')}
|
||||
reverse
|
||||
/> */}
|
||||
<InlineImageWithText
|
||||
desc={t('home:earn-interest-desc')}
|
||||
title={t('home:earn-interest')}
|
||||
imageSrc="/images/img-placeholder.png"
|
||||
linkPath="https://app.mango.markets"
|
||||
linkText={t('home:deposit-now')}
|
||||
reverse
|
||||
/>
|
||||
<InlineImageWithText
|
||||
desc={t('home:borrow-any-token-desc')}
|
||||
title={t('home:borrow-any-token')}
|
||||
imageSrc="/images/img-placeholder.png"
|
||||
linkPath="https://app.mango.markets"
|
||||
linkText={t('home:borrow-now')}
|
||||
// reverse
|
||||
/>
|
||||
</SectionWrapper>
|
||||
</div>
|
||||
<div className="relative overflow-hidden">
|
||||
<SectionWrapper>
|
||||
<h2 className="mb-4">{t('home:trading-bots-welcome')}</h2>
|
||||
<p className="intro-p max-w-[800px]">
|
||||
{t('home:trading-bots-welcome-desc')}
|
||||
</p>
|
||||
<div className="grid grid-cols-6 gap-x-8 gap-y-12 mt-12">
|
||||
<IconWithText
|
||||
desc={t('home:market-maker-desc')}
|
||||
icon={<BotOne className="h-16 w-16 mb-4 text-th-fgd-2" />}
|
||||
linkPath="https://github.com/blockworks-foundation/mango-v4/tree/dev/ts/client/scripts/mm"
|
||||
linkText={t('home:market-maker-link')}
|
||||
noBorder
|
||||
title={t('home:market-maker')}
|
||||
<ButtonLink
|
||||
className="mx-auto"
|
||||
path="https://app.mango.markets/"
|
||||
linkText={t('home:swap-now')}
|
||||
size="large"
|
||||
/>
|
||||
<IconWithText
|
||||
desc={t('home:liquidator-desc')}
|
||||
icon={<BotTwo className="h-16 w-16 mb-4 text-th-fgd-2" />}
|
||||
linkPath="#"
|
||||
linkText={t('home:liquidator-link')}
|
||||
noBorder
|
||||
title={t('home:liquidator')}
|
||||
/>
|
||||
<IconWithText
|
||||
desc={t('home:build-your-own-desc')}
|
||||
icon={<BotThree className="h-16 w-16 mb-4 text-th-fgd-2" />}
|
||||
linkPath="#"
|
||||
linkText={t('home:explore-the-code')}
|
||||
noBorder
|
||||
title={t('home:build-your-own')}
|
||||
<img
|
||||
className="shadow-lg mt-12 w-2/3 h-auto absolute left-1/2 -translate-x-1/2"
|
||||
src="/images/@1x-swap-desktop-dark-2.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</SectionWrapper>
|
||||
<ColorBlur
|
||||
className="animate-blob -top-20 left-0 opacity-10"
|
||||
height="300px"
|
||||
width="66%"
|
||||
/>
|
||||
</div>
|
||||
<div className={`${sectionBg} z-20 relative`}>
|
||||
<SectionWrapper noPaddingX>
|
||||
<div className="grid grid-cols-12 gap-8 md:gap-12 flex flex-col sm:flex-row items-end mb-10 md:mb-16">
|
||||
<div className="col-span-12 sm:col-span-6 page-x-padding">
|
||||
<HeadingTagline text={t('home:getting-started')} />
|
||||
</div>
|
||||
<div className="col-span-12 sm:col-span-6 page-x-padding">
|
||||
<h2>{t('home:new-to-mango')}</h2>
|
||||
{tokenIcons.map((icon) => (
|
||||
<img
|
||||
className={`absolute token-icon w-10 h-10`}
|
||||
key={icon.icon}
|
||||
src={`/icons/mono/${icon.icon}`}
|
||||
style={{ top: icon.y, left: icon.x }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</SectionWrapper>
|
||||
<div className="page-x-padding" ref={unlimitedTokens}>
|
||||
<div className="flex core-features py-24 h-screen flex items-center justify-center">
|
||||
<div className="w-1/2 h-full">
|
||||
<div className="unlimited-icons h-full w-full flex items-center justify-center">
|
||||
{tokenIcons.map((icon) => (
|
||||
<div
|
||||
className="unlimited-icon-wrapper relative flex items-center justify-center"
|
||||
key={icon.icon}
|
||||
>
|
||||
<div className="interest-icon absolute bg-th-bkg-2 rounded-full h-10 w-10 flex items-center justify-center">
|
||||
{/* <div className="relative"> */}
|
||||
{/* <img
|
||||
className={`w-6 h-6`}
|
||||
src={`/icons/mono/${interestIcons[i].icon}`}
|
||||
/> */}
|
||||
<div className="h-6 w-6 flex items-center justify-center rounded-full bg-th-fgd-1 text-th-bkg-1">
|
||||
<span className="font-display text-lg">$</span>
|
||||
</div>
|
||||
{/* </div> */}
|
||||
</div>
|
||||
<div className="unlimited-icon absolute bg-th-bkg-2 rounded-full h-16 w-16 flex items-center justify-center">
|
||||
<img
|
||||
className={`w-10 h-10`}
|
||||
src={`/icons/mono/${icon.icon}`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<Steps steps={STEPS(t)} />
|
||||
</SectionWrapper>
|
||||
</div>
|
||||
{/* add the below when we have some textimonials */}
|
||||
<div className="relative overflow-hidden">
|
||||
<SectionWrapper>
|
||||
<div className="grid grid-cols-12 gap-8 md:gap-12 flex flex-col sm:flex-row sm:items-end mb-10 md:mb-16">
|
||||
<div className="col-span-12 order-2 sm:order-1 sm:col-span-6">
|
||||
<h2>{t('home:crypto-loves-mango')}</h2>
|
||||
<div className="w-1/2 relative h-full flex items-center">
|
||||
<div className="feature-text absolute">
|
||||
<h2 className="mb-4">{t('home:token-listings')}</h2>
|
||||
<p className="intro-p mb-10">{t('home:swap-desc')}</p>
|
||||
</div>
|
||||
<div className="col-span-12 order-1 sm:order-2 sm:col-span-6 flex sm:justify-end">
|
||||
<HeadingTagline text={t('home:saying-about-us')} />
|
||||
<div className="feature-text absolute">
|
||||
<h2 className="mb-4">{t('home:earn-interest')}</h2>
|
||||
<p className="intro-p mb-10 max-w-lg">{t('home:swap-desc')}</p>
|
||||
</div>
|
||||
<div className="feature-text absolute">
|
||||
<h2 className="mb-4">{t('home:borrow-any-token')}</h2>
|
||||
<p className="intro-p mb-10 max-w-lg">{t('home:swap-desc')}</p>
|
||||
</div>
|
||||
</div>
|
||||
<Testimonials />
|
||||
</SectionWrapper>
|
||||
<ColorBlur
|
||||
className="animate-blob top-0 right-0 opacity-10"
|
||||
height="300px"
|
||||
width="50%"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,13 +1,9 @@
|
|||
import { useTranslation } from 'next-i18next'
|
||||
import SectionWrapper from '../shared/SectionWrapper'
|
||||
import ColorBlur from '../shared/ColorBlur'
|
||||
import { useTheme } from 'next-themes'
|
||||
import CheckBullet from '../shared/CheckBullet'
|
||||
import ButtonLink from '../shared/ButtonLink'
|
||||
|
||||
const HomeTopSection = () => {
|
||||
const { t } = useTranslation(['common', 'home'])
|
||||
const { theme } = useTheme()
|
||||
// const sideImage = useRef(null)
|
||||
// const tl = gsap.timeline()
|
||||
|
||||
|
|
@ -21,48 +17,41 @@ const HomeTopSection = () => {
|
|||
// }, [])
|
||||
|
||||
return (
|
||||
<div className="relative overflow-hidden">
|
||||
<SectionWrapper>
|
||||
<div className="grid grid-cols-12">
|
||||
<div className="col-span-12 lg:col-span-5">
|
||||
<h1 className="mb-6">
|
||||
{t('home:long-short-everything')}{' '}
|
||||
<span className="bg-gradient-to-b from-th-active via-th-warning to-th-down bg-clip-text text-transparent">
|
||||
<SectionWrapper className="overflow-x-hidden">
|
||||
<div className="grid grid-cols-12">
|
||||
<div className="col-span-12 lg:col-span-5">
|
||||
<h1 className="mb-6">
|
||||
Safer. Smarter. Faster.
|
||||
{/* <span className="bg-gradient-to-b from-th-active via-th-warning to-th-down bg-clip-text text-transparent">
|
||||
{t('home:everything')}
|
||||
</span>
|
||||
.
|
||||
</h1>
|
||||
<CheckBullet>{t('home:bullet-1')}</CheckBullet>
|
||||
</span> */}
|
||||
</h1>
|
||||
<p className="intro-p mb-10">
|
||||
A magical new way to interact with DeFi. Groundbreaking safety
|
||||
features designed to keep your funds secure. The easiest way to
|
||||
margin trade any token pair. All powered by flashloans.
|
||||
</p>
|
||||
{/* <CheckBullet>{t('home:bullet-1')}</CheckBullet>
|
||||
<CheckBullet>{t('home:bullet-2')}</CheckBullet>
|
||||
<CheckBullet>{t('home:bullet-3')}</CheckBullet>
|
||||
<CheckBullet showNewBadge>{t('home:bullet-4')}</CheckBullet>
|
||||
{/* <CheckBullet showNewBadge>{t('home:bullet-5')}</CheckBullet> */}
|
||||
<ButtonLink
|
||||
className="mt-8"
|
||||
linkText={t('trade-now')}
|
||||
path="https://app.mango.markets"
|
||||
size="large"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-12 lg:col-span-7 relative h-48 sm:h-56 md:h-80 lg:h-full">
|
||||
<img
|
||||
className="w-full mt-10 lg:mt-0 absolute h-auto lg:-right-40 xl:right-0 z-10 lg:top-1/2 lg:transform lg:-translate-y-1/2"
|
||||
src={
|
||||
theme === 'Light'
|
||||
? '/images/@1x-home-hero-desktop-light.png'
|
||||
: '/images/@1x-home-hero-desktop-dark.png'
|
||||
}
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<CheckBullet showNewBadge>{t('home:bullet-5')}</CheckBullet> */}
|
||||
<ButtonLink
|
||||
className="mt-8"
|
||||
linkText={t('trade-now')}
|
||||
path="https://app.mango.markets"
|
||||
size="large"
|
||||
/>
|
||||
</div>
|
||||
</SectionWrapper>
|
||||
<ColorBlur
|
||||
className="right-0 top-40 animate-blob"
|
||||
height="100%"
|
||||
width="50%"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-12 lg:col-span-7 relative h-48 sm:h-56 md:h-80 lg:h-full">
|
||||
<img
|
||||
className="w-full mt-10 lg:mt-0 absolute h-auto lg:-right-40 xl:right-0 z-10 lg:top-1/2 lg:transform lg:-translate-y-1/2"
|
||||
src="/images/@1x-trade-desktop-dark-2.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</SectionWrapper>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { ReactNode, useEffect, useState } from 'react'
|
||||
import Footer from '../footer/Footer'
|
||||
import TopNavigation from '../navigation/TopNavigation'
|
||||
// import ColorBlur from '../shared/ColorBlur'
|
||||
|
||||
const LayoutWrapper = ({ children }: { children: ReactNode }) => {
|
||||
const [mounted, setMounted] = useState(false)
|
||||
|
|
@ -16,6 +17,11 @@ const LayoutWrapper = ({ children }: { children: ReactNode }) => {
|
|||
return (
|
||||
<div className="bg-th-bkg-1">
|
||||
<TopNavigation />
|
||||
{/* <ColorBlur
|
||||
className="left-0 top-0 animate-blob"
|
||||
height="25%"
|
||||
width="50%"
|
||||
/> */}
|
||||
<div>{children}</div>
|
||||
<Footer />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ const IconWithText = ({
|
|||
linkText,
|
||||
noBorder,
|
||||
title,
|
||||
showBackground,
|
||||
}: {
|
||||
desc?: string
|
||||
icon: ReactNode
|
||||
|
|
@ -16,9 +17,14 @@ const IconWithText = ({
|
|||
linkText?: string
|
||||
noBorder?: boolean
|
||||
title: string
|
||||
showBackground?: boolean
|
||||
}) => {
|
||||
return (
|
||||
<div className="col-span-6 sm:col-span-3 md:col-span-2">
|
||||
<div
|
||||
className={`highlight-features opacity-0 translate-y-[40px] col-span-6 sm:col-span-3 md:col-span-2 ${
|
||||
showBackground ? 'border border-th-bkg-3 rounded-xl px-8 py-10' : ''
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`${
|
||||
noBorder
|
||||
|
|
|
|||
|
|
@ -4,16 +4,18 @@ const SectionWrapper = ({
|
|||
children,
|
||||
className,
|
||||
noPaddingX,
|
||||
noPaddingY,
|
||||
}: {
|
||||
children: ReactNode
|
||||
className?: string
|
||||
noPaddingX?: boolean
|
||||
noPaddingY?: boolean
|
||||
}) => {
|
||||
return (
|
||||
<div
|
||||
className={`${
|
||||
noPaddingX ? '' : 'page-x-padding'
|
||||
} py-24 lg:py-32 xl:py-40 max-w-[1600px] mx-auto relative overflow-hidden ${className}`}
|
||||
className={`${noPaddingX ? '' : 'page-x-padding'} ${
|
||||
noPaddingY ? '' : 'py-24 lg:py-32 xl:py-40'
|
||||
} max-w-[1600px] mx-auto ${className}`}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ const { i18n } = require('./next-i18next.config')
|
|||
|
||||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {
|
||||
transpilePackages: ['gsap'],
|
||||
i18n,
|
||||
images: {
|
||||
domains: ['raw.githubusercontent.com', 'arweave.net'],
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
"@solana/spl-token": "^0.1.3",
|
||||
"@solana/web3.js": "^1.5.0",
|
||||
"@tanstack/react-query": "^4.24.10",
|
||||
"gsap": "^3.7.1",
|
||||
"gsap": "^3.11.5",
|
||||
"i18next": "^22.4.10",
|
||||
"immer": "^9.0.1",
|
||||
"moment": "^2.29.1",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32Z" fill="#F7931A"/>
|
||||
<path d="M23.1892 14.02C23.5032 11.924 21.9062 10.797 19.7242 10.045L20.4322 7.205L18.7042 6.775L18.0142 9.54C17.5602 9.426 17.0942 9.32 16.6292 9.214L17.3242 6.431L15.5962 6L14.8882 8.839C14.5122 8.753 14.1422 8.669 13.7842 8.579L13.7862 8.57L11.4022 7.975L10.9422 9.821C10.9422 9.821 12.2252 10.115 12.1982 10.133C12.8982 10.308 13.0242 10.771 13.0032 11.139L12.1972 14.374C12.2452 14.386 12.3072 14.404 12.3772 14.431L12.1942 14.386L11.0642 18.918C10.9782 19.13 10.7612 19.449 10.2712 19.328C10.2892 19.353 9.01523 19.015 9.01523 19.015L8.15723 20.993L10.4072 21.554C10.8252 21.659 11.2352 21.769 11.6382 21.872L10.9232 24.744L12.6502 25.174L13.3582 22.334C13.8302 22.461 14.2882 22.579 14.7362 22.691L14.0302 25.519L15.7582 25.949L16.4732 23.083C19.4212 23.641 21.6372 23.416 22.5702 20.75C23.3222 18.604 22.5332 17.365 20.9822 16.558C22.1122 16.298 22.9622 15.555 23.1892 14.02V14.02ZM19.2392 19.558C18.7062 21.705 15.0912 20.544 13.9192 20.253L14.8692 16.448C16.0412 16.741 19.7982 17.32 19.2392 19.558ZM19.7742 13.989C19.2872 15.942 16.2792 14.949 15.3042 14.706L16.1642 11.256C17.1392 11.499 20.2822 11.952 19.7742 13.989Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1,20 @@
|
|||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1184_2424)">
|
||||
<g clip-path="url(#clip1_1184_2424)">
|
||||
<path d="M15.9995 0V11.8291L25.9976 16.2967L15.9995 0Z" fill="#A0B1F2"/>
|
||||
<path d="M15.9994 0L6 16.2967L15.9994 11.8291V0Z" fill="#627EEA"/>
|
||||
<path d="M15.9995 23.9626V32.0002L26.0043 18.1587L15.9995 23.9626Z" fill="#A0B1F2"/>
|
||||
<path d="M15.9994 32.0002V23.9612L6 18.1587L15.9994 32.0002Z" fill="#627EEA"/>
|
||||
<path d="M15.9995 22.1022L25.9976 16.297L15.9995 11.832V22.1022Z" fill="#DFE5FB"/>
|
||||
<path d="M6 16.297L15.9994 22.1022V11.832L6 16.297Z" fill="#A0B1F2"/>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1184_2424">
|
||||
<rect width="32" height="32" fill="white"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip1_1184_2424">
|
||||
<rect width="32" height="32" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 837 B |
|
|
@ -0,0 +1,51 @@
|
|||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.5043 7.44197C15.5044 7.44175 15.5046 7.44149 15.5048 7.44126C16.8509 8.13196 18.324 8.36863 19.7335 8.36455C20.5526 9.11682 21.234 10.0004 21.8743 10.9077C22.1398 11.2867 22.3792 11.6833 22.5909 12.0948C23.0805 13.0376 23.4406 14.0351 23.805 15.0444C23.9118 15.3404 24.019 15.6375 24.13 15.9344C24.1647 16.0615 24.2011 16.1887 24.2389 16.3159L24.2409 16.3154C24.8036 18.2454 25.6253 20.3071 26.7262 22.0094L26.7252 22.0098C27.0893 22.569 27.4972 23.0985 27.9452 23.5933C28.0333 23.6887 28.1234 23.7831 28.2137 23.8777L28.2137 23.8777L28.2138 23.8777L28.2139 23.8778C28.6356 24.3196 29.0602 24.7645 29.301 25.3212C29.6007 26.0149 29.5777 26.8128 29.3974 27.5469C28.5468 31.007 25.2146 31.9162 22.0301 32.0001L22.0316 31.9961C20.8376 32.0199 19.6518 31.9309 18.6003 31.8231C18.6003 31.8231 13.5291 31.2982 9.23061 28.1556L9.09188 28.0525C9.09188 28.0525 9.09188 28.0525 9.09191 28.0524C8.59017 27.6785 8.1115 27.2746 7.65854 26.8428C6.45371 25.6929 5.38168 24.3886 4.56189 22.9568C4.56738 22.9513 4.57284 22.9458 4.57833 22.9403C4.48129 22.7657 4.38825 22.5893 4.29927 22.4111C3.50618 20.8238 3.02284 19.096 3.00096 17.2594C2.96364 14.1777 4.0179 11.0218 6.02186 8.73375C6.02112 8.73186 6.02041 8.72996 6.01971 8.72807C7.10472 7.53957 8.4609 6.6059 10.0663 6.07433C11.0728 5.73803 12.1295 5.57656 13.1904 5.59693C13.8361 6.35503 14.6217 6.98144 15.5043 7.44197ZM13.034 27.6051C13.7595 27.3403 14.4468 26.9841 15.0878 26.5453C14.4428 26.9811 13.7545 27.3375 13.034 27.6051Z" fill="url(#paint0_linear)"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M26.0299 4.9315C26.0304 4.9315 26.0309 4.9315 26.0314 4.93147L26.0752 4.90327C20.4213 -4.74132 13.0283 2.85194 13.0283 2.85194L13.0389 2.87053C13.0384 2.87064 13.038 2.87075 13.0376 2.87086C17.2888 10.3244 25.3683 5.35657 26.0299 4.9315Z" fill="url(#paint1_linear)"/>
|
||||
<path d="M19.0212 21.5435C17.4632 25.2678 14.4719 27.7339 10.8478 28.1074C10.7699 28.1178 9.77798 28.1961 9.23047 28.1556C13.529 31.2983 18.6002 31.8232 18.6002 31.8232C19.6859 31.9345 20.9149 32.0257 22.1483 31.9935C22.5826 30.8595 22.8271 29.5612 22.757 28.0881C22.5941 24.6669 24.5779 22.9105 26.7261 22.0094C25.6251 20.3072 24.8035 18.2455 24.2408 16.3154C22.5633 16.7617 20.433 18.165 19.0212 21.5435Z" fill="url(#paint2_linear)"/>
|
||||
<path d="M22.6894 28.0638C22.7599 29.5368 22.4646 30.8659 22.0303 31.9999C25.2148 31.9161 28.547 31.0069 29.3976 27.5467C29.5779 26.8126 29.6009 26.0147 29.3011 25.321C29.0088 24.6452 28.4454 24.134 27.9453 23.5932C27.4775 23.0764 27.0534 22.5218 26.6771 21.9351C24.5308 22.8365 22.5266 24.643 22.6894 28.0638Z" fill="url(#paint3_linear)"/>
|
||||
<path d="M24.1304 15.9341C23.6411 14.6246 23.2245 13.3137 22.5913 12.0944C22.3796 11.683 22.1402 11.2864 21.8747 10.9074C21.2344 10.0001 20.553 9.11648 19.734 8.3642C18.3244 8.36828 16.8513 8.13162 15.5052 7.44092C14.1416 9.37503 12.5814 12.656 14.0095 16.4011C16.1184 21.9319 11.8388 25.7118 9.09229 28.0521L9.23102 28.1552C9.74596 28.1954 10.2635 28.188 10.7771 28.133C14.4009 27.7591 17.5654 25.2337 19.1234 21.5097C20.5356 18.1312 22.5899 16.8477 24.265 16.4011C24.2178 16.2453 24.1729 16.0896 24.1304 15.9341Z" fill="url(#paint4_linear)"/>
|
||||
<path d="M6.1692 8.56934C4.06965 10.8692 2.96275 14.1035 3.00096 17.2599C3.02284 19.0964 3.50618 20.8243 4.29927 22.4116C4.41823 22.6497 4.54435 22.8846 4.67763 23.1164C9.09151 18.6858 7.49682 12.084 6.1692 8.56934Z" fill="url(#paint5_linear)"/>
|
||||
<path d="M14.0839 16.4014C12.6558 12.6549 14.1811 9.3954 15.5428 7.46167C14.6448 6.99936 13.8459 6.3659 13.1911 5.59693C12.1301 5.57656 11.0734 5.73803 10.067 6.07433C8.4615 6.6059 7.10533 7.53957 6.02031 8.72807C7.31862 12.1656 8.87882 18.6234 4.5625 22.9568C5.38229 24.3886 6.45432 25.6929 7.65915 26.8428C8.13437 27.2958 8.63789 27.7182 9.16667 28.1074C11.9131 25.7682 16.1927 21.9322 14.0839 16.4014Z" fill="url(#paint6_linear)"/>
|
||||
<path d="M19.409 3.46675C22.3977 4.64598 24.4909 4.96536 26.0085 4.91974L26.0522 4.89155C20.3983 -4.75303 13.0054 2.84022 13.0054 2.84022L13.0161 2.85914C14.6108 2.57648 16.9285 2.48856 19.409 3.46675Z" fill="url(#paint7_linear)"/>
|
||||
<path d="M19.4456 3.40024C16.9666 2.42354 14.6356 2.46064 13.0142 2.8594C17.2656 10.3132 25.3455 5.34474 26.0065 4.92001C24.4879 4.96563 22.4343 4.57948 19.4456 3.40024Z" fill="url(#paint8_linear)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear" x1="-0.30713" y1="10.1206" x2="34.2649" y2="30.8379" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#E54033"/>
|
||||
<stop offset="0.489583" stop-color="#FECA1A"/>
|
||||
<stop offset="1" stop-color="#AFD803"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear" x1="9782.27" y1="1155.64" x2="7617.95" y2="-1070.67" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.15" stop-color="#6CBF00"/>
|
||||
<stop offset="1" stop-color="#AFD803"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear" x1="5.66235" y1="28.4168" x2="27.3255" y2="23.1494" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.21" stop-color="#E54033"/>
|
||||
<stop offset="0.84" stop-color="#FECA1A"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint3_linear" x1="22.7302" y1="26.9554" x2="29.4146" y2="27.0055" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FECA1A"/>
|
||||
<stop offset="0.4" stop-color="#FECA1A"/>
|
||||
<stop offset="1" stop-color="#AFD803"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint4_linear" x1="7.59997" y1="28.5514" x2="21.3045" y2="9.99784" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.16" stop-color="#E54033"/>
|
||||
<stop offset="0.84" stop-color="#FECA1A"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint5_linear" x1="5.60388" y1="10.1169" x2="4.99701" y2="22.1007" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FECA1A"/>
|
||||
<stop offset="0.76" stop-color="#E54033"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint6_linear" x1="12.3086" y1="7.00466" x2="8.64846" y2="20.9029" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.16" stop-color="#FECA1A"/>
|
||||
<stop offset="1" stop-color="#E54033"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint7_linear" x1="13.7261" y1="0.350433" x2="27.2779" y2="5.34558" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.15" stop-color="#6CBF00"/>
|
||||
<stop offset="1" stop-color="#AFD803"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint8_linear" x1="9782.24" y1="1155.63" x2="7617.92" y2="-1070.68" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.15" stop-color="#6CBF00"/>
|
||||
<stop offset="1" stop-color="#AFD803"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.3 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M28.1127 12.8648C28.6164 9.50263 26.0546 7.69482 22.5545 6.48855L23.6902 1.93293L20.9183 1.24317L19.8115 5.67848C19.0833 5.49561 18.3358 5.32558 17.5899 5.15555L18.7047 0.691363L15.9328 0L14.7971 4.55401C14.194 4.41606 13.6005 4.28132 13.0262 4.13695L13.0294 4.12251L9.20528 3.16808L8.46739 6.12923C8.46739 6.12923 10.5254 6.60083 10.4821 6.62971C11.605 6.91042 11.8071 7.65312 11.7734 8.24342L10.4805 13.4327C10.5575 13.4519 10.657 13.4808 10.7693 13.5241L10.4757 13.4519L8.66309 20.7216C8.52514 21.0617 8.17705 21.5734 7.39105 21.3793C7.41992 21.4194 5.37631 20.8772 5.37631 20.8772L4 24.0501L7.6092 24.95C8.27971 25.1185 8.93739 25.2949 9.58384 25.4601L8.43692 30.0671L11.2072 30.7568L12.3429 26.2012C13.1 26.4049 13.8347 26.5942 14.5533 26.7739L13.4208 31.3102L16.1927 32L17.3396 27.4027C22.0685 28.2978 25.6231 27.9368 27.1198 23.6603C28.326 20.218 27.0604 18.2305 24.5725 16.936C26.3851 16.5189 27.7486 15.3271 28.1127 12.8648ZM21.7765 21.7483C20.9216 25.1922 15.1228 23.3299 13.2428 22.8631L14.7667 16.7595C16.6467 17.2295 22.6732 18.1583 21.7765 21.7483ZM22.6347 12.8151C21.8535 15.9479 17.0284 14.355 15.4644 13.9652L16.844 8.4311C18.4079 8.82089 23.4496 9.54755 22.6347 12.8151Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -0,0 +1,15 @@
|
|||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0)">
|
||||
<path d="M15.9995 0V11.8291L25.9976 16.2967L15.9995 0Z" fill="white" fill-opacity="0.602"/>
|
||||
<path d="M15.9994 0L6 16.2967L15.9994 11.8291V0Z" fill="white"/>
|
||||
<path d="M15.9995 23.9626V32.0002L26.0043 18.1587L15.9995 23.9626Z" fill="white" fill-opacity="0.602"/>
|
||||
<path d="M15.9994 32.0002V23.9612L6 18.1587L15.9994 32.0002Z" fill="white"/>
|
||||
<path d="M15.9995 22.1022L25.9976 16.297L15.9995 11.832V22.1022Z" fill="white" fill-opacity="0.2"/>
|
||||
<path d="M6 16.297L15.9994 22.1022V11.832L6 16.297Z" fill="white" fill-opacity="0.602"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0">
|
||||
<rect width="32" height="32" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 756 B |
|
|
@ -0,0 +1,16 @@
|
|||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0)">
|
||||
<path opacity="0.9" d="M19.0212 21.5435C17.4632 25.2678 14.4719 27.7339 10.8478 28.1074C10.7699 28.1178 9.77798 28.1961 9.23047 28.1556C13.529 31.2983 18.6002 31.8232 18.6002 31.8232C19.6859 31.9345 20.9149 32.0257 22.1483 31.9935C22.5826 30.8595 22.8271 29.5612 22.757 28.0881C22.5941 24.6669 24.5779 22.9105 26.7261 22.0094C25.6251 20.3072 24.8035 18.2455 24.2408 16.3154C22.5633 16.7617 20.433 18.165 19.0212 21.5435Z" fill="white"/>
|
||||
<path d="M22.6894 28.0638C22.7599 29.5368 22.4646 30.8659 22.0303 31.9999C25.2148 31.9161 28.547 31.0069 29.3976 27.5467C29.5779 26.8126 29.6009 26.0147 29.3011 25.321C29.0088 24.6452 28.4454 24.134 27.9453 23.5932C27.4775 23.0764 27.0534 22.5218 26.6771 21.9351C24.5308 22.8365 22.5266 24.643 22.6894 28.0638Z" fill="white"/>
|
||||
<path d="M24.1304 15.9341C23.6411 14.6246 23.2245 13.3137 22.5913 12.0944C22.3796 11.683 22.1402 11.2864 21.8747 10.9074C21.2344 10.0001 20.553 9.11648 19.734 8.3642C18.3244 8.36828 16.8513 8.13162 15.5052 7.44092C14.1416 9.37503 12.5814 12.656 14.0095 16.4011C16.1184 21.9319 11.8388 25.7118 9.09229 28.0521L9.23102 28.1552C9.74596 28.1954 10.2635 28.188 10.7771 28.133C14.4009 27.7591 17.5654 25.2337 19.1234 21.5097C20.5356 18.1312 22.5899 16.8477 24.265 16.4011C24.2178 16.2453 24.1729 16.0896 24.1304 15.9341Z" fill="white"/>
|
||||
<path d="M6.1692 8.56934C4.06965 10.8692 2.96275 14.1035 3.00096 17.2599C3.02284 19.0964 3.50618 20.8243 4.29927 22.4116C4.41823 22.6497 4.54435 22.8846 4.67763 23.1164C9.09151 18.6858 7.49682 12.084 6.1692 8.56934Z" fill="white"/>
|
||||
<path opacity="0.9" d="M14.0839 16.4014C12.6558 12.6549 14.1811 9.3954 15.5428 7.46167C14.6448 6.99936 13.8459 6.3659 13.1911 5.59693C12.1301 5.57656 11.0734 5.73803 10.067 6.07433C8.4615 6.6059 7.10533 7.53957 6.02031 8.72807C7.31862 12.1656 8.87882 18.6234 4.5625 22.9568C5.38229 24.3886 6.45432 25.6929 7.65915 26.8428C8.13437 27.2958 8.63789 27.7182 9.16667 28.1074C11.9131 25.7682 16.1927 21.9322 14.0839 16.4014Z" fill="white"/>
|
||||
<path d="M19.409 3.46675C22.3977 4.64598 24.4909 4.96536 26.0085 4.91974L26.0522 4.89155C20.3983 -4.75303 13.0054 2.84022 13.0054 2.84022L13.0161 2.85914C14.6108 2.57648 16.9285 2.48856 19.409 3.46675Z" fill="white"/>
|
||||
<path opacity="0.9" d="M19.4456 3.40024C16.9666 2.42354 14.6356 2.46064 13.0142 2.8594C17.2656 10.3132 25.3455 5.34474 26.0065 4.92001C24.4879 4.96563 22.4343 4.57948 19.4456 3.40024Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0">
|
||||
<rect width="32" height="32" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
|
|
@ -0,0 +1,12 @@
|
|||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0)">
|
||||
<path d="M5.19951 22.1422C5.39263 21.9491 5.65815 21.8364 5.93977 21.8364H31.4786C31.9453 21.8364 32.1787 22.3997 31.8488 22.7296L26.8038 27.7746C26.6107 27.9677 26.3451 28.0804 26.0635 28.0804H0.52463C0.0579459 28.0804 -0.175396 27.5171 0.154501 27.1872L5.19951 22.1422Z" fill="white"/>
|
||||
<path d="M5.19951 3.30576C5.40067 3.11265 5.6662 3 5.93977 3H31.4786C31.9453 3 32.1787 3.56324 31.8488 3.89314L26.8038 8.93814C26.6107 9.13125 26.3451 9.2439 26.0635 9.2439H0.52463C0.0579459 9.2439 -0.175396 8.68066 0.154501 8.35077L5.19951 3.30576Z" fill="white"/>
|
||||
<path d="M26.8038 12.6637C26.6107 12.4706 26.3451 12.3579 26.0635 12.3579H0.52463C0.0579459 12.3579 -0.175396 12.9211 0.154501 13.251L5.19951 18.2961C5.39263 18.4892 5.65815 18.6018 5.93977 18.6018H31.4786C31.9453 18.6018 32.1787 18.0386 31.8488 17.7087L26.8038 12.6637Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0">
|
||||
<rect width="32" height="32" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M32 16C32 24.8667 24.8667 32 16 32C7.13328 32 0 24.8667 0 16C0 7.13328 7.13328 0 16 0C24.8667 0 32 7.13328 32 16ZM6.66656 12.7336C4.73312 17.867 7.39984 23.667 12.5998 25.5336C12.7998 25.667 12.9998 25.9336 12.9998 26.1336V27.067C12.9998 27.2003 12.9998 27.267 12.9331 27.3336C12.8666 27.6003 12.5998 27.7336 12.3331 27.6003C8.59984 26.4003 5.73312 23.5336 4.53311 19.8003C2.53311 13.467 5.99984 6.73355 12.3331 4.73355C12.3998 4.66699 12.5331 4.66699 12.5998 4.66699C12.8666 4.73355 12.9998 4.93355 12.9998 5.20027V6.13355C12.9998 6.46699 12.8666 6.66699 12.5998 6.80027C9.86656 7.80027 7.66656 9.93355 6.66656 12.7336ZM19.0666 5.00027C19.1331 4.73355 19.3998 4.60027 19.6666 4.73355C23.3331 5.93355 26.2666 8.80027 27.4666 12.6003C29.4666 18.9336 25.9998 25.667 19.6666 27.667C19.5998 27.7336 19.4666 27.7336 19.3998 27.7336C19.1331 27.667 18.9998 27.467 18.9998 27.2003V26.267C18.9998 25.9336 19.1331 25.7336 19.3998 25.6003C22.1331 24.6003 24.3331 22.467 25.3331 19.667C27.2666 14.5336 24.5998 8.73355 19.3998 6.86699C19.1998 6.73355 18.9998 6.46699 18.9998 6.20027V5.26699C18.9998 5.13355 18.9998 5.06699 19.0666 5.00027ZM20.4 18.5333C20.4 16.2 19 15.4 16.2 15.0668C14.2001 14.8 13.8001 14.2668 13.8001 13.3333C13.8001 12.3999 14.4668 11.8 15.8 11.8C17 11.8 17.6668 12.2 18 13.2C18.0668 13.4 18.2668 13.5333 18.4668 13.5333H19.5333C19.8 13.5333 20 13.3333 20 13.0667V13C19.7333 11.5333 18.5333 10.4 17 10.2667V8.66674C17 8.40002 16.8 8.20002 16.4668 8.1333H15.4668C15.2001 8.1333 15.0001 8.3333 14.9333 8.66674V10.2C12.9333 10.4667 11.6668 11.8 11.6668 13.4668C11.6668 15.6668 13.0001 16.5333 15.8 16.8668C17.6668 17.2 18.2668 17.6 18.2668 18.6668C18.2668 19.7335 17.3333 20.4668 16.0668 20.4668C14.3333 20.4668 13.7333 19.7333 13.5333 18.7333C13.4668 18.4668 13.2668 18.3333 13.0668 18.3333H11.9334C11.6668 18.3333 11.4668 18.5333 11.4668 18.8V18.8668C11.7334 20.5333 12.8001 21.7333 15.0001 22.0668V23.6668C15.0001 23.9333 15.2001 24.1333 15.5333 24.2001H16.5333C16.8 24.2001 17 24.0001 17.0668 23.6668V22.0668C19.0667 21.7333 20.4 20.3333 20.4 18.5333Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16.023 15.7763C17.3269 15.7763 17.9114 15.7414 18.0245 15.7329L18.0207 15.732C22.0208 15.5547 25.0047 14.8571 25.0047 14.0237C25.0047 13.1903 22.0199 12.4927 18.0207 12.3145V15.0391C17.9085 15.0494 17.2854 15.1013 16.0409 15.1013C15.0039 15.1013 14.2535 15.057 13.9914 15.0381V12.3126C9.98372 12.4917 6.99236 13.1884 6.99236 14.0237C6.99236 14.859 9.98372 15.5566 13.9914 15.7329C14.2497 15.7452 14.986 15.7763 16.023 15.7763Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.0244761 14.4741L5.8592 2.21826C5.8783 2.17698 5.90893 2.14211 5.94741 2.11786C5.98588 2.0936 6.03055 2.081 6.07603 2.08156H25.9258C25.971 2.08144 26.0154 2.09436 26.0535 2.11877C26.0916 2.14318 26.1219 2.17804 26.1407 2.2192L31.9755 14.475C31.9977 14.5206 32.0047 14.5721 31.9955 14.622C31.9864 14.6719 31.9615 14.7175 31.9245 14.7522L16.1664 29.8514C16.1216 29.8943 16.062 29.9183 16 29.9183C15.9379 29.9183 15.8783 29.8943 15.8336 29.8514L0.075385 14.7513C0.0384323 14.7166 0.0135572 14.6709 0.00439729 14.6211C-0.00476259 14.5712 0.00227334 14.5197 0.0244761 14.4741ZM18.0245 9.59369V12.0326C22.5521 12.242 25.954 13.1385 25.954 14.2141C25.954 15.2898 22.5488 16.1873 18.0235 16.3957V24.214H13.9904V16.3985C9.45484 16.1892 6.04395 15.2917 6.04395 14.2151C6.04395 13.1385 9.45484 12.24 13.9904 12.0317V9.59369H8.41026V5.87451H23.6056V9.59369H18.0245Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1,28 @@
|
|||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1674_2263)">
|
||||
<path d="M16 32C24.8366 32 32 24.8366 32 16C32 7.16345 24.8366 0 16 0C7.16345 0 0 7.16345 0 16C0 24.8366 7.16345 32 16 32Z" fill="#C8ECE1"/>
|
||||
<path d="M5.29524 11.8893C5.08172 11.6904 5.28095 11.442 5.45579 11.3054C5.67519 11.0999 5.89249 10.8767 6.09844 10.68C7.01512 9.74696 7.93219 8.84079 8.96785 8.04847C9.10908 7.58198 9.76138 7.96741 9.48569 8.34273C8.19239 9.37206 7.01974 10.5548 5.85046 11.7253L5.86601 11.7098C5.86983 11.7066 5.87335 11.7031 5.87652 11.6992C5.72941 11.8619 5.50791 12.0842 5.29524 11.8893Z" fill="#308D8A"/>
|
||||
<path d="M22.9244 12.238C22.899 12.207 22.8803 12.1712 22.8693 12.1327C22.8583 12.0942 22.8552 12.0539 22.8603 12.0142C22.8654 11.9745 22.8786 11.9363 22.899 11.9018C22.9194 11.8674 22.9467 11.8374 22.979 11.8139C24.1386 10.5446 25.2647 9.25007 26.4844 8.03585C26.5928 7.88744 26.8559 7.87108 26.9538 8.04801C27.0513 8.20815 26.9664 8.37498 26.845 8.49266C26.573 8.7978 26.2658 9.0681 25.9867 9.36648C25.2722 10.1041 24.5997 10.8758 23.9272 11.65C23.6482 11.8715 23.3321 12.5923 22.9244 12.238Z" fill="#308D8A"/>
|
||||
<path d="M9.33668 8.4205C9.26579 8.41715 9.19873 8.3875 9.14859 8.33723C9.09853 8.28702 9.06909 8.21982 9.06596 8.14899C9.06525 8.10853 9.073 8.06843 9.08872 8.03116C9.10443 7.9939 9.12776 7.96034 9.1572 7.93268C9.18671 7.90494 9.22155 7.88368 9.25974 7.87031C9.29786 7.85687 9.33839 7.85161 9.37871 7.85474C9.74351 7.8056 10.0693 7.77488 10.4294 7.75511C15.7577 7.38782 21.1236 7.53915 26.4455 7.81527C26.6019 7.80261 26.7398 7.94555 26.7423 8.09687C26.733 8.50661 26.2433 8.38053 25.9744 8.37847C20.4444 8.09054 14.8624 7.93339 9.33668 8.4205Z" fill="#308D8A"/>
|
||||
<path d="M22.5912 12.4739C22.5042 12.4704 22.4231 12.4671 22.355 12.4739C19.2788 12.3011 16.1887 12.3225 13.102 12.3436C10.9056 12.3591 8.71029 12.3734 6.52514 12.3196C6.44358 12.2749 6.35482 12.2449 6.26288 12.2309C6.12583 12.1844 5.98528 12.149 5.84258 12.125C5.78751 12.1133 5.73204 12.1027 5.67698 12.0922C5.6547 12.0838 5.63495 12.0771 5.61225 12.0699C5.53645 12.0456 5.45732 12.0333 5.37771 12.0334C5.37309 12.0334 5.36806 12.0334 5.36344 12.0313C5.36773 12.0323 5.37208 12.033 5.37646 12.0334H5.37183C5.30842 12.0224 5.24443 12.0151 5.18018 12.0115C5.18544 11.9718 5.19949 11.9338 5.22131 11.9002C5.24312 11.8666 5.27214 11.8383 5.30627 11.8174C5.49288 11.6858 5.72658 11.6812 5.94387 11.7106C6.85131 11.8278 7.75996 11.8022 8.67118 11.7774C9.2176 11.7635 9.76402 11.7484 10.3104 11.7648C11.5793 11.7892 12.8498 11.7787 14.1204 11.7682C15.7075 11.7551 17.2962 11.7425 18.8824 11.7997C19.5915 11.7871 20.3018 11.8139 21.0109 11.8417C21.6472 11.8674 22.2836 11.8922 22.919 11.8888C22.9584 11.8783 22.9995 11.8761 23.0397 11.8822C23.08 11.8883 23.1186 11.9026 23.153 11.9243C23.1875 11.946 23.2172 11.9746 23.2401 12.0083C23.263 12.0419 23.2788 12.0799 23.2864 12.1199C23.3048 12.4335 23.0384 12.4798 22.7631 12.4798C22.7068 12.4781 22.6479 12.4759 22.5912 12.4739Z" fill="#308D8A"/>
|
||||
<path d="M6.15479 12.2139H6.18078C6.17324 12.2168 6.16359 12.2168 6.15479 12.2139Z" fill="#308D8A"/>
|
||||
<path d="M5.61291 12.0675C5.53719 12.0429 5.458 12.0307 5.37839 12.0313C5.37377 12.0313 5.36873 12.0313 5.36411 12.0288C5.36873 12.0288 5.37377 12.0288 5.37713 12.0313H5.37251C5.29553 12.0162 5.21729 12.0083 5.13883 12.0078H5.11487C5.08916 11.9518 5.07948 11.8897 5.0869 11.8285C5.09431 11.7673 5.11854 11.7093 5.1569 11.6611C5.25903 11.5308 5.34015 11.3324 5.53138 11.3286C5.84828 11.3311 5.90123 11.6926 5.6995 11.883C5.70398 11.9173 5.70149 11.9523 5.69217 11.9856C5.68286 12.019 5.66691 12.0501 5.64528 12.0771L5.61291 12.0675Z" fill="#308D8A"/>
|
||||
<path d="M6.75799 12.3719C6.49068 12.3643 6.20866 12.3403 5.94808 12.3365C5.67026 12.3097 5.35504 12.3878 5.10119 12.2525C4.70905 11.9781 5.34411 11.1858 5.69422 11.2614C5.91613 11.3106 6.01112 11.6174 5.8182 11.7628C6.15443 11.7713 6.47849 11.7864 6.81431 11.8048C7.1812 11.8469 7.12616 12.4 6.75799 12.3719Z" fill="#308D8A"/>
|
||||
<path d="M22.53 14.3575C17.003 14.1453 11.4722 14.3516 5.94313 14.2865C5.59386 14.2726 5.58083 13.7346 5.94313 13.7219C11.6118 13.767 17.2813 13.5959 22.9474 13.7913C23.3114 13.7829 23.3408 14.3428 22.9663 14.3587C22.8196 14.363 22.6738 14.3617 22.53 14.3575Z" fill="#308D8A"/>
|
||||
<path d="M26.0399 18.4691C22.7317 18.3068 19.4084 18.3947 16.0926 18.3518C14.8258 18.3333 13.567 18.2576 12.3015 18.293C11.3999 18.2787 10.4912 18.467 9.59518 18.4035C9.26522 18.3152 9.33498 17.8218 9.68762 17.8458C11.5101 17.786 13.34 17.6289 15.1671 17.7688C17.5868 17.8054 20.0077 17.7688 22.4278 17.8281C23.6467 17.8382 24.8702 17.7835 26.0844 17.9025C26.3366 17.9105 26.7422 17.826 26.7674 18.1791C26.7573 18.567 26.2954 18.4682 26.0315 18.4691H26.0399Z" fill="#308D8A"/>
|
||||
<path d="M9.3859 18.3246L9.36151 18.3036L9.34978 18.2944C9.36279 18.3045 9.37623 18.3158 9.3918 18.3259C7.93289 17.1638 6.78594 15.6881 5.53386 14.3225C5.23461 14.0867 5.58513 13.65 5.86715 13.8631C6.96245 14.9613 7.85894 16.239 9.04165 17.2503C9.28542 17.4941 9.55067 17.7034 9.80112 17.9299C10.0256 18.1927 9.64105 18.5634 9.3859 18.3246Z" fill="#308D8A"/>
|
||||
<path d="M26.4637 18.4502C26.4154 18.4389 26.3707 18.4153 26.3342 18.3817C26.2977 18.348 26.2705 18.3054 26.2553 18.2582C26.2401 18.2109 26.2374 18.1605 26.2475 18.1119C26.2576 18.0632 26.2801 18.0181 26.3128 17.9807C25.2877 16.6845 24.0831 15.5333 22.8639 14.4237C22.3074 14.2337 22.8639 13.5192 23.2337 13.9874C24.4412 15.036 25.5665 16.1756 26.5999 17.3961C26.7592 17.5819 26.8521 17.7378 26.984 17.929C27.1425 18.2589 26.7752 18.5372 26.4637 18.4502Z" fill="#308D8A"/>
|
||||
<path d="M9.46332 20.5063C9.39064 20.4881 9.32792 20.4421 9.28867 20.3783C9.24934 20.3144 9.23661 20.2377 9.25318 20.1646C9.29521 19.9766 9.47889 19.9304 9.64906 19.9544C9.87434 19.913 10.1016 19.8837 10.3299 19.8665C15.6636 19.5597 21.0326 19.8077 26.3814 19.7799C26.7307 19.7905 26.7475 20.3318 26.3835 20.3445C20.7472 20.3916 15.0655 20.0738 9.46332 20.5063Z" fill="#308D8A"/>
|
||||
<path d="M5.9828 24.4555C5.58435 24.5126 5.48137 23.928 5.89874 23.8897C6.52246 23.928 7.13653 23.8687 7.75818 23.8426C12.8682 23.7645 17.9799 23.8569 23.0908 23.8884C23.4102 23.9582 23.3538 24.456 23.0273 24.4488C17.328 24.4336 11.6372 24.3071 5.94329 24.4534L5.9828 24.4555Z" fill="#308D8A"/>
|
||||
<path d="M22.9506 24.2727C22.6379 24.0302 22.9927 23.7234 23.1852 23.5422C23.1788 23.5489 23.1721 23.5548 23.1658 23.5607C24.2233 22.4221 25.1569 21.1691 26.2543 20.0687C26.2812 19.73 26.8137 19.7455 26.8167 20.0881C26.8204 20.1649 26.8059 20.2415 26.7746 20.3117C26.7431 20.3818 26.6956 20.4436 26.6359 20.492C25.7533 21.3633 25.0118 22.3636 24.1762 23.2796C23.9089 23.6015 23.6181 23.91 23.3398 24.2202C23.2928 24.2753 23.227 24.3112 23.1552 24.3209C23.0834 24.3306 23.0106 24.3134 22.9506 24.2727Z" fill="#308D8A"/>
|
||||
<path d="M5.66685 24.2647C5.18602 24.0428 5.6513 23.6074 5.877 23.3952C6.5041 22.6941 7.15895 21.9695 7.84823 21.339C8.27859 20.9011 8.73086 20.4888 9.18903 20.0819C9.27308 20.0025 9.38067 19.918 9.49921 19.9197C9.81146 19.9075 9.90099 20.3652 9.6051 20.4699C8.34416 21.5698 7.18753 22.7891 6.07076 24.0197C5.9724 24.1643 5.88205 24.3333 5.66685 24.2647Z" fill="#308D8A"/>
|
||||
<path d="M9.2907 20.1835C15.0073 19.6967 20.8017 20.0394 26.5529 20.0014C25.5203 21.2271 24.6099 22.5827 23.5902 23.8248L23.5862 23.8294C23.4863 23.9339 23.3553 24.0725 23.2837 24.2176C17.9833 24.1785 12.6806 24.0725 7.38137 24.1645C6.82422 24.191 6.27591 24.2456 5.71875 24.2346C6.84854 22.8303 8.01902 21.4412 9.2907 20.1835Z" fill="#308D8A"/>
|
||||
<path d="M26.65 18.1263C26.5901 18.1263 26.5328 18.1305 26.4813 18.1291C25.2173 17.9928 23.9454 18.0555 22.6775 18.0435C20.1604 17.977 17.6417 18.0182 15.1246 17.977C13.2301 17.8178 11.3322 17.9942 9.44077 18.0621C9.20995 17.8408 8.97208 17.6318 8.74957 17.3864C7.67615 16.3821 6.82972 15.1474 5.87354 14.0173C11.5097 14.08 17.1476 13.8609 22.7816 14.0963C22.855 14.0986 22.9293 14.1 23.0028 14.1C23.0417 14.1311 23.0849 14.155 23.1309 14.1709C24.3708 15.4066 25.5985 16.6878 26.65 18.1263Z" fill="#308D8A"/>
|
||||
<path d="M26.6547 8.21904C26.7059 8.21904 26.7652 8.22416 26.8262 8.22921C25.6627 9.45432 24.574 10.7453 23.4545 12.0116C23.4246 12.0331 23.399 12.0603 23.3791 12.0918C22.7057 12.096 22.0297 12.0686 21.354 12.0403C20.5968 12.0093 19.8377 11.9791 19.0804 11.994C17.3863 11.9304 15.6898 11.9448 13.9943 11.9591C12.6373 11.9707 11.2807 11.9824 9.92507 11.955C9.34146 11.9369 8.75792 11.955 8.17431 11.9694C7.20109 11.9968 6.23057 12.0251 5.26094 11.8956C5.23715 11.8914 5.21606 11.8891 5.19092 11.8863C5.19361 11.8826 5.19585 11.8775 5.19855 11.8733C6.40475 10.625 7.61588 9.36749 8.94416 8.26079C14.8261 7.72902 20.766 7.90253 26.6547 8.21904Z" fill="#308D8A"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1674_2263">
|
||||
<rect width="32" height="32" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.6 KiB |
|
|
@ -0,0 +1,29 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12Z"
|
||||
fill="#FFD15C" />
|
||||
<path
|
||||
d="M6.18774 16.9173C6.29129 16.847 6.38794 16.7416 6.43605 16.5921C6.48952 16.4259 6.45798 16.2797 6.43294 16.1987C6.43212 16.196 6.43124 16.1933 6.43037 16.1906L6.45032 16.0741C6.50543 16.1051 6.56885 16.1468 6.64117 16.1976C6.65861 16.2099 6.683 16.2273 6.70836 16.2453C6.74166 16.2691 6.77676 16.2942 6.80015 16.3105C6.84034 16.3384 6.89741 16.3774 6.95788 16.4095C8.55811 17.4041 9.8815 17.8141 10.9326 17.7633C12.0194 17.7108 12.7815 17.1641 13.1746 16.3663C13.5545 15.5951 13.5678 14.6395 13.3015 13.7543C13.0335 12.8634 12.4699 11.9975 11.6298 11.3983C10.2142 10.3886 8.91702 8.8534 8.26109 7.548C7.92799 6.88502 7.79547 6.35035 7.83046 6.00123C7.8467 5.83875 7.8965 5.74046 7.95604 5.6772C8.01563 5.6139 8.1242 5.54408 8.33337 5.50964C8.77641 5.43665 9.28883 5.27709 9.80885 5.11517C10.0107 5.0523 10.2137 4.98908 10.4143 4.93043C11.1638 4.71126 11.9573 4.52713 12.7914 4.5287C14.409 4.53174 16.3075 5.23407 18.3064 8.15576C20.8742 11.909 19.4644 16.103 16.5063 18.3063C15.0311 19.4051 13.1904 19.9884 11.299 19.7666C9.59596 19.567 7.81225 18.7099 6.18774 16.9173ZM6.48559 15.9459C6.48559 15.946 6.48504 15.9471 6.48373 15.949C6.48487 15.9468 6.48553 15.9459 6.48559 15.9459ZM6.3248 16.0192C6.32475 16.0191 6.32639 16.0193 6.32994 16.0202C6.32666 16.0198 6.32491 16.0194 6.3248 16.0192Z"
|
||||
fill="white" stroke="black" stroke-width="1.65708" />
|
||||
<path
|
||||
d="M7.65771 5.70135C7.65771 5.70135 12.2449 4.47986 13.2493 4.47986C14.2536 4.47986 18.2668 6.42868 19.438 9.99003C21.0984 15.0387 16.5822 18.3491 16.0722 18.0246C20.9309 14.0073 12.9778 6.58165 9.06918 7.13993C8.58059 7.20975 8.85203 7.62852 8.85203 7.62852L8.74346 8.71426L7.92915 7.35708L7.65771 5.70135Z"
|
||||
fill="black" />
|
||||
<path
|
||||
d="M18.7697 8.47131C20.2182 11.0214 19.9172 9.56137 19.5956 12.4765C20.1907 11.5138 21.1212 12.2346 21.5055 12.6027C21.5744 12.6687 21.688 12.6278 21.6848 12.5325C21.6702 12.1001 21.5463 11.1657 20.8305 10.1633C19.849 8.78878 18.7697 8.47131 18.7697 8.47131Z"
|
||||
fill="black" />
|
||||
<path
|
||||
d="M19.5956 12.4765C19.651 12.3396 19.7375 12.126 19.7375 12.126M19.5956 12.4765C19.9172 9.56137 20.2182 11.0214 18.7697 8.47131C18.7697 8.47131 19.849 8.78878 20.8305 10.1633C21.5463 11.1657 21.6702 12.1001 21.6848 12.5325C21.688 12.6278 21.5744 12.6687 21.5055 12.6027C21.1212 12.2346 20.1907 11.5138 19.5956 12.4765Z"
|
||||
stroke="black" stroke-width="0.0930942" />
|
||||
<path
|
||||
d="M7.1151 12.0876C6.50389 13.1224 5.24989 13.0448 5.2739 14.279C6.39395 16.7675 6.40057 16.589 6.40057 16.589C8.47534 15.4235 7.62271 12.8499 7.31486 12.093C7.28004 12.0074 7.16206 12.0081 7.1151 12.0876Z"
|
||||
fill="black" />
|
||||
<path
|
||||
d="M2.41197 14.3755C3.60365 14.531 4.31453 13.495 5.27229 14.2737C6.5437 16.6884 6.39894 16.5838 6.39894 16.5838C4.20318 17.5011 2.70012 15.2448 2.2932 14.5362C2.2472 14.4561 2.32038 14.3636 2.41197 14.3755Z"
|
||||
fill="black" />
|
||||
<path
|
||||
d="M12.4078 12.8402C12.4078 12.8402 13.6022 14.0618 12.9779 14.2517C12.1994 13.7726 10.8044 14.1449 10.1206 14.3755C9.95228 14.4323 9.78724 14.2829 9.84792 14.1159C10.0804 13.4761 10.6546 12.2918 11.7564 12.1345C12.4078 11.9715 12.4078 12.8402 12.4078 12.8402Z"
|
||||
fill="black" />
|
||||
<path
|
||||
d="M13.1407 6.86845C13.005 6.67847 12.7336 6.16272 13.575 6.16272C14.4165 6.16272 15.7022 7.1155 15.9636 7.46796C15.8822 7.68276 15.3394 7.73081 15.0679 7.70993C14.7965 7.68904 14.335 7.64438 13.9822 7.46796C13.6293 7.29154 13.2764 7.05848 13.1407 6.86845Z"
|
||||
fill="white" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.7 KiB |
|
|
@ -0,0 +1,26 @@
|
|||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_2582_2263)">
|
||||
<path d="M16 32C24.8366 32 32 24.8366 32 16C32 7.16345 24.8366 0 16 0C7.16345 0 0 7.16345 0 16C0 24.8366 7.16345 32 16 32Z" fill="black"/>
|
||||
<path d="M6.15479 12.2139H6.18078C6.17324 12.2168 6.16359 12.2168 6.15479 12.2139Z" fill="#308D8A"/>
|
||||
<path d="M9.24648 19.7458C9.36718 19.6251 9.53314 19.5547 9.70917 19.5547H25.6719C25.9636 19.5547 26.1095 19.9067 25.9033 20.1129L22.75 23.2663C22.6293 23.387 22.4633 23.4574 22.2873 23.4574H6.3245C6.0328 23.4574 5.88695 23.1053 6.09315 22.8991L9.24648 19.7458Z" fill="url(#paint0_linear_2582_2263)"/>
|
||||
<path d="M9.24648 7.97236C9.37221 7.85166 9.53817 7.78125 9.70917 7.78125H25.6719C25.9636 7.78125 26.1095 8.1333 25.9033 8.33949L22.75 11.4928C22.6293 11.6135 22.4633 11.6839 22.2873 11.6839H6.3245C6.0328 11.6839 5.88695 11.3319 6.09315 11.1257L9.24648 7.97236Z" fill="url(#paint1_linear_2582_2263)"/>
|
||||
<path d="M22.75 13.8215C22.6293 13.7008 22.4633 13.6304 22.2873 13.6304H6.3245C6.0328 13.6304 5.88695 13.9824 6.09315 14.1886L9.24648 17.3419C9.36718 17.4626 9.53314 17.533 9.70917 17.533H25.6719C25.9636 17.533 26.1095 17.181 25.9033 16.9748L22.75 13.8215Z" fill="url(#paint2_linear_2582_2263)"/>
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_2582_2263" x1="24.147" y1="5.8975" x2="13.0995" y2="27.058" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#00FFA3"/>
|
||||
<stop offset="1" stop-color="#DC1FFF"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_2582_2263" x1="19.3165" y1="3.37558" x2="8.26896" y2="24.536" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#00FFA3"/>
|
||||
<stop offset="1" stop-color="#DC1FFF"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear_2582_2263" x1="21.7164" y1="4.62866" x2="10.6689" y2="25.7891" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#00FFA3"/>
|
||||
<stop offset="1" stop-color="#DC1FFF"/>
|
||||
</linearGradient>
|
||||
<clipPath id="clip0_2582_2263">
|
||||
<rect width="32" height="32" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
|
|
@ -0,0 +1,5 @@
|
|||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16 32C24.8667 32 32 24.8667 32 16C32 7.13328 24.8667 0 16 0C7.13328 0 0 7.13328 0 16C0 24.8667 7.13328 32 16 32Z" fill="#2775CA"/>
|
||||
<path d="M20.4 18.5333C20.4 16.2 19 15.4 16.2 15.0668C14.2001 14.8 13.8001 14.2668 13.8001 13.3333C13.8001 12.3999 14.4668 11.8 15.8 11.8C17 11.8 17.6668 12.2 18 13.2C18.0668 13.4 18.2668 13.5333 18.4668 13.5333H19.5333C19.8 13.5333 20 13.3333 20 13.0668V13C19.7333 11.5333 18.5333 10.4 17 10.2667V8.66674C17 8.40002 16.8 8.20002 16.4668 8.1333H15.4668C15.2001 8.1333 15.0001 8.3333 14.9333 8.66674V10.2C12.9333 10.4667 11.6668 11.8 11.6668 13.4668C11.6668 15.6668 13.0001 16.5333 15.8 16.8668C17.6668 17.2 18.2668 17.6 18.2668 18.6668C18.2668 19.7335 17.3333 20.4668 16.0668 20.4668C14.3333 20.4668 13.7333 19.7333 13.5333 18.7333C13.4668 18.4668 13.2668 18.3333 13.0668 18.3333H11.9334C11.6668 18.3333 11.4668 18.5333 11.4668 18.8V18.8668C11.7334 20.5333 12.8001 21.7333 15.0001 22.0668V23.6668C15.0001 23.9333 15.2001 24.1333 15.5333 24.2001H16.5333C16.8 24.2001 17 24.0001 17.0668 23.6668V22.0668C19.0667 21.7333 20.4 20.3333 20.4 18.5333V18.5333Z" fill="white"/>
|
||||
<path d="M12.5998 25.5336C7.39984 23.667 4.73312 17.867 6.66656 12.7336C7.66656 9.93355 9.86656 7.80027 12.5998 6.80027C12.8666 6.66699 12.9998 6.46699 12.9998 6.13355V5.20027C12.9998 4.93355 12.8666 4.73355 12.5998 4.66699C12.5331 4.66699 12.3998 4.66699 12.3331 4.73355C5.99984 6.73355 2.53311 13.467 4.53311 19.8003C5.73312 23.5336 8.59984 26.4003 12.3331 27.6003C12.5998 27.7336 12.8666 27.6003 12.9331 27.3336C12.9998 27.267 12.9998 27.2003 12.9998 27.067V26.1336C12.9998 25.9336 12.7998 25.667 12.5998 25.5336ZM19.6666 4.73355C19.3998 4.60027 19.1331 4.73355 19.0666 5.00027C18.9998 5.06699 18.9998 5.13355 18.9998 5.26699V6.20027C18.9998 6.46699 19.1998 6.73355 19.3998 6.86699C24.5998 8.73355 27.2666 14.5336 25.3331 19.667C24.3331 22.467 22.1331 24.6003 19.3998 25.6003C19.1331 25.7336 18.9998 25.9336 18.9998 26.267V27.2003C18.9998 27.467 19.1331 27.667 19.3998 27.7336C19.4666 27.7336 19.5998 27.7336 19.6666 27.667C25.9998 25.667 29.4666 18.9336 27.4666 12.6003C26.2666 8.80027 23.3331 5.93355 19.6666 4.73355V4.73355Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16.023 15.7763C17.3269 15.7763 17.9114 15.7414 18.0245 15.7329L18.0207 15.732C22.0208 15.5547 25.0047 14.8571 25.0047 14.0237C25.0047 13.1903 22.0199 12.4927 18.0207 12.3145V15.0391C17.9085 15.0494 17.2854 15.1013 16.0409 15.1013C15.0039 15.1013 14.2535 15.057 13.9914 15.0381V12.3126C9.98372 12.4917 6.99236 13.1884 6.99236 14.0237C6.99236 14.859 9.98372 15.5566 13.9914 15.7329C14.2497 15.7452 14.986 15.7763 16.023 15.7763Z" fill="#50AF95"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.0244761 14.4741L5.8592 2.21826C5.8783 2.17698 5.90893 2.14211 5.94741 2.11786C5.98588 2.0936 6.03055 2.081 6.07603 2.08156H25.9258C25.971 2.08144 26.0154 2.09436 26.0535 2.11877C26.0916 2.14318 26.1219 2.17804 26.1407 2.2192L31.9755 14.475C31.9977 14.5206 32.0047 14.5721 31.9955 14.622C31.9864 14.6719 31.9615 14.7175 31.9245 14.7522L16.1664 29.8514C16.1216 29.8943 16.062 29.9183 16 29.9183C15.9379 29.9183 15.8783 29.8943 15.8336 29.8514L0.075385 14.7513C0.0384323 14.7166 0.0135572 14.6709 0.00439729 14.6211C-0.00476259 14.5712 0.00227334 14.5197 0.0244761 14.4741ZM18.0245 9.59369V12.0326C22.5521 12.242 25.954 13.1385 25.954 14.2141C25.954 15.2898 22.5488 16.1873 18.0235 16.3957V24.214H13.9904V16.3985C9.45484 16.1892 6.04395 15.2917 6.04395 14.2151C6.04395 13.1385 9.45484 12.24 13.9904 12.0317V9.59369H8.41026V5.87451H23.6056V9.59369H18.0245Z" fill="#50AF95"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 49 KiB After Width: | Height: | Size: 104 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 164 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 226 KiB |
|
|
@ -53,8 +53,8 @@
|
|||
"risk-engine-3-desc": "Mango has elected a Security Council of trusted DAO members who can vote to execute a set of actions in the event of an active exploit or other emergency. The Security Council is there to step in and act when normal governance procedures would take too long.",
|
||||
"risk-engine-desc": "A safe place for your crypto",
|
||||
"saying-about-us": "See what the community is saying about us.",
|
||||
"swap-desc": "The simplicity of swap with the power of leverage.",
|
||||
"swap-heading": "Swap it like it's hot.",
|
||||
"swap-desc": "The simplicity of swap with the power of flash loans. Swap with up to 5x leverage and the best aggregated prices from all the top DEX's.",
|
||||
"swap-heading": "Swap smarter.",
|
||||
"swap-highlight-1-desc": "Mango Swap implements flash loans to add margin to your swaps. When you use margin a loan will be opened for you.",
|
||||
"swap-highlight-1-heading": "Up to 5x leverage",
|
||||
"swap-highlight-2-desc": "The liquidity for swaps routes through Jupiter (the top liquidity aggregator on Solana). This means you best the best possible price.",
|
||||
|
|
|
|||
|
|
@ -45,8 +45,8 @@
|
|||
"risk-engine": "Sophisticated risk engine",
|
||||
"risk-engine-desc": "The risk engine for v4 is at the core of its design. Features include, manipulation resistent price oracles, insurance fund, partial liquidations, DAO governed risk parameters and emergency reduce-only mode.",
|
||||
"saying-about-us": "See what the community is saying about us",
|
||||
"swap-desc": "The simplicity of swap with the power of leverage.",
|
||||
"swap-heading": "Swap it like it's hot.",
|
||||
"swap-desc": "The simplicity of swap with the power of flash loans. Swap with up to 5x leverage and the best aggregated prices from all the top DEX's.",
|
||||
"swap-heading": "Swap smarter.",
|
||||
"swap-highlight-1-desc": "Mango Swap implements flash loans to let you lever up your swaps.",
|
||||
"swap-highlight-1-heading": "Swap up to 5x your balance",
|
||||
"swap-highlight-2-desc": "Built on top of Solana’s top liquidity aggregator, Jupiter so you get the best swap price possible.",
|
||||
|
|
|
|||
|
|
@ -45,8 +45,8 @@
|
|||
"risk-engine": "Sophisticated risk engine",
|
||||
"risk-engine-desc": "The risk engine for v4 is at the core of its design. Features include, manipulation resistent price oracles, insurance fund, partial liquidations, DAO governed risk parameters and emergency reduce-only mode.",
|
||||
"saying-about-us": "See what the community is saying about us",
|
||||
"swap-desc": "The simplicity of swap with the power of leverage.",
|
||||
"swap-heading": "Swap it like it's hot.",
|
||||
"swap-desc": "The simplicity of swap with the power of flash loans. Swap with up to 5x leverage and the best aggregated prices from all the top DEX's.",
|
||||
"swap-heading": "Swap smarter.",
|
||||
"swap-highlight-1-desc": "Mango Swap implements flash loans to let you lever up your swaps.",
|
||||
"swap-highlight-1-heading": "Swap up to 5x your balance",
|
||||
"swap-highlight-2-desc": "Built on top of Solana’s top liquidity aggregator, Jupiter so you get the best swap price possible.",
|
||||
|
|
|
|||
|
|
@ -45,8 +45,8 @@
|
|||
"risk-engine": "Sophisticated risk engine",
|
||||
"risk-engine-desc": "The risk engine for v4 is at the core of its design. Features include, manipulation resistent price oracles, insurance fund, partial liquidations, DAO governed risk parameters and emergency reduce-only mode.",
|
||||
"saying-about-us": "See what the community is saying about us",
|
||||
"swap-desc": "The simplicity of swap with the power of leverage.",
|
||||
"swap-heading": "Swap it like it's hot.",
|
||||
"swap-desc": "The simplicity of swap with the power of flash loans. Swap with up to 5x leverage and the best aggregated prices from all the top DEX's.",
|
||||
"swap-heading": "Swap smarter.",
|
||||
"swap-highlight-1-desc": "Mango Swap implements flash loans to let you lever up your swaps.",
|
||||
"swap-highlight-1-heading": "Swap up to 5x your balance",
|
||||
"swap-highlight-2-desc": "Built on top of Solana’s top liquidity aggregator, Jupiter so you get the best swap price possible.",
|
||||
|
|
|
|||
|
|
@ -45,8 +45,8 @@
|
|||
"risk-engine": "Sophisticated risk engine",
|
||||
"risk-engine-desc": "The risk engine for v4 is at the core of its design. Features include, manipulation resistent price oracles, insurance fund, partial liquidations, DAO governed risk parameters and emergency reduce-only mode.",
|
||||
"saying-about-us": "See what the community is saying about us",
|
||||
"swap-desc": "The simplicity of swap with the power of leverage.",
|
||||
"swap-heading": "Swap it like it's hot.",
|
||||
"swap-desc": "The simplicity of swap with the power of flash loans. Swap with up to 5x leverage and the best aggregated prices from all the top DEX's.",
|
||||
"swap-heading": "Swap smarter.",
|
||||
"swap-highlight-1-desc": "Mango Swap implements flash loans to let you lever up your swaps.",
|
||||
"swap-highlight-1-heading": "Swap up to 5x your balance",
|
||||
"swap-highlight-2-desc": "Built on top of Solana’s top liquidity aggregator, Jupiter so you get the best swap price possible.",
|
||||
|
|
|
|||
|
|
@ -196,7 +196,7 @@ h1 {
|
|||
}
|
||||
|
||||
h2 {
|
||||
@apply text-3xl md:text-4xl lg:text-5xl;
|
||||
@apply text-3xl md:text-5xl lg:text-6xl;
|
||||
}
|
||||
|
||||
h3 {
|
||||
|
|
|
|||
|
|
@ -66,9 +66,9 @@ module.exports = {
|
|||
success: 'hsl(82, 97%, 41%)',
|
||||
warning: 'hsl(33, 100%, 57%)',
|
||||
// 'bkg-1': 'hsl(256, 18%, 12%)',
|
||||
'bkg-1': '#1C1923',
|
||||
'bkg-2': 'hsl(256, 18%, 17%)',
|
||||
'bkg-3': 'hsl(256, 18%, 22%)',
|
||||
'bkg-1': '#121214',
|
||||
'bkg-2': '#191919',
|
||||
'bkg-3': '#292929',
|
||||
'bkg-4': 'hsl(256, 18%, 27%)',
|
||||
'fgd-1': 'hsl(253, 19%, 91%)',
|
||||
'fgd-2': 'hsl(253, 19%, 81%)',
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -3146,10 +3146,10 @@ growly@^1.3.0:
|
|||
resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
|
||||
integrity sha512-+xGQY0YyAWCnqy7Cd++hc2JqMYzlm0dG30Jd0beaA64sROr8C4nt8Yc9V5Ro3avlSUDTN0ulqP/VBKi1/lLygw==
|
||||
|
||||
gsap@^3.7.1:
|
||||
version "3.11.4"
|
||||
resolved "https://registry.yarnpkg.com/gsap/-/gsap-3.11.4.tgz#e6d972d3509a7431b86d81d6fc3bbeb6862e5ff1"
|
||||
integrity sha512-McHhEguHyExMMnjqKA8G+7TvxmlKQGMbjgwAilnFe1e4id7V/tFveRQ2YMZhTYu0oxHGWvbPltdVYQOu3z1SCA==
|
||||
gsap@^3.11.5:
|
||||
version "3.11.5"
|
||||
resolved "https://registry.yarnpkg.com/gsap/-/gsap-3.11.5.tgz#97ef65091f43868be387803f9db277e8cd5bd041"
|
||||
integrity sha512-Q89nKCLgoX5xUjznh9LcaIUkz54k1voNucT1Rpf9SJNFIQznBwFqt5qUUQbeVInFyN/n18OUJkpeI6CNEDt74w==
|
||||
|
||||
harmony-reflect@^1.4.6:
|
||||
version "1.6.2"
|
||||
|
|
|
|||
Loading…
Reference in New Issue