From 7c92acad1562b364e357d71404149c5d8ff9d07c Mon Sep 17 00:00:00 2001 From: Val <44112412+LawfaL@users.noreply.github.com> Date: Tue, 25 Feb 2025 01:26:01 +0700 Subject: [PATCH] feat: 404 page --- src/app/layout.tsx | 54 +++++++++++++++ src/app/not-found.tsx | 72 ++++++++++++++++++++ src/components/Blocks/BeforeFooter/index.tsx | 53 +++++++------- src/components/Pages/Page.tsx | 10 +-- 4 files changed, 156 insertions(+), 33 deletions(-) create mode 100644 src/app/layout.tsx create mode 100644 src/app/not-found.tsx diff --git a/src/app/layout.tsx b/src/app/layout.tsx new file mode 100644 index 0000000..b5d244b --- /dev/null +++ b/src/app/layout.tsx @@ -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 ( + + {children} + + ); +} diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx new file mode 100644 index 0000000..280c92d --- /dev/null +++ b/src/app/not-found.tsx @@ -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 ( +
+
+ +
+
+
+ <> + {/* End Navigation Panel */} +
+ {/* Home Section */} +
+
+ {/* Home Section Content */} +
+
+
+
+
+

404

+
+
+

+ The page you were looking for could not be found. +

+
+
+ + + Back To Home Page + +
+
+
+
+
+ {/* End Home Section Content */} +
+
+ {/* End Home Section */} +
+ +
+
+ +
+ {/*
+
+ +
*/} +
+ {/*
*/} +
+
+ ); +} diff --git a/src/components/Blocks/BeforeFooter/index.tsx b/src/components/Blocks/BeforeFooter/index.tsx index c743dd1..9a151ae 100644 --- a/src/components/Blocks/BeforeFooter/index.tsx +++ b/src/components/Blocks/BeforeFooter/index.tsx @@ -5,6 +5,7 @@ export interface BeforeFooterBlockProps { title?: string; description?: string; buttonText?: string; + showLinier?: boolean; } 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."; const placeholderButtonText = "Get Started"; -export function BeforeFooterBlock({ title, description, buttonText }: BeforeFooterBlockProps) { +export function BeforeFooterBlock({ title, description, buttonText, showLinier = true }: BeforeFooterBlockProps) { return (
-
- - - - - -
+ {showLinier && ( +
+ + + + + +
+ )}

{title ?? placeholderTitle}

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