Skip to content

feat(landing): enhance footer with brand, nav links & premium styling (#607)#629

Open
SagarSingh01 wants to merge 1 commit into
Dev-Card:mainfrom
SagarSingh01:ui-modify
Open

feat(landing): enhance footer with brand, nav links & premium styling (#607)#629
SagarSingh01 wants to merge 1 commit into
Dev-Card:mainfrom
SagarSingh01:ui-modify

Conversation

@SagarSingh01

Copy link
Copy Markdown

📋 Description

The existing footer was a single line of plain text with no visual identity or navigation. This PR transforms it into a structured, premium footer that matches the quality of the hero and feature sections — with brand identity, navigation links, and full light/dark mode support.


✨ What's New

  • 🏷️ Brand block — gradient logo icon + tagline below the fold
  • 🔗 Navigation columns — Product and Community link groups
  • Gradient shimmer line — replaces the plain border-top
  • 🌟 Ambient glow — subtle radial glow behind footer content
  • 🌗 Light + Dark mode — fully tuned for both themes
  • 📱 Responsive — stacks cleanly on mobile (≤640px)
  • Accessiblearia-label on footer nav, prefers-reduced-motion respected
  • No breaking changes — all existing class names preserved

Before

DevCard.Developer.Profile.Exchange.-.Google.Chrome.2026-06-21.21-55-53.mp4

After

DevCard.Developer.Profile.Exchange.-.Google.Chrome.2026-06-21.22-08-44.mp4

  Built with ❤️ by the DevCard community · Open Source & Free Forever

🛠️ Files Changed

File Change
src/pages/LandingPage.tsx Footer JSX restructured with brand block, nav columns, bottom bar
src/pages/LandingPage.css Footer styles added — shimmer line, glow, columns, responsive

⚙️ Tech Details

LandingPage.tsx

  • Replaced single <p> with two-zone layout: brand block + nav columns
  • Added <nav aria-label="Footer navigation"> for accessibility
  • Bottom bar with community credit and license note

LandingPage.css

  • ::before — gradient shimmer line (#6366f1 → #a855f7 → transparent)
  • ::after — ambient radial glow at footer bottom
  • .footer-col a:hovertranslateX(2px) slide + color shift
  • :root:not(.dark) overrides for full light mode support
  • Mobile breakpoint at 640px — columns stack, dot separator hides

✅ Testing Checklist

  • Chrome — light + dark mode
  • Firefox — light + dark mode
  • Safari — light + dark mode
  • Mobile 375px — columns stack, dot hides
  • All links verified (GitHub, Issues, PRs, License)
  • No console errors or layout shifts
  • prefers-reduced-motion respected

🎯 Type of Change

  • 🐛 Bug fix
  • ✨ Enhancement (non-breaking improvement)
  • 🚀 New feature
  • 💥 Breaking change
  • 📝 Documentation update

Made with ❤️ for the DevCard community

@vercel

vercel Bot commented Jun 21, 2026

Copy link
Copy Markdown

@SagarSingh01 is attempting to deploy a commit to the Prashantkumar Khatri's projects Team on Vercel.

A member of the Team first needs to authorize it.

@github-actions github-actions Bot added gssoc:approved Required label for every approved PR. Gives the base +50 points and enables contribution tracking. web labels Jun 21, 2026
@github-actions

Copy link
Copy Markdown

Hi @SagarSingh01,

Thanks for opening this pull request.

This PR has been automatically classified based on the files modified.

Applied Labels

  • gssoc:approved
  • web

Primary Review Area

  • web

Reviewer

@ShantKhatri has been identified as the primary reviewer for this pull request.

If you have any questions regarding the affected area or implementation details, feel free to reach out to the assigned reviewer.

Thank you for your contribution!

@github-actions

Copy link
Copy Markdown

CI — All Checks Passed

Backend — SKIP

Check Result
Lint -
Test -
Typecheck -

Mobile — SKIP

Check Result
Lint -
Test -

Web — PASS

Check Result
Build PASS

Last updated: Sun, 21 Jun 2026 16:42:00 GMT

@Harxhit Harxhit requested a review from ShantKhatri June 23, 2026 07:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

gssoc:approved Required label for every approved PR. Gives the base +50 points and enables contribution tracking. web

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant