From f4987ccb27af631ce333ac3cf24340de44a3cf70 Mon Sep 17 00:00:00 2001
From: Jv2350 <tp8375735@gmail.com>
Date: Sun, 21 Sep 2025 03:26:52 +0530
Subject: [PATCH] Update Twitter icon to latest X logo

Fixes #868
---
 src/assets/XLogo.svg      |  7 +++++++
 src/components/Footer.jsx | 16 ++++++++--------
 2 files changed, 15 insertions(+), 8 deletions(-)
 create mode 100644 src/assets/XLogo.svg

diff --git a/src/assets/XLogo.svg b/src/assets/XLogo.svg
new file mode 100644
index 0000000..d901389
--- /dev/null
+++ b/src/assets/XLogo.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1227" fill="currentColor">
+  <path d="M714.163 519.284L1160.89 0H1052.71L667.137 450.887L362.328 0H0L468.106 
+  681.821L0 1226.37H108.181L515.232 747.226L837.672 1226.37H1200L714.137 
+  519.284H714.163ZM567.966 687.828L521.097 620.972L147.202 
+  79.6944H311.893L612.103 512.156L658.972 579.012L1053.66 
+  1152.3H888.972L567.966 687.854V687.828Z"/>
+</svg>
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index 985ea9b..0b74636 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -18,12 +18,12 @@ import {
   CheckCircle,
   ExternalLink,
   Rss,
-  Twitter,
   Linkedin,
   Youtube,
 } from "lucide-react";
 import { Link } from "react-router-dom";
 import logoF from "../assets/logo.png";
+import { ReactComponent as XLogo } from "../assets/XLogo.svg";
 
 const Footer = () => {
   const currentYear = new Date().getFullYear();
@@ -49,11 +49,12 @@ const Footer = () => {
         "hover:bg-gray-900 dark:hover:bg-gray-100 hover:text-white dark:hover:text-gray-900",
     },
     {
-      name: "Twitter",
-      href: "https://twitter.com/civix",
-      icon: Twitter,
-      description: "Follow us on Twitter",
-      color: "hover:bg-blue-400 hover:text-white",
+      name: "X",
+      href: "https://x.com/civix",
+      icon: XLogo,
+      description: "Follow us on X",
+      color:
+        "hover:bg-gray-900 dark:hover:bg-gray-100 hover:text-white dark:hover:text-gray-900",
     },
     {
       name: "LinkedIn",
@@ -503,7 +504,6 @@ const Footer = () => {
             <div className="space-y-4">
               <p className="text-slate-600 dark:text-slate-300 text-sm">
                 Subscribe to get updates on new features
-               
               </p>
 
               {isSubscribed ? (
@@ -553,7 +553,7 @@ const Footer = () => {
               )}
 
               <p className="text-xs text-slate-500 dark:text-slate-400">
-               Unsubscribe at any time.
+                Unsubscribe at any time.
               </p>
             </div>
           </div>