feat(not-found): add not-found page

app/not-found.tsx

@@ -0,0 +1,21 @@
+import { Button } from "@/components/ui/button";
+import Illustration from "@/demo/illustration";
+import Link from "next/link";
+
+export default function NotFound() {
+  return (
+    <>
+      <Illustration />
+
+      <main className="flex flex-1 flex-col items-center justify-center gap-5">
+        <h1 className="mb-4 text-4xl/[1.1] font-extrabold tracking-tight text-foreground md:text-5xl/[1.1]">
+          Page not found
+        </h1>
+
+        <Button size="lg" variant="outline">
+          <Link href="/">Go to homepage</Link>
+        </Button>
+      </main>
+    </>
+  );
+}

components/buttons/button-01.tsx

@@ -1,6 +1,5 @@
 import { Button } from "@/components/ui/button";
 
-export default function ButtonDemo(
-) {
+export default function ButtonDemo() {
   return <Button>Button</Button>;
 }

components/buttons/button-02.tsx

@@ -1,6 +1,5 @@
 import { Button } from "@/components/ui/button";
 
-export default function ButtonDemo(
-) {
+export default function ButtonDemo() {
   return <Button disabled>Button</Button>;
 }

components/buttons/button-03.tsx

@@ -1,6 +1,5 @@
 import { Button } from "@/components/ui/button";
 
-export default function ButtonDemo(
-) {
+export default function ButtonDemo() {
   return <Button className="rounded-full">Button</Button>;
 }

components/buttons/button-04.tsx

@@ -3,8 +3,7 @@
 import { Button } from "@/components/ui/button";
 import { Archive } from "lucide-react";
 
-export default function ButtonDemo(
-) {
+export default function ButtonDemo() {
   return (
     <Button>
       <Archive className="-ms-1 me-2 opacity-60" size={16} strokeWidth={2} aria-hidden="true" />

components/buttons/button-05.tsx

@@ -3,8 +3,7 @@
 import { Button } from "@/components/ui/button";
 import { Trash } from "lucide-react";
 
-export default function ButtonDemo(
-) {
+export default function ButtonDemo() {
   return (
     <Button variant="destructive">
       <Trash className="-ms-1 me-2 opacity-60" size={16} strokeWidth={2} aria-hidden="true" />

components/buttons/button-06.tsx

@@ -3,8 +3,7 @@
 import { Button } from "@/components/ui/button";
 import { X } from "lucide-react";
 
-export default function ButtonDemo(
-) {
+export default function ButtonDemo() {
   return (
     <Button variant="secondary">
       <X className="-ms-1 me-2 opacity-60" size={16} strokeWidth={2} aria-hidden="true" />

components/buttons/button-07.tsx

@@ -3,8 +3,7 @@
 import { Button } from "@/components/ui/button";
 import { Sparkles } from "lucide-react";
 
-export default function ButtonDemo(
-) {
+export default function ButtonDemo() {
   return (
     <Button variant="outline">
       Button

components/buttons/button-08.tsx

@@ -3,8 +3,7 @@
 import { Button } from "@/components/ui/button";
 import { ArrowLeft } from "lucide-react";
 
-export default function ButtonDemo(
-) {
+export default function ButtonDemo() {
   return (
     <Button className="group" variant="ghost">
       <ArrowLeft

components/buttons/button-09.tsx

@@ -3,8 +3,7 @@
 import { Button } from "@/components/ui/button";
 import { ArrowRight } from "lucide-react";
 
-export default function ButtonDemo(
-) {
+export default function ButtonDemo() {
   return (
     <Button className="group">
       Button

components/buttons/button-10.tsx

@@ -3,8 +3,7 @@
 import { Button } from "@/components/ui/button";
 import { ArrowRight, Mail } from "lucide-react";
 
-export default function ButtonDemo(
-) {
+export default function ButtonDemo() {
   return (
     <Button className="group" variant="secondary">
       <Mail className="-ms-1 me-2 opacity-60" size={16} strokeWidth={2} aria-hidden="true" />

components/buttons/button-11.tsx

@@ -3,8 +3,7 @@
 import { Button } from "@/components/ui/button";
 import { ChevronDown } from "lucide-react";
 
-export default function ButtonDemo(
-) {
+export default function ButtonDemo() {
   return (
     <Button>
       Button

components/buttons/button-12.tsx

@@ -1,7 +1,6 @@
 import { Button } from "@/components/ui/button";
 
-export default function ButtonDemo(
-) {
+export default function ButtonDemo() {
   return (
     <div className="inline-flex items-center gap-2">
       <Button variant="ghost">Cancel</Button>

components/buttons/button-13.tsx

@@ -3,8 +3,7 @@
 import { Button } from "@/components/ui/button";
 import { LoaderCircle } from "lucide-react";
 
-export default function ButtonDemo(
-) {
+export default function ButtonDemo() {
   return (
     <Button disabled>
       <LoaderCircle

components/buttons/button-14.tsx

@@ -6,8 +6,7 @@ import { Button } from "@/components/ui/button";
 import { LoaderCircle } from "lucide-react";
 import { useState } from "react";
 
-export default function ButtonDemo(
-) {
+export default function ButtonDemo() {
   const [isLoading, setIsLoading] = useState<boolean>(false);
 
   const handleClick = () => {

components/buttons/button-15.tsx

@@ -1,7 +1,6 @@
 import { Button } from "@/components/ui/button";
 
-export default function ButtonDemo(
-) {
+export default function ButtonDemo() {
   return (
     <Button variant="outline">
       Messages

components/buttons/button-16.tsx

@@ -3,8 +3,7 @@
 import { Button } from "@/components/ui/button";
 import { Printer } from "lucide-react";
 
-export default function ButtonDemo(
-) {
+export default function ButtonDemo() {
   return (
     <Button variant="outline">
       <Printer className="-ms-1 me-2 opacity-60" size={16} strokeWidth={2} aria-hidden="true" />

components/buttons/button-17.tsx

@@ -2,8 +2,7 @@ import { Button } from "@/components/ui/button";
 import AvatarImg from "@/public/avatar.jpg";
 import Image from "next/image";
 
-export default function ButtonDemo(
-) {
+export default function ButtonDemo() {
   return (
     <Button className="rounded-full py-0 ps-0">
       <div className="me-0.5 flex aspect-square h-full p-1.5">

components/buttons/button-18.tsx

@@ -5,8 +5,7 @@ import AvatarImg from "@/public/avatar.jpg";
 import { ChevronDown } from "lucide-react";
 import Image from "next/image";
 
-export default function ButtonDemo(
-) {
+export default function ButtonDemo() {
   return (
     <Button variant="ghost" className="h-auto p-0 hover:bg-transparent">
       <Image

components/buttons/button-19.tsx

@@ -3,8 +3,7 @@
 import { Button } from "@/components/ui/button";
 import { Plus } from "lucide-react";
 
-export default function ButtonDemo(
-) {
+export default function ButtonDemo() {
   return (
     <Button variant="outline" className="aspect-square max-sm:p-0">
       <Plus className="opacity-60 sm:-ms-1 sm:me-2" size={16} strokeWidth={2} aria-hidden="true" />

components/buttons/button-20.tsx

@@ -3,8 +3,7 @@
 import { Button } from "@/components/ui/button";
 import { Plus } from "lucide-react";
 
-export default function ButtonDemo(
-) {
+export default function ButtonDemo() {
   return (
     <Button className="rounded-full" variant="outline" size="icon" aria-label="Add new item">
       <Plus size={16} strokeWidth={2} aria-hidden="true" />

components/buttons/button-21.tsx

@@ -6,8 +6,7 @@ import { Button } from "@/components/ui/button";
 import { Plus } from "lucide-react";
 import { useState } from "react";
 
-export default function ButtonDemo(
-) {
+export default function ButtonDemo() {
   const [open, setOpen] = useState<boolean>(false);
 
   return (

components/buttons/button-22.tsx

@@ -6,8 +6,7 @@ import { Button } from "@/components/ui/button";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { Plus } from "lucide-react";
 
-export default function ButtonDemo(
-) {
+export default function ButtonDemo() {
   return (
     <TooltipProvider delayDuration={0}>
       <Tooltip>

components/buttons/button-23.tsx

@@ -3,8 +3,7 @@
 import { Button } from "@/components/ui/button";
 import { useState } from "react";
 
-export default function ButtonDemo(
-) {
+export default function ButtonDemo() {
   const [open, setOpen] = useState<boolean>(false);
 
   return (

components/buttons/button-24.tsx

@@ -7,8 +7,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/comp
 import { Bookmark } from "lucide-react";
 import { useState } from "react";
 
-export default function ButtonDemo(
-) {
+export default function ButtonDemo() {
   const [bookmarked, setBookmarked] = useState<boolean>(false);
   return (
     <TooltipProvider>

components/buttons/button-25.tsx

@@ -3,8 +3,7 @@
 import { Button } from "@/components/ui/button";
 import { ChevronDown, ChevronUp } from "lucide-react";
 
-export default function ButtonDemo(
-) {
+export default function ButtonDemo() {
   return (
     <div className="inline-flex -space-x-px rounded-lg shadow-sm shadow-black/5 rtl:space-x-reverse">
       <Button

components/buttons/button-26.tsx

@@ -3,8 +3,7 @@
 import { Button } from "@/components/ui/button";
 import { ChevronDown, ChevronUp } from "lucide-react";
 
-export default function ButtonDemo(
-) {
+export default function ButtonDemo() {
   return (
     <div className="inline-flex -space-x-px rounded-full shadow-sm shadow-black/5 rtl:space-x-reverse">
       <Button

components/buttons/button-27.tsx

@@ -6,8 +6,7 @@ import { Button } from "@/components/ui/button";
 import { Minus, Plus, Volume, Volume1, Volume2, VolumeX } from "lucide-react";
 import { useState } from "react";
 
-export default function ButtonDemo(
-) {
+export default function ButtonDemo() {
   const [volume, setVolume] = useState(3); // Initialize volume state (0-9)
 
   const decreaseVolume = () => setVolume((prev) => Math.max(0, prev - 1));

components/buttons/button-28.tsx

@@ -8,8 +8,7 @@ import { cn } from "@/lib/utils";
 import { Check, Copy } from "lucide-react";
 import { useState } from "react";
 
-export default function ButtonDemo(
-) {
+export default function ButtonDemo() {
   const [copied, setCopied] = useState<boolean>(false);
 
   const handleCopy = async () => {

components/buttons/button-29.tsx

@@ -3,8 +3,7 @@
 import { Button } from "@/components/ui/button";
 import { FlipHorizontal, FlipVertical } from "lucide-react";
 
-export default function ButtonDemo(
-) {
+export default function ButtonDemo() {
   return (
     <div className="inline-flex -space-x-px rounded-lg shadow-sm shadow-black/5 rtl:space-x-reverse">
       <Button

components/buttons/button-30.tsx

@@ -6,8 +6,7 @@ import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 import { AlignCenter, AlignJustify, AlignLeft, AlignRight } from "lucide-react";
 import { useState } from "react";
 
-export default function ButtonDemo(
-) {
+export default function ButtonDemo() {
   const [value, setValue] = useState<string>("center");
 
   return (

components/buttons/button-31.tsx

@@ -3,8 +3,7 @@
 import { Button } from "@/components/ui/button";
 import { Ellipsis, Files, Film } from "lucide-react";
 
-export default function ButtonDemo(
-) {
+export default function ButtonDemo() {
   return (
     <div className="inline-flex -space-x-px rounded-lg shadow-sm shadow-black/5 rtl:space-x-reverse">
       <Button

components/buttons/button-32.tsx

@@ -2,8 +2,7 @@
 
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 
-export default function ButtonDemo(
-) {
+export default function ButtonDemo() {
   return (
     <ToggleGroup
       variant="outline"

components/buttons/button-33.tsx

@@ -5,8 +5,7 @@
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 import { useState } from "react";
 
-export default function ButtonDemo(
-) {
+export default function ButtonDemo() {
   const [value, setValue] = useState<string>("left");
 
   return (

components/buttons/button-34.tsx

@@ -3,8 +3,7 @@
 import { Button } from "@/components/ui/button";
 import { QrCode } from "lucide-react";
 
-export default function ButtonDemo(
-) {
+export default function ButtonDemo() {
   return (
     <div className="inline-flex -space-x-px divide-x divide-primary-foreground/30 rounded-lg shadow-sm shadow-black/5 rtl:space-x-reverse">
       <Button

components/buttons/button-35.tsx

@@ -3,8 +3,7 @@
 import { Button } from "@/components/ui/button";
 import { SquareArrowOutUpRight } from "lucide-react";
 
-export default function ButtonDemo(
-) {
+export default function ButtonDemo() {
   return (
     <div className="inline-flex -space-x-px rounded-lg shadow-sm shadow-black/5 rtl:space-x-reverse">
       <Button

components/buttons/button-36.tsx

@@ -3,8 +3,7 @@
 import { Button } from "@/components/ui/button";
 import { ChevronDown, Pin } from "lucide-react";
 
-export default function ButtonDemo(
-) {
+export default function ButtonDemo() {
   return (
     <div className="inline-flex -space-x-px divide-x divide-primary-foreground/30 rounded-lg shadow-sm shadow-black/5 rtl:space-x-reverse">
       <Button

components/buttons/button-37.tsx

@@ -3,8 +3,7 @@
 import { Button } from "@/components/ui/button";
 import { ChevronDown, GitFork } from "lucide-react";
 
-export default function ButtonDemo(
-) {
+export default function ButtonDemo() {
   return (
     <div className="inline-flex -space-x-px divide-x divide-primary-foreground/30 rounded-lg shadow-sm shadow-black/5 rtl:space-x-reverse">
       <Button className="rounded-none shadow-none first:rounded-s-lg last:rounded-e-lg focus-visible:z-10">

components/buttons/button-38.tsx

@@ -3,8 +3,7 @@
 import { Button } from "@/components/ui/button";
 import { ChevronLeft } from "lucide-react";
 
-export default function ButtonDemo(
-) {
+export default function ButtonDemo() {
   return (
     <Button className="relative ps-12">
       Previous