fb link

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',

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',

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;
 }

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 {