Merge branch 'main' into ayushdev

Curious-Ecosystem · May 26, 2024 · a81373a · a81373a
2 parents 1455d75 + 8916174
commit a81373a
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 20 deletions.
diff --git 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

diff --git 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>
   );
 };