Merge pull request #584 from Alt-Org/salimsara/enhancement/556-complete-gameart-page-redesign-2-2

Salimsara/enhancement/556 complete gameart page redesign

Author: Skoivumaki

frontend-next-migration/src/features/NavigateGameArt/ui/GameArtNavMenuAsDropdown.module.scss

@@ -4,6 +4,7 @@
     padding-top: var(--spacing-800);
 
     @media (max-width: breakpoint(lg)) {
-        min-width: 320px;
+        min-width: 290px;
+        padding-top: 0;
     }
 }

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

@@ -1,4 +1,8 @@
 .Title {
     padding-left: 5%;
     margin-bottom: 25px;
+
+    @media (max-width: breakpoint(lg)) {
+        margin-bottom: -30px;
+    }
 }

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

@@ -1,10 +1,11 @@
 'use client';
 import cls from './GameArtPage.module.scss';
 import { LayoutWithSidebars } from '@/preparedPages/Layouts';
-import WikiContent from '@/shared/ui/WikiContent/ui/WikiContent';
+import { ModularCard, ModularCardTheme } from '@/shared/ui/v2/ModularCard';
 import GameArtNavMenu from '@/features/NavigateGameArt';
 import { PageTitle } from '@/shared/ui/PageTitle';
 import { Container } from '@/shared/ui/Container';
+import useSizes from '@/shared/lib/hooks/useSizes';
 
 interface Section {
     id: string;
@@ -23,22 +24,66 @@ export type Props = {
 
 const GameArtPackagePage = (props: Props) => {
     const { sections = [], title } = props;
+    const { isMobileSize, isTabletSize } = useSizes();
 
     return (
         <main>
-            <LayoutWithSidebars
-                leftTopSidebar={{
-                    component: <GameArtNavMenu sections={sections} />,
-                    hideOnMobile: true,
-                }}
-            >
+            {(isTabletSize || isMobileSize) && (
                 <Container className={cls.Title}>
                     <PageTitle
                         titleText={title}
                         alternate={true}
                     />
                 </Container>
-                <WikiContent sections={sections} />
+            )}
+
+            <LayoutWithSidebars
+                leftTopSidebar={{
+                    component: <GameArtNavMenu sections={sections} />,
+                    hideOnMobile: false,
+                }}
+            >
+                {!isTabletSize && !isMobileSize && (
+                    <Container className={cls.Title}>
+                        <PageTitle
+                            titleText={title}
+                            alternate={true}
+                        />
+                    </Container>
+                )}
+
+                <div className={cls.SectionGrid}>
+                    {sections.map((section) => (
+                        <ModularCard
+                            key={section.id}
+                            id={section.id}
+                            theme={ModularCardTheme.SECTIONCARD}
+                            className={cls.SectionCard}
+                        >
+                            <ModularCard.Texts>
+                                <ModularCard.Texts.Title>{section.label}</ModularCard.Texts.Title>
+                                <ModularCard.Texts.Body>
+                                    <div
+                                        dangerouslySetInnerHTML={{
+                                            __html: section.description,
+                                        }}
+                                    />
+                                </ModularCard.Texts.Body>
+                            </ModularCard.Texts>
+
+                            {section.image && (
+                                <ModularCard.Image className={cls.SectionCardImage}>
+                                    <ModularCard.Image.Image
+                                        src={section.image}
+                                        alt={section.imageAlt}
+                                        width={600}
+                                        height={400}
+                                    />
+                                </ModularCard.Image>
+                            )}
+                        </ModularCard>
+                    ))}
+                </div>
             </LayoutWithSidebars>
         </main>
     );

frontend-next-migration/src/shared/assets/images/gameArt/implementation.webp

@@ -345,3 +345,95 @@
     }
 }
 
+// SectionCard
+.Card.SectionCard {
+    position: relative;
+    display: flex;
+    background-color: var(--background);
+    border: var(--border-desktop) solid var(--black);
+    border-radius: var(--border-radius-md);
+    box-shadow: 4px 8px 0 var(--black);
+    overflow: hidden;
+    margin-left: 50px;
+    margin-bottom: 50px;
+    margin-right: 20px;
+
+    @media (max-width: breakpoint(md)) {
+        flex-direction: column;
+        margin: 0;
+        margin-bottom: 30px;
+    }
+    
+}
+
+.Card.SectionCard > .ModularCardTexts {
+    flex-basis: 95%;
+    display: flex;
+    flex-direction: column;
+    z-index: 2;
+    gap: 10px;
+    padding: 20px;
+    justify-content: flex-start;
+}
+
+.Card.SectionCard > .ModularCardTexts > .ModularCardTitle {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    padding-bottom: 10px;
+    h2 {
+        font: var(--font-sw-xxl);
+        color: var(--primary-color);
+    }
+    @media (max-width: breakpoint(md)) {
+        h2 {
+            font: var(--font-sw-xl);
+        }
+    }
+}
+.Card.SectionCard > .ModularCardTexts > .ModularCardBody {
+    font: var(--font-dm-m);
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    @media (max-width: breakpoint(md)) {
+        font: var(--font-dm-m);
+    }
+}
+
+.Card.SectionCard > .ModularCardImageSection {
+    height: auto;
+    position: relative;
+    overflow: visible;
+    display: flex;
+    justify-content: flex-end;
+    align-items: stretch;
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%);
+    margin-left: -20px;
+
+    @media (max-width: breakpoint(md)) {
+        height: auto;
+        clip-path: polygon(0 50%, 100% 31%, 100% 100%, 0 100%);
+        margin-top: -110px;
+    }
+
+    @media ((min-width: breakpoint(sm)) and (max-width: breakpoint(md))) {
+        height: auto;
+        margin-top: -190px;
+    }
+
+}
+
+.Card.SectionCard > .ModularCardImageSection > .ModularCardImage {
+    position: relative;
+    max-width: 100%;
+    height: 100%;
+    object-fit: cover;
+    z-index: 0;
+
+    @media (max-width: breakpoint(md)) {
+        height: auto;
+        width: 100%;
+        margin-top: 80px;
+    }
+}

frontend-next-migration/src/shared/assets/images/gameArt/info.webp

@@ -23,6 +23,7 @@ export enum ModularCardTheme {
     TITLEIMAGE = 'TitleImageCard',
     NEWSCARD = 'NewsImageCard',
     DEFENSECARD = 'DefenseCard',
+    SECTIONCARD = 'SectionCard',
 }
 
 /**
@@ -57,6 +58,8 @@ interface CardCompoundProps {
 interface ModularCardImageProps {
     className?: string;
     alt: string;
+    width?: number;
+    height?: number;
     src: StaticImageData | string;
 }
 
@@ -200,13 +203,15 @@ ModularCardFootnote.displayName = 'modularcard-Texts-Footnote';
  * />
  */
 const ModularCardImage = memo((props: ModularCardImageProps) => {
-    const { className = '', alt, src } = props;
+    const { className = '', alt, src, width, height } = props;
 
     return (
         <Image
             className={classNames(cls.ModularCardImage, {}, [className])}
             src={src}
             alt={alt}
+            width={width}
+            height={height}
         />
     );
 });