Merge pull request cristinalare#20 from cristinalare/feat/add-book

feat: move local regen guide book under bonus book content

Author: cristinalare

index.html

@@ -312,8 +312,8 @@ <h2 class="font-volkhov text-xl lg:text-3xl text-yellow text-center mb-8">Learn
               the world.</p>
           </div>
         </div>
-        
-        
+
+
         <div class="flex gap-6 xl:gap-[5%] justify-center relative">
           <!-- greenpill book -->
           <div class="flex flex-col items-center">
@@ -346,12 +346,13 @@ <h2 class="font-volkhov text-xl lg:text-3xl text-yellow text-center mb-8">Learn
                       data-link="https://www.blurb.com/b/11078160-greenpilled-regenerative-cryptoeconomics">
                       Hardcover
                     </a>
-                    <a class="link !font-bold dropdown-btn-option" data-link="https://www.youtube.com/watch?v=7m0ufzqju_4&t=1s">
+                    <a class="link !font-bold dropdown-btn-option"
+                      data-link="https://www.youtube.com/watch?v=7m0ufzqju_4&t=1s">
                       Audiobook
                     </a>
                   </div>
                 </div>
-        
+
                 <a class="dropdown-btn-shop" href="./pdf/green-pill.pdf" target="_blank">
                   <button class="primary">Get it (free)</button>
                 </a>
@@ -572,6 +573,43 @@ <h2 class="font-volkhov text-xl lg:text-3xl text-yellow text-center mb-8">Learn
               </div>
             </div>
           </div>
+
+          <!--  -->
+          <div class="flex xl:gap-10 gap-4 items-center flex-col xl:pt-16 pt-6">
+            <div style="max-width: 700px;">
+              <p class="text-center mb-2"><span class="font-bold">Local regen guide</span> is focused on teaching
+                engaging new ways to regenerate your local community. We expect these
+                guides to be pivotal in cross-pollinating engagement modalities across chapters.
+              </p>
+            </div>
+          </div>
+
+          <div class="flex gap-6 xl:gap-[5%] justify-center relative">
+            <!-- local regen guide -->
+            <div class="flex flex-col items-center">
+              <img src="./src/images/local-regen-guide.jpeg" width="1000" height="1409"
+                style="border: 1px solid var(--yellow);"
+                class="mb-4 w-auto max-h-[230px] 2xl:w-[244px] 2xl:h-[300px] 2xl:max-h-none" alt="Local Regen Guide" />
+              <div>
+                <div class="flex gap-4 justify-center items-start mb-3 xl:flex-row flex-col">
+                  <div
+                    class="relative border border-green rounded-[20px] transition-all duration-300 dropdown-btn divide-y divide-green flex flex-col">
+                    <button class="secondary !border-none flex gap-4 justify-between items-center pointer-events-none">
+                      <span class="dropdown-btn-selected" data-link="/pdf/local-regen-guide.pdf">
+                        Ebook
+                      </span>
+                    </button>
+
+                  </div>
+
+                  <a class="dropdown-btn-shop" href="/pdf/local-regen-guide.pdf" target="_blank">
+                    <button class="primary">Get it (free)</button>
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+
         </div>
       </div>
     </section>
@@ -618,37 +656,6 @@ <h2 class="font-volkhov text-xl lg:text-3xl text-yellow">Learn > podcast </h2>
       </div>
     </section>
 
-    <!-- regen guides -->
-    <section id="regenguides" class="transition-opacity duration-500 x-100 sm:min-h-screen relative">
-      <div
-        class="pb-24 pt-12 max-w-3xl sm:min-h-screen flex gap-4 sm:gap-[10%] items-center justify-center m-auto flex-col sm:flex-row">
-        <!-- parallax bg elements -->
-        <img data-speed="-1.5" data-movex="500" src="./src/images/background/bg-el1.png" width="100" height="100" alt=""
-          class="absolute z-0 top-[50vh] parallax-bg" />
-        <img data-speed="-1.3" data-movex="400" src="./src/images/background/bg-el3.png" width="60" height="120" alt=""
-          class="absolute z-0 top-[10vh] left-[15vw] parallax-bg" />
-        <img data-speed="-1.1" data-movex="-300" src="./src/images/background/bg-el2.png" width="100" height="100"
-          alt="" class="absolute z-0 top-[70vh] right-0 parallax-bg" />
-
-        <div class="flex flex-col gap-6 z-10">
-          <h2 class="font-volkhov text-xl lg:text-3xl text-yellow">Learn > Local Regen Guides
-          </h2>
-          <p>These regen recipe books are focused on teaching engaging new ways to regenerate your local community. We
-            expect these guides to be pivotal in cross-pollinating engagement modalities across chapters. </p>
-
-          <div class="flex flex-wrap gap-4 items-center sm:justify-start justify-center">
-            <a href="/pdf/local-regen-guide.pdf" target="_blank"><button class="primary">Read Guide
-              </button></a>
-          </div>
-        </div>
-
-        <img class="hover" style="border: 1px solid var(--yellow);" src="./src/images/local-regen-guide.jpeg"
-          width="300" height="300" class="xl:w-[300px] xl:h-[300px] w-[230px] h-[230px]"
-          alt="greenpill local regen guide" onclick="document.location.href='https://bit.ly/greenpill-your-city';" />
-      </div>
-    </section>
-
-
     <!-- resources -->
     <section id="participate" class="pb-24 pt-12 sm:min-h-screen max-w-4xl m-auto relative">
       <!-- parallax bg elements -->