React Reveal to Framer Motion Migration

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>

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>

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>

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;

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>