feat: perf

src/components/common/footer/footer.module.scss

@@ -186,7 +186,7 @@
 }
 
 .connect__links {
-  > div {
+  > li:last-of-type {
     display: grid;
     align-content: flex-start;
     gap: tovw(16px, 'default', 16px);
@@ -229,7 +229,7 @@
       }
     }
 
-    div {
+    > li {
       display: flex;
       gap: tovw(37px, 'default', 24px);
       @media screen and (max-width: 800px) {

src/components/common/footer/index.tsx

@@ -50,6 +50,7 @@ export const Footer = () => {
             />
             <button>
               <ArrowLink />
+              <span className="sr-only">Send</span>
             </button>
           </form>
         </Container>
@@ -112,7 +113,7 @@ export const Footer = () => {
                   Connect
                 </Link>
               </li>
-              <div>
+              <li>
                 {ConnectLinks.map((link) => {
                   return (
                     <li key={link.title}>
@@ -123,14 +124,14 @@ export const Footer = () => {
                     </li>
                   )
                 })}
-              </div>
+              </li>
             </ul>
           </nav>
         </Container>
         <Container>
           <nav className={s['sub__footer']}>
             <ul>
-              <div>
+              <li>
                 <li>
                   <Link href="/privacy-policy" variant="nav">
                     Privacy Policy
@@ -141,7 +142,7 @@ export const Footer = () => {
                     Terms of Use
                   </Link>
                 </li>
-              </div>
+              </li>
               <li>
                 <p>Laconic, The Source of Proof</p>
               </li>

src/components/common/header/index.tsx

@@ -16,6 +16,7 @@ export const Header = () => {
         <NextLink href="/">
           <a>
             <Logo />
+            <span className="sr-only">Laconic</span>
           </a>
         </NextLink>
         <ul className="hide-on-mobile">

src/components/sections/homepage/hero/index.tsx

@@ -53,17 +53,23 @@ const Hero = () => {
         Get Started
       </Button>
       <div className={s['scroll']}>
-        <div className="hide-on-mobile">
+        <div>
           <p>C:</p>
           <Flag className={s['flag']} />
         </div>
         <div>
-          <Heading as="h5" variant="xs" font="dmmono" centered>
+          <Heading
+            as="span"
+            centered
+            font="dmmono"
+            style={{ display: 'block' }}
+            variant="xs"
+          >
             Scroll Down
           </Heading>
           <ArrowDotted className={s['arrow']} />
         </div>
-        <div>
+        <div className="hide-on-mobile">
           <p>Home</p>
           <ul>
             <li>