UI Improvements: Add Forgot Password & Social Icons + Fix Pricing Card Hover VisibilityFeature/scroll faq by Akash972004 · Pull Request #324 · santanu-atta03/Intervyo

Akash972004 · 2026-02-22T07:01:31Z

📝 Description

This pull request addresses two UI-related issues by improving the login experience and fixing a readability bug in the pricing section.

🔧 Changes Made
✅ Issue #322 – Add "Forgot Password?" & Social Login Icons

Added "Forgot Password?" link below the password field.

Implemented navigation to /forgot-password page.

Created a basic Forgot Password page UI (email input + validation).

Added official Google and GitHub logos to their respective social login buttons.

Ensured proper alignment, spacing, and responsiveness.

Verified compatibility in both Light and Dark modes.

✅ Issue #323 – Fix Pricing Card Hover Text Visibility

Improved text contrast on hover in Light Mode.

Adjusted styling to maintain proper readability.

Ensured hover effects enhance UI without reducing clarity.

Verified consistent behavior across all pricing cards (especially Pro plan).

🧪 Testing

Tested login page UI and navigation flow.

Verified forgot password redirection works correctly.

Checked social icons alignment and responsiveness.

Switched to Light Mode and tested pricing hover states.

Confirmed no layout breaks across different screen sizes.

🎯 Result

Improved login page usability and visual clarity.

Enhanced accessibility and readability in pricing section.

Maintained clean and consistent UI styling.

🔗 Related Issues

Closes #322
Closes #323

Please review the changes. Feedback is welcome 🚀

…d faq section

vercel · 2026-02-22T07:01:34Z

@Akash972004 is attempting to deploy a commit to the santanu-atta03's projects Team on Vercel.

A member of the Team first needs to authorize it.

github-actions · 2026-02-22T07:01:38Z

Thanks for creating a PR for your Issue! ☺️

We'll review it as soon as possible.
In the meantime, please double-check the file changes and ensure that all commits are accurate.

If there are any unresolved review comments, feel free to resolve them. 🙌🏼

Copilot

Pull request overview

This pull request implements UI improvements for the login flow and fixes pricing card hover visibility issues. It adds a "Forgot Password" feature with a new dedicated page, incorporates social login icons (Google and GitHub), and addresses text contrast issues in the pricing section's hover states.

Changes:

Added "Forgot Password" link and new ForgotPassword page with email validation
Integrated Google and GitHub icons into social login buttons
Modified pricing card hover effects to improve text visibility in light mode

Reviewed changes

Copilot reviewed 5 out of 6 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
Frontend/src/pages/PricingPage.jsx	Added hover text color transitions for pricing cards, reformatted code
Frontend/src/pages/Login.jsx	Added "Forgot Password" link and social login icons with SVG graphics
Frontend/src/pages/ForgotPassword.jsx	New page with email validation and OTP sending UI (frontend only)
Frontend/src/pages/Landing.jsx	Code formatting and whitespace cleanup, no functional changes
Frontend/src/pages/FAQ.jsx	Enhanced UI with animations, category icons, and improved styling
Frontend/src/index.css	Added Lenis smooth scroll CSS, new animations (float, pulse-glow)
Frontend/src/App.jsx	Added ForgotPassword route, global Lenis initialization, updated hideFooterRoutes
Frontend/package-lock.json	Dependency updates for React types and optional peer dependencies
Backend/package-lock.json	Optional peer dependency updates for mongoose/mongodb

Files not reviewed (1)

Backend/package-lock.json: Language not supported

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

Copilot · 2026-02-22T07:05:00Z

+        setLoading(false);
+        setMessage("OTP sent successfully! Please check your email.");
+      }, 1500);
+    } catch {


The catch block doesn't capture the error parameter, making it impossible to provide specific error messages to the user. Change catch { to catch (err) { and consider logging the error or providing more specific error messages based on the error type. This is especially important for debugging and providing better user feedback when the actual API is implemented.

Suggested change

} catch {

} catch (err) {

console.error("Failed to send OTP:", err);

Copilot · 2026-02-22T07:05:01Z

+      <div className="absolute inset-0 grid grid-cols-[repeat(auto-fill,minmax(60px,1fr))] grid-rows-[repeat(auto-fill,minmax(60px,1fr))] pointer-events-auto">
+        {Array.from({ length: 800 }).map((_, i) => (
+          <div
+            key={i}
+            className="
+              border border-white/5
+              transition-colors duration-90 ease-out
+              hover:bg-[#10b981]
+            "
+          />
+        ))}
+      </div>


Rendering 800 div elements for the grid background is inefficient and can impact performance. Consider using CSS gradients or pseudo-elements to create the grid pattern instead, which would be much more performant. For example, you could use background-image: repeating-linear-gradient() or a single div with a background pattern.

Suggested change

<div className="absolute inset-0 grid grid-cols-[repeat(auto-fill,minmax(60px,1fr))] grid-rows-[repeat(auto-fill,minmax(60px,1fr))] pointer-events-auto">

{Array.from({ length: 800 }).map((_, i) => (

<div

key={i}

className="

border border-white/5

transition-colors duration-90 ease-out

hover:bg-[#10b981]

"

/>

))}

</div>

<div

className="absolute inset-0 pointer-events-none"

style={{

backgroundImage:

"repeating-linear-gradient(to right, rgba(255,255,255,0.05) 0 1px, transparent 1px 60px), repeating-linear-gradient(to bottom, rgba(255,255,255,0.05) 0 1px, transparent 1px 60px)",

}}

/>

Copilot · 2026-02-22T07:05:01Z

+                <a
+                  href="/forgot-password"
+                  className="text-sm text-emerald-400 hover:text-emerald-300 hover:underline transition-colors"
+                >
+                  Forgot password?
+                </a>


Using an anchor tag (<a>) for navigation in a React application with React Router is not recommended. This will cause a full page reload instead of using client-side routing. Replace this with either <Link to="/forgot-password"> from react-router-dom or use onClick={() => navigate('/forgot-password')} with a button/div element. The Link component is already imported at the top of the file.

Suggested change

<a

href="/forgot-password"

className="text-sm text-emerald-400 hover:text-emerald-300 hover:underline transition-colors"

>

Forgot password?

</a>

<Link

to="/forgot-password"

className="text-sm text-emerald-400 hover:text-emerald-300 hover:underline transition-colors"

>

Forgot password?

</Link>

Copilot · 2026-02-22T07:05:01Z

  // Initialize smooth scrolling with Lenis
  useEffect(() => {
    const lenis = new Lenis({
      duration: 1.2,
      easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
      direction: "vertical",
      gestureDirection: "vertical",
      smooth: true,
      smoothTouch: false,
      touchMultiplier: 2,
    });

    function raf(time) {
      lenis.raf(time);
      requestAnimationFrame(raf);
    }

    requestAnimationFrame(raf);

    return () => {
      lenis.destroy();
    };
  }, []);


The Lenis smooth scrolling is being initialized globally in App.jsx and will run on every page, including pages where it might conflict with existing scroll behavior (e.g., dashboard, interview room, settings pages). The useEffect dependency array is empty, meaning it will only initialize once on mount and won't respond to route changes. Consider either:

Only initializing Lenis on specific pages (like Landing, FAQ) where smooth scrolling is desired

Adding route-specific logic to disable Lenis on certain pages

Testing thoroughly on all pages to ensure no conflicts

The Landing and PricingPage already initialize their own Lenis instances, which could lead to duplicate initialization conflicts.

Copilot · 2026-02-22T07:05:01Z

          <div className="grid md:grid-cols-3 gap-8">
            {/* Free Plan */}
-            <div className="bg-white rounded-2xl p-10 shadow-2xl border-4 border-gray-900 flex flex-col hover:scale-105 transition-transform duration-300">
+            <div className="group bg-white group-hover:bg-gray-900 rounded-2xl p-10 shadow-2xl border-4 border-gray-900 flex flex-col hover:scale-105 transition-all duration-300">


The use of group-hover: modifiers is incorrect here. The group-hover: modifier only works when a parent element has the group class and applies when that parent is hovered. However, the div itself has the group class, so group-hover:bg-gray-900 will never trigger because you can't hover the parent (which doesn't exist). You should use hover:bg-gray-900 instead of group-hover:bg-gray-900 since you want the element itself to change on hover, not its children.

The same issue applies to all group-hover: classes on this div. These should be regular hover: classes instead.

Suggested change

<div className="group bg-white group-hover:bg-gray-900 rounded-2xl p-10 shadow-2xl border-4 border-gray-900 flex flex-col hover:scale-105 transition-all duration-300">

<div className="group bg-white hover:bg-gray-900 rounded-2xl p-10 shadow-2xl border-4 border-gray-900 flex flex-col hover:scale-105 transition-all duration-300">

santanu-atta03 · 2026-02-23T10:57:49Z

@Akash972004 resolve all the conflicts

Akash972004 and others added 4 commits February 20, 2026 21:59

Added smooth scrolling in entire home page of the website and improve…

0680910

…d faq section

Merge branch 'main' into feature/scroll-faq

d0541bf

Text color of pricing cards changed and forgot password page added

ce728f4

Text color of pricing cards changed and forgot password page added

3d932a3

Copilot AI review requested due to automatic review settings February 22, 2026 07:01

Copilot started reviewing on behalf of Akash972004 February 22, 2026 07:01 View session

Merge branch 'main' into feature/scroll-faq

fc91546

Copilot AI reviewed Feb 22, 2026

View reviewed changes

lokeshjakhar7781 requested a review from santanu-atta03 February 22, 2026 14:05

lokeshjakhar7781 added the ECWoC26 Required for ECWoC26 scoring label Feb 22, 2026

santanu-atta03 added the ECWoC26-L3 label Feb 23, 2026

Merge branch 'main' into feature/scroll-faq

08eafee

lokeshjakhar7781 closed this Mar 7, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

UI Improvements: Add Forgot Password & Social Icons + Fix Pricing Card Hover VisibilityFeature/scroll faq#324

UI Improvements: Add Forgot Password & Social Icons + Fix Pricing Card Hover VisibilityFeature/scroll faq#324
Akash972004 wants to merge 6 commits into
santanu-atta03:mainfrom
Akash972004:feature/scroll-faq

Akash972004 commented Feb 22, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Feb 22, 2026

Uh oh!

github-actions Bot commented Feb 22, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Feb 22, 2026

Uh oh!

Copilot AI Feb 22, 2026

Uh oh!

Copilot AI Feb 22, 2026

Uh oh!

Copilot AI Feb 22, 2026

Uh oh!

Copilot AI Feb 22, 2026

Uh oh!

Uh oh!

Uh oh!

santanu-atta03 commented Feb 23, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

	} catch {
	} catch (err) {
	console.error("Failed to send OTP:", err);

	<div className="group bg-white group-hover:bg-gray-900 rounded-2xl p-10 shadow-2xl border-4 border-gray-900 flex flex-col hover:scale-105 transition-all duration-300">
	<div className="group bg-white hover:bg-gray-900 rounded-2xl p-10 shadow-2xl border-4 border-gray-900 flex flex-col hover:scale-105 transition-all duration-300">

Conversation

Akash972004 commented Feb 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel Bot commented Feb 22, 2026

Uh oh!

github-actions Bot commented Feb 22, 2026

Thanks for creating a PR for your Issue! ☺️

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 22, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 22, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 22, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 22, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 22, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

santanu-atta03 commented Feb 23, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Akash972004 commented Feb 22, 2026 •

edited

Loading