From 814b43498b6b890d55b6f1d53487fe859ddc53ec Mon Sep 17 00:00:00 2001
From: Radiquum <kentai.waah@gmail.com>
Date: Wed, 23 Jul 2025 13:22:53 +0500
Subject: [PATCH] feat: add hover effect on links

---
 app/Section/Characters.tsx      | 4 ++--
 app/Section/Contacts.tsx        | 2 +-
 app/Section/Photos.tsx          | 2 +-
 app/Section/Projects.tsx        | 2 +-
 app/components/IconWithText.tsx | 2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/Section/Characters.tsx b/app/Section/Characters.tsx
index 3a73d7c..ec39e7c 100644
--- a/app/Section/Characters.tsx
+++ b/app/Section/Characters.tsx
@@ -23,9 +23,9 @@ export const Characters = () => {
     <Section>
       <div className="flex flex-col gap-2 mt-2 md:flex-row md:justify-between md:items-center">
         <h2 className="text-4xl md:text-5xl">Characters</h2>
-        <div className="flex items-center gap-4">
+        <div className="flex items-center gap-4 xl:gap-8">
           {links.map((item) => (
-            <Link href={item.url} key={`photos.link.${item.text}`}>
+            <Link href={item.url} key={`characters.link.${item.text}`}>
               <IconWithText
                 icon={item.icon}
                 text={item.text}
diff --git a/app/Section/Contacts.tsx b/app/Section/Contacts.tsx
index 61f8c80..df4bf5a 100644
--- a/app/Section/Contacts.tsx
+++ b/app/Section/Contacts.tsx
@@ -37,7 +37,7 @@ export const Contacts = () => {
         {links.map((item) => {
           if (item.url) {
             return (
-              <Link href={item.url} key={`socials.link.${item.text}`}>
+              <Link href={item.url} key={`contacts.link.${item.text}`}>
                 <IconWithText
                   icon={item.icon}
                   text={item.text}
diff --git a/app/Section/Photos.tsx b/app/Section/Photos.tsx
index e135116..097a5b9 100644
--- a/app/Section/Photos.tsx
+++ b/app/Section/Photos.tsx
@@ -42,7 +42,7 @@ export const Photos = () => {
       <Section>
         <div className="flex flex-col gap-2 md:flex-row md:justify-between md:items-center">
           <h2 className="text-4xl md:text-5xl">Photos</h2>
-          <div className="flex items-center gap-4">
+          <div className="flex items-center gap-4 xl:gap-8">
             {links.map((item) => (
               <Link href={item.url} key={`photos.link.${item.text}`}>
                 <IconWithText
diff --git a/app/Section/Projects.tsx b/app/Section/Projects.tsx
index fbb4f25..66335b6 100644
--- a/app/Section/Projects.tsx
+++ b/app/Section/Projects.tsx
@@ -53,7 +53,7 @@ export const Projects = () => {
       <h2 className="text-4xl md:text-5xl">Projects</h2>
       <div className="grid grid-cols-1 gap-2 md:grid-cols-2 xl:grid-cols-3">
         {links.map((item) => (
-          <Link href={item.url} key={`socials.link.${item.text}`}>
+          <Link href={item.url} key={`projects.link.${item.text}`}>
             <IconWithText icon={item.icon} text={item.text} desc={item.desc} />
           </Link>
         ))}
diff --git a/app/components/IconWithText.tsx b/app/components/IconWithText.tsx
index 9e07af4..0c35062 100644
--- a/app/components/IconWithText.tsx
+++ b/app/components/IconWithText.tsx
@@ -6,7 +6,7 @@ type IconWithTextProps = {
 
 export const IconWithText = ({ icon, text, desc }: IconWithTextProps) => {
   return (
-    <div className="flex items-center gap-1">
+    <div className="flex items-center gap-1 hover:text-[#c8e8fe] transition-colors">
       {/* eslint-disable-next-line @next/next/no-img-element */}
       <img src={icon} alt={""} />
       <div>