Updated Documentation.tsx

empower-italy/app/globals.css

@@ -6,6 +6,14 @@ p {
     @apply pb-4
 }
 
+table, th, td {
+  @apply border border-gray-600 border-collapse
+}
+
+th, td {
+  @apply p-2 text-left
+}
+
 .nav-button {
     @apply text-indigo-600 uppercase rounded-full bg-indigo-100 py-2 px-6 hover:bg-indigo-600 hover:text-indigo-100 transition-all 
 }

empower-italy/app/lib/data.ts

@@ -43,22 +43,22 @@ export const HERO_DATA = [
         layoutOrder: true
     },
     {
-        title: "Lorem ipsum dolor sit amet consectetur.",
-        paragraph: "Aliquam massa iaculis in sit felis. Diam bibendum fames lectus odio porttitor consectetur purus donec. Tellus nulla tortor a orci est. Nam cursus velit facilisis sed. Egestas bibendum eget semper sed cras pellentesque. Aenean ut iaculis vitae maecenas orci mattis porta lacus. Mauris ut purus id ipsum ultricies.",
+        title: "EmpowerItaly's Project Journey: Unveiling the Methodological Steps",
+        paragraph: "Embark on the journey of EmpowerItaly's project methodology in our Workflow section. Here, we meticulously outline the systematic steps and processes undertaken to realize the project's objectives. From initial ideation to data collection, analysis, ethical considerations, and eventual conclusions, this section unveils the roadmap followed, offering insight into the structured approach employed to comprehend Italy's employment landscape comprehensively.",
         imageSrc: workflow,
         payoff: "Our workflow",
         layoutOrder: false
     },
     {
-        title: "Lorem ipsum dolor sit amet consectetur.",
-        paragraph: "Aliquam massa iaculis in sit felis. Diam bibendum fames lectus odio porttitor consectetur purus donec. Tellus nulla tortor a orci est. Nam cursus velit facilisis sed. Egestas bibendum eget semper sed cras pellentesque. Aenean ut iaculis vitae maecenas orci mattis porta lacus. Mauris ut purus id ipsum ultricies.",
+        title: "Documentation: Insights into Italy's Workforce Dynamics",
+        paragraph: "Welcome to the project's documentation. Our documentation covers a diverse array of topics, including an insightful introduction, exploration of open data scenarios, quality and legal analyses, ethical considerations, technical insights, sustainability measures, visualization techniques, RDF metadata assertions, and our work methodology. Delve into each section to gain a profound understanding of our project's objectives, methodology, and conclusions, fostering a deeper comprehension of Italy's employment landscape.",
         imageSrc: documentation,
         payoff: "Project's information",
         layoutOrder: true
     },
     {
-        title: "Lorem ipsum dolor sit amet consectetur.",
-        paragraph: "Aliquam massa iaculis in sit felis. Diam bibendum fames lectus odio porttitor consectetur purus donec. Tellus nulla tortor a orci est. Nam cursus velit facilisis sed. Egestas bibendum eget semper sed cras pellentesque. Aenean ut iaculis vitae maecenas orci mattis porta lacus. Mauris ut purus id ipsum ultricies.",
+        title: "Dataset Collection: Unveiling Insights into Italy's Workforce Diversity",
+        paragraph: "Welcome to EmpowerItaly's Dataset Collection, where we showcase a comprehensive array of cards representing each dataset utilized within our project. These cards provide in-depth information and relevant details regarding the datasets employed, including their origins, sources, formats, and other pertinent metadata. Dive into this section to explore the rich tapestry of data that forms the foundation of our research, shedding light on various aspects of Italy's diverse workforce.",
         imageSrc: datasets,
         payoff: "Our sources",
         layoutOrder: false
@@ -71,16 +71,52 @@ export const HERO_DATA = [
 
 export const DOCUMENTATION_LINKS = [
     {
-        name: "Introduction",
+        name: "1. Introduction",
         href: "#Introduction"
     },
     {
-        name: "Scenario",
+        name: "2. Scenario",
         href: "#Scenario"
     },
     {
-        name: "Datasets",
+        name: "3. Original datasets and mashup datasets",
         href: "#Datasets"
+    },
+    {
+        name: "4. Quality Analysis of the datasets",
+        href: "#Quality"
+    },
+    {
+        name: "5. Legal Analysis",
+        href: "#Legal"
+    },
+    {
+        name: "6. Ethics Analysis",
+        href: "#Ethics"
+    },
+    {
+        name: "7. Technical Analysis",
+        href: "#Technical"
+    },
+    {
+        name: "8. Sustainability of updating the datasets over time",
+        href: "#Sustainability"
+    },
+    {
+        name: "9. Visualization",
+        href: "#Visualization"
+    },
+    {
+        name: "10. RDF Assertation of Metadata",
+        href: "#RDF"
+    },
+    {
+        name: "11. Our Work Praxis",
+        href: "#Praxis"
+    },
+    {
+        name: "12. Conclusions",
+        href: "#Conclusions"
     }
 ];
 

empower-italy/app/page.tsx

@@ -7,7 +7,7 @@ import BarChart from "@/components/BarChart";
 import NumbersAge from "@/components/NumbersAge";
 import Conclusions from "@/components/Conclusions";
 import MashUp from "@/components/MashUp";
-import HorizontalBarChart from "@/components/HorizontalBarChart";
+import OccupationBarChart from "@/components/OccupationBarChart";
 import Map from "@/components/Map";
 import Countries from "@/components/Countries";
 
@@ -33,7 +33,7 @@ export default function Home() {
         </section>
       <BarChart />
       <NumbersAge />
-      <HorizontalBarChart />
+      <OccupationBarChart />
       <Conclusions />
       <MashUp />
     </main>

empower-italy/components/BarChart.tsx

@@ -119,7 +119,7 @@ export default function BarChart() {
                     display: true,
                     text: 'Rate of Education Level',
                 },
-                suggestedMin: 0,
+                suggestedMin: 60,
             },
         },
     };

empower-italy/components/Conclusions.tsx

@@ -1,4 +1,5 @@
 import Image from "next/image"
+import Link from "next/link"
 import conclusions from "@/public/conclusions.jpg"
 
 export default function Conclusion() {
@@ -8,24 +9,17 @@ export default function Conclusion() {
             <div className="grid grid-cols-12 gap-6 h-full">
                 <div className="bg-indigo-100 rounded-2xl p-8 md:p-12 col-span-12 lg:col-span-8 grid                                     hover:drop-shadow-md transition-all"> {/* `grid` class is needed to use `place-self-end` on the button */}
                     <h1 className="font-bold text-5xl md:text-6xl text-indigo-900 pb-8">Our conclusions</h1>
-                    <p>Placerat in maecenas iaculis at lacus enim. Nibh lorem phasellus tortor eu diam adipiscing a facilisis scelerisque. Turpis pellentesque tristique tellus vitae. Consectetur egestas ut faucibus in nam. Neque ipsum tristique pulvinar faucibus lorem dignissim auctor. Dignissim aliquam diam dis mattis felis ligula. Et aliquet elementum amet at.
+                    <p>
+                    This project aimed at understanding significant differences between immigrants and Italians in the labour market, assessing the foreign distribution in the country, their level of education and making a comparison between these two groups in the industry sectors and in terms of activity and unemployment. In an overall it's clear the existence of a significant disparity. 
                     </p>
-                    <p> Nisi ac in lorem quis orci cras sed varius vitae. Sem curabitur facilisi mauris magna faucibus id malesuada pretium porta. Enim parturient interdum interdum felis amet aliquet mauris. Semper pretium blandit tempor turpis mi. Scelerisque pellentesque non felis adipiscing sed sed dis euismod. Fermentum amet sociis dignissim velit integer lectus. Consectetur nibh viverra enim aliquam feugiat.
+                    <p>
+                    Since the immigrant population is substantially smaller compared to the Italian one, they will consequently represent a smaller proportion in the labour market, but still they are always present in all the shown sectors and with further studies it could be understood if they complement the labour market when there's a lack of professionals in Italy or not.
                     </p>
-                    <button className="
-                                place-self-end
-                                mt-6
-                                rounded-full
-                                border
-                                border-indigo-600
-                                text-indigo-600
-                                py-2 px-6
-                                uppercase
-                                hover:bg-indigo-600
-                                hover:text-indigo-100
-                                transition-all"
-                    >
-                        See documentation
+                    <p>
+                    Foreigners indeed face a higher unemployment rate even though being sometimes equally or more active than natives. We understand that there is a difference between those groups that can be explained by other factors not considered here, since the aspects of the labour market are too many to be covered in this project.
+                    </p>
+                    <button className="place-self-end outline-button">
+                        <Link href="/documentation">See documentation</Link>
                     </button>
                 </div>
                 <div className="col-span-12 lg:col-span-4">

empower-italy/components/Countries.tsx

@@ -74,7 +74,18 @@ export default function Countries() {
                     hover:drop-shadow-md
                     transition-all
         ">
-            <h1 className="font-bold text-2xl md:text-4xl text-indigo-900 uppercase pb-8">Top 10 citizenships</h1>
+        <div>
+        <h1 className="font-bold text-2xl md:text-4xl text-indigo-900 uppercase">Top 10 citizenships</h1>
+        <h2  className="
+                    font-bold
+                    text-2xl
+                    md:text-3xl
+                    text-indigo-900
+                    pb-8
+        ">
+            in 2022
+        </h2>
+        </div>
             {/* conditional rendering */}
             {loading ? (
                 <p className="font-bold text-5xl md:text-7xl text-indigo-600">Loading...</p>
@@ -84,7 +95,7 @@ export default function Countries() {
                 <ul className="text-indigo-600">
                 {topCitizenships.map((item, index) => (
                     <li key={index}  className="flex items-baseline pb-2">
-                        <p className="font-bold text-2xl md:text-4xl w-2/3">{item.citizenship}</p>
+                        <p className="font-bold text-2xl md:text-3xl w-2/3">{item.citizenship}</p>
                         <p className="w-1/3 text-right">{item.population.toLocaleString()}</p>
                     </li>
                 ))}