From 4ddaba7c7d2f86f12efe610467d13c1e40f21103 Mon Sep 17 00:00:00 2001
From: Neeldhara Misra <neeldhara@Neeldharas-MacBook-Air-46.local>
Date: Sun, 14 Jun 2026 01:54:14 +0200
Subject: [PATCH] Add social links to blog footers

---
 sites/art/src/components/sections/footer.tsx  |  80 +-------------
 sites/art/src/components/social-links.tsx     | 104 ++++++++++++++++++
 sites/art/src/styles/global.css               |  14 +++
 .../poetry/src/components/sections/footer.tsx |  80 +-------------
 sites/poetry/src/components/social-links.tsx  | 104 ++++++++++++++++++
 sites/poetry/src/styles/global.css            |  14 +++
 .../src/components/sections/footer.tsx        |  80 +-------------
 sites/puzzles/src/components/social-links.tsx | 104 ++++++++++++++++++
 sites/puzzles/src/styles/global.css           |  14 +++
 .../src/components/sections/footer.tsx        |  80 +-------------
 .../src/components/social-links.tsx           | 104 ++++++++++++++++++
 sites/reflections/src/styles/global.css       |  14 +++
 .../src/components/sections/footer.tsx        |  80 +-------------
 .../research/src/components/social-links.tsx  | 104 ++++++++++++++++++
 sites/research/src/styles/global.css          |  14 +++
 .../src/components/sections/footer.tsx        |  80 +-------------
 sites/reviews/src/components/social-links.tsx | 104 ++++++++++++++++++
 sites/reviews/src/styles/global.css           |  14 +++
 .../vibes/src/components/sections/footer.tsx  |  80 +-------------
 sites/vibes/src/components/social-links.tsx   | 104 ++++++++++++++++++
 sites/vibes/src/styles/global.css             |  14 +++
 src/components/sections/footer.tsx            |  80 +-------------
 src/components/social-links.tsx               | 104 ++++++++++++++++++
 src/styles/global.css                         |  14 +++
 24 files changed, 992 insertions(+), 592 deletions(-)
 create mode 100644 sites/art/src/components/social-links.tsx
 create mode 100644 sites/poetry/src/components/social-links.tsx
 create mode 100644 sites/puzzles/src/components/social-links.tsx
 create mode 100644 sites/reflections/src/components/social-links.tsx
 create mode 100644 sites/research/src/components/social-links.tsx
 create mode 100644 sites/reviews/src/components/social-links.tsx
 create mode 100644 sites/vibes/src/components/social-links.tsx
 create mode 100644 src/components/social-links.tsx

diff --git a/sites/art/src/components/sections/footer.tsx b/sites/art/src/components/sections/footer.tsx
index a23a657..3bc1b7f 100644
--- a/sites/art/src/components/sections/footer.tsx
+++ b/sites/art/src/components/sections/footer.tsx
@@ -1,83 +1,15 @@
-import { FaXTwitter, FaLinkedin, FaFacebook } from "react-icons/fa6";
-import { Home } from "lucide-react";
-
-const navigation = [
-  {
-    title: "Products",
-    links: [
-      { name: "VAR", href: "/#code-security" },
-      { name: "Credit Transfers", href: "/#why-charter" },
-      { name: "Credit Accounts", href: "/#ai-chatbot" },
-      { name: "Loan Origination", href: "/#ai-chatbot" },
-      { name: "Loan Purchase", href: "/#ai-chatbot" },
-    ],
-  },
-  {
-    title: "Support",
-    links: [
-      { name: "Pricing", href: "/pricing" },
-      { name: "FAQ", href: "/faq" },
-      { name: "Demo", href: "/contact" },
-      { name: "Contact", href: "/contact" },
-    ],
-  },
-  {
-    title: "Company",
-    links: [
-      { name: "About", href: "/about" },
-      { name: "Terms of Service", href: "/terms" },
-      { name: "Privacy Policy", href: "/privacy" },
-    ],
-  },
-];
-
-const socialLinks = [
-  { icon: FaXTwitter, href: "https://twitter.com", label: "Twitter" },
-  { icon: FaFacebook, href: "https://facebook.com", label: "Facebook" },
-  { icon: FaLinkedin, href: "https://linkedin.com", label: "LinkedIn" },
-];
+import SocialLinks from "@/components/social-links";
 
 export default function Footer() {
   return (
-    <footer className="pt-16 md:pt-28 lg:pt-32">
+    <footer className="pt-16 md:pt-24">
       <div className="w-full px-4 md:px-6 lg:px-8">
         <div className="mx-auto max-w-5xl">
-          {/* Navigation Section */}
-          <nav className="flex flex-wrap justify-between gap-x-32 gap-y-20 border-b pb-14 lg:pb-20">
-            
-          </nav>
-
-          {/* Bottom Section */}
-          <div className="py-8">
-          <div className="flex flex-wrap items-center justify-between gap-2">
-            <div className="flex items-center gap-4">
-              <Home className="h-6 w-6" />
-              <p className="text-sm font-medium">
-                © {new Date().getFullYear()} Charter -{" "}
-                <a
-                  href="https://shadcnblocks.com"
-                  className="underline transition-opacity hover:opacity-80"
-                  target="_blank"
-                >
-                  Shadcnblocks.com
-                </a>
-              </p>
+          <div className="border-t py-8">
+            <div className="flex flex-col gap-3">
+              <p className="text-sm font-semibold">Neeldhara Misra</p>
+              <SocialLinks />
             </div>
-            <div className="flex items-center gap-6">
-              {socialLinks.map((link) => (
-                <a
-                  aria-label={link.label}
-                  key={link.href}
-                  href={link.href}
-                  className="hover:text-muted-foreground"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  <link.icon />
-                </a>
-              ))}
-            </div>
-          </div>
           </div>
         </div>
       </div>
diff --git a/sites/art/src/components/social-links.tsx b/sites/art/src/components/social-links.tsx
new file mode 100644
index 0000000..9c26a90
--- /dev/null
+++ b/sites/art/src/components/social-links.tsx
@@ -0,0 +1,104 @@
+import type { CSSProperties, ReactElement } from "react";
+
+type SocialLink = {
+  href: string;
+  label: string;
+  color: string;
+  icon: (props: { className?: string }) => ReactElement;
+};
+
+const socialLinks: SocialLink[] = [
+  {
+    href: "https://x.com/home",
+    label: "X",
+    color: "#525252",
+    icon: (props) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" {...props}>
+        <path d="M5 5l14 14" />
+        <path d="M19 5L5 19" />
+      </svg>
+    ),
+  },
+  {
+    href: "https://bsky.app/profile/neeldhara.bsky.social",
+    label: "Bluesky",
+    color: "#4f83b8",
+    icon: (props) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...props}>
+        <path d="M12 13c-2.9-5.2-6-7.2-8.1-6.4-1.6.7-1 4.4 2.3 7.1" />
+        <path d="M12 13c2.9-5.2 6-7.2 8.1-6.4 1.6.7 1 4.4-2.3 7.1" />
+        <path d="M12 13c-2.3 1.6-3.6 3.1-3.3 4.6.3 1.4 2.1 1.8 3.3.2" />
+        <path d="M12 13c2.3 1.6 3.6 3.1 3.3 4.6-.3 1.4-2.1 1.8-3.3.2" />
+      </svg>
+    ),
+  },
+  {
+    href: "https://www.linkedin.com/in/neeldhara-misra-a54b6920/",
+    label: "LinkedIn",
+    color: "#496f9e",
+    icon: (props) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...props}>
+        <rect x="4.5" y="4.5" width="15" height="15" rx="2.5" />
+        <path d="M8 10.5v5.5" />
+        <path d="M11.5 16v-5.5" />
+        <path d="M11.5 13.1c0-1.7 1-2.7 2.3-2.7 1.5 0 2.2 1 2.2 2.7V16" />
+        <path d="M8 8h.01" />
+      </svg>
+    ),
+  },
+  {
+    href: "https://mathstodon.xyz/@neeldhara",
+    label: "Mastodon",
+    color: "#7464a8",
+    icon: (props) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...props}>
+        <path d="M7 16.5c1.4.8 3.1 1.1 5.2 1 3.7-.1 5.8-1.7 6.1-4.8l.2-3.6c.2-3.1-1.4-4.7-4.5-4.7h-4c-3.1 0-4.7 1.6-4.5 4.7l.3 5.1c.2 3.4 2.2 5.2 5.9 5.3" />
+        <path d="M8.5 13V9.6c0-1.1.7-1.8 1.7-1.8.8 0 1.4.4 1.8 1.1.4-.7 1-1.1 1.8-1.1 1 0 1.7.7 1.7 1.8V13" />
+        <path d="M12 9.4V13" />
+      </svg>
+    ),
+  },
+  {
+    href: "https://www.youtube.com/@neeldhara",
+    label: "YouTube",
+    color: "#b55252",
+    icon: (props) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...props}>
+        <path d="M4.8 8.5c.2-1.2 1.1-2.1 2.3-2.2 1.6-.2 3.2-.3 4.9-.3s3.3.1 4.9.3c1.2.1 2.1 1 2.3 2.2.2 1.1.3 2.2.3 3.5s-.1 2.4-.3 3.5c-.2 1.2-1.1 2.1-2.3 2.2-1.6.2-3.2.3-4.9.3s-3.3-.1-4.9-.3c-1.2-.1-2.1-1-2.3-2.2-.2-1.1-.3-2.2-.3-3.5s.1-2.4.3-3.5Z" />
+        <path d="M10.5 9.5l4 2.5-4 2.5v-5Z" />
+      </svg>
+    ),
+  },
+  {
+    href: "https://www.instagram.com/neeldharamisra",
+    label: "Instagram",
+    color: "#9a6b8c",
+    icon: (props) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...props}>
+        <rect x="5" y="5" width="14" height="14" rx="4" />
+        <circle cx="12" cy="12" r="3.2" />
+        <path d="M16.3 7.8h.01" />
+      </svg>
+    ),
+  },
+];
+
+export default function SocialLinks({ className = "" }: { className?: string }) {
+  return (
+    <nav className={`social-links ${className}`} aria-label="Social links">
+      {socialLinks.map((link) => (
+        <a
+          key={link.href}
+          href={link.href}
+          aria-label={link.label}
+          className="social-icon-link"
+          style={{ "--social-color": link.color } as CSSProperties}
+          target="_blank"
+          rel="me noopener noreferrer"
+        >
+          <link.icon className="h-5 w-5" />
+        </a>
+      ))}
+    </nav>
+  );
+}
diff --git a/sites/art/src/styles/global.css b/sites/art/src/styles/global.css
index badcfab..7b48053 100644
--- a/sites/art/src/styles/global.css
+++ b/sites/art/src/styles/global.css
@@ -193,6 +193,20 @@
   [class*="border"] {
     @apply border-border;
   }
+
+  .social-links {
+    @apply flex items-center gap-4;
+  }
+
+  .social-icon-link {
+    color: color-mix(in srgb, currentColor 72%, transparent);
+    transition: color 180ms ease, transform 180ms ease;
+  }
+
+  .social-icon-link:hover {
+    color: var(--social-color);
+    transform: translateY(-1px);
+  }
 }
 
 @layer base {
diff --git a/sites/poetry/src/components/sections/footer.tsx b/sites/poetry/src/components/sections/footer.tsx
index a23a657..3bc1b7f 100644
--- a/sites/poetry/src/components/sections/footer.tsx
+++ b/sites/poetry/src/components/sections/footer.tsx
@@ -1,83 +1,15 @@
-import { FaXTwitter, FaLinkedin, FaFacebook } from "react-icons/fa6";
-import { Home } from "lucide-react";
-
-const navigation = [
-  {
-    title: "Products",
-    links: [
-      { name: "VAR", href: "/#code-security" },
-      { name: "Credit Transfers", href: "/#why-charter" },
-      { name: "Credit Accounts", href: "/#ai-chatbot" },
-      { name: "Loan Origination", href: "/#ai-chatbot" },
-      { name: "Loan Purchase", href: "/#ai-chatbot" },
-    ],
-  },
-  {
-    title: "Support",
-    links: [
-      { name: "Pricing", href: "/pricing" },
-      { name: "FAQ", href: "/faq" },
-      { name: "Demo", href: "/contact" },
-      { name: "Contact", href: "/contact" },
-    ],
-  },
-  {
-    title: "Company",
-    links: [
-      { name: "About", href: "/about" },
-      { name: "Terms of Service", href: "/terms" },
-      { name: "Privacy Policy", href: "/privacy" },
-    ],
-  },
-];
-
-const socialLinks = [
-  { icon: FaXTwitter, href: "https://twitter.com", label: "Twitter" },
-  { icon: FaFacebook, href: "https://facebook.com", label: "Facebook" },
-  { icon: FaLinkedin, href: "https://linkedin.com", label: "LinkedIn" },
-];
+import SocialLinks from "@/components/social-links";
 
 export default function Footer() {
   return (
-    <footer className="pt-16 md:pt-28 lg:pt-32">
+    <footer className="pt-16 md:pt-24">
       <div className="w-full px-4 md:px-6 lg:px-8">
         <div className="mx-auto max-w-5xl">
-          {/* Navigation Section */}
-          <nav className="flex flex-wrap justify-between gap-x-32 gap-y-20 border-b pb-14 lg:pb-20">
-            
-          </nav>
-
-          {/* Bottom Section */}
-          <div className="py-8">
-          <div className="flex flex-wrap items-center justify-between gap-2">
-            <div className="flex items-center gap-4">
-              <Home className="h-6 w-6" />
-              <p className="text-sm font-medium">
-                © {new Date().getFullYear()} Charter -{" "}
-                <a
-                  href="https://shadcnblocks.com"
-                  className="underline transition-opacity hover:opacity-80"
-                  target="_blank"
-                >
-                  Shadcnblocks.com
-                </a>
-              </p>
+          <div className="border-t py-8">
+            <div className="flex flex-col gap-3">
+              <p className="text-sm font-semibold">Neeldhara Misra</p>
+              <SocialLinks />
             </div>
-            <div className="flex items-center gap-6">
-              {socialLinks.map((link) => (
-                <a
-                  aria-label={link.label}
-                  key={link.href}
-                  href={link.href}
-                  className="hover:text-muted-foreground"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  <link.icon />
-                </a>
-              ))}
-            </div>
-          </div>
           </div>
         </div>
       </div>
diff --git a/sites/poetry/src/components/social-links.tsx b/sites/poetry/src/components/social-links.tsx
new file mode 100644
index 0000000..9c26a90
--- /dev/null
+++ b/sites/poetry/src/components/social-links.tsx
@@ -0,0 +1,104 @@
+import type { CSSProperties, ReactElement } from "react";
+
+type SocialLink = {
+  href: string;
+  label: string;
+  color: string;
+  icon: (props: { className?: string }) => ReactElement;
+};
+
+const socialLinks: SocialLink[] = [
+  {
+    href: "https://x.com/home",
+    label: "X",
+    color: "#525252",
+    icon: (props) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" {...props}>
+        <path d="M5 5l14 14" />
+        <path d="M19 5L5 19" />
+      </svg>
+    ),
+  },
+  {
+    href: "https://bsky.app/profile/neeldhara.bsky.social",
+    label: "Bluesky",
+    color: "#4f83b8",
+    icon: (props) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...props}>
+        <path d="M12 13c-2.9-5.2-6-7.2-8.1-6.4-1.6.7-1 4.4 2.3 7.1" />
+        <path d="M12 13c2.9-5.2 6-7.2 8.1-6.4 1.6.7 1 4.4-2.3 7.1" />
+        <path d="M12 13c-2.3 1.6-3.6 3.1-3.3 4.6.3 1.4 2.1 1.8 3.3.2" />
+        <path d="M12 13c2.3 1.6 3.6 3.1 3.3 4.6-.3 1.4-2.1 1.8-3.3.2" />
+      </svg>
+    ),
+  },
+  {
+    href: "https://www.linkedin.com/in/neeldhara-misra-a54b6920/",
+    label: "LinkedIn",
+    color: "#496f9e",
+    icon: (props) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...props}>
+        <rect x="4.5" y="4.5" width="15" height="15" rx="2.5" />
+        <path d="M8 10.5v5.5" />
+        <path d="M11.5 16v-5.5" />
+        <path d="M11.5 13.1c0-1.7 1-2.7 2.3-2.7 1.5 0 2.2 1 2.2 2.7V16" />
+        <path d="M8 8h.01" />
+      </svg>
+    ),
+  },
+  {
+    href: "https://mathstodon.xyz/@neeldhara",
+    label: "Mastodon",
+    color: "#7464a8",
+    icon: (props) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...props}>
+        <path d="M7 16.5c1.4.8 3.1 1.1 5.2 1 3.7-.1 5.8-1.7 6.1-4.8l.2-3.6c.2-3.1-1.4-4.7-4.5-4.7h-4c-3.1 0-4.7 1.6-4.5 4.7l.3 5.1c.2 3.4 2.2 5.2 5.9 5.3" />
+        <path d="M8.5 13V9.6c0-1.1.7-1.8 1.7-1.8.8 0 1.4.4 1.8 1.1.4-.7 1-1.1 1.8-1.1 1 0 1.7.7 1.7 1.8V13" />
+        <path d="M12 9.4V13" />
+      </svg>
+    ),
+  },
+  {
+    href: "https://www.youtube.com/@neeldhara",
+    label: "YouTube",
+    color: "#b55252",
+    icon: (props) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...props}>
+        <path d="M4.8 8.5c.2-1.2 1.1-2.1 2.3-2.2 1.6-.2 3.2-.3 4.9-.3s3.3.1 4.9.3c1.2.1 2.1 1 2.3 2.2.2 1.1.3 2.2.3 3.5s-.1 2.4-.3 3.5c-.2 1.2-1.1 2.1-2.3 2.2-1.6.2-3.2.3-4.9.3s-3.3-.1-4.9-.3c-1.2-.1-2.1-1-2.3-2.2-.2-1.1-.3-2.2-.3-3.5s.1-2.4.3-3.5Z" />
+        <path d="M10.5 9.5l4 2.5-4 2.5v-5Z" />
+      </svg>
+    ),
+  },
+  {
+    href: "https://www.instagram.com/neeldharamisra",
+    label: "Instagram",
+    color: "#9a6b8c",
+    icon: (props) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...props}>
+        <rect x="5" y="5" width="14" height="14" rx="4" />
+        <circle cx="12" cy="12" r="3.2" />
+        <path d="M16.3 7.8h.01" />
+      </svg>
+    ),
+  },
+];
+
+export default function SocialLinks({ className = "" }: { className?: string }) {
+  return (
+    <nav className={`social-links ${className}`} aria-label="Social links">
+      {socialLinks.map((link) => (
+        <a
+          key={link.href}
+          href={link.href}
+          aria-label={link.label}
+          className="social-icon-link"
+          style={{ "--social-color": link.color } as CSSProperties}
+          target="_blank"
+          rel="me noopener noreferrer"
+        >
+          <link.icon className="h-5 w-5" />
+        </a>
+      ))}
+    </nav>
+  );
+}
diff --git a/sites/poetry/src/styles/global.css b/sites/poetry/src/styles/global.css
index 9b9c9f4..a3cd166 100644
--- a/sites/poetry/src/styles/global.css
+++ b/sites/poetry/src/styles/global.css
@@ -193,6 +193,20 @@
   [class*="border"] {
     @apply border-border;
   }
+
+  .social-links {
+    @apply flex items-center gap-4;
+  }
+
+  .social-icon-link {
+    color: color-mix(in srgb, currentColor 72%, transparent);
+    transition: color 180ms ease, transform 180ms ease;
+  }
+
+  .social-icon-link:hover {
+    color: var(--social-color);
+    transform: translateY(-1px);
+  }
 }
 
 @layer base {
diff --git a/sites/puzzles/src/components/sections/footer.tsx b/sites/puzzles/src/components/sections/footer.tsx
index a23a657..3bc1b7f 100644
--- a/sites/puzzles/src/components/sections/footer.tsx
+++ b/sites/puzzles/src/components/sections/footer.tsx
@@ -1,83 +1,15 @@
-import { FaXTwitter, FaLinkedin, FaFacebook } from "react-icons/fa6";
-import { Home } from "lucide-react";
-
-const navigation = [
-  {
-    title: "Products",
-    links: [
-      { name: "VAR", href: "/#code-security" },
-      { name: "Credit Transfers", href: "/#why-charter" },
-      { name: "Credit Accounts", href: "/#ai-chatbot" },
-      { name: "Loan Origination", href: "/#ai-chatbot" },
-      { name: "Loan Purchase", href: "/#ai-chatbot" },
-    ],
-  },
-  {
-    title: "Support",
-    links: [
-      { name: "Pricing", href: "/pricing" },
-      { name: "FAQ", href: "/faq" },
-      { name: "Demo", href: "/contact" },
-      { name: "Contact", href: "/contact" },
-    ],
-  },
-  {
-    title: "Company",
-    links: [
-      { name: "About", href: "/about" },
-      { name: "Terms of Service", href: "/terms" },
-      { name: "Privacy Policy", href: "/privacy" },
-    ],
-  },
-];
-
-const socialLinks = [
-  { icon: FaXTwitter, href: "https://twitter.com", label: "Twitter" },
-  { icon: FaFacebook, href: "https://facebook.com", label: "Facebook" },
-  { icon: FaLinkedin, href: "https://linkedin.com", label: "LinkedIn" },
-];
+import SocialLinks from "@/components/social-links";
 
 export default function Footer() {
   return (
-    <footer className="pt-16 md:pt-28 lg:pt-32">
+    <footer className="pt-16 md:pt-24">
       <div className="w-full px-4 md:px-6 lg:px-8">
         <div className="mx-auto max-w-5xl">
-          {/* Navigation Section */}
-          <nav className="flex flex-wrap justify-between gap-x-32 gap-y-20 border-b pb-14 lg:pb-20">
-            
-          </nav>
-
-          {/* Bottom Section */}
-          <div className="py-8">
-          <div className="flex flex-wrap items-center justify-between gap-2">
-            <div className="flex items-center gap-4">
-              <Home className="h-6 w-6" />
-              <p className="text-sm font-medium">
-                © {new Date().getFullYear()} Charter -{" "}
-                <a
-                  href="https://shadcnblocks.com"
-                  className="underline transition-opacity hover:opacity-80"
-                  target="_blank"
-                >
-                  Shadcnblocks.com
-                </a>
-              </p>
+          <div className="border-t py-8">
+            <div className="flex flex-col gap-3">
+              <p className="text-sm font-semibold">Neeldhara Misra</p>
+              <SocialLinks />
             </div>
-            <div className="flex items-center gap-6">
-              {socialLinks.map((link) => (
-                <a
-                  aria-label={link.label}
-                  key={link.href}
-                  href={link.href}
-                  className="hover:text-muted-foreground"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  <link.icon />
-                </a>
-              ))}
-            </div>
-          </div>
           </div>
         </div>
       </div>
diff --git a/sites/puzzles/src/components/social-links.tsx b/sites/puzzles/src/components/social-links.tsx
new file mode 100644
index 0000000..9c26a90
--- /dev/null
+++ b/sites/puzzles/src/components/social-links.tsx
@@ -0,0 +1,104 @@
+import type { CSSProperties, ReactElement } from "react";
+
+type SocialLink = {
+  href: string;
+  label: string;
+  color: string;
+  icon: (props: { className?: string }) => ReactElement;
+};
+
+const socialLinks: SocialLink[] = [
+  {
+    href: "https://x.com/home",
+    label: "X",
+    color: "#525252",
+    icon: (props) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" {...props}>
+        <path d="M5 5l14 14" />
+        <path d="M19 5L5 19" />
+      </svg>
+    ),
+  },
+  {
+    href: "https://bsky.app/profile/neeldhara.bsky.social",
+    label: "Bluesky",
+    color: "#4f83b8",
+    icon: (props) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...props}>
+        <path d="M12 13c-2.9-5.2-6-7.2-8.1-6.4-1.6.7-1 4.4 2.3 7.1" />
+        <path d="M12 13c2.9-5.2 6-7.2 8.1-6.4 1.6.7 1 4.4-2.3 7.1" />
+        <path d="M12 13c-2.3 1.6-3.6 3.1-3.3 4.6.3 1.4 2.1 1.8 3.3.2" />
+        <path d="M12 13c2.3 1.6 3.6 3.1 3.3 4.6-.3 1.4-2.1 1.8-3.3.2" />
+      </svg>
+    ),
+  },
+  {
+    href: "https://www.linkedin.com/in/neeldhara-misra-a54b6920/",
+    label: "LinkedIn",
+    color: "#496f9e",
+    icon: (props) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...props}>
+        <rect x="4.5" y="4.5" width="15" height="15" rx="2.5" />
+        <path d="M8 10.5v5.5" />
+        <path d="M11.5 16v-5.5" />
+        <path d="M11.5 13.1c0-1.7 1-2.7 2.3-2.7 1.5 0 2.2 1 2.2 2.7V16" />
+        <path d="M8 8h.01" />
+      </svg>
+    ),
+  },
+  {
+    href: "https://mathstodon.xyz/@neeldhara",
+    label: "Mastodon",
+    color: "#7464a8",
+    icon: (props) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...props}>
+        <path d="M7 16.5c1.4.8 3.1 1.1 5.2 1 3.7-.1 5.8-1.7 6.1-4.8l.2-3.6c.2-3.1-1.4-4.7-4.5-4.7h-4c-3.1 0-4.7 1.6-4.5 4.7l.3 5.1c.2 3.4 2.2 5.2 5.9 5.3" />
+        <path d="M8.5 13V9.6c0-1.1.7-1.8 1.7-1.8.8 0 1.4.4 1.8 1.1.4-.7 1-1.1 1.8-1.1 1 0 1.7.7 1.7 1.8V13" />
+        <path d="M12 9.4V13" />
+      </svg>
+    ),
+  },
+  {
+    href: "https://www.youtube.com/@neeldhara",
+    label: "YouTube",
+    color: "#b55252",
+    icon: (props) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...props}>
+        <path d="M4.8 8.5c.2-1.2 1.1-2.1 2.3-2.2 1.6-.2 3.2-.3 4.9-.3s3.3.1 4.9.3c1.2.1 2.1 1 2.3 2.2.2 1.1.3 2.2.3 3.5s-.1 2.4-.3 3.5c-.2 1.2-1.1 2.1-2.3 2.2-1.6.2-3.2.3-4.9.3s-3.3-.1-4.9-.3c-1.2-.1-2.1-1-2.3-2.2-.2-1.1-.3-2.2-.3-3.5s.1-2.4.3-3.5Z" />
+        <path d="M10.5 9.5l4 2.5-4 2.5v-5Z" />
+      </svg>
+    ),
+  },
+  {
+    href: "https://www.instagram.com/neeldharamisra",
+    label: "Instagram",
+    color: "#9a6b8c",
+    icon: (props) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...props}>
+        <rect x="5" y="5" width="14" height="14" rx="4" />
+        <circle cx="12" cy="12" r="3.2" />
+        <path d="M16.3 7.8h.01" />
+      </svg>
+    ),
+  },
+];
+
+export default function SocialLinks({ className = "" }: { className?: string }) {
+  return (
+    <nav className={`social-links ${className}`} aria-label="Social links">
+      {socialLinks.map((link) => (
+        <a
+          key={link.href}
+          href={link.href}
+          aria-label={link.label}
+          className="social-icon-link"
+          style={{ "--social-color": link.color } as CSSProperties}
+          target="_blank"
+          rel="me noopener noreferrer"
+        >
+          <link.icon className="h-5 w-5" />
+        </a>
+      ))}
+    </nav>
+  );
+}
diff --git a/sites/puzzles/src/styles/global.css b/sites/puzzles/src/styles/global.css
index 39d5301..31358b5 100644
--- a/sites/puzzles/src/styles/global.css
+++ b/sites/puzzles/src/styles/global.css
@@ -193,6 +193,20 @@
   [class*="border"] {
     @apply border-border;
   }
+
+  .social-links {
+    @apply flex items-center gap-4;
+  }
+
+  .social-icon-link {
+    color: color-mix(in srgb, currentColor 72%, transparent);
+    transition: color 180ms ease, transform 180ms ease;
+  }
+
+  .social-icon-link:hover {
+    color: var(--social-color);
+    transform: translateY(-1px);
+  }
 }
 
 @layer base {
diff --git a/sites/reflections/src/components/sections/footer.tsx b/sites/reflections/src/components/sections/footer.tsx
index a23a657..3bc1b7f 100644
--- a/sites/reflections/src/components/sections/footer.tsx
+++ b/sites/reflections/src/components/sections/footer.tsx
@@ -1,83 +1,15 @@
-import { FaXTwitter, FaLinkedin, FaFacebook } from "react-icons/fa6";
-import { Home } from "lucide-react";
-
-const navigation = [
-  {
-    title: "Products",
-    links: [
-      { name: "VAR", href: "/#code-security" },
-      { name: "Credit Transfers", href: "/#why-charter" },
-      { name: "Credit Accounts", href: "/#ai-chatbot" },
-      { name: "Loan Origination", href: "/#ai-chatbot" },
-      { name: "Loan Purchase", href: "/#ai-chatbot" },
-    ],
-  },
-  {
-    title: "Support",
-    links: [
-      { name: "Pricing", href: "/pricing" },
-      { name: "FAQ", href: "/faq" },
-      { name: "Demo", href: "/contact" },
-      { name: "Contact", href: "/contact" },
-    ],
-  },
-  {
-    title: "Company",
-    links: [
-      { name: "About", href: "/about" },
-      { name: "Terms of Service", href: "/terms" },
-      { name: "Privacy Policy", href: "/privacy" },
-    ],
-  },
-];
-
-const socialLinks = [
-  { icon: FaXTwitter, href: "https://twitter.com", label: "Twitter" },
-  { icon: FaFacebook, href: "https://facebook.com", label: "Facebook" },
-  { icon: FaLinkedin, href: "https://linkedin.com", label: "LinkedIn" },
-];
+import SocialLinks from "@/components/social-links";
 
 export default function Footer() {
   return (
-    <footer className="pt-16 md:pt-28 lg:pt-32">
+    <footer className="pt-16 md:pt-24">
       <div className="w-full px-4 md:px-6 lg:px-8">
         <div className="mx-auto max-w-5xl">
-          {/* Navigation Section */}
-          <nav className="flex flex-wrap justify-between gap-x-32 gap-y-20 border-b pb-14 lg:pb-20">
-            
-          </nav>
-
-          {/* Bottom Section */}
-          <div className="py-8">
-          <div className="flex flex-wrap items-center justify-between gap-2">
-            <div className="flex items-center gap-4">
-              <Home className="h-6 w-6" />
-              <p className="text-sm font-medium">
-                © {new Date().getFullYear()} Charter -{" "}
-                <a
-                  href="https://shadcnblocks.com"
-                  className="underline transition-opacity hover:opacity-80"
-                  target="_blank"
-                >
-                  Shadcnblocks.com
-                </a>
-              </p>
+          <div className="border-t py-8">
+            <div className="flex flex-col gap-3">
+              <p className="text-sm font-semibold">Neeldhara Misra</p>
+              <SocialLinks />
             </div>
-            <div className="flex items-center gap-6">
-              {socialLinks.map((link) => (
-                <a
-                  aria-label={link.label}
-                  key={link.href}
-                  href={link.href}
-                  className="hover:text-muted-foreground"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  <link.icon />
-                </a>
-              ))}
-            </div>
-          </div>
           </div>
         </div>
       </div>
diff --git a/sites/reflections/src/components/social-links.tsx b/sites/reflections/src/components/social-links.tsx
new file mode 100644
index 0000000..9c26a90
--- /dev/null
+++ b/sites/reflections/src/components/social-links.tsx
@@ -0,0 +1,104 @@
+import type { CSSProperties, ReactElement } from "react";
+
+type SocialLink = {
+  href: string;
+  label: string;
+  color: string;
+  icon: (props: { className?: string }) => ReactElement;
+};
+
+const socialLinks: SocialLink[] = [
+  {
+    href: "https://x.com/home",
+    label: "X",
+    color: "#525252",
+    icon: (props) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" {...props}>
+        <path d="M5 5l14 14" />
+        <path d="M19 5L5 19" />
+      </svg>
+    ),
+  },
+  {
+    href: "https://bsky.app/profile/neeldhara.bsky.social",
+    label: "Bluesky",
+    color: "#4f83b8",
+    icon: (props) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...props}>
+        <path d="M12 13c-2.9-5.2-6-7.2-8.1-6.4-1.6.7-1 4.4 2.3 7.1" />
+        <path d="M12 13c2.9-5.2 6-7.2 8.1-6.4 1.6.7 1 4.4-2.3 7.1" />
+        <path d="M12 13c-2.3 1.6-3.6 3.1-3.3 4.6.3 1.4 2.1 1.8 3.3.2" />
+        <path d="M12 13c2.3 1.6 3.6 3.1 3.3 4.6-.3 1.4-2.1 1.8-3.3.2" />
+      </svg>
+    ),
+  },
+  {
+    href: "https://www.linkedin.com/in/neeldhara-misra-a54b6920/",
+    label: "LinkedIn",
+    color: "#496f9e",
+    icon: (props) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...props}>
+        <rect x="4.5" y="4.5" width="15" height="15" rx="2.5" />
+        <path d="M8 10.5v5.5" />
+        <path d="M11.5 16v-5.5" />
+        <path d="M11.5 13.1c0-1.7 1-2.7 2.3-2.7 1.5 0 2.2 1 2.2 2.7V16" />
+        <path d="M8 8h.01" />
+      </svg>
+    ),
+  },
+  {
+    href: "https://mathstodon.xyz/@neeldhara",
+    label: "Mastodon",
+    color: "#7464a8",
+    icon: (props) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...props}>
+        <path d="M7 16.5c1.4.8 3.1 1.1 5.2 1 3.7-.1 5.8-1.7 6.1-4.8l.2-3.6c.2-3.1-1.4-4.7-4.5-4.7h-4c-3.1 0-4.7 1.6-4.5 4.7l.3 5.1c.2 3.4 2.2 5.2 5.9 5.3" />
+        <path d="M8.5 13V9.6c0-1.1.7-1.8 1.7-1.8.8 0 1.4.4 1.8 1.1.4-.7 1-1.1 1.8-1.1 1 0 1.7.7 1.7 1.8V13" />
+        <path d="M12 9.4V13" />
+      </svg>
+    ),
+  },
+  {
+    href: "https://www.youtube.com/@neeldhara",
+    label: "YouTube",
+    color: "#b55252",
+    icon: (props) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...props}>
+        <path d="M4.8 8.5c.2-1.2 1.1-2.1 2.3-2.2 1.6-.2 3.2-.3 4.9-.3s3.3.1 4.9.3c1.2.1 2.1 1 2.3 2.2.2 1.1.3 2.2.3 3.5s-.1 2.4-.3 3.5c-.2 1.2-1.1 2.1-2.3 2.2-1.6.2-3.2.3-4.9.3s-3.3-.1-4.9-.3c-1.2-.1-2.1-1-2.3-2.2-.2-1.1-.3-2.2-.3-3.5s.1-2.4.3-3.5Z" />
+        <path d="M10.5 9.5l4 2.5-4 2.5v-5Z" />
+      </svg>
+    ),
+  },
+  {
+    href: "https://www.instagram.com/neeldharamisra",
+    label: "Instagram",
+    color: "#9a6b8c",
+    icon: (props) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...props}>
+        <rect x="5" y="5" width="14" height="14" rx="4" />
+        <circle cx="12" cy="12" r="3.2" />
+        <path d="M16.3 7.8h.01" />
+      </svg>
+    ),
+  },
+];
+
+export default function SocialLinks({ className = "" }: { className?: string }) {
+  return (
+    <nav className={`social-links ${className}`} aria-label="Social links">
+      {socialLinks.map((link) => (
+        <a
+          key={link.href}
+          href={link.href}
+          aria-label={link.label}
+          className="social-icon-link"
+          style={{ "--social-color": link.color } as CSSProperties}
+          target="_blank"
+          rel="me noopener noreferrer"
+        >
+          <link.icon className="h-5 w-5" />
+        </a>
+      ))}
+    </nav>
+  );
+}
diff --git a/sites/reflections/src/styles/global.css b/sites/reflections/src/styles/global.css
index 49799b2..c6c49a0 100644
--- a/sites/reflections/src/styles/global.css
+++ b/sites/reflections/src/styles/global.css
@@ -193,6 +193,20 @@
   [class*="border"] {
     @apply border-border;
   }
+
+  .social-links {
+    @apply flex items-center gap-4;
+  }
+
+  .social-icon-link {
+    color: color-mix(in srgb, currentColor 72%, transparent);
+    transition: color 180ms ease, transform 180ms ease;
+  }
+
+  .social-icon-link:hover {
+    color: var(--social-color);
+    transform: translateY(-1px);
+  }
 }
 
 @layer base {
diff --git a/sites/research/src/components/sections/footer.tsx b/sites/research/src/components/sections/footer.tsx
index a23a657..3bc1b7f 100644
--- a/sites/research/src/components/sections/footer.tsx
+++ b/sites/research/src/components/sections/footer.tsx
@@ -1,83 +1,15 @@
-import { FaXTwitter, FaLinkedin, FaFacebook } from "react-icons/fa6";
-import { Home } from "lucide-react";
-
-const navigation = [
-  {
-    title: "Products",
-    links: [
-      { name: "VAR", href: "/#code-security" },
-      { name: "Credit Transfers", href: "/#why-charter" },
-      { name: "Credit Accounts", href: "/#ai-chatbot" },
-      { name: "Loan Origination", href: "/#ai-chatbot" },
-      { name: "Loan Purchase", href: "/#ai-chatbot" },
-    ],
-  },
-  {
-    title: "Support",
-    links: [
-      { name: "Pricing", href: "/pricing" },
-      { name: "FAQ", href: "/faq" },
-      { name: "Demo", href: "/contact" },
-      { name: "Contact", href: "/contact" },
-    ],
-  },
-  {
-    title: "Company",
-    links: [
-      { name: "About", href: "/about" },
-      { name: "Terms of Service", href: "/terms" },
-      { name: "Privacy Policy", href: "/privacy" },
-    ],
-  },
-];
-
-const socialLinks = [
-  { icon: FaXTwitter, href: "https://twitter.com", label: "Twitter" },
-  { icon: FaFacebook, href: "https://facebook.com", label: "Facebook" },
-  { icon: FaLinkedin, href: "https://linkedin.com", label: "LinkedIn" },
-];
+import SocialLinks from "@/components/social-links";
 
 export default function Footer() {
   return (
-    <footer className="pt-16 md:pt-28 lg:pt-32">
+    <footer className="pt-16 md:pt-24">
       <div className="w-full px-4 md:px-6 lg:px-8">
         <div className="mx-auto max-w-5xl">
-          {/* Navigation Section */}
-          <nav className="flex flex-wrap justify-between gap-x-32 gap-y-20 border-b pb-14 lg:pb-20">
-            
-          </nav>
-
-          {/* Bottom Section */}
-          <div className="py-8">
-          <div className="flex flex-wrap items-center justify-between gap-2">
-            <div className="flex items-center gap-4">
-              <Home className="h-6 w-6" />
-              <p className="text-sm font-medium">
-                © {new Date().getFullYear()} Charter -{" "}
-                <a
-                  href="https://shadcnblocks.com"
-                  className="underline transition-opacity hover:opacity-80"
-                  target="_blank"
-                >
-                  Shadcnblocks.com
-                </a>
-              </p>
+          <div className="border-t py-8">
+            <div className="flex flex-col gap-3">
+              <p className="text-sm font-semibold">Neeldhara Misra</p>
+              <SocialLinks />
             </div>
-            <div className="flex items-center gap-6">
-              {socialLinks.map((link) => (
-                <a
-                  aria-label={link.label}
-                  key={link.href}
-                  href={link.href}
-                  className="hover:text-muted-foreground"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  <link.icon />
-                </a>
-              ))}
-            </div>
-          </div>
           </div>
         </div>
       </div>
diff --git a/sites/research/src/components/social-links.tsx b/sites/research/src/components/social-links.tsx
new file mode 100644
index 0000000..9c26a90
--- /dev/null
+++ b/sites/research/src/components/social-links.tsx
@@ -0,0 +1,104 @@
+import type { CSSProperties, ReactElement } from "react";
+
+type SocialLink = {
+  href: string;
+  label: string;
+  color: string;
+  icon: (props: { className?: string }) => ReactElement;
+};
+
+const socialLinks: SocialLink[] = [
+  {
+    href: "https://x.com/home",
+    label: "X",
+    color: "#525252",
+    icon: (props) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" {...props}>
+        <path d="M5 5l14 14" />
+        <path d="M19 5L5 19" />
+      </svg>
+    ),
+  },
+  {
+    href: "https://bsky.app/profile/neeldhara.bsky.social",
+    label: "Bluesky",
+    color: "#4f83b8",
+    icon: (props) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...props}>
+        <path d="M12 13c-2.9-5.2-6-7.2-8.1-6.4-1.6.7-1 4.4 2.3 7.1" />
+        <path d="M12 13c2.9-5.2 6-7.2 8.1-6.4 1.6.7 1 4.4-2.3 7.1" />
+        <path d="M12 13c-2.3 1.6-3.6 3.1-3.3 4.6.3 1.4 2.1 1.8 3.3.2" />
+        <path d="M12 13c2.3 1.6 3.6 3.1 3.3 4.6-.3 1.4-2.1 1.8-3.3.2" />
+      </svg>
+    ),
+  },
+  {
+    href: "https://www.linkedin.com/in/neeldhara-misra-a54b6920/",
+    label: "LinkedIn",
+    color: "#496f9e",
+    icon: (props) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...props}>
+        <rect x="4.5" y="4.5" width="15" height="15" rx="2.5" />
+        <path d="M8 10.5v5.5" />
+        <path d="M11.5 16v-5.5" />
+        <path d="M11.5 13.1c0-1.7 1-2.7 2.3-2.7 1.5 0 2.2 1 2.2 2.7V16" />
+        <path d="M8 8h.01" />
+      </svg>
+    ),
+  },
+  {
+    href: "https://mathstodon.xyz/@neeldhara",
+    label: "Mastodon",
+    color: "#7464a8",
+    icon: (props) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...props}>
+        <path d="M7 16.5c1.4.8 3.1 1.1 5.2 1 3.7-.1 5.8-1.7 6.1-4.8l.2-3.6c.2-3.1-1.4-4.7-4.5-4.7h-4c-3.1 0-4.7 1.6-4.5 4.7l.3 5.1c.2 3.4 2.2 5.2 5.9 5.3" />
+        <path d="M8.5 13V9.6c0-1.1.7-1.8 1.7-1.8.8 0 1.4.4 1.8 1.1.4-.7 1-1.1 1.8-1.1 1 0 1.7.7 1.7 1.8V13" />
+        <path d="M12 9.4V13" />
+      </svg>
+    ),
+  },
+  {
+    href: "https://www.youtube.com/@neeldhara",
+    label: "YouTube",
+    color: "#b55252",
+    icon: (props) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...props}>
+        <path d="M4.8 8.5c.2-1.2 1.1-2.1 2.3-2.2 1.6-.2 3.2-.3 4.9-.3s3.3.1 4.9.3c1.2.1 2.1 1 2.3 2.2.2 1.1.3 2.2.3 3.5s-.1 2.4-.3 3.5c-.2 1.2-1.1 2.1-2.3 2.2-1.6.2-3.2.3-4.9.3s-3.3-.1-4.9-.3c-1.2-.1-2.1-1-2.3-2.2-.2-1.1-.3-2.2-.3-3.5s.1-2.4.3-3.5Z" />
+        <path d="M10.5 9.5l4 2.5-4 2.5v-5Z" />
+      </svg>
+    ),
+  },
+  {
+    href: "https://www.instagram.com/neeldharamisra",
+    label: "Instagram",
+    color: "#9a6b8c",
+    icon: (props) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...props}>
+        <rect x="5" y="5" width="14" height="14" rx="4" />
+        <circle cx="12" cy="12" r="3.2" />
+        <path d="M16.3 7.8h.01" />
+      </svg>
+    ),
+  },
+];
+
+export default function SocialLinks({ className = "" }: { className?: string }) {
+  return (
+    <nav className={`social-links ${className}`} aria-label="Social links">
+      {socialLinks.map((link) => (
+        <a
+          key={link.href}
+          href={link.href}
+          aria-label={link.label}
+          className="social-icon-link"
+          style={{ "--social-color": link.color } as CSSProperties}
+          target="_blank"
+          rel="me noopener noreferrer"
+        >
+          <link.icon className="h-5 w-5" />
+        </a>
+      ))}
+    </nav>
+  );
+}
diff --git a/sites/research/src/styles/global.css b/sites/research/src/styles/global.css
index ab4fb0b..77a5bc8 100644
--- a/sites/research/src/styles/global.css
+++ b/sites/research/src/styles/global.css
@@ -193,6 +193,20 @@
   [class*="border"] {
     @apply border-border;
   }
+
+  .social-links {
+    @apply flex items-center gap-4;
+  }
+
+  .social-icon-link {
+    color: color-mix(in srgb, currentColor 72%, transparent);
+    transition: color 180ms ease, transform 180ms ease;
+  }
+
+  .social-icon-link:hover {
+    color: var(--social-color);
+    transform: translateY(-1px);
+  }
 }
 
 @layer base {
diff --git a/sites/reviews/src/components/sections/footer.tsx b/sites/reviews/src/components/sections/footer.tsx
index a23a657..3bc1b7f 100644
--- a/sites/reviews/src/components/sections/footer.tsx
+++ b/sites/reviews/src/components/sections/footer.tsx
@@ -1,83 +1,15 @@
-import { FaXTwitter, FaLinkedin, FaFacebook } from "react-icons/fa6";
-import { Home } from "lucide-react";
-
-const navigation = [
-  {
-    title: "Products",
-    links: [
-      { name: "VAR", href: "/#code-security" },
-      { name: "Credit Transfers", href: "/#why-charter" },
-      { name: "Credit Accounts", href: "/#ai-chatbot" },
-      { name: "Loan Origination", href: "/#ai-chatbot" },
-      { name: "Loan Purchase", href: "/#ai-chatbot" },
-    ],
-  },
-  {
-    title: "Support",
-    links: [
-      { name: "Pricing", href: "/pricing" },
-      { name: "FAQ", href: "/faq" },
-      { name: "Demo", href: "/contact" },
-      { name: "Contact", href: "/contact" },
-    ],
-  },
-  {
-    title: "Company",
-    links: [
-      { name: "About", href: "/about" },
-      { name: "Terms of Service", href: "/terms" },
-      { name: "Privacy Policy", href: "/privacy" },
-    ],
-  },
-];
-
-const socialLinks = [
-  { icon: FaXTwitter, href: "https://twitter.com", label: "Twitter" },
-  { icon: FaFacebook, href: "https://facebook.com", label: "Facebook" },
-  { icon: FaLinkedin, href: "https://linkedin.com", label: "LinkedIn" },
-];
+import SocialLinks from "@/components/social-links";
 
 export default function Footer() {
   return (
-    <footer className="pt-16 md:pt-28 lg:pt-32">
+    <footer className="pt-16 md:pt-24">
       <div className="w-full px-4 md:px-6 lg:px-8">
         <div className="mx-auto max-w-5xl">
-          {/* Navigation Section */}
-          <nav className="flex flex-wrap justify-between gap-x-32 gap-y-20 border-b pb-14 lg:pb-20">
-            
-          </nav>
-
-          {/* Bottom Section */}
-          <div className="py-8">
-          <div className="flex flex-wrap items-center justify-between gap-2">
-            <div className="flex items-center gap-4">
-              <Home className="h-6 w-6" />
-              <p className="text-sm font-medium">
-                © {new Date().getFullYear()} Charter -{" "}
-                <a
-                  href="https://shadcnblocks.com"
-                  className="underline transition-opacity hover:opacity-80"
-                  target="_blank"
-                >
-                  Shadcnblocks.com
-                </a>
-              </p>
+          <div className="border-t py-8">
+            <div className="flex flex-col gap-3">
+              <p className="text-sm font-semibold">Neeldhara Misra</p>
+              <SocialLinks />
             </div>
-            <div className="flex items-center gap-6">
-              {socialLinks.map((link) => (
-                <a
-                  aria-label={link.label}
-                  key={link.href}
-                  href={link.href}
-                  className="hover:text-muted-foreground"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  <link.icon />
-                </a>
-              ))}
-            </div>
-          </div>
           </div>
         </div>
       </div>
diff --git a/sites/reviews/src/components/social-links.tsx b/sites/reviews/src/components/social-links.tsx
new file mode 100644
index 0000000..9c26a90
--- /dev/null
+++ b/sites/reviews/src/components/social-links.tsx
@@ -0,0 +1,104 @@
+import type { CSSProperties, ReactElement } from "react";
+
+type SocialLink = {
+  href: string;
+  label: string;
+  color: string;
+  icon: (props: { className?: string }) => ReactElement;
+};
+
+const socialLinks: SocialLink[] = [
+  {
+    href: "https://x.com/home",
+    label: "X",
+    color: "#525252",
+    icon: (props) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" {...props}>
+        <path d="M5 5l14 14" />
+        <path d="M19 5L5 19" />
+      </svg>
+    ),
+  },
+  {
+    href: "https://bsky.app/profile/neeldhara.bsky.social",
+    label: "Bluesky",
+    color: "#4f83b8",
+    icon: (props) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...props}>
+        <path d="M12 13c-2.9-5.2-6-7.2-8.1-6.4-1.6.7-1 4.4 2.3 7.1" />
+        <path d="M12 13c2.9-5.2 6-7.2 8.1-6.4 1.6.7 1 4.4-2.3 7.1" />
+        <path d="M12 13c-2.3 1.6-3.6 3.1-3.3 4.6.3 1.4 2.1 1.8 3.3.2" />
+        <path d="M12 13c2.3 1.6 3.6 3.1 3.3 4.6-.3 1.4-2.1 1.8-3.3.2" />
+      </svg>
+    ),
+  },
+  {
+    href: "https://www.linkedin.com/in/neeldhara-misra-a54b6920/",
+    label: "LinkedIn",
+    color: "#496f9e",
+    icon: (props) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...props}>
+        <rect x="4.5" y="4.5" width="15" height="15" rx="2.5" />
+        <path d="M8 10.5v5.5" />
+        <path d="M11.5 16v-5.5" />
+        <path d="M11.5 13.1c0-1.7 1-2.7 2.3-2.7 1.5 0 2.2 1 2.2 2.7V16" />
+        <path d="M8 8h.01" />
+      </svg>
+    ),
+  },
+  {
+    href: "https://mathstodon.xyz/@neeldhara",
+    label: "Mastodon",
+    color: "#7464a8",
+    icon: (props) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...props}>
+        <path d="M7 16.5c1.4.8 3.1 1.1 5.2 1 3.7-.1 5.8-1.7 6.1-4.8l.2-3.6c.2-3.1-1.4-4.7-4.5-4.7h-4c-3.1 0-4.7 1.6-4.5 4.7l.3 5.1c.2 3.4 2.2 5.2 5.9 5.3" />
+        <path d="M8.5 13V9.6c0-1.1.7-1.8 1.7-1.8.8 0 1.4.4 1.8 1.1.4-.7 1-1.1 1.8-1.1 1 0 1.7.7 1.7 1.8V13" />
+        <path d="M12 9.4V13" />
+      </svg>
+    ),
+  },
+  {
+    href: "https://www.youtube.com/@neeldhara",
+    label: "YouTube",
+    color: "#b55252",
+    icon: (props) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...props}>
+        <path d="M4.8 8.5c.2-1.2 1.1-2.1 2.3-2.2 1.6-.2 3.2-.3 4.9-.3s3.3.1 4.9.3c1.2.1 2.1 1 2.3 2.2.2 1.1.3 2.2.3 3.5s-.1 2.4-.3 3.5c-.2 1.2-1.1 2.1-2.3 2.2-1.6.2-3.2.3-4.9.3s-3.3-.1-4.9-.3c-1.2-.1-2.1-1-2.3-2.2-.2-1.1-.3-2.2-.3-3.5s.1-2.4.3-3.5Z" />
+        <path d="M10.5 9.5l4 2.5-4 2.5v-5Z" />
+      </svg>
+    ),
+  },
+  {
+    href: "https://www.instagram.com/neeldharamisra",
+    label: "Instagram",
+    color: "#9a6b8c",
+    icon: (props) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...props}>
+        <rect x="5" y="5" width="14" height="14" rx="4" />
+        <circle cx="12" cy="12" r="3.2" />
+        <path d="M16.3 7.8h.01" />
+      </svg>
+    ),
+  },
+];
+
+export default function SocialLinks({ className = "" }: { className?: string }) {
+  return (
+    <nav className={`social-links ${className}`} aria-label="Social links">
+      {socialLinks.map((link) => (
+        <a
+          key={link.href}
+          href={link.href}
+          aria-label={link.label}
+          className="social-icon-link"
+          style={{ "--social-color": link.color } as CSSProperties}
+          target="_blank"
+          rel="me noopener noreferrer"
+        >
+          <link.icon className="h-5 w-5" />
+        </a>
+      ))}
+    </nav>
+  );
+}
diff --git a/sites/reviews/src/styles/global.css b/sites/reviews/src/styles/global.css
index 0f97232..e333af9 100644
--- a/sites/reviews/src/styles/global.css
+++ b/sites/reviews/src/styles/global.css
@@ -193,6 +193,20 @@
   [class*="border"] {
     @apply border-border;
   }
+
+  .social-links {
+    @apply flex items-center gap-4;
+  }
+
+  .social-icon-link {
+    color: color-mix(in srgb, currentColor 72%, transparent);
+    transition: color 180ms ease, transform 180ms ease;
+  }
+
+  .social-icon-link:hover {
+    color: var(--social-color);
+    transform: translateY(-1px);
+  }
 }
 
 @layer base {
diff --git a/sites/vibes/src/components/sections/footer.tsx b/sites/vibes/src/components/sections/footer.tsx
index a23a657..3bc1b7f 100644
--- a/sites/vibes/src/components/sections/footer.tsx
+++ b/sites/vibes/src/components/sections/footer.tsx
@@ -1,83 +1,15 @@
-import { FaXTwitter, FaLinkedin, FaFacebook } from "react-icons/fa6";
-import { Home } from "lucide-react";
-
-const navigation = [
-  {
-    title: "Products",
-    links: [
-      { name: "VAR", href: "/#code-security" },
-      { name: "Credit Transfers", href: "/#why-charter" },
-      { name: "Credit Accounts", href: "/#ai-chatbot" },
-      { name: "Loan Origination", href: "/#ai-chatbot" },
-      { name: "Loan Purchase", href: "/#ai-chatbot" },
-    ],
-  },
-  {
-    title: "Support",
-    links: [
-      { name: "Pricing", href: "/pricing" },
-      { name: "FAQ", href: "/faq" },
-      { name: "Demo", href: "/contact" },
-      { name: "Contact", href: "/contact" },
-    ],
-  },
-  {
-    title: "Company",
-    links: [
-      { name: "About", href: "/about" },
-      { name: "Terms of Service", href: "/terms" },
-      { name: "Privacy Policy", href: "/privacy" },
-    ],
-  },
-];
-
-const socialLinks = [
-  { icon: FaXTwitter, href: "https://twitter.com", label: "Twitter" },
-  { icon: FaFacebook, href: "https://facebook.com", label: "Facebook" },
-  { icon: FaLinkedin, href: "https://linkedin.com", label: "LinkedIn" },
-];
+import SocialLinks from "@/components/social-links";
 
 export default function Footer() {
   return (
-    <footer className="pt-16 md:pt-28 lg:pt-32">
+    <footer className="pt-16 md:pt-24">
       <div className="w-full px-4 md:px-6 lg:px-8">
         <div className="mx-auto max-w-5xl">
-          {/* Navigation Section */}
-          <nav className="flex flex-wrap justify-between gap-x-32 gap-y-20 border-b pb-14 lg:pb-20">
-            
-          </nav>
-
-          {/* Bottom Section */}
-          <div className="py-8">
-          <div className="flex flex-wrap items-center justify-between gap-2">
-            <div className="flex items-center gap-4">
-              <Home className="h-6 w-6" />
-              <p className="text-sm font-medium">
-                © {new Date().getFullYear()} Charter -{" "}
-                <a
-                  href="https://shadcnblocks.com"
-                  className="underline transition-opacity hover:opacity-80"
-                  target="_blank"
-                >
-                  Shadcnblocks.com
-                </a>
-              </p>
+          <div className="border-t py-8">
+            <div className="flex flex-col gap-3">
+              <p className="text-sm font-semibold">Neeldhara Misra</p>
+              <SocialLinks />
             </div>
-            <div className="flex items-center gap-6">
-              {socialLinks.map((link) => (
-                <a
-                  aria-label={link.label}
-                  key={link.href}
-                  href={link.href}
-                  className="hover:text-muted-foreground"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  <link.icon />
-                </a>
-              ))}
-            </div>
-          </div>
           </div>
         </div>
       </div>
diff --git a/sites/vibes/src/components/social-links.tsx b/sites/vibes/src/components/social-links.tsx
new file mode 100644
index 0000000..9c26a90
--- /dev/null
+++ b/sites/vibes/src/components/social-links.tsx
@@ -0,0 +1,104 @@
+import type { CSSProperties, ReactElement } from "react";
+
+type SocialLink = {
+  href: string;
+  label: string;
+  color: string;
+  icon: (props: { className?: string }) => ReactElement;
+};
+
+const socialLinks: SocialLink[] = [
+  {
+    href: "https://x.com/home",
+    label: "X",
+    color: "#525252",
+    icon: (props) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" {...props}>
+        <path d="M5 5l14 14" />
+        <path d="M19 5L5 19" />
+      </svg>
+    ),
+  },
+  {
+    href: "https://bsky.app/profile/neeldhara.bsky.social",
+    label: "Bluesky",
+    color: "#4f83b8",
+    icon: (props) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...props}>
+        <path d="M12 13c-2.9-5.2-6-7.2-8.1-6.4-1.6.7-1 4.4 2.3 7.1" />
+        <path d="M12 13c2.9-5.2 6-7.2 8.1-6.4 1.6.7 1 4.4-2.3 7.1" />
+        <path d="M12 13c-2.3 1.6-3.6 3.1-3.3 4.6.3 1.4 2.1 1.8 3.3.2" />
+        <path d="M12 13c2.3 1.6 3.6 3.1 3.3 4.6-.3 1.4-2.1 1.8-3.3.2" />
+      </svg>
+    ),
+  },
+  {
+    href: "https://www.linkedin.com/in/neeldhara-misra-a54b6920/",
+    label: "LinkedIn",
+    color: "#496f9e",
+    icon: (props) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...props}>
+        <rect x="4.5" y="4.5" width="15" height="15" rx="2.5" />
+        <path d="M8 10.5v5.5" />
+        <path d="M11.5 16v-5.5" />
+        <path d="M11.5 13.1c0-1.7 1-2.7 2.3-2.7 1.5 0 2.2 1 2.2 2.7V16" />
+        <path d="M8 8h.01" />
+      </svg>
+    ),
+  },
+  {
+    href: "https://mathstodon.xyz/@neeldhara",
+    label: "Mastodon",
+    color: "#7464a8",
+    icon: (props) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...props}>
+        <path d="M7 16.5c1.4.8 3.1 1.1 5.2 1 3.7-.1 5.8-1.7 6.1-4.8l.2-3.6c.2-3.1-1.4-4.7-4.5-4.7h-4c-3.1 0-4.7 1.6-4.5 4.7l.3 5.1c.2 3.4 2.2 5.2 5.9 5.3" />
+        <path d="M8.5 13V9.6c0-1.1.7-1.8 1.7-1.8.8 0 1.4.4 1.8 1.1.4-.7 1-1.1 1.8-1.1 1 0 1.7.7 1.7 1.8V13" />
+        <path d="M12 9.4V13" />
+      </svg>
+    ),
+  },
+  {
+    href: "https://www.youtube.com/@neeldhara",
+    label: "YouTube",
+    color: "#b55252",
+    icon: (props) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...props}>
+        <path d="M4.8 8.5c.2-1.2 1.1-2.1 2.3-2.2 1.6-.2 3.2-.3 4.9-.3s3.3.1 4.9.3c1.2.1 2.1 1 2.3 2.2.2 1.1.3 2.2.3 3.5s-.1 2.4-.3 3.5c-.2 1.2-1.1 2.1-2.3 2.2-1.6.2-3.2.3-4.9.3s-3.3-.1-4.9-.3c-1.2-.1-2.1-1-2.3-2.2-.2-1.1-.3-2.2-.3-3.5s.1-2.4.3-3.5Z" />
+        <path d="M10.5 9.5l4 2.5-4 2.5v-5Z" />
+      </svg>
+    ),
+  },
+  {
+    href: "https://www.instagram.com/neeldharamisra",
+    label: "Instagram",
+    color: "#9a6b8c",
+    icon: (props) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...props}>
+        <rect x="5" y="5" width="14" height="14" rx="4" />
+        <circle cx="12" cy="12" r="3.2" />
+        <path d="M16.3 7.8h.01" />
+      </svg>
+    ),
+  },
+];
+
+export default function SocialLinks({ className = "" }: { className?: string }) {
+  return (
+    <nav className={`social-links ${className}`} aria-label="Social links">
+      {socialLinks.map((link) => (
+        <a
+          key={link.href}
+          href={link.href}
+          aria-label={link.label}
+          className="social-icon-link"
+          style={{ "--social-color": link.color } as CSSProperties}
+          target="_blank"
+          rel="me noopener noreferrer"
+        >
+          <link.icon className="h-5 w-5" />
+        </a>
+      ))}
+    </nav>
+  );
+}
diff --git a/sites/vibes/src/styles/global.css b/sites/vibes/src/styles/global.css
index d41cd71..38e1f98 100644
--- a/sites/vibes/src/styles/global.css
+++ b/sites/vibes/src/styles/global.css
@@ -193,6 +193,20 @@
   [class*="border"] {
     @apply border-border;
   }
+
+  .social-links {
+    @apply flex items-center gap-4;
+  }
+
+  .social-icon-link {
+    color: color-mix(in srgb, currentColor 72%, transparent);
+    transition: color 180ms ease, transform 180ms ease;
+  }
+
+  .social-icon-link:hover {
+    color: var(--social-color);
+    transform: translateY(-1px);
+  }
 }
 
 @layer base {
diff --git a/src/components/sections/footer.tsx b/src/components/sections/footer.tsx
index a23a657..3bc1b7f 100644
--- a/src/components/sections/footer.tsx
+++ b/src/components/sections/footer.tsx
@@ -1,83 +1,15 @@
-import { FaXTwitter, FaLinkedin, FaFacebook } from "react-icons/fa6";
-import { Home } from "lucide-react";
-
-const navigation = [
-  {
-    title: "Products",
-    links: [
-      { name: "VAR", href: "/#code-security" },
-      { name: "Credit Transfers", href: "/#why-charter" },
-      { name: "Credit Accounts", href: "/#ai-chatbot" },
-      { name: "Loan Origination", href: "/#ai-chatbot" },
-      { name: "Loan Purchase", href: "/#ai-chatbot" },
-    ],
-  },
-  {
-    title: "Support",
-    links: [
-      { name: "Pricing", href: "/pricing" },
-      { name: "FAQ", href: "/faq" },
-      { name: "Demo", href: "/contact" },
-      { name: "Contact", href: "/contact" },
-    ],
-  },
-  {
-    title: "Company",
-    links: [
-      { name: "About", href: "/about" },
-      { name: "Terms of Service", href: "/terms" },
-      { name: "Privacy Policy", href: "/privacy" },
-    ],
-  },
-];
-
-const socialLinks = [
-  { icon: FaXTwitter, href: "https://twitter.com", label: "Twitter" },
-  { icon: FaFacebook, href: "https://facebook.com", label: "Facebook" },
-  { icon: FaLinkedin, href: "https://linkedin.com", label: "LinkedIn" },
-];
+import SocialLinks from "@/components/social-links";
 
 export default function Footer() {
   return (
-    <footer className="pt-16 md:pt-28 lg:pt-32">
+    <footer className="pt-16 md:pt-24">
       <div className="w-full px-4 md:px-6 lg:px-8">
         <div className="mx-auto max-w-5xl">
-          {/* Navigation Section */}
-          <nav className="flex flex-wrap justify-between gap-x-32 gap-y-20 border-b pb-14 lg:pb-20">
-            
-          </nav>
-
-          {/* Bottom Section */}
-          <div className="py-8">
-          <div className="flex flex-wrap items-center justify-between gap-2">
-            <div className="flex items-center gap-4">
-              <Home className="h-6 w-6" />
-              <p className="text-sm font-medium">
-                © {new Date().getFullYear()} Charter -{" "}
-                <a
-                  href="https://shadcnblocks.com"
-                  className="underline transition-opacity hover:opacity-80"
-                  target="_blank"
-                >
-                  Shadcnblocks.com
-                </a>
-              </p>
+          <div className="border-t py-8">
+            <div className="flex flex-col gap-3">
+              <p className="text-sm font-semibold">Neeldhara Misra</p>
+              <SocialLinks />
             </div>
-            <div className="flex items-center gap-6">
-              {socialLinks.map((link) => (
-                <a
-                  aria-label={link.label}
-                  key={link.href}
-                  href={link.href}
-                  className="hover:text-muted-foreground"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  <link.icon />
-                </a>
-              ))}
-            </div>
-          </div>
           </div>
         </div>
       </div>
diff --git a/src/components/social-links.tsx b/src/components/social-links.tsx
new file mode 100644
index 0000000..9c26a90
--- /dev/null
+++ b/src/components/social-links.tsx
@@ -0,0 +1,104 @@
+import type { CSSProperties, ReactElement } from "react";
+
+type SocialLink = {
+  href: string;
+  label: string;
+  color: string;
+  icon: (props: { className?: string }) => ReactElement;
+};
+
+const socialLinks: SocialLink[] = [
+  {
+    href: "https://x.com/home",
+    label: "X",
+    color: "#525252",
+    icon: (props) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" {...props}>
+        <path d="M5 5l14 14" />
+        <path d="M19 5L5 19" />
+      </svg>
+    ),
+  },
+  {
+    href: "https://bsky.app/profile/neeldhara.bsky.social",
+    label: "Bluesky",
+    color: "#4f83b8",
+    icon: (props) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...props}>
+        <path d="M12 13c-2.9-5.2-6-7.2-8.1-6.4-1.6.7-1 4.4 2.3 7.1" />
+        <path d="M12 13c2.9-5.2 6-7.2 8.1-6.4 1.6.7 1 4.4-2.3 7.1" />
+        <path d="M12 13c-2.3 1.6-3.6 3.1-3.3 4.6.3 1.4 2.1 1.8 3.3.2" />
+        <path d="M12 13c2.3 1.6 3.6 3.1 3.3 4.6-.3 1.4-2.1 1.8-3.3.2" />
+      </svg>
+    ),
+  },
+  {
+    href: "https://www.linkedin.com/in/neeldhara-misra-a54b6920/",
+    label: "LinkedIn",
+    color: "#496f9e",
+    icon: (props) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...props}>
+        <rect x="4.5" y="4.5" width="15" height="15" rx="2.5" />
+        <path d="M8 10.5v5.5" />
+        <path d="M11.5 16v-5.5" />
+        <path d="M11.5 13.1c0-1.7 1-2.7 2.3-2.7 1.5 0 2.2 1 2.2 2.7V16" />
+        <path d="M8 8h.01" />
+      </svg>
+    ),
+  },
+  {
+    href: "https://mathstodon.xyz/@neeldhara",
+    label: "Mastodon",
+    color: "#7464a8",
+    icon: (props) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...props}>
+        <path d="M7 16.5c1.4.8 3.1 1.1 5.2 1 3.7-.1 5.8-1.7 6.1-4.8l.2-3.6c.2-3.1-1.4-4.7-4.5-4.7h-4c-3.1 0-4.7 1.6-4.5 4.7l.3 5.1c.2 3.4 2.2 5.2 5.9 5.3" />
+        <path d="M8.5 13V9.6c0-1.1.7-1.8 1.7-1.8.8 0 1.4.4 1.8 1.1.4-.7 1-1.1 1.8-1.1 1 0 1.7.7 1.7 1.8V13" />
+        <path d="M12 9.4V13" />
+      </svg>
+    ),
+  },
+  {
+    href: "https://www.youtube.com/@neeldhara",
+    label: "YouTube",
+    color: "#b55252",
+    icon: (props) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...props}>
+        <path d="M4.8 8.5c.2-1.2 1.1-2.1 2.3-2.2 1.6-.2 3.2-.3 4.9-.3s3.3.1 4.9.3c1.2.1 2.1 1 2.3 2.2.2 1.1.3 2.2.3 3.5s-.1 2.4-.3 3.5c-.2 1.2-1.1 2.1-2.3 2.2-1.6.2-3.2.3-4.9.3s-3.3-.1-4.9-.3c-1.2-.1-2.1-1-2.3-2.2-.2-1.1-.3-2.2-.3-3.5s.1-2.4.3-3.5Z" />
+        <path d="M10.5 9.5l4 2.5-4 2.5v-5Z" />
+      </svg>
+    ),
+  },
+  {
+    href: "https://www.instagram.com/neeldharamisra",
+    label: "Instagram",
+    color: "#9a6b8c",
+    icon: (props) => (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...props}>
+        <rect x="5" y="5" width="14" height="14" rx="4" />
+        <circle cx="12" cy="12" r="3.2" />
+        <path d="M16.3 7.8h.01" />
+      </svg>
+    ),
+  },
+];
+
+export default function SocialLinks({ className = "" }: { className?: string }) {
+  return (
+    <nav className={`social-links ${className}`} aria-label="Social links">
+      {socialLinks.map((link) => (
+        <a
+          key={link.href}
+          href={link.href}
+          aria-label={link.label}
+          className="social-icon-link"
+          style={{ "--social-color": link.color } as CSSProperties}
+          target="_blank"
+          rel="me noopener noreferrer"
+        >
+          <link.icon className="h-5 w-5" />
+        </a>
+      ))}
+    </nav>
+  );
+}
diff --git a/src/styles/global.css b/src/styles/global.css
index 6276576..edaee9c 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -151,6 +151,20 @@
   [class*="border"] {
     @apply border-border;
   }
+
+  .social-links {
+    @apply flex items-center gap-4;
+  }
+
+  .social-icon-link {
+    color: color-mix(in srgb, currentColor 72%, transparent);
+    transition: color 180ms ease, transform 180ms ease;
+  }
+
+  .social-icon-link:hover {
+    color: var(--social-color);
+    transform: translateY(-1px);
+  }
 }
 
 @layer base {