From f259deb0c4c6f3a68a0c5a55308ac79b53af37db Mon Sep 17 00:00:00 2001
From: Saransh Bangar <saranshbangad@gmail.com>
Date: Wed, 22 May 2024 12:41:48 +0530
Subject: [PATCH 1/2] Made Join with code section responsive

---
 frontend/src/Components/Pages/Landing-Page/JoinWithCode.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/Components/Pages/Landing-Page/JoinWithCode.jsx b/frontend/src/Components/Pages/Landing-Page/JoinWithCode.jsx
index d522169..9593fc8 100644
--- a/frontend/src/Components/Pages/Landing-Page/JoinWithCode.jsx
+++ b/frontend/src/Components/Pages/Landing-Page/JoinWithCode.jsx
@@ -3,8 +3,8 @@ import img2 from '../../../assets/Landing-Page-Assets/refresh.png';
 const JoinWithCode = () => {
   return (
     <div className='flex tracking-wide justify-center mb-20 items-center px-16 py-6 lg:m-10 m-3 font-bold text-white normal rounded-xl bg-transparent border-2 border-zinc-400 max-md:px-5'>
-      <div className='flex gap-5 w-full max-w-screen-lg max-md:flex-wrap max-md:max-w-[500px]'>
-        <div className='flex-auto my-auto text-xl whitespace-nowrap'>
+      <div className='flex gap-5 w-full max-w-screen-lg max-md:flex-wrap max-md:justify-center max-md:max-w-[500px]'>
+        <div className='flex-auto my-auto text-xl whitespace-nowrap text-center'>
           Paste the meeting code
         </div>
         <input

From 49d86a7326d3b4625abf359e60e7871d27b005ff Mon Sep 17 00:00:00 2001
From: Ujjwal Saini <73696489+UjjwalSaini07@users.noreply.github.com>
Date: Wed, 22 May 2024 22:03:59 +0530
Subject: [PATCH 2/2] Update FAQ.jsx With Animations with Frontend Flexibility

In this Commit i commit some Changes in by adding Animations, Hovering effect to Solution Box and also add Slow Open Animation with Cursor pointer Use means When we point cursor to any solution box the solution box open slowly and steady it make user Experience Great with FAQ Section.
---
 .../common/Footer/AboutSection/FAQ.jsx        | 41 +++++++++++--------
 1 file changed, 23 insertions(+), 18 deletions(-)

diff --git a/frontend/src/Components/common/Footer/AboutSection/FAQ.jsx b/frontend/src/Components/common/Footer/AboutSection/FAQ.jsx
index ecca46a..5681eac 100644
--- a/frontend/src/Components/common/Footer/AboutSection/FAQ.jsx
+++ b/frontend/src/Components/common/Footer/AboutSection/FAQ.jsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { motion } from 'framer-motion';
 
 const FAQ = () => {
   const faqs = [
@@ -52,37 +53,41 @@ const FAQ = () => {
 
   const AccordionItem = ({ question, answer, isOpen, onClick }) => {
     return (
-      <div
-        className={`border border-gray-300 bg-white shadow-md rounded-md mb-4 p-4 transition-all duration-200 ${
-          isOpen ? 'border-t-4 border-t-gray-400' : ''
-        }`}
-        style={{ boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)' }}>
+      <motion.div
+        className={`border border-gray-300 bg-white shadow-md rounded-md mb-4 p-4 cursor-pointer transform transition-transform duration-300 hover:scale-105`}
+        style={{ boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)' }}
+        onClick={onClick}>
         <button
-          className='w-full text-left flex justify-between items-center text-lg font-medium text-gray-700'
-          onClick={onClick}>
+          className='w-full text-left flex justify-between items-center text-lg font-medium text-gray-700'>
           <span>{question}</span>
           <span className='ml-2'>{isOpen ? '-' : '+'}</span>
         </button>
-        <div
-          className={`overflow-hidden transition-all duration-400 ease-in-out ${
-            isOpen ? 'max-h-screen mt-4' : 'max-h-0'
-          }`}
-          style={{ maxHeight: isOpen ? '200px' : '0px' }}>
-          <p className='text-base text-gray-800'>{answer}</p>
-        </div>
-      </div>
+        {isOpen && (
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: 'auto', opacity: 1 }}
+            transition={{ duration: 0.5 }}
+            className='overflow-hidden mt-4'>
+            <p className='text-base text-gray-800'>{answer}</p>
+          </motion.div>
+        )}
+      </motion.div>
     );
   };
 
   return (
-    <div className='bg-gradient min-h-screen'>
+    <motion.div // Wrap with motion.div for entry animation
+      initial={{ opacity: 0, y: 60 }} // Initial animation properties
+      animate={{ opacity: 1, y: 0 }} // Animation when component mounts
+      transition={{ duration: 2 }} // Transition duration
+      className='min-h-screen' style={{ backgroundColor: '#1d2026' }}>
       <div className='max-w-4xl mx-auto py-12 px-4 sm:px-6 lg:px-8'>
-        <h1 className='text-5xl font-extrabold text-gray-100 mb-14'>
+        <h1 className='text-5xl md:text-4xl lg:text-5xl text-center font-extrabold text-[#2596be] mb-12'>
           Frequently Asked Questions
         </h1>
         <Accordion data={faqs} />
       </div>
-    </div>
+    </motion.div>
   );
 };