updates to join page

Signed-off-by: cjyabraham <[email protected]>

Author: cjyabraham

_sass/announcement.scss

@@ -7,7 +7,7 @@
   }
 
   .hero-content { 
-    top: $mobile_header_height + 80px;
+    top: $mobile_header_height + 40px;
     height: 250px;
     position: relative;
     margin-bottom: 120px;
@@ -34,7 +34,10 @@
     }
 
     h1.small {
-      font-size: 58px;
+      font-size: 40px;       
+      @include desktop {
+        font-size: 58px;
+      }
     }
 
     .lead {
@@ -158,7 +161,7 @@
 
   .grey-background-section {
     background-color: #f3f4f7;
-    padding: 60px;
+    padding: 60px 0;
     img {
       height: 100px;
     }
@@ -172,7 +175,7 @@
     background-image: url("/assets/images/features-background2.jpg");
     background-size: 100% 100%;
     background-repeat: no-repeat;
-    padding: 60px;
+    padding: 60px 0;
     h2 {
       color: white;
     }
@@ -205,5 +208,30 @@
     line-height: 130%;
     margin: 25px 0;
   }
+
+  table.benefits {
+    background-color: white;
+    font-size: 14px;
+    text-align: center;
+    td.benefit {
+      min-width: 300px;
+      text-align: left;
+    }
+    thead {
+      background-color: #812CE5;
+      color: white;
+      font-size: 16px; 
+      font-weight: 700;
+      @include desktop {
+        font-size: 20px; 
+      }
+      td {
+        border-top: none;
+      }
+    }
+    img {
+      width: 15px;
+    }
+  }
 }
 

assets/images/check.svg

@@ -38,7 +38,7 @@ <h1 class="small">Join the PyTorch Foundation</h1>
 <div class="container-fluid grey-background-section text-center">
   <div class="container">
     <div class="row content">
-      <div class="col-md-10 body-side-text lead">
+      <div class="col-md-12 body-side-text lead">
         <h2 class="upper">Membership Benefits</h2>
         <div class="row">
           <div class="col-md">
@@ -80,62 +80,26 @@ <h3 class="upper">Community</h3>
       <div class="col-md-10 body-side-text">
         <h2 class="upper">Join the Membership that fits your goals</h2>
         <p>
-        <table class="table table-bordered">
+        <table class="table benefits table-responsive-sm">
           <thead>
           <tr>
-           <td><strong>Premier Member</strong>
-           </td>
-           <td><strong>General Member</strong>
-           </td>
-           <td><strong>Associate Member</strong>
-           </td>
+            <td class="benefit">Benefit</td>
+            <td>Premier</td>
+            <td>General</td>
+            <td>Associate</td>
           </tr>
           </thead>
           <tr>
-           <td>
-            <ul class="pl-3">
-              <li>Board seat on PyTorch Governing Board upon acceptance</li>
-              <li>Exec invite to join a PyTorch Conference keynote </li>
-              <li>Personalized executive engagement from PyTorch and LF leadership teams:</li>
-              <li>Open source strategy e.g. donating a project, running an open source program office</li>
-              <li>PyTorch Marketing Committee membership (1/company)</li>
-              <li>Exclusive live webinars with PyTorch online programs</li>
-            </ul>
-           </td>
-           <td>
-            <ul class="pl-3">
-              <li>Eligible for 1 representative on the PTF Board for every 10 General members - capped to 3 representatives</li>
-              <li>The PTF Board will vote on the General Members nominees</li>
-              <li>Exclusive live webinars with PyTorch online programs</li>
-            </ul>
-          </td>
-           <td>
-            <ul class="pl-3">
-              <li>Eligible for 1 representative on the PTF Board </li>
-              <li>The PTF Board will vote the Associate Members nominees</li>
-              <li>The PTF Board may at any time decline to seat an Associate Member Representative</li>
-              <li>Exclusive live webinars with PyTorch online programs</li>
-            </ul>
-           </td>
+            <td class="benefit">Hold one (1) seat on PTF Governing Board + one alternate (1) representative </td>
+            <td><img src="/assets/images/x.svg" /></td>
+            <td><img src="/assets/images/check.svg" /></td>
+            <td><img src="/assets/images/x.svg" /></td>
           </tr>
-          <tr style="vertical-align: top;">
-           <td>$ 150,000 annually + LF Silver Membership
-           </td>
-           <td>
-            LF Silver Membership +<br>
-            <span>$</span> 50,000 (5,000 employees) <br>
-            <span>$</span> 40,000 (3,000 - 4,999) <br>
-            <span>$</span> 35,000 (1,000 - 2,999) <br>
-            <span>$</span> 30,000 (500 - 999) <br>
-            <span>$</span> 25,000 (1 - 499) <br>
-            <br>
-            1 Board Seat per 10 members 
-            (max 3)
-           </td>
-           <td>
-            Free Membership <br>
-            (exclusive to academic and nonprofit organizations)
-           </td>
+          <tr>
+            <td class="benefit">Hold one (1) seat on PTF Governing Board + one alternate (1) representative </td>
+            <td><img src="/assets/images/x.svg" /></td>
+            <td><img src="/assets/images/check.svg" /></td>
+            <td><img src="/assets/images/check.svg" /></td>
           </tr>
         </table>
       </p>