From 37d45d61d749f2962309760c532c2a657e03bb8b Mon Sep 17 00:00:00 2001
From: Randy Tolentino <randytolentino@ibm.com>
Date: Thu, 20 Jul 2023 09:58:48 -0700
Subject: [PATCH 01/16] feat(ecosystem): remove tier tabs

---
 pages/ecosystem.vue | 108 ++++++--------------------------------------
 1 file changed, 14 insertions(+), 94 deletions(-)

diff --git a/pages/ecosystem.vue b/pages/ecosystem.vue
index 0b01a0a390..64f8d4380a 100644
--- a/pages/ecosystem.vue
+++ b/pages/ecosystem.vue
@@ -26,29 +26,6 @@
         :label="joinAction.label"
         :url="joinAction.url"
       />
-      <div class="ecosystem-page__tiers">
-        <client-only>
-          <bx-tabs
-            class="ecosystem-page__tiers__tabs"
-            trigger-content="Select an item"
-            value="Main"
-            @bx-tabs-selected="updateSelectedTab($event.target.value)"
-          >
-            <bx-tab
-              v-for="tierName in tiersNames"
-              :id="`tab${tierName}`"
-              :key="tierName"
-              :target="`panel${tierName}`"
-              :value="`${tierName}`"
-            >
-              {{ `${tierName} (${filteredMembersByTier[tierName].length})` }}
-            </bx-tab>
-          </bx-tabs>
-          <div class="ecosystem-page__tiers__description">
-            {{ selectedTierDescription }}
-          </div>
-        </client-only>
-      </div>
       <UiFiltersResultsLayout>
         <template #filters-on-m-l-screen>
           <UiFieldset class="ecosystem-page__categories" label="Category">
@@ -97,30 +74,17 @@
             </bx-dropdown>
           </div>
           <div class="ecosystem-page__tier-panel">
-            <div
-              v-for="tierName in tiersNames"
-              :id="`panel${tierName}`"
-              :key="tierName"
-              role="tabpanel"
-              :aria-labelledby="`tab${tierName}`"
-            >
-              <template v-if="selectedTab === tierName">
-                <p
-                  v-if="filteredMembersFromSelectedTier.length === 0"
-                  class="cds--col"
-                >
-                  Try using wider search criteria, or consider
-                  <UiLink v-bind="joinAction">joining the ecosystem.</UiLink>
-                </p>
-                <div v-else class="cds--row ecosystem-page__members">
-                  <EcosystemCard
-                    v-for="member in filteredMembersFromSelectedTierSorted"
-                    :key="member.name"
-                    class="cds--col-sm-4 cds--col-xlg-8"
-                    :member="member"
-                  />
-                </div>
-              </template>
+            <p v-if="filteredMembersSorted.length === 0" class="cds--col">
+              Try using wider search criteria, or consider
+              <UiLink v-bind="joinAction">joining the ecosystem.</UiLink>
+            </p>
+            <div v-else class="cds--row ecosystem-page__members">
+              <EcosystemCard
+                v-for="member in filteredMembersSorted"
+                :key="member.name"
+                class="cds--col-sm-4 cds--col-xlg-8"
+                :member="member"
+              />
             </div>
           </div>
         </template>
@@ -135,10 +99,6 @@ import rawTiers from "~/content/ecosystem/tiers.json";
 import { Member, Tier } from "~/types/ecosystem";
 import { TextLink } from "~/types/links";
 
-interface MembersByTier {
-  [key: string]: Member[];
-}
-
 const members = rawMembers as Member[];
 const config = useRuntimeConfig();
 
@@ -173,19 +133,6 @@ useSeoMeta({
  */
 const tiers = rawTiers as Tier[];
 const tiersNames = tiers.map((tier) => tier.name);
-const selectedTab = ref<string>("Main");
-
-const selectedTier = computed<Tier | undefined>(() => {
-  return tiers.find((tier) => tier.name === selectedTab.value);
-});
-
-const selectedTierDescription = computed<string>(() => {
-  return selectedTier.value?.description ?? "";
-});
-
-function updateSelectedTab(tab: string) {
-  selectedTab.value = tab;
-}
 
 /**
  * Category filters
@@ -269,31 +216,12 @@ const filteredMembers = computed<Member[]>(() => {
   return filteredMembers;
 });
 
-const filteredMembersByTier = computed<MembersByTier>(() => {
-  const result: MembersByTier = {};
-
-  tiersNames.forEach((tierName) => {
-    result[tierName] = filteredMembers.value.filter(
-      (member) => member.tier === tierName
-    );
-  });
-
-  return result;
-});
-
-const filteredMembersFromSelectedTier = computed<Member[]>(() => {
-  return filteredMembersByTier.value[selectedTab.value];
-});
-
-const filteredMembersFromSelectedTierSorted = computed<Member[]>(() => {
+const filteredMembersSorted = computed<Member[]>(() => {
   if (selectedSortingOption.value === "stars") {
-    return filteredMembersFromSelectedTier.value.sort(
-      (a, b) => b.stars - a.stars
-    );
+    return filteredMembers.value.sort((a, b) => b.stars - a.stars);
   }
 
-  // The list of members is sorted by name by default.
-  return filteredMembersFromSelectedTier.value;
+  return filteredMembers.value.sort((a, b) => a.name.localeCompare(b.name));
 });
 </script>
 
@@ -302,14 +230,6 @@ const filteredMembersFromSelectedTierSorted = computed<Member[]>(() => {
 @use "~/assets/scss/helpers/classes.scss";
 
 .ecosystem-page {
-  &__tiers {
-    margin-top: carbon.$spacing-10;
-
-    &__description {
-      padding-top: carbon.$spacing-05;
-    }
-  }
-
   &__tier-panel {
     margin-top: carbon.$spacing-07;
   }

From 1f4b6cb77075fe5e57b265a4c5d5d523cf5ffd1b Mon Sep 17 00:00:00 2001
From: Randy Tolentino <randytolentino@ibm.com>
Date: Thu, 20 Jul 2023 11:14:23 -0700
Subject: [PATCH 02/16] feat(ecosystem): add tier filters

---
 pages/ecosystem.vue | 62 ++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 55 insertions(+), 7 deletions(-)

diff --git a/pages/ecosystem.vue b/pages/ecosystem.vue
index 64f8d4380a..37c0f6db76 100644
--- a/pages/ecosystem.vue
+++ b/pages/ecosystem.vue
@@ -26,8 +26,22 @@
         :label="joinAction.label"
         :url="joinAction.url"
       />
-      <UiFiltersResultsLayout>
+      <UiFiltersResultsLayout class="ecosystem-page__results">
         <template #filters-on-m-l-screen>
+          <UiFieldset class="ecosystem-page__categories" label="Tier">
+            <client-only>
+              <bx-checkbox
+                v-for="tier in tiersNames"
+                :key="tier"
+                :checked="isTierFilterChecked(tier)"
+                :label-text="tier"
+                :value="tier"
+                @bx-checkbox-changed="
+                  updateTierFilter(tier, $event.target.checked)
+                "
+              />
+            </client-only>
+          </UiFieldset>
           <UiFieldset class="ecosystem-page__categories" label="Category">
             <client-only>
               <bx-checkbox
@@ -44,6 +58,14 @@
           </UiFieldset>
         </template>
         <template #filters-on-s-screen>
+          <div class="ecosystem-page__tiers__multiselect">
+            <UiMultiSelect
+              label="Tiers"
+              :options="tiersNames"
+              :value="tierFiltersAsString"
+              @change-selection="updateTierFilters($event)"
+            />
+          </div>
           <div class="ecosystem-page__categories__multiselect">
             <UiMultiSelect
               label="Category"
@@ -144,6 +166,8 @@ const categoryFilterOptionsSorted = [
 
 const categoryFilters = ref<string[]>([]);
 const categoryFiltersAsString = computed(() => categoryFilters.value.join(","));
+const tierFilters = ref<string[]>([]);
+const tierFiltersAsString = computed(() => tierFilters.value.join(","));
 
 function updateCategoryFilter(filterValue: string, isChecked: boolean) {
   if (isChecked) {
@@ -166,6 +190,27 @@ function isCategoryFilterChecked(filterValue: string): boolean {
   return categoryFilters.value.includes(filterValue);
 }
 
+function updateTierFilter(filterValue: string, isChecked: boolean) {
+  if (isChecked) {
+    tierFilters.value.push(filterValue);
+  } else {
+    const index = tierFilters.value.indexOf(filterValue);
+    if (index !== -1) {
+      tierFilters.value.splice(index, 1);
+    }
+  }
+}
+
+function updateTierFilters(newTierFilters: string) {
+  const newTierFiltersAsArray =
+    newTierFilters === "" ? [] : newTierFilters.split(",");
+  tierFilters.value = newTierFiltersAsArray;
+}
+
+function isTierFilterChecked(filterValue: string): boolean {
+  return tierFiltersAsString.value.includes(filterValue);
+}
+
 /**
  * Search term
  */
@@ -195,6 +240,13 @@ const filteredMembers = computed<Member[]>(() => {
 
   let filteredMembers = members;
 
+  // Tier filter
+  if (tierFilters.value.length > 0) {
+    filteredMembers = filteredMembers.filter((member) =>
+      tierFilters.value.some((filter) => member.tier.includes(filter))
+    );
+  }
+
   // Category filter
   if (categoryFilters.value.length > 0) {
     filteredMembers = filteredMembers.filter((member) =>
@@ -248,12 +300,8 @@ const filteredMembersSorted = computed<Member[]>(() => {
     }
   }
 
-  &__toolbar {
-    margin-top: carbon.$spacing-06;
-
-    @include carbon.breakpoint-down(md) {
-      margin-top: initial;
-    }
+  &__results {
+    margin-top: carbon.$spacing-07;
   }
 
   &__search {

From 88f2146669b0f14c66ae450594cacbcadc7b6859 Mon Sep 17 00:00:00 2001
From: Randy Tolentino <randytolentino@ibm.com>
Date: Thu, 20 Jul 2023 12:41:29 -0700
Subject: [PATCH 03/16] feat(ecosystem): update page header and add assets

---
 components/Ecosystem/EcosystemJoin.vue | 86 ++++++++++++++++++++++++++
 constants/links.ts                     |  8 ++-
 pages/ecosystem.vue                    | 24 +------
 public/images/icons/group.svg          |  3 +
 public/images/icons/quantum.svg        | 11 ++++
 public/images/icons/transform--02.svg  | 10 +++
 6 files changed, 120 insertions(+), 22 deletions(-)
 create mode 100644 components/Ecosystem/EcosystemJoin.vue
 create mode 100644 public/images/icons/group.svg
 create mode 100644 public/images/icons/quantum.svg
 create mode 100644 public/images/icons/transform--02.svg

diff --git a/components/Ecosystem/EcosystemJoin.vue b/components/Ecosystem/EcosystemJoin.vue
new file mode 100644
index 0000000000..21d025e58b
--- /dev/null
+++ b/components/Ecosystem/EcosystemJoin.vue
@@ -0,0 +1,86 @@
+<template>
+  <section class="cds--grid">
+    <div class="cds--row">
+      <article
+        class="cds--col-lg-4 cds--col-md-4 ecosystem-join__feature ecosystem-join__intro"
+      >
+        <p>
+          The Ecosystem consists of projects, tools, utilities, libraries and
+          tutorials from a broad community of developers and researchers. The
+          goal of the Ecosystem is to celebrate, support and accelerate
+          development of quantum technologies using Qiskit.
+        </p>
+        <UiCta
+          is-wider
+          :label="EcosystemJoinLink.label"
+          :segment="EcosystemJoinLink.segment"
+          :url="EcosystemJoinLink.url"
+        />
+      </article>
+      <div
+        v-for="tier in tiers"
+        :key="tier.name"
+        class="cds--col-lg-4 cds--col-md-4 ecosystem-join__feature"
+      >
+        <UiCompactFeature
+          :description="tier.description"
+          :icon="tier.icon"
+          :title="tier.name"
+        />
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { EcosystemJoinLink } from "~/constants/links";
+
+const tiers = [
+  {
+    name: "Main",
+    description: "The main Qiskit packages maintained by IBM Quantum.",
+    icon: "quantum.svg",
+  },
+  {
+    name: "Extensions",
+    description: "IBM Quantum supported Qiskit extensions.",
+    icon: "transform--02.svg",
+  },
+  {
+    name: "Community",
+    description:
+      "Software packages supported by the Qiskit community, not maintained by IBM Quantum.",
+    icon: "group.svg",
+  },
+];
+</script>
+
+<style lang="scss" scoped>
+@use "~/assets/scss/carbon.scss";
+
+.ecosystem-join {
+  &__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>
diff --git a/constants/links.ts b/constants/links.ts
index 828b0b9d59..16bc0f2758 100644
--- a/constants/links.ts
+++ b/constants/links.ts
@@ -38,4 +38,10 @@ const SocialMedia: { [key: string]: TextLink } = {
   },
 } as const;
 
-export { LearnStartLearningUrl, SocialMedia };
+const EcosystemJoinLink: TextLink = {
+  url: "https://github.com/qiskit-community/ecosystem#ecosystem--",
+  label: "Join the ecosystem",
+  segment: { cta: "join-the-ecosystem", location: "ecosystem" },
+};
+
+export { LearnStartLearningUrl, SocialMedia, EcosystemJoinLink };
diff --git a/pages/ecosystem.vue b/pages/ecosystem.vue
index 37c0f6db76..d23786acbf 100644
--- a/pages/ecosystem.vue
+++ b/pages/ecosystem.vue
@@ -11,21 +11,8 @@
       <br />
       Qiskit community
     </LayoutLeadSpaceFixed>
+    <EcosystemJoin />
     <section id="ecosystem" class="cds--grid ecosystem-page">
-      <h2>Ecosystem Resources</h2>
-      <div class="cds--row">
-        <p class="cds--col-md-5 cds--col-lg-8 cds--col-xlg-7 cds--col-max-6">
-          The Ecosystem consists of projects, tools, utilities, libraries and
-          tutorials from a broad community of developers and researchers. The
-          goal of the Ecosystem is to celebrate, support and accelerate
-          development of quantum technologies using Qiskit.
-        </p>
-      </div>
-      <UiCta
-        class="ecosystem-page__header__cta"
-        :label="joinAction.label"
-        :url="joinAction.url"
-      />
       <UiFiltersResultsLayout class="ecosystem-page__results">
         <template #filters-on-m-l-screen>
           <UiFieldset class="ecosystem-page__categories" label="Tier">
@@ -98,7 +85,7 @@
           <div class="ecosystem-page__tier-panel">
             <p v-if="filteredMembersSorted.length === 0" class="cds--col">
               Try using wider search criteria, or consider
-              <UiLink v-bind="joinAction">joining the ecosystem.</UiLink>
+              <UiLink v-bind="EcosystemJoinLink">joining the ecosystem.</UiLink>
             </p>
             <div v-else class="cds--row ecosystem-page__members">
               <EcosystemCard
@@ -119,16 +106,11 @@
 import rawMembers from "~/content/ecosystem/members.json";
 import rawTiers from "~/content/ecosystem/tiers.json";
 import { Member, Tier } from "~/types/ecosystem";
-import { TextLink } from "~/types/links";
+import { EcosystemJoinLink } from "~/constants/links";
 
 const members = rawMembers as Member[];
 const config = useRuntimeConfig();
 
-const joinAction: TextLink = {
-  url: "https://github.com/qiskit-community/ecosystem#ecosystem--",
-  label: "Join the ecosystem",
-};
-
 definePageMeta({
   layout: "default-max",
   pageTitle: "Qiskit Ecosystem",
diff --git a/public/images/icons/group.svg b/public/images/icons/group.svg
new file mode 100644
index 0000000000..6957688a6c
--- /dev/null
+++ b/public/images/icons/group.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24.36 31H23.64V23.5C23.64 19.948 21.226 16.896 17.768 16.076C17.618 16.04 17.507 15.913 17.493 15.76C17.478 15.606 17.564 15.46 17.705 15.397C19.222 14.722 20.201 13.216 20.201 11.561C20.201 9.245 18.317 7.36 16.001 7.36C13.685 7.36 11.8 9.244 11.8 11.561C11.8 13.216 12.78 14.723 14.296 15.397C14.437 15.46 14.523 15.606 14.508 15.76C14.494 15.913 14.383 16.041 14.233 16.076C10.775 16.896 8.36101 19.948 8.36101 23.5V31H7.64001V23.5C7.64001 19.908 9.89701 16.782 13.225 15.621C11.899 14.714 11.079 13.2 11.079 11.56C11.079 9.596 12.236 7.896 13.905 7.108C14.101 6.617 14.2 6.097 14.2 5.561C14.2 3.245 12.316 1.36 10 1.36C7.68401 1.36 5.79901 3.244 5.79901 5.561C5.79901 7.217 6.77901 8.723 8.29501 9.397C8.43701 9.46 8.52101 9.606 8.50701 9.76C8.49301 9.913 8.38202 10.041 8.23202 10.076C4.77402 10.896 2.36001 13.948 2.36001 17.5V25H1.64001V17.5C1.64001 13.908 3.89701 10.782 7.22501 9.621C5.89901 8.714 5.08001 7.2 5.08001 5.561C5.08001 2.848 7.28701 0.640999 10 0.640999C12.713 0.640999 14.92 2.848 14.92 5.561C14.92 5.983 14.868 6.397 14.763 6.798C15.554 6.593 16.446 6.593 17.236 6.798C17.132 6.397 17.079 5.983 17.079 5.561C17.079 2.848 19.287 0.640999 22 0.640999C24.713 0.640999 26.921 2.848 26.921 5.561C26.921 7.201 26.101 8.715 24.775 9.622C28.104 10.783 30.361 13.909 30.361 17.501V25H29.64V17.5C29.64 13.948 27.226 10.896 23.768 10.076C23.618 10.04 23.507 9.913 23.493 9.76C23.478 9.606 23.564 9.46 23.705 9.397C25.221 8.722 26.2 7.216 26.2 5.561C26.2 3.245 24.316 1.36 22 1.36C19.684 1.36 17.8 3.244 17.8 5.561C17.8 6.097 17.899 6.617 18.095 7.109C19.764 7.898 20.921 9.597 20.921 11.561C20.921 13.201 20.101 14.715 18.775 15.622C22.104 16.783 24.361 19.909 24.361 23.501L24.36 31Z" fill="white"/>
+</svg>
diff --git a/public/images/icons/quantum.svg b/public/images/icons/quantum.svg
new file mode 100644
index 0000000000..707b96b29b
--- /dev/null
+++ b/public/images/icons/quantum.svg
@@ -0,0 +1,11 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1_15)">
+<rect width="32" height="32" fill="white" fill-opacity="0.01" style="mix-blend-mode:multiply"/>
+<path d="M31.36 16C31.36 7.53 24.47 0.639999 16 0.639999C12.556 0.639999 9.20201 1.815 6.50501 3.94C6.21501 3.752 5.87101 3.64 5.50001 3.64C4.47501 3.64 3.64001 4.474 3.64001 5.5C3.64001 5.869 3.75101 6.212 3.93801 6.502C1.81401 9.197 0.640015 12.559 0.640015 16C0.640015 24.47 7.53001 31.36 16 31.36C19.442 31.36 22.799 30.185 25.496 28.061C25.786 28.248 26.13 28.36 26.5 28.36C27.525 28.36 28.36 27.525 28.36 26.5C28.36 26.13 28.248 25.787 28.061 25.497C30.185 22.799 31.36 19.442 31.36 16ZM27.556 24.972C27.256 24.764 26.892 24.64 26.5 24.64C26.117 24.64 25.761 24.757 25.465 24.956L11.207 10.698C12.749 10.487 14.348 10.359 16 10.359C23.936 10.359 30.64 12.942 30.64 15.999C30.64 17.709 28.494 19.374 24.897 20.455L25.104 21.144C27.625 20.387 29.458 19.355 30.466 18.172C30.094 20.643 29.094 22.991 27.556 24.972ZM30.461 13.836C28.365 11.368 22.766 9.64 16 9.64C14.122 9.64 12.296 9.783 10.559 10.05L7.04401 6.535C7.24301 6.239 7.36001 5.883 7.36001 5.5C7.36001 5.108 7.23701 4.746 7.02901 4.445C9.58601 2.459 12.75 1.36 16 1.36C23.335 1.36 29.41 6.788 30.461 13.836ZM5.50001 4.36C6.12801 4.36 6.64001 4.872 6.64001 5.5C6.64001 6.128 6.12801 6.64 5.50001 6.64C4.87201 6.64 4.36001 6.128 4.36001 5.5C4.36001 4.872 4.87201 4.36 5.50001 4.36ZM4.44401 7.027C4.74401 7.236 5.10701 7.36 5.50001 7.36C5.88301 7.36 6.23901 7.243 6.53501 7.044L20.792 21.302C19.252 21.513 17.653 21.64 16 21.64C8.06401 21.64 1.36001 19.058 1.36001 16C1.36001 14.291 3.50701 12.625 7.10401 11.544L6.89701 10.855C4.37501 11.613 2.54201 12.645 1.53301 13.828C1.90501 11.358 2.90501 9.008 4.44401 7.027ZM1.53801 18.163C3.63401 20.632 9.23301 22.36 16 22.36C17.881 22.36 19.707 22.217 21.44 21.95L24.955 25.465C24.756 25.761 24.639 26.117 24.639 26.5C24.639 26.892 24.762 27.255 24.97 27.555C22.415 29.541 19.248 30.64 16 30.64C8.66401 30.64 2.58901 25.211 1.53801 18.163ZM26.5 27.64C25.871 27.64 25.36 27.129 25.36 26.5C25.36 25.871 25.871 25.36 26.5 25.36C27.129 25.36 27.64 25.871 27.64 26.5C27.64 27.129 27.129 27.64 26.5 27.64Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_1_15">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/images/icons/transform--02.svg b/public/images/icons/transform--02.svg
new file mode 100644
index 0000000000..b6cfc3ab50
--- /dev/null
+++ b/public/images/icons/transform--02.svg
@@ -0,0 +1,10 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2_19)">
+<path d="M31 31.36H23C22.801 31.36 22.64 31.199 22.64 31V17C22.64 16.801 22.801 16.64 23 16.64H26.64V5.36001H23V4.64001H27C27.199 4.64001 27.36 4.80101 27.36 5.00001V16.64H31C31.199 16.64 31.36 16.801 31.36 17V31C31.36 31.199 31.199 31.36 31 31.36ZM23.36 30.64H30.639V17.36H23.36V30.64ZM5.00001 31.36C2.59601 31.36 0.640015 29.404 0.640015 27C0.640015 24.596 2.59601 22.64 5.00001 22.64C7.28301 22.64 9.16201 24.404 9.34501 26.64H20V27.361H9.34501C9.16201 29.597 7.28301 31.36 5.00001 31.36ZM5.00001 23.36C2.99301 23.36 1.36001 24.993 1.36001 27C1.36001 29.007 2.99301 30.64 5.00001 30.64C7.00701 30.64 8.64001 29.007 8.64001 27C8.64001 24.993 7.00701 23.36 5.00001 23.36ZM5.36001 20.5H4.64001V5.00001C4.64001 4.80101 4.80101 4.64001 5.00001 4.64001H13.64V1.00001C13.64 0.867007 13.713 0.745007 13.83 0.683007C13.947 0.621007 14.09 0.627007 14.2 0.701007L20.2 4.70101C20.3 4.76701 20.36 4.87901 20.36 5.00001C20.36 5.12101 20.3 5.23301 20.199 5.29901L14.199 9.29901C14.089 9.37301 13.946 9.38001 13.829 9.31701C13.713 9.25501 13.64 9.13301 13.64 9.00001V5.36001H5.36001V20.5ZM14.36 1.67301V8.32701L19.351 5.00001L14.36 1.67301Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_2_19">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>

From 289b768c1d6f6501ddf5d861bed670a0d6c589c7 Mon Sep 17 00:00:00 2001
From: Randy Tolentino <randytolentino@ibm.com>
Date: Thu, 20 Jul 2023 09:58:48 -0700
Subject: [PATCH 04/16] feat(ecosystem): remove tier tabs

---
 pages/ecosystem.vue | 108 ++++++--------------------------------------
 1 file changed, 14 insertions(+), 94 deletions(-)

diff --git a/pages/ecosystem.vue b/pages/ecosystem.vue
index 0b01a0a390..64f8d4380a 100644
--- a/pages/ecosystem.vue
+++ b/pages/ecosystem.vue
@@ -26,29 +26,6 @@
         :label="joinAction.label"
         :url="joinAction.url"
       />
-      <div class="ecosystem-page__tiers">
-        <client-only>
-          <bx-tabs
-            class="ecosystem-page__tiers__tabs"
-            trigger-content="Select an item"
-            value="Main"
-            @bx-tabs-selected="updateSelectedTab($event.target.value)"
-          >
-            <bx-tab
-              v-for="tierName in tiersNames"
-              :id="`tab${tierName}`"
-              :key="tierName"
-              :target="`panel${tierName}`"
-              :value="`${tierName}`"
-            >
-              {{ `${tierName} (${filteredMembersByTier[tierName].length})` }}
-            </bx-tab>
-          </bx-tabs>
-          <div class="ecosystem-page__tiers__description">
-            {{ selectedTierDescription }}
-          </div>
-        </client-only>
-      </div>
       <UiFiltersResultsLayout>
         <template #filters-on-m-l-screen>
           <UiFieldset class="ecosystem-page__categories" label="Category">
@@ -97,30 +74,17 @@
             </bx-dropdown>
           </div>
           <div class="ecosystem-page__tier-panel">
-            <div
-              v-for="tierName in tiersNames"
-              :id="`panel${tierName}`"
-              :key="tierName"
-              role="tabpanel"
-              :aria-labelledby="`tab${tierName}`"
-            >
-              <template v-if="selectedTab === tierName">
-                <p
-                  v-if="filteredMembersFromSelectedTier.length === 0"
-                  class="cds--col"
-                >
-                  Try using wider search criteria, or consider
-                  <UiLink v-bind="joinAction">joining the ecosystem.</UiLink>
-                </p>
-                <div v-else class="cds--row ecosystem-page__members">
-                  <EcosystemCard
-                    v-for="member in filteredMembersFromSelectedTierSorted"
-                    :key="member.name"
-                    class="cds--col-sm-4 cds--col-xlg-8"
-                    :member="member"
-                  />
-                </div>
-              </template>
+            <p v-if="filteredMembersSorted.length === 0" class="cds--col">
+              Try using wider search criteria, or consider
+              <UiLink v-bind="joinAction">joining the ecosystem.</UiLink>
+            </p>
+            <div v-else class="cds--row ecosystem-page__members">
+              <EcosystemCard
+                v-for="member in filteredMembersSorted"
+                :key="member.name"
+                class="cds--col-sm-4 cds--col-xlg-8"
+                :member="member"
+              />
             </div>
           </div>
         </template>
@@ -135,10 +99,6 @@ import rawTiers from "~/content/ecosystem/tiers.json";
 import { Member, Tier } from "~/types/ecosystem";
 import { TextLink } from "~/types/links";
 
-interface MembersByTier {
-  [key: string]: Member[];
-}
-
 const members = rawMembers as Member[];
 const config = useRuntimeConfig();
 
@@ -173,19 +133,6 @@ useSeoMeta({
  */
 const tiers = rawTiers as Tier[];
 const tiersNames = tiers.map((tier) => tier.name);
-const selectedTab = ref<string>("Main");
-
-const selectedTier = computed<Tier | undefined>(() => {
-  return tiers.find((tier) => tier.name === selectedTab.value);
-});
-
-const selectedTierDescription = computed<string>(() => {
-  return selectedTier.value?.description ?? "";
-});
-
-function updateSelectedTab(tab: string) {
-  selectedTab.value = tab;
-}
 
 /**
  * Category filters
@@ -269,31 +216,12 @@ const filteredMembers = computed<Member[]>(() => {
   return filteredMembers;
 });
 
-const filteredMembersByTier = computed<MembersByTier>(() => {
-  const result: MembersByTier = {};
-
-  tiersNames.forEach((tierName) => {
-    result[tierName] = filteredMembers.value.filter(
-      (member) => member.tier === tierName
-    );
-  });
-
-  return result;
-});
-
-const filteredMembersFromSelectedTier = computed<Member[]>(() => {
-  return filteredMembersByTier.value[selectedTab.value];
-});
-
-const filteredMembersFromSelectedTierSorted = computed<Member[]>(() => {
+const filteredMembersSorted = computed<Member[]>(() => {
   if (selectedSortingOption.value === "stars") {
-    return filteredMembersFromSelectedTier.value.sort(
-      (a, b) => b.stars - a.stars
-    );
+    return filteredMembers.value.sort((a, b) => b.stars - a.stars);
   }
 
-  // The list of members is sorted by name by default.
-  return filteredMembersFromSelectedTier.value;
+  return filteredMembers.value.sort((a, b) => a.name.localeCompare(b.name));
 });
 </script>
 
@@ -302,14 +230,6 @@ const filteredMembersFromSelectedTierSorted = computed<Member[]>(() => {
 @use "~/assets/scss/helpers/classes.scss";
 
 .ecosystem-page {
-  &__tiers {
-    margin-top: carbon.$spacing-10;
-
-    &__description {
-      padding-top: carbon.$spacing-05;
-    }
-  }
-
   &__tier-panel {
     margin-top: carbon.$spacing-07;
   }

From d9eac7694fac548df1b1b80a10ba0bba14a892b1 Mon Sep 17 00:00:00 2001
From: Randy Tolentino <randytolentino@ibm.com>
Date: Thu, 20 Jul 2023 11:14:23 -0700
Subject: [PATCH 05/16] feat(ecosystem): add tier filters

---
 pages/ecosystem.vue | 62 ++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 55 insertions(+), 7 deletions(-)

diff --git a/pages/ecosystem.vue b/pages/ecosystem.vue
index 64f8d4380a..37c0f6db76 100644
--- a/pages/ecosystem.vue
+++ b/pages/ecosystem.vue
@@ -26,8 +26,22 @@
         :label="joinAction.label"
         :url="joinAction.url"
       />
-      <UiFiltersResultsLayout>
+      <UiFiltersResultsLayout class="ecosystem-page__results">
         <template #filters-on-m-l-screen>
+          <UiFieldset class="ecosystem-page__categories" label="Tier">
+            <client-only>
+              <bx-checkbox
+                v-for="tier in tiersNames"
+                :key="tier"
+                :checked="isTierFilterChecked(tier)"
+                :label-text="tier"
+                :value="tier"
+                @bx-checkbox-changed="
+                  updateTierFilter(tier, $event.target.checked)
+                "
+              />
+            </client-only>
+          </UiFieldset>
           <UiFieldset class="ecosystem-page__categories" label="Category">
             <client-only>
               <bx-checkbox
@@ -44,6 +58,14 @@
           </UiFieldset>
         </template>
         <template #filters-on-s-screen>
+          <div class="ecosystem-page__tiers__multiselect">
+            <UiMultiSelect
+              label="Tiers"
+              :options="tiersNames"
+              :value="tierFiltersAsString"
+              @change-selection="updateTierFilters($event)"
+            />
+          </div>
           <div class="ecosystem-page__categories__multiselect">
             <UiMultiSelect
               label="Category"
@@ -144,6 +166,8 @@ const categoryFilterOptionsSorted = [
 
 const categoryFilters = ref<string[]>([]);
 const categoryFiltersAsString = computed(() => categoryFilters.value.join(","));
+const tierFilters = ref<string[]>([]);
+const tierFiltersAsString = computed(() => tierFilters.value.join(","));
 
 function updateCategoryFilter(filterValue: string, isChecked: boolean) {
   if (isChecked) {
@@ -166,6 +190,27 @@ function isCategoryFilterChecked(filterValue: string): boolean {
   return categoryFilters.value.includes(filterValue);
 }
 
+function updateTierFilter(filterValue: string, isChecked: boolean) {
+  if (isChecked) {
+    tierFilters.value.push(filterValue);
+  } else {
+    const index = tierFilters.value.indexOf(filterValue);
+    if (index !== -1) {
+      tierFilters.value.splice(index, 1);
+    }
+  }
+}
+
+function updateTierFilters(newTierFilters: string) {
+  const newTierFiltersAsArray =
+    newTierFilters === "" ? [] : newTierFilters.split(",");
+  tierFilters.value = newTierFiltersAsArray;
+}
+
+function isTierFilterChecked(filterValue: string): boolean {
+  return tierFiltersAsString.value.includes(filterValue);
+}
+
 /**
  * Search term
  */
@@ -195,6 +240,13 @@ const filteredMembers = computed<Member[]>(() => {
 
   let filteredMembers = members;
 
+  // Tier filter
+  if (tierFilters.value.length > 0) {
+    filteredMembers = filteredMembers.filter((member) =>
+      tierFilters.value.some((filter) => member.tier.includes(filter))
+    );
+  }
+
   // Category filter
   if (categoryFilters.value.length > 0) {
     filteredMembers = filteredMembers.filter((member) =>
@@ -248,12 +300,8 @@ const filteredMembersSorted = computed<Member[]>(() => {
     }
   }
 
-  &__toolbar {
-    margin-top: carbon.$spacing-06;
-
-    @include carbon.breakpoint-down(md) {
-      margin-top: initial;
-    }
+  &__results {
+    margin-top: carbon.$spacing-07;
   }
 
   &__search {

From cc7450bbc5cefc2b70e6987597497cd487684bbf Mon Sep 17 00:00:00 2001
From: Randy Tolentino <randytolentino@ibm.com>
Date: Thu, 20 Jul 2023 12:41:29 -0700
Subject: [PATCH 06/16] feat(ecosystem): update page header and add assets

---
 components/Ecosystem/EcosystemJoin.vue | 86 ++++++++++++++++++++++++++
 constants/links.ts                     |  8 ++-
 pages/ecosystem.vue                    | 24 +------
 public/images/icons/group.svg          |  3 +
 public/images/icons/quantum.svg        | 11 ++++
 public/images/icons/transform--02.svg  | 10 +++
 6 files changed, 120 insertions(+), 22 deletions(-)
 create mode 100644 components/Ecosystem/EcosystemJoin.vue
 create mode 100644 public/images/icons/group.svg
 create mode 100644 public/images/icons/quantum.svg
 create mode 100644 public/images/icons/transform--02.svg

diff --git a/components/Ecosystem/EcosystemJoin.vue b/components/Ecosystem/EcosystemJoin.vue
new file mode 100644
index 0000000000..21d025e58b
--- /dev/null
+++ b/components/Ecosystem/EcosystemJoin.vue
@@ -0,0 +1,86 @@
+<template>
+  <section class="cds--grid">
+    <div class="cds--row">
+      <article
+        class="cds--col-lg-4 cds--col-md-4 ecosystem-join__feature ecosystem-join__intro"
+      >
+        <p>
+          The Ecosystem consists of projects, tools, utilities, libraries and
+          tutorials from a broad community of developers and researchers. The
+          goal of the Ecosystem is to celebrate, support and accelerate
+          development of quantum technologies using Qiskit.
+        </p>
+        <UiCta
+          is-wider
+          :label="EcosystemJoinLink.label"
+          :segment="EcosystemJoinLink.segment"
+          :url="EcosystemJoinLink.url"
+        />
+      </article>
+      <div
+        v-for="tier in tiers"
+        :key="tier.name"
+        class="cds--col-lg-4 cds--col-md-4 ecosystem-join__feature"
+      >
+        <UiCompactFeature
+          :description="tier.description"
+          :icon="tier.icon"
+          :title="tier.name"
+        />
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { EcosystemJoinLink } from "~/constants/links";
+
+const tiers = [
+  {
+    name: "Main",
+    description: "The main Qiskit packages maintained by IBM Quantum.",
+    icon: "quantum.svg",
+  },
+  {
+    name: "Extensions",
+    description: "IBM Quantum supported Qiskit extensions.",
+    icon: "transform--02.svg",
+  },
+  {
+    name: "Community",
+    description:
+      "Software packages supported by the Qiskit community, not maintained by IBM Quantum.",
+    icon: "group.svg",
+  },
+];
+</script>
+
+<style lang="scss" scoped>
+@use "~/assets/scss/carbon.scss";
+
+.ecosystem-join {
+  &__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>
diff --git a/constants/links.ts b/constants/links.ts
index 828b0b9d59..16bc0f2758 100644
--- a/constants/links.ts
+++ b/constants/links.ts
@@ -38,4 +38,10 @@ const SocialMedia: { [key: string]: TextLink } = {
   },
 } as const;
 
-export { LearnStartLearningUrl, SocialMedia };
+const EcosystemJoinLink: TextLink = {
+  url: "https://github.com/qiskit-community/ecosystem#ecosystem--",
+  label: "Join the ecosystem",
+  segment: { cta: "join-the-ecosystem", location: "ecosystem" },
+};
+
+export { LearnStartLearningUrl, SocialMedia, EcosystemJoinLink };
diff --git a/pages/ecosystem.vue b/pages/ecosystem.vue
index 37c0f6db76..d23786acbf 100644
--- a/pages/ecosystem.vue
+++ b/pages/ecosystem.vue
@@ -11,21 +11,8 @@
       <br />
       Qiskit community
     </LayoutLeadSpaceFixed>
+    <EcosystemJoin />
     <section id="ecosystem" class="cds--grid ecosystem-page">
-      <h2>Ecosystem Resources</h2>
-      <div class="cds--row">
-        <p class="cds--col-md-5 cds--col-lg-8 cds--col-xlg-7 cds--col-max-6">
-          The Ecosystem consists of projects, tools, utilities, libraries and
-          tutorials from a broad community of developers and researchers. The
-          goal of the Ecosystem is to celebrate, support and accelerate
-          development of quantum technologies using Qiskit.
-        </p>
-      </div>
-      <UiCta
-        class="ecosystem-page__header__cta"
-        :label="joinAction.label"
-        :url="joinAction.url"
-      />
       <UiFiltersResultsLayout class="ecosystem-page__results">
         <template #filters-on-m-l-screen>
           <UiFieldset class="ecosystem-page__categories" label="Tier">
@@ -98,7 +85,7 @@
           <div class="ecosystem-page__tier-panel">
             <p v-if="filteredMembersSorted.length === 0" class="cds--col">
               Try using wider search criteria, or consider
-              <UiLink v-bind="joinAction">joining the ecosystem.</UiLink>
+              <UiLink v-bind="EcosystemJoinLink">joining the ecosystem.</UiLink>
             </p>
             <div v-else class="cds--row ecosystem-page__members">
               <EcosystemCard
@@ -119,16 +106,11 @@
 import rawMembers from "~/content/ecosystem/members.json";
 import rawTiers from "~/content/ecosystem/tiers.json";
 import { Member, Tier } from "~/types/ecosystem";
-import { TextLink } from "~/types/links";
+import { EcosystemJoinLink } from "~/constants/links";
 
 const members = rawMembers as Member[];
 const config = useRuntimeConfig();
 
-const joinAction: TextLink = {
-  url: "https://github.com/qiskit-community/ecosystem#ecosystem--",
-  label: "Join the ecosystem",
-};
-
 definePageMeta({
   layout: "default-max",
   pageTitle: "Qiskit Ecosystem",
diff --git a/public/images/icons/group.svg b/public/images/icons/group.svg
new file mode 100644
index 0000000000..6957688a6c
--- /dev/null
+++ b/public/images/icons/group.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24.36 31H23.64V23.5C23.64 19.948 21.226 16.896 17.768 16.076C17.618 16.04 17.507 15.913 17.493 15.76C17.478 15.606 17.564 15.46 17.705 15.397C19.222 14.722 20.201 13.216 20.201 11.561C20.201 9.245 18.317 7.36 16.001 7.36C13.685 7.36 11.8 9.244 11.8 11.561C11.8 13.216 12.78 14.723 14.296 15.397C14.437 15.46 14.523 15.606 14.508 15.76C14.494 15.913 14.383 16.041 14.233 16.076C10.775 16.896 8.36101 19.948 8.36101 23.5V31H7.64001V23.5C7.64001 19.908 9.89701 16.782 13.225 15.621C11.899 14.714 11.079 13.2 11.079 11.56C11.079 9.596 12.236 7.896 13.905 7.108C14.101 6.617 14.2 6.097 14.2 5.561C14.2 3.245 12.316 1.36 10 1.36C7.68401 1.36 5.79901 3.244 5.79901 5.561C5.79901 7.217 6.77901 8.723 8.29501 9.397C8.43701 9.46 8.52101 9.606 8.50701 9.76C8.49301 9.913 8.38202 10.041 8.23202 10.076C4.77402 10.896 2.36001 13.948 2.36001 17.5V25H1.64001V17.5C1.64001 13.908 3.89701 10.782 7.22501 9.621C5.89901 8.714 5.08001 7.2 5.08001 5.561C5.08001 2.848 7.28701 0.640999 10 0.640999C12.713 0.640999 14.92 2.848 14.92 5.561C14.92 5.983 14.868 6.397 14.763 6.798C15.554 6.593 16.446 6.593 17.236 6.798C17.132 6.397 17.079 5.983 17.079 5.561C17.079 2.848 19.287 0.640999 22 0.640999C24.713 0.640999 26.921 2.848 26.921 5.561C26.921 7.201 26.101 8.715 24.775 9.622C28.104 10.783 30.361 13.909 30.361 17.501V25H29.64V17.5C29.64 13.948 27.226 10.896 23.768 10.076C23.618 10.04 23.507 9.913 23.493 9.76C23.478 9.606 23.564 9.46 23.705 9.397C25.221 8.722 26.2 7.216 26.2 5.561C26.2 3.245 24.316 1.36 22 1.36C19.684 1.36 17.8 3.244 17.8 5.561C17.8 6.097 17.899 6.617 18.095 7.109C19.764 7.898 20.921 9.597 20.921 11.561C20.921 13.201 20.101 14.715 18.775 15.622C22.104 16.783 24.361 19.909 24.361 23.501L24.36 31Z" fill="white"/>
+</svg>
diff --git a/public/images/icons/quantum.svg b/public/images/icons/quantum.svg
new file mode 100644
index 0000000000..707b96b29b
--- /dev/null
+++ b/public/images/icons/quantum.svg
@@ -0,0 +1,11 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1_15)">
+<rect width="32" height="32" fill="white" fill-opacity="0.01" style="mix-blend-mode:multiply"/>
+<path d="M31.36 16C31.36 7.53 24.47 0.639999 16 0.639999C12.556 0.639999 9.20201 1.815 6.50501 3.94C6.21501 3.752 5.87101 3.64 5.50001 3.64C4.47501 3.64 3.64001 4.474 3.64001 5.5C3.64001 5.869 3.75101 6.212 3.93801 6.502C1.81401 9.197 0.640015 12.559 0.640015 16C0.640015 24.47 7.53001 31.36 16 31.36C19.442 31.36 22.799 30.185 25.496 28.061C25.786 28.248 26.13 28.36 26.5 28.36C27.525 28.36 28.36 27.525 28.36 26.5C28.36 26.13 28.248 25.787 28.061 25.497C30.185 22.799 31.36 19.442 31.36 16ZM27.556 24.972C27.256 24.764 26.892 24.64 26.5 24.64C26.117 24.64 25.761 24.757 25.465 24.956L11.207 10.698C12.749 10.487 14.348 10.359 16 10.359C23.936 10.359 30.64 12.942 30.64 15.999C30.64 17.709 28.494 19.374 24.897 20.455L25.104 21.144C27.625 20.387 29.458 19.355 30.466 18.172C30.094 20.643 29.094 22.991 27.556 24.972ZM30.461 13.836C28.365 11.368 22.766 9.64 16 9.64C14.122 9.64 12.296 9.783 10.559 10.05L7.04401 6.535C7.24301 6.239 7.36001 5.883 7.36001 5.5C7.36001 5.108 7.23701 4.746 7.02901 4.445C9.58601 2.459 12.75 1.36 16 1.36C23.335 1.36 29.41 6.788 30.461 13.836ZM5.50001 4.36C6.12801 4.36 6.64001 4.872 6.64001 5.5C6.64001 6.128 6.12801 6.64 5.50001 6.64C4.87201 6.64 4.36001 6.128 4.36001 5.5C4.36001 4.872 4.87201 4.36 5.50001 4.36ZM4.44401 7.027C4.74401 7.236 5.10701 7.36 5.50001 7.36C5.88301 7.36 6.23901 7.243 6.53501 7.044L20.792 21.302C19.252 21.513 17.653 21.64 16 21.64C8.06401 21.64 1.36001 19.058 1.36001 16C1.36001 14.291 3.50701 12.625 7.10401 11.544L6.89701 10.855C4.37501 11.613 2.54201 12.645 1.53301 13.828C1.90501 11.358 2.90501 9.008 4.44401 7.027ZM1.53801 18.163C3.63401 20.632 9.23301 22.36 16 22.36C17.881 22.36 19.707 22.217 21.44 21.95L24.955 25.465C24.756 25.761 24.639 26.117 24.639 26.5C24.639 26.892 24.762 27.255 24.97 27.555C22.415 29.541 19.248 30.64 16 30.64C8.66401 30.64 2.58901 25.211 1.53801 18.163ZM26.5 27.64C25.871 27.64 25.36 27.129 25.36 26.5C25.36 25.871 25.871 25.36 26.5 25.36C27.129 25.36 27.64 25.871 27.64 26.5C27.64 27.129 27.129 27.64 26.5 27.64Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_1_15">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/images/icons/transform--02.svg b/public/images/icons/transform--02.svg
new file mode 100644
index 0000000000..b6cfc3ab50
--- /dev/null
+++ b/public/images/icons/transform--02.svg
@@ -0,0 +1,10 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2_19)">
+<path d="M31 31.36H23C22.801 31.36 22.64 31.199 22.64 31V17C22.64 16.801 22.801 16.64 23 16.64H26.64V5.36001H23V4.64001H27C27.199 4.64001 27.36 4.80101 27.36 5.00001V16.64H31C31.199 16.64 31.36 16.801 31.36 17V31C31.36 31.199 31.199 31.36 31 31.36ZM23.36 30.64H30.639V17.36H23.36V30.64ZM5.00001 31.36C2.59601 31.36 0.640015 29.404 0.640015 27C0.640015 24.596 2.59601 22.64 5.00001 22.64C7.28301 22.64 9.16201 24.404 9.34501 26.64H20V27.361H9.34501C9.16201 29.597 7.28301 31.36 5.00001 31.36ZM5.00001 23.36C2.99301 23.36 1.36001 24.993 1.36001 27C1.36001 29.007 2.99301 30.64 5.00001 30.64C7.00701 30.64 8.64001 29.007 8.64001 27C8.64001 24.993 7.00701 23.36 5.00001 23.36ZM5.36001 20.5H4.64001V5.00001C4.64001 4.80101 4.80101 4.64001 5.00001 4.64001H13.64V1.00001C13.64 0.867007 13.713 0.745007 13.83 0.683007C13.947 0.621007 14.09 0.627007 14.2 0.701007L20.2 4.70101C20.3 4.76701 20.36 4.87901 20.36 5.00001C20.36 5.12101 20.3 5.23301 20.199 5.29901L14.199 9.29901C14.089 9.37301 13.946 9.38001 13.829 9.31701C13.713 9.25501 13.64 9.13301 13.64 9.00001V5.36001H5.36001V20.5ZM14.36 1.67301V8.32701L19.351 5.00001L14.36 1.67301Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_2_19">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>

From 2c1e53dac805747d632fab5df18d36763685e4c9 Mon Sep 17 00:00:00 2001
From: Randy Tolentino <randytolentino@ibm.com>
Date: Fri, 21 Jul 2023 10:18:55 -0700
Subject: [PATCH 07/16] feat(ecosystem): abstract reusable layout into
 component

---
 components/Advocates/AdvocatesJoin.vue        | 98 -------------------
 .../AdvocatesMeetTheAdvocates.vue             |  2 -
 components/Ecosystem/EcosystemJoin.vue        | 86 ----------------
 .../LayoutLeadSpaceJoinWithCards.vue          | 78 +++++++++++++++
 constants/links.ts                            |  1 -
 pages/advocates.vue                           | 39 +++++++-
 pages/ecosystem.vue                           | 42 +++++++-
 7 files changed, 157 insertions(+), 189 deletions(-)
 delete mode 100644 components/Advocates/AdvocatesJoin.vue
 delete mode 100644 components/Ecosystem/EcosystemJoin.vue
 create mode 100644 components/Layout/LeadSpace/LayoutLeadSpaceJoinWithCards.vue

diff --git a/components/Advocates/AdvocatesJoin.vue b/components/Advocates/AdvocatesJoin.vue
deleted file mode 100644
index 894a517a2a..0000000000
--- a/components/Advocates/AdvocatesJoin.vue
+++ /dev/null
@@ -1,98 +0,0 @@
-<template>
-  <section class="cds--grid">
-    <div class="cds--row">
-      <article
-        class="cds--col-lg-4 cds--col-md-4 advocates-join__feature advocates-join__intro"
-      >
-        <p>
-          The Qiskit advocate program is a global program that provides support
-          to the individuals who actively contribute to the Qiskit Community.
-        </p>
-        <UiCta
-          is-wider
-          :label="joinAction.label"
-          :segment="joinAction.segment"
-          :url="joinAction.url"
-        />
-      </article>
-      <div
-        v-for="benefit in advocateBenefits"
-        :key="`benefit-${benefit.icon}`"
-        class="cds--col-lg-4 cds--col-md-4 advocates-join__feature"
-      >
-        <UiCompactFeature
-          :description="benefit.description"
-          :icon="benefit.icon"
-          :title="benefit.title"
-        />
-      </div>
-    </div>
-  </section>
-</template>
-
-<script setup lang="ts">
-import { TextLink } from "~/types/links";
-
-interface Benefit {
-  icon: string;
-  title: string;
-  description: string;
-}
-
-const advocateBenefits: Benefit[] = [
-  {
-    icon: "high-five.svg",
-    title: "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",
-    title: "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",
-    title: "Invitation to events",
-    description:
-      "Active Qiskit Advocates will be invited to attend global events created for the quantum computing community.",
-  },
-];
-
-const joinAction: TextLink = {
-  url: "https://qisk.it/advocateapplication",
-  label: "Join the program",
-  segment: { cta: "join-the-program", location: "join-section" },
-};
-</script>
-
-<style lang="scss" scoped>
-@use "~/assets/scss/carbon.scss";
-
-.advocates-join {
-  &__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>
diff --git a/components/Advocates/MeetTheAdvocates/AdvocatesMeetTheAdvocates.vue b/components/Advocates/MeetTheAdvocates/AdvocatesMeetTheAdvocates.vue
index c025ef702d..e4f89813a4 100644
--- a/components/Advocates/MeetTheAdvocates/AdvocatesMeetTheAdvocates.vue
+++ b/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;
   }
diff --git a/components/Ecosystem/EcosystemJoin.vue b/components/Ecosystem/EcosystemJoin.vue
deleted file mode 100644
index 21d025e58b..0000000000
--- a/components/Ecosystem/EcosystemJoin.vue
+++ /dev/null
@@ -1,86 +0,0 @@
-<template>
-  <section class="cds--grid">
-    <div class="cds--row">
-      <article
-        class="cds--col-lg-4 cds--col-md-4 ecosystem-join__feature ecosystem-join__intro"
-      >
-        <p>
-          The Ecosystem consists of projects, tools, utilities, libraries and
-          tutorials from a broad community of developers and researchers. The
-          goal of the Ecosystem is to celebrate, support and accelerate
-          development of quantum technologies using Qiskit.
-        </p>
-        <UiCta
-          is-wider
-          :label="EcosystemJoinLink.label"
-          :segment="EcosystemJoinLink.segment"
-          :url="EcosystemJoinLink.url"
-        />
-      </article>
-      <div
-        v-for="tier in tiers"
-        :key="tier.name"
-        class="cds--col-lg-4 cds--col-md-4 ecosystem-join__feature"
-      >
-        <UiCompactFeature
-          :description="tier.description"
-          :icon="tier.icon"
-          :title="tier.name"
-        />
-      </div>
-    </div>
-  </section>
-</template>
-
-<script setup lang="ts">
-import { EcosystemJoinLink } from "~/constants/links";
-
-const tiers = [
-  {
-    name: "Main",
-    description: "The main Qiskit packages maintained by IBM Quantum.",
-    icon: "quantum.svg",
-  },
-  {
-    name: "Extensions",
-    description: "IBM Quantum supported Qiskit extensions.",
-    icon: "transform--02.svg",
-  },
-  {
-    name: "Community",
-    description:
-      "Software packages supported by the Qiskit community, not maintained by IBM Quantum.",
-    icon: "group.svg",
-  },
-];
-</script>
-
-<style lang="scss" scoped>
-@use "~/assets/scss/carbon.scss";
-
-.ecosystem-join {
-  &__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>
diff --git a/components/Layout/LeadSpace/LayoutLeadSpaceJoinWithCards.vue b/components/Layout/LeadSpace/LayoutLeadSpaceJoinWithCards.vue
new file mode 100644
index 0000000000..789948edcb
--- /dev/null
+++ b/components/Layout/LeadSpace/LayoutLeadSpaceJoinWithCards.vue
@@ -0,0 +1,78 @@
+<template>
+  <section class="cds--grid join-with-cards">
+    <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
+          v-if="cta"
+          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 {
+  margin-bottom: carbon.$spacing-12;
+
+  &__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>
diff --git a/constants/links.ts b/constants/links.ts
index 16bc0f2758..ac92c2f4ea 100644
--- a/constants/links.ts
+++ b/constants/links.ts
@@ -41,7 +41,6 @@ const SocialMedia: { [key: string]: TextLink } = {
 const EcosystemJoinLink: TextLink = {
   url: "https://github.com/qiskit-community/ecosystem#ecosystem--",
   label: "Join the ecosystem",
-  segment: { cta: "join-the-ecosystem", location: "ecosystem" },
 };
 
 export { LearnStartLearningUrl, SocialMedia, EcosystemJoinLink };
diff --git a/pages/advocates.vue b/pages/advocates.vue
index 9139a67f51..a82617c22a 100644
--- a/pages/advocates.vue
+++ b/pages/advocates.vue
@@ -7,7 +7,17 @@
       /><br />
       within the Qiskit community
     </LayoutLeadSpaceFixed>
-    <AdvocatesJoin />
+    <LayoutLeadSpaceJoinWithCards
+      :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>
+    </LayoutLeadSpaceJoinWithCards>
     <AdvocatesMeetTheAdvocates />
   </main>
 </template>
@@ -34,4 +44,31 @@ useSeoMeta({
   twitterCard: "summary_large_image",
   twitterDescription: description,
 });
+
+const advocatesJoinLink = {
+  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>
diff --git a/pages/ecosystem.vue b/pages/ecosystem.vue
index d23786acbf..c4639707fc 100644
--- a/pages/ecosystem.vue
+++ b/pages/ecosystem.vue
@@ -11,8 +11,29 @@
       <br />
       Qiskit community
     </LayoutLeadSpaceFixed>
-    <EcosystemJoin />
+    <LayoutLeadSpaceJoinWithCards
+      :cards="joinSectionCards"
+      :cta="EcosystemJoinLink"
+    >
+      <template #description>
+        <p>
+          The Ecosystem consists of projects, tools, utilities, libraries and
+          tutorials from a broad community of developers and researchers. The
+          goal of the Ecosystem is to celebrate, support and accelerate
+          development of quantum technologies using Qiskit.
+        </p>
+      </template>
+    </LayoutLeadSpaceJoinWithCards>
     <section id="ecosystem" class="cds--grid ecosystem-page">
+      <h2>Ecosystem Resources</h2>
+      <div class="cds--row">
+        <p class="cds--col-md-5 cds--col-lg-8 cds--col-xlg-7 cds--col-max-6">
+          The Ecosystem consists of projects, tools, utilities, libraries and
+          tutorials from a broad community of developers and researchers. The
+          goal of the Ecosystem is to celebrate, support and accelerate
+          development of quantum technologies using Qiskit.
+        </p>
+      </div>
       <UiFiltersResultsLayout class="ecosystem-page__results">
         <template #filters-on-m-l-screen>
           <UiFieldset class="ecosystem-page__categories" label="Tier">
@@ -132,6 +153,25 @@ useSeoMeta({
   twitterDescription: description,
 });
 
+const joinSectionCards = [
+  {
+    name: "Main",
+    description: "The main Qiskit packages maintained by IBM Quantum.",
+    icon: "quantum.svg",
+  },
+  {
+    name: "Extensions",
+    description: "IBM Quantum supported Qiskit extensions.",
+    icon: "transform--02.svg",
+  },
+  {
+    name: "Community",
+    description:
+      "Software packages supported by the Qiskit community, not maintained by IBM Quantum.",
+    icon: "group.svg",
+  },
+];
+
 /**
  * Tier selection
  */

From c13a3ad2eed255be37f3285a009d6b546f0a01c6 Mon Sep 17 00:00:00 2001
From: Randy Tolentino <randytolentino@ibm.com>
Date: Wed, 26 Jul 2023 08:43:25 -0700
Subject: [PATCH 08/16] feat(ecosystem): update leadspace card titles

---
 pages/ecosystem.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/pages/ecosystem.vue b/pages/ecosystem.vue
index 3dac8752a2..a68370ebb9 100644
--- a/pages/ecosystem.vue
+++ b/pages/ecosystem.vue
@@ -155,17 +155,17 @@ useSeoMeta({
 
 const joinSectionCards = [
   {
-    name: "Main",
+    name: "Main tier",
     description: "The main Qiskit packages maintained by IBM Quantum.",
     icon: "quantum.svg",
   },
   {
-    name: "Extensions",
+    name: "Extensions tier",
     description: "IBM Quantum supported Qiskit extensions.",
     icon: "transform--02.svg",
   },
   {
-    name: "Community",
+    name: "Community tier",
     description:
       "Software packages supported by the Qiskit community, not maintained by IBM Quantum.",
     icon: "group.svg",

From c50556749417b605006e11b1027e4a380040c1af Mon Sep 17 00:00:00 2001
From: Randy Tolentino <randytolentino@ibm.com>
Date: Thu, 27 Jul 2023 10:57:20 -0700
Subject: [PATCH 09/16] feat(ecosystem): remove extra paragraph

---
 pages/ecosystem.vue | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/pages/ecosystem.vue b/pages/ecosystem.vue
index a68370ebb9..bcad8aa506 100644
--- a/pages/ecosystem.vue
+++ b/pages/ecosystem.vue
@@ -26,14 +26,6 @@
     </LayoutLeadSpaceJoinWithCards>
     <section id="ecosystem" class="cds--grid ecosystem-page">
       <h2>Ecosystem Resources</h2>
-      <div class="cds--row">
-        <p class="cds--col-md-5 cds--col-lg-8 cds--col-xlg-7 cds--col-max-6">
-          The Ecosystem consists of projects, tools, utilities, libraries and
-          tutorials from a broad community of developers and researchers. The
-          goal of the Ecosystem is to celebrate, support and accelerate
-          development of quantum technologies using Qiskit.
-        </p>
-      </div>
       <UiFiltersResultsLayout class="ecosystem-page__results">
         <template #filters-on-m-l-screen>
           <UiFieldset class="ecosystem-page__categories" label="Tier">

From dd6877ce7c33794bb87f638a5b263dbfceefb503 Mon Sep 17 00:00:00 2001
From: Randy Tolentino <randytolentino@ibm.com>
Date: Thu, 27 Jul 2023 13:58:01 -0700
Subject: [PATCH 10/16] feat(join-with-cards): relocate component to Ui
 directory

---
 .../UiJoinWithCards.vue}                                   | 0
 pages/advocates.vue                                        | 7 ++-----
 pages/ecosystem.vue                                        | 7 ++-----
 3 files changed, 4 insertions(+), 10 deletions(-)
 rename components/{Layout/LeadSpace/LayoutLeadSpaceJoinWithCards.vue => Ui/UiJoinWithCards.vue} (100%)

diff --git a/components/Layout/LeadSpace/LayoutLeadSpaceJoinWithCards.vue b/components/Ui/UiJoinWithCards.vue
similarity index 100%
rename from components/Layout/LeadSpace/LayoutLeadSpaceJoinWithCards.vue
rename to components/Ui/UiJoinWithCards.vue
diff --git a/pages/advocates.vue b/pages/advocates.vue
index c82da45970..6044fffc6c 100644
--- a/pages/advocates.vue
+++ b/pages/advocates.vue
@@ -7,17 +7,14 @@
       /><br />
       within the Qiskit community
     </LayoutLeadSpaceFixed>
-    <LayoutLeadSpaceJoinWithCards
-      :cards="joinSectionCards"
-      :cta="advocatesJoinLink"
-    >
+    <UiJoinWithCards :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>
-    </LayoutLeadSpaceJoinWithCards>
+    </UiJoinWithCards>
     <AdvocatesMeetTheAdvocates />
   </article>
 </template>
diff --git a/pages/ecosystem.vue b/pages/ecosystem.vue
index bcad8aa506..d79975a418 100644
--- a/pages/ecosystem.vue
+++ b/pages/ecosystem.vue
@@ -11,10 +11,7 @@
       <br />
       Qiskit community
     </LayoutLeadSpaceFixed>
-    <LayoutLeadSpaceJoinWithCards
-      :cards="joinSectionCards"
-      :cta="EcosystemJoinLink"
-    >
+    <UiJoinWithCards :cards="joinSectionCards" :cta="EcosystemJoinLink">
       <template #description>
         <p>
           The Ecosystem consists of projects, tools, utilities, libraries and
@@ -23,7 +20,7 @@
           development of quantum technologies using Qiskit.
         </p>
       </template>
-    </LayoutLeadSpaceJoinWithCards>
+    </UiJoinWithCards>
     <section id="ecosystem" class="cds--grid ecosystem-page">
       <h2>Ecosystem Resources</h2>
       <UiFiltersResultsLayout class="ecosystem-page__results">

From 83cbb3b3030bb36070a9ad5860b1b8d55b12cfe7 Mon Sep 17 00:00:00 2001
From: Randy Tolentino <randytolentino@ibm.com>
Date: Fri, 28 Jul 2023 06:57:09 -0700
Subject: [PATCH 11/16] feat(ecosystem): update styles, types, and prop

---
 components/Ui/UiJoinWithCards.vue |  5 +----
 constants/links.ts                |  7 +------
 pages/advocates.vue               | 18 ++++++++++++++++--
 pages/ecosystem.vue               | 17 +++++++++++++++--
 4 files changed, 33 insertions(+), 14 deletions(-)

diff --git a/components/Ui/UiJoinWithCards.vue b/components/Ui/UiJoinWithCards.vue
index 789948edcb..df482b418f 100644
--- a/components/Ui/UiJoinWithCards.vue
+++ b/components/Ui/UiJoinWithCards.vue
@@ -6,7 +6,6 @@
       >
         <slot name="description" />
         <UiCta
-          v-if="cta"
           is-wider
           :label="cta.label"
           :segment="cta.segment"
@@ -38,7 +37,7 @@ interface Card {
 }
 
 interface Props {
-  cta?: TextLink;
+  cta: TextLink;
   cards: Card[];
 }
 
@@ -49,8 +48,6 @@ defineProps<Props>();
 @use "~/assets/scss/carbon.scss";
 
 .join-with-cards {
-  margin-bottom: carbon.$spacing-12;
-
   &__feature {
     @include carbon.breakpoint-down(lg) {
       margin-bottom: carbon.$spacing-07;
diff --git a/constants/links.ts b/constants/links.ts
index ac92c2f4ea..828b0b9d59 100644
--- a/constants/links.ts
+++ b/constants/links.ts
@@ -38,9 +38,4 @@ const SocialMedia: { [key: string]: TextLink } = {
   },
 } as const;
 
-const EcosystemJoinLink: TextLink = {
-  url: "https://github.com/qiskit-community/ecosystem#ecosystem--",
-  label: "Join the ecosystem",
-};
-
-export { LearnStartLearningUrl, SocialMedia, EcosystemJoinLink };
+export { LearnStartLearningUrl, SocialMedia };
diff --git a/pages/advocates.vue b/pages/advocates.vue
index 6044fffc6c..db384495c3 100644
--- a/pages/advocates.vue
+++ b/pages/advocates.vue
@@ -7,7 +7,11 @@
       /><br />
       within the Qiskit community
     </LayoutLeadSpaceFixed>
-    <UiJoinWithCards :cards="joinSectionCards" :cta="advocatesJoinLink">
+    <UiJoinWithCards
+      class="advocates-page__join-section"
+      :cards="joinSectionCards"
+      :cta="advocatesJoinLink"
+    >
       <template #description>
         <p>
           The Qiskit advocate program is a global program that provides support
@@ -20,6 +24,8 @@
 </template>
 
 <script setup lang="ts">
+import { TextLink } from "types/links";
+
 definePageMeta({
   layout: "default-max",
   pageTitle: "Qiskit Advocates",
@@ -42,7 +48,7 @@ useSeoMeta({
   twitterDescription: description,
 });
 
-const advocatesJoinLink = {
+const advocatesJoinLink: TextLink = {
   url: "https://qisk.it/advocateapplication",
   label: "Join the program",
   segment: { cta: "join-the-program", location: "advocates" },
@@ -69,3 +75,11 @@ const joinSectionCards = [
   },
 ];
 </script>
+
+<style lang="scss" scoped>
+@use "~/assets/scss/carbon.scss";
+
+.advocates-page__join-section {
+  margin-bottom: carbon.$spacing-12;
+}
+</style>
diff --git a/pages/ecosystem.vue b/pages/ecosystem.vue
index d79975a418..650949431a 100644
--- a/pages/ecosystem.vue
+++ b/pages/ecosystem.vue
@@ -11,7 +11,11 @@
       <br />
       Qiskit community
     </LayoutLeadSpaceFixed>
-    <UiJoinWithCards :cards="joinSectionCards" :cta="EcosystemJoinLink">
+    <UiJoinWithCards
+      class="ecosystem-page__join-section"
+      :cards="joinSectionCards"
+      :cta="EcosystemJoinLink"
+    >
       <template #description>
         <p>
           The Ecosystem consists of projects, tools, utilities, libraries and
@@ -113,10 +117,10 @@
 </template>
 
 <script setup lang="ts">
+import { TextLink } from "types/links";
 import rawMembers from "~/content/ecosystem/members.json";
 import rawTiers from "~/content/ecosystem/tiers.json";
 import { Member, Tier } from "~/types/ecosystem";
-import { EcosystemJoinLink } from "~/constants/links";
 
 const members = rawMembers as Member[];
 const config = useRuntimeConfig();
@@ -161,6 +165,11 @@ const joinSectionCards = [
   },
 ];
 
+const EcosystemJoinLink: TextLink = {
+  url: "https://github.com/qiskit-community/ecosystem#ecosystem--",
+  label: "Join the ecosystem",
+};
+
 /**
  * Tier selection
  */
@@ -293,6 +302,10 @@ const filteredMembersSorted = computed<Member[]>(() => {
 @use "~/assets/scss/helpers/classes.scss";
 
 .ecosystem-page {
+  &__join-section {
+    margin-bottom: carbon.$spacing-12;
+  }
+
   &__tier-panel {
     margin-top: carbon.$spacing-07;
   }

From 672a12a7fee589a12618b23e079a47bbfdb5915b Mon Sep 17 00:00:00 2001
From: Randy <randytolentino@ibm.com>
Date: Fri, 28 Jul 2023 09:49:49 -0700
Subject: [PATCH 12/16] Update components/Ui/UiJoinWithCards.vue
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Eddybrando Vásquez <eddybrando.vasquez@gmail.com>
---
 components/Ui/UiJoinWithCards.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Ui/UiJoinWithCards.vue b/components/Ui/UiJoinWithCards.vue
index df482b418f..4b90934312 100644
--- a/components/Ui/UiJoinWithCards.vue
+++ b/components/Ui/UiJoinWithCards.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="cds--grid join-with-cards">
+  <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"

From 781589b792961e89e9c605d2e8d4c3c756ffc80c Mon Sep 17 00:00:00 2001
From: Randy <randytolentino@ibm.com>
Date: Fri, 28 Jul 2023 09:50:02 -0700
Subject: [PATCH 13/16] Update pages/ecosystem.vue
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Eddybrando Vásquez <eddybrando.vasquez@gmail.com>
---
 pages/ecosystem.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/ecosystem.vue b/pages/ecosystem.vue
index 387bec5445..e8153e275c 100644
--- a/pages/ecosystem.vue
+++ b/pages/ecosystem.vue
@@ -164,7 +164,7 @@ const joinSectionCards = [
   },
 ];
 
-const EcosystemJoinLink: TextLink = {
+const ecosystemJoinLink: TextLink = {
   url: "https://github.com/qiskit-community/ecosystem#ecosystem--",
   label: "Join the ecosystem",
 };

From 17d475260c7ddf3d9cc94eed3642ab6cdd551ada Mon Sep 17 00:00:00 2001
From: Randy Tolentino <randytolentino@ibm.com>
Date: Fri, 28 Jul 2023 09:51:21 -0700
Subject: [PATCH 14/16] feat(ecosystem): update link variable in use

---
 pages/ecosystem.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/pages/ecosystem.vue b/pages/ecosystem.vue
index e8153e275c..90f68bc0b5 100644
--- a/pages/ecosystem.vue
+++ b/pages/ecosystem.vue
@@ -14,7 +14,7 @@
     <UiJoinWithCards
       class="ecosystem-page__join-section"
       :cards="joinSectionCards"
-      :cta="EcosystemJoinLink"
+      :cta="ecosystemJoinLink"
     >
       <template #description>
         <p>
@@ -99,7 +99,7 @@
           <div class="ecosystem-page__tier-panel">
             <p v-if="filteredMembersSorted.length === 0" class="cds--col">
               Try using wider search criteria, or consider
-              <UiLink v-bind="EcosystemJoinLink">joining the ecosystem.</UiLink>
+              <UiLink v-bind="ecosystemJoinLink">joining the ecosystem.</UiLink>
             </p>
             <div v-else class="cds--row ecosystem-page__members">
               <EcosystemCard

From 1e038dd072a8b537b35ec82e0e26099d8b466883 Mon Sep 17 00:00:00 2001
From: Randy Tolentino <randytolentino@ibm.com>
Date: Mon, 31 Jul 2023 06:05:58 -0700
Subject: [PATCH 15/16] feat(ecosystem): update copy

---
 pages/ecosystem.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/pages/ecosystem.vue b/pages/ecosystem.vue
index 90f68bc0b5..826062abf4 100644
--- a/pages/ecosystem.vue
+++ b/pages/ecosystem.vue
@@ -26,7 +26,14 @@
       </template>
     </UiJoinWithCards>
     <section id="ecosystem" class="cds--grid ecosystem-page">
-      <h2>Ecosystem Resources</h2>
+      <h2>Explore the ecosystem resources</h2>
+      <div class="cds--row">
+        <p class="cds--col-md-5 cds--col-lg-8 cds--col-xlg-7 cds--col-max-6">
+          Browse through the ecosystem using search, filter, and sort options.
+          Find inspiration for your own projects or collaborate with others to
+          unlock the true potential of Qiskit.
+        </p>
+      </div>
       <UiFiltersResultsLayout class="ecosystem-page__results">
         <template #filters-on-m-l-screen>
           <UiFieldset class="ecosystem-page__categories" label="Tier">

From b2adfb146fb92920e807a59d111db044c25c6b98 Mon Sep 17 00:00:00 2001
From: Randy Tolentino <randytolentino@ibm.com>
Date: Mon, 31 Jul 2023 09:14:23 -0700
Subject: [PATCH 16/16] feat(ecosystem): update copy

---
 pages/ecosystem.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/pages/ecosystem.vue b/pages/ecosystem.vue
index 826062abf4..67f9fbbc17 100644
--- a/pages/ecosystem.vue
+++ b/pages/ecosystem.vue
@@ -26,12 +26,12 @@
       </template>
     </UiJoinWithCards>
     <section id="ecosystem" class="cds--grid ecosystem-page">
-      <h2>Explore the ecosystem resources</h2>
+      <h2>Explore the ecosystem projects</h2>
       <div class="cds--row">
         <p class="cds--col-md-5 cds--col-lg-8 cds--col-xlg-7 cds--col-max-6">
           Browse through the ecosystem using search, filter, and sort options.
           Find inspiration for your own projects or collaborate with others to
-          unlock the true potential of Qiskit.
+          unlock the full potential of Qiskit.
         </p>
       </div>
       <UiFiltersResultsLayout class="ecosystem-page__results">