Created the newsletter with proper functioning and validation pop up

website3.0/components/Loadernewletter.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import "@stylesheets/Loadernewsletter.css";
+
+export default function Lodaernewletter() {
+    console.log('sdsdsds')
+  return (
+    <>
+    <div class="loader1">
+    <span></span>
+  </div>
+    <div className='backgroundset'>
+
+    </div>
+    </>
+  )
+}

website3.0/components/Popup.js

@@ -0,0 +1,23 @@
+import React, { useEffect, useState } from 'react'
+import "@stylesheets/Popup.css";
+
+export default function Popup(props) {
+    const { error, msg } = props;
+    let [none, setNone] = useState(false);
+
+
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            setNone(true);
+        }, 2000);
+
+        return () => clearTimeout(timer);
+    }, []);
+
+    return (
+        <div className={`${error} popup ${none ? "none1" : ""}`}>
+            {msg}
+            <div className='line'></div>
+        </div>
+    );
+}

website3.0/pages/HomePage.js

@@ -2,6 +2,8 @@ import React, { useEffect, useState } from "react";
 import "@stylesheets/homepage.css";
 import { useRouter } from "next/navigation";
 import "@stylesheets/homepage.css";
+import Lodaernewletter from "../components/Loadernewletter";
+import Popup from "@components/Popup";
 
 //Importing FontAwesome for Icons
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -24,7 +26,10 @@ import "@splidejs/splide/dist/css/splide.min.css";
 import { ContainerScroll } from "@components/Scrolltab";
 import ParticlesComponent from "@components/ParticleBackground";
 function HomePage() {
+  const [loading , setLoading ]=useState(false)
+
   //to add body bg color
+
   useEffect(() => {
     document.body.style.background =
       "linear-gradient(to bottom,#f5d471 2%,#ec904f 15%,#eb9a60 25%,#e99960 35%,#e89357 45%,#e99559 55%,#e78d4d 65%, #eb904f 75%,#e97a2a 85%,#ea670a 95%)  ";
@@ -132,9 +137,18 @@ function HomePage() {
 
   // Function to handle subscription process
   const subscribe = async () => {
+     setTimeout(() => {
+          setEmail('')
+  }, 2000);
     // Validate email format
+    setLoading(true)
     if (!validateEmail(email)) {
       setError("Please enter a valid email address.");
+      setTimeout(() => {
+        setError('')
+}, 2000);
+setLoading(false)
+
       return;
     }
 
@@ -162,6 +176,11 @@ function HomePage() {
       // Check if email is valid according to Hunter API response
       if (!result.data || result.data.status !== 'valid') {
         setError("Email Address Not Found!");
+        setTimeout(() => {
+          setError('')
+  }, 2000);
+  setLoading(false)
+
         return;
       }
 
@@ -179,19 +198,35 @@ function HomePage() {
 
       // Display success or failure message based on subscription result
       if (subscribeData.success) {
-        alert("Subscribed Successfully");
+        setError("Subscribed Successfully");
+        setTimeout(() => {
+          setError("Subscription failed");
+          setTimeout(() => {
+            setError('')
+          }, 2000);
+        }, 2000);
       } else {
-        alert("Subscription failed");
+        setError("Subscription failed");
+        setTimeout(() => {
+          setError('')
+        }, 2000);
       }
     } catch (error) {
       // Handle any errors that occur during the process
-      alert("An error occurred. Please try again.");
+      setError("An error occurred. Please try again.");
+      setTimeout(() => {
+        setError('')
+      }, 2000);
     }
+    setLoading(false)
+
   };
 
   return (
     <div>
+      {loading && <Lodaernewletter/>}
       <ParticlesComponent id="particles" />
+      {error&& <Popup msg={error} error={`${error=='Subscribed Successfully'?"green1":"red1"}`} />}
       <main>
         {/* Section: Main */}
 
@@ -496,12 +531,12 @@ function HomePage() {
                 <input
                   value={email} onChange={(e)=>setEmail(e.target.value)}
                   placeholder="[email protected]"
-                  className="input-field"
+                  className="input-field "
                 />
-                {error && <p className="error-message-mobile">{error}</p>}
+                {/* {error && <p className="error-message-mobile">{error}</p>} */}
                 <button className="subscribe-btn" onClick={subscribe}>Subscribe</button>
               </div>
-              {error && <p className="error-message-desktop">{error}</p>}
+              {/* {error && <p className="error-message-desktop">{error}</p>} */}
             </div>
           </div>
         </div>

website3.0/stylesheets/Loadernewsletter.css

@@ -0,0 +1,68 @@
+.loader1 {
+    position: fixed;
+    top: 46%;
+    left: 46%;
+    z-index: 1000 !important;
+
+    width: 100px;
+    height: 100px;
+    border: 4px solid #282828;
+    overflow: hidden;
+    border-radius: 50%;
+    box-shadow: -5px -5px 5px rgba(255, 255, 255, 0.1),
+      10px 10px 10px rgba(0, 0, 0, 0.4),
+      inset -5px -5px 5px rgba(255, 255, 255, 0.2),
+      inset 10px 10px 10px rgba(0, 0, 0, 0.4);
+  }
+  .backgroundset{
+    height: 100vh;
+    width: 100vw;
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    background-color: rgba(0,0,0,0.4);
+    z-index: 999 !important;
+  }
+  .loader1:before {
+    content: "";
+    position: absolute;
+    top: 25px;
+    left: 25px;
+    right: 25px;
+    bottom: 25px;
+    z-index: 10;
+    background: #212121;
+    border-radius: 50%;
+    border: 2px solid #292929;
+    box-shadow: inset -2px -2px 5px rgba(255, 255, 255, 0.2),
+      inset 3px 3px 5px rgba(0, 0, 0, 0.5);
+  }
+
+  .loader1 span {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background-image: linear-gradient(
+      -225deg,
+      #ff7402 0%,
+      #ffe700 50%,
+      #fff55e 100%
+    );
+    filter: blur(20px);
+    z-index: -1;
+    animation: animate 0.5s linear infinite;
+  }
+
+  @keyframes animate {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+
+

website3.0/stylesheets/Popup.css

@@ -0,0 +1,48 @@
+.red1{
+    background-color: red;
+}
+
+.green1 {
+    background-color: rgb(28, 201, 28) !important;
+}
+
+.popup{
+    width: 40%;
+    height: 60px;
+    border-radius: 10px;
+    position: fixed;
+    bottom: 100px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    left: 30%;
+    right: 30%;
+    color: white;
+    animation: animate1 1s forwards;
+
+}
+.none1{
+    display: none;
+}
+.line{
+    width: 100px;
+    background-color: white;
+    height: 2px;
+    position: absolute;
+    bottom: 0px ;
+    animation: animate 2s forwards;
+}
+@keyframes animate {
+    from{
+        width: 0px;
+    }to{
+        width: 100%;
+    }
+}
+@keyframes animate1 {
+    from{
+        opacity: 0;
+    }to{
+        opacity: 1;
+    }
+}

website3.0/stylesheets/homepage.css

@@ -907,3 +907,18 @@ body.dark-mode {
     height: 46px !important;
   }
 }
+
+.changedesign{
+  background:none;
+  border-bottom: solid 2px white;
+  border-radius: 0px !important; 
+}
+.changedesign::placeholder{
+  left: 0px !important;
+  margin-left: 0px !important;
+  color: black;
+  padding-left: 0px !important;
+}
+.changedesign:focus{
+  outline: none;
+}

website3.0/stylesheets/teams.css

@@ -152,6 +152,7 @@ body {
   background-size: cover;
   background-repeat: no-repeat;
   transition: 0.5s;
+  padding-right: 0px !important;
 }
 .team-member:hover {
   transform: scale(1.03);
@@ -223,9 +224,10 @@ body {
   height: 100%;
 }
 .social-links {
-  width: 20%;
-  margin-left: 5px;
+  width: 16%;
   padding: 10px;
+  padding-left: 0px !important;
+  padding-right: 0px !important;
 }
 .social-links-items {
   display: flex;