✨ Add framer motion and basic animations

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "axios": "^1.6.5",
+    "framer-motion": "^10.17.9",
     "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/components/AlgoExpertLogo/index.tsx

@@ -1,18 +1,24 @@
 import React from 'react';
+import { motion } from 'framer-motion';
 import { COLORS } from '../../constants/theme';
 import ProjectPage from '../ProjectPage';
 import QuestionDetails from '../QuestionDetails';
 import ColourBlock from '../UI/ColourBlock';
 import classes from './styles.module.scss';
 import Divider from '../UI/Divider';
+import { CONTENT_VARIANTS } from '../../constants';
 
 const AlgoExpertLogo: React.FC<Props> = () => {
   return (
     <ProjectPage>
-      <QuestionDetails title='AlgoExpert Logo' titleClassName={classes.questionTitle} containerClassName={classes.questionDetailsContainer}>
+      <QuestionDetails
+        title='AlgoExpert Logo'
+        titleClassName={classes.questionTitle}
+        containerClassName={classes.questionDetailsContainer}
+      >
         <p>
-          You're given an HTML file containing the markup for the AlgoExpert logo. Using only CSS, replicate the expected output following these
-          specifications:
+          You're given an HTML file containing the markup for the AlgoExpert logo. Using only CSS, replicate the
+          expected output following these specifications:
         </p>
         <ul>
           <li>
@@ -24,38 +30,39 @@ const AlgoExpertLogo: React.FC<Props> = () => {
             <ul>
               <li>
                 In the center is the inner circle. This is a circle with a width and height of 10px and a solid, white
-                <ColourBlock colour={COLORS.WHITE} />, 5px border. The left edge of the inner circle is 50px from the left edge of the{' '}
-                <span className={classes.questionDescriptionHighlight}>.wrapper</span>.
+                <ColourBlock colour={COLORS.WHITE} />, 5px border. The left edge of the inner circle is 50px from the
+                left edge of the <span className={classes.questionDescriptionHighlight}>.wrapper</span>.
               </li>
               <li>
-                The first ring has a width of 100px, a height of 30px, and a border-radius of 50%. It also has a solid, white
-                <ColourBlock colour={COLORS.WHITE} />, 5px border. This ring is rotated so that the left edge is at the top left, and the right edge
-                is at the bottom right.
+                The first ring has a width of 100px, a height of 30px, and a border-radius of 50%. It also has a solid,
+                white
+                <ColourBlock colour={COLORS.WHITE} />, 5px border. This ring is rotated so that the left edge is at the
+                top left, and the right edge is at the bottom right.
               </li>
               <li>
-                The second ring is the same as the first ring, but it is rotated in the opposite direction (that is the left edge is at the bottom
-                left and the right edge is at the top right).
+                The second ring is the same as the first ring, but it is rotated in the opposite direction (that is the
+                left edge is at the bottom left and the right edge is at the top right).
               </li>
             </ul>
           </li>
           <li>
             To the right of the logo is the AlgoExpert text. This text is white
-            <ColourBlock colour={COLORS.WHITE} />, with a font-size of 48px and the system default monospace font-family. This text is 50px from the
-            right edge of the logo's inner circle.
+            <ColourBlock colour={COLORS.WHITE} />, with a font-size of 48px and the system default monospace
+            font-family. This text is 50px from the right edge of the logo's inner circle.
           </li>
           <li>
-            Both the logo and the text are vertically centered in the <span className={classes.questionDescriptionHighlight}>.wrapper</span>{' '}
-            container.
+            Both the logo and the text are vertically centered in the{' '}
+            <span className={classes.questionDescriptionHighlight}>.wrapper</span> container.
           </li>
         </ul>
       </QuestionDetails>
       <Divider />
-      <section className={classes.logoContainer}>
+      <motion.section variants={CONTENT_VARIANTS} className={classes.logoContainer}>
         <div className={classes.wrapper}>
           <div className={classes.logo}></div>
           <h1 className={classes.logoTitle}>AlgoExpert</h1>
         </div>
-      </section>
+      </motion.section>
     </ProjectPage>
   );
 };

src/components/AlgoExpertProducts/index.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
+import { motion } from 'framer-motion';
 import ProjectPage from '../ProjectPage';
 import QuestionDetails from '../QuestionDetails';
 import classes from './styles.module.scss';
 import Divider from '../UI/Divider';
+import { CONTENT_VARIANTS } from '../../constants';
 
 const AlgoExpertProducts: React.FC<Props> = () => {
   return (
@@ -41,7 +43,7 @@ const AlgoExpertProducts: React.FC<Props> = () => {
         </ul>
       </QuestionDetails>
       <Divider />
-      <section className={classes.wrapper}>
+      <motion.section variants={CONTENT_VARIANTS} className={classes.wrapper}>
         <div className={classes.productsContainer}>
           <div className={`${classes.product} ${classes.algoExpert}`}>
             <p>AlgoExpert</p>
@@ -59,7 +61,7 @@ const AlgoExpertProducts: React.FC<Props> = () => {
             <p>ProgrammingExpert</p>
           </div>
         </div>
-      </section>
+      </motion.section>
     </ProjectPage>
   );
 };

src/components/BlogPost/index.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
+import { motion } from 'framer-motion';
 import ProjectPage from '../ProjectPage';
 import QuestionDetails from '../QuestionDetails';
 import classes from './styles.module.scss';
 import Divider from '../UI/Divider';
+import { CONTENT_VARIANTS } from '../../constants';
 
 const BlogPost: React.FC<Props> = () => {
   return (
@@ -22,7 +24,7 @@
         <p>
           In the first section, the text{' '}
           <span className={classes.questionDescriptionHighlight}>proof-of-inverted-binary-tree consensus algorithm</span> should be marked up as
           strong text, and <span className={classes.questionDescriptionHighlight}>Web 4.0</span> should be emphasized. In the second section, the word{' '}
           <span className={classes.questionDescriptionHighlight}>AlgoExpert</span> should be a link to{' '}
           <span className={classes.questionDescriptionHighlight}>https://algoexpert.io</span>, and it should open in a new tab.
         </p>
@@ -33,7 +35,7 @@
         <p>Your HTML code should use proper semantic markup.</p>
       </QuestionDetails>
       <Divider />
-      <article className={classes.blogContainer}>
+      <motion.article variants={CONTENT_VARIANTS} className={classes.blogContainer}>
         <h1 className={classes.blogTitle}>Introducing AlgoCoin</h1>
         <p className={classes.blogCaption}>The future of decentralized meme currency is here</p>
         <section className={classes.blogSection}>
@@ -61,7 +63,7 @@
         <footer className={classes.blogFooter}>
           <em>Copyright 3022 AlgoCoin. All rights reserved.</em>
         </footer>
-      </article>
+      </motion.article>
     </ProjectPage>
   );
 };

src/components/ConnectFour/index.tsx

@@ -1,11 +1,13 @@
 import React from 'react';
+import { motion } from 'framer-motion';
 import classes from './styles.module.scss';
 import ProjectPage from '../ProjectPage';
 import QuestionDetails from '../QuestionDetails';
 import CodeBlock from '../UI/CodeBlock';
 import { sampleUsage1, sampleUsage2 } from './codeBlock';
 import Board from './components/Board';
 import Divider from '../UI/Divider';
+import { CONTENT_VARIANTS } from '../../constants';
 
 const ConnectFour: React.FC<Props> = () => {
   return (
@@ -56,9 +58,9 @@ const ConnectFour: React.FC<Props> = () => {
         </p>
       </QuestionDetails>
       <Divider />
-      <section className={classes.solutionContainer}>
+      <motion.section variants={CONTENT_VARIANTS} className={classes.solutionContainer}>
         <Board />
-      </section>
+      </motion.section>
     </ProjectPage>
   );
 };

src/components/CryptoPrices/index.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
+import { motion } from 'framer-motion';
 import classes from './styles.module.scss';
 import ProjectPage from '../ProjectPage';
 import QuestionDetails from '../QuestionDetails';
-import { CRYPTO_PRICES_CONFIG } from '../../constants';
+import { CONTENT_VARIANTS, CRYPTO_PRICES_CONFIG } from '../../constants';
 import PricesTable from './components/PricesTable';
 import Divider from '../UI/Divider';
 
@@ -31,9 +32,9 @@ const CryptoPrices: React.FC<Props> = () => {
         </p>
       </QuestionDetails>
       <Divider />
-      <section className={classes.solutionContainer}>
+      <motion.section variants={CONTENT_VARIANTS} className={classes.solutionContainer}>
         <PricesTable />
-      </section>
+      </motion.section>
     </ProjectPage>
   );
 };

src/components/InfiniteScroll/index.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useRef, useState } from 'react';
+import { motion } from 'framer-motion';
 import ProjectPage from '../ProjectPage';
 import QuestionDetails from '../QuestionDetails';
 import CodeBlock from '../UI/CodeBlock';
@@ -8,6 +9,7 @@ import classes from './styles.module.scss';
 import useFetchTestimonials from './useFetchTestimonials';
 import Divider from '../UI/Divider';
 import { isEmptyList } from '../../utils';
+import { CONTENT_VARIANTS } from '../../constants';
 
 const InfiniteScroll: React.FC<Props> = () => {
   const [page, setPage] = useState<number>(0);
@@ -120,7 +122,7 @@ const InfiniteScroll: React.FC<Props> = () => {
       </QuestionDetails>
       <Divider />
       {!isEmptyList(testimonials) && (
-        <main className={classes.solutionContainer}>
+        <motion.main variants={CONTENT_VARIANTS} className={classes.solutionContainer}>
           <h2 className={classes.solutionHeader}>Testimonials</h2>
           <section className={classes.testimonialsContainer}>
             {testimonials.map((testimonial, index) => (
@@ -133,7 +135,7 @@ const InfiniteScroll: React.FC<Props> = () => {
               />
             ))}
           </section>
-        </main>
+        </motion.main>
       )}
     </ProjectPage>
   );

src/components/ItemCart/index.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
+import { motion } from 'framer-motion';
 import ProjectPage from '../ProjectPage';
 import QuestionDetails from '../QuestionDetails';
 import classes from './styles.module.scss';
 import Divider from '../UI/Divider';
+import { CONTENT_VARIANTS } from '../../constants';
 
 const ItemCart: React.FC<Props> = () => {
   return (
@@ -19,7 +21,7 @@ const ItemCart: React.FC<Props> = () => {
         <p>Your HTML code should use a table with proper semantic markup and with Item Cart as its caption.</p>
       </QuestionDetails>
       <Divider />
-      <table className={classes.tableContainer}>
+      <motion.table variants={CONTENT_VARIANTS} className={classes.tableContainer}>
         <caption className={classes.tableCaption}>Item Cart</caption>
         <thead>
           <tr className={classes.tableRow}>
@@ -52,7 +54,7 @@ const ItemCart: React.FC<Props> = () => {
             <td className={classes.tableCellData}>8</td>
           </tr>
         </tfoot>
-      </table>
+      </motion.table>
     </ProjectPage>
   );
 };

src/components/Memory/index.tsx

@@ -1,11 +1,13 @@
 import React from 'react';
+import { motion } from 'framer-motion';
 import classes from './styles.module.scss';
 import ProjectPage from '../ProjectPage';
 import QuestionDetails from '../QuestionDetails';
 import CodeBlock from '../UI/CodeBlock';
 import { sampleUsage1, sampleUsage2 } from './codeBlock';
 import Board from './components/Board';
 import Divider from '../UI/Divider';
+import { CONTENT_VARIANTS } from '../../constants';
 
 const Memory: React.FC<Props> = () => {
   return (
@@ -52,9 +54,9 @@ const Memory: React.FC<Props> = () => {
         </div>
       </QuestionDetails>
       <Divider />
-      <section className={classes.solutionContainer}>
+      <motion.section variants={CONTENT_VARIANTS} className={classes.solutionContainer}>
         <Board />
-      </section>
+      </motion.section>
     </ProjectPage>
   );
 };