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 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 className="all:p-0">
+        <A_Blank className="flex items-center space-x-2 px-5 py-3.5" href={href}>
+          <span>Bridge</span>
+          <ChevronIcon direction="e" width={12} height={12} />
+        </A_Blank>
+      </SolidButton>
+    </div>
+  );
 }

src/app/delegate/page.tsx

@@ -41,7 +41,10 @@ function RegisterCtaCard() {
     <CtaCard>
       <div className="space-y-2">
         <h3 className="font-serif text-xl sm:text-2xl">Passionate about Celo governance?</h3>
-        <p className="text-sm sm:text-base">Add your information on Github to be listed here.</p>
+        <p className="text-sm sm:text-base">
+          If you would like to be included in this list, open a pull-request to add your information
+          on Github.
+        </p>
       </div>
       <A_Blank href={links.delegate} className="btn btn-primary rounded-full border-taupe-300">
         Register as a delegate

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 }] : []),
 ];
 

src/config/proposals.json

@@ -1990,7 +1990,8 @@
     "cgpUrlRaw": "https://raw.githubusercontent.com/celo-org/governance/main/CGPs/cgp-0139.md",
     "title": "Mento Spin-off and Launch of the MENTO token",
     "author": "Bogdan Dumitru <[email protected]>, Roman Croessmann <[email protected]>, Markus Franke <[email protected]>, Oleksiy Novykov <[email protected]>",
-    "stage": 0,
+    "stage": 1,
+    "id": 180,
     "url": "https://forum.celo.org/t/mento-spin-off-and-launch-of-the-mento-token/7747",
     "timestamp": 1716422400000
   }