use static dir for images reference since scss

assets/images/svg/curve-1.svg

@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="1440" height="96" preserveAspectRatio="none" viewBox="0 0 1440 96">
-  <g mask="url(&quot;#SvgjsMask1900&quot;)" fill="none">
-    <path d="m0 96 80-5.3C160 85 320 75 480 64s320-21 480-21.3c160 .3 320 10.3 400 16l80 5.3V0H0v96Z" fill="#0d242e"></path>
-  </g>
-</svg>

assets/images/svg/curve-2.svg

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg version="1.1" width="1440" height="150" preserveAspectRatio="none" viewBox="0 0 1440 150" id="svg2" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
-  <defs id="defs2" />
-  <g mask="url(&quot;#SvgjsMask1900&quot;)" fill="none" id="g2" transform="matrix(1,0,0,0.99256931,0,1.1145986)" style="display:inline">
-    <path
-       d="m 0,90.877057 c 144,11.800003 432,56.400003 719.99999,59.000003 288.00001,2.6 576.00001,-36.8 720.00001,-46 V -1.1229428 H 0 Z"
-       fill="#43b29d" id="path1" />
-    <path
-       d="M 0,7.4984182 C 279.30004,136.66106 461.78548,-19.058828 1440,16.877057 V -0.56147279 H 0 Z"
-       fill="white" id="path2" transform="translate(0,-0.56147001)" />
-  </g>
-</svg>

assets/images/svg/curve-3.svg

@@ -1,22 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   version="1.1"
-   width="1440"
-   height="96"
-   preserveAspectRatio="none"
-   viewBox="0 0 1440 96"
-   id="svg1"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <defs
-     id="defs3" />
-  <g
-     mask="url(&quot;#SvgjsMask1900&quot;)"
-     fill="none"
-     id="g1">
-    <path
-       d="M 0,0 80,5.3 C 160,11 320,21 480,32 640,43 800,53 960,53.3 1120,53 1280,43 1360,37.3 L 1440,32 V 96 H 0 Z"
-       fill="#0d242e"
-       id="path1" />
-  </g>
-</svg>

assets/images/svg/curve-4.svg

@@ -1,24 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   version="1.1"
-   width="1440"
-   height="180"
-   preserveAspectRatio="none"
-   viewBox="0 0 1440 180"
-   id="svg4"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <defs
-     id="defs4" />
-  <g
-     mask="url(&quot;#SvgjsMask1900&quot;)"
-     fill="none"
-     id="g4"
-     transform="matrix(-1,0,0,0.99256931,1440,1.114599)"
-     style="display:inline;fill:#ffffff">
-    <path
-       d="M 1440,54.288803 C 1029.7929,-51.934711 370.34866,55.72286 0,44.910164 V 180.22459 h 1440 z"
-       fill="white"
-       id="path2" />
-  </g>
-</svg>

assets/scss/custom.scss

@@ -19,12 +19,10 @@ $icon-red: #f0384d;
 $icon-yellow: #fcc958;
 
 // Pattern
-// hugo needs to precompile images in public dir, and make it automatically with images called from content.
-// here we need to use it in css, then need to generate it, calling it first from a content md file.
 @mixin add-bg-pattern($id) {
     background-repeat: repeat;
     background-position: top center;
-    background-image: url('../images/bg/pattern-#{$id}.png'); 
+    background-image: url('/images/bg/pattern-#{$id}.png'); 
 }
 
 // Sections bg transitions
@@ -35,7 +33,7 @@ $icon-yellow: #fcc958;
         position: absolute;
         width: 100%; 
         height: 100%;
-        background-image: url('../images/svg/curve-#{$id}.svg');
+        background-image: url('/images/svg/curve-#{$id}.svg');
         background-size: contain;
         background-position: $pos center;
         background-repeat: no-repeat;