404 Page

To personalize the 404 page on your website, you can modify the app/not-found.jsx file. Follow the steps below to customize different elements of the page:

Logo

You can customize the logo displayed on the 404 page by updating the following code:

<Image
    src="/images/logo.svg"
    alt="Jack"
    height={27}
    width={160}
/>

Update the src attribute inside the <Image> component to specify the path of your desired logo image. Ensure that you provide the correct path relative to your project's directory structure.
Adjust the height and width attributes to set the desired dimensions for the logo, ensuring it fits well within your website's layout.

Error Image

To customize the error image shown on the 404 page, locate the following code and update it with your desired image:

<Image
    src="/images/404/error.png"
    alt="error-image"
    height={352}
    width={550}
/>

Update the src attribute to specify the path of your desired image. Make sure to provide the correct path relative to your project's directory structure.
Adjust the height and width attributes to set the desired dimensions for the error image.

Text

Modify the text displayed on the 404 page by updating the content inside the <h3> tag:

<h3 className="my-5">Something is wrong!</h3>

Replace the text "Something is wrong!" with your desired message.

Button

To customize the button on the 404 page, modify the following code:

<a href="/" className="btn btn-lg btn-primary">
    <span className="position-relative">
        Go to Home <i className="ph-arrow-up-right"></i>
    </span>
    <span className="position-relative">
        Go to Home <i className="ph-arrow-up-right"></i>
    </span>
</a>

You can update the text "Go to Home" to your desired text.

Remember to save the not-found.jsx file after making the desired changes. The 404 page on your website will now reflect the personalized elements according to your customizations.

Make sure to replace the example paths and text with your actual image paths, logo, and desired content. Adjust the dimensions, classes, and styles as needed to achieve the desired visual appearance.

Contact Page Deploying Site