add some gradients to the layout

components/GradientText.tsx

@@ -0,0 +1,7 @@
+const GradientText = (props) => (
+  <span className="text-transparent bg-clip-text bg-gradient-to-r from-red-400 via-yellow-300 to-green-300">
+    {props.children}
+  </span>
+)
+
+export default GradientText

components/HeroSection.tsx

@@ -1,3 +1,5 @@
+import GradientText from './GradientText'
+
 const HeroSection = () => {
   return (
     <section className="bg-hero-img bg-no-repeat bg-cover">
@@ -5,7 +7,7 @@ const HeroSection = () => {
         <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
+              Join the <GradientText>Mango DAO</GradientText>
             </h2>
             <p className="md:mx-24">
               The Mango DAO is an experiment in self governance to merge the

components/LandingContent.tsx

@@ -1,3 +1,6 @@
+import { ChevronRightIcon } from '@heroicons/react/solid'
+import GradientText from './GradientText'
+
 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">
@@ -38,45 +41,27 @@ const LandingContent = () => {
 
           <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{' '}
+              What is the <GradientText>$MNGO</GradientText> token?
-              <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.
+              who can proove their work is useful to the DAO. So far tokens were
+              until now only provided to contributors who helped to build out
+              the protocol.
             </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"
+              className="inline-flex items-center px-2 py-2 pr-4 text-lg text-white font-bold rounded-xl"
-              href="#"
+              style={{ backgroundColor: 'rgba(44, 41, 66, 1)' }}
             >
-              <span className="pr-4">Check out the whitepaper</span>
+              <div className="m-2 p-2 rounded-full bg-opacity-10 bg-white">
-              <svg
+                <img alt="paper" width="10" height="9" src="/icons/paper.svg" />
-                width="9"
+              </div>
-                height="16"
+              Check out the whitepaper &nbsp;
-                viewBox="0 0 9 16"
+              <ChevronRightIcon className="w-6 h-6" />
-                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>
 

public/icons/paper.svg

@@ -0,0 +1,16 @@
+<svg width="12" height="16" viewBox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.99951 0C4.44723 0 3.99951 0.447715 3.99951 1C3.99951 1.55228 4.44723 2 4.99951 2H6.99951C7.5518 2 7.99951 1.55228 7.99951 1C7.99951 0.447715 7.5518 0 6.99951 0H4.99951Z" fill="url(#paint0_linear)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M-0.000488281 3C-0.000488281 1.89543 0.894942 1 1.99951 1C1.99951 2.65685 3.34266 4 4.99951 4H6.99951C8.65637 4 9.99951 2.65685 9.99951 1C11.1041 1 11.9995 1.89543 11.9995 3V14C11.9995 15.1046 11.1041 16 9.99951 16H1.99951C0.894943 16 -0.000488281 15.1046 -0.000488281 14V3ZM2.99951 7C2.44723 7 1.99951 7.44772 1.99951 8C1.99951 8.55229 2.44723 9 2.99951 9H3.00951C3.5618 9 4.00951 8.55229 4.00951 8C4.00951 7.44772 3.5618 7 3.00951 7H2.99951ZM5.99951 7C5.44723 7 4.99951 7.44772 4.99951 8C4.99951 8.55229 5.44723 9 5.99951 9H8.99951C9.5518 9 9.99951 8.55229 9.99951 8C9.99951 7.44772 9.5518 7 8.99951 7H5.99951ZM2.99951 11C2.44723 11 1.99951 11.4477 1.99951 12C1.99951 12.5523 2.44723 13 2.99951 13H3.00951C3.5618 13 4.00951 12.5523 4.00951 12C4.00951 11.4477 3.5618 11 3.00951 11H2.99951ZM5.99951 11C5.44723 11 4.99951 11.4477 4.99951 12C4.99951 12.5523 5.44723 13 5.99951 13H8.99951C9.5518 13 9.99951 12.5523 9.99951 12C9.99951 11.4477 9.5518 11 8.99951 11H5.99951Z" fill="url(#paint1_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="-4.00049" y1="-0.5" x2="12.4995" y2="16.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E54033"/>
+<stop offset="0.526042" stop-color="#FECA1A"/>
+<stop offset="1" stop-color="#AFD803"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="-4.00049" y1="-0.5" x2="12.4995" y2="16.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E54033"/>
+<stop offset="0.526042" stop-color="#FECA1A"/>
+<stop offset="1" stop-color="#AFD803"/>
+</linearGradient>
+</defs>
+</svg>