Skip to content

Commit

Permalink
Merge branch 'dev' into feat(#57)/tailwind_BarraPesquisa
Browse files Browse the repository at this point in the history
  • Loading branch information
@TiagoTeixeira-2005
TiagoTeixeira-2005 authored Jan 13, 2025
2 parents 9cb2ee3 + 1b9a8ad commit 1b4b5dd
Show file tree
Hide file tree
Showing 18 changed files with 350 additions and 325 deletions.
24 changes: 12 additions & 12 deletions client/src/components/CardGastos/CardGastos.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
import React from 'react';
import './CardGastos.css';


function SobreNos() {
function CardGastos() {
return (
<div className="content-block">
<h2 className="title_box">Título</h2>
<div className='data_valor'>
<p className="value_box">data: dd/mm/aaaa</p>
<p className="value_box">valor: R$0.000,00</p>
<div className="bg-[#112632] rounded-none shadow-[0_0.25rem_0.5rem_rgba(0,0,0,0.1)] p-[1.25rem] text-center max-h-[25%] my-[1.25rem] max-w-[21.875rem] w-full 1008:max-w-[30%] 1300:w-[400px]">
<h2 className="text-xl mb-2.5 text-white">Título</h2>
<div className="flex justify-between items-center gap-2">
<p className="text-base text-white mb-[0.9375rem]">data: dd/mm/aaaa</p>
<p className="text-base text-white mb-[0.9375rem]">valor: R$0.000,00</p>
</div>
<div className="linha_box"></div>
<p className="content_box">
<div className="w-full h-[0.0625rem] bg-[#dcdcdc] mb-4"></div>
<p className="text-sm text-white mb-4 text-justify">
Informações sobre os gastos -- Informações sobre os gastos -- Informações sobre os gastos -- Informações sobre os gastos -- Informações sobre os gastos
</p>
<button className="btn_box">Ver Mais</button>
<button className="bg-[#EFEFEF] text-black text-base border-none rounded-full py-[0.3125rem] px-[4.375rem] cursor-pointer hover:underline">
Ver Mais
</button>
</div>
);
}

export default SobreNos;
export default CardGastos;
87 changes: 63 additions & 24 deletions client/src/components/carrossel/carrosel.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,47 +1,86 @@
import React from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import Carousel from 'react-bootstrap/Carousel';
import './carroselStyle.css';

export default function Carrossel() {
const imagens = [
{ src: '/assets/ponta_alagoas.png', alt: 'ponta_alagoas',
texto: 'O que são gastos públicos?',corpo:"É o processo pelo qual a Administração Pública gerencia e aloca recursos financeiros para cumprir suas responsabilidades. Em outras palavras, os gastos públicos representam como o governo investe os recursos arrecadados em áreas essenciais, como saúde, educação, segurança e infraestrutura." ,
transcicao:"" },
{ src: '/assets/gastos.png', alt: 'gastos',
texto: 'Texto sobre a imagem',corpo:"texto de explicação",
transcicao:"" },
{ src: '/assets/monitoramento.png', alt: 'monitoramento',
texto: 'Texto sobre a imagem',corpo:"texto de explicação",
transcicao:"" },
{ src: '/assets/grupo.png', alt: 'grupo',
texto: 'Texto sobre a imagem',corpo:"texto de explicação",
transcicao:"" },
{
src: '/assets/ponta_alagoas.png', alt: 'ponta_alagoas',
texto: 'O que são gastos públicos?', corpo:"É o processo pelo qual a Administração Pública gerencia e aloca recursos financeiros para cumprir suas responsabilidades. Em outras palavras, os gastos públicos representam como o governo investe os recursos arrecadados em áreas essenciais, como saúde, educação, segurança e infraestrutura." ,
transcicao:""
},
{
src: '/assets/gastos.png', alt: 'gastos',
texto: 'Texto sobre a imagem', corpo:"texto de explicação",
transcicao:""
},
{
src: '/assets/monitoramento.png', alt: 'monitoramento',
texto: 'Texto sobre a imagem', corpo:"texto de explicação",
transcicao:""
},
{
src: '/assets/grupo.png', alt: 'grupo',
texto: 'Texto sobre a imagem', corpo:"texto de explicação",
transcicao:""
},
];

return (
<div className="carrossel-container" >
<div className="relative mx-auto px-4 mt-10 mb-10 w-[90%] max-w-[60rem]">
<Carousel fade>
{imagens.map((imagem, index) => (
<Carousel.Item key={index}>
<div className="carousel-item-container" >
<div className="relative w-full h-[20rem]">
<img
src={imagem.src}
alt={imagem.alt}
className="carousel-item-image"/>
<div className="carousel-item-transcicao">
{imagem.transcicao}
</div>
<div className="carousel-item-text">
{imagem.texto}
</div>
<div className="carousel-item-body">
{imagem.corpo}
className="w-full h-full object-cover"
/>
<div className="absolute bottom-0 left-0 w-full h-[15%] bg-[#112632]"></div>
<div
className="absolute bottom-[15%] left-0 w-full h-[100%]"
style={{
background: 'linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%)'
}}
></div>
<div className="absolute bottom-[15%] left-0 p-[2.5%] w-full ">
<div className="text-2xl font-bold text-black">
{imagem.texto}
</div>
<div className="mt-2 text-m">
{imagem.corpo}
</div>
</div>
</div>
</Carousel.Item>
))}
</Carousel>
<style>{`
.carousel-control-prev, .carousel-control-next {
position: absolute;
bottom: 0.5rem;
top: auto;
z-index: 10;
}
.carousel-control-prev {
left: 0.5rem;
}
.carousel-control-next {
right: 0.5rem;
}
@media (max-width: 800px) {
.carousel-control-prev, .carousel-control-next {
width: 1.8rem;
height: 1.8rem;
}
}
`}</style>
</div>
);
}
122 changes: 0 additions & 122 deletions client/src/components/carrossel/carroselStyle.css
View file

This file was deleted.

45 changes: 0 additions & 45 deletions client/src/pages/Gastos/Gastos.css
View file

This file was deleted.

59 changes: 34 additions & 25 deletions client/src/pages/Gastos/Gastos.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,34 +1,43 @@
import React from 'react';
import Header from '../../components/Header/Header';
import Footer from '../../components/Footer/Footer';
import './Gastos.css';

function Gastos() {
return (
<div>
<Header/>
<div className="Gastos">
<div>
<h1>O que são Gastos públicos ?</h1>
<p>
Gastos públicos referem-se ao dinheiro que o governo utiliza para financiar as suas atividades, como a prestação de serviços públicos (saúde, educação, segurança), infraestrutura, investimentos em projetos sociais e o pagamento de dívidas.
Esses gastos são realizados com recursos obtidos por meio da arrecadação de impostos, taxas e contribuições, e são essenciais para garantir o funcionamento do Estado e o bem-estar da sociedade.
</p>
</div>
<div>
<h1>Pontos Importantes</h1>
<ul>
<li><strong>Transparência:</strong> A população deve exigir clareza na gestão dos recursos públicos para garantir eficiência e evitar desperdícios.</li>
<li><strong>Impostos:</strong> Os impostos pagos pela sociedade financiam os serviços públicos, por isso, é importante entender como o governo utiliza esse dinheiro.</li>
<li><strong>Orçamento e Prioridades:</strong> O governo define suas prioridades no orçamento, e é essencial que a população compreenda onde o dinheiro será investido.</li>
<li><strong>Dívidas públicas:</strong> Parte dos gastos é destinada ao pagamento de dívidas, o que pode impactar outras áreas e políticas fiscais.</li>
<li><strong>Participação cidadã:</strong> A população pode influenciar nas decisões sobre o uso dos recursos públicos, garantindo um uso responsável e eficaz do dinheiro arrecadado.</li>
</ul>
</div>
<div>
<Header />
<main className="flex flex-col items-center justify-start p-5 bg-white my-5 text-left">
<section className="w-full max-w-4xl text-center">
<h1 className="text-4xl mb-5">O que são Gastos públicos?</h1>
<p className="text-lg leading-7 mb-3 max-w-4xl w-full">
Gastos públicos referem-se ao dinheiro que o governo utiliza para financiar as suas atividades, como a prestação de serviços públicos (saúde, educação, segurança), infraestrutura, investimentos em projetos sociais e o pagamento de dívidas.
Esses gastos são realizados com recursos obtidos por meio da arrecadação de impostos, taxas e contribuições, e são essenciais para garantir o funcionamento do Estado e o bem-estar da sociedade.
</p>
</section>
<section className="w-full max-w-4xl text-center">
<h1 className="text-4xl mb-5">Pontos Importantes</h1>
<ul className="list-disc text-lg leading-7 text-left mx-auto mb-4 w-auto">
<li className="mb-3 text-black">
<strong>Transparência:</strong> A população deve exigir clareza na gestão dos recursos públicos para garantir eficiência e evitar desperdícios.
</li>
<li className="mb-3 text-black">
<strong>Impostos:</strong> Os impostos pagos pela sociedade financiam os serviços públicos, por isso, é importante entender como o governo utiliza esse dinheiro.
</li>
<li className="mb-3 text-black">
<strong>Orçamento e Prioridades:</strong> O governo define suas prioridades no orçamento, e é essencial que a população compreenda onde o dinheiro será investido.
</li>
<li className="mb-3 text-black">
<strong>Dívidas públicas:</strong> Parte dos gastos é destinada ao pagamento de dívidas, o que pode impactar outras áreas e políticas fiscais.
</li>
<li className="mb-3 text-black">
<strong>Participação cidadã:</strong> A população pode influenciar nas decisões sobre o uso dos recursos públicos, garantindo um uso responsável e eficaz do dinheiro arrecadado.
</li>
</ul>
</section>
</main>
<Footer />
</div>
<Footer/>
</div>
);
}
}

export default Gastos;
export default Gastos;
Loading

0 comments on commit 1b4b5dd

Please sign in to comment.