chore: add a Footer component

2 files changed, 12 insertions, 5 deletions

diff --git a/src/components/molecules/buttons/back-to-top.module.scss b/src/components/molecules/buttons/back-to-top.module.scss
index 1abf1f6..9721bff 100644
--- a/src/components/molecules/buttons/back-to-top.module.scss
+++ b/src/components/molecules/buttons/back-to-top.module.scss
@@ -1,21 +1,24 @@
 @use "@styles/abstracts/functions" as fun;
 
 .wrapper {
-  a {
+  .link {
+    width: clamp(#{fun.convert-px(44)}, 6vw, #{fun.convert-px(55)});
+    height: clamp(#{fun.convert-px(44)}, 6vw, #{fun.convert-px(55)});
+
     svg {
       width: 100%;
     }
 
     :global {
       .arrow-head {
-        transform: translateY(30%) scale(1.1);
+        transform: translateY(30%) scale(1.2);
         transition: all 0.45s ease-in-out 0s;
       }
 
       .arrow-bar {
         opacity: 0;
         transform: translateY(30%) scaleY(0);
-        transition: transform 0.4s ease-in-out 0s, opacity 0.1s linear 0.4s;
+        transition: transform 0.45s ease-in-out 0s, opacity 0.1s linear 0.2s;
       }
     }
 
@@ -29,7 +32,6 @@
         .arrow-bar {
           opacity: 1;
           transform: translateY(0) scaleY(1);
-          transition: transform 0.45s ease-in-out 0s;
         }
       }
 
diff --git a/src/components/molecules/buttons/back-to-top.tsx b/src/components/molecules/buttons/back-to-top.tsx
index 56c5247..8a52231 100644
--- a/src/components/molecules/buttons/back-to-top.tsx
+++ b/src/components/molecules/buttons/back-to-top.tsx
@@ -30,7 +30,12 @@ const BackToTop: VFC<BackToTopProps> = ({ className = '', target }) => {
 
   return (
     <div className={`${styles.wrapper} ${className}`}>
-      <ButtonLink shape="square" target={`#${target}`} aria-label={linkName}>
+      <ButtonLink
+        shape="square"
+        target={`#${target}`}
+        aria-label={linkName}
+        className={styles.link}
+      >
         <Arrow direction="top" />
       </ButtonLink>
     </div>