diff --git a/package-lock.json b/package-lock.json
index 76e3b10..38c638e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,9 +8,11 @@
"name": "cinema-rua-app",
"version": "0.1.0",
"dependencies": {
+ "chart.js": "^4.4.2",
"leaflet": "^1.9.4",
"next": "14.1.0",
"react": "^18.2.0",
+ "react-chartjs-2": "^5.2.0",
"react-dom": "^18.2.0",
"react-leaflet": "^4.2.1",
"react-responsive-carousel": "^3.2.23"
@@ -23,6 +25,11 @@
"typescript": "^5"
}
},
+ "node_modules/@kurkle/color": {
+ "version": "0.3.2",
+ "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz",
+ "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw=="
+ },
"node_modules/@next/env": {
"version": "14.1.0",
"resolved": "https://registry.npmjs.org/@next/env/-/env-14.1.0.tgz",
@@ -267,6 +274,17 @@
}
]
},
+ "node_modules/chart.js": {
+ "version": "4.4.2",
+ "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.2.tgz",
+ "integrity": "sha512-6GD7iKwFpP5kbSD4MeRRRlTnQvxfQREy36uEtm1hzHzcOqwWx0YEHuspuoNlslu+nciLIB7fjjsHkUv/FzFcOg==",
+ "dependencies": {
+ "@kurkle/color": "^0.3.0"
+ },
+ "engines": {
+ "pnpm": ">=8"
+ }
+ },
"node_modules/classnames": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
@@ -432,6 +450,15 @@
"node": ">=0.10.0"
}
},
+ "node_modules/react-chartjs-2": {
+ "version": "5.2.0",
+ "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-5.2.0.tgz",
+ "integrity": "sha512-98iN5aguJyVSxp5U3CblRLH67J8gkfyGNbiK3c+l1QI/G4irHMPQw44aEPmjVag+YKTyQ260NcF82GTQ3bdscA==",
+ "peerDependencies": {
+ "chart.js": "^4.1.1",
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+ }
+ },
"node_modules/react-dom": {
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
diff --git a/package.json b/package.json
index 7730e72..222a783 100644
--- a/package.json
+++ b/package.json
@@ -9,9 +9,11 @@
"lint": "next lint"
},
"dependencies": {
+ "chart.js": "^4.4.2",
"leaflet": "^1.9.4",
"next": "14.1.0",
"react": "^18.2.0",
+ "react-chartjs-2": "^5.2.0",
"react-dom": "^18.2.0",
"react-leaflet": "^4.2.1",
"react-responsive-carousel": "^3.2.23"
diff --git a/src/app/favicon.ico b/src/app/favicon.ico
index 718d6fe..b89f3bf 100644
Binary files a/src/app/favicon.ico and b/src/app/favicon.ico differ
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 3bea84b..b2693f4 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -4,8 +4,10 @@ import "./globals.css";
export const metadata: Metadata = {
title: "Cinema de rua",
- description: "Cinema de rua",
- assets: "./images/carousel/carousel-1.png"
+ description: "O projeto busca sensibilizar a população e os governantes sobre a importância de preservar esses locais históricos, não apenas como espaços para assistir a filmes, mas também como símbolos de memória coletiva, arte e diversidade cultural.",
+ openGraph: {
+ images: "./images/carousel/carousel-1.png",
+ },
};
export default function RootLayout({
diff --git a/src/components/Chart/index.tsx b/src/components/Chart/index.tsx
new file mode 100644
index 0000000..fd7c6c1
--- /dev/null
+++ b/src/components/Chart/index.tsx
@@ -0,0 +1,56 @@
+import {
+ Chart as ChartJS,
+ CategoryScale,
+ LinearScale,
+ PointElement,
+ LineElement,
+ Title,
+ Tooltip,
+ Legend,
+} from 'chart.js'
+import { Line } from 'react-chartjs-2'
+
+ChartJS.register(
+ CategoryScale,
+ LinearScale,
+ PointElement,
+ LineElement,
+ Title,
+ Tooltip,
+ Legend
+)
+
+import { data } from "@/data/chart";
+
+import styles from "./styles.module.css";
+import { useEffect, useRef } from 'react';
+
+const options = {
+ plugins: {
+ legend: {
+ display: true,
+ },
+ },
+ scales: {
+ x: {
+ display: false,
+ },
+ y: {
+ display: false,
+ },
+ },
+ elements: {
+ line: {
+ tension: 0.4, // Adiciona uma curvatura na linha
+ },
+ },
+};
+
+
+export default function Chart() {
+ return(
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/Chart/styles.module.css b/src/components/Chart/styles.module.css
new file mode 100644
index 0000000..02d90fb
--- /dev/null
+++ b/src/components/Chart/styles.module.css
@@ -0,0 +1,5 @@
+.container {
+ height: 500px;
+ width: 100%;
+ /* border: 2px solid #2F2012; */
+}
\ No newline at end of file
diff --git a/src/components/SessionAffected/styles.module.css b/src/components/SessionAffected/styles.module.css
index d52581a..9fff037 100644
--- a/src/components/SessionAffected/styles.module.css
+++ b/src/components/SessionAffected/styles.module.css
@@ -1,7 +1,4 @@
.container {
- position: relative;
- top: -150px;
-
padding: 50px 100px;
padding-bottom: 0px !important;
diff --git a/src/components/SessionAffection/styles.module.css b/src/components/SessionAffection/styles.module.css
index 10c6d0d..0b61f28 100644
--- a/src/components/SessionAffection/styles.module.css
+++ b/src/components/SessionAffection/styles.module.css
@@ -1,7 +1,5 @@
.container {
position: relative;
- top: -150px;
-
display: flex;
flex-direction: column;
justify-content: space-between;
diff --git a/src/components/SessionAppreciation/styles.module.css b/src/components/SessionAppreciation/styles.module.css
index ac83d3b..888f660 100644
--- a/src/components/SessionAppreciation/styles.module.css
+++ b/src/components/SessionAppreciation/styles.module.css
@@ -1,7 +1,4 @@
.container {
- position: relative;
- top: -150px;
-
display: flex;
flex-direction: column;
justify-content: space-between;
@@ -19,7 +16,6 @@
.image {
z-index: 1;
position: relative;
- /* top: -150px; */
width: 100%;
}
diff --git a/src/components/SessionDisappearance/styles.module.css b/src/components/SessionDisappearance/styles.module.css
index 4690c42..5b52471 100644
--- a/src/components/SessionDisappearance/styles.module.css
+++ b/src/components/SessionDisappearance/styles.module.css
@@ -1,7 +1,4 @@
.container {
- position: relative;
- top: -150px;
-
display: flex;
flex-direction: column;
justify-content: space-between;
diff --git a/src/components/SessionImportance/index.tsx b/src/components/SessionImportance/index.tsx
index 482e109..3192e37 100644
--- a/src/components/SessionImportance/index.tsx
+++ b/src/components/SessionImportance/index.tsx
@@ -1,5 +1,6 @@
'use client';
+import Chart from "../Chart";
import styles from "./styles.module.css";
export default function SessionImportance() {
@@ -10,6 +11,8 @@ export default function SessionImportance() {
OCUPAÇÃO DO ESPAÇO PÚBLICO PELA ÓTICA DO CINEMA EM RECIFE - CULTURA É RESISTÊNCIA!
+ {/* */}
+
CINEMA DE RUA
e sua importância
diff --git a/src/components/SessionMore/index.tsx b/src/components/SessionMore/index.tsx
index 3fed490..8406ba7 100644
--- a/src/components/SessionMore/index.tsx
+++ b/src/components/SessionMore/index.tsx
@@ -19,8 +19,6 @@ export default function SessionMore() {
};
const observer = new IntersectionObserver(entries => {
- console.log("AQUI")
- console.log(entries)
entries.forEach(entry => {
if (entry.isIntersecting) {
setStartAnimation(true);
diff --git a/src/components/SessionPanorama/styles.module.css b/src/components/SessionPanorama/styles.module.css
index 1456773..c434b2b 100644
--- a/src/components/SessionPanorama/styles.module.css
+++ b/src/components/SessionPanorama/styles.module.css
@@ -1,7 +1,4 @@
.container {
- position: relative;
- top: -150px;
-
display: flex;
flex-direction: column;
justify-content: space-between;
@@ -19,7 +16,6 @@
.image {
z-index: 1;
position: relative;
- /* top: -150px; */
width: 100%;
}
diff --git a/src/components/SessionWhy/styles.module.css b/src/components/SessionWhy/styles.module.css
index 35e5951..c848168 100644
--- a/src/components/SessionWhy/styles.module.css
+++ b/src/components/SessionWhy/styles.module.css
@@ -1,7 +1,4 @@
.container {
- position: relative;
- top: -150px;
-
padding: 50px 100px;
padding-bottom: 0px !important;
diff --git a/src/components/Shared/Quote/index.tsx b/src/components/Shared/Quote/index.tsx
index d606249..a1388e3 100644
--- a/src/components/Shared/Quote/index.tsx
+++ b/src/components/Shared/Quote/index.tsx
@@ -23,8 +23,6 @@ export default function Quote({ quote, description, inverted }: QuoteProps) {
};
const observer = new IntersectionObserver(entries => {
- console.log("AQUI")
- console.log(entries)
entries.forEach(entry => {
if (entry.isIntersecting) {
setStartAnimation(true);
diff --git a/src/data/chart.tsx b/src/data/chart.tsx
new file mode 100644
index 0000000..92b11b1
--- /dev/null
+++ b/src/data/chart.tsx
@@ -0,0 +1,17 @@
+export const data = {
+ labels: ['1900', '1909', '1930', '1960', '1970', '1990', '2024'],
+ datasets: [
+ {
+ label: 'Eventos',
+ data: [0, 1, 5, 7, 6, 5, 0], // Exemplo de dados. Substitua pelos seus dados reais.
+ backgroundColor: '#9B1915', // Cor do preenchimento do gráfico
+ borderColor: '#2F2012', // Cor da linha do gráfico
+ borderWidth: 5, // Largura da linha do gráfico
+ pointBackgroundColor: '#9B1915', // Cor dos pontos
+ pointBorderColor: '#9B1915', // Cor da borda dos pontos
+ pointHoverBackgroundColor: '#fff', // Cor do fundo ao passar o mouse sobre os pontos
+ pointRadius: 7,
+ pointHoverBorderColor: '#9B1915', // Cor da borda ao passar o mouse sobre os pontos
+ }
+ ],
+};
\ No newline at end of file
diff --git a/src/data/markerList.tsx b/src/data/markerList.tsx
index e02be1a..19c0671 100644
--- a/src/data/markerList.tsx
+++ b/src/data/markerList.tsx
@@ -43,12 +43,12 @@ export const markers: PopupMarkerProps[] = [
title: "GLÓRIA",
description: "O Ccinema Glória foi inaugurado em 04/09/1926,no local onde funcionava o antigo Cinema Popular, na então Praça do Mercado. Considerado um cinema pequeno, distinguia lugares para a 1a e 2a classes. O cinema fez sua última exibição em agosto de 1984. A tela, a cabine de projeção, os portões de ferro e os balcões ainda eram os mesmos da época de sua fundação."
},
- {
- position: [-7.5908469,-35.5070645],
- type: "SEM FUNCIONAMENTO",
- title: "SÃO VICENTE",
- description: "Lorem ipsum dolor sit amet consectetur. Facilisi odio nisl sed interdum nullam maecenas dolor purus. Ultrices posuere sollicitudin neque etiam molestie. Aliquam malesuada enim mauris risus aliquet rutrum mattis. Non turpis tempor nulla egestas enim. Odio justo risus egestas turpis pulvinar felis nulla magna blandit. Est tellus eget blandit dolor leo dolor. "
- },
+ // {
+ // position: [-7.5908469,-35.5070645],
+ // type: "SEM FUNCIONAMENTO",
+ // title: "SÃO VICENTE",
+ // description: "Lorem ipsum dolor sit amet consectetur. Facilisi odio nisl sed interdum nullam maecenas dolor purus. Ultrices posuere sollicitudin neque etiam molestie. Aliquam malesuada enim mauris risus aliquet rutrum mattis. Non turpis tempor nulla egestas enim. Odio justo risus egestas turpis pulvinar felis nulla magna blandit. Est tellus eget blandit dolor leo dolor. "
+ // },
{
position: [-8.0184734,-34.8564486],
type: "SEM FUNCIONAMENTO",