@jjlmoya/utils-social 1.1.0

package/src/tool/safeZones/i18n/en.ts

@@ -0,0 +1,244 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { SafeZonesUI } from '../ui';
+
+const slug = 'social-safe-zones';
+const title = 'Social Safe Zones: Video Simulator for TikTok, Reels & Shorts';
+const description =
+  'Preview your images and videos with the real social media interface. Ensure your content is always visible and avoid accidental cropping.';
+
+const faqData = [
+  {
+    question: "What are 'Safe Zones' on social media?",
+    answer:
+      "They are the areas of the screen where content is visible without risk of being covered by interface elements, such as the username, description, interaction buttons (like, share) or automatic cropping applied by some devices.",
+  },
+  {
+    question: 'Why does my TikTok video look cropped top and bottom?',
+    answer:
+      'TikTok uses a 9:16 aspect ratio. If your video is wider, the app will zoom to fill the screen, causing cropping. Also, the bottom interface covers part of the video, so important elements should be centered.',
+  },
+  {
+    question: 'Is the safe zone the same for Instagram Reels and YouTube Shorts?',
+    answer:
+      'They are very similar but not identical. YouTube Shorts buttons are positioned differently from Reels. Our tool lets you switch between platforms to verify your design across all of them.',
+  },
+  {
+    question: 'What happens if I put text in the bottom right corner?',
+    answer:
+      'It will likely be invisible or very hard to read, as that is where the profile, heart and comment icons are located. Ideally, keep texts and faces in the central-upper area (Safe Zone).',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Load your image or video',
+    text: 'Upload the file you want to preview. Processing is local and private — nothing is uploaded to the internet.',
+  },
+  {
+    name: 'Select the platform',
+    text: 'Choose between TikTok, Instagram Reels or YouTube Shorts to activate the corresponding interface overlay.',
+  },
+  {
+    name: 'Check readability',
+    text: "Verify whether texts, subtitles or key brand elements are covered by the social network's icons.",
+  },
+  {
+    name: 'Adjust and export',
+    text: "If something is hidden, move the element in your original video editor and test again until it fits perfectly.",
+  },
+];
+
+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: 'UtilityApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'USD' },
+  inLanguage: 'en',
+};
+
+export const content: ToolLocaleContent<SafeZonesUI> = {
+  slug,
+  title,
+  description,
+  faqTitle: 'Frequently Asked Questions',
+  faq: faqData,
+  bibliographyTitle: 'Official Platform Documentation',
+  bibliography: [
+    {
+      name: 'TikTok Creator Portal: Video optimization and safe zones',
+      url: 'https://www.tiktok.com/creators/creator-portal/en-us/foundation/video-optimization/',
+    },
+    {
+      name: 'Instagram Business: Best practices for Reels',
+      url: 'https://business.instagram.com/creators/reels-best-practices',
+    },
+    {
+      name: 'YouTube Help: Create YouTube Shorts',
+      url: 'https://support.google.com/youtube/answer/10343433',
+    },
+    {
+      name: 'Meta for Creators: Safe zones and aspect ratios for video',
+      url: 'https://www.facebook.com/business/help/103816146375741',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'Master Guide to Safe Zones: Optimize your Reels, TikToks and Shorts',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'In the saturated world of vertical content, the first impression is technical. The biggest mistake creators make is ignoring how their <strong>video or image</strong> interacts with the platform\'s native interface. Each social network (TikTok, Instagram Reels and YouTube Shorts) overlays layers of buttons, text and profiles that can nullify the visual impact of your composition.',
+    },
+    {
+      type: 'paragraph',
+      html: 'This tool lets you load your media files and preview exactly which parts of your frame will be consumed by the interface. It\'s not just about <strong>subtitles</strong>; it\'s about ensuring that the faces, products or main actions in your video aren\'t buried under a "Like" button or a lengthy description.',
+    },
+    {
+      type: 'grid',
+      columns: [
+        {
+          type: 'card',
+          title: 'TikTok: The most invasive interface',
+          html: '<p>TikTok has the densest interface. On the right side, there is a column of icons occupying approximately 15% of the width. At the bottom, the description can extend to 4 or 5 lines, covering nearly a third of the screen from below.</p><ul><li><strong>Bottom margin:</strong> Leave the last 250px free to avoid the description text and username.</li><li><strong>Right margin:</strong> Avoid placing text within 100px of the right edge.</li><li><strong>Top:</strong> The "Following" and "For You" buttons occupy the upper central strip.</li></ul>',
+        },
+        {
+          type: 'card',
+          title: 'IG Reels: The feed factor',
+          html: '<p>Unlike TikTok, Instagram Reels crops the video to a 4:5 format when viewed from the main feed. This means that if you place vital information in the top or bottom 15% of your 9:16 video, it will disappear in the feed.</p><ul><li><strong>The 4:5 rule:</strong> Keep titles and key elements within the central zone for feed visibility.</li><li><strong>Interface:</strong> Reels icons are more subtle than TikTok\'s, allowing a bit more lateral margin.</li><li><strong>Audio button:</strong> Located bottom right, it usually covers much less than TikTok\'s spinning disc.</li></ul>',
+        },
+      ],
+    },
+    {
+      type: 'title',
+      text: 'YouTube Shorts: Watch the right side',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'YouTube Shorts has an asymmetric interface. The subscribe button is very prominent and solid-colored (usually black or white), creating an important visual blind spot in the bottom right.',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Right margin:</strong> Avoid placing text or important elements in the bottom-right 20%.',
+        '<strong>Bottom margin:</strong> Leave the last 150px free to avoid the description text and username.',
+        '<strong>Top:</strong> The "Subscribe" and "More" buttons occupy the upper central strip.',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Critical Questions on Vertical Design',
+      level: 2,
+    },
+    {
+      type: 'title',
+      text: 'Where to place key elements (faces, text, product)?',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'The "Golden Zone" for the main action is the central third of the video. If you are filming a person, make sure their eyes and mouth are within this zone. Important graphic elements should be slightly shifted upward from the geometric center to avoid the bottom description.',
+    },
+    {
+      type: 'title',
+      text: 'Why does my video look blurry once uploaded?',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'It is often not the quality but the scaling. Always record in 1080x1920 at 30 or 60 fps. Avoid 4K if you are applying many heavy effects, as platforms aggressively compress large files.',
+    },
+    {
+      type: 'title',
+      text: 'What about phone bezels?',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Remember that modern phones have notches or camera holes on screen. This tool includes a top safety margin so your content does not conflict with the clock or system icons (battery, signal).',
+    },
+    {
+      type: 'title',
+      text: 'Anatomy of a Viral Video',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Designing for social media is not just aesthetics — it is <strong>usability</strong>. If a user has to struggle to read text because the platform\'s icons are covering it, they will simply swipe to the next video. Retention (Watch Time) drops sharply when there is visual friction.',
+    },
+    {
+      type: 'paragraph',
+      html: 'On YouTube Shorts, for example, the interface is asymmetric. The subscribe button is very prominent and solid-colored (usually black or white), creating an important visual blind spot. By using this simulator, you can adjust the opacity to understand how your color palette interacts with the native UI colors.',
+    },
+    {
+      type: 'tip',
+      title: 'Creative Quality Control Tool',
+      html: '<p>Designed for creators who leave nothing to chance.</p>',
+    },
+  ],
+  ui: {
+    labelConfig: 'Settings',
+    labelPlatform: 'Target Platform',
+    labelUpload: 'Upload Content',
+    uploadPrompt: 'Select image or video',
+    uploadLink: 'Or use an example',
+    loadContent: 'Load your content',
+    labelOpacity: 'Interface Relief',
+    labelMask: 'Grey Out Critical Zones',
+    labelGrid: 'Rule of Thirds',
+    btnReset: 'Reset Canvas',
+    bannerTiktok: 'Simulating TikTok 9:16',
+    bannerReels: 'Simulating Instagram Reels 9:16',
+    bannerShorts: 'Simulating YouTube Shorts 9:16',
+    nameTiktok: 'TikTok',
+    nameReels: 'IG Reels',
+    nameShorts: 'YT Shorts',
+    ttFollowing: 'Following',
+    ttForYou: 'For You',
+    ttDescription: 'Real interface design for content creators. #uxdesign #socialmedia',
+    ttAudio: 'jjlmoya - Original Sound',
+    ttNavHome: 'Home',
+    ttNavFriends: 'Friends',
+    ttNavInbox: 'Inbox',
+    ttNavProfile: 'Profile',
+    reelsFollow: 'Follow',
+    reelsDescription: 'This interface is identical to the real one. #reels #ux #simulator',
+    reelsAudio: 'Trending Music - Original Audio',
+    shortsSubscribe: 'SUBSCRIBE',
+    shortsDislike: 'Dislike',
+    shortsShare: 'Share',
+    shortsRemix: 'Remix',
+    shortsDescription: 'Simulating real interfaces for Shorts! #youtube #shorts',
+  },
+};

package/src/tool/safeZones/i18n/es.ts

@@ -0,0 +1,244 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { SafeZonesUI } from '../ui';
+
+const slug = 'simulador-redes';
+const title = 'Social Safe Zones: Simulador de Video para TikTok, Reels y Shorts';
+const description =
+  'Previsualiza tus imágenes y videos con la interfaz real de las redes sociales. Asegura que tu contenido sea siempre visible y evita recortes accidentales.';
+
+const faqData = [
+  {
+    question: "¿Qué son las 'Safe Zones' en redes sociales?",
+    answer:
+      'Son las áreas de la pantalla donde el contenido es visible sin riesgo de ser tapado por elementos de la interfaz, como el nombre de usuario, la descripción, los botones de interacción (like, compartir) o el recorte automático que aplican algunos dispositivos.',
+  },
+  {
+    question: '¿Por qué mi video de TikTok se ve cortado arriba y abajo?',
+    answer:
+      'TikTok utiliza una relación de aspecto 9:16. Si tu video es más ancho, la app hará zoom para llenar la pantalla, lo que provoca recortes. Además, la interfaz inferior tapa parte del video, por lo que los elementos importantes deben estar centrados.',
+  },
+  {
+    question: '¿Es la misma zona segura para Instagram Reels que para YouTube Shorts?',
+    answer:
+      'Son muy parecidas pero no idénticas. Los botones de YouTube Shorts están posicionados de forma diferente a los de Reels. Nuestra herramienta permite cambiar entre plataformas para que verifiques tu diseño en todas ellas.',
+  },
+  {
+    question: '¿Qué pasa si pongo texto en la esquina inferior derecha?',
+    answer:
+      'Probablemente sea invisible o muy difícil de leer, ya que es donde se sitúan los iconos de perfil, corazón y comentarios. Lo ideal es mantener los textos y caras en la zona central-superior (Safe Zone).',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Cargar tu imagen o video',
+    text: 'Sube el archivo que quieres previsualizar. El procesamiento es local y privado, nada se sube a internet.',
+  },
+  {
+    name: 'Seleccionar la plataforma',
+    text: 'Elige entre TikTok, Instagram Reels o YouTube Shorts para activar el overlay de interfaz correspondiente.',
+  },
+  {
+    name: 'Verificar la legibilidad',
+    text: 'Comprueba si los textos, subtítulos o elementos clave de tu marca quedan tapados por los iconos de la red social.',
+  },
+  {
+    name: 'Ajustar y exportar',
+    text: 'Si ves que algo queda oculto, mueve el elemento en tu editor de video original y vuelve a probar hasta que encaje perfectamente.',
+  },
+];
+
+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: 'UtilityApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'es',
+};
+
+export const content: ToolLocaleContent<SafeZonesUI> = {
+  slug,
+  title,
+  description,
+  faqTitle: 'Preguntas Frecuentes',
+  faq: faqData,
+  bibliographyTitle: 'Documentación Oficial de Plataformas',
+  bibliography: [
+    {
+      name: 'TikTok Creator Portal: Video optimization and safe zones',
+      url: 'https://www.tiktok.com/creators/creator-portal/en-us/foundation/video-optimization/',
+    },
+    {
+      name: 'Instagram Business: Best practices for Reels',
+      url: 'https://business.instagram.com/creators/reels-best-practices',
+    },
+    {
+      name: 'YouTube Help: Create YouTube Shorts',
+      url: 'https://support.google.com/youtube/answer/10343433',
+    },
+    {
+      name: 'Meta for Creators: Safe zones and aspect ratios for video',
+      url: 'https://www.facebook.com/business/help/103816146375741',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'Guía Maestra de Zonas Seguras: Optimiza tus Reels, TikToks y Shorts',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'En el saturado mundo del contenido vertical, la primera impresión es técnica. El mayor error de los creadores es ignorar cómo interactúa su <strong>vídeo o imagen</strong> con la interfaz nativa de la plataforma. Cada red social (TikTok, Instagram Reels y YouTube Shorts) superpone capas de botones, textos y perfiles que pueden anular el impacto visual de tu composición.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Esta herramienta te permite cargar tus archivos multimedia y previsualizar exactamente qué partes de tu encuadre serán devoradas por la interfaz. No se trata solo de <strong>subtítulos</strong>; se trata de asegurar que los rostros, productos o acciones principales de tu vídeo no queden enterrados bajo un botón de "Like" o una descripción kilométrica.',
+    },
+    {
+      type: 'grid',
+      columns: [
+        {
+          type: 'card',
+          title: 'TikTok: La interfaz más invasiva',
+          html: '<p>TikTok posee la interfaz más densa. En la parte derecha, tenemos una columna de iconos que ocupa aproximadamente el 15% del ancho. En la parte inferior, la descripción puede extenderse hasta 4 o 5 líneas si es larga, tapando casi un tercio de la pantalla desde abajo.</p><ul><li><strong>Margen Inferior:</strong> Deja libre los últimos 250px para evitar el texto de la descripción y el nombre de usuario.</li><li><strong>Margen Derecho:</strong> Evita colocar texto a menos de 100px del borde derecho.</li><li><strong>Cénit:</strong> Los botones de "Siguiendo" y "Para ti" ocupan la franja superior central.</li></ul>',
+        },
+        {
+          type: 'card',
+          title: 'IG Reels: El factor del feed',
+          html: '<p>A diferencia de TikTok, Instagram Reels recorta el video a un formato 4:5 cuando se visualiza desde el feed principal (no desde la pestaña de Reels). Esto significa que si pones información vital en el 15% superior o inferior de tu video 9:16, desaparecerá en el feed.</p><ul><li><strong>La regla del 4:5:</strong> Mantén los títulos y elementos clave dentro de la zona central para asegurar visibilidad en el feed.</li><li><strong>Interfaz:</strong> Los iconos de Reels son más sutiles que los de TikTok, permitiendo un poco más de margen lateral.</li><li><strong>Botón de Audio:</strong> Situado abajo a la derecha, suele tapar mucho menos que el disco giratorio de TikTok.</li></ul>',
+        },
+      ],
+    },
+    {
+      type: 'title',
+      text: 'YouTube Shorts: Cuidado con la derecha',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'YouTube Shorts tiene una interfaz asimétrica. El botón de suscripción es muy prominente y de color sólido (usualmente negro o blanco), lo que crea un punto ciego visual importante en la parte inferior derecha.',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Margen Derecho:</strong> Evita colocar texto o elementos importantes en el 20% inferior derecho.',
+        '<strong>Margen Inferior:</strong> Deja libre los últimos 150px para evitar el texto de la descripción y el nombre de usuario.',
+        '<strong>Cénit:</strong> Los botones de "Suscribirse" y "Más" ocupan la franja superior central.',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Preguntas Críticas sobre Diseño Vertical',
+      level: 2,
+    },
+    {
+      type: 'title',
+      text: '¿Dónde colocar los elementos clave (rostros, texto, producto)?',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'La "Zona de Oro" para la acción principal es el tercio central del video. Si grabas a una persona, asegúrate de que sus ojos y boca estén en esta zona. Los elementos gráficos importantes deben estar ligeramente desplazados hacia arriba desde el centro geométrico para evitar la descripción inferior.',
+    },
+    {
+      type: 'title',
+      text: '¿Por qué mi video se ve borroso al subirlo?',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Muchas veces no es la calidad, sino el escalado. Graba siempre en 1080x1920 a 30 o 60 fps. Evita el 4K si vas a aplicar muchos efectos pesados, ya que las plataformas comprimen agresivamente los archivos de gran tamaño.',
+    },
+    {
+      type: 'title',
+      text: '¿Qué pasa con los marcos de los teléfonos?',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Recuerda que los teléfonos modernos tienen "notches" (cejas) o agujeros de cámara en pantalla. Esta herramienta incluye un margen de seguridad superior para que tu contenido no choque con el reloj o los iconos del sistema (batería, señal).',
+    },
+    {
+      type: 'title',
+      text: 'Anatomía de un Video Viral',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'El diseño para redes sociales no es solo estética, es <strong>usabilidad</strong>. Si un usuario tiene que esforzarse para leer un texto porque los iconos de la plataforma lo tapan, simplemente pasará al siguiente video. La retención (Watch Time) cae en picado cuando hay fricción visual.',
+    },
+    {
+      type: 'paragraph',
+      html: 'En YouTube Shorts, por ejemplo, la interfaz es asimétrica. El botón de suscripción es muy prominente y de color sólido (usualmente negro o blanco), lo que crea un punto ciego visual importante. Al usar este simulador, puedes ajustar la opacidad para entender cómo tu paleta de colores interactúa con los colores de la UI nativa.',
+    },
+    {
+      type: 'tip',
+      title: 'Herramienta de Control de Calidad Creativa',
+      html: '<p>Diseñado para creadores que no dejan nada al azar.</p>',
+    },
+  ],
+  ui: {
+    labelConfig: 'Configuración',
+    labelPlatform: 'Plataforma de Destino',
+    labelUpload: 'Subir Contenido',
+    uploadPrompt: 'Selecciona imagen o video',
+    uploadLink: 'O usa un ejemplo',
+    loadContent: 'Carga tu contenido',
+    labelOpacity: 'Relieve de Interfaz',
+    labelMask: 'Grisar Zonas Críticas',
+    labelGrid: 'Regla de Tercios',
+    btnReset: 'Refrescar Canvas',
+    bannerTiktok: 'Simulando TikTok 9:16',
+    bannerReels: 'Simulando Instagram Reels 9:16',
+    bannerShorts: 'Simulando YouTube Shorts 9:16',
+    nameTiktok: 'TikTok',
+    nameReels: 'IG Reels',
+    nameShorts: 'YT Shorts',
+    ttFollowing: 'Siguiendo',
+    ttForYou: 'Para ti',
+    ttDescription: 'Diseño de interfaces reales para creadores de contenido. #uxdesign #socialmedia',
+    ttAudio: 'jjlmoya - Sonido Original',
+    ttNavHome: 'Inicio',
+    ttNavFriends: 'Amigos',
+    ttNavInbox: 'Bandeja',
+    ttNavProfile: 'Perfil',
+    reelsFollow: 'Seguir',
+    reelsDescription: 'Esta interfaz es idéntica a la real. #reels #ux #simulador',
+    reelsAudio: 'Música Tendencia - Audio Original',
+    shortsSubscribe: 'SUSCRIBIRSE',
+    shortsDislike: 'No me gusta',
+    shortsShare: 'Compartir',
+    shortsRemix: 'Remix',
+    shortsDescription: '¡Simulando interfaces reales para Shorts! #youtube #shorts',
+  },
+};