fix:add-github-logo

src/app/components/BottomBar.tsx

@@ -1,5 +1,6 @@
 import Disclaimer from './Disclaimer';
 import FeedbackButton from './FeedbackButton';
+import GitHubLink from './GitHubLink';
 import PriceTracker from './PriceTracker';
 import styles from './css/BottomBar.module.css';
 
@@ -12,6 +13,7 @@ const BottomBar: React.FC = () => {
       <Disclaimer />
       <div className={styles.right}>
         <FeedbackButton />
+        <GitHubLink />
       </div>
     </div>
   );

src/app/components/GitHubLink.tsx

@@ -0,0 +1,24 @@
+import Image from 'next/image';
+import styles from './css/GitHubLink.module.css';
+
+const GitHubLink: React.FC = () => {
+  return (
+    <a
+      href="https://github.com/ethersphere/beeport"
+      target="_blank"
+      rel="noopener noreferrer"
+      className={styles.link}
+      aria-label="GitHub"
+    >
+      <Image
+        src="/github-mark-white.svg"
+        alt="GitHub"
+        width={20}
+        height={20}
+        className={styles.icon}
+      />
+    </a>
+  );
+};
+
+export default GitHubLink;

src/app/components/css/BottomBar.module.css

@@ -18,6 +18,10 @@
     position: fixed;
     right: 16px;
     bottom: 16px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 8px;
 }
 
 @media (max-width: 1024px) {

src/app/components/css/GitHubLink.module.css

@@ -0,0 +1,18 @@
+.link {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 8px;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+    height: 100%;
+}
+
+.link:hover {
+    background-color: #22272E;
+}
+
+.icon {
+    display: block;
+}