diff --git a/next-env.d.ts b/next-env.d.ts
index c6643fd..9bc3dd4 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -1,3 +1,6 @@
///
///
///
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/package.json b/package.json
index c36b6f2..9834c01 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
"@emotion/styled": "^11.3.0",
"@fontsource/lexend": "^4.4.5",
"@fontsource/poppins": "^4.5.0",
+ "@splitbee/web": "^0.2.4",
"framer-motion": "^4.1.17",
"next": "^11.0.0",
"next-pwa": "^5.2.21",
diff --git a/src/components/AccessibleLink.tsx b/src/components/AccessibleLink.tsx
index aafea93..0b39797 100644
--- a/src/components/AccessibleLink.tsx
+++ b/src/components/AccessibleLink.tsx
@@ -6,20 +6,22 @@ import Link, { LinkProps } from "next/link";
type AccessibleLinkProps = LinkProps & ChakraLinkProps;
-const AccessibleLink = ({
+const AccessibleLink:React.FC = ({
href,
isExternal,
children,
as,
role,
+ onClick,
...props
-}: AccessibleLinkProps) => {
+}) => {
return (
{children}
diff --git a/src/components/homepage/Article/Article.tsx b/src/components/homepage/Article/Article.tsx
index 8fd2f0a..027608f 100644
--- a/src/components/homepage/Article/Article.tsx
+++ b/src/components/homepage/Article/Article.tsx
@@ -8,6 +8,9 @@ import {
Button,
Link,
} from "@chakra-ui/react";
+import splitbee from "@splitbee/web";
+import { SPLITBEE_EVENTS_NAME } from "constants/eventSplitbee";
+import { WEBINAR_LINK } from "constants/paths";
import ArticleCard from "./ArticleCard";
export default function Article() {
@@ -52,7 +55,7 @@ export default function Article() {
Our Latest Articles
-
+
diff --git a/src/components/homepage/Cta.tsx b/src/components/homepage/Cta.tsx
index e9a002b..f72fba5 100644
--- a/src/components/homepage/Cta.tsx
+++ b/src/components/homepage/Cta.tsx
@@ -8,6 +8,9 @@ import {
Image,
VStack,
} from "@chakra-ui/react";
+import splitbee from "@splitbee/web";
+import { SPLITBEE_EVENTS_NAME } from "constants/eventSplitbee";
+import { WEBINAR_LINK } from "constants/paths";
import AccessibleLink from "../AccessibleLink";
const Cta = () => {
@@ -39,7 +42,7 @@ const Cta = () => {
href="https://karyakarsa.com/logos_id"
isExternal
>
-
+
diff --git a/src/components/homepage/FollowUs.tsx b/src/components/homepage/FollowUs.tsx
index dbcb3e6..38e4a6b 100644
--- a/src/components/homepage/FollowUs.tsx
+++ b/src/components/homepage/FollowUs.tsx
@@ -1,45 +1,47 @@
-import { VStack, HStack, Heading } from "@chakra-ui/react";
+import { VStack, HStack, Heading, Button } from "@chakra-ui/react";
import AccessibleLink from "@/components/AccessibleLink";
-import Instagram from "../icons/Instagram";
-import Spotify from "../icons/Spotify";
-import Twitter from "../icons/Twitter";
-import Youtube from "../icons/Youtube";
+import splitbee from "@splitbee/web";
+import { SPLITBEE_EVENTS_NAME } from "constants/eventSplitbee";
+import { SOCIAL_MEDIA } from '../../constants/data';
+import { Instagram, Spotify, Twitter, Youtube} from '../icons/index';
const FollowUs = () => {
+ const renderIcon = (type: string) => {
+ switch (type) {
+ case "instagram":
+ return
+ case "spotify":
+ return
+ case "twitter":
+ return
+ case "youtube":
+ return
+ default:
+ break;
+ }
+ }
+
+ const renderItem = (item:any, index: number) => {
+ return (
+ splitbee.track(SPLITBEE_EVENTS_NAME.EXTERNAL_LINK, {type: item.label, link:item.link})}
+ >
+ {renderIcon(item.label)}
+
+ );
+ };
+
return (
Follow Us
-
-
-
-
-
-
-
-
-
-
-
-
+ {SOCIAL_MEDIA.map((item, index)=>renderItem(item, index))}
);
diff --git a/src/components/homepage/Hero.tsx b/src/components/homepage/Hero.tsx
index fde141f..9866eff 100644
--- a/src/components/homepage/Hero.tsx
+++ b/src/components/homepage/Hero.tsx
@@ -14,6 +14,9 @@ import {
} from "@chakra-ui/react";
import Image from "next/image";
import HeroImage from "@/public/img/hero.png";
+import splitbee from "@splitbee/web";
+import { SPLITBEE_EVENTS_NAME } from "constants/eventSplitbee";
+import { SUPPORT_LINK, WEBINAR_LINK } from "constants/paths";
const SquareIllustrate = (props: any) => {
return (
@@ -37,6 +40,11 @@ const Hero = () => {
const variantTitle = useBreakpointValue({ base: "mobile-h1", lg: "h1" });
const variantSubtitle = useBreakpointValue({ base: "md", lg: "lg" });
+ const pressButton = (link: any, type:string) =>{
+ let event = type === 'webinar' ? SPLITBEE_EVENTS_NAME.REGISTER_WEBINAR : SPLITBEE_EVENTS_NAME.SUPPORT_US;
+ splitbee.track(`${event}`, {link})
+ }
+
return (
{
Pop Culture, dan Sains.
-
-