style changes

src/pages/media-pesata.astro

@@ -1,42 +1,21 @@
 ---
 import '@/styles/pages/media-pesata.css'
 import PageLayout from '../layouts/PageLayout.astro'
+
+import { MediaPesataApp } from '@/client/MediaPesataApp'
 ---
 
-<PageLayout title="Voto Laurea" description="Calcola la tua media pesata e il voto di laurea seguendo le regole del dipartimento">
+<PageLayout
+    title="Voto Laurea"
+    description="Calcola la tua media pesata e il voto di laurea seguendo le regole del dipartimento"
+>
     <div class="media-pesata-container">
         <h1>Calcolo Media e Voto di Laurea</h1>
-        <p>Calcola la tua media pesata e il voto con cui ti siederai alla discussione di laurea, seguendo le regole del dipartimento di Matematica.</p>
+        <p>
+            Calcola la tua media pesata e il voto con cui ti siederai alla discussione di laurea, seguendo le regole del
+            dipartimento di Matematica.
+        </p>
 
-        <div id="media-pesata-app"></div>
+        <MediaPesataApp client:load />
     </div>
 </PageLayout>
-
-<script>
-    // Importiamo e inizializziamo l'applicazione
-    import('../client/MediaPesataApp')
-        .then(module => {
-            const { initMediaPesataApp } = module
-            initMediaPesataApp()
-        })
-</script>
-
-<style>
-    .media-pesata-container {
-        max-width: 1200px;
-        margin: 0 auto;
-        padding: 2rem;
-    }
-
-    h1 {
-        text-align: center;
-        margin-bottom: 1rem;
-        color: var(--color-primary);
-    }
-
-    p {
-        text-align: center;
-        margin-bottom: 2rem;
-        color: var(--color-text-secondary);
-    }
-</style>