diff --git a/frontend-next-migration/src/app/[lng]/(helper)/join-us/_getPage.ts b/frontend-next-migration/src/app/[lng]/(helper)/join-us/_getPage.ts index 997603549..381f5c685 100644 --- a/frontend-next-migration/src/app/[lng]/(helper)/join-us/_getPage.ts +++ b/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({ 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()}`, }, diff --git a/frontend-next-migration/src/entities/JoinUs/index.ts b/frontend-next-migration/src/entities/JoinUs/index.ts index e324a88a6..3fbceff3b 100644 --- a/frontend-next-migration/src/entities/JoinUs/index.ts +++ b/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'; diff --git a/frontend-next-migration/src/entities/JoinUs/model/makeJoinUsBlocks.ts b/frontend-next-migration/src/entities/JoinUs/model/makeJoinUsBlocks.ts index ff7672542..696e5d7b7 100644 --- a/frontend-next-migration/src/entities/JoinUs/model/makeJoinUsBlocks.ts +++ b/frontend-next-migration/src/entities/JoinUs/model/makeJoinUsBlocks.ts @@ -3,9 +3,7 @@ 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 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,6 +55,7 @@ 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}`), @@ -64,44 +63,10 @@ export const makeBlocksWithI18n = ( }; }; -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 }, ], - instagramImage.src.toString(), + ConnectionImage.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, + }, + ], + discordImage.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 }, + ], + teachersImage.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, + }, + ], + feedbackImage.src.toString(), ); diff --git a/frontend-next-migration/src/entities/JoinUs/types/index.ts b/frontend-next-migration/src/entities/JoinUs/types/index.ts index 01123d85a..5323432d1 100644 --- a/frontend-next-migration/src/entities/JoinUs/types/index.ts +++ b/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; diff --git a/frontend-next-migration/src/entities/JoinUs/ui/Block.module.scss b/frontend-next-migration/src/entities/JoinUs/ui/Block.module.scss index 4e62fac50..83f80ee71 100644 --- a/frontend-next-migration/src/entities/JoinUs/ui/Block.module.scss +++ b/frontend-next-migration/src/entities/JoinUs/ui/Block.module.scss @@ -1,52 +1,67 @@ .Container { + position: relative; + + display: flex; + align-items: center; + justify-content: center; + + width: 100%; + min-height: 240px; margin: auto 0; - padding: 0 0 5px 0; - text-align: center; - height: 100%; - place-content: center; - border-radius: var(--border-radius-custom); + padding: 40px 48px; + + text-align: left; + + border-radius: 12px; background-color: #1E3544; + border: 2px solid black; - box-shadow: 0.5rem 0.5rem black; - text-align: left; - display: flex; - align-items: center; - justify-content: flex-start; + box-shadow: 8px 8px 0 black; + .Content { + width: 100%; - .Content{ - flex-grow: 1; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; } - + .multilineText { white-space: pre-line; - } + } + + .ImageWrapper { + position: absolute; + + left: 48px; + top: 50%; + + transform: translateY(-50%); - .ImageWrapper { - width: fit-content; - height: 236px; display: flex; - flex-shrink: 0; - margin: auto 10px; - padding: 10px; align-items: center; + justify-content: center; - - img{ - width: 12em; - height: 12em; - object-fit: center; + img { + width: 10em; + height: 10em; + object-fit: contain; } - } + } h2 { - padding: 15px 0 0 0; - margin: 0; + margin: 0 0 16px; + color: var(--primary-color); font: var(--font-sw-xxl); + line-height: 1.1; + white-space: pre-line; + text-align: center; } h3 { @@ -55,139 +70,287 @@ } p { + max-width: 720px; + + margin: 0 0 24px; + font: var(--font-dm-s); - margin: 15px 0; + color: var(--text-color); - line-height: 1.1em; - text-align: left; - max-width: 85%; - align-self: flex-start; - + + line-height: 1.5; + text-align: center; } a { - text-decoration: underline; + display: inline-flex; + flex-direction: row; + align-items: center; + justify-content: center; + + gap: 4px; + font: var(--font-dm-s); - color: var(--primary-color)!important; + + color: var(--primary-color) !important; text-decoration: none; - + + white-space: nowrap; &:hover { - color: var(--secondary-color)!important; + color: var(--secondary-color) !important; } - - &::after { - content: ''; - display: block; - padding: 0 0 10px; - } } + .linkWrapper { + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; + + column-gap: 24px; + row-gap: 12px; + padding: 0; margin: 0; - line-height: 0.8em; + + line-height: 1.4; } - - .linkWrapper:has(img) { + /* text link spacing */ + .linkWrapper:not(:has(.icon)) { + margin: 0 24px; + } + + /* social icon spacing */ + .linkWrapper:has(.icon) { + margin: 0 -12px; + } + .socialLinks { display: flex; align-items: center; - margin: 0 10px 0 0; - a { - display:inline-flex; + justify-content: center; + flex-wrap: nowrap; + gap: 4px; + } + + .linkWrapper:has(.icon) { + display: flex; + align-items: center; + + margin-top: 0; + margin-bottom: 0; + + a { + display: inline-flex; + align-items: center; flex-direction: row; - img{ - color: #ffa100; - width: 2.7vh; + img:not(.ExternalIcon) { + width: 28px; + height: 28px; + transition: transform 0.15s ease; - + + filter: + brightness(0) + saturate(100%) + invert(70%) + sepia(77%) + saturate(2247%) + hue-rotate(360deg) + brightness(101%) + contrast(105%); } - - &:hover img { - transform: scale(1.1); - } - } + &:hover img:not(.ExternalIcon) { + transform: scale(1.1); + } } + } } +.ExternalIcon { + width: 0.8em; + height: 0.8em; + + display: inline-block; + + margin-left: 0.2em; + vertical-align: middle; + + object-fit: contain; +} + +.Reverse .ImageWrapper { + left: auto; + right: 48px; +} @media (max-width: breakpoint(md)) { .Container { flex-direction: column; align-items: center; - justify-content: center; - text-align: center; - padding: 10px 0 0; - margin: auto; + justify-content: flex-start; + width: 100%; + + min-height: 520px; + + margin: auto; + padding: 56px 24px; + gap: 40px; + + text-align: center; + box-shadow: 0.2rem 0.2rem #121212; + .Content { + width: 100%; + + gap: 40px; + } + + .Content > .linkWrapper { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + row-gap: 20px; + } + .linkWrapper { margin: 0; padding: 0; + + width: auto; } + + .socialLinks { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + + gap: 4px; + + img { + width: 32px !important; + height: 32px !important; + } + } + .ImageWrapper { + position: static; + + transform: none; + width: 100%; height: auto; - margin: 0; - padding: 0; + display: flex; justify-content: center; align-items: center; - img{ + margin: 0; + padding: 0; + + img { width: 8em; height: 8em; - object-fit: center; + object-fit: contain; } } - - - p{ - font: var(--font-dm-xs); - margin: 10px auto; - padding: 0 10px; + h2 { + margin: 0 0 36px; + } + + p { + max-width: 270px; + + margin: 8px 0 56px; + + font-size: 1.9rem; + font-weight: 400; + line-height: 1.65; + + text-align: center; + } + + a { + display: inline-flex; + flex-direction: column; + align-items: center; + justify-content: center; + + font-size: 1.9rem; + font-weight: 400; + line-height: 1.65; + + gap: 2px; + text-align: center; - max-width: 100%; + + white-space: nowrap; + } + + .ExternalIcon { + display: block; + + width: 0.8em; + height: 0.8em; + + margin-top: 2px; + margin-left: 0; } - .linkWrapper:has(img) { + .linkWrapper:has(.icon) { display: flex; align-items: center; - width: 100%; - margin: 0 10px 10px ; - } + width: auto; + margin: 0; + } } } -@media (min-width: breakpoint(md)) and (max-width: 900px) { + +@media (min-width: breakpoint(md)) and (max-width: 1200px) { .Container { + padding: 32px 32px 32px 140px; + .ImageWrapper { - width: fit-content; - height: auto; - margin: 0; - padding: 0; - display: flex; - justify-content: center; - align-items: center; + top: 24px; + left: 24px; + right: auto; - img{ - width: 8em; - height: 8em; - object-fit: center; + transform: none; + + img { + width: 6em; + height: 6em; } } } -} - - + .Reverse.Container { + padding: 32px 140px 32px 32px; + .ImageWrapper { + top: 24px; + right: 24px; + left: auto; + transform: none; + img { + width: 6em; + height: 6em; + } + } + } +} \ No newline at end of file diff --git a/frontend-next-migration/src/entities/JoinUs/ui/Block.tsx b/frontend-next-migration/src/entities/JoinUs/ui/Block.tsx index dbbe8d212..9719c24ec 100644 --- a/frontend-next-migration/src/entities/JoinUs/ui/Block.tsx +++ b/frontend-next-migration/src/entities/JoinUs/ui/Block.tsx @@ -1,5 +1,6 @@ import type { BlockSection } from '../types'; import cls from './Block.module.scss'; +import externalLinkIcon from '@/shared/assets/icons/ExternalLink.svg'; /** * Block Component @@ -12,14 +13,24 @@ import cls from './Block.module.scss'; interface Props { block: BlockSection; + reverse?: boolean; } export const Block = (props: Props) => { - const { block } = props; + const { block, reverse = false } = props; + + if (!block) { + return null; + } + + const links = block.links ?? []; + + const socialLinks = links.filter((link) => link.iconSrc); + const normalLinks = links.filter((link) => !link.iconSrc); return (
@@ -30,29 +41,77 @@ export const Block = (props: Props) => { alt={block.imgAlt} />
+

{block.label}

+

{block.description}

+
- {block.links.map((link, index) => ( + {normalLinks.slice(0, 1).map((link, index) => (
- {link.iconSrc && ( + {link.text} + + {link.showExternalIcon && ( // eslint-disable-next-line @next/next/no-img-element + External link + )} + +
+ ))} + + {socialLinks.length > 0 && ( +
+ {socialLinks.map((link, index) => ( + + {/* eslint-disable-next-line @next/next/no-img-element */} {`${link.text} - )} + + ))} +
+ )} + + {normalLinks.slice(1).map((link, index) => ( +
+ {link.text} + + {link.showExternalIcon && ( + // eslint-disable-next-line @next/next/no-img-element + External link + )}
))} diff --git a/frontend-next-migration/src/preparedPages/JoinUsPage/types/index.ts b/frontend-next-migration/src/preparedPages/JoinUsPage/types/index.ts index 98ae16680..a3987381e 100644 --- a/frontend-next-migration/src/preparedPages/JoinUsPage/types/index.ts +++ b/frontend-next-migration/src/preparedPages/JoinUsPage/types/index.ts @@ -16,6 +16,7 @@ export interface BlockSection { text: string; url: string; isExternal?: boolean; + showExternalIcon?: boolean; iconSrc?: string; type?: string; // 'mail' for mailto, 'phone' for number, 'link' for normal links clickable?: boolean; // Set to false for numbers that should not be clickable diff --git a/frontend-next-migration/src/preparedPages/JoinUsPage/ui/JoinUsPage.module.scss b/frontend-next-migration/src/preparedPages/JoinUsPage/ui/JoinUsPage.module.scss index 73a426a2c..a9b2167e9 100644 --- a/frontend-next-migration/src/preparedPages/JoinUsPage/ui/JoinUsPage.module.scss +++ b/frontend-next-migration/src/preparedPages/JoinUsPage/ui/JoinUsPage.module.scss @@ -1,65 +1,54 @@ .Container { + width: 100%; + max-width: 1440px; + + margin: 0 auto; + padding: 0 48px 64px; border-radius: var(--border-radius-custom); - padding: 0 20px 20px 0; h1 { - font: var(--font-sw-5xl); - line-height: 1.5rem; - text-align: left; - color: var(--primary-color); - } + margin: 64px 0 40px; - @keyframes lineExpand { - 0% { - width: 0; - } + color: var(--primary-color); - 100% { - width: 500px; - max-width: 70vw; - } + font: var(--font-sw-5xl); + line-height: 1.1; + text-align: left; } } @media screen and (max-width: breakpoint(md)) { .Container { - padding: 10px; - margin: 0 auto; + padding: 0 16px 48px; h1 { + margin: 32px 0 24px; + font: var(--font-sw-xxl); - margin: 0 0 20px; - margin-top: 7vh; - padding: 20px 0 0 0; - text-align: center; + text-align: left; } } - } @media screen and ((min-width: breakpoint(sm)) and (max-width: breakpoint(md))) { .Container { - padding: 10px 20px; - margin: 0 auto; + padding: 0 24px 56px; h1 { - font: var(--font-sw-5xl); - margin: 40px auto; - margin-top: 10vh; + margin: 48px 0 32px; + + font: var(--font-sw-4xl); } } } @media screen and (min-width: breakpoint(md)) { .Container { - padding: 10px 20px; - margin: 0 auto; + padding: 0 48px 64px; h1 { - font: var(--font-sw-5xl); - margin: 40px auto; - margin-top: 10vh; + margin-top: 64px; } } } \ No newline at end of file diff --git a/frontend-next-migration/src/preparedPages/JoinUsPage/ui/JoinUsPage.stories.tsx b/frontend-next-migration/src/preparedPages/JoinUsPage/ui/JoinUsPage.stories.tsx index 17f89e5ca..d607d9229 100644 --- a/frontend-next-migration/src/preparedPages/JoinUsPage/ui/JoinUsPage.stories.tsx +++ b/frontend-next-migration/src/preparedPages/JoinUsPage/ui/JoinUsPage.stories.tsx @@ -127,13 +127,10 @@ type Story = StoryObj; export const Default: Story = { args: { title: 'Join Us!', - discordBlock: mockDiscordBlock, - // redditBlock: mockRedditBlock, - teachersBlock: mockTeachersBlock, + getInTouchAndFollowBlock: mockConnectionBlock, + communityAndOpportunitiesBlock: mockDiscordBlock, + educationProfessionalsBlock: mockTeachersBlock, feedbackBlock: mockFeedbackBlock, - duunitoriBlock: mockDuunitoriBlock, - connectionBlock: mockConnectionBlock, - instagramBlock: mockInstagramBlock, }, parameters: { layout: 'fullscreen', diff --git a/frontend-next-migration/src/preparedPages/JoinUsPage/ui/JoinUsPage.test.tsx b/frontend-next-migration/src/preparedPages/JoinUsPage/ui/JoinUsPage.test.tsx index 15c079f8b..4732a9bc5 100644 --- a/frontend-next-migration/src/preparedPages/JoinUsPage/ui/JoinUsPage.test.tsx +++ b/frontend-next-migration/src/preparedPages/JoinUsPage/ui/JoinUsPage.test.tsx @@ -34,31 +34,15 @@ const feedbackBlock: BlockSection = { img: '', }; -const duunitoriBlock: BlockSection = { - label: 'Duunitori', - description: 'Open positions at Duunitori.', - links: [{ text: 'Duunitori link', url: 'https://example.com', isExternal: true }], - img: '', -}; - -const instagramBlock: BlockSection = { - label: 'Instagram', - description: 'Follow us on Instagram!', - links: [{ text: 'Instagram link', url: 'https://example.com', isExternal: true }], - img: '', -}; - describe('JoinUsPage', () => { const setup = () => render( , ); @@ -73,31 +57,24 @@ describe('JoinUsPage', () => { // Labels expect(screen.getByText('Discord')).toBeInTheDocument(); expect(screen.getByText('Reddit')).toBeInTheDocument(); - expect(screen.getByText('Instagram')).toBeInTheDocument(); expect(screen.getByText('Teachers!')).toBeInTheDocument(); expect(screen.getByText('Feedback')).toBeInTheDocument(); - expect(screen.getByText('Duunitori')).toBeInTheDocument(); // Descriptions expect(screen.getByText('Join our Discord server to connect!')).toBeInTheDocument(); expect(screen.getByText('Reddit community page.')).toBeInTheDocument(); - expect(screen.getByText('Follow us on Instagram!')).toBeInTheDocument(); expect(screen.getByText('Information for teachers.')).toBeInTheDocument(); expect(screen.getByText('Send us your feedback.')).toBeInTheDocument(); - expect(screen.getByText('Open positions at Duunitori.')).toBeInTheDocument(); // Link texts expect(screen.getByText('Discord link')).toBeInTheDocument(); expect(screen.getByText('Reddit link')).toBeInTheDocument(); - expect(screen.getByText('Instagram link')).toBeInTheDocument(); expect(screen.getByText('Teachers link')).toBeInTheDocument(); expect(screen.getByText('Feedback link')).toBeInTheDocument(); - expect(screen.getByText('Duunitori link')).toBeInTheDocument(); // imgs expect(screen.queryByAltText('Discord Icon')).not.toBeInTheDocument(); expect(screen.queryByAltText('Reddit Icon')).not.toBeInTheDocument(); - expect(screen.queryByAltText('Instagram Icon')).not.toBeInTheDocument(); expect(screen.queryByAltText('Teachers Icon')).not.toBeInTheDocument(); expect(screen.queryByAltText('Feedback Icon')).not.toBeInTheDocument(); }); diff --git a/frontend-next-migration/src/preparedPages/JoinUsPage/ui/JoinUsPage.tsx b/frontend-next-migration/src/preparedPages/JoinUsPage/ui/JoinUsPage.tsx index 299a7a258..de4f16a2f 100644 --- a/frontend-next-migration/src/preparedPages/JoinUsPage/ui/JoinUsPage.tsx +++ b/frontend-next-migration/src/preparedPages/JoinUsPage/ui/JoinUsPage.tsx @@ -5,24 +5,20 @@ import { BlockSection } from '../types'; export interface Props { title: string; - discordBlock: BlockSection; - connectionBlock: BlockSection; - instagramBlock: BlockSection; - teachersBlock: BlockSection; + getInTouchAndFollowBlock: BlockSection; + communityAndOpportunitiesBlock: BlockSection; + educationProfessionalsBlock: BlockSection; feedbackBlock: BlockSection; - duunitoriBlock: BlockSection; navHeight?: number; } export const JoinUsPage = (props: Props) => { const { title, - discordBlock, - connectionBlock, - instagramBlock, - teachersBlock, + getInTouchAndFollowBlock, + communityAndOpportunitiesBlock, + educationProfessionalsBlock, feedbackBlock, - duunitoriBlock, } = props; return ( @@ -31,13 +27,12 @@ export const JoinUsPage = (props: Props) => {

{title}

+ diff --git a/frontend-next-migration/src/shared/i18n/locales/fi/join-us.json b/frontend-next-migration/src/shared/i18n/locales/fi/join-us.json index 70ccac9df..92854f00c 100644 --- a/frontend-next-migration/src/shared/i18n/locales/fi/join-us.json +++ b/frontend-next-migration/src/shared/i18n/locales/fi/join-us.json @@ -1,8 +1,8 @@ { - "join-us": "Tule mukaan!", - "head-title": "Tule mukaan - ALT Zone", + "join-us": "Ota yhteyttä", + "head-title": "Ota yhteyttä - ALT Zone", "head-description": "Liity ALT Zone -projektiin! Tule testaajaksi, tutustu opetuspaketteihin, hae työharjoitteluun, liity Discord-yhteisöömme tai jaa palautteesi pelimme parantamiseksi.", - "head-keywords": "ALT Zone tule mukaan, testaaja, opetuspaketti, työharjoittelu, vapaaehtoistyö, Discord", + "head-keywords": "ALT Zone yhteystiedot, testaaja, opetuspaketti, työharjoittelu, vapaaehtoistyö, Discord", "og-title": "Liity ALT Zone -projektiin", "og-description": "Ole osa ALT Zone -matkaa — testaa peliämme, tutustu opetusvälineisiin, liity Discordiin, hae työharjoittelua tai lähetä meille palautetta.", @@ -13,15 +13,24 @@ "block-label-instagram": "Keskustele lisää \nsomessa", "block-label-discord": "Tule Testaajaksi", + "block-label-getInTouchAndFollow": "Ole yhteydessä ja seuraa", + "block-label-communityAndOpportunities": "Työyhteisö ja mahdollisuudet", + "block-label-educationProfessionals": "Opetuksen ammattilaiselle", + "block-description-discord": "Tule kertomaan ideasi liittymällä Discord- \npeliyhteisöömme", "block-description-connection": "Mikäli kiinnostuit projektistamme, ota rohkeasti yhteyttä", "block-description-teachers": "Ilmoittaudu testaamaan opetuspakettia", "block-description-duunitori": "Tarjoamme mahdollisuuksien mukaan palkatonta työkokeilua ja -harjoittelua projektimme parissa. Olet tervetullut tekemään hommia myös vapaaehtoisena. \n\nTarkastele avoimia paikkoja Duunitorista.", - "block-description-feedback": "Palautelomakkeen tavoite on kerätä palautetta \nnettisivuista ja mobiilipelistä jatkokehitystä varten. \nPalautteesi on ensisijaisen tärkeää ja käsittelemme \npalautteet yhdessä kehitystiimin kanssa. \n\nKiitos vastauksistasi jo etukäteen!", + "block-description-feedback": "Palautelomakkeen tavoite on kerätä palautetta \nnettisivuista ja mobiilipelistä jatkokehitystä varten. \nPalautteesi on ensisijaisen tärkeää ja käsittelemme \npalautteet yhdessä kehitystiimin kanssa. \n\nKiitos vastauksistasi jo etukäteen!", "block-description-instagram": "", + "block-description-getInTouchAndFollow": "Mikäli kiinnostuit projektistamme, ota rohkeasti yhteyttä. Seuraa meitä myös somessa!", + "block-description-communityAndOpportunities": "Tule kertomaan ideasi liittymällä Discord-peliyhteisöömme! Tarjoamme mahdollisuuksien mukaan palkatonta työkokeilua ja -harjoittelua projektiemme parissa. Olet tervetullut tekemään hommia myös vapaaehtoisena. Tarkastele myös avoimia paikkoja Duunitorissa.", + "block-description-educationProfessionals": "Ilmoittaudu testaamaan opetuspakettia!", + "block-link-text-discord": "discord.gg/mgjQkCR2Fg", "block-link-text-teacherPg": "Tutustu opetuspakettiin", + "block-link-text-news": "Tutustu meihin uutisissa", "block-link-text-duunitori": "Avoimet paikat Duunitorissa", "block-link-text-feedbackWep": "Verkkosivu lomake", "block-link-text-feedbackGame": "Peli lomake", @@ -31,11 +40,15 @@ "block-link-text-icone": "", "block-image-alt-discord": "Discord", - "block-image-alt-connection": "Reddit", - "block-image-alt-teachers": "Teacher!", + "block-image-alt-connection": "Yhteystiedot", + "block-image-alt-teachers": "Opetus", "block-image-alt-duunitori": "Duunitori", - "block-image-alt-feedback": "Feedback", + "block-image-alt-feedback": "Palaute", "block-image-alt-instagram": "Instagram", + "block-image-alt-getInTouchAndFollow": "Ota yhteyttä", + "block-image-alt-communityAndOpportunities": "Työyhteisö ja mahdollisuudet", + "block-image-alt-educationProfessionals": "Opetuksen ammattilaiselle", + "block-website": "www.example.com" } diff --git a/frontend-next-migration/src/widgets/SectionJoinUs/ui/SectionJoinUs.module.scss b/frontend-next-migration/src/widgets/SectionJoinUs/ui/SectionJoinUs.module.scss index 1b7a3632a..82f0b367e 100644 --- a/frontend-next-migration/src/widgets/SectionJoinUs/ui/SectionJoinUs.module.scss +++ b/frontend-next-migration/src/widgets/SectionJoinUs/ui/SectionJoinUs.module.scss @@ -1,23 +1,15 @@ .Container { - display: grid; - gap: 35px; - margin: 10px auto 40px; - flex-direction: row-reverse; - padding-bottom: 2vh; + display: flex; + flex-direction: column; + gap: 32px; + width: 100%; + margin: 0 auto; + padding-bottom: 48px; } -@media screen and (min-width: breakpoint(sm)) { +@media screen and (max-width: breakpoint(md)) { .Container { - grid-template-columns: repeat(2, minmax(0, 1fr)); - grid-template-rows: repeat(3, minmax(0, 1fr)); - margin: 10px auto; - } -} -@media screen and (max-width: breakpoint(sm)) { - .Container { - grid-template-columns: 1fr; - grid-template-rows: auto; - gap: 20px; - margin: 0 auto; + gap: 24px; + padding-bottom: 32px; } } diff --git a/frontend-next-migration/src/widgets/SectionJoinUs/ui/SectionJoinUs.tsx b/frontend-next-migration/src/widgets/SectionJoinUs/ui/SectionJoinUs.tsx index b0d7272da..83dbefc45 100644 --- a/frontend-next-migration/src/widgets/SectionJoinUs/ui/SectionJoinUs.tsx +++ b/frontend-next-migration/src/widgets/SectionJoinUs/ui/SectionJoinUs.tsx @@ -25,6 +25,7 @@ interface Props { export const SectionJoinUs = (props: Props) => { const { blocks } = props; + return ( { ))}