add arrow in faq section

Author: brianshattuck

src/pages/LaunchpadPage/FAQ.tsx

@@ -203,9 +203,32 @@ You should see a prompt from BlockPass saying, “If you have previously created
               <Box>
                 <Typography className='faq-name'>{faq.name}</Typography>
               </Box>
+              {tabActive === faq.id && (
+                <svg
+                  width='79'
+                  height='14'
+                  viewBox='0 0 79 14'
+                  fill='none'
+                  strokeWidth='1.5'
+                  stroke='currentColor'
+                  className='faq-arrow'
+                  xmlns='http://www.w3.org/2000/svg'
+                >
+                  <g>
+                    <path
+                      d='M1 7H78M78 7L72 1M78 7L72 13'
+                      stroke='#4d5d7994'
+                      strokeWidth='1.5'
+                      strokeLinecap='round'
+                      strokeLinejoin='round'
+                    />
+                  </g>
+                </svg>
+              )}
             </Box>
           ))}
         </Box>
+        <Box className='cover-faq-items'></Box>
       </Box>
     </Box>
   );

src/pages/styles/launchpad.scss

@@ -224,14 +224,25 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  max-width: 1000px;
+  margin-left: auto;
+  margin-right: auto;
+
   @media (max-width: 1280px) {
     margin-bottom: 88px;
   }
 
+  .cover-faq {
+    display: flex;
+    width: 100%;
+    margin-top: 1.5rem;
+  }
+
   .cover-faq-list {
     display: grid;
     grid-template-columns: repeat(1, minmax(0, 1fr));
     gap: 0.25rem;
+    flex: 40%;
   }
 
   .faq {
@@ -270,6 +281,19 @@
     font-size: 1.5rem;
     line-height: 2.25rem;
   }
+
+  .faq-arrow {
+    display: block;
+    color: #4d5d7994;
+    margin-left: auto;
+    @media (max-width: 768px) {
+      display: none;
+    }
+  }
+
+  .cover-faq-items {
+    flex: 60%;
+  }
 }
 
 .ctaSection {