Skip to content

Replace Twitter icon with X logo in footer #520

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
jikrana-del wants to merge 2 commits into from
Closed

Replace Twitter icon with X logo in footer #520

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6b62fda
Replace Twitter icon with X logo in footer
Dec 31, 2025
b044a55
improve card hover effect with smoother animations
Jan 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
75 changes: 60 additions & 15 deletions src/components/CardEffect.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,72 @@
import Image from 'next/image'

export function CardEffect({heading, content, logo}) {
export function CardEffect({ heading, content, logo }) {
return (
<a className="group relative block h-[22rem] max-lg:w-72 max-xl:w-60 w-72 cursor-pointer">
{/* <span className="absolute inset-0 border-2 rounded-lg border-dashed border-black dark:border-zinc-300"></span> */}
<a
className="
group relative block h-[22rem] w-72 cursor-pointer
transition-transform duration-1000 ease-[cubic-bezier(0.22,1,0.36,1)]
hover:-translate-y-2
"
>
Comment on lines +5 to +11
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Jan 1, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🔴 Critical

Critical accessibility issue: anchor element missing href attribute.

The <a> element lacks an href attribute, making it non-focusable via keyboard navigation and violating WCAG standards. This completely blocks keyboard-only users from accessing the card.

🔎 Proposed fix

If the card should navigate somewhere, add a valid href:

         <a
+            href="/project-details" // or appropriate destination
             className="
         group relative block h-[22rem] w-72 cursor-pointer

If no navigation is intended, replace with a div and proper accessibility attributes:

-        <a
+        <div
+            role="button"
+            tabIndex={0}
             className="
         group relative block h-[22rem] w-72 cursor-pointer
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<a
className="
group relative block h-[22rem] w-72 cursor-pointer
transition-transform duration-1000 ease-[cubic-bezier(0.22,1,0.36,1)]
hover:-translate-y-2
"
>
<a
href="/project-details"
className="
group relative block h-[22rem] w-72 cursor-pointer
transition-transform duration-1000 ease-[cubic-bezier(0.22,1,0.36,1)]
hover:-translate-y-2
"
>
🤖 Prompt for AI Agents 
In src/components/CardEffect.jsx around lines 5 to 11, the anchor element is
missing an href which prevents keyboard focus and violates accessibility rules;
if the card is intended to navigate, add a valid href (or a prop-driven href) so
it becomes a real link and remains styled the same, otherwise replace the <a>
with a semantic non-interactive element (e.g., div) and, if it must be
interactive, make it a button with proper keyboard handlers and ARIA attributes;
ensure focus styles and tabindex behavior are preserved and update any tests or
types expecting an anchor.

{/* Soft glow */}
<div
aria-hidden="true"
className="
absolute inset-0 rounded-3xl
bg-gradient-to-br from-emerald-200/40 via-transparent to-emerald-300/40
opacity-0 blur-2xl
transition-opacity duration-500 ease-[cubic-bezier(0.22,1,0.36,1)]
group-hover:opacity-100
"
/>

{/* <div className="relative flex h-full transform items-end border-4 rounded-lg border-black dark:border-zinc-300 bg-transparent dark:bg-transparent transition-transform group-hover:-translate-x-2 group-hover:-translate-y-2"> */}
{/* <div className="relative shadow-xl flex h-full justify-center rounded-3xl border-2 border-gray-400 dark:border-gray-200 bg-white dark:bg-gray-800/40 md:p-8 p-8 px-16 lg:py-8 lg:px-0 xl:p-8 transition group-hover:-translate-x-2 group-hover:-translate-y-2 group-hover:shadow-[8px_8px_0_0_#9ca3af] dark:group-hover:shadow-[8px_8px_0_0_#e5e7eb]"> */}
<div className="relative shadow-xl flex h-full justify-center rounded-3xl border-2 border-gray-400 dark:border-gray-200 bg-white dark:bg-gray-800 md:p-8 p-8 px-16 lg:py-8 lg:px-0 xl:p-8">
<div className="px-8 pb-4 self-center transition-opacity group-hover:absolute group-hover:opacity-0">
{/* Card */}
<div
className="
relative z-10 flex h-full flex-col items-center justify-center
rounded-3xl border border-zinc-200 dark:border-zinc-700
bg-white/95 dark:bg-zinc-900/90 backdrop-blur
shadow-md
transition-all duration-500 ease-[cubic-bezier(0.22,1,0.36,1)]
group-hover:shadow-2xl
"
>
{/* Front (logo + title) */}
<div
className="
px-8 text-center
transition-all duration-500 ease-[cubic-bezier(0.22,1,0.36,1)]
group-hover:opacity-0 group-hover:-translate-y-6
"
>
<Image
src= {logo}
width={150}
src={logo}
width={140}
height={140}
unoptimized
className='mx-auto'
alt='Project Logo'
className="mx-auto"
alt="Project Logo"
/>
<h2 className="ml-0 leading-9 text-4xl text-center flex font-extrabold justify-center font-mono text-[#00843D] dark:text-yellow-400">{heading}</h2>
<h2 className="mt-3 text-3xl font-extrabold font-mono text-[#00843D] dark:text-yellow-400">
{heading}
</h2>
</div>
<div className="absolute self-center pr-6 lg:scale-90 lg:pb-0 lg:pl-3 lg:pr-0 xl:pl-0 md:p-0 md:scale-95 opacity-0 transition-opacity group-hover:relative group-hover:opacity-100 dark:text-zinc-300">
<p className="mt-4 font-mono sm:w-100 w-52">{content}</p>

{/* Back (description) */}
<div
className="
absolute px-8 text-center opacity-0 translate-y-6
transition-all duration-500 ease-[cubic-bezier(0.22,1,0.36,1)]
group-hover:opacity-100 group-hover:translate-y-0
dark:text-zinc-300
"
>
<p className="font-mono text-sm leading-relaxed">
{content}
</p>
</div>
Comment on lines +36 to 68
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Jan 1, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major

Major accessibility blocker: hover-only content reveal excludes keyboard and touch users.

The card's description content is only revealed on mouse hover (group-hover:), making it completely inaccessible to keyboard-only users and mobile/touch devices. This violates WCAG 2.1 SC 1.4.13 (Content on Hover or Focus).

🔎 Proposed fix

Add focus-within support to reveal content for keyboard users:

                 <div
                     className="
             px-8 text-center
             transition-all duration-500 ease-[cubic-bezier(0.22,1,0.36,1)]
-            group-hover:opacity-0 group-hover:-translate-y-6
+            group-hover:opacity-0 group-hover:-translate-y-6
+            group-focus-within:opacity-0 group-focus-within:-translate-y-6
           "
                 >
                 <div
                     className="
             absolute px-8 text-center opacity-0 translate-y-6
             transition-all duration-500 ease-[cubic-bezier(0.22,1,0.36,1)]
-            group-hover:opacity-100 group-hover:translate-y-0
+            group-hover:opacity-100 group-hover:translate-y-0
+            group-focus-within:opacity-100 group-focus-within:translate-y-0
             dark:text-zinc-300
           "
                 >

Committable suggestion skipped: line range outside the PR's diff.

</div>
</a>
)
}
}
6 changes: 3 additions & 3 deletions src/components/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import Link from 'next/link'
import { Container } from '@/components/Container'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faEnvelope } from '@fortawesome/free-solid-svg-icons'
import { faDiscord, faGithub, faGitlab, faTwitter } from '@fortawesome/free-brands-svg-icons'
import { faDiscord, faGithub, faGitlab, faXTwitter } from '@fortawesome/free-brands-svg-icons'
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Dec 31, 2025

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🔴 Critical

Critical: faXTwitter doesn't exist in Font Awesome 6.2.1.

The faXTwitter icon was introduced in Font Awesome 6.4.2, but this project uses version 6.2.1. This import will fail, causing a build or runtime error.

🔎 Proposed fix: Upgrade Font Awesome version

Update the Font Awesome packages to at least version 6.4.2:

npm install @fortawesome/free-brands-svg-icons@^6.4.2 @fortawesome/react-fontawesome@latest

After upgrading, verify the icon is available:

#!/bin/bash
# Verify Font Awesome version and faXTwitter availability

# Check installed version
npm list @fortawesome/free-brands-svg-icons

# Verify faXTwitter export exists
node -e "const { faXTwitter } = require('@fortawesome/free-brands-svg-icons'); console.log('faXTwitter is available:', !!faXTwitter);"
🤖 Prompt for AI Agents 
In src/components/Footer.jsx around line 6, the import of faXTwitter from
@fortawesome/free-brands-svg-icons will fail because this project uses Font
Awesome 6.2.1 which doesn't export faXTwitter; fix by upgrading the Font Awesome
packages to a version that includes faXTwitter (>= 6.4.2): update package.json
or run npm install @fortawesome/free-brands-svg-icons@^6.4.2
@fortawesome/react-fontawesome@latest, then run npm install and rebuild;
alternatively, if you cannot upgrade, replace faXTwitter with an available icon
(e.g., faTwitter) in this file and adjust any UI text accordingly.


function NavLink({ href, children }) {
return (
Expand Down Expand Up @@ -45,8 +45,8 @@ export function Footer() {
<Link aria-label="Join on Discord" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://discord.gg/hjUhu33uAn'>
<FontAwesomeIcon icon={faDiscord} size='xl' />
</Link>
<Link aria-label="Follow on Twitter" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://twitter.com/aossie_org'>
<FontAwesomeIcon icon={faTwitter} size='xl' />
<Link aria-label="Follow on X" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://twitter.com/aossie_org'>
<FontAwesomeIcon icon={faXTwitter} size='xl' />
</Link>
Comment on lines +48 to 50
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Dec 31, 2025

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🔴 Critical

Icon usage will fail; consider updating URL for consistency.

The usage of faXTwitter will fail due to the version incompatibility noted in the import statement.

Additionally, while twitter.com redirects to x.com, consider updating the URL to https://x.com/aossie_org for consistency with the rebranding.

🔎 Proposed fix (after upgrading Font Awesome) 
-                <Link aria-label="Follow on X" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://twitter.com/aossie_org'>
+                <Link aria-label="Follow on X" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://x.com/aossie_org'>
                  <FontAwesomeIcon icon={faXTwitter} size='xl' />
                </Link>

Committable suggestion skipped: line range outside the PR's diff.

🤖 Prompt for AI Agents 
In src/components/Footer.jsx around lines 48-50: the component uses faXTwitter
which doesn't match the installed Font Awesome package and will fail; update the
import and usage to the correct icon provided by your current FA version (e.g.,
import and use faTwitter from @fortawesome/free-brands-svg-icons or, if you
upgrade Font Awesome to a version that exposes faX, import that exact export),
change the href to https://x.com/aossie_org and update the aria-label to "Follow
on X" for consistency.

</div>
</div>
Expand Down