Add Video teaser

src/lib/MenoTeaser.svelte

@@ -0,0 +1,31 @@
+<script>
+  import ContentSection from './ContentSection.svelte'
+  import Heading from './Heading.svelte'
+</script>
+
+<ContentSection>
+  <Heading subtitle="New music video">Don’t look back</Heading>
+
+  <p>
+    I just released a new music video: <strong>Don’t look back</strong>. Maybe
+    you want to check it out.
+  </p>
+
+  <iframe
+    width="560"
+    height="315"
+    src="https://www.youtube.com/embed/zZ3tTxN7imk"
+    title="YouTube video player"
+    frameborder="0"
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+    referrerpolicy="strict-origin-when-cross-origin"
+    allowfullscreen
+  />
+</ContentSection>
+
+<style lang="postcss">
+  iframe {
+    display: block;
+    max-width: 100%;
+  }
+</style>

src/routes/index.svelte

@@ -7,6 +7,7 @@
   import Intro from '$lib/Intro.svelte'
   import MainFeature from '$lib/MainFeature.svelte'
   import MainFeatures from '$lib/MainFeatures.svelte'
+  import MenoTeaser from '$lib/MenoTeaser.svelte'
   import Seo from '$lib/Seo.svelte'
   import StyledLink from '$lib/StyledLink.svelte'
   import PlusIcon from '~icons/ion/plus-round'
@@ -86,7 +87,9 @@
   </MainFeatures>
 </ContentSection>
 
-<ContentSection>
+<MenoTeaser />
+
+<ContentSection backgroundColor="white">
   <Heading subtitle="And it's easy to add the features you want"
     >Dropzone.js comes feature packed</Heading
   >