VKT(Frontend): Landing page card images [deploy]

frontend/packages/vkt/src/pages/PublicHomePage.tsx

@@ -9,6 +9,12 @@ import { useWindowProperties } from 'shared/hooks';
 
 import { useCommonTranslation, usePublicTranslation } from 'configs/i18n';
 import { AppRoutes } from 'enums/app';
+import ExcellentLevelCardImageAvif from 'public/images/excellent_level_card_image.avif';
+import ExcellentLevelCardImageJpeg from 'public/images/excellent_level_card_image.jpg';
+import ExcellentLevelCardImageWebp from 'public/images/excellent_level_card_image.webp';
+import GoodAndSatisfactoryLevelCardImageAvif from 'public/images/good_satisfactory_level_card_image.avif';
+import GoodAndSatisfactoryLevelCardImageJpeg from 'public/images/good_satisfactory_level_card_image.jpg';
+import GoodAndSatisfactoryLevelCardImageWebp from 'public/images/good_satisfactory_level_card_image.webp';
 
 const LinkButton = ({ to, label }: { to: AppRoutes; label: string }) => {
   return (
@@ -26,11 +32,13 @@ const LinkButton = ({ to, label }: { to: AppRoutes; label: string }) => {
 
 const LevelCard = ({
   heading,
+  image,
   contents,
   linkLabel,
   linkTo,
 }: {
   heading: string;
+  image: React.JSX.Element;
   contents: React.JSX.Element;
   linkLabel: string;
   linkTo: AppRoutes;
@@ -41,7 +49,11 @@ const LevelCard = ({
       elevation={2}
     >
       <div className="rows gapped grow">
-        <div className="rows gapped grow">
+        <div className="card-image-wrapper">
+          <div className="image-overlay" />
+          {image}
+        </div>
+        <div className="card-contents rows gapped grow">
           <Typography component="h3" variant="h2">
             {heading}
           </Typography>
@@ -53,9 +65,20 @@ const LevelCard = ({
   );
 };
 
+const ExcellentLevelCardImage = () => {
+  return (
+    <picture>
+      <source srcSet={ExcellentLevelCardImageAvif} type="image/avif" />
+      <source srcSet={ExcellentLevelCardImageWebp} type="image/webp" />
+      <img src={ExcellentLevelCardImageJpeg} alt="" />
+    </picture>
+  );
+};
+
 const ExcellentLevelCard = () => {
   return (
     <LevelCard
+      image={<ExcellentLevelCardImage />}
       heading="Erinomaisen taidon tutkinnot"
       contents={
         <>
@@ -71,9 +94,26 @@ const ExcellentLevelCard = () => {
   );
 };
 
+const GoodAndSatisfactoryLevelCardImage = () => {
+  return (
+    <picture>
+      <source
+        srcSet={GoodAndSatisfactoryLevelCardImageAvif}
+        type="image/avif"
+      />
+      <source
+        srcSet={GoodAndSatisfactoryLevelCardImageWebp}
+        type="image/webp"
+      />
+      <img src={GoodAndSatisfactoryLevelCardImageJpeg} alt="" />
+    </picture>
+  );
+};
+
 const GoodAndSatisfactoryLevelCard = () => {
   return (
     <LevelCard
+      image={<GoodAndSatisfactoryLevelCardImage />}
       heading="Hyvän ja tyydyttävän taidon tutkinnot"
       contents={
         <Text>
@@ -193,3 +233,16 @@ export const PublicHomePage: FC = () => {
     </Box>
   );
 };
+
+// Kuvien speksit: 480px x 231px
+// - aspect ratio 2.08:1
+// Erinomaisen taidon kuva
+// - 5500px x 3667px
+// - cropattu korkeussuunnassa, mutta ei leveyssuunnassa
+// -> crop to 5500px x 2647px
+
+// Hyvän ja tyydyttävän taidon kuva
+// - 5616px x 3744px
+// - aspect ratio 3:2
+// - cropattu korkeussuunnassa, mutta ei leveyssuunnassa
+// -> crop to 5616px x 2702px

frontend/packages/vkt/src/styles/pages/_public-homepage.scss

@@ -43,10 +43,35 @@
   }
 
   & &__level-description-card {
-    padding: 2rem;
+    @include phone {
+      width: 100%;
+    }
     @include not-phone {
-      width: 50%;
-      height: 50rem;
+      width: 48rem;
+      height: 49rem;
+    }
+
+    .card-contents {
+      padding: 2rem;
+    }
+
+    .card-image-wrapper {
+      position: relative;
+      // stylelint-disable-next-line selector-max-compound-selectors
+      .image-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: $color-secondary;
+        opacity: 0.5;
+      }
+      // stylelint-disable-next-line selector-max-compound-selectors
+      img {
+        aspect-ratio: 480/231;
+        width: 100%;
+      }
     }
   }
 }

frontend/packages/vkt/webpack/custom.d.ts

@@ -4,6 +4,21 @@ declare module '*.svg' {
   export default content;
 }
 
+declare module '*.avif' {
+  const content: any;
+  export default content;
+}
+
+declare module '*.jpg' {
+  const content: any;
+  export default content;
+}
+
+declare module '*.webp' {
+  const content: any;
+  export default content;
+}
+
 declare module '*.json' {
   const content: any;
   export default content;

frontend/webpack.common.js

@@ -87,6 +87,13 @@ module.exports = (appName, env, dirName, port, entryPage = "etusivu") => {
             filename: `${STATIC_PATH}/assets/svg/[name][ext]`,
           },
         },
+        {
+          test: /\.(avif|jpg|webp)$/,
+          type: "asset/resource",
+          generator: {
+            filename: `${STATIC_PATH}/assets/images/[name][ext]`
+          }
+        }
       ],
     },
   });