feat: 404 page
This commit is contained in:
Val
parent
652e665729
commit
7c92acad15
54
src/app/layout.tsx
Normal file
54
src/app/layout.tsx
Normal 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
72
src/app/not-found.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -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,12 +13,13 @@ 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)" }}
|
||||||
>
|
>
|
||||||
|
{showLinier && (
|
||||||
<div className="absolute top-0 left-0 w-full overflow-hidden leading-none rotate-180">
|
<div className="absolute top-0 left-0 w-full overflow-hidden leading-none rotate-180">
|
||||||
<svg
|
<svg
|
||||||
viewBox="0 0 1200 120"
|
viewBox="0 0 1200 120"
|
||||||
@ -42,6 +44,7 @@ export function BeforeFooterBlock({ title, description, buttonText }: BeforeFoot
|
|||||||
></path>
|
></path>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</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>
|
||||||
|
|||||||
@ -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 (
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user