feat: Add MSSQL image link

Author: vlad-stohnii

src/assets/images/mssql.png

@@ -1,13 +1,23 @@
 ---
+import { Image } from "astro:assets";
 import AsideArticle from "./AsidePosts.astro";
 import AsideSponsors from "./AsideSponsors.astro";
 import SmallProgressBar from "./SmallProgressBar.astro";
 import progress from "../../data/progress";
 import Toasts from "./Toasts.astro";
+import MSSQL from "@/assets/images/mssql.png";
 ---
 
 <div class="aside-right">
   <div class="aside-right__content">
+    <a
+      class="mssql-wrap"
+      target="_blank"
+      rel="norefferer nofollow"
+      href="https://mssql.drizzle.team"
+    >
+      <Image src={MSSQL} alt="MSSQL Drizzle" />
+    </a>
     <div class="progress-wrap">
       <SmallProgressBar progress={progress} />
     </div>
@@ -29,6 +39,29 @@ import Toasts from "./Toasts.astro";
     position: relative;
   }
 
+  .mssql-wrap {
+    overflow: hidden;
+    aspect-ratio: 3.555;
+    margin-bottom: 4px;
+    border-radius: 4px;
+  }
+
+  .mssql-wrap img {
+    transition:
+      transform 0.3s ease,
+      filter 0.3s ease;
+    transform-origin: center center;
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .mssql-wrap:hover img {
+    filter: brightness(1.35);
+    transform: scale(1.1);
+  }
+
   html.dark .aside-right__content {
     background-color: #111;
   }