ui: landing: moved the demo video to a separate page with the Calendly added in-line.

Author: avikalpg

components/Button.tsx

@@ -26,7 +26,7 @@ const Button = (props: ButtonProps) => {
 	const basicClass = 'inline-flex items-center justify-center relative cursor-pointer align-middle disabled:cursor-default box-border min-w-max py-1 px-4 rounded-md transition-all ';
 	const variantClasses = {
 		contained: "bg-secondary text-secondary-foreground disabled:bg-action-inactive disabled:hover:bg-transparent hover:bg-secondary-light ",
-		outlined: "border-secondary-foreground border-2 rounded hover:bg-muted ",
+		outlined: "border-secondary-foreground border-2 rounded hover:bg-muted/40 ",
 		text: "",
 	}
 

package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "vibinex-website",
-	"version": "1.2.18",
+	"version": "1.2.19",
 	"private": false,
 	"homepage": "https://vibinex.com",
 	"description": "A plugin that works with GitHub, Bitbucket and GitLab to personalize and data-enrich their code review interfaces",

package.json

@@ -0,0 +1,64 @@
+
+import React, { useEffect, useState } from 'react'
+import { useCalendlyEventListener, InlineWidget } from "react-calendly";
+import Footer from '../components/Footer'
+import Navbar from '../views/Navbar'
+import ProductDemo from '../views/Demo'
+import type { Session } from 'next-auth';
+import { getAndSetAnonymousIdFromLocalStorage } from '../utils/rudderstack_initialize';
+import RudderContext from '../components/RudderContext';
+import { getAuthUserEmail, getAuthUserId, getAuthUserName } from '../utils/auth';
+
+const Demo = () => {
+	const [loading, setLoading] = useState(true);
+	const [session, setSession] = useState<Session | null>(null);
+	const { rudderEventMethods } = React.useContext(RudderContext);
+
+	useEffect(() => {
+		fetch("/api/auth/session", { cache: "no-store" }).then(async (res) => {
+			const sessionVal: Session | null = await res.json();
+			setSession(sessionVal);
+		}).catch((err) => {
+			console.error(`[docs] Error in getting session`, err);
+		}).finally(() => {
+			setLoading(false);
+		});
+	}, [])
+
+	React.useEffect(() => {
+		const anonymousId = getAndSetAnonymousIdFromLocalStorage();
+		rudderEventMethods?.track(getAuthUserId(session), "docs page", { type: "page", eventStatusFlag: 1, name: getAuthUserName(session) }, anonymousId)
+	}, [rudderEventMethods, session]);
+
+	useCalendlyEventListener({
+		onProfilePageViewed: () => console.log("onProfilePageViewed"),
+		onDateAndTimeSelected: () => console.log("onDateAndTimeSelected"),
+		onEventTypeViewed: () => console.log("onEventTypeViewed"),
+		onEventScheduled: (e) => console.log(e.data.payload),
+	});
+
+	return (
+		<div>
+			<Navbar transparent={false} />
+			<ProductDemo />
+			<div className='w-full text-center py-12'>
+				<h2 className='font-bold text-[2rem]'>Book a <span className='text-[2rem] text-secondary font-bold'>Live Demo</span> with the Founder</h2>
+				<div className='w-full md:w-2/3 m-auto'>
+					<InlineWidget
+						url="https://calendly.com/avikalp-gupta/30min"
+						pageSettings={{
+							hideEventTypeDetails: true,
+						}}
+						prefill={{
+							email: getAuthUserEmail(session),
+							name: getAuthUserName(session),
+						}}
+					/>
+				</div>
+			</div>
+			<Footer />
+		</div>
+	)
+}
+
+export default Demo

pages/demo.tsx

@@ -10,7 +10,6 @@ import RudderContext from '../components/RudderContext'
 import { getAndSetAnonymousIdFromLocalStorage } from '../utils/rudderstack_initialize'
 import { useSession } from 'next-auth/react'
 import { getAuthUserId, getAuthUserName, getAuthUserEmail } from '../utils/auth'
-import ProductDemo from '../views/Demo'
 import Customers from '../views/CustomerLogos'
 import Testimonials from '../views/Testimonials'
 import JoinDiscord from '../views/JoinDiscord'
@@ -34,7 +33,6 @@ export default function Home() {
 			<Navbar transparent={true} />
 			<Hero ctaLink={'/u'} />
 			<Customers />
-			<ProductDemo />
 			<Features />
 			<WhyUs />
 			<TrustUs />

pages/index.tsx

@@ -47,8 +47,8 @@ const Hero = (props: { ctaLink: string }) => {
 					<Button id="cta-btn" variant="contained" href={props.ctaLink} className='text-center w-[45%] p-3 sm:p-4 px-20 rounded-lg font-bold text-[20px] sm:text-[25px]'>
 						Get Started
 					</Button>
-					<Button id="book-demo-btn" variant="outlined" href="https://calendly.com/avikalp-gupta/30min" target="_blank" className='text-center w-[45%] sm:p-4 p-3 px-20 rounded-lg font-bold sm:text-[25px] text-[20px]'>
-						Book demo
+					<Button id="book-demo-btn" variant="outlined" href="/demo" className='text-center w-[45%] sm:p-4 p-3 px-20 rounded-lg font-bold sm:text-[25px] text-[20px]'>
+						Watch Demo
 					</Button>
 				</div>
 				<p className="text-lg sm:text-lg mb-10 text-gray-300" title="100% privacy & data protection">