feat: add encabezado image and update Diploma component layout for improved presentation

diplomas/src/components/Diploma.jsx

@@ -1,10 +1,29 @@
 import React from "react";
-import { Document, Page, Text, View, StyleSheet } from "@react-pdf/renderer";
+import {
+  Document,
+  Page,
+  Text,
+  View,
+  StyleSheet,
+  Image,
+} from "@react-pdf/renderer";
 
 const styles = StyleSheet.create({
-  page: { padding: 40, fontFamily: "Helvetica" },
+  page: { fontFamily: "Helvetica" },
   title: { fontSize: 24, textAlign: "center", marginBottom: 20 },
-  section: { marginBottom: 10, fontSize: 14 },
+  nombre: {
+    fontSize: 18,
+    textAlign: "center",
+    marginBottom: 10,
+    fontStyle: "italic",
+  },
+  curso: {
+    fontSize: 30,
+    textAlign: "center",
+    marginBottom: 10,
+    fontWeight: "bold",
+  },
+  section: { padding: 40, fontSize: 14 },
   competencias: { marginLeft: 20, marginTop: 5 },
   competencia: { fontSize: 12, marginBottom: 2 },
   footer: {
@@ -20,36 +39,21 @@ export default function Diploma({ alumno, curso, competencias = [], fecha }) {
   return (
     <Document>
       <Page size="A4" style={styles.page}>
-        <Text style={styles.title}>Diploma</Text>
+        <Image src="/encabezado.png" />
-        <View style={styles.section}>
+        <Text style={styles.title}>Otorga la presente</Text>
-          <Text>
+        <Text style={styles.title}>CONSTANCIA</Text>
-            <Text style={{ fontWeight: "bold" }}>Alumno: </Text>
+        <Text style={styles.title}>a: </Text>
-            {alumno?.nombre}
+        <Text style={styles.nombre}>{alumno?.nombre} </Text>
-          </Text>
+        <Text style={styles.title}>
-        </View>
+          Por su asistencia a la píldora educativa
-        <View style={styles.section}>
+        </Text>
-          <Text>
+        <Text style={styles.curso}>{curso?.nombre || "Sin curso"}</Text>
-            <Text style={{ fontWeight: "bold" }}>Curso: </Text>
+        <Text style={styles.title}>
-            {curso?.nombre || "Sin curso"}
+          con duración de 2 horas, modalidad remota
-          </Text>
+        </Text>
-        </View>
+        <Text style={styles.title}>
-        <View style={styles.section}>
+          Se expide en la ciudad de Xalapa, Ver., {fecha}
-          <Text style={{ fontWeight: "bold" }}>Competencias Acreditadas:</Text>
+        </Text>
-          <View style={styles.competencias}>
-            {(competencias || []).map((comp) => (
-              <Text key={comp.id} style={styles.competencia}>
-                - {comp.descripcion}
-              </Text>
-            ))}
-          </View>
-        </View>
-        <View style={styles.section}>
-          <Text>
-            <Text style={{ fontWeight: "bold" }}>Fecha: </Text>
-            {fecha}
-          </Text>
-        </View>
-        <Text style={styles.footer}>Generado por SIDAC</Text>
       </Page>
     </Document>
   );