Added keyframe animation for sliding to items-end

eduaid_web/package.json

@@ -12,7 +12,7 @@
     "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",
     "react-router-dom": "^6.26.0",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
     "react-switch": "^7.0.0",
     "web-vitals": "^2.1.4"
   },

eduaid_web/src/index.css

@@ -22,4 +22,34 @@ code {
   border-image: linear-gradient(to right, #ff005c, #7600f2, #00cbe7);
   border-image-slice: 1;
   border-radius: 2rem;
-}
+}
+
+/* Define the keyframe animation for sliding in from the right */
+@keyframes slideInFromRight {
+  0% {
+    transform: translateX(100%); /* Start off-screen to the right */
+    opacity: 0; /* Make it invisible at the start */
+  }
+  100% {
+    transform: translateX(0); /* End in its natural position */
+    opacity: 1; /* Fully visible */
+  }
+}
+
+/* Apply the animation to each of the items */
+.animated-slide {
+  animation: slideInFromRight 1s ease-out forwards;
+}
+
+/* Optionally, stagger the animation for each item */
+.animated-slide:nth-child(1) {
+  animation-delay: 0.3s; /* First item */
+}
+
+.animated-slide:nth-child(2) {
+  animation-delay: 0.6s; /* Second item */
+}
+
+.animated-slide:nth-child(3) {
+  animation-delay: 0.9s; /* Third item */
+}

eduaid_web/src/pages/Home.jsx

@@ -69,19 +69,19 @@ const Home = () => {
             </div>
           </div>
           <div className="flex flex-col items-end">
-            <div className="my-6">
+            <div className="my-6 animated-slide">
               <div className="flex items-center rounded-l-2xl w-fit px-6 py-3 bg-gradient-to-r from-[#FF005C] via-[#7600F2] to-[#00CBE7] justify-center gap-4">
                 <img src={starsImg} width={32} height={16} alt="" />
                 <div className="text-white text-xl">Doc/Audio Input</div>
               </div>
             </div>
-            <div className="my-4">
+            <div className="my-4 animated-slide">
               <div className="flex items-center rounded-l-2xl w-fit px-6 py-3 bg-gradient-to-r from-[#FF005C] via-[#7600F2] to-[#00CBE7] justify-center gap-4">
                 <img src={starsImg} width={32} height={16} alt="" />
                 <div className="text-white text-xl">In-depth questions gen</div>
               </div>
             </div>
-            <div className="my-4">
+            <div className="my-4 animated-slide">
               <div className="flex items-center rounded-l-2xl w-fit px-6 py-3 bg-gradient-to-r from-[#FF005C] via-[#7600F2] to-[#00CBE7] justify-center gap-4">
                 <img src={starsImg} width={32} height={16} alt="" />
                 <div className="text-white text-xl">

eduaid_web/src/pages/Text_Input.jsx

@@ -175,7 +175,7 @@ const Text_Input = () => {
       >
         <a href="/">
           <div className="flex items-end gap-[2px]">
-            <img src={logo} alt="logo" className="w-24 my-6 ml-6 block" />
+            <img src="aossie_transparent.png" alt="logo" className="w-24 my-6 ml-6 block" />
             <div className="text-4xl mb-5 font-extrabold">
               <span className="bg-gradient-to-r from-[#FF005C] to-[#7600F2] text-transparent bg-clip-text">
                 Edu