PuluhLabs
Social Metadata & Viral Thumbnail Studio

Studio OpenGraph Card & Social Share Image

Rancang kartu gambar media sosial beresolusi tinggi (1200x630) untuk Twitter, LinkedIn, dan WhatsApp. Ekspor kode Next.js 14 @vercel/og siap produksi.

Konten & Tipografi Card

Pratinjau Rasio 1.91:1 (1200 x 630 px)
PULUHLABS TECH INSIGHTSPuluhLabs.com

Transformasi Arsitektur Digital & Modernisasi Core Sistem Enterprise

Panduan komprehensif migrasi monolitik ke headless microservices dengan jaminan 99.99% uptime.

Oleh: Tito / VP of Engineering
Next.js Edge Function Code (@vercel/og)
// app/opengraph-image.tsx (Next.js 14 App Router)
import { ImageResponse } from 'next/og';

export const runtime = 'edge';
export const alt = 'Transformasi Arsitektur Digital & Modernisasi Core Sistem Enterprise';
export const size = { width: 1200, height: 630 };
export const contentType = 'image/png';

export default async function Image() {
  return new ImageResponse(
    (
      <div
        style={{
          height: '100%',
          width: '100%',
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'space-between',
          backgroundColor: '#030712',
          backgroundImage: 'radial-gradient(circle at 25px 25px, #1e293b 2%, transparent 0%)',
          backgroundSize: '40px 40px',
          padding: '64px',
          fontFamily: 'sans-serif',
          color: '#ffffff',
        }}
      >
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div
            style={{
              padding: '8px 20px',
              borderRadius: '9999px',
              border: '1px solid #3b82f6',
              backgroundColor: 'rgba(59, 130, 246, 0.1)',
              color: '#60a5fa',
              fontSize: '18px',
              fontWeight: 700,
              letterSpacing: '1px',
            }}
          >
            PULUHLABS TECH INSIGHTS
          </div>
          <div style={{ fontSize: '20px', color: '#94a3b8', fontWeight: 600 }}>
            PuluhLabs.com
          </div>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
          <h1
            style={{
              fontSize: '52px',
              fontWeight: 900,
              lineHeight: 1.15,
              color: '#f8fafc',
              margin: 0,
            }}
          >
            Transformasi Arsitektur Digital & Modernisasi Core Sistem Enterprise
          </h1>
          <p
            style={{
              fontSize: '24px',
              color: '#94a3b8',
              lineHeight: 1.4,
              margin: 0,
            }}
          >
            Panduan komprehensif migrasi monolitik ke headless microservices dengan jaminan 99.99% uptime.
          </p>
        </div>

        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderTop: '1px solid #1e293b', paddingTop: '28px' }}>
          <div style={{ fontSize: '18px', color: '#cbd5e1', fontWeight: 600 }}>
            Ditulis oleh: {"Tito / VP of Engineering"}
          </div>
          <div style={{ fontSize: '16px', color: '#64748b' }}>
            Verified Enterprise Grade ā€¢ ISO 27001 Ready
          </div>
        </div>
      </div>
    ),
    { ...size }
  );
}
LayananPortofolioCek SpeedChat WA