docs: refactor docs

docs/src/components/ActionButtonFooter.astro

@@ -0,0 +1,48 @@
+---
+import { Icon } from '@astrojs/starlight/components';
+import MyIcon from './MyIcon.astro';
+
+---
+
+<div class="action-footer">
+    <a class="action-button" href='https://github.com/tomalaforge/angular-challenges'>
+        <div>Give a star</div>
+        <Icon name='github' size="1rem" />
+    </a>
+    
+    <a class="action-button button-sponsor" href='https://github.com/sponsors/tomalaforge'>
+        <div>Sponsor</div>
+        <MyIcon name='heart' size="1rem" color="white" />
+    </a>
+</div>
+
+<style>
+    .action-button {
+        display: flex!important;
+        justify-content: center;
+        gap: 0.5em;
+        align-items: center;
+        border-radius: 999rem;
+        color: var(--sl-color-white)!important;
+        line-height: 1.1875;
+        text-decoration: none;
+        font-size: var(--sl-text-sm)!important;
+        border: 1px solid;
+        font-size: var(--sl-text-base);
+        padding: 0.4rem 0.8rem;
+    }
+
+    .action-footer {
+        display: flex;
+        flex-direction: column;
+        gap: 0.7rem;
+         margin-bottom: 10px;
+    }
+
+    .button-sponsor {
+        background-color: red;
+        border-color: red;
+        color: write;
+    }
+
+</style>