adding about section

src/app/about/page.tsx

@@ -0,0 +1,204 @@
+'use client';
+
+import { useTranslation } from 'react-i18next';
+import { Card } from '@/components/ui/card';
+
+export default function AboutPage() {
+  const { t } = useTranslation();
+
+  return (
+    <div className="w-full max-w-5xl mx-auto space-y-8">
+      {/* Header */}
+      <div className="text-center space-y-4">
+        <h1 className="text-4xl font-bold bg-gradient-to-r from-primary to-purple-400 bg-clip-text text-transparent">
+          About Liquidity Party
+        </h1>
+        <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
+          A game-theoretic multi-asset AMM revolutionizing decentralized exchange
+        </p>
+      </div>
+
+      {/* Introduction */}
+      <Card className="p-8 space-y-4">
+        <h2 className="text-2xl font-semibold">Introduction</h2>
+        <p className="text-muted-foreground leading-relaxed">
+          Liquidity Party is a new game-theoretic multi-asset AMM based on the groundbreaking paper:
+        </p>
+        <div className="bg-muted p-4 rounded-lg italic">
+          <a
+            href="https://mason.gmu.edu/~rhanson/mktscore.pdf"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-sm text-primary hover:underline"
+          >
+            Logarithmic Market Scoring Rules for Modular Combinatorial Information Aggregation (R. Hanson, 2002)
+          </a>
+        </div>
+        <p className="text-muted-foreground leading-relaxed">
+          A Logarithmic Market Scoring Rule (LMSR) is a pricing formula for AMMs that know only their current asset
+          inventories and no other information, naturally supporting multi-asset pools.
+        </p>
+      </Card>
+
+      {/* Key Advantages */}
+      <Card className="p-8 space-y-4">
+        <h2 className="text-2xl font-semibold">Advantages Over Constant Product Markets</h2>
+        <div className="grid md:grid-cols-2 gap-4">
+          <div className="p-4 bg-muted rounded-lg">
+            <h3 className="font-semibold text-primary mb-2">Less Slippage</h3>
+            <p className="text-sm text-muted-foreground">
+              Reduced slippage for small and medium trade sizes compared to CP markets
+            </p>
+          </div>
+          <div className="p-4 bg-muted rounded-lg">
+            <h3 className="font-semibold text-primary mb-2">N-Asset Pools</h3>
+            <p className="text-sm text-muted-foreground">
+              Trade long-tail pairs in a single hop with multi-asset support
+            </p>
+          </div>
+          <div className="p-4 bg-muted rounded-lg">
+            <h3 className="font-semibold text-primary mb-2">Lower Fees</h3>
+            <p className="text-sm text-muted-foreground">
+              Smaller spread means more cost-effective trading
+            </p>
+          </div>
+          <div className="p-4 bg-muted rounded-lg">
+            <h3 className="font-semibold text-primary mb-2">Deeper Liquidity</h3>
+            <p className="text-sm text-muted-foreground">
+              Enhanced liquidity depth for better trading execution
+            </p>
+          </div>
+        </div>
+        <p className="text-muted-foreground leading-relaxed mt-4">
+          According to game theory, CP's slope at the current marginal price is too steep, overcharging takers
+          with too much slippage at small and medium trade sizes. LMSR pools offer less slippage and cheaper
+          liquidity for the small and medium trade sizes common for arbitrageurs and aggregators.
+        </p>
+      </Card>
+
+      {/* Multi-Asset */}
+      <Card className="p-8 space-y-6">
+        <div className="space-y-4">
+          <h2 className="text-2xl font-semibold">Multi-Asset Capabilities</h2>
+          <p className="text-muted-foreground leading-relaxed">
+            Naturally multi-asset, Liquidity Party altcoin pools provide direct, one-hop swaps on otherwise
+            illiquid multi-hop pairs. Pools will quote any pair combination available in the pool:
+          </p>
+        </div>
+
+        {/* Performance Table */}
+        <div className="overflow-x-auto">
+          <table className="w-full border-collapse">
+            <thead>
+              <tr className="border-b">
+                <th className="text-left p-3 font-semibold">Assets</th>
+                <th className="text-left p-3 font-semibold">Pairs</th>
+                <th className="text-left p-3 font-semibold">Swap Gas</th>
+                <th className="text-left p-3 font-semibold">Mint Gas</th>
+              </tr>
+            </thead>
+            <tbody className="text-muted-foreground">
+              <tr className="border-b hover:bg-muted/50 transition-colors">
+                <td className="p-3">2</td>
+                <td className="p-3">1</td>
+                <td className="p-3">131,000</td>
+                <td className="p-3">143,000</td>
+              </tr>
+              <tr className="border-b hover:bg-muted/50 transition-colors">
+                <td className="p-3">2*</td>
+                <td className="p-3">1</td>
+                <td className="p-3">118,000</td>
+                <td className="p-3">143,000</td>
+              </tr>
+              <tr className="border-b hover:bg-muted/50 transition-colors">
+                <td className="p-3">10</td>
+                <td className="p-3">45</td>
+                <td className="p-3">142,000</td>
+                <td className="p-3">412,000</td>
+              </tr>
+              <tr className="border-b hover:bg-muted/50 transition-colors">
+                <td className="p-3">20</td>
+                <td className="p-3">190</td>
+                <td className="p-3">157,000</td>
+                <td className="p-3">749,000</td>
+              </tr>
+              <tr className="border-b hover:bg-muted/50 transition-colors">
+                <td className="p-3">50</td>
+                <td className="p-3">1,225</td>
+                <td className="p-3">199,000</td>
+                <td className="p-3">1,760,000</td>
+              </tr>
+              <tr className="hover:bg-muted/50 transition-colors">
+                <td className="p-3">100</td>
+                <td className="p-3">4,950</td>
+                <td className="p-3">269,000</td>
+                <td className="p-3">2,684,000</td>
+              </tr>
+            </tbody>
+          </table>
+          <p className="text-xs text-muted-foreground mt-2">* Stablecoin pair pool optimization</p>
+        </div>
+
+        <p className="text-muted-foreground leading-relaxed">
+          Liquidity Party aggregates scarce, low market cap assets into a single pool, providing one-hop liquidity
+          for exotic pairs without fragmenting LP assets. CP pools would need 190x the LP assets to provide the same
+          pairwise liquidity as a single 20-asset Liquidity Party pool, due to asset fragmentation.
+        </p>
+      </Card>
+
+      {/* Lower Fees & Minimized IL */}
+      <Card className="p-8 space-y-6">
+        <div className="space-y-4">
+          <h2 className="text-2xl font-semibold">Lower Fees</h2>
+          <p className="text-muted-foreground leading-relaxed">
+            Since market makers offer the option to take either side of the market, they must receive a subsidy
+            or charge a fee (spread) to compensate for adverse selection (impermanent loss). By protecting LPs
+            against common value-extraction scenarios, LMSR pools have a reduced risk premium resulting in lower
+            fees for takers.
+          </p>
+        </div>
+
+        <div className="space-y-4 border-t pt-6">
+          <h2 className="text-2xl font-semibold">Minimized Impermanent Loss</h2>
+          <h3 className="text-xl font-semibold text-primary">No Intra-Pool Arbitrage</h3>
+          <p className="text-muted-foreground leading-relaxed">
+            LMSR minimizes impermanent loss for liquidity providers. Traditional CP pools expose LPs to value
+            extraction, leading to higher fee demands than theoretically necessary. By minimizing impermanent
+            loss for LPs, LMSR pools reduce the risk premium, providing lower fees and higher liquidity for takers.
+          </p>
+        </div>
+      </Card>
+
+      {/* Open Source Development */}
+      <Card className="p-8 space-y-4">
+        <h2 className="text-2xl font-semibold">Open Source Development</h2>
+        <p className="text-muted-foreground leading-relaxed">
+          Liquidity Party is built in the open — transparently, collaboratively, and for the benefit of the broader DeFi ecosystem.
+          Our full codebase is available under open-source licenses found here:{' '}
+          <a
+            href="https://git.dxod.org/explore/repos"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-primary hover:underline"
+          >
+            https://git.dxod.org/explore/repos
+          </a>.
+        </p>
+        <p className="text-muted-foreground leading-relaxed">
+          We believe that decentralized finance should be verifiable and permissionless from the ground up.
+          By open-sourcing our smart contracts, math models, and protocol components, we empower developers, researchers, and liquidity providers to audit, extend, and innovate on top of Liquidity Party.
+        </p>
+        <p className="text-muted-foreground leading-relaxed font-medium">
+          Contributions, audits, and discussions are welcome — join the party and help shape the future of multi-asset liquidity.
+        </p>
+      </Card>
+
+      {/* Footer */}
+      <div className="text-center py-8 border-t">
+        <p className="text-sm text-muted-foreground">
+          Ready to experience the future of decentralized trading?
+        </p>
+      </div>
+    </div>
+  );
+}

src/components/header.tsx

@@ -6,6 +6,7 @@ import { Button } from '@/components/ui/button';
 import { LanguageSelector } from '@/components/language-selector';
 import { Moon, Sun } from 'lucide-react';
 import { useEffect, useState } from 'react';
+import Link from 'next/link';
 
 export function Header() {
   const { theme, setTheme } = useTheme();
@@ -29,14 +30,30 @@ export function Header() {
     <header className="border-b">
       <div className="container mx-auto px-4 py-4 flex items-center justify-between">
         <div className="flex items-center gap-2">
+          <Link href="/">
             <img
               src={logoSrc}
               alt="Liquidity Party"
-            className="h-8 w-auto"
+              className="h-8 w-auto cursor-pointer"
             />
+          </Link>
         </div>
 
         <div className="flex items-center gap-2">
+          {/* Navigation Links */}
+          <nav className="hidden md:flex items-center gap-1 mr-2">
+            <Link href="/">
+              <Button variant="ghost" size="sm" className="text-sm font-medium">
+                Swap
+              </Button>
+            </Link>
+            <Link href="/about">
+              <Button variant="ghost" size="sm" className="text-sm font-medium">
+                About
+              </Button>
+            </Link>
+          </nav>
+
           {/* Language Selector */}
           <LanguageSelector />