Several changes

src/components/Link/Link.scss

@@ -13,14 +13,13 @@
   box-shadow: 0 3px 12px 0 rgba(255, 0, 105, 0.3);
   background: var(--lightmode-pink);
   cursor: pointer;
-  transition:
-    transform 80ms ease-in-out,
-    box-shadow 80ms ease-in-out;
   text-decoration: none;
   width: fit-content;
+  transition-duration: 80ms;
+  transition-timing-function: linear;
 
   &:hover {
-    transform: scale(1.05);
+    transform: scale(1.1);
     box-shadow: 0 4px 14px 0 rgba(255, 0, 105, 0.44);
   }
   &:active {

src/components/Link/Link.tsx

@@ -18,8 +18,7 @@ export const Link =(props: LinkProps) => {
       className={classNames('link', {'link--tertiary': props.tertiary}, props.className)}
       href={props.href}
     >
-      <span>{props.children}</span>
-      {props.icon}
+      {props.children}
     </a>
   );
 }

src/components/Navbar/Navbar.astro

@@ -1,8 +1,9 @@
 ---
 import { Logo } from "../Logo";
+import { Plus } from "../../icons/Plus";
 import { Link } from "../Link/Link";
+import getTranslatedContent from "@utils/directus";
 import "./Navbar.scss";
-import getTranslatedContent from "../../utils/directus";
 
 const {lang} = Astro.params;
 const content = await getTranslatedContent("Header", lang!);
@@ -26,9 +27,12 @@ const content = await getTranslatedContent("Header", lang!);
     </li>
     <li>
       <Link
-        href="/new"
+        href="https://scrumlr.io/new"
         className="navbar__link"
-        >{content.createBoard}</Link>
+      >
+        <span>{content.createBoard}</span>
+        <Plus />
+      </Link>
     </li>
   </ul>
 </nav>

src/components/Navbar/Navbar.scss

@@ -38,15 +38,13 @@
 .navbar > ul > li:nth-of-type(3),
 .navbar > ul > li:nth-of-type(4) {
   display: none;
+
 }
 
 .navbar > ul > li:nth-of-type(5) {
   justify-self: flex-end;
 }
 
-.navbar a:hover {
-  color: var(--lightmode-pink);
-}
 
 @media (min-width: 768px) {
   .navbar > ul {
@@ -58,17 +56,21 @@
   .navbar > ul > li:nth-of-type(3),
   .navbar > ul > li:nth-of-type(4) {
     display: block;
-  }
 
-  .navbar a {
-    text-decoration: none;
-    color: var(--lightmode-black);
-    font-size: 1.125rem;
-    font-weight: 600;
-    cursor: pointer;
+    a {
+      text-decoration: none;
+      color: var(--lightmode-black);
+      font-size: 1.125rem;
+      font-weight: 600;
+      cursor: pointer;
 
-    > span {
-      color: var(--white);
+      > span {
+        color: var(--white);
+      }
+    }
+
+    a:hover {
+      color: var(--lightmode-pink);
     }
   }
 }
@@ -94,16 +96,18 @@
   .navbar--opaque {
     background-color: rgba(30, 38, 56, 0.9);
   }
+}
 
-  .navbar a {
-    color: var(--white);
-
-    &:hover {
-      color: var(--darkmode-pink);
+@media (prefers-color-scheme:dark) and (min-width: 768px) {
+  .navbar > ul > li:nth-of-type(2),
+  .navbar > ul > li:nth-of-type(3),
+  .navbar > ul > li:nth-of-type(4) {
+    a {
+      color: var(--white);
     }
 
-    &:hover > span {
-      color: var(--white);
+    a:hover {
+      color: var(--darkmode-pink);
     }
   }
 }

src/icons/Plus.tsx

@@ -0,0 +1,6 @@
+export const Plus = () => (
+  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M24 16L8 16" stroke="currentColor" stroke-width="2"/>
+    <path d="M16 8L16 24" stroke="currentColor" stroke-width="2"/>
+  </svg>
+);

src/views/AboutUs/AboutUs.astro

@@ -39,7 +39,7 @@ const content = await getTranslatedContent("AboutUs_Section", lang!);
     <h2>{content.getStartedHeader}</h2>
     <p>{content.getStartedText}</p>
 <Link
-  href="/new"
+  href="https://scrumlr.io/new"
   ariaLabel={content.cta}
   className="about-us__cta-button"
 >

src/views/Features/Features.astro

@@ -44,7 +44,7 @@ const content = await getTranslatedContent("Features_Section", lang!);
           <p>{content.details3}</p>
       </div>
     </div>
-    <Link ariaLabel={content.cta} className="features__cta-button">{content.cta}</Link>
+    <Link href="https://scrumlr.io/new" ariaLabel={content.cta} className="features__cta-button">{content.cta}</Link>
     <img
       class="features__bg-line"
       src="/assets/features/features_line-bg_light.svg"

src/views/Feedback/FeedbackCard.tsx

@@ -24,7 +24,7 @@ const FeedbackCard = (item: FeedbackItem, posistionPercentage: number) => {
           alt={item.name}
         />
         <div className="feedback_card-author-info">
-          <h4 className="feedback_card-author-name">{item.name}</h4>
+          <span className="feedback_card-author-name">{item.name}</span>
           <span className="feedback_card-author-position">
             {item.role}
             {item.role && item.company && ", "}

src/views/Feedback/FeedbackCarousel.scss

@@ -103,11 +103,11 @@
   .feedback_card-author {
     display: flex;
     flex-direction: row;
+    align-items: center;
     gap: 16px;
 
     img {
       width: 42px;
-      height: 42px;
       border-radius: 50%;
     }
 
@@ -118,6 +118,7 @@
 
       .feedback_card-author-name {
         margin: 0;
+        font-weight: bold;
       }
     }
   }

src/views/Feedback/FeedbackCarousel.tsx

@@ -113,6 +113,7 @@ const FeedbackCarousel = ({ items }: FeedbackCarouselProps) => {
               key={index}
               className={`feedback-carousel__button ${dotState}`}
               onClick={() => slideTo(index, true)}
+              aria-label={`Feedback Slide ${index + 1}`}
             >
               <div className="feedback-carousel__dot" />
             </button>