feat: Tighten letter spacing for headings

src/components/Nav.tsx

@@ -35,15 +35,15 @@ export default function Nav() {
 }
 
 const LinkCluster = () => (
-  <div className="flex flex-row ml-auto mr-12">
+  <div className="flex flex-row ml-auto mr-14">
     <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">
+  <Link to={to} className="text-base font-semibold p-4 hover:underline">
     {children}
   </Link>
 );

src/pages/_borrow/BorrowPage.tsx

@@ -3,7 +3,7 @@ import { BorrowableAssetCard } from './BorrowableAssetCard';
 
 const BorrowPage = () => (
   <div>
-    <h1 className="text-3xl font-semibold mb-8">Borrow Assets</h1>
+    <h1 className="text-3xl font-semibold mb-8 tracking-tight">Borrow Assets</h1>
     {CURRENCIES.map((currency) => (
       <BorrowableAssetCard key={currency.symbol} currency={currency} />
     ))}

src/pages/_borrow/BorrowableAssetCard.tsx

@@ -45,7 +45,7 @@ export const BorrowableAssetCard = ({ currency }: BorrowableAssetCardProps) => {
       <img src={icon} alt="" className="w-12" />
 
       <div className="ml-6 w-64">
-        <h2 className="font-semibold text-2xl leading-6 mt-3">{name}</h2>
+        <h2 className="font-semibold text-2xl leading-6 mt-3 tracking-tight">{name}</h2>
         <span>{symbol}</span>
       </div>
 

src/pages/_landing/LandingPage.tsx

@@ -23,21 +23,21 @@ const LandingPage = () => (
   <>
     <section className="flex flex-row mb-14">
       <div className="w-1/2">
-        <h1 className="text-[42px] font-medium mb-8">
+        <h1 className="text-[42px] font-medium mb-8 tracking-tight">
           A trustless loan platform focusing on single-token lending pools.
         </h1>
-        <h2 className="text-[42px] font-bold">DeFi made simple.</h2>
+        <h2 className="text-[42px] font-bold tracking-tight">DeFi made simple.</h2>
       </div>
       <div className="w-1/2">
         <img src={CardsImage.src} alt="" />
       </div>
     </section>
     <section className="border-t-4 flex flex-row my-14">
       <div className="w-1/2 pt-14 pr-14 border-r-4">
-        <p className="text-2xl leading-relaxed mb-8">
+        <p className="text-2xl leading-relaxed mb-8 tracking-tight">
           Laina is currently in the early development stage and is only operating on the Stellar Testnet.
         </p>
-        <p className="text-2xl leading-relaxed mb-8">Now that you're here, take a peek.</p>
+        <p className="text-2xl leading-relaxed mb-8 tracking-tight">Now that you're here, take a peek.</p>
         <LinkButton to="/lend" className="text-lg">
           Open the app
         </LinkButton>
@@ -56,15 +56,15 @@ const LandingPage = () => (
     </section>
     <section className="flex flex-row my-20">
       <div className="w-1/2">
-        <h3 className="text-[42px] font-bold mb-14">The Team</h3>
+        <h3 className="text-[42px] font-bold mb-14 tracking-tight">The Team</h3>
         <div className="flex flex-row">
           {team.map((member) => (
             <TeamMember key={member.name} {...member} />
           ))}
         </div>
       </div>
       <div className="w-1/2 p-14 my-auto">
-        <p className="text-xl mb-8 leading-relaxed">Got a question? Ask us in the Stellar Dev Discord!</p>
+        <p className="text-xl mb-8 leading-relaxed tracking-tight">Got a question? Ask us in the Stellar Dev Discord!</p>
         <NativeLinkButton to="https://discord.com/invite/stellardev" className="text-lg">
           Join Stellar Discord
         </NativeLinkButton>

src/pages/_lend/LendPage.tsx

@@ -4,7 +4,7 @@ import { LendableAssetCard } from './LendableAssetCard';
 const LendPage = () => {
   return (
     <>
-      <h1 className="text-3xl font-semibold mb-8">Lend Assets</h1>
+      <h1 className="text-3xl font-semibold mb-8 tracking-tight">Lend Assets</h1>
       {CURRENCIES.map((currency) => (
         <LendableAssetCard currency={currency} key={currency.symbol} />
       ))}

src/pages/_lend/LendableAssetCard.tsx

@@ -136,7 +136,7 @@ export const LendableAssetCard = ({ currency }: LendableAssetCardProps) => {
       <img src={icon} alt="" className="w-12" />
 
       <div className="ml-6 w-64">
-        <h2 className="font-semibold text-2xl">{name}</h2>
+        <h2 className="font-semibold text-2xl leading-6 mt-3 tracking-tight">{name}</h2>
         <span>{symbol}</span>
       </div>
 

src/pages/_liquidate/LiquidatePage.tsx

@@ -1,6 +1,6 @@
 const LiquidatePage = () => (
   <div>
-    <h1 className="text-3xl font-semibold mb-8">Available for Liquidation</h1>
+    <h1 className="text-3xl font-semibold mb-8 tracking-tight">Available for Liquidation</h1>
     <p>Coming soon!</p>
   </div>
 );