From 5c820f16c2b7fdbc0c9938631b60fb42a54588d5 Mon Sep 17 00:00:00 2001
From: daniyal <daniyal@nostrdev.com>
Date: Thu, 11 Jul 2024 00:30:03 +0500
Subject: [PATCH] feat: implemented footer

---
 src/index.css                 |  4 ++++
 src/layout/footer.tsx         | 45 +++++++++++++++++++++++++++++++++++
 src/layout/index.tsx          |  4 +++-
 src/styles/footer.module.scss | 37 ++++++++++++++++++++++++++++
 4 files changed, 89 insertions(+), 1 deletion(-)
 create mode 100644 src/layout/footer.tsx
 create mode 100644 src/styles/footer.module.scss

diff --git a/src/index.css b/src/index.css
index 0a84a20..6bbf249 100644
--- a/src/index.css
+++ b/src/index.css
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+* {
+  box-sizing: border-box;
+}
+
 a {
   font-weight: 500;
   color: #646cff;
diff --git a/src/layout/footer.tsx b/src/layout/footer.tsx
new file mode 100644
index 0000000..4a7a709
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/src/layout/index.tsx b/src/layout/index.tsx
index 6e38861..7bb8edd 100644
--- a/src/layout/index.tsx
+++ b/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>
   )
 }
diff --git a/src/styles/footer.module.scss b/src/styles/footer.module.scss
new file mode 100644
index 0000000..df59282
--- /dev/null
+++ b/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;
+        }
+      }
+    }
+  }
+}