Merge pull request #704 from Ayushmaanagarwal1211/Update

Changed the loader and the input fields

website3.0/pages/HomePage.js

@@ -27,7 +27,7 @@ import { ContainerScroll } from "@components/Scrolltab";
 import ParticlesComponent from "@components/ParticleBackground";
 function HomePage() {
   const [loading , setLoading ]=useState(false)
-
+  const [blur,setBLur]=useState(false)
   //to add body bg color
 
   useEffect(() => {
@@ -140,6 +140,7 @@ function HomePage() {
      setTimeout(() => {
           setEmail('')
   }, 2000);
+  setBLur(true)
     // Validate email format
     setLoading(true)
     if (!validateEmail(email)) {
@@ -148,6 +149,7 @@ function HomePage() {
         setError('')
 }, 2000);
 setLoading(false)
+setBLur(false)
 
       return;
     }
@@ -170,6 +172,8 @@ setLoading(false)
           setError('')
         }, 2000);
         setLoading(false)
+        setBLur(false)
+
         return;
       }
 
@@ -184,6 +188,7 @@ setLoading(false)
           setError('')
   }, 2000);
   setLoading(false)
+  setBLur(false)
 
         return;
       }
@@ -223,12 +228,13 @@ setLoading(false)
       }, 2000);
     }
     setLoading(false)
+    setBLur(false)
 
   };
 
   return (
     <div>
-      {loading && <Lodaernewletter/>}
+
       <ParticlesComponent id="particles" />
       {error&& <Popup msg={error} error={`${error=='Subscribed Successfully'?"green1":"red1"}`} />}
       <main>
@@ -534,11 +540,17 @@ setLoading(false)
               <div className="subscribe-input">
                 <input
                   value={email} onChange={(e)=>setEmail(e.target.value)}
-                  placeholder="[email protected]"
-                  className="input-field "
+                  placeholder="Email"
+                  className={`${blur?"blurclass":""} input-field `}
                 />
                 {/* {error && <p className="error-message-mobile">{error}</p>} */}
-                <button className="subscribe-btn" onClick={subscribe}>Subscribe</button>
+                <button className="subscribe-btn" onClick={subscribe}>Subscribe &nbsp; {loading && <div className="loader2">
+  <div className="circle">
+    <div className="dot"></div>
+    <div className="outline"></div>
+  </div>
+
+</div>}</button>
               </div>
               {/* {error && <p className="error-message-desktop">{error}</p>} */}
             </div>

website3.0/stylesheets/homepage.css

@@ -20,7 +20,7 @@ main {
   justify-content: center;
   align-items: center;
   background-color: white;
-  border-radius: 40px !important;
+  border-radius: 40px ;
 }
 
 .content h3 {
@@ -924,3 +924,118 @@ body.dark-mode {
 .changedesign:focus{
   outline: none;
 }
+.blurclass{
+  opacity: 0.5;
+  backdrop-filter: blur(100px);
+}
+
+.loader2 {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  --color: hsl(0, 0%, 87%);
+  --animation: 2s ease-in-out infinite;
+}
+
+.loader2 .circle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  width: 20px;
+  height: 20px;
+  border: solid 2px var(--color);
+  border-radius: 50%;
+  margin: 0 10px;
+  background-color: transparent;
+  animation: circle-keys var(--animation);
+}
+
+.loader2 .circle .dot {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background-color: var(--color);
+  animation: dot-keys var(--animation);
+}
+
+.loader2 .circle .outline {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  animation: outline-keys var(--animation);
+}
+
+.circle:nth-child(1) .outline {
+  animation-delay: 0.9s;
+}
+
+
+@keyframes circle-keys {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  50% {
+    transform: scale(1.5);
+    opacity: 0.5;
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes dot-keys {
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(0);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes outline-keys {
+  0% {
+    transform: scale(0);
+    outline: solid 20px var(--color);
+    outline-offset: 0;
+    opacity: 1;
+  }
+
+  100% {
+    transform: scale(1);
+    outline: solid 0 transparent;
+    outline-offset: 20px;
+    opacity: 0;
+  }
+}
+.subscribe-btn{
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  width: 130px;
+  border-radius: 5px;
+  color: white !important;
+}
+.subscribe-btn{
+  background-color: red;
+  font-family: serif;
+  font-weight: 400;
+  font-size: 20px;
+}
+input{
+  border-radius: 5px !important;
+}