Index

[jeffertautiva-code]

import React from "react";

// PosterGallery.jsx // Single-file React component that renders four 1080x1080 propaganda-style posters // Uses Tailwind CSS utility classes for styling (no external images). // Default export: PosterGallery component

export default function PosterGallery() { const posters = [ { id: 1, lang: "es", headline: "El pueblo verdadero no se arrodilla ante el racismo ni ante el fanatismo", sub: "Marchamos hacia la paz invencible", tag: "Unidad y Justicia", palette: "#B91C1C" // rojo fuerte }, { id: 2, lang: "ko", headline: "진정한 인민은 인종차별과 광신 앞에 무릎 꿇지 않는다", sub: "불패의 평화를 향해 나아간다", tag: "단결과 정의", palette: "#8B0F0F" }, { id: 3, lang: "es", headline: "Los pueblos no son enemigos — los que alimentan la guerra sí lo son", sub: "Por la paz entre dos países", tag: "Paz Duradera", palette: "#C62828" }, { id: 4, lang: "ko", headline: "팔레스타인과 이스라엘 인민은 원수가 아니다", sub: "참된 원수는 전쟁과 불의를 부추기는 자들이다", tag: "평화의 새벽", palette: "#991414" } ];

return (

Carteles estilo propaganda — Galería

Cuatro composiciones 1080×1080 en estilo retro-propaganda (paleta roja, tipografía fuerte, elementos gráficos heroicos). Usa este componente como plantilla: clona, exporta cada póster a PNG/SVG según lo necesites.

{posters.map((p) => (

    {/* Background block with angled halftone */}
    <div
      className="absolute inset-0"
      style={{ background: `linear-gradient(180deg, ${p.palette} 0%, #fff 60%)` }}>
      <svg className="absolute -left-40 -top-40 opacity-10" width="700" height="700" viewBox="0 0 800 800" fill="none" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <pattern id={`dots-${p.id}`} x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
            <circle cx="2" cy="2" r="1.4" fill="#ffffff" />
          </pattern>
        </defs>
        <rect width="800" height="800" fill={`url(#dots-${p.id})`} />
      </svg>
    </div>

    {/* Hero emblem */}
    <div className="absolute left-6 top-6 flex items-center gap-3">
      <div className="w-16 h-16 rounded-full flex items-center justify-center" style={{ background: '#fff2f2' }}>
        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 2L14.09 8.26L20.97 8.91L15.9 12.74L17.45 19.41L12 15.77L6.55 19.41L8.1 12.74L3.03 8.91L9.91 8.26L12 2Z" fill={p.palette} />
        </svg>
      </div>
      <div className="text-white font-bold uppercase tracking-wider text-sm drop-shadow">{p.tag}</div>
    </div>

    {/* Main copy block */}
    <div className="absolute left-8 right-8 bottom-8 text-left">
      <h2 className="text-white font-extrabold leading-tight" style={{ fontSize: '2.1rem', textShadow: '0 6px 12px rgba(0,0,0,0.45)' }}>
        {p.headline}
      </h2>

      <p className="mt-4 text-white font-semibold" style={{ fontSize: '1.05rem', textShadow: '0 4px 8px rgba(0,0,0,0.35)' }}>
        {p.sub}
      </p>

      <div className="mt-6">
        <div className="inline-block bg-white/90 text-center rounded-full px-4 py-2 font-bold tracking-wide" style={{ color: p.palette }}>
          {p.lang === 'es' ? '¡Por la paz y la justicia!' : '평화와 정의를 위하여'}
        </div>
      </div>
    </div>

    {/* Decorative rays */}
    <svg className="absolute inset-0 -z-10" viewBox="0 0 800 800" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
      <g transform="translate(400,400)">
        {[...Array(12)].map((_, i) => {
          const angle = (i / 12) * Math.PI * 2;
          const x1 = Math.cos(angle) * 70;
          const y1 = Math.sin(angle) * 70;
          const x2 = Math.cos(angle) * 850;
          const y2 = Math.sin(angle) * 850;
          return (
            <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="#ffffff" strokeOpacity="0.12" strokeWidth={42} />
          );
        })}
      </g>
    </svg>

    {/* Bottom left emblem: laurel + slogan */}
    <div className="absolute left-6 bottom-6 flex items-center gap-3">
      <svg width="72" height="72" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
        <circle cx="32" cy="32" r="32" fill="#ffffff" opacity="0.9" />
        <path d="M32 14C28 20 20 24 20 32C20 40 28 44 32 50C36 44 44 40 44 32C44 24 36 20 32 14Z" fill={p.palette} />
      </svg>
      <div className="text-white text-xs font-semibold" style={{ textShadow: '0 3px 6px rgba(0,0,0,0.35)' }}>
        Diseño: Plantilla — Estética retro-propaganda
      </div>
    </div>

  </article>
))}

Exporta cada póster a 1080×1080 (ajusta el canvas). Si quieres, puedo:

• Ajustar tipografía (fuentes más rígidas, arcilla o sans condensed).
• Generar versiones con variación cromática o en blanco y negro.
• Preparar archivos PNG/SVG listos para impresión (resolución 300 DPI).

); }