2021-08-09 10:59:35 -07:00
|
|
|
import { ChevronDownIcon } from '@heroicons/react/solid'
|
2021-07-08 00:50:33 -07:00
|
|
|
import GradientText from './GradientText'
|
2021-07-23 15:50:11 -07:00
|
|
|
import Button from './Button'
|
|
|
|
|
2021-07-29 06:26:16 -07:00
|
|
|
function scrollToId(id: string) {
|
|
|
|
const element = document.getElementById(id)
|
|
|
|
const y = element.getBoundingClientRect().top + window.scrollY
|
|
|
|
window.scroll({
|
|
|
|
top: y,
|
|
|
|
behavior: 'smooth',
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
2021-07-07 04:57:00 -07:00
|
|
|
const HeroSection = () => {
|
|
|
|
return (
|
2021-07-16 17:56:26 -07:00
|
|
|
<section className="">
|
2021-07-23 15:50:11 -07:00
|
|
|
<div className="max-w-6xl px-8 mx-auto">
|
2021-07-22 00:20:46 -07:00
|
|
|
<div className="relative pt-16 md:pt-32 pb-2">
|
2021-07-23 15:50:11 -07:00
|
|
|
<div className="mb-8 mx-auto text-left md:text-center lg:text-center">
|
2021-07-27 14:17:25 -07:00
|
|
|
<h2 className="mb-4 text-3xl md:text-5xl lg:text-5xl text-white font-bold font-heading">
|
2021-07-27 15:16:34 -07:00
|
|
|
Claim your stake in the <GradientText>Mango DAO</GradientText>.
|
2021-07-20 07:09:59 -07:00
|
|
|
</h2>
|
2021-07-27 15:16:34 -07:00
|
|
|
<p className="text-xl md:text-2xl lg:text-2xl text-white text-opacity-70">
|
2021-07-28 00:39:59 -07:00
|
|
|
Join us in building Mango, the protocol for permissionless
|
|
|
|
leverage trading & lending.
|
2021-07-20 07:09:59 -07:00
|
|
|
</p>
|
2021-07-07 04:57:00 -07:00
|
|
|
</div>
|
2021-08-09 10:59:35 -07:00
|
|
|
<div className="mb-16 flex flex-col items-center">
|
|
|
|
<a className="mb-6" onClick={() => scrollToId('contribute')}>
|
|
|
|
<Button>Contribute Now</Button>
|
2021-07-24 06:19:16 -07:00
|
|
|
</a>
|
2021-08-09 10:59:35 -07:00
|
|
|
<a
|
|
|
|
className="cursor-pointer flex flex-col items-center text-fgd-1 hover:underline"
|
|
|
|
onClick={() => scrollToId('about')}
|
|
|
|
>
|
|
|
|
<div>Learn More</div>
|
|
|
|
<ChevronDownIcon className="h-5 w-5" />
|
2021-07-24 06:19:16 -07:00
|
|
|
</a>
|
|
|
|
</div>
|
2021-07-07 04:57:00 -07:00
|
|
|
</div>
|
2021-07-20 07:09:59 -07:00
|
|
|
</div>
|
|
|
|
</section>
|
2021-07-07 04:57:00 -07:00
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default HeroSection
|