make linkedin button clearer

app.py

@@ -55,7 +55,16 @@ def on_user_logged_in(token: gr.OAuthToken | None):
             0,  # question_idx
             [],  # user_answers
             gr.update(visible=False),  # certificate_img
-            gr.update(visible=False),  # linkedin_btn
+            gr.update(
+                visible=True,
+                value="""
+                <div style="text-align: center; padding: 20px; border: 2px dashed #ccc; border-radius: 10px; margin-top: 20px;">
+                    <h3>🎯 Complete the Quiz to Unlock</h3>
+                    <p>Once you finish the quiz and pass, you'll be able to add your certificate directly to your LinkedIn profile!</p>
+                    <img src="linkedin_logo.png" alt="LinkedIn Add to Profile" style="width: 200px; height: 53px; opacity: 0.5;">
+                </div>
+            """,
+            ),  # linkedin_btn - now visible with explanatory text
             token,  # user_token
         ]
     else:
@@ -70,7 +79,15 @@ def on_user_logged_in(token: gr.OAuthToken | None):
             0,  # question_idx
             [],  # user_answers
             gr.update(visible=False),  # certificate_img
-            gr.update(visible=False),  # linkedin_btn
+            gr.update(
+                visible=True,
+                value="""
+                <div style="text-align: center; padding: 20px; border: 2px dashed #ccc; border-radius: 10px; margin-top: 20px;">
+                    <h3>🔒 Login Required</h3>
+                    <p>Please log in with your Hugging Face account to access the quiz and earn your LinkedIn certificate!</p>
+                </div>
+            """,
+            ),  # linkedin_btn - visible with login prompt
             None,  # user_token
         ]
 
@@ -125,8 +142,8 @@ def create_linkedin_button(username: str, cert_url: str | None) -> str:
 
     message = f"""
         <a href="{button_url}" target="_blank" style="display: block; margin-top: 20px; text-align: center;">
-            <img src="https://download.linkedin.com/desktop/add2profile/buttons/en_US.png" 
-                 alt="LinkedIn Add to Profile button">
+            <img src="linkedin_logo.png" 
+                 alt="LinkedIn Add to Profile button" style="width: 300px; height: 80px;">
         </a>
     """
     return message
@@ -357,7 +374,15 @@ with gr.Blocks() as demo:
     with gr.Row(variant="compact"):
         status_text = gr.Markdown("")
         certificate_img = gr.Image(type="pil", visible=False)
-        linkedin_btn = gr.HTML(visible=False)
+        linkedin_btn = gr.HTML(
+            visible=True,
+            value="""
+            <div style="text-align: center; padding: 20px; border: 2px dashed #ccc; border-radius: 10px; margin-top: 20px;">
+                <h3>🔒 Login Required</h3>
+                <p>Please log in with your Hugging Face account to access the quiz and earn your LinkedIn certificate!</p>
+            </div>
+        """,
+        )
 
     with gr.Row(variant="compact"):
         login_btn = gr.LoginButton(visible=True)