All files / src/components/pages/Error index.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
1x
1x
1x
1x
1x
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
1x
 
import React from "react";
import Link from "next/link";
import Image from "next/image";
import { Icon } from "@/components/ui/icons";
 
const Error = () => {
  return (
    <section className="overflow-hidden pt-[140px] pb-20 bg-gray-2 dark:bg-gray-900">
      <div className="max-w-[1170px] w-full mx-auto px-4 sm:px-8 xl:px-0">
        <div className="bg-white dark:bg-gray-800 rounded-xl shadow-1 px-4 py-10 sm:py-15 lg:py-20 xl:py-25">
          <div className="text-center">
            <Image
              src="/images/404.svg"
              alt="404"
              className="mx-auto mb-8 w-1/2 sm:w-auto"
              width={288}
              height={190}
            />

            <h2 className="font-medium text-dark dark:text-gray-100 text-xl sm:text-2xl mb-3">
              Sorry, the page can&apos;t be found
            </h2>

            <p className="max-w-[410px] w-full mx-auto mb-7.5 dark:text-gray-300">
              The page you were looking for appears to have been moved,
              deleted or does not exist.
            </p>

            <Link
              href="/"
              className="inline-flex items-center gap-2 font-medium text-white bg-blue py-3 px-6 rounded-md ease-out duration-200 hover:bg-blue-dark"
            >
              <Icon name="arrow-left" className="fill-current" size={20} />
              Back to Home
            </Link>
          </div>
        </div>
      </div>
    </section>
  );
};
 
export default Error;