@jjlmoya/utils-audiovisual 1.2.0

package/src/tool/chromaticLens/ui.ts

@@ -0,0 +1,109 @@
+import { extractPalette, type ColorSwatch } from './logic';
+import type { ChromaticLensUI } from './index';
+
+export function initChromaticLens() {
+    const root = document.getElementById('chromatic-lens-root');
+    if (!root) return;
+
+    const labels = JSON.parse(root.dataset.ui || '{}') as ChromaticLensUI;
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d', { willReadFrequently: true })!;
+
+    const fileInput = root.querySelector('#file-input') as HTMLInputElement;
+    const dropArea = root.querySelector('#drop-area') as HTMLElement;
+    const workspace = root.querySelector('#workspace-area') as HTMLElement;
+    const emptyState = root.querySelector('#empty-state') as HTMLElement;
+    const loader = root.querySelector('#loader-overlay') as HTMLElement;
+    const previewImg = root.querySelector('#preview-image') as HTMLImageElement;
+    const paletteGrid = root.querySelector('#swatches-grid') as HTMLElement;
+    const colorCountSelect = root.querySelector('#color-count') as HTMLSelectElement;
+
+    let currentImageData: Uint8ClampedArray | null = null;
+    let isProcessing = false;
+
+    const processPalette = () => {
+        if (!currentImageData || isProcessing) return;
+        isProcessing = true;
+        loader.classList.remove('hidden');
+        paletteGrid.classList.add('hidden');
+
+        const colorCount = parseInt(colorCountSelect.value);
+
+        requestAnimationFrame(() => {
+            setTimeout(() => {
+                const palette = extractPalette(currentImageData!, colorCount);
+                renderPalette(palette);
+                loader.classList.add('hidden');
+                paletteGrid.classList.remove('hidden');
+                isProcessing = false;
+            }, 50);
+        });
+    };
+
+    const renderPalette = (palette: ColorSwatch[]) => {
+        paletteGrid.innerHTML = "";
+        palette.forEach((swatch) => {
+            const swatchEl = document.createElement('div');
+            swatchEl.className = "swatch";
+            swatchEl.innerHTML = `
+                <div class="swatch-color" style="background-color: ${swatch.hex}"></div>
+                <div class="swatch-info">
+                    <span class="swatch-hex">${swatch.hex}</span>
+                    <div class="swatch-action">
+                        <span class="action-text">${labels.copyLabel}</span>
+                    </div>
+                </div>
+            `;
+            
+            swatchEl.onclick = () => {
+                navigator.clipboard.writeText(swatch.hex);
+                const actionText = swatchEl.querySelector('.action-text')!;
+                const originalText = actionText.textContent;
+                actionText.textContent = labels.copiedLabel;
+                swatchEl.classList.add('copied');
+                
+                setTimeout(() => {
+                    actionText.textContent = originalText;
+                    swatchEl.classList.remove('copied');
+                }, 2000);
+            };
+
+            paletteGrid.appendChild(swatchEl);
+        });
+    };
+
+    const handleFile = (file: File) => {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            const img = new Image();
+            img.onload = () => {
+                canvas.width = img.naturalWidth;
+                canvas.height = img.naturalHeight;
+                ctx.drawImage(img, 0, 0);
+                currentImageData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
+                
+                previewImg.src = img.src;
+                emptyState.classList.add('hidden');
+                workspace.classList.remove('hidden');
+                processPalette();
+            };
+            img.src = e.target?.result as string;
+        };
+        reader.readAsDataURL(file);
+    };
+
+    dropArea.onclick = () => fileInput.click();
+    fileInput.onchange = () => {
+        if (fileInput.files?.[0]) handleFile(fileInput.files[0]);
+    };
+
+    colorCountSelect.onchange = processPalette;
+
+    root.ondragover = (e) => { e.preventDefault(); dropArea.classList.add('drop-area-active'); };
+    root.ondragleave = () => { dropArea.classList.remove('drop-area-active'); };
+    root.ondrop = (e: DragEvent) => {
+        e.preventDefault();
+        dropArea.classList.remove('drop-area-active');
+        if (e.dataTransfer?.files[0]) handleFile(e.dataTransfer.files[0]);
+    };
+}

package/src/tool/collageMaker/bibliography.astro

@@ -0,0 +1,17 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import { collageMaker } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'es' } = Astro.props;
+const content = await collageMaker.i18n[locale]?.();
+if (!content || !content.bibliography || content.bibliography.length === 0) return null;
+
+const { bibliography, bibliographyTitle = 'Bibliografía' } = content;
+---
+
+<SharedBibliography title={bibliographyTitle} links={bibliography} />

package/src/tool/collageMaker/component.astro

@@ -0,0 +1,302 @@
+---
+import type { CollageMakerUI } from './index';
+import './style.css';
+
+interface Props {
+  ui: CollageMakerUI;
+}
+
+const { ui } = Astro.props;
+const dropSub = (ui.dropSub ?? '').replace('{link}', `<span class="cm-drop-link">${ui.dropLink ?? ''}</span>`);
+---
+
+<div class="cm-root" id="collage-maker-root" data-ui={JSON.stringify(ui)}>
+  <div class="cm-card">
+
+    <div class="cm-top-row">
+      <div class="cm-left-col">
+
+        <div id="cm-drop-zone" class="cm-drop-zone">
+          <input type="file" id="cm-file-input" accept="image/*" multiple />
+          <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <rect x="3" y="3" width="18" height="18" rx="2"/>
+            <circle cx="8.5" cy="8.5" r="1.5"/>
+            <path d="M21 15l-5-5L5 21"/>
+          </svg>
+          <p class="cm-drop-title">{ui.dropTitle}</p>
+          <p class="cm-drop-sub" set:html={dropSub} />
+        </div>
+
+        <div id="cm-images-section" style="display:none">
+          <div class="cm-section-header">
+            <span class="cm-section-label">{ui.imgsLoaded}</span>
+            <span id="cm-counter" class="cm-badge">0/9</span>
+          </div>
+          <div id="cm-thumbs" class="cm-thumbs"></div>
+        </div>
+
+      </div>
+
+      <div class="cm-preview-col">
+        <div class="cm-preview-placeholder" id="cm-placeholder">
+          <svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" opacity="0.25">
+            <rect x="3" y="3" width="8" height="8" rx="1"/><rect x="13" y="3" width="8" height="8" rx="1"/>
+            <rect x="3" y="13" width="8" height="8" rx="1"/><rect x="13" y="13" width="8" height="8" rx="1"/>
+          </svg>
+          <p>{ui.previewTitle}</p>
+        </div>
+        <canvas id="cm-canvas" class="cm-canvas" style="display:none"></canvas>
+        <div id="cm-preview-footer" style="display:none">
+          <span id="cm-canvas-dims" class="cm-dims-badge"></span>
+        </div>
+      </div>
+    </div>
+
+    <div class="cm-section-divider" id="cm-layout-section" style="display:none">
+      <span class="cm-section-label">{ui.layoutLabel}</span>
+      <div id="cm-layouts" class="cm-layouts"></div>
+    </div>
+
+    <div class="cm-section-divider cm-settings-row" id="cm-settings-section" style="display:none">
+      <span class="cm-section-label">{ui.settingsLabel}</span>
+      <div class="cm-settings-inline">
+        <div class="cm-setting">
+          <label class="cm-setting-label" for="cm-border-width">{ui.borderLabel} <span id="cm-bw-val">0</span>px</label>
+          <input type="range" id="cm-border-width" min="0" max="30" value="0" class="cm-slider" />
+        </div>
+        <div class="cm-setting">
+          <label class="cm-setting-label">{ui.borderColorLabel}</label>
+          <div class="cm-color-row">
+            <input type="color" id="cm-border-color" value="#ffffff" class="cm-color-swatch" />
+            <span id="cm-bc-val" class="cm-color-code">#FFFFFF</span>
+          </div>
+        </div>
+        <div class="cm-setting">
+          <label class="cm-setting-label">{ui.bgColorLabel}</label>
+          <div class="cm-color-row">
+            <input type="color" id="cm-bg-color" value="#1a1a1a" class="cm-color-swatch" />
+            <span id="cm-bg-val" class="cm-color-code">#1A1A1A</span>
+          </div>
+        </div>
+        <button id="cm-download-btn" class="cm-download-btn" disabled>
+          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1M12 4v12M8 12l4 4 4-4"/></svg>
+          {ui.downloadBtn}
+        </button>
+      </div>
+    </div>
+
+  </div>
+</div>
+
+<script>
+  interface ImgEntry { src: string; w: number; h: number; name: string; }
+  type Pos = [number, number, number, number];
+
+  interface Layout {
+    id: string;
+    label: string;
+    images: number;
+    svgPath: string;
+    build: (gap: number) => { W: number; H: number; pos: Pos[] };
+  }
+
+  const LAYOUTS: Layout[] = [
+    {
+      id: '2x1', label: '2 cols', images: 2,
+      svgPath: 'M1,1h10v10h-10z M13,1h10v10h-10z',
+      build: g => { const W=800,H=400,cw=(W-g*3)/2,ch=H-g*2; return {W,H,pos:[[g,g,cw,ch],[g*2+cw,g,cw,ch]]}; }
+    },
+    {
+      id: '1x2', label: '2 filas', images: 2,
+      svgPath: 'M1,1h22v10h-22z M1,13h22v10h-22z',
+      build: g => { const W=400,H=800,cw=W-g*2,ch=(H-g*3)/2; return {W,H,pos:[[g,g,cw,ch],[g,g*2+ch,cw,ch]]}; }
+    },
+    {
+      id: '3-split', label: '3 cols', images: 3,
+      svgPath: 'M1,1h6v22h-6z M9,1h6v22h-6z M17,1h6v22h-6z',
+      build: g => { const W=900,H=300,cw=(W-g*4)/3,ch=H-g*2; return {W,H,pos:[[g,g,cw,ch],[g*2+cw,g,cw,ch],[g*3+cw*2,g,cw,ch]]}; }
+    },
+    {
+      id: '2+2', label: '2×2', images: 4,
+      svgPath: 'M1,1h10v10h-10z M13,1h10v10h-10z M1,13h10v10h-10z M13,13h10v10h-10z',
+      build: g => { const W=800,H=800,cs=(W-g*3)/2; return {W,H,pos:[[g,g,cs,cs],[g*2+cs,g,cs,cs],[g,g*2+cs,cs,cs],[g*2+cs,g*2+cs,cs,cs]]}; }
+    },
+    {
+      id: 'big-left', label: 'Grande izq', images: 4,
+      svgPath: 'M1,1h13v22h-13z M16,1h7v6h-7z M16,9h7v6h-7z M16,17h7v6h-7z',
+      build: g => { const W=800,H=600,bs=400-g,ss=(W-bs-g*4)/3; return {W,H,pos:[[g,g,bs,bs],[bs+g*2,g,ss,ss],[bs+g*2,g*2+ss,ss,ss],[bs+g*2,g*3+ss*2,ss,ss]]}; }
+    },
+    {
+      id: 'big-right', label: 'Grande der', images: 4,
+      svgPath: 'M1,1h7v6h-7z M1,9h7v6h-7z M1,17h7v6h-7z M10,1h13v22h-13z',
+      build: g => { const W=800,H=600,bs=400-g,ss=(W-bs-g*4)/3; return {W,H,pos:[[g,g,ss,ss],[g,g*2+ss,ss,ss],[g,g*3+ss*2,ss,ss],[ss+g*2,g,bs,bs]]}; }
+    },
+    {
+      id: '5-grid', label: '5 asim.', images: 5,
+      svgPath: 'M1,1h10v22h-10z M13,1h10v10h-10z M13,13h10v10h-10z',
+      build: g => { const W=900,H=750,c1=(W-g*3)/2,c2=(W-g*4)/3,r2=(H-g*3)/2; return {W,H,pos:[[g,g,c1,H-g*2],[c1+g*2,g,c2,r2],[c1+g*2+c2+g,g,c2,r2],[c1+g*2,g*2+r2,c2,r2],[c1+g*2+c2+g,g*2+r2,c2,r2]]}; }
+    },
+    {
+      id: '2x3', label: '2×3', images: 6,
+      svgPath: 'M1,1h10v6h-10z M13,1h10v6h-10z M1,9h10v6h-10z M13,9h10v6h-10z M1,17h10v6h-10z M13,17h10v6h-10z',
+      build: g => { const W=800,H=1200,cw=(W-g*3)/2,ch=(H-g*4)/3; const pos:Pos[]=[]; for(let r=0;r<3;r++)for(let c=0;c<2;c++)pos.push([g*(c+1)+cw*c,g*(r+1)+ch*r,cw,ch]); return {W,H,pos}; }
+    },
+    {
+      id: '2x4', label: '2×4', images: 8,
+      svgPath: 'M1,1h10v4h-10z M13,1h10v4h-10z M1,7h10v4h-10z M13,7h10v4h-10z M1,13h10v4h-10z M13,13h10v4h-10z M1,19h10v4h-10z M13,19h10v4h-10z',
+      build: g => { const W=800,H=1600,cw=(W-g*3)/2,ch=(H-g*5)/4; const pos:Pos[]=[]; for(let r=0;r<4;r++)for(let c=0;c<2;c++)pos.push([g*(c+1)+cw*c,g*(r+1)+ch*r,cw,ch]); return {W,H,pos}; }
+    },
+    {
+      id: '3x3', label: '3×3', images: 9,
+      svgPath: 'M1,1h6v6h-6z M9,1h6v6h-6z M17,1h6v6h-6z M1,9h6v6h-6z M9,9h6v6h-6z M17,9h6v6h-6z M1,17h6v6h-6z M9,17h6v6h-6z M17,17h6v6h-6z',
+      build: g => { const W=900,H=900,cs=(W-g*4)/3; const pos:Pos[]=[]; for(let r=0;r<3;r++)for(let c=0;c<3;c++)pos.push([g*(c+1)+cs*c,g*(r+1)+cs*r,cs,cs]); return {W,H,pos}; }
+    },
+  ];
+
+  const root          = document.getElementById('collage-maker-root') as HTMLElement;
+  const labels        = JSON.parse(root.dataset.ui ?? '{}') as Record<string,string>;
+  const dropZone      = document.getElementById('cm-drop-zone') as HTMLElement;
+  const fileInput     = document.getElementById('cm-file-input') as HTMLInputElement;
+  const imagesSection = document.getElementById('cm-images-section') as HTMLElement;
+  const thumbsEl      = document.getElementById('cm-thumbs') as HTMLElement;
+  const counterEl     = document.getElementById('cm-counter') as HTMLElement;
+  const layoutSection = document.getElementById('cm-layout-section') as HTMLElement;
+  const layoutsEl     = document.getElementById('cm-layouts') as HTMLElement;
+  const settingsSection = document.getElementById('cm-settings-section') as HTMLElement;
+  const downloadBtn   = document.getElementById('cm-download-btn') as HTMLButtonElement;
+  const canvas        = document.getElementById('cm-canvas') as HTMLCanvasElement;
+  const placeholder   = document.getElementById('cm-placeholder') as HTMLElement;
+  const previewFooter = document.getElementById('cm-preview-footer') as HTMLElement;
+  const canvasDims    = document.getElementById('cm-canvas-dims') as HTMLElement;
+  const bwInput       = document.getElementById('cm-border-width') as HTMLInputElement;
+  const bwVal         = document.getElementById('cm-bw-val') as HTMLElement;
+  const bcInput       = document.getElementById('cm-border-color') as HTMLInputElement;
+  const bcVal         = document.getElementById('cm-bc-val') as HTMLElement;
+  const bgInput       = document.getElementById('cm-bg-color') as HTMLInputElement;
+  const bgVal         = document.getElementById('cm-bg-val') as HTMLElement;
+
+  let images: ImgEntry[] = [];
+  let selectedLayout: Layout | null = null;
+  let collageReady = false;
+
+  function buildLayoutPicker(): void {
+    layoutsEl.innerHTML = '';
+    LAYOUTS.forEach(layout => {
+      const enabled = images.length >= layout.images;
+      const needsText = (labels.needsImgs ?? 'Necesitas {n} imágenes').replace('{n}', String(layout.images));
+      const btn = document.createElement('button');
+      btn.className = ['cm-layout-btn', selectedLayout?.id === layout.id ? 'cm-layout-btn-active' : '', !enabled ? 'cm-layout-btn-disabled' : ''].filter(Boolean).join(' ');
+      btn.disabled = !enabled;
+      btn.title = enabled ? layout.label : needsText;
+      btn.innerHTML = `<svg viewBox="0 0 24 24" width="36" height="36" fill="currentColor" aria-hidden="true"><path d="${layout.svgPath}"/></svg><span>${layout.label}</span>${!enabled ? `<span class="cm-layout-need">${layout.images}</span>` : ''}`;
+      if (enabled) {
+        btn.addEventListener('click', () => { selectedLayout = layout; buildLayoutPicker(); renderCanvas(); });
+      }
+      layoutsEl.appendChild(btn);
+    });
+    if (!selectedLayout || images.length < selectedLayout.images) {
+      selectedLayout = LAYOUTS.find(l => images.length >= l.images) ?? null;
+      if (selectedLayout) buildLayoutPicker();
+    }
+  }
+
+  function renderThumbs(): void {
+    thumbsEl.innerHTML = '';
+    images.forEach((img, idx) => {
+      const div = document.createElement('div');
+      div.className = 'cm-thumb';
+      div.innerHTML = `<img src="${img.src}" alt="" /><button class="cm-thumb-del" data-idx="${idx}"><svg viewBox="0 0 24 24" width="12" height="12" fill="currentColor" aria-hidden="true"><path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/></svg></button><span class="cm-thumb-num">${idx+1}</span>`;
+      thumbsEl.appendChild(div);
+    });
+    thumbsEl.querySelectorAll('.cm-thumb-del').forEach(btn => {
+      btn.addEventListener('click', e => {
+        e.stopPropagation();
+        const idx = parseInt((btn as HTMLElement).dataset.idx ?? '0');
+        images.splice(idx, 1);
+        afterImagesChange();
+      });
+    });
+  }
+
+  function afterImagesChange(): void {
+    counterEl.textContent = `${images.length}/9`;
+    imagesSection.style.display = images.length > 0 ? '' : 'none';
+    layoutSection.style.display = images.length >= 2 ? '' : 'none';
+    settingsSection.style.display = images.length >= 2 ? '' : 'none';
+    renderThumbs();
+    if (images.length >= 2) {
+      buildLayoutPicker();
+      renderCanvas();
+    } else {
+      canvas.style.display = 'none';
+      placeholder.style.display = '';
+      previewFooter.style.display = 'none';
+      collageReady = false;
+      downloadBtn.disabled = true;
+    }
+  }
+
+  async function renderCanvas(): Promise<void> {
+    if (!selectedLayout || images.length < 2) return;
+    const gap = parseInt(bwInput.value);
+    const { W, H, pos } = selectedLayout.build(gap);
+    canvas.width = W;
+    canvas.height = H;
+    const ctx = canvas.getContext('2d')!;
+    ctx.fillStyle = bgInput.value;
+    ctx.fillRect(0, 0, W, H);
+    for (let i = 0; i < Math.min(images.length, pos.length); i++) {
+      const p = pos[i]!;
+      await drawImage(ctx, images[i]!.src, p[0], p[1], p[2], p[3]);
+      if (gap > 0) { ctx.strokeStyle = bcInput.value; ctx.lineWidth = gap; ctx.strokeRect(p[0]-gap/2, p[1]-gap/2, p[2]+gap, p[3]+gap); }
+    }
+    canvas.style.display = '';
+    placeholder.style.display = 'none';
+    previewFooter.style.display = '';
+    canvasDims.textContent = `${W} × ${H} px`;
+    collageReady = true;
+    downloadBtn.disabled = false;
+  }
+
+  function drawImage(ctx: CanvasRenderingContext2D, src: string, rect: { x: number; y: number; w: number; h: number }): Promise<void> {
+    return new Promise(resolve => {
+      const img = new Image();
+      const { x, y, w, h } = rect;
+      img.onload = () => {
+        const ratio = Math.max(w / img.width, h / img.height);
+        const sw = w / ratio, sh = h / ratio;
+        ctx.drawImage(img, (img.width-sw)/2, (img.height-sh)/2, sw, sh, x, y, w, h);
+        resolve();
+      };
+      img.src = src;
+    });
+  }
+
+  async function loadFiles(files: FileList | File[]): Promise<void> {
+    const arr = Array.from(files).filter(f => f.type.startsWith('image/')).slice(0, 9 - images.length);
+    const loaded = await Promise.all(arr.map(f => new Promise<ImgEntry>((resolve, reject) => {
+      const r = new FileReader();
+      r.onload = e => { const img = new Image(); img.onload = () => resolve({ src: e.target!.result as string, w: img.width, h: img.height, name: f.name }); img.onerror = reject; img.src = e.target!.result as string; };
+      r.readAsDataURL(f);
+    })));
+    images = [...images, ...loaded];
+    afterImagesChange();
+  }
+
+  dropZone.addEventListener('dragover', e => { e.preventDefault(); dropZone.classList.add('cm-drop-zone-over'); });
+  dropZone.addEventListener('dragleave', () => dropZone.classList.remove('cm-drop-zone-over'));
+  dropZone.addEventListener('drop', e => { e.preventDefault(); dropZone.classList.remove('cm-drop-zone-over'); if (e.dataTransfer?.files.length) loadFiles(e.dataTransfer.files); });
+  fileInput.addEventListener('change', () => { if (fileInput.files?.length) loadFiles(fileInput.files); fileInput.value = ''; });
+
+  bwInput.addEventListener('input', () => { bwVal.textContent = bwInput.value; renderCanvas(); });
+  bcInput.addEventListener('input', () => { bcVal.textContent = bcInput.value.toUpperCase(); renderCanvas(); });
+  bgInput.addEventListener('input', () => { bgVal.textContent = bgInput.value.toUpperCase(); renderCanvas(); });
+
+  downloadBtn.addEventListener('click', () => {
+    if (!collageReady) return;
+    const a = document.createElement('a');
+    a.href = canvas.toDataURL('image/webp', 0.92);
+    a.download = 'collage.webp';
+    a.click();
+  });
+</script>

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

@@ -0,0 +1,233 @@
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+import type { CollageMakerUI, CollageMakerLocaleContent } from '../index';
+
+const slug = 'free-online-photo-collage-maker-professional-compositions';
+const title = 'Online Collage Maker - Design professional compositions';
+const description = 'Create photo collages for free in seconds. Choose from multiple layouts, adjust borders, and download in high quality without watermarks.';
+
+const ui: CollageMakerUI = {
+    dropTitle: "Drag images here",
+    dropSub: "or {link} - min. 2, max. 9",
+    dropLink: "select files",
+    imgsLoaded: "Loaded images",
+    layoutLabel: "Layout",
+    settingsLabel: "Settings",
+    borderLabel: "Border",
+    borderColorLabel: "Border color",
+    bgColorLabel: "Background",
+    downloadBtn: "Download",
+    previewTitle: "Preview",
+    needsImgs: "You need {n} images",
+    errorMin: "You need at least 2 images",
+    errorMax: "Maximum 9 images allowed",
+    errorLoad: "Error loading images",
+    faqTitle: "Frequently Asked Questions",
+    bibliographyTitle: "References"
+};
+
+const faq: CollageMakerLocaleContent['faq'] = [
+    {
+        question: "How can I change the order of the photos?",
+        answer: "The photos are placed in the collage following the order in which they appear in the loaded images list. You can remove one and upload it again to adjust its position.",
+    },
+    {
+        question: "What output format does the collage have?",
+        answer: "The collage is downloaded in high-resolution WebP format, ideal for sharing on social networks without losing sharpness.",
+    },
+];
+
+const howTo: CollageMakerLocaleContent['howTo'] = [
+    {
+        name: "Upload your photos",
+        text: "Select between 2 and 9 images from your file explorer.",
+    },
+    {
+        name: "Choose a layout",
+        text: "Select the grid that best suits the number of photos you have uploaded.",
+    },
+    {
+        name: "Customize the style",
+        text: "Adjust the border thickness and color to give it a professional finish.",
+    },
+    {
+        name: "Download and share",
+        text: "Press the create button and instantly download your final composition.",
+    },
+];
+
+const bibliography: CollageMakerLocaleContent['bibliography'] = [
+    {
+        name: "Photographic Composition: The Art of Collage",
+        url: "https://en.wikipedia.org/wiki/Collage",
+    },
+];
+
+const seo: CollageMakerLocaleContent['seo'] = [
+    {
+        type: 'summary',
+        title: 'Professional Online Collage Maker',
+        items: [
+            'Multiple layouts and predefined grids',
+            'Customization of borders and background colors',
+            '1200px high resolution ready for social networks',
+            'Instant processing with no usage limits'
+        ]
+    },
+    { type: 'title', text: 'Collage Design: Compositions That Tell Stories', level: 2 },
+    { type: 'paragraph', html: 'A collage is more than a mix of photos; it\'s a visual narrative that communicates emotion and context. Our tool allows you to create professional geometric compositions for Instagram, Facebook, Pinterest, or personal projects without the need for Photoshop or expensive software.' },
+
+    { type: 'stats', items: [
+        { value: '2-9', label: 'Images per Collage', icon: 'mdi:image-multiple' },
+        { value: '1200px', label: 'HD Resolution', icon: 'mdi:video-high-definition' },
+        { value: 'Instant', label: 'Generation', icon: 'mdi:lightning-bolt' }
+    ], columns: 3 },
+
+    { type: 'title', text: 'Visual Composition: Design Principles', level: 3 },
+    { type: 'paragraph', html: 'Composition is the art of organizing visual elements in a way that guides the viewer\'s eye and communicates intent. A good collage balances:' },
+    { type: 'list', items: [
+        '<strong>Balance:</strong> Visual distribution of weight (light vs dark images, large vs small).',
+        '<strong>Visual Flow:</strong> The eye should traverse the composition naturally, without dead spots.',
+        '<strong>Contrast:</strong> Variations in color, size, and shape that catch the attention.',
+        '<strong>Unity:</strong> Thematic coherence - images must "speak together" about the same story.'
+    ], icon: 'mdi:check' },
+
+    { type: 'card', title: 'Smart and Adaptive Designs', html: 'Our system automatically calculates the optimal space distribution based on the number of photos. 2 images = symmetric grid; 5 images = balanced asymmetric distribution. Each grid is designed to maximize visual impact.' },
+
+    { type: 'comparative', items: [
+        {
+            title: 'For Social Networks',
+            description: 'Instagram, TikTok, Facebook - square formats',
+            icon: 'mdi:share-all',
+            points: [
+                '1200px is perfect for Instagram feed',
+                'Square format avoids cropping when posting',
+                'Customizable borders for branding'
+            ],
+            highlight: true
+        },
+        {
+            title: 'For Portfolios',
+            description: 'Visual showcases for photographers and designers',
+            icon: 'mdi:briefcase-outline',
+            points: [
+                'Show multiple angles of a project',
+                'Cohesive visual narrative',
+                'Professional digital book printing'
+            ]
+        },
+        {
+            title: 'For Personal Gifts',
+            description: 'Prints, frames, and digital albums',
+            icon: 'mdi:gift-outline',
+            points: [
+                'Event memories (weddings, trips)',
+                'High resolution ready for printing',
+                'Instant design without manual effort'
+            ]
+        }
+    ], columns: 3 },
+
+    { type: 'title', text: 'Customization: Borders and Colors', level: 3 },
+    { type: 'table', headers: ['Element', 'Visual Effect', 'Recommendation'], rows: [
+        ['White Border', 'Clean, minimalist, modern', 'Social networks, digital portfolios'],
+        ['Black Border', 'Dramatic, professional, artistic', 'Art photography, fashion, luxury'],
+        ['Neutral Border (gray)', 'Versatile, academic, corporate', 'Business, education, neutrality'],
+        ['No Border', 'Fusion, continuity, immersive', 'Uniform background, flowing photos']
+    ] },
+
+    { type: 'proscons', items: [
+        {
+            pro: 'Professional predefined designs - no composition knowledge needed',
+            con: 'Options limited to pre-established grids'
+        },
+        {
+            pro: '1200px resolution ready for social networks without rescaling',
+            con: 'Not as customizable as Photoshop'
+        },
+        {
+            pro: '100% local processing - privacy, speed, no limits',
+            con: 'Requires a modern browser'
+        },
+        {
+            pro: 'Totally free, no watermarks, no advertising',
+            con: 'No individual editing options (cropping, rotation)'
+        }
+    ], proTitle: 'Advantages', conTitle: 'Limitations' },
+
+    { type: 'diagnostic', variant: 'success', title: 'Ready for Social Networks', icon: 'mdi:check-circle-outline', badge: 'Optimized', html: '1200x1200px is the ideal resolution for Instagram. It supports any aspect ratio, but the square output maximizes feed impact, eliminates automatic cropping, and looks just as good on desktop, tablet, and mobile.' },
+
+    { type: 'glossary', items: [
+        {
+            term: 'Visual Composition',
+            definition: 'Art of organizing elements (color, shape, space) to guide the viewer\'s eye and communicate emotional intent.'
+        },
+        {
+            term: 'Rule of Thirds',
+            definition: 'Composition principle: divides the image into 9 equal areas (3x3). Position subjects on intersection lines for maximum impact.'
+        },
+        {
+            term: 'Symmetrical Grid',
+            definition: 'Equal space divisions. Reassuring, orderly. Ideal for pairs of photos or even numbers.'
+        },
+        {
+            term: 'Asymmetrical Grid',
+            definition: 'Unequal divisions. Dynamic, interesting, visual. Ideal for 5+ photos with variety of sizes.'
+        },
+        {
+            term: 'Visual Balance',
+            definition: 'Perceptual equilibrium of visual weight. Light + dark image = balance; large + small = balance.'
+        }
+    ] },
+
+    { type: 'message', title: 'Instant Visual Narrative', ariaLabel: 'Information about composition and collages', html: 'Every collage tells a story. Our automatic designer ensures your visual stories are balanced, professional, and ready for the world. Without waiting for a graphic designer to do the work.' },
+
+    { type: 'title', text: 'Create, Share, Inspire', level: 3 },
+    { type: 'paragraph', html: 'A well-made collage is the difference between an forgettable post and one your followers remember and share. Use smart composition for your visual stories to impact.' }
+];
+
+const faqSchema: WithContext<FAQPage> = {
+    '@context': 'https://schema.org',
+    '@type': 'FAQPage',
+    mainEntity: faq.map((item) => ({
+        '@type': 'Question',
+        name: item.question,
+        acceptedAnswer: { '@type': 'Answer', text: item.answer },
+    })),
+};
+
+const howToSchema: WithContext<HowTo> = {
+    '@context': 'https://schema.org',
+    '@type': 'HowTo',
+    name: title,
+    description,
+    step: howTo.map((step) => ({
+        '@type': 'HowToStep',
+        name: step.name,
+        text: step.text,
+    })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+    '@context': 'https://schema.org',
+    '@type': 'SoftwareApplication',
+    name: title,
+    description,
+    applicationCategory: 'UtilitiesApplication',
+    operatingSystem: 'Web',
+    offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+    inLanguage: 'en',
+};
+
+export const content: CollageMakerLocaleContent = {
+    slug,
+    title,
+    description,
+    ui,
+    seo,
+    faqTitle: "Frequently Asked Questions",
+    faq,
+    bibliographyTitle: "References",
+    bibliography,
+    howTo,
+    schemas: [faqSchema as any, howToSchema as any, appSchema],
+};