fix: update website social links

3 files changed, 116 insertions, 5 deletions

diff --git a/website/css/style.css b/website/css/style.css
index 979d9bb8..221ed3f4 100644
--- a/website/css/style.css
+++ b/website/css/style.css
@@ -288,7 +288,7 @@
   --logo-opacity: 0.72;
 }
 
-*, 
+*,
 *::before,
 *::after {
     box-sizing: border-box;
@@ -439,6 +439,39 @@ samp {
     transition: color 0.15s ease;
 }
 
+.nav-tools {
+    display: flex;
+    align-items: center;
+    gap: 0.45rem;
+}
+
+.nav-icon-link {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.1rem;
+    height: 2.1rem;
+    border: 1px solid var(--line);
+    border-radius: var(--radius-md);
+    color: var(--muted);
+    transition:
+        color 120ms ease,
+        border-color 120ms ease,
+        background 120ms ease;
+}
+
+.nav-icon-link:hover {
+    color: var(--accent);
+    border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
+    background: var(--accent-soft);
+}
+
+.nav-icon-link svg {
+    width: 1rem;
+    height: 1rem;
+    fill: currentColor;
+}
+
 .nav-cta {
     display: inline-flex;
     align-items: center;
@@ -2115,6 +2148,40 @@ td:last-child {
     justify-content: flex-end;
 }
 
+.footer .footer-social {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.45rem;
+    justify-content: flex-end;
+}
+
+.footer-social a {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    border: 1px solid var(--line);
+    border-radius: var(--radius-md);
+    color: var(--muted);
+    transition:
+        color 120ms ease,
+        border-color 120ms ease,
+        background 120ms ease;
+}
+
+.footer-social a:hover {
+    color: var(--accent);
+    border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
+    background: var(--accent-soft);
+}
+
+.footer-social svg {
+    width: 1rem;
+    height: 1rem;
+    fill: currentColor;
+}
+
 .compare-hero {
     max-width: var(--max);
     min-height: auto;
diff --git a/website/index.html b/website/index.html
index 933cf9e4..20c455ab 100644
--- a/website/index.html
+++ b/website/index.html
@@ -71,9 +71,18 @@
                     <a href="/docs/">Docs</a>
                     <a href="/docs/quick-start/">Quick start</a>
                     <a href="/docs/socket-api/">API</a>
-                    <a href="https://github.com/ogulcancelik/herdr">GitHub</a>
                 </div>
                 <div class="nav-tools">
+                    <a class="nav-icon-link" href="https://github.com/ogulcancelik/herdr" aria-label="Herdr on GitHub">
+                        <svg viewBox="0 0 16 16" aria-hidden="true">
+                            <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82A7.64 7.64 0 0 1 8 3.87c.68 0 1.36.09 2 .26 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z" />
+                        </svg>
+                    </a>
+                    <a class="nav-icon-link" href="https://x.com/herdrdev" aria-label="Herdr on X">
+                        <svg viewBox="0 0 24 24" aria-hidden="true">
+                            <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231Zm-1.161 17.52h1.833L7.084 4.126H5.117Z" />
+                        </svg>
+                    </a>
                     <a class="nav-cta" href="/docs/install/">Install</a>
                 </div>
             </nav>
@@ -566,7 +575,7 @@ $ herdr</code></pre>
                         <p class="mobile-shout">
                             screenshots taken with
                             <a href="https://getmoshi.app/" target="_blank" rel="noopener">moshi</a>
-                            ❤️ on iphone
+                            ❤️ on iPhone
                         </p>
                     </div>
                 </div>
@@ -727,6 +736,18 @@ $ herdr</code></pre>
                 >
                 <a href="mailto:hey@herdr.dev">hey@herdr.dev</a>
             </div>
+            <nav class="footer-social" aria-label="Social links">
+                <a href="https://github.com/ogulcancelik/herdr" aria-label="Herdr on GitHub">
+                    <svg viewBox="0 0 16 16" aria-hidden="true">
+                        <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82A7.64 7.64 0 0 1 8 3.87c.68 0 1.36.09 2 .26 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z" />
+                    </svg>
+                </a>
+                <a href="https://x.com/herdrdev" aria-label="Herdr on X">
+                    <svg viewBox="0 0 24 24" aria-hidden="true">
+                        <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231Zm-1.161 17.52h1.833L7.084 4.126H5.117Z" />
+                    </svg>
+                </a>
+            </nav>
         </footer>
 
         <div class="logo-menu" id="logo-menu" hidden>
diff --git a/website/src/pages/compare.astro b/website/src/pages/compare.astro
index 5581b4d5..14f98a9c 100644
--- a/website/src/pages/compare.astro
+++ b/website/src/pages/compare.astro
@@ -59,9 +59,20 @@
                     <a href="/docs/">Docs</a>
                     <a href="/docs/quick-start/">Quick start</a>
                     <a href="/docs/socket-api/">API</a>
-                    <a href="https://github.com/ogulcancelik/herdr">GitHub</a>
                 </div>
-                <a class="nav-cta" href="/docs/install/">Install</a>
+                <div class="nav-tools">
+                    <a class="nav-icon-link" href="https://github.com/ogulcancelik/herdr" aria-label="Herdr on GitHub">
+                        <svg viewBox="0 0 16 16" aria-hidden="true">
+                            <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82A7.64 7.64 0 0 1 8 3.87c.68 0 1.36.09 2 .26 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z" />
+                        </svg>
+                    </a>
+                    <a class="nav-icon-link" href="https://x.com/herdrdev" aria-label="Herdr on X">
+                        <svg viewBox="0 0 24 24" aria-hidden="true">
+                            <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231Zm-1.161 17.52h1.833L7.084 4.126H5.117Z" />
+                        </svg>
+                    </a>
+                    <a class="nav-cta" href="/docs/install/">Install</a>
+                </div>
             </nav>
         </header>
 
@@ -270,6 +281,18 @@
                 <a href="https://github.com/ogulcancelik/herdr/releases">Releases</a>
                 <a href="mailto:hey@herdr.dev">hey@herdr.dev</a>
             </div>
+            <nav class="footer-social" aria-label="Social links">
+                <a href="https://github.com/ogulcancelik/herdr" aria-label="Herdr on GitHub">
+                    <svg viewBox="0 0 16 16" aria-hidden="true">
+                        <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82A7.64 7.64 0 0 1 8 3.87c.68 0 1.36.09 2 .26 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z" />
+                    </svg>
+                </a>
+                <a href="https://x.com/herdrdev" aria-label="Herdr on X">
+                    <svg viewBox="0 0 24 24" aria-hidden="true">
+                        <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231Zm-1.161 17.52h1.833L7.084 4.126H5.117Z" />
+                    </svg>
+                </a>
+            </nav>
         </footer>
 
         <div class="theme-hint" id="theme-hint" title="Press / or t to switch theme">