Skip to content

Commit 1421a6e

Browse files
anyulledanyulled
committed
feat: add animations to Home and Faq components for enhanced UI/UX
1 parent 21f1217 commit 1421a6e

4 files changed

Lines changed: 226 additions & 85 deletions

File tree

‎src/views/Home/components/Faqs/Faqs.tsx‎

Lines changed: 131 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
1-
import {Color} from "../../../../styles/colors";
2-
import {FC, Suspense} from "react";
1+
import { Color } from "@styles/colors";
2+
import { FC, Suspense } from "react";
33
import FaqCard from "./components/FaqsCard";
4-
import LessThanIcon from "../../../../assets/images/LessThanBlueIcon.svg";
5-
import MoreThanIcon from "../../../../assets/images/LessThanBlueWhiteIcon.svg";
6-
import SectionWrapper
7-
from "../../../../components/SectionWrapper/SectionWrapper";
8-
import {faqsData} from "./FaqsData";
9-
import {useWindowSize} from "react-use";
10-
import {MOBILE_BREAKPOINT} from "../../../../constants/BreakPoints";
11-
import flickr from "../../../../assets/images/flickr.svg";
12-
import youtube from "../../../../assets/images/youtube.svg";
13-
import image1 from "../../../../assets/images/devbcn-1.jpg";
14-
import image2 from "../../../../assets/images/devbcn2.jpg";
15-
import Logo from "../../../../assets/images/logo.svg";
16-
import {StyledLoadingImage} from "../../../../components/Loading/Loading";
4+
import LessThanIcon from "@assets/images/LessThanBlueIcon.svg";
5+
import MoreThanIcon from "@assets/images/LessThanBlueWhiteIcon.svg";
6+
import SectionWrapper from "@components/SectionWrapper/SectionWrapper";
7+
import { motion } from "motion/react";
8+
import { faqsData } from "./FaqsData";
9+
import { useWindowSize } from "react-use";
10+
import { MOBILE_BREAKPOINT } from "@constants/BreakPoints";
11+
import flickr from "@assets/images/flickr.svg";
12+
import youtube from "@assets/images/youtube.svg";
13+
import image1 from "@assets/images/devbcn-1.jpg";
14+
import image2 from "@assets/images/devbcn2.jpg";
15+
import Logo from "@assets/images/logo.svg";
16+
import { StyledLoadingImage } from "@components/Loading/Loading";
1717
import {
1818
StyledFaqSection,
1919
StyledH2,
@@ -31,76 +31,150 @@ const Faqs: FC<React.PropsWithChildren<unknown>> = () => {
3131
return (
3232
<>
3333
<SectionWrapper color={Color.DARK_BLUE}>
34-
<StyledFaqSection>
34+
<StyledFaqSection
35+
initial={{ opacity: 0 }}
36+
animate={{ opacity: 1 }}
37+
transition={{ duration: 0.8 }}
38+
>
3539
{faqsData.map((faq, index) => (
3640
<FaqCard faq={faq} index={index} key={faq.id} />
3741
))}
3842
<div id="last-jbcnconf">&nbsp;</div>
39-
<div style={{ width: "60%" }}>
40-
<StyledH2>Check last DevBcn edition</StyledH2>
43+
<motion.div
44+
style={{ width: "60%" }}
45+
initial={{ opacity: 0, y: 50 }}
46+
animate={{ opacity: 1, y: 0 }}
47+
transition={{ duration: 0.8, delay: 0.3 }}
48+
>
49+
<motion.div
50+
initial={{ opacity: 0 }}
51+
animate={{ opacity: 1 }}
52+
transition={{ duration: 0.5, delay: 0.5 }}
53+
>
54+
<StyledH2>Check last DevBcn edition</StyledH2>
55+
</motion.div>
4156
<Suspense fallback={<StyledLoadingImage src={Logo} />}>
42-
<StyledImage src={image1} alt="DevBcn 2023" />
57+
<motion.div
58+
initial={{ opacity: 0, scale: 0.9 }}
59+
animate={{ opacity: 1, scale: 1 }}
60+
transition={{ duration: 0.6, delay: 0.7 }}
61+
whileHover={{ scale: 1.05 }}
62+
>
63+
<StyledImage src={image1} alt="DevBcn 2023" />
64+
</motion.div>
4365
</Suspense>
4466
<Suspense fallback={<StyledLoadingImage src={Logo} />}>
45-
<StyledImage src={image2} alt="DevBcn 2023" />
67+
<motion.div
68+
initial={{ opacity: 0, scale: 0.9 }}
69+
animate={{ opacity: 1, scale: 1 }}
70+
transition={{ duration: 0.6, delay: 0.9 }}
71+
whileHover={{ scale: 1.05 }}
72+
>
73+
<StyledImage src={image2} alt="DevBcn 2023" />
74+
</motion.div>
4675
</Suspense>
47-
<StyledP>
48-
DevBcn is the rebranding of the biggest Java & JVM conference in
49-
Spain, now including more technologies and tracks.
50-
</StyledP>
51-
<StyledP>
52-
Check for videos/photos andsummary of the DevBcn —{" "}
53-
<StyledSummaryLink
76+
<motion.div
77+
initial={{ opacity: 0 }}
78+
animate={{ opacity: 1 }}
79+
transition={{ duration: 0.5, delay: 1.1 }}
80+
>
81+
<StyledP>
82+
DevBcn is the rebranding of the biggest Java & JVM conference in
83+
Spain, now including more technologies and tracks.
84+
</StyledP>
85+
</motion.div>
86+
<motion.div
87+
initial={{ opacity: 0 }}
88+
animate={{ opacity: 1 }}
89+
transition={{ duration: 0.5, delay: 1.3 }}
90+
>
91+
<StyledP>
92+
Check for videos/photos andsummary of the DevBcn —{" "}
93+
<StyledSummaryLink
5494
href="https://youtu.be/k7iMIXtNKyo"
5595
rel="noreferrer"
5696
target="_blank"
57-
>
58-
59-
2024 edition —
60-
</StyledSummaryLink>
61-
<StyledSummaryLink
62-
href="https://youtu.be/6ZxsMUYBrSo"
97+
>
98+
2024 edition —
99+
</StyledSummaryLink>
100+
<StyledSummaryLink
101+
href="https://youtu.be/6ZxsMUYBrSo"
102+
rel="noreferrer"
103+
target="_blank"
104+
>
105+
{" "}
106+
2023 edition
107+
</StyledSummaryLink>
108+
</StyledP>
109+
</motion.div>
110+
<motion.div
111+
initial={{ opacity: 0, y: 20 }}
112+
animate={{ opacity: 1, y: 0 }}
113+
transition={{ duration: 0.5, delay: 1.5 }}
114+
style={{ display: "inline-block", marginRight: "10px" }}
115+
whileHover={{ scale: 1.2 }}
116+
>
117+
<a
118+
href="https://www.flickr.com/photos/devbcn/albums"
63119
rel="noreferrer"
64120
target="_blank"
65121
>
66-
67-
{" "}2023 edition
68-
</StyledSummaryLink>
69-
</StyledP>
70-
<a
71-
href="https://www.flickr.com/photos/devbcn/albums"
72-
rel="noreferrer"
73-
target="_blank"
122+
<img src={flickr} alt="flickr" height={32} width={32} />
123+
</a>
124+
</motion.div>
125+
<motion.div
126+
initial={{ opacity: 0, y: 20 }}
127+
animate={{ opacity: 1, y: 0 }}
128+
transition={{ duration: 0.5, delay: 1.7 }}
129+
style={{ display: "inline-block" }}
130+
whileHover={{ scale: 1.2 }}
74131
>
75-
<img src={flickr} alt="flickr" height={32} width={32} />
76-
</a>
77-
<a
78-
href="https://www.youtube.com/watch?v=Pv4kEMRE-kg&list=PLzJFNZtyAbyzmAAKzx1COeIBEGFgPA_og"
79-
rel="noreferrer"
80-
target="_blank"
81-
>
82-
<img src={youtube} alt="Youtube" height={32} width={32} />
83-
</a>
84-
</div>
132+
<a
133+
href="https://www.youtube.com/watch?v=Pv4kEMRE-kg&list=PLzJFNZtyAbyzmAAKzx1COeIBEGFgPA_og"
134+
rel="noreferrer"
135+
target="_blank"
136+
>
137+
<img src={youtube} alt="Youtube" height={32} width={32} />
138+
</a>
139+
</motion.div>
140+
</motion.div>
85141
{width > MOBILE_BREAKPOINT && (
86142
<>
87-
<StyleMoreIcon alt="More than — icon" src={MoreThanIcon} />
88-
<StyleLessIcon alt="Lees than — icon" src={LessThanIcon} />
143+
<motion.div
144+
initial={{ opacity: 0, x: 50 }}
145+
animate={{ opacity: 1, x: 0 }}
146+
transition={{ duration: 0.8, delay: 1.9 }}
147+
>
148+
<StyleMoreIcon alt="More than — icon" src={MoreThanIcon} />
149+
</motion.div>
150+
<motion.div
151+
initial={{ opacity: 0, x: -50 }}
152+
animate={{ opacity: 1, x: 0 }}
153+
transition={{ duration: 0.8, delay: 2.1 }}
154+
>
155+
<StyleLessIcon alt="Lees than — icon" src={LessThanIcon} />
156+
</motion.div>
89157
</>
90158
)}
91159
</StyledFaqSection>
92160
</SectionWrapper>
93161
<StyledWaveContainer>
94-
<svg
162+
<motion.svg
95163
viewBox="0 0 500 150"
96164
preserveAspectRatio="none"
97165
style={{ height: "100%", width: "100%" }}
166+
initial={{ opacity: 0 }}
167+
animate={{ opacity: 1 }}
168+
transition={{ duration: 1, delay: 0.5 }}
98169
>
99-
<path
170+
<motion.path
100171
d="M0.00,49.98 C335.50,45.89 358.63,106.09 501.41,81.42 L500.00,150.00 L0.00,150.00 Z"
101172
style={{ stroke: "none", fill: "#4798CA" }}
102-
></path>
103-
</svg>
173+
initial={{ pathLength: 0 }}
174+
animate={{ pathLength: 1 }}
175+
transition={{ duration: 1.5, delay: 0.8 }}
176+
></motion.path>
177+
</motion.svg>
104178
</StyledWaveContainer>
105179
</>
106180
);

‎src/views/Home/components/Faqs/components/FaqsCard.tsx‎

Lines changed: 38 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { FC, Suspense } from "react";
2-
import Logo from "../../../../../assets/images/logo.svg";
3-
import { StyledLoadingImage } from "../../../../../components/Loading/Loading";
2+
import Logo from "@assets/images/logo.svg";
3+
import { StyledLoadingImage } from "@components/Loading/Loading";
4+
import { motion } from "motion/react";
45
import {
56
FaqCardType,
67
StyledFaqCard,
@@ -15,18 +16,49 @@ const FaqCard: FC<React.PropsWithChildren<FaqCardType>> = ({ faq, index }) => {
1516
const isOdd = index % 2 === 0;
1617

1718
return (
18-
<StyledFaqCard className="faq-card">
19+
<StyledFaqCard
20+
className="faq-card"
21+
as={motion.div}
22+
initial={{ opacity: 0 }}
23+
animate={{ opacity: 1 }}
24+
transition={{ duration: 0.5 }}
25+
viewport={{ once: true }}
26+
whileInView={{ opacity: 1 }}
27+
>
1928
<StyledFaqImageContainer padding={isOdd ? "0 1rem 0 0" : "0 0 0 1rem"}>
2029
<Suspense fallback={<StyledLoadingImage src={Logo} />}>
2130
<StyledFaqImage
2231
alt={`DevBcn — image ${index}`}
2332
src={`/images/FaqsImage${index}.jpg`}
33+
initial={{ opacity: 0, x: isOdd ? -50 : 50 }}
34+
animate={{ opacity: 1, x: 0 }}
35+
transition={{ duration: 0.7, delay: 0.2 }}
36+
whileHover={{ scale: 1.05 }}
2437
/>
2538
</Suspense>
2639
</StyledFaqImageContainer>
27-
<StyledFaqInfo align={isOdd ? "flex-start" : "flex-end"}>
28-
<StyledFaqTitle>{faq.question}</StyledFaqTitle>
29-
<StyledFaqText>{faq.answer}</StyledFaqText>
40+
<StyledFaqInfo
41+
align={isOdd ? "flex-start" : "flex-end"}
42+
initial={{ opacity: 0, x: isOdd ? 50 : -50 }}
43+
animate={{ opacity: 1, x: 0 }}
44+
transition={{ duration: 0.7, delay: 0.4 }}
45+
>
46+
<StyledFaqTitle
47+
as={motion.h2}
48+
initial={{ opacity: 0 }}
49+
animate={{ opacity: 1 }}
50+
transition={{ duration: 0.5, delay: 0.6 }}
51+
>
52+
{faq.question}
53+
</StyledFaqTitle>
54+
<StyledFaqText
55+
as={motion.p}
56+
initial={{ opacity: 0 }}
57+
animate={{ opacity: 1 }}
58+
transition={{ duration: 0.5, delay: 0.8 }}
59+
>
60+
{faq.answer}
61+
</StyledFaqText>
3062
</StyledFaqInfo>
3163
</StyledFaqCard>
3264
);

0 commit comments

Comments
 (0)