Skip to content

Commit f343d65

Browse files
anyulledanyulled
committed
feat: Introduce year-based routing and 2025 event edition components, while updating existing home and navigation for the new structure and preparing for 2026 data
1 parent 8357c74 commit f343d65

48 files changed

Lines changed: 3263 additions & 779 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎src/2025/Home/HomeWrapper2025.tsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { BIG_BREAKPOINT } from "@constants/BreakPoints";
2+
import React, { FC } from "react";
3+
import Faqs from "./components/Faqs/Faqs";
4+
import Home from "./components/Home/Home";
5+
import Sponsors from "./components/Sponsors/Sponsors";
6+
import { styled } from "styled-components";
7+
import conferenceData from "@data/2025.json";
8+
import { useLocation } from "react-router";
9+
10+
import SpeakersCarousel from "@components/Swiper/SpeakersCarousel";
11+
import { ROUTE_2025_SPEAKERS } from "@constants/routes";
12+
import { useDocumentTitleUpdater } from "@hooks/useDocumentTitleUpdate";
13+
14+
const StyledContainer = styled.div`
15+
padding-bottom: 10rem;
16+
17+
@media only screen and (max-width: ${BIG_BREAKPOINT}px) {
18+
padding-bottom: 20rem;
19+
}
20+
`;
21+
22+
export const HomeWrapper2025: FC<React.PropsWithChildren<unknown>> = () => {
23+
const { hash } = useLocation();
24+
25+
React.useEffect(() => {
26+
if (hash != null && hash !== "") {
27+
const scroll = document.getElementById(hash.substring(1));
28+
scroll?.scrollIntoView();
29+
}
30+
}, [hash]);
31+
32+
useDocumentTitleUpdater("Home", conferenceData?.edition ?? "2025");
33+
34+
return (
35+
<StyledContainer id="home-wrapper">
36+
<Home />
37+
{conferenceData?.carrousel.enabled && (
38+
<SpeakersCarousel
39+
sessionizeUrl={"default"}
40+
speakersLink={ROUTE_2025_SPEAKERS}
41+
isEnabled={conferenceData.carrousel.enabled}
42+
/>
43+
)}
44+
<Sponsors />
45+
<Faqs />
46+
</StyledContainer>
47+
);
48+
};

‎src/2025/Home/components/ActionButtons/ActionButtons.tsx‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import { FC, useCallback } from "react";
2+
import data from "../../../../data/2025.json";
3+
import Button from "../../../../components/UI/Button";
4+
import { styled } from "styled-components";
5+
import { BIG_BREAKPOINT } from "../../../../constants/BreakPoints";
6+
import { gaEventTracker } from "../../../../components/analytics/Analytics";
7+
import { useDateInterval } from "../../../../hooks/useDateInterval";
8+
import { useUrlBuilder } from "../../../../services/urlBuilder";
9+
10+
const StyledActionDiv = styled.div`
11+
display: flex;
12+
text-align: center;
13+
14+
@media (max-width: ${BIG_BREAKPOINT}px) {
15+
flex-direction: column;
16+
width: 75%;
17+
}
18+
`;
19+
20+
const ActionButtons: FC<React.PropsWithChildren<unknown>> = () => {
21+
const { isTicketsDisabled, isSponsorDisabled, isCfpDisabled } =
22+
useDateInterval(new Date(), data);
23+
24+
const trackSponsorshipInfo = useCallback(() => {
25+
gaEventTracker("sponsorship", "sponsorship");
26+
}, []);
27+
28+
const trackTickets = useCallback(() => {
29+
gaEventTracker("ticket", "tickets");
30+
}, []);
31+
32+
const trackCFP = useCallback(() => {
33+
gaEventTracker("CFP", "CFP");
34+
}, []);
35+
36+
return (
37+
<StyledActionDiv>
38+
<Button
39+
onClick={trackTickets}
40+
text="🎟️ Buy Tickets"
41+
subtext="February 1st, 2025"
42+
link={useUrlBuilder("https://tickets.devbcn.com/event/devbcn-2025")}
43+
isDisabled={isTicketsDisabled}
44+
/>
45+
<Button
46+
onClick={trackCFP}
47+
text="📢 Call For Papers"
48+
subtext="January 1st, 2025"
49+
link={data.cfp.link}
50+
isDisabled={isCfpDisabled}
51+
isVisible={false}
52+
/>
53+
<Button
54+
onClick={trackSponsorshipInfo}
55+
text="🤝 Sponsorship"
56+
target="_self"
57+
link="/sponsorship"
58+
isDisabled={isSponsorDisabled}
59+
/>
60+
</StyledActionDiv>
61+
);
62+
};
63+
export default ActionButtons;

‎src/2025/Home/components/Faqs/Faqs.style.ts‎

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
import { keyframes, styled } from "styled-components";
2+
import { Color } from "@styles/colors";
3+
import { motion } from "motion/react";
4+
import { BIG_BREAKPOINT } from "@constants/BreakPoints";
5+
6+
const revealAnimation = keyframes`
7+
from {
8+
opacity: 0;
9+
translate: 0 100px;
10+
}
11+
50% {
12+
opacity: .5;
13+
}
14+
to {
15+
opacity: 1;
16+
translate: 0 0;
17+
}`;
18+
19+
export type FaqCardType = {
20+
faq: {
21+
question: string;
22+
answer: string;
23+
};
24+
index: number;
25+
};
26+
export const StyledFaqSection = styled(motion.section)`
27+
display: flex;
28+
flex-direction: column;
29+
justify-content: center;
30+
align-items: center;
31+
padding: 3rem 2rem;
32+
position: relative;
33+
@media (min-width: 650px) {
34+
padding: 3rem 5rem;
35+
}
36+
`;
37+
export const StyledWaveContainer = styled.div`
38+
background: ${Color.DARK_BLUE};
39+
overflow-y: hidden;
40+
height: 5rem;
41+
width: 100%;
42+
`;
43+
export const StyleMoreIcon = styled.img`
44+
position: absolute;
45+
right: 0;
46+
top: 5rem;
47+
height: 5rem;
48+
@media (min-width: 800px) {
49+
height: 10rem;
50+
}
51+
`;
52+
export const StyleLessIcon = styled.img`
53+
position: absolute;
54+
left: -1rem;
55+
top: 50%;
56+
height: 5rem;
57+
@media (min-width: 800px) {
58+
height: 10rem;
59+
}
60+
`;
61+
export const StyledImage = styled.img`
62+
margin: 3px;
63+
padding: 5px;
64+
aspect-ratio: 1.5;
65+
border: 1px solid ${Color.YELLOW};
66+
border-radius: 100% 0 100% 0 / 15% 89% 11% 85%;
67+
animation: linear ${revealAnimation} both;
68+
animation-timeline: view();
69+
animation-range: entry 5% cover 30%;
70+
71+
@media (max-width: ${BIG_BREAKPOINT}px) {
72+
width: 100%;
73+
}
74+
`;
75+
export const StyledH2 = styled.h2`
76+
color: white;
77+
margin-bottom: 10px;
78+
`;
79+
export const StyledP = styled.p`
80+
color: white;
81+
margin-bottom: 10px;
82+
`;
83+
84+
export const StyledFaqCard = styled.div`
85+
display: flex;
86+
align-items: center;
87+
flex-direction: row;
88+
width: 90%;
89+
margin-bottom: 3rem;
90+
@media (min-width: 800px) {
91+
align-items: flex-start;
92+
max-width: 900px;
93+
margin-bottom: 4rem;
94+
}
95+
`;
96+
export const StyledFaqImageContainer = styled.div.withConfig({
97+
shouldForwardProp: (prop) => !["padding"].includes(prop),
98+
})<{ padding: string }>`
99+
position: relative;
100+
@media (min-width: 800px) {
101+
height: auto;
102+
103+
padding: ${({ padding }) => {
104+
return padding;
105+
}};
106+
}
107+
`;
108+
export const StyledFaqImage = styled(motion.img)`
109+
border: 1px solid ${Color.YELLOW};
110+
display: block;
111+
height: 242px;
112+
margin: 3px;
113+
padding: 5px;
114+
width: 360px;
115+
border-radius: 92% 8% 90% 10% / 9% 90% 10% 91%;
116+
animation: linear ${revealAnimation} both;
117+
animation-timeline: view();
118+
animation-range: entry 5% cover 30%;
119+
120+
@media (max-width: ${BIG_BREAKPOINT}px) {
121+
display: none;
122+
}
123+
`;
124+
export const StyledFaqInfo = styled(motion.div)<{ align: string }>`
125+
display: flex;
126+
flex-direction: column;
127+
color: ${Color.WHITE};
128+
@media (min-width: 800px) {
129+
width: 60%;
130+
align-items: ${({ align }) => {
131+
return align;
132+
}};
133+
}
134+
`;
135+
export const StyledFaqTitle = styled.h2`
136+
padding-top: 1rem;
137+
color: ${Color.YELLOW};
138+
font-size: 1.3em;
139+
@media (min-width: 800px) {
140+
text-align: left;
141+
padding-top: unset;
142+
}
143+
`;
144+
export const StyledFaqText = styled.p`
145+
padding: 0.5rem 2rem;
146+
text-align: left;
147+
@media (min-width: 800px) {
148+
hyphens: auto;
149+
word-wrap: break-word;
150+
}
151+
152+
ul {
153+
margin: 0.5rem 2rem;
154+
}
155+
`;
156+
export const StyledSummaryLink = styled.a`
157+
color: ${Color.LIGHT_BLUE};
158+
text-decoration: none !important;
159+
transition: all 0.25s ease-in-out;
160+
161+
&:hover {
162+
font-weight: bold;
163+
text-decoration: none;
164+
color: ${Color.YELLOW};
165+
}
166+
167+
&:visited {
168+
color: ${Color.MAGENTA};
169+
text-decoration: none;
170+
}
171+
`;

0 commit comments

Comments
 (0)