KTL-1239 feat: added animation on interaction for the annual report block

Author: berezinant

src/components/AnnualReport/annualReport.module.css

@@ -65,6 +65,10 @@
 
 .image {
     position: absolute;
+    transform: perspective(1500px) rotateY(15deg);
+    box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
+    transition: transform 1s ease 0s;
+    will-change: transform;
 
     @media (--ktl-mm) {
         width: 256px;
@@ -82,6 +86,10 @@
     }
 }
 
+.imageContainer:hover .image:nth-child(1) {
+    transform: perspective(3000px) rotateY(0deg) translateX(-18px) translateY(-6px);
+}
+
 .image:nth-child(2) {
     top: 48px;
     left: 72px;
@@ -92,6 +100,10 @@
     }
 }
 
+.imageContainer:hover .image:nth-child(2) {
+    transform: perspective(3000px) rotateY(0deg);
+}
+
 .image:nth-child(3) {
     top: 72px;
     left: 96px;
@@ -102,6 +114,10 @@
     }
 }
 
+.imageContainer:hover .image:nth-child(3) {
+    transform: perspective(3000px) rotateY(0deg) translateX(18px) translateY(6px);
+}
+
 .textContainer {
     display: flex;
     flex-direction: column;
@@ -113,6 +129,7 @@
 
     @media (--ktl-tl) {
         position: relative;
+        width: unset;
         padding: 0;
         z-index: 1;
     }

src/components/AnnualReport/index.tsx

@@ -1,18 +1,18 @@
+import Button from "@rescui/button";
+import cn from "classnames";
 import * as styles from "./annualReport.module.css";
 import report1KotlinResults from "./assets/1-kotlin-results.png";
 import report2MissionRecap from "./assets/2-mission-recap.png";
 import report3FoundationResults from "./assets/3-foundation-results.png";
-import cn from "classnames";
-import Button from "@rescui/button";
 
 export function AnnualReport() {
     const renderButton = (className: string) => (
         <Button
             className={className}
             mode="outline"
             size="l"
-            // TODO: Update link to the actual report
-            href="/kotlin-foundation-presentation.pdf"
+            // TODO: upload actual pdf file with the report
+            href="/annual-report-2023.pdf"
             target="_blank"
         >
             View annual report