feat: Style lendable assets.

src/components/Button.tsx

@@ -1,5 +1,20 @@
 import type { PropsWithChildren } from 'react';
 
+export interface ButtonProps {
+  onClick: () => void;
+  className?: string;
+}
+
+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}`}
+  >
+    {children}
+  </button>
+);
+
 export const SelectButtonWrapper = ({ children }: PropsWithChildren) => (
   <div className="flex bg-grey p-1 gap-2 rounded-full">{children}</div>
 );
@@ -10,7 +25,10 @@ export interface SelectLinkButtonProps {
 }
 
 export const SelectLinkButton = ({ href, selected, children }: PropsWithChildren<SelectLinkButtonProps>) => (
-  <a className={`font-bold px-6 py-1.5 rounded-full ${selected ? 'bg-white text-black' : 'text-white'}`} href={href}>
+  <a
+    className={`font-bold px-6 py-1.5 rounded-full hover:text-black transition ${selected ? 'bg-white text-black' : 'text-white'}`}
+    href={href}
+  >
     {children}
   </a>
 );

src/components/Card.tsx

@@ -0,0 +1,9 @@
+import type { PropsWithChildren } from 'react';
+
+export interface CardProps {
+  className?: string;
+}
+
+export const Card = ({ className = '', children }: PropsWithChildren<CardProps>) => (
+  <div className={`bg-white rounded drop-shadow-lg ${className}`}>{children}</div>
+);

src/components/LendableAssetCard.tsx

@@ -0,0 +1,38 @@
+import { Button } from './Button';
+import { Card } from './Card';
+
+export interface LendableAssetCardProps {
+  name: string;
+  symbol: string;
+  icon: string;
+}
+
+export const LendableAssetCard = ({ name, symbol, icon }: LendableAssetCardProps) => {
+  const handleDepositClick = () => {
+    console.log('deposit clicked');
+  };
+
+  return (
+    <Card className="mb-6 p-6 flex flex-row items-center">
+      <img src={icon} alt="" className="w-12" />
+
+      <div className="ml-6 w-64">
+        <h2 className="font-bold text-2xl">{name}</h2>
+        <span>{symbol}</span>
+      </div>
+
+      <div className="w-64">
+        <p className="text-grey">Total Supplied</p>
+        <p className="text-xl font-bold leading-6">5.82M</p>
+        <p>$5.82M</p>
+      </div>
+
+      <div className="w-64">
+        <p className="text-grey">Supply APY</p>
+        <p className="text-xl font-bold leading-6">12.34%</p>
+      </div>
+
+      <Button onClick={handleDepositClick}>Deposit</Button>
+    </Card>
+  );
+};

src/layouts/Layout.astro

@@ -41,7 +41,7 @@ const { title, pathname } = Astro.props;
     width: 800px;
     max-width: calc(100% - 2rem);
     color: rgb(0, 0, 0);
-    font-size: 20px;
+    font-size: 18px;
     line-height: 1.6;
   }
   code {
@@ -55,44 +55,6 @@ const { title, pathname } = Astro.props;
       Courier New,
       monospace;
   }
-  button {
-    border: 1px solid rgb(var(--accent));
-    background-color: #000000;
-    background-image: none;
-    background-size: 400%;
-    border-radius: 20px;
-    color: white;
-    cursor: pointer;
-    font-size: inherit;
-    padding: 0.5rem 1rem;
-    background-position: 100%;
-    transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
-  }
-  button:is(:hover, :focus-within) {
-    color: rgb(185, 185, 185);
-    background-position: 0;
-    background-size: 400%;
-    background-image: var(--accent-gradient);
-  }
-  button:is(:disabled) {
-    color: white;
-    background: var(--accent-light);
-    cursor: not-allowed;
-  }
-
-  button:is(:disabled).loading {
-    background: linear-gradient(-45deg, #ffffff44, #ffffff22);
-    background-size: 200%;
-    animation: loading-gradient 4s linear infinite;
-  }
-  @keyframes loading-gradient {
-    0% {
-      background-position: 0% 50%;
-    }
-    100% {
-      background-position: -200% 50%;
-    }
-  }
   .visually-hidden {
     clip: rect(0 0 0 0);
     clip-path: inset(50%);

src/pages/lend.astro

@@ -1,12 +1,27 @@
 ---
 import ConnectFreighter from '../components/ConnectFreighter.astro';
+import { LendableAssetCard } from '../components/LendableAssetCard.tsx';
 import Loan_pool from '../components/lending.astro';
+import StellarIcon from '../images/Stellar_Symbol.png';
+import USDCIcon from '../images/usdc.svg';
 import Layout from '../layouts/Layout.astro';
+
+const currencies = [
+  {
+    name: 'USD Coin',
+    symbol: 'USDC',
+    icon: USDCIcon.src,
+  },
+  {
+    name: 'Stellar Lumen',
+    symbol: 'XLM',
+    icon: StellarIcon.src,
+  },
+];
 ---
 
 <Layout title="Laina – Lending" pathname="lend">
   <ConnectFreighter />
-  <h1 class="text-5xl font-bold mb-8">Lend Assets</h1>
-
-  <Loan_pool />
+  <h1 class="text-3xl font-bold mb-8">Lend Assets</h1>
+  {currencies.map(({ name, symbol, icon }) => <LendableAssetCard name={name} symbol={symbol} icon={icon} />)}
 </Layout>

tailwind.config.mjs

@@ -8,11 +8,25 @@ export default {
     colors: {
       white: '#fff',
       grey: {
+        dark: '#555',
         DEFAULT: '#999',
         light: '#efefef',
       },
       black: '#000',
     },
+    fontSize: {
+      sm: ['16px', '20px'],
+      base: ['18px', '24px'],
+      lg: ['20px', '28px'],
+      xl: ['26px', '32px'],
+      '2xl': ['32px', '40px'],
+      '3xl': ['48px', '56px'],
+    },
+    borderRadius: {
+      none: '0',
+      DEFAULT: '16px',
+      full: '9999px',
+    },
     extend: {
       spacing: {
         128: '32rem',