Skip to content

Commit

Permalink
Faq assets (#56)
Browse files Browse the repository at this point in the history 
* asset transition

* changed asset rotation
  • Loading branch information
@michelleyeoh
michelleyeoh authored Feb 10, 2025
1 parent ab23c98 commit 90e8a3f
Show file tree
Hide file tree
Showing 5 changed files with 32 additions and 55 deletions.
20 changes: 6 additions & 14 deletions app/(pages)/(index-page)/_components/FAQ/AccordionFAQ.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
transform: rotate(90deg);
padding-left: 15%;

position: absolute;
transform: rotate(-90deg);
transition: transform 0.3s cubic-bezier(0, 0, 0, 1);
>img {
max-width: none;
}
Expand All @@ -79,11 +73,9 @@
justify-content: space-between;
align-items: center;

// .dropDownArrow {
// transform: rotate(180deg);
// }
.dropDownPlus{
visibility: hidden;
transform: rotate(0deg);
transition: transform 0.3s cubic-bezier(0, 0, 0, 1);
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion app/(pages)/(index-page)/_components/FAQ/AccordionFAQ.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
42 changes: 21 additions & 21 deletions app/(pages)/(index-page)/_components/FAQ/FAQ.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,115 +11,115 @@ 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}
/>
<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}
/>
{/* 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}
/>
</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}
Expand All @@ -130,22 +130,22 @@ 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}
/>
<Donate />
<Image
src="/images/faq/grass_texture_3.svg"
alt="waterfall gradient"
alt="grass texture"
width={201}
height={10}
className={style.grass_3}
Expand All @@ -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}
Expand Down
8 changes: 4 additions & 4 deletions app/(pages)/(index-page)/_components/FAQ/Waterfall.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -21,22 +21,22 @@ 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}
/>
<div className={style.water_base}>
<Image
src="/images/faq/waterfall_base.svg"
alt="waterfall gradient"
alt="waterfall cloud"
width={423}
height={10}
/>
Expand Down
15 changes: 0 additions & 15 deletions public/images/faq/plus_vertical.svg
View file

This file was deleted.

0 comments on commit 90e8a3f

Please sign in to comment.