Projeto 05 – Landing Page Tematizável 🌈

Nesta aula, você vai construir uma página que demonstra o poder da estilização dinâmica com Styled Components.

🎯 Objetivo

Implementar um sistema de "Troca de Temas" (Theming) básico e utilizar componentes estilizados que reagem a props.

🛠️ Requisitos

Uso de Styled Components.
Implementação de um botão que alterna entre tema "Claro" e "Escuro" (ou outros temas criativos).
Nenhum arquivo .css externo deve ser usado, apenas CSS-in-JS.

📝 Passo a Passo

1. Instalação

No terminal:

$ npm install styled-components

2. Criação dos Componentes Estilizados

Crie um arquivo src/styles.js e defina: - Container: Uma div que ocupa a tela toda com transição suave de cor. - BotaoTema: Um botão que muda de estilo visual dependendo do tema. - Texto: Um parágrafo estilizado.

3. Lógica de Alternância

No App.jsx, use um useState para controlar qual tema está ativo. Passe essa informação via props para seus componentes estilizados.

4. Conteúdo da Página

Adicione uma seção de Hero (título grande), uma breve descrição e o botão de toggle centralizado.

✅ Critérios de Entrega

A troca de tema deve ser instantânea e sem recarregamento da página.
As cores devem ser harmoniosas em ambos os temas.
O código deve demonstrar o uso de props dentro dos template literals do Styled Components.

Desafio Extra

Tente usar o ThemeProvider do próprio Styled Components para gerenciar as cores de forma global!