From 1108e5573a6289670b47675d2eedd9dc5787fd05 Mon Sep 17 00:00:00 2001
From: Mornieur <mariafernanda-coro@hotmail.com>
Date: Tue, 8 Aug 2023 17:04:47 -0300
Subject: [PATCH] feat: add motion div into initial transition

---
 src/components/Header/index.tsx         |  54 ++++----
 src/components/VideoComponent/index.tsx |  54 +++++---
 src/components/ViewComponent/index.tsx  | 157 +++++++++++++-----------
 3 files changed, 151 insertions(+), 114 deletions(-)

diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index cbc5e55..2555c70 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -3,6 +3,7 @@ import * as S from './styles';
 import logo from '../../assets/images/logo.png';
 import assetHeader from '../../assets/images/asset-header.png';
 import { FC } from 'react';
+import { motion } from 'framer-motion';
 
 interface HeaderProps {
   minText?: string;
@@ -17,28 +18,39 @@ export const Header: FC<HeaderProps> = ({
 }) => {
   return (
     <S.Container>
-      <article>
-        <Image src={logo} width={200} height={100} alt="logo" />
-      </article>
-      <S.TitleComponent>
-        <S.MinText>{minText}</S.MinText>
-        <S.MinTitle>{minTitle}</S.MinTitle>
-        <S.MaxTitle>
-          {maxTitle}
-          <Image
-            className="minLogo"
-            src={assetHeader}
-            width={40}
-            height={40}
-            alt="asset"
-          />
-        </S.MaxTitle>
+      <motion.div
+        className="header-container"
+        initial={{ opacity: 0, scale: 0.5 }}
+        animate={{ opacity: 1, scale: 1 }}
+        transition={{
+          duration: 0.8,
+          delay: 0.5,
+          ease: [0, 0.71, 0.2, 1.01],
+        }}
+      >
+        <article>
+          <Image src={logo} width={200} height={100} alt="logo" />
+        </article>
+        <S.TitleComponent>
+          <S.MinText>{minText}</S.MinText>
+          <S.MinTitle>{minTitle}</S.MinTitle>
+          <S.MaxTitle>
+            {maxTitle}
+            <Image
+              className="minLogo"
+              src={assetHeader}
+              width={40}
+              height={40}
+              alt="asset"
+            />
+          </S.MaxTitle>
 
-        <S.StyledText bold>
-          Conheça as estratégias que <b>mudaram o jogo</b> e como aplicá-las no
-          seu negócio
-        </S.StyledText>
-      </S.TitleComponent>
+          <S.StyledText bold>
+            Conheça as estratégias que <b>mudaram o jogo</b> e como aplicá-las
+            no seu negócio
+          </S.StyledText>
+        </S.TitleComponent>
+      </motion.div>
     </S.Container>
   );
 };
diff --git a/src/components/VideoComponent/index.tsx b/src/components/VideoComponent/index.tsx
index 775ac76..cecfa0d 100644
--- a/src/components/VideoComponent/index.tsx
+++ b/src/components/VideoComponent/index.tsx
@@ -4,6 +4,7 @@ import videos from './data.json';
 import { useEffect, useState } from 'react';
 import { ModalView } from './ModalView';
 import { BsFillPlayFill } from 'react-icons/bs';
+import { motion } from 'framer-motion';
 
 export const VideoComponent = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -26,26 +27,39 @@ export const VideoComponent = () => {
       )}
       <S.Container isOpen={isModalOpen}>
         {videos.map((video, index) => (
-          <S.VideoCard
-            key={video.id}
-            onClick={openModal}
-            data-testid={`video-card-${index}`}
-          >
-            <S.PlayIcon>
-              <BsFillPlayFill size={'8rem'} color="#fff" />
-            </S.PlayIcon>
-            <S.VideoPreview>
-              <S.ThumbnailImage
-                src={ThumbnailImage.src}
-                alt={video.alt}
-                height={300}
-                data-testid={`thumbnail-${index}`}
-              />
-              <S.Description data-testid={`video-title-${index}`}>
-                {video.title}
-              </S.Description>
-            </S.VideoPreview>
-          </S.VideoCard>
+          <>
+            <motion.div
+              className="videoGroup"
+              initial={{ opacity: 0, scale: 0.5 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{
+                duration: 0.8,
+                delay: 0.5,
+                ease: [0, 0.71, 0.2, 1.01],
+              }}
+            >
+              <S.VideoCard
+                key={video.id}
+                onClick={openModal}
+                data-testid={`video-card-${index}`}
+              >
+                <S.PlayIcon>
+                  <BsFillPlayFill size={'8rem'} color="#fff" />
+                </S.PlayIcon>
+                <S.VideoPreview>
+                  <S.ThumbnailImage
+                    src={ThumbnailImage.src}
+                    alt={video.alt}
+                    height={300}
+                    data-testid={`thumbnail-${index}`}
+                  />
+                  <S.Description data-testid={`video-title-${index}`}>
+                    {video.title}
+                  </S.Description>
+                </S.VideoPreview>
+              </S.VideoCard>
+            </motion.div>
+          </>
         ))}
       </S.Container>
     </>
diff --git a/src/components/ViewComponent/index.tsx b/src/components/ViewComponent/index.tsx
index a150891..c6ebfec 100644
--- a/src/components/ViewComponent/index.tsx
+++ b/src/components/ViewComponent/index.tsx
@@ -35,83 +35,94 @@ export const ViewComponent: FC<ViewComponentProps> = ({
 
   return (
     <S.Container>
-      <S.Menu>
-        {menuItems.map((item, index) => (
-          <S.Button
-            role="button"
-            key={index}
-            active={activeButton === item}
-            onClick={() => {
-              setActiveButton(activeButton === item ? null : item);
-            }}
-          >
-            {item}
-          </S.Button>
-        ))}
-        <S.OrderList>
-          <p>{orderList}</p>
-          <motion.nav
-            initial={false}
-            animate={isOpen ? 'open' : 'closed'}
-            className="menu"
-            style={{ overflow: 'hidden' }}
-          >
-            <motion.button
-              whileTap={{ scale: 0.97 }}
-              onClick={() => setIsOpen(!isOpen)}
+      <motion.div
+        className="buttonsMenu"
+        initial={{ opacity: 0, scale: 0.5 }}
+        animate={{ opacity: 1, scale: 1 }}
+        transition={{
+          duration: 0.8,
+          delay: 0.5,
+          ease: [0, 0.71, 0.2, 1.01],
+        }}
+      >
+        <S.Menu>
+          {menuItems.map((item, index) => (
+            <S.Button
+              role="button"
+              key={index}
+              active={activeButton === item}
+              onClick={() => {
+                setActiveButton(activeButton === item ? null : item);
+              }}
             >
-              {dropDownText}
-              <motion.div
-                variants={{
-                  open: { rotate: 180 },
-                  closed: { rotate: 0 },
-                }}
-                transition={{ duration: 0.2 }}
-                style={{ originY: 0.55 }}
+              {item}
+            </S.Button>
+          ))}
+          <S.OrderList>
+            <p>{orderList}</p>
+            <motion.nav
+              initial={false}
+              animate={isOpen ? 'open' : 'closed'}
+              className="menu"
+              style={{ overflow: 'hidden' }}
+            >
+              <motion.button
+                whileTap={{ scale: 0.97 }}
+                onClick={() => setIsOpen(!isOpen)}
               >
-                <svg width="15" height="15" viewBox="0 0 20 20">
-                  <path d="M0 7 L 20 7 L 10 16" />
-                </svg>
-              </motion.div>
-            </motion.button>
-            <motion.ul
-              variants={{
-                open: {
-                  clipPath: 'inset(0% 0% 0% 0% round 10px)',
-                  transition: {
-                    type: 'spring',
-                    bounce: 0,
-                    duration: 0.7,
-                    delayChildren: 0.3,
-                    staggerChildren: 0.05,
+                {dropDownText}
+                <motion.div
+                  variants={{
+                    open: { rotate: 180 },
+                    closed: { rotate: 0 },
+                  }}
+                  transition={{ duration: 0.2 }}
+                  style={{ originY: 0.55 }}
+                >
+                  <svg width="15" height="15" viewBox="0 0 20 20">
+                    <path d="M0 7 L 20 7 L 10 16" />
+                  </svg>
+                </motion.div>
+              </motion.button>
+              <motion.ul
+                variants={{
+                  open: {
+                    clipPath: 'inset(0% 0% 0% 0% round 10px)',
+                    transition: {
+                      type: 'spring',
+                      bounce: 0,
+                      duration: 0.7,
+                      delayChildren: 0.3,
+                      staggerChildren: 0.05,
+                    },
                   },
-                },
-                closed: {
-                  clipPath: 'inset(10% 50% 90% 50% round 10px)',
-                  transition: {
-                    type: 'spring',
-                    bounce: 0,
-                    duration: 0.3,
+                  closed: {
+                    clipPath: 'inset(10% 50% 90% 50% round 10px)',
+                    transition: {
+                      type: 'spring',
+                      bounce: 0,
+                      duration: 0.3,
+                    },
                   },
-                },
-              }}
-              style={{
-                pointerEvents: isOpen ? 'auto' : 'none',
-                zIndex: isOpen ? '999' : 'none',
-                position: 'absolute',
-                maxWidth: '300px',
-                width: '100%',
-              }}
-            >
-              <motion.li variants={itemVariants}>{itemText}</motion.li>
-              <motion.li variants={itemVariants}>{itemText}</motion.li>
-              <motion.li variants={itemVariants}>{itemText}</motion.li>
-              <motion.li variants={itemVariants}>{itemText}</motion.li>
-              <motion.li variants={itemVariants}>{itemText}</motion.li>
-            </motion.ul>
-          </motion.nav>
-        </S.OrderList>
-      </S.Menu>
+                }}
+                style={{
+                  pointerEvents: isOpen ? 'auto' : 'none',
+                  zIndex: isOpen ? '999' : 'none',
+                  position: 'absolute',
+                  maxWidth: '300px',
+                  width: '100%',
+                }}
+              >
+                <motion.li variants={itemVariants}>{itemText}</motion.li>
+                <motion.li variants={itemVariants}>{itemText}</motion.li>
+                <motion.li variants={itemVariants}>{itemText}</motion.li>
+                <motion.li variants={itemVariants}>{itemText}</motion.li>
+                <motion.li variants={itemVariants}>{itemText}</motion.li>
+              </motion.ul>
+            </motion.nav>
+          </S.OrderList>
+        </S.Menu>
+      </motion.div>
     </S.Container>
   );
 };