diff --git a/frontend/src/pages/landing/LandingPage.jsx b/frontend/src/pages/landing/LandingPage.jsx
index f731283..3c87ec8 100644
--- a/frontend/src/pages/landing/LandingPage.jsx
+++ b/frontend/src/pages/landing/LandingPage.jsx
@@ -1,19 +1,16 @@
-import CardSection from "./landingcomponents/CertificationSection";
-import Header from "./landingcomponents/Header";
-import { OuterLayout } from "./styles/Layouts";
+import { motion } from "framer-motion";
 import styled from "styled-components";
-import ChartSection from "./landingcomponents/ChartSection";
-import MessagingSection from "./landingcomponents/MessagingSection";
-import PaymentSection from "./landingcomponents/PaymentSection";
-import FAQSection from "./landingcomponents/FAQSection";
-import Footer from "./landingcomponents/Footer";
-import { Fade } from "react-reveal";
 import "./LandingPage.scss";
 import bg from "./img/bg.svg";
-import HeaderContent from "./landingcomponents/HeaderContent";
-import { NewsLetter } from "./newsLetter";
 import CertificationSection from "./landingcomponents/CertificationSection";
+import ChartSection from "./landingcomponents/ChartSection";
 import CustomerSupportSection from "./landingcomponents/CustomerSupportSection";
+import FAQSection from "./landingcomponents/FAQSection";
+import HeaderContent from "./landingcomponents/HeaderContent";
+import MessagingSection from "./landingcomponents/MessagingSection";
+import PaymentSection from "./landingcomponents/PaymentSection";
+import { NewsLetter } from "./newsLetter";
+import { OuterLayout } from "./styles/Layouts";
 
 function LandingPage() {
   return (
@@ -26,27 +23,55 @@ function LandingPage() {
 
       <OuterLayout>
         <MainStyled>
-          <Fade left>
+          <motion.div
+            initial={{ opacity: 0, x: -100 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ duration: 1 }}
+          >
             <CertificationSection />
-          </Fade>
-          <Fade right>
+          </motion.div>
+          <motion.div
+            initial={{ opacity: 0, x: 100 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ duration: 1 }}
+          >
             <ChartSection />
-          </Fade>
-          <Fade left>
+          </motion.div>
+          <motion.div
+            initial={{ opacity: 0, x: -100 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ duration: 1 }}
+          >
             <MessagingSection />
-          </Fade>
-          <Fade right>
+          </motion.div>
+          <motion.div
+            initial={{ opacity: 0, x: 100 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ duration: 1 }}
+          >
             <CustomerSupportSection />
-          </Fade>
-          <Fade left>
+          </motion.div>
+          <motion.div
+            initial={{ opacity: 0, x: -100 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ duration: 1 }}
+          >
             <PaymentSection />
-          </Fade>
-          <Fade right>
+          </motion.div>
+          <motion.div
+            initial={{ opacity: 0, x: 100 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ duration: 1 }}
+          >
             <FAQSection />
-          </Fade>
-          <Fade left>
+          </motion.div>
+          <motion.div
+            initial={{ opacity: 0, y: 100 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 1 }}
+          >
             <NewsLetter />
-          </Fade>
+          </motion.div>
         </MainStyled>
       </OuterLayout>
     </div>
diff --git a/frontend/src/pages/landing/landingcomponents/CertificationSection.js b/frontend/src/pages/landing/landingcomponents/CertificationSection.js
index e426600..6765610 100755
--- a/frontend/src/pages/landing/landingcomponents/CertificationSection.js
+++ b/frontend/src/pages/landing/landingcomponents/CertificationSection.js
@@ -15,8 +15,8 @@ function CertificationSection() {
               Get the best certification from our company
             </h2>
             <p>
-              We provide you with exercise certificates for your training.
-              After you have completed the exercises, you can get your certificate.
+              We provide you with exercise certificates for your training. After
+              you have completed the exercises, you can get your certificate.
               These certificates can be used at job interviews.
             </p>
           </div>
diff --git a/frontend/src/pages/landing/landingcomponents/ChartSection.js b/frontend/src/pages/landing/landingcomponents/ChartSection.js
index 7410708..9d186e4 100755
--- a/frontend/src/pages/landing/landingcomponents/ChartSection.js
+++ b/frontend/src/pages/landing/landingcomponents/ChartSection.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { Bounce, Roll } from "react-reveal";
+import { motion } from "framer-motion";
 import styled from "styled-components";
 import chart from "../img/chart.svg";
 import { InnerLayout } from "../styles/Layouts";
@@ -24,16 +24,22 @@ function ChartSection() {
             <h2 className="secondary-heading">
               Manage your progress on exercises and quizzes
             </h2>
-            <Roll right>
-              <p>
-                You can track your progress on exercises and quizzes and see how
-                you are doing. You can also see your progress on your exercises
-                and quizzes.
-              </p>
-            </Roll>
-            <Bounce right>
+            <motion.p
+              initial={{ x: 60, opacity: 0 }}
+              animate={{ x: 0, opacity: 1 }}
+              transition={{ duration: 0.7 }}
+            >
+              You can track your progress on exercises and quizzes and see how
+              you are doing. You can also see your progress on your exercises
+              and quizzes.
+            </motion.p>
+            <motion.div
+              initial={{ x: 60, opacity: 0 }}
+              animate={{ x: 0, opacity: 1 }}
+              transition={{ duration: 0.7, delay: 0.2 }}
+            >
               <AnimatedButton name={"Explore Products"} />
-            </Bounce>
+            </motion.div>
           </div>
         </div>
       </InnerLayout>
diff --git a/frontend/src/pages/landing/landingcomponents/ChartStats.js b/frontend/src/pages/landing/landingcomponents/ChartStats.js
index 4b758d6..282de1e 100755
--- a/frontend/src/pages/landing/landingcomponents/ChartStats.js
+++ b/frontend/src/pages/landing/landingcomponents/ChartStats.js
@@ -1,34 +1,35 @@
-import React from 'react';
+import React from "react";
 
-import styled from 'styled-components';
+import styled from "styled-components";
 
-
-function ChartStats({name, amount}) {
-    return (
-        <ChartStatsStyled >
-            <p><b>{name}</b></p>
-            <h4>{amount}</h4>
-        </ChartStatsStyled >
-    )
+function ChartStats({ name, amount }) {
+  return (
+    <ChartStatsStyled>
+      <p>
+        <b>{name}</b>
+      </p>
+      <h4>{amount}</h4>
+    </ChartStatsStyled>
+  );
 }
 
 const ChartStatsStyled = styled.div`
-    background-color: white;
-    border-radius: 50px;
-    border: 1px solid var(--border-colour);
-    height: 10rem;
-    padding: 2rem;
-    box-shadow: 0px 25px 50px rgba(22, 25, 79, 0.05);
-    width: 80%;
-    margin: 1rem;
-    text-align: center;
-    h4{
-        font-size: 3rem;
-        color: var(--purple-primary);
-    }
-    p{
-        color: black;
-    }
+  background-color: white;
+  border-radius: 50px;
+  border: 1px solid var(--border-colour);
+  height: 10rem;
+  padding: 2rem;
+  box-shadow: 0px 25px 50px rgba(22, 25, 79, 0.05);
+  width: 80%;
+  margin: 1rem;
+  text-align: center;
+  h4 {
+    font-size: 3rem;
+    color: var(--purple-primary);
+  }
+  p {
+    color: black;
+  }
 `;
 
-export default ChartStats
+export default ChartStats;
diff --git a/frontend/src/pages/landing/landingcomponents/FAQSection.js b/frontend/src/pages/landing/landingcomponents/FAQSection.js
index 163e7ca..39d2d99 100755
--- a/frontend/src/pages/landing/landingcomponents/FAQSection.js
+++ b/frontend/src/pages/landing/landingcomponents/FAQSection.js
@@ -1,10 +1,31 @@
 import React from "react";
 import styled from "styled-components";
-import { InnerLayout } from "../styles/Layouts";
 import lines from "../img/lines.svg";
 import questions from "../questions";
+import { InnerLayout } from "../styles/Layouts";
 import Question from "./Question";
+
+import { AnimatePresence, motion } from "framer-motion";
+import { useEffect, useState } from "react";
+
 function FAQSection() {
+  const [selectedId, setSelectedId] = useState(null);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setSelectedId(questions[0].id);
+    }, 1000);
+    return () => clearTimeout(timer);
+  }, []);
+
+  const handleSelect = (id) => {
+    if (id === selectedId) {
+      setSelectedId(null);
+    } else {
+      setSelectedId(id);
+    }
+  };
+
   return (
     <FaqStyled>
       <InnerLayout>
@@ -21,9 +42,24 @@ function FAQSection() {
         </div>
 
         <div className="questions-con">
-          {questions.map((q) => {
-            return <Question key={q.id} {...q} />;
-          })}
+          <AnimatePresence initial={false}>
+            {questions.map((q) => (
+              <motion.div
+                layout
+                key={q.id}
+                onClick={() => handleSelect(q.id)}
+                className="question"
+              >
+                <Question
+                  key={q.id}
+                  id={q.id}
+                  title={q.title}
+                  description={q.description}
+                  isSelected={selectedId === q.id}
+                />
+              </motion.div>
+            ))}
+          </AnimatePresence>
         </div>
       </InnerLayout>
     </FaqStyled>
diff --git a/frontend/src/pages/landing/landingcomponents/Footer.js b/frontend/src/pages/landing/landingcomponents/Footer.js
index 0a88fbf..c3d7620 100755
--- a/frontend/src/pages/landing/landingcomponents/Footer.js
+++ b/frontend/src/pages/landing/landingcomponents/Footer.js
@@ -1,96 +1,96 @@
-import React from 'react';
-import styled from 'styled-components';
-import { InnerLayout } from '../styles/Layouts';
-import logo from '../img/logo.svg';
+import React from "react";
+import styled from "styled-components";
+import { InnerLayout } from "../styles/Layouts";
+import logo from "../img/logo.svg";
 
 function Footer() {
-    return (
-        <FooterStyled>
-            <InnerLayout>
-                <div className="footer-con">
-                    <div className="logo-con">
-                       <div className="logo-items">
-                        <img src={logo} alt="" />
-                            <p>
-                                Copyright @2021 LoremIpsum. <br />
-                                All rights reserved.
-                            </p>
-                       </div>
-                    </div>
-                    <ul className="botton-nav">
-                        <div className="links1">
-                            <li>
-                                <a href="/team">Team</a>
-                            </li>
-                            <li>
-                                <a href="/press">Press</a>
-                            </li>
-                            <li>
-                                <a href="/fees">Fees</a>
-                            </li>
-                        </div>
-                        <div className="links2">
-                            <li>
-                                <a href="/services">Services</a>
-                            </li>
-                            <li>
-                                <a href="/projects">Projects</a>
-                            </li>
-                            <li>
-                                <a href="/affiliate">Affiliate</a>
-                            </li>
-                        </div>
-                        <div className="links3">
-                            <li>
-                                <a href="/terms">Terms of use</a>
-                            </li>
-                            <li>
-                                <a href="/privacy">Privacy Policy</a>
-                            </li>
-                            <li>
-                                <a href="/contact">Contact us</a>
-                            </li>
-                        </div>
-                    </ul>
-                </div>
-            </InnerLayout>
-        </FooterStyled>
-    )
+  return (
+    <FooterStyled>
+      <InnerLayout>
+        <div className="footer-con">
+          <div className="logo-con">
+            <div className="logo-items">
+              <img src={logo} alt="" />
+              <p>
+                Copyright @2021 LoremIpsum. <br />
+                All rights reserved.
+              </p>
+            </div>
+          </div>
+          <ul className="botton-nav">
+            <div className="links1">
+              <li>
+                <a href="/team">Team</a>
+              </li>
+              <li>
+                <a href="/press">Press</a>
+              </li>
+              <li>
+                <a href="/fees">Fees</a>
+              </li>
+            </div>
+            <div className="links2">
+              <li>
+                <a href="/services">Services</a>
+              </li>
+              <li>
+                <a href="/projects">Projects</a>
+              </li>
+              <li>
+                <a href="/affiliate">Affiliate</a>
+              </li>
+            </div>
+            <div className="links3">
+              <li>
+                <a href="/terms">Terms of use</a>
+              </li>
+              <li>
+                <a href="/privacy">Privacy Policy</a>
+              </li>
+              <li>
+                <a href="/contact">Contact us</a>
+              </li>
+            </div>
+          </ul>
+        </div>
+      </InnerLayout>
+    </FooterStyled>
+  );
 }
 
 const FooterStyled = styled.footer`
-    padding: 0 18rem;
-    background-color: #DCE2F0;
-    @media screen and (max-width: 1347px){
-        padding: 5rem 14rem;
-    }
-    @media screen and (max-width: 1186px){
-        padding: 5rem 8rem;
-    }
-    @media screen and (max-width: 990px){
-        padding: 5rem 4rem;
-    }
-    .footer-con{
-        display: grid;
-        grid-template-columns: repeat(2, 1fr);
-    }
+  padding: 0 18rem;
+  background-color: #dce2f0;
+  @media screen and (max-width: 1347px) {
+    padding: 5rem 14rem;
+  }
+  @media screen and (max-width: 1186px) {
+    padding: 5rem 8rem;
+  }
+  @media screen and (max-width: 990px) {
+    padding: 5rem 4rem;
+  }
+  .footer-con {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+  }
 
-    .logo-con{
-        display: flex;
-        align-items: center;
-        img{
-            width: 90px;
-        }
+  .logo-con {
+    display: flex;
+    align-items: center;
+    img {
+      width: 90px;
     }
+  }
 
-    .botton-nav{
-        display: flex;
-        justify-content: space-between;
-        li{
-            padding: 2rem 0;
-            color: #16194F;
-        }
+  .botton-nav {
+    display: flex;
+    justify-content: space-between;
+    li {
+      padding: 2rem 0;
+      color: #16194f;
     }
+  }
 `;
 
-export default Footer
+export default Footer;
diff --git a/frontend/src/pages/landing/landingcomponents/Header.js b/frontend/src/pages/landing/landingcomponents/Header.js
index b556ad9..6929ce1 100755
--- a/frontend/src/pages/landing/landingcomponents/Header.js
+++ b/frontend/src/pages/landing/landingcomponents/Header.js
@@ -1,39 +1,39 @@
-import React from 'react'
-import styled from 'styled-components';
-import bg from '../img/bg.svg';
-import HeaderContent from './HeaderContent';
-import Navigation from './Navigation';
+import React from "react";
+import styled from "styled-components";
+import bg from "../img/bg.svg";
+import HeaderContent from "./HeaderContent";
+import Navigation from "./Navigation";
 
 function Header() {
-    return (
-        <HeaderStyled>
-            <div className="header-content">
-                <Navigation />
-                <HeaderContent />
-            </div>
-        </HeaderStyled>
-    )
+  return (
+    <HeaderStyled>
+      <div className="header-content">
+        <Navigation />
+        <HeaderContent />
+      </div>
+    </HeaderStyled>
+  );
 }
 
 const HeaderStyled = styled.header`
-    min-height: 100vh;
-    width: 100%;
-    background-image: url(${bg});
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-position-y: 100%;
-    .header-content{
-        padding: 0 18rem;
-        @media screen and (max-width: 1347px){
-            padding: 5rem 14rem;
-        }
-        @media screen and (max-width: 1186px){
-            padding: 5rem 8rem;
-        }
-        @media screen and (max-width: 990px){
-            padding: 5rem 4rem;
-        }
+  min-height: 100vh;
+  width: 100%;
+  background-image: url(${bg});
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position-y: 100%;
+  .header-content {
+    padding: 0 18rem;
+    @media screen and (max-width: 1347px) {
+      padding: 5rem 14rem;
     }
+    @media screen and (max-width: 1186px) {
+      padding: 5rem 8rem;
+    }
+    @media screen and (max-width: 990px) {
+      padding: 5rem 4rem;
+    }
+  }
 `;
 
 export default Header;
diff --git a/frontend/src/pages/landing/landingcomponents/HeaderContent.js b/frontend/src/pages/landing/landingcomponents/HeaderContent.js
index 10f85bd..4f34540 100755
--- a/frontend/src/pages/landing/landingcomponents/HeaderContent.js
+++ b/frontend/src/pages/landing/landingcomponents/HeaderContent.js
@@ -1,40 +1,60 @@
 import React from "react";
 import styled from "styled-components";
 import Secondarybutton from "./SecondaryButton";
-// import phone from "../img/phone.svg";
-import { Fade } from "react-reveal";
+import { motion } from "framer-motion";
 import message2 from "../img/message_blue.svg";
 import message1 from "../img/message_pink.svg";
 import ring1 from "../img/ring_orange.svg";
 import VRStudy from "../img2/vr-study-transparent.png";
 
 function HeaderContent() {
+  const leftContentVariants = {
+    hidden: { opacity: 0, x: -50 },
+    visible: {
+      opacity: 1,
+      x: 0,
+      transition: { type: "spring", delay: 0.2, duration: 1 },
+    },
+  };
+  const rightContentVariants = {
+    hidden: { opacity: 0, x: 50 },
+    visible: {
+      opacity: 1,
+      x: 0,
+      transition: { type: "spring", delay: 0.2, duration: 1 },
+    },
+  };
   return (
     <HeaderContentStyled>
-      <Fade left cascade>
-        <div className="left-content">
-          <div className="left-text-container">
-            <h1>The Best Study notes under one roof</h1>
-            <p className="left-subtext-containre">
-              We are committed to providing affordable and quality notes to
-              students, working professionals, and teachers
-            </p>
-            <Secondarybutton name={"Explore Products"} />
-          </div>
+      <motion.div
+        className="left-content"
+        variants={leftContentVariants}
+        initial="hidden"
+        animate="visible"
+      >
+        <div className="left-text-container">
+          <h1>The Best Study notes under one roof</h1>
+          <p className="left-subtext-containre">
+            We are committed to providing affordable and quality notes to
+            students, working professionals, and teachers
+          </p>
+          <Secondarybutton name={"Explore Products"} />
         </div>
-      </Fade>
-      <Fade right>
-        <div className="right-content">
-          <img src={VRStudy} alt="" className="VRStudy" />
-          <img src={ring1} alt="" className="ring1" />
-          <img src={message1} alt="" className="message1" />
-          <img src={message2} alt="" className="message2" />
-        </div>
-      </Fade>
+      </motion.div>
+      <motion.div
+        className="right-content"
+        variants={rightContentVariants}
+        initial="hidden"
+        animate="visible"
+      >
+        <img src={VRStudy} alt="" className="VRStudy" />
+        <img src={ring1} alt="" className="ring1" />
+        <img src={message1} alt="" className="message1" />
+        <img src={message2} alt="" className="message2" />
+      </motion.div>
     </HeaderContentStyled>
   );
 }
-
 const HeaderContentStyled = styled.div`
   display: grid;
   grid-template-columns: repeat(2, 1fr);
diff --git a/frontend/src/pages/landing/landingcomponents/Navigation.js b/frontend/src/pages/landing/landingcomponents/Navigation.js
index c5538d6..5464114 100755
--- a/frontend/src/pages/landing/landingcomponents/Navigation.js
+++ b/frontend/src/pages/landing/landingcomponents/Navigation.js
@@ -1,44 +1,47 @@
-import React from 'react';
-import styled from 'styled-components';
-import PrimaryButton from './PrimaryButton';
-import logo from '../img/logo.svg';
-import { Fade } from 'react-reveal';
+import React from "react";
+import styled from "styled-components";
+import PrimaryButton from "./PrimaryButton";
+import logo from "../img/logo.svg";
+import { motion } from "framer-motion";
 
 function Navigation() {
-    return (
-        <Fade top>
-        <NavigationStyled>
-            <div className="logo">
-                <img src={logo} alt="" />
-            </div>
-            <ul>
-                <li>
-                    <a href="">Home</a>
-                </li>
-                <li>
-                    <a href="">Features</a>
-                </li>
-                <li>
-                    <a href="">Pricing</a>
-                </li>
-            </ul>
-            <PrimaryButton name={'Sign Up'} />
-        </NavigationStyled>
-        </Fade>
-    )
+  return (
+    <motion.nav
+      initial={{ y: -100 }}
+      animate={{ y: 0 }}
+      transition={{ type: "spring", stiffness: 100 }}
+    >
+      <NavigationStyled>
+        <div className="logo">
+          <img src={logo} alt="" />
+        </div>
+        <ul>
+          <li>
+            <a href="">Home</a>
+          </li>
+          <li>
+            <a href="">Features</a>
+          </li>
+          <li>
+            <a href="">Pricing</a>
+          </li>
+        </ul>
+        <PrimaryButton name={"Sign Up"} />
+      </NavigationStyled>
+    </motion.nav>
+  );
 }
 
-
 const NavigationStyled = styled.nav`
+  display: flex;
+  justify-content: space-between;
+  min-height: 10vh;
+  align-items: center;
+
+  ul {
     display: flex;
     justify-content: space-between;
-    min-height: 10vh;
-    align-items: center;
-
-    ul{
-        display: flex;
-        justify-content: space-between;
-        width: 40%;
-    }
+    width: 40%;
+  }
 `;
-export default Navigation
+export default Navigation;
diff --git a/frontend/src/pages/landing/landingcomponents/PaymentSection.js b/frontend/src/pages/landing/landingcomponents/PaymentSection.js
index 8527181..ba54259 100755
--- a/frontend/src/pages/landing/landingcomponents/PaymentSection.js
+++ b/frontend/src/pages/landing/landingcomponents/PaymentSection.js
@@ -1,15 +1,14 @@
 import React from "react";
 import styled from "styled-components";
-import { InnerLayout } from "../styles/Layouts";
-import Card from "./Card";
-import card from "../img/creditcard.svg";
 import active from "../img/active.svg";
-import inactive from "../img/inactive.svg";
-import check from "../img/check.svg";
 import checkDisabled from "../img/check-disabled.svg";
+import check from "../img/check.svg";
+import inactive from "../img/inactive.svg";
+import { InnerLayout } from "../styles/Layouts";
+import Card from "./Card";
 
-import landingStandard from "../img2/landing-standard.jpg";
 import landingPremium from "../img2/landing-premium.jpg";
+import landingStandard from "../img2/landing-standard.jpg";
 
 function PaymentSection() {
   return (
diff --git a/frontend/src/pages/landing/landingcomponents/PrimaryButton.js b/frontend/src/pages/landing/landingcomponents/PrimaryButton.js
index 8493d35..5c6d359 100755
--- a/frontend/src/pages/landing/landingcomponents/PrimaryButton.js
+++ b/frontend/src/pages/landing/landingcomponents/PrimaryButton.js
@@ -1,24 +1,20 @@
-import React from 'react';
-import styled from 'styled-components';
+import React from "react";
+import styled from "styled-components";
 
-function PrimaryButton({name}) {
-    return (
-        <ButtonStyled>
-            {name}
-        </ButtonStyled>
-    )
+function PrimaryButton({ name }) {
+  return <ButtonStyled>{name}</ButtonStyled>;
 }
 
 const ButtonStyled = styled.button`
-    background-color: var(--accent-pink);
-    padding: .7rem 2rem;
-    font-family: inherit;
-    font-size: inherit;
-    color: inherit;
-    border-radius: 20px;
-    outline: none;
-    border: none;
-    cursor: pointer;
+  background-color: var(--accent-pink);
+  padding: 0.7rem 2rem;
+  font-family: inherit;
+  font-size: inherit;
+  color: inherit;
+  border-radius: 20px;
+  outline: none;
+  border: none;
+  cursor: pointer;
 `;
 
-export default PrimaryButton
+export default PrimaryButton;
diff --git a/frontend/src/pages/landing/landingcomponents/Question.js b/frontend/src/pages/landing/landingcomponents/Question.js
index fba6bbf..c21c654 100755
--- a/frontend/src/pages/landing/landingcomponents/Question.js
+++ b/frontend/src/pages/landing/landingcomponents/Question.js
@@ -1,60 +1,62 @@
-import React, { useState } from 'react';
-import styled from 'styled-components';
-import plus from '../img/plus.svg';
-import minus from '../img/minus.svg';
-import { Fade } from 'react-reveal';
+import React, { useState } from "react";
+import styled from "styled-components";
+import { motion } from "framer-motion";
+import plus from "../img/plus.svg";
+import minus from "../img/minus.svg";
 
-function Question({title, description}) {
-    const [toggle, setToggle] = useState(false);
+function Question({ title, description }) {
+  const [toggle, setToggle] = useState(false);
 
-    const btnToggler = () =>{
-        setToggle(!toggle);
-    }
+  const btnToggler = () => {
+    setToggle(!toggle);
+  };
 
-    return (
-        <Fade left cascade>
-        <QuestionStyled>
-            <div className="q-con">
-                <div className="toggle-title">
-                    <h4>{title}</h4>
-                    <button onClick={btnToggler} >
-                        {toggle ? <img src={minus} alt="" /> : <img src={plus} alt="" />}
-                    </button>
-                </div>
-                {toggle && <p>{description}</p>}
-            </div>
-        </QuestionStyled>
-        </Fade>
-    )
+  return (
+    <QuestionStyled
+      initial={{ opacity: 0, y: -20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 1 }}
+    >
+      <div className="q-con">
+        <div className="toggle-title">
+          <h4>{title}</h4>
+          <button onClick={btnToggler}>
+            {toggle ? <img src={minus} alt="" /> : <img src={plus} alt="" />}
+          </button>
+        </div>
+        {toggle && <p>{description}</p>}
+      </div>
+    </QuestionStyled>
+  );
 }
 
 const QuestionStyled = styled.div`
-background-color: #fff;
-margin: 1rem 0;
-padding: 1.4rem 1rem;
-border-radius: 24px;
-transition: all .4s ease-in-out;
-box-shadow: 0px 25px 50px rgba(22, 25, 79, 0.05);
-p{
-    transition: all .4s ease-in-out;
-}
-h4{
-    color: #16194F;
-    transition: all .4s ease-in-out;
+  background-color: #fff;
+  margin: 1rem 0;
+  padding: 1.4rem 1rem;
+  border-radius: 24px;
+  transition: all 0.4s ease-in-out;
+  box-shadow: 0px 25px 50px rgba(22, 25, 79, 0.05);
+  p {
+    transition: all 0.4s ease-in-out;
+  }
+  h4 {
+    color: #16194f;
+    transition: all 0.4s ease-in-out;
     font-size: 1.3rem;
-}
-    .toggle-title{
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        transition: all .4s ease-in-out;
-        button{
-            background: transparent;
-            outline: none;
-            cursor: pointer;
-            border: none;
-        }
+  }
+  .toggle-title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    transition: all 0.4s ease-in-out;
+    button {
+      background: transparent;
+      outline: none;
+      cursor: pointer;
+      border: none;
     }
+  }
 `;
 
 export default Question;