Merge pull request #13 from MohitShaw181104/main

Fixed faq section Responsiveness
IIITKalyaniFOSC · Jun 8, 2024 · eb53ade · eb53ade
2 parents 83e1673 + f701aea
commit eb53ade
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 33 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -14,9 +14,9 @@ function App() {
   return (
     <>
       <Navbar />
-      <LandingPage />
+      <LandingPage/>
       <Sponsors />
-      {/* <Faq/> */}
+      <Faq/>
       <Discord />
       <Footer />
     </>

diff --git a/src/components/Faq/Faq.jsx b/src/components/Faq/Faq.jsx
@@ -55,14 +55,14 @@ const Faq = () => {
 
   return (
     <>
-      <div className="w-full h-screen bg-[url('/src/assets/images/faq/faqbg.svg')] flex items-center justify-center" id='faq'>
-        <img src={stars} alt="" className="absolute object-cover w-full h-full" />
-        <div className="mb-10 text-center">
-          <h1 className="text-[#9E9E9E] text-3xl md:text-4xl xl:text-5xl m-0 flex justify-center md:justify-start">
+      <div className="relative w-full min-h-screen bg-[url('/src/assets/images/faq/faqbg.svg')] bg-cover bg-no-repeat flex items-start justify-center py-10">
+        <img src={stars} alt="stars" className="absolute w-full h-full object-cover" />
+        <div className="relative z-10 text-left mx-4 md:mx-8 lg:mx-12 xl:mx-20 w-full max-w-4xl">
+          <h1 className="text-[#9E9E9E] text-3xl md:text-4xl xl:text-5xl m-0">
             $ ./<span id="heading-rules" className="text-white">FAQ</span>
           </h1>
-          <div className="relative z-10 w-full max-w-4xl mx-4 xl:mx-7 p-6 bg-opacity-50 rounded-lg">
-            <div className="mt-6">
+          <div className="relative z-10 w-auto p-6 rounded-lg">
+            <div className="mt-4">
               <div id="accordionFaq">
                 {faqData.map((faq, index) => (
                   <div key={index} className="mb-4">
@@ -77,9 +77,9 @@ const Faq = () => {
                       <span className="text-left">{faq.question}</span>
                     </h1>
                     <div
-                      className={`overflow-hidden transition-max-height duration-500 ease-in-out ${openIndex === index ? 'max-h-screen' : 'max-h-0'}`}
+                      className={`overflow-hidden transition-all duration-500 ease-in-out ${openIndex === index ? 'max-h-[1000px]' : 'max-h-0'}`}
                     >
-                      <div className="example text-[#D6D6D6] text-left text-xl sm:text-2xl pl-8 sm:pl-10 2xl:pl-12 mt-2">
+                      <div className="text-[#D6D6D6] text-left text-xl sm:text-2xl pl-8 sm:pl-10 2xl:pl-12 mt-2">
                         {faq.answer}
                       </div>
                     </div>

diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -15,36 +15,23 @@ export default function Navbar(){
             footerSection.scrollIntoView({ behavior: 'smooth' });
         }
     };
-    const scrollToSponsors = () => {
-        const footerSection = document.getElementById('sponsors');
-        if (footerSection) {
-            footerSection.scrollIntoView({ behavior: 'smooth' });
-        }
-    };
-    const scrollToFaq = () => {
-        const footerSection = document.getElementById('faq');
-        if (footerSection) {
-            footerSection.scrollIntoView({ behavior: 'smooth' });
-        }
-    };
     return(
-        <section className="w-full">
-        <nav className="fixed z-30 flex bg-gradient-to-b from-[#040842] to-[#040842] justify-between w-full h-[100px] max-[540px]:h-[60px] mt-0 bg-blue-800 font-vt323 ">
-            <img className=" xl:ml-[0] xl:mt-[1%] lg:w-[10%] lg:h-[62%] sm:w-[12%] min-[540px]:w-[13%] min-[900px]:h-[55%] min-[900px]:mt-[2%] sm:ml-[1.7%] min-[540px]:ml-[1.7%] lg:ml-[1.5%] lg:mt-[1.5%] mt-[1%] max-[540px]:h-[50%] max-[540px]:ml-[4%] max-[540px]:mt-[4%]" src={sc1_logo}></img>
+        <>
+        <nav className="flex bg-gradient-to-b from-[#040842] to-[#040842] justify-between w-full h-[100px] mt-0 bg-blue-800 font-vt323 ">
+            <img className=" xl:ml-[0] xl:mt-[1%] lg:w-[10%] lg:h-[62%] sm:w-[12%] min-[540px]:w-[13%] min-[900px]:h-[55%] min-[900px]:mt-[2%] sm:ml-[1.7%] min-[540px]:ml-[1.7%] lg:ml-[1.5%] lg:mt-[1.5%] mt-[1%] max-[540px]:h-[38%] max-[540px]:ml-[4%] max-[540px]:mt-[4%]" src={sc1_logo}></img>
 
             <ul className=" flex xl:space-x-[5rem] lg:space-x-[4rem] sm:space-x-[1.6rem] sm:text-[22px] min-[540px]:space-x-[1.6rem] min-[540px]:text-[22px] md:space-x-[2.2rem] md:text-[25px] min-[900px]:space-x-[2.4rem] min-[900px]:text-[1.8rem] lg:text-[2rem] text-white items-center max-[540px]:hidden ">
                 <a onClick={scrollToSchedule} style={{ cursor: 'pointer' }}><li className="hover:text-[#c3c3c3]">SCHEDULE</li></a>
-                <a onClick={scrollToSponsors} style={{ cursor: 'pointer' }}><li className="hover:text-[#c3c3c3]">SPONSORS</li></a>
-                <a onClick={scrollToFaq} style={{ cursor: 'pointer' }}><li className="hover:text-[#c3c3c3]">FAQ</li></a>
-                <a onClick={scrollToFooter} style={{ cursor: 'pointer' }}><li className="hover:text-[#c3c3c3]">CONTACT US</li></a>
+                <li className="hover:text-[#c3c3c3]" style={{ cursor: 'pointer' }}>TRACKS</li>
+                <li className="hover:text-[#c3c3c3]" style={{ cursor: 'pointer' }}>PRIZES</li>
+                <a onClick={scrollToFooter} style={{ cursor: 'pointer' }}><li className="hover:text-[#c3c3c3]">MORE</li></a>
             </ul>
             <img className="xl:w-[14%] xl:mr-[1%] lg:w-[15%] sm:w-[17%] sm:mr-[1.7%] min-[540px]:w-[17%] min-[540px]:mr-[1.7%] lg:mr-[1.2%] lg:mt-[1%] mt-[1%]   max-[540px]:hidden" src={iiit_logo}></img>
-            <img className="min-[540px]:hidden max-[540px]:h-[58%] min-[450px]:mr-[73%] max-[540px]:mt-[3%]  min-[320px]:mr-[65%] min-[350px]:mr-[68%] min-[400px]:mr-[70%]" src={iiit_logo_mobile}></img>
+            <img className="min-[540px]:hidden max-[540px]:h-[45%] min-[450px]:mr-[55%] max-[540px]:mt-[3%]  min-[320px]:mr-[35%] min-[350px]:mr-[42%]" src={iiit_logo_mobile}></img>
             {/* <img className="min-[540px]:hidden w-[10%] h-[18%] mt-[7%] mr-[5%]" src="./images/Vector.svg" ></img> */}
-
+            <SwipeableTemporaryDrawer/>
         </nav>
-        <SwipeableTemporaryDrawer/>
-        </section>
+        </>
     )
 }
 // max-[540px]:h-[40%] max-[540px]:mr-[4%] max-[540px]:mt-[4%]
diff --git a/src/components/Sponsors/Sponsors.jsx b/src/components/Sponsors/Sponsors.jsx
@@ -19,7 +19,7 @@ const Sponsors = () => {
     return (
         <section className="relative bg-[url('/src/assets/images/discord/stars.svg')]" id='sponsors'>
 
-            <div className="py-20 max-w-[1000px] md:mx-8 lg:mx-12 xl:mx-auto">
+            <div className="max-w-[1000px] md:mx-8 lg:mx-12 xl:mx-auto">
                 <h1 className='py-6 md:text-left text-2xl md:text-4xl xl:text-5xl text-[#9E9E9E]'>$ tar -xvz <span className='text-white'>SPONSORS</span>.tar.gz</h1>
 
                 <div className='mb-4 flex flex-col gap-1 sm:gap-1'>