Feature: Equipa - Adição de cards e organograma da coordenação

package.json

@@ -10,7 +10,15 @@
   },
   "dependencies": {
     "@astrojs/react": "^4.3.1",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/material": "^7.3.2",
+    "@shadcn/ui": "^0.0.4",
     "astro": "^5.13.9",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.544.0",
+    "primeicons": "^7.0.0",
+    "primereact": "^10.9.7",
     "react-hot-toast": "^2.6.0",
     "react-icons": "^5.5.0",
     "tailwindcss": "^3.4.17"

src/components/Card/MeuCard.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { FaLaptopCode, FaPenFancy, FaChartLine, FaPalette } from "react-icons/fa";
+
+const departamentos = [
+  {
+    title: "Departamento de Programação & Suporte Técnico",
+    icon: <FaLaptopCode size={30} />,
+    link: "#programacao",
+  },
+  {
+    title: "Departamento de Redação & Revisão Textual",
+    icon: <FaPenFancy size={30} />,
+    link: "#redacao",
+  },
+  {
+    title: "Departamento de Social Media & Marketing",
+    icon: <FaChartLine size={30} />,
+    link: "#marketing",
+  },
+  {
+    title: "Departamento de Design & Imagem",
+    icon: <FaPalette size={30} />,
+    link: "#design",
+  },
+];
+
+export default function CardDepartamentos() {
+  return (
+    <div className="max-w-6xl mx-auto px-4 py-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
+      {departamentos.map((dep, index) => (
+        <a
+          key={index}
+          href={dep.link}
+          className="flex flex-col items-center p-6 bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 ease-in-out text-center transform hover:scale-105 cursor-pointer">
+
+          <div className="text-indigo-500 mb-4">{dep.icon}</div>
+          <h3 className="text-lg font-semibold">{dep.title}</h3>
+        </a>
+      ))}
+    </div>
+  );
+}

src/components/Equipa/CardMembros.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+
+interface CardMembrosProps {
+  title: string;
+  description: string;
+  bio?: string;
+  imageUrl?: string;
+}
+
+const CardMembros: React.FC<CardMembrosProps> = ({ title, description, bio, imageUrl }) => {
+  return (
+    <div className="group bg-white rounded-2xl shadow-md hover:shadow-lg transition-all duration-300 border border-gray-200 overflow-hidden">
+      <div className="p-6 flex flex-col items-center">
+
+        {imageUrl && (
+          <div className="w-full max-w-xs h-48 mb-4 overflow-hidden rounded-lg">
+            <img
+              className="w-full h-full object-cover object-center transition-transform duration-300 group-hover:scale-105"
+              src={imageUrl}
+              alt={title}
+            />
+            <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+          </div>
+        )}
+
+        <div className="text-center space-y-3">
+          <h3 className="font-bold text-xl">{title}</h3>
+          <div className="inline-block px-3 py-1 bg-indigo-100 text-indigo-700 text-sm font-medium rounded-full border border-indigo-200">
+            {description}
+          </div>
+          {bio && (
+            <p className="text-gray-700 text-sm leading-relaxed mt-2">
+              {bio}
+            </p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CardMembros;

src/components/Equipa/Departamentos.tsx

@@ -0,0 +1,14 @@
+import MeuCard from "../Card/MeuCard";
+export default function Departamentos() {
+  return (
+    <main>
+      <div className="bg-[#4F46E5] text-white py-6 px-8 rounded-2xl text-center mb-6">
+        <h2 className="text-2xl font-bold">Departamentos</h2>
+
+      </div>
+      <div>
+        <MeuCard />
+      </div>
+    </main>
+  );
+}

src/components/Equipa/Equipa.tsx

@@ -0,0 +1,36 @@
+"use client"
+import Organograma from "./Organograma";
+import Membros from "./Membros";
+import Departamentos from "./Departamentos";
+
+export default function Equipa() {
+  return (
+    <main className="min-h-screen p-6 flex flex-col items-center gap-12 pb-12">
+      {/* Seção de Introdução */}
+      <section className="max-w-3xl w-full px-6 text-center">
+        <h1 className="text-3xl font-bold mb-3">Estrutura Organizacional</h1>
+
+        <p>
+          A CDH é uma estrutura organizada e viva, formada por jovens
+          apaixonados por inovação, educação e inclusão. Por trás de cada
+          projeto, iniciativa e evento, está uma força viva, em vários
+          departamentos, que sob unidade de propósito faz tudo acontecer.
+        </p>
+      </section>
+
+      {/* Seção do Organograma */}
+      <section className="w-full flex justify-center px-6">
+        <Organograma />
+      </section>
+
+      {/* Seção de Membros */}
+      <section className=" w-full px-6 mb-12">
+        <Membros />
+      </section>
+      {/* Seção de Departamentos */}
+      <section className="max-w-3xl w-full px-6">
+        <Departamentos />
+      </section>
+    </main>
+  );
+}

src/components/Equipa/Membros.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+
+const membros = [
+  {
+    title: "Adriano Chilundulo",
+    description: "Offsec e Analista de Sistemas",
+    bio: "Graduado em Análise e Desenvolvimento de Sistemas & Engenharia de Telecomunicações. Envolvido em iniciativas de segurança e formação técnica, com foco em capacitação jovem.",
+    imageUrl: "/img/Adriano.png"
+  },
+  {
+    title: "Cirilo Canganjo",
+    description: "Desenvolvedor Web",
+    bio: "Graduado em Engenharia Informática CEO da Empresa CLC Tecnólogias, LDA. Atua em desenvolvimento web e projetos de integração entre talento local e mercado.",
+    imageUrl: "/img/cirilo.png"
+  },
+  {
+    title: "Mariano Quessongo",
+    description: "Desenvolvedor de Software",
+    bio: "Desenvolvedor com foco em soluções mobile e backend, comprometido com formação técnica e desenvolvimento de soluções locais",
+    imageUrl: "/img/Mariano.png"
+  }
+];
+
+const Membros: React.FC = () => {
+  return (
+    <div className="max-w-7xl mx-auto px-4 py-8">
+      {/* Header */}
+      <div className="text-center mb-12">
+        <div className="inline-block  py-4 px-8 rounded-2xl shadow-lg">
+          <h2 className="text-2xl md:text-3xl font-bold">Membros da Coordenação Geral</h2>
+        </div>
+      </div>
+
+      {/* Grid de Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
+        {membros.map((membro, index) => (
+          <div
+            key={index}
+            className="bg-white rounded-2xl shadow-md hover:shadow-xl transition-all duration-300 border border-gray-200 overflow-hidden group"
+          >
+            <div className="flex flex-col items-center p-6">
+              {/* Imagem */}
+              <div className="relative w-full max-w-[200px] sm:max-w-[240px] aspect-square mb-4 sm:mb-6 overflow-hidden rounded-xl">
+                <img
+                  src={membro.imageUrl}
+                  alt={membro.title}
+                  className="w-full h-full object-cover object-center transition-transform duration-300 group-hover:scale-105"
+                />
+              </div>
+
+              {/* Conteúdo */}
+              <h3 className="font-bold text-lg sm:text-xl text-gray-900 text-center">
+                {membro.title}
+              </h3>
+
+              <div className="inline-block px-3 py-1 bg-indigo-100 text-indigo-700 text-sm font-medium rounded-full border border-indigo-200 mt-2">
+                {membro.description}
+              </div>
+
+              <p className="text-gray-700 text-sm sm:text-base leading-relaxed text-center mt-3">
+                {membro.bio}
+              </p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Membros;

src/components/Equipa/Organograma.tsx

@@ -0,0 +1,148 @@
+import React from "react";
+
+export default function Organogram() {
+  return (
+    <div className="min-h-screen bg-gradient-to-b from-indigo-50 to-white">
+      <div className="container mx-auto px-6 py-12">
+        {/* Header */}
+        <header className="text-center mb-12">
+          <div className="bg-indigo-600 text-white py-8 px-6 rounded-t-2xl mb-4">
+            <h1 className="text-4xl font-bold mb-2">
+              Diagrama Estrutural da CDH
+            </h1>
+            <p className="text-lg opacity-80">
+              Compreender de maneira visual a estrutura funcional da CDH
+            </p>
+          </div>
+
+          <div className="bg-gray-100 text-gray-800 py-4 px-6 rounded-b-2xl shadow-lg">
+            <p className="text-lg font-semibold">DESDE 27 DE JULHO | 2024</p>
+          </div>
+        </header>
+
+        {/* Estrutura */}
+        <div className="space-y-8 bg-gray-50 p-8 rounded-2xl">
+          {/* Administração */}
+          <div className="flex justify-center">
+            <div className="bg-[#545454] text-white px-8 py-4 rounded-full font-semibold text-lg shadow-lg">
+              ADMINISTRAÇÃO
+            </div>
+          </div>
+
+          {/* Linha */}
+          <div className="flex justify-center">
+            <div className="w-px h-12 bg-gray-400"></div>
+          </div>
+
+          {/* Coordenadores */}
+          <div className="flex justify-center items-center gap-8">
+            <div className="bg-[#545454] text-white px-6 py-3 rounded-full font-semibold shadow-lg">
+              COORDENADOR EXECUTIVO
+            </div>
+            <div className="w-16 h-px bg-gray-400"></div>
+            <div className="bg-[#545454] text-white px-6 py-3 rounded-full font-semibold shadow-lg text-center">
+              VICE-COORDENADOR EXECUTIVO
+            </div>
+          </div>
+
+          {/* Linha */}
+          <div className="flex justify-center">
+            <div className="relative">
+              <div className="w-px h-8 bg-gray-400"></div>
+              <div className="absolute top-8 left-0 w-64 h-px bg-gray-400 transform -translate-x-32"></div>
+              <div className="absolute top-8 left-0 w-px h-8 bg-gray-400 transform -translate-x-32"></div>
+              <div className="absolute top-8 right-0 w-px h-8 bg-gray-400 transform translate-x-32"></div>
+            </div>
+          </div>
+
+          {/* Core Team */}
+          <div className="flex justify-center">
+            <div className="bg-[#545454] text-white px-8 py-4 rounded-full font-semibold text-lg shadow-lg">
+              CORE TEAM
+            </div>
+          </div>
+
+          {/* Linha */}
+          <div className="flex justify-center">
+            <div className="w-px h-12 bg-gray-400"></div>
+          </div>
+
+          {/* Departamentos */}
+          <div className="grid grid-cols-2 lg:grid-cols-4 gap-8 max-w-6xl mx-auto">
+            {/* Redação */}
+            <div className="space-y-4">
+              <div className="bg-[#EF615D] text-white px-6 py-3 rounded-full font-semibold text-center shadow-lg transition-transform hover:scale-105">
+                REDAÇÃO
+              </div>
+              <div className="space-y-2">
+                <div className="bg-gray-700 text-white px-4 py-2 rounded-full text-sm text-center">
+                  Secretário
+                </div>
+                <div className="bg-gray-600 text-white px-4 py-2 rounded-full text-sm text-center">
+                  Vice-Secretário
+                </div>
+                <div className="bg-gray-500 text-white px-4 py-2 rounded-full text-sm text-center">
+                  Pessoal
+                </div>
+              </div>
+            </div>
+
+            {/* Imagem */}
+            <div className="space-y-4">
+              <div className="bg-[#EF615D] text-white px-6 py-3 rounded-full font-semibold text-center shadow-lg transition-transform hover:scale-105">
+                IMAGEM
+              </div>
+              <div className="space-y-2">
+                <div className="bg-gray-700 text-white px-4 py-2 rounded-full text-sm text-center">
+                  Secretário
+                </div>
+                <div className="bg-gray-600 text-white px-4 py-2 rounded-full text-sm text-center">
+                  Vice-Secretário
+                </div>
+                <div className="bg-gray-500 text-white px-4 py-2 rounded-full text-sm text-center">
+                  Pessoal
+                </div>
+              </div>
+            </div>
+
+            {/* Suporte */}
+            <div className="space-y-4">
+              <div className="bg-[#EF615D] text-white px-6 py-3 rounded-full font-semibold text-center shadow-lg transition-transform hover:scale-105">
+                SUPORTE
+              </div>
+              <div className="space-y-2">
+                <div className="bg-gray-700 text-white px-4 py-2 rounded-full text-sm text-center">
+                  Secretário
+                </div>
+                <div className="bg-gray-600 text-white px-4 py-2 rounded-full text-sm text-center">
+                  Vice-Secretário
+                </div>
+                <div className="bg-gray-500 text-white px-4 py-2 rounded-full text-sm text-center">
+                  Pessoal
+                </div>
+              </div>
+            </div>
+
+            {/* Marketing */}
+            <div className="space-y-4">
+              <div className="bg-[#EF615D] text-white px-6 py-3 rounded-full font-semibold text-center shadow-lg transition-transform hover:scale-105">
+                MARKETING
+              </div>
+              <div className="space-y-2">
+                <div className="bg-gray-700 text-white px-4 py-2 rounded-full text-sm text-center">
+                  Secretário
+                </div>
+                <div className="bg-gray-600 text-white px-4 py-2 rounded-full text-sm text-center">
+                  Vice-Secretário
+                </div>
+                <div className="bg-gray-500 text-white px-4 py-2 rounded-full text-sm text-center">
+                  Pessoal
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/layouts/Header.astro

@@ -4,6 +4,7 @@ import Logo from "../components/Logo/Logo.astro";
 const links = [
   { href: "/", label: "Início" },
   { href: "/quem-somos", label: "Quem Somos" },
+  { href: "/equipa", label: "Equipa" },
   { href:"/blog", label: "Blog"},
   { href: "/contatos", label: "Contato" },
 ];

src/pages/equipa.astro

@@ -0,0 +1,12 @@
+---
+//componente
+import Layout from '../layouts/Layout.astro';
+import Equipa from '../components/Equipa/Equipa';
+
+---
+
+<Layout>
+  <Equipa  />
+
+
+</Layout>