From 5ceb6b02a7024275171abbad5db9c7720010ca76 Mon Sep 17 00:00:00 2001
From: adibarra <93070681+adibarra@users.noreply.github.com>
Date: Fri, 20 Mar 2026 01:05:01 -0500
Subject: [PATCH 1/2] consolidate footer star and share into one section

---
 .../src/components/footer/footer-star-cta.tsx | 24 +++++++++----------
 packages/app/src/components/footer/footer.tsx | 19 ++++++++-------
 2 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/packages/app/src/components/footer/footer-star-cta.tsx b/packages/app/src/components/footer/footer-star-cta.tsx
index 797a39c..f0b954b 100644
--- a/packages/app/src/components/footer/footer-star-cta.tsx
+++ b/packages/app/src/components/footer/footer-star-cta.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { Button } from '@/components/ui/button';
 import { track } from '@/lib/analytics';
 import { Star } from 'lucide-react';
 import Link from 'next/link';
@@ -8,33 +9,30 @@ import { useGitHubStars } from '@/hooks/api/use-github-stars';
 
 const GITHUB_REPO_URL = 'https://github.com/SemiAnalysisAI/InferenceX';
 
-export function FooterStarCta() {
+export function FooterStarButton() {
   const { data } = useGitHubStars();
   const stars = data?.stars ?? null;
 
   return (
-    <div
+    <Button
+      variant="outline"
+      size="sm"
+      className="h-7 gap-1.5 text-xs"
+      asChild
       data-testid="footer-star-cta"
-      className="flex flex-col items-center gap-3 mb-6 pb-6 border-b border-border/40"
     >
-      <p className="text-sm text-muted-foreground text-center max-w-md">
-        InferenceX is open source. If this data helps your work, a star on GitHub goes a long way.
-      </p>
       <Link
         href={GITHUB_REPO_URL}
         target="_blank"
         rel="noopener noreferrer"
-        className="group flex items-center gap-2 px-4 py-2 rounded-md border border-gray-300 dark:border-gray-600 hover:border-primary/50 dark:hover:border-primary/50 hover:bg-primary/5 dark:hover:bg-primary/10 transition-all"
         onClick={() => track('footer_star_cta_clicked', { stars: stars ?? 0 })}
       >
-        <Star className="h-4 w-4 text-yellow-500 fill-yellow-500 group-hover:scale-110 transition-transform" />
-        <span className="text-sm font-medium">Star on GitHub</span>
+        <Star className="h-3.5 w-3.5 text-yellow-500 fill-yellow-500" />
+        <span>Star</span>
         {stars !== null && (
-          <span className="text-xs font-semibold text-muted-foreground ml-1">
-            {stars.toLocaleString()}
-          </span>
+          <span className="font-semibold text-muted-foreground">{stars.toLocaleString()}</span>
         )}
       </Link>
-    </div>
+    </Button>
   );
 }
diff --git a/packages/app/src/components/footer/footer.tsx b/packages/app/src/components/footer/footer.tsx
index 7ae44b5..d09746c 100644
--- a/packages/app/src/components/footer/footer.tsx
+++ b/packages/app/src/components/footer/footer.tsx
@@ -4,7 +4,7 @@ import Link from 'next/link';
 import { SocialShareButtons } from '@/components/social-share-buttons';
 import { cn } from '@/lib/utils';
 
-import { FooterStarCta } from './footer-star-cta';
+import { FooterStarButton } from './footer-star-cta';
 
 export const Footer = () => {
   return (
@@ -30,13 +30,16 @@ export const Footer = () => {
       )}
     >
       <div className="container mx-auto py-8 px-4 flex flex-col items-center justify-center">
-        {/* GitHub Star CTA */}
-        <FooterStarCta />
-
-        {/* Social Share */}
-        <div className="flex flex-col items-center gap-2 mb-6 pb-6 border-b border-border/40">
-          <p className="text-xs text-muted-foreground">Share InferenceX with your network</p>
-          <SocialShareButtons compact />
+        {/* Open Source CTA */}
+        <div className="flex flex-col items-center gap-3 mb-6 pb-6 border-b border-border/40">
+          <p className="text-sm text-muted-foreground text-center max-w-md">
+            InferenceX is open source. If this data helps your work, star us or share with your
+            network.
+          </p>
+          <div className="flex items-center gap-1.5">
+            <FooterStarButton />
+            <SocialShareButtons compact />
+          </div>
         </div>
 
         {/* Policy Links */}

From 8e7906155f194328e31c49fd79fca0644f9cb23f Mon Sep 17 00:00:00 2001
From: adibarra <93070681+adibarra@users.noreply.github.com>
Date: Fri, 20 Mar 2026 01:14:34 -0500
Subject: [PATCH 2/2] fix footer e2e tests for asChild button rendering

---
 packages/app/cypress/component/footer.cy.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/app/cypress/component/footer.cy.tsx b/packages/app/cypress/component/footer.cy.tsx
index 449eeb2..15c1baa 100644
--- a/packages/app/cypress/component/footer.cy.tsx
+++ b/packages/app/cypress/component/footer.cy.tsx
@@ -28,13 +28,12 @@ describe('Footer', () => {
   it('shows the GitHub star CTA linking to GitHub repo', () => {
     cy.get('[data-testid="footer-star-cta"]').should('be.visible');
     cy.get('[data-testid="footer-star-cta"]')
-      .find('a')
       .should('have.attr', 'href')
       .and('include', 'github.com/SemiAnalysisAI/InferenceX');
   });
 
   it('footer star CTA opens in new tab', () => {
-    cy.get('[data-testid="footer-star-cta"] a').should('have.attr', 'target', '_blank');
+    cy.get('[data-testid="footer-star-cta"]').should('have.attr', 'target', '_blank');
   });
 
   it('shows social share buttons', () => {