🏆 CertiCraft – Online Certificate Generator

CertiCraft is a polished, premium online certificate generator inspired by Canva’s editor experience with a luxury gold aesthetic. Design meets simplicity — create beautiful certificates in seconds with live preview, custom styling, and export options.

✨ Overview

CertiCraft allows users to:

Browse and select from premium certificate templates

Upload custom certificate backgrounds

Edit certificate content with live preview

Customize fonts, size, and colors

Export certificates as PDF or JPG

Toggle between Dark & Light Mode

Generate smart certificate text using AI suggestions

The design combines:

Gold Accent (#D4A017)

Deep Charcoal (Dark Mode)

Warm Cream (Light Mode)

# 🎨 Design System

🎨 Color Palette

Primary Gold: #D4A017

Dark Mode Background: Deep Charcoal

Light Mode Background: Warm Cream

🔤 Fonts Used

Playfair Display – Headings & Premium Titles

Inter – UI & Editor Text

Great Vibes – Elegant Script for Names

🚀 V1 Features

🏠 Landing Page

Animated hero section

Feature highlight pills

Template gallery (3 premium templates)

Custom certificate background upload option

✏️ Certificate Editor

Live preview (real-time updates)

Editable fields:

Recipient Name

Course/Event Name

Date

Certificate Type

Font selector

Font size slider

Text color picker (per element)

Certificate type picker

📥 Export Options

Export as PDF (via jsPDF)

Export as JPG (via html2canvas)

🌙 Dark / Light Mode

Toggle in header

Persistent UI experience

Gold-accented theme in both modes

✨ AI Text Suggestions

"AI Suggest" button for smart certificate text

Currently uses local logic

Ready to integrate with Lovable Cloud for real AI-powered suggestions

🛠️ Tech Stack

Frontend: React / TypeScript (or JS depending on your setup)

Styling: Custom CSS / Tailwind (if used)

PDF Export: jsPDF

Image Export: html2canvas

🧠 Future Enhancements (V2 Roadmap)

🔐 User authentication & saved certificates

🖋️ Drag-and-drop text positioning

🏷️ Logo upload & signature upload

🖼️ More premium templates

📱 Mobile responsive editor

☁️ Full Lovable Cloud AI integration

📦 Download history dashboard

🌍 Multi-language support

Fonts: Google Fonts 📂 Project Structure

/src
  /components
    Header
    TemplateGallery
    CertificateEditor
    LivePreview
  /assets
  /utils
  App.tsx

⚙️ Installation

# Clone the repository
git clone https://github.com/your-username/certicraft.git

# Navigate into project
cd certicraft

# Install dependencies
npm install

# Start development server
npm run dev