Added a About Us Page: Glassmorphism UI, Sticky Header, & Modern Icons

[Mahantesh-Madalgi]

Description

This PR significantly overhauls the "About Us" page to align with a modern, premium design aesthetic, improving both layout structure and visual interactivity. It introduces a glassy frosted UI, updates typography/icons, and ensures the 3D cube scales appropriately when the page is active.

** Key Changes & Features:**

• Glassmorphism UI: Implemented backdrop-filter: blur(40px) and semi-transparent rgba backgrounds across content cards and table cells for the glass effect.
• Sticky Navigation Header: The "About Us" main heading is now position: sticky, ensuring it remains visible while the user scrolls through the page content.
• Modern Iconography: Integrated high-quality, inverted SVG icons from the Lucide library (Timer, 3D Box, Medal).
• Responsive 3D Cube Scaling: Updated the main App.jsx state so the 3D Cube shrinks to a 0.8 scale when navigating to the About page, keeping the UI clean while maintaining the core visual asset. Also, the cube disappears when the about us page is opened on mobile so that the about us readable.
• Interactive Feedback: Added robust hover states, box-shadow glows, and cursor: pointer to table elements and links to clearly signal interactivity to the user.

** components/cards added:**

• modernizing speed-cubing experience: an introduction to cubeit
• real time 3d scramble visualization: its the dedicated explaining how our 3D cube visualization sets us apart from standard 2D timers.
• difference table : shows difference between traditional 2d timer and cubeit
• mission: to show the core mission of Cubeit
• cube it community: connects people to github repository of Cube It.

** Screenshots:**

---

[netlify]

✅ Deploy Preview for cube-it-app ready!

Name	Link
🔨 Latest commit	4bcb5e4
🔍 Latest deploy log	https://app.netlify.com/projects/cube-it-app/deploys/6a15cf774cb3f6000964bbda
😎 Deploy Preview	https://deploy-preview-19--cube-it-app.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[vasanth642]

Hi @Mahantesh-Madalgi , the page looks good .

before merging i want you refactor some changes:

</>This part of page (in the image) is not required as we are already explaining what cubeit is , in the previous cards.
</>Add some glow around the cards. not too flashy but subtle and professional.
</>There is no visual separator between the about us header and page . add some border or gradient color for the header.

here is some mockups.

[Mahantesh-Madalgi]

Thank you for the feedback. I’ll refactor the requested sections and update the PR accordingly.

[Mahantesh-Madalgi]

Refactored the About Us page based on the suggested changes.

Changes made:

• Removed the unnecessary comparison section
• Improved the About Us header styling and separation
• Updated button so that it matches the theme
• Resolved merge conflicts with the latest upstream changes

Please review the updated pr.

[vasanth642]

Lgtm!

[vasanth642]

"Hi @Mahantesh-Madalgi! Some recent changes were just merged into the main project, which has introduced a few merge conflicts in this PR. Could you please sync/update your branch with the latest main and resolve the conflicts? Let me know if you need any help with it!"

[Mahantesh-Madalgi]

Hi! @vasanth642 Resolved the merge conflicts by regenerating the lock file.
The PR has been updated for review.

[vasanth642]

Hi @Mahantesh-Madalgi! Final changes:
​To keep the main app files stable, could you update this PR to only include your new AboutUsUi.jsx and AboutUsUi.css files inside a dedicated folder (like src/components/AboutUs/)?
​Please revert all changes to App.jsx, package-lock.json, and the sidebar files. Once you push just those two standalone design files, I'll merge them into the repo and handle the sidebar connections myself later. Thanks again!"

[Mahantesh-Madalgi]

Hi @vasanth642! I’ve updated the PR as requested.
I reverted the App.jsx, SidebarUI.jsx, and package-lock.json changes and kept only the standalone AboutUsUi.jsx and AboutUsUi.css component files.

One small note: previously, I had connected the existing 3D cube animation so it transitioned into the About Us page header. Since the integration files were reverted, that transition effect is no longer included in this PR.

Thank you!

[vasanth642]

Hey @Mahantesh-Madalgi, since Git is tracking all the previous file histories, it might be a headache to revert them line by line.
​Let's make it super easy: can you just close this PR, create a completely new branch on your end, and open a new PR that only contains the AboutUs.jsx and AboutUs.css files.
I am planning to design setting page first and then implementing all the other pages , that is reason i am collecting the files alone for now.

[Mahantesh-Madalgi]

Got it, I’ve created a fresh PR containing only the standalone AboutUsUi.jsx and AboutUsUi.css files, and I’ll close this one now.