Merge pull request #21 from lassiecoder/staging

feat: added "work with me" CTA

Author: lassiecoder

src/app/globals.css

@@ -43,3 +43,32 @@ body {
 .animate-spin-slow {
   animation: spin-slow 10s linear infinite;
 }
+
+.blob {
+  background: #2c98e7;
+  border-radius: 50%;
+  margin: 4px;
+  height: 10px;
+  width: 10px;
+
+  box-shadow: 0 0 0 0 #82bee9;
+  transform: scale(1);
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(0.55);
+    box-shadow: 0 0 0 0 #82bee9;
+  }
+
+  70% {
+    transform: scale(1);
+    box-shadow: 0 0 0 8px rgba(0, 0, 0, 0);
+  }
+
+  100% {
+    transform: scale(0.75);
+    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
+  }
+}

src/app/pages/about.tsx

@@ -4,6 +4,7 @@ import Tooltip from "@/components/Tooltip";
 import Link from "next/link";
 import React from "react";
 import { HiMiniBellAlert } from "react-icons/hi2";
+import { IoGitNetworkOutline } from "react-icons/io5";
 
 const About = () => {
   return (
@@ -80,7 +81,7 @@ const About = () => {
           innovation and excellence defines every project I undertake.
         </p>
       </h3>
-      <div className="flex justify-center items-center">
+      <div className="flex justify-center items-center space-x-3 max-[478px]:flex-col max-[478px]:space-x-0 max-[478px]:space-y-3">
         <Link
           href={"https://techscoop.hashnode.dev/newsletter"}
           target="_blank"
@@ -93,6 +94,20 @@ const About = () => {
             </span>
           </button>
         </Link>
+
+        <Link
+          href={"https://forms.gle/udY3jQDBETu81BNf9"}
+          target="_blank"
+          className="block md:hidden"
+        >
+          <button className="relative inline-flex h-10 overflow-hidden rounded-full p-[1px] focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50">
+            <span className="absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#E2CBFF_0%,#393BB2_50%,#E2CBFF_100%)]" />
+            <span className="inline-flex h-full w-full cursor-pointer items-center justify-center rounded-full bg-slate-950 px-3 py-1 text-sm font-medium text-white backdrop-blur-3xl">
+              &nbsp; Work with me &nbsp;
+              <IoGitNetworkOutline className="mr-2 text-xl" />
+            </span>
+          </button>
+        </Link>
       </div>
     </div>
   );

src/components/footer.tsx

@@ -10,6 +10,7 @@ import {
   FaMailBulk
 } from "react-icons/fa";
 import Link from "next/link";
+import { HiMiniBellAlert } from "react-icons/hi2";
 
 export default function Footer() {
   const trackSponsorClick = () => {
@@ -22,24 +23,45 @@ export default function Footer() {
   return (
     <div className="flex bg-black w-full items-center xl:px-8 lg:px-8 md:px-8 px-4 pt-6">
       {/* Container that changes between centered/between based on screen size */}
-      <div className="w-full flex justify-center md:justify-between sm:justify-between items-center">
-        {/* Left Side - GitHub Sponsor Button */}
-        <Link
-          href={"https://github.com/sponsors/lassiecoder"}
-          className="inline-flex items-center mr-4 w-[100px] h-[40px]"
-          onClick={trackSponsorClick}
-        >
-          <Image
-            src="/sponsor-icon.png"
-            alt="Sponsor lassiecoder on GitHub"
-            className="h-8 w-auto rounded-lg"
-            width={100}
-            height={10}
-            style={{ width: "100%", height: "auto" }}
-          />
-        </Link>
+      <div className="w-full flex justify-between items-center">
+        {/* Left Side - Both Links */}
+        <div className="flex items-center space-x-3">
+          <Link
+            href={"https://github.com/sponsors/lassiecoder"}
+            className="inline-flex items-center mr-2 w-[100px] h-[40px]"
+            onClick={trackSponsorClick}
+          >
+            <Image
+              src="/sponsor-icon.png"
+              alt="Sponsor lassiecoder on GitHub"
+              className="h-8 w-auto rounded-lg"
+              width={100}
+              height={10}
+              style={{ width: "100%", height: "auto" }}
+            />
+          </Link>
+
+          <div className="flex justify-center items-center">
+            {/* <Link
+              href={"https://forms.gle/MLcypaSbFCefBdza7"}
+              target="_blank"
+              className="flex items-center space-x-1 border-[0.8px] border-[#2c98e7] rounded-full px-4 py-1.5 text-xs text-white transition-all duration-300 hover:scale-105 hover:border-[#a855f7] hover:shadow-[0_0_8px_#9333ea]"
+            >
+              <div className="blob"></div>
+              <span className="text-xs">Work with me</span>
+            </Link> */}
+            <Link
+              href={"https://forms.gle/MLcypaSbFCefBdza7"}
+              target="_blank"
+              className="hidden md:flex items-center space-x-1 border-[0.8px] border-[#2c98e7] rounded-full px-4 py-1.5 text-xs text-white transition-all duration-300 hover:scale-105 hover:border-[#a855f7] hover:shadow-[0_0_8px_#9333ea]"
+            >
+              <div className="blob"></div>
+              <span className="text-xs">Work with me</span>
+            </Link>
+          </div>
+        </div>
 
-        {/* Social Icons - Centered on small screens */}
+        {/* Right Side - Social Icons */}
         <div className="flex space-x-5 md:space-x-8 items-center">
           <SocialLink
             href="https://github.com/lassiecoder"