From cd347ea072c1cba36833313ee38b36268960238e Mon Sep 17 00:00:00 2001 From: Usman Baig Date: Mon, 23 Mar 2026 15:40:01 +0100 Subject: [PATCH] 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. --- app/not-found.tsx | 8 ++-- app/welcome/page.tsx | 26 ++++++----- components/ErrorDisplay.tsx | 10 ++--- public/illustrations/confirmed.svg | 21 +++++++++ public/illustrations/page-not-found.svg | 38 ++++++++++++++++ public/illustrations/server-down.svg | 55 +++++++++++++++++++++++ public/illustrations/website-setup.svg | 36 +++++++++++++++ public/illustrations/welcome.svg | 59 +++++++++++++++++++++++++ 8 files changed, 234 insertions(+), 19 deletions(-) create mode 100644 public/illustrations/confirmed.svg create mode 100644 public/illustrations/page-not-found.svg create mode 100644 public/illustrations/server-down.svg create mode 100644 public/illustrations/website-setup.svg create mode 100644 public/illustrations/welcome.svg diff --git a/app/not-found.tsx b/app/not-found.tsx index 924cc99..90efa7c 100644 --- a/app/not-found.tsx +++ b/app/not-found.tsx @@ -14,9 +14,11 @@ export default function NotFound() {
-

- 404 -

+ Page not found

Page not found

diff --git a/app/welcome/page.tsx b/app/welcome/page.tsx index a61de13..b4c73b4 100644 --- a/app/welcome/page.tsx +++ b/app/welcome/page.tsx @@ -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() { ) : (
-
- -
+ Welcome to Pulse

Welcome to Pulse

@@ -638,9 +638,11 @@ function WelcomeContent() { Back
-
- -
+ Add your first site

Add your first site

@@ -723,9 +725,11 @@ function WelcomeContent() { className={cardClass} >
-
- -
+ All set

You're all set

diff --git a/components/ErrorDisplay.tsx b/components/ErrorDisplay.tsx index 6bed625..9ca2d01 100644 --- a/components/ErrorDisplay.tsx +++ b/components/ErrorDisplay.tsx @@ -30,11 +30,11 @@ export default function ErrorDisplay({
-
- - - -
+ Something went wrong

{title} diff --git a/public/illustrations/confirmed.svg b/public/illustrations/confirmed.svg new file mode 100644 index 0000000..64275bb --- /dev/null +++ b/public/illustrations/confirmed.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/public/illustrations/page-not-found.svg b/public/illustrations/page-not-found.svg new file mode 100644 index 0000000..3a6a605 --- /dev/null +++ b/public/illustrations/page-not-found.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/illustrations/server-down.svg b/public/illustrations/server-down.svg new file mode 100644 index 0000000..fe0900b --- /dev/null +++ b/public/illustrations/server-down.svg @@ -0,0 +1,55 @@ + + + server down + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/illustrations/website-setup.svg b/public/illustrations/website-setup.svg new file mode 100644 index 0000000..9b6548b --- /dev/null +++ b/public/illustrations/website-setup.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/illustrations/welcome.svg b/public/illustrations/welcome.svg new file mode 100644 index 0000000..7b2a8a6 --- /dev/null +++ b/public/illustrations/welcome.svg @@ -0,0 +1,59 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +