feat: images

apps/landing/src/app/(landings)/blog/_components/BlogImage.tsx

@@ -1,8 +1,8 @@
-import Image from 'next/image';
+import Image, { StaticImageData } from 'next/image';
 import { ImageIcon } from 'lucide-react';
 
 interface BlogImageProps {
-  src: string;
+  src: string | StaticImageData;
   alt: string;
   caption?: string;
   fullWidth?: boolean;
@@ -14,17 +14,28 @@ export const BlogImage = ({
   caption,
   fullWidth = false,
 }: BlogImageProps) => {
+  const isStaticImage = typeof src !== 'string';
+
   return (
-    <figure className={`my-10 group ${fullWidth ? '-mx-6' : ''}`}>
+    <figure className={`my-8 group ${fullWidth ? '-mx-6' : ''}`}>
       <div className="overflow-hidden rounded-xl border border-gray-200 shadow-lg transition-all duration-300 hover:shadow-xl">
-        <div className="relative aspect-video bg-gray-100">
+        {isStaticImage ? (
           <Image
             src={src}
             alt={alt}
-            fill
+            placeholder="blur"
-            className="object-cover transform transition-transform duration-500 group-hover:scale-[1.02]"
+            className="w-full h-auto"
           />
-        </div>
+        ) : (
+          <div className="relative aspect-video bg-gray-100">
+            <Image
+              src={src}
+              alt={alt}
+              fill
+              className="object-cover"
+            />
+          </div>
+        )}
       </div>
       {caption && (
         <figcaption className="mt-4 flex items-center justify-center gap-2 text-sm text-gray-500">

apps/landing/src/app/(landings)/blog/_components/BlogPricing.tsx

@@ -0,0 +1,39 @@
+interface BlogPricingProps {
+  free?: string;
+  paid?: string;
+  perImage?: string;
+  sdk?: string;
+}
+
+export const BlogPricing = ({ free, paid, perImage, sdk }: BlogPricingProps) => {
+  return (
+    <div className="my-6 rounded-lg border-l-4 border-emerald-500 bg-gray-50 px-5 py-4">
+      <div className="flex flex-wrap gap-x-8 gap-y-2 text-sm">
+        {free && (
+          <div>
+            <span className="text-gray-500">Free: </span>
+            <span className="font-semibold text-gray-900">{free}</span>
+          </div>
+        )}
+        {paid && (
+          <div>
+            <span className="text-gray-500">Paid: </span>
+            <span className="font-semibold text-gray-900">{paid}</span>
+          </div>
+        )}
+        {perImage && (
+          <div>
+            <span className="text-gray-500">Per image: </span>
+            <span className="font-bold text-emerald-600 text-base">{perImage}</span>
+          </div>
+        )}
+        {sdk && (
+          <div>
+            <span className="text-gray-500">SDK: </span>
+            <span className="font-medium text-gray-700">{sdk}</span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

apps/landing/src/app/(landings)/blog/_components/BlogServiceLink.tsx

@@ -0,0 +1,20 @@
+import { ExternalLink } from 'lucide-react';
+
+interface BlogServiceLinkProps {
+  href: string;
+  children: React.ReactNode;
+}
+
+export const BlogServiceLink = ({ href, children }: BlogServiceLinkProps) => {
+  return (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="inline-flex items-center gap-2 text-violet-600 hover:text-violet-700 font-medium mb-4 group"
+    >
+      <ExternalLink className="w-4 h-4 transition-transform group-hover:translate-x-0.5" />
+      <span className="hover:underline">{children}</span>
+    </a>
+  );
+};

apps/landing/src/app/(landings)/blog/_components/BlogTOC.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useEffect, useState } from 'react';
+import { ChevronDown } from 'lucide-react';
 import type { TocItem } from '../types';
 
 interface BlogTOCProps {
@@ -9,6 +10,7 @@ interface BlogTOCProps {
 
 export const BlogTOC = ({ items }: BlogTOCProps) => {
   const [activeId, setActiveId] = useState<string>('');
+  const [isExpanded, setIsExpanded] = useState(true);
 
   useEffect(() => {
     const observer = new IntersectionObserver(
@@ -43,33 +45,47 @@ export const BlogTOC = ({ items }: BlogTOCProps) => {
 
   return (
     <div className="rounded-xl bg-gray-50 border border-gray-200 p-5 shadow-sm">
-      <h4 className="text-xs font-bold text-gray-500 uppercase tracking-wider mb-4 border-b border-gray-200 pb-2">
+      <button
-        On This Page
+        onClick={() => setIsExpanded(!isExpanded)}
-      </h4>
+        className="w-full flex items-center justify-between text-xs font-bold text-gray-500 uppercase tracking-wider border-b border-gray-200 pb-2 hover:text-gray-700 transition-colors"
-      <nav className="flex flex-col space-y-3 text-sm" aria-label="Table of contents">
+      >
-        {items.map((item) => {
+        <span>On This Page</span>
-          const isActive = activeId === item.id;
+        <ChevronDown
-          const isH3 = item.level === 3;
+          className={`w-4 h-4 transition-transform duration-200 ${
+            isExpanded ? '' : '-rotate-90'
+          }`}
+        />
+      </button>
+      <div
+        className={`overflow-hidden transition-all duration-300 ${
+          isExpanded ? 'max-h-[2000px] opacity-100 mt-4' : 'max-h-0 opacity-0 mt-0'
+        }`}
+      >
+        <nav className="flex flex-col space-y-3 text-sm" aria-label="Table of contents">
+          {items.map((item) => {
+            const isActive = activeId === item.id;
+            const isH3 = item.level === 3;
 
-          return (
+            return (
-            <button
+              <button
-              key={item.id}
+                key={item.id}
-              onClick={() => scrollToSection(item.id)}
+                onClick={() => scrollToSection(item.id)}
-              className={`
+                className={`
-                text-left pl-2 border-l-2 transition-colors
+                  text-left pl-2 border-l-2 transition-colors
-                ${isH3 ? 'ml-3' : ''}
+                  ${isH3 ? 'ml-3' : ''}
-                ${
+                  ${
-                  isActive
+                    isActive
-                    ? 'text-gray-900 font-medium border-violet-500'
+                      ? 'text-gray-900 font-medium border-violet-500'
-                    : 'text-gray-500 border-transparent hover:text-gray-900'
+                      : 'text-gray-500 border-transparent hover:text-gray-900'
-                }
+                  }
-              `}
+                `}
-            >
+              >
-              {item.text}
+                {item.text}
-            </button>
+              </button>
-          );
+            );
-        })}
+          })}
-      </nav>
+        </nav>
+      </div>
     </div>
   );
 };

apps/landing/src/app/(landings)/blog/_components/index.ts

@@ -11,3 +11,5 @@ export { BlogCodeBlock } from './BlogCodeBlock';
 export { BlogShareButtons } from './BlogShareButtons';
 export { BlogInfoBox } from './BlogInfoBox';
 export { BlogLeadParagraph } from './BlogLeadParagraph';
+export { BlogServiceLink } from './BlogServiceLink';
+export { BlogPricing } from './BlogPricing';

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

@@ -4,8 +4,33 @@ import {
   BlogLeadParagraph,
   BlogInfoBox,
   BlogCTA,
-} from '../_components';
+  BlogServiceLink,
-import type { TocItem } from '../types';
+  BlogPricing,
+} from '../../_components';
+import type { TocItem } from '../../types';
+
+// Image imports
+import midjourneyHomepage from './assets/midjourney-homepage.png';
+import leonardoAiHomepage from './assets/leonardo-ai-homepage.png';
+import adobeFireflyHomepage from './assets/adobe-firefly-homepage.png';
+import chatgptHomepage from './assets/chatgpt-homepage.png';
+import ideogramHomepage from './assets/ideogram-homepage.png';
+import googleGeminiHomepage from './assets/google-gemini-homepage.png';
+import recraftAiHomepage from './assets/recraft-ai-homepage.png';
+import reveAiHomepage from './assets/reve-ai-homepage.png';
+import blackForestLabsHomepage from './assets/black-forest-labs-homepage.png';
+import stabilityAiHomepage from './assets/stability-ai-homepage.png';
+import civitaiHomepage from './assets/civitai-homepage.png';
+import replicateHomepage from './assets/replicate-homepage.png';
+import falAiHomepage from './assets/fal-ai-homepage.png';
+import runwareHomepage from './assets/runware-homepage.png';
+import segmindHomepage from './assets/segmind-homepage.png';
+import novitaAiHomepage from './assets/novita-ai-homepage.png';
+import togetherAiHomepage from './assets/together-ai-homepage.png';
+import banatieHomepage from './assets/banatie-homepage.png';
+import poeHomepage from './assets/poe-homepage.png';
+import kreaAiHomepage from './assets/krea-ai-homepage.png';
+import freepikAiHomepage from './assets/freepik-ai-homepage.png';
 
 export const tocItems: TocItem[] = [
   { id: 'ui-first-platforms', text: 'UI-First Platforms', level: 2 },
@@ -37,12 +62,44 @@ export const tocItems: TocItem[] = [
   { id: 'conclusion', text: 'Conclusion', level: 2 },
 ];
 
+// Color-coded feature tags
+const tagColors: Record<string, string> = {
+  // Green - Free/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',
+  // 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',
+  'Content ref': 'bg-violet-100 text-violet-700 ring-1 ring-violet-500/20',
+  'Pose ref': 'bg-violet-100 text-violet-700 ring-1 ring-violet-500/20',
+  'Depth ref': 'bg-violet-100 text-violet-700 ring-1 ring-violet-500/20',
+  // Orange - Text/Vector
+  'Text': 'bg-amber-100 text-amber-700 ring-1 ring-amber-500/20',
+  'Vector': 'bg-amber-100 text-amber-700 ring-1 ring-amber-500/20',
+  // Pink - Editing
+  'Canvas': 'bg-pink-100 text-pink-700 ring-1 ring-pink-500/20',
+  'Inpaint': 'bg-pink-100 text-pink-700 ring-1 ring-pink-500/20',
+  'Outpaint': 'bg-pink-100 text-pink-700 ring-1 ring-pink-500/20',
+  'Upscaling': 'bg-pink-100 text-pink-700 ring-1 ring-pink-500/20',
+  'Object selection': 'bg-pink-100 text-pink-700 ring-1 ring-pink-500/20',
+  // Cyan - Video/Live
+  'Video': 'bg-cyan-100 text-cyan-700 ring-1 ring-cyan-500/20',
+  'Live editing': 'bg-cyan-100 text-cyan-700 ring-1 ring-cyan-500/20',
+  // Gray - Interface
+  'Chatbot interface': 'bg-gray-100 text-gray-700 ring-1 ring-gray-500/20',
+};
+
 const FeatureTags = ({ tags }: { tags: string[] }) => (
-  <div className="flex flex-wrap gap-2 mt-4 mb-6">
+  <div className="flex flex-wrap gap-2 mb-6">
     {tags.map((tag) => (
       <span
         key={tag}
-        className="inline-flex items-center rounded-full bg-violet-100 px-2.5 py-0.5 text-xs font-medium text-violet-700"
+        className={`inline-flex items-center rounded-full px-3 py-1 text-xs font-medium ${
+          tagColors[tag] || 'bg-gray-100 text-gray-700 ring-1 ring-gray-500/20'
+        }`}
       >
         {tag}
       </span>
@@ -76,20 +133,11 @@ export const Content = () => (
 
     {/* Midjourney */}
     <BlogHeading id="midjourney" level={3}>
-      <a
+      Midjourney — The Baseline
-        href="https://midjourney.com"
-        target="_blank"
-        rel="noopener noreferrer"
-        className="text-violet-600 hover:underline"
-      >
-        Midjourney
-      </a>{' '}
-      — The Baseline
     </BlogHeading>
-    <BlogImage
+    <BlogServiceLink href="https://midjourney.com">midjourney.com</BlogServiceLink>
-      src="/blog/homepages/midjourney-homepage.png"
+    <BlogImage src={midjourneyHomepage} alt="Midjourney homepage" />
-      alt="Midjourney homepage"
+    <FeatureTags tags={['Style ref', 'Character ref', 'Video', 'Upscaling']} />
-    />
     <p className="text-gray-700 leading-relaxed mb-4">
       The platform that defined AI art. 21M Discord members, ~1.4M paying
       subscribers, 26.8% market share. What keeps users here: superior
@@ -105,10 +153,7 @@ export const Content = () => (
       for pure artistic quality and consistent aesthetic across generations,
       it&apos;s still the benchmark others chase.
     </p>
-    <p className="text-gray-700 leading-relaxed mb-4">
+    <BlogPricing paid="$10/mo (Basic) → $120/mo (Mega)" perImage="~$0.03-0.05" />
-      <strong>Pricing:</strong> $10/mo (Basic) → $120/mo (Mega). Cost per image:
-      ~$0.03-0.05 in Fast mode.
-    </p>
     <p className="text-gray-700 leading-relaxed mb-4">
       <strong>Key features:</strong> V7 model with video generation (5-21 sec
       clips). Style reference (--sref) and character reference (--cref) for
@@ -119,22 +164,28 @@ export const Content = () => (
       <strong>Best for:</strong> Artistic quality, community feedback, consistent
       aesthetic across projects.
     </p>
-    <FeatureTags tags={['Style ref', 'Character ref', 'Video', 'Upscaling']} />
 
     {/* Leonardo AI */}
     <BlogHeading id="leonardo-ai" level={3}>
-      <a
+      Leonardo AI
-        href="https://leonardo.ai"
-        target="_blank"
-        rel="noopener noreferrer"
-        className="text-violet-600 hover:underline"
-      >
-        Leonardo AI
-      </a>
     </BlogHeading>
-    <BlogImage
+    <BlogServiceLink href="https://leonardo.ai">leonardo.ai</BlogServiceLink>
-      src="/blog/homepages/leonardo-ai-homepage.png"
+    <BlogImage src={leonardoAiHomepage} alt="Leonardo AI homepage" />
-      alt="Leonardo AI homepage"
+    <FeatureTags
+      tags={[
+        'Free tier',
+        'API',
+        'Video',
+        'Style ref',
+        'Pose ref',
+        'Character ref',
+        'Content ref',
+        'Depth ref',
+        'Inpaint',
+        'Outpaint',
+        'Canvas',
+        'Upscaling',
+      ]}
     />
     <p className="text-gray-700 leading-relaxed mb-4">
       18M+ creators use Leonardo for game assets and concept art. What sets it
@@ -153,11 +204,7 @@ export const Content = () => (
       surrendering control to the algorithm. The real-time Canvas with
       inpaint/outpaint means less post-production work in external editors.
     </p>
-    <p className="text-gray-700 leading-relaxed mb-4">
+    <BlogPricing free="150 tokens/day" paid="$12-60/mo, API at $299/mo" />
-      <strong>Free tier:</strong> 150 tokens/day (resets daily).
-      <br />
-      <strong>Paid:</strong> $12-60/mo. API access at $299/mo.
-    </p>
     <p className="text-gray-700 leading-relaxed mb-4">
       <strong>Key features:</strong> Flow State real-time generation. Image
       Guidance suite with 6 reference types. Real-time Canvas with
@@ -168,38 +215,23 @@ export const Content = () => (
       <strong>Best for:</strong> Game developers, concept artists, anyone who
       needs character consistency across multiple generations.
     </p>
+
+    {/* Adobe Firefly */}
+    <BlogHeading id="adobe-firefly" level={3}>
+      Adobe Firefly
+    </BlogHeading>
+    <BlogServiceLink href="https://firefly.adobe.com">firefly.adobe.com</BlogServiceLink>
+    <BlogImage src={adobeFireflyHomepage} alt="Adobe Firefly homepage" />
     <FeatureTags
       tags={[
         'Free tier',
         'API',
-        'Video',
+        'Commercial safe',
         'Style ref',
-        'Pose ref',
-        'Character ref',
-        'Content ref',
-        'Depth ref',
         'Inpaint',
-        'Outpaint',
-        'Canvas',
         'Upscaling',
       ]}
     />
-
-    {/* Adobe Firefly */}
-    <BlogHeading id="adobe-firefly" level={3}>
-      <a
-        href="https://firefly.adobe.com"
-        target="_blank"
-        rel="noopener noreferrer"
-        className="text-violet-600 hover:underline"
-      >
-        Adobe Firefly
-      </a>
-    </BlogHeading>
-    <BlogImage
-      src="/blog/homepages/adobe-firefly-homepage.png"
-      alt="Adobe Firefly homepage"
-    />
     <p className="text-gray-700 leading-relaxed mb-4">
       The enterprise-safe option. Firefly is trained only on Adobe Stock, public
       domain, and licensed content — no scraped web data. This matters for
@@ -219,12 +251,7 @@ export const Content = () => (
       Illustrator eliminates the export-import dance between generation and
       editing tools.
     </p>
-    <p className="text-gray-700 leading-relaxed mb-4">
+    <BlogPricing free="Limited via web app" paid="Creative Cloud subscription" />
-      <strong>Free tier:</strong> Limited via web app.
-      <br />
-      <strong>Paid:</strong> Creative Cloud subscription. IP indemnification on
-      qualifying plans.
-    </p>
     <p className="text-gray-700 leading-relaxed mb-4">
       <strong>Key features:</strong> Firefly 5 model (4MP native resolution).
       Content Credentials on all images (C2PA standard proving AI origin).
@@ -236,32 +263,14 @@ export const Content = () => (
       <strong>Best for:</strong> Commercial projects where copyright matters.
       Adobe users who want generation inside their existing workflow.
     </p>
-    <FeatureTags
-      tags={[
-        'Free tier',
-        'API',
-        'Commercial safe',
-        'Style ref',
-        'Inpaint',
-        'Upscaling',
-      ]}
-    />
 
     {/* ChatGPT / GPT-4o */}
     <BlogHeading id="chatgpt" level={3}>
-      <a
+      ChatGPT / GPT-4o
-        href="https://chatgpt.com"
-        target="_blank"
-        rel="noopener noreferrer"
-        className="text-violet-600 hover:underline"
-      >
-        ChatGPT / GPT-4o
-      </a>
     </BlogHeading>
-    <BlogImage
+    <BlogServiceLink href="https://chatgpt.com">chatgpt.com</BlogServiceLink>
-      src="/blog/homepages/chatgpt-homepage.png"
+    <BlogImage src={chatgptHomepage} alt="ChatGPT homepage" />
-      alt="ChatGPT homepage"
+    <FeatureTags tags={['Free tier', '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
@@ -283,11 +292,7 @@ export const Content = () => (
       curve. For users already paying for ChatGPT Plus, it&apos;s image
       generation without another subscription.
     </p>
-    <p className="text-gray-700 leading-relaxed mb-4">
+    <BlogPricing free="Limited access" paid="ChatGPT Plus $20/mo" />
-      <strong>Free tier:</strong> Limited access for free users.
-      <br />
-      <strong>Paid:</strong> ChatGPT Plus $20/mo.
-    </p>
     <p className="text-gray-700 leading-relaxed mb-4">
       <strong>Key features:</strong> Best-in-class text rendering in images.
       Strong anatomical accuracy (hands, faces). Conversational editing with
@@ -298,23 +303,14 @@ export const Content = () => (
       <strong>Best for:</strong> Iterative refinement through conversation.
       Images with readable text. Users who already pay for ChatGPT Plus.
     </p>
-    <FeatureTags tags={['Free tier', 'Text', 'Chatbot interface', 'Inpaint']} />
 
     {/* Ideogram */}
     <BlogHeading id="ideogram" level={3}>
-      <a
+      Ideogram
-        href="https://ideogram.ai"
-        target="_blank"
-        rel="noopener noreferrer"
-        className="text-violet-600 hover:underline"
-      >
-        Ideogram
-      </a>
     </BlogHeading>
-    <BlogImage
+    <BlogServiceLink href="https://ideogram.ai">ideogram.ai</BlogServiceLink>
-      src="/blog/homepages/ideogram-homepage.png"
+    <BlogImage src={ideogramHomepage} alt="Ideogram homepage" />
-      alt="Ideogram homepage"
+    <FeatureTags tags={['Free tier', '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
@@ -333,11 +329,7 @@ export const Content = () => (
       readable — Ideogram delivers production-ready results from the first
       attempt. Less time fixing text errors in Photoshop.
     </p>
-    <p className="text-gray-700 leading-relaxed mb-4">
+    <BlogPricing free="Credit-based" perImage="0.25-1 credit" />
-      <strong>Free tier:</strong> Yes, credit-based.
-      <br />
-      <strong>Paid:</strong> Credit packs. Cost per image: 0.25-1 credit.
-    </p>
     <p className="text-gray-700 leading-relaxed mb-4">
       <strong>Key features:</strong> Ideogram 3.0 model with industry-leading
       text rendering. Style Reference (up to 3 images). 4.3B+ Random Style
@@ -348,22 +340,22 @@ export const Content = () => (
       <strong>Best for:</strong> Logos, branding, marketing materials — anything
       where text needs to be readable.
     </p>
-    <FeatureTags tags={['Free tier', 'Text', 'Inpaint']} />
 
     {/* Google Gemini */}
     <BlogHeading id="google-gemini" level={3}>
-      <a
+      Google Gemini / Imagen
-        href="https://gemini.google.com"
-        target="_blank"
-        rel="noopener noreferrer"
-        className="text-violet-600 hover:underline"
-      >
-        Google Gemini / Imagen
-      </a>
     </BlogHeading>
-    <BlogImage
+    <BlogServiceLink href="https://gemini.google.com">gemini.google.com</BlogServiceLink>
-      src="/blog/homepages/google-gemini-homepage.png"
+    <BlogImage src={googleGeminiHomepage} alt="Google Gemini homepage" />
-      alt="Google Gemini homepage"
+    <FeatureTags
+      tags={[
+        'Free tier',
+        'API',
+        'Text',
+        'Chatbot interface',
+        'Character ref',
+        'Style ref',
+      ]}
     />
     <p className="text-gray-700 leading-relaxed mb-4">
       Google&apos;s image generation spans multiple products. Gemini 2.5 Flash
@@ -388,12 +380,7 @@ export const Content = () => (
       <strong>Models:</strong> Gemini 2.5 Flash Image (speed-optimized), Gemini
       3 Pro Image (quality-optimized), Imagen 3/4 (enterprise via Vertex AI).
     </p>
-    <p className="text-gray-700 leading-relaxed mb-4">
+    <BlogPricing free="Gemini app (with watermark), AI Studio free" perImage="~$0.03 via API" />
-      <strong>Free tier:</strong> Gemini app (with watermark), AI Studio free
-      prototyping.
-      <br />
-      <strong>Paid:</strong> ~$0.03/image via API.
-    </p>
     <p className="text-gray-700 leading-relaxed mb-4">
       <strong>Key features:</strong> Multi-image fusion. Character and style
       consistency across edits. Search-grounded generation (Pro model). Strong
@@ -403,32 +390,24 @@ export const Content = () => (
       <strong>Best for:</strong> Google ecosystem users. Developers who want
       conversational editing with API access. Multi-image composition workflows.
     </p>
+
+    {/* Recraft AI */}
+    <BlogHeading id="recraft-ai" level={3}>
+      Recraft AI
+    </BlogHeading>
+    <BlogServiceLink href="https://recraft.ai">recraft.ai</BlogServiceLink>
+    <BlogImage src={recraftAiHomepage} alt="Recraft AI homepage" />
     <FeatureTags
       tags={[
         'Free tier',
         'API',
+        'Vector',
         'Text',
-        'Chatbot interface',
+        'Inpaint',
-        'Character ref',
+        'Outpaint',
-        'Style ref',
+        'Upscaling',
       ]}
     />
-
-    {/* Recraft AI */}
-    <BlogHeading id="recraft-ai" level={3}>
-      <a
-        href="https://recraft.ai"
-        target="_blank"
-        rel="noopener noreferrer"
-        className="text-violet-600 hover:underline"
-      >
-        Recraft AI
-      </a>
-    </BlogHeading>
-    <BlogImage
-      src="/blog/homepages/recraft-ai-homepage.png"
-      alt="Recraft AI homepage"
-    />
     <p className="text-gray-700 leading-relaxed mb-4">
       One of only two AI tools with native SVG vector output (the other being
       Adobe Firefly). 4M+ users, mostly designers. The difference matters:
@@ -448,11 +427,7 @@ export const Content = () => (
       and anything that needs infinite scalability — there&apos;s no real
       alternative.
     </p>
-    <p className="text-gray-700 leading-relaxed mb-4">
+    <BlogPricing free="50 generations/day" paid="$10-48/mo" />
-      <strong>Free tier:</strong> 50 generations/day.
-      <br />
-      <strong>Paid:</strong> $10-48/mo.
-    </p>
     <p className="text-gray-700 leading-relaxed mb-4">
       <strong>Key features:</strong> True vector generation — export actual SVG
       files, not rasterized images. V3 model with strong prompt adherence.
@@ -464,30 +439,16 @@ export const Content = () => (
       <strong>Best for:</strong> Logo design, icon sets, patterns, anything that
       needs to scale infinitely.
     </p>
-    <FeatureTags
-      tags={[
-        'Free tier',
-        'API',
-        'Vector',
-        'Text',
-        'Inpaint',
-        'Outpaint',
-        'Upscaling',
-      ]}
-    />
 
     {/* Reve AI */}
     <BlogHeading id="reve-ai" level={3}>
-      <a
+      Reve AI
-        href="https://reve.ai"
-        target="_blank"
-        rel="noopener noreferrer"
-        className="text-violet-600 hover:underline"
-      >
-        Reve AI
-      </a>
     </BlogHeading>
-    <BlogImage src="/blog/homepages/reve-ai-homepage.png" alt="Reve AI homepage" />
+    <BlogServiceLink href="https://reve.ai">reve.ai</BlogServiceLink>
+    <BlogImage src={reveAiHomepage} alt="Reve AI homepage" />
+    <FeatureTags
+      tags={['Free tier', '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
       Image Arena with an ELO score of 1167 — outperforming Midjourney v6.1,
@@ -506,11 +467,7 @@ export const Content = () => (
       For budget-conscious creators who still need quality, it&apos;s the value
       play without quality compromise.
     </p>
-    <p className="text-gray-700 leading-relaxed mb-4">
+    <BlogPricing free="100 credits + 20/day" paid="$5 for 500 images" perImage="$0.01" />
-      <strong>Free tier:</strong> 100 credits on signup + 20/day.
-      <br />
-      <strong>Paid:</strong> $5 for 500 images.
-    </p>
     <p className="text-gray-700 leading-relaxed mb-4">
       <strong>Key features:</strong> 12B parameter hybrid model. Full commercial
       rights on all images, including free tier. Natural language editing. Image
@@ -521,9 +478,6 @@ export const Content = () => (
       <strong>Best for:</strong> Budget-conscious creators who still need
       quality. Commercial projects on a tight budget.
     </p>
-    <FeatureTags
-      tags={['Free tier', 'Commercial safe', 'Text', 'Object selection']}
-    />
 
     {/* Open Source / Self-Hosted */}
     <BlogHeading id="open-source" level={2}>
@@ -536,19 +490,12 @@ export const Content = () => (
 
     {/* FLUX */}
     <BlogHeading id="flux" level={3}>
-      <a
+      FLUX (Black Forest Labs)
-        href="https://bfl.ai"
-        target="_blank"
-        rel="noopener noreferrer"
-        className="text-violet-600 hover:underline"
-      >
-        FLUX
-      </a>{' '}
-      (Black Forest Labs)
     </BlogHeading>
-    <BlogImage
+    <BlogServiceLink href="https://bfl.ai">bfl.ai</BlogServiceLink>
-      src="/blog/homepages/black-forest-labs-homepage.png"
+    <BlogImage src={blackForestLabsHomepage} alt="Black Forest Labs homepage" />
-      alt="Black Forest Labs homepage"
+    <FeatureTags
+      tags={['API (via providers)', '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
@@ -594,24 +541,15 @@ export const Content = () => (
       High-volume generation where per-image cost matters. Custom model
       training.
     </p>
-    <FeatureTags
-      tags={['API (via providers)', 'Style ref', 'Pose ref', 'Depth ref', 'Inpaint']}
-    />
 
     {/* Stable Diffusion 3.5 */}
     <BlogHeading id="stable-diffusion" level={3}>
-      <a
+      Stable Diffusion 3.5
-        href="https://stability.ai"
-        target="_blank"
-        rel="noopener noreferrer"
-        className="text-violet-600 hover:underline"
-      >
-        Stable Diffusion 3.5
-      </a>
     </BlogHeading>
-    <BlogImage
+    <BlogServiceLink href="https://stability.ai">stability.ai</BlogServiceLink>
-      src="/blog/homepages/stability-ai-homepage.png"
+    <BlogImage src={stabilityAiHomepage} alt="Stability AI homepage" />
-      alt="Stability AI homepage"
+    <FeatureTags
+      tags={['API (via providers)', '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
@@ -652,22 +590,14 @@ export const Content = () => (
       <strong>Best for:</strong> Local deployment. Custom pipeline development.
       Access to the largest model ecosystem.
     </p>
-    <FeatureTags
-      tags={['API (via providers)', 'Style ref', 'Pose ref', 'Depth ref', 'Inpaint']}
-    />
 
     {/* Civitai */}
     <BlogHeading id="civitai" level={3}>
-      <a
+      Civitai
-        href="https://civitai.com"
-        target="_blank"
-        rel="noopener noreferrer"
-        className="text-violet-600 hover:underline"
-      >
-        Civitai
-      </a>
     </BlogHeading>
-    <BlogImage src="/blog/homepages/civitai-homepage.png" alt="Civitai homepage" />
+    <BlogServiceLink href="https://civitai.com">civitai.com</BlogServiceLink>
+    <BlogImage src={civitaiHomepage} alt="Civitai homepage" />
+    <FeatureTags tags={['Free tier', '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
@@ -688,9 +618,7 @@ export const Content = () => (
       add friction. Verify current status before building production workflows
       around it.
     </BlogInfoBox>
-    <p className="text-gray-700 leading-relaxed mb-4">
+    <BlogPricing free="Buzz credits for on-site generation" />
-      <strong>Free tier:</strong> Yes, Buzz credits for on-site generation.
-    </p>
     <p className="text-gray-700 leading-relaxed mb-4">
       <strong>Key features:</strong> Browse tens of thousands of checkpoints: SD
       families, FLUX variants, video models. Generate directly on-site: txt2img,
@@ -702,7 +630,6 @@ export const Content = () => (
       <strong>Best for:</strong> Finding niche styles. Community fine-tunes.
       Exploring what&apos;s possible before training your own.
     </p>
-    <FeatureTags tags={['Free tier', 'Inpaint']} />
 
     {/* API-First Platforms */}
     <BlogHeading id="api-first-platforms" level={2}>
@@ -720,19 +647,11 @@ export const Content = () => (
 
     {/* Replicate */}
     <BlogHeading id="replicate" level={3}>
-      <a
+      Replicate
-        href="https://replicate.com"
-        target="_blank"
-        rel="noopener noreferrer"
-        className="text-violet-600 hover:underline"
-      >
-        Replicate
-      </a>
     </BlogHeading>
-    <BlogImage
+    <BlogServiceLink href="https://replicate.com">replicate.com</BlogServiceLink>
-      src="/blog/homepages/replicate-homepage.png"
+    <BlogImage src={replicateHomepage} alt="Replicate homepage" />
-      alt="Replicate homepage"
+    <FeatureTags tags={['API']} />
-    />
     <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:{' '}
@@ -751,13 +670,7 @@ export const Content = () => (
       50,000+ models available directly to Cloudflare Workers AI users —
       building entire full-stack applications in one place.
     </BlogInfoBox>
-    <p className="text-gray-700 leading-relaxed mb-4">
+    <BlogPricing perImage="~$0.003 (cheap) to $0.03+ (premium)" sdk="Python, JavaScript" />
-      <strong>Pricing:</strong> Pay-per-output, varies by model. Cheap models:
-      ~$0.003/image. Premium models (like Imagen): $0.03+/image.
-    </p>
-    <p className="text-gray-700 leading-relaxed mb-4">
-      <strong>SDK:</strong> Python, JavaScript.
-    </p>
     <p className="text-gray-700 leading-relaxed mb-4">
       <strong>Key features:</strong> 50,000+ production-ready models via
       Official Models program. Cog tool for deploying custom models. Zero-scale
@@ -771,20 +684,14 @@ export const Content = () => (
       <strong>Best for:</strong> Model variety. Serverless deployment. Teams
       that need zero-scale economics.
     </p>
-    <FeatureTags tags={['API']} />
 
     {/* fal.ai */}
     <BlogHeading id="fal-ai" level={3}>
-      <a
+      fal.ai
-        href="https://fal.ai"
-        target="_blank"
-        rel="noopener noreferrer"
-        className="text-violet-600 hover:underline"
-      >
-        fal.ai
-      </a>
     </BlogHeading>
-    <BlogImage src="/blog/homepages/fal-ai-homepage.png" alt="fal.ai homepage" />
+    <BlogServiceLink href="https://fal.ai">fal.ai</BlogServiceLink>
+    <BlogImage src={falAiHomepage} alt="fal.ai homepage" />
+    <FeatureTags tags={['API']} />
     <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:{' '}
@@ -805,16 +712,10 @@ export const Content = () => (
       from Sequoia, NVIDIA, Kleiner Perkins, and a16z — validation of the
       speed-first approach.
     </p>
+    <BlogPricing perImage="$0.03-0.04 (quality models)" sdk="TypeScript, Python, Swift" />
     <p className="text-gray-700 leading-relaxed mb-4">
       <strong>Users:</strong> 2M+ developers.
     </p>
-    <p className="text-gray-700 leading-relaxed mb-4">
-      <strong>Pricing:</strong> $0.03-0.04/image for quality models (Seedream,
-      Kontext). GPU hourly rates available.
-    </p>
-    <p className="text-gray-700 leading-relaxed mb-4">
-      <strong>SDK:</strong> TypeScript (@fal-ai/client), Python, Swift.
-    </p>
     <p className="text-gray-700 leading-relaxed mb-4">
       <strong>Key features:</strong> 10x faster inference via custom CUDA
       kernels. Sub-second generation for Schnell. Day-zero access to new model
@@ -825,20 +726,14 @@ export const Content = () => (
       <strong>Best for:</strong> Speed-critical applications. TypeScript
       developers. Teams that want the latest models first.
     </p>
-    <FeatureTags tags={['API']} />
 
     {/* Runware */}
     <BlogHeading id="runware" level={3}>
-      <a
+      Runware
-        href="https://runware.ai"
-        target="_blank"
-        rel="noopener noreferrer"
-        className="text-violet-600 hover:underline"
-      >
-        Runware
-      </a>
     </BlogHeading>
-    <BlogImage src="/blog/homepages/runware-homepage.png" alt="Runware homepage" />
+    <BlogServiceLink href="https://runware.ai">runware.ai</BlogServiceLink>
+    <BlogImage src={runwareHomepage} alt="Runware homepage" />
+    <FeatureTags tags={['API']} />
     <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)
@@ -857,16 +752,10 @@ export const Content = () => (
       for actual outputs regardless of processing overhead. Enterprise customers
       report $100,000+ monthly savings migrating from competitors.
     </p>
+    <BlogPricing free="$10 credits (~16,000+ images)" perImage="$0.0006 (FLUX Schnell)" sdk="REST API, WebSocket" />
     <p className="text-gray-700 leading-relaxed mb-4">
       <strong>Models:</strong> 300,000+ via unified API (SD, FLUX, Imagen).
     </p>
-    <p className="text-gray-700 leading-relaxed mb-4">
-      <strong>Pricing:</strong> $0.0006/image for FLUX Schnell. $10 free credits
-      to start (~16,000+ images).
-    </p>
-    <p className="text-gray-700 leading-relaxed mb-4">
-      <strong>SDK:</strong> REST API, WebSocket.
-    </p>
     <p className="text-gray-700 leading-relaxed mb-4">
       <strong>Key features:</strong> Sonic Inference Engine on custom hardware.
       Sub-second inference. 0.1s LoRA cold starts. Per-image pricing (not
@@ -876,20 +765,14 @@ export const Content = () => (
       <strong>Best for:</strong> High-volume production. Cost-sensitive
       projects. Startups watching burn rate.
     </p>
-    <FeatureTags tags={['API']} />
 
     {/* Segmind */}
     <BlogHeading id="segmind" level={3}>
-      <a
+      Segmind
-        href="https://segmind.com"
-        target="_blank"
-        rel="noopener noreferrer"
-        className="text-violet-600 hover:underline"
-      >
-        Segmind
-      </a>
     </BlogHeading>
-    <BlogImage src="/blog/homepages/segmind-homepage.png" alt="Segmind homepage" />
+    <BlogServiceLink href="https://segmind.com">segmind.com</BlogServiceLink>
+    <BlogImage src={segmindHomepage} alt="Segmind homepage" />
+    <FeatureTags tags={['Free tier', 'API']} />
     <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
@@ -908,19 +791,7 @@ export const Content = () => (
       338+ pre-built templates covering AI sketch-to-3D, photo restoration,
       portrait video, product ads, and infographics.
     </p>
-    <p className="text-gray-700 leading-relaxed mb-4">
+    <BlogPricing free="$5 credits" paid="~$0.002/s on A100" sdk="JavaScript, Python, Swift" />
-      <strong>Models:</strong> 500+ including FLUX, Seedream, Ideogram,
-      GPT-Image.
-    </p>
-    <p className="text-gray-700 leading-relaxed mb-4">
-      <strong>Pricing:</strong> Per-second billing, ~$0.002/s on A100.
-    </p>
-    <p className="text-gray-700 leading-relaxed mb-4">
-      <strong>Free tier:</strong> $5 free credits.
-    </p>
-    <p className="text-gray-700 leading-relaxed mb-4">
-      <strong>SDK:</strong> JavaScript, Python, Swift.
-    </p>
     <p className="text-gray-700 leading-relaxed mb-4">
       <strong>Key features:</strong> PixelFlow visual workflow builder. Parallel
       processing through multiple models. Publish workflows as API endpoints.
@@ -931,23 +802,14 @@ export const Content = () => (
       <strong>Best for:</strong> Complex generation pipelines. Teams building
       custom image processing workflows.
     </p>
-    <FeatureTags tags={['Free tier', 'API']} />
 
     {/* Novita AI */}
     <BlogHeading id="novita-ai" level={3}>
-      <a
+      Novita AI
-        href="https://novita.ai"
-        target="_blank"
-        rel="noopener noreferrer"
-        className="text-violet-600 hover:underline"
-      >
-        Novita AI
-      </a>
     </BlogHeading>
-    <BlogImage
+    <BlogServiceLink href="https://novita.ai">novita.ai</BlogServiceLink>
-      src="/blog/homepages/novita-ai-homepage.png"
+    <BlogImage src={novitaAiHomepage} alt="Novita AI homepage" />
-      alt="Novita AI homepage"
+    <FeatureTags tags={['API']} />
-    />
     <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
@@ -965,15 +827,10 @@ export const Content = () => (
       The Startup Program offers up to <strong>$10,000 in credits</strong> —
       meaningful runway for early-stage teams validating AI-powered features.
     </p>
+    <BlogPricing perImage="$0.0015 baseline" sdk="Python" />
     <p className="text-gray-700 leading-relaxed mb-4">
       <strong>Models:</strong> 10,000+ image models plus LLMs, video, audio.
     </p>
-    <p className="text-gray-700 leading-relaxed mb-4">
-      <strong>Pricing:</strong> $0.0015/image baseline.
-    </p>
-    <p className="text-gray-700 leading-relaxed mb-4">
-      <strong>SDK:</strong> Python.
-    </p>
     <p className="text-gray-700 leading-relaxed mb-4">
       <strong>Key features:</strong> Agent Sandbox with millisecond startup
       times. Serverless GPU endpoints. Dedicated Endpoints for custom models and
@@ -984,23 +841,14 @@ export const Content = () => (
       <strong>Best for:</strong> Early-stage startups. Budget-constrained
       projects. High-concurrency agent workflows.
     </p>
-    <FeatureTags tags={['API']} />
 
     {/* Together AI */}
     <BlogHeading id="together-ai" level={3}>
-      <a
+      Together AI
-        href="https://together.ai"
-        target="_blank"
-        rel="noopener noreferrer"
-        className="text-violet-600 hover:underline"
-      >
-        Together AI
-      </a>
     </BlogHeading>
-    <BlogImage
+    <BlogServiceLink href="https://together.ai">together.ai</BlogServiceLink>
-      src="/blog/homepages/together-ai-homepage.png"
+    <BlogImage src={togetherAiHomepage} alt="Together AI homepage" />
-      alt="Together AI homepage"
+    <FeatureTags tags={['Free tier', 'API']} />
-    />
     <p className="text-gray-700 leading-relaxed mb-4">
       Unified AI platform covering text, image, and video generation. The
       strategic advantage:{' '}
@@ -1020,16 +868,11 @@ export const Content = () => (
       categories. Pay-as-you-go with no minimums enables experimentation; 99.9%
       SLA availability handles production workloads.
     </p>
+    <BlogPricing free="3 months free FLUX.1 Schnell" sdk="OpenAI-compatible (Python, JavaScript)" />
     <p className="text-gray-700 leading-relaxed mb-4">
       <strong>Models:</strong> 200+ (FLUX.2, SD3, Imagen, SeeDream, plus text
       and code models).
     </p>
-    <p className="text-gray-700 leading-relaxed mb-4">
-      <strong>Free tier:</strong> 3 months free FLUX.1 Schnell.
-    </p>
-    <p className="text-gray-700 leading-relaxed mb-4">
-      <strong>SDK:</strong> OpenAI-compatible (Python, JavaScript).
-    </p>
     <p className="text-gray-700 leading-relaxed mb-4">
       <strong>Key features:</strong> OpenAI-compatible endpoints for easy
       migration. 4x faster inference. Browser-based fine-tuning without SDK.
@@ -1041,23 +884,14 @@ export const Content = () => (
       needing text + image + video from one provider. Easy migration from
       proprietary APIs.
     </p>
-    <FeatureTags tags={['Free tier', 'API']} />
 
     {/* Banatie */}
     <BlogHeading id="banatie" level={3}>
-      <a
+      Banatie
-        href="https://banatie.app"
-        target="_blank"
-        rel="noopener noreferrer"
-        className="text-violet-600 hover:underline"
-      >
-        Banatie
-      </a>
     </BlogHeading>
-    <BlogImage
+    <BlogServiceLink href="https://banatie.app">banatie.app</BlogServiceLink>
-      src="/blog/homepages/banatie-homepage.png"
+    <BlogImage src={banatieHomepage} alt="Banatie homepage" />
-      alt="Banatie homepage"
+    <FeatureTags tags={['API']} />
-    />
     <p className="text-gray-700 leading-relaxed mb-4">
       Developer-native image generation built for AI coding workflows.
     </p>
@@ -1089,7 +923,6 @@ export const Content = () => (
       <strong>Best for:</strong> Developers using AI coding tools who want image
       generation without leaving their editor.
     </p>
-    <FeatureTags tags={['API']} />
 
     {/* Aggregators */}
     <BlogHeading id="aggregators" level={2}>
@@ -1102,17 +935,11 @@ export const Content = () => (
 
     {/* Poe */}
     <BlogHeading id="poe" level={3}>
-      <a
+      Poe (Quora)
-        href="https://poe.com"
-        target="_blank"
-        rel="noopener noreferrer"
-        className="text-violet-600 hover:underline"
-      >
-        Poe
-      </a>{' '}
-      (Quora)
     </BlogHeading>
-    <BlogImage src="/blog/homepages/poe-homepage.png" alt="Poe homepage" />
+    <BlogServiceLink href="https://poe.com">poe.com</BlogServiceLink>
+    <BlogImage src={poeHomepage} alt="Poe homepage" />
+    <FeatureTags tags={['Free tier', '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:{' '}
@@ -1137,12 +964,7 @@ export const Content = () => (
       for developer integration. Real-time chat sync across devices maintains
       context when switching from desktop to mobile.
     </p>
-    <p className="text-gray-700 leading-relaxed mb-4">
+    <BlogPricing free="3,000 points/day" paid="$4.99-249.99/mo" />
-      <strong>Free tier:</strong> 3,000 points/day (resets daily, doesn&apos;t
-      roll over).
-      <br />
-      <strong>Paid:</strong> $4.99-249.99/mo.
-    </p>
     <p className="text-gray-700 leading-relaxed mb-4">
       <strong>API:</strong> Released July 2025, OpenAI-compatible format.
     </p>
@@ -1157,20 +979,23 @@ export const Content = () => (
       One subscription for access to everything. Collaborative multi-model
       workflows.
     </p>
-    <FeatureTags tags={['Free tier', 'API', 'Chatbot interface']} />
 
     {/* Krea.ai */}
     <BlogHeading id="krea-ai" level={3}>
-      <a
+      Krea.ai
-        href="https://krea.ai"
-        target="_blank"
-        rel="noopener noreferrer"
-        className="text-violet-600 hover:underline"
-      >
-        Krea.ai
-      </a>
     </BlogHeading>
-    <BlogImage src="/blog/homepages/krea-ai-homepage.png" alt="Krea.ai homepage" />
+    <BlogServiceLink href="https://krea.ai">krea.ai</BlogServiceLink>
+    <BlogImage src={kreaAiHomepage} alt="Krea.ai homepage" />
+    <FeatureTags
+      tags={[
+        'Free tier',
+        'Live editing',
+        'Canvas',
+        'Inpaint',
+        'Outpaint',
+        'Upscaling',
+      ]}
+    />
     <p className="text-gray-700 leading-relaxed mb-4">
       Real-time generation leader. The core innovation:{' '}
       <strong>draw on the canvas and watch AI respond in under 50ms</strong>.
@@ -1191,12 +1016,10 @@ export const Content = () => (
       image-to-video hub, dispatching stills to Runway, Luma, and Hailuo for
       seamless storyboarding from static visuals to motion.
     </p>
+    <BlogPricing free="Yes" />
     <p className="text-gray-700 leading-relaxed mb-4">
       <strong>Models:</strong> Flux, Veo 3, Kling, Runway, 20+ total.
     </p>
-    <p className="text-gray-700 leading-relaxed mb-4">
-      <strong>Free tier:</strong> Yes.
-    </p>
     <p className="text-gray-700 leading-relaxed mb-4">
       <strong>Key features:</strong> Real-time canvas — draw and see AI
       generation in &lt;50ms. AI Strength slider for control balance. 22K
@@ -1208,32 +1031,14 @@ export const Content = () => (
       <strong>Best for:</strong> Concept artists. Interactive co-creation.
       Anyone who thinks in sketches rather than prompts.
     </p>
-    <FeatureTags
-      tags={[
-        'Free tier',
-        'Live editing',
-        'Canvas',
-        'Inpaint',
-        'Outpaint',
-        'Upscaling',
-      ]}
-    />
 
     {/* Freepik AI */}
     <BlogHeading id="freepik-ai" level={3}>
-      <a
+      Freepik AI
-        href="https://freepik.com/ai"
-        target="_blank"
-        rel="noopener noreferrer"
-        className="text-violet-600 hover:underline"
-      >
-        Freepik AI
-      </a>
     </BlogHeading>
-    <BlogImage
+    <BlogServiceLink href="https://freepik.com/ai">freepik.com/ai</BlogServiceLink>
-      src="/blog/homepages/freepik-ai-homepage.png"
+    <BlogImage src={freepikAiHomepage} alt="Freepik AI homepage" />
-      alt="Freepik AI homepage"
+    <FeatureTags tags={['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
@@ -1269,7 +1074,6 @@ export const Content = () => (
       <strong>Best for:</strong> Marketing teams. All-in-one creative workflow.
       Text-heavy marketing materials.
     </p>
-    <FeatureTags tags={['Text', 'Inpaint', 'Upscaling']} />
 
     {/* FAQ */}
     <BlogHeading id="faq" level={2}>