Refactor clan card UI to match latest Figma design

frontend-next-migration/src/app/[lng]/(helper)/join-us/_getPage.ts

@@ -2,38 +2,38 @@ import { createPage } from '@/app/_helpers';
 import { JoinUsProps } from '@/preparedPages/JoinUsPage';
 import { getServerTranslation } from '@/shared/i18n';
 import {
-    makeDiscordBlock,
-    makeRedditBlock,
-    makeDuunitoriBlock,
-    makeFeedbackBlock,
-    makeTeachersBlock,
-    makeInstagramBlock,
+    makeGetInTouchAndFollow,
+    makeCommunityAndOpportunities,
+    makeEducationProfessionals,
+    makeFeedback,
 } from '@/entities/JoinUs';
 import { getRouteJoinUsPage } from '@/shared/appLinks/RoutePaths';
 import { defaultOpenGraph } from '@/shared/seoConstants';
 
 export async function _getPage(lng: string) {
     const { t } = await getServerTranslation(lng, 'join-us');
+
     return createPage<JoinUsProps>({
         buildPage: () => ({
             title: t('join-us'),
-            discordBlock: makeDiscordBlock(t),
-            connectionBlock: makeRedditBlock(t),
-            teachersBlock: makeTeachersBlock(t),
-            feedbackBlock: makeFeedbackBlock(t),
-            duunitoriBlock: makeDuunitoriBlock(t),
-            instagramBlock: makeInstagramBlock(t),
+            getInTouchAndFollowBlock: makeGetInTouchAndFollow(t),
+            communityAndOpportunitiesBlock: makeCommunityAndOpportunities(t),
+            educationProfessionalsBlock: makeEducationProfessionals(t),
+            feedbackBlock: makeFeedback(t),
         }),
+
         buildSeo: () => ({
             title: t('head-title'),
             description: t('head-description'),
             keywords: t('head-keywords'),
+
             openGraph: {
                 ...defaultOpenGraph,
                 title: t('og-title'),
                 description: t('og-description'),
                 url: `/${lng}${getRouteJoinUsPage()}`,
             },
+
             alternates: {
                 canonical: `/${lng}${getRouteJoinUsPage()}`,
             },

frontend-next-migration/src/entities/JoinUs/index.ts

@@ -1,10 +1,8 @@
 export { Block } from './ui/Block';
 
 export {
-    makeDiscordBlock,
-    makeRedditBlock,
-    makeTeachersBlock,
-    makeDuunitoriBlock,
-    makeFeedbackBlock,
-    makeInstagramBlock,
+    makeGetInTouchAndFollow,
+    makeCommunityAndOpportunities,
+    makeEducationProfessionals,
+    makeFeedback,
 } from './model/makeJoinUsBlocks';

frontend-next-migration/src/entities/JoinUs/model/makeJoinUsBlocks.ts

@@ -1,11 +1,9 @@
 import { BlockSection } from '../types';
 import { AppExternalLinks } from '@/shared/appLinks/appExternalLinks';
-import ConnectionImage from '@/shared/assets/images/heros/mirror/Mirror.png';
-import teachersImage from '@/shared/assets/images/heros/sleeper/Sleeper_new.png';
-import feedbackImage from '@/shared/assets/images/heros/einstein/einstein.png';
-import duunitoriImage from '@/shared/assets/images/heros/purple-girls/purpel-girls-main.png';
-import discordImage from '@/shared/assets/images/heros/conman/conman.png';
-import instagramImage from '@/shared/assets/images/heros/fate-priest/Believer.png';
+import ArvotImage from '@/shared/assets/images/joinusPage/Arvot.png';
+import KaikkienKaveritImage from '@/shared/assets/images/joinusPage/KaikkienKaverit.png';
+import OpetusmaailmaImage from '@/shared/assets/images/joinusPage/Opetusmaailma.png';
+import ClanLabelImage from '@/shared/assets/images/joinusPage/ClanLabelSomePersons.png';
 import igIcon from '@/shared/assets/images/Insta2.svg';
 import fbdIcon from '@/shared/assets/images/Facebook2.svg';
 import discordIcon from '@/shared/assets/images/Discord2.svg';
@@ -16,8 +14,8 @@ import ytIcon from '@/shared/assets/images/Youtube2.svg';
  * Supports multiple links per block, internationalized text labels, descriptions, and an optional image.
  *
  * @param {string} section -
- * A section identifier (e.g., "discord", "teachers", "feedback") that is used to construct the correct
- * translation keys dynamically. These keys are combined to fetch the localized label, description, link texts, and alt texts.
+ * A section identifier used to construct translation keys dynamically.
+ * These keys are combined to fetch the localized label, description, link texts, and alt texts.
  *
  * @param {BlockSection['links']} link -
  * An array of link objects. Each object represents a link associated with the block and should include:
@@ -37,7 +35,7 @@ import ytIcon from '@/shared/assets/images/Youtube2.svg';
  *
  * @callback t
  * @param {string} key -
- * The translation key used to fetch the localized string (e.g., "block-label-discord", "block-description-feedback").
+ * The translation key used to fetch the localized string.
  *
  * @returns {string} -
  * The translated string value associated with the provided key.
@@ -57,51 +55,18 @@ export const makeBlocksWithI18n = (
                 text: t(`block-link-text-${linkItem.text}`),
                 isExternal: linkItem.isExternal ?? false,
                 iconSrc: linkItem.iconSrc,
+                showExternalIcon: linkItem.showExternalIcon,
             })),
             img: img || '',
             imgAlt: t(`block-image-alt-${section}`),
         };
     };
 };
 
-export const makeDiscordBlock = makeBlocksWithI18n(
-    'discord',
-    [{ text: 'discord', url: AppExternalLinks.discord, isExternal: true }],
-    discordImage.src.toString(),
-);
-export const makeRedditBlock = makeBlocksWithI18n(
-    'connection',
+export const makeGetInTouchAndFollow = makeBlocksWithI18n(
+    'getInTouchAndFollow',
     [
-        { text: 'email', url: 'mailto:proyaleg@gmail.com', isExternal: true },
-        { text: 'phone', url: 'tel:+358442407396', isExternal: true },
-    ],
-    ConnectionImage.src.toString(),
-);
-export const makeTeachersBlock = makeBlocksWithI18n(
-    'teachers',
-    [
-        { text: 'email', url: 'mailto:proyaleg@gmail.com', isExternal: true },
         { text: 'phone', url: 'tel:+358442407396', isExternal: true },
-        { text: 'teacherPg', url: AppExternalLinks.dlpackage, isExternal: true },
-    ],
-    teachersImage.src.toString(),
-);
-export const makeFeedbackBlock = makeBlocksWithI18n(
-    'feedback',
-    [
-        { text: 'feedbackWep', url: AppExternalLinks.googleWebFeedback, isExternal: true },
-        { text: 'feedbackGame', url: AppExternalLinks.googleFeedback, isExternal: true },
-    ],
-    feedbackImage.src.toString(),
-);
-export const makeDuunitoriBlock = makeBlocksWithI18n(
-    'duunitori',
-    [{ text: 'duunitori', url: AppExternalLinks.duunitori, isExternal: true }],
-    duunitoriImage.src.toString(),
-);
-export const makeInstagramBlock = makeBlocksWithI18n(
-    'instagram',
-    [
         {
             text: 'icone',
             url: AppExternalLinks.discord,
@@ -126,6 +91,66 @@ export const makeInstagramBlock = makeBlocksWithI18n(
             isExternal: true,
             iconSrc: igIcon.src,
         },
+        { text: 'email', url: 'mailto:proyaleg@gmail.com', isExternal: true },
+    ],
+    ClanLabelImage.src.toString(),
+);
+
+export const makeCommunityAndOpportunities = makeBlocksWithI18n(
+    'communityAndOpportunities',
+    [
+        {
+            text: 'discord',
+            url: AppExternalLinks.discord,
+            isExternal: true,
+            showExternalIcon: true,
+        },
+        {
+            text: 'news',
+            url: '/fi/news',
+            isExternal: false,
+            showExternalIcon: false,
+        },
+        {
+            text: 'duunitori',
+            url: AppExternalLinks.duunitori,
+            isExternal: true,
+            showExternalIcon: true,
+        },
+    ],
+    KaikkienKaveritImage.src.toString(),
+);
+
+export const makeEducationProfessionals = makeBlocksWithI18n(
+    'educationProfessionals',
+    [
+        { text: 'phone', url: 'tel:+358442407396', isExternal: true },
+        {
+            text: 'teacherPg',
+            url: AppExternalLinks.dlpackage,
+            isExternal: true,
+            showExternalIcon: true,
+        },
+        { text: 'email', url: 'mailto:proyaleg@gmail.com', isExternal: true },
+    ],
+    OpetusmaailmaImage.src.toString(),
+);
+
+export const makeFeedback = makeBlocksWithI18n(
+    'feedback',
+    [
+        {
+            text: 'feedbackWep',
+            url: AppExternalLinks.googleWebFeedback,
+            isExternal: true,
+            showExternalIcon: true,
+        },
+        {
+            text: 'feedbackGame',
+            url: AppExternalLinks.googleFeedback,
+            isExternal: true,
+            showExternalIcon: true,
+        },
     ],
-    instagramImage.src.toString(),
+    ArvotImage.src.toString(),
 );

frontend-next-migration/src/entities/JoinUs/types/index.ts

@@ -16,6 +16,7 @@ export interface BlockSection {
         text: string;
         url: string;
         isExternal?: boolean;
+        showExternalIcon?: boolean;
         iconSrc?: string;
     }[];
     img: string;