FEATURE handling internal link reusable class

resources/css/base/links.css

@@ -9,7 +9,23 @@ a[target='_blank'] {
     background-position: center;
   }
 }
-
+.internal-link-with-icon {
+  @apply flex items-center;
+  &:after {
+    transition: transform 0.3s ease-out;
+    @apply content-[''] w-10 h-10 ml-2 inline-block;
+    background-image: url('../resources/img/carhop-fleche-lien-externe-full--outline-green.svg');
+  }
+  &:hover:after {
+    transform: rotate(45deg);
+  }
+  &:hover {
+    filter: brightness(1.2);
+    text-decoration: underline;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 8px;
+  }
+}
 .no-external-icon {
   &:after {
     @apply !hidden;

resources/img/carhop-fleche-lien-externe-full--outline-green.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="fleche-lien-externe-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+        stroke: #136F63;
+        stroke-width: 2px;
+      }
+    </style>
+  </defs>
+  <circle class="cls-1" cx="16" cy="16" r="15"/>
+  <g>
+    <path class="cls-1" d="M21.15,10.59l-9.38,10.02"/>
+    <path class="cls-1" d="M21.15,21.4v-10.81h-10.32"/>
+  </g>
+</svg>