video link

src/animations/video.animations.ts

@@ -0,0 +1,18 @@
+export const videoArrowMotion: Record<
+  string,
+  Record<string, string | number | Record<string, string | number>>
+> = {
+  rest: {
+    duration: 0.3,
+    type: "spring",
+    x: 0,
+  },
+
+  hover: {
+    x: 10,
+    transition: {
+      duration: 0.2,
+      type: "tween",
+    },
+  },
+};

src/assets/icons/arrow-right-white.svg

@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_38_3489)">
+<path d="M10.6667 7.99998C10.667 8.15575 10.6127 8.3067 10.5133 8.42665L7.18001 12.4266C7.06685 12.5628 6.90424 12.6484 6.72796 12.6647C6.55168 12.6809 6.37616 12.6265 6.24001 12.5133C6.10387 12.4002 6.01825 12.2375 6.002 12.0613C5.98574 11.885 6.04018 11.7095 6.15334 11.5733L9.14001 7.99998L6.26001 4.42665C6.20463 4.35845 6.16328 4.27999 6.13832 4.19576C6.11337 4.11154 6.10531 4.02321 6.1146 3.93586C6.12389 3.84851 6.15036 3.76385 6.19247 3.68676C6.23459 3.60967 6.29153 3.54166 6.36001 3.48664C6.42856 3.42559 6.50898 3.37935 6.59622 3.35082C6.68347 3.3223 6.77567 3.31209 6.86705 3.32086C6.95843 3.32962 7.04701 3.35715 7.12724 3.40174C7.20748 3.44633 7.27765 3.50701 7.33334 3.57998L10.5533 7.57998C10.637 7.70337 10.6769 7.85124 10.6667 7.99998Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_38_3489">
+<rect width="16" height="16" fill="white" transform="translate(0 16) rotate(-90)"/>
+</clipPath>
+</defs>
+</svg>

src/components/video/Video.tsx

@@ -1,5 +1,7 @@
 // Modules
 import { v4 as uuidv4 } from "uuid";
+import { Link } from "react-router-dom";
+import { motion } from "framer-motion";
 
 // Components
 import VideoItem from "./VideoItem";
@@ -7,6 +9,12 @@ import VideoItem from "./VideoItem";
 // Images
 import VideoItemImg from "../../assets/images/video-item.jpg";
 
+// Icons
+import { ReactComponent as ArrowRightWhite } from "../../assets/icons/arrow-right-white.svg";
+
+// Animations
+import { videoArrowMotion } from "../../animations/video.animations";
+
 const Video = () => {
   const date = "11.01.2023";
   const title = "В Туркменистане отметили Новый год";
@@ -33,6 +41,14 @@ const Video = () => {
               );
             })}
           </div>
+          <Link to="/videos" className="video-link">
+            <motion.div initial={"rest"} whileHover={"hover"} className="inner">
+              <span>Показать все видео</span>
+              <motion.div className="arrow-div" variants={videoArrowMotion}>
+                <ArrowRightWhite />
+              </motion.div>
+            </motion.div>
+          </Link>
         </div>
       </div>
     </section>

src/styles/_video.scss

@@ -53,3 +53,28 @@
     line-height: 2.2rem;
   }
 }
+
+.video-link {
+  max-width: fit-content;
+  border-radius: 0.5rem;
+  background: $main;
+  .inner {
+    font-size: 1.6rem;
+    color: $white;
+    padding: 0.8rem 1.6rem;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 1.6rem;
+  }
+
+  .arrow-div {
+    display: flex;
+    align-items: center;
+  }
+
+  svg {
+    width: 1.6rem;
+    height: 1.6rem;
+  }
+}