certificates — gitlawb

repository

loading code, commits, and activity

repositories

loading repo index

#1	import { useState } from "react";
#2	import { useNavigate, Link } from "react-router-dom";
#3	import {
#4	ShieldCheck,
#5	Search,
#6	Award,
#7	FileCheck,
#8	FilePlus,
#9	Upload,
#10	List,
#11	Palette,
#12	QrCode,
#13	Download,
#14	Linkedin,
#15	Lock,
#16	} from "lucide-react";
#17
#18	export default function Home() {
#19	const [certId, setCertId] = useState("");
#20	const navigate = useNavigate();
#21
#22	const handleLookup = (e: React.FormEvent) => {
#23	e.preventDefault();
#24	const id = certId.trim();
#25	if (id) navigate(`/verify/${id}`);
#26	};
#27
#28	return (
#29	<div className="min-h-screen bg-gray-50">
#30	{/* Hero */}
#31	<div className="bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 text-white">
#32	<div className="max-w-5xl mx-auto px-6 py-20 text-center">
#33	<div className="flex justify-center mb-6">
#34	<div className="w-16 h-16 rounded-2xl bg-emerald-500/20 flex items-center justify-center">
#35	<ShieldCheck className="w-8 h-8 text-emerald-400" />
#36	</div>
#37	</div>
#38	<h1 className="text-5xl font-bold mb-4 tracking-tight">
#39	Digital Certificate <span className="text-emerald-400">Generator</span>
#40	</h1>
#41	<p className="text-xl text-gray-400 mb-10 max-w-2xl mx-auto">
#42	Create, issue, and verify professional digital certificates with 10 stunning templates.
#43	Share on LinkedIn, download as PDF, and verify with QR codes.
#44	</p>
#45
#46	{/* Search form */}
#47	<form onSubmit={handleLookup} className="max-w-lg mx-auto mb-8">
#48	<div className="flex gap-3">
#49	<div className="flex-1 relative">
#50	<Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
#51	<input
#52	type="text"
#53	value={certId}
#54	onChange={(e) => setCertId(e.target.value)}
#55	placeholder="Enter certificate ID to verify..."
#56	className="w-full pl-12 pr-4 py-3.5 rounded-xl bg-gray-700 border border-gray-600 text-white placeholder-gray-400 focus:outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 text-sm"
#57	/>
#58	</div>
#59	<button
#60	type="submit"
#61	className="px-6 py-3.5 bg-emerald-600 hover:bg-emerald-700 text-white font-semibold rounded-xl transition-colors text-sm"
#62	>
#63	Verify
#64	</button>
#65	</div>
#66	</form>
#67
#68	{/* Admin CTA */}
#69	<Link
#70	to="/admin"
#71	className="inline-flex items-center gap-2 px-6 py-3 bg-white/10 hover:bg-white/20 text-white rounded-xl text-sm font-medium transition-colors border border-white/20"
#72	>
#73	<Lock className="w-4 h-4" />
#74	Admin Panel — Generate Certificates
#75	</Link>
#76	</div>
#77	</div>
#78
#79	{/* Generator Features */}
#80	<div className="max-w-5xl mx-auto px-6 py-16">
#81	<h2 className="text-2xl font-bold text-gray-900 text-center mb-3">
#82	Certificate Generator Features
#83	</h2>
#84	<p className="text-center text-gray-500 mb-10 max-w-2xl mx-auto">
#85	Everything you need to create, manage, and distribute professional certificates — all from the admin dashboard.
#86	</p>
#87
#88	<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
#89	{[
#90	{
#91	icon: FilePlus,
#92	title: "Single Issue",
#93	desc: "Generate one certificate at a time with a form. Pick a template, fill in details, and get a shareable verification link instantly.",
#94	color: "emerald",
#95	},
#96	{
#97	icon: Upload,
#98	title: "Bulk CSV Import",
#99	desc: "Upload a CSV with hundreds of recipients. Preview, then batch-issue all certificates in one click with progress tracking.",
#100	color: "blue",
#101	},
#102	{
#103	icon: Palette,
#104	title: "10 Templates",
#105	desc: "Classic Academic, Modern Minimal, Tech Dark, Corporate Blue, Warm Earthy, Vibrant Gradient, Night Sky, Clean Green, Retro Bold, Glass Morphism.",
#106	color: "purple",
#107	},
#108	{
#109	icon: QrCode,
#110	title: "QR Verification",
#111	desc: "Every certificate gets a unique QR code linking to its verification page. Anyone can scan and confirm authenticity.",
#112	color: "orange",
#113	},
#114	{
#115	icon: Linkedin,
#116	title: "LinkedIn Sharing",
#117	desc: "Recipients can add certificates directly to their LinkedIn profile with one click — includes all required fields.",
#118	color: "cyan",
#119	},
#120	{
#121	icon: Download,
#122	title: "PDF Download",
#123	desc: "Download any certificate as a high-quality landscape A4 PDF, perfect for printing or digital archiving.",
#124	color: "indigo",
#125	},
#126	{
#127	icon: List,
#128	title: "Manage & Revoke",
#129	desc: "Searchable table of all issued certificates. Revoke any cert instantly — it shows as REVOKED on the verification page.",
#130	color: "red",
#131	},
#132	{
#133	icon: ShieldCheck,
#134	title: "Tamper-Proof IDs",
#135	desc: "Each certificate gets a unique 10-character nanoid. The ID is baked into the certificate design and verification URL.",
#136	color: "teal",
#137	},
#138	{
#139	icon: Award,
#140	title: "Custom Text",
#141	desc: "Override the default certificate body with custom text for special achievements, honors, or personalized messages.",
#142	color: "yellow",
#143	},
#144	].map(({ icon: Icon, title, desc, color }) => (
#145	<div
#146	key={title}
#147	className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100 hover:shadow-md transition-shadow"
#148	>
#149	<div
#150	className={`w-10 h-10 rounded-xl flex items-center justify-center mb-4 bg-${color}-50`}
#151	>
#152	<Icon className={`w-5 h-5 text-${color}-600`} />
#153	</div>
#154	<h3 className="text-base font-semibold text-gray-900 mb-1.5">
#155	{title}
#156	</h3>
#157	<p className="text-sm text-gray-500 leading-relaxed">{desc}</p>
#158	</div>
#159	))}
#160	</div>
#161	</div>
#162
#163	{/* Verification features */}
#164	<div className="bg-white border-y border-gray-200">
#165	<div className="max-w-5xl mx-auto px-6 py-16">
#166	<h2 className="text-2xl font-bold text-gray-900 text-center mb-3">
#167	Public Verification
#168	</h2>
#169	<p className="text-center text-gray-500 mb-10 max-w-xl mx-auto">
#170	Anyone can verify a certificate — no login required.
#171	</p>
#172	<div className="grid md:grid-cols-3 gap-6">
#173	{[
#174	{
#175	icon: ShieldCheck,
#176	title: "Instant Verification",
#177	desc: "Enter a certificate ID or scan the QR code to instantly verify authenticity and status.",
#178	},
#179	{
#180	icon: FileCheck,
#181	title: "Full Certificate View",
#182	desc: "See the complete certificate design with all details — name, course, dates, and issuing organization.",
#183	},
#184	{
#185	icon: Linkedin,
#186	title: "Share & Download",
#187	desc: "Share the verification link, add to LinkedIn, or download the certificate as a PDF.",
#188	},
#189	].map(({ icon: Icon, title, desc }) => (
#190	<div key={title} className="text-center">
#191	<div className="w-12 h-12 rounded-xl bg-emerald-50 flex items-center justify-center mx-auto mb-4">
#192	<Icon className="w-6 h-6 text-emerald-600" />
#193	</div>
#194	<h3 className="font-semibold text-gray-900 mb-2">{title}</h3>
#195	<p className="text-sm text-gray-500">{desc}</p>
#196	</div>
#197	))}
#198	</div>
#199	</div>
#200	</div>
#201
#202	{/* Footer */}
#203	<div className="border-t border-gray-200 py-8 text-center">
#204	<p className="text-sm text-gray-400">
#205	Powered by Digital Certificate Platform ·{" "}
#206	<Link to="/admin" className="text-emerald-600 hover:text-emerald-700">
#207	Admin Login
#208	</Link>
#209	</p>
#210	</div>
#211	</div>
#212	);
#213	}
#214

z6Mkqhmm/certificates