added military medals to the contact form onSubmit

src/assets/css/globals.css

@@ -0,0 +1,11 @@
+/* styles/globals.css */
+
+@keyframes fall {
+  to {
+    transform: translateY(calc(100vh + 100%));
+  }
+}
+
+.emoji-fall {
+  animation: fall 5s linear forwards;
+}

src/components/EmojiRain/index.tsx

@@ -0,0 +1,21 @@
+const EmojiRain = () => {
+  return (
+    <div className="fixed top-0 left-0 w-full h-full pointer-events-none z-50 overflow-hidden">
+      {Array.from({ length: 100 }).map((_, index) => (
+        <div
+          key={index}
+          style={{
+            position: 'absolute',
+            left: `${Math.random() * 100}vw`,
+            top: `-${Math.random() * 100}vh`,
+            animation: 'fall 5s linear forwards',
+          }}
+        >
+          🎖️
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default EmojiRain;

src/components/forms/contact-form.tsx

@@ -1,3 +1,4 @@
+import EmojiRain from "@components/EmojiRain";
 import React, { forwardRef, useState } from "react";
 import axios from "axios";
 import clsx from "clsx";
@@ -23,29 +24,29 @@ interface TProps {
 const ContactForm = forwardRef<HTMLFormElement, TProps>(
     ({ className }, ref) => {
         const [serverMessage, setServerMessage] = useState<string>("");
-
-        const {
-            register,
-            handleSubmit,
-            formState: { errors },
-            reset,
-        } = useForm<IFormValues>();
+        const [showEmojiRain, setShowEmojiRain] = useState<boolean>(false);
+
+        const { register, handleSubmit, formState: { errors }, reset } = useForm<IFormValues>();
 
         const onSubmit: SubmitHandler<IFormValues> = async (data) => {
             try {
                 const response = await axios.post("/api/contact", data);
                 if (response.status === 200) {
                     setServerMessage("Thank you for your message!");
-                    reset();
+                    setShowEmojiRain(true); // Trigger the Emoji Rain on successful submission
+
+                    // Optional: Hide the EmojiRain after a set duration
+                    setTimeout(() => setShowEmojiRain(false), 5000); // Adjust duration as necessary
+
+                    reset(); // Reset the form fields
                 } else {
-                    setServerMessage(
-                        "There was an error. Please try again later."
-                    );
+                    setServerMessage("There was an error. Please try again later.");
                 }
             } catch (error) {
                 setServerMessage("There was an error. Please try again later.");
             }
         };
+
 
         return (
             <form
@@ -152,6 +153,7 @@ const ContactForm = forwardRef<HTMLFormElement, TProps>(
                 {serverMessage && (
                     <Feedback state="success">{serverMessage}</Feedback>
                 )}
+                {showEmojiRain && <EmojiRain />}
             </form>
         );
     }

src/pages/_app.tsx

@@ -8,6 +8,7 @@ import "@assets/css/font-linea.css";
 import "@assets/css/fonts.css";
 import "@assets/css/tailwind.css";
 import "@assets/css/swiper.css";
+import "@assets/css/globals.css"
 
 import { UIProvider } from "../contexts/ui-context";
 import { UserProvider } from "../contexts/user-context";

src/pages/contact-us.tsx

@@ -1,30 +1,25 @@
-import type { NextPage } from "next";
-import { GetStaticProps } from "next";
-import SEO from "@components/seo/page-seo";
-import Layout from "@layout/layout-01";
-import Breadcrumb from "@components/breadcrumb";
-import ContactInfo from "@containers/contact-info/layout-02";
-import ContactForm from "@containers/contact-form/layout-02";
-import { normalizedData } from "@utils/methods";
-import { getPageData } from "../lib/page";
+import type { NextPage, GetStaticProps } from 'next';
+import SEO from '@components/seo/page-seo';
+import Layout from '@layout/layout-01';
+import Breadcrumb from '@components/breadcrumb';
+import ContactInfo from '@containers/contact-info/layout-02';
+import ContactForm from '@containers/contact-form/layout-02';
+import { normalizedData } from '@utils/methods';
+import { getPageData } from '../lib/page';
 
 interface PageContent {
     section: string;
 }
 
-type TProps = {
+interface Props {
     data: {
         page: {
             content: PageContent[];
         };
     };
-};
-
-type PageProps = NextPage<TProps> & {
-    Layout: typeof Layout;
-};
+}
 
-const ContactMe: PageProps = ({ data }) => {
+const ContactUs: NextPage<Props> & { Layout: typeof Layout; } = ({ data }) => {
     const content = normalizedData<PageContent>(data.page?.content, "section");
 
     return (
@@ -41,22 +36,17 @@ const ContactMe: PageProps = ({ data }) => {
     );
 };
 
-ContactMe.Layout = Layout;
+ContactUs.Layout = Layout;
 
-export const getStaticProps: GetStaticProps = () => {
-    const page = getPageData("inner", "contact-us");
+export const getStaticProps: GetStaticProps = async () => {
+    const page = await getPageData("inner", "contact-us");
     return {
         props: {
             data: {
                 page,
             },
-            layout: {
-                headerShadow: true,
-                headerFluid: false,
-                footerMode: "light",
-            },
         },
     };
 };
 
-export default ContactMe;
+export default ContactUs;