feat: design bridge (/bridge) page

src/pages/bridge/Bridges.tsx

@@ -0,0 +1,90 @@
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent } from "@/components/ui/card";
+import useDataTheme from "@/hooks/useDataTheme";
+import React from "react";
+import { Link } from "react-router-dom";
+import { ThemesEnum } from "@/enums";
+
+interface BridgeCardProps {
+  link: string;
+  logo: React.ReactNode;
+  title: string;
+  description: string;
+  tags: string[];
+}
+function BridgeCard({
+  link,
+  logo: Logo,
+  title,
+  description,
+  tags,
+}: BridgeCardProps) {
+  return (
+    // TODO: add bg-colorOverflow as border on hover
+    <Card className="transition-all hover:shadow-hover">
+      <CardContent className="flex flex-col justify-between gap-y-10 min-h-[205px] min-w-[200px]">
+        <section className="grid gap-2">
+          {Logo}
+          <p className="text-primary-foreground font-medium text-[16px]">
+            {title}
+          </p>
+          <p className="text-card-foreground text-[13px]">{description}</p>
+        </section>
+
+        <div className="flex justify-between">
+          <article className="flex gap-x-1">
+            {tags.map((tag) => (
+              <Badge
+                key={tag}
+                variant="outline"
+                className="border-card-foreground opacity-[.95] font-medium px-3 text-xs rounded-2xl text-card-foreground"
+              >
+                {tag}
+              </Badge>
+            ))}
+          </article>
+          <Link
+            target="_blank"
+            to={link}
+            className="text-[13px] py-1 px-2 transition-opacity text-primary font-medium hover:bg-primary/[0.04] rounded-lg"
+          >
+            Open
+          </Link>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+export default function Bridges() {
+  // FIX: use a React Context for managing theme so that bridge logos can
+  // update automatically when theme changes
+  const [theme] = useDataTheme();
+  return (
+    <section>
+      <h3 className="text-primary-foreground font-medium text-center mb-4">
+        Choose a bridge
+      </h3>
+      <div className="grid grid-cols-bridges gap-x-4 gap-y-5">
+        {Array.from({ length: 17 }).map((_, index) => {
+          const logo = theme.includes(ThemesEnum.Light)
+            ? "/images/logos/Owlto_Light.png"
+            : "/images/logos/Owlto_Dark.png";
+
+          return (
+            <BridgeCard
+              key={`bridge-${index}`}
+              link="https://syncswap.xyz/move"
+              title="Owlto Finance"
+              description="Decentralized cross-rollup bridge focused on L2, providing cheaper and faster transfers."
+              tags={["Cheap", "Fast"]}
+              logo={
+                <img className="h-5 mb-3" src={logo} alt="Owlto Finance logo" />
+              }
+            />
+          );
+        })}
+      </div>
+    </section>
+  );
+}

src/pages/bridge/index.tsx

@@ -1,6 +1,38 @@
+import Footer from "@/components/Footer";
+import { MdOutlineArrowOutward } from "react-icons/md";
+import { Link } from "react-router-dom";
+import Bridges from "./Bridges";
+
 export default function Bridge() {
-    return (
-        <div>Bridge</div>
-    )
-}
+  return (
+    <>
+      <main className="relative overflow-hidden pt-28 max-w-screen-lg mx-auto min-h-screen p-4">
+        <img
+          className="absolute w-full opacity-[0.1] z-0 -left-2 top-1"
+          src="/images/tracks_light.png"
+        />
+        <div className="relative z-20 space-y-12">
+          <section className="grid justify-items-center gap-1">
+            <h2 className="text-3xl font-semibold text-primary-foreground mb-3">
+              Say hello to a new era.
+            </h2>
+            <p className="text-sm text-card-foreground">
+              Enjoy faster, cheaper and more efficient transactions with the
+              future proof zkEVM scaling Ethereum‘s security and values.
+            </p>
 
+            <Link
+              className="flex items-center gap-x-1 p-1 text-primary text-sm font-medium hover:opacity-[.75]"
+              to="https://ethereum.org/en/bridges/"
+            >
+              <p>What are bridges?</p>
+              <MdOutlineArrowOutward />
+            </Link>
+          </section>
+          <Bridges />
+        </div>
+      </main>
+      <Footer />
+    </>
+  );
+}

tailwind.config.js

@@ -23,10 +23,13 @@ export default {
     extend: {
       gridTemplateColumns: {
         "wallet-options": "repeat(auto-fill, minmax(195px, 1fr))",
+        bridges: "repeat(auto-fill,minmax(290px,1fr))",
       },
       backgroundImage: {
         page: "var(--background)",
         zKTextGradient: "linear-gradient(var(--zKTextGradient))",
+        colorOverflow:
+          "radial-gradient(19.49% 58.52% at 50% 0,rgba(249,196,60,.3) 0,rgba(231,166,1,0) 100%),radial-gradient(50% 50% at 100% 100%,#520aeb 10.27%,rgba(159,115,255,0) 100%),radial-gradient(77.86% 77.86% at 100% 0,#00a7ff 0,rgba(0,166,254,.12) 100%),radial-gradient(50% 50% at 0 0,#ff8d6c 0,rgba(255,92,0,.6) 100%),radial-gradient(70.24% 70.24% at 0 100%,#e81d72 0,rgba(255,0,0,0) 100%)",
       },
       fontFamily: {
         Public: "Poppins, sans-serif",