Casimir43/enhancement/657 update coming soon page

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

@@ -9,7 +9,7 @@ export async function _getPage(lng: string) {
     return createPage<ComingPageProps>({
         buildPage: () => ({
             title: t('title'),
-            text: t('text'),
+            lng,
         }),
         buildSeo: () => ({
             title: t('head-title'),

frontend-next-migration/src/preparedPages/ComingPage/ui/ComingPage.module.scss

@@ -4,22 +4,92 @@
     align-items: flex-start;
 }
 
-.container {
-    display: grid;
+.pageContent {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0px;
+    isolation: isolate;
+    position: relative;
+    width: 100%;
+    max-width: 1920px;
+}
+
+.titleFog {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+}
+
+.titleSection {
+    position: relative;
+    width: 1440px;
+    max-width: 100%;
+    z-index: 1;
+    padding-top: 0;
+    display: flex;
     justify-content: center;
-    text-align: center;
-    font: var(--font-sw-xxxl);
-    color: var(--primary-color);
-    width: 80%;
-    padding-bottom: 100px;
 }
 
-.title {
-    font-size: var(--h2-size-desktop);
-    padding: 10px;
+.curvedText {
+    width: 100%;
+    height: auto;
+    overflow: visible;
+    position: relative;
+    z-index: 1;
+    letter-spacing: 10px;
+}
+
+.curvedTextPath {
+    font-family: var(--font-family-title);
+    font-size: 96px;
+    fill: var(--content-primary);
     font-weight: 400;
 }
 
+.bodySection {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0px;
+    gap: 64px;
+    width: 1440px;
+    max-width: 100%;
+    z-index: 2;
+    position: relative;
+    margin-top: -10px;
+}
+
+.signWrapper {
+    display: flex;
+    justify-content: center;
+    position: relative;
+    width: 50%;
+    max-width: 554px;
+    transform-origin: top center;
+    animation: swing 2.5s ease-in-out;
+    container-type: inline-size;
+}
+
+.signWrapper img {
+    width: 100%;
+    height: auto;
+}
+
+.signText {
+    position: absolute;
+    top: 70%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-family: var(--font-family-title);
+    font-size: clamp(20px, 11cqi, 64px);
+    color: var(--white);
+    text-align: center;
+    white-space: nowrap;
+    pointer-events: none;
+    z-index: 1;
+}
+
 .images {
     display: flex;
     flex-direction: row;
@@ -28,18 +98,14 @@
 }
 
 .images img {
-    margin-left: -25px;
-    margin-right: -20px;
+    margin-left: -27px;
+    margin-right: -27px;
 }
 
 .images .flipped {
     transform: scaleX(-1);
-    margin-left: -5px;
-    margin-right: -20px;
-}
-
-.images .pedant {
-    margin-left: -5px;
+    margin-left: -27px;
+    margin-right: -27px;
 }
 
 @media (max-width: breakpoint(lg)) {
@@ -49,25 +115,42 @@
 }
 
 @media (max-width: breakpoint(md)) {
+    .curvedTextPath {
+        font-size: 160px;
+    }
     .images {
         transform: scale(0.7);
+        margin-bottom: -45px;
     }
-    .title {
-        font-size: var(--h3-size-desktop);
+    .bodySection {
+        gap: 40px;
+        margin-top: -10px;
     }
 }
 
 @media (max-width: breakpoint(sm)) {
+    .curvedTextPath {
+        letter-spacing: -10px;
+    }
     .images {
         transform: scale(0.4);
+        margin-bottom: -62px;
     }
-    .title {
-        font-size: var(--h1-size-mobile);
+    .bodySection {
+        gap: 0px;
+        margin-top: -10px;
     }
-}
-
-@keyframes fadeIn {
-    to {
-        opacity: 1;
+    .main{
+        margin-top: -7vh;
     }
 }
+
+@keyframes swing {
+    0% { transform: rotate(-12deg); }
+    15% { transform: rotate(10deg); }
+    30% { transform: rotate(-8deg); }
+    45% { transform: rotate(6deg); }
+    60% { transform: rotate(-4deg); }
+    80% { transform: rotate(2deg); }
+    100% { transform: rotate(0deg); }
+}

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

@@ -1,81 +1,136 @@
 'use client';
-import { ReactNode } from 'react';
 import cls from './ComingPage.module.scss';
 import Image from 'next/image';
-import hateSpeech from '@/shared/assets/images/heros/hate-speech/Vihapuhe.png';
-import jokester from '@/shared/assets/images/heros/jokester/Jokester.png';
-import believer from '@/shared/assets/images/heros/fate-priest/Believer.png';
-import provocator from '@/shared/assets/images/heros/provocator/Provokaattori.png';
-import alcoholic from '@/shared/assets/images/heros/alcoholic/Alkoholisti.png';
-import purpleGirls from '@/shared/assets/images/heros/purple-girls/purpel-girls-main.png';
-import pedant from '@/shared/assets/images/heros/pedant/Viisastelija.png';
+import { useClientTranslation } from '@/shared/i18n';
+import titleFogImg from '@/shared/assets/images/titlefog.png';
+import titleFogSmallImg from '@/shared/assets/images/titlefogsmall.png';
+import comingSoonSign from '@/shared/assets/images/Coming-soon-sign.png';
+import useIsMobileSize from '@/shared/lib/hooks/useIsMobileSize';
+import stoner from '@/shared/assets/images/comingPage/possyttelija.png';
+import delusion from '@/shared/assets/images/comingPage/harhaisuus.png';
+import fashionMadness from '@/shared/assets/images/comingPage/muotihulluus.png';
+import jokester from '@/shared/assets/images/comingPage/vitsinvaantaja.png';
+import veteran from '@/shared/assets/images/comingPage/posttraumaattinenveteraani.png';
+import pedant from '@/shared/assets/images/comingPage/viisastelija.png';
+import fatigue from '@/shared/assets/images/comingPage/vasyminen.png';
 
 export type Props = {
+    /** the title text that goes on the curved path */
     title: string;
-    text: ReactNode;
+    /** language code, like 'fi' for finnish. changes letter spacing a bit */
+    lng?: string;
 };
 
+/** the "coming soon" page. curved title with fog, a sign, and characters*/
 const ComingPage = (props: Props) => {
-    const { title, text } = props;
+    const { title, lng } = props;
+    const { t } = useClientTranslation('coming');
+    const isFinnish = lng === 'fi';
+    const { isMobileSize } = useIsMobileSize();
+
+    const viewBox = '0 -100 1700 200';
+    const pathId = 'textArc';
+    const pathD = 'M 50 200 Q 850 -300 1650 200';
+    const imgX = isMobileSize ? '0' : '50';
+    const imgY = isMobileSize ? '-300' : '-220';
+    const imgW = isMobileSize ? '1700' : '1600';
+    const imgH = isMobileSize ? '600' : '420';
 
     return (
         <main className={cls.main}>
-            <div className={cls.container}>
-                <h1 className={cls.title}>{title}</h1>
-                <div className={cls.title}>{text}</div>
-                <div className={cls.images}>
-                    <Image
-                        src={hateSpeech.src}
-                        alt="Hate Speech"
-                        priority={true}
-                        width={150}
-                        height={150}
-                    />
-                    <Image
-                        src={jokester}
-                        alt="Jokester"
-                        priority={true}
-                        width={150}
-                        height={150}
-                    />
-                    <Image
-                        src={believer}
-                        alt="Believer"
-                        priority={true}
-                        width={150}
-                        height={150}
-                    />
-                    <Image
-                        src={provocator}
-                        alt="Provocator"
-                        priority={true}
-                        width={150}
-                        height={150}
-                    />
-                    <Image
-                        src={alcoholic}
-                        alt="Alcoholic"
-                        width={150}
-                        height={150}
-                        priority={true}
-                        className={cls.flipped}
-                    />
-                    <Image
-                        src={purpleGirls}
-                        alt="Purple Girls"
-                        width={150}
-                        height={150}
-                        priority={true}
-                        className={cls.flipped}
-                    />
-                    <Image
-                        src={pedant}
-                        alt="Pedant"
-                        priority={true}
-                        width={150}
-                        height={150}
-                        className={cls.pedant}
-                    />
+            <div className={cls.pageContent}>
+                <div className={cls.titleSection}>
+                    <svg
+                        viewBox={viewBox}
+                        className={cls.curvedText}
+                    >
+                        <image
+                            href={isMobileSize ? titleFogSmallImg.src : titleFogImg.src}
+                            x={imgX}
+                            y={imgY}
+                            width={imgW}
+                            height={imgH}
+                            preserveAspectRatio="xMidYMid slice"
+                        />
+                        <path
+                            id={pathId}
+                            d={pathD}
+                            fill="none"
+                        />
+                        <text>
+                            <textPath
+                                href={`#${pathId}`}
+                                startOffset="50%"
+                                textAnchor="middle"
+                                className={cls.curvedTextPath}
+                                {...(isMobileSize
+                                    ? { textLength: '1600', lengthAdjust: 'spacing' }
+                                    : {})}
+                                letterSpacing={isFinnish ? '5' : '-10'}
+                                style={
+                                    !isFinnish && isMobileSize ? { fontSize: '130px' } : undefined
+                                }
+                            >
+                                {title}
+                            </textPath>
+                        </text>
+                    </svg>
+                </div>
+                <div className={cls.bodySection}>
+                    <div className={cls.signWrapper}>
+                        <Image
+                            src={comingSoonSign}
+                            alt="Coming soon sign"
+                            width={700}
+                            height={617}
+                        />
+                        <span className={cls.signText}>{t('signTitle')}</span>
+                    </div>
+                    <div className={cls.images}>
+                        <Image
+                            src={stoner}
+                            alt="Pössyttelijä"
+                            width={150}
+                            height={150}
+                        />
+                        <Image
+                            src={delusion}
+                            alt="Harhaisuus"
+                            width={150}
+                            height={150}
+                        />
+                        <Image
+                            src={fashionMadness}
+                            alt="Muotihulluus"
+                            width={150}
+                            height={150}
+                            className={cls.flipped}
+                        />
+                        <Image
+                            src={jokester}
+                            alt="Vitsinvääntäjä"
+                            width={150}
+                            height={150}
+                        />
+                        <Image
+                            src={veteran}
+                            alt="Posttraumaattinen veteraani"
+                            width={150}
+                            height={150}
+                        />
+                        <Image
+                            src={pedant}
+                            alt="Viisastelija"
+                            width={150}
+                            height={150}
+                        />
+                        <Image
+                            src={fatigue}
+                            alt="Väsyminen"
+                            width={150}
+                            height={150}
+                        />
+                    </div>
                 </div>
             </div>
         </main>

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

@@ -1,6 +1,6 @@
 {
-    "title": "Under construction",
-    "text": "Coming soon...",
+    "title": "Something cool is in the works!",
+    "signTitle": "Coming soon",
     "backText": "Get back to previous page",
     "head-title": "Under construction | ALT Zone",
     "head-description": "This page is currently under construction.",