[Website] Fix Twitter button and add LinkedIn button

_includes/socials.html

@@ -0,0 +1,19 @@
+<div class="social-badges">
+  <div class="social-badge"> <!-- GitHub -->
+    <!-- GitHub -->
+    <a class="github-button" href="https://github.com/apache/arrow" data-size="large" data-show-count="true" aria-label="Star apache/arrow on GitHub">Star</a>
+  </div>
+  <style type="text/css">
+    .custom-social-badge{display:inline;padding:4px}.custom-social-badge a{text-decoration:none;outline:0}.custom-social-badge .widget{display:inline-block;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;font-size:0;line-height:0;white-space:nowrap}.custom-social-badge .btn:not(:last-child){border-radius:.25em 0 0 .25em}.custom-social-badge .widget-lg .btn{height:28px;padding:5px 10px;font-size:12px;line-height:16px}.custom-social-badge .btn{border-radius:.25em;color:#25292e;background-color:#ebf0f4;border-color:#d1d9e0;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3clinearGradient id='o' x2='0' y2='1'%3e%3cstop stop-color='%23f6f8fa'/%3e%3cstop offset='90%25' stop-color='%23ebf0f4'/%3e%3c/linearGradient%3e%3crect width='100%25' height='100%25' fill='url(%23o)'/%3e%3c/svg%3e");background-image:-moz-linear-gradient(top,#f6f8fa,#ebf0f4 90%);background-image:linear-gradient(180deg,#f6f8fa,#ebf0f4 90%);filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr='#FFF6F8FA',endColorstr='#FFEAEFF3');filter:none;position:relative;display:inline-block;display:inline-flex;height:14px;padding:2px 5px;font-size:11px;font-weight:600;line-height:14px;vertical-align:bottom;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-repeat:repeat-x;background-position:-1px -1px;background-size:110% 110%;border:1px solid}.custom-social-badge .btn:hover,.custom-social-badge .btn:focus{background-color:#e5eaee;background-position:0 -.5em;border-color:#d1d9e0;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3clinearGradient id='o' x2='0' y2='1'%3e%3cstop stop-color='%23eff2f5'/%3e%3cstop offset='90%25' stop-color='%23e5eaee'/%3e%3c/linearGradient%3e%3crect width='100%25' height='100%25' fill='url(%23o)'/%3e%3c/svg%3e");background-image:-moz-linear-gradient(top,#eff2f5,#e5eaee 90%);background-image:linear-gradient(180deg,#eff2f5,#e5eaee 90%);filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr='#FFEFF2F5',endColorstr='#FFE4E9ED')}.custom-social-badge .btn:hover,.custom-social-badge .btn:focus{filter:none}.custom-social-badge .btn:active{background-color:#e6eaef;border-color:#d1d9e0;background-image:none;filter:none}
+  </style>
+  <div class="custom-social-badge"> <!-- LinkedIn -->
+    <span>
+      <div class="widget widget-lg"><a class="btn" href="https://www.linkedin.com/company/apache-arrow/" rel="noopener" target="_blank" aria-label="Follow Apache Arrow on LinkedIn"><svg viewBox="0 0 72 72" height="16" width="16" aria-hidden="true"><path d="M8 72h56a8 8 0 0 0 8-8V8a8 8 0 0 0-8-8H8a8 8 0 0 0-8 8v56a8 8 0 0 0 8 8z"/><path d="M62 62H51.316V43.802c0-4.989-1.896-7.778-5.845-7.778-4.296 0-6.541 2.902-6.541 7.778V62H28.633V27.333H38.93v4.67s3.096-5.729 10.452-5.729S62 30.764 62 40.051V62zM16.349 22.794c-3.507 0-6.349-2.864-6.349-6.397S12.842 10 16.349 10s6.348 2.864 6.348 6.397-2.84 6.397-6.348 6.397zM11.033 62h10.737V27.333H11.033V62z" fill="#fff"/></svg>&nbsp;<span>Follow</span></a></div>
+    </span>
+  </div>
+  <div class="custom-social-badge"> <!-- X -->
+    <span>
+      <div class="widget widget-lg"><a class="btn" href="https://x.com/ApacheArrow" rel="noopener" target="_blank" aria-label="Follow Apache Arrow on X"><svg viewBox="0 0 300 300" width="16" height="16" aria-hidden="true"><path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66"/></svg>&nbsp;<span>Follow</span></a></div>
+    </span>
+  </div>
+</div>

_layouts/home.html

@@ -9,14 +9,7 @@
       <img src="{{ site.baseurl }}/img/arrow-inverse.png" style="max-width: 70%;"/>
       <p class="lead">The universal columnar format and multi-language toolbox for fast data interchange and in-memory analytics</p>
 
-      <div class="social-badges">
-        <div class="social-badge">
-          <a class="github-button" href="https://github.com/apache/arrow" data-size="large" data-show-count="true" aria-label="Star apache/arrow on GitHub">Star</a>
-        </div>
-        <div class="social-badge">
-          <a href="https://twitter.com/ApacheArrow?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="true">Follow @ApacheArrow</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
-        </div>
-      </div>
+      {% include socials.html %}
     </div>
   </div>
   <div class="container p-4 pt-5">

css/main.scss

@@ -117,5 +117,5 @@ figure {
 
 .social-badge {
   display: inline;
-  padding: 12px;
+  padding: 4px;
 }