Adds icons for github and docker

docs/src/App.vue

@@ -1,4 +1,23 @@
 <template>
+  <header py-2 px-4 bg-light dark:bg-dark z-10>
+    <nav flex my-3 gap-x-4 justify-end>
+      <a
+        icon-btn
+        i-mdi-docker
+        target="_blank"
+        rel="noreferrer"
+        href="https://hub.docker.com/r/amir20/dozzle/"
+      />
+      <a
+        icon-btn
+        i-mdi-github
+        rel="noreferrer"
+        href="https://github.com/amir20/dozzle"
+        target="_blank"
+        title="Dozzle GitHub"
+      />
+    </nav>
+  </header>
   <main text="gray-700 dark:gray-200" mb-22>
     <RouterView />
   </main>
@@ -7,6 +26,23 @@
       <p class="mt-5 text-center text-sm leading-6 text-gray-400">
         Made with ❤️ by <a href="https://amirraminfar.me">Amir Raminfar</a>.
       </p>
+      <nav flex my-3 gap-x-4 justify-center>
+        <a
+          icon-btn
+          i-mdi-docker
+          target="_blank"
+          rel="noreferrer"
+          href="https://hub.docker.com/r/amir20/dozzle/"
+        />
+        <a
+          icon-btn
+          i-mdi-github
+          rel="noreferrer"
+          href="https://github.com/amir20/dozzle"
+          target="_blank"
+          title="Dozzle GitHub"
+        />
+      </nav>
     </div>
   </footer>
 </template>

docs/src/components/CodeBlock.vue

@@ -17,8 +17,8 @@ const { copy, copied, isSupported } = useClipboard({ source })
       v-if="isSupported"
       icon-btn
       ml-auto
-      :class="copied ? 'i-carbon-checkmark' : 'i-carbon-copy'"
-      text-2xl
+      :class="copied ? 'i-mdi-clipboard-check' : 'i-mdi-clipboard-outline'"
+      text-3xl
       @click="copy()"
     />
   </div>

docs/src/components/Hero.vue

@@ -1,7 +1,7 @@
 <script setup></script>
 
 <template>
-  <div p="x-4 lg:y-20" m="b-4" text="gray-700 dark:gray-200">
+  <div p="x-4 lg:y-10" mb-4 text="gray-700 dark:gray-200">
     <div grid="~ lg:cols-3 lg:gap-8" h-full mx-auto>
       <div flex="~ col" text="center" p="x-4">
         <h1 text-4xl font-light m="t-8 lg:y-auto">
@@ -11,10 +11,11 @@
       </div>
       <div grid="lg:col-span-2" flex m="t-8 lg:t-0">
         <div my-auto>
-          <browser-window>
+          <browser-window drop-shadow-md>
             <video muted loop autoplay playsinline poster="../media/poster.png">
               <source src="../media/dozzle.webm" type="video/webm">
               <source src="../media/dozzle.mp4" type="video/mp4">
+              <img src="../media/poster.png" alt="">
             </video>
           </browser-window>
         </div>