Jumping Switch Component Made

src/Components/switch/switch.css

@@ -0,0 +1,55 @@
+.switch {
+	position: relative;
+  
+  }
+  .switch input[type="checkbox"] {
+    visibility: hidden;
+	position : absolute;
+    
+    }
+    .switch input[type="checkbox"]:checked + label {
+        transform: rotate(180deg);
+        
+    }
+    .switch input[type="checkbox"]:before {
+        transform: translateX(35.5px);
+        background-color: #fff;
+      }
+
+
+
+.switch label {
+    display: flex;
+    width: 17px;
+    height: 30px;
+    border: 1px solid #E1E1E1;
+    border-radius: 99em;
+    position: relative;
+    transition: transform 0.3s ease-in-out;
+    transform-origin: 50% 50%;
+}
+.switch label:before {
+      transition: transform 0.3s ease;
+      transition-delay: 0s;
+      content: "";
+      display: block;
+      position: absolute;
+      width: 15px;
+      height: 15px;
+      background-color: rgba(19,47,82,0.66);
+      border-radius: 50%;
+      top: 0px;
+      left: 1px;
+      animation: jump 0.8s infinite;
+      transform: rotate(180deg);
+      animation-fill-mode: both;
+    }
+    @keyframes jump {
+        0% { transform: translate(0, 000%) ; }
+        50% { transform: translate(0, 100%); }
+        55% { transform: translate(0, 100%) rotate(15deg); }
+        60% { transform: translate(0, 100%) rotate(-15deg); }
+        65% { transform: translate(0, 100%) rotate(15deg); }
+        70% { transform: translate(0, 100%) rotate(-15deg); }
+        100% { transform: translate(0, 00%) ; }
+    }

src/Components/switch/switch.js

@@ -0,0 +1,13 @@
+import React from "react";
+import "./switch.css";
+
+ const Switch = () => {
+  return (
+    <div className="switch">
+      <input type="checkbox" id="toggle" />
+      <label for="toggle"></label>
+    </div>
+  );
+}
+
+export default Switch;

src/Pages/Home/Part1/homePart1.css

@@ -7,7 +7,7 @@
     opacity: 0.35;
     box-shadow: 0px 0px 38px #1577F8;
     margin-left:-5em;
-    filter: blur(8px);
+    filter: blur(70px);
 }
 
 .HomePart1{
@@ -85,4 +85,9 @@
     margin:10px;
     padding: 10px;
     font-size: 15px;
+}
+.HomePart1 .switchSection{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }

src/Pages/Home/Part1/homePart1.js

@@ -1,6 +1,7 @@
 import React from "react";
 import KhabarNameh from "../../../Components/khabarNameInput/KhabarNameh";
 import MobileMockup from "../../../Components/mobileMockup/mobileMockup";
+import Switch from "../../../Components/switch/switch";
 
 import './homePart1.css';
 
@@ -42,11 +43,15 @@ const HomePart1 = () => {
                             تمام ! آخرین مرحله باید کد یا پلاگین ما رو روی‌ وبسایتتون ثبت کنید تا بتونید با مشتریانتون ارتباط برقرار کنید                            
                             </div>
                         </div>
-
+                         
+                    </div>
+                    <div className="switchSection">
+                        <Switch />
                     </div>
-
                 </div>
+                
             </div>
+            
         </div>
     );
 };