feat: implemented footer

src/index.css

@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+* {
+  box-sizing: border-box;
+}
+
 a {
   font-weight: 500;
   color: #646cff;

src/layout/footer.tsx

@@ -0,0 +1,45 @@
+import styles from '../styles/footer.module.scss'
+
+export const Footer = () => {
+  return (
+    <div className={styles.secMainFooterWrapper}>
+      <div className={styles.secMainFooter}>
+        <p className={styles.secMainFooterPara}>
+          Built with&nbsp;
+          <a
+            className={styles.secMainFooterParaLink}
+            href='https://github.com/nostr-protocol/nostr'
+            target='_blank'
+          >
+            Nostr
+          </a>{' '}
+          by&nbsp;
+          <a
+            className={styles.secMainFooterParaLink}
+            href='https://primal.net/p/npub18n4ysp43ux5c98fs6h9c57qpr4p8r3j8f6e32v0vj8egzy878aqqyzzk9r'
+            target='_blank'
+          >
+            Freakoverse
+          </a>
+          , with the support of{' '}
+          <a className={styles.secMainFooterParaLink} href='backers.html'>
+            Supporters
+          </a>
+          &nbsp;and Nostr developer&nbsp;
+          <a
+            className={styles.secMainFooterParaLink}
+            href='https://nostrdev.com'
+            target='_blank'
+          >
+            NostrDev
+          </a>
+          . Check our&nbsp;
+          <a className={styles.secMainFooterParaLink} href='backup.html'>
+            Backup Plan
+          </a>
+          .
+        </p>
+      </div>
+    </div>
+  )
+}

src/layout/index.tsx

@@ -1,10 +1,12 @@
-import { Header } from './header'
 import mainStyles from '../styles/main.module.scss'
+import { Footer } from './footer'
+import { Header } from './header'
 
 export const Layout = () => {
   return (
     <div className={mainStyles.bodyMain}>
       <Header />
+      <Footer />
     </div>
   )
 }

src/styles/footer.module.scss

@@ -0,0 +1,37 @@
+.secMainFooterWrapper {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: end;
+  border-top: solid 1px rgba(255, 255, 255, 0.05);
+
+  .secMainFooter {
+    width: 100%;
+    padding: 15px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: rgba(255, 255, 255, 0.1);
+
+    .secMainFooterPara {
+      text-align: center;
+      width: 100%;
+
+      .secMainFooterParaLink {
+        transition: ease 0.4s;
+        color: rgba(255, 255, 255, 0.1);
+        text-decoration: unset;
+        font-weight: bold;
+        cursor: pointer;
+
+        &:hover {
+          transition: ease 0.4s;
+          color: rgba(173, 90, 255, 0.75);
+          text-decoration: unset;
+          font-weight: bold;
+        }
+      }
+    }
+  }
+}