ui reorg

app/page.module.css

@@ -11,6 +11,7 @@
 
 .title {
   font-size: clamp(1.3rem, 10vw, 2.5rem);
+  margin-top: 5vh;
 }
 
 .description {
@@ -19,8 +20,11 @@
 
 .grid {
   display: grid;
-  gap: 2rem;
+  gap: 1.5rem;
   grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+}
+
+.breakout {
   max-width: calc(var(--max-width) * 1.5);
   margin: 3rem auto;
 }

app/page.tsx

@@ -2,6 +2,7 @@ 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/CalculationBase'
 
 export default function Home() {
   return (
@@ -11,10 +12,14 @@ export default function Home() {
         <p className={styles.description}>{`${metadata.description}`}</p>
       </header>
       <main className={styles.main}>
-        <div className={styles.grid}>
+        <section className={styles.breakout}>
-          <Swap />
+          <div className={styles.grid}>
-          <Buy />
+            <Swap />
-        </div>
+            <Buy />
+          </div>
+          <CalculationBase />
+        </section>
+
         <Content />
       </main>
       <footer className={styles.footer}>

components/CalculationBase/CalculationBase.module.css

@@ -0,0 +1,27 @@
+.label {
+  font-size: 0.7rem;
+  color: rgba(var(--foreground-rgb), 0.6);
+  border: 1px solid rgba(var(--foreground-rgb), 0.2);
+  border-radius: var(--border-radius);
+  padding: 0.1rem 0.3rem;
+  margin-left: 0.2rem;
+  margin-right: 0.2rem;
+  vertical-align: middle;
+}
+
+.calculationBase {
+  border-top: 1px solid rgba(var(--foreground-rgb), 0.2);
+  border-left: 1px solid rgba(var(--foreground-rgb), 0.2);
+  border-bottom: none;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  border-radius: var(--border-radius);
+  margin-top: 1.5rem;
+}
+
+.calculationBase li {
+  border-bottom: 1px solid rgba(var(--foreground-rgb), 0.2);
+  border-right: 1px solid rgba(var(--foreground-rgb), 0.2);
+  padding: 1rem;
+  font-size: 0.8rem;
+}

components/CalculationBase/CalculationBase.tsx

@@ -0,0 +1,33 @@
+'use client'
+
+import { ratioOceanToAsi, ratioAgixToAsi, ratioFetToAsi } from '@/constants'
+import styles from './CalculationBase.module.css'
+import { usePrices } from '@/hooks'
+
+export function CalculationBase() {
+  const prices = usePrices()
+
+  return (
+    <ul className={styles.calculationBase}>
+      <li>
+        1 ASI
+        <br />= ${prices.asi}
+      </li>
+      <li>
+        1 OCEAN = {ratioOceanToAsi} ASI
+        <span className={styles.label}>fixed</span>
+        <br />= ${prices.ocean}
+      </li>
+      <li>
+        1 AGIX = {ratioAgixToAsi} ASI
+        <span className={styles.label}>fixed</span>
+        <br />= ${prices.agix}
+      </li>
+      <li>
+        1 Fet = {ratioFetToAsi} ASI
+        <span className={styles.label}>fixed</span>
+        <br />= ${prices.fet}
+      </li>
+    </ul>
+  )
+}

components/CalculationBase/index.tsx

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

components/Content/Content.module.css

@@ -10,33 +10,3 @@
 .content a {
   text-decoration: underline;
 }
-
-.label {
-  font-size: 0.7rem;
-  color: rgba(var(--foreground-rgb), 0.6);
-  border: 1px solid rgba(var(--foreground-rgb), 0.2);
-  border-radius: var(--border-radius);
-  padding: 0.1rem 0.3rem;
-  margin-left: 0.2rem;
-  margin-right: 0.2rem;
-  vertical-align: middle;
-}
-
-.calculationBase {
-  border: 1px solid rgba(var(--foreground-rgb), 0.2);
-  border-bottom: none;
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  border-radius: var(--border-radius);
-  margin-top: 2rem;
-}
-
-.calculationBase li {
-  border-bottom: 1px solid rgba(var(--foreground-rgb), 0.2);
-  padding: 1rem;
-  font-size: 0.8rem;
-}
-
-.calculationBase li:nth-child(odd) {
-  border-right: 1px solid rgba(var(--foreground-rgb), 0.2);
-}

components/Content/Content.tsx

@@ -1,12 +1,6 @@
-'use client'
-
-import { ratioOceanToAsi, ratioAgixToAsi, ratioFetToAsi } from '@/constants'
 import styles from './Content.module.css'
-import { usePrices } from '@/hooks'
 
 export function Content() {
-  const prices = usePrices()
-
   return (
     <div className={styles.content}>
       <p>
@@ -15,36 +9,15 @@ export function Content() {
           fixed ASI exchange rate
         </a>
         , the fiat values fetched from{' '}
-        <a href="https://coingecko.com">Coingecko</a> and the token swap quotes
+        <a href="https://coingecko.com">Coingecko</a> and the quotes from{' '}
-        from <a href="https://uniswap.org">Uniswap</a> v3 routes are constantly
+        <a href="https://uniswap.org">Uniswap</a> v3 swap routes are constantly
         changing.
       </p>
       <p>
-        There is no guarantee they reflect the value of your investment once the
+        There is no guarantee displayed values reflect the value of your
-        actual ASI swap mechanism is released. Use at your own risk.
+        investment once the actual ASI swap mechanism is released. Use at your
+        own risk.
       </p>
-
-      <ul className={styles.calculationBase}>
-        <li>
-          1 OCEAN = {ratioOceanToAsi} ASI
-          <span className={styles.label}>fixed</span>
-          <br />= ${prices.ocean}
-        </li>
-        <li>
-          1 AGIX = {ratioAgixToAsi} ASI
-          <span className={styles.label}>fixed</span>
-          <br />= ${prices.agix}
-        </li>
-        <li>
-          1 Fet = {ratioFetToAsi} ASI
-          <span className={styles.label}>fixed</span>
-          <br />= ${prices.fet}
-        </li>
-        <li>
-          1 ASI
-          <br />= ${prices.asi}
-        </li>
-      </ul>
     </div>
   )
 }