add: 404 page text bg + h1 animation

src/app/not-found.tsx

@@ -1,10 +1,14 @@
 import Arrow from '@/components/arrow'
 import H2 from '@/components/heading2'
+import cn from '@/utils/function'
+import { gasoekOne } from './font'
 
 export default function NotFound() {
   return (
-    <div className='h-screen flex flex-col justify-center items-center gap-4 text-gray-50'>
-      <H2>Not Found</H2>
+    <div className='h-screen flex flex-col justify-center items-center gap-4 text-gray-50 z-20 relative overflow-hidden text-center px-5'>
+      <H2 className='flex flex-col gap-2'>
+        Not Found
+      </H2>
       {/* Message : Tu t'es trompé de désert, le dinosaure n'est pas ici. */}
       <p>You&apos;ve wandered into the wrong desert, the dinosaur isn&apos;t here.</p>
       <div className='border border-gray-700 px-4 py-2'>
@@ -18,6 +22,16 @@ export default function NotFound() {
           </div>
         </a>
       </div>
+
+      <span className={cn(
+        gasoekOne.className,
+        `absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-gray-900/40 text-[50vw] -z-10 leading-none pointer-events-none
+         flex flex-col md:flex-row items-center justify-center`
+      )}>
+        <span>4</span>
+        <span>0</span>
+        <span>4</span>
+      </span>
     </div>
   )
 }

src/components/animated-heading1.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { gasoekOne } from "@/app/font";
+import { cubicBezier, motion } from "framer-motion";
+
+const AnimatedHeading1 = () => {
+  return ( 
+    <h1 className={`${gasoekOne.className} text-5xl md:text-7xl xl:text-[100px]`}>
+      <div className="flex items-center gap-8">
+        <span 
+          className="uppercase relative z-20"
+          >
+          404
+          <motion.span
+            initial={{height: "auto"}}
+            animate={{height: 0}}
+            transition={{
+              duration: .5, 
+              ease: cubicBezier(0.69, 0.14, 0.85, 0.38),
+            }}
+            className="absolute top-0 left-0 inset-0 bg-[#070707] origin-top"
+          />
+        </span>
+        <motion.div 
+          className="h-[1px] bg-gray-50 translate-y-2"
+          initial={{width: 0}}
+          animate={{width: "100%"}}
+          transition={{
+            duration: .5, 
+            ease: cubicBezier(0.69, 0.14, 0.85, 0.38),
+            delay: .6
+          }} 
+        />
+      </div>
+      <div>
+        <span className="uppercase relative">
+          Devinci
+          <motion.span
+            initial={{height: "auto"}}
+            animate={{height: 0}}
+            transition={{
+              duration: .5,
+              ease: cubicBezier(0.69, 0.14, 0.85, 0.38),
+              delay: .2  
+            }}
+            className="absolute top-0 left-0 inset-0 bg-[#070707] origin-top"
+          />
+        </span>
+      </div>
+    </h1>
+   );
+}
+
+export default AnimatedHeading1;

src/components/sections/header.tsx

@@ -1,22 +1,16 @@
-import { gasoekOne } from "@/app/font";
 import Image from "next/image";
+import AnimatedHeading1 from "../animated-heading1";
 import Timer from "../timer";
 
+
 const Header = () => {
+
+
   return ( 
     <div className="w-full h-screen flex flex-col gap-8 px-5 lg:px-10">
       {/* HEADING */}
         <div className="w-full flex justify-between items-end flex-wrap pt-14">
-          <h1 className={`${gasoekOne.className} text-5xl md:text-7xl xl:text-[100px] leading-none`}>
-            <div className="flex items-center gap-8">
-              <span className="uppercase">404</span>
-              <div className="h-[1px] bg-gray-50 w-full translate-y-2" />
-            </div>
-            <div>
-              <span className="uppercase">Devinci</span>
-            </div>
-          </h1>
-
+          <AnimatedHeading1 />
           <div className="font-medium flex flex-col">
             <span className="uppercase text-gray-400 ml-auto text-xs md:text-sm">Paris</span>
             <Timer />