> ## Documentation Index
> Fetch the complete documentation index at: https://docs.insforge.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# 展示

> 使用 InsForge 構建的生產應用程式

export const ServiceIcons = ({services}) => {
  const iconMap = {
    database: {
      src: '/images/icons/database.svg',
      title: 'Database'
    },
    auth: {
      src: '/images/icons/auth.svg',
      title: 'Authentication'
    },
    storage: {
      src: '/images/icons/storage.svg',
      title: 'Storage'
    },
    ai: {
      src: '/images/icons/ai.svg',
      title: 'AI Services'
    },
    functions: {
      src: '/images/icons/function.svg',
      title: 'Edge Functions'
    }
  };
  return <div className="flex gap-2 mt-3" style={{
    pointerEvents: 'none'
  }}>
      {services.map(service => {
    const icon = iconMap[service.toLowerCase()];
    return icon ? <img key={service} src={icon.src} alt={icon.title} title={icon.title} className="w-5 h-5 opacity-70" style={{
      pointerEvents: 'none'
    }} /> : null;
  })}
    </div>;
};

查看開發者使用 InsForge 構建的內容 - 從 AI 驅動的 SaaS 到社交平台等。

## 社群專案

<CardGroup cols={2}>
  <Card title="國旗排行榜" icon="flag" href="https://national-flags-phi.vercel.app/">
    <div style={{maxHeight: '192px', height: '192px', overflow: 'hidden', borderRadius: '0.5rem', pointerEvents: 'none'}}>
      <img src="https://mintcdn.com/insforge-468ccf39/ASZDAmWg97F3HceI/showcase/national-flags.png?fit=max&auto=format&n=ASZDAmWg97F3HceI&q=85&s=8507df26d9eacb43c43be62e298eb4d2" style={{width: '100%', height: '192px', objectFit: 'cover', pointerEvents: 'none'}} alt="國旗排行榜展示" width="1600" height="900" data-path="showcase/national-flags.png" />
    </div>

    透過互動式資料庫學習國旗，並參與真實排行榜排名的挑戰。

    <ServiceIcons services={['database', 'auth', 'storage', 'ai', 'functions']} />
  </Card>

  <Card title="Pokemon Vibe" icon="wand-magic-sparkles" href="https://pokemon-vibe.vercel.app/">
    <div style={{maxHeight: '192px', height: '192px', overflow: 'hidden', borderRadius: '0.5rem', pointerEvents: 'none'}}>
      <img src="https://mintcdn.com/insforge-468ccf39/ASZDAmWg97F3HceI/showcase/pokemon-vibe.png?fit=max&auto=format&n=ASZDAmWg97F3HceI&q=85&s=f4400158feb6bdd7d9d69a49348d5e69" style={{width: '100%', height: '192px', objectFit: 'cover', pointerEvents: 'none'}} alt="Pokemon Vibe 展示" width="1600" height="900" data-path="showcase/pokemon-vibe.png" />
    </div>

    組建自己的 Pokemon 團隊並與其他玩家競爭。AI 驅動的戰鬥讓兩個團隊在 AI 生成的圖紙上對戰。

    <ServiceIcons services={['database', 'auth', 'storage', 'ai', 'functions']} />
  </Card>

  <Card title="2048 Arena" icon="gamepad" href="https://insforge-2048-arena.netlify.app/">
    <div style={{maxHeight: '192px', height: '192px', overflow: 'hidden', borderRadius: '0.5rem', pointerEvents: 'none'}}>
      <img src="https://mintcdn.com/insforge-468ccf39/ASZDAmWg97F3HceI/showcase/2048-arena.png?fit=max&auto=format&n=ASZDAmWg97F3HceI&q=85&s=ba75d66802c050986700db2b5201b26c" style={{width: '100%', height: '192px', objectFit: 'cover', pointerEvents: 'none'}} alt="2048 Arena 展示" width="1600" height="900" data-path="showcase/2048-arena.png" />
    </div>

    經典 2048 益智遊戲，配有多人競技場和競爭排行榜。

    <ServiceIcons services={['database', 'auth']} />
  </Card>

  <Card title="Line Connect Race" icon="route" href="https://line-connect-race.vercel.app/">
    <div style={{maxHeight: '192px', height: '192px', overflow: 'hidden', borderRadius: '0.5rem', pointerEvents: 'none'}}>
      <img src="https://mintcdn.com/insforge-468ccf39/ASZDAmWg97F3HceI/showcase/line-connect-race.png?fit=max&auto=format&n=ASZDAmWg97F3HceI&q=85&s=d22cd12a1a3f87bca9b1f7505d388f94" style={{width: '100%', height: '192px', objectFit: 'cover', pointerEvents: 'none'}} alt="Line Connect Race 展示" width="1600" height="900" data-path="showcase/line-connect-race.png" />
    </div>

    具有即時多人遊戲和競爭遊戲玩法的互動式劃線賽車遊戲。

    <ServiceIcons services={['database', 'auth', 'functions']} />
  </Card>
</CardGroup>