Add ambassadors-apply page (#1864)

Signed-off-by: Travis Beckham <[email protected]>

linkerd.io/assets/scss/app/_adopters.scss

@@ -4,7 +4,7 @@
 
 .adopters {
   .page__container {
-    @include make-stack(6);
+    @include make-stack(7);
   }
   .adopters__case-studies {
     display: grid;

linkerd.io/assets/scss/app/_ambassadors-apply.scss

@@ -0,0 +1,24 @@
+/*
+@markup See: layouts/community/ambassadors-apply.html
+*/
+
+.ambassadors-apply {
+  // Override all h2s on the page
+  h2 {
+    font-size: $font-size-h1;
+  }
+  .page__container {
+    @include make-stack(7);
+  }
+  @media (min-width: breakpoint-min-width("lg")) {
+    section {
+      padding-left: spacer(6);
+      padding-right: spacer(6);
+    }
+    .card {
+      @include make-card--horz;
+      @include make-card--reverse;
+      padding: spacer(6);
+    }
+  }
+}

linkerd.io/assets/scss/app/_enterprise.scss

@@ -3,12 +3,12 @@
 */
 
 .enterprise {
-  // Override all h2s on the enterprise page
+  // Override all h2s on the page
   h2 {
     font-size: $font-size-h1;
   }
   .page__container {
-    @include make-stack(6);
+    @include make-stack(7);
   }
   .enterprise__section {
     @include make-stack(5);
@@ -20,19 +20,5 @@
       gap: spacer(6);
       padding: spacer(6);
     }
-    .hero__container {
-      background-image: url("/enterprise/images/bkgd.svg");
-      background-repeat: no-repeat;
-      background-size: 500px auto;
-      background-position: right;
-    }
-    .hero__body {
-      max-width: 700px;
-    }
-  }
-  @media (min-width: breakpoint-min-width("xl")) {
-    .hero__container {
-      background-size: auto 100%;
-    }
   }
 }

linkerd.io/assets/scss/components/_accordion.scss

@@ -0,0 +1,43 @@
+/*
+@markup
+<div class="accordion">
+  <details>
+    <summary>Title</summary>
+    Content
+  </details>
+  ...
+</div>
+*/
+
+.accordion {
+  border-top: solid 1px $border-color;
+
+  details {
+    padding-top: spacer(3);
+    padding-bottom: spacer(3);
+    border-bottom: solid 1px $border-color;
+
+    summary {
+      padding-right: spacer(5);
+      list-style-type: none;
+      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" fill="%238399ac" /></svg>');
+      background-repeat: no-repeat;
+      background-position: right center;
+      background-size: spacer(4) spacer(4);
+      cursor: pointer;
+      transition: color .2s ease;
+
+      &:hover {
+        color: $link-color;
+      }
+      > * {
+        margin-bottom: 0;
+      }
+    }
+    &[open] summary {
+      margin-bottom: spacer(4);
+      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z" fill="%238399ac" /></svg>');
+    }
+  }
+}
+

linkerd.io/assets/scss/components/_hero.scss

@@ -1,4 +1,30 @@
 /*
+
+If the `hero--has-background-image` class is applied, the `background-image` rule needs to
+be set on the `hero__container` element using an inline style or by appling the
+rule through a parent component. For example:
+
+Using an inline style:
+
+```html
+<div class="hero hero--has-background-image">
+  <div class="hero__container" style="background-image:url('bkgd.png')">
+```
+
+Using a parent component:
+
+```css
+.my-page .hero__container {
+  background-image:url('bkgd.png');
+}
+```
+
+```html
+<div class="my-page">
+  <div class="hero hero--has-background-image">
+    <div class="hero__container">
+```
+
 @markup
 <div class="hero">
   <div class="hero__container">
@@ -68,4 +94,35 @@
       }
     }
   }
+
+  // @options
+
+  &.hero--has-background-image {
+    .hero__container {
+      background-size: 0 0;// Hide background image
+    }
+    @media (min-width: breakpoint-min-width("lg")) {
+      .hero__container {
+        background-repeat: no-repeat;
+        background-size: auto 300px;
+        background-position: right center;
+      }
+      .hero__body {
+        max-width: 700px;
+      }
+    }
+    @media (min-width: breakpoint-min-width("xl")) {
+      .hero__container {
+        background-size: auto 400px;
+      }
+    }
+    @media (min-width: breakpoint-min-width("xxl")) {
+      .hero__container {
+        background-size: auto 500px;
+      }
+      .hero__body {
+        max-width: 800px;
+      }
+    }
+  }
 }

linkerd.io/assets/scss/components/_prose.scss

@@ -11,7 +11,12 @@ Apply to containers that contain rendered markdown.
   // Add extra space above h2
   h2 {
     padding-top: spacer(3);
+
+    &:first-child {
+      padding-top: 0;
+    }
   }
+
   // Add bottom margin to alerts
   .alert {
     margin-bottom: spacer(3);

linkerd.io/assets/scss/main.scss

@@ -16,6 +16,7 @@
 @import "base";
 
 // Components
+@import "components/accordion";
 @import "components/alert";
 @import "components/anchor";
 @import "components/avatar";
@@ -39,6 +40,7 @@
 
 // Application
 @import "app/adopters";
+@import "app/ambassadors-apply";
 @import "app/ambassadors";
 @import "app/blog";
 @import "app/docs";

linkerd.io/content/community/ambassadors-apply/_index.md

@@ -0,0 +1,102 @@
+---
+title: Become a Linkerd Ambassador
+description: |-
+  Join the Linkerd Ambassador Program and help us deliver simplicity as a value
+  for Kubernetes platforms everywhere.
+layout: ambassadors-apply
+params:
+  hero:
+    background: images/bkgd.svg
+    content: |-
+      Are you passionate about keeping software simple? Do you reject the idea
+      that Kubernetes must be complex? Are you willing to stand up and fight
+      against the status quo? 
+
+      Join the Linkerd Ambassador Program and help us deliver simplicity as a
+      core value for Kubernetes platforms everywhere. **Spots are limited!**
+    buttons:
+      - text: Apply now!
+        href: https://docs.google.com/forms/d/e/1FAIpQLScBC-RWSPMbYFbuqPgmetKLyhjb1ih9TcDqI6szek8ElsYHPw/viewform?usp=sf_link
+        variant: primary
+  overview:
+    title: What are Linkerd Ambassadors?
+    content: |-
+      Linkerd Ambassadors educate the Kubernetes community about Linkerd.
+      They spread its message of simplicity far and wide,  and they represent
+      the voice of the community back to the Linkerd maintainers. Every
+      ambassador works in their own way. While some create content, others may
+      prefer to be Community Leaders.
+      
+      Ambassador activities typically include one or more of the following:
+
+      - **Educate:** Share their knowledge through talks, blog posts, videos,
+        meetups, and helping others on the Linkerd Slack.
+      - **Foster collaboration:** Build strong relationships within the
+        Linkerd community and encourage collaboration.
+      - **Grow the community:** Attract and onboard new users to the Linkerd
+        ecosystem.
+      - **Provide feedback:** Share insights, suggestions, and community
+        feedback with Linkerd maintainers to help improve the project.
+      - **Promote Linkerd globally:** Spread the word about Linkerd and its
+        benefits to a wider audience.
+  perks:
+    title: Linkerd Ambassador Perks
+    image: images/ambassador-logo.svg
+    content: |-
+      Linkerd Ambassadors get some amazing perks and benefits, including:
+
+      - **Swag!** Enjoy exclusive Linkerd Ambassador-branded swag just for
+        Ambassadors.
+      - **Events!** Join us at Kubecon for special Ambassador events.
+      - **Exclusive Recognition!**
+        - LinkedIn Linkerd Ambassador badges,
+        - Your name in the Linkerd Ambassador page and the AMBASSADORS.md
+          file.
+        - Your blog post published on the linkerd.io in the "Ambassador
+          Highlight" section 
+      - **Resources and support!** Get funding, training, and support for
+        hosting workshops, speaking, creating content, or mentoring others.
+      - **Networking:**
+        - Join regular meetings where Ambassadors can present to each other
+        - Connect with other cloud native experts and build valuable
+          relationships throughout the community.
+  faqs:
+    title: Frequently asked questions
+    content:
+      - title: How do I become a Linkerd Ambassador?
+        content: |-
+          1. **Meet the requirements:** Demonstrate expertise in Linkerd and a
+            commitment to community engagement (see below).
+          2. **Submit your application:** Apply through our official application
+            process.
+          3. **Fulfill your responsibilities:** Actively participate in
+            educational activities and community building.
+
+          There are only a limited number of ambassador spots each year, so make
+          your best case to secure your spot.
+      - title: What are the program requirements?
+        content: |-
+          How Linkerd Ambassadors help educate the community will depend on their
+          preferences and strengths. Typically, they must do at least **two** of
+          the following:
+
+          1. Presenting a Linkerd-related talk at a conference or local meetup,
+          2. Create Linkerd-related content (e.g., blog post, video),
+          3. Regularly answer questions on Slack (i.e. on a monthly basis),
+          4. Contribute code, documentation, or otherwise participate in the
+            Linkerd open source project
+          
+          Other creative ideas not listed here are also possible, as long as they
+          achieve the goal of educating users about Linkerd. Let us know how you
+          are achieving it in your application. 
+          
+          Finally, Ambassadors active on social media are encouraged to help
+          amplify Linkerd content on social or other media and engage in
+          conversation about Linkerd (e.g., Reddit, LinkedIn, etc.). 
+      - title: What if Linkerd Ambassadors can't fulfill their responsibilities
+          anymore?
+        content: |-
+          Linkerd Ambassadors who opt to step down or are unable to meet
+          responsibilities will be moved to Emeritus status. Emeritus Ambassadors
+          are always welcome to reapply.
+---