new selfhosted version

2025-12-13 00:48:36 +01:00 · 2025-11-28 14:11:51 +01:00
parent afda29997d
commit 951860f67e
1046 changed files with 72586 additions and 574750 deletions
--- a/dashboard/public/pdf/pages/page1.html
+++ b/dashboard/public/pdf/pages/page1.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+        rel="stylesheet">
+    <style>
+        * {
+            font-family: "Poppins";
+        }
+    </style>
+</head>
+
+<body>
+
+    <div class="w-dvw h-dvh p-8 flex flex-col">
+        <div class="font-bold text-4xl"> Web Analytics Report </div>
+        <div class="w-full h-[2px] bg-black mt-3"></div>
+        <div class="mt-[35vh] flex justify-center flex-col items-center">
+    <div class="font-bold text-4xl"> %PROJECT_NAME% </div>
+    <div class="font-bold text-2xl mt-4"> Domain: %DOMAIN% </div>
+    <div class="text-2xl mt-4"> Data analyzed in this report </div>
+    <div class="text-2xl">
+        are from
+        <span class="font-bold"> %FROM% </span>
+        to
+        <span class="font-bold"> %TO% </span>.
+    </div>
+</div>
+        <div class="grow"></div>
+        <div class="flex justify-between items-center">
+            <div class="text-2xl">1/9</div>
+            <img class="w-10" src="%LOGO%">
+        </div>
+    </div>
+</body>
+
+</html>
--- a/dashboard/public/pdf/pages/page2.html
+++ b/dashboard/public/pdf/pages/page2.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+        rel="stylesheet">
+    <style>
+        * {
+            font-family: "Poppins";
+        }
+    </style>
+</head>
+
+<body>
+
+    <div class="w-dvw h-dvh p-8 flex flex-col">
+        <div class="font-bold text-4xl"> Quick Metrics Overview </div>
+        <div class="w-full h-[2px] bg-black mt-3"></div>
+
+
+        <p class="text-sm text-gray-700 max-w-4xl mb-8 mt-4">
+            %AI_0%
+        </p>
+
+        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+            <div class="bg-white shadow rounded-lg p-6 text-center">
+                <div class="text-gray-600 text-sm font-medium mb-1">Total Visits</div>
+                <div class="text-3xl font-bold">%VISITS%</div>
+            </div>
+
+            <div class="bg-white shadow rounded-lg p-6 text-center">
+                <div class="text-gray-600 text-sm font-medium mb-1">Unique Visitors</div>
+                <div class="text-3xl font-bold">%SESSIONS%</div>
+            </div>
+
+            <div class="bg-white shadow rounded-lg p-6 text-center">
+                <div class="text-gray-600 text-sm font-medium mb-1">Bounce Rate</div>
+                <div class="text-3xl font-bold">%BOUNCING_RATE%</div>
+            </div>
+
+            <div class="bg-white shadow rounded-lg p-6 text-center">
+                <div class="text-gray-600 text-sm font-medium mb-1">Avg. Session Duration</div>
+                <div class="text-3xl font-bold">%SESSION_DURATION%</div>
+            </div>
+
+            <div class="bg-white shadow rounded-lg p-6">
+                <div class="text-gray-600 text-sm font-medium mb-2">Most Visited Pages</div>
+                <ul class="text-sm text-gray-800 space-y-1">
+                    <li>%PAGE_0%</li>
+                    <li>%PAGE_1%</li>
+                    <li>%PAGE_2%</li>
+                </ul>
+            </div>
+
+            <div class="bg-white shadow rounded-lg p-6">
+                <div class="text-gray-600 text-sm font-medium mb-2">Top 3 Countries</div>
+                <ul class="text-sm text-gray-800 space-y-1">
+                    <li>%COUNTRY_0%</li>
+                    <li>%COUNTRY_1%</li>
+                    <li>%COUNTRY_2%</li>
+                </ul>
+            </div>
+
+            <div class="bg-white shadow rounded-lg p-6">
+                <div class="text-gray-600 text-sm font-medium mb-2">Most Used Devices</div>
+                <ul class="text-sm text-gray-800 space-y-1">
+                    <li>%DEVICE_0%</li>
+                    <li>%DEVICE_1%</li>
+                    <li>%DEVICE_2%</li>
+                </ul>
+            </div>
+
+            <div class="bg-white shadow rounded-lg p-6">
+                <div class="text-gray-600 text-sm font-medium mb-2">Top Traffic Sources</div>
+                <ul class="text-sm text-gray-800 space-y-1">
+                    <li>%REFERRER_0%</li>
+                    <li>%REFERRER_1%</li>
+                    <li>%REFERRER_2%</li>
+                </ul>
+            </div>
+        </div>
+        <div class="grow"></div>
+        <div class="flex justify-between items-center">
+            <div class="text-2xl">2/9</div>
+          <img class="w-10" src="%LOGO%">
+        </div>
+    </div>
+</body>
+
+</html>
--- a/dashboard/public/pdf/pages/page3.html
+++ b/dashboard/public/pdf/pages/page3.html
@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+        rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <style>
+        * {
+            font-family: "Poppins";
+        }
+    </style>
+</head>
+
+<body>
+
+    <div class="w-dvw h-dvh p-8 flex flex-col">
+        <div class="font-bold text-4xl"> Traffic Overview </div>
+        <div class="w-full h-[2px] bg-black mt-3"></div>
+        <div class="bg-white w-full p-8">
+            <p class="text-sm text-gray-700 mb-6">
+                This section provides an overview of how users interacted with your website during the selected period.
+                The metrics are compared with the previous timeframe to identify growth or decline in overall traffic.
+            </p>
+
+            <h2 class="font-semibold mb-2">Key Data Highlights</h2>
+            <ul class="list-disc list-inside text-sm text-gray-800 space-y-1 mb-6">
+                <li>Total Visits: %VISITS%</li>
+                <li>Unique Visitors: %SESSIONS%</li>
+            </ul>
+
+            <p class="text-sm text-gray-700 mb-6">
+                💡 %AI_0%
+            </p>
+
+            <canvas id="traffic_graph" class="w-full !h-50 rounded-md flex items-center justify-center mb-8">
+            </canvas>
+
+            <h3 class="font-semibold mb-2">Device Distribution</h3>
+            <div class="flex justify-between items-start mb-6">
+                <ul class="list-disc list-inside text-sm text-gray-800 space-y-1">
+                    <li>%DEVICE_0%</li>
+                    <li>%DEVICE_1%</li>
+                    <li>%DEVICE_2%</li>
+                </ul>
+                <canvas id="pie_graph" class="!w-32 !h-32 rounded-md flex items-center justify-center">
+                </canvas>
+            </div>
+
+            <h3 class="font-semibold mb-2">AI Insight</h3>
+            <p class="italic text-sm text-gray-600">
+                💡 %AI_1%
+            </p>
+        </div>
+        <div class="grow"></div>
+        <div class="flex justify-between items-center">
+            <div class="text-2xl">3/9</div>
+          <img class="w-10" src="%LOGO%">
+        </div>
+    </div>
+
+
+    <script>
+
+        const ctxTraffic = document.getElementById('traffic_graph');
+
+        new Chart(ctxTraffic, {
+            type: 'line',
+            data: {
+                labels: VAR_LABELS_TRAFFIC,
+                datasets: [{
+                    data: VAR_DATA_TRAFFIC,
+                    borderWidth: 2,
+                    borderColor: '#9d65bb',
+                    backgroundColor: '#9d65bb66',
+                    pointRadius: 0,
+                    fill: true
+                }]
+            },
+            options: {
+                animation: false,
+                plugins: {
+                    legend: { display: false },
+                    tooltip: { enabled: false }
+                },
+                scales: {
+                    x: {
+                        display: false,
+                        grid: { display: false }
+                    },
+                    y: {
+                        display: false,
+                        grid: { display: false }
+                    }
+                },
+                elements: {
+                    line: { tension: 0.3 }
+                },
+                layout: {
+                    padding: 0
+                }
+            }
+        });
+
+
+        const ctxPie = document.getElementById('pie_graph');
+
+        new Chart(ctxPie, {
+            type: 'pie',
+            data: {
+                labels: VAR_LABELS_PIE,
+                datasets: [{
+                    data: VAR_DATA_PIE,
+                    borderWidth: 0,
+                    backgroundColor: [
+                        '#9d65bb',
+                        '#ecbff0',
+                        '#c493d5',
+                        '#b07cc8',
+                        '#d8aae2'
+                    ]
+                }]
+            },
+            options: {
+                animation: false,
+                plugins: {
+                    legend: { display: false },
+                    tooltip: { enabled: false }
+                }
+            }
+        });
+
+
+    </script>
+</body>
+
+</html>
--- a/dashboard/public/pdf/pages/page4.html
+++ b/dashboard/public/pdf/pages/page4.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link
+    href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+    rel="stylesheet">
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <style>
+    * {
+      font-family: "Poppins";
+    }
+  </style>
+</head>
+
+<body>
+
+  <div class="w-dvw h-dvh p-8 flex flex-col">
+    <div class="font-bold text-4xl"> Acquisition Channels </div>
+    <div class="w-full h-[2px] bg-black mt-3"></div>
+    <div class="bg-white w-full p-8">
+      <p class="text-sm text-gray-700 mb-6">
+        This section analyzes where your visitors are coming from. By understanding which channels
+        drive the most traffic, you can identify strengths, weaknesses, and opportunities for growth
+      </p>
+      <h2 class="font-semibold mb-2">Top Referrers</h2>
+      <div class="flex justify-between items-start mb-6">
+        <ul class="list-disc list-inside text-sm text-gray-800 space-y-1">
+          <li>%REFERRER_0%</li>
+          <li>%REFERRER_1%</li>
+          <li>%REFERRER_2%</li>
+          <li>%REFERRER_3%</li>
+          <li>%REFERRER_4%</li>
+        </ul>
+      </div>
+      <p class="text-sm text-gray-700 mb-8">
+      💡 Insight: %AI_0%
+      </p>
+      <h3 class="font-semibold mb-2">1. UTM Source (where the traffic originated)</h3>
+      <ul class="list-disc list-inside text-sm text-gray-800 space-y-1 mb-2">
+        <li>%UTMSOURCE_0%</li>
+        <li>%UTMSOURCE_1%</li>
+        <li>%UTMSOURCE_2%</li>
+      </ul>
+      <p class="italic text-sm text-gray-600 mb-6">
+        💡 %AI_1%
+      </p>
+      <h3 class="font-semibold mb-2">2. UTM Campaign (specific marketing campaigns)</h3>
+      <ul class="list-disc list-inside text-sm text-gray-800 space-y-1 mb-2">
+        <li>%UTMCAMPAIGN_0%</li>
+        <li>%UTMCAMPAIGN_1%</li>
+        <li>%UTMCAMPAIGN_2%</li>
+      </ul>
+      <p class="italic text-sm text-gray-600 mb-6">
+        💡 %AI_2%
+      </p>
+      <h3 class="font-semibold mb-2">3. UTM Medium (marketing channel type)</h3>
+      <ul class="list-disc list-inside text-sm text-gray-800 space-y-1 mb-2">
+        <li>%UTMMEDIUM_0%</li>
+        <li>%UTMMEDIUM_1%</li>
+        <li>%UTMMEDIUM_2%</li>
+      </ul>
+      <p class="italic text-sm text-gray-600 mb-6">
+        💡 %AI_3%
+      </p>
+    </div>
+    <div class="grow"></div>
+    <div class="flex justify-between items-center">
+      <div class="text-2xl">4/9</div>
+    <img class="w-10" src="%LOGO%">
+    </div>
+  </div>
+</body>
+
+</html>
--- a/dashboard/public/pdf/pages/page5.html
+++ b/dashboard/public/pdf/pages/page5.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link
+    href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+    rel="stylesheet">
+  <style>
+    * {
+      font-family: "Poppins";
+    }
+  </style>
+</head>
+
+<body>
+
+  <div class="w-dvw h-dvh p-8 flex flex-col">
+    <div class="font-bold text-4xl"> Acquisition Channels </div>
+    <div class="w-full h-[2px] bg-black mt-3"></div>
+    <h3 class="font-semibold mb-2 mt-4">4. UTM Term (keywords used, usually for paid search)</h3>
+    <ul class="list-disc list-inside text-sm text-gray-800 space-y-1 mb-2">
+      <li>%UTMTERM_0%</li>
+      <li>%UTMTERM_1%</li>
+      <li>%UTMTERM_2%</li>
+    </ul>
+    <p class="italic text-sm text-gray-600 mb-6">
+      💡 %AI_0%
+    </p>
+
+
+    <h3 class="font-semibold mb-2">5. UTM Content (specific creative or ad variations)</h3>
+    <ul class="list-disc list-inside text-sm text-gray-800 space-y-1 mb-2">
+      <li>%UTMCONTENT_0%</li>
+      <li>%UTMCONTENT_1%</li>
+      <li>%UTMCONTENT_2%</li>
+    </ul>
+    <p class="italic text-sm text-gray-600 mb-6">
+           💡 %AI_1%
+    </p>
+
+
+    <h3 class="font-semibold mb-2">Total Referrers</h3>
+    <div class="overflow-x-auto mb-6">
+      <table class="table-auto w-full border border-gray-300 text-sm text-left">
+        <thead class="bg-gray-100">
+          <tr>
+            <th class="border px-3 py-2">Referrer</th>
+            <th class="border px-3 py-2">Visits</th>
+            <th class="border px-3 py-2">Distribution %</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td class="border px-3 py-2">%REFERRER_0_NAME%</td>
+            <td class="border px-3 py-2">%REFERRER_0_COUNT%</td>
+            <td class="border px-3 py-2">%REFERRER_0_PERCENT%</td>
+          </tr>
+          <tr>
+            <td class="border px-3 py-2">%REFERRER_1_NAME%</td>
+            <td class="border px-3 py-2">%REFERRER_1_COUNT%</td>
+            <td class="border px-3 py-2">%REFERRER_1_PERCENT%</td>
+          </tr>
+          <tr>
+            <td class="border px-3 py-2">%REFERRER_2_NAME%</td>
+            <td class="border px-3 py-2">%REFERRER_2_COUNT%</td>
+            <td class="border px-3 py-2">%REFERRER_2_PERCENT%</td>
+          </tr>
+          <tr>
+            <td class="border px-3 py-2">%REFERRER_3_NAME%</td>
+            <td class="border px-3 py-2">%REFERRER_3_COUNT%</td>
+            <td class="border px-3 py-2">%REFERRER_3_PERCENT%</td>
+          </tr>
+          <tr>
+            <td class="border px-3 py-2">%REFERRER_4_NAME%</td>
+            <td class="border px-3 py-2">%REFERRER_4_COUNT%</td>
+            <td class="border px-3 py-2">%REFERRER_4_PERCENT%</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div class="grow"></div>
+    <div class="flex justify-between items-center">
+      <div class="text-2xl">5/9</div>
+    <img class="w-10" src="%LOGO%">
+    </div>
+  </div>
+</body>
+
+</html>
--- a/dashboard/public/pdf/pages/page6.html
+++ b/dashboard/public/pdf/pages/page6.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+        rel="stylesheet">
+    <style>
+        * {
+            font-family: "Poppins";
+        }
+    </style>
+</head>
+
+<body>
+
+    <div class="w-dvw h-dvh p-8 flex flex-col">
+        <div class="font-bold text-4xl"> Engagement Analysis </div>
+        <div class="w-full h-[2px] bg-black mt-3"></div>
+        <p class="text-sm text-gray-700 mb-6 mt-4">
+            This section explores how users engage with your website: which pages attract the most
+            attention, where users disengage, and how long they stay on average. These insights reveal
+            what content works and what needs improvement.
+        </p>
+        <h3 class="font-semibold mb-2">Top 5 Most Viewed Pages</h3>
+        <ul class="list-disc list-inside text-sm text-gray-800 space-y-1 mb-2">
+            <li>%PAGE_0%</li>
+            <li>%PAGE_1%</li>
+            <li>%PAGE_2%</li>
+            <li>%PAGE_3%</li>
+            <li>%PAGE_4%</li>
+        </ul>
+        <h3 class="font-semibold mb-2">Top Entry Pages (where users land first)</h3>
+        <ul class="list-disc list-inside text-sm text-gray-800 space-y-1 mb-2">
+            <li>%ENTRY_PAGE_0%</li>
+            <li>%ENTRY_PAGE_1%</li>
+            <li>%ENTRY_PAGE_2%</li>
+            <li>%ENTRY_PAGE_3%</li>
+            <li>%ENTRY_PAGE_4%</li>
+        </ul>
+        <h3 class="font-semibold mb-2">Top Exit Pages (where users leave the site)</h3>
+        <ul class="list-disc list-inside text-sm text-gray-800 space-y-1 mb-2">
+            <li>%EXIT_PAGE_0%</li>
+            <li>%EXIT_PAGE_1%</li>
+            <li>%EXIT_PAGE_2%</li>
+            <li>%EXIT_PAGE_3%</li>
+            <li>%EXIT_PAGE_4%</li>
+        </ul>
+        <div class="grow"></div>
+        <div class="flex justify-between items-center">
+            <div class="text-2xl">6/9</div>
+          <img class="w-10" src="%LOGO%">
+        </div>
+    </div>
+</body>
+
+</html>
--- a/dashboard/public/pdf/pages/page7.html
+++ b/dashboard/public/pdf/pages/page7.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link
+    href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+    rel="stylesheet">
+  <style>
+    * {
+      font-family: "Poppins";
+    }
+  </style>
+</head>
+
+<body>
+
+  <div class="w-dvw h-dvh p-8 flex flex-col">
+    <div class="font-bold text-4xl"> Engagement Analysis </div>
+    <div class="w-full h-[2px] bg-black mt-3"></div>
+
+    <h3 class="font-semibold mb-2 mt-4">
+      Average Time on Page / Session
+    </h3>
+    <ul class="list-disc list-inside text-sm text-gray-800 space-y-1 mb-2">
+      <li> Avg. time on page: %AVG_PAGE_TIME%</li>
+      <li> Avg. session duration: %AVG_SESSION_TIME%</li>
+    </ul>
+
+    <h3 class="font-semibold mb-2">Tabella</h3>
+    <div class="overflow-x-auto mb-6">
+      <table class="table-auto w-full border border-gray-300 text-sm text-left">
+        <thead class="bg-gray-100">
+          <tr>
+            <th class="border px-3 py-2">Page URL</th>
+            <th class="border px-3 py-2">Views</th>
+            <th class="border px-3 py-2">Avg. Time Spent</th>
+            <th class="border px-3 py-2">Distribution %</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td class="border px-3 py-2">%ITEM_0_A%</td>
+            <td class="border px-3 py-2">%ITEM_0_B%</td>
+            <td class="border px-3 py-2">%ITEM_0_C%</td>
+            <td class="border px-3 py-2">%ITEM_0_D%</td>
+          </tr>
+          <tr>
+            <td class="border px-3 py-2">%ITEM_1_A%</td>
+            <td class="border px-3 py-2">%ITEM_1_B%</td>
+            <td class="border px-3 py-2">%ITEM_1_C%</td>
+            <td class="border px-3 py-2">%ITEM_1_D%</td>
+          </tr>
+          <tr>
+            <td class="border px-3 py-2">%ITEM_2_A%</td>
+            <td class="border px-3 py-2">%ITEM_2_B%</td>
+            <td class="border px-3 py-2">%ITEM_2_C%</td>
+            <td class="border px-3 py-2">%ITEM_2_D%</td>
+          </tr>
+          <tr>
+            <td class="border px-3 py-2">%ITEM_3_A%</td>
+            <td class="border px-3 py-2">%ITEM_3_B%</td>
+            <td class="border px-3 py-2">%ITEM_3_C%</td>
+            <td class="border px-3 py-2">%ITEM_3_D%</td>
+          </tr>
+          <tr>
+            <td class="border px-3 py-2">%ITEM_4_A%</td>
+            <td class="border px-3 py-2">%ITEM_4_B%</td>
+            <td class="border px-3 py-2">%ITEM_4_C%</td>
+            <td class="border px-3 py-2">%ITEM_4_D%</td>
+          </tr>
+          <tr>
+            <td class="border px-3 py-2">%ITEM_5_A%</td>
+            <td class="border px-3 py-2">%ITEM_5_B%</td>
+            <td class="border px-3 py-2">%ITEM_5_C%</td>
+            <td class="border px-3 py-2">%ITEM_5_D%</td>
+          </tr>
+          <tr>
+            <td class="border px-3 py-2">%ITEM_6_A%</td>
+            <td class="border px-3 py-2">%ITEM_6_B%</td>
+            <td class="border px-3 py-2">%ITEM_6_C%</td>
+            <td class="border px-3 py-2">%ITEM_6_D%</td>
+          </tr>
+          <tr>
+            <td class="border px-3 py-2">%ITEM_7_A%</td>
+            <td class="border px-3 py-2">%ITEM_7_B%</td>
+            <td class="border px-3 py-2">%ITEM_7_C%</td>
+            <td class="border px-3 py-2">%ITEM_7_D%</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div class="grow"></div>
+    <div class="flex justify-between items-center">
+      <div class="text-2xl">7/9</div>
+    <img class="w-10" src="%LOGO%">
+    </div>
+  </div>
+</body>
+
+</html>
--- a/dashboard/public/pdf/pages/page8.html
+++ b/dashboard/public/pdf/pages/page8.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link
+    href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+    rel="stylesheet">
+  <style>
+    * {
+      font-family: "Poppins";
+    }
+  </style>
+</head>
+
+<body>
+
+  <div class="w-dvw h-dvh p-8 flex flex-col">
+    <div class="font-bold text-4xl"> Audience Insights </div>
+    <div class="w-full h-[2px] bg-black mt-3"></div>
+
+    <p class="text-sm text-gray-700 mb-6 mt-4">
+      This section explores where your visitors come from, broken down by continent, country, region, and city.
+      Understanding the geographic distribution of your audience allows you to spot growth markets, tailor content to
+      local needs, and identify high-engagement regions that could be prioritized for campaigns or localization.
+    </p>
+
+    <h3 class="font-semibold mb-2 mt-4"> Continent Overview </h3>
+    <h3 class="font-semibold mb-2">Tabella</h3>
+    <div class="overflow-x-auto mb-6">
+      <table class="table-auto w-full border border-gray-300 text-sm text-left">
+        <thead class="bg-gray-100">
+          <tr>
+            <th class="border px-3 py-2">Continent</th>
+            <th class="border px-3 py-2">Visitors</th>
+            <th class="border px-3 py-2">Distribution %</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td class="border px-3 py-2">%CONTINENT_0_A%</td>
+            <td class="border px-3 py-2">%CONTINENT_0_B%</td>
+            <td class="border px-3 py-2">%CONTINENT_0_C%</td>
+          </tr>
+          <tr>
+            <td class="border px-3 py-2">%CONTINENT_1_A%</td>
+            <td class="border px-3 py-2">%CONTINENT_1_B%</td>
+            <td class="border px-3 py-2">%CONTINENT_1_C%</td>
+          </tr>
+          <tr>
+            <td class="border px-3 py-2">%CONTINENT_2_A%</td>
+            <td class="border px-3 py-2">%CONTINENT_2_B%</td>
+            <td class="border px-3 py-2">%CONTINENT_2_C%</td>
+          </tr>
+          <tr>
+            <td class="border px-3 py-2">%CONTINENT_3_A%</td>
+            <td class="border px-3 py-2">%CONTINENT_3_B%</td>
+            <td class="border px-3 py-2">%CONTINENT_3_C%</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <h3 class="font-semibold mb-2 mt-4"> Countries </h3>
+    <h3 class="font-semibold mb-2">Tabella</h3>
+    <div class="overflow-x-auto mb-6">
+      <table class="table-auto w-full border border-gray-300 text-sm text-left">
+        <thead class="bg-gray-100">
+          <tr>
+            <th class="border px-3 py-2">Country</th>
+            <th class="border px-3 py-2">Visitors</th>
+            <th class="border px-3 py-2">Distribution %</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td class="border px-3 py-2">%COUNTRY_0_A%</td>
+            <td class="border px-3 py-2">%COUNTRY_0_B%</td>
+            <td class="border px-3 py-2">%COUNTRY_0_C%</td>
+          </tr>
+          <tr>
+            <td class="border px-3 py-2">%COUNTRY_1_A%</td>
+            <td class="border px-3 py-2">%COUNTRY_1_B%</td>
+            <td class="border px-3 py-2">%COUNTRY_1_C%</td>
+          </tr>
+          <tr>
+            <td class="border px-3 py-2">%COUNTRY_2_A%</td>
+            <td class="border px-3 py-2">%COUNTRY_2_B%</td>
+            <td class="border px-3 py-2">%COUNTRY_2_C%</td>
+          </tr>
+          <tr>
+            <td class="border px-3 py-2">%COUNTRY_3_A%</td>
+            <td class="border px-3 py-2">%COUNTRY_3_B%</td>
+            <td class="border px-3 py-2">%COUNTRY_3_C%</td>
+          </tr>
+          <tr>
+            <td class="border px-3 py-2">%COUNTRY_4_A%</td>
+            <td class="border px-3 py-2">%COUNTRY_4_B%</td>
+            <td class="border px-3 py-2">%COUNTRY_4_C%</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <div class="grow"></div>
+    <div class="flex justify-between items-center">
+      <div class="text-2xl">8/9</div>
+    <img class="w-10" src="%LOGO%">
+    </div>
+  </div>
+</body>
+
+</html>
--- a/dashboard/public/pdf/pages/page9.html
+++ b/dashboard/public/pdf/pages/page9.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link
+    href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+    rel="stylesheet">
+  <style>
+    * {
+      font-family: "Poppins";
+    }
+  </style>
+</head>
+
+<body>
+
+  <div class="w-dvw h-dvh p-8 flex flex-col">
+    <div class="font-bold text-4xl"> Audience Insights </div>
+    <div class="w-full h-[2px] bg-black mt-3"></div>
+
+    <h3 class="font-semibold mb-2 mt-4"> Cities </h3>
+    <h3 class="font-semibold mb-2">Tabella</h3>
+    <div class="overflow-x-auto mb-6">
+      <table class="table-auto w-full border border-gray-300 text-sm text-left">
+        <thead class="bg-gray-100">
+          <tr>
+            <th class="border px-3 py-2">City</th>
+            <th class="border px-3 py-2">Visitors</th>
+            <th class="border px-3 py-2">Distribution %</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td class="border px-3 py-2">%CITY_0_A%</td>
+            <td class="border px-3 py-2">%CITY_0_B%</td>
+            <td class="border px-3 py-2">%CITY_0_C%</td>
+          </tr>
+          <tr>
+            <td class="border px-3 py-2">%CITY_1_A%</td>
+            <td class="border px-3 py-2">%CITY_1_B%</td>
+            <td class="border px-3 py-2">%CITY_1_C%</td>
+          </tr>
+          <tr>
+            <td class="border px-3 py-2">%CITY_2_A%</td>
+            <td class="border px-3 py-2">%CITY_2_B%</td>
+            <td class="border px-3 py-2">%CITY_2_C%</td>
+          </tr>
+          <tr>
+            <td class="border px-3 py-2">%CITY_3_A%</td>
+            <td class="border px-3 py-2">%CITY_3_B%</td>
+            <td class="border px-3 py-2">%CITY_3_C%</td>
+          </tr>
+          <tr>
+            <td class="border px-3 py-2">%CITY_4_A%</td>
+            <td class="border px-3 py-2">%CITY_4_B%</td>
+            <td class="border px-3 py-2">%CITY_4_C%</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div class="grow"></div>
+    <div class="flex justify-between items-center">
+      <div class="text-2xl">9/9</div>
+    <img class="w-10" src="%LOGO%">
+    </div>
+  </div>
+</body>
+
+</html>