feat: add Linkedin to the Community Section

Signed-off-by: Anna Artemova <[email protected]>
cilium · Aug 16, 2024 · a73613d · a73613d
1 parent 4fb2c0b
commit a73613d
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 19 deletions.
diff --git a/docs/assets/scss/home/hero.scss b/docs/assets/scss/home/hero.scss
@@ -26,6 +26,7 @@
     }
 
     @media (max-width: $mobile) {
+      padding-top: 2rem !important;
       padding-left: 16px !important;
       padding-right: 16px !important;
     }
@@ -36,7 +37,7 @@
     flex-wrap: wrap;
     align-items: center;
     margin-top: 54px;
-    padding: 5px 10px;
+    padding: 6px 16px;
     font-size: 14px;
     line-height: 1.375;
     color: #58595e;
@@ -48,14 +49,14 @@
       display: flex;
       flex-wrap: wrap;
       align-items: center;
+    }
 
-      &:not(:last-child) {
-      padding-right: 4px;
-      }
+    span:not(:last-child) {
+      padding-right: 3px;
     }
 
     img {
-      margin: 0 3px;
+      margin-right: 3px;
     }
 
     @media (max-width: $desktop) {
@@ -70,8 +71,8 @@
 
     @media (max-width: $mobile) {
       justify-content: center;
-      margin-top: 18px;
-      padding: 5px;
+      max-width: 270px;
+      margin-top: 0;
 
       img {
         max-width: 20px;

diff --git a/docs/assets/scss/social.scss b/docs/assets/scss/social.scss
@@ -41,6 +41,7 @@
     }
 
     @media (max-width: $tablet) {
+      flex-wrap: wrap;
       gap: 20px;
       margin-top: 32px;
     }
@@ -58,7 +59,7 @@
     border-radius: 4px;
 
     @media (max-width: $tablet) {
-      width: 224px;
+      width: 346px;
     }
 
     @media (max-width: $mobile) {
@@ -87,6 +88,9 @@
   }
 
   &__item-wrapper {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
     @media (max-width: $mobile) {
       display: flex;
       flex-direction: column;
@@ -145,7 +149,7 @@
 
   &__item-description {
     margin-top: 5px;
-    margin-bottom: 0;
+    margin-bottom: auto;
     line-height: 1.5;
     color: #7E8490;
 
@@ -199,4 +203,14 @@
       filter: blur(14px);
     }
   }
+
+  &__item--dark-blue {
+    background-color: #F1F8FE;
+    border-color: #CFE7FC;
+
+    &:after {
+      background: #70B2FF;
+      filter: blur(14px);
+    }
+  }
 }
diff --git a/docs/content/en/_index.html b/docs/content/en/_index.html
@@ -10,20 +10,17 @@
             <div class="hero__intro">
                 <span class="hero__label">
                     <span>
-                        <span>
-                        Tetragon is a <b>sub-project under</b>
+                        <span>Tetragon is a</span>
+                        <b>sub-project under</b>
                     </span>
-                    <img src="/svgs/logos/cillium.svg" width="20" height="20" loading="eager" alt="" />
                     <span>
+                        <img src="/svgs/logos/cillium.svg" width="20" height="20" loading="eager" alt="" />
+                        <span>
                             <b>Cillium</b>
-                    </span>
-                    </span>
-                    <span>
+                        </span>
                         <span>and a proud</span>
-                    <img src="/svgs/logos/cncf-logo.svg" width="20" height="20" loading="eager" alt="" />
-                    <span>
+                        <img src="/svgs/logos/cncf-logo.svg" width="20" height="20" loading="eager" alt="" />
                         <b>CNCF project</b>
-                        </span>
                     </span>
                 </span>
                 <h1 class="title title--xl">
@@ -465,7 +462,7 @@ <h3 class="tools__item-title">Exploring Tetragon Lab</h3>
 
     <div class="videos">
         <h2 class="title videos__title">
-            Watch videos on Tetragon 
+            Watch videos on Tetragon
             <a class="button button--text" href="/docs/resources#conference-talks">
                 Show all videos
                 <svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg"
@@ -625,6 +622,28 @@ <h3 class="social__item-title">Twitter</h3>
                     </div>
                 </a>
             </li>
+            <li class="social__item social__item--dark-blue">
+                <a class="social__link" href="https://www.linkedin.com/company/cilium/" target="_blank"
+                    rel="noopener noreferrer">
+                    <img src="/svgs/linkedin-icon.svg" width="76" height="76" loading="lazy" alt="X Logo" />
+                    <div class="social__item-wrapper">
+                        <h3 class="social__item-title">LinkedIn</h3>
+                        <p class="social__item-description">Communicate and discover opportunities with us on LinkedIn
+                        </p>
+                        <span class="button button--text">
+                            Join on LinkedIn
+                            <svg width="13" height="12" viewBox="0 0 13 12" fill="none"
+                                xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                                <path
+                                    d="M1 5.12939C0.585787 5.12939 0.25 5.46518 0.25 5.87939C0.25 6.29361 0.585787 6.62939 1 6.62939V5.12939ZM12 5.12939L1 5.12939V6.62939L12 6.62939V5.12939Z"
+                                    fill="currentColor" />
+                                <path d="M7.11108 1L12 5.7735L7.11108 10.7444" stroke="currentColor" stroke-width="1.5"
+                                    stroke-linecap="round" stroke-linejoin="round" />
+                            </svg>
+                        </span>
+                    </div>
+                </a>
+            </li>
         </ul>
     </div>
 

diff --git a/docs/static/svgs/linkedin-icon.svg b/docs/static/svgs/linkedin-icon.svg