navvy fixed, new illustrations, page styling on mobile

components/ContentSection.tsx

@@ -6,10 +6,10 @@ const ContentSection = () => {
     <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">
         <div className="max-w-5xl mx-auto text-center">
-          <h2 className="mb-8 text-4xl lg:text-5xl text-white font-bold font-heading">
+          <h2 className="mb-8 text-3xl md:text-4xl lg:text-4xl text-white font-bold font-heading">
             It is still the early days.
           </h2>
-          <p className="mb-8 text-2xl text-white text-opacity-50">
+          <p className="mb-8 text-xl md:text-2xl lg: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.
@@ -24,7 +24,7 @@ const ContentSection = () => {
               <div className="relative md:p-6">
                 <div className="lg:grid lg:grid-cols-2 lg:gap-6">
                   <div className="lg:max-w-none">
-                    <h2 className="text-3xl mb-6 leading-tight font-semibold font-heading">
+                    <h2 className="text-2xl mb-6 leading-tight font-semibold font-heading">
                       What is Mango?
                     </h2>
                     <p className="mb-8 text-lg text-white text-opacity-50 leading-relaxed">
@@ -35,7 +35,7 @@ const ContentSection = () => {
                       products for traders.
                     </p>
 
-                    <h2 className="text-3xl mb-6 leading-tight font-semibold font-heading">
+                    <h2 className="text-2xl mb-6 leading-tight font-semibold font-heading">
                       Why the <GradientText>Insurance fund</GradientText>?
                     </h2>
                     <p className="mb-8 text-lg text-white text-opacity-50 leading-relaxed">
@@ -47,7 +47,7 @@ const ContentSection = () => {
                   </div>
 
                   <div className="mt-6 lg:mt-0">
-                    <h2 className="text-3xl mb-6 leading-tight font-semibold font-heading">
+                    <h2 className="text-2xl mb-6 leading-tight font-semibold font-heading">
                       What is the <GradientText>$MNGO</GradientText> token?
                     </h2>
                     <p className="mb-8 text-lg text-white text-opacity-50 leading-relaxed">
@@ -77,10 +77,10 @@ const ContentSection = () => {
 
         {/* Section 2 */}
         <div className="max-w-4xl mb-12 mx-auto text-center">
-          <h2 className="mb-8 text-4xl lg:text-5xl text-white font-bold font-heading">
+          <h2 className="mb-8 text-3xl md:text-4xl lg:text-4xl text-white font-bold font-heading">
             How it works.
           </h2>
-          <p className="mb-8 text-2xl text-white text-opacity-50">
+          <p className="mb-8 text-xl md:text-2xl lg:text-2xl text-white text-opacity-50">
             We take the view that token sales should be simple, transparent and
             minimize randomness and luck in the distribution.
           </p>

components/ContributionModal.tsx

@@ -165,8 +165,8 @@ const ContributionModal = () => {
 
   return (
     <>
-      <div className="flex flex-wrap lg:flex-row justify-center">
+      <div className="flex flex-wrap md:flex-row lg:flex-row justify-center">
-        <div className="flex flex-col max-w-3xl bg-bkg-2 border border-bkg-3 p-7 rounded-lg shadow-md">
+        <div className="flex-1 flex-col bg-bkg-2 border border-bkg-3 p-7 rounded-lg shadow-md">
           <div className="pb-4 text-center">
             {!submitted &&
               !submitting &&
@@ -331,7 +331,7 @@ const ContributionModal = () => {
           )}
         </div>
 
-        <div className="flex flex-col m-3 bg-gradient-to-br from-secondary-4-dark to-secondary-4-light border border-bkg-3 p-7 rounded-lg shadow-md">
+        <div className="w-full flex flex-col m-3 bg-gradient-to-br from-secondary-4-dark to-secondary-4-light border border-bkg-3 p-7 rounded-lg shadow-md">
           <div className="border-b border-bkg-4 pb-4 text-center">
             <p className="text-fgd-3">Estimated Token Price</p>
             <div className="flex items-center justify-center pt-0.5">

components/HeroSection.tsx

@@ -2,14 +2,14 @@ import GradientText from './GradientText'
 const HeroSection = () => {
   return (
     <section className="">
-      <div className="container px-4 mx-auto">
+      <div className="container px-8 mx-auto">
         <div className="relative pt-16 md:pt-32 pb-2">
-          <div className="max-w-2xl mb-16 mx-auto text-center">
+          <div className="max-w-2xl mb-16 mx-auto text-left md:text-center lg:text-center">
-            <h2 className="mb-8 text-4xl lg:text-5xl text-white font-bold font-heading">
+            <h2 className="mb-8 text-3xl md:text-4xl lg:text-4xl text-white font-bold font-heading">
               Join the <GradientText>Mango DAO</GradientText> and help build the
               ecosystem.
             </h2>
-            <p className="mb-8 text-2xl text-white text-opacity-50">
+            <p className="mb-8 text-xl md:text-2xl lg:text-2xl text-white text-opacity-50">
               The Mango DAO is an experiment in self governance that aims to
               build a completely decentralzied financial ecosystem.
             </p>

components/ModalSection.tsx

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

components/NavBarBeta.tsx

@@ -43,7 +43,7 @@ const NavBarBeta = () => {
   return (
     <div className="">
       {/* Main Menu */}
-      <div className="lg:px-10 lg:py-8 xs:px-6 xs:py-1 bg-transparent">
+      <div className=" px-6 py-1 lg:px-10 lg:py-8 bg-transparent">
         <div className="max-w-7xl mx-auto px-4 sm:px-6">
           <div className="flex justify-between items-center py-6 md:justify-start md:space-x-10">
             <div className="flex justify-start lg:w-0 lg:flex-1">