This is my link component

<div className={styles.aboutCareer}>
    <Link href="/pages/about" className={`${mainStyles.Link} ${styles.fontzainregular}`}>01  about</Link>
    <Link href="/pages/career" className={`${mainStyles.Link} ${styles.fontzainregular}`}>02  career</Link>
</div>

I did this for my <a> tag

<motion.a
  whileHover={{
    scale: 1.1,
  }}
  href="https://x.com/linktomyid" 
  className={`${mainStyles.Link} ${styles.fontzainregular}`} 
  target='_blank'>
  03  x 
</motion.a>

//css file

.fontzainregular {
    font-family: "Zain-Regular";
    font-size: var(--16px);
}

.Link {
    text-decoration: none;
    color: inherit;
}

I want to apply these same styles to myLink component and I dont want to use react routers.