From 0d77761821bd30bf6de220466c264902b046ec8a Mon Sep 17 00:00:00 2001
From: Zsolt Tasnadi <rastasi@gmail.com>
Date: Mon, 11 May 2026 08:41:13 +0200
Subject: [PATCH] fb link

---
 apps/frontend/src/i18n/locales/en.ts          |  4 ++
 apps/frontend/src/i18n/locales/hu.ts          |  4 ++
 .../frontend/src/page/contact/ContactPage.vue | 69 +++++++++++--------
 apps/frontend/src/styles/retro.css            |  1 +
 4 files changed, 51 insertions(+), 27 deletions(-)

diff --git a/apps/frontend/src/i18n/locales/en.ts b/apps/frontend/src/i18n/locales/en.ts
index 5784e39..862d69f 100644
--- a/apps/frontend/src/i18n/locales/en.ts
+++ b/apps/frontend/src/i18n/locales/en.ts
@@ -78,6 +78,10 @@ export default {
     bbs: {
       desc: 'Join us for some retro vibes on our BBS!',
     },
+    facebook: {
+      desc: 'Follow us on Facebook for the latest news and updates.',
+      link: 'Visit Facebook Page',
+    },
   },
   blog: {
     badge: 'Community Stories',
diff --git a/apps/frontend/src/i18n/locales/hu.ts b/apps/frontend/src/i18n/locales/hu.ts
index 4f9282e..46d0b20 100644
--- a/apps/frontend/src/i18n/locales/hu.ts
+++ b/apps/frontend/src/i18n/locales/hu.ts
@@ -78,6 +78,10 @@ export default {
     bbs: {
       desc: 'Csatlakozz hozzánk retró élményekért a BBS-ünkön!',
     },
+    facebook: {
+      desc: 'Kövess minket Facebookon a legfrissebb hírekért és frissítésekért.',
+      link: 'Facebook oldal megtekintése',
+    },
   },
   blog: {
     badge: 'Közösségi történetek',
diff --git a/apps/frontend/src/page/contact/ContactPage.vue b/apps/frontend/src/page/contact/ContactPage.vue
index b8fbf72..357ab2e 100644
--- a/apps/frontend/src/page/contact/ContactPage.vue
+++ b/apps/frontend/src/page/contact/ContactPage.vue
@@ -30,38 +30,50 @@
         </h2>
         <p class="contact-card-desc mb-8">{{ t('contact.communityDesc') }}</p>
 
-        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 justify-center">
-          <div class="community-section border-[#5865F2]">
-            <h3 class="community-section-title text-[#5865F2]">Discord</h3>
-            <p class="community-section-desc">{{ t('contact.discord.desc') }}</p>
-            <a :href="DISCORD_INVITE_LINK" target="_blank" class="community-link-discord">
-              {{ t('contact.discord.link') }} <span>→</span>
-            </a>
-          </div>
+        <div class="flex flex-col gap-4">
+          <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
+            <div class="community-section border-[#5865F2]">
+              <h3 class="community-section-title text-[#5865F2]">Discord</h3>
+              <p class="community-section-desc">{{ t('contact.discord.desc') }}</p>
+              <a :href="DISCORD_INVITE_LINK" target="_blank" class="community-link-discord">
+                {{ t('contact.discord.link') }} <span>→</span>
+              </a>
+            </div>
 
-          <div class="community-section border-red-600">
-            <h3 class="community-section-title text-red-600">YouTube</h3>
-            <p class="community-section-desc">{{ t('contact.youtube.desc') }}</p>
-            <a href="https://www.youtube.com/@teletypegames" target="_blank" class="community-link-youtube">
-              {{ t('contact.youtube.link') }} <span>→</span>
-            </a>
-          </div>
+            <div class="community-section border-green-500">
+              <h3 class="community-section-title text-green-700">IRC</h3>
+              <p class="text-sm text-gray-600 mb-3">{{ t('contact.irc.desc') }}</p>
+              <div class="irc-box">
+                <span class="irc-network">Network: Libera.Chat</span>
+                <code class="irc-channel">#teletypegames</code>
+              </div>
+            </div>
 
-          <div class="community-section border-green-500">
-            <h3 class="community-section-title text-green-700">IRC</h3>
-            <p class="text-sm text-gray-600 mb-3">{{ t('contact.irc.desc') }}</p>
-            <div class="irc-box">
-              <span class="irc-network">Network: Libera.Chat</span>
-              <code class="irc-channel">#teletypegames</code>
+            <div class="community-section border-amber-500">
+              <h3 class="community-section-title text-amber-700">BBS</h3>
+              <p class="community-section-desc">{{ t('contact.bbs.desc') }}</p>
+              <div class="bbs-box">
+                <span class="bbs-host">Host: games.teletype.hu</span>
+                <code class="bbs-port">Port: 2323</code>
+              </div>
             </div>
           </div>
 
-          <div class="community-section border-amber-500">
-            <h3 class="community-section-title text-amber-700">BBS</h3>
-            <p class="community-section-desc">{{ t('contact.bbs.desc') }}</p>
-            <div class="bbs-box">
-              <span class="bbs-host">Host: games.teletype.hu</span>
-              <code class="bbs-port">Port: 2323</code>
+          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            <div class="community-section border-red-600">
+              <h3 class="community-section-title text-red-600">YouTube</h3>
+              <p class="community-section-desc">{{ t('contact.youtube.desc') }}</p>
+              <a href="https://www.youtube.com/@teletypegames" target="_blank" class="community-link-youtube">
+                {{ t('contact.youtube.link') }} <span>→</span>
+              </a>
+            </div>
+
+            <div class="community-section border-[#1877F2]">
+              <h3 class="community-section-title text-[#1877F2]">Facebook</h3>
+              <p class="community-section-desc">{{ t('contact.facebook.desc') }}</p>
+              <a href="https://www.facebook.com/teletypegames" target="_blank" class="community-link-facebook">
+                {{ t('contact.facebook.link') }} <span>→</span>
+              </a>
             </div>
           </div>
         </div>
@@ -116,6 +128,9 @@ function openEmail() {
 .community-link-youtube {
   @apply text-red-600 font-bold hover:underline inline-flex items-center gap-1;
 }
+.community-link-facebook {
+  @apply text-[#1877F2] font-bold hover:underline inline-flex items-center gap-1;
+}
 .irc-box {
   @apply bg-green-100 p-4 rounded-xl border border-green-200 mt-3 inline-block;
 }
diff --git a/apps/frontend/src/styles/retro.css b/apps/frontend/src/styles/retro.css
index 81631cb..1dc5a53 100644
--- a/apps/frontend/src/styles/retro.css
+++ b/apps/frontend/src/styles/retro.css
@@ -873,6 +873,7 @@
 
 .retro-mode .community-link-discord { color: #00ffff !important; text-decoration: underline !important; }
 .retro-mode .community-link-youtube { color: #a80000 !important; text-decoration: underline !important; }
+.retro-mode .community-link-facebook { color: #00a8a8 !important; text-decoration: underline !important; }
 
 /* tui-divider */
 .retro-mode .community-section {