Update error handling and UI design across multiple files

Enhanced error handling in documentation and blog pages, to ensure smoother running and user experience. This also includes additional UI updates related to font selection, layout arrangement, and interactive elements on error pages, marketing pages, and general site navigation components. Moreover, a "contact us" feature has been added to error pages to help users seek assistance more conveniently.
This commit is contained in:
gbuomprisco
2024-07-18 09:18:16 +02:00
parent 56dfcb872b
commit 1876bbd9e4
17 changed files with 129 additions and 54 deletions

View File

@@ -1,6 +1,8 @@
'use client';
import { ArrowLeft } from 'lucide-react';
import Link from 'next/link';
import { ArrowLeft, MessageCircle } from 'lucide-react';
import { useCaptureException } from '@kit/monitoring/hooks';
import { Button } from '@kit/ui/button';
@@ -29,32 +31,48 @@ const GlobalErrorPage = ({
'container m-auto flex w-full flex-1 flex-col items-center justify-center'
}
>
<div className={'flex flex-col items-center space-y-16'}>
<div className={'flex flex-col items-center space-y-8'}>
<div>
<h1 className={'font-heading text-9xl font-extrabold'}>
<h1 className={'font-heading text-9xl font-semibold'}>
<Trans i18nKey={'common:errorPageHeading'} />
</h1>
</div>
<div className={'flex flex-col items-center space-y-8'}>
<div className={'flex flex-col items-center space-y-2.5'}>
<div
className={
'flex max-w-xl flex-col items-center space-y-1 text-center'
}
>
<div>
<Heading level={1}>
<Heading level={2}>
<Trans i18nKey={'common:genericError'} />
</Heading>
</div>
<p className={'text-muted-foreground'}>
<p className={'text-lg text-muted-foreground'}>
<Trans i18nKey={'common:genericErrorSubHeading'} />
</p>
</div>
<div>
<Button variant={'outline'} onClick={reset}>
<Button
className={'w-full'}
variant={'default'}
onClick={reset}
>
<ArrowLeft className={'mr-2 h-4'} />
<Trans i18nKey={'common:goBack'} />
</Button>
<Button className={'w-full'} variant={'outline'} asChild>
<Link href={'/contact'}>
<MessageCircle className={'mr-2 h-4'} />
<Trans i18nKey={'common:contactUs'} />
</Link>
</Button>
</div>
</div>
</div>