Add draft rate card (#71)

src/components/widgets/Header.astro

@@ -54,6 +54,7 @@ const links = [
       }
     ],
   },
+  { text: 'Support', href: getPermalink('/support') },
   { text: 'Events', href: getPermalink('/events') },
 ];
 ---

src/components/widgets/HeaderNoLogo.astro

@@ -52,6 +52,7 @@ const links = [
       }
     ],
   },
+  { text: 'Support', href: getPermalink('/support') },
   { text: 'Events', href: getPermalink('/events') },
 ];
 ---

src/pages/support.md

@@ -3,12 +3,60 @@ title: 'Support me'
 layout: '~/layouts/MarkdownLayout.astro'
 ---
 
-Here are some ways you can support me. This page is a work in progress.
+Here are some ways you can support me. _This page is a work in progress_.
+
+## General options
+
+<div class="grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 my-12 dark:text-white items-stretch">
+
+<div class="relative flex flex-col p-6 bg-white/70 dark:bg-slate-900 rounded drop-shadow-lg hover:shadow-md transition border border-transparent dark:border-slate-800">
+<div class="flex items-center">
 
 [My Patreon page](https://patreon.com/ChrisChinchilla?utm_medium=clipboard_copy&utm_source=copyLink&utm_campaign=creatorshare_creator&utm_content=join_link)
 
+</div>
+</div>
+
+<div class="relative flex flex-col p-6 bg-white/70 dark:bg-slate-900 rounded drop-shadow-lg hover:shadow-md transition border border-transparent dark:border-slate-800">
+
+<div class="flex items-center">
+
 <script type="text/javascript" src="https://cdnjs.buymeacoffee.com/1.0.0/button.prod.min.js" data-name="bmc-button" data-slug="chrischinchilla" data-color="#4b555c" data-emoji=""  data-font="Lato" data-text="Buy me a coffee" data-outline-color="#ffffff" data-font-color="#ffffff" data-coffee-color="#FFDD00" ></script>
 
+</div>
+</div>
+
+<div class="relative flex flex-col p-6 bg-white/70 dark:bg-slate-900 rounded drop-shadow-lg hover:shadow-md transition border border-transparent dark:border-slate-800">
+
+<div class="flex items-center">
+
 <script type='text/javascript' src='https://storage.ko-fi.com/cdn/widget/Widget_2.js'></script><script type='text/javascript'>kofiwidget2.init('Support Me on Ko-fi', '#29abe0', 'P5P3JYHDE');kofiwidget2.draw();</script> 
 
-<iframe src="https://github.com/sponsors/ChrisChinchilla/card" title="Sponsor ChrisChinchilla" height="225" width="600" style="border: 0;"></iframe>
+</div>
+
+</div>
+
+<div class="relative flex flex-col p-6 bg-white/70 dark:bg-slate-900 rounded drop-shadow-lg hover:shadow-md transition border border-transparent dark:border-slate-800">
+
+<div class="flex items-center">
+
+<iframe src="https://github.com/sponsors/ChrisChinchilla/card" title="Sponsor ChrisChinchilla" height="225" width="600" style="border: 0;"></iframe>
+
+</div>
+
+</div>
+
+</div>
+
+
+
+## Sponsored content requests
+
+If you have a product or service you think matches my audience or experience and would like to sponsor content on my YouTube channel, I'd love to hear from you!
+
+I charge **$/€/£ 150 per 5-10 minute video** and aim to complete and publish the video within 30 days of payment. This includes a private preview of your video for approval and up to 3 edits before publishing. If you're interested in commissioning me you have two options.
+
+- Pay instantly and we can arrange a call to discuss your requirements. Your options are:
+  - Request via [Buy Me a Coffee](https://www.buymeacoffee.com/chrischinchilla/commissions).
+  - Request via [Ko-fi](https://ko-fi.com/chrischinchilla/commissions).
+- If you'd rather discuss first and pay in a different way, [arrange a call to discuss your requirements](https://fantastical.app/chrischinchilla/sponsored-content-discussion)