format a bunch

components/FooterSection.tsx

@@ -5,23 +5,38 @@ const FooterSection = () => {
     <div className="bg-bg-texture bg-cover bg-bottom bg-no-repeat">
       <div className="max-w-7xl mx-auto ">
         <section className="py-8 px-4">
-          
           <div className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
             <h2 className="inline text-3xl font-extrabold sm:block sm:text-4xl">
-                Want product news and updates? <span className="text-transparent bg-clip-text bg-gradient-to-r from-mango-red via-mango-yellow to-mango-green sm:block sm:text-4xl">Sign up for our newsletter.</span>
+              Want product news and updates?{' '}
+              <span className="text-transparent bg-clip-text bg-gradient-to-r from-mango-red via-mango-yellow to-mango-green sm:block sm:text-4xl">
+                Sign up for our newsletter.
+              </span>
             </h2>
 
             <form className="mt-8 sm:flex">
               <label className="sr-only">Email address</label>
-                <input id="email-address" name="email" type="email" autoComplete="email" required className="w-full px-5 py-3 placeholder-gray-500 focus:ring-indigo-500 focus:border-indigo-500 sm:max-w-xs border-gray-300 rounded-full" placeholder="Enter your email"/>
+              <input
+                id="email-address"
+                name="email"
+                type="email"
+                autoComplete="email"
+                required
+                className="w-full px-5 py-3 placeholder-gray-500 focus:ring-indigo-500 focus:border-indigo-500 sm:max-w-xs border-gray-300 rounded-full"
+                placeholder="Enter your email"
+              />
               <div className="mt-3 rounded-md shadow sm:mt-0 sm:ml-3 sm:flex-shrink-0 sm:relative sm:-left-16">
-                  <button type="submit" className="w-full flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-full text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                <button
+                  type="submit"
+                  className="w-full flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-full text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+                >
                   Sign me up!
                 </button>
               </div>
             </form>
             <div className="w-full mt-4">
-                    <p className="text-xl text-gray-400">We promise to never spam and only send alpha.</p>
+              <p className="text-xl text-gray-400">
+                We promise to never spam and only send alpha.
+              </p>
             </div>
           </div>
         </section>

components/LandingContent.tsx

@@ -127,15 +127,28 @@ const LandingContent = () => {
                     </p>
                     <div className="flex flex-wrap overflow-hiddenm mt-8">
                       <div className="w-full overflow-hidden lg:w-1/2 pr-4">
-                      <p><span className="text-th-green italic">Unrestricted</span></p>
-                      <p>During the unrestricted period users may deposit or withdraw their USDC from the vault. During the unrestricted period price can fluctuate.</p>
+                        <p>
+                          <span className="text-th-green italic">
+                            Unrestricted
+                          </span>
+                        </p>
+                        <p>
+                          During the unrestricted period users may deposit or
+                          withdraw their USDC from the vault. During the
+                          unrestricted period price can fluctuate.
+                        </p>
                       </div>
 
                       <div className="w-full overflow-hidden lg:w-1/2">
-                      <p><span className="text-th-red italic">Restricted</span></p>
-                      <p>After 24 hours deposits will be restricted and only withdrawals allowed. During the restricted period price can only goin down.</p>
+                        <p>
+                          <span className="text-th-red italic">Restricted</span>
+                        </p>
+                        <p>
+                          After 24 hours deposits will be restricted and only
+                          withdrawals allowed. During the restricted period
+                          price can only goin down.
+                        </p>
                       </div>
-
                     </div>
                   </div>
                 </div>

components/MangoPill.tsx

@@ -1,8 +1,12 @@
 const MangoPill = () => {
   return (
-    <div className="inline-flex items-center relative h-6 px-2 py-1 bg-gradient-to-br from-mango-red to-yellow-500
-     rounded-full lg:-top-3 md:-top-3 sm:-top-3 xs:top-2">
-      <p className="text-white text-xs uppercase font-bold tracking-widest subpixel-antialiased">Soon</p>
+    <div
+      className="inline-flex items-center relative h-6 px-2 py-1 bg-gradient-to-br from-mango-red to-yellow-500
+     rounded-full lg:-top-3 md:-top-3 sm:-top-3 xs:top-2"
+    >
+      <p className="text-white text-xs uppercase font-bold tracking-widest subpixel-antialiased">
+        Soon
+      </p>
     </div>
   )
 }

components/MangoSale.tsx

@@ -1,8 +1,12 @@
 const MangoSale = () => {
   return (
-    <div className="inline-flex items-center relative h-6 -top-4 px-2 py-1 bg-gradient-to-br from-mango-red to-yellow-500
-     rounded-full">
-      <p className="text-white text-xs uppercase font-bold tracking-widest subpixel-antialiased">Sale</p>
+    <div
+      className="inline-flex items-center relative h-6 -top-4 px-2 py-1 bg-gradient-to-br from-mango-red to-yellow-500
+     rounded-full"
+    >
+      <p className="text-white text-xs uppercase font-bold tracking-widest subpixel-antialiased">
+        Sale
+      </p>
     </div>
   )
 }