Merge pull request #36 from italoh623/develop

Develop

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"

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({

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(
+    <div className={styles.container}>
+      <Line data={data} options={options} />
+    </div>
+  )
+}

src/components/Chart/styles.module.css

@@ -0,0 +1,5 @@
+.container { 
+  height: 500px;
+  width: 100%; 
+  /* border: 2px solid #2F2012;  */
+}

src/components/SessionAffected/styles.module.css

@@ -1,7 +1,4 @@
 .container {
-  position: relative;
-  top: -150px;
-
   padding: 50px 100px;
   padding-bottom: 0px !important;
 

src/components/SessionAffection/styles.module.css

@@ -1,7 +1,5 @@
 .container {
   position: relative;
-  top: -150px;
-
   display: flex;
   flex-direction: column;
   justify-content: space-between;

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%;
 }
 

src/components/SessionDisappearance/styles.module.css

@@ -1,7 +1,4 @@
 .container {
-  position: relative;
-  top: -150px;
-
   display: flex;
   flex-direction: column;
   justify-content: space-between;

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() {
         <h1 className={styles.title}>OCUPAÇÃO DO ESPAÇO PÚBLICO PELA ÓTICA DO CINEMA EM RECIFE - CULTURA É RESISTÊNCIA!</h1>
         <img className={styles.image} src="./images/cinema.svg" alt="" />
 
+        {/* <Chart /> */}
+
         <section className={styles.author} id="cinema-de-rua">
           <h1>CINEMA DE RUA</h1>
           <h2>e sua importância</h2>

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);

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%;
 }
 

src/components/SessionWhy/styles.module.css

@@ -1,7 +1,4 @@
 .container {
-  position: relative;
-  top: -150px;
-
   padding: 50px 100px;
   padding-bottom: 0px !important;
 

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);

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
+    }
+  ],
+};

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",