add landing content
This commit is contained in:
parent
3f25432fed
commit
15744e9118
|
@ -0,0 +1,98 @@
|
||||||
|
const LandingContent = () => {
|
||||||
|
return (
|
||||||
|
<div className="bg-th-bkg-3 transform -skew-y-3 pt-12 md:pt-48 pb-32 lg:pb-48 mb-48 lg:mb-48 -mt-64">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 py-80 transform skew-y-3">
|
||||||
|
<div className="max-w-4xl mb-16 mx-auto text-center">
|
||||||
|
<h2 className="mb-8 text-3xl lg:text-4xl text-white font-bold font-heading">
|
||||||
|
It is still the early days.
|
||||||
|
</h2>
|
||||||
|
<p className="mb-8 text-m lg:text-l text-gray-400">
|
||||||
|
This is the first moment for non-developers to participate in the
|
||||||
|
Mango DAO.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Section 1 */}
|
||||||
|
<div className="flex flex-wrap overflow-hidden xl:-mx-4">
|
||||||
|
<div className="w-full overflow-hidden xl:my-4 xl:px-16 xl:w-1/2">
|
||||||
|
<h2 className="text-3xl mb-6 leading-tight font-semibold font-heading">
|
||||||
|
What is Mango?
|
||||||
|
</h2>
|
||||||
|
<p className="mb-8 text-gray-400 leading-relaxed">
|
||||||
|
Mango is a decentralized autonomous organization. Its purpose is
|
||||||
|
to create a well integrated and completely decentralized financial
|
||||||
|
ecosystem for traders.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 className="text-3xl mb-6 leading-tight font-semibold font-heading">
|
||||||
|
What is the Insurance Fund?
|
||||||
|
</h2>
|
||||||
|
<p className="mb-8 text-gray-400 leading-relaxed">
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="w-full overflow-hidden xl:my-4 xl:px-16 xl:w-1/2">
|
||||||
|
<h2 className="text-3xl mb-6 leading-tight font-semibold font-heading">
|
||||||
|
What is the{' '}
|
||||||
|
<span className="text-transparent bg-clip-text bg-gradient-to-r from-red-400 via-yellow-300 to-green-300">
|
||||||
|
$MNGO
|
||||||
|
</span>{' '}
|
||||||
|
token?
|
||||||
|
</h2>
|
||||||
|
<p className="mb-8 text-gray-400 leading-relaxed">
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
<button
|
||||||
|
className="inline-flex items-center px-8 py-2 text-lg text-white font-bold bg-gradient-to-br from-yellow-200 via-lime-400 to-green-500 hover:bg-blue-600 rounded-full transition duration-200"
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
<span className="pr-4">Check out the whitepaper</span>
|
||||||
|
<svg
|
||||||
|
width="9"
|
||||||
|
height="16"
|
||||||
|
viewBox="0 0 9 16"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M1 1.6665L7.8963 7.99984L1 14.3332"
|
||||||
|
stroke="white"
|
||||||
|
stroke-width="3"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<p className="text-white leading-relaxed py-4">
|
||||||
|
<span className="text-yellow-300">$MNGO</span> tokens were until
|
||||||
|
now only provided to contributors who helped to build out the
|
||||||
|
protocol.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Section 2 */}
|
||||||
|
<div className="max-w-4xl mb-16 mx-auto text-center">
|
||||||
|
<h2 className="mb-8 text-3xl lg:text-4xl text-white font-bold font-heading">
|
||||||
|
How does it work?
|
||||||
|
</h2>
|
||||||
|
<p className="mb-8 text-m lg:text-l text-gray-400">
|
||||||
|
This is not a regular token sale, you are not about to invest for a
|
||||||
|
juicy ROI on day 1.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default LandingContent
|
|
@ -3,6 +3,7 @@ import TopBar from '../components/TopBar'
|
||||||
import ContributionModal from '../components/ContributionModal'
|
import ContributionModal from '../components/ContributionModal'
|
||||||
import PoolInfoCards from '../components/PoolInfoCards'
|
import PoolInfoCards from '../components/PoolInfoCards'
|
||||||
import HeroSection from '../components/HeroSection'
|
import HeroSection from '../components/HeroSection'
|
||||||
|
import LandingContent from '../components/LandingContent'
|
||||||
|
|
||||||
const Index = () => {
|
const Index = () => {
|
||||||
return (
|
return (
|
||||||
|
@ -12,6 +13,7 @@ const Index = () => {
|
||||||
|
|
||||||
<HeroSection />
|
<HeroSection />
|
||||||
<PoolInfoCards />
|
<PoolInfoCards />
|
||||||
|
<LandingContent />
|
||||||
<div className="flex justify-center">
|
<div className="flex justify-center">
|
||||||
<div className="max-w-screen-md grid grid-cols-12 gap-4 w-full">
|
<div className="max-w-screen-md grid grid-cols-12 gap-4 w-full">
|
||||||
<ContributionModal />
|
<ContributionModal />
|
||||||
|
|
Loading…
Reference in New Issue