Merge pull request #81 from shanuchauhan1211/main

Integrated Aptabase in Koder's site

Author: 1stdevfriend

components/Footer.tsx

@@ -6,8 +6,9 @@ import AnimatedBorder from "./AnimatedBorder";
 import { footerButtons, socialMediaHandles, socialMediaTealIcons } from "../helper/constant";
 import AppContext from "./AppContext";
 import Link from "next/link";
-
+import { useAptabase } from '@aptabase/react';
 const Footer = () => {
+  const { trackEvent } = useAptabase();
   const [onHover, setOnHover] = useState(false);
   const [hoverOnMob, setHoverOnMob] = useState(false);
   const [hoverOnSocialMedia, setHoverOnSocialMedia] = useState<any>(false);
@@ -54,6 +55,7 @@ const Footer = () => {
                 key={i}
                 className="h-7 cursor-pointer brightness-50 hover:brightness-100"
                 onClick={() => {
+                  trackEvent('Social_Media', { Social_Media:item.title });
                   window.open(item.url, "_blank");
                 }}
                 onMouseEnter={() => setHoverOnSocialMedia(i)}
@@ -119,6 +121,7 @@ const Footer = () => {
                   key={j}
                   className="relative group text-[0.9rem] md:text-[1.2rem] text-main-light_white mt-3 cursor-pointer font-miligramTextBook font-light hover:text-white w-fit"
                   onClick={() => {
+                    trackEvent('Footer_Button', { List_Item:item.title });
                     handleNavigateTo(item);
                   }}
                 >

components/Navbar.tsx

@@ -3,7 +3,7 @@ import dynamic from "next/dynamic";
 import Link from "next/link";
 import Image from "next/image";
 import { useRouter } from "next/router";
-
+import { useAptabase } from '@aptabase/react';
 import { discordSvg, discordWhite, logo } from "../assets/index";
 
 const Button = dynamic(() => import("./Button"), {
@@ -15,6 +15,7 @@ const AnimatedBorder = dynamic(() => import("./AnimatedBorder"), {
 });
 
 const Navbar = () => {
+  const { trackEvent } = useAptabase();
   const router = useRouter();
   const currentRoute = router?.pathname;
   const handleNavigate = (href: string) => {
@@ -71,6 +72,7 @@ const Navbar = () => {
           <Button
             OnClick={() => {
               handleNavigate("/start-project");
+              trackEvent('Start-Project');
             }}
             text="Get Started"
             className="font-miligramMedium text-[0.8rem] xxl:text-[1rem] bg-main-greenOpt-200 border-[1px] border-main-lightTeal text-main-lightTeal px-4 py-[0.4rem] sm:py-[0.55rem] sm:px-8 rounded-lg hover:bg-main-lightTeal hover:text-white"

components/pages-components/project-page-components/Form.tsx

@@ -10,7 +10,7 @@ import TextArea from "../jobs/TextArea";
 import { PropagateLoader } from "react-spinners";
 import { projectDataSchema } from "../../../helper/validate";
 import { pricingList, timeLineList } from "../../../helper/constant";
-
+import { useAptabase } from '@aptabase/react';
 interface Form {
   [key: string]: string;
 }
@@ -65,6 +65,7 @@ const Form = ({
     const elm = document.getElementById("abproject");
     elm.focus();
   }, []);
+  const { trackEvent } = useAptabase();
   return (
     <Formik
       className="w-[97%] mx-auto mt-10 font-miligramMedium"
@@ -243,7 +244,7 @@ const Form = ({
               disabled={showLoader}
               styleObj={showLoader ? { pointerEvents: "none" } : {}}
               type="submit"
-              OnClick={handleSubmit}
+              OnClick={()=>{handleSubmit() ; trackEvent('Start-Project',{label:"Start-project_Submit-Button"});}}
               className="mx-auto text-[0.8rem] xxl:text-[1rem] py-[0.4rem] sm:py-[0.6rem] w-[7.3rem] sm:w-[9.5rem] block mt-16 bg-main-greenOpt-200 font-miligramMedium text-main-lightTeal  rounded-lg border-[1px] border-main-lightTeal hover:bg-main-lightTeal hover:text-white"
               text="Submit"
             />

components/section-components/pricing/PricingCard.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import Image from "next/image";
-
+import { useAptabase } from '@aptabase/react';
 import Button from "../../Button";
 import { useRouter } from "next/router";
 import { check, mostPopular } from "../../../assets";
@@ -24,6 +24,8 @@ const PricingCard = ({
   const handleNavigate = (href: string) => {
     router.push(href);
   };
+  const { trackEvent } = useAptabase();
+
   return (
     <div
       data-aos={aos}
@@ -60,6 +62,7 @@ const PricingCard = ({
       </div>
       <Button
         OnClick={() => {
+          trackEvent('Pricing_Selected_Price', {Seleted_price:price});
           setAppContext(`${exactPrice}`);
           handleNavigate("start-project");
         }}

helper/constant.ts

@@ -268,18 +268,22 @@ export const timeLineList = ["<1 week", "<1 month", "<6 months", ">6 months"];
 
 export const socialMediaHandles = [
   {
+    title:"LinkedIn",
     src: linkedinWhite,
     url: "https://www.linkedin.com/authwall?trk=bf&trkInfo=AQHkkfNKVtVB3QAAAYR0x2dA3c0i5YfwfSFl2SuYAa1O1u3Qo-Dauem_n-eeuKG0gRp9COXnLYet0RNUvrEAzdsDukF7eZB3SRKXii0KQI2nAu_xwR1gAz33Uh6Sw2J26qwLlxQ=&original_referer=&sessionRedirect=https%3A%2F%2Fwww.linkedin.com%2Fcompany%2Fkoders-in",
   },
   {
+    title:"GitHUb",
     src: githubWhite,
     url: "https://github.com/koders-in",
   },
   {
+    title:"Twitter",
     src: twitterWhite,
     url: "https://twitter.com/KodersKorp",
   },
   {
+    title:"Discord",
     src: discordWhiteLogo,
     url: "https://discord.com/invite/u3P2a8FpWD",
   },