feat: 404 page

This commit is contained in:
Val 2025-02-25 01:26:01 +07:00
parent 652e665729
commit 7c92acad15
4 changed files with 156 additions and 33 deletions

54
src/app/layout.tsx Normal file
View File

@ -0,0 +1,54 @@
"use client";
import { usePathname } from "next/navigation";
import { useEffect } from "react";
import { init_wow } from "@/utils/initWow";
import { parallaxMouseMovement, parallaxScroll } from "@/utils/parallax";
import { headerChangeOnScroll } from "@/utils/changeHeaderOnScroll";
import "@/app/globals.css";
import "swiper/css";
import "jarallax/dist/jarallax.min.css";
import "swiper/css/effect-fade";
import "react-modal-video/css/modal-video.css";
import "photoswipe/dist/photoswipe.css";
import "tippy.js/dist/tippy.css";
import "@public/assets/css/styles.css";
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
const path = usePathname();
useEffect(() => {
init_wow();
parallaxMouseMovement();
const mainNav = document.querySelector(".main-nav");
if (mainNav?.classList.contains("transparent")) {
mainNav.classList.add("js-transparent");
} else if (!mainNav?.classList?.contains("dark")) {
mainNav?.classList.add("js-no-transparent-white");
}
window.addEventListener("scroll", headerChangeOnScroll);
parallaxScroll();
return () => {
window.removeEventListener("scroll", headerChangeOnScroll);
};
}, [path]);
useEffect(() => {
if (typeof window !== "undefined") {
// Import the script only on the client side
// @ts-ignore
import("bootstrap/dist/js/bootstrap.esm").then(() => {
// Module is imported, you can access any exported functionality if
});
}
}, []);
return (
<html lang="en">
<body>{children}</body>
</html>
);
}

72
src/app/not-found.tsx Normal file
View File

@ -0,0 +1,72 @@
"use client";
import Header from "@/components/Header";
import { BeforeFooterBlock } from "@/components/Blocks/BeforeFooter";
import { navMenuData } from "@/data/menu";
import Footer from "@/components/Footer";
import Link from "next/link";
export default function NotFound() {
return (
<div className="theme-slick">
<div className="page" id="top">
<nav className="main-nav dark transparent stick-fixed wow-menubar wch-unset">
<Header links={navMenuData} />
</nav>
<main id="main">
<div className="theme-main">
<div className="page" id="top">
<>
{/* End Navigation Panel */}
<main id="main">
{/* Home Section */}
<section
className="home-section bg-dark-1 bg-dark-alpha-60 light-content parallax-5"
style={{
backgroundImage: "url(/assets/images/full-width-images/section-bg-13.jpeg)",
}}
id="home"
>
<div className="container min-height-100vh d-flex align-items-center pt-100 pb-100 pt-sm-120 pb-sm-120">
{/* Home Section Content */}
<div className="home-content">
<div className="row">
<div className="col-sm-10 offset-sm-1 col-md-8 offset-md-2 col-lg-6 offset-lg-3">
<div className="hs-wrap">
<div className="wow fadeInUp" data-wow-delay=".1s">
<h1 className="hs-title-12 mb-40 mb-sm-30">404</h1>
</div>
<div className="mb-40 mb-sm-30 wow fadeInUp" data-wow-delay=".2s">
<h2 className="section-descr mb-20">
The page you were looking for could not be found.
</h2>
</div>
<div className="local-scroll wow fadeInUp" data-wow-delay=".3s">
<Link href={`/`} className="btn btn-mod btn-w btn-round btn-medium btn-hover-anim">
<i className="mi-arrow-left align-center mr-5" />
<span>Back To Home Page</span>
</Link>
</div>
</div>
</div>
</div>
</div>
{/* End Home Section Content */}
</div>
</section>
{/* End Home Section */}
</main>
</>
</div>
</div>
<BeforeFooterBlock showLinier={false} />
</main>
{/* <footer className="page-section dark footer bg-dark-2 light-content position-relative overflow-hidden pb-30">
<div className="bg-shape-4 opacity-003">
<Image src="/assets/images/demo-slick/bg-shape-4.svg" width={1600} height={268} alt="" />
</div> */}
<Footer />
{/* </footer> */}
</div>
</div>
);
}

View File

@ -5,6 +5,7 @@ export interface BeforeFooterBlockProps {
title?: string; title?: string;
description?: string; description?: string;
buttonText?: string; buttonText?: string;
showLinier?: boolean;
} }
const placeholderTitle = "Begin your path to healing with Cochise Oncology"; const placeholderTitle = "Begin your path to healing with Cochise Oncology";
@ -12,36 +13,38 @@ const placeholderDescription =
"Our dedicated team in Sierra Vista, AZ is here to support you with hope, strength, and courage. We offer personalized cancer care using innovative treatments in our state-of-the-art facility. Take the first step towards comprehensive, patient-focused treatment by scheduling a consultation. Let us listen to your needs, answer your questions, and create a tailored plan for your journey. Fill out our form to connect with our compassionate experts and discover how Cochise Oncology can stand with you in your fight against cancer."; "Our dedicated team in Sierra Vista, AZ is here to support you with hope, strength, and courage. We offer personalized cancer care using innovative treatments in our state-of-the-art facility. Take the first step towards comprehensive, patient-focused treatment by scheduling a consultation. Let us listen to your needs, answer your questions, and create a tailored plan for your journey. Fill out our form to connect with our compassionate experts and discover how Cochise Oncology can stand with you in your fight against cancer.";
const placeholderButtonText = "Get Started"; const placeholderButtonText = "Get Started";
export function BeforeFooterBlock({ title, description, buttonText }: BeforeFooterBlockProps) { export function BeforeFooterBlock({ title, description, buttonText, showLinier = true }: BeforeFooterBlockProps) {
return ( return (
<section <section
className="relative py-16 px-6 text-center text-white" className="relative py-16 px-6 text-center text-white"
style={{ background: "linear-gradient(to right, #64B3B4, #A8DCCA)" }} style={{ background: "linear-gradient(to right, #64B3B4, #A8DCCA)" }}
> >
<div className="absolute top-0 left-0 w-full overflow-hidden leading-none rotate-180"> {showLinier && (
<svg <div className="absolute top-0 left-0 w-full overflow-hidden leading-none rotate-180">
viewBox="0 0 1200 120" <svg
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120"
preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"
className="w-full h-[100px]" preserveAspectRatio="none"
> className="w-full h-[100px]"
<path >
d="M0,80 C150,110 350,20 600,80 C850,140 1050,40 1200,80 L1200,120 L0,120 Z" <path
fill="white" d="M0,80 C150,110 350,20 600,80 C850,140 1050,40 1200,80 L1200,120 L0,120 Z"
opacity="0.8" fill="white"
></path> opacity="0.8"
<path ></path>
d="M0,90 C150,130 350,50 600,90 C850,150 1050,60 1200,90 L1200,120 L0,120 Z" <path
fill="white" d="M0,90 C150,130 350,50 600,90 C850,150 1050,60 1200,90 L1200,120 L0,120 Z"
opacity="0.5" fill="white"
></path> opacity="0.5"
<path ></path>
d="M0,100 C150,150 350,80 600,100 C850,160 1050,90 1200,100 L1200,120 L0,120 Z" <path
fill="white" d="M0,100 C150,150 350,80 600,100 C850,160 1050,90 1200,100 L1200,120 L0,120 Z"
opacity="0.3" fill="white"
></path> opacity="0.3"
</svg> ></path>
</div> </svg>
</div>
)}
<div className="max-w-4xl mx-auto mt-12"> <div className="max-w-4xl mx-auto mt-12">
<h2 className="text-4xl font-semibold mb-4">{title ?? placeholderTitle}</h2> <h2 className="text-4xl font-semibold mb-4">{title ?? placeholderTitle}</h2>

View File

@ -1,8 +1,7 @@
import { BeforeFooterBlock } from "@/components/Blocks/BeforeFooter";
import { RenderBlocks } from "@/components/Blocks/RenderBlocks"; import { RenderBlocks } from "@/components/Blocks/RenderBlocks";
import BlogDetail from "@/components/Blogs/BlogDetail";
import { fetchPageBySlug } from "@/services/payload/page"; import { fetchPageBySlug } from "@/services/payload/page";
import Image from "next/image"; import Image from "next/image";
import { redirect } from "next/navigation";
export interface PageProps { export interface PageProps {
slug: string | undefined; slug: string | undefined;
@ -12,12 +11,7 @@ export default async function Page({ slug }: PageProps) {
const page = await fetchPageBySlug({ slug }); const page = await fetchPageBySlug({ slug });
if (!page) { if (!page) {
return ( redirect("/404");
<>
<BlogDetail slug={slug} />;
<BeforeFooterBlock />
</>
);
} }
return ( return (