feat: animate homepage svgs (#2908)

Author: rivka-ungar

packages/core/src/storybook/stand-alone-documentaion/welcome/hero/Hero.module.scss

@@ -29,6 +29,28 @@
   }
 }
 
+.arrowIcon {
+  path {
+    stroke-dasharray: 1000;
+    stroke-dashoffset: 1000;
+    animation: drawSvg 2s ease-in-out forwards;
+  }
+}
+
+.heartIcon {
+  path {
+    stroke-dasharray: 800;
+    stroke-dashoffset: 800;
+    animation: drawSvg 2s ease-in-out 0.8s forwards;
+  }
+}
+
+@keyframes drawSvg {
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
 @media screen and (max-width: 1200px) {
   .hero {
     .header {

packages/core/src/storybook/stand-alone-documentaion/welcome/hero/icons/ArrowIcon.tsx

@@ -11,7 +11,7 @@ export default function ArrowIcon({ className }: { className?: string }) {
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M142.191 52.8681L107.627 41.1405M142.191 52.8681L114.507 85.239M142.191 52.8681C50.1209 94.2659 34.4833 12.7837 63.7408 4.73466C92.9982 -3.31434 96.5293 100.303 4.0957 57.5865"
+        d="M4.09567 56.5805C96.1657 97.9783 94.0459 0.947456 65 3.99989C35.9541 7.05233 46.6909 95.7276 142.191 51.7276L107.627 40L142.191 51.7276L114.507 84.0985"
         stroke="#FF5A85"
         strokeWidth="7.14286"
         strokeLinecap="round"