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.
This commit is contained in:
AmirReza Jamali
2025-10-25 16:11:23 +03:30
parent f57373b476
commit 71094f6c86
14 changed files with 620 additions and 21 deletions
+3 -8
View File
@@ -127,14 +127,9 @@ export default async function RootLayout({
/>
<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">
<footer className="relative h-full bg-[url('/footer-bg.svg')] bg-cover bg-no-repeat mt-20">
<div className="relative z-10 container px-4 py-4 m-auto flex flex-col justify-center items-center">
<div className="flex justify-between flex-col md:flex-row gap-14 w-full md:w-1/2 mt-20">
<div className="flex flex-col gap-10">
<Image
src={"/footer-logo.svg"}
+11 -2
View File
@@ -1,4 +1,5 @@
import Image from "next/image";
import Link from "next/link";
interface IProps {}
@@ -9,7 +10,7 @@ const NotFoundPage = ({}: IProps) => {
<Image
src={"/404.svg"}
alt="404"
width={1000}
width={700}
height={1000}
/>
</section>
@@ -26,7 +27,15 @@ const NotFoundPage = ({}: IProps) => {
<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
Sorry, the page you're looking for does not exist or has been removed.{" "}
<br />
You can navigate to Home using
<Link
href="/"
className="text-(--primary) mx-1">
This
</Link>
link.
</p>
</section>
</div>