feat(home): 1XP banner

components/Learn/LeadSpace/LearnLeadSpace.vue

@@ -12,28 +12,11 @@
             classes="learn-lead-space__dropdown cds--col-md-4 cds--col-lg-4 cds--no-gutter"
           />
         </div>
-        <UiCta
-          class="learn-lead-space__cta"
-          label="Start learning"
-          :segment="{ cta: 'start-learning', location: 'header' }"
-          url="/learn/course/introduction-course"
-        />
       </div>
     </div>
-    <transition name="scroll-in">
-      <!-- FIX: This is never rendered -->
-      <LearnContentMenu
-        v-if="!appMegaDropdownMenuIsVisible"
-        class="learn-lead-space__dropdown-fixed"
-      />
-    </transition>
   </header>
 </template>
 
-<script setup lang="ts">
-const appMegaDropdownMenuIsVisible = ref(true);
-</script>
-
 <style lang="scss" scoped>
 @use "~/assets/scss/carbon.scss";
 @use "~/assets/scss/helpers/index.scss" as qiskit;
@@ -45,7 +28,7 @@ const appMegaDropdownMenuIsVisible = ref(true);
     carbon.$blue-40 25%,
     carbon.$purple-70 100%
   );
-  height: 37.5rem;
+  height: 17rem;
 
   &__headline {
     color: qiskit.$text-color-white;
@@ -72,7 +55,7 @@ const appMegaDropdownMenuIsVisible = ref(true);
       @include qiskit.responsive-grid-bg-strip(
         "/images/grid/grid-hero-textbook.svg",
         auto,
-        95%
+        200%
       );
 
       display: flex;
@@ -82,12 +65,16 @@ const appMegaDropdownMenuIsVisible = ref(true);
 
   &__logo {
     position: absolute;
-    top: 50%;
+    top: 150%;
     left: 50%;
     width: 100%;
     padding-top: 100%;
     transform: translate(-50%, -50%);
 
+    @include carbon.breakpoint-up(md) {
+      top: 110%;
+    }
+
     &-container {
       // the #{_______} is added to force scss to compile carbon.$spacing-11 value.
       --additional-width: #{carbon.$spacing-11};
@@ -114,29 +101,5 @@ const appMegaDropdownMenuIsVisible = ref(true);
     position: relative;
     z-index: 1;
   }
-
-  &__dropdown-fixed {
-    position: fixed;
-    top: 0;
-    transition: 0.3s ease-in-out;
-    width: 100%;
-    z-index: 100;
-  }
-
-  &__cta {
-    align-self: flex-end;
-
-    // this is necessary to respect z ordering with the absolute elements.
-    position: relative;
-  }
-}
-
-.scroll-in-enter,
-.scroll-in-leave-to {
-  margin-top: -40px;
-}
-
-.scroll-in-leave-to {
-  opacity: 0;
 }
 </style>

components/LearnCourse/LearnCourse.vue

@@ -1,5 +1,16 @@
 <template>
   <article class="learn-course">
+    <OneXPBanner
+      copy="🎉 Qiskit is getting a new learning experience on IBM Quantum!"
+      :cta="{
+        label: 'Check it out',
+        segment: {
+          cta: 'go-to-1xp-learning',
+          location: '1xp-banner',
+        },
+        url: 'https://example.com',
+      }"
+    />
     <LearnContentMenu class="learn-course__content-menu" />
     <LayoutLeadSpaceWithImage
       :cta="startLearningCta"

components/OneXP/OneXPBanner.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="one-xp-banner">
+    <div class="cds--grid">
+      <div class="one-xp-banner__container">
+        <span class="one-xp-banner__copy" v-text="copy" />
+        <UiCta
+          class="one-xp-banner__cta"
+          kind="ghost"
+          :label="cta.label"
+          :segment="cta.segment"
+          :url="cta.url"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  copy: string;
+  cta: {
+    label: string;
+    segment: CtaClickedEventProp;
+    url: string;
+  };
+}
+
+defineProps<Props>();
+</script>
+
+<style lang="scss" scoped>
+@use "~/assets/scss/carbon.scss";
+
+.one-xp-banner {
+  background-image: linear-gradient(to right, carbon.$purple-10, carbon.$white);
+  padding: carbon.$spacing-05 0;
+
+  &__container {
+    display: inline-flex;
+    flex-direction: column;
+    gap: carbon.$spacing-03;
+
+    @include carbon.breakpoint-up(lg) {
+      flex-direction: row;
+    }
+  }
+
+  &__copy {
+    font-weight: bold;
+  }
+
+  &__cta {
+    // HACK: Override UiCta's default padding. We might want to update UiCta to
+    // allow for this if we need to do it again.
+    padding: 0 !important;
+  }
+}
+</style>

components/OneXP/OneXPPageSection.vue

@@ -0,0 +1,172 @@
+<template>
+  <section class="page-section">
+    <div class="one-xp-page-section">
+      <div class="one-xp-page-section__container cds--grid">
+        <div class="one-xp-page-section__copy-section">
+          <h2 class="one-xp-page-section__copy-section__title">
+            <slot name="title" />
+          </h2>
+          <div class="one-xp-page-section__copy-section__features">
+            <div
+              v-for="feature in features"
+              :key="feature.title"
+              class="one-xp-page-section__copy-section__features__feature"
+            >
+              <h3 v-if="feature.title" v-text="feature.title" />
+              <p
+                v-for="description in feature.descriptionParagraphs"
+                :key="description"
+                class="one-xp-page-section__copy-section__features__feature__description"
+                v-text="description"
+              />
+              <div
+                class="one-xp-page-section__copy-section__features__feature__ctas"
+              >
+                <UiCta
+                  kind="one-xp"
+                  :label="feature.cta.label"
+                  :segment="feature.cta.segment"
+                  :url="feature.cta.url"
+                />
+                <UiCta
+                  v-if="feature.secondaryCta"
+                  kind="ghost"
+                  :label="feature.secondaryCta.label"
+                  :segment="feature.secondaryCta.segment"
+                  :url="feature.secondaryCta.url"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="one-xp-page-section__image-section">
+          <nuxt-img
+            :alt="imgAlt"
+            class="one-xp-page-section__image-section__image"
+            format="webp"
+            sizes="sm:800px"
+            :src="imgSrc"
+          />
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { CtaClickedEventProp } from "~/types/segment";
+
+interface FeatureCta {
+  label: string;
+  segment: CtaClickedEventProp;
+  url: string;
+}
+
+interface Feature {
+  title?: string;
+  descriptionParagraphs: string[];
+  cta: FeatureCta;
+  secondaryCta?: FeatureCta;
+}
+interface Props {
+  features: Feature[];
+  imgAlt: string;
+  imgSrc: string;
+}
+
+defineProps<Props>();
+</script>
+
+<style lang="scss" scoped>
+@use "~/assets/scss/carbon.scss";
+
+.one-xp-page-section {
+  background-color: carbon.$cool-gray-10;
+
+  &__container {
+    display: flex;
+    flex-direction: column;
+    gap: carbon.$spacing-08;
+    padding-bottom: carbon.$spacing-09;
+    padding-top: carbon.$spacing-09;
+
+    @include carbon.breakpoint-up(md) {
+      gap: carbon.$spacing-09;
+    }
+
+    @include carbon.breakpoint-up(lg) {
+      flex-direction: row;
+    }
+
+    @include carbon.breakpoint-up(xlg) {
+      gap: carbon.$spacing-13;
+    }
+  }
+
+  &__copy-section {
+    flex: auto;
+
+    &__title {
+      margin-bottom: carbon.$spacing-07;
+    }
+
+    &__features {
+      display: flex;
+      flex-direction: column;
+      gap: carbon.$spacing-08;
+
+      @include carbon.breakpoint-up(md) {
+        flex-direction: row;
+        gap: carbon.$spacing-10;
+      }
+
+      @include carbon.breakpoint-up(xlg) {
+        gap: carbon.$spacing-12;
+      }
+
+      &__feature {
+        flex: 1;
+
+        &__description {
+          margin-bottom: carbon.$spacing-06;
+          max-width: 28rem;
+        }
+
+        &__ctas {
+          display: flex;
+          gap: carbon.$spacing-06;
+        }
+      }
+    }
+  }
+
+  &__image-section {
+    align-items: center;
+    display: grid;
+    flex: 0;
+
+    @include carbon.breakpoint-up(lg) {
+      justify-content: center;
+    }
+
+    @include carbon.breakpoint-down(lg) {
+      margin-left: -0.5rem;
+      margin-right: -0.5rem;
+    }
+
+    &__image {
+      max-width: 30rem;
+      width: 100%;
+
+      @include carbon.breakpoint-up(lg) {
+        width: 22rem;
+      }
+
+      @include carbon.breakpoint-up(xlg) {
+        max-width: initial;
+        width: 30rem;
+      }
+    }
+  }
+}
+</style>

components/Ui/UiCta.vue

@@ -32,7 +32,7 @@ import { CtaClickedEventProp } from "~/types/segment";
 
 interface Props {
   isWider?: boolean;
-  kind?: "primary" | "secondary" | "ghost";
+  kind?: "primary" | "secondary" | "ghost" | "one-xp";
   label: string;
   segment?: CtaClickedEventProp;
   theme?: "light" | "dark";
@@ -196,6 +196,14 @@ const iconPerLinkType = computed(() => {
     }
   }
 
+  &_one-xp {
+    background-image: linear-gradient(
+      90deg,
+      carbon.$purple-70 50%,
+      carbon.$blue-60 100%
+    );
+  }
+
   /*
     Icons Styles
   */