feat: extend badges

apps/landing/src/app/(landings)/blog/_posts/midjourney-alternatives/index.tsx

@@ -64,12 +64,17 @@ export const tocItems: TocItem[] = [
 
 // Color-coded feature tags
 const tagColors: Record<string, string> = {
-  // Green - Free/Commercial
+  // Green - Commercial
-  'Free tier': 'bg-emerald-100 text-emerald-700 ring-1 ring-emerald-500/20',
   'Commercial safe': 'bg-emerald-100 text-emerald-700 ring-1 ring-emerald-500/20',
   // Blue - API/Technical
   'API': 'bg-blue-100 text-blue-700 ring-1 ring-blue-500/20',
   'API (via providers)': 'bg-blue-100 text-blue-700 ring-1 ring-blue-500/20',
+  'MCP': 'bg-blue-100 text-blue-700 ring-1 ring-blue-500/20',
+  'SDK': 'bg-blue-100 text-blue-700 ring-1 ring-blue-500/20',
+  'CLI': 'bg-blue-100 text-blue-700 ring-1 ring-blue-500/20',
+  'CDN': 'bg-blue-100 text-blue-700 ring-1 ring-blue-500/20',
+  'Image Hosting': 'bg-blue-100 text-blue-700 ring-1 ring-blue-500/20',
+  'Live URLs': 'bg-blue-100 text-blue-700 ring-1 ring-blue-500/20',
   // Purple - Reference types
   'Style ref': 'bg-violet-100 text-violet-700 ring-1 ring-violet-500/20',
   'Character ref': 'bg-violet-100 text-violet-700 ring-1 ring-violet-500/20',
@@ -173,8 +178,10 @@ export const Content = () => (
     <BlogImage src={leonardoAiHomepage} alt="Leonardo AI homepage" />
     <FeatureTags
       tags={[
-        'Free tier',
         'API',
+        'MCP',
+        'SDK',
+        'CDN',
         'Video',
         'Style ref',
         'Pose ref',
@@ -232,8 +239,8 @@ export const Content = () => (
     <BlogImage src={adobeFireflyHomepage} alt="Adobe Firefly homepage" />
     <FeatureTags
       tags={[
-        'Free tier',
         'API',
+        'SDK',
         'Commercial safe',
         'Style ref',
         'Inpaint',
@@ -285,7 +292,7 @@ export const Content = () => (
     </BlogHeading>
     <BlogServiceLink href="https://chatgpt.com">chatgpt.com</BlogServiceLink>
     <BlogImage src={chatgptHomepage} alt="ChatGPT homepage" />
-    <FeatureTags tags={['Free tier', 'Text', 'Chatbot interface', 'Inpaint']} />
+    <FeatureTags tags={['API', 'SDK', 'Text', 'Chatbot interface', 'Inpaint']} />
     <p className="text-gray-700 leading-relaxed mb-4">
       GPT-4o generates images natively inside ChatGPT — the same interface
       millions already use daily. No separate app, no new subscription, no
@@ -332,7 +339,7 @@ export const Content = () => (
     </BlogHeading>
     <BlogServiceLink href="https://ideogram.ai">ideogram.ai</BlogServiceLink>
     <BlogImage src={ideogramHomepage} alt="Ideogram homepage" />
-    <FeatureTags tags={['Free tier', 'Text', 'Inpaint']} />
+    <FeatureTags tags={['API', 'SDK', 'Text', 'Inpaint']} />
     <p className="text-gray-700 leading-relaxed mb-4">
       Founded by former Google Brain researchers specifically to solve
       typography in AI images. Where Midjourney achieves roughly 30% text
@@ -376,8 +383,10 @@ export const Content = () => (
     <BlogImage src={googleGeminiHomepage} alt="Google Gemini homepage" />
     <FeatureTags
       tags={[
-        'Free tier',
         'API',
+        'MCP',
+        'SDK',
+        'CLI',
         'Text',
         'Chatbot interface',
         'Character ref',
@@ -433,8 +442,8 @@ export const Content = () => (
     <BlogImage src={recraftAiHomepage} alt="Recraft AI homepage" />
     <FeatureTags
       tags={[
-        'Free tier',
         'API',
+        'SDK',
         'Vector',
         'Text',
         'Inpaint',
@@ -486,7 +495,7 @@ export const Content = () => (
     <BlogServiceLink href="https://reve.ai">reve.ai</BlogServiceLink>
     <BlogImage src={reveAiHomepage} alt="Reve AI homepage" />
     <FeatureTags
-      tags={['Free tier', 'Commercial safe', 'Text', 'Object selection']}
+      tags={['Commercial safe', 'Text', 'Object selection']}
     />
     <p className="text-gray-700 leading-relaxed mb-4">
       Launched March 2025, immediately claimed #1 on Artificial Analysis&apos;s
@@ -539,7 +548,7 @@ export const Content = () => (
     <BlogServiceLink href="https://bfl.ai">bfl.ai</BlogServiceLink>
     <BlogImage src={blackForestLabsHomepage} alt="Black Forest Labs homepage" />
     <FeatureTags
-      tags={['API (via providers)', 'Style ref', 'Pose ref', 'Depth ref', 'Inpaint']}
+      tags={['API (via providers)', 'MCP', 'Style ref', 'Pose ref', 'Depth ref', 'Inpaint']}
     />
     <p className="text-gray-700 leading-relaxed mb-4">
       The community favorite for self-hosting. Black Forest Labs publishes
@@ -600,7 +609,7 @@ export const Content = () => (
     <BlogServiceLink href="https://stability.ai">stability.ai</BlogServiceLink>
     <BlogImage src={stabilityAiHomepage} alt="Stability AI homepage" />
     <FeatureTags
-      tags={['API (via providers)', 'Style ref', 'Pose ref', 'Depth ref', 'Inpaint']}
+      tags={['API (via providers)', 'SDK', 'CLI', 'Style ref', 'Pose ref', 'Depth ref', 'Inpaint']}
     />
     <p className="text-gray-700 leading-relaxed mb-4">
       The foundation model that democratized AI image generation. What Stable
@@ -674,7 +683,7 @@ export const Content = () => (
     </BlogHeading>
     <BlogServiceLink href="https://civitai.com">civitai.com</BlogServiceLink>
     <BlogImage src={civitaiHomepage} alt="Civitai homepage" />
-    <FeatureTags tags={['Free tier', 'Inpaint']} />
+    <FeatureTags tags={['API', 'CDN', 'Image Hosting', 'Inpaint']} />
     <p className="text-gray-700 leading-relaxed mb-4">
       Not a model — a marketplace and community. Tens of thousands of
       checkpoints, fine-tunes, and LoRAs for SD and FLUX families. What makes it
@@ -738,7 +747,7 @@ export const Content = () => (
     </BlogHeading>
     <BlogServiceLink href="https://replicate.com">replicate.com</BlogServiceLink>
     <BlogImage src={replicateHomepage} alt="Replicate homepage" />
-    <FeatureTags tags={['API']} />
+    <FeatureTags tags={['API', 'MCP', 'SDK', 'CDN']} />
     <p className="text-gray-700 leading-relaxed mb-4">
       The model marketplace for developers. 50,000+ production-ready models
       spanning image generation, transcription, and beyond. The appeal:{' '}
@@ -823,7 +832,7 @@ export const Content = () => (
     </BlogHeading>
     <BlogServiceLink href="https://fal.ai">fal.ai</BlogServiceLink>
     <BlogImage src={falAiHomepage} alt="fal.ai homepage" />
-    <FeatureTags tags={['API']} />
+    <FeatureTags tags={['API', 'MCP', 'SDK', 'CLI']} />
     <p className="text-gray-700 leading-relaxed mb-4">
       Speed-focused platform. 600+ models including FLUX.2, often with day-zero
       access to new releases. The technical edge:{' '}
@@ -903,7 +912,7 @@ export const Content = () => (
     </BlogHeading>
     <BlogServiceLink href="https://runware.ai">runware.ai</BlogServiceLink>
     <BlogImage src={runwareHomepage} alt="Runware homepage" />
-    <FeatureTags tags={['API']} />
+    <FeatureTags tags={['API', 'SDK']} />
     <p className="text-gray-700 leading-relaxed mb-4">
       The cost leader. Their <strong>Sonic Inference Engine</strong> runs on
       AI-native hardware (custom servers, storage, networking, cooling)
@@ -967,7 +976,7 @@ export const Content = () => (
     </BlogHeading>
     <BlogServiceLink href="https://segmind.com">segmind.com</BlogServiceLink>
     <BlogImage src={segmindHomepage} alt="Segmind homepage" />
-    <FeatureTags tags={['Free tier', 'API']} />
+    <FeatureTags tags={['API', 'SDK', 'Image Hosting']} />
     <p className="text-gray-700 leading-relaxed mb-4">
       Workflow-focused platform. <strong>PixelFlow</strong> is the
       differentiator: a cloud-based drag-and-drop builder where you create
@@ -1022,7 +1031,7 @@ export const Content = () => (
     </BlogHeading>
     <BlogServiceLink href="https://novita.ai">novita.ai</BlogServiceLink>
     <BlogImage src={novitaAiHomepage} alt="Novita AI homepage" />
-    <FeatureTags tags={['API']} />
+    <FeatureTags tags={['API', 'SDK']} />
     <p className="text-gray-700 leading-relaxed mb-4">
       Budget option with startup-friendly programs. The{' '}
       <strong>Agent Sandbox</strong> launched in 2025 delivers millisecond-level
@@ -1079,7 +1088,7 @@ export const Content = () => (
     </BlogHeading>
     <BlogServiceLink href="https://together.ai">together.ai</BlogServiceLink>
     <BlogImage src={togetherAiHomepage} alt="Together AI homepage" />
-    <FeatureTags tags={['Free tier', 'API']} />
+    <FeatureTags tags={['API', 'SDK', 'CLI', 'CDN']} />
     <p className="text-gray-700 leading-relaxed mb-4">
       Unified AI platform covering text, image, and video generation. The
       strategic advantage:{' '}
@@ -1146,7 +1155,7 @@ export const Content = () => (
     </BlogHeading>
     <BlogServiceLink href="https://banatie.app">banatie.app</BlogServiceLink>
     <BlogImage src={banatieHomepage} alt="Banatie homepage" />
-    <FeatureTags tags={['API']} />
+    <FeatureTags tags={['API', 'Live URLs', 'CDN', 'Image Hosting']} />
     <p className="text-gray-700 leading-relaxed mb-4">
       Developer-native image generation built for AI coding workflows.
     </p>
@@ -1204,7 +1213,7 @@ export const Content = () => (
     </BlogHeading>
     <BlogServiceLink href="https://poe.com">poe.com</BlogServiceLink>
     <BlogImage src={poeHomepage} alt="Poe homepage" />
-    <FeatureTags tags={['Free tier', 'API', 'Chatbot interface']} />
+    <FeatureTags tags={['API', 'Chatbot interface']} />
     <p className="text-gray-700 leading-relaxed mb-4">
       100+ models through one interface, including FLUX-pro, GPT-Image, Imagen
       3/4, DALL-E 3, Gemini. The fundamental advantage:{' '}
@@ -1260,7 +1269,7 @@ export const Content = () => (
     <BlogImage src={kreaAiHomepage} alt="Krea.ai homepage" />
     <FeatureTags
       tags={[
-        'Free tier',
+        'API',
         'Live editing',
         'Canvas',
         'Inpaint',
@@ -1320,7 +1329,7 @@ export const Content = () => (
     </BlogHeading>
     <BlogServiceLink href="https://freepik.com/ai">freepik.com/ai</BlogServiceLink>
     <BlogImage src={freepikAiHomepage} alt="Freepik AI homepage" />
-    <FeatureTags tags={['Text', 'Inpaint', 'Upscaling']} />
+    <FeatureTags tags={['API', 'Image Hosting', 'Text', 'Inpaint', 'Upscaling']} />
     <p className="text-gray-700 leading-relaxed mb-4">
       All-in-one creative platform combining stock assets, AI generation, and
       editing. The <strong>Mystic model</strong> delivers exceptional