setName(e.target.value)} className="w-full p-3 border border-gray-300 rounded-lg font-inter text-gray-900 bg-white" /> setRole(e.target.value)} className="w-full p-3 border border-gray-300 rounded-lg font-inter text-gray-900 bg-white" />

setAchievements(e.target.value)}
            rows={4}
            className="w-full p-3 border border-gray-300 rounded-lg font-inter text-gray-900 bg-white"
          />

{error && (
            <p className="text-red-500 font-inter text-sm">{error}</p>
          )}

<button
            onClick={handleGenerate}
            disabled={loading}
            className="w-full md:w-auto px-8 py-3 bg-gray-900 text-white font-inter rounded hover:bg-gray-800 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
          >
            {loading ? 'Generating...' : 'Generate BIO'}
          </button>
        </div>

{generatedBio && (
          <div className="mt-8 p-6 border border-gray-300 rounded-lg">
            <h2 className="text-xl font-inter font-bold text-gray-900 mb-4">
              Your Generated BIO
            </h2>
            <p className="font-inter text-gray-900">
              {generatedBio}
            </p>
          </div>
        )}

<hr className="my-16 border-gray-200" />
<div className="text-center mb-12">
          <h2 className="text-3xl font-bold font-inter text-gray-900 mb-4">
            Try Galaxyz For Free
          </h2>
          
          <p className="text-gray-600 font-inter mb-8">
            Join Thousands Of Professionals Automating Their Social Media Content
          </p>
          
          <a 
            href="https://galaxyz.io/"
            target="_blank"
            rel="noopener noreferrer"
            className="inline-block px-8 py-3 bg-gray-900 text-white font-inter rounded hover:bg-gray-800 transition-colors"
          >
            Get started now
          </a>
        </div>
      </div>
    </div>
  );
}</article></body></html>