gsadmin/KoalaSync
1
0
Fork 0
mirror of https://github.com/Shik3i/KoalaSync.git synced 2026-08-27 19:17:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor landing page use-cases, browser CTA badging, official brand SVGs, and streamlined competitor comparison

Browse Source
This commit is contained in:
Koala
2026-05-30 11:13:29 +02:00
parent d5241b19e8
commit 2261a8133a
11 changed files with 609 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/index.html
+188 -21
View File
@@ -37,11 +37,11 @@
<a href="#features"><span lang="en">Features</span><span lang="de">Funktionen</span></a>
<a href="#how-it-works"><span lang="en">How it works</span><span lang="de">So funktioniert's</span></a>
<a href="https://github.com/Shik3i/KoalaSync" target="_blank" style="display: inline-flex; align-items: center; gap: 6px;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="16" height="16" style="display: block;"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="16" height="16" aria-hidden="true" style="display: block;"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.042 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
GitHub
</a>
<a class="lang-toggle" style="display: inline-flex; align-items: center; gap: 6px; cursor: pointer;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width: 16px; height: 16px; display: block;"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="width: 16px; height: 16px; display: block;"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>
EN/DE
</a>
</div>
@@ -62,15 +62,15 @@
</h2>
<div class="cta-group" data-reveal>
<a href="https://chromewebstore.google.com/detail/koalasync/obbnmkmlaaddodakcbdljknjpagklifc" class="btn btn-primary">
<img src="assets/chrome.svg" width="20">
<img src="assets/chrome.svg" alt="Chrome" width="20">
<span lang="en">Add to Chrome</span><span lang="de">Zu Chrome hinzufügen</span>
</a>
<a href="https://addons.mozilla.org/de/firefox/addon/koalasync/" class="btn btn-firefox">
🦊
<img src="assets/firefox.svg" alt="Firefox" width="20">
<span lang="en">Add to Firefox</span><span lang="de">Zu Firefox hinzufügen</span>
</a>
<a href="https://github.com/Shik3i/KoalaSync/releases" target="_blank" class="btn btn-secondary" style="display: inline-flex; align-items: center; gap: 8px;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="20" height="20" style="display: block;"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="20" height="20" aria-hidden="true" style="display: block;"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
GitHub Releases
</a>
</div>
@@ -114,7 +114,7 @@
<span class="mock-peer-name">CoolUsername</span>
<span class="mock-peer-meta"><span lang="en">YOU</span><span lang="de">ICH</span></span>
</div>
<div class="mock-peer-tab">🎬 Germany's Next Flopmodel - S21E12</div>
<div class="mock-peer-tab">🎬 Stranger Things - S4E1</div>
<div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • <span lang="en">Playing</span><span lang="de">Wiedergabe</span></div>
</div>
<div class="mock-peer-item">
@@ -122,7 +122,7 @@
<span class="mock-peer-name">KoalaPC</span>
<span class="mock-peer-meta"><span lang="en">Peer</span><span lang="de">Partner</span></span>
</div>
<div class="mock-peer-tab">🎬 Germany's Next Flopmodel - S21E12</div>
<div class="mock-peer-tab">🎬 Stranger Things - S4E1</div>
<div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • <span lang="en">Playing</span><span lang="de">Wiedergabe</span></div>
</div>
</div>
@@ -137,7 +137,7 @@
<span lang="en">Select Video</span><span lang="de">Video auswählen</span>
</label>
<select class="mock-input" style="width: 100%; box-sizing: border-box; background: var(--card); border: 1px solid #334155; color: white; padding: 8px; border-radius: 8px; font-family: inherit; font-size: 0.75rem; outline: none; cursor: default;">
<option>🎬 Germany's Next Flopmodel - S21E12</option>
<option>🎬 Stranger Things - S4E1</option>
</select>
</div>
@@ -245,6 +245,91 @@
</div>
</header>
<section class="compat-section">
<div class="container">
<p class="compat-heading" data-reveal>
<span lang="en">Works on your favorite platforms</span>
<span lang="de">Funktioniert auf deinen Lieblingsplattformen</span>
</p>
<div class="compat-row" data-reveal>
<div class="compat-logo">
<img src="assets/netflix.svg" alt="Netflix" width="24" height="24">
<span>Netflix</span>
</div>
<div class="compat-logo">
<img src="assets/youtube.svg" alt="YouTube" width="24" height="24">
<span>YouTube</span>
</div>
<div class="compat-logo">
<img src="assets/twitch.svg" alt="Twitch" width="24" height="24">
<span>Twitch</span>
</div>
<div class="compat-logo">
<img src="assets/primevideo.svg" alt="Prime Video" width="24" height="24">
<span>Prime Video</span>
</div>
<div class="compat-logo">
<img src="assets/jellyfin.svg" alt="Jellyfin" width="24" height="24">
<span>Jellyfin</span>
</div>
<div class="compat-logo">
<img src="assets/emby.svg" alt="Emby" width="24" height="24">
<span>Emby</span>
</div>
<div class="compat-logo compat-more">
<span class="compat-more-icon">+</span>
<span lang="en">and many more</span><span lang="de">und viele mehr</span>
<div class="compat-tooltip">
<span lang="en">Works on almost any site with a video element</span>
<span lang="de">Funktioniert auf fast jeder Seite mit einem Video-Element</span>
</div>
</div>
</div>
</div>
</section>
<section id="use-cases" class="use-cases-section">
<div class="container">
<h2 class="section-title" data-reveal style="text-align: center; font-size: 2.2rem; margin-bottom: 1rem;">
<span lang="en">Perfect for Any Occasion</span>
<span lang="de">Perfekt für jeden Anlass</span>
</h2>
<p class="section-subtitle" data-reveal style="text-align: center; color: var(--text-muted); margin-bottom: 3.5rem; max-width: 600px; margin-left: auto; margin-right: auto;">
<span lang="en">Whether near or far, KoalaSync brings people together around their favorite videos.</span>
<span lang="de">Ob nah oder fern, KoalaSync bringt Menschen bei ihren Lieblingsvideos zusammen.</span>
</p>
<div class="use-cases-grid">
<div class="use-case-card" data-reveal>
<h3>
<span class="use-case-icon">🍿</span>
<span lang="en">Movie Night with Friends</span>
<span lang="de">Filmabend mit Freunden</span>
</h3>
<p lang="en">Sync your movies in real time and talk via Discord, Zoom, or your favorite voice call application. It feels just like sitting in the same room.</p>
<p lang="de">Synchronisiere eure Filme in Echtzeit und quatscht nebenbei auf Discord, Zoom oder im Tool eurer Wahl. Es fühlt sich an, als säßet ihr im selben Raum.</p>
</div>
<div class="use-case-card" data-reveal>
<h3>
<span class="use-case-icon">🎓</span>
<span lang="en">Remote Learning</span>
<span lang="de">Remote Learning</span>
</h3>
<p lang="en">Analyze online tutorials, lectures, or developer training streams together with classmates or colleagues. Pause and discuss complex steps in perfect harmony.</p>
<p lang="de">Analysiert Online-Tutorials, Vorlesungen oder Streams gemeinsam mit Mitschülern oder Kollegen. Pausiert und besprecht komplizierte Schritte in perfektem Sync.</p>
</div>
<div class="use-case-card" data-reveal>
<h3>
<span class="use-case-icon">💖</span>
<span lang="en">Long-Distance Relationships</span>
<span lang="de">Paare auf Distanz</span>
</h3>
<p lang="en">Bridge the distance and enjoy date nights. Experience every plot twist, laugh at the same jokes, and share emotional moments at the exact same millisecond.</p>
<p lang="de">Überbrückt die Distanz und genießt gemeinsame Date-Nächte. Erlebt jeden Plot-Twist, lacht über dieselben Witze und teilt emotionale Momente zur selben Millisekunde.</p>
</div>
</div>
</div>
</section>
<section id="features">
<div class="container">
<h2 style="font-size: 2.5rem; text-align: center; margin-bottom: 1rem;">
@@ -257,8 +342,8 @@
<div class="features-grid">
<div class="feature-card" data-reveal>
<div class="feature-icon">⚡</div>
<h3>
<span class="feature-icon">⚡</span>
<span lang="en">Full Control / Instant Sync</span>
<span lang="de">Volle Kontrolle & Echtzeit</span>
</h3>
@@ -266,8 +351,8 @@
<p lang="de">Einer pausiert, alle pausieren. Einer spult, alle folgen. Unser Zwei-Phasen-Synchronisationsprotokoll koordiniert die Wiedergabe aller Teilnehmer in Echtzeit.</p>
</div>
<div class="feature-card" data-reveal>
<div class="feature-icon">🎬</div>
<h3>
<span class="feature-icon">🎬</span>
<span lang="en">Endless Binge-Watching</span>
<span lang="de">Grenzenloses Bingen</span>
</h3>
@@ -275,8 +360,8 @@
<p lang="de">Nächste Episode startet für jeden zeitgleich. KoalaSync erkennt den Episodenwechsel und pausiert, bis jeder Teilnehmer das neue Video fertig geladen hat.</p>
</div>
<div class="feature-card" data-reveal>
<div class="feature-icon">🛡️</div>
<h3>
<span class="feature-icon">🛡️</span>
<span lang="en">Zero Accounts / Pure Privacy</span>
<span lang="de">Keine Accounts / Datenschutz</span>
</h3>
@@ -284,8 +369,8 @@
<p lang="de">Kein Login. Keine Daten. Einfach Link teilen und schauen. Der Server läuft flüchtig im RAM und löscht deinen Raum komplett nach dem Verlassen.</p>
</div>
<div class="feature-card" data-reveal>
<div class="feature-icon">🌐</div>
<h3>
<span class="feature-icon">🌐</span>
<span lang="en">Universal HTML5 Support</span>
<span lang="de">Universeller HTML5-Support</span>
</h3>
@@ -293,8 +378,8 @@
<p lang="de">Unterstützt YouTube, Twitch, Netflix, Jellyfin, Emby und jede beliebige Webseite mit einem HTML5-Video-Tag. Ideal auch für eigene Medienbibliotheken.</p>
</div>
<div class="feature-card" data-reveal>
<div class="feature-icon">🐳</div>
<h3>
<span class="feature-icon">🐳</span>
<span lang="en">Self-Hostable & Docker-Ready</span>
<span lang="de">Self-Hostable & Docker-Ready</span>
</h3>
@@ -302,8 +387,8 @@
<p lang="de">Unsere Server sind kostenlos und schnell, aber du <strong>kannst</strong> auch die volle Kontrolle übernehmen, wenn du willst. Starte dein eigenes privates Relay in Sekunden via Docker.</p>
</div>
<div class="feature-card" data-reveal>
<div class="feature-icon">🔗</div>
<h3>
<span class="feature-icon">🔗</span>
<span lang="en">Instant Invites / 1-Click Join</span>
<span lang="de">Direkte Einladungen & 1-Klick Beitritt</span>
</h3>
@@ -315,6 +400,73 @@
</div>
</section>
<section id="comparison" class="comparison-section">
<div class="container">
<h2 class="section-title" data-reveal style="text-align: center; font-size: 2.2rem; margin-bottom: 1rem;">
<span lang="en">KoalaSync vs. Teleparty</span>
<span lang="de">KoalaSync vs. Teleparty</span>
</h2>
<p class="section-subtitle" data-reveal style="text-align: center; color: var(--text-muted); margin-bottom: 3.5rem; max-width: 600px; margin-left: auto; margin-right: auto;">
<span lang="en">See why open source, ad-free and privacy-first is the superior way to watch together.</span>
<span lang="de">Erfahre, warum Open Source, werbefrei und Datenschutz der bessere Weg zum gemeinsamen Schauen sind.</span>
</p>
<div class="comparison-table-wrapper" data-reveal>
<table class="comparison-table">
<thead>
<tr>
<th><span lang="en">Feature</span><span lang="de">Funktion</span></th>
<th class="highlight">KoalaSync</th>
<th>Teleparty</th>
</tr>
</thead>
<tbody>
<tr>
<td class="feat-name">
<strong><span lang="en">100% Free / No Paywalls</span><span lang="de">100% Kostenlos / Keine Paywalls</span></strong>
<span class="feat-desc"><span lang="en">No premium subscriptions, hidden fees or locked features.</span><span lang="de">Keine Premium-Abos, versteckte Kosten oder gesperrte Funktionen.</span></span>
</td>
<td class="check highlight">✔ <span lang="en">100% Free</span><span lang="de">100% Kostenlos</span></td>
<td class="cross">✘ <span lang="en">Paid Tiers / Premium Locks</span><span lang="de">Premium-Abo / Paywalls</span></td>
</tr>
<tr>
<td class="feat-name">
<strong><span lang="en">Open Source (MIT)</span><span lang="de">Open Source (MIT)</span></strong>
<span class="feat-desc"><span lang="en">Fully auditable codebase. Anyone can contribute.</span><span lang="de">Vollständig prüfbarer Code. Jeder kann mitwirken.</span></span>
</td>
<td class="check highlight">✔ <span lang="en">Yes</span><span lang="de">Ja</span></td>
<td class="cross">✘ <span lang="en">Proprietary</span><span lang="de">Proprietär</span></td>
</tr>
<tr>
<td class="feat-name">
<strong><span lang="en">Self-Hostable</span><span lang="de">Self-Hostable</span></strong>
<span class="feat-desc"><span lang="en">Deploy your own private relay server in seconds.</span><span lang="de">Starte deinen eigenen privaten Relay-Server in Sekunden.</span></span>
</td>
<td class="check highlight">✔ <span lang="en">Yes (Docker-ready)</span><span lang="de">Ja (Docker-bereit)</span></td>
<td class="cross">✘ <span lang="en">No</span><span lang="de">Nein</span></td>
</tr>
<tr>
<td class="feat-name">
<strong><span lang="en">Privacy First / Ephemeral RAM</span><span lang="de">Datenschutz / Flüchtiger RAM</span></strong>
<span class="feat-desc"><span lang="en">No registration, no accounts, no persistent tracking.</span><span lang="de">Keine Registrierung, keine Accounts, kein Tracking.</span></span>
</td>
<td class="check highlight">✔ <span lang="en">Zero-Persistence</span><span lang="de">Keine Speicherung</span></td>
<td class="cross">✘ <span lang="en">Google Analytics &amp; Cookies</span><span lang="de">Google Analytics &amp; Cookies</span></td>
</tr>
<tr>
<td class="feat-name">
<strong><span lang="en">Universal HTML5 Sync</span><span lang="de">Universeller HTML5-Sync</span></strong>
<span class="feat-desc"><span lang="en">Works on almost any website with a video element.</span><span lang="de">Funktioniert auf fast jeder Webseite mit einem Video.</span></span>
</td>
<td class="check highlight">✔ <span lang="en">Any Video Element</span><span lang="de">Jedes Video-Element</span></td>
<td class="cross">✘ <span lang="en">Supported sites only (some Premium-only)</span><span lang="de">Nur unterstützte Seiten (teilweise Premium-Pflicht)</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<section id="how-it-works" style="background: rgba(255,255,255,0.02)">
<div class="container">
<h2 style="font-size: 2.5rem; text-align: center; margin-bottom: 4rem;">
@@ -481,15 +633,30 @@
</div>
</section>
<section style="text-align: center;">
<section style="text-align: center; border-top: 1px solid var(--glass-border); padding: 6rem 0;">
<div class="container">
<h2 data-reveal><span lang="en">Ready to sync?</span><span lang="de">Bereit zum Synchronisieren?</span></h2>
<p data-reveal style="margin-bottom: 2rem; color: var(--text-muted);">
<span lang="en">Start watching together with friends.</span><span lang="de">Schau gemeinsam mit Freunden.</span>
<h2 data-reveal style="font-size: 2.2rem; margin-bottom: 1rem;">
<span lang="en">Not convinced? See for yourself.</span>
<span lang="de">Noch nicht überzeugt? Überzeug dich selbst.</span>
</h2>
<p data-reveal style="margin-bottom: 3rem; color: var(--text-muted); max-width: 650px; margin-left: auto; margin-right: auto; line-height: 1.6; font-size: 1.05rem;">
<span lang="en">KoalaSync is 100% open source, ad-free and tracking-free. Audit our codebase on GitHub or install the browser extension directly.</span>
<span lang="de">KoalaSync ist zu 100 % Open Source, werbefrei und trackingsicher. Überprüfe unseren Code auf GitHub oder installiere direkt die Browser-Erweiterung.</span>
</p>
<a href="https://github.com/Shik3i/KoalaSync" class="btn btn-primary" data-reveal>
<span lang="en">View on GitHub</span><span lang="de">Auf GitHub ansehen</span>
</a>
<div class="cta-group" data-reveal style="justify-content: center; gap: 1rem;">
<a href="https://chromewebstore.google.com/detail/koalasync/obbnmkmlaaddodakcbdljknjpagklifc" class="btn btn-primary">
<img src="assets/chrome.svg" alt="Chrome" width="20">
<span lang="en">Add to Chrome</span><span lang="de">Zu Chrome hinzufügen</span>
</a>
<a href="https://addons.mozilla.org/de/firefox/addon/koalasync/" class="btn btn-firefox">
<img src="assets/firefox.svg" alt="Firefox" width="20">
<span lang="en">Add to Firefox</span><span lang="de">Zu Firefox hinzufügen</span>
</a>
<a href="https://github.com/Shik3i/KoalaSync" target="_blank" class="btn btn-secondary" style="display: inline-flex; align-items: center; gap: 8px;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="20" height="20" aria-hidden="true" style="display: block;"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
GitHub
</a>
</div>
</div>
</section>