Fix faqs (#200)

Co-authored-by: Yaoyao Guo <168144675+liugetu@users.noreply.github.com>

Author: polmf

public/faqs.svg

@@ -1,4 +1,4 @@
-import styled, { css } from "styled-components";
+import styled from "styled-components";
 import {
   applications_faqs,
   hackupc_faqs,
@@ -39,46 +39,25 @@ const TitleSpacer = styled.div`
 `;
 
 const SectionTitleStyled = styled(SectionTitle)`
-  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 50%;
   margin: 0 auto;
-  background-color: #5b5340;
-  padding: ${SpacingS};
-  height: auto;
+
+  padding: ${SpacingM} clamp(4rem, 15vw, 12rem);
+  background-image: url("/faqs.svg");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  width: 100%;
+  max-width: 700px;
 
   @media (max-width: ${MobileBreakpoint}) {
-    width: 95%;
+    padding: ${SpacingS} clamp(2rem, 20vw, 6rem);
+    background-image: url("/faqsmobile.svg");
   }
 `;
 
-const TitleImageWrapper = styled.div`
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -51%);
-  width: 97%;
-  height: 83%;
-  z-index: 1;
-  pointer-events: none;
-`;
-
-const TitleImage = styled(Image)`
-  position: absolute;
-  inset: 0;
-  object-fit: fill;
-`;
-
-const TitleText = styled.span`
-  position: relative;
-  z-index: 2;
-  flex: 1;
-  text-align: center;
-  white-space: nowrap;
-`;
-
 const Split = styled.div`
   display: flex;
   justify-content: center;
@@ -141,16 +120,15 @@ const SupportImage = styled(Image)<{
 
   ${(props) =>
     props.side === "left"
-      ? css`
+      ? `
           left: 75px;
         `
-      : css`
+      : `
           right: 75px;
         `}
 `;
 
 const AnswerBox = styled.div<{ isVisible: boolean }>`
-  overflow: hidden;
   max-height: 0;
   opacity: 0;
   transform-origin: top;
@@ -160,8 +138,8 @@ const AnswerBox = styled.div<{ isVisible: boolean }>`
 
   ${(props) =>
     props.isVisible &&
-    css`
-      max-height: 1000px;
+    `
+      max-height: 10000px;
       opacity: 1;
       padding: ${SpacingXS};
       margin-top: ${SpacingM};
@@ -179,7 +157,6 @@ const AnswerInner = styled.div`
 `;
 
 const AnswerImageWrapper = styled.div`
-  position: absolute;
   inset: 0;
 
   img {
@@ -265,20 +242,23 @@ const LastBlock = styled.div`
 const BlockTitleStyled = styled(BlockTitle)`
   color: #5b5340;
   background-color: #f0e3d8;
+  font-weight: bold;
   border-radius: 11px;
   display: inline-flex;
   align-items: center;
   justify-content: flex-start;
   width: fit-content;
-  padding: ${SpacingXS};
-  padding-right: ${SpacingM};
+  padding: ${SpacingS} ${SpacingM};
+  padding-right: ${SpacingL};
 
   @media (max-width: ${MobileBreakpoint}) {
     border-radius: 0 11px 11px 0;
     margin-left: calc(-50vw + 50%);
     margin-top: ${SpacingS};
     flex-direction: column;
     align-self: flex-start;
+    padding-right: ${SpacingM};
+    padding-left: ${SpacingL};
 
     &:first-child {
       margin-top: 0;
@@ -287,13 +267,19 @@ const BlockTitleStyled = styled(BlockTitle)`
 `;
 
 const LastBlockTitle = styled(BlockTitleStyled)`
+  width: auto;
+  justify-content: center;
+  text-align: center;
+  padding-left: ${SpacingM};
+  padding-right: ${SpacingM};
+  border-radius: 11px;
+
   @media (max-width: ${MobileBreakpoint}) {
     align-self: center;
     justify-content: center;
     text-align: center;
     margin-left: 0;
-    border-radius: 11px;
-    padding: ${SpacingXS};
+    padding: ${SpacingXS} ${SpacingM};
   }
 `;
 
@@ -361,7 +347,6 @@ export default function FAQs() {
             side="left"
             isVisible={activeFaqId === faq.id}
           />
-
           <SupportImage
             src="/suport.svg"
             alt="support right"
@@ -370,7 +355,6 @@ export default function FAQs() {
             side="right"
             isVisible={activeFaqId === faq.id}
           />
-
           <QuestionTitleWrap>
             <TorchWrapper onClick={() => toggleFaq(faq.id)}>
               {activeFaqId === faq.id && (
@@ -384,7 +368,6 @@ export default function FAQs() {
               )}
               <TorchIcon src="/torch.svg" alt="torch" width={24} height={24} />
             </TorchWrapper>
-
             <QuestionTitle onClick={() => toggleFaq(faq.id)}>
               {faq.question}
             </QuestionTitle>
@@ -408,12 +391,7 @@ export default function FAQs() {
   return (
     <Section id="faqs">
       <TitleSpacer>
-        <SectionTitleStyled>
-          <TitleImageWrapper>
-            <TitleImage src="/faqs.svg" alt="FAQs icon" fill />
-          </TitleImageWrapper>
-          <TitleText className={lora.className}>FAQs</TitleText>
-        </SectionTitleStyled>
+        <SectionTitleStyled className={lora.className}>FAQs</SectionTitleStyled>
       </TitleSpacer>
 
       <Split>