From 7264e4626d829b1fd7cf31ae8b11a4320d78b466 Mon Sep 17 00:00:00 2001
From: Zsolt Tasnadi <rastasi@gmail.com>
Date: Mon, 11 May 2026 08:44:06 +0200
Subject: [PATCH] social media section

---
 apps/frontend/src/i18n/locales/en.ts          |  2 +
 apps/frontend/src/i18n/locales/hu.ts          |  2 +
 .../frontend/src/page/contact/ContactPage.vue | 85 ++++++++++---------
 3 files changed, 49 insertions(+), 40 deletions(-)

diff --git a/apps/frontend/src/i18n/locales/en.ts b/apps/frontend/src/i18n/locales/en.ts
index 862d69f..fc05e1e 100644
--- a/apps/frontend/src/i18n/locales/en.ts
+++ b/apps/frontend/src/i18n/locales/en.ts
@@ -64,6 +64,8 @@ export default {
     emailDesc: 'For business inquiries, support, or detailed feedback, feel free to drop us an email.',
     community: 'Community',
     communityDesc: 'Join our primarily Hungarian-speaking community (English speakers are also welcome!)',
+    social: 'Social Media',
+    socialDesc: 'Follow us on social media for the latest news and content.',
     discord: {
       desc: 'We have a vibrant Discord server for real-time chat and support.',
       link: 'Join Discord Server',
diff --git a/apps/frontend/src/i18n/locales/hu.ts b/apps/frontend/src/i18n/locales/hu.ts
index 46d0b20..04f154e 100644
--- a/apps/frontend/src/i18n/locales/hu.ts
+++ b/apps/frontend/src/i18n/locales/hu.ts
@@ -64,6 +64,8 @@ export default {
     emailDesc: 'Üzleti megkeresésekhez, támogatáshoz vagy részletes visszajelzéshez nyugodtan írj nekünk emailt.',
     community: 'Közösség',
     communityDesc: 'Csatlakozz elsősorban magyar nyelvű közösségünkhöz (az angolul beszélők is szívesen látottak!)',
+    social: 'Közösségi média',
+    socialDesc: 'Kövess minket a közösségi oldalakon a legfrissebb hírekért és tartalmakért.',
     discord: {
       desc: 'Élénk Discord szerverünk van valós idejű csevegéshez és támogatáshoz.',
       link: 'Csatlakozz a Discord szerverhez',
diff --git a/apps/frontend/src/page/contact/ContactPage.vue b/apps/frontend/src/page/contact/ContactPage.vue
index 357ab2e..19e906e 100644
--- a/apps/frontend/src/page/contact/ContactPage.vue
+++ b/apps/frontend/src/page/contact/ContactPage.vue
@@ -28,53 +28,58 @@
         <h2 class="contact-card-title">
           <span class="text-3xl">💬</span> {{ t('contact.community') }}
         </h2>
-        <p class="contact-card-desc mb-8">{{ t('contact.communityDesc') }}</p>
+        <p class="contact-card-desc">{{ t('contact.communityDesc') }}</p>
 
-        <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="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-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-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 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="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 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>
 
-            <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 class="contact-card">
+        <h2 class="contact-card-title">
+          <span class="text-3xl">📱</span> {{ t('contact.social') }}
+        </h2>
+        <p class="contact-card-desc">{{ t('contact.socialDesc') }}</p>
+
+        <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>