Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Akg/book demo form insteadof calendly #201

Draft
wants to merge 4 commits into
base: main
Choose a base branch
from
Draft

Akg/book demo form insteadof calendly #201

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f77cba0
Merge branch 'akg/progress_indeterminate' into akg/book_demo_form_ins…
avikalpg Dec 19, 2023
407682c
1. Added Dialog and Form primitives from Radix
avikalpg Dec 19, 2023
aa5e4cd
Merge branch 'main' of github.com:Alokit-Innovations/vibinex-server i…
avikalpg Dec 23, 2023
a8b827c
Lead form now checks if the email address is official or personal
avikalpg Dec 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions components/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@ const Button = (props: PropsWithChildren<{
}
}
const variantClasses = {
'contained': "bg-primary-main text-secondary-main disabled:bg-action-inactive disabled:hover:bg-transparent hover:bg-primary-dark ",
'outlined': "border-secondary-main border-2 rounded ",
'contained': "bg-primary-main text-secondary-main disabled:bg-action-inactive disabled:hover:bg-transparent hover:bg-primary-main/80 hover:text-secondary-main/80 ",
'outlined': "border-secondary-main text-secondary-main border-2 rounded hover:border-secondary-main/80 hover:text-secondary-main/80 ",
'text': "",
}

Expand Down
105 changes: 105 additions & 0 deletions components/Dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
"use client"

import * as React from "react"
import * as DialogPrimitive from "@radix-ui/react-dialog"
import { IoMdClose as X } from "react-icons/io";

const Dialog = DialogPrimitive.Root

const DialogTrigger = DialogPrimitive.Trigger

const DialogPortal = DialogPrimitive.Portal

const DialogClose = DialogPrimitive.Close

const DialogOverlay = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Overlay>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
<DialogPrimitive.Overlay
ref={ref}
className={"fixed inset-0 z-50 bg-secondary-dark/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 " + className}
{...props}
/>
))
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName

const DialogContent = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({ className, children, ...props }, ref) => (
<DialogPortal>
<DialogOverlay />
<DialogPrimitive.Content
ref={ref}
className={"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-secondary-dark p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg " + className}
{...props}
>
{children}
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
<X className="h-4 w-4" />
<span className="sr-only">Close</span>
</DialogPrimitive.Close>
</DialogPrimitive.Content>
</DialogPortal>
))
DialogContent.displayName = DialogPrimitive.Content.displayName

const DialogHeader = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={"flex flex-col space-y-1.5 text-center sm:text-left " + className}
{...props}
/>
)
DialogHeader.displayName = "DialogHeader"

const DialogFooter = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 " + className}
{...props}
/>
)
DialogFooter.displayName = "DialogFooter"

const DialogTitle = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Title>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
>(({ className, ...props }, ref) => (
<DialogPrimitive.Title
ref={ref}
className={"text-lg font-semibold leading-none tracking-tight " + className}
{...props}
/>
))
DialogTitle.displayName = DialogPrimitive.Title.displayName

const DialogDescription = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Description>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
>(({ className, ...props }, ref) => (
<DialogPrimitive.Description
ref={ref}
className={"text-sm text-muted-foreground " + className}
{...props}
/>
))
DialogDescription.displayName = DialogPrimitive.Description.displayName

export {
Dialog,
DialogPortal,
DialogOverlay,
DialogClose,
DialogTrigger,
DialogContent,
DialogHeader,
DialogFooter,
DialogTitle,
DialogDescription,
}
137 changes: 137 additions & 0 deletions components/LeadFormDialogWrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,137 @@
import { PropsWithChildren } from "react";
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogFooter,
DialogTitle,
DialogTrigger
} from "./Dialog";
import * as Form from '@radix-ui/react-form';
import Button from "./Button";

const LeadFormDialogWrapper = ({ children }: PropsWithChildren) => {
const isPersonalEmail = (email: string) => {
const personalDomains = [
'@gmail.com',
'@yahoo.com',
'@hotmail.com',
'@protonmail.com',
'@outlook.com',
'@icloud.com',
'@mail.com',
'@live.com',
'@me.com',
'@hushmail.com',
'@aim.com',
'@inbox.com',
'@qq.com',
'@naver.com',
'@yahoo.co.jp',
'@rediffmail.com',
'@yahoo.co.in',
'@trashmail.com',
'@guerrillamail.com',
'@sharklasers.com'
];
return personalDomains.some(domain => email.endsWith(domain));
}
return (
<Dialog>
<DialogTrigger asChild>
{children}
</DialogTrigger>
<DialogContent className="sm:max-w-md text-primary-text">
<DialogHeader>
<DialogTitle>Request a callback</DialogTitle>
<DialogDescription>
We will understand your needs and advice you on how to get started.
</DialogDescription>
</DialogHeader>
<Form.Root className="w-full">
<Form.Field className="grid mb-[10px]" name="Name">
<div className="flex items-baseline justify-between">
<Form.Label className="text-[15px] font-medium leading-[35px]">Your Name</Form.Label>
<Form.Message className="text-[13px] opacity-[0.8]" match="valueMissing">
Please enter your full name
</Form.Message>
</div>
<Form.Control asChild>
<input
className="box-border w-full bg-black/10 shadow-black/40 inline-flex h-[35px] appearance-none items-center justify-center rounded-[4px] px-[10px] text-[15px] leading-none shadow-[0_0_0_1px] outline-none hover:shadow-[0_0_0_1px_black] focus:shadow-[0_0_0_2px_black] selection:color-white selection:bg-black/40"
type="text"
required
/>
</Form.Control>
</Form.Field>
<Form.Field className="grid mb-[10px]" name="Email">
<div className="flex items-baseline justify-between">
<Form.Label className="text-[15px] font-medium leading-[35px]">Company Email</Form.Label>
<Form.Message className="text-[13px] opacity-[0.8]" match="valueMissing">
Please enter your email
</Form.Message>
<Form.Message className="text-[13px] opacity-[0.8]" match="typeMismatch">
Please provide a valid email
</Form.Message>
<Form.Message className="text-[13px] opacity-[0.8]" match={(email) => isPersonalEmail(email)}>
Please do not provide a personal email
</Form.Message>
</div>
<Form.Control asChild>
<input
className="box-border w-full bg-black/10 shadow-black/40 inline-flex h-[35px] appearance-none items-center justify-center rounded-[4px] px-[10px] text-[15px] leading-none shadow-[0_0_0_1px] outline-none hover:shadow-[0_0_0_1px_white] focus:shadow-[0_0_0_2px_white] selection:color-white selection:bg-black/40"
type="email"
required
/>
</Form.Control>
</Form.Field>
<Form.Field className="grid mb-[10px]" name="Phone">
<div className="flex items-baseline justify-between">
<Form.Label className="text-[15px] font-medium leading-[35px]">Mobile Number</Form.Label>
<Form.Message className="text-[13px] opacity-[0.8]" match="valueMissing">
Please enter your mobile number
</Form.Message>
<Form.Message className="text-[13px] opacity-[0.8]" match="typeMismatch">
Please provide a valid phone number
</Form.Message>
</div>
<Form.Control asChild>
<input
className="box-border w-full bg-black/10 shadow-black/40 inline-flex h-[35px] appearance-none items-center justify-center rounded-[4px] px-[10px] text-[15px] leading-none shadow-[0_0_0_1px] outline-none hover:shadow-[0_0_0_1px_black] focus:shadow-[0_0_0_2px_black] selection:color-white selection:bg-black/40"
type="tel"
required
/>
</Form.Control>
</Form.Field>
<Form.Field className="grid mb-[10px]" name="question">
<div className="flex items-baseline justify-between">
<Form.Label className="text-[15px] font-medium leading-[35px]">
Estimate number of PRs merged per week (optional)
</Form.Label>
<Form.Message className="text-[13px] opacity-[0.8]" match="valueMissing">
Please enter a round number
</Form.Message>
</div>
<Form.Control asChild>
<input
className="box-border w-full bg-black/10 shadow-black/40 inline-flex h-[35px] appearance-none items-center justify-center rounded-[4px] px-[10px] text-[15px] leading-none shadow-[0_0_0_1px] outline-none hover:shadow-[0_0_0_1px_black] focus:shadow-[0_0_0_2px_black] selection:color-white selection:bg-black/40"
type="number"
/>
</Form.Control>
</Form.Field>
<Form.Submit asChild>
<Button variant="contained" className="w-full mt-2 py-3 font-medium text-lg leading-none shadow-white/20 focus:shadow-[0_0_0_2px] focus:shadow-primary-text focus:outline-none">
Submit
</Button>
</Form.Submit>
</Form.Root>
<DialogFooter>
<small>Protected by reCAPTCHA. Google Privacy Policy & Terms of Service apply</small>
</DialogFooter>
</DialogContent>
</Dialog>
)
}

export default LeadFormDialogWrapper;
2 changes: 2 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,8 @@
"@nivo/radar": "^0.80.0",
"@nivo/voronoi": "^0.80.0",
"@radix-ui/react-accordion": "^1.1.2",
"@radix-ui/react-dialog": "^1.0.5",
"@radix-ui/react-form": "^0.0.3",
"@radix-ui/react-select": "^2.0.0",
"@radix-ui/react-switch": "^1.0.3",
"@radix-ui/themes": "^2.0.2",
Expand Down
10 changes: 7 additions & 3 deletions views/Hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import RudderContext from "../components/RudderContext";
import { getAndSetAnonymousIdFromLocalStorage } from "../utils/rudderstack_initialize";
import { getAuthUserId, getAuthUserName } from "../utils/auth";
import ProviderLogo from "../components/ProviderLogo";
import LeadFormDialogWrapper from "../components/LeadFormDialogWrapper";

const Hero = (props: { ctaLink: string }) => {
const { rudderEventMethods } = React.useContext(RudderContext);
Expand Down Expand Up @@ -34,6 +35,7 @@ const Hero = (props: { ctaLink: string }) => {
bookDemoButton?.removeEventListener('click', handleBookDemo);
};
}, [rudderEventMethods, session]);

return (
<div className='flex items-center justify-center h-screen bg-fixed bg-center bg-cover bg-black'>
<section className='p-5 text-primary-light my-auto lg:mt-[10%] pt-1 lg:w-1/2 text-center'>
Expand All @@ -47,9 +49,11 @@ 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>
<LeadFormDialogWrapper>
<Button id="book-demo-btn" variant="outlined" className='text-center w-[45%] sm:p-4 p-3 px-20 rounded-lg font-bold sm:text-[25px] text-[20px]'>
Book demo
</Button>
</LeadFormDialogWrapper>
</div>
<p className="text-lg sm:text-lg mb-10 text-gray-300" title="100% privacy & data protection">
Your code <span className="text-primary-main">never leaves your systems</span> by design
Expand Down