Enhance footer component UI#69
Conversation
|
@Priyakatariya is attempting to deploy a commit to the Aman Singh's projects Team on Vercel. A member of the Team first needs to authorize it. |
📋 PR Checklist ReviewThank you for your contribution! Please address the following items: Required Actions❌ Missing Description: Please provide a clear description of your changes SuggestionsPlease edit your PR description to complete all required items. Once done, this check will automatically pass! ✅ Need help? Check out our Contributing Guidelines or ask in the comments! |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Amansingh0807
added
SWoC26
Amansingh0807
left a comment
Amansingh0807
left a comment
There was a problem hiding this comment.
Currently when the Light mode is on the background color is not changing accordingly, Look at the same. Otherwise it looks good.
Remove Clerk configuration from .gitignore
2 participants
solved #20
Description
I have implemented a complete UI/UX overhaul for the footer to bring a more modern, technical, and "Obsidian" aesthetic to GenForm. My goal was to move away from a basic footer to something that feels high-end and premium, matching the AI-driven nature of the project.
What I’ve added:
Micro-interactions: I designed a "status dot" system for the navigation links. On hover, the dot pulses (animate-ping) to give the user immediate, playful feedback.
Signature Badge: Instead of a simple text link, I created a centered glass-morphism signature pill. I used a custom shimmering gradient for the text to make the developer credit feel like a "seal of quality" rather than just a name.
Visual Polish: I added a subtle top-border scanning line and low-opacity emerald glows. This creates depth on dark screens without being distracting.
Refined Grid: I refactored the grid layout to be fully responsive, ensuring the brand identity stays central even on mobile devices.
Related Issue
Resolves ### Type of Change
[x] UI/UX improvement
[x] New feature
Checklist
[x] I have read the CONTRIBUTING.md guidelines
[x] My code follows the style guidelines of this project
[x] I have performed a self-review of my own code
[x] My changes generate no new warnings or errors
AI Disclosure
[x] Did you use AI tools to generate or assist with this code? (Yes)
If yes, please specify:
Which AI tool(s): Gemini
Which parts were AI-assisted: I used AI to help brainstorm the Tailwind configurations for the glassmorphism effects and the CSS keyframes for the shimmering text gradient.
Human Review: I manually refactored the generated JSX to ensure clean component architecture and adjusted the timing of animations to ensure they felt "snappy" rather than sluggish. I took the AI's structural suggestions and gave them a unique personal touch to fit the GenForm vibe.
Screenshots / Videos
After
Integrated the "Obsidian" Dark theme with centered signature badge and animated navigation dots.
Testing
[x] Tested locally using npm run dev
[x] Verified responsiveness across different breakpoints (Mobile, Tablet, Desktop)
[x] Checked color contrast for accessibility in the Dark Mode palette.
Test Configuration:
Node version: 20.x
Browser: Chrome / Edge
OS: Windows
Additional Notes
I used a custom @Keyframes block within a style jsx tag to handle the shimmering gradient on the signature text. This keeps the animation logic contained within the component while allowing for a complex, multi-color shimmer that isn't easily possible with standard Tailwind utility classes.