feat(website): add updated ecosystem page (#13887)

.github/ISSUE_TEMPLATE/add_project.yml

@@ -0,0 +1,29 @@
+name: Add a project to Taiko's ecosystem 🌐
+description: Add a project to Taiko's ecosystem
+labels: ["category.enhancement", "status.needs-triage"]
+assignees:
+  - d1onys1us, 2manslkh
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for taking the time to add your project. You can see existing examples on Taiko's ecosystem page [here](https://taiko.xyz/ecosystem)!
+  - type: input
+    id: title
+    attributes:
+      label: Title of your project
+    validations:
+      required: true
+  - type: input
+    id: link
+    attributes:
+      label: Link to your project
+    validations:
+      required: true
+  - type: textarea
+    id: logo
+    attributes:
+      label: Upload a quality logo to your project
+      description: 512x512 or 1:1 ratio is preferred. If no image is provided we will use a placeholder image.
+    validations:
+      required: false

packages/website/components/EcosystemCard.tsx

@@ -0,0 +1,20 @@
+function EcosystemCard({ icon, name, link, description }) {
+  return (
+    <a
+      href={link}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="rounded-xl shadow-md bg-white dark:bg-neutral-800 p-6 flex flex-col justify-start items-start 
+                    transition-colors duration-200 hover:shadow-xl dark:hover:bg-neutral-700"
+    >
+      <img src={icon} alt={`${name}-logo`} className="w-16 h-16 mb-4" />
+      <h2 className="text-2xl text-black dark:text-white font-bold mb-2">
+        {name}
+      </h2>
+      <p className="text-neutral-500 dark:text-neutral-300 mb-4">{link}</p>
+      <p className="text-neutral-700 dark:text-neutral-100">{description}</p>
+    </a>
+  );
+}
+
+export default EcosystemCard;

packages/website/components/EcosystemSection.tsx

@@ -0,0 +1,46 @@
+import EcosystemCard from "./EcosystemCard";
+
+export default function EcosystemSection() {
+  const ecosystemData = [
+    {
+      icon: "/images/ecosystem/taiko.svg",
+      name: "Bridge",
+      link: "https://bridge.test.taiko.xyz",
+      description: "Bridge is a dapp that lets you bridge tokens with Taiko.",
+    },
+    {
+      icon: "/images/ecosystem/taiko.svg",
+      name: "Swap",
+      link: "https://swap.test.taiko.xyz",
+      description: "Swap is a dapp that lets you swap tokens on Taiko.",
+    },
+    {
+      icon: "/images/ecosystem/orbiter.jpg",
+      name: "Orbiter",
+      link: "https://orbiter.finance",
+      description:
+        "A decentralized cross-rollup Layer 2 bridge with a contract only on the destination side.",
+    },
+    {
+      icon: "/images/ecosystem/loopring.svg",
+      name: "Loopring Wallet",
+      link: "https://loopring.io/#/wallet",
+      description:
+        "Loopring is your mobile gateway to Ethereum L2, enabling you to easily trade, swap, collect, stake, and invest without the costly gas fees.",
+    },
+  ];
+
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 pt-6">
+      {ecosystemData.map((_) => (
+        <EcosystemCard
+          key={_.name}
+          icon={_.icon}
+          name={_.name}
+          link={_.link}
+          description={_.description}
+        />
+      ))}
+    </div>
+  );
+}

packages/website/pages/_meta.json

@@ -17,6 +17,13 @@
     "href": "https://mirror.xyz/labs.taiko.eth",
     "newWindow": true
   },
+  "ecosystem": {
+    "title": "Ecosystem",
+    "type": "page",
+    "theme": {
+      "layout": "full"
+    }
+  },
   "forum": {
     "title": "Forum",
     "type": "page",

packages/website/pages/ecosystem.mdx

@@ -0,0 +1,7 @@
+import EcosystemSection from "components/EcosystemSection";
+
+{<h1 className="font-grotesk text-3xl mt-10 mb-4 text-center text-[2.5rem] tracking-tight text-neutral-900 dark:text-neutral-200">Ecosystem</h1>}
+
+{<p className="mb-16 text-center text-lg"><a href="https://github.com/taikoxyz/taiko-mono/issues/new?assignees=&labels=category.enhancement%2Cstatus.needs-triage&projects=&template=add_project.yml" target="_blank" rel="noopener noreferrer">Add your project</a></p>}
+
+<EcosystemSection />