yield calculator

blockworks-foundation · Aug 15, 2024 · 91f7620 · 91f7620
1 parent b1275e1
commit 91f7620
Show file tree

Hide file tree

Showing 6 changed files with 413 additions and 33 deletions.
diff --git a/components/forms/Select.tsx b/components/forms/Select.tsx
@@ -35,12 +35,12 @@ const Select = <T extends Values>({
         {({ open }) => (
           <>
             <Listbox.Button
-              className={`h-full w-full rounded-md bg-th-input-bkg py-2.5 font-normal ring-1 ring-inset ring-th-input-border focus:outline-none focus-visible:ring-th-fgd-4 md:hover:ring-th-input-border-hover ${buttonClassName}`}
+              className={`default-transition h-12 w-full rounded-md border border-th-bkg-3 bg-th-bkg-1 font-normal focus:outline-none md:hover:bg-th-bkg-2 ${buttonClassName}`}
             >
               <div
                 className={`flex items-center justify-between space-x-2 px-3 text-th-fgd-1`}
               >
-                <div className="flex items-center">
+                <div className="flex items-center font-semibold">
                   {icon ? icon : null}
                   {value ? (
                     value

diff --git a/components/home/HomePage.tsx b/components/home/HomePage.tsx
@@ -10,6 +10,8 @@ import BestApy from './BestApy'
 import { ZigZagLine } from '@components/NavTabs'
 import { FAQS } from '@components/faqs/FaqsPage'
 import { usePlausible } from 'next-plausible'
+import YieldCalculator from './YieldCalculator'
+import Link from 'next/link'
 
 const WRAPPER_Y_PADDING = 'py-12 md:py-20'
 
@@ -152,6 +154,25 @@ const HomePage = () => {
           <Ottersec className="h-10 w-auto text-th-fgd-1" />
         </div>
       </div>
+      <div className={`bg-th-primary-2 ${WRAPPER_Y_PADDING}`}>
+        <div className="mx-auto w-full max-w-5xl">
+          <h2 className="text-shadow mb-6 px-6 text-center text-3xl text-th-button-text md:text-5xl xl:px-0">
+            Test the waters.
+          </h2>
+          <YieldCalculator />
+          <div className="mx-auto max-w-3xl pt-6">
+            <p className="text-center text-sm text-th-fgd-4">
+              This calculator is for educational purposes only. It assumes rates
+              and prices remain constant over time. Take the time to understand
+              the{' '}
+              <Link className="underline md:hover:no-underline" href="/risks">
+                risks
+              </Link>{' '}
+              before depositing any funds.
+            </p>
+          </div>
+        </div>
+      </div>
       <div className={`bg-th-primary-1 ${WRAPPER_Y_PADDING}`}>
         <div className="px-6">
           <h2 className="text-shadow mb-6 text-center text-3xl text-th-button-text md:text-5xl">