feat(ecosystem): tier filters and new header

components/Advocates/MeetTheAdvocates/AdvocatesMeetTheAdvocates.vue

@@ -128,8 +128,6 @@ const joinSlackLink = "https://qisk.it/join-slack";
 @use "~/assets/scss/carbon.scss";
 
 .advocates-meet-the-advocates {
-  margin-top: carbon.$spacing-12;
-
   &__filters-result-section {
     margin-top: carbon.$spacing-10;
   }

components/Ui/UiJoinWithCards.vue

@@ -0,0 +1,75 @@
+<template>
+  <section class="cds--grid">
+    <div class="cds--row">
+      <article
+        class="cds--col-lg-4 cds--col-md-4 join-with-cards__feature join-with-cards__intro"
+      >
+        <slot name="description" />
+        <UiCta
+          is-wider
+          :label="cta.label"
+          :segment="cta.segment"
+          :url="cta.url"
+        />
+      </article>
+      <div
+        v-for="card in cards"
+        :key="card.name"
+        class="cds--col-lg-4 cds--col-md-4 join-with-cards__feature"
+      >
+        <UiCompactFeature
+          :description="card.description"
+          :icon="card.icon"
+          :title="card.name"
+        />
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { TextLink } from "~/types/links";
+
+interface Card {
+  name: string;
+  description: string;
+  icon: string;
+}
+
+interface Props {
+  cta: TextLink;
+  cards: Card[];
+}
+
+defineProps<Props>();
+</script>
+
+<style lang="scss" scoped>
+@use "~/assets/scss/carbon.scss";
+
+.join-with-cards {
+  &__feature {
+    @include carbon.breakpoint-down(lg) {
+      margin-bottom: carbon.$spacing-07;
+    }
+
+    @include carbon.breakpoint-up(md) {
+      height: 14rem;
+    }
+
+    @include carbon.breakpoint-up(lg) {
+      height: 16.5rem;
+    }
+
+    @include carbon.breakpoint-up(xlg) {
+      height: 14rem;
+    }
+  }
+
+  &__intro {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+}
+</style>

pages/advocates.vue

@@ -7,12 +7,25 @@
       /><br />
       within the Qiskit community
     </LayoutLeadSpaceFixed>
-    <AdvocatesJoin />
+    <UiJoinWithCards
+      class="advocates-page__join-section"
+      :cards="joinSectionCards"
+      :cta="advocatesJoinLink"
+    >
+      <template #description>
+        <p>
+          The Qiskit advocate program is a global program that provides support
+          to the individuals who actively contribute to the Qiskit Community.
+        </p>
+      </template>
+    </UiJoinWithCards>
     <AdvocatesMeetTheAdvocates />
   </article>
 </template>
 
 <script setup lang="ts">
+import { TextLink } from "types/links";
+
 definePageMeta({
   pageTitle: "Qiskit Advocates",
   routeName: "advocates",
@@ -33,4 +46,39 @@ useSeoMeta({
   twitterCard: "summary_large_image",
   twitterDescription: description,
 });
+
+const advocatesJoinLink: TextLink = {
+  url: "https://qisk.it/advocateapplication",
+  label: "Join the program",
+  segment: { cta: "join-the-program", location: "advocates" },
+};
+
+const joinSectionCards = [
+  {
+    icon: "high-five.svg",
+    name: "Network with experts and enthusiasts",
+    description:
+      "Advocates will be added to a group of quantum experts and will be a part of regular information sharing sessions.",
+  },
+  {
+    icon: "global-network.svg",
+    name: "Access to Qiskit core members and projects",
+    description:
+      "Advocates will receive special access to core members of the Qiskit team for questions and brainstorming ideas.",
+  },
+  {
+    icon: "location.svg",
+    name: "Invitation to events",
+    description:
+      "Active Qiskit Advocates will be invited to attend global events created for the quantum computing community.",
+  },
+];
 </script>
+
+<style lang="scss" scoped>
+@use "~/assets/scss/carbon.scss";
+
+.advocates-page__join-section {
+  margin-bottom: carbon.$spacing-12;
+}
+</style>