📝 Pesquisa estilizada e Tela Sobre

src/components/Charts/GraphComponent.tsx

@@ -24,7 +24,7 @@ const GraphComponent: React.FC<GraphProps> = ({ municipio }) => {
         const data: MunicipioData[] = await response.json();
 
         const chartOptions = {
-          colors: ['#222831'], 
+          colors: ['#410c0c'], 
           xaxis: {
             categories: data.map((item) => item.month),
           },

src/components/Layout/FooterSobre.tsx

@@ -0,0 +1,22 @@
+import Image from "next/image";
+import Link from "next/link";
+
+export const FooterSobre = () => {
+  return (
+    <div className="bg-[#410c0c] h-32 flex items-center justify-between p-4" >
+      <div className="flex items-center">
+        {/* Logo da Aplicação */}
+        <Image
+          alt="logo-unb"
+          width={240}
+          height={240}
+          src="https://i.pinimg.com/originals/84/a7/86/84a786798c453d6a536f31cba73e5409.png"
+        />
+      </div>
+      <div className="flex space-x-4">
+      <p className="text-white font-bold mt-4 mb-4">O projeto LicitaX é uma iniciativa desenvolvida por alunos da Universidade de Brasília - UnB como parte da disciplina de Métodos de Desenvolvimento de Software. </p>
+      <p className="text-white tahoma mt-4 mb-4">Todo o código produzido é aberto e distribuído de forma livre no repositório (unb-mds/2023-2-Squad07).</p>
+      </div>
+    </div>
+  );
+}

src/components/Layout/index.ts

@@ -1,3 +1,4 @@
 export { Footer } from "./Footer";
 export { Navbar } from "./Navbar";
-export { HeadCustom as Head } from "./Head";
+export { HeadCustom as Head } from "./Head";
+export { FooterSobre } from "./FooterSobre";

src/components/Pages/Home.tsx

@@ -35,7 +35,7 @@ export const Home: React.FC<TitleProps> = ({ ano }) => {
 
   return (
     <div className="flex">
-      <div className="bg-[#410c0c] w-80 h-screen p-4 text-white">
+      <div className="bg-[#410c0c] w-80 p-4 text-white">
         <p className="text-white font-bold text-2xl mt-4 mb-4">Confira a quantidade de avisos de licitação nos municípios do Ceará.</p>
         <p className="text-white mt-4">Este projeto foi realizado pelo Squad 07 durante o segundo semestre de 2023 na disciplina Métodos de Desenvolvimento de Software da Universidade de Brasília.</p>
         <Image

src/components/Pages/Pesquisar.tsx

@@ -8,24 +8,23 @@ export const Pesquisar = () => {
   const [dataInicial, setDataInicial] = useState("");
   const [dataFinal, setDataFinal] = useState("");
   const [resultados, setResultados] = useState<{ total_gazettes: number, gazettes: Array<any> } | null>(null);
+  const [currentPage, setCurrentPage] = useState(1);
 
   const handleSearch = async () => {
     try {
-      const apiUrl = `https://queridodiario.ok.org.br/api/gazettes?querystring=${tema}&territory_ids=${codigoIBGEMunicipio}&published_since=${dataInicial}&published_until=${dataFinal}`;
-
+      const pageSize = 10; // Número de resultados por página
+      const apiUrl = `https://queridodiario.ok.org.br/api/gazettes?querystring=${tema}&territory_ids=${codigoIBGEMunicipio}&published_since=${dataInicial}&published_until=${dataFinal}&size=${pageSize}&offset=${(currentPage - 1) * pageSize}`;
+
       console.log("API URL:", apiUrl);
-
+  
       const response = await axios.get(apiUrl);
-
+  
       if (response.status === 200) {
         const data = response.data;
         console.log("API Response:", data);
-
+  
         // Atualiza o estado diretamente com a resposta da API
         setResultados(data);
-
-        // Remove o log abaixo, pois o estado pode não ser atualizado imediatamente
-        // console.log("Novo estado resultados:", resultados);
       } else {
         throw new Error(`Erro na resposta da API: ${response.statusText}`);
       }
@@ -34,9 +33,17 @@ export const Pesquisar = () => {
     }
   };
 
+  useEffect(() => {
+    handleSearch();
+  }, [currentPage]); // Dispara a pesquisa quando a currentPage muda
+
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+  };
+
   return (
     <div className="flex">
-      <div className="bg-[#410c0c] w-80 h-screen p-4 text-white">
+      <div className="bg-[#410c0c] w-80 p-4 text-white">
         <p className="text-white font-bold text-2xl mt-4 mb-4">
           Em que você tem interesse?
         </p>
@@ -100,19 +107,35 @@ export const Pesquisar = () => {
         </button>
         {resultados && resultados.gazettes && (
           <div>
-            <p>O assunto &quot;{tema}&quot; foi citado {resultados.total_gazettes} vezes no período:</p>
+            <p>
+              O assunto &quot;{tema}&quot; foi citado {resultados.total_gazettes} vezes no período:
+            </p>
             {resultados.gazettes.map((excerto, index) => (
               <div key={index} className="border p-4 mt-4">
                 <p>Data: {excerto.date}</p>
                 <p>Edição: {excerto.edition}</p>
                 <p>Excerto:</p>
                 <pre>{excerto.excerpts.join("\n")}</pre>
                 <div className="mt-2">
-                  <a href={excerto.url} target="_blank" rel="noopener noreferrer" className="text-blue-500 mr-4">Baixar PDF</a>
-                  <a href={excerto.txt_url} target="_blank" rel="noopener noreferrer" className="text-blue-500">Baixar TXT</a>
+                  <a href={excerto.url} target="_blank" rel="noopener noreferrer" className="text-red-900 mr-4">
+                    Baixar PDF
+                  </a>
+                  <a href={excerto.txt_url} target="_blank" rel="noopener noreferrer" className="text-red-900">
+                    Baixar TXT
+                  </a>
                 </div>
               </div>
             ))}
+            {/* Paginação */}
+            {resultados.total_gazettes > 10 && (
+              <div className="mt-4">
+                {Array.from({ length: Math.ceil(resultados.total_gazettes / 10) }, (_, i) => i + 1).map((page) => (
+                  <button key={page} onClick={() => handlePageChange(page)} className="mx-2 p-2 bg-[#d5d4d8] rounded">
+                    {page}
+                  </button>
+                ))}
+              </div>
+            )}
           </div>
         )}
         {resultados && resultados.gazettes && resultados.gazettes.length === 0 && (

src/components/Pages/Sobre.tsx

@@ -1,46 +1,150 @@
-import Image from "next/image";
+import Link from 'next/link';
+import Image from 'next/image';
 
-export const Sobre = () => {
-    return (
-        <div className="flex">
-            <div className="bg-[#410c0c]  w-80 h-screen p-4 text-white"> 
-                <p className="text-white font-bold text-2xl mt-4 mb-4">Confira a quantidade de avisos de licitação nos municípios do Ceará.</p>
-                <p className="text-white mt-4">Este projeto foi realizado pelo Squad 07 durante o segundo semestre de 2023 na disciplina Métodos de Desenvolvimento de Software da Universidade de Brasília.</p>
-                {/* Logo da Universidade com dois espaços */}
-                <Image
-                    alt="logo-unb"
-                    width={240}
-                    height={240}
-                    src="https://i.pinimg.com/originals/84/a7/86/84a786798c453d6a536f31cba73e5409.png"
+interface MemberProps {
+    name: string;
+    role: string;
+    githubUsername: string;
+}
+
+const Member: React.FC<MemberProps> = ({ name, role, githubUsername }) => (
+    <div className="flex items-center gap-6">
+        <a href={`https://github.com/${githubUsername}`} target="_blank" rel="noopener noreferrer">
+            <div className="flex-shrink-0">
+                <img
+                    src={`https://github.com/${githubUsername}.png?size=64`}
+                    alt={`Foto de ${name}`}
+                    className="object-cover w-16 h-16 rounded-full"
                 />
             </div>
-            <div>
-                <h1 className="p-20 text-2xl 2xl:text-3xl 3xl:text-[2.4375rem]  font-semibold lg:w-[42.93rem] leading-10">Conheça um pouco mais sobre os desenvolvedores do projeto</h1>
-               <section className="p-10 flex flex-col gap-y-6">
-                <p className="">
-                    <strong>José André Rabelo:  </strong>
-                      discente do curso de Engenharia de Software da UnB campus FGA
-                </p>
-                <p className=" font-normal">
-                    <strong>Giovana Barbosa da Silva:  </strong>
-                      discente do curso de Engenharia de Software da UnB campus FGA
-                </p>
-                <p className="font-normal">
-                    <strong>Samara Leticia Alves:  </strong>
-                      discente do curso de Engenharia de Software da UnB campus FGA
+        </a>
+        <div>
+            <Link href={`https://github.com/${githubUsername}`} passHref>
+                <p className="font-bold cursor-pointer">
+                    {name}
                 </p>
-                <p className="font-normal">
-                    <strong>Julia Takaki Neves:  </strong>
-                      discente do curso de Engenharia de Software da UnB campus FGA
+            </Link>
+            <p className="font-normal">{role}</p>
+        </div>
+    </div>
+);
+
+export const Sobre = () => {
+    const members = [
+        {
+            name: "José André Rabelo",
+            role: "Product Owner",
+            githubUsername: "joseandre25",
+        },
+        {
+            name: "Giovana Barbosa da Silva",
+            role: "Scrum Master",
+            githubUsername: "gio221",
+        },
+        {
+            name: "Samara Leticia Alves",
+            role: "Desenvolvedora",
+            githubUsername: "samarawwleticia",
+        },
+        {
+            name: "Julia Takaki Neves",
+            role: "Desenvolvedora",
+            githubUsername: "juliatakaki",
+        },
+        {
+            name: "Rafael Oliveira Bonach",
+            role: "Arquiteto",
+            githubUsername: "RafaBonach",
+        },
+    ];
+
+    return (
+        <div className="flex justify-center flex-col items-center">
+            <div className="mb-8">
+                <h1 className="p-4 text-2xl font-semibold">
+                    Sobre o LicitaX
+                </h1>
+                <p className="text-gray-700">
+                    O LicitaX é uma plataforma inspirada no{' '}
+                    <a href="https://exoonero.org/" target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:underline">
+                        Exoonero
+                    </a>{' '}
+                    e no{' '}
+                    <a href="https://queridodiario.ok.org.br/" target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:underline">
+                        Querido Diário
+                    </a>.{' '}
+                    O LicitaX foi desenvolvido para simplificar o acesso e a compreensão dos processos de licitação nos municípios associados à APRECE (Associação dos Municípios do Estado do Ceará). Utilizando uma avançada técnica de web scraping com o framework Scrapy, nosso software extrai mensalmente a quantidade de avisos de licitação, oferecendo uma visão consolidada de todas as atividades licitatórias ao longo de 2023.
                 </p>
-                <p className="font-normal">
-                    <strong>Rafael Oliveira Bonach:  </strong>
-                      discente do curso de Engenharia de Software da UnB campus FGA
+
+            </div>
+
+            <div className="flex mb-8 space-x-4">
+                {/* Bloco de recurso 1 */}
+                <div className="flex-shrink-0">
+                    <Image
+                        src="https://i.ibb.co/BBHhPD1/meet.png"
+                        alt="Descrição da imagem 1"
+                        width={100}
+                        height={100}
+                    />
+                </div>
+                <div className="text-left">
+                    <h2 className="text-lg font-semibold mb-2">Avisos de Licitação em Tempo Real</h2>
+                    <p className="text-gray-700">
+                        Obtenha informações atualizadas sobre a quantidade de avisos de licitação em todos os municípios associados à APRECE, mês a mês, de forma clara e acessível.
+                    </p>
+                </div>
+
+                {/* Bloco de recurso 2 */}
+                <div className="flex-shrink-0">
+                    <Image
+                        src="https://i.ibb.co/TPykH50/search.png"
+                        alt="Descrição da imagem 2"
+                        width={100}
+                        height={100}
+                    />
+                </div>
+                <div className="text-left">
+                    <h2 className="text-lg font-semibold mb-2">Pesquisa de Temas Específicos</h2>
+                    <p className="text-gray-700">
+                        Utilize a poderosa funcionalidade de pesquisa do LicitaX para explorar temas específicos em Horizonte-CE e Sobral-CE em determinados períodos. Nosso software, através do Querido Diário, rastreia e recupera citações desses temas nos diários oficiais, tornando as informações facilmente acessíveis.
+                    </p>
+                </div>
+
+                {/* Bloco de recurso 3 */}
+                <div className="flex-shrink-0">
+                    <Image
+                        src="https://i.ibb.co/cF8sCrF/down.png"
+                        alt="Descrição da imagem 3"
+                        width={100}
+                        height={100}
+                    />
+                </div>
+                <div className="text-left">
+                    <h2 className="text-lg font-semibold mb-2">Downloads de Documentos Específicos</h2>
+                    <p className="text-gray-700">
+                        Para maior conveniência, disponibilizamos downloads diretos de documentos específicos, como PDFs dos diários oficiais relacionados aos temas pesquisados.
+                    </p>
+                </div>
+            </div>
+
+            <div>
+                {/* Espaço para o texto adicional ou rodapé */}
+                <p className="text-gray-700">
+                    Explore o LicitaX agora e mergulhe em uma experiência única de acesso simplificado e compreensão aprofundada das atividades licitatórias nos municípios cearenses. Descubra, pesquise e esteja sempre informado com o LicitaX!
                 </p>
-                </section>
             </div>
+
             <div>
+                <h1 className="p-4 text-2xl font-semibold">
+                    Conheça um pouco mais sobre os desenvolvedores do projeto
+                </h1>
+                <section className="p-10 flex gap-y-6">
+                    {members.map((member, index) => (
+                        <Member key={index} {...member} />
+                    ))}
+                </section>
             </div>
         </div>
-    )
-}
+    );
+};

src/pages/sobre.tsx

@@ -1,11 +1,11 @@
-import { Footer, Navbar } from '@/components/Layout';
+import { Footer, FooterSobre, Navbar } from '@/components/Layout';
 import { Sobre } from '@/components/Pages';
 
 const SobrePage = () => (
   <div className="flex flex-col h-screen">
     <Navbar />
     <Sobre />
-    <Footer />
+    <FooterSobre />
   </div>
 );