From 50a4891b8e833ca30171cd377698a524093eb7db Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Estev=C3=A3o?= Date: Wed, 11 Mar 2026 11:53:02 -0300 Subject: [PATCH 01/13] Delete Login.jsx --- Login.jsx | 44 -------------------------------------------- 1 file changed, 44 deletions(-) delete mode 100644 Login.jsx diff --git a/Login.jsx b/Login.jsx deleted file mode 100644 index 91f2a6c..0000000 --- a/Login.jsx +++ /dev/null @@ -1,44 +0,0 @@ -import React from 'react'; - -function Login({ voltar }) { - return ( -
-
-
- - -

Entrar no CraftCode

-

Acesse sua conta para continuar evoluindo.

- -
-
- -
-
- -
- -
- -

- Não tem conta? Cadastre-se -

-
-
-
- ); -} - -export default Login; From 9e598672cb4aba9729f78017059046a5a0165468 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Estev=C3=A3o?= Date: Wed, 11 Mar 2026 11:53:43 -0300 Subject: [PATCH 02/13] Add Login component for user authentication --- src/Login.jsx | 44 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) create mode 100644 src/Login.jsx diff --git a/src/Login.jsx b/src/Login.jsx new file mode 100644 index 0000000..91f2a6c --- /dev/null +++ b/src/Login.jsx @@ -0,0 +1,44 @@ +import React from 'react'; + +function Login({ voltar }) { + return ( +
+
+
+ + +

Entrar no CraftCode

+

Acesse sua conta para continuar evoluindo.

+ +
+
+ +
+
+ +
+ +
+ +

+ Não tem conta? Cadastre-se +

+
+
+
+ ); +} + +export default Login; From aad6b46f87789c7e6e4126b4a61f967c69c36203 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Estev=C3=A3o?= Date: Thu, 12 Mar 2026 11:19:21 -0300 Subject: [PATCH 03/13] Update index.html --- index.html | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/index.html b/index.html index 557bd6c..45cda91 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,6 @@ CraftCode -
- +
From 836ab517763fe3478b22026ef283a32179f6608a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Estev=C3=A3o?= Date: Thu, 19 Mar 2026 00:26:24 -0300 Subject: [PATCH 04/13] Fix missing newline at end of index.html Add missing newline at the end of index.html From 52924ef8bd9a6ba0dcab16b9cfec9ed4a61eb0c2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Estev=C3=A3o?= Date: Thu, 19 Mar 2026 00:27:05 -0300 Subject: [PATCH 05/13] Update App.jsx --- src/App.jsx | 116 ++++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 86 insertions(+), 30 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 57d23fb..b3a89ee 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,67 +1,123 @@ -import React, { useState } from 'react' -import Login from './Login.jsx' +import React, { useState } from 'react'; +import Login from './Login.jsx'; function App() { const [paginaAtual, setPaginaAtual] = useState('home'); + // Novo estado para guardar as informações do utilizador + const [usuarioLogado, setUsuarioLogado] = useState(null); + + // Função para limpar o utilizador e voltar ao estado deslogado + const fazerLogout = () => { + setUsuarioLogado(null); + }; if (paginaAtual === 'login') { - return setPaginaAtual('home')} />; + return ( + setPaginaAtual('home')} + // Esta função recebe os dados do Login.jsx e guarda no App.jsx + aoLogarSucesso={(dadosDoUsuario) => { + setUsuarioLogado(dadosDoUsuario); + setPaginaAtual('home'); // Volta para a home automaticamente + }} + /> + ); } return ( - <> +
-
setPaginaAtual('home')} style={{cursor: 'pointer'}}> - CraftCode -
+
CraftCode
-
-
-
-

Domine a arte do código

-

Aprenda programação com projetos práticos e evolua sua carreira tech.

- Começar Agora -
-
- -
-
-

Cursos Populares

-
-
+
+
+

Domine a arte do código

+

Aprenda programação com projetos práticos e evolua sua carreira tech.

+ + {/* Se o utilizador já estiver logado, podemos mudar o texto do botão principal também */} + {usuarioLogado ? ( + + ) : ( + + )} +
+
+ +
+
+

Cursos Populares

+
+
+
+

Lógica de Programação

Fundamentos essenciais para iniciantes.

+ Ver detalhes →
-
+
+ +
+
+

Frontend Moderno

-

HTML, CSS e JS avançado.

+

HTML, CSS e JavaScript avançado.

+ Ver detalhes →
-
+ + +
+
+
+

Backend com Node.js

+

Construa APIs robustas e escaláveis.

+ Ver detalhes → +
+
-
-
+
+

© 2026 CraftCode. Todos os direitos reservados.

- + ); } From 3ae9ed4e4989ef61ac38c05bda3c9699e4867023 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Estev=C3=A3o?= Date: Thu, 19 Mar 2026 00:27:19 -0300 Subject: [PATCH 06/13] Update Login.jsx --- src/Login.jsx | 93 +++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 86 insertions(+), 7 deletions(-) diff --git a/src/Login.jsx b/src/Login.jsx index 91f2a6c..507393f 100644 --- a/src/Login.jsx +++ b/src/Login.jsx @@ -1,6 +1,59 @@ -import React from 'react'; +import React, { useState } from 'react'; + +// Adicionamos a prop "aoLogarSucesso" +function Login({ voltar, aoLogarSucesso }) { + const [isLogin, setIsLogin] = useState(true); + + const [nome, setNome] = useState(''); + const [email, setEmail] = useState(''); + const [senha, setSenha] = useState(''); + const [mensagem, setMensagem] = useState(''); + + const handleSubmit = async (evento) => { + evento.preventDefault(); + + const endpoint = isLogin ? 'http://localhost:3000/login' : 'http://localhost:3000/cadastro'; + const bodyData = isLogin ? { email, senha } : { nome, email, senha }; + + try { + const resposta = await fetch(endpoint, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(bodyData) + }); + + const dados = await resposta.json(); + + if (resposta.ok) { + setMensagem("🎉 " + dados.mensagem); + + if (!isLogin) { + setNome(''); + setIsLogin(true); + } else { + setSenha(''); + + // Espera 1 segundo para o utilizador ler a mensagem de sucesso + setTimeout(() => { + // Chama a função passando os dados que vieram do backend (nome, email, id) + aoLogarSucesso(dados.usuario); + }, 1000); + } + } else { + setMensagem("❌ " + dados.erro); + } + } catch (error) { + setMensagem("❌ Erro ao conectar com o servidor. O Back-end está a correr?"); + } + }; + + const alternarModo = () => { + setIsLogin(!isLogin); + setMensagem(''); + setNome(''); + setSenha(''); + }; -function Login({ voltar }) { return (
@@ -9,31 +62,57 @@ function Login({ voltar }) { ← Voltar -

Entrar no CraftCode

-

Acesse sua conta para continuar evoluindo.

+

{isLogin ? 'Entrar no CraftCode' : 'Crie a sua conta'}

+

{isLogin ? 'Acesse sua conta para continuar evoluindo.' : 'Junte-se ao CraftCode e comece a construir o seu futuro.'}

-
+ + {!isLogin && ( +
+ setNome(e.target.value)} + required={!isLogin} + /> +
+ )} +
setEmail(e.target.value)} + required />
+
setSenha(e.target.value)} + required />
+
+ + {mensagem &&

{mensagem}

}

- Não tem conta? Cadastre-se + {isLogin ? 'Não tem conta? ' : 'Já tem uma conta? '} + + {isLogin ? 'Cadastre-se' : 'Faça Login'} +

From 8c2da98f71c78cca7c629f79a623743bfead4ba5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Estev=C3=A3o?= Date: Thu, 19 Mar 2026 00:27:32 -0300 Subject: [PATCH 07/13] Update main.jsx with CSS comment and render fix Added a comment in the CSS import line and fixed the rendering syntax. --- src/main.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/main.jsx b/src/main.jsx index 201b41e..6f18d1d 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,10 +1,10 @@ import React from 'react' import ReactDOM from 'react-dom/client' import App from './App.jsx' -import './style.css' +import './style.css' // Importando seu CSS aqui ReactDOM.createRoot(document.getElementById('root')).render( - + , ) From 40aa647cfd2436ab99965eff469e0645cbf8ad15 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Estev=C3=A3o?= Date: Thu, 19 Mar 2026 00:27:48 -0300 Subject: [PATCH 08/13] Update style.css --- src/style.css | 419 ++++++++++++++++++++++++++++++++++++++------------ 1 file changed, 317 insertions(+), 102 deletions(-) diff --git a/src/style.css b/src/style.css index 27e54ea..8ce74cd 100644 --- a/src/style.css +++ b/src/style.css @@ -1,155 +1,370 @@ -html, body { - height: 100%; - margin: 0; +:root { + /* Paleta de Cores */ + --primary-color: #FF8C00; /* Laranja forte */ + --primary-hover: #e07b00; + --bg-dark: #121212; /* Fundo quase preto */ + --bg-card: #1E1E1E; /* Fundo dos cards */ + --text-light: #F5F5F5; + --text-gray: #A0A0A0; + + /* Espaçamento */ + --container-width: 1200px; + --spacing-md: 1.5rem; } -#root { - display: flex; - flex-direction: column; - min-height: 100vh; +* { + margin: 0; + padding: 0; + box-sizing: border-box; } body { - font-family: Arial, sans-serif; - padding: 0; - background-color: #f4f4f9; - color: #333; + font-family: 'Inter', sans-serif; + background-color: var(--bg-dark); + color: var(--text-light); + line-height: 1.6; } -main { - flex: 1; +.container { + max-width: var(--container-width); + margin: 0 auto; + padding: 0 20px; } -.container { - max-width: 1200px; - margin: 0 auto; - padding: 0 20px; +a { + text-decoration: none; + color: inherit; + transition: 0.3s; } +/* Header */ .main-header { - background-color: #2c3e50; - color: white; - padding: 1rem 0; + background-color: rgba(18, 18, 18, 0.95); + padding: 20px 0; + border-bottom: 1px solid #333; + position: sticky; + top: 0; + z-index: 1000; } .header-content { - display: flex; - justify-content: space-between; - align-items: center; + display: flex; + justify-content: space-between; + align-items: center; +} + +.logo { + font-size: 1.5rem; + font-weight: 700; + color: var(--primary-color); + letter-spacing: -0.5px; } .nav-links { - list-style: none; - display: flex; - gap: 15px; - align-items: center; + list-style: none; + display: flex; + gap: 15px; /* Ajustado levemente para acomodar as bordas de todos os itens */ + align-items: center; } -.nav-links a, +/* --- Unificando TODOS os links e o botão no mesmo padrão laranja --- */ +.nav-links a, .btn-entrar-header { - background: none; - border: 1px solid white; - color: white; - padding: 8px 16px; - border-radius: 4px; - text-decoration: none; - cursor: pointer; - font-family: inherit; - font-size: 14px; - transition: 0.3s; - display: inline-block; -} - -.nav-links a:hover, + background: transparent; + border: 1px solid var(--primary-color); + padding: 8px 20px; + border-radius: 5px; + color: var(--primary-color) !important; /* !important garante o tom exato, ignorando estilos padrão do navegador */ + font-size: 1rem; + font-weight: 500; + font-family: inherit; + transition: 0.3s; + cursor: pointer; + display: inline-block; + text-align: center; +} + +.nav-links a:hover, .btn-entrar-header:hover { - background-color: rgba(255, 255, 255, 0.1); + background-color: var(--primary-color); + color: #ffffff !important; +} +/* ------------------------------------------------------------------ */ + +/* Secao de Cadastro */ +.cadastro-section { + padding: 80px 0; + background-color: var(--bg-card); + border-top: 1px solid #333; +} + +.cadastro-section h2 { + font-size: 2rem; + margin-bottom: 10px; +} + +.cadastro-section p { + color: var(--text-gray); + margin-bottom: 40px; +} + +.form-cadastro { + max-width: 480px; + display: flex; + flex-direction: column; + gap: 20px; +} + +.input-group { + display: flex; + flex-direction: column; + gap: 6px; +} + +.input-group label { + font-size: 0.9rem; + color: var(--text-gray); +} + +.input-group input { + background-color: #2a2a2a; + border: 1px solid #444; + border-radius: 8px; + padding: 12px 16px; + color: var(--text-light); + font-size: 1rem; + font-family: inherit; + transition: border-color 0.3s; +} + +.input-group input:focus { + outline: none; + border-color: var(--primary-color); +} + +.mensagem-aviso { + margin-top: 16px; + padding: 12px 16px; + border-radius: 8px; + background-color: #2a2a2a; + border: 1px solid #444; + font-size: 0.95rem; +} + +/* Página de Login Unificada */ +.login-page { + min-height: 100vh; + display: flex; + flex-direction: column; + background-color: var(--bg-dark); +} + +.login-section { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + padding: 60px 20px; +} + +.login-container { + width: 100%; + max-width: 480px; + background-color: var(--bg-card); + padding: 40px; + border-radius: 12px; + border: 1px solid #333; + box-shadow: 0 10px 30px rgba(0,0,0,0.5); +} + +.btn-back { + background: transparent; + border: none; + color: var(--text-gray); + cursor: pointer; + font-size: 0.95rem; + font-family: inherit; + padding: 0; + margin-bottom: 32px; + transition: color 0.3s; + display: flex; + align-items: center; + gap: 6px; +} + +.btn-back:hover { + color: var(--primary-color); +} + +.login-container h2 { + font-size: 2rem; + margin-bottom: 8px; +} + +.login-container > p { + color: var(--text-gray); + margin-bottom: 36px; +} + +.login-form { + display: flex; + flex-direction: column; + gap: 16px; +} + +.form-group { + display: flex; + flex-direction: column; + width: 100%; +} + +.input-craftcode { + background-color: #2a2a2a; + border: 1px solid #444; + border-radius: 8px; + padding: 14px 16px; + color: var(--text-light); + font-size: 1rem; + font-family: inherit; + transition: border-color 0.3s; + width: 100%; + box-sizing: border-box; +} + +.input-craftcode:focus { + outline: none; + border-color: var(--primary-color); +} + +.btn-submit { + margin-top: 8px; + width: 100%; + text-align: center; + border: none; + cursor: pointer; + font-size: 1rem; + font-family: inherit; +} + +.signup-text { + text-align: center; + margin-top: 24px; + color: var(--text-gray); + font-size: 0.95rem; } +/* Hero Section */ .hero { - padding: 60px 0; + padding: 80px 0; + text-align: center; +} + +.hero h1 { + font-size: 3rem; + margin-bottom: 20px; + background: linear-gradient(to right, #fff, #ccc); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.hero p { + font-size: 1.2rem; + color: var(--text-gray); + margin-bottom: 40px; + max-width: 600px; + margin-left: auto; + margin-right: auto; } .btn-primary { - display: inline-block; - background-color: #ffae00; - color: white; - padding: 12px 24px; - text-decoration: none; - border-radius: 4px; - font-weight: bold; - border: none; - cursor: pointer; + background-color: var(--primary-color); + color: white; + padding: 15px 40px; + border-radius: 8px; + font-weight: 600; + display: inline-block; } +.btn-primary:hover { + background-color: var(--primary-hover); + transform: translateY(-2px); +} + +/* Cursos Grid */ .courses-section { - padding: 40px 0; + padding: 60px 0; +} + +.courses-section h2 { + margin-bottom: 40px; + font-size: 2rem; + border-left: 4px solid var(--primary-color); + padding-left: 15px; } .course-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: 20px; - margin-top: 20px; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 30px; } .course-card { - background: white; - padding: 20px; - border-radius: 8px; - box-shadow: 0 2px 5px rgba(0,0,0,0.1); + background-color: var(--bg-card); + border-radius: 12px; + overflow: hidden; + transition: transform 0.3s ease; + border: 1px solid #333; } -.login-page { - background-color: #2c3e50; - min-height: 100vh; - display: flex; - align-items: center; - justify-content: center; +.course-card:hover { + transform: translateY(-5px); + border-color: var(--primary-color); } -.login-container { - background-color: white; - padding: 40px; - border-radius: 8px; - box-shadow: 0 10px 25px rgba(0,0,0,0.2); - width: 100%; - max-width: 380px; - text-align: center; +.card-image { + height: 180px; + background-color: #333; + width: 100%; } -.input-craftcode { - width: 100%; - padding: 12px; - margin-bottom: 15px; - border: 1px solid #ccc; - border-radius: 4px; - box-sizing: border-box; - transition: 0.2s; +.card-content { + padding: 20px; } -.input-craftcode:hover, -.input-craftcode:focus { - outline: none; - border-color: #ffae00; +.card-content h3 { + margin-bottom: 10px; } -.btn-submit-login { - width: 100%; - margin-top: 10px; +.card-content p { + color: var(--text-gray); + font-size: 0.9rem; + margin-bottom: 20px; } -.btn-back { - background: none; - border: none; - color: #ffae00; - cursor: pointer; - margin-bottom: 15px; +.link-details { + color: var(--primary-color); + font-weight: 600; + font-size: 0.9rem; } +/* Footer */ footer { - background-color: #2c3e50; - color: white; - padding: 1.5rem 0; - text-align: center; - width: 100%; + padding: 40px 0; + text-align: center; + border-top: 1px solid #333; + margin-top: 60px; + color: var(--text-gray); +} + +/* Nova classe para os links clicáveis (Cadastre-se / Faça Login) */ +.link-acao { + color: var(--primary-color); + cursor: pointer; + font-weight: 600; + transition: 0.3s; +} + +.link-acao:hover { + text-decoration: underline; + color: var(--primary-hover); } From ae0298fc6229dd37950e6f4a5b82b779c41d7fcb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Estev=C3=A3o?= Date: Thu, 19 Mar 2026 00:29:36 -0300 Subject: [PATCH 09/13] Create Sobre.jsx --- src/Sobre.jsx | 81 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 81 insertions(+) create mode 100644 src/Sobre.jsx diff --git a/src/Sobre.jsx b/src/Sobre.jsx new file mode 100644 index 0000000..67f5440 --- /dev/null +++ b/src/Sobre.jsx @@ -0,0 +1,81 @@ +import React from 'react'; + +function Sobre({ voltar }) { + return ( +
+
+
+ +

Nossa Missão

+

Transformar entusiastas em artesãos do código através da prática real.

+
+
+ +
+
+
+

Quem somos?

+

+ A CraftCode nasceu em 2026 com o objetivo de simplificar o + aprendizado de programação. Acreditamos que o código é uma forma de arte e, + como toda arte, requer as ferramentas certas e muita prática. +

+

+ Nossa metodologia é focada em projetos reais, fugindo de teorias maçantes + e focando no que o mercado realmente exige: resolução de problemas e + arquitetura limpa. +

+
+ +
+
+

+10k

+

Alunos Ativos

+
+
+

50+

+

Cursos Práticos

+
+
+

24/7

+

Suporte da Comunidade

+
+
+
+
+ +
+
+

Nossos Valores

+
+
+ 🚀 +

Evolução Contínua

+

O mundo tech não para, e nós também não.

+
+
+ 🤝 +

Comunidade

+

Ninguém aprende sozinho. Crescemos juntos.

+
+
+ 💎 +

Qualidade

+

Código que funciona é bom, código limpo é melhor.

+
+
+
+
+ +
+
+

© 2026 CraftCode. Todos os direitos reservados.

+
+
+
+ ); +} + +export default Sobre; From 152112624b7b86515cbfa4ccf4aacea16ad9cd85 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Estev=C3=A3o?= Date: Thu, 19 Mar 2026 00:30:03 -0300 Subject: [PATCH 10/13] Update App.jsx --- src/App.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/App.jsx b/src/App.jsx index b3a89ee..3760e3a 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,5 +1,6 @@ import React, { useState } from 'react'; import Login from './Login.jsx'; +import Sobre from './Sobre.jsx'; function App() { const [paginaAtual, setPaginaAtual] = useState('home'); From fc49710bdc8fc5a80ab789ef1aa4e4d9a06dcc68 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Estev=C3=A3o?= Date: Thu, 19 Mar 2026 00:31:44 -0300 Subject: [PATCH 11/13] Add Cursos component with course listings --- src/Cursos.jsx | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 50 insertions(+) create mode 100644 src/Cursos.jsx diff --git a/src/Cursos.jsx b/src/Cursos.jsx new file mode 100644 index 0000000..4647d98 --- /dev/null +++ b/src/Cursos.jsx @@ -0,0 +1,50 @@ +import React from 'react'; + +const LISTA_CURSOS = [ + { id: 1, titulo: "Lógica de Programação", desc: "O início de tudo. Algoritmos e estruturas.", nivel: "Iniciante" }, + { id: 2, titulo: "Frontend Moderno", desc: "Domine React, Vue e ecossistemas atuais.", nivel: "Intermediário" }, + { id: 3, titulo: "Backend com Node.js", desc: "Criando APIs escaláveis com TypeScript.", nivel: "Avançado" }, + { id: 4, titulo: "Banco de Dados SQL", desc: "Modelagem e consultas com PostgreSQL.", nivel: "Intermediário" }, + { id: 5, titulo: "UI/UX para Devs", desc: "Design focado em experiência do usuário.", nivel: "Iniciante" }, +]; + +function Cursos({ voltar, usuarioLogado }) { + return ( +
+
+
+
CraftCode
+ +
+
+ +
+
+

{usuarioLogado ? `Catálogo para ${usuarioLogado.nome}` : 'Nossos Cursos'}

+

+ {usuarioLogado ? 'Continue de onde parou ou comece algo novo.' : 'Faça login para salvar seu progresso.'} +

+ +
+ {LISTA_CURSOS.map(curso => ( +
+
+ {curso.nivel} +
+
+

{curso.titulo}

+

{curso.desc}

+ +
+
+ ))} +
+
+
+
+ ); +} + +export default Cursos; From 525fae147c4cf08916d4c87b3347bbfafc661ad4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Estev=C3=A3o?= Date: Thu, 19 Mar 2026 00:32:02 -0300 Subject: [PATCH 12/13] Update App.jsx --- src/App.jsx | 88 ++++++++++++++++++----------------------------------- 1 file changed, 29 insertions(+), 59 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 3760e3a..435176a 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,30 +1,34 @@ import React, { useState } from 'react'; import Login from './Login.jsx'; import Sobre from './Sobre.jsx'; +import Cursos from './Cursos.jsx'; function App() { const [paginaAtual, setPaginaAtual] = useState('home'); - // Novo estado para guardar as informações do utilizador const [usuarioLogado, setUsuarioLogado] = useState(null); - // Função para limpar o utilizador e voltar ao estado deslogado - const fazerLogout = () => { - setUsuarioLogado(null); - }; + const fazerLogout = () => setUsuarioLogado(null); + const irPara = (p) => setPaginaAtual(p); + // Renderização Condicional de Telas Inteiras if (paginaAtual === 'login') { return ( setPaginaAtual('home')} - // Esta função recebe os dados do Login.jsx e guarda no App.jsx - aoLogarSucesso={(dadosDoUsuario) => { - setUsuarioLogado(dadosDoUsuario); - setPaginaAtual('home'); // Volta para a home automaticamente - }} + voltar={() => irPara('home')} + aoLogarSucesso={(dados) => { setUsuarioLogado(dados); irPara('home'); }} /> ); } + if (paginaAtual === 'sobre') { + return irPara('home')} />; + } + + if (paginaAtual === 'cursos') { + return irPara('home')} usuarioLogado={usuarioLogado} />; + } + + // Tela Home (Padrão) return (
@@ -32,30 +36,18 @@ function App() {
CraftCode
@@ -65,48 +57,26 @@ function App() {

Domine a arte do código

Aprenda programação com projetos práticos e evolua sua carreira tech.

- - {/* Se o utilizador já estiver logado, podemos mudar o texto do botão principal também */} - {usuarioLogado ? ( - - ) : ( - - )} +
-

Cursos Populares

+

Destaques

Lógica de Programação

Fundamentos essenciais para iniciantes.

- Ver detalhes → -
-
- -
-
-
-

Frontend Moderno

-

HTML, CSS e JavaScript avançado.

- Ver detalhes → -
-
- -
From 7809cdbaba2f7508e44cc310866a5d2e72ae6906 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Estev=C3=A3o?= Date: Thu, 19 Mar 2026 00:32:45 -0300 Subject: [PATCH 13/13] Add styles for cursos page and navigation links --- src/style.css | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/src/style.css b/src/style.css index 8ce74cd..4a49a57 100644 --- a/src/style.css +++ b/src/style.css @@ -368,3 +368,36 @@ footer { text-decoration: underline; color: var(--primary-hover); } + +/* Adicione ao final do seu style.css atual */ + +.cursos-page { + min-height: 100vh; +} + +.btn-back { + background: transparent; + border: 1px solid #444; + color: var(--text-gray); + padding: 8px 16px; + border-radius: 6px; + cursor: pointer; + transition: 0.3s; +} + +.btn-back:hover { + color: var(--primary-color); + border-color: var(--primary-color); +} + +/* Melhoria visual para os textos das páginas internas */ +.hero-mini h1 { + font-size: 2.5rem; + margin-top: 20px; + color: white; +} + +/* Garantir que os links de navegação não recarreguem a página */ +.nav-links a { + cursor: pointer; +}