footer redesign and cleanup (#57)

* fix footer bg pattern on long pages, add sticky footer with min-h-screen

* remove redundant min-h-screen from page content components

* add flex-col grow wrapper for sticky footer layout

* center 404 and error page content vertically in grow container

* move star/share buttons above text in footer CTA

* extract ShareTwitterButton, ShareLinkedInButton, StarButton as generic components

* replace SocialShareButtons with individual ShareTwitterButton and ShareLinkedInButton

* polish footer: fix link/button sizing, update copy and URLs

* add top padding to footer

* remove unused public assets, serve OG image locally

* vertically center external link icons in quotes

* more external link icon changes

* footer: add data-testid attrs, update copy, fix grid proportions, update tests

* footer: switch to flex layout, center text on mobile

* disable star glow animation after user clicks star

* header star button: center count, remove GitHub icon

Author: adibarra

packages/app/cypress/component/footer.cy.tsx

@@ -25,48 +25,45 @@ describe('Footer', () => {
     cy.get('[data-testid="footer-copyright"]').should('contain', year);
   });
 
-  it('shows the GitHub star CTA linking to GitHub repo', () => {
+  it('shows the GitHub star CTA', () => {
     cy.get('[data-testid="footer-star-cta"]').should('be.visible');
-    cy.get('[data-testid="footer-star-cta"]')
-      .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"]').should('have.attr', 'target', '_blank');
+    cy.get('[data-testid="footer-star-cta"]').should('contain', 'Star');
   });
 
   it('shows social share buttons', () => {
-    cy.get('[data-testid="social-share-buttons"]').should('be.visible');
+    cy.get('[data-testid="footer-social-buttons"]').should('be.visible');
+    cy.get('[data-testid="footer-social-buttons"]')
+      .find('button')
+      .should('have.length.greaterThan', 1);
   });
 
   it('has Privacy Policy link', () => {
-    cy.get('[data-testid="footer"]')
-      .contains('Privacy Policy')
+    cy.get('[data-testid="footer-link-privacy"]')
       .should('have.attr', 'href')
       .and('include', 'semianalysis.com/privacy-policy');
   });
 
   it('has Cookie Policy link', () => {
-    cy.get('[data-testid="footer"]')
-      .contains('Cookie Policy')
+    cy.get('[data-testid="footer-link-cookies"]')
       .should('have.attr', 'href')
       .and('include', 'semianalysis.com/cookie-policy');
   });
 
-  it('has Contribute link pointing to GitHub', () => {
-    cy.get('[data-testid="footer"]')
-      .contains('Contribute')
+  it('has Contribute section with GitHub links', () => {
+    cy.get('[data-testid="footer-link-benchmarks"]')
       .should('have.attr', 'href')
       .and('include', 'github.com/SemiAnalysisAI/InferenceX');
+    cy.get('[data-testid="footer-link-frontend"]')
+      .should('have.attr', 'href')
+      .and('include', 'github.com/SemiAnalysisAI/InferenceX-app');
   });
 
   it('shows the SemiAnalysis logo', () => {
-    cy.get('[data-testid="footer"]').find('img[alt="SemiAnalysis logo"]').should('exist');
+    cy.get('[data-testid="footer-brand"]').find('img[alt="SemiAnalysis logo"]').should('exist');
   });
 
   it('all external links open in a new tab', () => {
-    cy.get('[data-testid="footer"]')
+    cy.get('[data-testid="footer-links"]')
       .find('a[target="_blank"]')
       .should('have.length.greaterThan', 0);
   });

packages/app/cypress/component/social-share.cy.tsx

@@ -1,42 +1,29 @@
-import { SocialShareButtons } from '@/components/social-share-buttons';
+import { ShareTwitterButton, ShareLinkedInButton } from '@/components/share-buttons';
 
-describe('Social Share Buttons', () => {
-  beforeEach(() => {
-    cy.mount(<SocialShareButtons />);
-  });
-
-  it('social share buttons container is visible', () => {
-    cy.get('[data-testid="social-share-buttons"]').should('be.visible');
-  });
-
-  it('Twitter share button is present and is a button element', () => {
+describe('Share Buttons', () => {
+  it('Twitter share button renders and is a button element', () => {
+    cy.mount(<ShareTwitterButton />);
     cy.get('[data-testid="share-twitter"]').should('exist');
     cy.get('[data-testid="share-twitter"]').should('have.prop', 'tagName', 'BUTTON');
   });
 
-  it('LinkedIn share button is present and is a button element', () => {
-    cy.get('[data-testid="share-linkedin"]').should('exist');
-    cy.get('[data-testid="share-linkedin"]').should('have.prop', 'tagName', 'BUTTON');
-  });
-
   it('Twitter share button has a descriptive title referencing Twitter or X', () => {
+    cy.mount(<ShareTwitterButton />);
     cy.get('[data-testid="share-twitter"]')
       .should('have.attr', 'title')
       .and('match', /Twitter|X/i);
   });
 
+  it('LinkedIn share button renders and is a button element', () => {
+    cy.mount(<ShareLinkedInButton />);
+    cy.get('[data-testid="share-linkedin"]').should('exist');
+    cy.get('[data-testid="share-linkedin"]').should('have.prop', 'tagName', 'BUTTON');
+  });
+
   it('LinkedIn share button has a descriptive title referencing LinkedIn', () => {
+    cy.mount(<ShareLinkedInButton />);
     cy.get('[data-testid="share-linkedin"]')
       .should('have.attr', 'title')
       .and('include', 'LinkedIn');
   });
 });
-
-describe('Social Share Buttons (compact)', () => {
-  it('renders in compact mode', () => {
-    cy.mount(<SocialShareButtons compact />);
-    cy.get('[data-testid="social-share-buttons"]').should('be.visible');
-    cy.get('[data-testid="share-twitter"]').should('exist');
-    cy.get('[data-testid="share-linkedin"]').should('exist');
-  });
-});

packages/app/public/file.svg

@@ -16,7 +16,7 @@ export default function Error({
   }, [error]);
 
   return (
-    <div className="flex flex-col items-center justify-center min-h-screen text-foreground">
+    <div className="flex flex-col items-center justify-center grow text-foreground">
       <h2 className="text-4xl font-bold mb-4">Something went wrong!</h2>
       <p className="text-lg mb-4">An unexpected error has occurred.</p>
       <p className="text-md text-red-500 mb-8">{error.message}</p>

packages/app/public/github.svg

@@ -159,7 +159,7 @@ export default function RootLayout({
         <link rel="preconnect" href={SITE_URL} />
         <link rel="dns-prefetch" href={SITE_URL} />
       </head>
-      <body className={`${dm_sans.variable} antialiased relative`}>
+      <body className={`${dm_sans.variable} antialiased relative min-h-screen flex flex-col`}>
         <PostHogProvider>
           <script
             type="application/ld+json"
@@ -174,7 +174,7 @@ export default function RootLayout({
             >
               <PostHogPageView />
               <Header />
-              {children}
+              <div className="grow flex flex-col">{children}</div>
               <Footer />
             </ThemeProvider>
           </QueryProvider>