Repository navigation
refactor(site): extract footer into standalone global component - #62
Conversation
Move the footer markup out of the Contact section in components/site/Close.tsx
into a new components/site/Footer.tsx, rendered globally from app/layout.tsx
after {children}. Future routes inherit the footer without per-page imports;
<footer> is now a sibling of <main> rather than nested inside a section.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Deploying website with
|
| Latest commit: |
99dd07c
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://01706c01.website-70y.pages.dev |
| Branch Preview URL: | https://refactor-global-footer.website-70y.pages.dev |
There was a problem hiding this comment.
Pull request overview
This PR refactors the marketing site layout by extracting the homepage footer markup into a dedicated Footer component and rendering it globally from the root Next.js layout so future routes inherit it automatically.
Changes:
- Added
components/site/Footer.tsxto encapsulate footer markup/styling. - Removed the inline footer block from
components/site/Close.tsx. - Rendered
<Footer />globally fromapp/layout.tsxafter{children}(as a sibling of<main>on pages that render<main>). - Enabled the
typescript-lspClaude plugin in.claude/settings.json.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| components/site/Footer.tsx | New standalone footer component containing the extracted footer markup. |
| components/site/Close.tsx | Removes the previously inlined footer markup from the Contact/Close section. |
| app/layout.tsx | Imports and renders <Footer /> globally after {children}. |
| .claude/settings.json | Adds typescript-lsp@claude-plugins-official plugin enablement. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request refactors the footer by extracting it from the Close component into a dedicated Footer component and integrating it into the global RootLayout. Additionally, the TypeScript LSP plugin is enabled in the project settings. The review feedback suggests adding mt-auto to the Footer component's classes to ensure it remains anchored to the bottom of the page when content is sparse, maintaining the previous layout behavior.
Resolve duplicate footer extraction by deferring to main's components/site/Footer.tsx (landed in #62) and dropping the redundant SiteFooter.tsx introduced on this branch. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Summary
components/site/Close.tsxinto a newcomponents/site/Footer.tsx.<Footer />globally fromapp/layout.tsxafter{children}, alongside the already-global<Chrome />and<ScrollReveal />.<footer>is now a sibling of<main>(page-levelcontentinfolandmark) instead of nested inside a<section>inside<main>.Forward-looking: future routes (e.g.
/docs,/pricing) inherit the footer without per-page imports.Test plan
pnpm lint— cleanpnpm build— static export toout/succeeds, all 10 routes prerendered/renders the 3-column copyright row identically (paper background, rule line,@md:grid-cols-3breakpoint)@mdis 1 column, >=@mdis 3 columns with centered middle + right-aligned right🤖 Generated with Claude Code