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; diff --git a/index.html b/index.html index 557bd6c..45cda91 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,6 @@ CraftCode -
- +
diff --git a/src/App.jsx b/src/App.jsx index 57d23fb..435176a 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,67 +1,94 @@ -import React, { useState } from 'react' -import Login from './Login.jsx' +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'); + const [usuarioLogado, setUsuarioLogado] = useState(null); + const fazerLogout = () => setUsuarioLogado(null); + const irPara = (p) => setPaginaAtual(p); + + // Renderização Condicional de Telas Inteiras if (paginaAtual === 'login') { - return setPaginaAtual('home')} />; + return ( + 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 ( - <> +
-
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.

+ +
+
+ +
+
+

Destaques

+
+
+
-
-
+
+

© 2026 CraftCode. Todos os direitos reservados.

- + ); } 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; diff --git a/src/Login.jsx b/src/Login.jsx new file mode 100644 index 0000000..507393f --- /dev/null +++ b/src/Login.jsx @@ -0,0 +1,123 @@ +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(''); + }; + + return ( +
+
+
+ + +

{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}

} + +

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

+
+
+
+ ); +} + +export default Login; 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; 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( - + , ) diff --git a/src/style.css b/src/style.css index 27e54ea..4a49a57 100644 --- a/src/style.css +++ b/src/style.css @@ -1,155 +1,403 @@ -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); +} + +/* 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; }