feat: adiciona modal e contador

package.json

@@ -22,13 +22,13 @@
     "@fortawesome/free-solid-svg-icons": "^6.2.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@vercel/analytics": "^0.1.3",
+    "bootstrap": "^5.3.2",
     "firebase": "^10.4.0",
     "firebase-admin": "^11.10.1",
     "firebase-functions": "^3.23.0",
     "next": "^13.4.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-modal-video": "^2.0.1",
     "react-player": "^2.14.1",
     "reactstrap": "^9.1.3"
   },

src/components/hero-section/iwd-2024/index.tsx

@@ -4,8 +4,7 @@ import configValues from "helpers/config"
 
 import styles from './styles.module.css'
 import React from "react"
-
-import ModalVideo from "react-modal-video";
+import ModalPlayer from "components/modal-player/modal-player"
 
 export const HeroSection = () => {
 
@@ -17,7 +16,7 @@ export const HeroSection = () => {
   return (
     <section className={styles.Section}>
       <div className={styles.Content}>
-        <div>
+        <div className={styles.InnerContent}>
           <div>
             <h1 className={styles.H1}>Impact The Future</h1>
             <h3 className={styles.H3} > International Women's Day 2024</h3>
@@ -31,18 +30,20 @@ export const HeroSection = () => {
               Garantir meu ingresso
             </a>
 
-            <div className={styles.AsidePlayButton} onClick={() => { toggle() }}>
+            <div className={styles.AsidePlayButton} onClick={() => { toggle(); }}>
               <Image alt='Botão de play para vídeo do evneto ano passado' src={PlayIcon} width={44} height={32} />
               <span >Confira o evento último ano</span>
             </div>
           </div>
         </div>
       </div>
-      <ModalVideo
-        channel="youtube"
-        isOpen={open}
-        videoId={'Uo59PxO9ofc'}
-        onClose={() => toggle()}
+      <ModalPlayer
+        url="https://www.youtube.com/embed/uY9nDt4swuU?si=EvquzOhd_7EjRulP"
+        open={open}
+        toggle={() => {
+          console.log('foi')
+          toggle()
+        }}
       />
     </section >
   )