feat: Refactor contact form and improve 404 page

This commit refactors the contact form for better reusability and moves it from the global footer to a dedicated section on the homepage. Additionally, it enhances the user experience on the 404 page. Key changes: - The `ContactUsForm` component is now configurable with props for grid layout (`columnsPerRow`) and button text, making it more versatile. - The contact form has been removed from the shared footer in the main layout and is now explicitly included only on the homepage. - The 404 "Not Found" page has been updated to include a direct link to the homepage for easier navigation. - Minor style adjustments were made to the 404 page layout and input field padding for improved visual consistency.
2025-10-25 16:11:23 +03:30
parent f57373b476
commit 71094f6c86
14 changed files with 620 additions and 21 deletions
@@ -0,0 +1,172 @@
+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 NavigationBar from "../_components/NavigationBar";
+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  items-center pb-4 container px-4 py-4 m-auto md:px-28 md:justify-between flex-wrap gap-5">
+          <section>
+            <Link
+              href="/"
+              aria-label="Opp lens home">
+              <Image
+                src="/main-logo.svg"
+                alt="Opp lens logo"
+                width={180}
+                height={30}
+                priority
+              />
+            </Link>
+          </section>
+
+          <NavigationBar />
+        </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-40">
+          <div className="relative z-10 container px-4 py-4 m-auto flex flex-col justify-center items-center mt-24 ">
+            <div className="flex justify-between flex-col md:flex-row gap-14 w-full md:w-1/2">
+              <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>
+  );
+}