@jjlmoya/utils-developer 1.2.0

package/src/tool/mobileMockupGenerator/constants.ts

@@ -0,0 +1,48 @@
+import type { DeviceConfig, Gradient } from './types';
+
+export const CANVAS_ASPECT = 9 / 16;
+export const EXPORT_WIDTH = 1080;
+export const EXPORT_HEIGHT = 1920;
+
+export const DEVICES: Record<string, DeviceConfig> = {
+  iphone: {
+    width: 430,
+    height: 932,
+    radius: 55,
+    notch: true,
+    name: 'iPhone 15 Pro Max',
+    safeAreaTop: 54,
+    safeAreaBottom: 34,
+  },
+  pixel: {
+    width: 412,
+    height: 915,
+    radius: 32,
+    notch: false,
+    name: 'Google Pixel 8',
+    safeAreaTop: 36,
+    safeAreaBottom: 15,
+  },
+};
+
+export const GRADIENTS: Gradient[] = [
+  { start: '#6366f1', end: '#a855f7', angle: 135 },
+  { start: '#f43f5e', end: '#fb923c', angle: 135 },
+  { start: '#0ea5e9', end: '#22c55e', angle: 135 },
+  { start: '#8b5cf6', end: '#ec4899', angle: 135 },
+  { start: '#1e293b', end: '#475569', angle: 135 },
+];
+
+export const GOOGLE_FONTS = ['Inter', 'Outfit', 'Poppins', 'Montserrat', 'Playfair Display'];
+
+export const LAYOUT_PRESETS = [
+  { name: 'classic', spacing: 40, textY: 82, textX: 50, textSize: 28, deviceOffsetX: 0, deviceOffsetY: 0, rotation: 0 },
+  { name: 'mobileBottom', spacing: 40, textY: 13, textX: 50, textSize: 28, deviceOffsetX: 0, deviceOffsetY: 8, rotation: 0 },
+  { name: 'mobileTop', spacing: 40, textY: 89, textX: 50, textSize: 28, deviceOffsetX: 0, deviceOffsetY: -7, rotation: 0 },
+  { name: 'focus', spacing: 70, textY: 10, textX: 50, textSize: 28, deviceOffsetX: 0, deviceOffsetY: 10, rotation: 0 },
+  { name: 'dynamic', spacing: 45, textY: 85, textX: 50, textSize: 28, deviceOffsetX: 0, deviceOffsetY: -5, rotation: -10 },
+  { name: 'splitLeft', spacing: 55, textY: 50, textX: 50, textSize: 28, deviceOffsetX: 40, deviceOffsetY: 0, rotation: 0 },
+  { name: 'splitRight', spacing: 55, textY: 50, textX: 50, textSize: 28, deviceOffsetX: -40, deviceOffsetY: 0, rotation: 0 },
+  { name: 'imageLeft', spacing: 0, textY: 50, textX: 50, textSize: 44, deviceOffsetX: 50, deviceOffsetY: 0, rotation: -90 },
+  { name: 'imageRight', spacing: 0, textY: 50, textX: 50, textSize: 44, deviceOffsetX: -50, deviceOffsetY: 0, rotation: 90 },
+];

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

@@ -0,0 +1,121 @@
+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 = 'Mobile Mockup Generator for App Store. iPhone and Google Pixel';
+const description = 'Create professional presentations for the App Store and Google Play. iPhone and Pixel mockups with custom backgrounds, panoramic layouts, and bulk high-resolution export.';
+
+const faqData = [
+  { question: 'Are these screenshots valid for the App Store and Google Play?', answer: 'Yes, the generated images meet the proportions and quality requirements of the app stores. Just choose the right device (iPhone for iOS, Pixel for Android) before exporting.' },
+  { question: 'Can I use my own custom backgrounds?', answer: 'Absolutely. In addition to our premium gradient library, you can upload any image from your computer to serve as the background environment for your mockups.' },
+  { question: 'Is it free for commercial use?', answer: 'Yes, you can use the generated mockups for commercial projects, portfolios or presentations at no cost and with no watermarks.' },
+  { question: 'Are my screenshots saved to any server?', answer: 'No. The generator works 100% locally in your browser. Your private images never leave your computer.' },
+];
+
+const howToData = [
+  { name: 'Upload screenshots', text: 'Drag or select the screenshots of your mobile app that you want to present.' },
+  { name: 'Choose device', text: 'Select the smartphone model (iPhone 15 Pro Max or Google Pixel 8) according to the target store.' },
+  { name: 'Customize environment', text: 'Adjust the background, device angle, add marketing text and choose the composition layout.' },
+  { name: 'Download in HD', text: 'Export all results in high-resolution WebP format ready to upload to the app store.' },
+];
+
+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: 'en',
+};
+
+const ui: MobileMockupGeneratorUI = {
+  labelUpload: 'Upload Screenshots',
+  dropHint: 'Drag your images here',
+  dropFormats: 'PNG, JPG or WEBP',
+  btnMassReplace: 'Mass Replace (Batch)',
+  massReplaceHint: 'Replaces current images while keeping your presets and text. Ideal for quick iterations.',
+  labelSettings: 'Global Settings',
+  labelDevice: 'Device',
+  labelFont: 'Typography',
+  labelBackground: 'Background',
+  titleSwapColors: 'Swap colors',
+  labelAngle: 'Angle',
+  labelSafeArea: 'Safe Area (Top/Bottom)',
+  labelSafeAreaColor: 'Area color',
+  emptyTitle: 'No images yet',
+  emptySubtitle: 'Upload your screenshots to start designing',
+  btnClearAll: 'Clear Canvas',
+  btnExport: 'Export All (.zip)',
+  cardTitleDuplicate: 'Duplicate Scene',
+  cardTitleReplace: 'Replace Current Screenshot',
+  cardSectionLayouts: 'Master Layouts',
+  cardSectionBranding: 'Branding & Copy',
+  cardTitleResetText: 'Reset Text',
+  cardLabelColor: 'Color',
+  cardTextPlaceholder: 'Write your copy here...',
+  cardSectionDevice: 'Device Layout',
+  cardTitleResetDevice: 'Reset Position',
+  cardSectionScene: 'Props & Background',
+  cardBtnSpecialBg: 'Special Background',
+  cardBtnDeleteScene: 'Delete Scene',
+  cardRangeLabelSize: 'Size',
+  cardRangeLabelX: 'X Axis',
+  cardRangeLabelY: 'Y Axis',
+  cardRangeLabelRotation: 'Rotation',
+  cardRangeLabelScale: 'Scale',
+  presetClassic: 'Classic',
+  presetMobileBottom: 'Mobile Bottom',
+  presetMobileTop: 'Mobile Top',
+  presetFocus: 'Focus',
+  presetDynamic: 'Dynamic',
+  presetSplitLeft: 'Split Left',
+  presetSplitRight: 'Split Right',
+  presetImageLeft: 'Image Left',
+  presetImageRight: 'Image Right',
+  confirmClear: 'Are you sure you want to delete all mockups?',
+  processingExport: 'Processing...',
+  exportDone: 'Done!',
+};
+
+export const content: ToolLocaleContent<MobileMockupGeneratorUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Frequently Asked Questions',
+  faq: faqData,
+  bibliographyTitle: 'References',
+  bibliography: [
+    { name: 'Apple App Store Screenshot Requirements', url: 'https://developer.apple.com/help/app-store-connect/reference/screenshot-specifications' },
+    { name: 'Google Play Screenshot Requirements', url: 'https://support.google.com/googleplay/android-developer/answer/9866151' },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    { type: 'title', text: 'Elevate your screenshots to the next level', level: 2 },
+    { type: 'paragraph', html: 'Don\'t limit yourself to flat screenshots. Our mockup tool allows developers and designers to create high-impact visual assets without needing Photoshop or Figma.' },
+    { type: 'title', text: 'Power with Master Layouts', level: 3 },
+    { type: 'grid', columns: 2 },
+    { type: 'card', title: 'App Store & Google Play', html: '<p>Optimize your conversion rate. iPhone 15 Pro Max and Pixel 8 mockups are the world standard for app store listings.</p>' },
+    { type: 'card', title: 'Pitch Decks & Marketing', html: '<p>Present your ideas with authority. Perfect for investor presentations, social media campaigns and professional UI/UX design portfolios.</p>' },
+    { type: 'title', text: 'Professional workflow', level: 3 },
+    { type: 'tip', html: 'Use the "Split Left" and "Split Right" presets to create continuous mockups that slide from one image to another in Instagram carousels or App Store screenshots.' },
+  ],
+};

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

@@ -0,0 +1,121 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { MobileMockupGeneratorUI } from '../ui';
+
+const slug = 'generador-mockups-movil';
+const title = 'Generador de Mockups para App Store. iPhone y Google Pixel';
+const description = 'Crea presentaciones profesionales para la App Store y Google Play. Mockups de iPhone y Pixel con fondos personalizados, layouts panorámicos y exportación masiva en alta resolución.';
+
+const faqData = [
+  { question: '¿Son estas capturas válidas para la App Store y Google Play?', answer: 'Sí, las imágenes generadas cumplen con las proporciones y calidades requeridas por las tiendas de aplicaciones. Solo tienes que elegir el dispositivo adecuado (iPhone para iOS, Pixel para Android) antes de exportar.' },
+  { question: '¿Puedo usar mis propios fondos personalizados?', answer: 'Claro. Además de nuestra biblioteca de gradientes premium, puedes subir cualquier imagen desde tu ordenador para que sirva de ambiente de fondo para tus mockups.' },
+  { question: '¿Es gratis para uso comercial?', answer: 'Sí, puedes usar los mockups generados para tus proyectos comerciales, portafolios o presentaciones sin coste alguno y sin marcas de agua.' },
+  { question: '¿Se guardan mis capturas de pantalla en algún servidor?', answer: 'No. El generador funciona 100% localmente en tu navegador. Tus imágenes privadas nunca salen de tu ordenador.' },
+];
+
+const howToData = [
+  { name: 'Subir capturas', text: 'Arrastra o selecciona las capturas de pantalla de tu aplicación móvil que quieras presentar.' },
+  { name: 'Elegir dispositivo', text: 'Selecciona el modelo de smartphone (iPhone 15 Pro Max o Google Pixel 8) según la tienda objetivo.' },
+  { name: 'Personalizar entorno', text: 'Ajusta el fondo, el ángulo del dispositivo, añade textos de marketing y elige el layout de la composición.' },
+  { name: 'Descargar en HD', text: 'Exporta todos los resultados en formato WebP de alta resolución listos para subir a la tienda de aplicaciones.' },
+];
+
+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: 'es',
+};
+
+const ui: MobileMockupGeneratorUI = {
+  labelUpload: 'Subir Capturas',
+  dropHint: 'Arrastra tus imágenes aquí',
+  dropFormats: 'PNG, JPG o WEBP',
+  btnMassReplace: 'Mass Replace (Lote)',
+  massReplaceHint: 'Reemplaza las imágenes actuales manteniendo tus presets y textos. Ideal para iteraciones rápidas.',
+  labelSettings: 'Configuración Global',
+  labelDevice: 'Dispositivo',
+  labelFont: 'Tipografía',
+  labelBackground: 'Fondo',
+  titleSwapColors: 'Intercambiar colores',
+  labelAngle: 'Ángulo',
+  labelSafeArea: 'Safe Area (Top/Bottom)',
+  labelSafeAreaColor: 'Color del área',
+  emptyTitle: 'Aún no hay imágenes',
+  emptySubtitle: 'Sube tus capturas para empezar a diseñar',
+  btnClearAll: 'Limpiar Lienzo',
+  btnExport: 'Exportar Todo (.zip)',
+  cardTitleDuplicate: 'Duplicar Escena',
+  cardTitleReplace: 'Sustituir Captura Actual',
+  cardSectionLayouts: 'Layouts Maestros',
+  cardSectionBranding: 'Branding & Copys',
+  cardTitleResetText: 'Resetear Texto',
+  cardLabelColor: 'Color',
+  cardTextPlaceholder: 'Escribe el copy aquí...',
+  cardSectionDevice: 'Layout Dispositivo',
+  cardTitleResetDevice: 'Resetear Posición',
+  cardSectionScene: 'Atrezzo & Fondo',
+  cardBtnSpecialBg: 'Fondo Especial',
+  cardBtnDeleteScene: 'Eliminar Escena',
+  cardRangeLabelSize: 'Tamaño',
+  cardRangeLabelX: 'Eje X',
+  cardRangeLabelY: 'Eje Y',
+  cardRangeLabelRotation: 'Giro',
+  cardRangeLabelScale: 'Escala',
+  presetClassic: 'Clásico',
+  presetMobileBottom: 'Móvil Abajo',
+  presetMobileTop: 'Móvil Arriba',
+  presetFocus: 'Enfoque',
+  presetDynamic: 'Dynamic',
+  presetSplitLeft: 'Partida Izq.',
+  presetSplitRight: 'Partida Der.',
+  presetImageLeft: 'Imagen Izq.',
+  presetImageRight: 'Imagen Der.',
+  confirmClear: '¿Estás seguro de eliminar todos los mockups?',
+  processingExport: 'Procesando...',
+  exportDone: 'Listo!',
+};
+
+export const content: ToolLocaleContent<MobileMockupGeneratorUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Preguntas Frecuentes',
+  faq: faqData,
+  bibliographyTitle: 'Referencias',
+  bibliography: [
+    { name: 'Apple App Store Screenshot Requirements', url: 'https://developer.apple.com/help/app-store-connect/reference/screenshot-specifications' },
+    { name: 'Google Play Screenshot Requirements', url: 'https://support.google.com/googleplay/android-developer/answer/9866151' },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    { type: 'title', text: 'Eleva tus capturas al siguiente nivel', level: 2 },
+    { type: 'paragraph', html: 'No te limites a subir capturas de pantalla planas. Nuestra herramienta de mockups permite a desarrolladores y diseñadores crear activos visuales de alto impacto sin necesidad de Photoshop o Figma.' },
+    { type: 'title', text: 'Potencia con Layouts Maestros', level: 3 },
+    { type: 'grid', columns: 2 },
+    { type: 'card', title: 'App Store y Google Play', html: '<p>Optimiza tu tasa de conversión. Los mockups de iPhone 15 Pro Max y Pixel 8 son el estándar mundial para las fichas de las tiendas de aplicaciones.</p>' },
+    { type: 'card', title: 'Pitch Decks y Marketing', html: '<p>Presenta tus ideas con autoridad. Ideal para presentaciones a inversores, campañas en redes sociales y portfolios profesionales de diseño UI/UX.</p>' },
+    { type: 'title', text: 'Flujo de trabajo profesional', level: 3 },
+    { type: 'tip', html: 'Usa los presets de "Partida Izquierda" y "Partida Derecha" para crear mockups continuos que se deslizan de una imagen a otra en carruseles de Instagram o capturas de la App Store.' },
+  ],
+};

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

@@ -0,0 +1,121 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { MobileMockupGeneratorUI } from '../ui';
+
+const slug = 'generateur-mockups-mobile';
+const title = 'Générateur de Mockups Mobile pour App Store. iPhone et Google Pixel';
+const description = 'Créez des présentations professionnelles pour l\'App Store et Google Play. Mockups iPhone et Pixel avec arrière-plans personnalisés, mises en page panoramiques et export haute résolution en masse.';
+
+const faqData = [
+  { question: 'Ces captures sont-elles valides pour l\'App Store et Google Play ?', answer: 'Oui, les images générées respectent les proportions et qualités requises par les boutiques d\'applications. Choisissez simplement le bon appareil (iPhone pour iOS, Pixel pour Android) avant d\'exporter.' },
+  { question: 'Puis-je utiliser mes propres arrière-plans personnalisés ?', answer: 'Bien sûr. En plus de notre bibliothèque de dégradés premium, vous pouvez télécharger n\'importe quelle image de votre ordinateur pour servir d\'environnement de fond à vos mockups.' },
+  { question: 'Est-ce gratuit pour un usage commercial ?', answer: 'Oui, vous pouvez utiliser les mockups générés pour vos projets commerciaux, portfolios ou présentations sans aucun coût ni filigrane.' },
+  { question: 'Mes captures d\'écran sont-elles sauvegardées sur un serveur ?', answer: 'Non. Le générateur fonctionne 100% localement dans votre navigateur. Vos images privées ne quittent jamais votre ordinateur.' },
+];
+
+const howToData = [
+  { name: 'Télécharger les captures', text: 'Glissez ou sélectionnez les captures d\'écran de votre application mobile que vous souhaitez présenter.' },
+  { name: 'Choisir l\'appareil', text: 'Sélectionnez le modèle de smartphone (iPhone 15 Pro Max ou Google Pixel 8) selon la boutique cible.' },
+  { name: 'Personnaliser l\'environnement', text: 'Ajustez l\'arrière-plan, l\'angle de l\'appareil, ajoutez du texte marketing et choisissez la mise en page de la composition.' },
+  { name: 'Télécharger en HD', text: 'Exportez tous les résultats au format WebP haute résolution prêts à être uploadés sur la boutique d\'applications.' },
+];
+
+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: 'fr',
+};
+
+const ui: MobileMockupGeneratorUI = {
+  labelUpload: 'Télécharger des captures',
+  dropHint: 'Glissez vos images ici',
+  dropFormats: 'PNG, JPG ou WEBP',
+  btnMassReplace: 'Remplacement en masse',
+  massReplaceHint: 'Remplace les images actuelles en conservant vos presets et textes. Idéal pour les itérations rapides.',
+  labelSettings: 'Paramètres globaux',
+  labelDevice: 'Appareil',
+  labelFont: 'Typographie',
+  labelBackground: 'Fond',
+  titleSwapColors: 'Inverser les couleurs',
+  labelAngle: 'Angle',
+  labelSafeArea: 'Zone de sécurité (haut/bas)',
+  labelSafeAreaColor: 'Couleur de zone',
+  emptyTitle: 'Aucune image pour l\'instant',
+  emptySubtitle: 'Téléchargez vos captures pour commencer à concevoir',
+  btnClearAll: 'Effacer le canevas',
+  btnExport: 'Tout exporter (.zip)',
+  cardTitleDuplicate: 'Dupliquer la scène',
+  cardTitleReplace: 'Remplacer la capture actuelle',
+  cardSectionLayouts: 'Mises en page maîtres',
+  cardSectionBranding: 'Marque & Textes',
+  cardTitleResetText: 'Réinitialiser le texte',
+  cardLabelColor: 'Couleur',
+  cardTextPlaceholder: 'Écrivez votre texte ici...',
+  cardSectionDevice: 'Mise en page appareil',
+  cardTitleResetDevice: 'Réinitialiser la position',
+  cardSectionScene: 'Accessoires & Fond',
+  cardBtnSpecialBg: 'Fond spécial',
+  cardBtnDeleteScene: 'Supprimer la scène',
+  cardRangeLabelSize: 'Taille',
+  cardRangeLabelX: 'Axe X',
+  cardRangeLabelY: 'Axe Y',
+  cardRangeLabelRotation: 'Rotation',
+  cardRangeLabelScale: 'Échelle',
+  presetClassic: 'Classique',
+  presetMobileBottom: 'Mobile bas',
+  presetMobileTop: 'Mobile haut',
+  presetFocus: 'Focus',
+  presetDynamic: 'Dynamique',
+  presetSplitLeft: 'Divisé gauche',
+  presetSplitRight: 'Divisé droite',
+  presetImageLeft: 'Image gauche',
+  presetImageRight: 'Image droite',
+  confirmClear: 'Êtes-vous sûr de vouloir supprimer tous les mockups ?',
+  processingExport: 'Traitement en cours...',
+  exportDone: 'Terminé !',
+};
+
+export const content: ToolLocaleContent<MobileMockupGeneratorUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Questions fréquentes',
+  faq: faqData,
+  bibliographyTitle: 'Références',
+  bibliography: [
+    { name: 'Apple App Store Screenshot Requirements', url: 'https://developer.apple.com/help/app-store-connect/reference/screenshot-specifications' },
+    { name: 'Google Play Screenshot Requirements', url: 'https://support.google.com/googleplay/android-developer/answer/9866151' },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    { type: 'title', text: 'Élevez vos captures au niveau supérieur', level: 2 },
+    { type: 'paragraph', html: 'Ne vous limitez pas à des captures d\'écran plates. Notre outil de mockups permet aux développeurs et designers de créer des visuels à fort impact sans avoir besoin de Photoshop ou Figma.' },
+    { type: 'title', text: 'Puissance avec les mises en page maîtres', level: 3 },
+    { type: 'grid', columns: 2 },
+    { type: 'card', title: 'App Store et Google Play', html: '<p>Optimisez votre taux de conversion. Les mockups iPhone 15 Pro Max et Pixel 8 sont le standard mondial pour les fiches des boutiques d\'applications.</p>' },
+    { type: 'card', title: 'Pitch Decks et Marketing', html: '<p>Présentez vos idées avec autorité. Parfait pour les présentations aux investisseurs, les campagnes sur les réseaux sociaux et les portfolios professionnels de design UI/UX.</p>' },
+    { type: 'title', text: 'Flux de travail professionnel', level: 3 },
+    { type: 'tip', html: 'Utilisez les presets "Divisé gauche" et "Divisé droite" pour créer des mockups continus qui glissent d\'une image à l\'autre dans les carrousels Instagram ou les captures App Store.' },
+  ],
+};

package/src/tool/mobileMockupGenerator/index.ts

@@ -0,0 +1,33 @@
+import type { DeveloperToolEntry, ToolLocaleContent, ToolDefinition } from '../../types';
+import MobileMockupGeneratorComponent from './component.astro';
+import MobileMockupGeneratorSEO from './seo.astro';
+import MobileMockupGeneratorBibliography from './bibliography.astro';
+import type { MobileMockupGeneratorUI } from './ui';
+
+export type MobileMockupGeneratorLocaleContent = ToolLocaleContent<MobileMockupGeneratorUI>;
+
+import { content as es } from './i18n/es';
+import { content as en } from './i18n/en';
+import { content as fr } from './i18n/fr';
+
+export const mobileMockupGenerator: DeveloperToolEntry<MobileMockupGeneratorUI> = {
+  id: 'mobile-mockup-generator',
+  icons: {
+    bg: 'mdi:cellphone',
+    fg: 'mdi:image-frame',
+  },
+  i18n: {
+    es: async () => es,
+    en: async () => en,
+    fr: async () => fr,
+  },
+};
+
+export { MobileMockupGeneratorComponent, MobileMockupGeneratorSEO, MobileMockupGeneratorBibliography };
+
+export const MOBILE_MOCKUP_GENERATOR_TOOL: ToolDefinition = {
+  entry: mobileMockupGenerator,
+  Component: MobileMockupGeneratorComponent,
+  SEOComponent: MobileMockupGeneratorSEO,
+  BibliographyComponent: MobileMockupGeneratorBibliography,
+};

package/src/tool/mobileMockupGenerator/rendering.ts

@@ -0,0 +1,189 @@
+import type { DeviceConfig, MockupImage } from './types';
+import { EXPORT_WIDTH, EXPORT_HEIGHT, CANVAS_ASPECT } from './constants';
+
+interface CanvasDims { w: number; h: number; }
+interface Rect { x: number; y: number; w: number; h: number; }
+interface SafeAreaBounds { targetY: number; targetH: number; }
+
+interface GlobalSettings {
+  gradient: { start: string; end: string; angle: number };
+  font: string;
+  safeArea: { show: boolean; color: string };
+}
+
+interface DrawState {
+  ctx: CanvasRenderingContext2D;
+  image: MockupImage;
+  gs: GlobalSettings;
+  scale: number;
+}
+
+export interface DrawMockupOpts {
+  dataUrl: string;
+  device: DeviceConfig;
+  gs: GlobalSettings;
+  isExport?: boolean;
+}
+
+export class RenderingEngine {
+  static async drawMockup(canvas: HTMLCanvasElement, image: MockupImage, opts: DrawMockupOpts) {
+    const ctx = canvas.getContext('2d', { alpha: false });
+    if (!ctx) return;
+    const dims = this.initCanvas(canvas, ctx, opts.isExport ?? false);
+    const { scale, devBounds } = this.calcDeviceLayout(image, opts.device, dims);
+    const s: DrawState = { ctx, image, gs: opts.gs, scale };
+    await this.drawBackground(s, dims);
+    this.drawDeviceShadow(s, devBounds, opts.device.radius);
+    const screen = this.getScreenBounds(devBounds, scale);
+    await this.drawScreenContent(s, opts.dataUrl, opts.device, screen);
+    if (opts.device.notch) this.drawNotch(s, opts.device, devBounds);
+    this.drawText(s, dims);
+  }
+
+  private static initCanvas(canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D, isExport: boolean): CanvasDims {
+    if (isExport) return { w: EXPORT_WIDTH, h: EXPORT_HEIGHT };
+    const dpr = window.devicePixelRatio || 1;
+    const w = canvas.clientWidth || canvas.width / dpr;
+    const h = w / CANVAS_ASPECT;
+    canvas.width = w * dpr;
+    canvas.height = h * dpr;
+    ctx.scale(dpr, dpr);
+    return { w, h };
+  }
+
+  private static async drawBackground(s: DrawState, dims: CanvasDims) {
+    if (s.image.settings.bgImage) {
+      const bgImg = await this.loadImage(s.image.settings.bgImage);
+      s.ctx.drawImage(bgImg, 0, 0, dims.w, dims.h);
+      return;
+    }
+    const angleRad = (s.gs.gradient.angle - 90) * (Math.PI / 180);
+    const cx = dims.w / 2;
+    const cy = dims.h / 2;
+    const len = Math.abs(dims.w * Math.cos(angleRad)) + Math.abs(dims.h * Math.sin(angleRad));
+    const grad = s.ctx.createLinearGradient(cx - Math.cos(angleRad) * len / 2, cy - Math.sin(angleRad) * len / 2, cx + Math.cos(angleRad) * len / 2, cy + Math.sin(angleRad) * len / 2);
+    grad.addColorStop(0, s.gs.gradient.start);
+    grad.addColorStop(1, s.gs.gradient.end);
+    s.ctx.fillStyle = grad;
+    s.ctx.fillRect(0, 0, dims.w, dims.h);
+  }
+
+  private static calcDeviceLayout(image: MockupImage, device: DeviceConfig, dims: CanvasDims) {
+    const paddingScale = 0.85 - (image.settings.spacing / 100) * 0.35;
+    const scale = Math.min((dims.w * paddingScale) / device.width, (dims.h * paddingScale) / device.height);
+    const dW = device.width * scale;
+    const dH = device.height * scale;
+    const dX = (dims.w - dW) / 2 + (dims.w * (image.settings.deviceOffsetX ?? 0)) / 100;
+    const dY = (dims.h - dH) / 2 + (dims.h * (image.settings.deviceOffsetY ?? 0)) / 100;
+    return { scale, devBounds: { x: dX, y: dY, w: dW, h: dH } };
+  }
+
+  private static drawDeviceShadow(s: DrawState, devBounds: Rect, radius: number) {
+    s.ctx.save();
+    s.ctx.shadowColor = 'rgba(0,0,0,0.4)';
+    s.ctx.shadowBlur = 40 * s.scale;
+    s.ctx.shadowOffsetY = 20 * s.scale;
+    s.ctx.fillStyle = '#0f172a';
+    this.roundRect(s.ctx, devBounds, radius * s.scale);
+    s.ctx.fill();
+    s.ctx.restore();
+  }
+
+  private static getScreenBounds(devBounds: Rect, scale: number): Rect {
+    const inset = 8 * scale;
+    return { x: devBounds.x + inset, y: devBounds.y + inset, w: devBounds.w - inset * 2, h: devBounds.h - inset * 2 };
+  }
+
+  private static async drawScreenContent(s: DrawState, dataUrl: string, device: DeviceConfig, screen: Rect) {
+    const imgEl = await this.loadImage(dataUrl);
+    s.ctx.save();
+    this.roundRect(s.ctx, screen, (device.radius - 8) * s.scale);
+    s.ctx.clip();
+    if (s.gs.safeArea.show) {
+      s.ctx.fillStyle = s.gs.safeArea.color;
+      s.ctx.fillRect(screen.x, screen.y, screen.w, screen.h);
+    }
+    const saBounds = this.calcSafeAreaBounds(device, screen, s.gs.safeArea.show, s.scale);
+    const dr = this.calcImageDrawRect(imgEl, screen, saBounds, s.gs.safeArea.show);
+    s.ctx.drawImage(imgEl, dr.x, dr.y, dr.w, dr.h);
+    if (s.gs.safeArea.show) this.drawSafeAreaOverlay(s.ctx, device, screen, { scale: s.scale, color: s.gs.safeArea.color });
+    s.ctx.restore();
+  }
+
+  private static calcSafeAreaBounds(device: DeviceConfig, screen: Rect, show: boolean, scale: number): SafeAreaBounds {
+    if (!show) return { targetY: screen.y, targetH: screen.h };
+    return {
+      targetY: screen.y + device.safeAreaTop * scale,
+      targetH: screen.h - (device.safeAreaTop + device.safeAreaBottom) * scale,
+    };
+  }
+
+  private static calcImageDrawRect(img: HTMLImageElement, screen: Rect, bounds: SafeAreaBounds, hasSafeArea: boolean): Rect {
+    const iA = img.width / img.height;
+    const sA = screen.w / bounds.targetH;
+    if (hasSafeArea) {
+      if (iA > sA) return { x: screen.x, y: bounds.targetY + (bounds.targetH - screen.w / iA) / 2, w: screen.w, h: screen.w / iA };
+      return { x: screen.x + (screen.w - bounds.targetH * iA) / 2, y: bounds.targetY, w: bounds.targetH * iA, h: bounds.targetH };
+    }
+    if (iA > sA) return { x: screen.x - (screen.h * iA - screen.w) / 2, y: screen.y, w: screen.h * iA, h: screen.h };
+    return { x: screen.x, y: screen.y - (screen.w / iA - screen.h) / 2, w: screen.w, h: screen.w / iA };
+  }
+
+  private static drawSafeAreaOverlay(ctx: CanvasRenderingContext2D, device: DeviceConfig, screen: Rect, opts: { scale: number; color: string }) {
+    ctx.fillStyle = opts.color;
+    if (device.safeAreaTop > 0) ctx.fillRect(screen.x, screen.y, screen.w, device.safeAreaTop * opts.scale);
+    if (device.safeAreaBottom > 0) ctx.fillRect(screen.x, screen.y + screen.h - device.safeAreaBottom * opts.scale, screen.w, device.safeAreaBottom * opts.scale);
+  }
+
+  private static drawNotch(s: DrawState, device: DeviceConfig, devBounds: Rect) {
+    if (!device.notch) return;
+    s.ctx.fillStyle = '#0f172a';
+    const nW = 120 * s.scale;
+    const nH = 35 * s.scale;
+    const nR = 18 * s.scale;
+    this.roundRect(s.ctx, { x: devBounds.x + (devBounds.w - nW) / 2, y: devBounds.y + 12 * s.scale, w: nW, h: nH }, nR);
+    s.ctx.fill();
+  }
+
+  private static drawText(s: DrawState, dims: CanvasDims) {
+    if (!s.image.settings.text) return;
+    s.ctx.save();
+    s.ctx.translate(dims.w * (s.image.settings.textX / 100), dims.h * (s.image.settings.textY / 100));
+    s.ctx.rotate((s.image.settings.textRotation * Math.PI) / 180);
+    s.ctx.font = `bold ${s.image.settings.textSize}px ${s.gs.font}`;
+    s.ctx.fillStyle = s.image.settings.textColor;
+    s.ctx.textAlign = 'center';
+    s.ctx.textBaseline = 'middle';
+    const lines = this.wrapText(s.ctx, s.image.settings.text, dims.w * 0.85);
+    const lineH = s.image.settings.textSize * 1.2;
+    lines.forEach((line, i) => s.ctx.fillText(line, 0, i * lineH - ((lines.length - 1) * lineH) / 2));
+    s.ctx.restore();
+  }
+
+  private static wrapText(ctx: CanvasRenderingContext2D, text: string, maxW: number): string[] {
+    const words = text.split(' ');
+    const lines: string[] = [];
+    let current = words[0];
+    for (let i = 1; i < words.length; i++) {
+      const test = current + ' ' + words[i];
+      if (ctx.measureText(test).width < maxW) { current = test; }
+      else { lines.push(current); current = words[i]; }
+    }
+    lines.push(current);
+    return lines;
+  }
+
+  private static roundRect(ctx: CanvasRenderingContext2D, bounds: Rect, r: number) {
+    ctx.beginPath();
+    ctx.roundRect(bounds.x, bounds.y, bounds.w, bounds.h, r);
+    ctx.closePath();
+  }
+
+  private static loadImage(url: string): Promise<HTMLImageElement> {
+    return new Promise((resolve) => {
+      const img = new Image();
+      img.onload = () => resolve(img);
+      img.src = url;
+    });
+  }
+}

package/src/tool/mobileMockupGenerator/seo.astro

@@ -0,0 +1,14 @@
+---
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import { mobileMockupGenerator } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'es' } = Astro.props;
+const content = await mobileMockupGenerator.i18n[locale]?.();
+---
+
+{content && <SEORenderer content={{ locale, sections: content.seo }} />}