{getPageTitle('Starter Page')}

import React, { useEffect, useState } from 'react'; import type { ReactElement } from 'react'; import Head from 'next/head'; import Link from 'next/link'; import BaseButton from '../components/BaseButton'; import CardBox from '../components/CardBox'; import SectionFullScreen from '../components/SectionFullScreen'; import LayoutGuest from '../layouts/Guest'; import BaseDivider from '../components/BaseDivider'; import BaseButtons from '../components/BaseButtons'; import { getPageTitle } from '../config'; import { useAppSelector } from '../stores/hooks'; import CardBoxComponentTitle from '../components/CardBoxComponentTitle'; import { getPexelsImage, getPexelsVideo } from '../helpers/pexels'; import { useTranslation } from 'react-i18next'; export default function Starter() { const { t } = useTranslation('common'); const [illustrationImage, setIllustrationImage] = useState({ src: undefined, photographer: undefined, photographer_url: undefined, }); const [illustrationVideo, setIllustrationVideo] = useState({ video_files: [], }); const [contentType, setContentType] = useState('image'); const [contentPosition, setContentPosition] = useState('background'); const textColor = useAppSelector((state) => state.style.linkColor); const title = 'VRES'; // Fetch Pexels image/video useEffect(() => { async function fetchData() { const image = await getPexelsImage(); const video = await getPexelsVideo(); setIllustrationImage(image); setIllustrationVideo(video); } fetchData(); }, []); const imageBlock = (image) => (

Photo by {image?.photographer} on Pexels

); const videoBlock = (video) => { if (video?.video_files?.length > 0) { return (

Video by {video.user.name} on Pexels

); } }; return (

{getPageTitle('Starter Page')}

{contentType === 'image' && contentPosition !== 'background' ? imageBlock(illustrationImage) : null} {contentType === 'video' && contentPosition !== 'background' ? videoBlock(illustrationVideo) : null}

{t('pages.login.footer.privacy', { defaultValue: 'Privacy Policy' })}

); } Starter.getLayout = function getLayout(page: ReactElement) { return {page}; };