text: import React from 'react';
  import styled from 'styled-components';
  import Menu from '../../Components/Menu'
  import dadosIniciais from '../../data/dados_iniciais.json';
  import BannerMain from '../../Components/BannerMain';
  import Carousel from '../../Components/Carousel';
  import Footer from '../../Components/Footer';
  
  /*Wrapper: agrupador de conteudo*/
  /*Ao invens de usar backgroun: #141414 vc usar variavel ouxando a index.css*/
  const AppWrapper = styled.div`
    background: var(--grayDark); 
  `;
  
  /*Div vai se tornar um AppWrapper*/
  function Home() {
    return (
      <AppWrapper>
        <Menu />
  
        <BannerMain
          videoTitle={dadosIniciais.categorias[0].videos[0].titulo}
          url={dadosIniciais.categorias[0].videos[0].url}
          videoDescription={"O que é Front-end? Trabalhando na área os termos HTML, CSS e JavaScript fazem parte da rotina das desenvolvedoras e desenvolvedores. Mas o que eles fazem, afinal? Descubra com a Vanessa!"}
        />
  
        <Carousel
          ignoreFirstVideo
          category={dadosIniciais.categorias[0]}
        />
  
        <Carousel
          category={dadosIniciais.categorias[1]}
        />
  
        <Carousel
          category={dadosIniciais.categorias[2]}
        />      
  
        <Carousel
          category={dadosIniciais.categorias[3]}
        />      
  
        <Carousel
          category={dadosIniciais.categorias[4]}
        />      
  
        <Carousel
          category={dadosIniciais.categorias[5]}
        />      
  
        <Footer />
      </AppWrapper>
    );
  }
  
  export default Home;