Library message component update

src/features/common/assets/arrow-head-icon.component.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+export const ArrowHeadIconComponent: React.FC = () => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6 4L10 8L6 12"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      ></path>
+    </svg>
+  );
+};

src/features/common/components/auth0-cta/auth0-cta.component.tsx

@@ -2,10 +2,9 @@ import React from "react";
 import { getLocalizedSecondaryFont } from "@/libs/theme/fonts";
 import clsx from "clsx";
 import { Auth0DictionaryModel } from "@/features/localization/models/auth0-dictionary.model";
-import { BoxComponent } from "@/features/common/components/box/box.component";
 import styles from "./auth0-cta.module.scss";
 import Link from "next/link";
-import NextArrow from "@/features/common/assets/arrow-right.svg";
+import { ArrowHeadIconComponent } from "../../assets/arrow-head-icon.component";
 
 interface Auth0CtaComponentProps {
   languageCode: string;
@@ -17,40 +16,36 @@ export const Auth0CtaComponent: React.FC<Auth0CtaComponentProps> = ({
   dictionary,
 }) => {
   return (
-    <BoxComponent
-      containerClassName={styles.container}
-      contentClassName={styles.content}
-      wrapperClassName={styles.wrapper}
-    >
-      <div className={styles.cta}>
-        <div className={styles.cta__copy}>
-          <div className={styles.cta__text}>
-            <h3
-              className={clsx(
-                getLocalizedSecondaryFont(languageCode),
-                styles.cta__title,
-              )}
-            >
-              {dictionary.title}
-            </h3>
-            <p className={styles.cta__description}>{dictionary.description}</p>
-          </div>
-          {dictionary.ctaButton && (
-            <Link
-              target="_blank"
-              rel="noopener noreferrer"
-              className={styles.button}
-              href={dictionary.ctaButton.path}
-            >
-              {dictionary.ctaButton.label}
-              <div className={styles.button__arrow}>
-                <NextArrow />
+    <div className={styles.cta_container}>
+      <div className={styles.cta_wrapper}>
+        <div className={styles.cta_content}>
+          <div className={styles.cta_cta}>
+            <div className={styles.cta__copy}>
+              <div className={styles.cta__text}>
+                <h3
+                  className={clsx(
+                    getLocalizedSecondaryFont(languageCode),
+                    styles.cta__title
+                  )}
+                >
+                  {dictionary.title}
+                </h3>
+                <p className={styles.cta__description}>
+                  {dictionary.description}
+                </p>
               </div>
-            </Link>
-          )}
+              <Link
+                className={styles.cta__button}
+                href={dictionary.ctaButton.path}
+              >
+                {dictionary.ctaButton.label}
+                <ArrowHeadIconComponent />
+              </Link>
+            </div>
+            <div className={styles.cta__media}></div>
+          </div>
         </div>
-        <div className={styles.cta__media} />
       </div>
-    </BoxComponent>
+    </div>
   );
 };