feat: many design changes

packages/base/Resources/Public/Scss/abstracts/_icons.scss

@@ -0,0 +1,62 @@
+.ci {
+  position: relative;
+}
+
+.ci::before {
+  position: relative;
+  top: 3px;
+  display: inline-block;
+  content: ' ';
+  width: 1em;
+  height: 1em;
+  mask-size: 1em;
+  mask-repeat: no-repeat;
+  background-color: currentColor;
+  mask-position: center;
+}
+
+.ci-instagram::before {
+  mask-image: url(../Icons/instagram.svg);
+}
+.ci-tiktok::before {
+  mask-image: url(../Icons/tiktok.svg);
+}
+.ci-linkedin::before {
+  mask-image: url(../Icons/linkedin.svg);
+}
+.ci-x::before {
+  mask-image: url(../Icons/x.svg);
+}
+.ci-email::before {
+  mask-image: url(../Icons/email.svg);
+}
+.ci-phone::before {
+  mask-image: url(../Icons/phone.svg);
+}
+
+
+a[href*="instagram.com"], a[href*="tiktok.com"], a[href*="linkedin.com"], a[href*="twitter.com"], a[href*="x.com"] {
+  position: relative;
+  top: 3px;
+  display: inline-block;
+  content: ' ';
+  width: 1em;
+  height: 1em;
+  mask-size: 1em;
+  mask-repeat: no-repeat;
+  background-color: currentColor;
+  mask-position: center;
+}
+
+a[href*="instagram.com*"]::before {
+  mask-image: url(../Icons/instagram.svg);
+}
+a[href*="tiktok.com"]::before {
+  mask-image: url(../Icons/tiktok.svg);
+}
+a[href*="linkedin.com"]::before {
+  mask-image: url(../Icons/linkedin.svg);
+}
+a[href*="x.com"]::before {
+  mask-image: url(../Icons/x.svg);
+}