a11y pass

components/core/Navbar/Navbar.tsx

@@ -42,7 +42,7 @@ const Navbar: FC<Props> = ({ className }) => {
       </div>
 
       <div className="flex pb-4 lg:px-6 lg:hidden">
-        <Searchbar />
+        <Searchbar id="mobileSearch" />
       </div>
     </div>
   )

components/core/Searchbar/Searchbar.tsx

@@ -5,9 +5,10 @@ import { useRouter } from 'next/router'
 
 interface Props {
   className?: string
+  id?: string
 }
 
-const Searchbar: FC<Props> = ({ className }) => {
+const Searchbar: FC<Props> = ({ className, id = 'search' }) => {
   const router = useRouter()
 
   useEffect(() => {
@@ -16,14 +17,14 @@ const Searchbar: FC<Props> = ({ className }) => {
 
   return (
     <label
-      htmlFor="search"
+      htmlFor={id}
       className={cn(
         'relative text-sm bg-accents-1 text-base w-full transition-colors duration-150',
         className
       )}
     >
       <input
-        id="search"
+        id={id}
         className={s.input}
         placeholder="Search for products..."
         defaultValue={router.query.q}

components/ui/Hero/Hero.tsx

@@ -2,7 +2,7 @@ import React, { FC } from 'react'
 import { Container } from '@components/ui'
 import { RightArrow } from '@components/icon'
 import s from './Hero.module.css'
-
+import Link from 'next/link'
 interface Props {
   className?: string
   headline: string
@@ -21,10 +21,12 @@ const Hero: FC<Props> = ({ headline, description }) => {
             <p className="mt-5 text-xl leading-7 text-accent-2 text-white">
               {description}
             </p>
-            <a className="text-white pt-3 font-bold hover:underline flex flex-row cursor-pointer w-max-content">
-              <span>Read it here</span>
-              <RightArrow width="20" heigh="20" className="ml-1" />
-            </a>
+            <Link href="/blog">
+              <a className="text-white pt-3 font-bold hover:underline flex flex-row cursor-pointer w-max-content">
+                Read it here
+                <RightArrow width="20" heigh="20" className="ml-1" />
+              </a>
+            </Link>
           </div>
         </div>
       </Container>