feat: add illustrations to 404, error page, and welcome flow
- 404 page: replace large "404" text with page-not-found illustration - ErrorDisplay: replace warning icon with server-down illustration - Welcome step 1 (no orgs): welcome illustration - Welcome step 4 (add site): website-setup illustration - Welcome step 5 (done): confirmed illustration All SVGs dark-themed with brand orange accent.
This commit is contained in:
@@ -14,9 +14,11 @@ export default function NotFound() {
|
||||
</div>
|
||||
|
||||
<div className="text-center px-4 z-10">
|
||||
<h1 className="text-9xl font-bold text-transparent bg-clip-text bg-gradient-to-b from-white to-neutral-500 mb-4">
|
||||
404
|
||||
</h1>
|
||||
<img
|
||||
src="/illustrations/page-not-found.svg"
|
||||
alt="Page not found"
|
||||
className="w-72 h-auto mx-auto mb-8"
|
||||
/>
|
||||
<h2 className="text-2xl font-bold text-white mb-6">
|
||||
Page not found
|
||||
</h2>
|
||||
|
||||
@@ -39,8 +39,6 @@ import {
|
||||
ArrowRightIcon,
|
||||
ArrowLeftIcon,
|
||||
BarChartIcon,
|
||||
GlobeIcon,
|
||||
ZapIcon,
|
||||
PlusIcon,
|
||||
} from '@ciphera-net/ui'
|
||||
import Link from 'next/link'
|
||||
@@ -440,9 +438,11 @@ function WelcomeContent() {
|
||||
</>
|
||||
) : (
|
||||
<div className="text-center">
|
||||
<div className="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-brand-orange/10 text-brand-orange mb-6">
|
||||
<ZapIcon className="h-7 w-7" />
|
||||
</div>
|
||||
<img
|
||||
src="/illustrations/welcome.svg"
|
||||
alt="Welcome to Pulse"
|
||||
className="w-48 h-auto mx-auto mb-6"
|
||||
/>
|
||||
<h1 className="text-2xl font-bold text-neutral-900 dark:text-white">
|
||||
Welcome to Pulse
|
||||
</h1>
|
||||
@@ -638,9 +638,11 @@ function WelcomeContent() {
|
||||
Back
|
||||
</button>
|
||||
<div className="text-center mb-6">
|
||||
<div className="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-brand-orange/10 text-brand-orange mb-4">
|
||||
<GlobeIcon className="h-7 w-7" />
|
||||
</div>
|
||||
<img
|
||||
src="/illustrations/website-setup.svg"
|
||||
alt="Add your first site"
|
||||
className="w-44 h-auto mx-auto mb-4"
|
||||
/>
|
||||
<h1 className="text-2xl font-bold text-neutral-900 dark:text-white">
|
||||
Add your first site
|
||||
</h1>
|
||||
@@ -723,9 +725,11 @@ function WelcomeContent() {
|
||||
className={cardClass}
|
||||
>
|
||||
<div className="text-center">
|
||||
<div className="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-green-500/10 text-green-600 dark:text-green-400 mb-6">
|
||||
<CheckCircleIcon className="h-7 w-7" />
|
||||
</div>
|
||||
<img
|
||||
src="/illustrations/confirmed.svg"
|
||||
alt="All set"
|
||||
className="w-44 h-auto mx-auto mb-6"
|
||||
/>
|
||||
<h1 className="text-2xl font-bold text-neutral-900 dark:text-white">
|
||||
You're all set
|
||||
</h1>
|
||||
|
||||
Reference in New Issue
Block a user