add: Not found page

2025-10-22 17:51:15 +03:30
parent 349f1137f7
commit f57373b476
10 changed files with 397 additions and 42 deletions
@@ -0,0 +1,173 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import Image from "next/image";
+import Link from "next/link";
+import { ToastContainer, Zoom } from "react-toastify";
+
+import "../../globals.css";
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+  icons: {
+    icon: "/fav-icon.svg",
+  },
+};
+
+function ContactInfo({
+  icon,
+  contact,
+  href,
+  ariaLabel,
+  contactIconSrc,
+}: {
+  icon: string;
+  contact: string;
+  href?: string;
+  ariaLabel: string;
+  contactIconSrc?: string;
+}) {
+  return (
+    <div className="flex gap-3 my-3 text-white">
+      <Image
+        src={icon}
+        width={24}
+        height={24}
+        alt=""
+        aria-hidden="true"
+      />
+      {href ? (
+        <a
+          href={href}
+          className="cursor-pointer min-w-fit"
+          aria-label={ariaLabel}>
+          {contact}
+        </a>
+      ) : (
+        <p className="flex gap-3">
+          {!!contactIconSrc && (
+            <Image
+              src={contactIconSrc}
+              width={20}
+              height={20}
+              alt="flag"
+            />
+          )}
+          {contact}
+        </p>
+      )}
+    </div>
+  );
+}
+
+export default async function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  const contactInfo = [
+    {
+      icon: "/Message.svg",
+      contact: "info@opplens.com",
+      href: "mailto:info@opplens.com",
+      ariaLabel: "Email us at info@opplens.com",
+    },
+    {
+      icon: "/Phone.svg",
+      contact: "(+46) - 761581526",
+      href: "tel:+46761581526",
+      ariaLabel: "Call us at +46 761581526",
+    },
+    {
+      icon: "/Location.svg",
+      contact: "Stockholm, Sweden",
+      ariaLabel: "Our location in Stockholm, Sweden",
+      contactIconSrc: "/sweden.svg",
+    },
+  ];
+
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased flex flex-col  bg-[url('/header-bg.svg')] bg-top-right bg-no-repeat bg-contain md:bg-cover`}>
+        <header className="flex justify-center pt-8 md:justify-between items-center pb-4 container px-4 py-4 m-auto">
+          <Link
+            href="/"
+            aria-label="Opp lens home">
+            <Image
+              src="/main-logo.svg"
+              alt="Opp lens logo"
+              width={180}
+              height={30}
+              priority
+            />
+          </Link>
+        </header>
+
+        <ToastContainer
+          position="top-right"
+          autoClose={2500}
+          theme={"colored"}
+          transition={Zoom}
+          hideProgressBar
+          newestOnTop
+          closeOnClick
+          pauseOnFocusLoss
+          draggable
+          pauseOnHover
+        />
+
+        <main className="container px-4 py-4 m-auto flex-grow">{children}</main>
+        <footer className="relative h-full bg-[url('/footer-bg.svg')] bg-cover bg-no-repeat mt-96">
+          <div
+            className="absolute w-full -top-[355px] md:-top-72 h-[600px] z-[-10] "
+            aria-hidden="true"
+          />
+
+          <div className="relative z-10 container px-4 py-4 m-auto flex flex-col justify-center items-center md:mt-36 ">
+            <div className="flex justify-between flex-col md:flex-row gap-14 w-full md:w-1/2 mt-40">
+              <div className="flex flex-col gap-10">
+                <Image
+                  src={"/footer-logo.svg"}
+                  alt="Opp lens logo"
+                  width={180}
+                  height={30}
+                  priority
+                />
+                <div>
+                  <p className="text-white my-2">
+                    Democratizing Tender Access for SMEs.
+                  </p>
+                  <p className="text-white my-2">
+                    © 2025 Opplens.com by PBL Partners AB. All Rights Reserved.
+                  </p>
+                </div>
+              </div>
+              <div>
+                {contactInfo.map((contact, index) => (
+                  <ContactInfo
+                    key={index}
+                    icon={contact.icon}
+                    contact={contact.contact}
+                    href={contact.href}
+                    ariaLabel={contact.ariaLabel}
+                    contactIconSrc={contact.contactIconSrc}
+                  />
+                ))}
+              </div>
+            </div>
+          </div>
+        </footer>
+      </body>
+    </html>
+  );
+}
@@ -0,0 +1,36 @@
+import Image from "next/image";
+
+interface IProps {}
+
+const NotFoundPage = ({}: IProps) => {
+  return (
+    <div className="flex flex-col gap-24">
+      <section className="w-full flex items-center justify-center mt-8">
+        <Image
+          src={"/404.svg"}
+          alt="404"
+          width={1000}
+          height={1000}
+        />
+      </section>
+      <section>
+        <div>
+          <Image
+            src={"/cable.svg"}
+            width={2000}
+            height={3000}
+            alt="not connected cable"
+          />
+        </div>
+      </section>
+      <section className="flex items-center flex-col justify-center gap-10 mt-10">
+        <h1 className="font-bold text-2xl">Page not found</h1>
+        <p className="font-semibold text-[16px] text-[#77707f]">
+          Sorry, the page you're looking for does not exist or has been removed
+        </p>
+      </section>
+    </div>
+  );
+};
+
+export default NotFoundPage;