Varkopat/enhancement/644/update site footer to match figma designs

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

@@ -3,5 +3,14 @@
     "FooterPrivacy": "Privacy",
     "FooterCookies": "Cookies",
     "FooterConsent": "Consent",
-    "FooterEthics": "Ethical guidelines"
+    "FooterEthics": "Ethical guidelines",
+    "WorkWithUs": "Apply to work with us",
+    "WhatIsPRG": "What is PRG",
+    "AltZoneHistory": "ALT Zone history",
+    "DevelopersDesigners": "Developers and designers",
+    "TermsAndPrivacy": "Terms and privacy policy",
+    "Contact": "Contact",
+    "ContactInfo": "Contact information",
+    "EmailLabel": "Email addresses",
+    "Information": "Information"
 }

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

@@ -3,5 +3,14 @@
     "FooterPrivacy": "Yksityisyys",
     "FooterCookies": "Evästeet",
     "FooterConsent": "Suostumus",
-    "FooterEthics": "Eettiset ohjeet"
+    "FooterEthics": "Eettiset ohjeet",
+    "WorkWithUs": "Hae meille töihin",
+    "WhatIsPRG": "Mikä on PRG",
+    "AltZoneHistory": "ALT Zonen historia",
+    "DevelopersDesigners": "Kehittäjät ja suunnittelijat",
+    "TermsAndPrivacy": "Käyttöehdot ja tietosuoja",
+    "Contact": "Ota yhteyttä",
+    "ContactInfo": "Yhteystiedot",
+    "EmailLabel": "Sähköpostit",
+    "Information": "Tietoa"
 }

frontend-next-migration/src/shared/ui/v2/Footer/ui/FooterContact/FooterContact.module.scss

@@ -0,0 +1,92 @@
+/* Contact section of the footer, containing title, email addresses and "Work with us" link. */
+
+.FooterContact {
+    display: flex;
+    flex-direction: column;
+    width: 310;
+    height: 175;
+    opacity: 1;
+    gap: 15px;
+}
+
+.Title {
+    width: 152;
+    height: 31;
+    opacity: 1;
+    font-family: DM Sans;
+    font-weight: 700;
+    font-style: Bold;
+    font-size: 24px;
+    line-height: 100%;
+    letter-spacing: 0%;
+    color: #ffa100;
+}
+
+.EmailLabel {
+    color: #faf9f6;
+    font-family: DM Sans;
+    font-weight: 400;
+    font-style: Regular;
+    font-size: 20px;
+    line-height: 100%;
+    letter-spacing: 0%;
+    text-decoration: underline;
+    text-decoration-style: solid;
+    text-decoration-thickness: 0%;
+    width: 203;
+    height: 26;
+    opacity: 1;
+}
+
+.EmailList {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    opacity: 1;
+}
+
+.Email,
+.WorkWithUsLink {
+    color: #faf9f6;
+    text-decoration: none;
+    font: var(--font-dm-s);
+    transition:
+        color 0.2s ease,
+        opacity 0.2s ease;
+
+    &:hover {
+        color: var(--footer-accent, var(--primary-color));
+        opacity: 0.8;
+    }
+
+    &:focus {
+        outline: 2px solid var(--footer-accent, var(--primary-color));
+        outline-offset: 2px;
+    }
+}
+
+.WorkWithUsLink {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    font-family: DM Sans;
+    font-weight: 400;
+    font-style: Regular;
+    font-size: 20px;
+    line-height: 100%;
+    letter-spacing: 0%;
+}
+
+.Email {
+    text-decoration: underline;
+    text-underline-offset: 2px;
+}
+
+.ExternalIcon {
+    width: 0.65rem;
+    height: 0.65rem;
+    color: var(--footer-accent, var(--primary-color));
+}

frontend-next-migration/src/shared/ui/v2/Footer/ui/FooterContact/FooterContact.tsx

@@ -0,0 +1,61 @@
+import { memo } from 'react';
+import { classNames } from '@/shared/lib/classNames/classNames';
+import { AppLink } from '@/shared/ui/AppLink/AppLink';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faExternalLink } from '@fortawesome/free-solid-svg-icons';
+import cls from './FooterContact.module.scss';
+
+/** Props for the FooterContact component, which displays contact information in the footer. */
+interface FooterContactProps {
+    className?: string;
+    title: string;
+    emailLabel?: string;
+    emails: string[];
+    workWithUsLabel?: string;
+}
+
+const DUUNITORI_JOBS_URL = 'https://duunitori.fi/tyopaikat?haku=Psyche%27s%20Royale%20Gaming';
+
+/** Component for displaying contact information in the footer.
+ * @param props - Props for the FooterContact component, including title, optional email label, list of email addresses, and an optional "Work with us" label.
+ * @returns A React component that renders the footer contact section with the provided information.
+ * @remarks This component is memoized for performance optimization, preventing unnecessary re-renders when props do not change.
+ */
+export const FooterContact = memo((props: FooterContactProps) => {
+    const { className = '', title, emailLabel, emails, workWithUsLabel } = props;
+
+    /* Render the footer contact section with a title, optional email label, list of email addresses, and a "Work with us" link. */
+    return (
+        <div className={classNames(cls.FooterContact, {}, [className])}>
+            <h3 className={cls.Title}>{title}</h3>
+            {emailLabel && <p className={cls.EmailLabel}>{emailLabel}</p>}
+            <ul className={cls.EmailList}>
+                {emails.map((email, index) => (
+                    <li key={index}>
+                        <a
+                            href={`mailto:${email}`}
+                            className={cls.Email}
+                        >
+                            {email}
+                        </a>
+                    </li>
+                ))}
+            </ul>
+            {workWithUsLabel && (
+                <AppLink
+                    to={DUUNITORI_JOBS_URL}
+                    isExternal={true}
+                    className={cls.WorkWithUsLink}
+                >
+                    {workWithUsLabel}
+                    <FontAwesomeIcon
+                        icon={faExternalLink}
+                        className={cls.ExternalIcon}
+                    />
+                </AppLink>
+            )}
+        </div>
+    );
+});
+
+FooterContact.displayName = 'FooterContact';

frontend-next-migration/src/shared/ui/v2/Footer/ui/FooterContact/index.ts

@@ -0,0 +1 @@
+export { FooterContact } from './FooterContact';

frontend-next-migration/src/shared/ui/v2/Footer/ui/FooterDesktop/FooterDesktop.module.scss

@@ -1,57 +1,135 @@
 .Footer {
-    font: var(--font-dm-xl);
-    background: var(--background);
+    --footer-bg: #1e3544;
+    --footer-bar-bg: #172f3d;
+    --footer-accent: #ffa100;
+    --footer-text: #faf9f6;
+    --footer-muted: #faf9f6;
+
+    font: var(--font-dm-s);
+    background: var(--footer-bg);
+    color: var(--footer-text);
     display: flex;
-    flex-direction: row;
-    justify-content: space-evenly;
-    align-items: center;
-    padding: 5px 25px 5px 25px;
+    flex-direction: column;
     position: relative;
     z-index: 20;
+    opacity: 1;
 }
 
-.title {
-    padding-top: 1rem;
-    color: var(--primary-color);
-    text-align: center;
-    font: var(--font-sw-xl);
+.SocialBar {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 1920px;
+    height: 100px;
+    padding-top: 20px;
+    padding-bottom: 20px;
+    gap: 22px;
+    background: var(--footer-bar-bg);
+    opacity: 1;
 }
 
 .socialSection {
-    padding-top: 1rem;
+    display: flex;
+    justify-content: center;
+    width: 1920px;
+    height: 40px;
+    opacity: 1;
+}
 
-    /* Footer controls layout now (was previously inside SocialSection component) */
+.socialSection > * {
+    width: 40px;
+    height: 40px;
+    opacity: 1;
+}
+
+.socialSection img {
+    width: 40px;
+    height: 40px;
+    opacity: 1;
+}
+
+.Inner {
     display: grid;
+    grid-template-columns: 132px minmax(0, 372px);
+    align-items: start;
+    justify-content: center;
+    gap: 70px;
+    width: 100%;
+    min-height: 164px;
+    padding: 15px 24px 0;
+    opacity: 1;
+}
+
+.BrandColumn {
+    display: flex;
     align-items: center;
-    justify-items: center;
+    justify-content: center;
+    opacity: 1;
+}
 
-    margin: 0 auto;
-    max-width: 600px;
+.Logo {
+    width: 275;
+    height: 270;
+    opacity: 1;
+}
 
-    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+.ContentGrid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 100px;
+    padding-top: 24px;
+    padding-right: 64px;
+    padding-left: 64px;
+    opacity: 1;
 }
 
-.rights {
-    padding: 1rem 0;
-    text-align: center;
+.contactSection,
+.infoSection {
+    display: flex;
+    flex-direction: column;
+    opacity: 1;
 }
 
-.FooterContainer {
-    align-self: flex-start;
-    justify-items: center;
+.BottomSection {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    padding-bottom: 12px;
+    opacity: 1;
 }
 
-.ImageContainer {
-    justify-items: flex-start;
+.Copyright {
+    gap: 100px;
+    margin: 2rem 0 0;
+    color: #ffffff;
+    font: var(--font-dm-s);
+    size: 16px;
+    text-align: center;
+    width: 400;
+    line-height: 100%;
+    letter-spacing: 0%;
+    opacity: 1;
 }
 
-.FeedbackContainer {
-    display: flex;
-    justify-content: flex-end;
+.CopySymbol {
+    margin-right: 0.25rem;
+    opacity: 1;
 }
 
 @media (max-width: 1023px) {
-    .socialSection {
-        grid-template-columns: repeat(auto-fit, minmax(85px, 1fr));
+    .Inner {
+        grid-template-columns: 120px minmax(0, 1fr);
+        gap: 48px;
+        padding-inline: 32px;
+    }
+
+    .Logo {
+        width: 275;
+        height: 270;
+        opacity: 1;
     }
-}
+
+    .ContentGrid {
+        gap: 40px;
+    }
+}