fading slowly

components/ContentSection.tsx

@@ -1,7 +1,7 @@
 import Button from './Button'
 import GradientText from './GradientText'
 
-const LandingContent = () => {
+const ContentSection = () => {
   return (
     <div className="bg-bkg-2 transform -skew-y-3 pt-12 pb-16 mb-16 -mt-32 z-0">
       <div className="max-w-7xl mx-auto px-4 py-40 transform skew-y-3">
@@ -207,4 +207,4 @@ const LandingContent = () => {
   )
 }
 
-export default LandingContent
+export default ContentSection

components/ContributionModal.tsx

@@ -150,7 +150,7 @@ const ContributionModal = () => {
 
   return (
     <>
-      <div className="bg-bkg-2 border border-bkg-3 col-span-7 p-7 rounded-lg shadow-lg">
+      <div className="bg-bkg-2 border border-bkg-3 col-span-6 p-7 rounded-lg shadow-md">
         <div className="pb-4 text-center">
           {!submitted && !submitting && !editContribution ? (
             <>

components/ModalSection.tsx

@@ -0,0 +1,23 @@
+import ContributionModal from "./ContributionModal"
+
+const ModalSection = () => {
+  return (
+    <>
+      <div className="w-screen">
+        <div className="max-w-5xl mx-auto text-center">
+          <h2 className="mb-8 text-4xl lg:text-5xl text-white font-bold font-heading">
+            It is still the early days.
+          </h2>
+          <p className="mb-8 text-2xl text-white text-opacity-50">
+            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.
+          </p>
+        </div>
+      </div>
+      <ContributionModal />
+      </>
+  )
+}
+
+export default ModalSection

pages/ContributionPage.tsx

@@ -1,17 +1,17 @@
-import ContributionModal from '../components/ContributionModal'
+import ModalSection from '../components/ModalSection'
 import PoolInfoCards from '../components/PoolInfoCards'
 import HeroSection from '../components/HeroSection'
-import LandingContent from '../components/LandingContent'
+import ContentSection from '../components/ContentSection'
 
 const ContributionPage = () => {
   return (
     <>
       <HeroSection />
       <PoolInfoCards />
-      <LandingContent />
+      <ContentSection />
       <div className="flex justify-center">
         <div className="max-w-screen-md grid grid-cols-12 gap-4 w-full">
-          <ContributionModal />
+          <ModalSection />
         </div>
       </div>
     </>