From 5934cb58a3b30cec005b7196cd7339ca1903777b Mon Sep 17 00:00:00 2001
From: Lorenzo Rocca <lorenzo.rocca.work@gmail.com>
Date: Mon, 20 Apr 2026 21:16:18 +0200
Subject: [PATCH] Aggiunti i footer e corretti tutti i padding nelle pagine

Signed-off-by: Lorenzo Rocca <lorenzo.rocca.work@gmail.com>
---
 src/app/gladys/routes/page.tsx   |   6 +-
 src/app/gladys/timeline/page.tsx | 262 ++++++++++++++++---------------
 src/app/stats/economy/page.tsx   |  10 +-
 src/app/stats/urban/page.tsx     |  10 +-
 4 files changed, 150 insertions(+), 138 deletions(-)

diff --git a/src/app/gladys/routes/page.tsx b/src/app/gladys/routes/page.tsx
index 2480c7a..903dad5 100644
--- a/src/app/gladys/routes/page.tsx
+++ b/src/app/gladys/routes/page.tsx
@@ -3,6 +3,7 @@ import SplitText from "@/components/reactbits/SplitText";
 import AnimatedContent from "@/components/reactbits/AnimatedContent";
 import DotGrid from "@/components/reactbits/DotGrid";
 import ItinerarioMapClient from "@/components/ui/gladys/routes/ItinerarioMapWrapper";
+import Footer from "@/components/layouts/Footer";
 
 export default function GladysPage() {
     return (
@@ -38,13 +39,14 @@ export default function GladysPage() {
                     />
                 </div>
             </div>
-            <div id={"page-content"} className={"relative z-20 w-full bg-[#0a0a0a] top-118.75 py-16"}>
+            <div id={"page-content"} className={"relative z-20 w-full bg-[#0a0a0a] top-118.75"}>
                 <div>
-                    <div className="w-full px-16 pb-8">
+                    <div className="w-full px-16 py-24">
                         <div className="w-full max-w-375 mx-auto">
                             <ItinerarioMapClient/>
                         </div>
                     </div>
+                    <Footer/>
                 </div>
             </div>
         </div>
diff --git a/src/app/gladys/timeline/page.tsx b/src/app/gladys/timeline/page.tsx
index 880870d..2479ce9 100644
--- a/src/app/gladys/timeline/page.tsx
+++ b/src/app/gladys/timeline/page.tsx
@@ -102,192 +102,194 @@ export default function TimelinePage() {
 
             <div
                 id="page-content"
-                className="relative top-118.75 z-20 w-full bg-[#0a0a0a] pt-24 px-16"
+                className="relative top-118.75 z-20 w-full bg-[#0a0a0a]"
             >
-                <div className="mx-auto w-full max-w-375">
-                    <section className="mb-24 text-center">
-                        <h1 className="mb-3 flex flex-wrap items-center justify-center gap-2 text-4xl font-semibold tracking-tight md:text-5xl">
+                <div className={"w-full py-24 px-16 flex flex-col items-center justify-center"}>
+                    <div className="mx-auto w-full max-w-375">
+                        <section className="mb-24 text-center">
+                            <h1 className="mb-3 flex flex-wrap items-center justify-center gap-2 text-4xl font-semibold tracking-tight md:text-5xl">
                             <span className="text-[64px]">
                                 Timeline Interattiva
                             </span>
-                        </h1>
+                            </h1>
 
-                        <p className="mx-auto max-w-162.5 text-base text-neutral-400">
-                            Un viaggio attraverso millenni di storia, dalla preistoria ai
-                            giorni nostri
-                        </p>
+                            <p className="mx-auto max-w-162.5 text-base text-neutral-400">
+                                Un viaggio attraverso millenni di storia, dalla preistoria ai
+                                giorni nostri
+                            </p>
 
-                        <div className="mt-4 inline-flex flex-wrap items-center justify-center gap-2 rounded-full border border-[#2E7D5E4D] bg-[#1A1A1A] px-5 py-2 text-xs font-medium tracking-wide text-[#3A9B75]">
-                            <span>🏛️ 5 epoche</span>
-                            <span>|</span>
-                            <span>🗺️ 3 territori</span>
-                            <span>|</span>
-                            <span>📜 45+ eventi verificati</span>
-                        </div>
-                    </section>
+                            <div className="mt-4 inline-flex flex-wrap items-center justify-center gap-2 rounded-full border border-[#2E7D5E4D] bg-[#1A1A1A] px-5 py-2 text-xs font-medium tracking-wide text-[#3A9B75]">
+                                <span>🏛️ 5 epoche</span>
+                                <span>|</span>
+                                <span>🗺️ 3 territori</span>
+                                <span>|</span>
+                                <span>📜 45+ eventi verificati</span>
+                            </div>
+                        </section>
 
-                    <section className="mb-8 flex flex-col gap-4 rounded-4xl border border-white/10 bg-[#1A1A1A] px-10 py-6 shadow-md xl:flex-row xl:items-center xl:justify-between">
-                        <div className="flex flex-col gap-3">
-                            <div className="flex flex-wrap items-center gap-3 rounded-full bg-[#111111] px-4 py-2">
+                        <section className="mb-8 flex flex-col gap-4 rounded-4xl border border-white/10 bg-[#1A1A1A] px-10 py-6 shadow-md xl:flex-row xl:items-center xl:justify-between">
+                            <div className="flex flex-col gap-3">
+                                <div className="flex flex-wrap items-center gap-3 rounded-full bg-[#111111] px-4 py-2">
                                 <span className="text-sm font-semibold text-neutral-400">
                                     📅 Era storica:
                                 </span>
-                                <div className="flex flex-wrap gap-2">
-                                    <button
-                                        onClick={() => setActiveEra("all")}
-                                        className={`cursor-pointer rounded-full px-4 py-1.5 text-xs font-medium transition ${
-                                            activeEra === "all"
-                                                ? "bg-[#2E7D5E] text-white"
-                                                : "bg-[#222222] text-neutral-400 hover:bg-[#1E5E45] hover:text-white"
-                                        }`}
-                                    >
-                                        Tutte
-                                    </button>
-
-                                    {(Object.keys(eraLabels) as Era[]).map((era) => (
+                                    <div className="flex flex-wrap gap-2">
                                         <button
-                                            key={era}
-                                            onClick={() => setActiveEra(era)}
+                                            onClick={() => setActiveEra("all")}
                                             className={`cursor-pointer rounded-full px-4 py-1.5 text-xs font-medium transition ${
-                                                activeEra === era
+                                                activeEra === "all"
                                                     ? "bg-[#2E7D5E] text-white"
                                                     : "bg-[#222222] text-neutral-400 hover:bg-[#1E5E45] hover:text-white"
                                             }`}
                                         >
-                                            {eraLabels[era]}
+                                            Tutte
                                         </button>
-                                    ))}
-                                </div>
-                            </div>
-
-                            <div className="flex flex-wrap items-center gap-3 rounded-full bg-[#111111] px-4 py-2">
-                                <span className="text-sm font-semibold text-neutral-400">
-                                    🗺️ Territorio:
-                                </span>
-                                <div className="flex flex-wrap gap-2">
-                                    <button
-                                        onClick={() => setActiveTerritory("all")}
-                                        className={`cursor-pointer rounded-full px-4 py-1.5 text-xs font-medium transition ${
-                                            activeTerritory === "all"
-                                                ? "bg-[#2E7D5E] text-white"
-                                                : "bg-[#222222] text-neutral-400 hover:bg-[#1E5E45] hover:text-white"
-                                        }`}
-                                    >
-                                        Tutti
-                                    </button>
 
-                                    {(Object.keys(territoryLabels) as Territory[]).map(
-                                        (territory) => (
+                                        {(Object.keys(eraLabels) as Era[]).map((era) => (
                                             <button
-                                                key={territory}
-                                                onClick={() =>
-                                                    setActiveTerritory(territory)
-                                                }
+                                                key={era}
+                                                onClick={() => setActiveEra(era)}
                                                 className={`cursor-pointer rounded-full px-4 py-1.5 text-xs font-medium transition ${
-                                                    activeTerritory === territory
+                                                    activeEra === era
                                                         ? "bg-[#2E7D5E] text-white"
                                                         : "bg-[#222222] text-neutral-400 hover:bg-[#1E5E45] hover:text-white"
                                                 }`}
                                             >
-                                                {territoryLabels[territory]}
+                                                {eraLabels[era]}
                                             </button>
-                                        )
-                                    )}
+                                        ))}
+                                    </div>
+                                </div>
+
+                                <div className="flex flex-wrap items-center gap-3 rounded-full bg-[#111111] px-4 py-2">
+                                <span className="text-sm font-semibold text-neutral-400">
+                                    🗺️ Territorio:
+                                </span>
+                                    <div className="flex flex-wrap gap-2">
+                                        <button
+                                            onClick={() => setActiveTerritory("all")}
+                                            className={`cursor-pointer rounded-full px-4 py-1.5 text-xs font-medium transition ${
+                                                activeTerritory === "all"
+                                                    ? "bg-[#2E7D5E] text-white"
+                                                    : "bg-[#222222] text-neutral-400 hover:bg-[#1E5E45] hover:text-white"
+                                            }`}
+                                        >
+                                            Tutti
+                                        </button>
+
+                                        {(Object.keys(territoryLabels) as Territory[]).map(
+                                            (territory) => (
+                                                <button
+                                                    key={territory}
+                                                    onClick={() =>
+                                                        setActiveTerritory(territory)
+                                                    }
+                                                    className={`cursor-pointer rounded-full px-4 py-1.5 text-xs font-medium transition ${
+                                                        activeTerritory === territory
+                                                            ? "bg-[#2E7D5E] text-white"
+                                                            : "bg-[#222222] text-neutral-400 hover:bg-[#1E5E45] hover:text-white"
+                                                    }`}
+                                                >
+                                                    {territoryLabels[territory]}
+                                                </button>
+                                            )
+                                        )}
+                                    </div>
                                 </div>
                             </div>
-                        </div>
 
-                        <div className="w-fit rounded-full border border-[#2E7D5E4D] bg-[#111111] px-5 py-2 text-xs font-semibold tracking-wide text-[#3A9B75]">
-                            📌 Eventi visibili: <span>{filteredEvents.length}</span>
-                        </div>
-                    </section>
-
-                    <section className="mb-24 grid grid-cols-1 gap-6 lg:grid-cols-2">
-                        <div className="rounded-4xl border border-white/10 bg-[#1A1A1A] py-6 px-10 shadow-md">
-                            <h3 className="mb-4 border-l-[3px] border-[#C47A4A] pl-3 text-[15px] font-semibold">
-                                📅 Ere storiche
-                            </h3>
-
-                            <div className="flex flex-wrap gap-3">
-                                {[
-                                    ["Preistoria", "#C47A4A"],
-                                    ["Età antica", "#D4A84B"],
-                                    ["Medioevo", "#4A8B9B"],
-                                    ["Età moderna", "#2E7D5E"],
-                                    ["Contemporanea", "#9B6B8A"],
-                                ].map(([label, color]) => (
-                                    <span
-                                        key={label}
-                                        className="inline-flex items-center gap-2 rounded-full bg-[#111111] px-3 py-1 text-[11px] text-neutral-400"
-                                    >
+                            <div className="w-fit rounded-full border border-[#2E7D5E4D] bg-[#111111] px-5 py-2 text-xs font-semibold tracking-wide text-[#3A9B75]">
+                                📌 Eventi visibili: <span>{filteredEvents.length}</span>
+                            </div>
+                        </section>
+
+                        <section className="mb-24 grid grid-cols-1 gap-6 lg:grid-cols-2">
+                            <div className="rounded-4xl border border-white/10 bg-[#1A1A1A] py-6 px-10 shadow-md">
+                                <h3 className="mb-4 border-l-[3px] border-[#C47A4A] pl-3 text-[15px] font-semibold">
+                                    📅 Ere storiche
+                                </h3>
+
+                                <div className="flex flex-wrap gap-3">
+                                    {[
+                                        ["Preistoria", "#C47A4A"],
+                                        ["Età antica", "#D4A84B"],
+                                        ["Medioevo", "#4A8B9B"],
+                                        ["Età moderna", "#2E7D5E"],
+                                        ["Contemporanea", "#9B6B8A"],
+                                    ].map(([label, color]) => (
+                                        <span
+                                            key={label}
+                                            className="inline-flex items-center gap-2 rounded-full bg-[#111111] px-3 py-1 text-[11px] text-neutral-400"
+                                        >
                                         <span
                                             className="h-4 w-4 rounded-lg border border-white/10"
                                             style={{ backgroundColor: color }}
                                         />
-                                        {label}
+                                            {label}
                                     </span>
-                                ))}
+                                    ))}
+                                </div>
                             </div>
-                        </div>
-                        <div className="rounded-4xl border border-white/10 bg-[#1A1A1A] py-6 px-10 shadow-md">
-                            <h3 className="mb-4 border-l-[3px] border-[#E8925C] pl-3 text-[15px] font-semibold">
-                                🗺️ Territori
-                            </h3>
-
-                            <div className="flex flex-wrap gap-3">
-                                {[
-                                    ["Provincia di Como", "#E8925C"],
-                                    ["Provincia di Varese", "#6BA85A"],
-                                    ["Canton Ticino", "#5A9BA8"],
-                                ].map(([label, color]) => (
-                                    <span
-                                        key={label}
-                                        className="inline-flex items-center gap-2 rounded-full bg-[#111111] px-3 py-1 text-[11px] text-neutral-400"
-                                    >
+                            <div className="rounded-4xl border border-white/10 bg-[#1A1A1A] py-6 px-10 shadow-md">
+                                <h3 className="mb-4 border-l-[3px] border-[#E8925C] pl-3 text-[15px] font-semibold">
+                                    🗺️ Territori
+                                </h3>
+
+                                <div className="flex flex-wrap gap-3">
+                                    {[
+                                        ["Provincia di Como", "#E8925C"],
+                                        ["Provincia di Varese", "#6BA85A"],
+                                        ["Canton Ticino", "#5A9BA8"],
+                                    ].map(([label, color]) => (
+                                        <span
+                                            key={label}
+                                            className="inline-flex items-center gap-2 rounded-full bg-[#111111] px-3 py-1 text-[11px] text-neutral-400"
+                                        >
                                         <span
                                             className="h-4 w-4 rounded-lg border border-white/10"
                                             style={{ backgroundColor: color }}
                                         />
-                                        {label}
+                                            {label}
                                     </span>
-                                ))}
+                                    ))}
+                                </div>
                             </div>
-                        </div>
-                    </section>
-
-                    <section className="mx-auto max-w-245">
-                        {filteredEvents.map((event) => (
-                            <article
-                                key={`${event.year}-${event.title}`}
-                                onClick={() => setSelectedEvent(event)}
-                                className={`relative my-7 cursor-pointer overflow-visible rounded-2xl border border-white/10 border-l-4 bg-[#1A1A1A] transition duration-200 hover:-translate-y-1 hover:border-[#2E7D5E] hover:bg-[#222222] hover:shadow-2xl ${territoryBorderClasses[event.territory]}`}
-                            >
+                        </section>
+
+                        <section className="mx-auto max-w-245">
+                            {filteredEvents.map((event) => (
+                                <article
+                                    key={`${event.year}-${event.title}`}
+                                    onClick={() => setSelectedEvent(event)}
+                                    className={`relative my-7 cursor-pointer overflow-visible rounded-2xl border border-white/10 border-l-4 bg-[#1A1A1A] transition duration-200 hover:-translate-y-1 hover:border-[#2E7D5E] hover:bg-[#222222] hover:shadow-2xl ${territoryBorderClasses[event.territory]}`}
+                                >
                                 <span
                                     className="absolute -left-7.75 top-5 z-10 h-3 w-3 rounded-full border-2 shadow-[0_0_0_3px_#0a0a0a] md:-left-8.5"
                                     style={{ backgroundColor: dotColors[event.era], borderColor: dotColors[event.era] }}
                                 />
 
-                                <div className="flex flex-col gap-3 p-5 md:flex-row md:flex-wrap md:items-center">
+                                    <div className="flex flex-col gap-3 p-5 md:flex-row md:flex-wrap md:items-center">
                                     <span
                                         className={`w-fit rounded-full px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.5px] ${eraBadgeClasses[event.era]}`}
                                     >
                                         {eraLabels[event.era]}
                                     </span>
 
-                                    <div className="flex-1 text-[15px] font-medium text-white">
-                                        {formatYear(event.year)} — {event.title}
-                                    </div>
+                                        <div className="flex-1 text-[15px] font-medium text-white">
+                                            {formatYear(event.year)} — {event.title}
+                                        </div>
 
-                                    <span className="w-fit rounded-full bg-[#111111] px-3 py-1 text-[11px] font-medium text-neutral-400">
+                                        <span className="w-fit rounded-full bg-[#111111] px-3 py-1 text-[11px] font-medium text-neutral-400">
                                         {territoryLabels[event.territory]}
                                     </span>
-                                </div>
-                            </article>
-                        ))}
-                    </section>
+                                    </div>
+                                </article>
+                            ))}
+                        </section>
+                    </div>
                 </div>
 
-                <Footer className="mt-24" />
+                <Footer/>
             </div>
 
             {selectedEvent && (
diff --git a/src/app/stats/economy/page.tsx b/src/app/stats/economy/page.tsx
index 8c711fa..9b6e7d0 100644
--- a/src/app/stats/economy/page.tsx
+++ b/src/app/stats/economy/page.tsx
@@ -7,6 +7,7 @@ import {ComoEconomyGraph} from "@/components/ui/stats/economy/sub/ComoEconomyGra
 import {TicinoEconomyGraph} from "@/components/ui/stats/economy/sub/TicinoEconomyGraph";
 import {VareseEconomyGraph} from "@/components/ui/stats/economy/sub/VareseEconomyGraph";
 import {LeccoEconomyGraph} from "@/components/ui/stats/economy/sub/LeccoEconomyGraph";
+import Footer from "@/components/layouts/Footer";
 
 export default function GladysPage() {
     return (
@@ -42,8 +43,11 @@ export default function GladysPage() {
                     />
                 </div>
             </div>
-            <div id={"page-content"} className={"relative z-20 w-full bg-[#0a0a0a] top-118.75 py-16"}>
-                <InsubricaCharts/>
+            <div id={"page-content"} className={"relative z-20 w-full bg-[#0a0a0a] top-118.75"}>
+                <div className={"w-full flex flex-col items-center justify-center px-16 py-24"}>
+                    <InsubricaCharts/>
+                </div>
+                <Footer/>
             </div>
         </div>
     );
@@ -51,7 +55,7 @@ export default function GladysPage() {
 
 function InsubricaCharts() {
     return (
-        <div className="min-h-screen bg-[#0a0a0a] text-white p-6 px-16">
+        <div className="min-h-screen bg-[#0a0a0a] text-white w-full">
             <div className="max-w-375 mx-auto space-y-8">
                 {/* Titolo */}
                 <div>
diff --git a/src/app/stats/urban/page.tsx b/src/app/stats/urban/page.tsx
index 6965eba..beba2d2 100644
--- a/src/app/stats/urban/page.tsx
+++ b/src/app/stats/urban/page.tsx
@@ -7,6 +7,7 @@ import {ComoUrbanGraph} from "@/components/ui/stats/urban/sub/ComoUrbanGraph";
 import {LeccoUrbanGraph} from "@/components/ui/stats/urban/sub/LeccoUrbanGraph";
 import {TicinoUrbanGraph} from "@/components/ui/stats/urban/sub/TicinoUrbanGraph";
 import {VareseUrbanGraph} from "@/components/ui/stats/urban/sub/VareseUrbanGraph";
+import Footer from "@/components/layouts/Footer";
 
 export default function GladysPage() {
     return (
@@ -42,8 +43,11 @@ export default function GladysPage() {
                     />
                 </div>
             </div>
-            <div id={"page-content"} className={"relative z-20 w-full bg-[#0a0a0a] top-118.75 py-16"}>
-                <InsubricaCharts/>
+            <div id={"page-content"} className={"relative z-20 w-full bg-[#0a0a0a] top-118.75"}>
+                <div className={"w-full flex flex-col items-center justify-center px-16 py-24"}>
+                    <InsubricaCharts/>
+                </div>
+                <Footer/>
             </div>
         </div>
     );
@@ -51,7 +55,7 @@ export default function GladysPage() {
 
 function InsubricaCharts() {
     return (
-        <div className="min-h-screen bg-[#0a0a0a] text-white p-6 px-16">
+        <div className="min-h-screen bg-[#0a0a0a] text-white w-full">
             <div className="max-w-375 mx-auto space-y-8">
                 {/* Titolo */}
                 <div>