{"id":26175322,"url":"https://github.com/fernandozuchi/pratica30-07","last_synced_at":"2026-02-24T10:04:24.807Z","repository":{"id":250789692,"uuid":"835482566","full_name":"FernandoZuchi/pratica30-07","owner":"FernandoZuchi","description":"Repositório template para as práticas da mentoria do dia 30/07 - Tema - React / HTML / CSS / JS - OBS: Repositório supervisionado via Github classroom ","archived":false,"fork":false,"pushed_at":"2024-07-30T00:52:56.000Z","size":27,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-24T05:47:07.327Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/FernandoZuchi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-29T23:51:41.000Z","updated_at":"2024-07-30T00:52:59.000Z","dependencies_parsed_at":"2024-07-30T04:52:23.176Z","dependency_job_id":null,"html_url":"https://github.com/FernandoZuchi/pratica30-07","commit_stats":null,"previous_names":["fernandozuchi/pratica30-07"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/FernandoZuchi/pratica30-07","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FernandoZuchi%2Fpratica30-07","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FernandoZuchi%2Fpratica30-07/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FernandoZuchi%2Fpratica30-07/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FernandoZuchi%2Fpratica30-07/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FernandoZuchi","download_url":"https://codeload.github.com/FernandoZuchi/pratica30-07/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FernandoZuchi%2Fpratica30-07/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29779262,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-24T04:54:30.205Z","status":"ssl_error","status_checked_at":"2026-02-24T04:53:58.628Z","response_time":75,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-03-11T20:56:13.549Z","updated_at":"2026-02-24T10:04:24.789Z","avatar_url":"https://github.com/FernandoZuchi.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Projeto 1 - Tela de Login e Cadastro \n\nEste projeto é uma aplicação React que implementa uma interface de login e cadastro. Abaixo estão os detalhes da configuração inicial e da estrutura dos arquivos.\n\n## Estrutura do Projeto\n\n- `App.js`\n- `LoginSignup.jsx`\n- `LoginSignup.css`\n- `assets/` (contém imagens usadas no formulário)\n\n## 1. Configuração do Arquivo `App.js`\n\nO arquivo `App.js` é o ponto de entrada da aplicação e contém o componente principal que renderiza o componente `LoginSignup`.\n\n```jsx\n// Importa o componente LoginSignup, que será usado na aplicação principal\nimport LoginSignup from \"./Components/LoginSignup/LoginSignup\";\n\n// Componente principal da aplicação\nconst App = () =\u003e {\n  return (\n    \u003cdiv\u003e\n      {/* Renderiza o componente LoginSignup */}\n      \u003cLoginSignup /\u003e\n    \u003c/div\u003e\n  )\n}\n\n// Exporta o componente App para uso em outras partes da aplicação\nexport default App;\n```\n\n## 2. Estilos Globais\n\nOs estilos globais são definidos para garantir que o corpo da página ocupe toda a altura da viewport e tenha um fundo com gradiente.\n\n### Arquivo `index.css` (ou equivalente)\n\n```css\n/* Define o estilo para o corpo da página */\nbody {\n    margin: 0; /* Remove a margem padrão do body */\n    height: 100vh; /* Define a altura da viewport para 100% da altura da tela */\n    background: linear-gradient(#2A00B7, #42006C); /* Define um gradiente de fundo */\n}\n```\n\n## 3. Componente `LoginSignup`\n\nO componente `LoginSignup` gerencia a exibição dos campos de login e cadastro, alternando entre eles conforme o estado `action`.\n\n### Arquivo `LoginSignup.jsx`\n\n```jsx\n// Importa os estilos do componente\nimport './LoginSignup.css';\n\n// Importa as imagens usadas nos campos de entrada\nimport email from '../assets/email.png';\nimport password from '../assets/password.png';\nimport person from '../assets/person.png';\n\n// Importa o hook useState do React para gerenciar o estado do componente\nimport { useState } from 'react';\n\n// Componente de login e cadastro\nconst LoginSignup = () =\u003e {\n    // Define o estado inicial do componente, que será \"Cadastre-se\"\n    const [action, setAction] = useState(\"Cadastre-se\");\n\n    return (\n        \u003cdiv className='container'\u003e\n            {/* Seção do cabeçalho que exibe o título e uma linha embaixo */}\n            \u003cdiv className=\"header\"\u003e\n                \u003cdiv className=\"text\"\u003e{action}\u003c/div\u003e\n                \u003cdiv className=\"underline\"\u003e\u003c/div\u003e\n            \u003c/div\u003e\n            {/* Seção dos campos de entrada */}\n            \u003cdiv className=\"inputs\"\u003e\n                {/* Renderiza o campo de nome somente se a ação não for \"Login\" */}\n                {action === \"Login\" ? \u003cdiv\u003e\u003c/div\u003e : \u003cdiv className=\"input\"\u003e\n                    \u003cimg src={person} alt=\"\" /\u003e\n                    \u003cinput type=\"text\" placeholder='Nome' /\u003e\n                \u003c/div\u003e}\n                \u003cdiv className=\"input\"\u003e\n                    \u003cimg src={email} alt=\"\" /\u003e\n                    \u003cinput type=\"email\" placeholder='E-mail' /\u003e\n                \u003c/div\u003e\n                \u003cdiv className=\"input\"\u003e\n                    \u003cimg src={password} alt=\"\" /\u003e\n                    \u003cinput type=\"password\" placeholder='Senha' /\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n            {/* Renderiza a mensagem \"Esqueceu a senha?\" somente se a ação for \"Login\" */}\n            {action === \"Cadastre-se\" ? \u003cdiv\u003e\u003c/div\u003e : \u003cdiv className=\"forgot-password\"\u003eEsqueceu a senha? \u003cspan\u003eClique aqui!\u003c/span\u003e\u003c/div\u003e}\n            {/* Seção dos botões de ação */}\n            \u003cdiv className=\"submit-container\"\u003e\n                {/* Botão de \"Cadastre-se\" */}\n                \u003cdiv className={action === \"Login\" ? \"submit gray\" : \"submit\"} onClick={() =\u003e setAction(\"Cadastre-se\")}\u003e\n                    Cadastre-se\n                \u003c/div\u003e\n                {/* Botão de \"Login\" */}\n                \u003cdiv className={action === \"Cadastre-se\" ? \"submit gray\" : \"submit\"} onClick={() =\u003e setAction(\"Login\")}\u003e\n                    Login\n                \u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    )\n}\n\n// Exporta o componente LoginSignup para uso em outras partes da aplicação\nexport default LoginSignup;\n```\n\n### Arquivo `LoginSignup.css`\n\n```css\n/* Estilo do contêiner principal do componente */\n.container {\n    display: flex;\n    flex-direction: column; /* Alinha os itens verticalmente */\n    margin: auto; /* Centraliza o contêiner horizontalmente */\n    width: 600px; /* Define a largura do contêiner */\n    margin-top: 200px; /* Define a margem superior do contêiner */\n    background: #fff; /* Define a cor de fundo do contêiner */\n    padding-bottom: 30px; /* Define o preenchimento inferior do contêiner */\n    border-radius: 5px; /* Adiciona bordas arredondadas ao contêiner */\n}\n\n/* Estilo do cabeçalho */\n.header {\n    display: flex;\n    flex-direction: column; /* Alinha os itens verticalmente */\n    align-items: center; /* Centraliza os itens horizontalmente */\n    gap: 9px; /* Espaço entre os itens */\n    width: 100%; /* Define a largura do cabeçalho */\n    margin-top: 30px; /* Define a margem superior do cabeçalho */\n}\n\n/* Estilo do texto do cabeçalho */\n.text {\n    color: #3c009d; /* Define a cor do texto */\n    font-size: 48px; /* Define o tamanho da fonte */\n    font-weight: 700; /* Define o peso da fonte */\n}\n\n/* Estilo da linha embaixo do texto */\n.underline {\n    width: 61px; /* Define a largura da linha */\n    height: 6px; /* Define a altura da linha */\n    background: #3c009d; /* Define a cor de fundo da linha */\n    border-radius: 9px; /* Adiciona bordas arredondadas à linha */\n}\n\n/* Estilo dos campos de entrada */\n.inputs {\n    margin-top: 55px; /* Define a margem superior dos campos de entrada */\n    display: flex;\n    flex-direction: column; /* Alinha os itens verticalmente */\n    gap: 25px; /* Espaço entre os campos */\n}\n\n/* Estilo individual de cada campo de entrada */\n.input {\n    display: flex;\n    align-items: center; /* Alinha os itens verticalmente no centro */\n    margin: auto; /* Centraliza o campo horizontalmente */\n    width: 480px; /* Define a largura do campo */\n    height: 80px; /* Define a altura do campo */\n    background: #eaeaea; /* Define a cor de fundo do campo */\n    border-radius: 6px; /* Adiciona bordas arredondadas ao campo */\n}\n\n/* Estilo das imagens dentro dos campos de entrada */\n.input img {\n    margin: 0px 30px; /* Define a margem ao redor da imagem */\n}\n\n/* Estilo dos inputs dentro dos campos de entrada */\n.input input {\n    height: 50px; /* Define a altura do input */\n    width: 400px; /* Define a largura do input */\n    background: transparent; /* Define o fundo transparente do input */\n    border: none; /* Remove a borda do input */\n    outline: none; /* Remove o contorno do input */\n    color: #797979; /* Define a cor do texto do input */\n    font-size: 19px; /* Define o tamanho da fonte do input */\n}\n\n/* Estilo da mensagem de \"Esqueceu a senha?\" */\n.forgot-password {\n    padding-left: 62px; /* Define o preenchimento à esquerda da mensagem */\n    margin-top: 27px; /* Define a margem superior da mensagem */\n    color: #797979; /* Define a cor do texto da mensagem */\n    font-size: 18px; /* Define o tamanho da fonte da mensagem */\n}\n\n/* Estilo do texto clicável dentro da mensagem de \"Esqueceu a senha?\" */\n.forgot-password span {\n    color: #4c00b4; /* Define a cor do texto clicável */\n    cursor: pointer; /* Define o cursor como uma mão para indicar um link */\n}\n\n/* Estilo do contêiner dos botões de ação */\n.submit-container {\n    display: flex;\n    gap: 30px; /* Espaço entre os botões */\n    margin: 60px auto; /* Define a margem superior e centraliza o contêiner horizontalmente */\n}\n\n/* Estilo dos botões de ação */\n.submit {\n    display: flex;\n    justify-content: center; /* Alinha o texto horizontalmente no centro */\n    align-items: center; /* Alinha o texto verticalmente no centro */\n    width: 220px; /* Define a largura do botão */\n    height: 59px; /* Define a altura do botão */\n    color: #fff; /* Define a cor do texto do botão */\n    background: #4c00b4; /* Define a cor de fundo do botão */\n    border-radius: 50px; /* Adiciona bordas arredondadas ao botão */\n    font-size: 19px; /* Define o tamanho da fonte do botão */\n    font-weight: 700; /* Define o peso da fonte do botão */\n    cursor: pointer; /* Define o cursor como uma mão para indicar que o botão é clicável */\n}\n\n/* Estilo para o botão inativo */\n.gray {\n    background: #EAEAEA; /* Define a cor de fundo para o botão inativo */\n    color: #676767; /* Define a cor do texto para o botão inativo */\n}\n```\n\n# Projeto 2 - Home page com vídeo e carrossel de fotos\n\n### 1. Estrutura Geral\n\n**App Component (`App.js`):**\n1. **Importações**: Importa os componentes `Background`, `Navbar` e `Hero`, e usa os hooks `useEffect` e `useState` do React.\n2. **Dados do Hero**: Define um array `heroData` com três conjuntos de dados de texto.\n3. **Estados**: Usa `useState` para gerenciar o índice do `heroData` (`heroCount`) e o status de reprodução do vídeo (`playStatus`).\n4. **Efeito Colateral**: Usa `useEffect` para atualizar `heroCount` a cada 3 segundos.\n5. **Renderização**: Renderiza os componentes `Background`, `Navbar`, e `Hero`, passando os estados e dados necessários como props.\n\n**Código (`App.js`):**\n```jsx\nimport React, { useEffect, useState } from 'react'; // Importa React e hooks necessários\nimport Background from './Components/Background/Background'; // Importa o componente Background\nimport Navbar from './Components/Navbar/Navbar'; // Importa o componente Navbar\nimport Hero from './Components/Hero/Hero'; // Importa o componente Hero\n\nconst App = () =\u003e {\n  // Define os dados para o componente Hero\n  let heroData = [\n    { text1: \"Dive into\", text2: \"what you love\" },\n    { text1: \"Indulge\", text2: \"your passions\" },\n    { text1: \"Give in to\", text2: \"your passions\" },\n  ];\n\n  // Cria um estado para controlar o índice da imagem ou vídeo de fundo\n  const [heroCount, setHeroCount] = useState(2);\n\n  // Cria um estado para controlar o status de reprodução do vídeo\n  const [playStatus, setPlayStatus] = useState(false);\n\n  useEffect(() =\u003e {\n    // Define um intervalo que muda o índice do herói a cada 3 segundos\n    const interval = setInterval(() =\u003e {\n      setHeroCount((count) =\u003e (count === 2 ? 0 : count + 1));\n    }, 3000);\n\n    // Limpa o intervalo quando o componente é desmontado\n    return () =\u003e clearInterval(interval);\n  }, []);\n\n  return (\n    \u003cdiv\u003e\n      {/* Renderiza o componente Background, passando os estados playStatus e heroCount */}\n      \u003cBackground playStatus={playStatus} heroCount={heroCount} /\u003e\n      \n      {/* Renderiza o componente Navbar */}\n      \u003cNavbar /\u003e\n      \n      {/* Renderiza o componente Hero, passando os dados e estados necessários */}\n      \u003cHero \n        setPlayStatus={setPlayStatus}\n        heroData={heroData[heroCount]}\n        heroCount={heroCount}\n        setHeroCount={setHeroCount}\n        playStatus={playStatus}\n      /\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default App;\n```\n\n## 2. Estilo Global\n\n### CSS Global (`index.css`)\n\nO arquivo `index.css` é utilizado para definir o estilo global da aplicação. Ele realiza ajustes fundamentais na aparência e no comportamento dos elementos em toda a aplicação.\n\n**Reseta Margens e Preenchimentos:** \nRemove margens e preenchimentos padrões para garantir que o layout seja consistente e não seja influenciado por estilos predefinidos do navegador.\n\n**Fonte e Overflow:** \nDefine a fonte padrão utilizada na aplicação e evita a rolagem vertical da página.\n\n```css\n* {\n  margin: 0;\n  padding: 0;\n  font-family: 'Poppins';\n  overflow-y: hidden;\n}\n```\n\n## 3. Componente Background\n\n### Código (`Background.js`)\n\nO componente `Background` é responsável por renderizar um vídeo ou uma imagem de fundo, dependendo do estado `playStatus` e do índice `heroCount`. \n\n**Importações:**\n- Importa o arquivo CSS para estilos.\n- Importa recursos de mídia, incluindo um vídeo e três imagens para o fundo.\n\n**Componente:**\nRenderiza um vídeo se `playStatus` for `true`. Caso contrário, renderiza uma imagem com base no valor de `heroCount`.\n\n```jsx\nimport \"./Background.css\"; // Importa o arquivo de estilos CSS para o componente\nimport video1 from \"../../assets/video1.mp4\"; // Importa o arquivo de vídeo para o fundo\nimport image1 from \"../../assets/image1.png\"; // Importa a primeira imagem de fundo\nimport image2 from \"../../assets/image2.png\"; // Importa a segunda imagem de fundo\nimport image3 from \"../../assets/image3.png\"; // Importa a terceira imagem de fundo\n\nconst Background = ({ playStatus, heroCount }) =\u003e {\n    // Verifica se o playStatus está ativado\n    if (playStatus) {\n        // Se playStatus for verdadeiro, renderiza o vídeo como fundo\n        return (\n            \u003cvideo className=\"background fade-in\" autoPlay loop muted\u003e\n                \u003csource src={video1} type=\"video/mp4\" /\u003e {/* Define o vídeo a ser reproduzido */}\n            \u003c/video\u003e\n        );\n    } \n    // Se playStatus não estiver ativado, verifica o valor de heroCount\n    else if (heroCount === 0) {\n        // Se heroCount for 0, renderiza a primeira imagem como fundo\n        return \u003cimg src={image1} className=\"background fade-in\" alt=\"Background Image 1\" /\u003e;\n    } \n    else if (heroCount === 1) {\n        // Se heroCount for 1, renderiza a segunda imagem como fundo\n        return \u003cimg src={image2} className=\"background fade-in\" alt=\"Background Image 2\" /\u003e;\n    } \n    else if (heroCount === 2) {\n        // Se heroCount for 2, renderiza a terceira imagem como fundo\n        return \u003cimg src={image3} className=\"background fade-in\" alt=\"Background Image 3\" /\u003e;\n    }\n}\n\nexport default Background; // Exporta o componente para ser utilizado em outras partes da aplicação\n```\n\n### CSS (`Background.css`)\n\nO arquivo `Background.css` define os estilos para o componente de fundo, incluindo a posição, ajuste e animação para uma transição suave entre imagens e vídeos.\n\n#### Estilo do Background:\nDefine a posição do background para cobrir toda a tela e garante que o elemento de fundo fique atrás de outros conteúdos.\n\n#### Animação de Fade-In:\nAdiciona uma animação para uma transição suave de opacidade.\n\n```css\n/* Estiliza o fundo para ocupar toda a tela */\n.background {\n    height: 100%; /* Define a altura do fundo para 100% da altura da tela */\n    width: 100%; /* Define a largura do fundo para 100% da largura da tela */\n    float: left; /* Flutua o elemento para a esquerda */\n    top: 0; /* Define a posição superior do fundo para 0 */\n    left: 0; /* Define a posição esquerda do fundo para 0 */\n    right: 0; /* Define a posição direita do fundo para 0 */\n    bottom: 0; /* Define a posição inferior do fundo para 0 */\n    padding: none; /* Remove qualquer preenchimento */\n    position: fixed; /* Fixar o fundo para que ele não se mova ao rolar a página */\n    object-fit: cover; /* Faz com que o conteúdo do fundo cubra completamente o elemento, mantendo a proporção */\n    z-index: -1; /* Define o índice z para que o fundo fique atrás dos outros conteúdos */\n}\n\n/* Define a animação de fade-in */\n@keyframes fadeIn {\n    from {\n        opacity: 0; /* Começa com opacidade 0 (invisível) */\n    }\n    to {\n        opacity: 1; /* Termina com opacidade 1 (visível) */\n    }\n}\n\n/* Aplica a animação de fade-in ao elemento */\n.fade-in {\n    animation: fadeIn 500ms ease-in-out; /* Define a duração da animação para 500ms e a curva de velocidade como ease-in-out */\n}\n```\n\n- background: Define a altura e largura do elemento de fundo para cobrir toda a tela, fixando-o atrás do conteúdo com z-index: -1.\n- @keyframes fadeIn: Define a animação de transição de opacidade, que faz com que o elemento apareça suavemente.\n- .fade-in: Aplica a animação de fade-in para um efeito de transição suave de opacidade.\n\n### 4. Componente Hero\n\n#### Código (`Hero.jsx`):\n\nO componente `Navbar` renderiza o logo e o menu de navegação, proporcionando uma interface de navegação no topo da página.\n\n```jsx\n// Importa o arquivo de estilo CSS para o componente Hero\nimport \"./Hero.css\";\n\n// Importa as imagens dos ícones e botões\nimport arrow_btn from '../../assets/arrow_btn.png';\nimport play_icon from '../../assets/play_icon.png';\nimport pause_icon from '../../assets/pause_icon.png';\n\n// Define o componente Hero que recebe várias propriedades\nconst Hero = ({ heroData, setHeroCount, heroCount, setPlayStatus, playStatus }) =\u003e {\n  return (\n    \u003cdiv className=\"hero\"\u003e\n        {/* Renderiza o texto do hero */}\n        \u003cdiv className=\"hero-text\"\u003e\n             \u003cp\u003e{heroData.text1}\u003c/p\u003e\n             \u003cp\u003e{heroData.text2}\u003c/p\u003e\n        \u003c/div\u003e\n        {/* Renderiza a seção de exploração */}\n        \u003cdiv className=\"hero-explore\"\u003e\n            \u003cp\u003eExplore the features\u003c/p\u003e\n            \u003cimg src={arrow_btn} alt=\"Explore Button\"/\u003e\n        \u003c/div\u003e\n        {/* Renderiza os pontos de navegação e o controle de vídeo */}\n        \u003cdiv className=\"hero-dot-play\"\u003e\n            \u003cul className=\"hero-dots\"\u003e\n                {/* Pontos de navegação para alternar entre os heróis */}\n                \u003cli onClick={() =\u003e setHeroCount(0)} className={heroCount === 0 ? \"hero-dot orange\" : \"hero-dot\"}\u003e\u003c/li\u003e\n                \u003cli onClick={() =\u003e setHeroCount(1)} className={heroCount === 1 ? \"hero-dot orange\" : \"hero-dot\"}\u003e\u003c/li\u003e\n                \u003cli onClick={() =\u003e setHeroCount(2)} className={heroCount === 2 ? \"hero-dot orange\" : \"hero-dot\"}\u003e\u003c/li\u003e\n            \u003c/ul\u003e\n            \u003cdiv className=\"hero-play\"\u003e\n                {/* Botão de Play/Pause para o vídeo */}\n                \u003cimg onClick={() =\u003e setPlayStatus(!playStatus)} src={playStatus ? pause_icon : play_icon} alt=\"Play/Pause Button\"/\u003e\n                \u003cp\u003eSee the video\u003c/p\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n  );\n}\n\n// Exporta o componente Hero como padrão\nexport default Hero;\n```\n\n### CSS (`Hero.css`)\n\nO arquivo `Navbar.css` define o estilo para o componente de navegação, incluindo o layout do logo e do menu.\n```\n/* Define margens para o container principal do componente hero */\n.hero {\n    margin: 0px 120px;      /* Margem horizontal de 120px */\n    margin-top: 270px;      /* Margem superior de 270px */\n}\n\n/* Estiliza o texto dentro do componente hero */\n.hero-text {\n    color: #FFF;            /* Cor do texto branco */\n    font-size: 110px;       /* Tamanho da fonte grande (110px) */\n    font-weight: 500;       /* Peso da fonte médio */\n    line-height: 130px;     /* Altura da linha para espaçamento */\n}\n\n/* Estiliza a seção \"explore\" do componente hero */\n.hero-explore {\n    display: flex;          /* Usa flexbox para o layout */\n    align-items: center;    /* Alinha os itens ao centro verticalmente */\n    gap: 50px;              /* Espaço entre os itens de 50px */\n    width: fit-content;     /* Largura ajustada ao conteúdo */\n    margin-top: 70px;       /* Margem superior de 70px */\n    padding: 5px 8px;       /* Padding interno */\n    padding-left: 30px;     /* Padding adicional à esquerda */\n    border-radius: 60px;    /* Bordas arredondadas */\n    background-color: white; /* Fundo branco */\n    cursor: pointer;        /* Aponta o cursor para indicar que é clicável */\n}\n\n/* Estiliza o parágrafo dentro da seção \"explore\" */\n.hero-explore p {\n    color: #292929;         /* Cor do texto */\n    font-size: 20px;        /* Tamanho da fonte */\n    font-weight: 500;       /* Peso da fonte */\n}\n\n/* Define o layout para a seção de pontos e botão de reprodução */\n.hero-dot-play {\n    margin: 120px;          /* Margem de 120px em todas as direções */\n    display: flex;          /* Usa flexbox para o layout */\n    justify-content: space-between; /* Espaça os itens igualmente */\n}\n\n/* Estiliza a lista de pontos de navegação */\n.hero-dots {\n    display: flex;          /* Usa flexbox para o layout */\n    align-items: center;    /* Alinha os itens ao centro verticalmente */\n    gap: 23px;              /* Espaço entre os pontos */\n    list-style: none;       /* Remove os marcadores de lista */\n}\n\n/* Estiliza cada ponto individualmente */\n.hero-dot {\n    width: 15px;            /* Largura do ponto */\n    height: 15px;           /* Altura do ponto */\n    background-color: #fff; /* Cor de fundo branca */\n    border-radius: 7.5px;   /* Bordas arredondadas */\n    cursor: pointer;        /* Aponta o cursor para indicar que é clicável */\n}\n\n/* Estiliza os pontos ativos com cor laranja */\n.hero-dot.orange {\n    background: orangered;  /* Cor de fundo laranja */\n}\n\n/* Estiliza a seção de controle de reprodução */\n.hero-play {\n    display: flex;          /* Usa flexbox para o layout */\n    align-items: center;    /* Alinha os itens ao centro verticalmente */\n    gap: 30px;              /* Espaço entre os itens */\n}\n\n/* Estiliza o parágrafo dentro da seção de reprodução */\n.hero-play p {\n    color: white;           /* Cor do texto branca */\n    font-size: 19px;        /* Tamanho da fonte */\n}\n\n```\n\n### 5. Componente Navbar\n\n#### Código (`Navbar.js`):\n\nO componente `Navbar` renderiza o logo e o menu de navegação, proporcionando uma interface de navegação no topo da página.\n\n```jsx\nimport \"./Navbar.css\";\n\nconst Navbar = () =\u003e {\n  return (\n    \u003cdiv className=\"nav\"\u003e\n        \u003cdiv className=\"nav-logo\"\u003eEV-olution\u003c/div\u003e\n        \u003cul className=\"nav-menu\"\u003e\n            \u003cli\u003eHome\u003c/li\u003e\n            \u003cli\u003eExplore\u003c/li\u003e\n            \u003cli\u003eAbout\u003c/li\u003e\n            \u003cli className=\"nav-content\"\u003eContent\u003c/li\u003e\n        \u003c/ul\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default Navbar;\n```\n\n### CSS (`Navbar.css`)\n\nO arquivo `Navbar.css` define o estilo para o componente de navegação, incluindo o layout do logo e do menu.\n\n```css\n/* Estiliza o container de navegação */\n.nav {\n    display: flex; /* Usa Flexbox para layout flexível */\n    justify-content: space-between; /* Distribui espaço igualmente entre os itens, alinhando-os nas extremidades */\n    align-items: center; /* Alinha os itens verticalmente no centro */\n    margin: 40px 120px; /* Define margens superior e inferior de 40px e margens esquerda e direita de 120px */\n    color: white; /* Define a cor do texto para branco */\n}\n\n/* Estiliza o logo de navegação */\n.nav-logo {\n    font-family: 'Outfit'; /* Define a fonte do logo */\n    font-size: 42px; /* Define o tamanho da fonte para 42px */\n    font-weight: 400; /* Define o peso da fonte para 400 (normal) */\n}\n\n/* Estiliza o menu de navegação */\n.nav-menu {\n    display: flex; /* Usa Flexbox para layout flexível */\n    align-items: center; /* Alinha os itens verticalmente no centro */\n    list-style: none; /* Remove os marcadores da lista */\n    font-size: 18px; /* Define o tamanho da fonte para 18px */\n    gap: 90px; /* Define um espaçamento de 90px entre os itens do menu */\n}\n\n/* Estiliza o item de menu \"Content\" */\n.nav-content {\n    border-radius: 50px; /* Adiciona bordas arredondadas com raio de 50px */\n    padding: 10px 30px; /* Adiciona preenchimento interno de 10px no topo e embaixo e 30px nas laterais */\n    background-color: #fff; /* Define a cor de fundo para branco */\n    color: black; /* Define a cor do texto para preto */\n}\n```\n\n- .nav: Configura o layout do componente de navegação, alinhando o conteúdo no topo da página e distribuindo espaço entre o logo e o menu de navegação.\n- .nav-logo: Define o estilo do logo, incluindo a fonte, tamanho e peso.\n- .nav-menu: Estiliza a lista do menu de navegação, alinhando os itens e removendo os marcadores da lista.\n- .nav-content: Aplica estilos adicionais ao item de menu \"Content\", incluindo bordas arredondadas e um fundo branco.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffernandozuchi%2Fpratica30-07","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffernandozuchi%2Fpratica30-07","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffernandozuchi%2Fpratica30-07/lists"}