From 681d9f45148cf6b6a7ab8460443bd4ba6a75c92a Mon Sep 17 00:00:00 2001
From: Antal Orcsik <antal.orcsik@bitrise.io>
Date: Wed, 20 Nov 2024 00:50:16 +0100
Subject: [PATCH] email tables example page

---
 dist/email-tables.html | 320 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 320 insertions(+)
 create mode 100644 dist/email-tables.html
diff --git a/dist/email-tables.html b/dist/email-tables.html
new file mode 100644
index 0000000..14406e3
--- /dev/null
+++ b/dist/email-tables.html
@@ -0,0 +1,320 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Email Tables</title>
+
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Figtree:wght@300..900&display=swap" rel="stylesheet">
+
+  <style>
+    body {
+      font-size: 16px;
+      font-family: Figtree, serif;
+      background: #f2f2f2;
+      line-height: 1.5em;
+      padding: 0;
+      margin: 0;
+    }
+
+    .settings {
+      background: #fff;
+      padding: .5rem;
+      position: fixed;
+      box-shadow: 0 5px 10px rgba(0,0,0,0.1);
+      top: 0;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      gap: .5rem;
+    }
+
+    .email {
+      margin: 5rem auto;
+      width: 700px;
+      max-width: 100%;
+      background: #fff;
+      border: 1px solid #dedede;
+      box-shadow: 0 5px 10px rgba(0,0,0,0.1);
+      box-sizing: border-box;
+    }
+    .email-header {
+      background: #F6EAFF;
+      padding: 2rem;
+    }
+    .email-body {
+      padding: 2rem;
+    }
+
+    /* The switch - the box around the slider */
+    .switch {
+      position: relative;
+      display: inline-block;
+      width: 2rem;
+      height: 1rem;
+    }
+
+    /* Hide default HTML checkbox */
+    #mobile {
+      opacity: 0;
+      width: 0;
+      height: 0;
+      position: absolute;
+      text-indent: -9999px;
+    }
+
+    /* The slider */
+    .slider {
+      position: absolute;
+      cursor: pointer;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: #ccc;
+      -webkit-transition: .4s;
+      transition: .4s;
+      border-radius: 1rem;
+    }
+
+    .slider:before {
+      position: absolute;
+      content: "";
+      height: .8rem;
+      width: .8rem;
+      left: .1rem;
+      bottom: .1rem;
+      background-color: white;
+      -webkit-transition: .4s;
+      transition: .4s;
+      border-radius: 50%;
+    }
+
+    input#mobile:checked + .settings .switch .slider {
+      background-color: #6A3C98;
+    }
+
+    input#mobile:focus + .settings .switch .slider {
+      box-shadow: 0 0 1px #6A3C98;
+    }
+
+    input#mobile:checked + .settings .switch .slider:before {
+      -webkit-transform: translateX(1rem);
+      -ms-transform: translateX(1rem);
+      transform: translateX(1rem);
+    }
+
+    input#mobile:checked + .settings ~ .email {
+      width: 320px;
+    }
+
+  </style>
+
+</head>
+<body>
+
+<input type="checkbox" id="mobile">
+<div class="settings">
+  <label class="switch" for="mobile">
+    <span class="slider"></span>
+  </label>
+  Mobile
+</div>
+
+<div class="email">
+  <div class="email-header">
+    <strong>Segment: Legacy CC plans: Developer, Org Standard, Org Elite</strong><br>
+    Email 1
+  </div>
+  <div class="email-body">
+
+  <p>Hi XXX,</p>
+  <p>Thank you for being a valued member of the Bitrise community. We’re writing to share an update regarding some upcoming pricing changes that will take effect in 2025.</p>
+  <p>Over the past three years, we’ve rolled out a range of new features to deliver more value for you and your team. To keep pace with inflation and rising operating costs—and to ensure we can keep innovating and improving—we’ll be adjusting our prices accordingly.</p>
+  <h3>New Pricing Details:</h3>
+  <ul>
+    <li><strong>Effective January 1, 2025</strong>, the price of your plan will increase by <strong>approximately 7%.</strong></li>
+    <li>This will take effect on your next renewal (no action from you needed).</li>
+  </ul>
+
+  <table style="
+    border: 2px solid #6A3C98;
+    width: 80%;
+    min-width: 250px;
+    margin: 2rem auto 0;
+    border-spacing: 0;
+    border-radius: 1rem;
+    overflow: hidden;
+    line-height: 1.5em;
+    font-size: .9rem;
+  ">
+    <thead>
+      <tr style="background: #DFB5FF;">
+        <th style="padding: .8rem 0; border-bottom: 2px solid #6A3C98; border-right: 1px solid #6A3C98; color: #6A3C98;">
+          <div style="font-size: 1.2em;">Plan</div>
+        </th>
+        <th style="padding: .8rem 0; border-bottom: 2px solid #6A3C98; border-right: 1px solid #6A3C98; color: #6A3C98;">
+          <div style="font-size: 1.2em;">2024</div>
+          <!-- <div style="font-size: .8em;">price per<br>concurrency</div> -->
+          <div style="font-weight: normal;">monthly<br>(annual)</div>
+        </th>
+        <th style="padding: .8rem 0; border-bottom: 2px solid #6A3C98; color: #6A3C98;">
+          <div style="font-size: 1.2em;">2025</div>
+          <!-- <div style="font-size: .8em;">price per<br>concurrency</div> -->
+          <div style="font-weight: normal;">monthly<br>(annual)</div>
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <th style="padding: .8rem 0; border-bottom: 1px solid #6A3C98; border-right: 1px solid #6A3C98; background: #F6EAFF; color: #6A3C98;">Developer</th>
+        <td style="padding: .8rem .2rem; border-bottom: 1px solid #6A3C98; border-right: 1px solid #6A3C98; text-align: center;">$40.00<br>($432.00)</td>
+        <td style="padding: .8rem .2rem; border-bottom: 1px solid #6A3C98; text-align: center;">$42.80<br>($462.24)</td>
+      </tr>
+      <tr>
+        <th style="padding: .8rem 0; border-bottom: 1px solid #6A3C98; border-right: 1px solid #6A3C98; background: #F6EAFF; color: #6A3C98;">Standard</th>
+        <td style="padding: .8rem .2rem; border-bottom: 1px solid #6A3C98; border-right: 1px solid #6A3C98; text-align: center;">$50.00<br>($540.00)</td>
+        <td style="padding: .8rem .2rem; border-bottom: 1px solid #6A3C98;  text-align: center;">$53.50<br>($577.80)</td>
+      </tr>
+      <tr>
+        <th style="padding: .8rem 0; border-right: 1px solid #6A3C98; background: #F6EAFF; color: #6A3C98;">Elite</th>
+        <td style="padding: .8rem .2rem; border-right: 1px solid #6A3C98; text-align: center;">$100.00<br>($1,080.00)</td>
+        <td style="padding: .8rem .2rem; text-align: center;">$107.00<br>($1,155.60)</td>
+      </tr>
+    </tbody>
+  </table>
+  <p style="font-size: .8em; color: #6A3C98; text-align: center; margin: .5rem 0 2rem;">price per concurrency</p>
+
+  <p>This will ensure we can continue to invest in delivering new functionality and improved performance to help you build and release mobile apps as efficiently as possible.</p>
+  <p>If you have any questions, feel free to contact our support team at <a href="mailto:letsconnect@bitrise.io">letsconnect@bitrise.io</a>.</p>
+  <p>Thank you,</p>
+  <p>The Bitrise team</p>
+
+  </div>
+</div>
+
+
+<div class="email">
+  <div class="email-header">
+    <strong>Segment: Teams V2 (Tier 1-6)- Current pricing</strong><br>
+    Email 1
+  </div>
+  <div class="email-body">
+
+  <p>Hi XXX, </p>
+  <p>Thank you for being a valued member of the Bitrise community. We’re writing to share an update regarding some upcoming pricing changes that will take effect in 2025.</p>
+  <p>Over the past three years, we’ve rolled out a range of new features to deliver the best possible platform for you and your team. To keep pace with inflation and rising operating costs—and to ensure we can keep innovating and improving—there will be a <strong>small price increase on our legacy plans in 2025.</strong></p>
+  <h3>New Pricing Details:</h3>
+  <ul>
+    <li>Your plan will <strong>increase by approximately 5% starting January 1, 2025.</strong></li>
+    <li>The new list price increase will take effect at your next renewal—<strong>no action is required from you.</strong></li>
+  </ul>
+
+  <table style="
+  border: 2px solid #6A3C98;
+  width: 80%;
+  min-width: 250px;
+  margin: 2rem auto;
+  border-spacing: 0;
+  border-radius: 1rem;
+  overflow: hidden;
+  line-height: 1.5em;
+  font-size: .9rem;
+">
+    <thead>
+      <tr style="background: #DFB5FF;">
+        <th style="padding: .8rem 0; border-bottom: 2px solid #6A3C98; border-right: 1px solid #6A3C98; color: #6A3C98;">
+          <div style="font-size: 1.2em;">Teams plan<br>tiers</div>
+        </th>
+        <th style="padding: .8rem 0; border-bottom: 2px solid #6A3C98; border-right: 1px solid #6A3C98; color: #6A3C98;">
+          <div style="font-size: 1.2em;">2024</div>
+          <div style="font-weight: normal;">monthly<br>(annual)</div>
+        </th>
+        <th style="padding: .8rem 0; border-bottom: 2px solid #6A3C98; color: #6A3C98;">
+          <div style="font-size: 1.2em;">2025</div>
+          <div style="font-weight: normal;">monthly<br>(annual)</div>
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <th style="padding: .8rem 0; border-bottom: 1px solid #6A3C98; border-right: 1px solid #6A3C98; background: #F6EAFF; color: #6A3C98;">
+          5769 credits
+        </th>
+        <td style="padding: .8rem .2rem; border-bottom: 1px solid #6A3C98; border-right: 1px solid #6A3C98; text-align: center;">
+          $225.00<br>($2,430.00)
+        </td>
+        <td style="padding: .8rem .2rem; border-bottom: 1px solid #6A3C98; text-align: center;">
+          $236.00<br>($2,549.00)
+        </td>
+      </tr>
+      <tr>
+        <th style="padding: .8rem 0; border-bottom: 1px solid #6A3C98; border-right: 1px solid #6A3C98; background: #F6EAFF; color: #6A3C98;">
+          7051 credits
+        </th>
+        <td style="padding: .8rem .2rem; border-bottom: 1px solid #6A3C98; border-right: 1px solid #6A3C98; text-align: center;">
+          $275.00<br>($2,970.00)
+        </td>
+        <td style="padding: .8rem .2rem; border-bottom: 1px solid #6A3C98;  text-align: center;">
+          $289.00<br>($3,121.00)
+        </td>
+      </tr>
+      <tr>
+        <th style="padding: .8rem 0; border-bottom: 1px solid #6A3C98; border-right: 1px solid #6A3C98; background: #F6EAFF; color: #6A3C98;">
+          10,256 credits
+        </th>
+        <td style="padding: .8rem .2rem; border-bottom: 1px solid #6A3C98; border-right: 1px solid #6A3C98; text-align: center;">
+          $400.00<br>($4,320.00)
+        </td>
+        <td style="padding: .8rem .2rem; border-bottom: 1px solid #6A3C98;  text-align: center;">
+          $420.00<br>($4,536.00)
+        </td>
+      </tr>
+      <tr>
+        <th style="padding: .8rem 0; border-bottom: 1px solid #6A3C98; border-right: 1px solid #6A3C98; background: #F6EAFF; color: #6A3C98;">
+          12,821 credits
+        </th>
+        <td style="padding: .8rem .2rem; border-bottom: 1px solid #6A3C98; border-right: 1px solid #6A3C98; text-align: center;">
+          $500.00<br>($5,400.00)
+        </td>
+        <td style="padding: .8rem .2rem; border-bottom: 1px solid #6A3C98;  text-align: center;">
+          $525.00<br>($5,670.00)
+        </td>
+      </tr>
+      <tr>
+        <th style="padding: .8rem 0; border-bottom: 1px solid #6A3C98; border-right: 1px solid #6A3C98; background: #F6EAFF; color: #6A3C98;">
+          18,590 credits
+        </th>
+        <td style="padding: .8rem .2rem; border-bottom: 1px solid #6A3C98; border-right: 1px solid #6A3C98; text-align: center;">
+          $725.00<br>($7,830.00)
+        </td>
+        <td style="padding: .8rem .2rem; border-bottom: 1px solid #6A3C98;  text-align: center;">
+          $761.00<br>($8,219.00)
+        </td>
+      </tr>
+      <tr>
+        <th style="padding: .8rem 0; border-right: 1px solid #6A3C98; background: #F6EAFF; color: #6A3C98;">
+          23,718 credits
+        </th>
+        <td style="padding: .8rem .2rem; border-right: 1px solid #6A3C98; text-align: center;">
+          $925.00<br>($9,990.00)
+        </td>
+        <td style="padding: .8rem .2rem; text-align: center;">
+          $971.00<br>($10,487.00)
+        </td>
+      </tr>
+    </tbody>
+  </table>
+
+  <p>As a result of this change, we will continue to deliver innovative new features and the reliability you deserve to build and release mobile apps as efficiently as possible.</p>
+  <p>If you have any questions, please reach out to our support team at <a href="mailto:letsconnect@bitrise.io">letsconnect@bitrise.io</a>.</p>
+  <p>Thank you,</p>
+  <p>The Bitrise team</p> 
+
+  </div>
+</div>
+
+</body>
+</html>
\ No newline at end of file

+ Plan +	+ 2024 + + monthly (annual) +	+ 2025 + + monthly (annual) +
Developer	$40.00 ($432.00)	$42.80 ($462.24)
Standard	$50.00 ($540.00)	$53.50 ($577.80)
Elite	$100.00 ($1,080.00)	$107.00 ($1,155.60)
+ Teams plan tiers +	+ 2024 + monthly (annual) +	+ 2025 + monthly (annual) +
+ 5769 credits +	+ $225.00 ($2,430.00) +	+ $236.00 ($2,549.00) +
+ 7051 credits +	+ $275.00 ($2,970.00) +	+ $289.00 ($3,121.00) +
+ 10,256 credits +	+ $400.00 ($4,320.00) +	+ $420.00 ($4,536.00) +
+ 12,821 credits +	+ $500.00 ($5,400.00) +	+ $525.00 ($5,670.00) +
+ 18,590 credits +	+ $725.00 ($7,830.00) +	+ $761.00 ($8,219.00) +
+ 23,718 credits +	+ $925.00 ($9,990.00) +	+ $971.00 ($10,487.00) +