laina-defi · kovipu · Sep 11, 2024 · Sep 11, 2024 · Sep 11, 2024 · Sep 11, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,14 +4,15 @@
     "@astrojs/react": "^3.6.0",
     "@astrojs/tailwind": "^5.1.0",
     "@creit.tech/stellar-wallets-kit": "^1.1.0",
-    "@fontsource/inter": "^5.0.20",
+    "@fontsource/manrope": "^5.0.21",
     "@stellar/stellar-sdk": "^12.2.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "astro": "^4.2.4",
     "framer-motion": "^11.3.17",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.3.0",
     "react-router-dom": "^6.26.1",
     "tailwindcss": "^3.4.7",
     "typescript": "^5.3.3"

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,21 +1,29 @@
 import React from 'react';
-import { Outlet, RouterProvider, createBrowserRouter } from 'react-router-dom';
+import { Outlet, RouterProvider, createBrowserRouter, useLocation } from 'react-router-dom';
 
+import Footer from '@components/Footer';
 import Nav from '@components/Nav';
 import BorrowPage from '@pages/_borrow/BorrowPage';
 import LandingPage from '@pages/_landing/LandingPage';
 import LendPage from '@pages/_lend/LendPage';
 import LiquidatePage from '@pages/_liquidate/LiquidatePage';
 import { WalletProvider } from './stellar-wallet';
 
-const PageWrapper = () => (
-  <>
-    <Nav />
-    <main className="max-w-screen w-256">
-      <Outlet />
-    </main>
-  </>
-);
+const PageWrapper = () => {
+  const { pathname } = useLocation();
+
+  const isIndex = pathname === '/';
+
+  return (
+    <body className={`font-sans flex flex-col min-h-screen ${isIndex ? 'bg-white' : 'bg-grey-light'}`}>
+      <Nav />
+      <main className={`max-w-screen flex-1 ${isIndex ? 'w-[74rem]' : 'w-256'}`}>
+        <Outlet />
+      </main>
+      <Footer />
+    </body>
+  );
+};
 
 const router = createBrowserRouter([
   {

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -6,16 +6,31 @@ export interface ButtonProps {
   className?: string;
 }
 
+const buttonStyle = 'bg-black font-semibold text-white rounded-full px-8 py-2 hover:bg-grey-dark transition';
+
 export const Button = ({ onClick, className = '', children }: PropsWithChildren<ButtonProps>) => (
-  <button
-    type="button"
-    onClick={onClick}
-    className={`bg-black text-white rounded-full px-8 py-2 hover:bg-grey-dark transition ${className}`}
-  >
+  <button type="button" onClick={onClick} className={`${buttonStyle} ${className}`}>
     {children}
   </button>
 );
 
+export interface LinkButtonProps {
+  to: string;
+  className?: string;
+}
+
+export const LinkButton = ({ to, className = '', children }: PropsWithChildren<LinkButtonProps>) => (
+  <Link to={to} className={`${buttonStyle} ${className}`}>
+    {children}
+  </Link>
+);
+
+export const NativeLinkButton = ({ to, className = '', children }: PropsWithChildren<LinkButtonProps>) => (
+  <a href={to} target="_blank" className={`${buttonStyle} ${className}`} rel="noreferrer">
+    {children}
+  </a>
+);
+
 export const SelectButtonWrapper = ({ children }: PropsWithChildren) => (
   <div className="flex bg-grey p-1 gap-2 rounded-full">{children}</div>
 );
@@ -27,7 +42,7 @@ export interface SelectLinkButtonProps {
 
 export const SelectLinkButton = ({ to, selected, children }: PropsWithChildren<SelectLinkButtonProps>) => (
   <Link
-    className={`font-bold px-6 py-1.5 rounded-full hover:text-black transition ${selected ? 'bg-white text-black' : 'text-white'}`}
+    className={`font-semibold px-6 py-1.5 rounded-full hover:text-black transition ${selected ? 'bg-white text-black' : 'text-white'}`}
     to={to}
   >
     {children}

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -0,0 +1,10 @@
+import logo from '/public/laina_v3_shrinked.png';
+
+export default function Footer() {
+  return (
+    <footer className="bg-black h-40 flex flex-col items-center justify-center">
+      <p className="text-white w-[72rem] max-w-screen text-lg">This website does not use cookies.</p>
+      <p className="text-white w-[72rem] max-w-screen text-sm">&copy; Copyright 2024, Laina Protocol</p>
+    </footer>
+  );
+}
diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
@@ -1,3 +1,4 @@
+import type { PropsWithChildren } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import { useWallet } from 'src/stellar-wallet';
 import logo from '/public/laina_v3_shrinked.png';
@@ -7,25 +8,19 @@ export default function Nav() {
   const { pathname } = useLocation();
   const { wallet, openConnectWalletModal } = useWallet();
 
+  const isIndex = pathname === '/';
+
   return (
-    <nav className="relative max-w-screen-lg mx-auto mb-12 flex justify-between items-center pt-12 pb-6">
+    <nav
+      className={`relative mx-auto mb-12 flex justify-between items-center pt-12 pb-6 px-4 max-w-screen ${isIndex ? 'w-[74rem]' : 'w-[64rem]'}`}
+    >
       <div>
         <Link to="/">
           <img src={logo.src} alt="logo" width={200} />
         </Link>
       </div>
 
-      <SelectButtonWrapper>
-        <SelectLinkButton to="/lend" selected={pathname === '/lend'}>
-          Lend
-        </SelectLinkButton>
-        <SelectLinkButton to="/borrow" selected={pathname === '/borrow'}>
-          Borrow
-        </SelectLinkButton>
-        <SelectLinkButton to="/liquidate" selected={pathname === '/liquidate'}>
-          Liquidate
-        </SelectLinkButton>
-      </SelectButtonWrapper>
+      {isIndex ? <LinkCluster /> : <SelectButtonCluster pathname={pathname} />}
 
       {wallet ? (
         <div>
@@ -38,3 +33,31 @@ export default function Nav() {
     </nav>
   );
 }
+
+const LinkCluster = () => (
+  <div className="flex flex-row ml-auto mr-12">
+    <LinkItem to="/lend">Lend</LinkItem>
+    <LinkItem to="/borrow">Borrow</LinkItem>
+    <LinkItem to="/liquidate">Liquidate</LinkItem>
+  </div>
+);
+
+const LinkItem = ({ to, children }: PropsWithChildren<{ to: string }>) => (
+  <Link to={to} className="font-semibold p-7 hover:underline">
+    {children}
+  </Link>
+);
+
+const SelectButtonCluster = ({ pathname }: { pathname: string }) => (
+  <SelectButtonWrapper>
+    <SelectLinkButton to="/lend" selected={pathname === '/lend'}>
+      Lend
+    </SelectLinkButton>
+    <SelectLinkButton to="/borrow" selected={pathname === '/borrow'}>
+      Borrow
+    </SelectLinkButton>
+    <SelectLinkButton to="/liquidate" selected={pathname === '/liquidate'}>
+      Liquidate
+    </SelectLinkButton>
+  </SelectButtonWrapper>
+);
diff --git a/src/images/cards.jpg b/src/images/cards.jpg
diff --git a/src/images/konsta.jpeg b/src/images/konsta.jpeg
diff --git a/src/images/teemu.jpg b/src/images/teemu.jpg
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -1,61 +1,63 @@
 ---
-import '@fontsource/inter';
-import '@fontsource/inter/600.css';
+import '@fontsource/manrope';
+import '@fontsource/manrope/600.css';
+import '@fontsource/manrope/700.css';
 
 interface Props {
   title: string;
+  description: string;
 }
 
-const { title } = Astro.props;
+const { title, description } = Astro.props;
 ---
 
 <!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="description" content="Astro description" />
+    <meta name="description" content={description} />
     <meta name="viewport" content="width=device-width" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="generator" content={Astro.generator} />
     <title>{title}</title>
   </head>
-  <body class="font-sans bg-grey-light min-h-screen">
-    <slot />
-  </body>
+  <slot />
+  <style is:global>
+    html {
+      font-family: system-ui, sans-serif;
+      background: #ffffff;
+      background-size: 224px;
+    }
+    main {
+      margin: auto;
+      padding: 1rem;
+      width: 800px;
+      max-width: calc(100% - 2rem);
+      color: rgb(0, 0, 0);
+      font-size: 18px;
+      line-height: 1.6;
+    }
+    code {
+      font-family:
+        Menlo,
+        Monaco,
+        Lucida Console,
+        Liberation Mono,
+        DejaVu Sans Mono,
+        Bitstream Vera Sans Mono,
+        Courier New,
+        monospace;
+    }
+    .visually-hidden {
+      clip: rect(0 0 0 0);
+      clip-path: inset(50%);
+      height: 1px;
+      overflow: hidden;
+      position: absolute;
+      white-space: nowrap;
+      width: 1px;
+    }
+  </style>
+
+
 </html>
-<style is:global>
-  html {
-    font-family: system-ui, sans-serif;
-    background: #ffffff;
-    background-size: 224px;
-  }
-  main {
-    margin: auto;
-    padding: 1rem;
-    width: 800px;
-    max-width: calc(100% - 2rem);
-    color: rgb(0, 0, 0);
-    font-size: 18px;
-    line-height: 1.6;
-  }
-  code {
-    font-family:
-      Menlo,
-      Monaco,
-      Lucida Console,
-      Liberation Mono,
-      DejaVu Sans Mono,
-      Bitstream Vera Sans Mono,
-      Courier New,
-      monospace;
-  }
-  .visually-hidden {
-    clip: rect(0 0 0 0);
-    clip-path: inset(50%);
-    height: 1px;
-    overflow: hidden;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-  }
-</style>
diff --git a/src/pages/[...path].astro b/src/pages/[...path].astro
@@ -11,9 +11,11 @@ export function getStaticPaths() {
   ];
 }
 
+const description = 'A trustless loan platform focusing on single-token lending pools. DeFi made simple.';
+
 const { title } = Astro.props;
 ---
 
-<Layout title={title}>
+<Layout title={title} description={description}>
   <App client:only />
 </Layout>
diff --git a/src/pages/_borrow/BorrowPage.tsx b/src/pages/_borrow/BorrowPage.tsx
@@ -3,7 +3,7 @@ import { BorrowableAssetCard } from './BorrowableAssetCard';
 
 const BorrowPage = () => (
   <div>
-    <h1 className="text-3xl font-bold mb-8">Borrow Assets</h1>
+    <h1 className="text-3xl font-semibold mb-8">Borrow Assets</h1>
     {CURRENCIES.map((currency) => (
       <BorrowableAssetCard key={currency.symbol} currency={currency} />
     ))}

diff --git a/src/pages/_borrow/BorrowableAssetCard.tsx b/src/pages/_borrow/BorrowableAssetCard.tsx
@@ -45,19 +45,19 @@ export const BorrowableAssetCard = ({ currency }: BorrowableAssetCardProps) => {
       <img src={icon} alt="" className="w-12" />
 
       <div className="ml-6 w-64">
-        <h2 className="font-bold text-2xl leading-6 mt-3">{name}</h2>
+        <h2 className="font-semibold text-2xl leading-6 mt-3">{name}</h2>
         <span>{symbol}</span>
       </div>
 
       <div className="w-64">
-        <p className="text-grey">Total Borrowed</p>
-        <p className="text-xl font-bold leading-6">1.82M</p>
+        <p className="text-grey font-semibold">Total Borrowed</p>
+        <p className="text-xl font-semibold leading-6">1.82M</p>
         <p>$196.10K</p>
       </div>
 
       <div className="w-64">
-        <p className="text-grey">Borrow APY</p>
-        <p className="text-xl font-bold leading-6">1.61%</p>
+        <p className="text-grey font-semibold">Borrow APY</p>
+        <p className="text-xl font-semibold leading-6">1.61%</p>
       </div>
 
       {wallet && <Button onClick={handleBorrowClick}>Borrow</Button>}