Adjusting banner based on feedback (#317)

Signed-off-by: hayleycd <cook.hayley@gmail.com>

components/twoColumnAnnouncement.vue

@@ -0,0 +1,57 @@
+<template>
+    <section class="py-40 md:py-80" 
+    :class="[backgroundColour]" 
+    :data-header-text="[(backgroundColour === 'bg-purple-dark') ? 'text-white' : (backgroundColour === 'bg-pastel-blue') ? 'text-purple-dark' : 'text-gray-dark']"
+    >
+        <div class="md:flex justify-between container inner" :class="[textAlignment != 'textRight' ? 'items-center' : 'items-start']">
+            <div class="w-full md:w-1/2 step-delay_1 md:mr-80 md:order-1 order-2">
+                <h1 class="text-24 leading-23 md:leading-32 mb-32" :class="[!bgColour ? 'text-purple-dark' : 'text-purple-dark']">{{header}}</h1>
+                <div v-if="textAlignment != 'textRight'" :class="[!bgColour ? 'text-purple-dark' : 'text-purple-dark']" class="mt-8 md:block hidden" v-html="$md.render(text)"></div>
+                <div v-if="textAlignment != 'textRight'" class="block md:hidden"><a :href="link"><img :alt="`${header} image`" :src="imageAsset" /></a></div>
+            </div>
+            <div v-if="!card" class="w-full md:w-1/2 step-delay_2 mt-32 md:mt-0 md:order-2">
+                <div v-if="textAlignment != 'textRight'" class="md:block hidden"><a :href="link"><img :alt="`${header} image`" :src="imageAsset" /></a></div>
+            </div>
+                <div v-else v-html="$md.render(text)"></div>
+                <div v-if="textAlignment != 'textRight'" :class="[!bgColour ? 'text-purple-dark' : 'text-white']" class="mt-8 block md:hidden" v-html="$md.render(text)"></div>
+            </div>
+        </div>
+    </section>
+</template>
+<script lang="js">
+export default {
+
+    components: {
+
+    },
+
+    props: {
+        header: { type: String, default: null },
+        text: { type: String, default: null },
+        imageAsset: { type: String, default: null },
+        alignment: { type: String, default: null },
+        bgColour: { type: String, default: null },
+        card: { type: Object, default: null },
+        link: { type: String, default: null },
+    },
+
+    data: () => ({
+    }),
+
+    computed: {
+        backgroundColour(){
+            return `${this.bgColour}`;
+        },
+        textAlignment() {
+            return this.alignment;
+        },
+    },
+
+    mounted() {
+    },
+
+    methods: {
+    }
+
+};
+</script>

content/home.md

@@ -4,6 +4,15 @@ date: 2021-07-12T15:33:03.264Z
 description: Homepage
 thumbnail: /img/icon.png
 sections:
+  - type: twoColumnAnnouncement
+    alignment: imageRight
+    bgColour: bg-pastel-orange
+    cardTitle: Join us in Salt Lake City for [SigstoreCon!](https://events.linuxfoundation.org/sigstorecon-supply-chain-day/)
+    text: Register now for our [Co-located KubeCon event](https://events.linuxfoundation.org/sigstorecon-supply-chain-day/), November 12, 2024
+    header: Join us in Salt Lake City for SigstoreCon!
+    imageAsset: /img/sigstorecon2024.svg
+    isScreenHeight: false
+    link: https://events.linuxfoundation.org/sigstorecon-supply-chain-day/
   - ctaStyle: solidCtaPurple
     showSupportedBy: true
     text: Making sure your software is what it claims to be.

layouts/default.vue

@@ -4,7 +4,6 @@
       loading...
   </div>
   <div v-else>
-    <a href=https://events.linuxfoundation.org/sigstorecon-supply-chain-day/ ><img src=~/static/img/SigstoreCon2024Banner.svg></img></a>
     <Header :navigation="headerNavLinks" :socialLinks="footerSocialLinks" />
         <main>
             <Nuxt />