Casimir/enhancement/648 match front page to figma v2

frontend-next-migration/src/preparedPages/MainPage/ui/MainPage.tsx

@@ -25,6 +25,11 @@ import { ContactSection, ContactSectionProps } from './_components/sections/Cont
 import { useParams } from 'next/navigation';
 import { useClientTranslation } from '@/shared/i18n';
 import { WallIntroAnimation } from '@/shared/ui/v2/WallIntroAnimation';
+import { CardV2 } from '@/shared/ui/v2/CardV2';
+import char1 from '@/shared/assets/images/mainpage/Defencegallery202.png';
+import char2 from '@/shared/assets/images/mainpage/Defencegallery403.png';
+import char3 from '@/shared/assets/images/mainpage/Defencegallery603.png';
+import { Button, ButtonTheme } from '@/shared/ui/v2/Button';
 
 export type Props = {
     projectDescription: ProjectDescriptionProps;
@@ -51,87 +56,60 @@ function MainPage(props: Props) {
         <div className={cls.MainPage}>
             <WallIntroAnimation renderOnce />
 
-            <Header />
+            <div className={cls.sections}>
+                <Header />
+                <PlayWithUs {...playWithUs} />
+                <CardV2
+                    images={[
+                        { src: char1, alt: 'Defense character 1' },
+                        { src: char2, alt: 'Defense character 2' },
+                        { src: char3, alt: 'Defense character 3' },
+                    ]}
+                    title={t('descriptionCard-title')}
+                    description={t('descriptionCard-description')}
+                    actions={
+                        <Button
+                            path="/defense-gallery"
+                            theme={ButtonTheme.PRIMARY}
+                        >
+                            {t('descriptionCard-button')}
+                        </Button>
+                    }
+                />
+                <ContactSection {...contactSection} />
 
-            <ProjectDescription
-                className={cls.description}
-                {...projectDescription}
-            />
+                <div className={cls.newsSection}>
+                    <h2 className={cls.newsHeader}>{t('newsSection-title')}</h2>
+                    <div className={cls.newsGrid}>
+                        {groupedNews.map((news) => {
+                            const imageSrc = news.titlePicture?.id
+                                ? `${directusBaseUrl}/assets/${news.titlePicture.id}`
+                                : hannu.src;
 
-            <PlayWithUs {...playWithUs} />
+                            return (
+                                <NewsCard
+                                    key={news.id}
+                                    titlePicture={imageSrc}
+                                    title={news.title}
+                                    previewText={news.previewText}
+                                    date={news.date}
+                                    id={news.id}
+                                />
+                            );
+                        })}
+                    </div>
 
-            {isMobileSize ? (
-                <div className={cls.descriptionCardMobile}>
-                    <a
-                        className={cls.cardLink}
-                        href={`/defense-gallery`}
-                        rel="noopener noreferrer"
-                    >
-                        <DescriptionCardMobile theme={DescriptionCardMobileTheme.DEFENSEGALLERY}>
-                            <DescriptionCardMobile.Texts title={t('descriptionCard-title')} />
-                            <DescriptionCardMobile.Image
-                                src={defenceGalleryMobile}
-                                alt="defense gallery mobile"
-                            />
-                        </DescriptionCardMobile>
-                    </a>
-                </div>
-            ) : (
-                <div className={cls.descriptionCard}>
-                    <DescriptionCard
-                        theme={DescriptionCardTheme.DEFENSEGALLERY}
-                        path={'/defense-gallery'}
-                    >
-                        <DescriptionCard.Texts width="35%">
-                            <DescriptionCard.Texts.Title>
-                                {t('descriptionCard-title')}
-                            </DescriptionCard.Texts.Title>
-                        </DescriptionCard.Texts>
-                        <DescriptionCard.Image width="65%">
-                            <DescriptionCard.Image.Image
-                                src={defenceGallery}
-                                alt="defence gallery"
-                            />
-                        </DescriptionCard.Image>
-                    </DescriptionCard>
-                </div>
-            )}
-
-            <AltZone {...altZone} />
-
-            <div className={cls.newsSection}>
-                <h2 className={cls.newsHeader}>{t('newsSection-title')}</h2>
-                <div className={cls.newsGrid}>
-                    {groupedNews.map((news) => {
-                        const imageSrc = news.titlePicture?.id
-                            ? `${directusBaseUrl}/assets/${news.titlePicture.id}`
-                            : hannu.src;
-
-                        return (
-                            <NewsCard
-                                key={news.id}
-                                titlePicture={imageSrc}
-                                title={news.title}
-                                previewText={news.previewText}
-                                date={news.date}
-                                id={news.id}
-                            />
-                        );
-                    })}
-                </div>
-
-                <div className={cls.linkWrapper}>
-                    <a
-                        className={cls.link}
-                        href={`/news`}
-                        rel="noopener noreferrer"
-                    >
-                        {t('newsSection-seeMore')}
-                    </a>
+                    <div className={cls.linkWrapper}>
+                        <a
+                            className={cls.link}
+                            href={`/news`}
+                            rel="noopener noreferrer"
+                        >
+                            {t('newsSection-seeMore')}
+                        </a>
+                    </div>
                 </div>
             </div>
-
-            <ContactSection {...contactSection} />
         </div>
     );
 }

frontend-next-migration/src/preparedPages/MainPage/ui/_components/sections/AltZone/AltZone.module.scss

@@ -131,7 +131,7 @@
         flex-direction: column-reverse;
         justify-content: center;
         align-items: center;
-        width: 80%;
+        width: 70%;
     }
     .title {
         font-size: 1.7rem;

frontend-next-migration/src/preparedPages/MainPage/ui/_components/sections/ContactSection/ContactSection.module.scss

@@ -2,4 +2,20 @@
     width: 24px;
     height: 24px;
     flex-shrink: 0;
-}
+}
+.DiscordButton{
+    border-color: var(--primary-color);
+    box-shadow: black;
+}
+.ContactSection {
+    min-height: 401px;
+    display: flex;
+    align-items: center;
+
+    @media (max-width: breakpoint(md)) {
+        padding: 2rem 1rem;
+        min-height: unset;
+    }
+}
+
+

frontend-next-migration/src/preparedPages/MainPage/ui/_components/sections/ContactSection/ContactSection.tsx

@@ -3,7 +3,7 @@ import { CTASection } from '@/shared/ui/CtaSection';
 import { Button, ButtonTheme } from '@/shared/ui/v2/Button';
 import Image from 'next/image';
 import DiscordIcon from '@/shared/assets/images/Discord2.svg';
-import ContactImg from '@/shared/assets/images/Orang_hero.webp';
+import ContactImg from '@/shared/assets/images/mainpage/Defencegallery401.png';
 import cls from './ContactSection.module.scss';
 
 export type ContactLink = {
@@ -29,6 +29,7 @@ export const ContactSection = (props: ContactSectionProps) => {
                         path={link.link}
                         isExternal={true}
                         theme={isDiscord ? ButtonTheme.OUTLINE : ButtonTheme.PRIMARY}
+                        className={isDiscord ? cls.DiscordButton : undefined}
                     >
                         {link.text}
                         {isDiscord && (
@@ -46,6 +47,8 @@ export const ContactSection = (props: ContactSectionProps) => {
 
     return (
         <CTASection
+            className={cls.ContactSection}
+            titleClassName={cls.contactTitle}
             title={title}
             imageSrc={ContactImg}
             imagePosition="right"

frontend-next-migration/src/preparedPages/MainPage/ui/_components/sections/NewsSection/NewsSection.module.scss

@@ -9,8 +9,7 @@
     flex-direction: column;
     gap: 2rem;
     .mainTitle {
-        font-family: var(--font-family-title);
-        font-size: 2rem;
+        font: var(--font-sw-xl);
         color: var(--primary-color);
     }
 }
@@ -41,7 +40,7 @@
 .cardContent {
     padding: 1rem;
     flex: 1;
-    font-family: var(--font-family-secondary);
+    font: var(--font-dm-m);
 }
 
 .cardImage img {
@@ -51,8 +50,7 @@
 }
 
 .cardTitle {
-    font-family: var(--font-family-title);
-    font-size: var(--font-line-2xl);
+    font: var(--font-sw-xxxl);
     color: var(--primary-color);
 }
 

frontend-next-migration/src/preparedPages/MainPage/ui/_components/sections/PlayWithUs/PlayWithUs.tsx

@@ -1,7 +1,7 @@
 'use client';
 import { CTASection } from '@/shared/ui/CtaSection';
 import { Button, ButtonTheme } from '@/shared/ui/v2/Button';
-import sideImg from '@/shared/assets/images/mainpage/HandGraphicWithBattle.png';
+import sideImg from '@/shared/assets/images/mainpage/HandGraphic.png';
 import { AppExternalLinks } from '@/shared/appLinks/appExternalLinks';
 import Image from 'next/image';
 import googlePlayIcon from '@/shared/assets/images/google-play-badge.png';

frontend-next-migration/src/preparedPages/MainPage/ui/_components/sections/ProjectDescription/ProjectDescription.module.scss

@@ -2,7 +2,6 @@
     display: flex;
     opacity: 0;
     flex-direction: column;
-    //margin-top: -10vh;
     &.inView {
         animation: fadeIn 1s ease-in-out;
         opacity: 1;
@@ -138,7 +137,7 @@
 }
 
 .titleQuestion {
-    font: var(--font-sw-4xl), sans-serif;
+    font: var(--font-sw-4xl);
     text-align: center;
     color: var(--primary-color);
     padding: 15px;

frontend-next-migration/src/preparedPages/MainPage/ui/page.module.scss

@@ -1,3 +1,11 @@
+.sections {
+    @media (max-width: breakpoint(md)) {
+        display: flex;
+        flex-direction: column;
+        gap: 48px;
+    }
+}
+
 .mainImgWrapper {
     position: relative;
     max-width: 1440px;

frontend-next-migration/src/shared/i18n/locales/en/main.json

@@ -18,7 +18,7 @@
     "main-description": "In the ALT Zone mobile game, you dive into the depths of the human mind, where game characters represent defense mechanisms and clash on the battlefield of social interaction.",
     "main-sub-description": "Explore the labyrinth of our souls\nCan you face your defenses?",
     "project-description-title": "What is ALT Zone?",
-    "project-description-text": "ALT Zone is an art-based mobile game created as a volunteer-driven production in collaboration with young people. In the game, human defense mechanisms clash on the battlefield of social interaction.\n\nAn accompanying educational package for lower and upper secondary schools will be created, which teachers can easily apply in practice. Students have the opportunity to continue developing the game. The revenue from the resulting ALT Zone 2.0 game will be donated in full to support the dreams of young people.",
+    "project-description-text": "ALT Zone 1.0 is an art-based mobile game created as a volunteer-driven production in collaboration with young people. In the game, human defense mechanisms clash on the battlefield of social interaction.\n\nAn accompanying educational package for lower and upper secondary schools will be created, which teachers can easily apply in practice. Students have the opportunity to continue developing the game. The revenue from the resulting ALT Zone 2.0 game will be donated in full to support the dreams of young people.",
     "project-description-array": [
         "ALT Zone is a mobile game enriched with artistic content, developed as a teaching tool for art education in comprehensive schools. Teaching game art is inherently challenging; it relies heavily on personal experience and analysis, making shared experiences nearly impossible to achieve.",
         "ALT Zone provides a common foundation for teaching game art. The teaching package is easy to implement; it includes a demo game that can be tested on a mobile or PC device, as well as questions guiding students toward critical thinking in game art. The game can also be analyzed solely through videos and images.",
@@ -38,7 +38,9 @@
     "playWithUs-BecomeATester-body": "Make the app better",
     "playWithUs-WebGLNotice": "Due to known WebGL compatibility issues, our WebGL game might not work correctly on iPhones or Macs.",
 
-    "descriptionCard-title": "Explore our Defense Classes",
+    "descriptionCard-title": "Explore our Defense soldiers",
+    "descriptionCard-description": "Our castle is surrounded by great and strong walls, defended by its own defense soldiers.",
+    "descriptionCard-button": "Meet all the characters",
 
     "gallery-seeMore": "See more",
     "playWithUs-download-text": "Google Play Store",

frontend-next-migration/src/shared/i18n/locales/fi/main.json

@@ -15,12 +15,12 @@
     "main-teacherspage": "Opettajan sivut",
     "main-play": "Pelaa peliä!",
 
-    "main-title": "TEHDÄÄN YHDESSÄ \nMAAILMAN PARAS PELI!",
+    "main-title": "Tehdään yhdessä maailman paras peli!",
     "main-description": "ALT Zone -mobiilipelissä astut ihmismielen syövereihin, jossa pelihahmot edustavat suojautumismekanismeja ja kohtaavat toisensa vuorovaikutustilanteiden taistelukentällä.",
     "main-sub-description": "Seikkaile sielujemme labyrintissa \nPystytkö kohtaamaan defenssisi?",
 
     "project-description-title": "Mikä ALT Zone?",
-    "project-description-text": "ALT Zone on vapaaehtoistuotantona toteuttava taidemobiilipeli, jota tehdään yhteistyössä nuorten kanssa. Pelissä ihmisen suojautumismekanismit kohtaavat toisensa vuorovaikutustilanteiden taistelukentällä.\n\nPelin oheen luodaan yläasteille ja toisen asteen oppilaitoksille suunnattu pelitaidekasvatuksen materiaali, jota opettaja voi helposti soveltaa käytännössä. Oppilailla on mahdollisuus jatkaa pelin kehittämistä. Ideoiden pohjalta valmistuva ALT Zone 2.0 -pelin tuotto lahjoitetaan lyhentämättömänä nuorten unelmien tukemiseksi.",
+    "project-description-text": "ALT Zone 1.0 on vapaaehtoistuotantona toteuttava taidemobiilipeli, jota tehdään yhteistyössä nuorten kanssa. Pelissä ihmisen suojautumismekanismit kohtaavat toisensa vuorovaikutustilanteiden taistelukentällä.\n\nPelin oheen luodaan yläasteille ja toisen asteen oppilaitoksille suunnattu pelitaidekasvatuksen materiaali, jota opettaja voi helposti soveltaa käytännössä. Oppilailla on mahdollisuus jatkaa pelin kehittämistä. Ideoiden pohjalta valmistuva ALT Zone 2.0 -pelin tuotto lahjoitetaan lyhentämättömänä nuorten unelmien tukemiseksi.",
     "project-description-array": [
         "ALT Zone on taiteellisella sisällöllä varustettu mobiilipeli, jota kehitetään peruskoulujen taideopetuksen opetusvälineeksi. Pelitaiteen opetus on itsessään haastavaa, opetus perustuu vahvasti omakohtaiseen kokemukseen ja analysointiin, yhteistä kokemusta on lähes mahdotonta saavuttaa.",
         "ALT Zone tarjoaa yhteisen pohjan pelitaiteen opetukselle. Opetuspaketti on helppo toteuttaa; se sisältää mobiili- tai pc-laitteella testattavan demopelin, sekä pelitaiteen ajatteluun ohjaavia kysymyksiä. Peliä voidaan myös analysoida pelkästään videoiden ja kuvien avulla.",
@@ -40,7 +40,9 @@
     "playWithUs-BecomeATester-body": "Tee sovelluksesta parempi",
     "playWithUs-WebGLNotice": "Tunnettujen WebGL-yhteensopivuusongelmien vuoksi WebGL-pelimme ei välttämättä toimi oikein iPhonessa tai Macissa.",
 
-    "descriptionCard-title": "Tutustu Defenssiluokkiimme",
+    "descriptionCard-title": "Tutustu defenssisotureihin",
+    "descriptionCard-description": "Sielumme linnaa ympäröivät suuret ja vahvat muurit, jota puolustavat sen omat defenssisoturit.",
+    "descriptionCard-button": "Tutustu kaikkiin hahmoihin",
 
     "gallery-seeMore": "Lue lisää meistä about sivuiltamme",
     "socials-text": "Seuraa Alt Zonea somessa",