feat: add YouTube channel link

app/(root)/contact/page.tsx

@@ -186,7 +186,7 @@ const ContactUs = () => {
               ))}
             </ul>
             <Separator />
-            <ul className="flex justify-center my-6">
+            <ul className="flex justify-center space-x-1 my-6">
               <Iconss />
             </ul>
             <Separator />

components/shared/HeroCards.tsx

@@ -88,7 +88,7 @@ const HeroCards = () => {
       </Card>
 
       {/* Socials Second top right */}
-      <Card className="absolute right-[20px] top-4 w-80 flex flex-col justify-center items-center drop-shadow-xl shadow-black/10 dark:shadow-white/10">
+      <Card className="absolute right-[20px] top-5 w-80 flex flex-col justify-center items-center drop-shadow-xl shadow-black/10 dark:shadow-white/10">
         <CardHeader className="flex justify-center items-center pb-2">
           <CardTitle className="text-center">Socials</CardTitle>
           <CardDescription className="font-medium text-primary"></CardDescription>

components/ui/button.tsx

@@ -23,7 +23,8 @@ const buttonVariants = cva(
         default: "h-10 px-4 py-2",
         sm: "h-9 rounded-md px-3",
         lg: "h-11 rounded-md px-8",
-        icon: "h-10 w-10"
+        icon: "h-10 w-10",
+        smicon: "h-8 w-8"
       }
     },
     defaultVariants: {

components/ui/icons.tsx

@@ -12,7 +12,8 @@ const Iconss = () => {
         Bluesky: "https://bsky.app/profile/svrjs.org",
         Odysee: "https://odysee.com/@SVRJS",
         instagram: "https://instagram.com/svrjs.webserver",
-        Threads: "https://threads.net/@svrjs.webserver"
+        Threads: "https://threads.net/@svrjs.webserver",
+        YouTube: "https://youtube.com/@svr-js"
       }
     }
   };
@@ -25,13 +26,13 @@ const Iconss = () => {
         rel="me"
         className={buttonVariants({
           variant: "ghost",
-          size: "icon"
+          size: "smicon"
         })}
       >
         <span className="sr-only">X icon</span>
         <svg
-          width="25"
+          width="22"
-          height="25"
+          height="22"
           viewBox="0 0 25 25"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
@@ -48,14 +49,14 @@ const Iconss = () => {
         rel="me"
         className={buttonVariants({
           variant: "ghost",
-          size: "icon"
+          size: "smicon"
         })}
       >
         <span className="sr-only">Mastodon icon</span>
 
         <svg
-          width="25"
+          width="22"
-          height="25"
+          height="22"
           viewBox="0 0 25 25"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
@@ -73,14 +74,14 @@ const Iconss = () => {
         rel="me"
         className={buttonVariants({
           variant: "ghost",
-          size: "icon"
+          size: "smicon"
         })}
       >
         <span className="sr-only">Bluesky icon</span>
 
         <svg
-          width="25"
+          width="22"
-          height="25"
+          height="22"
           viewBox="0 0 576 512"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
@@ -98,14 +99,14 @@ const Iconss = () => {
         rel="me"
         className={buttonVariants({
           variant: "ghost",
-          size: "icon"
+          size: "smicon"
         })}
       >
         <span className="sr-only">Odysee icon</span>
 
         <svg
-          width="25"
+          width="22"
-          height="25"
+          height="22"
           viewBox="0 0 25 25"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
@@ -123,14 +124,14 @@ const Iconss = () => {
         rel="me"
         className={buttonVariants({
           variant: "ghost",
-          size: "icon"
+          size: "smicon"
         })}
       >
         <span className="sr-only">Instagram icon</span>
 
         <svg
-          width="25"
+          width="22"
-          height="25"
+          height="22"
           viewBox="0 0 1000 1000"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
@@ -148,14 +149,14 @@ const Iconss = () => {
         rel="me"
         className={buttonVariants({
           variant: "ghost",
-          size: "icon"
+          size: "smicon"
         })}
       >
         <span className="sr-only">Threads icon</span>
 
         <svg
-          width="25"
+          width="22"
-          height="25"
+          height="22"
           viewBox="0 0 878 1000"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
@@ -166,6 +167,31 @@ const Iconss = () => {
           />
         </svg>
       </Link>
+
+      <Link
+        href={cards.aboutCard.socialLinks.YouTube}
+        target="_blank"
+        rel="me"
+        className={buttonVariants({
+          variant: "ghost",
+          size: "smicon"
+        })}
+      >
+        <span className="sr-only">YouTube icon</span>
+
+        <svg
+          width="22"
+          height="22"
+          viewBox="0 0 16 16"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.01 2.01 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.01 2.01 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31 31 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.01 2.01 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A100 100 0 0 1 7.858 2zM6.4 5.209v4.818l4.157-2.408z"
+            fill="currentColor"
+          />
+        </svg>
+      </Link>
     </>
   );
 };