feat[ frontend / ui-core ]: implementate pagine di errore e miglioramenti UX ai componenti

Error Handling: Introdotte nuove pagine di errore dedicate (403, 404, 500 e generica) e aggiornata la logica di routing in App.svelte per la gestione degli stati di errore.

Button Component: Estese le funzionalità del componente per supportare link diretti e personalizzazione della larghezza del bordo.

Header Component: Ottimizzata la UX implementando la scomparsa dell'header durante lo scroll.

Refactoring & Style: Aggiornati gli stili globali per coerenza visiva e rimossi i file obsoleti relativi alle vecchie pagine di errore.

Co-authored-by: Copilot <copilot@github.com>

src/components/Button/Button.css

@@ -2,7 +2,6 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    border: none;
     background-color: var(--button-color);
     color: var(--button-text-color);
     padding: var(--button-padding);
@@ -10,7 +9,10 @@
     font: inherit;
     cursor: pointer;
     font-weight: bold;
-    transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease;
+    transition: transform 0.2s, opacity 0.2s, background-color 0.2s, box-shadow 0.2s;
+    text-decoration: none;
+    border: none;
+    box-shadow: inset 0 0 0 var(--button-border-width) var(--primary-color);
 }
 
 .button:hover {
@@ -23,6 +25,6 @@
 }
 
 .button:focus-visible {
-    outline: 2px solid rgba(255, 255, 255, 0.85);
+    outline: 2px solid var(--primary-color);
     outline-offset: 3px;
 }

src/components/Button/Button.svelte

@@ -1,16 +1,28 @@
 <script>
     import './Button.css'
 
-    export let color = '#1343F0'
+    export let color = 'var(--primary-color)'
     export let text = 'Button'
-    export let textColor = '#ffffff'
+    export let textColor = '#fff'
     export let round = '8px'
     export let padding = '8px 24px'
+    export let href = null
+    export let borderWidth = '0px'
 </script>
 
-<button
-    class="button"
-    style={`--button-color: ${color}; --button-text-color: ${textColor}; --button-radius: ${round}; --button-padding: ${padding};`}
->
-    {text}
-</button>
+{#if href}
+    <a
+        class="button"
+        style={`--button-color: ${color}; --button-text-color: ${textColor}; --button-radius: ${round}; --button-padding: ${padding}; --button-border-width: ${borderWidth};`}
+        {href}
+    >
+        {text}
+    </a>
+{:else}
+    <button
+        class="button"
+        style={`--button-color: ${color}; --button-text-color: ${textColor}; --button-radius: ${round}; --button-padding: ${padding}; --button-border-width: ${borderWidth};`}
+    >
+        {text}
+    </button>
+{/if}

src/components/Footer/Footer.css

@@ -1,7 +1,6 @@
-p, a, h4 {
+.footer p, .footer a, .footer h4 {
     font-size: 0.7rem;
     margin: 0;
-    transition: color 0.2s;
 }
 
 .footer {

src/components/Header/Header.css

@@ -1,7 +1,15 @@
 .header {
-    position: sticky;
+    position: fixed;
     top: 0;
+    left: 0;
+    width: 100%;
     z-index: 100;
+    transform: translateY(0);
+    transition: transform 0.28s ease;
+}
+
+.header.hidden {
+    transform: translateY(calc(-100% - 8px));
 }
 
 .header-container {
@@ -10,7 +18,7 @@
     padding: 0 20px;
     display: flex;
     align-items: center;
-    height: 140px;
+    height: var(--navbar-height);
 }
 
 .logo-img{

src/components/Header/Header.svelte

@@ -1,15 +1,45 @@
 <script>
+    import { onMount } from 'svelte'
     import './Header.css'
     import Button from '../Button/Button.svelte'
 
     let activeNav = 'home'
+    let isHidden = false
+    let lastScrollY = 0
+
+    const SCROLL_DELTA = 8
+    const TOP_OFFSET = 24
 
     function navigate(section) {
         activeNav = section
     }
+
+    function handleScroll() {
+        const currentScrollY = window.scrollY || 0
+        const diff = currentScrollY - lastScrollY
+
+        if (currentScrollY <= TOP_OFFSET) {
+            isHidden = false
+        } else if (diff > SCROLL_DELTA) {
+            isHidden = true
+        } else if (diff < -SCROLL_DELTA) {
+            isHidden = false
+        }
+
+        lastScrollY = currentScrollY
+    }
+
+    onMount(() => {
+        lastScrollY = window.scrollY || 0
+        window.addEventListener('scroll', handleScroll, { passive: true })
+
+        return () => {
+            window.removeEventListener('scroll', handleScroll)
+        }
+    })
 </script>
 
-<header class="header" id="home">
+<header class="header" class:hidden={isHidden} id="home">
     <div class="header-container">
         <div class="logo">
             <a href="/" aria-label="CIMA PROGETTI home">