From 595ee5cad6223b1595f4469a1148437ed28804ca Mon Sep 17 00:00:00 2001
From: michelleyeoh <michellew.yeoh@gmail.com>
Date: Sun, 9 Feb 2025 14:40:36 -0800
Subject: [PATCH 1/2] asset transition

---
 .../_components/FAQ/AccordionFAQ.module.scss   | 18 +++++-------------
 .../_components/FAQ/AccordionFAQ.tsx           |  2 +-
 public/images/faq/plus_vertical.svg            | 15 ---------------
 3 files changed, 6 insertions(+), 29 deletions(-)
 delete mode 100644 public/images/faq/plus_vertical.svg

diff --git a/app/(pages)/(index-page)/_components/FAQ/AccordionFAQ.module.scss b/app/(pages)/(index-page)/_components/FAQ/AccordionFAQ.module.scss
index 9965389..f99ff0b 100644
--- a/app/(pages)/(index-page)/_components/FAQ/AccordionFAQ.module.scss
+++ b/app/(pages)/(index-page)/_components/FAQ/AccordionFAQ.module.scss
@@ -52,17 +52,11 @@
             align-items: center;
             width: 100%; //for lines to stretch throughout the FAQ section
     
-            // .dropDownArrow {
-            //     margin-left: auto;
-            //     transform: rotate(0deg);
-            //     transition: transform 0.3s cubic-bezier(0, 0, 0, 1);
-            //     transform-origin: center center; 
-            // }
             .dropDownPlus{
-                visibility: visible;
+                position: absolute;
                 transform: rotate(90deg);
-                padding-left: 15%;
-
+                transition: transform 0.5s cubic-bezier(0, 0, 0, 1);
+                
                 >img {
                     max-width: none;
                 }
@@ -79,11 +73,9 @@
             justify-content: space-between;
             align-items: center;
 
-            // .dropDownArrow {
-            //     transform: rotate(180deg);
-            // }
             .dropDownPlus{
-                visibility: hidden;
+                transform: rotate(0deg);
+                transition: transform 0.5s cubic-bezier(0, 0, 0, 1);
             }
         }
     }
diff --git a/app/(pages)/(index-page)/_components/FAQ/AccordionFAQ.tsx b/app/(pages)/(index-page)/_components/FAQ/AccordionFAQ.tsx
index a7e4e3d..4f39df1 100644
--- a/app/(pages)/(index-page)/_components/FAQ/AccordionFAQ.tsx
+++ b/app/(pages)/(index-page)/_components/FAQ/AccordionFAQ.tsx
@@ -130,7 +130,7 @@ const AccordionFAQ = () => {
                   <div>
                     <div className={styles.dropDownPlus}>
                       <Image
-                        src="/images/faq/plus_vertical.svg"
+                        src="/images/faq/plus_horizontal.svg"
                         alt="expand icon"
                         width={19}
                         height={3}
diff --git a/public/images/faq/plus_vertical.svg b/public/images/faq/plus_vertical.svg
deleted file mode 100644
index 1476bca..0000000
--- a/public/images/faq/plus_vertical.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<svg
-    width="19"
-    height="3"
-    viewBox="0 0 19 3"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
->
-  <path
-    d="M1.09241 1.41174H17.563"
-    stroke="white"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-  />
-</svg>
\ No newline at end of file

From 30873d3e5d62241645d117f9f353d647955ed66d Mon Sep 17 00:00:00 2001
From: michelleyeoh <michellew.yeoh@gmail.com>
Date: Sun, 9 Feb 2025 14:45:02 -0800
Subject: [PATCH 2/2] changed asset rotation

---
 .../_components/FAQ/AccordionFAQ.module.scss  |  6 +--
 .../(index-page)/_components/FAQ/FAQ.tsx      | 42 +++++++++----------
 .../_components/FAQ/Waterfall.tsx             |  8 ++--
 3 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/app/(pages)/(index-page)/_components/FAQ/AccordionFAQ.module.scss b/app/(pages)/(index-page)/_components/FAQ/AccordionFAQ.module.scss
index f99ff0b..f03f941 100644
--- a/app/(pages)/(index-page)/_components/FAQ/AccordionFAQ.module.scss
+++ b/app/(pages)/(index-page)/_components/FAQ/AccordionFAQ.module.scss
@@ -54,8 +54,8 @@
     
             .dropDownPlus{
                 position: absolute;
-                transform: rotate(90deg);
-                transition: transform 0.5s cubic-bezier(0, 0, 0, 1);
+                transform: rotate(-90deg);
+                transition: transform 0.3s cubic-bezier(0, 0, 0, 1);
                 
                 >img {
                     max-width: none;
@@ -75,7 +75,7 @@
 
             .dropDownPlus{
                 transform: rotate(0deg);
-                transition: transform 0.5s cubic-bezier(0, 0, 0, 1);
+                transition: transform 0.3s cubic-bezier(0, 0, 0, 1);
             }
         }
     }
diff --git a/app/(pages)/(index-page)/_components/FAQ/FAQ.tsx b/app/(pages)/(index-page)/_components/FAQ/FAQ.tsx
index 300fd40..d1bcbb5 100644
--- a/app/(pages)/(index-page)/_components/FAQ/FAQ.tsx
+++ b/app/(pages)/(index-page)/_components/FAQ/FAQ.tsx
@@ -11,14 +11,14 @@ export default function FAQ() {
       <div>
         <Image
           src="/images/faq/underwater_dark.svg"
-          alt="waterfall gradient"
+          alt="underwater dark layer"
           width={1000}
           height={10}
           className={style.underwater_dark}
         />
         <Image
           src="/images/faq/underwater_dark_mobile.svg"
-          alt="waterfall gradient"
+          alt="underwater dark layer"
           width={1000}
           height={10}
           className={style.underwater_dark_mobile}
@@ -26,7 +26,7 @@ export default function FAQ() {
         <div className={style.algae_level}>
           <Image
             src="/images/faq/algae_right.svg"
-            alt="waterfall gradient"
+            alt="algae"
             width={50}
             height={10}
             className={style.algae_1}
@@ -34,28 +34,28 @@ export default function FAQ() {
           {/* algae above being used for both mobile and desktop */}
           <Image
             src="/images/faq/algae_left.svg"
-            alt="waterfall gradient"
+            alt="algae"
             width={50}
             height={10}
             className={style.algae_2}
           />
           <Image
             src="/images/faq/algae_right.svg"
-            alt="waterfall gradient"
+            alt="algae"
             width={50}
             height={10}
             className={style.algae_3}
           />
           <Image
             src="/images/faq/underwater_medium.svg"
-            alt="waterfall gradient"
+            alt="underwater medium layer"
             width={1000}
             height={10}
             className={style.underwater_med}
           />
           <Image
             src="/images/faq/underwater_medium_mobile.svg"
-            alt="waterfall gradient"
+            alt="underwater medium layer"
             width={1000}
             height={10}
             className={style.underwater_med_mobile}
@@ -63,63 +63,63 @@ export default function FAQ() {
         </div>
         <Image
           src="/images/faq/grass_dark.svg"
-          alt="waterfall gradient"
+          alt="grass dark layer"
           width={1000}
           height={10}
           className={style.grass_dark}
         />
         <Image
           src="/images/faq/grass_dark_mobile.svg"
-          alt="waterfall gradient"
+          alt="grass dark layer"
           width={375}
           height={10}
           className={style.grass_dark_mobile}
         />
         <Image
           src="/images/faq/grass_light.svg"
-          alt="waterfall gradient"
+          alt="grass light layer"
           width={1000}
           height={10}
           className={style.grass_light}
         />
         <Image
           src="/images/faq/grass_light_mobile.svg"
-          alt="waterfall gradient"
+          alt="grass light layer"
           width={375}
           height={10}
           className={style.grass_light_mobile}
         />
         <Image
           src="/images/faq/grass_texture_2.svg"
-          alt="waterfall gradient"
+          alt="grass texture"
           width={150}
           height={10}
           className={style.grass_2}
         />
         <Image
           src="/images/faq/grass_texture_4.svg"
-          alt="waterfall gradient"
+          alt="grass texture"
           width={201}
           height={10}
           className={style.grass_4}
         />
         <Image
           src="/images/faq/grass_texture_5.svg"
-          alt="waterfall gradient"
+          alt="grass texture"
           width={230}
           height={10}
           className={style.grass_5}
         />
         <Image
           src="/images/faq/firefly_sm.svg"
-          alt="waterfall gradient"
+          alt="firefly"
           width={7}
           height={10}
           className={style.firefly_sm2}
         />
         <Image
           src="/images/faq/firefly_lg.svg"
-          alt="waterfall gradient"
+          alt="firefly"
           width={7}
           height={10}
           className={style.firefly_lg2}
@@ -130,14 +130,14 @@ export default function FAQ() {
           <div className={style.donation}>
             <Image
               src="/images/faq/grass_texture_single.svg"
-              alt="waterfall gradient"
+              alt="grass texture"
               width={150}
               height={10}
               className={style.grass_single}
             />
             <Image
               src="/images/faq/grass_texture_1.svg"
-              alt="waterfall gradient"
+              alt="grass texture"
               width={173}
               height={10}
               className={style.grass_1}
@@ -145,7 +145,7 @@ export default function FAQ() {
             <Donate />
             <Image
               src="/images/faq/grass_texture_3.svg"
-              alt="waterfall gradient"
+              alt="grass texture"
               width={201}
               height={10}
               className={style.grass_3}
@@ -154,14 +154,14 @@ export default function FAQ() {
           <div className={style.faq}>
             <Image
               src="/images/faq/firefly_sm.svg"
-              alt="waterfall gradient"
+              alt="firefly"
               width={7}
               height={10}
               className={style.firefly_sm1}
             />
             <Image
               src="/images/faq/firefly_lg.svg"
-              alt="waterfall gradient"
+              alt="firefly"
               width={7}
               height={10}
               className={style.firefly_lg1}
diff --git a/app/(pages)/(index-page)/_components/FAQ/Waterfall.tsx b/app/(pages)/(index-page)/_components/FAQ/Waterfall.tsx
index 4c7d8c2..ccf2a16 100644
--- a/app/(pages)/(index-page)/_components/FAQ/Waterfall.tsx
+++ b/app/(pages)/(index-page)/_components/FAQ/Waterfall.tsx
@@ -7,7 +7,7 @@ export default function Waterfall() {
     <div className={style.container}>
       <Image
         src="/images/faq/water_transition.svg"
-        alt="waterfall gradient"
+        alt="water transition"
         width={243}
         height={10}
         className={style.water_transition}
@@ -21,14 +21,14 @@ export default function Waterfall() {
       />
       <Image
         src="/images/faq/waterfall_sheen.svg"
-        alt="waterfall gradient"
+        alt="water sheen"
         width={180}
         height={10}
         className={style.water_sheen}
       />
       <Image
         src="/images/faq/waterfall_sheen.svg"
-        alt="waterfall gradient"
+        alt="water sheen"
         width={180}
         height={10}
         className={style.water_sheen}
@@ -36,7 +36,7 @@ export default function Waterfall() {
       <div className={style.water_base}>
         <Image
           src="/images/faq/waterfall_base.svg"
-          alt="waterfall gradient"
+          alt="waterfall cloud"
           width={423}
           height={10}
         />