🌟 SPF 2025 — Semana Paulo Freire

---

📚 Sobre o Projeto

O Site SPF foi desenvolvido exclusivamente para a Semana Paulo Freire, realizada pela
ETEC Maria Cristina Medeiros, trazendo uma experiência moderna, interativa e temática
para os alunos e visitantes.

Este site inclui:

• 🎭 Identidade visual baseada em Mitologias
• 🧮 Ranking dinâmico de equipes
• 🚀 Tela inicial animada com efeitos visuais
• 🔐 Área administrativa segura
• 📅 Contagem regressiva para o evento oficial
• 🎨 Design moderno com Material UI + animações framer-motion

---

🧩 Estrutura do Projeto

Site-Spf/
 ├── public/
 ├── src/
 │   ├── Assets/
 │   ├── Components/
 │   ├── Hook/
 │   ├── Pages/
 │   ├── Routes/
 │   ├── App.tsx
 │   └── main.tsx
 ├── package.json
 └── tsconfig.json

---

⚙️ Tecnologias Utilizadas

💻 Frontend

• React + TypeScript
• Material UI
• Framer Motion
• Axios
• React Router DOM
• Context API (autenticação)
• Styled Components

📡 Backend (consumido pelo site)

• API externa para:
  • Pontuação das equipes
  • Sistema de login da administração

---

▶️ Como Rodar o Projeto

1️⃣ Clonar o repositório

git clone https://github.com/EnzoCaetano015/Site-Spf
cd Site-Spf

2️⃣ Instalar dependências

npm install

3️⃣ Rodar o projeto

npm run dev

---

🔐 Área Administrativa

A seção Admin permite:

• Editar pontuações das equipes
• Atualizar dados do ranking
• Acesso protegido via login

---

🎨 Identidade Visual – Mitologias

Os ícones e elementos temáticos são inspirados no tema
“Ecos do Passado, Vozes do Presente”, trazendo símbolos gregos, nórdicos e egípcios,
representados nos assets do projeto.

---

🧠 Hooks Importantes

useAuth

Gerencia login e persistência de sessão:

setCredentials({ username, password });

useTeams

Consulta e ordena equipes por pontuação:

const sortedTeams = useMemo(() => 
  [...teams].sort((a, b) => b.pontos - a.pontos), [teams]
);

---

❤️ Agradecimentos

Projeto desenvolvido para celebrar Paulo Freire, seus ideais e a importância
da educação transformadora.

Realização: ETEC Maria Cristina Medeiros

---