src/lib/components/Footer.svelte

@@ -9,6 +9,66 @@
 </script>
 
 <footer>
+  <div class="footer-main">
+  <div class="footer-decoration" aria-hidden="true">
+    <svg
+      class="footer-decoration__svg"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 1440 480"
+      preserveAspectRatio="xMidYMid slice"
+      fill="none"
+    >
+      <g stroke="white" stroke-linecap="round">
+        <circle
+          cx="1180"
+          cy="360"
+          r="130"
+          stroke-width="2"
+          stroke-opacity="0.14"
+          stroke-dasharray="10 8"
+        />
+        <circle cx="1180" cy="360" r="98" stroke-width="1" stroke-opacity="0.08" />
+        <path
+          d="M60 100 Q220 20 400 110 T720 80"
+          stroke-width="1.5"
+          stroke-opacity="0.16"
+          stroke-dasharray="6 10"
+        />
+        <path
+          d="M100 320 Q340 260 560 340 T980 300"
+          stroke-width="1.2"
+          stroke-opacity="0.12"
+          stroke-dasharray="4 12"
+        />
+        <path
+          d="M200 60 L240 100 M240 60 L200 100"
+          stroke-width="1"
+          stroke-opacity="0.1"
+        />
+        <path
+          d="M320 400 L350 430 M350 400 L320 430"
+          stroke-width="1"
+          stroke-opacity="0.1"
+        />
+        <path
+          d="M900 140 L930 170 M930 140 L900 170"
+          stroke-width="1"
+          stroke-opacity="0.08"
+        />
+        <circle cx="180" cy="200" r="4" fill="white" fill-opacity="0.12" stroke="none" />
+        <circle cx="210" cy="220" r="3" fill="white" fill-opacity="0.1" stroke="none" />
+        <circle cx="240" cy="205" r="3.5" fill="white" fill-opacity="0.1" stroke="none" />
+        <circle cx="680" cy="90" r="3" fill="white" fill-opacity="0.08" stroke="none" />
+        <circle cx="710" cy="105" r="4" fill="white" fill-opacity="0.08" stroke="none" />
+      </g>
+      <path
+        d="M1320 40 L1348 8 L1356 16 L1328 48 Z"
+        fill="white"
+        fill-opacity="0.1"
+      />
+    </svg>
+  </div>
+
   <div id="content-container">
     <section class="footer-block">
       <img
@@ -55,7 +115,24 @@
       >
     </section>
   </div>
+  </div>
   <section class="credits-container">
+    <div class="credits-decoration" aria-hidden="true">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 1440 48"
+        preserveAspectRatio="none"
+        fill="none"
+      >
+        <path
+          d="M0 24 Q180 8 360 24 T720 24 T1080 24 T1440 24"
+          stroke="white"
+          stroke-width="1"
+          stroke-opacity="0.2"
+          stroke-dasharray="5 9"
+        />
+      </svg>
+    </div>
     Copyright {new Date().getFullYear()}
 
     <a href="https://leomurca.xyz" target="_blank" rel="noreferrer"
@@ -69,11 +146,31 @@
 
 <style>
   footer {
-    background-color: var(--color-primary);
     width: 100%;
   }
 
+  .footer-main {
+    position: relative;
+    overflow: hidden;
+    background-color: var(--color-primary);
+  }
+
+  .footer-decoration {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  .footer-decoration__svg {
+    width: 100%;
+    height: 100%;
+    opacity: 0.95;
+  }
+
   #content-container {
+    position: relative;
+    z-index: 1;
     width: 85%;
     display: flex;
     justify-content: space-between;
@@ -154,12 +251,30 @@
   }
 
   .credits-container {
+    position: relative;
+    z-index: 1;
     background-color: var(--color-secondary);
     color: white;
     margin: 0 auto;
     padding: 20px 30px;
     padding-left: 9%;
     width: 100%;
+    overflow: hidden;
+  }
+
+  .credits-decoration {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 48px;
+    pointer-events: none;
+    transform: translateY(-50%);
+  }
+
+  .credits-decoration svg {
+    width: 100%;
+    height: 100%;
   }
 
   .credits-container a {