Improved the UI of the footer section of the website

[Shayan-Bhowmik]

Description

Fixes #1495

UI/UX improvements to the site footer based on screenshot feedback: increased spacing between links, made column titles more prominent, standardized badge sizing, increased newsletter input / CTA touch targets, added extra padding between stats and footer links, and ensured the newsletter box displays full-width and last on mobile.

---

Type of Change

• UI/UX improvement (design, layout, or styling updates)
• New feature (e.g., new page, component, or functionality)
• Bug fix (non-breaking change that fixes an issue)
• Performance optimization (e.g., code splitting, caching)
• Documentation update (README, contribution guidelines, etc.)
• Other (please specify):

---

Changes Made

• CSS updates to the footer to improve layout and touch targets:

  • Updated src/theme/Footer/Layout/enhanced-footer.css:

    • Increased vertical spacing between items in .footer-links and added increased margin on .footer-link.

    • Emphasized column headings via .footer-column-title using:

      • larger font-size
      • increased font-weight
      • subtle text-shadow

    • Standardized badge sizing via .link-badge:

      • fixed height
      • inline-flex
      • consistent horizontal padding

    • Increased .newsletter-input and .newsletter-button padding and added responsive rules to make them full-width on small screens.

    • Added extra vertical padding to .footer-links-section and additional margin-bottom to .footer-stats for improved separation between sections.

    • Added responsive ordering fallback for .newsletter-column to ensure it appears last on stacked/mobile layouts.

• No structural changes to JSX/TSX were required; src/theme/Footer/Layout/index.tsx already places the newsletter column last.

---

Dependencies

• None — no new packages added or version changes required.

---

How to Test / Verify

1. Install dependencies and start the development server

npm install
npm run start

Open the development site (usually http://localhost:3000).

---

2. Verify Desktop Layout

Check the following:

• Links in each footer column have increased spacing and feel less cramped.
• Column titles (Learning, Company, Support, Stay in the Loop) appear slightly larger and more visually prominent.
• Badges (Popular, New, Hot, We're Hiring!) have consistent height and alignment.
• The divider between the stats section and footer links has improved vertical spacing.
• Newsletter input and CTA button have improved padding and touch target sizing.

---

3. Verify Mobile Layout

Using browser DevTools responsive mode or a real device:

• Footer columns stack vertically.
• Newsletter section appears last.
• Newsletter section expands to full width.
• Email input and Subscribe button are easy to tap with increased padding/full-width layout.
• No overlapping elements or broken wrapping occurs.

---

4. Optional Production Verification

npm run build

Ensure the production build completes successfully without warnings or errors.

---

Checklist

• My code follows the style guidelines of this project.
• I have tested my changes across major browsers and devices.
• My changes do not generate new console warnings or errors.
• I ran npm run build and attached screenshot(s) in this PR.
• This issue is already assigned to me and is not unassigned.

[vercel]

@Shayan-Bhowmik is attempting to deploy a commit to the recode Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. The estimated time for response is 5–8 hrs.

In the meantime, please provide all necessary screenshots and make sure you run - npm build run , command and provide a screenshot, a video recording, or an image of the update you made below, which helps speed up the review and assignment. If you have questions, reach out to LinkedIn. Your contributions are highly appreciated!😊

Note: I maintain the repo issue every day twice at 8:00 AM IST and 9:00 PM IST. If your PR goes stale for more than one day, you can tag and comment on this same issue by tagging @sanjay-kv.

We are here to help you on this journey of open source. Consistent 20 contributions are eligible for sponsorship 💰

🎁 check our list of amazing people we sponsored so far: GitHub Sponsorship. ✨

📚Your perks for contribution to this community 👇🏻

1. Get free Consultation use code recode50 to get free: Mentorship for free.

2. Get the Ebook for free use code recode at checkout: Data Science cheatsheet for Beginners.

3. Check out this weekly Newsletter: Sanjay's Newsletter.

If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊

[Copilot]

Pull request overview

This PR aims to polish the site footer's visual design by tweaking spacing, badge sizing, column-title prominence, and newsletter input/button touch targets in src/theme/Footer/Layout/enhanced-footer.css. However, in addition to the intended CSS tweaks, the file appears to have been run through a CSS formatter that flattened multi-line linear-gradient(...) and radial-gradient(...) calls and inserted blank lines inside @keyframes, and—more importantly—the diff has dropped closing braces around the responsive media-queries section, causing a large region of the stylesheet to become invalidly nested. The PR also includes unrelated package-lock.json churn that contradicts the PR description.

Changes:

• Footer styling tweaks: larger column titles with text-shadow, bigger badge/input/button paddings, increased link/section spacing, and full-width newsletter on mobile.
• File-wide reformatting of multi-line linear-gradient/radial-gradient calls and added blank lines inside keyframes.
• Unrelated package-lock.json modifications (peer flags added/removed, two sub-entries deleted).

Reviewed changes

Copilot reviewed 1 out of 2 changed files in this pull request and generated 1 comment.

File	Description
src/theme/Footer/Layout/enhanced-footer.css	Footer spacing/sizing improvements plus reformatting; introduces broken brace nesting in the responsive section.
package-lock.json	Unrelated lockfile churn that conflicts with the PR description.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
recode-website	Error		May 15, 2026 0:37am

[sanjay-kv]

10:37:25.993 Running build in Washington, D.C., USA (East) – iad1
10:37:25.994 Build machine configuration: 4 cores, 8 GB
10:37:26.104 Cloning github.com/recodehive/recode-website (Branch: UI-Improvisation, Commit: ff4bd13)
10:37:31.656 Cloning completed: 5.551s
10:37:32.025 Restored build cache from previous deployment (HtmEJDKw4F4S2Yey9sSHZL4F594k)
10:37:32.229 Running "vercel build"
10:37:32.245 Vercel CLI 53.3.2
10:37:33.063 Warning: Due to "engines": { "node": ">=18.0" } in your `package.json` file, the Node.js Version defined in your Project Settings ("22.x") will not apply, Node.js Version "24.x" will be used instead. Learn More: https://vercel.link/node-version
10:37:33.063 Warning: Detected "engines": { "node": ">=18.0" } in your `package.json` that will automatically upgrade when a new major Node.js Version is released. Learn More: https://vercel.link/node-version
10:37:33.083 Installing dependencies...
10:37:36.012 
10:37:36.013 > recodehive@0.0.0 prepare
10:37:36.013 > husky
10:37:36.013 
10:37:36.070 
10:37:36.070 up to date in 3s
10:37:36.071 
10:37:36.071 560 packages are looking for funding
10:37:36.071   run `npm fund` for details
10:37:36.112 Running "npm run build"
10:37:36.207 
10:37:36.208 > recodehive@0.0.0 build
10:37:36.208 > docusaurus build
10:37:36.208 
10:37:37.423 ◇ injected env (0) from .env // tip: ⌘ suppress logs { quiet: true }
10:37:37.440 [INFO] [en] Creating an optimized production build...
10:37:37.448 ◇ injected env (0) from .env // tip: ◈ encrypted .env [www.dotenvx.com]
10:37:38.597 [info] [webpackbar] Compiling Client
10:37:38.617 [info] [webpackbar] Compiling Server
10:37:47.074 [success] [webpackbar] Server: Compiled successfully in 8.46s
10:37:57.801 [success] [webpackbar] Client: Compiled with some errors in 19.20s
10:37:57.806 [ERROR] Client bundle compiled with errors therefore further build is impossible.
10:37:57.806 Syntax error: /vercel/path0/src/theme/Footer/Layout/enhanced-footer.css Unclosed block (1666:1)
10:37:57.806 
10:37:57.806   1664 | 
10:37:57.806   1665 | /* Responsive Design */
10:37:57.807 > 1666 | @media (max-width: 1200px) {
10:37:57.807        | ^
10:37:57.807   1667 |   .footer-links-grid {
10:37:57.807   1668 |     grid-template-columns: repeat(2, 1fr);
10:37:57.807 
10:37:57.807 --------------------------
10:37:57.807 
10:37:57.807 Syntax error: /vercel/path0/src/theme/Footer/Layout/enhanced-footer.css Unclosed block (1666:1)
10:37:57.807 
10:37:57.807   1664 | 
10:37:57.807   1665 | /* Responsive Design */
10:37:57.807 > 1666 | @media (max-width: 1200px) {
10:37:57.808        | ^
10:37:57.808   1667 |   .footer-links-grid {
10:37:57.808   1668 |     grid-template-columns: repeat(2, 1fr);
10:37:57.808 -- inner error --
10:37:57.808 
10:37:57.808 Syntax error: /vercel/path0/src/theme/Footer/Layout/enhanced-footer.css Unclosed block (1666:1)
10:37:57.808 
10:37:57.808   1664 | 
10:37:57.808   1665 | /* Responsive Design */
10:37:57.808 > 1666 | @media (max-width: 1200px) {
10:37:57.808        | ^
10:37:57.808   1667 |   .footer-links-grid {
10:37:57.808   1668 |     grid-template-columns: repeat(2, 1fr);
10:37:57.808 Generated code for /vercel/path0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[7].use[1]!/vercel/path0/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[7].use[2]!/vercel/path0/src/theme/Footer/Layout/enhanced-footer.css
10:37:57.927 Error: Command "npm run build" exited with 1

[Adez017]

@Shayan-Bhowmik , can you into this build error , suggesting unclose brackets and something .

[Shayan-Bhowmik]

@Adez017 yes looking into it