Merge pull request #350 from teaxyz/duplicate-cta-section

Duplicated CTA Section

src/layouts/index.html

@@ -222,31 +222,7 @@
         <h2 class="text-center display-6" style="text-transform:none !important; font-size: 40px; line-height:48px;">two ways to install tea</h2>
       </div>
     </div>
-    <div class="row">
+    {{ partial "tea-two-ways.html" . }}
-      <div class="col-xl-6 col-lg-6 col-mg-6 col-sm-12 col-12 ps-5 pe-5 mb-xl-0 mb-lg-0 mb-md-0 mb-sm-5 mb-5 teacli-col">
-        <h3 class="text-center" style="font-size:28px; line-height:32px;">Download tea/gui (beta) for macOS</h3>
-        <p class="text-center mb-4">A new visual package manager that everyone can use.</p>
-        <div class="row mb-3 gx-3">
-          <div class="col">
-            <a href="https://dist.tea.xyz/tea.xyz/gui/tea-latest-arm64.dmg">
-              <button class="hbtn hb-fill-right gui-dl-click" style="width:100%;"><i class="icon-apple"></i>M1/M2 Chip</button>
-            </a>
-          </div>
-          <div class="col">
-            <a href="https://dist.tea.xyz/tea.xyz/gui/tea-latest.dmg">
-              <button class="hbtn hb-fill-right gui-dl-click" style="width:100%;"><i class="icon-apple"></i>Intel Chip</button>
-            </a>
-          </div>
-        </div>
-        <p class="grid-gray text-center small">And head over to <a class="install-link" href="https://www.producthunt.com/posts/tea">Product Hunt</a> for more info (and maybe give us an upvote).</p>
-      </div>
-      <div class="col-xl-6 col-lg-6 col-mg-6 col-sm-12 col-12 ps-5 pe-5">
-        <h3 class="text-center" style="font-size:28px; line-height:32px;">Copy our one-liner to your terminal</h3>
-        <p class="text-center mb-4">Best for developers who are used to working with CLIs.</p>
-        {{- partial "click-to-copy.html" . -}}
-        <p class="no-installer grid-gray text-center small"><span class="tea">tea</span> is a stand&#8208;alone binary, see <a class="install-link" href="https://docs.tea.xyz/getting-started/install-tea/without-installer">our docs</a> for more installation methods.</p>
-      </div>
-    </div>
   </div>
 </section>
 
@@ -842,7 +818,7 @@ A GUI & CLI for complex apps, incentives on chain, & much more.</p>
       <div class="col">
         <h2 class="display-5 text-center">Ready to start building?<br>All you need is tea.</h2>
         <p class="lead text-center mb-5"><span class="tea">tea</span>’s +pkg syntax embodies our core belief that good tools should just get out of the way so that you can keep making the internet a better place. Access the entire open source ecosystem with one command, compose and combine everything, and enjoy an all-around more delightful dev experience.</p>
-        <div class="bottom-cta">{{- partial "desktop-ctas.html" -}}</div>
+        {{ partial "tea-two-ways.html" . }}
       </div>
     </div>
   </div>

src/layouts/partials/click-to-copy.html

@@ -1,12 +1,12 @@
-<div class="flex pt-1 pb-1 ps-4 pe-1 mb-3 black-bg" style="max-width: 800px; margin-left:auto; margin-right:auto; height:60px; border: 1px solid #949494;">
+<div class="flex pt-1 pb-1 ps-4 pe-1 mb-3 black-bg copy-section" style="max-width: 800px; margin-left:auto; margin-right:auto; height:60px; border: 1px solid #949494;">
-  <code id="copy-text" class="white lead">sh <(curl tea.xyz)</code>
+  <code class="white lead copy-text">sh <(curl tea.xyz)</code>
-  <button class="hbtn hb-fill-right" id="copy-button" style="height:100%;">Copy</button>
+  <button class="hbtn hb-fill-right copy-button" style="height:100%; width:140px;">Copy</button>
 </div>
 
 <script>
 
-  $("#copy-button").on("click", function() {
+  $(".copy-button").on("click", function() {
-    var copyText = "sh <(curl https://tea.xyz)";
+    var copyText = $(this).siblings(".copy-text").text();
     var tempInput = document.createElement("input");
     tempInput.style = "position: absolute; left: -1000px; top: -1000px";
     tempInput.value = copyText;
@@ -16,11 +16,11 @@
     document.body.removeChild(tempInput);
 
     // Change the button text to 'Copied'
-    var button = $("#copy-button");
+    var button = $(this);
     var originalText = button.text();
     button.text("Copied!");
 
-    // Change the button text back to original after 5 seconds
+    // Change the button text back to original after 2 seconds
     setTimeout(function() {
       button.text(originalText);
     }, 2000);

src/layouts/partials/tea-two-ways.html

@@ -0,0 +1,25 @@
+<div class="row">
+  <div class="col-xl-6 col-lg-6 col-mg-6 col-sm-12 col-12 ps-5 pe-5 mb-xl-0 mb-lg-0 mb-md-0 mb-sm-5 mb-5 teacli-col">
+    <h3 class="text-center" style="font-size:28px; line-height:32px;">Download tea/gui (beta) for macOS</h3>
+    <p class="text-center mb-4">A new visual package manager that everyone can use.</p>
+    <div class="row mb-3 gx-3">
+      <div class="col">
+        <a href="https://dist.tea.xyz/tea.xyz/gui/tea-latest-arm64.dmg">
+          <button class="hbtn hb-fill-right gui-dl-click" style="width:100%;"><i class="icon-apple"></i>M1/M2 Chip</button>
+        </a>
+      </div>
+      <div class="col">
+        <a href="https://dist.tea.xyz/tea.xyz/gui/tea-latest.dmg">
+          <button class="hbtn hb-fill-right gui-dl-click" style="width:100%;"><i class="icon-apple"></i>Intel Chip</button>
+        </a>
+      </div>
+    </div>
+    <p class="grid-gray text-center small">And head over to <a class="install-link" href="https://www.producthunt.com/posts/tea">Product Hunt</a> for more info (and maybe give us an upvote).</p>
+  </div>
+  <div class="col-xl-6 col-lg-6 col-mg-6 col-sm-12 col-12 ps-5 pe-5">
+    <h3 class="text-center" style="font-size:28px; line-height:32px;">Copy our one-liner to your terminal</h3>
+    <p class="text-center mb-4">Best for developers who are used to working with CLIs.</p>
+    {{- partial "click-to-copy.html" . -}}
+    <p class="no-installer grid-gray text-center small"><span class="tea">tea</span> is a stand&#8208;alone binary, see <a class="install-link" href="https://docs.tea.xyz/getting-started/install-tea/without-installer">our docs</a> for more installation methods.</p>
+  </div>
+</div>