diff --git a/components/competition/competitor-cards.vue b/components/competition/competitor-cards.vue deleted file mode 100644 index ef97320a60e0dc5c8c7424c7c74f1153139b59bf..0000000000000000000000000000000000000000 --- a/components/competition/competitor-cards.vue +++ /dev/null @@ -1,126 +0,0 @@ -<script lang="ts"> -import Vue from 'vue'; - -export default Vue.extend({ - props: { - data: { - type: Object, - required: true, - }, - }, -}); -</script> - -<template> - <div class="competitor-cards-wrapper"> - <div class="header"> - <SlpTypography variant="heading2-bold" tag="h2"> - More comparisons</SlpTypography - > - <SlpButton - class="competition-link tertiary-button" - variant="tertiary" - href="/competition/" - data-ga-name="link to gitlab competition" - data-ga-location="body" - >See how GitLab compares - <SlpIcon name="chevron-lg-right" variant="product" hex-color="#171321" - /></SlpButton> - </div> - <div class="competitors"> - <div v-for="competitor in data.cards" :key="competitor.name" class="card"> - <div class="stage"> - <SlpIcon - :name="competitor.icon" - size="md" - variant="marketing" - class="icon" - /> - <SlpTypography variant="body2" - >{{ competitor.stage }} stage</SlpTypography - > - </div> - <SlpTypography variant="heading5-bold" class="title" - >GitLab vs {{ competitor.name }}</SlpTypography - > - <SlpTypography variant="body1" class="description">{{ - competitor.description - }}</SlpTypography> - <SlpButton - variant="tertiary" - class="tertiary-button" - :href="competitor.link" - :data-ga-name="competitor.data_ga_name" - :data-ga-location="competitor.data_ga_location" - >View comparison - <SlpIcon - name="chevron-lg-right" - variant="product" - hex-color="#171321" - /></SlpButton> - </div> - </div> - </div> -</template> - -<style lang="scss" scoped> -.competitor-cards-wrapper { - padding: $spacing-96 0; -} -.header { - display: flex; - flex-direction: column; - width: 100%; - justify-content: flex-start; - .competition-link { - margin-right: $spacing-24; - } - @media (min-width: $breakpoint-lg) { - flex-direction: row; - align-items: center; - justify-content: space-between; - } -} -.competitors { - display: flex; - flex-direction: column; - margin-top: 40px; - align-items: center; - @media (min-width: $breakpoint-lg) { - flex-direction: row; - } -} -.card { - margin-right: $spacing-32; - display: flex; - flex-direction: column; - align-items: flex-start; - padding: 32px; - min-height: 360px; - background: $color-surface-50; - border-radius: 4px; - @media (max-width: $breakpoint-md) { - margin-bottom: $spacing-16; - margin-right: 0; - } - .stage { - display: flex; - align-items: center; - margin-bottom: $spacing-32; - .icon { - margin-right: $spacing-8; - width: 24px; - height: 24px; - } - } - .title { - margin-bottom: $spacing-16; - } - .description { - margin-bottom: auto; - } -} -.tertiary-button { - padding-left: 0; -} -</style> diff --git a/components/competition/index.vue b/components/competition/index.vue index bfdabc7bc6e5a060874941da98f0a4dd55bb12d9..52462d35cba8b71774c40cc60acf99c4d10e61d7 100644 --- a/components/competition/index.vue +++ b/components/competition/index.vue @@ -13,7 +13,6 @@ export { default as Header } from './header.vue'; export { default as Legend } from './legend.vue'; export { default as TabOverview } from './tab-overview.vue'; export { default as TabAnalysis } from './tab-analysis.vue'; -export { default as CompetitorCards } from './competitor-cards.vue'; export { default as TabsIntro } from './tabs-intro.vue'; export default Comparison; diff --git a/pages/competition/github.vue b/pages/competition/github.vue index 4f18a7088afcee5a3848802fa6584c2fcd6ffc4e..87b74703842f59f66013142296b98f9124f1befb 100644 --- a/pages/competition/github.vue +++ b/pages/competition/github.vue @@ -6,7 +6,6 @@ import { TabsIntro, Legend, TabAnalysis, - CompetitorCards, } from '~/components/competition/index.vue'; import { NextStep } from '~/components/common/index.vue'; @@ -18,7 +17,6 @@ export default Vue.extend({ NextStep, TabsIntro, Legend, - CompetitorCards, TabAnalysis, }, nuxtI18n: false, @@ -64,9 +62,6 @@ export default Vue.extend({ <SlpContainer> <Legend :data="data.legend" class="legend-card" /> </SlpContainer> - <SlpContainer variant="light-purple-100" class="slp-my-96"> - <CompetitorCards :data="data.competitor_cards" /> - </SlpContainer> <SlpContainer class="slp-mt-96 next-steps__container" variant="gradient"> <NextStep /> </SlpContainer>