feat: use brand logos in sharing options

package-lock.json

@@ -12,6 +12,7 @@
         "next": "^16.3.4",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
+        "react-icons": "^5.7.0",
         "sharp": "0.35.4",
         "three": "^0.180.0"
       },
@@ -5256,6 +5257,15 @@
         "react": "^19.2.8"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.7.0",
+      "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/react-icons/-/react-icons-5.7.0.tgz",
+      "integrity": "sha512-LBLy340Rzqy6+/yVhZKT3B/QpP1BZaesGqasf09HPOBzRarcDIFH0WwXlXQfE7q7ipxK4MSiC5DIBWURCny6fw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://package-mirror.liara.ir/artifactory/api/npm/npm/react-is/-/react-is-16.13.1.tgz",

package.json

@@ -17,6 +17,7 @@
     "next": "^16.3.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-icons": "^5.7.0",
     "sharp": "0.35.4",
     "three": "^0.180.0"
   },

src/components/CaseStudyDrawer.module.css

@@ -653,6 +653,18 @@
   height: var(--size-icon-md);
 }
 
+.shareOptions a[data-share-service='telegram'] svg {
+  color: #26a5e4;
+}
+
+.shareOptions a[data-share-service='whatsapp'] svg {
+  color: #25d366;
+}
+
+.shareOptions a[data-share-service='linkedin'] svg {
+  color: #0a66c2;
+}
+
 .copyLinkButton {
   display: flex;
   width: 100%;

src/components/CaseStudyShare.tsx

@@ -1,15 +1,13 @@
 'use client';
 
 import {
-  BriefcaseBusiness,
   Check,
   Copy,
   Mail,
-  MessageCircle,
-  Send,
   Share2,
   X,
 } from 'lucide-react';
+import { FaLinkedinIn, FaTelegram, FaWhatsapp } from 'react-icons/fa6';
 import {
   useCallback,
   useEffect,
@@ -145,14 +143,14 @@ export function CaseStudyShare({ locale }: { locale: Locale }) {
           </header>
 
           <div className={styles.shareOptions}>
-            <a href={`https://t.me/share/url?url=${encodedUrl}&text=${encodedTitle}`} target="_blank" rel="noopener noreferrer">
-              <Send aria-hidden="true" /><span>{copy.shareTelegram}</span>
+            <a data-share-service="telegram" href={`https://t.me/share/url?url=${encodedUrl}&text=${encodedTitle}`} target="_blank" rel="noopener noreferrer">
+              <FaTelegram aria-hidden="true" /><span>{copy.shareTelegram}</span>
             </a>
-            <a href={`https://wa.me/?text=${encodedMessage}`} target="_blank" rel="noopener noreferrer">
-              <MessageCircle aria-hidden="true" /><span>{copy.shareWhatsApp}</span>
+            <a data-share-service="whatsapp" href={`https://wa.me/?text=${encodedMessage}`} target="_blank" rel="noopener noreferrer">
+              <FaWhatsapp aria-hidden="true" /><span>{copy.shareWhatsApp}</span>
             </a>
-            <a href={`https://www.linkedin.com/sharing/share-offsite/?url=${encodedUrl}`} target="_blank" rel="noopener noreferrer">
-              <BriefcaseBusiness aria-hidden="true" /><span>{copy.shareLinkedIn}</span>
+            <a data-share-service="linkedin" href={`https://www.linkedin.com/sharing/share-offsite/?url=${encodedUrl}`} target="_blank" rel="noopener noreferrer">
+              <FaLinkedinIn aria-hidden="true" /><span>{copy.shareLinkedIn}</span>
             </a>
             <a href={`mailto:?subject=${encodedTitle}&body=${encodedMessage}`}>
               <Mail aria-hidden="true" /><span>{copy.shareEmail}</span>

tests/project-case-studies.test.mjs

@@ -96,4 +96,8 @@ test('the full-screen gallery and share fallback expose complete interaction pat
   assert.match(share, /wa\.me/);
   assert.match(share, /linkedin\.com\/sharing\/share-offsite/);
   assert.match(share, /mailto:/);
+  assert.match(share, /react-icons\/fa6/);
+  assert.match(share, /FaTelegram/);
+  assert.match(share, /FaWhatsapp/);
+  assert.match(share, /FaLinkedinIn/);
 });