diff --git a/components/Button.tsx b/components/Button.tsx index 8bb8a6c..e36f6dc 100644 --- a/components/Button.tsx +++ b/components/Button.tsx @@ -3,7 +3,7 @@ import styled from '@emotion/styled' import tw from 'twin.macro' export const idleGradient = - 'bg-gradient-to-r from-secondary-2-light to-primary-dark' + 'bg-gradient-to-r from-secondary-2-light to-primary-light' export const activeGradient = 'bg-gradient-to-bl from-secondary-1-light via-primary-dark to-secondary-2-light' @@ -55,7 +55,7 @@ const Button: FunctionComponent = ({ }) => { return ( { return ( -
-
-
-
-

- Join the Mango DAO -

-

- The Mango DAO is an experiment in self governance to merge the - liquidity and usability of CeFi with the permissionless innovation - of DeFi at a lower cost to the end user than both currently - provide. -

+
+
+
+
+

+ Join the{' '}Mango DAO and help build the ecosystem. +

+

+ The Mango DAO is an experiment in self governance that aims to + build a completely decentralzied financial ecosystem. +

+
-
-
+ + ) } diff --git a/components/LandingContent.tsx b/components/LandingContent.tsx index 562e49b..2827703 100644 --- a/components/LandingContent.tsx +++ b/components/LandingContent.tsx @@ -1,80 +1,195 @@ -import { ChevronRightIcon } from '@heroicons/react/solid' -import GradientText from './GradientText' +import Button from "./Button" +import PoolInfoCards from "./PoolInfoCards" const LandingContent = () => { return ( -
-
-
-

+
+
+
+ +
+
+

It is still the early days.

-

- This is the first moment for non-developers to participate in the - Mango DAO. +

+ This is the first moment for non-developers to participate in + helping build the Mango protocol by supporting the inception of the + protocols Insurance Fund.

{/* Section 1 */} -
-
+
+

What is Mango?

Mango is a decentralized autonomous organization. Its purpose is - to create a well integrated and completely decentralized financial - ecosystem for traders. + to contribute maximum value for the defi ecosystem and its + developer community to create commercially viable decentralized + trading and lending products for traders.

- What is the Insurance Fund? + Why the{' '} + + Insurance fund + + ?

- The insurance fund will refund losses to the lenders on the Mango - smart contract in the event extreme volatility causes bankrupt - accounts and excess losses in the system. The proceeds of this - sale go directly into the DAO treasury for use as the insurance - fund. + Mango protocol is powered by lenders providing their capital for + the community to use for trading and borrowing purposes. The + insurance fund is the last line of defense for protecting our + mango lenders.

-
+

- What is the $MNGO token? + What is the{' '} + + $MNGO + {' '} + token?

We believe that substantial rewards to a strong developer community and liquidity incentives are the essential drivers for - growth and therefore the foundation of the Mango DAO. Mango - Governance tokens ($MNGO) will serve as the incentive for those - who can proove their work is useful to the DAO. So far tokens were - until now only provided to contributors who helped to build out - the protocol. + growth and therefore the foundation of the Mango DAO. +

+

+ Mango Governance tokens ($MNGO) will serve as the incentive for + those who can proove their work is useful to the DAO. +

+ + +

+ $MNGO were only provided + to developers who helped to build out the protocol.

-
{/* Section 2 */} -
-

- How does it work? +
+

+ How it works.

-

- This is not a regular token sale, you are not about to invest for a - juicy ROI on day 1. +

+ We take the view that token sales should be simple, transparent and + minimize randomness and luck in the distribution.

+
+
+
+
+
+
+

+ Deposit your USDC contribution. +

+

+ Users deposit USDC into a vault during the event period to + set their contribution amount. +

+
+
+
+
+ +
+
+
+
+

+ 48 hour participation period. +

+

+ The event will span over a 2 day period split into two + sections,{' '} + Unrestricted{' '} + and Restricted + . +

+
+
+

+ + Unrestricted + +

+

+ During the unrestricted period users may deposit or + withdraw their USDC from the vault. During the + unrestricted period price can fluctuate. +

+
+ +
+

+ Restricted +

+

+ After 24 hours deposits will be restricted and only + withdrawals allowed. During the restricted period + price can only goin down. +

+
+
+
+
+
+
+
+ +
+
+
+
+
+

+ Why does it work this way? +

+

+ Simple mechanisms are easier to build, explain, understand + and are harder to exploit. A transparent mechanism + increases participation because buyers are more confident + there are no hidden tricks that could harm them. +

+

+ Elements of luck engineered into the mechanism distribute + value randomly to those, who are most willing to do the + arbitrary, worthless tasks to get the free value. +

+

+ We believe all "excess" value should be captured + by token holders in the DAO. +

+
+
+
+
+
+
+
+
+

+ MNGO unlocked and distributed. +

+

+ At event conclusion $MNGO gets distributed in propotion to + a users USDC contribution.{' '} +

+
+
+
+
+
+

) diff --git a/components/NavBarBeta.tsx b/components/NavBarBeta.tsx new file mode 100644 index 0000000..60a6622 --- /dev/null +++ b/components/NavBarBeta.tsx @@ -0,0 +1,626 @@ +import { useEffect, useState } from 'react' +import MangoPill from '../components/MangoPill' +import MangoSale from '../components/MangoSale' +import Button from './Button' + +const NavBarBeta = () => { + const [mobileMenuVisible, setMobileMenuVisible] = useState(false) + const [productMenuVisible, setProductMenuVisible] = useState(false) + const [supportMenuVisible, setSupportMenuVisible] = useState(false) + + const toggleMobileMenu = (e) => { + setMobileMenuVisible(!mobileMenuVisible) + e.stopPropagation() + } + + const toggleProducts = (e) => { + setProductMenuVisible(!productMenuVisible) + setSupportMenuVisible(false) + e.stopPropagation() + } + + const toggleSupport = (e) => { + setSupportMenuVisible(!supportMenuVisible) + setProductMenuVisible(false) + e.stopPropagation() + } + + const closeMenu = () => { + setMobileMenuVisible(false) + setProductMenuVisible(false) + setSupportMenuVisible(false) + } + + const doNothing = (e) => { + e.stopPropagation() + } + + useEffect(() => { + window.addEventListener('click', closeMenu) + return () => window.removeEventListener('click', closeMenu) + }) + + return ( +
+ {/* Main Menu */} +
+
+
+ +
+ +
+ +
+
+ +
+
+
+
+ + {/* Mobile menu */} + + +
+
+ ) +} + +export default NavBarBeta diff --git a/components/PoolInfoCards.tsx b/components/PoolInfoCards.tsx index 69fe35a..bb05655 100644 --- a/components/PoolInfoCards.tsx +++ b/components/PoolInfoCards.tsx @@ -23,7 +23,7 @@ const PoolInfoCards = () => { }) return ( -
+