certificates — gitlawb

repositories

loading repo index

#1	import type { CertificateProps } from "../types";
#2
#3	export default function Template5(cert: CertificateProps) {
#4	const d = cert.issueDate ? new Date(cert.issueDate) : new Date();
#5	const issueStr = d.toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" });
#6
#7	return (
#8	<div
#9	id="cert-render"
#10	style={{
#11	width: 1056,
#12	height: 816,
#13	background: "#f5efe6",
#14	fontFamily: "'Georgia', 'Garamond', serif",
#15	display: "flex",
#16	flexDirection: "column",
#17	alignItems: "center",
#18	justifyContent: "center",
#19	position: "relative",
#20	boxSizing: "border-box",
#21	overflow: "hidden",
#22	}}
#23	>
#24	{/* Botanical corners */}
#25	<svg style={{ position: "absolute", top: 10, left: 10, width: 120, height: 120, opacity: 0.3 }} viewBox="0 0 120 120" fill="none">
#26	<path d="M10 110 Q10 60 40 40 Q20 80 10 110Z" fill="#c16a3a" />
#27	<path d="M10 110 Q30 70 60 55 Q30 80 10 110Z" fill="#8b5e3c" />
#28	<path d="M10 110 Q50 80 80 70 Q45 85 10 110Z" fill="#c16a3a" opacity="0.6" />
#29	<circle cx="42" cy="38" r="4" fill="#c16a3a" opacity="0.4" />
#30	</svg>
#31	<svg style={{ position: "absolute", top: 10, right: 10, width: 120, height: 120, opacity: 0.3, transform: "scaleX(-1)" }} viewBox="0 0 120 120" fill="none">
#32	<path d="M10 110 Q10 60 40 40 Q20 80 10 110Z" fill="#c16a3a" />
#33	<path d="M10 110 Q30 70 60 55 Q30 80 10 110Z" fill="#8b5e3c" />
#34	<path d="M10 110 Q50 80 80 70 Q45 85 10 110Z" fill="#c16a3a" opacity="0.6" />
#35	</svg>
#36	<svg style={{ position: "absolute", bottom: 10, left: 10, width: 120, height: 120, opacity: 0.3, transform: "scaleY(-1)" }} viewBox="0 0 120 120" fill="none">
#37	<path d="M10 110 Q10 60 40 40 Q20 80 10 110Z" fill="#c16a3a" />
#38	<path d="M10 110 Q30 70 60 55 Q30 80 10 110Z" fill="#8b5e3c" />
#39	</svg>
#40	<svg style={{ position: "absolute", bottom: 10, right: 10, width: 120, height: 120, opacity: 0.3, transform: "scale(-1, -1)" }} viewBox="0 0 120 120" fill="none">
#41	<path d="M10 110 Q10 60 40 40 Q20 80 10 110Z" fill="#c16a3a" />
#42	<path d="M10 110 Q30 70 60 55 Q30 80 10 110Z" fill="#8b5e3c" />
#43	</svg>
#44
#45	<div style={{ textAlign: "center", padding: "40px 80px", zIndex: 1 }}>
#46	<p style={{ fontSize: 14, letterSpacing: 5, textTransform: "uppercase", color: "#c16a3a", marginBottom: 8 }}>
#47	Certificate of Achievement
#48	</p>
#49	<h1 style={{ fontSize: 38, color: "#3d2b1f", margin: "0 0 16px", fontWeight: 700 }}>
#50	{cert.courseTitle}
#51	</h1>
#52	<div style={{ width: 100, height: 2, background: "#c16a3a", margin: "0 auto 24px" }} />
#53	<p style={{ fontSize: 17, color: "#6b5b4f", marginBottom: 8 }}>Proudly presented to</p>
#54	<h2 style={{ fontSize: 50, color: "#3d2b1f", margin: "0 0 20px", fontWeight: 600, fontStyle: "italic" }}>
#55	{cert.recipientName}
#56	</h2>
#57	<p style={{ fontSize: 15, color: "#6b5b4f", maxWidth: 550, margin: "0 auto 32px", lineHeight: 1.7 }}>
#58	{cert.customText \|\| "In appreciation of dedicated effort and the successful fulfillment of all program requirements."}
#59	</p>
#60	<div style={{ display: "flex", justifyContent: "center", gap: 80, marginTop: 24 }}>
#61	<div style={{ textAlign: "center" }}>
#62	<p style={{ fontSize: 12, color: "#999" }}>Issued by</p>
#63	<p style={{ fontSize: 16, color: "#3d2b1f", fontWeight: 600, borderBottom: "1px solid #c16a3a", paddingBottom: 4 }}>
#64	{cert.organization}
#65	</p>
#66	</div>
#67	<div style={{ textAlign: "center" }}>
#68	<p style={{ fontSize: 12, color: "#999" }}>Date</p>
#69	<p style={{ fontSize: 16, color: "#3d2b1f", fontWeight: 600, borderBottom: "1px solid #c16a3a", paddingBottom: 4 }}>
#70	{issueStr}
#71	</p>
#72	</div>
#73	</div>
#74	<p style={{ fontSize: 11, color: "#bbb", marginTop: 32 }}>
#75	Certificate ID: {cert.id}
#76	</p>
#77	</div>
#78	</div>
#79	);
#80	}
#81