refactor: ♻️ Update not-found, and hero-image load

edwinhern · Dec 27, 2024 · 30a1c36 · 30a1c36
1 parent d5caf89
commit 30a1c36
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 14 deletions.
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
@@ -1,4 +1,5 @@
 import { Button } from "@/components/ui/button";
+import { ArrowLeftIcon } from "lucide-react";
 import type { Metadata } from "next";
 import Link from "next/link";
 
@@ -9,14 +10,28 @@ export const metadata: Metadata = {
 
 export default function Custom404() {
 	return (
-		<div className="container relative flex flex-col gap-2">
-			<h1 className="font-bold text-3xl text-primary tracking-tight">404</h1>
-			<p className="max-w-sm">
-				Uh oh! This page does not exists, maybe you clicked an old link or misspelled. Please try again…
-			</p>
-			<Button asChild variant="link">
-				<Link href="/">Return home</Link>
-			</Button>
-		</div>
+		<article className="mt-8 flex flex-col gap-8 pb-16">
+			<div className="min-h-full px-4 sm:px-6 sm:py-24 md:grid md:place-items-center lg:px-8">
+				<div className="mx-auto max-w-max">
+					<section className="sm:flex">
+						<p className="font-bold text-3xl text-muted-foreground tracking-tight">404</p>
+						<div className="sm:ml-6">
+							<div className="sm:border-gray-200 sm:border-l sm:pl-6">
+								<h1 className="font-bold text-3xl sm:text-5xl">Uh oh!</h1>
+								<p className="mt-1 text-base text-muted-foreground">Maybe I renamed or deleted the page. Try again.</p>
+							</div>
+							<div className="mt-10 flex space-x-3 sm:border-transparent sm:border-l sm:pl-6">
+								<Button asChild variant="outline">
+									<Link href="/" className="flex items-center gap-2 font-light">
+										<ArrowLeftIcon className="size-4" />
+										back to home
+									</Link>
+								</Button>
+							</div>
+						</div>
+					</section>
+				</div>
+			</div>
+		</article>
 	);
 }
diff --git a/src/components/common/layouts/BaseLayout.tsx b/src/components/common/layouts/BaseLayout.tsx
@@ -9,7 +9,7 @@ interface BaseLayoutProps extends PropsWithChildren {
 	className?: string;
 }
 
-export function BaseLayout({ children, className }: BaseLayoutProps) {
+export function BaseLayout({ children, className }: Readonly<BaseLayoutProps>) {
 	return (
 		<html lang="en" suppressHydrationWarning>
 			<head />

diff --git a/src/components/features/home/components/Hero/components/HeroImage.tsx b/src/components/features/home/components/Hero/components/HeroImage.tsx
@@ -8,11 +8,13 @@ export const HeroImage = memo(function HeroImage() {
 		<Image
 			alt="Picture of the author"
 			className="m-auto mb-0 h-auto w-full max-w-md justify-center object-cover object-center lg:m-auto lg:max-w-xl"
-			draggable={false}
-			height={1000}
-			priority
 			src={siteConfig.assets.avatar}
-			width={1200}
+			sizes="(max-width: 768px) 100vw, 50vw"
+			quality={90}
+			placeholder="blur"
+			blurDataURL="data:image/svg+xml;base64,..."
+			width={800}
+			height={800}
 		/>
 	);
 });