Implement basic bridge page

src/app/bridge/page.tsx

@@ -1,7 +1,68 @@
 'use client';
 
+import Image from 'next/image';
+import { A_Blank } from 'src/components/buttons/A_Blank';
+import { SolidButton } from 'src/components/buttons/SolidButton';
+import { ChevronIcon } from 'src/components/icons/Chevron';
 import { Section } from 'src/components/layout/Section';
+import { H1 } from 'src/components/text/headers';
+import PortalLogo from 'src/images/logos/portal-bridge.jpg';
+import SquidLogo from 'src/images/logos/squid-router.jpg';
+
+interface Bridge {
+  name: string;
+  operator: string;
+  href: string;
+  logo: any;
+}
+
+const BRIDGES: Bridge[] = [
+  {
+    name: 'Squid Router',
+    operator: 'Squid',
+    href: 'https://v2.app.squidrouter.com',
+    logo: SquidLogo,
+  },
+  {
+    name: 'Portal Bridge',
+    operator: 'Wormhole',
+    href: 'https://portalbridge.com',
+    logo: PortalLogo,
+  },
+];
 
 export default function Page() {
-  return <Section containerClassName="space-y-8">TODO</Section>;
+  return (
+    <Section className="mt-6" containerClassName="space-y-6">
+      <H1>Bridge to Celo</H1>
+      {BRIDGES.map((bridge) => (
+        <BridgeLink key={bridge.name} {...bridge} />
+      ))}
+      <p className="text-center text-sm text-taupe-600">
+        These bridges are independent, third-party service providers
+        <br />
+        Celo assumes no responsibility for their operation.
+      </p>
+    </Section>
+  );
+}
+
+function BridgeLink({ name, operator, href, logo }: Bridge) {
+  return (
+    <div className="flex items-center justify-between space-y-2 border border-taupe-300 bg-white p-4 sm:gap-32 sm:p-5">
+      <div className="flex items-center space-x-4">
+        <Image src={logo} width={60} height={60} alt="" className="rounded-full" />
+        <div className="flex flex-col">
+          <h2 className="font-serif text-xl">{name}</h2>
+          <h3 className="text-sm">{`By ${operator}`}</h3>
+        </div>
+      </div>
+      <SolidButton>
+        <A_Blank className="flex items-center space-x-2 py-1" href={href}>
+          <span>Bridge</span>
+          <ChevronIcon direction="e" width={12} height={12} />
+        </A_Blank>
+      </SolidButton>
+    </div>
+  );
 }

src/components/nav/NavBar.tsx

@@ -5,7 +5,7 @@ import { usePathname } from 'next/navigation';
 import { ChevronIcon } from 'src/components/icons/Chevron';
 import { CeloGlyph } from 'src/components/logos/Celo';
 import { DropdownMenu } from 'src/components/menus/Dropdown';
-// import Bridge from 'src/images/icons/bridge.svg';
+import Bridge from 'src/images/icons/bridge.svg';
 import Dashboard from 'src/images/icons/dashboard.svg';
 import Delegate from 'src/images/icons/delegate.svg';
 import Governance from 'src/images/icons/governance.svg';
@@ -16,7 +16,7 @@ const LINKS = (isWalletConnected?: boolean) => [
   { label: 'Staking', to: '/', icon: Staking },
   { label: 'Governance', to: '/governance', icon: Governance },
   { label: 'Delegate', to: '/delegate', icon: Delegate },
-  // { label: 'Bridge', to: '/bridge', icon: Bridge },
+  { label: 'Bridge', to: '/bridge', icon: Bridge },
   ...(isWalletConnected ? [{ label: 'Dashboard', to: '/account', icon: Dashboard }] : []),
 ];