Update app.py

app.py

@@ -92,6 +92,30 @@ CUSTOM_CSS = """
 .sticky-cta .cta-link { font-weight:600; text-decoration: underline; }
 
 
+/* centered, single-label API CTA */
+.api-cta-wrap { text-align:center; margin-top:10px; }
+.api-cta-hero {
+  display:inline-flex; align-items:center; gap:10px;
+  padding:10px 14px; border-radius:14px;
+  background: linear-gradient(90deg,#0ea5e9 0%, #a8a9de 100%);
+  color:#fff; font-weight:800; letter-spacing:0.1px;
+  box-shadow: 0 6px 22px rgba(99,102,241,0.35);
+  border: 1px solid rgba(255,255,255,0.22);
+  text-decoration:none;
+}
+.api-cta-hero:hover { filter:brightness(1.05); transform: translateY(-1px); transition: all .15s ease; }
+
+.api-cta-hero .new {
+  background:#fff; color:#0ea5e9; font-weight:900;
+  padding:2px 8px; border-radius:999px; font-size:12px; line-height:1;
+}
+.api-cta-hero .txt { font-weight:800; }
+.api-cta-hero .chev { opacity:.95; }
+@media (max-width: 520px){
+  .api-cta-hero { padding:9px 12px; gap:8px; font-size:14px; }
+  .api-cta-hero .new { display:none; } /* keep it tidy on phones */
+}
+
 
 /* floating bottom promo */
 .bottom-promo {
@@ -145,6 +169,21 @@ with gr.Blocks(title="Video Face Swap", theme=gr.themes.Soft(), css=CUSTOM_CSS)
         elem_id="hero-md"
     )
 
+    
+    gr.HTML(
+        """
+        <div class="api-cta-wrap">
+          <a class="api-cta-hero"
+             href="https://www.face-swap.co/api?utm_source=hfspace_deepfakevideo&utm_medium=hero_api_new"
+             target="_blank" rel="noopener" aria-label="Face Swap API">
+            <span class="new">NEW</span>
+            <span class="txt">Face Swap API</span>
+            <span class="chev">↗</span>
+          </a>
+        </div>
+        """
+    )
+
 
     with gr.Row():
         with gr.Column(scale=5):