From fdc5cf927defe93810cff1cc37b893b13a78db48 Mon Sep 17 00:00:00 2001
From: Arham <arhamreza01@gmail.com>
Date: Sat, 22 Mar 2025 17:52:18 +0530
Subject: [PATCH] Hover Footer

Signed-off-by: Arham <arhamreza01@gmail.com>
---
 src/components/Footer.tsx | 40 +++++++++++++++++++++++----------------
 1 file changed, 24 insertions(+), 16 deletions(-)

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 1af1106f..e44ddcc2 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -19,7 +19,8 @@ const CustomFooter: React.FC = () => {
   const year = new Date().getFullYear();
   const screens = useBreakpoint();
   const [expanded, setExpanded] = useState(false);
-
+  const [hover, setHover] = useState(false);
+  const[hovericon,sethoverIcon]=useState(0)
   return (
     <Footer
       id="footer"
@@ -32,12 +33,15 @@ const CustomFooter: React.FC = () => {
       <Row justify="space-between" align="middle" gutter={[16, 16]}>
         <Col xs={24} md={12}>
           <Space direction="vertical" size="middle">
-            <Link href="https://www.accordproject.org" target="_blank">
+            <Link href="https://www.accordproject.org" target="_blank" 
+             onMouseEnter={() => setHover(true)} // Detect hover
+             onMouseLeave={() => setHover(false)} // Detect when hover ends
+            >
               <Image
                 src="/logo.png"
                 alt="Template Playground"
                 preview={false}
-                style={{ height: "36px", maxWidth: "100%" }}
+                style={{ height: hover ? "38px":"36px", maxWidth: "100%" }}
               />
             </Link>
             <Text style={{ color: "rgba(255, 255, 255, 0.65)" }}>
@@ -48,17 +52,19 @@ const CustomFooter: React.FC = () => {
                 admin@accordproject.org
               </Text>
             </Link>
-            <Link href="https://discord.com/invite/Zm99SKhhtA" target="_blank">
+            <Link href="https://discord.com/invite/Zm99SKhhtA" target="_blank"  >
               <Button
                 size="large"
                 style={{
                   padding: "5px 30px",
-                  backgroundColor: "#19c6c7",
+                  backgroundColor:hovericon==2 ?'#D3D3D3': "#19c6c7",
                   borderRadius: "5px",
                   color: "#050c40",
                   textAlign: "center",
                   border: "none",
                 }}
+                onMouseEnter={()=>sethoverIcon(2)}
+                onMouseLeave={()=>sethoverIcon(0)}
               >
                 Join
               </Button>
@@ -79,24 +85,26 @@ const CustomFooter: React.FC = () => {
 
           {(screens.md || expanded) && (
             <Row justify="end" gutter={[16, 16]}>
-              {FOOTER_SECTION.sections.map((section: FooterSection) => (
+              {FOOTER_SECTION.sections.map((section: FooterSection,j:number) => (
                 <Col xs={24} sm={12} md={6} key={section.title}>
                   <Space direction="vertical" size="middle">
                     <Text
                       strong
                       style={{
-                        color: "rgba(255, 255, 255, 0.65)",
+                        color: "rgba(255, 255, 255, 0.85)",
                         fontSize: "11px",
                         letterSpacing: "0.1em",
                       }}
                     >
                       {section.title}
                     </Text>
-                    {section.links.map((link: FooterLink) => (
+                    {section.links.map((link: FooterLink,i:number) => (
                       <Link
                         href={link.href}
-                        key={link.title}
-                        style={{ color: "white", fontSize: "15px" }}
+                        key={i}
+                        style={{ color: hovericon==(2*i+1)*(3*j+1)+10? "#A9A9A9":"white", fontSize: "15px" }}
+                        onMouseEnter={()=>sethoverIcon((2*i+1)*(3*j+1)+10)}
+                        onMouseLeave={()=>sethoverIcon(0)}
                       >
                         {link.title}
                       </Link>
@@ -117,7 +125,7 @@ const CustomFooter: React.FC = () => {
               strong
               href="https://accordproject.org/privacy"
               target="_blank"
-              style={{ color: "rgba(255, 255, 255, 0.85)" }}
+              style={{ color:hovericon==3 ? " rgba(200,222,255,0.75) ": "rgba(255, 255, 255, 0.85)" }} onMouseEnter={()=>sethoverIcon(3)} onMouseLeave={()=>sethoverIcon(0)}
             >
               trademark policy
             </Link>{" "}
@@ -126,7 +134,7 @@ const CustomFooter: React.FC = () => {
               strong
               href="https://accordproject.org/brand-assets"
               target="_blank"
-              style={{ color: "rgba(255, 255, 255, 0.85)" }}
+              style={{ color:hovericon==4 ? " rgba(200,222,255,0.75) ": "rgba(255, 255, 255, 0.85)" }} onMouseEnter={()=>sethoverIcon(4)} onMouseLeave={()=>sethoverIcon(0)}
             >
               brand assets
             </Link>
@@ -135,16 +143,16 @@ const CustomFooter: React.FC = () => {
 
         <Col>
           <Space>
-            <Link href="https://github.com/accordproject" target="_blank" style={{ color: "rgba(255, 255, 255, 0.85)" }}>
+            <Link href="https://github.com/accordproject" target="_blank"    style={{ color:hovericon==5 ? " rgba(200,222,255,0.75) ": "rgba(255, 255, 255, 0.85)" }} onMouseEnter={()=>sethoverIcon(5)} onMouseLeave={()=>sethoverIcon(0)}>
               <GithubOutlined style={{ fontSize: "17px" }} />
             </Link>
-            <Link href="https://twitter.com/AccordHQ" target="_blank" style={{ color: "rgba(255, 255, 255, 0.85)" }}>
+            <Link href="https://twitter.com/AccordHQ" target="_blank"    style={{ color:hovericon==6 ? " rgba(200,222,255,0.75) ": "rgba(255, 255, 255, 0.85)" }} onMouseEnter={()=>sethoverIcon(6)} onMouseLeave={()=>sethoverIcon(0)}>
               <XOutlined style={{ fontSize: "17px" }} />
             </Link>
-            <Link href="https://discord.com/invite/Zm99SKhhtA" target="_blank" style={{ color: "rgba(255, 255, 255, 0.85)" }}>
+            <Link href="https://discord.com/invite/Zm99SKhhtA" target="_blank"   style={{ color:hovericon==7 ? " rgba(200,222,255,0.75) ": "rgba(255, 255, 255, 0.85)" }} onMouseEnter={()=>sethoverIcon(7)} onMouseLeave={()=>sethoverIcon(0)}>
               <DiscordFilled style={{ fontSize: "17px" }} />
             </Link>
-            <Link href="https://www.linkedin.com/company/accordproject/" target="_blank" style={{ color: "rgba(255, 255, 255, 0.85)" }}>
+            <Link href="https://www.linkedin.com/company/accordproject/" target="_blank"  style={{ color:hovericon==7 ? " rgba(200,222,255,0.75) ": "rgba(255, 255, 255, 0.85)" }} onMouseEnter={()=>sethoverIcon(7)} onMouseLeave={()=>sethoverIcon(0)}>
               <LinkedinFilled style={{ fontSize: "17px" }} />
             </Link>
           </Space>