Update Social Card Components and Add Mastodon Link with Verification (#1487)

* updates to social cards and add mastodon link

* revert a few changes not necessary

* rename logo file

src/components/homepage/SocialCard.tsx

@@ -1,27 +1,28 @@
 import type React from "react";
-
 import { FiExternalLink } from "react-icons/fi";
 
 export interface SocialCardProps {
   children: React.ReactNode;
   color: string;
   link: string;
+  isMeLink?: boolean;
 }
 
 export const SocialCard = ({
   children,
   color,
   link,
+  isMeLink = false,
 }: SocialCardProps): JSX.Element => {
   return (
     <div
-      className={`group relative flex h-24 w-36 min-w-max flex-shrink-0 rounded-xl shadow-xl ${color} m-2`}
+      className={`group relative flex h-20 w-28 min-w-max flex-shrink-0 rounded-lg shadow-lg ${color} m-1`}
     >
       {children}
       <a
         className="absolute top-0 left-0 right-0 bottom-0 hidden rounded-xl border border-accent bg-secondary bg-opacity-95 text-2xl shadow-xl group-hover:flex"
         href={link}
-        rel="noreferrer"
+        rel={isMeLink ? "me noreferrer" : "noreferrer"}
         target="_blank"
       >
         <FiExternalLink className="m-auto" />

src/pages/index.tsx

@@ -27,7 +27,7 @@ const SocialCards: SocialCardProps[] = [
     children: (
       <img
         alt="twitter"
-        className="m-auto h-14"
+        className="m-auto h-10"
         src="/img/homepage/Twitter-Logo-White.svg"
       />
     ),
@@ -38,7 +38,7 @@ const SocialCards: SocialCardProps[] = [
     children: (
       <img
         alt="facebook"
-        className="m-auto h-14"
+        className="m-auto h-10"
         src="/img/homepage/f_logo_RGB-White_1024.webp"
       />
     ),
@@ -49,7 +49,7 @@ const SocialCards: SocialCardProps[] = [
     children: (
       <img
         alt="instagram"
-        className="m-auto h-14"
+        className="m-auto h-10"
         src="/img/homepage/Instagram_Glyph_Gradient.svg"
       />
     ),
@@ -60,7 +60,7 @@ const SocialCards: SocialCardProps[] = [
     children: (
       <img
         alt="youtube"
-        className="m-auto h-16"
+        className="m-auto h-12"
         src="/img/homepage/YouTube-Logo-White.svg"
       />
     ),
@@ -71,7 +71,7 @@ const SocialCards: SocialCardProps[] = [
     children: (
       <img
         alt="discourse"
-        className="m-auto h-12"
+        className="m-auto h-10"
         src="/img/homepage/Discourse-Logo-White.svg"
       />
     ),
@@ -82,18 +82,30 @@ const SocialCards: SocialCardProps[] = [
     children: (
       <img
         alt="reddit"
-        className="m-auto h-20"
+        className="m-auto h-14"
         src="/img/homepage/Reddit-Logo-White.svg"
       />
     ),
   },
+  {
+    color: "bg-[#563ACC]",
+    link: "https://mastodon.social/@meshtastic",
+    isMeLink: true,
+    children: (
+      <img
+        alt="mastodon"
+        className="m-auto h-10"
+        src="/img/homepage/mastodon-logo-white.svg"
+      />
+    ),
+  },
   {
     color: "bg-[#24A1DE]",
     link: "https://t.me/+hmKN0xOR73ExOTU6",
     children: (
       <img
         alt="telegram"
-        className="m-auto h-14"
+        className="m-auto h-10"
         src="/img/homepage/telegram-single-path-240px.svg"
       />
     ),
@@ -147,9 +159,14 @@ function Home() {
       <main className="flex flex-col gap-4">
         <div className="bg-primaryDark mx-auto flex w-full lg:w-auto flex-col gap-4 p-4 shadow-inner">
           <h3 className="text-xl font-bold">Connect with us.</h3>
-          <div className="flex w-full overflow-x-auto">
+          <div className="flex w-full overflow-x-auto gap-2 flex-wrap justify-center">
             {SocialCards.map((card) => (
-              <SocialCard key={card.link} color={card.color} link={card.link}>
+              <SocialCard
+                key={card.link}
+                color={card.color}
+                link={card.link}
+                isMeLink={card.isMeLink}
+              >
                 {card.children}
               </SocialCard>
             ))}

static/img/homepage/mastodon-logo-white.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="74" height="79" fill="#fff" viewBox="0 0 74 79"><path fill="inherit" d="M73.701 17.96c-1.14-8.34-8.524-14.911-17.277-16.185C54.947 1.56 49.352.777 36.39.777h-.097c-12.965 0-15.746.783-17.223.998C10.56 3.013 2.789 8.918.903 17.356-.004 21.511-.1 26.118.068 30.344c.24 6.06.287 12.11.846 18.145a84 84 0 0 0 2.018 11.902c1.792 7.23 9.048 13.249 16.156 15.703a44 44 0 0 0 23.636 1.228 35 35 0 0 0 2.56-.688c1.903-.596 4.136-1.263 5.778-2.434a.18.18 0 0 0 .075-.14v-5.85a.17.17 0 0 0-.068-.133.18.18 0 0 0-.147-.032 66.5 66.5 0 0 1-15.338 1.764c-8.89 0-11.28-4.152-11.966-5.88a18 18 0 0 1-1.04-4.636.17.17 0 0 1 .064-.14.17.17 0 0 1 .152-.032 65.3 65.3 0 0 0 15.087 1.763c1.223 0 2.441 0 3.664-.031 5.111-.142 10.499-.399 15.528-1.366.125-.024.25-.045.358-.077 7.933-1.5 15.482-6.205 16.249-18.12.029-.47.1-4.914.1-5.401.004-1.654.542-11.736-.079-17.93M61.493 47.691H53.15V27.586c0-4.233-1.792-6.392-5.437-6.392-4.008 0-6.015 2.554-6.015 7.598v11.005h-8.291V28.792c0-5.044-2.011-7.598-6.019-7.598-3.624 0-5.434 2.159-5.437 6.392v20.106h-8.334V26.975q0-6.35 3.294-10.088c2.265-2.487 5.237-3.764 8.925-3.764 4.27 0 7.496 1.616 9.646 4.843l2.076 3.429 2.079-3.429c2.15-3.227 5.377-4.843 9.639-4.843 3.684 0 6.656 1.277 8.929 3.764Q61.5 20.622 61.5 26.975z"/></svg>