function MainComponent() { const [step, setStep] = useState("questionnaire"); const [answers, setAnswers] = useState({ companyName: "", description: "", activities: "", values: "", vision: "", business: "" }); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [results, setResults] = useState(null); const [streamingMessage, setStreamingMessage] = useState(""); const [logoLoading, setLogoLoading] = useState(false); const generateLogo = async (brandData)=>{ setLogoLoading(true); try { const prompt = `Create a minimal, professional logo for "${answers.companyName}", a ${answers.business}. Use the brand's color palette (${brandData.colors.primary}, ${brandData.colors.secondary}, ${brandData.colors.accent}). The brand archetype is "${brandData.archetype}" with a personality that is ${brandData.personality_traits.trait1}, ${brandData.personality_traits.trait2}, and ${brandData.personality_traits.trait3}. The logo should reflect the tagline: "${brandData.tagline}". Create a clean, modern design that works well at different sizes. Include the company name "${answers.companyName}" in the logo design.`; const response = await fetch(`/integrations/dall-e-3/?prompt=${encodeURIComponent(prompt)}`); if (!response.ok) { throw new Error("Failed to generate logo"); } const data = await response.json(); setResults((prev)=>({ ...prev, logo: data.data[0] })); } catch (e) { console.error(e); setError({ type: "error", message: "Failed to generate logo" }); } finally{ setLogoLoading(false); } }; const handleStreamResponse = useHandleStreamResponse({ onChunk: setStreamingMessage, onFinish: (message)=>{ try { const parsedResults = JSON.parse(message); setResults(parsedResults); setStep("results"); saveBrandIdentity(parsedResults); generateLogo(parsedResults); } catch (e) { setError({ type: "error", message: "Failed to parse results" }); console.error(e); } } }); const saveBrandIdentity = async (brandData)=>{ try { const response = await fetch("/api/save-brand-identity", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(brandData) }); if (!response.ok) { throw new Error("Failed to save brand identity"); } } catch (e) { console.error(e); setError({ type: "error", message: "Failed to save results" }); } }; const handleSubmit = async ()=>{ setLoading(true); setError(null); try { const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: `Based on these answers, generate a brand identity: Company Name: ${answers.companyName} Description: ${answers.description} Activities: ${answers.activities} Values: ${answers.values} Vision: ${answers.vision}` } ], json_schema: { name: "brand_identity", schema: { type: "object", properties: { archetype: { type: "string" }, colors: { type: "object", properties: { primary: { type: "string" }, secondary: { type: "string" }, accent: { type: "string" } }, required: [ "primary", "secondary", "accent" ], additionalProperties: false }, fonts: { type: "object", properties: { heading: { type: "string" }, body: { type: "string" } }, required: [ "heading", "body" ], additionalProperties: false }, tagline: { type: "string" }, personality_traits: { type: "object", properties: { trait1: { type: "string" }, trait2: { type: "string" }, trait3: { type: "string" } }, required: [ "trait1", "trait2", "trait3" ], additionalProperties: false } }, required: [ "archetype", "colors", "fonts", "tagline", "personality_traits" ], additionalProperties: false } }, stream: true }) }); handleStreamResponse(response); } catch (e) { setError({ type: "error", message: "Failed to generate brand identity" }); console.error(e); } finally{ setLoading(false); } }; const resetForm = ()=>{ setAnswers({ companyName: "", description: "", activities: "", values: "", vision: "", business: "" }); setResults(null); setStep("questionnaire"); setError(null); }; const handlePrint = ()=>{ window.print(); }; useEffect(()=>{ const link = document.createElement("link"); link.rel = "icon"; link.type = "image/png"; link.href = "https://ucarecdn.com/c6bfd317-13b3-4999-9f86-78650be995e9/-/format/auto/"; document.head.appendChild(link); return ()=>{ document.head.removeChild(link); }; }, []); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#121212] p-6 md:p-12 print:bg-white print:p-0", style: { background: `linear-gradient(145deg, #121212, #0a0a0a)` }, __source: { fileName: "", lineNumber: 179, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto bg-[#1a1a1a] rounded-xl shadow-[0_0_15px_rgba(57,255,20,0.3)] p-8 border border-[#39FF14]/20 print:bg-white print:shadow-none print:border-none", __source: { fileName: "", lineNumber: 183, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mb-8", __source: { fileName: "", lineNumber: 184, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://fivestarslogomaker.created.app", className: "px-6 py-3 rounded-lg bg-[#39FF14]/20 text-[#39FF14] font-semibold hover:bg-[#39FF14]/30 transition-all duration-300 border border-[#39FF14]/50 shadow-[0_0_10px_rgba(57,255,20,0.2)] hover:shadow-[0_0_20px_rgba(57,255,20,0.4)]", __source: { fileName: "", lineNumber: 185, columnNumber: 11 }, __self: this }, "More Branding")), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mb-6", __source: { fileName: "", lineNumber: 196, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/d10a1ca6-8f93-4ec7-bf95-aaf4216d2ec4/-/format/auto/", alt: "Five Stars App Solutions Logo", className: "h-24 w-auto", __source: { fileName: "", lineNumber: 197, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-[#39FF14] mb-8 text-center", style: { textShadow: "0 0 10px rgba(57,255,20,0.5)" }, __source: { fileName: "", lineNumber: 203, columnNumber: 9 }, __self: this }, "Brand Identity Generator"), error && /*#__PURE__*/ React.createElement("div", { className: `p-4 rounded-lg mb-6 border ${error?.type === "success" ? "bg-green-900/20 text-green-400 border-green-800" : "bg-red-900/20 text-red-400 border-red-800"}`, __source: { fileName: "", lineNumber: 211, columnNumber: 11 }, __self: this }, error?.message), step === "questionnaire" && /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 223, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "group", __source: { fileName: "", lineNumber: 224, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-semibold mb-2 text-[#39FF14]", __source: { fileName: "", lineNumber: 225, columnNumber: 15 }, __self: this }, "What's your company name?"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "companyName", value: answers.companyName, onChange: (e)=>setAnswers((prev)=>({ ...prev, companyName: e.target.value })), className: "w-full p-3 bg-[#2a2a2a] border border-[#39FF14]/30 rounded-lg text-white focus:border-[#39FF14] focus:ring-1 focus:ring-[#39FF14] focus:outline-none transition-all duration-300 placeholder-gray-500", placeholder: "e.g., Stellar Solutions, Innovate Tech, Harmony Design", __source: { fileName: "", lineNumber: 228, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "group", __source: { fileName: "", lineNumber: 244, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-semibold mb-2 text-[#39FF14]", __source: { fileName: "", lineNumber: 245, columnNumber: 15 }, __self: this }, "What type of business or industry is this brand for?"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "business", value: answers.business, onChange: (e)=>setAnswers((prev)=>({ ...prev, business: e.target.value })), className: "w-full p-3 bg-[#2a2a2a] border border-[#39FF14]/30 rounded-lg text-white focus:border-[#39FF14] focus:ring-1 focus:ring-[#39FF14] focus:outline-none transition-all duration-300 placeholder-gray-500", placeholder: "e.g., Coffee Shop, Tech Startup, Photography Studio", __source: { fileName: "", lineNumber: 248, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "group", __source: { fileName: "", lineNumber: 264, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-semibold mb-2 text-[#39FF14]", __source: { fileName: "", lineNumber: 265, columnNumber: 15 }, __self: this }, "What are three words that describe you best?"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "description", value: answers.description, onChange: (e)=>setAnswers((prev)=>({ ...prev, description: e.target.value })), className: "w-full p-3 bg-[#2a2a2a] border border-[#39FF14]/30 rounded-lg text-white focus:border-[#39FF14] focus:ring-1 focus:ring-[#39FF14] focus:outline-none transition-all duration-300 placeholder-gray-500", placeholder: "e.g., Creative, Determined, Authentic", __source: { fileName: "", lineNumber: 268, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "group", __source: { fileName: "", lineNumber: 284, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-semibold mb-2 text-[#39FF14]", __source: { fileName: "", lineNumber: 285, columnNumber: 15 }, __self: this }, "What's your favorite way to spend time?"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "activities", value: answers.activities, onChange: (e)=>setAnswers((prev)=>({ ...prev, activities: e.target.value })), className: "w-full p-3 bg-[#2a2a2a] border border-[#39FF14]/30 rounded-lg text-white focus:border-[#39FF14] focus:ring-1 focus:ring-[#39FF14] focus:outline-none transition-all duration-300 placeholder-gray-500", placeholder: "e.g., Reading, Traveling, Creating", __source: { fileName: "", lineNumber: 288, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "group", __source: { fileName: "", lineNumber: 304, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-semibold mb-2 text-[#39FF14]", __source: { fileName: "", lineNumber: 305, columnNumber: 15 }, __self: this }, "What values are most important to you?"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "values", value: answers.values, onChange: (e)=>setAnswers((prev)=>({ ...prev, values: e.target.value })), className: "w-full p-3 bg-[#2a2a2a] border border-[#39FF14]/30 rounded-lg text-white focus:border-[#39FF14] focus:ring-1 focus:ring-[#39FF14] focus:outline-none transition-all duration-300 placeholder-gray-500", placeholder: "e.g., Honesty, Innovation, Community", __source: { fileName: "", lineNumber: 308, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "group", __source: { fileName: "", lineNumber: 321, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-semibold mb-2 text-[#39FF14]", __source: { fileName: "", lineNumber: 322, columnNumber: 15 }, __self: this }, "What's your vision for your brand?"), /*#__PURE__*/ React.createElement("textarea", { name: "vision", value: answers.vision, onChange: (e)=>setAnswers((prev)=>({ ...prev, vision: e.target.value })), className: "w-full p-3 bg-[#2a2a2a] border border-[#39FF14]/30 rounded-lg text-white focus:border-[#39FF14] focus:ring-1 focus:ring-[#39FF14] focus:outline-none transition-all duration-300 placeholder-gray-500", rows: "4", placeholder: "Describe your brand's mission and goals...", __source: { fileName: "", lineNumber: 325, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: handleSubmit, disabled: loading, className: "w-full bg-[#39FF14]/20 text-[#39FF14] py-4 rounded-lg hover:bg-[#39FF14]/30 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed border border-[#39FF14]/50 font-semibold shadow-[0_0_10px_rgba(57,255,20,0.2)] hover:shadow-[0_0_20px_rgba(57,255,20,0.4)]", __source: { fileName: "", lineNumber: 338, columnNumber: 13 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("span", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 349, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "animate-spin mr-2", __source: { fileName: "", lineNumber: 350, columnNumber: 19 }, __self: this }, "⟳"), "Generating Your Brand Identity...") : "Generate Brand Identity")), loading && streamingMessage && /*#__PURE__*/ React.createElement("div", { className: "mt-6 p-4 bg-[#2a2a2a] rounded-lg border border-[#39FF14]/30", __source: { fileName: "", lineNumber: 361, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-pulse text-[#39FF14]", __source: { fileName: "", lineNumber: 362, columnNumber: 13 }, __self: this }, "Analyzing responses..."), /*#__PURE__*/ React.createElement("div", { className: "mt-2 text-gray-300", __source: { fileName: "", lineNumber: 365, columnNumber: 13 }, __self: this }, streamingMessage)), step === "results" && results && /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 370, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-end mb-4 print:hidden", __source: { fileName: "", lineNumber: 371, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handlePrint, className: "bg-[#39FF14]/20 text-[#39FF14] px-6 py-2 rounded-lg hover:bg-[#39FF14]/30 transition-all duration-300 border border-[#39FF14]/50 font-semibold shadow-[0_0_10px_rgba(57,255,20,0.2)] hover:shadow-[0_0_20px_rgba(57,255,20,0.4)]", __source: { fileName: "", lineNumber: 372, columnNumber: 15 }, __self: this }, "Print Results")), /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 383, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#2a2a2a] p-6 rounded-lg border border-[#39FF14]/30 hover:border-[#39FF14]/50 transition-all duration-300 print:bg-white print:border-gray-200", __source: { fileName: "", lineNumber: 384, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4 text-[#39FF14] print:text-black", __source: { fileName: "", lineNumber: 385, columnNumber: 17 }, __self: this }, "Your Brand Archetype"), /*#__PURE__*/ React.createElement("p", { className: "text-lg text-gray-300 print:text-black", __source: { fileName: "", lineNumber: 388, columnNumber: 17 }, __self: this }, results.archetype)), /*#__PURE__*/ React.createElement("div", { className: "bg-[#2a2a2a] p-6 rounded-lg border border-[#39FF14]/30 print:bg-white print:border-gray-200", __source: { fileName: "", lineNumber: 393, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4 text-[#39FF14] print:text-black", __source: { fileName: "", lineNumber: 394, columnNumber: 17 }, __self: this }, "Color Palette"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 397, columnNumber: 17 }, __self: this }, Object.entries(results.colors).map(([key, color])=>/*#__PURE__*/ React.createElement("div", { key: key, className: "rounded-lg p-4 aspect-square flex flex-col justify-center items-center transition-transform duration-300 hover:scale-105", style: { backgroundColor: color }, __source: { fileName: "", lineNumber: 399, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-white text-center font-medium capitalize print:text-black", __source: { fileName: "", lineNumber: 405, columnNumber: 23 }, __self: this }, key), /*#__PURE__*/ React.createElement("p", { className: "text-white/70 text-sm mt-2 print:text-black", __source: { fileName: "", lineNumber: 408, columnNumber: 23 }, __self: this }, color))))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#2a2a2a] p-6 rounded-lg border border-[#39FF14]/30 print:bg-white print:border-gray-200", __source: { fileName: "", lineNumber: 416, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4 text-[#39FF14] print:text-black", __source: { fileName: "", lineNumber: 417, columnNumber: 17 }, __self: this }, "Font Recommendations"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 420, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-[#1a1a1a] rounded-lg print:bg-white", __source: { fileName: "", lineNumber: 421, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: `text-xl text-gray-300 font-${results.fonts.heading} print:text-black`, __source: { fileName: "", lineNumber: 422, columnNumber: 21 }, __self: this }, "Heading Font: ", results.fonts.heading)), /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-[#1a1a1a] rounded-lg print:bg-white", __source: { fileName: "", lineNumber: 428, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: `text-lg text-gray-300 font-${results.fonts.body} print:text-black`, __source: { fileName: "", lineNumber: 429, columnNumber: 21 }, __self: this }, "Body Font: ", results.fonts.body)))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#2a2a2a] p-6 rounded-lg border border-[#39FF14]/30 print:bg-white print:border-gray-200", __source: { fileName: "", lineNumber: 438, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4 text-[#39FF14] print:text-black", __source: { fileName: "", lineNumber: 439, columnNumber: 17 }, __self: this }, "Tagline"), /*#__PURE__*/ React.createElement("p", { className: "text-xl italic text-gray-300 print:text-black", __source: { fileName: "", lineNumber: 442, columnNumber: 17 }, __self: this }, results.tagline)), /*#__PURE__*/ React.createElement("div", { className: "bg-[#2a2a2a] p-6 rounded-lg border border-[#39FF14]/30 print:bg-white print:border-gray-200", __source: { fileName: "", lineNumber: 447, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4 text-[#39FF14] print:text-black", __source: { fileName: "", lineNumber: 448, columnNumber: 17 }, __self: this }, "Brand Personality"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-3", __source: { fileName: "", lineNumber: 451, columnNumber: 17 }, __self: this }, Object.values(results.personality_traits).map((trait, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "flex items-center text-gray-300 print:text-black", __source: { fileName: "", lineNumber: 454, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#39FF14] mr-2 print:text-black", __source: { fileName: "", lineNumber: 458, columnNumber: 25 }, __self: this }, "•"), trait)))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#2a2a2a] p-6 rounded-lg border border-[#39FF14]/30 print:bg-white print:border-gray-200", __source: { fileName: "", lineNumber: 468, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold text-[#39FF14] print:text-black", __source: { fileName: "", lineNumber: 469, columnNumber: 17 }, __self: this }, "Logo"), logoLoading ? /*#__PURE__*/ React.createElement("div", { className: "text-center text-[#39FF14] print:text-black", __source: { fileName: "", lineNumber: 473, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-pulse", __source: { fileName: "", lineNumber: 474, columnNumber: 21 }, __self: this }, "Generating your logo...")) : results.logo ? /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 477, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: results.logo, alt: "Generated Brand Logo", className: "max-w-md rounded-lg shadow-lg border border-[#39FF14]/30 print:border-gray-200", __source: { fileName: "", lineNumber: 478, columnNumber: 21 }, __self: this })) : null), /*#__PURE__*/ React.createElement("button", { onClick: resetForm, className: "w-full bg-[#2a2a2a] text-[#39FF14] py-4 rounded-lg hover:bg-[#39FF14]/20 transition-all duration-300 border border-[#39FF14]/50 font-semibold shadow-[0_0_10px_rgba(57,255,20,0.2)] hover:shadow-[0_0_20px_rgba(57,255,20,0.4)] print:hidden", __source: { fileName: "", lineNumber: 487, columnNumber: 15 }, __self: this }, "Start Over")))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 502, columnNumber: 7 }, __self: this }, ` @media print { body { background: white !important; color: black !important; } .print\\:hidden { display: none !important; } img { max-width: 100% !important; page-break-inside: avoid; } h1, h2, h3, p { color: black !important; text-shadow: none !important; } * { -webkit-print-color-adjust: exact !important; color-adjust: exact !important; } .bg-\\[\\#2a2a2a\\] { background-color: white !important; border: 1px solid #e5e5e5 !important; } .text-gray-300 { color: black !important; } } `)); }