i will give you the code for that site, you will need to strip out any uneeded logic, focus just on the looks, the site is coded in react with bulma css and some custom scss code.Here is the component/* eslint-disable no-nested-ternary */import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';import classNames from 'classnames';import ContinueInAnotherBrowser from 'components/continue-in-another-browser';import { useCustomization } from 'components/customization-provider';import { useBoxedLayout } from 'components/layout/boxed/boxed';import getConfig from 'config';import { FragmentType, getFragmentData, graphql } from 'generated/graphql';import { useSentryInterviewScope } from 'hooks/use-sentry-interview-scope';import { parsePhoneNumberFromString } from 'libphonenumber-js/max';import * as RNDetect from 'react-device-detect';import { Redirect, useHistory, useRouteMatch } from 'react-router';import { isMobileSafari } from 'utils/device';import { isDomainContextValidForAccess } from 'utils/misc';import { z } from 'zod';import Form, { FormSubmitHandler, InputFloatingLabel, useForm,} from '~/components/form-v2';import VideoJSPlayer from '~/components/videojs-player';import FullScreenLoader from '~/elements/fullscreen-loader';import H from '~/elements/heading';import useCountdown from '~/hooks/use-countdown';import transformers from '~/services/transformers';import { useQuery } from '@apollo/client';import { Block, Columns } from '@hireflix/react-bulma-components';import { t, Trans } from '@lingui/macro';import { useMediaQuery } from '@react-hookz/web';import { captureMessage, withScope } from '@sentry/react';import { Button as CustomButton } from '../../components/button';import { InterviewStep } from '../../components/interview-step';import ErrorMessage from './_components/error';import { SafariMacEarbudsWarningModal } from './_components/safari-mac-earbuds-warning-modal';import { TermsModal } from './_components/terms-modal';import { useFormQueryParameters } from './_hooks/use-form-query-parameters';import { useSubmitPublicApplication } from './_hooks/use-submit-public-application';import styles from './public-application.module.scss';const INTRO_COUNTDOWN = getConfig().introPlayThresholdSecs;interface FormWrapperProps { children: React.ReactNode; introUrl?: string; className?: string;}const FormWrapper: FC<FormWrapperProps> = ({ children, introUrl, className,}) => { if (introUrl) { // eslint-disable-next-line react/jsx-no-useless-fragment return <>{children}</>; } return ( <div // If no intro style={{ maxWidth: 400, marginLeft: 'auto', marginRight: 'auto' }} // If intro video className={classNames({ 'has-intro': !!introUrl, })} > {children} </div> );};const trimString = (v: unknown) => { if (typeof v === 'string') { return v.trim(); } return v;};const PublicApplicationRouteQuery = graphql(/* GraphQL */ ` query PublicApplicationRouteQuery($input: PositionPublicApplicationInput!) { positionPublicApplication(input: $input) { __typename ... on PositionNotFoundError { code message } ... on PositionPublicApplication { enabled ...PublicApplicationViewFragment_PositionPublicApplication } } }`);export interface Props { position: { name: string; company: string; intro?: { url: string; thumbnail?: string; }; countryPhonePrefix?: string; privacyPolicy?: string; }; customization: { customCompanyNameEnabled: boolean; companyName?: string; testName?: string; };}const PublicApplicationViewFragment = graphql(/* GraphQL */ ` fragment PublicApplicationViewFragment_PositionPublicApplication on PositionPublicApplication { enabled phoneNumberHidden phoneNumberRequired phoneNumberDefaultPrefix id name url intro { url thumbnail } privacyPolicy }`);const PublicApplicationView: FC<{ data: FragmentType<typeof PublicApplicationViewFragment>;}> = ({ data: dataFragment }) => { // Fragment unmasking const data = getFragmentData(PublicApplicationViewFragment, dataFragment); // Contexts const customizationContext = useCustomization(); // State const [showEmailVerificationText, setShowEmailVerificationText] = useState(false); const [errorCode, setErrorCode] = useState<number | undefined>(undefined); const [submitting, setSubmitting] = useState(false); const [privacyPolicyURL, setPrivacyPolicyURL] = useState<string | undefined>( undefined, ); const [ showSafariMacOSEarbudsWarningModal, setShowSafariMacOSEarbudsWarningModal, ] = useState(false); const [hasVideoBeenPlayedOnce, setHasVideoBeenPlayedOnce] = useState(false); const isSmallMobileScreen = useMediaQuery('(max-width: 375px)', { initializeWithValue: false, }); // Navigation const query = useFormQueryParameters(); const history = useHistory(); useSentryInterviewScope({ interview: { positionName: data.name, companyName: customizationContext.companyName, }, }); // Form Schema const formSchema = useMemo(() => { const phoneSchema = data.phoneNumberRequired && !data.phoneNumberHidden ? z.string().min(1).trim() : z.string().trim().optional(); return z .object({ firstName: z.preprocess( trimString, z.string().trim().min(1).max(50).trim(), ), lastName: z.preprocess( trimString, z.string().trim().min(1).max(50).trim(), ), email: z .string() .email() .transform((v) => v.trim()), phone: phoneSchema, prefix: z .string() .optional() .transform((v) => v?.trim()), }) .superRefine((formData, ctx) => { const prefix = formData.prefix?.trim() === '+' ? '' : formData.prefix?.trim(); if (formData.phone?.trim() && !prefix) { ctx.addIssue({ code: z.ZodIssueCode.invalid_type, expected: 'string', received: 'undefined', path: ['prefix'], }); return; } if (formData.phone && prefix) { const concatenatedNumber = `${prefix.trim()}${formData.phone.trim()}`; const parsedNumber = parsePhoneNumberFromString(concatenatedNumber); if (!parsedNumber || !parsedNumber.isValid()) { // Add an error to the phone property if it's not a valid mobile number ctx.addIssue({ code: z.ZodIssueCode.custom, message: t`Must be a valid phone number.`, path: ['phone'], }); } } }) .transform((formData) => { return { ...formData, phoneNumber: formData.prefix && formData.phone ? `${formData.prefix}${formData.phone}` : undefined, }; }); }, [data.phoneNumberHidden, data.phoneNumberRequired]); const form = useForm({ schema: formSchema, defaultValues: { firstName: query.firstName ?? '', lastName: query.lastName ?? '', email: query.email ?? '', phone: query.phoneNumber?.number ?? '', prefix: query.phoneNumber?.prefix ?? data.phoneNumberDefaultPrefix ?? '+', phoneNumber: '', }, }); const { execute: submitPublicApplication } = useSubmitPublicApplication(); const onCountdownEnd = useCallback(() => {}, []); const onTick = useCallback(() => {}, []); const onCountdownStart = useCallback(() => {}, []); const { startCountdown: startWatchIntroCountdown, state: countdownState } = useCountdown({ onTick, onStart: onCountdownStart, onFinish: onCountdownEnd, }); const watchIntroCountdownFinished = countdownState === 'finished'; // Refs const prefixInputRef = React.useRef<HTMLInputElement>(null); const hiddenInputRef = React.useRef<HTMLInputElement>(null); const videoRef = React.useRef<VideoJSPlayer>(null); const formNativeRef = React.useRef<HTMLFormElement>(null); const handleSubmit: FormSubmitHandler<z.infer<typeof formSchema>> = useCallback( async (values) => { if ( RNDetect.isSafari && RNDetect.isMacOs && !RNDetect.isMobile && !showSafariMacOSEarbudsWarningModal ) { setShowSafariMacOSEarbudsWarningModal(true); return; } if (submitting) { return; } setSubmitting(true); try { const result = await submitPublicApplication({ email: values.email, firstName: values.firstName, positionID: data.id, lastName: values.lastName, phoneNumber: values.phoneNumber, }); // eslint-disable-next-line no-underscore-dangle switch (result.data?.submitPublicApplication?.__typename) { case 'InterviewType': history.replace( `/${result.data.submitPublicApplication.hash}/ask-permissions`, ); break; case 'PositionPublicApplicationDisabledError': case 'PositionNotFoundError': case 'PositionNotReadyToAcceptInvitesError': setErrorCode(422); setSubmitting(false); break; case 'ValidationError': setErrorCode(400); setSubmitting(false); break; case 'PositionPublicApplicationRequiresEmailVerificationError': setShowEmailVerificationText(true); setSubmitting(false); break; default: setErrorCode(500); setSubmitting(false); break; } } catch (e) { setErrorCode(500); setSubmitting(false); } }, [ showSafariMacOSEarbudsWarningModal, submitting, submitPublicApplication, data.id, history, ], ); const isNotSafariInIos = RNDetect.isIOS && !isMobileSafari(); const compatibleBrowsers = useMemo( () => isNotSafariInIos ? [{ name: 'Safari', url: 'https://www.apple.com/safari/' }] : [], [isNotSafariInIos], ); const onPlayingVideo = useCallback(() => { setHasVideoBeenPlayedOnce(true); startWatchIntroCountdown({ countdown: INTRO_COUNTDOWN, }); }, [startWatchIntroCountdown]); const onClickTextInputs = useCallback(() => { if (!hasVideoBeenPlayedOnce && videoRef.current) { videoRef.current.play(); } }, [hasVideoBeenPlayedOnce]); const isDomainContextValid = useMemo( () => isDomainContextValidForAccess(data.url), [data.url], ); useEffect(() => { if (!isDomainContextValid) { withScope((scope) => { scope.setExtra('hostname', window.location.hostname); captureMessage( 'Unauthorized context detected when attempting to access public application', ); }); } }, [isDomainContextValid]); if (isDomainContextValid === false) { console.warn('This webapp is being loaded in an invalid context.'); return <Redirect to="/not-found" />; } if (showEmailVerificationText) { return ( <div className={classNames( styles['email-has-been-sent'], 'has-text-centered is-vertically-centered is-flex-grow-1', )} > <Block> <i className="fa-solid fa-paper-plane is-size-2" /> </Block> <H size={3}> <Trans>We just sent you an email with the link needed to start</Trans> </H> <p> <Trans> If you can&lsquo;t find it, please check your spam folder </Trans> </p> </div> ); } const startInterviewBtnText = customizationContext.testName?.trim() ? t({ id: 'public-application.start-interview-btn.with-test-name', message: `Start`, }) : t`Start Interview`; return ( <Form method="post" formRef={formNativeRef} form={form} onSubmit={handleSubmit} className="is-vertically-centered" > <ErrorMessage code={errorCode} /> <InterviewStep> {data.intro?.url ? ( <InterviewStep.LeftColumn> <div className={styles['intro-video-wrapper']}> <VideoJSPlayer rounded ref={videoRef} smallPlayButton onPlay={onPlayingVideo} onPlaying={onPlayingVideo} containerClassName="is-flex-grow-1 is-flex-shrink-1" config={{ src: data.intro.url, controls: true, autoplay: false, preload: 'auto', fluid: true, aspectRatio: isSmallMobileScreen ? '16:9' : '4:3', poster: data.intro.thumbnail ?? undefined, playsinline: true, controlBar: { fullscreenToggle: false, pictureInPictureToggle: false, playbackRateMenuButton: false, volumePanel: { inline: false, }, }, }} /> </div> </InterviewStep.LeftColumn> ) : undefined} <InterviewStep.RightColumn className={styles['right-column']}> <div className={classNames(styles.form, { [styles['has-intro']]: !!data.intro?.url, })} > <div className="has-text-centered block"> <H size={4} className="mb-0"> {customizationContext.testName?.trim() ? customizationContext.testName : t`Video Interview`} </H> <H size={2} className={styles['job-title']}> {data.name} - {customizationContext.companyName} </H> </div> {isNotSafariInIos && ( <ContinueInAnotherBrowser browsers={compatibleBrowsers} /> )} {!isNotSafariInIos && ( <> <Columns className={classNames('is-variable is-1 is-mobile')}> <Columns.Column touch={{ size: 12, }} desktop={{ size: 6, }} className={styles['form-column']} > <Form.Field name="firstName"> <InputFloatingLabel placeholder={t`First name`} onFocus={onClickTextInputs} transformers={[transformers.toHireflixName]} /> <Form.Help /> </Form.Field> </Columns.Column> <Columns.Column touch={{ size: 12, }} desktop={{ size: 6, }} className={styles['form-column']} > <Form.Field name="lastName"> <InputFloatingLabel placeholder={t`Last name`} onFocus={onClickTextInputs} transformers={[transformers.toHireflixName]} /> <Form.Help /> </Form.Field> </Columns.Column> <Columns.Column size={12} className={styles['form-column']}> <Form.Field name="email"> <InputFloatingLabel placeholder={t`Email`} onFocus={onClickTextInputs} transformers={[ transformers.toTrimmed, transformers.toLower, ]} /> <Form.Help /> </Form.Field> </Columns.Column> {!data.phoneNumberHidden && ( <> <Columns.Column size={3} touch={{ size: 4, }} className={styles['form-column']} > <Form.Field name="prefix"> <InputFloatingLabel domRef={prefixInputRef} placeholder={t`Prefix`} onFocus={onClickTextInputs} onClick={() => { if ( typeof prefixInputRef.current ?.selectionStart === 'number' && prefixInputRef.current?.selectionStart < 1 ) { prefixInputRef.current?.setSelectionRange(1, 1); } }} onKeyDown={(e) => { const selectionIsAtStart = typeof prefixInputRef.current ?.selectionStart === 'number' && prefixInputRef.current?.selectionStart <= 1; // Prevent backspace when cursor is right after the '+' if (e.key === 'Backspace' && selectionIsAtStart) { e.preventDefault(); } // Prevent left arrow from moving cursor before the '+' if (e.key === 'ArrowLeft' && selectionIsAtStart) { e.preventDefault(); } }} transformers={[ transformers.toTrimmed, (v) => { if (v?.[0] === '+') { return v; } return `+${v}`; }, ]} /> <Form.Help /> </Form.Field> </Columns.Column> <Columns.Column size={9} touch={{ size: 10, }} className={styles['form-column']} > <Form.Field name="phone"> <InputFloatingLabel transformers={[transformers.toTrimmed]} placeholder={ data.phoneNumberRequired ? t`Phone` : t`Phone (optional)` } onFocus={onClickTextInputs} /> <Form.Help /> </Form.Field> </Columns.Column> </> )} </Columns> <CustomButton loading={submitting} disabled={ submitting || (!!data.intro?.url && !watchIntroCountdownFinished) } type="submit" fullwidth > {startInterviewBtnText} </CustomButton> <Form.Field name="phoneNumber" className="m-0"> <Form.Input domRef={hiddenInputRef} type="hidden" /> </Form.Field> <div className={classNames( styles['tos-and-privacy-policy'], 'mt-2', )} > <Trans> By clicking {startInterviewBtnText}, you agree to our <br /> <span style={{ textDecoration: 'underline', cursor: 'pointer', }} role="presentation" onClick={() => { setPrivacyPolicyURL( t({ id: 'candidate terms and conditions url', message: 'https://hireflix.com/terms-candidates?headless=true', }), ); }} > Terms and Conditions </span> </Trans> {!!data.privacyPolicy && ( <span> {' '} <Trans id="privacy-policy-text"> and{' '} <span role="presentation" style={{ textDecoration: 'underline', cursor: 'pointer', }} onClick={() => { if (data.privacyPolicy) { window.open(data.privacyPolicy, '_blank'); } }} > Privacy Policy. </span> </Trans> </span> )} </div> </> )} </div> </InterviewStep.RightColumn> </InterviewStep> <SafariMacEarbudsWarningModal show={showSafariMacOSEarbudsWarningModal} onAgree={() => { void form.handleSubmit(handleSubmit)(); setShowSafariMacOSEarbudsWarningModal(false); }} /> {privacyPolicyURL && ( <TermsModal show url={privacyPolicyURL} onClose={() => { return setPrivacyPolicyURL(undefined); }} /> )} </Form> );};const useGetRouteData = (positionId: string) => { const { data, error, loading } = useQuery(PublicApplicationRouteQuery, { fetchPolicy: 'network-only', variables: { input: { id: positionId, }, }, }); return useMemo(() => { return { data: data?.positionPublicApplication, loading, error, }; }, [data, error, loading]);};const PublicApplication: FC = () => { const match = useRouteMatch<{ positionId: string; }>(); const { data: routeData, loading: loadingRouteData, error: routeDataError, } = useGetRouteData(match.params.positionId); const { setLoaded } = useBoxedLayout(); useEffect(() => { setLoaded(true); }, [setLoaded]); if (loadingRouteData || !routeData) { return <FullScreenLoader />; } // eslint-disable-next-line no-underscore-dangle if (routeData?.__typename === 'PositionNotFoundError') { return <Redirect to="/not-found" />; } if (routeDataError) { throw routeDataError; } return <PublicApplicationView data={routeData} />;};export default PublicApplication;and here is the scss@import "variables.scss";.job-title { word-break: break-word;}.tos-and-privacy-policy { font-size: $size-7; text-align: center;}.form-column { padding-bottom: 0rem;}.intro-video-wrapper { display: flex; justify-content: center; align-items: center; height: 100%;}.email-has-been-sent { max-width: 350px; margin: auto;}.form { height: 100%; &.has-intro { @include widescreen { display: flex; flex-direction: column; justify-content: center; } } &:not(.has-intro) { @include tablet { max-width: 400px; margin-left: auto; margin-right: auto; } }}.public-application-read-error { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; flex-direction: column;}.right-column { overflow-y: initial !important;}And you also have the photo on how it should look like