add ecosystem

docs/app/page.tsx

@@ -6,7 +6,7 @@ import TrustedBy from "./sections/TrustedBy/TrustedBy";
 import Installation from "./sections/Installation";
 import Architecture from "./sections/Architecture";
 import Integrations from "./sections/Integrations";
-import Ecosystem from "./sections/Ecosystem";
+import Ecosystem from "./sections/Ecosystem/Ecosystem";
 import Changelog from "./sections/Changelog";
 import Newsletter from "./sections/Newsletter";
 

docs/app/sections/Changelog.tsx

@@ -33,8 +33,8 @@ const ChangelogItem = ({ version, date, changes }: ChangelogItem) => {
         </div>
 
         <ul className="mt-6 list-disc pl-5 text-[18px] text-white/70">
-          {allChanges.slice(0, 3).map((change) => (
-            <li key={change.title} title={change.title}>
+          {allChanges.slice(0, 3).map((change, index) => (
+            <li key={`${change.title}-${index}`} title={change.title}>
               <span className="truncate block max-w-[400px]">{change.title}</span>
             </li>
           ))}
@@ -77,8 +77,8 @@ export default function Changelog() {
       <div className="w-full overflow-x-auto mt-8">
         <Container>
           <div className="grid grid-rows-1 grid-flow-col">
-            {changelog.map((item) => (
-              <ChangelogItem key={item.version} {...item} />
+            {changelog.map((item, index) => (
+              <ChangelogItem key={`${item.version}-${index}`} {...item} />
             ))}
           </div>
         </Container>

docs/app/sections/Ecosystem/Ecosystem.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import Image from "next/image";
+import { Section } from "../../../components/ui/Section";
+import { Container } from "../../../components/ui/Container";
+import { cn } from "../../../lib/cn";
+import { projects } from "./projects";
+
+export default function Ecosystem() {
+  return (
+    <Section className="pb-[70px] pt-[60px] bg-light-gray">
+      <Container>
+        <div className="space-y-3">
+          <h2 className="font-mono uppercase text-lg md:text-xl">Ecosystem</h2>
+          <p className="text-white/70 text-sm md:text-md">Start using a wide ecosystem of projects powered by MUD.</p>
+        </div>
+
+        <div className="flex flex-wrap md:mt-[32px] md:gap-[22px]">
+          {projects?.map((project, index) => {
+            return (
+              <a
+                href={project.url}
+                key={index}
+                rel="noopener noreferrer"
+                target="_blank"
+                className={cn(
+                  "relative flex flex-col justify-between",
+                  "w-full md:h-[96px] md:w-[calc(50%-12px)] lg:w-[calc(33.333%-15px)]",
+                  "text-white",
+                )}
+              >
+                <Image
+                  className="absolute left-0 top-0 z-[-1] hidden h-full w-full bg-gray-light bg-cover bg-center md:block"
+                  src={project.bgImage}
+                  alt={project.name}
+                  width="368"
+                  height="156"
+                  style={{ zIndex: "1" }}
+                />
+
+                <div
+                  className={cn(
+                    "absolute left-0 top-0 h-full w-full",
+                    "flex flex-col justify-between",
+                    "h-[96px] w-full",
+                    "py-[28px] md:px-[27px] md:py-[24px]",
+                    "bg-black/90 hover:bg-black/60",
+                    "border-b-2 border-white/10 md:border md:hover:border-white/30",
+                    "transition-bg transition-border duration-300",
+                  )}
+                  style={{ zIndex: "2" }}
+                >
+                  <div className="flex w-full items-center justify-between">
+                    <div className="flex items-center justify-start gap-[17px]">
+                      <Image src={project.icon} alt={`${project.name} title`} width="46" height="46" />
+                      <h3 className="font-mono text-[24px] uppercase leading-[28px]">{project.name}</h3>
+                    </div>
+                  </div>
+                </div>
+              </a>
+            );
+          })}
+        </div>
+      </Container>
+    </Section>
+  );
+}

docs/app/sections/Ecosystem/projects.ts

@@ -0,0 +1,98 @@
+export const projects = [
+  {
+    name: "Biomes",
+    icon: "/ecosystem/icons/biomes.png",
+    bgImage: "/ecosystem/bg/everlon.png",
+    url: "https://biomes.aw",
+  },
+  {
+    name: "EVE Frontier",
+    icon: "/ecosystem/icons/eve-frontier.jpg",
+    bgImage: "/ecosystem/bg/eve-frontier.jpg",
+    url: "https://evefrontier.com/en",
+  },
+  {
+    name: "CafeCosmos",
+    icon: "/ecosystem/icons/cafe-cosmos.png",
+    bgImage: "/ecosystem/bg/cafe-cosmos.jpeg",
+    url: "https://x.com/CafeCosmosHQ",
+  },
+  {
+    name: "This Cursed Machine",
+    icon: "/ecosystem/icons/thiscursedmachine.png",
+    bgImage: "/ecosystem/bg/thiscursedmachine.png",
+    url: "https://thiscursedmachine.fun/",
+  },
+  {
+    name: "Battle for Blockchain",
+    icon: "/ecosystem/icons/battle-blockchain.png",
+    bgImage: "/ecosystem/bg/battle-blockchain.jpeg",
+    url: "https://x.com/battleforblock",
+  },
+  {
+    name: "For the Kingdom",
+    icon: "/ecosystem/icons/for-kingdom.png",
+    bgImage: "/ecosystem/bg/for-kingdom.jpeg",
+    url: "https://x.com/4thekingdom_xyz",
+  },
+  {
+    name: "Words3",
+    icon: "/ecosystem/icons/words3.png",
+    bgImage: "/ecosystem/bg/words3.png",
+    url: "https://www.words3.xyz/",
+  },
+  {
+    name: "Primodium",
+    icon: "/ecosystem/icons/primodium.jpg",
+    bgImage: "/ecosystem/bg/primodium.png",
+    url: "https://x.com/primodiumgame",
+  },
+  {
+    name: "Dappmon",
+    icon: "/ecosystem/icons/dappmon.jpg",
+    bgImage: "/ecosystem/bg/dappmon.jpeg",
+    url: "dappmon.xyz",
+  },
+  {
+    name: "Project Mirage",
+    icon: "/ecosystem/icons/project-mirage.jpg",
+    bgImage: "/ecosystem/bg/project-mirage.jpeg",
+    url: "https://x.com/mirage_game_",
+  },
+  {
+    name: "Yonk",
+    icon: "/ecosystem/icons/yonk.png",
+    bgImage: "/ecosystem/bg/yonk.png",
+    url: "https://apps.apple.com/gb/app/yonk/id6478030288",
+  },
+  {
+    name: "Dear",
+    icon: "/ecosystem/icons/dear.png",
+    bgImage: "/ecosystem/bg/dear.png",
+    url: "https://www.dear.game/",
+  },
+  {
+    name: "PopCraft",
+    icon: "/ecosystem/icons/popcraft.jpg",
+    bgImage: "/ecosystem/bg/popcraft.png",
+    url: "https://x.com/PopCraftOnChain",
+  },
+  {
+    name: "Aether Sands",
+    description: "An onchain open-world survival & resource management game.",
+    icon: "/ecosystem/icons/aethersands.png",
+    bgImage: "/ecosystem/bg/aethersands.png",
+    url: "https://x.com/aether_sands",
+    mud: true,
+    redstone: false,
+  },
+  {
+    name: "Geoweb",
+    description: "A public good augmented reality network.",
+    icon: "/ecosystem/icons/geoweb.png",
+    bgImage: "/ecosystem/bg/geoweb.png",
+    url: "https://x.com/thegeoweb",
+    mud: true,
+    redstone: false,
+  },
+];

docs/components/ui/TextFader.tsx

@@ -16,8 +16,6 @@ export default function TextFader({ texts, interval = 3000 }: TextFaderProps) {
 
     const timer = setInterval(() => {
       setCurrentIndex((prevIndex) => (prevIndex + 1) % texts.length);
-
-      console.log(currentIndex);
     }, interval);
 
     return () => clearInterval(timer);