Skip to content

docs/feat: modernize footer and stats UI with glassmorphism and animations - #116

Open
Prince-Hans-890 wants to merge 2 commits into
Sahilll94:mainfrom
Prince-Hans-890:update-ui-components
Open

docs/feat: modernize footer and stats UI with glassmorphism and animations#116
Prince-Hans-890 wants to merge 2 commits into
Sahilll94:mainfrom
Prince-Hans-890:update-ui-components

Conversation

@Prince-Hans-890

Copy link
Copy Markdown

Pull Request Description

Summary

Modernized the Footer and Stats sections using Framer Motion and Tailwind CSS to improve visual appeal and fix alignment issues.

Type of Change
[x] UI/UX improvement

Motivation and Context
The current Footer had misaligned links in the "Quick Links" section, and the "Numbers tell our story" section was static. These changes provide a more interactive and premium feel for users.

Changes Made
Footer: Implemented a glassmorphism aesthetic using backdrop-blur-xl and bg-white/80.

Alignment: Fixed flexbox spacing for "Contribution Guide" and "Quick Links" to ensure text is perfectly aligned with icons.

Stats Section: Added scroll-triggered animations using Framer Motion so counters pop in when scrolled into view.

Authentication: Reverted temporary firebase.js modifications to restore the original production config.

Screenshots
Before: (Static and misaligned links)

After: (Animated counters and glassmorphism UI)

Testing
[x] I have tested these changes locally

[x] I have tested the changes on different screen sizes (for UI changes)

[x] I have tested in both light and dark mode (for UI changes)

Deployment
[x] These changes require no deployment steps

Contributor Checklist
[x] I have read and followed the Contributing Guidelines

[x] I have assigned appropriate labels to this PR

[x] I am ready to apply for contributor recognition after this PR is merged

@vercel

vercel Bot commented Jan 27, 2026

Copy link
Copy Markdown

Someone is attempting to deploy a commit to the Sahil's projects Team on Vercel.

A member of the Team first needs to authorize it.

@gemini-code-assist

Copy link
Copy Markdown
Contributor

Summary of Changes

Hello @Prince-Hans-890, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly enhances the user interface and experience by modernizing the application's footer and statistics display. It introduces contemporary design elements like glassmorphism and dynamic animations, while also refining content organization and fixing previous alignment issues. Concurrently, it streamlines the backend configuration by reverting temporary changes to the Firebase setup, ensuring a cleaner and more stable authentication environment.

Highlights

  • Modernized UI with Glassmorphism and Animations: The footer and stats sections have been visually revamped using glassmorphism effects and scroll-triggered animations with Framer Motion and Tailwind CSS.
  • Enhanced Footer Layout and Content: The footer now features a new, more organized layout, updated quick links, revised community and legal sections, and new social media icons, improving both aesthetics and usability.
  • Dynamic Stats Section: The "Numbers tell our story" section now includes engaging scroll-triggered animations for its counters, making the data presentation more interactive.
  • Firebase Configuration Reversion: Temporary authentication modifications in firebase.js have been reverted, restoring the file to its original production configuration and simplifying the Firebase setup.
  • Dependency Metadata Cleanup: The package-lock.json file has been updated to remove redundant 'peer: true' flags from several dependency entries.
Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request introduces a significant UI/UX overhaul, primarily focusing on the application's footer and stats components. The ContributorsFooter.jsx and Footer.jsx files have been extensively refactored to feature modern styling, improved layouts, updated navigation links (including a new 'Legal' section), and expanded social media integration. The Stats.jsx component also received a complete visual redesign with enhanced animations and card-based presentation. Concurrently, the firebase.js utility file underwent a major simplification, removing numerous authentication-related functions and providers, and now only exports the auth instance. Dependency management was also addressed with the removal of peer: true declarations in package-lock.json for various packages, and an example environment file was deleted. A review comment specifically points out that the Home.jsx page's Navbar import was changed to ContributorsNavbar, raising a concern that this might be an unintended change if a more general navigation bar is expected on the home page.

Comment thread src/pages/home/Home.jsx
@@ -1,5 +1,5 @@
import React, { useState, useEffect, useRef, lazy, Suspense } from 'react';
import Navbar from '../../components/Navbar';
import Navbar from '../../components/Navbar/ContributorsNavbar';

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The Navbar import for the Home page was changed from the general Navbar component to ContributorsNavbar. While ContributorsNavbar is part of the UI modernization, it might be intended specifically for the contributors page. If the Home page should use a more general navigation bar, this change might be incorrect and could lead to unexpected UI or functionality on the main landing page.

Suggested change
import Navbar from '../../components/Navbar/ContributorsNavbar';
import Navbar from '../../components/Navbar';

@Prince-Hans-890

Copy link
Copy Markdown
Author

Hi @Sahilll94 , I've seen the bot's note regarding the Navbar change in Home.jsx. This was an intentional choice as part of the "modernization" goal of this PR. I wanted to bring the updated glassmorphism style of the ContributorsNavbar to the main landing page for a more cohesive UI across the site.

If you'd prefer to keep the original Navbar on the Home page, let me know and I'll revert that specific line immediately! Otherwise, I've resolved the conversation to clear the merge block.

@vercel

vercel Bot commented Jan 29, 2026

Copy link
Copy Markdown

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

Project Deployment Review Updated (UTC)
travel-book Error Error Jan 29, 2026 9:01am

@Sahilll94

Copy link
Copy Markdown
Owner

Hi @Prince-Hans-890, I tried to make the build of your changes but it failed:

14:30:44.698 Running build in Washington, D.C., USA (East) – iad1
14:30:44.698 Build machine configuration: 2 cores, 8 GB
14:30:44.827 Cloning github.com/Sahilll94/Travel-Book (Branch: update-ui-components, Commit: e614d54)
14:30:47.159 Cloning completed: 2.332s
14:30:47.418 Restored build cache from previous deployment (GxLpUShPVy5iahLq9dkEJ2xi8yu6)
14:30:47.680 Running "vercel build"
14:30:48.635 Vercel CLI 50.5.2
14:30:49.158 Installing dependencies...
14:30:51.786 
14:30:51.787 added 4 packages, removed 21 packages, and changed 7 packages in 2s
14:30:51.787 
14:30:51.788 242 packages are looking for funding
14:30:51.788   run `npm fund` for details
14:30:51.822 Running "npm run build"
14:30:51.928 
14:30:51.929 > travel-book@0.0.0 build
14:30:51.929 > vite build
14:30:51.929 
14:30:52.253 �[36mvite v6.4.1 �[32mbuilding for production...�[36m�[39m
14:30:52.697 transforming...
14:30:59.580 �[32m✓�[39m 1987 modules transformed.
14:31:02.860 
14:31:02.861 PWA v1.0.0
14:31:02.861 mode      generateSW
14:31:02.861 precache  2 entries (0.00 KiB)
14:31:02.861 files generated
14:31:02.862   dist/sw.js
14:31:02.862   dist/workbox-c232e17c.js
14:31:02.862 warnings
14:31:02.863   One of the glob patterns doesn't match any files. Please remove or fix the following: {
14:31:02.863   "globDirectory": "/vercel/path0/dist",
14:31:02.863   "globPattern": "**/*.{js,css,html,ico,png,svg,jpg,jpeg,gif,webp,woff,woff2,ttf,eot}",
14:31:02.863   "globIgnores": [
14:31:02.863     "**/node_modules/**/*",
14:31:02.863     "sw.js",
14:31:02.864     "workbox-*.js"
14:31:02.864   ]
14:31:02.864 }
14:31:02.864 
14:31:02.869 �[31m✗�[39m Build failed in 10.59s
14:31:02.871 �[31merror during build:
14:31:02.871 �[31m[vite-plugin-pwa:build] There was an error during the build:
14:31:02.871   src/utils/AuthContext.jsx (5:37): "signOutUser" is not exported by "src/utils/firebase.js", imported by "src/utils/AuthContext.jsx".
14:31:02.872 Additionally, handling the error in the 'buildEnd' hook caused the following error:
14:31:02.872   src/utils/AuthContext.jsx (5:37): "signOutUser" is not exported by "src/utils/firebase.js", imported by "src/utils/AuthContext.jsx".�[31m
14:31:02.872 file: �[36m/vercel/path0/src/utils/AuthContext.jsx:5:37�[31m
14:31:02.872 �[33m
14:31:02.872 3: import axiosInstance from './axiosInstance';
14:31:02.873 4: import { toast } from 'sonner';
14:31:02.873 5: import { onAuthStateChangedListener, signOutUser } from './firebase';
14:31:02.873                                         ^
14:31:02.873 6: 
14:31:02.873 7: const AuthContext = createContext(null);
14:31:02.874 �[31m
14:31:02.874     at getRollupError (file:///vercel/path0/node_modules/rollup/dist/es/shared/parseAst.js:397:41)
14:31:02.874     at file:///vercel/path0/node_modules/rollup/dist/es/shared/node-entry.js:23081:39
14:31:02.874     at async catchUnfinishedHookActions (file:///vercel/path0/node_modules/rollup/dist/es/shared/node-entry.js:22545:16)
14:31:02.874     at async rollupInternal (file:///vercel/path0/node_modules/rollup/dist/es/shared/node-entry.js:23064:5)
14:31:02.875     at async buildEnvironment (file:///vercel/path0/node_modules/vite/dist/node/chunks/dep-D4NMHUTW.js:46235:14)
14:31:02.875     at async Object.defaultBuildApp [as buildApp] (file:///vercel/path0/node_modules/vite/dist/node/chunks/dep-D4NMHUTW.js:46713:5)
14:31:02.875     at async CAC.<anonymous> (file:///vercel/path0/node_modules/vite/dist/node/cli.js:863:7)�[39m
14:31:02.915 Error: Command "npm run build" exited with 1

I would recommend you to run npm run build in the frontend directory and check for the issue. Once the issue is resolved then please update the PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants