faq and values changes

app/(pages)/(index-page)/_components/FAQ/AccordionFAQ.module.scss

@@ -1,6 +1,7 @@
 //screen sizes >=1840px
 @import '@globals/styles/mixins.scss';
 .container {
+    position: relative;
     display: flex;
     flex-direction: column;
     z-index: 10;
@@ -85,6 +86,14 @@
     }   
 }
 
+@include tablet {
+    .container{
+        .questions {
+            font-size: 1rem;
+        }
+    }
+}
+
 @include phone {
     .container{
         .FAQText {

app/(pages)/(index-page)/_components/FAQ/AccordionFAQ.tsx

@@ -1,5 +1,6 @@
 'use client';
 import React from 'react';
+import { useState, useEffect, useRef } from 'react';
 import styles from './AccordionFAQ.module.scss';
 import Link from 'next/link';
 import { Accordion, AccordionItem as Item } from '@szhsin/react-accordion';
@@ -116,9 +117,42 @@ const AccordionFAQ = () => {
     */
   }
 
+  const [fixedHeight, setFixedHeight] = useState(0);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const longestAnswerRef = useRef<HTMLParagraphElement>(null);
+
+  useEffect(() => {
+    if (containerRef.current && longestAnswerRef.current) {
+      const collapsedHeight = containerRef.current.scrollHeight;
+      const longestAnswerHeight = longestAnswerRef.current.scrollHeight;
+
+      setFixedHeight(collapsedHeight + longestAnswerHeight);
+    }
+  }, []);
+
   return (
-    <div className={styles.container}>
+    <div
+      className={styles.container}
+      ref={containerRef}
+      style={{ height: fixedHeight ? `${fixedHeight}px` : 'auto' }}
+    >
       <h1 className={styles.FAQText}>FAQ</h1>
+
+      {/* 
+        Hidden element to measure the longest answer (first question) for calculating fixed height of the container
+      */}
+      <div
+        style={{
+          position: 'absolute',
+          visibility: 'hidden',
+          pointerEvents: 'none',
+        }}
+      >
+        <p ref={longestAnswerRef} className={styles.answer}>
+          {faqs[0].answer}
+        </p>
+      </div>
+
       <Accordion transition transitionTimeout={250}>
         {faqs.map(({ question, answer }, index) => (
           <React.Fragment key={index}>

app/(pages)/(index-page)/_components/FAQ/FAQ.module.scss

@@ -12,10 +12,11 @@
     width: 68%;
     position: relative;
     background-color: #549645;
-    padding-top: 35%;
+    padding-top: 30%;
 }
 .faq{
     padding: 20%;
+    padding-top: 8%;
     position: relative;
 }
 .donation{
@@ -89,67 +90,72 @@
     top: -60px;
     z-index: 30;
 }
+.grass_2{
+    position: absolute;
+    width: 7%;
+    top: 42%;
+    right: 0;
+}
+//assets in donate section
 .grass_single{
     position: absolute;
     width: 15%;
-    top: -115px;
+    top: -35%;
     right: 15%;
 }
 .grass_1{
     position: absolute;
     width: 12%;
-    top: -200px;
-}
-.grass_2{
-    position: absolute;
-    width: 7%;
-    top: 42%;
-    right: 0;
+    top: -40%;
 }
 .grass_3{
     position: absolute;
     width: 20%;
-    bottom: -225px;
+    bottom: -25%;
     right: 8%;
 }
+
+//assets in faq section
+
 .grass_4{
     position: absolute;
-    width: 7%;
-    bottom: 20%;
+    width: 10.5%;
+    top: 600px;
+    left:0;
 }
 .grass_5{
     position: absolute;
-    width: 16%;
+    width: 23.1%;
     bottom: 2%;
-    left: 40%
+    right: 10%
 }
 .firefly_sm1{
     position: absolute;
     width: 1%;
-    top: 30%;
-    right: 5%;
+    top: 320px;
+    right: 4%;
     animation: jump 6s infinite ease-in-out;
 }
 .firefly_lg1{
     position: absolute;
     width: 1.5%;
-    top: 31%;
+    top: 300px;
     right: 6%;
     animation: jump 5s infinite ease-in-out;
 }
 .firefly_sm2{
     position: absolute;
     width: 1%;
-    bottom: 14%;
-    right: 6%;
-    animation: jump 9s infinite ease-in-out;
+    top: 500px;
+    right: -40%;
+    animation: jump 6.5s infinite ease-in-out;
 }
 .firefly_lg2{
     position: absolute;
-    width: 1%;
-    bottom: 6%;
-    left: 60%;
-    animation: jump 4s infinite ease-in-out;
+    width: 1.5%;
+    bottom: 100px;
+    right: 6%;
+    animation: jump 5.5s infinite ease-in-out;
 }
 @keyframes jump {
     0%, 100% { transform: translateY(0); }
@@ -200,9 +206,6 @@
     .grass_1{
         top: -160px;
     }
-    .grass_3{
-        bottom: -130px;
-    }
 }
 @include sm-desktop { //1164
     // for size 1048 to 1280
@@ -257,6 +260,12 @@
     .grass_light{
         top: -30px;
     }
+    .grass_single{
+        top: -40%;
+    }
+    .grass_1{
+        top: -45%;
+    }
 }
 
 @include phone { //phone 560

app/(pages)/(index-page)/_components/FAQ/FAQ.tsx

@@ -96,34 +96,6 @@ export default function FAQ() {
           height={10}
           className={style.grass_2}
         />
-        <Image
-          src="/images/faq/grass_texture_4.svg"
-          alt="grass texture"
-          width={201}
-          height={10}
-          className={style.grass_4}
-        />
-        <Image
-          src="/images/faq/grass_texture_5.svg"
-          alt="grass texture"
-          width={230}
-          height={10}
-          className={style.grass_5}
-        />
-        <Image
-          src="/images/faq/firefly_sm.svg"
-          alt="firefly"
-          width={7}
-          height={10}
-          className={style.firefly_sm2}
-        />
-        <Image
-          src="/images/faq/firefly_lg.svg"
-          alt="firefly"
-          width={7}
-          height={10}
-          className={style.firefly_lg2}
-        />
       </div>
       <div className={style.container}>
         <div className={style.faq_donation}>
@@ -152,18 +124,46 @@ export default function FAQ() {
             />
           </div>
           <div className={style.faq}>
+            <Image
+              src="/images/faq/grass_texture_4.svg"
+              alt="grass texture"
+              width={201}
+              height={10}
+              className={style.grass_4}
+            />
+            <Image
+              src="/images/faq/grass_texture_5.svg"
+              alt="grass texture"
+              width={230}
+              height={10}
+              className={style.grass_5}
+            />
             <Image
               src="/images/faq/firefly_sm.svg"
               alt="firefly"
               width={7}
               height={10}
-              className={style.firefly_sm1}
+              className={style.firefly_sm2}
             />
             <Image
               src="/images/faq/firefly_lg.svg"
               alt="firefly"
+              width={11}
+              height={10}
+              className={style.firefly_lg2}
+            />
+            <Image
+              src="/images/faq/firefly_sm.svg"
+              alt="firefly"
               width={7}
               height={10}
+              className={style.firefly_sm1}
+            />
+            <Image
+              src="/images/faq/firefly_lg.svg"
+              alt="firefly"
+              width={11}
+              height={10}
               className={style.firefly_lg1}
             />
             <AccordionFAQ />

app/(pages)/(index-page)/_components/hero/heroMainSection.tsx

@@ -75,7 +75,7 @@ export default function HeroSection() {
             className="h-[306px] w-[132px] md:h-[472px] md:w-[216px] lg:h-[472px] lg:w-[216px] xl:h-[561px] xl:w-[264px]"
           />
         </div>
-        <div className="absolute left-[-120px] z-[120] hidden pt-[606px] break-625:block sm:left-[-20px] sm:pt-[606px] md:left-[-60px] md:pt-[582px] lg:left-[0px] lg:pt-[582px] xl:pt-[559px]">
+        <div className="absolute left-[-120px] top-[-1px] z-[120] hidden pt-[606px] break-625:block sm:left-[-20px] sm:pt-[606px] md:left-[-60px] md:pt-[582px] lg:left-[0px] lg:pt-[582px] xl:pt-[559px]">
           <Image
             src="/Hero/grass.svg"
             alt="Grass"

app/(pages)/about-us/_components/Hero/_components/Beach/Beach.module.scss

@@ -26,7 +26,7 @@
 /* Layer: Water Light */
 .water_light {
     position: absolute;
-    top: -10px;
+    top: -15px;
     width: 100%;
     height: 125px;
     z-index: 30;