add: Not found page

app/(main)/layout.tsx

@@ -3,8 +3,8 @@ 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 ContactUs from "./(contact-us)/page";
-import "./globals.css";
+import FooterForm from "../_components/FooterForm";
+import "../globals.css";
 const geistSans = Geist({
   variable: "--font-geist-sans",
   subsets: ["latin"],
@@ -18,6 +18,9 @@ const geistMono = Geist_Mono({
 export const metadata: Metadata = {
   title: "Create Next App",
   description: "Generated by create next app",
+  icons: {
+    icon: "/fav-icon.svg",
+  },
 };
 
 function ContactInfo({
@@ -109,9 +112,7 @@ export default async function RootLayout({
             />
           </Link>
         </header>
-        {/* <div className="-z-30 w-screen h-screen absolute border">
-          
-        </div> */}
+
         <ToastContainer
           position="top-right"
           autoClose={2500}
@@ -132,9 +133,7 @@ export default async function RootLayout({
             aria-hidden="true"
           />
 
-          <div className="absolute w-full -top-[420px] md:-top-72 z-10">
-            <ContactUs />
-          </div>
+          <FooterForm />
 
           <div className="relative z-10 container px-4 py-4 m-auto flex flex-col justify-center items-center mt-96 ">
             <div className="flex justify-between flex-col md:flex-row gap-14 w-full md:w-1/2">

app/(main)/page.tsx

@@ -1,6 +1,6 @@
 import { Metadata } from "next";
 import Image from "next/image";
-import ApexChart from "./_components/ApexChart";
+import ApexChart from "../_components/ApexChart";
 export const metadata: Metadata = {
   title: "Opp lens - AI-Powered Tender Management for SMEs | Win More Tenders",
   description:
@@ -47,7 +47,7 @@ export default function Home() {
   return (
     <>
       <section className="block md:flex justify-around items-center">
-        <div className="flex gap-4 w-full md:w-1/2 font-bold text-4xl text-center flex-col bg-gray-800/10 p-10 rounded-[40px] h-fit mb-16">
+        <div className="flex gap-4 w-full md:w-1/2 font-bold text-4xl text-center flex-col bg-gray-400/10 p-10 rounded-[40px] h-fit mb-16 backdrop-blur-2xl">
           <div className="flex flex-col gap-8">
             <h2>
               <span>$</span>
@@ -225,28 +225,3 @@ export default function Home() {
     </>
   );
 }
-
-function CenterFrame({
-  src,
-  title,
-  description,
-  alt,
-}: {
-  src: string;
-  title: string;
-  description: string;
-  alt: string;
-}) {
-  return (
-    <div className="bg-[#F7FAFF] border border-(--primary)/30 rounded-3xl my-4 py-10 px-6">
-      <Image
-        src={src}
-        alt={alt}
-        width={36}
-        height={36}
-      />
-      <h3 className="text-2xl font-bold">{title}</h3>
-      <p className="text-gray-600">{description}</p>
-    </div>
-  );
-}

app/(not-found)/[...not-found]/layout.tsx

@@ -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>
+  );
+}

app/(not-found)/[...not-found]/page.tsx

@@ -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;

app/_components/FooterForm.tsx

@@ -0,0 +1,15 @@
+"use client";
+import { usePathname } from "next/navigation";
+import ContactUs from "../_contact-us/page";
+
+const FooterForm = () => {
+  const pathName = usePathname();
+  if (pathName !== "/") return null;
+  return (
+    <div className="absolute w-full -top-[420px] md:-top-72 z-10">
+      <ContactUs />
+    </div>
+  );
+};
+
+export default FooterForm;

app/not-found.tsx

@@ -1,7 +0,0 @@
-interface IProps {}
-
-const NotFound = ({}: IProps) => {
-  return <div>Not found</div>;
-};
-
-export default NotFound;