Rework eco + card components, sidebar 'For Users', add/mod user guides

.gitignore

@@ -1,4 +1,4 @@
 .next
 node_modules
 .idea/*
-.DS_Store
+.DS_Store

components/Card/Card.tsx

@@ -1,5 +1,6 @@
-import Image, { StaticImageData } from "next/image";
+// Card.tsx
 
+import Image, { StaticImageData } from "next/image";
 interface CardProps {
   image: StaticImageData;
   title: string;
@@ -17,10 +18,10 @@ function Card({ image, title, description, href }: CardProps) {
       className="flex flex-col border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden hover:opacity-80"
       href={href}
       target="_blank"
-      rel="noopener"
+      rel="noopener noreferrer"
     >
       <div>
-        <Image src={image} alt={title} />
+        <Image src={image} alt={title} layout="responsive" width={700} height={475} priority />
       </div>
       <div className="flex-1 p-4 bg-gray-100 dark:bg-gray-800">
         <p className="text-lg font-semibold mb-2">{title}</p>

components/EcosystemApps/EcosystemApps.tsx

@@ -1,172 +1,53 @@
-import { StaticImageData } from "next/image";
-import { Card, Cards } from "../../components";
+import React, { useState, useMemo, useEffect } from 'react';
+import { Card, Cards } from '../../components/Card';
+import appData from '../../data/appData';  // Ensure this import is correct
 
-import camelLogo from "../../public/assets/ecosystem/camel.png";
-import gamblinoLogo from "../../public/assets/ecosystem/gamblino.jpeg";
-import dragonswapLogo from "../../public/assets/ecosystem/dragonswap.jpeg";
-import fluidLogo from "../../public/assets/ecosystem/fluid.png";
-import belugasLogo from "../../public/assets/ecosystem/belugas.png";
-import squaredLabsLogo from "../../public/assets/ecosystem/squared-labs.jpeg";
-import seijinLogo from "../../public/assets/ecosystem/seijin.png";
-import predxLogo from "../../public/assets/ecosystem/predx.jpeg";
-import yakaLogo from "../../public/assets/ecosystem/yaka.jpeg";
-import webumpLogo from "../../public/assets/ecosystem/webump.jpeg";
-import accumulatedLogo from "../../public/assets/ecosystem/accumulated.jpeg";
-import mambaLogo from "../../public/assets/ecosystem/mamba.png";
-import jellyverseLogo from "../../public/assets/ecosystem/jellyverse.png";
-import seicasinoLogo from "../../public/assets/ecosystem/seicasino.png";
-import hoyuLogo from "../../public/assets/ecosystem/hoyu.jpeg";
-import superSeiyanBotLogo from "../../public/assets/ecosystem/superseiyanbot.jpeg";
-import nfts2meLogo from "../../public/assets/ecosystem/nfts2me.png";
-import stafiLogo from "../../public/assets/ecosystem/stafi.png";
-import siloLogo from "../../public/assets/ecosystem/silo.jpeg";
-import vermillionLogo from "../../public/assets/ecosystem/vermillion.jpeg";
+const EcosystemApps = () => {
+  const [searchTerm, setSearchTerm] = useState('');
+  const [allTags, setAllTags] = useState([]);
 
-interface App {
-  title: string;
-  description: string;
-  href: string;
-  image: StaticImageData;
-}
+  // Extract unique tags from appData
+  useEffect(() => {
+    const tags = new Set();
+    appData.forEach(app => app.tags.forEach(tag => tags.add(tag)));
+    setAllTags(Array.from(tags));
+  }, []);
 
-const APPS: App[] = [
-  {
-    title: "DragonSwap",
-    description: "The native DEX on SEI",
-    href: "https://test.dragonswap.app/",
-    image: dragonswapLogo,
-  },
-  {
-    title: "SeiCasino",
-    description: "Full-featured casino built natively on Sei",
-    href: "https://seicasino.io",
-    image: seicasinoLogo,
-  },
-  {
-    title: "WeBump",
-    description: "Sei native NFT launchpad",
-    href: "https://webump.xyz/",
-    image: webumpLogo,
-  },
-  {
-    title: "Seijin",
-    description: "Launchpad on Sei",
-    href: "https://seijin.app/staking",
-    image: seijinLogo,
-  },
-  {
-    title: "Squared Labs",
-    description: "Quadratic price exposure on perpetual futures",
-    href: "https://squaredlabs.io/app/btc",
-    image: squaredLabsLogo,
-  },
-  {
-    title: "PredX",
-    description: "Prediction market",
-    href: "https://events.predx.ai/",
-    image: predxLogo,
-  },
-  {
-    title: "Gamblino",
-    description:
-      "GambleFi protocol covering crypto, sportsbook and classic games of chance",
-    href: "https://test.gamblino.app/",
-    image: gamblinoLogo,
-  },
-  {
-    title: "Silo",
-    description: "Liquid staking and MEV on Sei",
-    href: "https://silo-evm.dc37hw5o72ljt.amplifyapp.com/",
-    image: siloLogo,
-  },
-  {
-    title: "Camel",
-    description: "Sei's liquidity oasis",
-    href: "https://camel.money",
-    image: camelLogo,
-  },
-  {
-    title: "Fluid",
-    description: "Interest free loans, backed by Sei",
-    href: "https://fluidex.metabest.tech/",
-    image: fluidLogo,
-  },
-  {
-    title: "Belugas",
-    description: "Decentralized marketplace for lenders and borrowers",
-    href: "https://www.belugas.io/",
-    image: belugasLogo,
-  },
-  {
-    title: "Yaka",
-    description: "Algebra Integral fork on Sei",
-    href: "https://test.yaka.finance/",
-    image: yakaLogo,
-  },
-  {
-    title: "Accumulated",
-    description: "Liquid staking protocol",
-    href: "https://testnet.accumulated.finance/stake/sei",
-    image: accumulatedLogo,
-  },
-  {
-    title: "Mamba Defi",
-    description: "Defi and memecoin ecosystem",
-    href: "https://www.mambaswap.io/",
-    image: mambaLogo,
-  },
-  {
-    title: "JellyVerse",
-    description: "Smart order router",
-    href: "https://jelly-verse-sei.vercel.app/jellyswap",
-    image: jellyverseLogo,
-  },
-  {
-    title: "Hoyu",
-    description:
-      "DeFi protocol uniting lending and trading markets to give every token new utility as safe collateral",
-    href: "https://arctic.hoyu.io",
-    image: hoyuLogo,
-  },
-  {
-    title: "Super Seiyan Bot",
-    description: "Sei native telegram trading bot",
-    href: "https://t.me/SSeiyanEvmBot",
-    image: superSeiyanBotLogo,
-  },
-  {
-    title: "NFTs2ME",
-    description: "No-code NFT creation tool",
-    href: "https://nfts2me.com/app/sei-devnet/",
-    image: nfts2meLogo,
-  },
-  {
-    title: "Stafi",
-    description: "LST protocol",
-    href: "https://test-app.stafi.io/gallery/evm/SEI/?net=SEI",
-    image: stafiLogo,
-  },
-  {
-    title: "Vermillion",
-    description: "Next-gen AMM and stablecoin",
-    href: "https://app.vermillion.finance/swap",
-    image: vermillionLogo,
-  },
-];
+  const filteredApps = useMemo(() => (
+    appData.filter(app =>
+      app.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      app.tags.some(tag => tag.toLowerCase().includes(searchTerm.toLowerCase()))
+    )
+  ), [searchTerm]);
 
-const EcosystemApps = () => {
   return (
-    <Cards>
-      {APPS.map((app) => (
-        <Card
-          key={app.title}
-          title={app.title}
-          description={app.description}
-          href={app.href}
-          image={app.image}
-        />
-      ))}
-    </Cards>
+    <div>
+      <input
+        type="text"
+        placeholder="Search apps by name or tag..."
+        value={searchTerm}
+        onChange={(e) => setSearchTerm(e.target.value)}
+        className="w-full p-2 text-sm border rounded shadow-sm placeholder-gray-400"
+      />
+      <div className="mt-2 mb-4 text-sm text-gray-600">
+        <strong>Filter by Tags:</strong> {allTags.join(', ')}
+      </div>
+      <Cards>
+        {filteredApps.length > 0 ? (
+          filteredApps.map((app) => (
+            <Card
+              key={app.title}
+              title={app.title}
+              description={app.description}
+              href={app.href}
+              image={app.image}
+            />
+          ))
+        ) : (
+          <div className="text-center text-gray-500">No apps found.</div>
+        )}
+      </Cards>
+    </div>
   );
 };