From 482881e03e2c4872d0fb7d60962c8bd232e14739 Mon Sep 17 00:00:00 2001 From: Luis Gustavo Date: Mon, 12 Feb 2024 21:01:13 -0300 Subject: [PATCH 01/17] images --- public/iwd-2024/circle-iwd.png | Bin 0 -> 4730 bytes public/iwd-2024/speakers-illustration.png | Bin 0 -> 4201 bytes 2 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 public/iwd-2024/circle-iwd.png create mode 100644 public/iwd-2024/speakers-illustration.png diff --git a/public/iwd-2024/circle-iwd.png b/public/iwd-2024/circle-iwd.png new file mode 100644 index 0000000000000000000000000000000000000000..708a22ce90c4c77beb75b84bc208e7f559eedb7e GIT binary patch literal 4730 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 IM6N<$g4xFf2><{9 literal 0 HcmV?d00001 diff --git a/public/iwd-2024/speakers-illustration.png b/public/iwd-2024/speakers-illustration.png new file mode 100644 index 0000000000000000000000000000000000000000..081ec620366a7d1852ddd054060dc30fa6952db5 GIT binary patch literal 4201 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 Bjbs1- literal 0 HcmV?d00001 From 9430ecdcdfb79fdf7b55be45f2007e4e1b3e8088 Mon Sep 17 00:00:00 2001 From: Luis Gustavo Date: Mon, 12 Feb 2024 21:04:56 -0300 Subject: [PATCH 02/17] colors --- src/styles/globals.css | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/styles/globals.css b/src/styles/globals.css index f373a1c..e605502 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -6,12 +6,15 @@ --blue2: #4285F4; --red: #CB4538; --orange: #E59F38; - --white: #fcfcfc; + --white: #fefefe; --black: #1A1D1C; - --green: #09ccb1; + --green: #00b698; + --blue-light: #E4F4FF; --soft-blue: #46b3dc; --soft-blue2: #00AAE9; - --soft-green: #01F4C6; + --soft-blue3: #95D4FF; + --soft-green: #00df9d; + --soft-green-light: #00d193; --pink: #E41AE1; --primary-text: #393D40; --secondary-text: #848484; From f792dc43f5a0ba46e509eff72aa30da8eb6f587f Mon Sep 17 00:00:00 2001 From: Luis Gustavo Date: Mon, 12 Feb 2024 21:08:03 -0300 Subject: [PATCH 03/17] speakers section template --- .../SpeakerSection.module.css | 1 + .../{speakers-section.tsx => index.tsx} | 15 ++----- .../speakers-section/speaker-card.tsx | 21 +++------ .../styles/SpeakerSection.module.css | 43 ------------------- src/pages/index.tsx | 10 ++--- 5 files changed, 15 insertions(+), 75 deletions(-) create mode 100644 src/components/iwd-2023/speakers-section/SpeakerSection.module.css rename src/components/iwd-2023/speakers-section/{speakers-section.tsx => index.tsx} (50%) delete mode 100644 src/components/iwd-2023/speakers-section/styles/SpeakerSection.module.css diff --git a/src/components/iwd-2023/speakers-section/SpeakerSection.module.css b/src/components/iwd-2023/speakers-section/SpeakerSection.module.css new file mode 100644 index 0000000..6fd8ca9 --- /dev/null +++ b/src/components/iwd-2023/speakers-section/SpeakerSection.module.css @@ -0,0 +1 @@ +.Container {} diff --git a/src/components/iwd-2023/speakers-section/speakers-section.tsx b/src/components/iwd-2023/speakers-section/index.tsx similarity index 50% rename from src/components/iwd-2023/speakers-section/speakers-section.tsx rename to src/components/iwd-2023/speakers-section/index.tsx index ef33d98..cdc9663 100644 --- a/src/components/iwd-2023/speakers-section/speakers-section.tsx +++ b/src/components/iwd-2023/speakers-section/index.tsx @@ -8,22 +8,15 @@ interface SpeakersSectionProps { speakers: Array, } -const SpeakerSection: React.FC = ({ speakers }) => { +const SpeakerSection = ({ speakers }: SpeakersSectionProps) => { return (
-
- -

Palestrantes

-
-
- {speakers && speakers.map((speaker) => { - return + - })} -
+ )}
); }; diff --git a/src/components/iwd-2023/speakers-section/speaker-card.tsx b/src/components/iwd-2023/speakers-section/speaker-card.tsx index 348a76d..6c6958b 100644 --- a/src/components/iwd-2023/speakers-section/speaker-card.tsx +++ b/src/components/iwd-2023/speakers-section/speaker-card.tsx @@ -1,23 +1,14 @@ import { Speaker } from "models/speaker"; import React from "react"; -import styles from "./styles/SpeakerCard.module.css"; -const SpeakerCard: React.FC<{ +interface SpeakerCardProps { speaker: Speaker; -}> = ({ speaker }) => { +} + +const SpeakerCard = ({ speaker }: SpeakerCardProps) => { return ( -
-
-
- - -
-

{speaker.name}

- {/*

{speaker?.socialMedia?.instagram}

*/} - {(speaker.company) ?

{speaker.companyTitle} @ {speaker.company}

: <>} - {(speaker.title) ?

{speaker.title}

: <>} -

{speaker.miniBio}

-
+
+ {speaker.id}
); }; diff --git a/src/components/iwd-2023/speakers-section/styles/SpeakerSection.module.css b/src/components/iwd-2023/speakers-section/styles/SpeakerSection.module.css deleted file mode 100644 index e98f83b..0000000 --- a/src/components/iwd-2023/speakers-section/styles/SpeakerSection.module.css +++ /dev/null @@ -1,43 +0,0 @@ -.Container { - margin: 0; - padding: 0; - background: linear-gradient(180deg, - rgba(62, 131, 252, 0.2) 0%, - rgba(255, 255, 255, 0) 100%); -} - -.Header { - padding-top: 30px; - display: flex; - justify-content: center; - align-items: center; -} - -.ConectorImage { - left: 0; - width: 400px; - position: absolute; -} - -.Body { - margin-top: 60px; - background-color: transparent; - display: flex; - justify-content: center; - display: grid; - grid-template-columns: repeat(3, 1fr); - column-gap: 40px; - row-gap: 40px; - padding: 0 100px; -} - -@media only screen and (max-width: 580px) { - .Body { - grid-template-columns: 1fr; - padding: 0 20px; - } - - .ConectorImage { - width: 0px; - } -} \ No newline at end of file diff --git a/src/pages/index.tsx b/src/pages/index.tsx index dd49520..eb76ea3 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -2,21 +2,16 @@ import React, { useEffect } from "react"; import BaseLayout from "../layouts/base-layout"; import { Speaker } from "models/speaker"; import { Schedule } from "models/schedule"; -import { getSponsors } from 'back-features/sponsors'; -import { getSpeaker } from 'back-features/speakers'; import { SponsorLevel } from "models/sponsor-level"; import styles from "styles/Home.module.css"; import HomeHeader from "../components/headers/iwd/home-header"; -import SpeakerSection from "components/iwd-2023/speakers-section/speakers-section"; -import SponsorsSection from "components/sponsors-section/sponsors-section"; -import CountdownTimer from "components/iwd-2023/countdown/countdown-timer"; +import SpeakerSection from "components/iwd-2023/speakers-section"; import OlderEvenstsSection from "components/iwd-2023/older-events-section/older-events-section"; import ErrorBoundary from '../components/error-boundary'; import { HeroSection } from "components/hero-section/iwd-2024"; -import { EventLocationSection } from "components/devfest-triangulo-2023/event-location"; // https://alvarotrigo.com/blog/css-animations-scroll/ @@ -65,6 +60,9 @@ const Home = ({ speakers, sponsors, schedule }: HomePageProps) => { +
+ +
{/*
From f4c7f3a256b06292c56694a68677d724cfa672d8 Mon Sep 17 00:00:00 2001 From: Luis Gustavo Date: Tue, 13 Feb 2024 19:38:08 -0300 Subject: [PATCH 04/17] speakers header --- .../SpeakerSection.module.css | 1 - .../iwd-2023/speakers-section/index.tsx | 23 ------------ .../SpeakerSection.module.css | 26 ++++++++++++++ .../iwd-2024/speakers-section/index.tsx | 35 +++++++++++++++++++ .../speakers-section/speaker-card.tsx | 0 src/pages/index.tsx | 7 ++-- 6 files changed, 63 insertions(+), 29 deletions(-) delete mode 100644 src/components/iwd-2023/speakers-section/SpeakerSection.module.css delete mode 100644 src/components/iwd-2023/speakers-section/index.tsx create mode 100644 src/components/iwd-2024/speakers-section/SpeakerSection.module.css create mode 100644 src/components/iwd-2024/speakers-section/index.tsx rename src/components/{iwd-2023 => iwd-2024}/speakers-section/speaker-card.tsx (100%) diff --git a/src/components/iwd-2023/speakers-section/SpeakerSection.module.css b/src/components/iwd-2023/speakers-section/SpeakerSection.module.css deleted file mode 100644 index 6fd8ca9..0000000 --- a/src/components/iwd-2023/speakers-section/SpeakerSection.module.css +++ /dev/null @@ -1 +0,0 @@ -.Container {} diff --git a/src/components/iwd-2023/speakers-section/index.tsx b/src/components/iwd-2023/speakers-section/index.tsx deleted file mode 100644 index cdc9663..0000000 --- a/src/components/iwd-2023/speakers-section/index.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { Speaker } from "models/speaker"; -import React from "react"; -import styles from "./SpeakerSection.module.css"; -import SpeakerCard from "./speaker-card"; - - -interface SpeakersSectionProps { - speakers: Array, -} - -const SpeakerSection = ({ speakers }: SpeakersSectionProps) => { - return ( -
- {speakers.map((speaker) => - - )} -
- ); -}; -export default SpeakerSection; diff --git a/src/components/iwd-2024/speakers-section/SpeakerSection.module.css b/src/components/iwd-2024/speakers-section/SpeakerSection.module.css new file mode 100644 index 0000000..a3325b5 --- /dev/null +++ b/src/components/iwd-2024/speakers-section/SpeakerSection.module.css @@ -0,0 +1,26 @@ +.Container { + margin-top: 6.25rem; +} + +.Header { + align-items: center; + gap: 2.5rem; + margin-bottom: 2.5rem; + padding: 0 0.5rem; +} + +.Title { + background-color: var(--soft-blue2); + border-radius: 7px; + color: var(--white); + font-family: "Roboto Mono", monospace; + font-size: 2.5rem; + font-weight: medium; + padding: 0 1rem; + width: min-content; +} + +.HeaderText { + font-family: "Space Grotesk", sans-serif; + font-size: 1.125rem; +} \ No newline at end of file diff --git a/src/components/iwd-2024/speakers-section/index.tsx b/src/components/iwd-2024/speakers-section/index.tsx new file mode 100644 index 0000000..2080352 --- /dev/null +++ b/src/components/iwd-2024/speakers-section/index.tsx @@ -0,0 +1,35 @@ +import { Speaker } from "models/speaker"; +import React from "react"; +import styles from "./SpeakerSection.module.css"; +import SpeakerCard from "./speaker-card"; +import { Col, Container, Row } from "reactstrap"; + +interface SpeakersSectionProps { + speakers: Array, +} + +const SpeakerSection = ({ speakers }: SpeakersSectionProps) => { + return ( + + + + + Palestrantes + + + + No IWD Uberlândia 2024, teremos um time poderoso de palestrantes, composto por mulheres! Essas mulheres são destaque em diferentes áreas, e nosso objetivo vai além de estimular a comunidade tecnológica, abrangendo interação, conexão e Containerersidade. + + + + {speakers.map((speaker) => + + )} + + + ); +}; +export default SpeakerSection; diff --git a/src/components/iwd-2023/speakers-section/speaker-card.tsx b/src/components/iwd-2024/speakers-section/speaker-card.tsx similarity index 100% rename from src/components/iwd-2023/speakers-section/speaker-card.tsx rename to src/components/iwd-2024/speakers-section/speaker-card.tsx diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 09143b8..b7ac995 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -6,8 +6,7 @@ import { SponsorLevel } from "models/sponsor-level"; import styles from "styles/Home.module.css"; import HomeHeader from "../components/headers/iwd/home-header"; -import SpeakerSection from "components/iwd-2024/speakers-section/speakers-section"; -import SponsorsSection from "components/sponsors-section/sponsors-section"; +import SpeakerSection from "components/iwd-2024/speakers-section"; import CountdownTimer from "components/iwd-2024/countdown/countdown-timer"; import OlderEvenstsSection from "components/iwd-2024/older-events-section/older-events-section"; @@ -67,9 +66,7 @@ const Home = ({ speakers, sponsors, schedule }: HomePageProps) => { -
- -
+ {/*
From ae5b2e816180ba542f4becbc813397171133272e Mon Sep 17 00:00:00 2001 From: Luis Gustavo Date: Wed, 14 Feb 2024 10:27:22 -0300 Subject: [PATCH 05/17] speakers image --- public/icons/arrow-back.svg | 3 +++ public/icons/arrow-forward.svg | 3 +++ public/icons/arrow-icon.svg | 3 +++ public/iwd-2024/circle-iwd-svg.svg | 9 +++++++++ public/iwd-2024/circle-iwd.png | Bin 4730 -> 0 bytes 5 files changed, 18 insertions(+) create mode 100644 public/icons/arrow-back.svg create mode 100644 public/icons/arrow-forward.svg create mode 100644 public/icons/arrow-icon.svg create mode 100644 public/iwd-2024/circle-iwd-svg.svg delete mode 100644 public/iwd-2024/circle-iwd.png diff --git a/public/icons/arrow-back.svg b/public/icons/arrow-back.svg new file mode 100644 index 0000000..8f0cb4d --- /dev/null +++ b/public/icons/arrow-back.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/arrow-forward.svg b/public/icons/arrow-forward.svg new file mode 100644 index 0000000..b8e2bf5 --- /dev/null +++ b/public/icons/arrow-forward.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/arrow-icon.svg b/public/icons/arrow-icon.svg new file mode 100644 index 0000000..addcc38 --- /dev/null +++ b/public/icons/arrow-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/iwd-2024/circle-iwd-svg.svg b/public/iwd-2024/circle-iwd-svg.svg new file mode 100644 index 0000000..1ebe607 --- /dev/null +++ b/public/iwd-2024/circle-iwd-svg.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/iwd-2024/circle-iwd.png b/public/iwd-2024/circle-iwd.png deleted file mode 100644 index 708a22ce90c4c77beb75b84bc208e7f559eedb7e..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4730 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 IM6N<$g4xFf2><{9 From 78742a830a597f99dc3a229cc0239102ed9aa317 Mon Sep 17 00:00:00 2001 From: Luis Gustavo Date: Wed, 14 Feb 2024 10:27:33 -0300 Subject: [PATCH 06/17] bump clsx --- package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 1ab840b..2aef3fa 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "@fortawesome/react-fontawesome": "^0.2.0", "@vercel/analytics": "^0.1.3", "bootstrap": "^5.3.2", + "clsx": "^2.1.0", "firebase": "^10.4.0", "firebase-admin": "^11.10.1", "firebase-functions": "^3.23.0", @@ -41,4 +42,4 @@ "eslint-config-next": "^13.1.6", "typescript": "4.7.4" } -} \ No newline at end of file +} From 1e78cd2d76a16fb14c7871ee232b6cbb6dce5708 Mon Sep 17 00:00:00 2001 From: Luis Gustavo Date: Wed, 14 Feb 2024 10:27:54 -0300 Subject: [PATCH 07/17] speaker card --- .../speakers-section/speaker-card.tsx | 30 ++++++++++++++++--- 1 file changed, 26 insertions(+), 4 deletions(-) diff --git a/src/components/iwd-2024/speakers-section/speaker-card.tsx b/src/components/iwd-2024/speakers-section/speaker-card.tsx index 6c6958b..8286f89 100644 --- a/src/components/iwd-2024/speakers-section/speaker-card.tsx +++ b/src/components/iwd-2024/speakers-section/speaker-card.tsx @@ -1,15 +1,37 @@ import { Speaker } from "models/speaker"; import React from "react"; +import styles from "./SpeakerSection.module.css"; +import clsx from "clsx"; +import Image from "next/image"; interface SpeakerCardProps { speaker: Speaker; + color: 'primary' | 'secondary' | 'tertiary'; + active?: boolean; } -const SpeakerCard = ({ speaker }: SpeakerCardProps) => { +const SpeakerCard = ({ speaker, active, color }: SpeakerCardProps) => { return ( -
- {speaker.id} -
+ ); }; export default SpeakerCard; From ca6ebacfb66f6a7a66237a7f0b2e2295ef4877e9 Mon Sep 17 00:00:00 2001 From: Luis Gustavo Date: Wed, 14 Feb 2024 10:28:13 -0300 Subject: [PATCH 08/17] speakers section desktop --- .../SpeakerSection.module.css | 129 +++++++++++++++++- .../iwd-2024/speakers-section/index.tsx | 83 +++++++++-- src/styles/globals.css | 1 + 3 files changed, 203 insertions(+), 10 deletions(-) diff --git a/src/components/iwd-2024/speakers-section/SpeakerSection.module.css b/src/components/iwd-2024/speakers-section/SpeakerSection.module.css index a3325b5..9f6dfc9 100644 --- a/src/components/iwd-2024/speakers-section/SpeakerSection.module.css +++ b/src/components/iwd-2024/speakers-section/SpeakerSection.module.css @@ -5,7 +5,11 @@ .Header { align-items: center; gap: 2.5rem; - margin-bottom: 2.5rem; + margin-bottom: 5rem; + padding: 0 0.5rem; +} + +.Content { padding: 0 0.5rem; } @@ -23,4 +27,127 @@ .HeaderText { font-family: "Space Grotesk", sans-serif; font-size: 1.125rem; +} + +.SpeakersCarousel { + position: relative; +} + +.CarouselInner { + align-items: center; + display: flex; + gap: 30px; + margin: 0 auto; + max-width: 1150px; + overflow: hidden; +} + +.CarouselItem { + flex-shrink: 0; + width: 28%; +} + +.CarouselItemActive { + width: 37%; +} + +.SpeakersCarouselControl { + align-items: center; + background: linear-gradient(265.06deg, #4BB9DA 2.13%, #21C4BF 67.86%, #0FC8B4 96.02%); + border: none; + border-radius: 100%; + display: flex; + height: 2.5rem; + justify-content: center; + position: absolute; + top: 50%; + transform: translateY(-50%); + width: 2.5rem; +} + +.SpeakersCarouselControlRight { + left: 0; +} + +.SpeakersCarouselControlForward { + right: 0; +} + +.SpeakerCard { + border-radius: 29px; + border: 1px solid #191A23; + box-shadow: 0 5px 0 0 #191A23; + font-family: "Space Grotesk", sans-serif; + padding: 2em; +} + +.SpeakerCard.Active { + font-size: 16px; +} + +.SpeakerCard.Inactive { + font-size: 0.8rem; +} + +.SpeakerCardTitle { + border-radius: 5px; + font-size: 1.25em; + font-weight: medium; + max-width: 75%; + padding: 0 0.25rem; + + &.primary { + background-color: var(--soft-blue3); + } + + &.secondary { + background-color: var(--soft-green); + } + + &.tertiary { + background-color: var(--gray); + } +} + +.SpeakerCardFilled { + &.Active { + background-color: var(--soft-blue3); + } + + &.Inactive { + background-color: var(--gray); + } +} + +.SpeakerCardImage { + display: flex; + margin-left: auto; + margin-top: -4em; +} + +.ArrowIcon { + align-items: center; + background-color: #191A23; + border-radius: 100%; + display: flex; + justify-content: center; + height: 1.625rem; + width: 1.625rem; +} + +.SpeakerCardFooter { + align-items: center; + color: #191A23; + display: flex; + font-size: 0.75em; + gap: 0.75em; + text-decoration: none; + + .SpeakerCardFooterText { + margin-bottom: 0; + } +} + +.SpeakerCardFooter:hover { + cursor: pointer; } \ No newline at end of file diff --git a/src/components/iwd-2024/speakers-section/index.tsx b/src/components/iwd-2024/speakers-section/index.tsx index 2080352..a5f56a5 100644 --- a/src/components/iwd-2024/speakers-section/index.tsx +++ b/src/components/iwd-2024/speakers-section/index.tsx @@ -1,14 +1,31 @@ import { Speaker } from "models/speaker"; -import React from "react"; +import React, { useState } from "react"; import styles from "./SpeakerSection.module.css"; import SpeakerCard from "./speaker-card"; -import { Col, Container, Row } from "reactstrap"; +import { Carousel, CarouselControl, CarouselItem, Col, Container, Row } from "reactstrap"; +import Image from "next/image"; +import clsx from "clsx"; interface SpeakersSectionProps { speakers: Array, } const SpeakerSection = ({ speakers }: SpeakersSectionProps) => { + const [activeIndex, setActiveIndex] = useState(1); + const [animating, setAnimating] = useState(false); + + const next = () => { + if (animating) return; + const nextIndex = activeIndex === speakers.length - 1 ? 0 : activeIndex + 1; + setActiveIndex(nextIndex); + }; + + const previous = () => { + if (animating) return; + const nextIndex = activeIndex === 0 ? speakers.length - 1 : activeIndex - 1; + setActiveIndex(nextIndex); + }; + return ( @@ -21,13 +38,61 @@ const SpeakerSection = ({ speakers }: SpeakersSectionProps) => { No IWD Uberlândia 2024, teremos um time poderoso de palestrantes, composto por mulheres! Essas mulheres são destaque em diferentes áreas, e nosso objetivo vai além de estimular a comunidade tecnológica, abrangendo interação, conexão e Containerersidade. - - {speakers.map((speaker) => - - )} + + + {speakers.map((speaker, i) => + setAnimating(true)} + onExited={() => setAnimating(false)} + cssModule={{ + 'carousel-item': styles.CarouselItem, + 'active': styles.CarouselItemActive, + }} + > + + + )} + + + + ); diff --git a/src/styles/globals.css b/src/styles/globals.css index 7a3108d..89cf615 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -15,6 +15,7 @@ --soft-blue3: #95D4FF; --soft-green: #00df9d; --soft-green-light: #00d193; + --gray: #F3F3F3; --pink: #E41AE1; --primary-text: #393D40; --secondary-text: #848484; From cce23090928960a13f0c7c56f4498d609524dc5f Mon Sep 17 00:00:00 2001 From: Luis Gustavo Date: Thu, 15 Feb 2024 07:18:27 -0300 Subject: [PATCH 09/17] chore: swiper js --- package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 2aef3fa..327300b 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,8 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-player": "^2.14.1", - "reactstrap": "^9.1.3" + "reactstrap": "^9.1.3", + "swiper": "^11.0.6" }, "devDependencies": { "@types/node": "18.7.3", From fce210c1d773ba635942579869c3404beaef7f03 Mon Sep 17 00:00:00 2001 From: Luis Gustavo Date: Thu, 15 Feb 2024 07:19:06 -0300 Subject: [PATCH 10/17] carousel component --- src/components/carousel/index.tsx | 6 ++++++ src/pages/_app.tsx | 2 ++ 2 files changed, 8 insertions(+) create mode 100644 src/components/carousel/index.tsx diff --git a/src/components/carousel/index.tsx b/src/components/carousel/index.tsx new file mode 100644 index 0000000..17849e4 --- /dev/null +++ b/src/components/carousel/index.tsx @@ -0,0 +1,6 @@ +import { Swiper, SwiperSlide } from "swiper/react"; + +export const Carousel = { + Container: Swiper, + Item: SwiperSlide, +} \ No newline at end of file diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 4668d00..32d966d 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -5,6 +5,8 @@ import type { AppContext, AppInitialProps, AppProps } from 'next/app' import React, { ReactNode } from "react"; import { NextComponentType, NextPageContext } from 'next'; +import 'swiper/css'; +import 'swiper/css/navigation'; import { AppLayoutProps } from '../../types'; From dc5570ef8d696e42567c9bfaa032d1e137bb4bec Mon Sep 17 00:00:00 2001 From: Luis Gustavo Date: Thu, 15 Feb 2024 07:24:56 -0300 Subject: [PATCH 11/17] use swiper js to carousel --- .../SpeakerSection.module.css | 28 ++--- .../iwd-2024/speakers-section/index.tsx | 118 +++++++++--------- .../speakers-section/speaker-card.tsx | 8 +- 3 files changed, 75 insertions(+), 79 deletions(-) diff --git a/src/components/iwd-2024/speakers-section/SpeakerSection.module.css b/src/components/iwd-2024/speakers-section/SpeakerSection.module.css index 9f6dfc9..9432aec 100644 --- a/src/components/iwd-2024/speakers-section/SpeakerSection.module.css +++ b/src/components/iwd-2024/speakers-section/SpeakerSection.module.css @@ -10,7 +10,8 @@ } .Content { - padding: 0 0.5rem; + padding: 0 2rem; + position: relative; } .Title { @@ -30,25 +31,13 @@ } .SpeakersCarousel { - position: relative; -} - -.CarouselInner { - align-items: center; - display: flex; - gap: 30px; + height: 20rem; margin: 0 auto; max-width: 1150px; - overflow: hidden; -} - -.CarouselItem { - flex-shrink: 0; - width: 28%; -} -.CarouselItemActive { - width: 37%; + & .swiper .swiper-button-prev { + display: none; + } } .SpeakersCarouselControl { @@ -79,14 +68,19 @@ box-shadow: 0 5px 0 0 #191A23; font-family: "Space Grotesk", sans-serif; padding: 2em; + margin: 0 auto; + position: relative; } .SpeakerCard.Active { font-size: 16px; + height: 17.8rem; + width: 24rem; } .SpeakerCard.Inactive { font-size: 0.8rem; + width: 20rem; } .SpeakerCardTitle { diff --git a/src/components/iwd-2024/speakers-section/index.tsx b/src/components/iwd-2024/speakers-section/index.tsx index a5f56a5..26c0060 100644 --- a/src/components/iwd-2024/speakers-section/index.tsx +++ b/src/components/iwd-2024/speakers-section/index.tsx @@ -1,34 +1,24 @@ import { Speaker } from "models/speaker"; -import React, { useState } from "react"; +import { Swiper as SwiperType } from 'swiper'; + +import React, { useRef } from "react"; import styles from "./SpeakerSection.module.css"; import SpeakerCard from "./speaker-card"; -import { Carousel, CarouselControl, CarouselItem, Col, Container, Row } from "reactstrap"; -import Image from "next/image"; +import { Col, Container, Row } from "reactstrap"; +import { Carousel } from "components/carousel"; +import { Navigation } from 'swiper/modules'; import clsx from "clsx"; - +import Image from "next/image"; interface SpeakersSectionProps { speakers: Array, } const SpeakerSection = ({ speakers }: SpeakersSectionProps) => { - const [activeIndex, setActiveIndex] = useState(1); - const [animating, setAnimating] = useState(false); - - const next = () => { - if (animating) return; - const nextIndex = activeIndex === speakers.length - 1 ? 0 : activeIndex + 1; - setActiveIndex(nextIndex); - }; + const swiperRef = useRef(); - const previous = () => { - if (animating) return; - const nextIndex = activeIndex === 0 ? speakers.length - 1 : activeIndex - 1; - setActiveIndex(nextIndex); - }; - return ( - + Palestrantes @@ -39,60 +29,66 @@ const SpeakerSection = ({ speakers }: SpeakersSectionProps) => { - { + swiperRef.current = swiper; + }} + className={styles.SpeakersCarousel} > {speakers.map((speaker, i) => - setAnimating(true)} - onExited={() => setAnimating(false)} - cssModule={{ - 'carousel-item': styles.CarouselItem, - 'active': styles.CarouselItemActive, - }} > + {({ isActive, isNext }) => - + } + )} - - - - + + + + + ); diff --git a/src/components/iwd-2024/speakers-section/speaker-card.tsx b/src/components/iwd-2024/speakers-section/speaker-card.tsx index 8286f89..3d31726 100644 --- a/src/components/iwd-2024/speakers-section/speaker-card.tsx +++ b/src/components/iwd-2024/speakers-section/speaker-card.tsx @@ -22,7 +22,13 @@ const SpeakerCard = ({ speaker, active, color }: SpeakerCardProps) => {

{speaker.content}

- Internation Women`s Day 2024 + Internation Women`s Day 2024 Uma seta apontando pra diagonal direita na cor branca From 82d8c951c514f72e919f8953597c6894efe236dd Mon Sep 17 00:00:00 2001 From: Luis Gustavo Date: Fri, 16 Feb 2024 08:21:24 -0300 Subject: [PATCH 12/17] image and speakers background --- .../speakers-section/SpeakerSection.module.css | 17 ++++++++++++++++- .../iwd-2024/speakers-section/index.tsx | 10 ++++++++-- 2 files changed, 24 insertions(+), 3 deletions(-) diff --git a/src/components/iwd-2024/speakers-section/SpeakerSection.module.css b/src/components/iwd-2024/speakers-section/SpeakerSection.module.css index 9432aec..e7d8b73 100644 --- a/src/components/iwd-2024/speakers-section/SpeakerSection.module.css +++ b/src/components/iwd-2024/speakers-section/SpeakerSection.module.css @@ -1,3 +1,8 @@ +.Wrapper { + background: linear-gradient(180deg, #FEFEFE 0%, #FFFFFF 83.5%, #E4F4FF 100%); + padding-bottom: 4vw; +} + .Container { margin-top: 6.25rem; } @@ -31,7 +36,7 @@ } .SpeakersCarousel { - height: 20rem; + height: 18.5rem; margin: 0 auto; max-width: 1150px; @@ -144,4 +149,14 @@ .SpeakerCardFooter:hover { cursor: pointer; +} + +.IllustrationSection { + background: url('/iwd-2024/speakers-illustration.png') no-repeat top / 100%; + background-size: contain; + margin-left: auto; + margin-top: -0.5rem; + position: relative; + height: clamp(10rem, 16vw, 15.5rem); + width: 50%; } \ No newline at end of file diff --git a/src/components/iwd-2024/speakers-section/index.tsx b/src/components/iwd-2024/speakers-section/index.tsx index 26c0060..d5365da 100644 --- a/src/components/iwd-2024/speakers-section/index.tsx +++ b/src/components/iwd-2024/speakers-section/index.tsx @@ -17,7 +17,8 @@ const SpeakerSection = ({ speakers }: SpeakersSectionProps) => { const swiperRef = useRef(); return ( - +
+ @@ -90,7 +91,12 @@ const SpeakerSection = ({ speakers }: SpeakersSectionProps) => { Ver próximos palestrantes - + +
+ +
); }; export default SpeakerSection; From 25c0dc2d160f575e8caeb75665a5bb3619cd3b22 Mon Sep 17 00:00:00 2001 From: Luis Gustavo Date: Fri, 16 Feb 2024 08:37:47 -0300 Subject: [PATCH 13/17] fix speaker card title --- .../SpeakerSection.module.css | 5 ++-- .../speakers-section/speaker-card.tsx | 24 +++++++++++++++---- 2 files changed, 23 insertions(+), 6 deletions(-) diff --git a/src/components/iwd-2024/speakers-section/SpeakerSection.module.css b/src/components/iwd-2024/speakers-section/SpeakerSection.module.css index e7d8b73..7aec164 100644 --- a/src/components/iwd-2024/speakers-section/SpeakerSection.module.css +++ b/src/components/iwd-2024/speakers-section/SpeakerSection.module.css @@ -92,8 +92,9 @@ border-radius: 5px; font-size: 1.25em; font-weight: medium; - max-width: 75%; + width: fit-content; padding: 0 0.25rem; + display: block; &.primary { background-color: var(--soft-blue3); @@ -121,7 +122,7 @@ .SpeakerCardImage { display: flex; margin-left: auto; - margin-top: -4em; + margin-top: -3em; } .ArrowIcon { diff --git a/src/components/iwd-2024/speakers-section/speaker-card.tsx b/src/components/iwd-2024/speakers-section/speaker-card.tsx index 3d31726..39fa8c7 100644 --- a/src/components/iwd-2024/speakers-section/speaker-card.tsx +++ b/src/components/iwd-2024/speakers-section/speaker-card.tsx @@ -10,7 +10,19 @@ interface SpeakerCardProps { active?: boolean; } +const SPEAKER_CONTENT_CHAR_CHUNK = 22; + const SpeakerCard = ({ speaker, active, color }: SpeakerCardProps) => { + const speakerContentChunks = speaker.content?.split('').reduce((acc, current) => { + const shouldAddNextChunk = current === ' ' && acc[acc.length - 1].length >= SPEAKER_CONTENT_CHAR_CHUNK; + if (shouldAddNextChunk) { + acc.push(current); + return acc; + } + acc[acc.length - 1] += current; + return acc; + }, ['']); + return (
{ active ? styles.Active : styles.Inactive, ) }> -

- {speaker.content} +

+ {speakerContentChunks?.map((chunk) => + + {chunk} + + )}

Internation Women`s Day 2024 From 31e934121a45d330853c66ecd98823067ea00d0b Mon Sep 17 00:00:00 2001 From: Luis Gustavo Date: Sun, 18 Feb 2024 17:46:00 -0300 Subject: [PATCH 14/17] speaker modal --- .../SpeakerSection.module.css | 5 +++++ .../iwd-2024/speakers-section/index.tsx | 15 +++++++++++++- .../speakers-section/speaker-card.tsx | 5 +++-- .../speakers-section/speaker-modal.tsx | 2 +- .../styles/Speakers.module.css | 20 ++++++------------- 5 files changed, 29 insertions(+), 18 deletions(-) diff --git a/src/components/iwd-2024/speakers-section/SpeakerSection.module.css b/src/components/iwd-2024/speakers-section/SpeakerSection.module.css index 7aec164..54d814a 100644 --- a/src/components/iwd-2024/speakers-section/SpeakerSection.module.css +++ b/src/components/iwd-2024/speakers-section/SpeakerSection.module.css @@ -45,6 +45,11 @@ } } +.CustomSwiperSlide { + display: flex; + align-items: center; +} + .SpeakersCarouselControl { align-items: center; background: linear-gradient(265.06deg, #4BB9DA 2.13%, #21C4BF 67.86%, #0FC8B4 96.02%); diff --git a/src/components/iwd-2024/speakers-section/index.tsx b/src/components/iwd-2024/speakers-section/index.tsx index d5365da..c35ceb2 100644 --- a/src/components/iwd-2024/speakers-section/index.tsx +++ b/src/components/iwd-2024/speakers-section/index.tsx @@ -1,7 +1,7 @@ import { Speaker } from "models/speaker"; import { Swiper as SwiperType } from 'swiper'; -import React, { useRef } from "react"; +import React, { useRef, useState } from "react"; import styles from "./SpeakerSection.module.css"; import SpeakerCard from "./speaker-card"; import { Col, Container, Row } from "reactstrap"; @@ -9,6 +9,7 @@ import { Carousel } from "components/carousel"; import { Navigation } from 'swiper/modules'; import clsx from "clsx"; import Image from "next/image"; +import SpeakerModal from "components/speakers-section/speaker-modal"; interface SpeakersSectionProps { speakers: Array, } @@ -16,6 +17,8 @@ interface SpeakersSectionProps { const SpeakerSection = ({ speakers }: SpeakersSectionProps) => { const swiperRef = useRef(); + const [speakerSelected, setSpeakerSelected] = useState(undefined) + return (
@@ -58,6 +61,7 @@ const SpeakerSection = ({ speakers }: SpeakersSectionProps) => { {speakers.map((speaker, i) => {({ isActive, isNext }) => { "secondary" } active={isNext} + onSelectSpeaker={() => setSpeakerSelected(speaker)} /> } @@ -96,6 +101,14 @@ const SpeakerSection = ({ speakers }: SpeakersSectionProps) => { className={styles.IllustrationSection} /> + + {speakerSelected && + setSpeakerSelected(undefined)} + /> + }
); }; diff --git a/src/components/iwd-2024/speakers-section/speaker-card.tsx b/src/components/iwd-2024/speakers-section/speaker-card.tsx index 39fa8c7..d9dea44 100644 --- a/src/components/iwd-2024/speakers-section/speaker-card.tsx +++ b/src/components/iwd-2024/speakers-section/speaker-card.tsx @@ -7,12 +7,13 @@ import Image from "next/image"; interface SpeakerCardProps { speaker: Speaker; color: 'primary' | 'secondary' | 'tertiary'; + onSelectSpeaker: () => void; active?: boolean; } const SPEAKER_CONTENT_CHAR_CHUNK = 22; -const SpeakerCard = ({ speaker, active, color }: SpeakerCardProps) => { +const SpeakerCard = ({ speaker, active, color, onSelectSpeaker }: SpeakerCardProps) => { const speakerContentChunks = speaker.content?.split('').reduce((acc, current) => { const shouldAddNextChunk = current === ' ' && acc[acc.length - 1].length >= SPEAKER_CONTENT_CHAR_CHUNK; if (shouldAddNextChunk) { @@ -49,7 +50,7 @@ const SpeakerCard = ({ speaker, active, color }: SpeakerCardProps) => { Uma seta apontando pra diagonal direita na cor branca -

+

Ler mais sobre: {speaker.name}

diff --git a/src/components/speakers-section/speaker-modal.tsx b/src/components/speakers-section/speaker-modal.tsx index 0730c92..10d1bbb 100644 --- a/src/components/speakers-section/speaker-modal.tsx +++ b/src/components/speakers-section/speaker-modal.tsx @@ -36,7 +36,7 @@ const SpeakerModal: React.FC = ({ >
- {`Foto h5 { + flex: 1; } .modal_speaker_info_container { width: 100%; display: flex; align-items: center; - justify-content: center; - gap: 15px; -} - -.modal_speaker_info_content { - width: 80%; - margin-left: 1rem; + justify-content: flex-start; + gap: 2rem; } .modal_speaker_info_content h1 { From a47abf69f4f644144fd6900674a7ca298b1ca802 Mon Sep 17 00:00:00 2001 From: Luis Gustavo Date: Sun, 18 Feb 2024 18:21:54 -0300 Subject: [PATCH 15/17] align slide speakers --- .../iwd-2024/speakers-section/SpeakerSection.module.css | 9 ++++----- src/components/iwd-2024/speakers-section/index.tsx | 6 +++--- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/src/components/iwd-2024/speakers-section/SpeakerSection.module.css b/src/components/iwd-2024/speakers-section/SpeakerSection.module.css index 54d814a..7943618 100644 --- a/src/components/iwd-2024/speakers-section/SpeakerSection.module.css +++ b/src/components/iwd-2024/speakers-section/SpeakerSection.module.css @@ -36,7 +36,6 @@ } .SpeakersCarousel { - height: 18.5rem; margin: 0 auto; max-width: 1150px; @@ -64,12 +63,12 @@ width: 2.5rem; } -.SpeakersCarouselControlRight { - left: 0; +.SpeakersCarouselControlPrevious { + left: 15px; } .SpeakersCarouselControlForward { - right: 0; + right: 15px; } .SpeakerCard { @@ -78,7 +77,7 @@ box-shadow: 0 5px 0 0 #191A23; font-family: "Space Grotesk", sans-serif; padding: 2em; - margin: 0 auto; + margin: 0 auto 5px auto; position: relative; } diff --git a/src/components/iwd-2024/speakers-section/index.tsx b/src/components/iwd-2024/speakers-section/index.tsx index c35ceb2..54acea0 100644 --- a/src/components/iwd-2024/speakers-section/index.tsx +++ b/src/components/iwd-2024/speakers-section/index.tsx @@ -82,10 +82,10 @@ const SpeakerSection = ({ speakers }: SpeakersSectionProps) => { From 5be20c3c8bb53e8bd22b3445897b76ab779c9221 Mon Sep 17 00:00:00 2001 From: Luis Gustavo Date: Sun, 18 Feb 2024 19:01:21 -0300 Subject: [PATCH 16/17] responsive slide --- .../speakers-section/SpeakerCard.module.css | 91 ++++++++++++++++++ .../SpeakerSection.module.css | 96 ++----------------- .../iwd-2024/speakers-section/index.tsx | 6 +- .../speakers-section/speaker-card.tsx | 2 +- 4 files changed, 104 insertions(+), 91 deletions(-) create mode 100644 src/components/iwd-2024/speakers-section/SpeakerCard.module.css diff --git a/src/components/iwd-2024/speakers-section/SpeakerCard.module.css b/src/components/iwd-2024/speakers-section/SpeakerCard.module.css new file mode 100644 index 0000000..148de60 --- /dev/null +++ b/src/components/iwd-2024/speakers-section/SpeakerCard.module.css @@ -0,0 +1,91 @@ +.SpeakerCard { + border-radius: 29px; + border: 1px solid #191A23; + box-shadow: 0 5px 0 0 #191A23; + font-family: "Space Grotesk", sans-serif; + padding: 2em; + margin: 0 auto 5px auto; + position: relative; +} + +.SpeakerCard.Active { + font-size: 0.8rem; + width: 24rem; +} + +.SpeakerCard.Inactive { + font-size: 0.8rem; + width: 20rem; +} + +.SpeakerCardTitle { + border-radius: 5px; + font-size: 1.25em; + font-weight: medium; + width: fit-content; + padding: 0 0.25rem; + display: block; + + &.primary { + background-color: var(--soft-blue3); + } + + &.secondary { + background-color: var(--soft-green); + } + + &.tertiary { + background-color: var(--gray); + } +} + +.SpeakerCardFilled { + &.Active { + background-color: var(--soft-blue3); + } + + &.Inactive { + background-color: var(--gray); + } +} + +.SpeakerCardImage { + display: flex; + margin-left: auto; + margin-top: -3em; +} + +.SpeakerCardFooter { + align-items: center; + color: #191A23; + display: flex; + font-size: 0.75em; + gap: 0.75em; + text-decoration: none; + + .SpeakerCardFooterText { + margin-bottom: 0; + } +} + +.SpeakerCardFooter:hover { + cursor: pointer; +} + +.ArrowIcon { + align-items: center; + background-color: #191A23; + border-radius: 100%; + display: flex; + justify-content: center; + height: 1.625rem; + width: 1.625rem; +} + + +@media (min-width: 1200px) { + .SpeakerCard.Active { + font-size: 16px; + height: 17.8rem; + } +} \ No newline at end of file diff --git a/src/components/iwd-2024/speakers-section/SpeakerSection.module.css b/src/components/iwd-2024/speakers-section/SpeakerSection.module.css index 7943618..bce9f19 100644 --- a/src/components/iwd-2024/speakers-section/SpeakerSection.module.css +++ b/src/components/iwd-2024/speakers-section/SpeakerSection.module.css @@ -71,97 +71,21 @@ right: 15px; } -.SpeakerCard { - border-radius: 29px; - border: 1px solid #191A23; - box-shadow: 0 5px 0 0 #191A23; - font-family: "Space Grotesk", sans-serif; - padding: 2em; - margin: 0 auto 5px auto; - position: relative; -} - -.SpeakerCard.Active { - font-size: 16px; - height: 17.8rem; - width: 24rem; -} - -.SpeakerCard.Inactive { - font-size: 0.8rem; - width: 20rem; -} - -.SpeakerCardTitle { - border-radius: 5px; - font-size: 1.25em; - font-weight: medium; - width: fit-content; - padding: 0 0.25rem; - display: block; - - &.primary { - background-color: var(--soft-blue3); - } - - &.secondary { - background-color: var(--soft-green); - } - - &.tertiary { - background-color: var(--gray); - } -} - -.SpeakerCardFilled { - &.Active { - background-color: var(--soft-blue3); - } - - &.Inactive { - background-color: var(--gray); - } -} - -.SpeakerCardImage { - display: flex; - margin-left: auto; - margin-top: -3em; -} - -.ArrowIcon { - align-items: center; - background-color: #191A23; - border-radius: 100%; - display: flex; - justify-content: center; - height: 1.625rem; - width: 1.625rem; -} - -.SpeakerCardFooter { - align-items: center; - color: #191A23; - display: flex; - font-size: 0.75em; - gap: 0.75em; - text-decoration: none; - - .SpeakerCardFooterText { - margin-bottom: 0; - } -} - -.SpeakerCardFooter:hover { - cursor: pointer; -} - .IllustrationSection { background: url('/iwd-2024/speakers-illustration.png') no-repeat top / 100%; background-size: contain; margin-left: auto; - margin-top: -0.5rem; position: relative; height: clamp(10rem, 16vw, 15.5rem); width: 50%; +} + +@media (min-width: 768px) { + .SpeakersCarouselControlPrevious { + left: -15px; + } + + .SpeakersCarouselControlForward { + right: -15px; + } } \ No newline at end of file diff --git a/src/components/iwd-2024/speakers-section/index.tsx b/src/components/iwd-2024/speakers-section/index.tsx index 54acea0..dd00865 100644 --- a/src/components/iwd-2024/speakers-section/index.tsx +++ b/src/components/iwd-2024/speakers-section/index.tsx @@ -40,15 +40,13 @@ const SpeakerSection = ({ speakers }: SpeakersSectionProps) => { slidesPerView: 1, }, 768: { - slidesPerView: 2, + slidesPerView: 3, spaceBetween: 15, }, 1024: { - slidesPerView: 2, spaceBetween: 20, }, - 1440: { - slidesPerView: 3, + 1240: { spaceBetween: 30, }, }} diff --git a/src/components/iwd-2024/speakers-section/speaker-card.tsx b/src/components/iwd-2024/speakers-section/speaker-card.tsx index d9dea44..e95f5f9 100644 --- a/src/components/iwd-2024/speakers-section/speaker-card.tsx +++ b/src/components/iwd-2024/speakers-section/speaker-card.tsx @@ -1,6 +1,6 @@ import { Speaker } from "models/speaker"; import React from "react"; -import styles from "./SpeakerSection.module.css"; +import styles from "./SpeakerCard.module.css"; import clsx from "clsx"; import Image from "next/image"; From ae4374fb37cc1554a639add9311fa9598eccf3d7 Mon Sep 17 00:00:00 2001 From: Tacio Medeiros Date: Wed, 28 Feb 2024 23:24:16 -0300 Subject: [PATCH 17/17] feat: adicionandospeakers --- package-lock.json | 5 + src/back-features/speakers.ts | 4 +- .../speakers-section/SpeakerCard.module.css | 4 +- .../speakers-section/SpeakerModal.module.css | 165 ++++++++++++++++++ .../SpeakerSection.module.css | 7 +- .../iwd-2024/speakers-section/index.tsx | 54 +++--- .../speakers-section/speaker-card.tsx | 31 ++-- .../speakers-section/speaker-modal.tsx | 95 ++++++++++ src/pages/index.tsx | 3 +- 9 files changed, 323 insertions(+), 45 deletions(-) create mode 100644 src/components/iwd-2024/speakers-section/SpeakerModal.module.css create mode 100644 src/components/iwd-2024/speakers-section/speaker-modal.tsx diff --git a/package-lock.json b/package-lock.json index 66b4cb8..be8d8ff 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4555,6 +4555,11 @@ "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", "dev": true }, + "swiper": { + "version": "11.0.7", + "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.0.7.tgz", + "integrity": "sha512-cDfglW1B6uSmB6eB6pNmzDTNLmZtu5bWWa1vak0RU7fOI9qHjMzl7gVBvYSl34b0RU2N11HxxETJqQ5LeqI1cA==" + }, "tapable": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz", diff --git a/src/back-features/speakers.ts b/src/back-features/speakers.ts index de1ef28..08e523a 100644 --- a/src/back-features/speakers.ts +++ b/src/back-features/speakers.ts @@ -53,7 +53,7 @@ const createSpeaker = async ({ key, id, companyTitle, mini_bio, name, photo, tec } -const getSpeaker = async () => { +const getSpeakers = async () => { try { const speakersQuerySnapshot = await db.collection(SPEAKERS_COLLECTION).get(); @@ -86,6 +86,6 @@ const deleteSpeaker = async (speakerId: string) => { export { createSpeaker, - getSpeaker, + getSpeakers, deleteSpeaker } diff --git a/src/components/iwd-2024/speakers-section/SpeakerCard.module.css b/src/components/iwd-2024/speakers-section/SpeakerCard.module.css index 148de60..3f5fa63 100644 --- a/src/components/iwd-2024/speakers-section/SpeakerCard.module.css +++ b/src/components/iwd-2024/speakers-section/SpeakerCard.module.css @@ -27,7 +27,7 @@ display: block; &.primary { - background-color: var(--soft-blue3); + background-color: var(--white); } &.secondary { @@ -59,7 +59,7 @@ align-items: center; color: #191A23; display: flex; - font-size: 0.75em; + font-size: 0.85em; gap: 0.75em; text-decoration: none; diff --git a/src/components/iwd-2024/speakers-section/SpeakerModal.module.css b/src/components/iwd-2024/speakers-section/SpeakerModal.module.css new file mode 100644 index 0000000..0ee494b --- /dev/null +++ b/src/components/iwd-2024/speakers-section/SpeakerModal.module.css @@ -0,0 +1,165 @@ +.container { + padding: 0 0.75rem; +} + +.card_container { + border-radius: 5%; + max-width: 350px; + padding-top: 38px; + margin-right: 1rem; + cursor: pointer; + height: 450px; +} + +.card_content { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; +} + +.card_image { + width: 150px; + height: 150px; +} + +.card_name { + width: 100%; + font-size: 24px; + margin: 0; +} + +.card_location { + width: 100%; + font-size: 14px; + margin: 0 0 0.8rem 0; +} + +.card_topic { + width: 100%; + font-size: 16px; + color: #B0AEAE; + margin: 0; + margin-bottom: 10px; +} + +.card_profile { + width: 100%; + font-size: 16px; + margin: 0; + text-decoration: none; +} + + + +.button_container { + width: 100%; + display: flex; + align-items: center; + justify-content: center; + margin-top: 2rem; +} + +.button_container a { + background: #298ae4; + color: #fff; + font-size: 1.2rem; + padding: 0.6rem 1rem; + border-radius: 0.7rem; + border: 3px solid #298ae4; +} + +.button_container a:hover { + background: transparent; + color: #298ae4; + border: 3px solid #298ae4; +} + +.modal_header { + padding: 32px 1.5rem 0 1.5rem; + border: none; +} + +.modal_header button { + margin: 0 0 4rem 0 !important; +} + +.modal_header .card_image { + margin: 0; +} + +.modal_header>h5 { + flex: 1; +} + +.modal_speaker_info_container { + width: 100%; + display: flex; + align-items: center; + justify-content: flex-start; + gap: 2rem; +} + +.modal_speaker_info_content h1 { + font-size: 24px; + margin: 0; +} + +.modal_speaker_info_content p { + margin: 0; + font-size: 16px; +} + +.modal_speaker_info_content p:first-of-type { + color: #B0AEAE; +} + +.modal_body { + padding: 1rem 1.5rem 0 1.5rem; +} + +.modal_body h2 { + font-size: 1.35rem; +} + +.modal_body p:last-of-type { + margin: 0; +} + +.modal_footer { + padding: 1rem 1.5rem 1rem 1.5rem; + display: flex; + align-items: center; + justify-content: center; + border: none; +} + +.modal_footer a { + padding: 1rem; + cursor: pointer; +} + +.modal_footer a svg { + color: #000 !important; +} + +@media (max-width: 360px) { + .modal_footer a { + padding: 0.5rem; + cursor: pointer; + } +} + +@media (max-width: 414px) { + + .modal_footer a { + padding: 0.6rem; + cursor: pointer; + } +} + +.speakers_link:link { + color: var(--blue) +} \ No newline at end of file diff --git a/src/components/iwd-2024/speakers-section/SpeakerSection.module.css b/src/components/iwd-2024/speakers-section/SpeakerSection.module.css index bce9f19..407701e 100644 --- a/src/components/iwd-2024/speakers-section/SpeakerSection.module.css +++ b/src/components/iwd-2024/speakers-section/SpeakerSection.module.css @@ -1,5 +1,6 @@ .Wrapper { - background: linear-gradient(180deg, #FEFEFE 0%, #FFFFFF 83.5%, #E4F4FF 100%); + + background-image: linear-gradient(0, transparent, var(--blue-light), transparent); padding-bottom: 4vw; } @@ -41,7 +42,7 @@ & .swiper .swiper-button-prev { display: none; - } + } } .CustomSwiperSlide { @@ -84,7 +85,7 @@ .SpeakersCarouselControlPrevious { left: -15px; } - + .SpeakersCarouselControlForward { right: -15px; } diff --git a/src/components/iwd-2024/speakers-section/index.tsx b/src/components/iwd-2024/speakers-section/index.tsx index dd00865..cbb925d 100644 --- a/src/components/iwd-2024/speakers-section/index.tsx +++ b/src/components/iwd-2024/speakers-section/index.tsx @@ -9,16 +9,24 @@ import { Carousel } from "components/carousel"; import { Navigation } from 'swiper/modules'; import clsx from "clsx"; import Image from "next/image"; -import SpeakerModal from "components/speakers-section/speaker-modal"; +import SpeakerModal from "./speaker-modal"; interface SpeakersSectionProps { speakers: Array, } +type colorTypes = 'primary' | 'secondary' | 'tertiary'; + const SpeakerSection = ({ speakers }: SpeakersSectionProps) => { const swiperRef = useRef(); const [speakerSelected, setSpeakerSelected] = useState(undefined) + const resolveColor = (i: number) => { + const resolve = i % 3; + const value = { 0: 'primary', 1: 'secondary', 2: 'tertiary' }[resolve] + return value ?? 'primary'; + } + return (
@@ -34,19 +42,21 @@ const SpeakerSection = ({ speakers }: SpeakersSectionProps) => { 3} breakpoints={{ 640: { slidesPerView: 1, }, 768: { - slidesPerView: 3, + slidesPerView: 1, spaceBetween: 15, }, 1024: { + slidesPerView: 3, spaceBetween: 20, }, 1240: { + slidesPerView: 3, spaceBetween: 30, }, }} @@ -56,29 +66,27 @@ const SpeakerSection = ({ speakers }: SpeakersSectionProps) => { }} className={styles.SpeakersCarousel} > - {speakers.map((speaker, i) => - + - {({ isActive, isNext }) => - setSpeakerSelected(speaker)} - /> - } + {({ isActive, isNext }) => + setSpeakerSelected(speaker)} + /> + } )} - -