add hero section

components/HeroSection.tsx

@@ -0,0 +1,23 @@
+const HeroSection = () => {
+  return (
+    <section className="bg-hero-img bg-no-repeat bg-cover">
+      <div className="container px-4 mx-auto">
+        <div className="relative pt-32 mb-32">
+          <div className="max-w-2xl mx-auto text-center">
+            <h2 className="mb-8 text-4xl lg:text-5xl text-white font-bold font-heading">
+              Join the Mango DAO
+            </h2>
+            <p className="md:mx-24">
+              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.
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default HeroSection

pages/index.tsx

@@ -2,6 +2,7 @@ import Notifications from '../components/Notification'
 import TopBar from '../components/TopBar'
 import ContributionModal from '../components/ContributionModal'
 import PoolInfoCards from '../components/PoolInfoCards'
+import HeroSection from '../components/HeroSection'
 
 const Index = () => {
   return (
@@ -9,6 +10,7 @@ const Index = () => {
       <TopBar />
       <Notifications />
 
+      <HeroSection />
       <PoolInfoCards />
       <div className="flex justify-center">
         <div className="max-w-screen-md grid grid-cols-12 gap-4 w-full">