add consultation booking link (#101)

* add consultation booking link

* update CTAs to be more mobile friendly

src/components/CallToAction.tsx

@@ -1,17 +1,27 @@
 import { launchExternalUrl } from "@/utils";
 import { Button } from "antd";
 
+import profile from "@/data/profile.json";
+
 export default function CallToAction() {
   return (
-    <>
+    <div className="flex flex-col md:flex-row gap-2 mx-auto justify-center">
+      <Button
+        type="text"
+        size="large"
+        className="font-mono bg-blue-700 text-white text-xl"
+        onClick={() => launchExternalUrl(profile.consultationLink)}
+      >
+        Book Consultation 📅
+      </Button>
       <Button
         type="text"
         size="large"
         className="font-mono bg-blue-700 text-white text-xl"
-        onClick={() => launchExternalUrl("mailto:[email protected]")}
+        onClick={() => launchExternalUrl(`mailto:${profile.email}`)}
       >
         Hire Me 🥳
       </Button>
-    </>
+    </div>
   );
 }

src/components/Greetings.tsx

@@ -3,13 +3,15 @@
 import Image from "next/image";
 
 import Intro from "@/components/Intro";
+import CallToAction from "@/components/CallToAction";
+
 import "@/styles/greetings.scss";
 
 import { image } from "@/data/profile.json";
 
 export default function Greetings() {
   return (
-    <>
+    <div>
       <div
         id="greeting"
         className="flex flex-col-reverse w-full min-h-screen text-start items-center m-auto md:flex-row"
@@ -23,6 +25,9 @@ export default function Greetings() {
           height={450}
         />
       </div>
-    </>
+      <div className="w-full mt-4 lg:mt-0">
+        <CallToAction />
+      </div>
+    </div>
   );
 }

src/components/Intro.tsx

@@ -5,7 +5,6 @@ import parse from "html-react-parser";
 import { Sacramento } from "next/font/google";
 
 import SocialStrip from "@/components/SocialStrip";
-import CallToAction from "@/components/CallToAction";
 
 const sacramento = Sacramento({
   subsets: ["latin"],
@@ -22,9 +21,6 @@ export default function Greetings() {
         <p className="text-2xl font-black">{profile.subTitle}</p>
         <p className="font-inconsolata text-lg">{parse(profile.extraInfo)}</p>
         <SocialStrip />
-        <div className="justify-center w-full flex ml-0: md:ml-28">
-          <CallToAction />
-        </div>
       </div>
     </>
   );

src/data/profile.json

@@ -36,5 +36,6 @@
   "phone": "00923120919647",
   "location": "Peshawar, Pakistan",
   "resume": "/assets/docs/resume.pdf",
-  "image": "/assets/gifs/cat-programmer.gif"
+  "image": "/assets/gifs/cat-programmer.gif",
+  "consultationLink": "https://calendar.app.google/EQtKyZY3TkLiJ6ze7"
 }