@jjlmoya/utils-developer 1.4.0 → 1.6.0

package/src/tool/mobileMockupGenerator/i18n/zh.ts

@@ -0,0 +1,122 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { MobileMockupGeneratorUI } from '../ui';
+
+const slug = 'mobile-mockup-generator';
+const title = '移动演示图生成器。iPhone 和 Google Pixel';
+const description = '为 App Store 和 Google Play 创建专业演示。带有自定义背景、全景布局和批量高分辨率导出的 iPhone 和 Pixel 演示图。';
+
+const faqData = [
+  { question: '这些截图对 App Store 和 Google Play 有效吗？', answer: '是的，生成的图像符合应用商店的宽高比和质量要求。只需在导出前选择正确的设备（iOS 用 iPhone，Android 用 Pixel）即可。' },
+  { question: '我可以使用自己的自定义背景吗？', answer: '当然可以。除了我们的高级渐变库外，您还可以从计算机上传任何图像作为演示图的背景环境。' },
+  { question: '商用是否免费？', answer: '是的，您可以将生成的演示图用于商业项目、作品集或演示，无需费用且无水印。' },
+  { question: '我的截图是否保存在任何服务器上？', answer: '否。生成器 100% 在您的浏览器中本地运行。您的私人图像永远不会离开您的计算机。' },
+];
+
+const howToData = [
+  { name: '上传截图', text: '拖动或选择您想要呈现的移动应用程序的屏幕截图。' },
+  { name: '选择设备', text: '根据目标商店选择智能手机型号（iOS 用 iPhone 15 Pro Max 或 Android 用 Google Pixel 8）。' },
+  { name: '自定义环境', text: '调整背景、设备角度，添加营销文本并选择组合布局。' },
+  { name: '以高清方式下载', text: '以高分辨率 WebP 格式导出所有结果，准备上传到应用商店。' },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faqData.map((item) => ({ '@type': 'Question', name: item.question, acceptedAnswer: { '@type': 'Answer', text: item.answer } })),
+};
+
+const howToSchema: WithContext<HowToThing> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howToData.map((step, i) => ({ '@type': 'HowToStep', position: i + 1, name: step.name, text: step.text })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'DesignApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'USD' },
+  inLanguage: 'zh',
+};
+
+const ui: MobileMockupGeneratorUI = {
+  labelUpload: '上传截图',
+  dropHint: '将图像拖到此处',
+  dropFormats: 'PNG、JPG 或 WEBP',
+  btnMassReplace: '批量替换',
+  massReplaceHint: '替换当前图像同时保留您的预设和文本。非常适合快速迭代。',
+  labelSettings: '全局设置',
+  labelDevice: '设备',
+  labelFont: '字体',
+  labelBackground: '背景',
+  titleSwapColors: '交换颜色',
+  labelAngle: '角度',
+  labelSafeArea: '安全区（上/下）',
+  labelSafeAreaColor: '区域颜色',
+  emptyTitle: '还没有图像',
+  emptySubtitle: '上传您的截图开始设计',
+  btnClearAll: '清除画布',
+  btnExport: '导出全部 (.zip)',
+  cardTitleDuplicate: '复制场景',
+  cardTitleReplace: '替换当前屏幕截图',
+  cardSectionLayouts: '主布局',
+  cardSectionBranding: '品牌和文本',
+  cardTitleResetText: '重置文本',
+  cardLabelColor: '颜色',
+  cardTextPlaceholder: '在此输入文本...',
+  cardSectionDevice: '设备布局',
+  cardTitleResetDevice: '重置位置',
+  cardSectionScene: '道具和背景',
+  cardBtnSpecialBg: '特殊背景',
+  cardBtnDeleteScene: '删除场景',
+  cardRangeLabelSize: '大小',
+  cardRangeLabelX: 'X 轴',
+  cardRangeLabelY: 'Y 轴',
+  cardRangeLabelRotation: '旋转',
+  cardRangeLabelScale: '缩放',
+  presetClassic: '经典',
+  presetMobileBottom: '移动底部',
+  presetMobileTop: '移动顶部',
+  presetFocus: '焦点',
+  presetDynamic: '动态',
+  presetSplitLeft: '左分割',
+  presetSplitRight: '右分割',
+  presetImageLeft: '左图像',
+  presetImageRight: '右图像',
+  confirmClear: '确定要删除所有演示图吗？',
+  processingExport: '处理中...',
+  exportDone: '完成！',
+};
+
+export const content: ToolLocaleContent<MobileMockupGeneratorUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: '常见问题',
+  faq: faqData,
+  bibliographyTitle: '参考资料',
+  bibliography: [
+    { name: 'Apple App Store 截图要求', url: 'https://developer.apple.com/help/app-store-connect/reference/screenshot-specifications' },
+    { name: 'Google Play 截图要求', url: 'https://support.google.com/googleplay/android-developer/answer/9866151' },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    { type: 'title', text: '将您的屏幕截图提升到新的水平', level: 2 },
+    { type: 'paragraph', html: '不要仅限于简单的屏幕截图。我们的演示工具使开发人员和设计师能够创建高影响力的视觉资产，而无需 Photoshop 或 Figma。' },
+    { type: 'title', text: '主布局的威力', level: 3 },
+    { type: 'grid', columns: 2 },
+    { type: 'card', title: 'App Store 和 Google Play', html: '<p>优化您的转化率。iPhone 15 Pro Max 和 Pixel 8 演示图是应用商店列表的世界标准。</p>' },
+    { type: 'card', title: 'Pitch Deck 和营销', html: '<p>以权威方式呈现您的想法。非常适合投资者演讲、社交媒体活动和专业 UI/UX 设计作品集。</p>' },
+    { type: 'title', text: '专业工作流程', level: 3 },
+    { type: 'tip', html: '使用"左分割"和"右分割"预设来创建连续的演示图，在 Instagram 轮播或 App Store 屏幕截图中从一个图像滑到另一个。' },
+  ],
+};
+

package/src/tool/mobileMockupGenerator/index.ts

@@ -9,6 +9,18 @@ export type MobileMockupGeneratorLocaleContent = ToolLocaleContent<MobileMockupG
 import { content as es } from './i18n/es';
 import { content as en } from './i18n/en';
 import { content as fr } from './i18n/fr';
+import { content as de } from './i18n/de';
+import { content as id } from './i18n/id';
+import { content as it } from './i18n/it';
+import { content as ja } from './i18n/ja';
+import { content as ko } from './i18n/ko';
+import { content as nl } from './i18n/nl';
+import { content as pl } from './i18n/pl';
+import { content as pt } from './i18n/pt';
+import { content as ru } from './i18n/ru';
+import { content as sv } from './i18n/sv';
+import { content as tr } from './i18n/tr';
+import { content as zh } from './i18n/zh';
 
 export const mobileMockupGenerator: DeveloperToolEntry<MobileMockupGeneratorUI> = {
   id: 'mobile-mockup-generator',
@@ -20,6 +32,18 @@ export const mobileMockupGenerator: DeveloperToolEntry<MobileMockupGeneratorUI>
     es: async () => es,
     en: async () => en,
     fr: async () => fr,
+    de: async () => de,
+    id: async () => id,
+    it: async () => it,
+    ja: async () => ja,
+    ko: async () => ko,
+    nl: async () => nl,
+    pl: async () => pl,
+    pt: async () => pt,
+    ru: async () => ru,
+    sv: async () => sv,
+    tr: async () => tr,
+    zh: async () => zh,
   },
 };
 

package/src/tool/musicalTypography/i18n/de.ts

@@ -0,0 +1,179 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { MusicalTypographyUI } from '../ui';
+
+const slug = 'musikalische-typografie';
+const title = 'Musikalische Typografieskala. Modularer Skalenrechner';
+const description =
+  'Kostenloses Online-Werkzeug zur Erstellung harmonischer visueller Hierarchien mit modularen Skalen auf Basis musikalischer Proportionen. Erzeugt fertige CSS-Variablen für dein Webdesign.';
+
+const faqData = [
+  {
+    question: 'Was ist eine typografische Modularskala?',
+    answer:
+      'Eine Methode zur Bestimmung von Schriftgrößen auf Basis eines konstanten mathematischen Verhältnisses. Wie in der Musik, wo Noten harmonische Beziehungen haben, erzeugt die Modularskala eine ausgewogene und vorhersehbare visuelle Hierarchie.',
+  },
+  {
+    question: 'Warum musikalische Intervalle im Design verwenden?',
+    answer:
+      'Musikalische Intervalle sind Proportionen, die das menschliche Gehirn als harmonisch wahrnimmt. Auf Textgrößen angewendet entsteht eine visuelle Struktur, die sich richtig und professionell anfühlt, anstatt Größen willkürlich zu wählen.',
+  },
+  {
+    question: 'Was ist der Goldene Schnitt in der Typografie?',
+    answer:
+      'Es ist das Verhältnis 1,618, bekannt als Goldener Schnitt. Er erzeugt sehr dramatische und elegante Skalen, bei denen jede Hierarchiestufe exponentiell wächst. Perfekt für Portfolios oder kunstorientierte Websites.',
+  },
+  {
+    question: 'Wie setze ich die Skala in meiner CSS-Datei ein?',
+    answer:
+      'Das Werkzeug erzeugt CSS-Variablen (Tokens) im Format :root { --step-N: Xrem; }. Kopiere sie in deine Haupt-CSS-Datei und verwende sie mit var(--step-N), um typografische Konsistenz auf der gesamten Website zu wahren.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Basisgröße festlegen',
+    text: 'Gib die Schriftgröße für deinen Fließtext ein (üblicherweise 16px), die als Grundton deiner Skala dient.',
+  },
+  {
+    name: 'Intervall wählen',
+    text: 'Wähle eine musikalische Proportion, um festzulegen, wie viel Abstand zwischen den verschiedenen Überschriftsebenen liegt.',
+  },
+  {
+    name: 'Hierarchie vorschauen',
+    text: 'Beobachte in Echtzeit, wie sich die typografischen Ebenen verhalten, und prüfe, ob die visuelle Harmonie zu deinem Projekt passt.',
+  },
+  {
+    name: 'Code exportieren',
+    text: 'Klicke auf CSS-Variablen kopieren, um den Block zu erhalten, der direkt in deinen Workflow eingefügt werden kann.',
+  },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faqData.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowToThing> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howToData.map((step, i) => ({
+    '@type': 'HowToStep',
+    position: i + 1,
+    name: step.name,
+    text: step.text,
+  })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'DesignApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'de',
+};
+
+const ui: MusicalTypographyUI = {
+  labelConfig: 'Konfiguration',
+  labelBaseSize: 'Basisgröße (px)',
+  hintBaseSize: 'Die Schriftgröße deines Fließtexts (üblicherweise 16px).',
+  labelRatio: 'Musikalische Skala (Ratio)',
+  hintRatio: 'Bestimmt, wie stark die Größe pro Schritt wächst.',
+  labelCalculated: 'Berechnete Werte',
+  labelPreview: 'Vorschau',
+  btnCopyCss: 'CSS-Variablen kopieren',
+  feedbackCopied: 'Variablen in die Zwischenablage kopiert!',
+  previewText: 'Musikalische Typografie',
+  previewSubtext: 'Eine perfekte harmonische Skala für dein Design.',
+  ratioSecundaMenor: 'Kleine Sekunde',
+  ratioSegundaMayor: 'Große Sekunde',
+  ratioTerceraMenor: 'Kleine Terz',
+  ratioTerceraMayor: 'Große Terz',
+  ratioCuartaPerfecta: 'Reine Quarte',
+  ratioCuartaAumentada: 'Übermäßige Quarte',
+  ratioQuintaPerfecta: 'Reine Quinte',
+  ratioProporcionAurea: 'Goldener Schnitt',
+  ratioSextaMayor: 'Große Sexte',
+  ratioSeptimaMenor: 'Kleine Septime',
+  ratioSeptimaMayor: 'Große Septime',
+  ratioOctava: 'Oktave',
+};
+
+export const content: ToolLocaleContent<MusicalTypographyUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Häufig gestellte Fragen',
+  faq: faqData,
+  bibliographyTitle: 'Quellen',
+  bibliography: [
+    {
+      name: 'Bringhurst, R. The Elements of Typographic Style',
+      url: 'https://en.wikipedia.org/wiki/The_Elements_of_Typographic_Style',
+    },
+    {
+      name: 'Brown, T. More Meaningful Typography. A List Apart',
+      url: 'https://alistapart.com/article/more-meaningful-typography/',
+    },
+    {
+      name: 'Physics of Music. Musical Intervals and Scales',
+      url: 'https://es.scribd.com/document/199729396/Physics-of-Music-Notes',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'Die unsichtbare Harmonie im Webdesign',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Die <strong>Musikalische Typografieskala</strong> überträgt die Mathematik musikalischer Intervalle auf das typografische Design. Wie eine Komposition von präzisen Proportionen geleitet wird, profitiert auch ein solides visuelles Design von einer mathematischen Struktur, die alle Größen miteinander verbindet.',
+    },
+    {
+      type: 'title',
+      text: 'Wie die Modularskala funktioniert',
+      level: 3,
+    },
+    {
+      type: 'grid',
+      columns: 2,
+    },
+    {
+      type: 'card',
+      title: 'Die Formel',
+      html: '<p>Die Progression ist einfach: <code>Größe = Basis × Ratio<sup>n</sup></code>. Stufe 0 ist dein Grundtext. Stufe 1 ist ein kleiner Untertitel. Stufe 4 oder 5 könnte dein Haupt-H1 sein. Die gleiche Multiplikationskonstante (der Ratio) stellt sicher, dass alle Beziehungen konsistent bleiben.</p>',
+    },
+    {
+      type: 'card',
+      title: 'Warum "Musikalisch"',
+      html: '<p>Die Pythagoreer entdeckten, dass das Teilen einer Saite in einfache Proportionen (1:2, 2:3, 3:4) Konsonanz erzeugt. Diese Intervalle – Oktave, reine Quinte und reine Quarte – sind genau die typografischen Ratios. Du komponierst visuelle Musik.</p>',
+    },
+    {
+      type: 'title',
+      text: 'Den richtigen Ratio wählen',
+      level: 3,
+    },
+    {
+      type: 'tip',
+      html: 'Für dichte Oberflächen (Dashboards, Tabellen) eignen sich kleine Ratios wie <code>1,125</code> oder <code>1,2</code>. Für redaktionelle oder Portfolio-Seiten bieten sich ausdrucksstärkere Ratios wie <code>1,5</code> oder <code>1,618</code> an.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Beschränke die Skala nicht auf <code>font-size</code>. Dieselben CSS-Variablen funktionieren auch für <code>margin</code>, <code>padding</code> und <code>gap</code>. Wenn Weißraum derselben mathematischen Progression wie der Text folgt, erreicht das Design einen Grad an Kohäsion, den alle spüren, aber kaum jemand benennen kann.',
+    },
+  ],
+};

package/src/tool/musicalTypography/i18n/id.ts

@@ -0,0 +1,179 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { MusicalTypographyUI } from '../ui';
+
+const slug = 'tipografi-musikal';
+const title = 'Skala Tipografi Musikal. Kalkulator Skala Modular';
+const description =
+  'Alat online gratis untuk menciptakan hierarki visual yang harmonis menggunakan skala modular berbasis proporsi musikal. Menghasilkan variabel CSS siap pakai untuk desain web Anda.';
+
+const faqData = [
+  {
+    question: 'Apa itu skala modular tipografi?',
+    answer:
+      'Ini adalah metode untuk menentukan ukuran font berdasarkan rasio matematis yang konstan. Seperti dalam musik, di mana nada-nada memiliki hubungan harmonis, skala modular menciptakan hierarki visual yang seimbang dan mudah diprediksi.',
+  },
+  {
+    question: 'Mengapa menggunakan interval musikal untuk desain?',
+    answer:
+      'Interval musikal adalah proporsi yang otak manusia persepsikan sebagai harmonis. Menerapkannya pada ukuran teks menghasilkan struktur visual yang terasa tepat dan profesional, bukan sekadar memilih ukuran secara acak.',
+  },
+  {
+    question: 'Apa itu Rasio Emas dalam tipografi?',
+    answer:
+      'Ini adalah proporsi 1,618, yang dikenal sebagai Penampang Emas. Proporsi ini menciptakan skala yang dramatis dan elegan, di mana setiap langkah hierarki tumbuh secara eksponensial. Ideal untuk portofolio atau situs berorientasi seni.',
+  },
+  {
+    question: 'Bagaimana cara menerapkan skala ke file CSS saya?',
+    answer:
+      'Alat ini menghasilkan variabel CSS (token) dalam format :root { --step-N: Xrem; }. Salin ke file CSS utama Anda dan gunakan dengan var(--step-N) untuk menjaga konsistensi tipografi di seluruh situs.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Tentukan ukuran dasar',
+    text: 'Masukkan ukuran font untuk teks paragraf Anda (biasanya 16px) yang akan menjadi nada dasar skala Anda.',
+  },
+  {
+    name: 'Pilih interval',
+    text: 'Pilih proporsi musikal untuk menentukan seberapa jauh jarak antara level heading yang berbeda.',
+  },
+  {
+    name: 'Pratinjau hierarki',
+    text: 'Amati bagaimana level tipografi berperilaku secara real-time untuk memastikan harmoni visual sesuai dengan proyek Anda.',
+  },
+  {
+    name: 'Ekspor kode',
+    text: 'Klik Salin Variabel CSS untuk mendapatkan blok siap tempel langsung ke alur kerja Anda.',
+  },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faqData.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowToThing> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howToData.map((step, i) => ({
+    '@type': 'HowToStep',
+    position: i + 1,
+    name: step.name,
+    text: step.text,
+  })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'DesignApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'id',
+};
+
+const ui: MusicalTypographyUI = {
+  labelConfig: 'Konfigurasi',
+  labelBaseSize: 'Ukuran Dasar (px)',
+  hintBaseSize: 'Ukuran teks paragraf Anda (biasanya 16px).',
+  labelRatio: 'Skala Musikal (Rasio)',
+  hintRatio: 'Menentukan seberapa besar ukuran tumbuh di setiap langkah.',
+  labelCalculated: 'Nilai Terkalkulasi',
+  labelPreview: 'Pratinjau',
+  btnCopyCss: 'Salin Variabel CSS',
+  feedbackCopied: 'Variabel disalin ke clipboard!',
+  previewText: 'Tipografi Musikal',
+  previewSubtext: 'Skala harmonis sempurna untuk desain Anda.',
+  ratioSecundaMenor: 'Second Minor',
+  ratioSegundaMayor: 'Second Mayor',
+  ratioTerceraMenor: 'Terts Minor',
+  ratioTerceraMayor: 'Terts Mayor',
+  ratioCuartaPerfecta: 'Kuart Sempurna',
+  ratioCuartaAumentada: 'Kuart Augmentasi',
+  ratioQuintaPerfecta: 'Kuint Sempurna',
+  ratioProporcionAurea: 'Rasio Emas',
+  ratioSextaMayor: 'Sekst Mayor',
+  ratioSeptimaMenor: 'Septim Minor',
+  ratioSeptimaMayor: 'Septim Mayor',
+  ratioOctava: 'Oktaf',
+};
+
+export const content: ToolLocaleContent<MusicalTypographyUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Pertanyaan yang Sering Diajukan',
+  faq: faqData,
+  bibliographyTitle: 'Referensi',
+  bibliography: [
+    {
+      name: 'Bringhurst, R. The Elements of Typographic Style',
+      url: 'https://en.wikipedia.org/wiki/The_Elements_of_Typographic_Style',
+    },
+    {
+      name: 'Brown, T. More Meaningful Typography. A List Apart',
+      url: 'https://alistapart.com/article/more-meaningful-typography/',
+    },
+    {
+      name: 'Physics of Music. Musical Intervals and Scales',
+      url: 'https://es.scribd.com/document/199729396/Physics-of-Music-Notes',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'Harmoni tersembunyi dalam desain web',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: '<strong>Skala Tipografi Musikal</strong> menerapkan matematika interval musikal pada desain tipografi. Seperti sebuah komposisi musik yang diatur oleh proporsi yang presisi, desain visual yang kuat juga mendapat manfaat dari struktur matematis yang menghubungkan semua ukuran satu sama lain.',
+    },
+    {
+      type: 'title',
+      text: 'Cara kerja skala modular',
+      level: 3,
+    },
+    {
+      type: 'grid',
+      columns: 2,
+    },
+    {
+      type: 'card',
+      title: 'Rumusnya',
+      html: '<p>Progresinya sederhana: <code>Ukuran = Dasar × Rasio<sup>n</sup></code>. Langkah 0 adalah teks dasar Anda. Langkah 1 adalah subjudul kecil. Langkah 4 atau 5 bisa menjadi H1 utama Anda. Konstanta pengali yang sama memastikan semua hubungan tetap konsisten.</p>',
+    },
+    {
+      type: 'card',
+      title: 'Mengapa "Musikal"',
+      html: '<p>Kaum Pythagoras menemukan bahwa membagi senar dalam proporsi sederhana (1:2, 2:3, 3:4) menghasilkan bunyi yang konsonan. Interval-interval ini — oktaf, kuint sempurna, dan kuart sempurna — adalah persis rasio tipografi yang digunakan. Anda sedang menggubah musik visual.</p>',
+    },
+    {
+      type: 'title',
+      text: 'Memilih rasio yang tepat',
+      level: 3,
+    },
+    {
+      type: 'tip',
+      html: 'Untuk antarmuka padat (dasbor, tabel), gunakan rasio kecil seperti <code>1,125</code> atau <code>1,2</code>. Untuk situs editorial atau portofolio, gunakan rasio yang lebih ekspresif seperti <code>1,5</code> atau <code>1,618</code>.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Jangan batasi skala hanya untuk <code>font-size</code>. Variabel CSS yang sama bekerja untuk <code>margin</code>, <code>padding</code>, dan <code>gap</code>. Ketika whitespace mengikuti progresi matematis yang sama dengan teks, desain mencapai tingkat kohesi yang dirasakan semua orang namun jarang bisa dijelaskan.',
+    },
+  ],
+};