Poster Maker Pro

Poster Maker Pro

import React, { useState, useRef, useEffect, useCallback } from ‘react’; import { Plus, Download, Type, Palette, Image as ImageIcon, CheckCircle, Zap, Shield, Search, MousePointer2, Sparkles, HelpCircle, Layers, Smartphone } from ‘lucide-react’;// — Global SEO-friendly Components —const Navbar = () => ( );const Feature = ({ icon: Icon, title, desc }: any) => (

{title}

{desc}

);// — The Core Tool Component —const PosterTool = () => { const [text1, setText1] = useState(‘THE FUTURE’); const [text2, setText2] = useState(‘Design excellence is just a click away.’); const [font, setFont] = useState(‘Impact’); const [textColor, setTextColor] = useState(‘#ffffff’); const [bgColor, setBgColor] = useState(‘#020617’); const [textSize, setTextSize] = useState(80); const [textPos, setTextPos] = useState({ x: 400, y: 500 }); const [bgImg, setBgImg] = useState(null); const canvasRef = useRef(null);const draw = useCallback(() => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext(‘2d’); if (!ctx) return;ctx.fillStyle = bgColor; ctx.fillRect(0, 0, canvas.width, canvas.height);if (bgImg) { const scale = Math.max(canvas.width / bgImg.width, canvas.height / bgImg.height); const x = (canvas.width / 2) – (bgImg.width / 2) * scale; const y = (canvas.height / 2) – (bgImg.height / 2) * scale; ctx.drawImage(bgImg, x, y, bgImg.width * scale, bgImg.height * scale); ctx.fillStyle = ‘rgba(0,0,0,0.4)’; ctx.fillRect(0, 0, canvas.width, canvas.height); }ctx.fillStyle = textColor; ctx.textAlign = ‘center’; ctx.textBaseline = ‘middle’; ctx.shadowColor = ‘rgba(0,0,0,0.8)’; ctx.shadowBlur = 20; ctx.font = `italic 900 ${textSize}px ${font}, sans-serif`; ctx.fillText(text1.toUpperCase(), textPos.x, textPos.y);ctx.shadowBlur = 10; ctx.font = `500 ${textSize * 0.35}px ‘Plus Jakarta Sans’, sans-serif`; ctx.fillText(text2, textPos.x, textPos.y + (textSize * 0.8)); }, [text1, text2, font, textColor, bgColor, textSize, textPos, bgImg]);useEffect(() => { draw(); }, [draw]);const handleCanvasAction = (e: React.MouseEvent) => { const canvas = canvasRef.current; if (!canvas) return; const rect = canvas.getBoundingClientRect(); const scaleX = canvas.width / rect.width; const scaleY = canvas.height / rect.height; setTextPos({ x: (e.clientX – rect.left) * scaleX, y: (e.clientY – rect.top) * scaleY }); };const handleUpload = (e: React.ChangeEvent) => { const file = e.target.files?.[0]; if (file) { const img = new Image(); img.onload = () => setBgImg(img); img.src = URL.createObjectURL(file); } };return (
{/* Editor UI */}

Design Settings

setText1(e.target.value)} className=”w-full bg-slate-950 border border-white/10 rounded-2xl px-5 py-4 text-sm focus:ring-2 focus:ring-sky-500 outline-none” placeholder=”Main Headline” />