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;
|
||||
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 (
|
||||
<section
|
||||
className="relative py-16 px-6 text-center text-white"
|
||||
style={{ background: "linear-gradient(to right, #64B3B4, #A8DCCA)" }}
|
||||
>
|
||||
<div className="absolute top-0 left-0 w-full overflow-hidden leading-none rotate-180">
|
||||
<svg
|
||||
viewBox="0 0 1200 120"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
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"
|
||||
fill="white"
|
||||
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"
|
||||
fill="white"
|
||||
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"
|
||||
fill="white"
|
||||
opacity="0.3"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
{showLinier && (
|
||||
<div className="absolute top-0 left-0 w-full overflow-hidden leading-none rotate-180">
|
||||
<svg
|
||||
viewBox="0 0 1200 120"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
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"
|
||||
fill="white"
|
||||
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"
|
||||
fill="white"
|
||||
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"
|
||||
fill="white"
|
||||
opacity="0.3"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="max-w-4xl mx-auto mt-12">
|
||||
<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 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 (
|
||||
<>
|
||||
<BlogDetail slug={slug} />;
|
||||
<BeforeFooterBlock />
|
||||
</>
|
||||
);
|
||||
redirect("/404");
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user