update

components/ButtonAiTalks.jsx

@@ -23,7 +23,7 @@ const ButtonZoom = () => {
         <Skeleton isLoaded={showSkelton}>
         <Image
           alt="AiTalks : Episode 2"
-          src="/assets/images/AiTalksEps2.jpg?webp"
+          src="/assets/images/AiTalksEps2.png?webp"
           fallbackSrc="/assets/images/AiTalksEps2.png?lqip"
           loading='lazy'
           maxH={{ base: "70vh", lg: "75vh" }}

pages/AiTalks2.jsx

@@ -0,0 +1,23 @@
+import { useEffect } from 'react'
+import { Heading } from "@chakra-ui/react";
+import { useRouter } from 'next/router'
+
+// Here you would fetch and return the user
+const useUser = () => ({ user: null, loading: false })
+
+export default function Page() {
+  const { user, loading } = useUser()
+  const router = useRouter()
+
+  useEffect(() => {
+    if (!(user || loading)) {
+      router.push('https://ailabtelkom.github.io/AiTalks')
+    }
+  }, [user, loading])
+
+  return (
+    <Heading as="h2" fontSize={{ base: "lg", lg: "xl" }}>
+      Redirecting to Discord...
+    </Heading>
+  )
+}