add new cosmic section

components/cta-link.vue

@@ -0,0 +1,44 @@
+<template>
+  <sys-paragraph-2 class="cta">
+    <a
+      :href="to"
+      target="_blank"
+    >
+      <slot name="before" />
+      {{ caption }}
+      <slot name="after" />
+    </a>
+  </sys-paragraph-2>
+</template>
+
+<style scoped>
+  .cta {
+    font-weight: 400;
+    font-family: var(--font-family-slab);
+    font-style: normal;
+    text-align: center;
+  }
+
+  .cta > a {
+    color: #574F4A;
+  }
+  .dark-mode .cta > a {
+    color: #CCCCCC;
+  }
+</style>
+
+<script>
+
+  export default {
+    props: {
+      to: {
+        type: String,
+        required: true
+      },
+      caption: {
+        type: String,
+        required: true
+      }
+    }
+  }
+</script>

components/index/cosmic.vue

@@ -0,0 +1,86 @@
+<template>
+  <section
+    :class="classes"
+  >
+    <div class="copy">
+      <sys-header-2>POP!_OS IS EVOLVING</sys-header-2>
+
+      <sys-paragraph-1>
+        COSMIC, our new desktop environment, brings new features, refinements,
+        core apps, stability, security, and performance to Pop!_OS users
+        everywhere.
+      </sys-paragraph-1>
+
+      <cta-link
+        to="https://system76.com/cosmic"
+        caption="Learn more about COSMIC"
+        :class="classes"
+      >
+        <template slot="after">
+          <font-awesome-icon
+            :icon="faAngleRight"
+            size="1x"
+          />
+        </template>
+      </cta-link>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+  section {
+    margin: 4rem auto;
+    max-width: 1280px;
+    padding: 0 1rem;
+    width: 100%;
+  }
+  .copy {
+    grid-column: 1 / 2;
+    margin: 0 auto 1rem;
+    max-width: 80ch;
+  }
+  .copy > *:first-child {
+    margin-top: 0;
+    text-align: center;
+  }
+  .copy > *:last-child {
+    margin-bottom: 0;
+  }
+
+  @media (width >= 900px) {
+    .copy {
+      grid-column: 1 / 3;
+    }
+  }
+
+  @media (width >= 1280px) {
+    .copy {
+      grid-column: 1 / span 6;
+      margin: 0 auto 1rem;
+      max-width: 80ch;
+    }
+  }
+</style>
+
+<script>
+  import { faAngleRight } from '@fortawesome/free-solid-svg-icons'
+  import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+
+  import CtaLink from '~/components/cta-link'
+  import color from '~/mixins/color'
+
+  export default {
+    components: {
+      CtaLink,
+      FontAwesomeIcon
+    },
+
+    mixins: [
+      color
+    ],
+
+    computed: {
+      faAngleRight: () => faAngleRight
+    }
+  }
+</script>

pages/index.vue

@@ -2,6 +2,7 @@
   <main :class="classes">
     <index-head />
 
+    <index-cosmic />
     <index-streamline />
     <index-development />
     <index-testimonials />
@@ -44,6 +45,7 @@
 </style>
 
 <script>
+  import IndexCosmic from '~/components/index/cosmic'
   import IndexDevelopment from '~/components/index/development'
   import IndexFoot from '~/components/index/foot'
   import IndexFootnotes from '~/components/index/footnotes'
@@ -59,6 +61,7 @@
 
   export default {
     components: {
+      IndexCosmic,
       IndexDevelopment,
       IndexFoot,
       IndexFootnotes,