From 9a1c34d8d7c767368e18744ccd0404a2bb5493ac Mon Sep 17 00:00:00 2001
From: steven <sarmiento.steven@gmail.com>
Date: Sat, 24 Jul 2021 00:21:44 -0700
Subject: [PATCH] adding content

started adding some "More about the token" content
---
 components/ContentSection.tsx | 114 ++++++++++++++++++++++++++++++++--
 public/Icon-people.svg        |  34 ++++++++++
 public/Icon-sheild.svg        |   9 +++
 public/Icon-ticket.svg        |   9 +++
 4 files changed, 161 insertions(+), 5 deletions(-)
 create mode 100644 public/Icon-people.svg
 create mode 100644 public/Icon-sheild.svg
 create mode 100644 public/Icon-ticket.svg

diff --git a/components/ContentSection.tsx b/components/ContentSection.tsx
index 1ad47f8..3d5d1fc 100644
--- a/components/ContentSection.tsx
+++ b/components/ContentSection.tsx
@@ -50,17 +50,121 @@ const ContentSection = () => {
                     <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">
+                      Mango Governance tokens ($MNGO) will serve as the
+                      incentive for those who can prove their work is useful to
+                      the DAO.
+                    </p>
+                    <h2 className="text-2xl mb-6 leading-tight font-semibold font-heading">
+                      Why the token?
+                    </h2>
                     <p className="mb-8 text-lg text-white text-opacity-50 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.
                     </p>
-                    <p className="mb-8 text-lg text-white text-opacity-50 leading-relaxed">
-                      Mango Governance tokens ($MNGO) will serve as the
-                      incentive for those who can prove their work is useful to
-                      the DAO.
-                    </p>
+                    {/*
+                    <div className="flex flex-col">
+                      <div className="flex-1 flex-row">
+                        <div className="my-2">
+                        <svg 
+                        width="24" 
+                        height="26" 
+                        viewBox="0 0 16 18" 
+                        fill="none" 
+                        xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path fillRule="evenodd" clipRule="evenodd" d="M0.166107 3.99878C3.17437 3.95797 5.91528 2.81021 8 0.944336C10.0847 2.81021 12.8256 3.95797 15.8339 3.99878C15.9431 4.64956 16 5.31809 16 5.99991C16 11.2248 12.6608 15.6697 8 17.317C3.33923 15.6697 0 11.2248 0 5.99991C0 5.31809 0.0568637 4.64956 0.166107 3.99878ZM11.7071 7.70698C12.0976 7.31646 12.0976 6.6833 11.7071 6.29277C11.3166 5.90225 10.6834 5.90225 10.2929 6.29277L7 9.58566L5.70711 8.29277C5.31658 7.90225 4.68342 7.90225 4.29289 8.29277C3.90237 8.6833 3.90237 9.31646 4.29289 9.70698L6.29289 11.707C6.68342 12.0975 7.31658 12.0975 7.70711 11.707L11.7071 7.70698Z" fill="url(#paint0_linear)"/>
+                          <defs>
+                            <linearGradient id="paint0_linear" x1="-28" y1="-6" x2="26" y2="23" gradientUnits="userSpaceOnUse">
+                              <stop stopColor="#E54033"/>
+                              <stop offset="1" stopColor="#FECA1A"/>
+                            </linearGradient>
+                          </defs>
+                        </svg>
+                        </div>
+                        <h3>
+                        Insurance Fund 
+                        </h3>
+                        <p> The insurance fund protects lenders funds from over zealous traders and borrowers.
+                        </p>
+                      </div>
+                      <div className="flex-1 flex-row ">
+                      <div className="my-2">
+                      <svg 
+                        width="24" 
+                        height="21" 
+                        viewBox="0 0 18 15" 
+                        fill="none" 
+                        xmlns="http://www.w3.org/2000/svg">
+                          <path d="M12 3C12 4.65685 10.6569 6 9 6C7.34315 6 6 4.65685 6 3C6 1.34315 7.34315 0 9 0C10.6569 0 12 1.34315 12 3Z" fill="url(#paint0_linear)"/>
+                          <path d="M17 5C17 6.10457 16.1046 7 15 7C13.8954 7 13 6.10457 13 5C13 3.89543 13.8954 3 15 3C16.1046 3 17 3.89543 17 5Z" fill="url(#paint1_linear)"/>
+                          <path d="M13 12C13 9.79086 11.2091 8 9 8C6.79086 8 5 9.79086 5 12V15H13V12Z" fill="url(#paint2_linear)"/>
+                          <path d="M5 5C5 6.10457 4.10457 7 3 7C1.89543 7 1 6.10457 1 5C1 3.89543 1.89543 3 3 3C4.10457 3 5 3.89543 5 5Z" fill="url(#paint3_linear)"/>
+                          <path d="M15 15V12C15 10.9459 14.7282 9.9552 14.2507 9.09432C14.4902 9.03275 14.7413 9 15 9C16.6569 9 18 10.3431 18 12V15H15Z" fill="url(#paint4_linear)"/>
+                          <path d="M3.74926 9.09432C3.27185 9.9552 3 10.9459 3 12V15H0V12C0 10.3431 1.34315 9 3 9C3.25871 9 3.50977 9.03275 3.74926 9.09432Z" fill="url(#paint5_linear)"/>
+                            <defs>
+                              <linearGradient id="paint0_linear" x1="-14" y1="-3.89417e-07" x2="9" y2="15" gradientUnits="userSpaceOnUse">
+                                <stop stopColor="#E54033"/>
+                                <stop offset="1" stopColor="#FECA1A"/>
+                              </linearGradient>
+                              <linearGradient id="paint1_linear" x1="-14" y1="-3.89417e-07" x2="9" y2="15" gradientUnits="userSpaceOnUse">
+                                <stop stopColor="#E54033"/>
+                                <stop offset="1" stopColor="#FECA1A"/>
+                              </linearGradient>
+                              <linearGradient id="paint2_linear" x1="-14" y1="-3.89417e-07" x2="9" y2="15" gradientUnits="userSpaceOnUse">
+                                <stop stopColor="#E54033"/>
+                                <stop offset="1" stopColor="#FECA1A"/>
+                              </linearGradient>
+                              <linearGradient id="paint3_linear" x1="-14" y1="-3.89417e-07" x2="9" y2="15" gradientUnits="userSpaceOnUse">
+                                <stop stopColor="#E54033"/>
+                                <stop offset="1" stopColor="#FECA1A"/>
+                              </linearGradient>
+                              <linearGradient id="paint4_linear" x1="-14" y1="-3.89417e-07" x2="9" y2="15" gradientUnits="userSpaceOnUse">
+                                <stop stopColor="#E54033"/>
+                                <stop offset="1" stopColor="#FECA1A"/>
+                              </linearGradient>
+                              <linearGradient id="paint5_linear" x1="-14" y1="-3.89417e-07" x2="9" y2="15" gradientUnits="userSpaceOnUse">
+                                <stop stopColor="#E54033"/>
+                                <stop offset="1" stopColor="#FECA1A"/>
+                              </linearGradient>
+                            </defs>
+                      </svg>
+                      </div>
+                        <h3 className="my-2">
+                        Governance 
+                        </h3>
+                        <p>
+                        The Mango DAO is a decetralized organization, protocol changes are contributor driven and DAO governed.
+                        </p>
+                      </div>
+                      <div className="flex-1 flex-row">
+                      <div className="my-2">
+                      <svg 
+                        width="24" 
+                        height="20" 
+                        viewBox="0 0 16 12" 
+                        fill="none" 
+                        xmlns="http://www.w3.org/2000/svg">
+                          <path d="M0 2C0 0.895431 0.895431 0 2 0H14C15.1046 0 16 0.895431 16 2V4C14.8954 4 14 4.89543 14 6C14 7.10457 14.8954 8 16 8V10C16 11.1046 15.1046 12 14 12H2C0.895431 12 0 11.1046 0 10V8C1.10457 8 2 7.10457 2 6C2 4.89543 1.10457 4 0 4V2Z" fill="url(#paint0_linear)"/>
+                            <defs>
+                              <linearGradient id="paint0_linear" x1="-16.5" y1="3.08733e-07" x2="25" y2="10.5" gradientUnits="userSpaceOnUse">
+                                <stop stopColor="#E54033"/>
+                                <stop offset="1" stopColor="#FECA1A"/>
+                              </linearGradient>
+                            </defs>
+                        </svg>
+                        </div>
+                        <h3 className="my-2">
+                        Liquidity Incentives 
+                        </h3>
+                        <p> 
+                          In order to bootstrap liquidity for our markets we have designed a system well aligned with liquidity providers needs
+                        </p>
+                      </div>
+                    </div>
+                    */}
                     <Button>Check out the whitepaper</Button>
 
                     <p className="text-white leading-relaxed py-4">
diff --git a/public/Icon-people.svg b/public/Icon-people.svg
new file mode 100644
index 0000000..ff1469b
--- /dev/null
+++ b/public/Icon-people.svg
@@ -0,0 +1,34 @@
+<svg width="18" height="15" viewBox="0 0 18 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 3C12 4.65685 10.6569 6 9 6C7.34315 6 6 4.65685 6 3C6 1.34315 7.34315 0 9 0C10.6569 0 12 1.34315 12 3Z" fill="url(#paint0_linear)"/>
+<path d="M17 5C17 6.10457 16.1046 7 15 7C13.8954 7 13 6.10457 13 5C13 3.89543 13.8954 3 15 3C16.1046 3 17 3.89543 17 5Z" fill="url(#paint1_linear)"/>
+<path d="M13 12C13 9.79086 11.2091 8 9 8C6.79086 8 5 9.79086 5 12V15H13V12Z" fill="url(#paint2_linear)"/>
+<path d="M5 5C5 6.10457 4.10457 7 3 7C1.89543 7 1 6.10457 1 5C1 3.89543 1.89543 3 3 3C4.10457 3 5 3.89543 5 5Z" fill="url(#paint3_linear)"/>
+<path d="M15 15V12C15 10.9459 14.7282 9.9552 14.2507 9.09432C14.4902 9.03275 14.7413 9 15 9C16.6569 9 18 10.3431 18 12V15H15Z" fill="url(#paint4_linear)"/>
+<path d="M3.74926 9.09432C3.27185 9.9552 3 10.9459 3 12V15H0V12C0 10.3431 1.34315 9 3 9C3.25871 9 3.50977 9.03275 3.74926 9.09432Z" fill="url(#paint5_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="-14" y1="-3.89417e-07" x2="9" y2="15" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E54033"/>
+<stop offset="1" stop-color="#FECA1A"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="-14" y1="-3.89417e-07" x2="9" y2="15" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E54033"/>
+<stop offset="1" stop-color="#FECA1A"/>
+</linearGradient>
+<linearGradient id="paint2_linear" x1="-14" y1="-3.89417e-07" x2="9" y2="15" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E54033"/>
+<stop offset="1" stop-color="#FECA1A"/>
+</linearGradient>
+<linearGradient id="paint3_linear" x1="-14" y1="-3.89417e-07" x2="9" y2="15" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E54033"/>
+<stop offset="1" stop-color="#FECA1A"/>
+</linearGradient>
+<linearGradient id="paint4_linear" x1="-14" y1="-3.89417e-07" x2="9" y2="15" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E54033"/>
+<stop offset="1" stop-color="#FECA1A"/>
+</linearGradient>
+<linearGradient id="paint5_linear" x1="-14" y1="-3.89417e-07" x2="9" y2="15" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E54033"/>
+<stop offset="1" stop-color="#FECA1A"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/public/Icon-sheild.svg b/public/Icon-sheild.svg
new file mode 100644
index 0000000..b69b013
--- /dev/null
+++ b/public/Icon-sheild.svg
@@ -0,0 +1,9 @@
+<svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.166107 3.99878C3.17437 3.95797 5.91528 2.81021 8 0.944336C10.0847 2.81021 12.8256 3.95797 15.8339 3.99878C15.9431 4.64956 16 5.31809 16 5.99991C16 11.2248 12.6608 15.6697 8 17.317C3.33923 15.6697 0 11.2248 0 5.99991C0 5.31809 0.0568637 4.64956 0.166107 3.99878ZM11.7071 7.70698C12.0976 7.31646 12.0976 6.6833 11.7071 6.29277C11.3166 5.90225 10.6834 5.90225 10.2929 6.29277L7 9.58566L5.70711 8.29277C5.31658 7.90225 4.68342 7.90225 4.29289 8.29277C3.90237 8.6833 3.90237 9.31646 4.29289 9.70698L6.29289 11.707C6.68342 12.0975 7.31658 12.0975 7.70711 11.707L11.7071 7.70698Z" fill="url(#paint0_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="-28" y1="-6" x2="26" y2="23" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E54033"/>
+<stop offset="1" stop-color="#FECA1A"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/public/Icon-ticket.svg b/public/Icon-ticket.svg
new file mode 100644
index 0000000..f7560b1
--- /dev/null
+++ b/public/Icon-ticket.svg
@@ -0,0 +1,9 @@
+<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 2C0 0.895431 0.895431 0 2 0H14C15.1046 0 16 0.895431 16 2V4C14.8954 4 14 4.89543 14 6C14 7.10457 14.8954 8 16 8V10C16 11.1046 15.1046 12 14 12H2C0.895431 12 0 11.1046 0 10V8C1.10457 8 2 7.10457 2 6C2 4.89543 1.10457 4 0 4V2Z" fill="url(#paint0_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="-16.5" y1="3.08733e-07" x2="25" y2="10.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E54033"/>
+<stop offset="1" stop-color="#FECA1A"/>
+</linearGradient>
+</defs>
+</svg>