From 405040368e0865d1d52a0c322caa764622ee853a Mon Sep 17 00:00:00 2001 From: Anyul Rivas Date: Tue, 29 Oct 2024 18:09:37 +0100 Subject: [PATCH 01/29] feat: 2025 edition --- src/2024/Home/DateUtil.ts | 16 + src/2024/Home/Home.tsx | 141 +++ src/2024/Home/Style.Home.tsx | 179 ++++ src/2024/Home/components/ActionButtons.tsx | 67 ++ src/2024/Home/components/TimeCountdown.tsx | 103 ++ src/2024/HomeWrapper2024.tsx | 44 + src/2024/Navigation/NavigationData.ts | 44 + src/2024/Speakers/SpeakerInformation.test.tsx | 19 + src/2024/Speakers/SpeakerInformation.tsx | 167 ++++ src/2024/Speakers/Speakers.style.ts | 91 ++ src/2024/Speakers/Speakers2024.tsx | 176 ++++ src/2024/Speakers/UseFetchSpeakers.test.tsx | 144 +++ src/2024/Speakers/UseFetchSpeakers.ts | 33 + src/2024/SpeakersCarousel/SpeakerSwiper.tsx | 107 +++ .../SpeakersCarousel/SpeakersCarousel.scss | 29 + .../SpeakersCarousel/SpeakersCarousel.tsx | 106 +++ src/2024/Sponsors/BasicSponsor.tsx | 103 ++ src/2024/Sponsors/Communities.tsx | 98 ++ src/2024/Sponsors/MediaPartners.tsx | 98 ++ src/2024/Sponsors/PremiumSponsors.tsx | 105 +++ src/2024/Sponsors/RegularSponsors.tsx | 101 ++ src/2024/Sponsors/SponsorBadge.tsx | 36 + src/2024/Sponsors/Sponsors.style.ts | 296 ++++++ src/2024/Sponsors/Sponsors.tsx | 63 ++ src/2024/Sponsors/SponsorsData.ts | 179 ++++ src/2024/Sponsors/Supporters.test.tsx | 72 ++ src/2024/Sponsors/Supporters.tsx | 106 +++ src/2024/Sponsors/TopSponsors.tsx | 97 ++ src/2024/Talks/LiveView.test.tsx | 17 + src/2024/Talks/LiveView.tsx | 65 ++ src/2024/Talks/Talks.test.tsx | 71 ++ src/2024/Talks/Talks2024.tsx | 145 +++ src/2024/Talks/UseFetchTalks.ts | 134 +++ src/2024/Talks/useFetchTalks.test.tsx | 425 +++++++++ src/App.tsx | 888 ++++++++++-------- src/components/Navigation/Navigation.tsx | 253 ++--- src/components/Navigation/NavigationData.ts | 18 +- src/components/UI/Button.tsx | 8 +- src/constants/routes.ts | 19 + src/data/2023.json | 4 +- src/data/2024.json | 6 +- src/data/2025.json | 43 + src/views/Home/HomeWrapper.tsx | 10 +- src/views/Home/UseEventEdition.tsx | 6 +- .../ActionButtons/ActionButtons.tsx | 8 +- src/views/Home/components/Faqs/Faqs.tsx | 34 +- src/views/Home/components/Home/Home.tsx | 245 ++--- .../SpeakersCarousel/SpeakerSwiper.tsx | 16 +- .../Home/components/Sponsors/SponsorsData.ts | 168 +--- 49 files changed, 4568 insertions(+), 835 deletions(-) create mode 100644 src/2024/Home/DateUtil.ts create mode 100644 src/2024/Home/Home.tsx create mode 100644 src/2024/Home/Style.Home.tsx create mode 100644 src/2024/Home/components/ActionButtons.tsx create mode 100644 src/2024/Home/components/TimeCountdown.tsx create mode 100644 src/2024/HomeWrapper2024.tsx create mode 100644 src/2024/Navigation/NavigationData.ts create mode 100644 src/2024/Speakers/SpeakerInformation.test.tsx create mode 100644 src/2024/Speakers/SpeakerInformation.tsx create mode 100644 src/2024/Speakers/Speakers.style.ts create mode 100644 src/2024/Speakers/Speakers2024.tsx create mode 100644 src/2024/Speakers/UseFetchSpeakers.test.tsx create mode 100644 src/2024/Speakers/UseFetchSpeakers.ts create mode 100644 src/2024/SpeakersCarousel/SpeakerSwiper.tsx create mode 100644 src/2024/SpeakersCarousel/SpeakersCarousel.scss create mode 100644 src/2024/SpeakersCarousel/SpeakersCarousel.tsx create mode 100644 src/2024/Sponsors/BasicSponsor.tsx create mode 100644 src/2024/Sponsors/Communities.tsx create mode 100644 src/2024/Sponsors/MediaPartners.tsx create mode 100644 src/2024/Sponsors/PremiumSponsors.tsx create mode 100644 src/2024/Sponsors/RegularSponsors.tsx create mode 100644 src/2024/Sponsors/SponsorBadge.tsx create mode 100644 src/2024/Sponsors/Sponsors.style.ts create mode 100644 src/2024/Sponsors/Sponsors.tsx create mode 100644 src/2024/Sponsors/SponsorsData.ts create mode 100644 src/2024/Sponsors/Supporters.test.tsx create mode 100644 src/2024/Sponsors/Supporters.tsx create mode 100644 src/2024/Sponsors/TopSponsors.tsx create mode 100644 src/2024/Talks/LiveView.test.tsx create mode 100644 src/2024/Talks/LiveView.tsx create mode 100644 src/2024/Talks/Talks.test.tsx create mode 100644 src/2024/Talks/Talks2024.tsx create mode 100644 src/2024/Talks/UseFetchTalks.ts create mode 100644 src/2024/Talks/useFetchTalks.test.tsx create mode 100644 src/data/2025.json diff --git a/src/2024/Home/DateUtil.ts b/src/2024/Home/DateUtil.ts new file mode 100644 index 00000000..75ce2296 --- /dev/null +++ b/src/2024/Home/DateUtil.ts @@ -0,0 +1,16 @@ +import {format} from "date-fns"; + +export function formatDateRange(startDate: Date, endDate: Date): string { + const sameMonthAndYear = + startDate.getMonth() === endDate.getMonth() && + startDate.getFullYear() === endDate.getFullYear(); + + if (sameMonthAndYear) { + return `${format(startDate, "MMMM do")} - ${format(endDate, "do, yyyy")}`; + } else { + return `${format(startDate, "MMMM do, yyyy")} - ${format( + endDate, + "MMMM do, yyyy", + )}`; + } +} diff --git a/src/2024/Home/Home.tsx b/src/2024/Home/Home.tsx new file mode 100644 index 00000000..5fbf4581 --- /dev/null +++ b/src/2024/Home/Home.tsx @@ -0,0 +1,141 @@ +import Countdown from "react-countdown"; +import React, {FC} from "react"; +import LessThanIcon from "../../assets/images/MoreThanBlueWhiteIcon.svg"; +import TimeCountDown from "./components/TimeCountdown"; +import {useWindowSize} from "react-use"; +import { + StyledBlueSlash, + StyledBottomSlash, + StyledDevBcnLogo, + StyledGreenSlash, + StyledHomeImage, + StyledKcdLogo, + StyledLessThan, + StyledLogoDiv, + StyledPlusSign, + StyledSubtitle, + StyledTitle, + StyledTitleContainer, + StyledTopSlash, + StyleHomeContainer, +} from "./Style.Home"; +import {formatDateRange} from "./DateUtil"; +import {Link} from "react-router-dom"; +import data from "../../data/2024.json"; +import SectionWrapper from "../../components/SectionWrapper/SectionWrapper"; +import {Color} from "../../styles/colors"; + +import ActionButtons + from "../../views/Home/components/ActionButtons/ActionButtons"; +import InfoButtons from "../../views/Home/components/InfoButtons/InfoButtons"; +import {BIGGER_BREAKPOINT} from "../../constants/BreakPoints"; + +const Home: FC> = () => { + const {width} = useWindowSize(); + + return ( + + + + + + + + + + + + The Barcelona Developers Conference {data?.edition} + + + Former{" "} + + JBCNConf + {" "} + + + Multidisciplinary conference made for Developers and + by + Developers, to learn and share on the different + modern software + technologies used across the companies + + + + Past events: 2023 + edition + + + + + + {data?.startDay && + data.endDay && + formatDateRange( + new Date(data.startDay), + new Date(data.endDay), + )} + + + La Farga, Hospitalet, Barcelona + + + + + {data?.trackNumber} tracks with the following + topics:
+ {data?.tracks} + + + {data.showCountdown && ( + + )} + {data?.actionButtons && } + {data?.showInfoButtons && } + + {width > BIGGER_BREAKPOINT && ( + + )} + {width > BIGGER_BREAKPOINT && ( + + + / / / / / / / / / / / / / / / / / / / / / / / / + / / / / / / / / + / / / / / / / / / / / / / / / / / / / / / / / / + / / / / / / / / + / /{" "} + + + )} + + {width > BIGGER_BREAKPOINT && ( + + / / / / / / / / / / / / / / / / / / / / / / / / + / / / / / / / / + / / / / / / / / / / / / / / / / / / / / / / / / + / / / / / / / / + / /{" "} + + )} + + + + + ); +}; + +export default Home; diff --git a/src/2024/Home/Style.Home.tsx b/src/2024/Home/Style.Home.tsx new file mode 100644 index 00000000..180a00da --- /dev/null +++ b/src/2024/Home/Style.Home.tsx @@ -0,0 +1,179 @@ +import styled from "styled-components"; +import {motion} from "framer-motion"; +import {Color} from "../../styles/colors"; +import {BIG_BREAKPOINT, BIGGER_BREAKPOINT} from "../../constants/BreakPoints"; + +export const StyledHomeImage = styled.div` + padding: 70px 0 40px; + background: linear-gradient(-45deg, ${Color.LIGHT_BLUE}, ${Color.MAGENTA}, ${Color.DARK_BLUE}, ${Color.GREEN}); + background-size: 400% 400%; + animation: gradient 15s ease infinite; +} + +@keyframes gradient { + 0% { + background-position: 0 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0 50%; + } +`; +export const StyleHomeContainer = styled.div` + position: relative; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +`; + +export const StyledTitleContainer = styled.div` + background-color: ${(props) => props.color ?? Color.DARK_BLUE}; + border-radius: 10px; + width: 70%; + margin-bottom: 1rem; + padding: 10px 5px; + + @media (max-width: ${BIG_BREAKPOINT}px) { + width: 80%; + } +`; + +export const StyledTitle = styled.h1` + padding: 0.5rem 1rem; + color: ${Color.WHITE}; + font-family: "Square 721 Regular", sans-serif; +`; + +export const StyledSubtitle = styled.h2` + color: ${(props) => props.color ?? Color.WHITE}; + font-family: "DejaVu Sans ExtraLight", sans-serif; + font-size: 1.25rem; + text-shadow: 1px 1px 1px black; + padding: 0.25rem; + + a { + text-decoration: none; + color: ${Color.LIGHT_BLUE}; + } +`; + +export const StyledLessThan = styled(motion.img)` + height: 7rem; + position: absolute; + top: 50%; + left: 5rem; + animation: StyledLessThanAnimation 6s infinite linear; + + @keyframes StyledLessThanAnimation { + 0% { + transform: rotate(0deg) translate(-20px) rotate(0deg); + } + 80% { + transform: rotate(360deg) translate(-20px) rotate(-360deg); + } + 90% { + transform: translate(-5px); + } + 100% { + transform: translate(-20px); + } + } +`; + +export const StyledBottomSlash = styled(motion.div)` + position: absolute; + bottom: 0; + left: 0; + width: 40%; + height: 2rem; +`; + +export const StyledTopSlash = styled(motion.div)` + position: absolute; + bottom: 25%; + right: 0; + height: 2rem; + width: 25%; +`; + +export const StyledGreenSlash = styled(motion.p)` + font-family: "Square 721 Regular", sans-serif; + color: ${Color.DARK_BLUE}; + font-size: 2rem; + overflow-y: hidden; + height: 100%; +`; + +export const StyledBlueSlash = styled(motion.p)` + font-family: "Square 721 Regular", sans-serif; + color: ${Color.BLUE}; + font-size: 2rem; + overflow-y: hidden; + height: 100%; +`; +export const StyledDevBcnLogo = styled.img` + margin: 20px; + height: 20rem; + aspect-ratio: 800/327; + transition: height 0.2s ease-in-out; + @media (max-width: ${BIGGER_BREAKPOINT}px) { + height: 15rem; + } + @media (max-width: ${BIG_BREAKPOINT}px) { + height: 8rem; + } +`; +export const StyledKcdLogo = styled.img` + margin-top: 4em; + margin-left: 2em; + height: 13rem; + transition: height 0.2s ease-in-out; + aspect-ratio: 800/327; + @media (max-width: ${BIGGER_BREAKPOINT}px) { + height: 12rem; + margin: 0; + } + @media (max-width: ${BIG_BREAKPOINT}px) { + margin-top: 0; + margin-left: 2.5em; + margin-right: 2.5em; + padding: 1em; + height: 10rem; + } +`; +export const StyledPlusSign = styled.span` + color: white; + font-size: 5em; + display: block; + padding-top: 1.5em; + text-shadow: 3px 3px #000; + transition: height 0.2s ease-in-out; + @media (max-width: ${BIGGER_BREAKPOINT}px) { + margin: 0; + padding: 0; + font-size: 3em; + } + @media (max-width: ${BIG_BREAKPOINT}px) { + font-size: 1.5rem; + padding: 0; + margin: 0; + } +`; +export const StyledLogoDiv = styled.div` + padding-top: 4rem; + padding-bottom: 2rem; + display: flex; + + @media (max-width: ${BIGGER_BREAKPOINT}px) { + flex-direction: column; + } + + @media (max-width: ${BIG_BREAKPOINT}px) { + flex-direction: column; + } +`; diff --git a/src/2024/Home/components/ActionButtons.tsx b/src/2024/Home/components/ActionButtons.tsx new file mode 100644 index 00000000..c4489d2c --- /dev/null +++ b/src/2024/Home/components/ActionButtons.tsx @@ -0,0 +1,67 @@ +import {FC, useCallback} from "react"; +import data from "../../../data/2024.json"; +import styled from "styled-components"; +import {BIG_BREAKPOINT} from "../../../constants/BreakPoints"; +import {gaEventTracker} from "../../../components/analytics/Analytics"; +import Button from "../../../components/UI/Button"; + +const StyledActionDiv = styled.div` + display: flex; + text-align: center; + + @media (max-width: ${BIG_BREAKPOINT}px) { + flex-direction: column; + width: 75%; + } +`; + +const ActionButtons: FC> = () => { + const ticketStartDay = new Date(data.tickets.startDay); + const ticketEndDay = new Date(data.tickets.endDay); + const CFPStartDay = new Date(data.cfp.startDay); + const CFPEndDay = new Date(data.cfp.endDay); + const sponsorshipStartDay = new Date(data.sponsors.startDate); + const sponsorshipEndDay = new Date(data.sponsors.endDate); + const today = new Date(); + + const isBetween = (startDay: Date, endDay: Date): boolean => + startDay < new Date() && endDay > today; + + const trackSponsorshipInfo = useCallback(() => { + gaEventTracker("sponsorship", "sponsorship"); + }, []); + + const trackTickets = useCallback(() => { + gaEventTracker("ticket", "tickets"); + }, []); + + const trackCFP = useCallback(() => { + gaEventTracker("CFP", "CFP"); + }, []); + + return ( + +