header and footer components

app/page.module.css

@@ -2,22 +2,6 @@
   flex: 1 0 auto;
 }
 
-.title,
-.description {
-  color: rgb(var(--foreground-rgb-highlight));
-  max-width: var(--max-width);
-  margin: auto;
-}
-
-.title {
-  font-size: clamp(1.3rem, 10vw, 2.5rem);
-  margin-top: 5vh;
-}
-
-.description {
-  font-size: clamp(1.1rem, 10vw, 1.5rem);
-}
-
 .grid {
   display: grid;
   gap: 1.5rem;
@@ -33,13 +17,3 @@
   max-width: calc(var(--max-width) * 1.5);
   margin: 3rem auto;
 }
-
-.footer {
-  flex-shrink: 0;
-  font-size: 0.8rem;
-  width: 100%;
-  max-width: var(--max-width);
-  margin: 3rem auto 0 auto;
-  padding-top: 2rem;
-  border-top: 1px solid rgba(var(--foreground-rgb), 0.2);
-}

app/page.tsx

@@ -1,16 +1,15 @@
 import styles from './page.module.css'
-import { metadata } from './layout'
 import { Swap, Buy } from '@/components/Strategies'
 import { Content } from '@/components/Content'
 import { CalculationBase } from '@/components/CalculationBaseOutput'
+import { Header } from '@/components/Header'
+import { Footer } from '@/components/Footer'
 
 export default function Home() {
   return (
     <>
-      <header>
-        <h1 className={styles.title}>{`${metadata.title}`}</h1>
-        <p className={styles.description}>{`${metadata.description}`}</p>
-      </header>
+      <Header />
+
       <main className={styles.main}>
         <section className={styles.breakout}>
           <div className={styles.grid}>
@@ -22,9 +21,8 @@ export default function Home() {
 
         <Content />
       </main>
-      <footer className={styles.footer}>
-        Send ❤️ and memecoins to krema.eth
-      </footer>
+
+      <Footer />
     </>
   )
 }

components/Footer/Footer.module.css

@@ -0,0 +1,22 @@
+.footer {
+  flex-shrink: 0;
+  font-size: 0.8rem;
+  width: 100%;
+  max-width: var(--max-width);
+  margin: 3rem auto 0 auto;
+  padding-top: 2rem;
+  border-top: 1px solid rgba(var(--foreground-rgb), 0.2);
+  color: rgba(var(--foreground-rgb), 0.6);
+  display: flex;
+  justify-content: space-between;
+}
+
+.footer a {
+  color: rgba(var(--foreground-rgb), 0.8);
+}
+
+.social {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}

components/Footer/Footer.tsx

@@ -0,0 +1,18 @@
+import { GitHubLogoIcon } from '@radix-ui/react-icons'
+import styles from './Footer.module.css'
+
+export function Footer() {
+  return (
+    <footer className={styles.footer}>
+      <span>
+        Send ❤️ and memecoins to <a href="">krema.eth</a>
+      </span>
+
+      <div className={styles.social}>
+        <a href="https://github.com/kremalicious/asi-calculator">
+          <GitHubLogoIcon />
+        </a>
+      </div>
+    </footer>
+  )
+}

components/Footer/index.tsx

@@ -0,0 +1 @@
+export * from './Footer'

components/Header/Header.module.css

@@ -0,0 +1,15 @@
+.title,
+.description {
+  color: rgb(var(--foreground-rgb-highlight));
+  max-width: var(--max-width);
+  margin: auto;
+}
+
+.title {
+  font-size: clamp(1.3rem, 10vw, 2.5rem);
+  margin-top: 5vh;
+}
+
+.description {
+  font-size: clamp(1.1rem, 10vw, 1.5rem);
+}

components/Header/Header.tsx

@@ -0,0 +1,11 @@
+import { metadata } from '@/app/layout'
+import styles from './Header.module.css'
+
+export function Header() {
+  return (
+    <header>
+      <h1 className={styles.title}>{`${metadata.title}`}</h1>
+      <p className={styles.description}>{`${metadata.description}`}</p>
+    </header>
+  )
+}

components/Header/index.tsx

@@ -0,0 +1 @@
+export * from './Header'

components/ResultRow/ResultRow.module.css

@@ -1,20 +1,27 @@
 .result {
   margin-bottom: 1rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid rgba(var(--foreground-rgb), 0.1);
 }
 
 .result:last-child {
   margin-bottom: 0;
+  border-bottom: none;
 }
 
 .resultLine {
   display: inline-grid;
-  grid-template-columns: 24px 1fr 2fr;
+  grid-template-columns: 24px 2fr 3fr;
   gap: 0.5rem;
   align-items: center;
   width: 100%;
   margin-bottom: 0.25rem;
 }
 
+.resultLine:last-child {
+  margin-bottom: 0;
+}
+
 .fiat {
   color: rgba(var(--foreground-rgb), 0.6);
 }