consolidate footer star and share into one section

Author: adibarra

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>
   );
 }

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 */}