Added frontend wave and FadeComponent

src/components/core/FadeComponent.js

@@ -0,0 +1,33 @@
+//============================================================
+// Essential Imports
+//============================================================
+
+import clsx from 'clsx';
+import React, { useEffect, useState } from 'react';
+
+//============================================================
+// Component
+//============================================================
+
+const FadeComponent = ({ delay, children }) => {
+  const [showComponent, setShowComponent] = useState('opacity-0');
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setShowComponent('opacity-100');
+    }, delay);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, []);
+
+  return (
+    <div className="w-full bg-polar-night-400">
+      <div className={clsx('w-full transition-all ease-in-out duration-500 ', showComponent)}>
+        {children}
+      </div>
+    </div>
+  );
+};
+export default FadeComponent;

src/components/pages/Front.page.js

@@ -10,6 +10,7 @@ import React from 'react';
 
 import AppearText from '../text/AppearText';
 import Cdiv from '../core/Cdiv';
+import FadeComponent from '../core/FadeComponent';
 
 //============================================================
 // Component
@@ -17,6 +18,7 @@ import Cdiv from '../core/Cdiv';
 
 const FrontPage = () => {
   return (
+    <>
       <div className="w-full h-screen bg-polar-night-400">
         <Cdiv className="w-full h-32 py-6 px-24">
           <Cdiv className="w-full h-full gap-2">
@@ -45,11 +47,29 @@ const FrontPage = () => {
         </Cdiv>
         <div className="w-full h-3/5 flex justify-center items-center">
           <div className="flex flex-col gap-4 justify-center items-center">
-          <AppearText className="font-mono text-7xl text-frost-400" text="JOHN COSTA" delay={750} />
+            <AppearText
-          <AppearText className="font-mono text-5xl text-frost-200" text="DEVELOPER" delay={1500} />
+              className="font-mono text-7xl text-frost-400"
+              text="JOHN COSTA"
+              delay={750}
+            />
+            <AppearText
+              className="font-mono text-5xl text-frost-200"
+              text="DEVELOPER"
+              delay={1500}
+            />
           </div>
         </div>
+        <FadeComponent delay={2500}>
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
+            <path
+              className="fill-frost-200"
+              fill-opacity="1"
+              d="M0,96L80,85.3C160,75,320,53,480,58.7C640,64,800,96,960,101.3C1120,107,1280,85,1360,74.7L1440,64L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"></path>
+          </svg>
+        </FadeComponent>
       </div>
+      <Cdiv className="bg-frost-200"></Cdiv>
+    </>
   );
 };
 export default FrontPage;