Feature/projects card zoom

[Abhishekmaurya12367]

Summary by CodeRabbit

• New Features

  • Introduced a new custom social media icon for site links

• UI/UX Improvements

  • Updated Twitter branding to X across the platform with refined link labels
  • Added smooth hover scale animations to cards for enhanced interactivity
  • Enhanced button and link styling with improved accessibility and dark mode support

[coderabbitai]

📝 Walkthrough

Walkthrough

The pull request replaces a FontAwesome Twitter icon with a custom XIcon component across the footer and homepage, updates its label to reference "X (Twitter)", and applies consistent visual polish through hover-scale animations to multiple card components while enhancing button/link styling with comprehensive Tailwind classes for better accessibility and dark mode support.

Changes

Cohort / File(s)	Summary
Icon Migration src/components/XIcon.jsx, src/components/Footer.jsx, src/pages/index.jsx	Created new XIcon SVG component and replaced FontAwesome faTwitter icon with XIcon in footer and homepage; updated Twitter link label to "Follow on X (Twitter)".
Hover Animation & Styling src/pages/ideas/2024/index.jsx, src/pages/ideas/index.jsx, src/pages/projects.jsx	Added hover:scale-105 with transform/transition classes to article and project card components for interactive visual feedback.
Button & Link Refinement src/pages/apply.jsx, src/pages/ideas/index.jsx	Enhanced button/link styling with comprehensive Tailwind utility classes including dark mode support, improved focus/hover states, and accessibility rings.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Poem

🐰 A Twitter turned X with hopeful cheer,
Cards now dance when hover's near,
Styles refined with finer care,
Dark and light beyond compare! ✨

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Title check	❓ Inconclusive	The title 'Feature/projects card zoom' is partially related to the changeset. While a zoom/scale effect is added to project cards, the PR also replaces a Twitter icon with an XIcon component, updates button styling across multiple pages, and adds hover effects to various cards—making the title incomplete and not reflective of the full scope of changes.	Consider renaming to a more comprehensive title like 'Add hover scale effects and update icon/button styling' or 'Refactor card animations and social icon' to better reflect all changes in the PR.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/pages/ideas/2024/index.jsx (1)

17-27: ⚠️ Potential issue | 🟠 Major

MUI inline transition overrides Tailwind's transition-transform, breaking the scale animation.

The sx prop on Line 27 sets transition: 'background-color 0.3s ease' as an inline style, which takes precedence over the Tailwind transition-transform duration-200 class on Line 17. The result is that the hover:scale-105 effect will snap instantly instead of animating smoothly.

Either remove the sx transition and handle it via Tailwind, or combine both transition properties:

Option A: Merge in sx

-                  transition: 'background-color 0.3s ease',
+                  transition: 'background-color 0.3s ease, transform 0.2s ease',

…and drop the Tailwind transition-transform duration-200 classes.

Option B: Move background transition to Tailwind

-                className="dark:bg-[`#2A2A2A`] dark:border-white transform transition-transform duration-200 hover:scale-105"
+                className="dark:bg-[`#2A2A2A`] dark:border-white transition-all duration-200 hover:scale-105"

-                  transition: 'background-color 0.3s ease',

The same issue exists in src/pages/ideas/index.jsx (Line 27).

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/ideas/2024/index.jsx` around lines 17 - 27, The inline sx prop sets
transition: 'background-color 0.3s ease' which overrides the Tailwind className
'transition-transform duration-200 hover:scale-105' and prevents the scale
animation; fix by either removing the inline transition from the sx prop so
Tailwind handles transitions, or broaden the sx transition to include transform
(e.g. 'background-color 0.3s ease, transform 200ms') so both background and
transform animate, and apply the same change to the other occurrence with the
same className/sx combination.

🧹 Nitpick comments (1)

src/pages/apply.jsx (1)

145-151: Consider adding target="_blank" and rel="noopener noreferrer" for the external link.

This links to https://summerofcode.withgoogle.com/ — an external site. Users likely expect it to open in a new tab, and it should include rel="noopener noreferrer" for security.

 <Link
   className="order-1 group relative inline-flex items-center overflow-hidden rounded-lg bg-white px-8 py-3 font-mono font-semibold text-[`#00843D`] shadow-sm ring-1 ring-black/10 transition hover:bg-[`#00843D`] hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[`#00843D`] focus-visible:ring-offset-2 dark:bg-black dark:text-yellow-400 dark:ring-white/15 dark:hover:bg-yellow-400 dark:hover:text-black dark:focus-visible:ring-yellow-400 dark:focus-visible:ring-offset-2 dark:focus-visible:ring-offset-black"
   href="https://summerofcode.withgoogle.com/"
+  target="_blank"
+  rel="noopener noreferrer"
 >

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/apply.jsx` around lines 145 - 151, The external Link component
rendering the GSoC URL should open in a new tab and be secured; update the Link
element (the JSX Link with href="https://summerofcode.withgoogle.com/") to
include target="_blank" and rel="noopener noreferrer" so the link opens in a new
tab and prevents window.opener/security risks.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Outside diff comments:
In `@src/pages/ideas/2024/index.jsx`:
- Around line 17-27: The inline sx prop sets transition: 'background-color 0.3s
ease' which overrides the Tailwind className 'transition-transform duration-200
hover:scale-105' and prevents the scale animation; fix by either removing the
inline transition from the sx prop so Tailwind handles transitions, or broaden
the sx transition to include transform (e.g. 'background-color 0.3s ease,
transform 200ms') so both background and transform animate, and apply the same
change to the other occurrence with the same className/sx combination.

---

Duplicate comments:
In `@src/pages/ideas/index.jsx`:
- Around line 17-27: The MUI sx block defines a "transition" property which
overwrites Tailwind's transition-transform on the element (className includes
"transition-transform"); to fix, edit the sx object (same element with className
and sx) and either remove the "transition" entry or change it to include
transform (e.g., replace transition: 'background-color 0.3s ease' with
transition: 'background-color 0.3s ease, transform 0.2s ease' or use
transitionProperty: 'background-color, transform') so Tailwind's scale hover
animation is preserved while keeping the background-color transition.

---

Nitpick comments:
In `@src/pages/apply.jsx`:
- Around line 145-151: The external Link component rendering the GSoC URL should
open in a new tab and be secured; update the Link element (the JSX Link with
href="https://summerofcode.withgoogle.com/") to include target="_blank" and
rel="noopener noreferrer" so the link opens in a new tab and prevents
window.opener/security risks.