diff --git a/public/images/devBcn-sponsorship.png b/public/images/devBcn-sponsorship.png new file mode 100644 index 00000000..7cb9ba3f Binary files /dev/null and b/public/images/devBcn-sponsorship.png differ diff --git a/public/index.html b/public/index.html index 5b2af503..ccbe2e38 100644 --- a/public/index.html +++ b/public/index.html @@ -3,7 +3,8 @@ - DevBcn 2024 - Barcelona Developers Conference in Spain — June 13-14 + DevBcn 2025 - Barcelona Developers Conference in Spain — July + 13-14 @@ -16,7 +17,7 @@ @@ -51,7 +52,7 @@ /> - + @@ -116,8 +117,8 @@ "@context": "https://schema.org", "@type": "Event", "name": "DevBcn — Barcelona Developers Conference", - "startDate": "2024-06-13", - "endDate": "2024-06-14", + "startDate": "2025-07-09", + "endDate": "2025-07-10", "eventAttendanceMode": "https://schema.org/OfflineEventAttendanceMode", "eventStatus": "https://schema.org/EventScheduled", "location": { @@ -136,48 +137,26 @@ "https://www.devbcn.com/images/devbcn24.png", "https://www.devbcn.com/images/2023/FaqsImage0.png" ], - "subEvent": { - "@context": "https://schema.org", - "@type": "Event", - "name": "Kubernetes Community Days - Spain", - "description": "One track dedicated to Kubernetes and Cloud computing, curated by the CNCF Foundation", - "startDate": "2024-06-13", - "endDate": "2024-06-14", - "eventAttendanceMode": "https://schema.org/OfflineEventAttendanceMode", - "eventStatus": "https://schema.org/EventScheduled", - "location": { - "@type": "Place", - "name": "La Farga", - "address": { - "@type": "PostalAddress", - "streetAddress": "carrer Barcelona, 2", - "addressLocality": "L'Hospitalet de Llobregat", - "postalCode": "08901", - "addressRegion": "Ba", - "addressCountry": "SP" - } - } - }, "performers": [], "description": "Multidisciplinary conference made for Developers and by Developers, to learn and share on the different modern software technologies used across the companies", "offers": [ { "@type": "Offer", - "url": "https://tickets.devbcn.com/event/devbcn-2024", + "url": "https://tickets.devbcn.com/event/devbcn-2025", "price": "250.00", "priceCurrency": "EUR", "availability": "https://schema.org/InStock", - "validFrom": "2024-02-01", - "validThrough": "2024-01-31" + "validFrom": "2025-02-01", + "validThrough": "2025-01-31" }, { "@type": "Offer", - "url": "https://tickets.devbcn.com/event/devbcn-2024", + "url": "https://tickets.devbcn.com/event/devbcn-2025", "price": "300.00", "priceCurrency": "EUR", "availability": "https://schema.org/InStock", - "validFrom": "2024-02-01", - "validThrough": "2024-02-29" + "validFrom": "2025-02-01", + "validThrough": "2025-02-29" } ], "organizer": { diff --git a/src/2023/Home/components/Faqs/Faqs.style.ts b/src/2023/Home/components/Faqs/Faqs.style.ts index 97f63359..b65a545e 100644 --- a/src/2023/Home/components/Faqs/Faqs.style.ts +++ b/src/2023/Home/components/Faqs/Faqs.style.ts @@ -1,7 +1,7 @@ import styled from "styled-components"; -import { Color } from "../../../../styles/colors"; -import { motion } from "framer-motion"; -import { BIG_BREAKPOINT } from "../../../../constants/BreakPoints"; +import {Color} from "../../../../styles/colors"; +import {motion} from "framer-motion"; +import {BIG_BREAKPOINT} from "../../../../constants/BreakPoints"; export type FaqCardType = { faq: { @@ -76,7 +76,9 @@ export const StyledFaqCard = styled.div` margin-bottom: 4rem; } `; -export const StyledFaqImageContainer = styled.div<{ padding: string }>` +export const StyledFaqImageContainer = styled.div.withConfig({ + shouldForwardProp: (prop) => !['padding'].includes(prop), +})<{ padding: string }>` position: relative; @media (min-width: 800px) { height: auto; diff --git a/src/2023/Home/components/Sponsors/Sponsors.style.ts b/src/2023/Home/components/Sponsors/Sponsors.style.ts index 3bcd263a..405495b1 100644 --- a/src/2023/Home/components/Sponsors/Sponsors.style.ts +++ b/src/2023/Home/components/Sponsors/Sponsors.style.ts @@ -3,7 +3,7 @@ import { BIG_BREAKPOINT, LARGE_BREAKPOINT, } from "../../../../constants/BreakPoints"; -import { motion } from "framer-motion"; +import {motion} from "framer-motion"; const SponsorMargin = 11; const sponsorMarginDesktop = 7; @@ -91,7 +91,9 @@ export const StyledSponsorLogosContainer = styled.div` @media (min-width: ${BIG_BREAKPOINT}px) { } `; -export const StyledLogos = styled.div<{ position?: "left" | "right" }>` +export const StyledLogos = styled.div.withConfig({ + shouldForwardProp: (prop) => !['position'].includes(prop), +})<{ position?: "left" | "right" }>` display: flex; width: 100%; @@ -232,7 +234,9 @@ export const StyledSponsorIconMicro = styled.img` } `; -export const StyledSponsorBadgeLeft = styled(motion.div)<{ +export const StyledSponsorBadgeLeft = styled(motion.div).withConfig({ + shouldForwardProp: (prop) => !['position'].includes(prop), +})<{ color: string; position: "left" | "right"; }>` 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 ( + +