[LastVideo] animation: introduce animation to content section

Components/LatestVideo/Content-Wrapper/Content-Wrapper.component.module.scss

@@ -0,0 +1,11 @@
+@import "@/sass/settings.scss";
+
+.content {
+  @include d-flex-column;
+  height: 50%;
+  gap: 2rem;
+  padding: $standard-padding;
+  @media screen and (min-width: $mobile) {
+    padding-left: 3rem;
+  }
+}

Components/LatestVideo/Content-Wrapper/Content-Wrapper.component.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { useInView } from "react-intersection-observer";
+
+import s from './Content-Wrapper.component.module.scss';
+import { type ReactNode } from "react";
+
+type ContentWrapperProps = {
+    children: ReactNode;
+}
+
+function ContentWrapper({ children }: ContentWrapperProps) {
+  const { ref, inView } = useInView({
+    triggerOnce: true,
+    threshold: 0.5,
+  });
+
+  const animationVariants = {
+    hidden: { opacity: 0, y: 50 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: { duration: 0.5, ease: "easeOut" },
+    },
+  };
+
+  return (
+    <motion.section
+      className={s.content}
+      ref={ref}
+      initial="hidden"
+      animate={inView ? "visible" : "hidden"}
+      variants={animationVariants}
+    >
+      {children}
+    </motion.section>
+  );
+}
+
+export default ContentWrapper;

Components/LatestVideo/LatestVideo.component.module.scss

@@ -47,14 +47,6 @@
     }
   }
   &__content {
-    @include d-flex-column;
-    height: 50%;
-    gap: 2rem;
-    padding: $standard-padding;
-    @media screen and (min-width: $mobile) {
-      padding-left: 3rem;
-    }
-
     &__title {
       width: 100%;
       &__h1 {

Components/LatestVideo/LatestVideo.component.tsx

@@ -1,21 +1,23 @@
 import Image from "next/image";
 import s from "./LatestVideo.component.module.scss";
-
 import img from "@/assets/lastVideo.png";
+import ContentWrapper from "./Content-Wrapper/Content-Wrapper.component";
 
 const LatestVideo = () => {
+
   return (
     <section className={s.lastVideoContainer}>
-      <section className={s.lastVideoContainer__content}>
+      <ContentWrapper>
         <div className={s.lastVideoContainer__content__title}>
           <h1 className={s.lastVideoContainer__content__title__h1}>
-            Zabacz mój ostatni odcinek
+            Zobacz mój ostatni odcinek
           </h1>
         </div>
         <div className={s.lastVideoContainer__content__description}>
           <p className={s.lastVideoContainer__content__description__p}>
-            Znajdziesz tu konkrety o pracy w branży it, Najnowocześniejsze
-            rozwiązania w branży, oraz praktyczne porady i wiele więcej
+            Znajdziesz tu konkretne informacje o pracy w branży IT,
+            najnowocześniejsze rozwiązania w branży, praktyczne porady i wiele
+            więcej.
           </p>
         </div>
         <div className={s.lastVideoContainer__content__buttonWrapper}>
@@ -31,7 +33,8 @@ const LatestVideo = () => {
             </button>
           </a>
         </div>
-      </section>
+      </ContentWrapper>
+
       <section className={s.lastVideoContainer__image}>
         <div className={s.lastVideoContainer__image__imageWrapper}>
           <Image

package.json

@@ -9,9 +9,11 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "framer-motion": "^11.0.28",
     "next": "14.1.3",
     "react": "^18",
     "react-dom": "^18",
+    "react-intersection-observer": "^9.8.2",
     "sass": "^1.71.1"
   },
   "devDependencies": {