feat: adicionando base site 2024

src/components/devfest-triangulo-2023/countdown/CountdownTimer.module.css

@@ -1,6 +1,5 @@
 .Counter {
  align-items: center;
- background-color: black;
  display: flex;
  font-family: 'Open Sans', sans-serif;
  justify-content: center;
@@ -34,59 +33,30 @@
  transition-timing-function: ease-in-out;
  width: 221px;
  animation: grow 1.6s ease-in-out infinite;
+ color: var(--black);
+ border-color: var(--black);
 }
 
 .CounterListItem:nth-child(1) {
-
- border: 1px solid var(--blue);
- background-color: transparent;
- color: var(--blue);
- box-shadow: 0 0 10px var(--blue);
+ background-color: var(--soft-blue);
  animation-delay: -1.4s;
 }
 
 .CounterListItem:nth-child(2) {
- background: transparent;
- box-shadow: 0 0 10px var(--red);
- border-color: var(--red);
- color: var(--red);
+ background: var(--red);
  animation-delay: -1.2s;
 }
 
 .CounterListItem:nth-child(3) {
- background: transparent;
- box-shadow: 0 0 10px var(--orange);
- color: var(--orange);
+ background: var(--orange);
  animation-delay: -1s;
 }
 
 .CounterListItem:nth-child(4) {
  animation-delay: -0.8s;
- color: var(--white);
  background: transparent;
- box-shadow: 0 0 10px var(--white);
-}
-
-.CounterListItem:nth-child(1):hover {
- border-color: var(--blue);
- box-shadow: 0 0 100px var(--blue);
 }
 
-.CounterListItem:nth-child(2):hover {
- border-color: var(--red);
- color: var(--red);
- box-shadow: 0 0 100px var(--red);
-}
-
-.CounterListItem:nth-child(3):hover {
- border-color: var(--orange);
- color: var(--orange);
- box-shadow: 0 0 100px var(--orange);
-}
-
-.CounterListItem:nth-child(4):hover {
- border-color: var(--white);
-}
 
 .CounterListItem__time {
  font-size: 60px;
@@ -112,33 +82,6 @@
  }
 }
 
-.glow {
- text-align: center;
- -webkit-animation: glow 1s ease-in-out infinite alternate;
- -moz-animation: glow 1s ease-in-out infinite alternate;
- animation: glow 1s ease-in-out infinite alternate;
-}
-
-@keyframes glow {
- from {
- text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
- }
-
- to {
- text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
- }
-}
-
-@keyframes glow-blue {
- from {
- text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px var(--blue), 0 0 40px var(--blue), 0 0 50px var(--blue), 0 0 60px var(--blue), 0 0 70px var(--blue);
- }
-
- to {
- text-shadow: 0 0 20px #fff, 0 0 30px var(--blue2), 0 0 40px var(--blue2), 0 0 50px var(--blue2), 0 0 60px var(--blue2), 0 0 70px var(--blue2), 0 0 80px var(--blue2);
- }
-}
-
 @keyframes grow {
 
  0%,

src/components/devfest-triangulo-2023/countdown/countdown-timer.tsx

@@ -12,8 +12,6 @@ const DATE_DISTANCE_LABELS: Record<string, string> = {
  minutes: 'minutos',
  seconds: 'segundos',
 }
-
-
 const CountdownTimer: React.FC = ({ }) => {
 
  const [_dateDistance, _setDateDistance] = useState({

src/components/devfest-triangulo-2023/older-events-section/OlderEvents.module.css

@@ -90,15 +90,15 @@
 }
 
 .ConstructItem:nth-child(3n+0) {
- background-color: var(--red);
+ background-color: var(--blue);
 }
 
 .ConstructItem:nth-child(3n+1) {
- background-color: var(--orange);
+ background-color: var(--red);
 }
 
 .ConstructItem:nth-child(3n+2) {
- background-color: var(--blue);
+ background-color: var(--orange);
 }
 
 .List ul {
@@ -107,7 +107,7 @@
 
 .List li::before {
  content: "\2022";
- color: var(--blue);
+ color: var(--soft-blue);
  font-weight: bold;
  display: inline-block;
  width: 2em;

src/components/devfest-triangulo-2023/older-events-section/older-events-section.tsx

@@ -25,19 +25,21 @@ const OlderEvenstsSection: React.FC = ({ }) => {
  <br /><br />
  O evento busca atender aos interesses e às necessidades de aprendizado da comunidade de desenvolvedores locais nas mais diversas áreas de atuação.
  <br /><br />
- Em 2022 nossa edição em Uberlândia recebeu:
+ Em 2023 nossa edição em Uberlândia recebeu:
  </p>
  <ul className={styles.List}>
- <li>+900 participantes</li>
- <li>+35 horas de conteúdo</li>
+ <li>+950 participantes</li>
+ <li>35 horas de conteúdo</li>
  <li>4 trilhas simultâneas</li>
+ <li>29 palestrantes</li>
+ <li>20 crianças na área kids</li>
  <li>participantes de 7 estados do Brasil</li>
- <li>palestrantes de 3 países</li>
+
  </ul>
  <p className={styles.Description}>
  além de ter 50% de palestrantes mulheres, oficina de programação para crianças, estandes de empresas e dinâmicas que proporcionaram maior network e premiação aos participantes.
  <br /><br />
- <b>#devfesttriangulo #devfestriangulo2023 #Google #gdg #wtm</b>
+ <b>#devfesttriangulo #devfestriangulo2024 #Google #gdg #wtm</b>
  </p>
  </Col>
  <Col lg={4} sm={12} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
@@ -52,7 +54,7 @@ const OlderEvenstsSection: React.FC = ({ }) => {
  </Row>
 
  </Container>
- <Row noGutters={true}><iframe height="615" src="https://www.youtube.com/embed/Uo59PxO9ofc?si=8nHN1d-lh1QctOkT" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share;fullscreen"></iframe></Row>
+ <Row noGutters={true}><iframe height="615" src="https://www.youtube.com/embed/Ov09g9WmFcE?si=dLtCtu7tJHmGeNRK" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share;fullscreen"></iframe></Row>
 
 
 

src/components/headers/header.module.css

@@ -5,7 +5,7 @@
  justify-content: space-between;
  max-width: var(--xl);
  margin: 0 auto;
- padding: 1rem 2rem; 
+ padding: 1rem 2rem;
 }
 
 .HeaderNavContainer {
@@ -76,9 +76,9 @@
 
 .HeaderSubscribeButton {
  background: none;
- border: 1px solid var(--blue2);
+ border: 1px solid var(--blue);
  border-radius: 16px;
- color: var(--blue2);
+ color: var(--blue);
  cursor: pointer;
  display: none;
  margin-left: 2rem;
@@ -87,7 +87,7 @@
 }
 
 .HeaderSubscribeButton:hover {
- background-color: var(--blue2);
+ background-color: var(--blue);
  color: var(--white);
  transition: all 250ms ease-out;
 }
@@ -115,13 +115,17 @@
 }
 
 @media (min-width: 768px) {
- .HeaderNavContainer, .HeaderSubscribeButton {
+
+ .HeaderNavContainer,
+ .HeaderSubscribeButton {
  display: flex;
  }
 }
 
 @media (min-width: 768px) {
- .toggler_btn, .Collapse {
+
+ .toggler_btn,
+ .Collapse {
  display: none;
  }
 }

src/components/headers/home-header.tsx

@@ -19,10 +19,10 @@ const NAV_ITEMS = [
  name: "O que é o Devfest?",
  ref: "#about",
  },
- {
+ /*{
  name: "Palestrantes",
  ref: "#speakers",
- },
+ },*/
  {
  name: "Patrocinadores",
  ref: "#sponsors",

src/components/hero-section/index.tsx

@@ -1,5 +1,5 @@
 import Image from "next/image"
-import Title from '../../../public/banner/title.png'
+import Title from '../../../public/banner/title.svg'
 import SchedulerIcon from '../../../public/icons/scheduler.svg'
 import GlobalIcon from '../../../public/icons/global.svg'
 import ArrowIcon from '../../../public/icons/arrow.png'
@@ -10,22 +10,21 @@ import styles from './styles.module.css'
 export const HeroSection = () => {
  return (
  <section className={styles.Section}>
+ <video muted loop={true} autoPlay={true} playsInline={true} onContextMenu={() => false} preload="metadata" className={styles.Video} src="/videos/last-year-video.mp4"></video>
+ <div className={styles.Overlay}></div>
  <div className={styles.Content}>
  <Image alt='Devfest Triângulo 2023' src={Title} loading="eager" layout="responsive" height={83} width={216} />
-
-
  <aside className={styles.Aside}>
  <p className={styles.AsideText}>Inscreva-se</p>
  <a href={configValues.eventLinkRegistrationUrl} target="_blank" className={styles.AsideButton}>
  Garantir meu ingresso
  </a>
  <Image className={styles.ArrowIcon} alt='Uma seta amarela feita em traços de giz apontando para o canto superior esquerdo' src={ArrowIcon} height={44} width={40} objectFit="cover" />
  </aside>
-
  <footer className={styles.IconSection}>
  <span className={styles.IconItem}>
  <Image alt='Um calendário na cor amarela feito em traços de giz' src={SchedulerIcon} width={44} height={32} />
- <p>02 de Dezembro</p>
+ <p>02 de Novembro</p>
  </span>
 
  <span className={styles.IconItem}>
@@ -34,6 +33,10 @@ export const HeroSection = () => {
  </span>
  </footer>
  </div>
+
+
+
+
  </section>
  )
 }

src/components/hero-section/styles.module.css

@@ -1,18 +1,24 @@
 .Section {
  position: relative;
- background-image: url('/banner/hero-sm.png');
- background-repeat: no-repeat;
- background-size: cover;
+ background-color: #EEEEEE;
+ color: #000;
  width: 100%;
+ background: repeating-linear-gradient(45deg,
+ tomato 0px,
+ tomato 2px,
+ transparent 2px,
+ transparent 9px);
 }
 
 .Content {
+ position: relative;
  color: var(--white);
  font-family: 'Roboto Mono', monospace;
- height: calc(100vh - 82px);
+ height: calc(80vh - 82px);
  width: clamp(18rem, 90vw, var(--lg));
  margin: 0 auto;
  padding: 9rem 4.5rem;
+ z-index: 999;
 
  align-content: flex-start;
  gap: 6rem;
@@ -61,8 +67,25 @@
  display: none;
 }
 
+.Video {
+ position: absolute;
+ object-fit: cover;
+ z-index: 1;
+ width: 100vw;
+ height: 100%;
+}
+
+.Overlay {
+ background-color: rgba(0, 0, 0, 0.8);
+ height: 100%;
+ z-index: 999;
+ position: absolute;
+ width: 100%;
+}
+
+
 .AsideButton {
- background-color: var(--blue2);
+ background-color: var(--blue);
  border: none;
  border-radius: 16px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
@@ -90,7 +113,7 @@
 
 @media (min-width: 640px) {
  .Section {
- background-image: url('/banner/hero-md.png');
+ /*background-image: url('/banner/hero-md.png');*/
  background-size: 100% 100%;
  }
 
@@ -113,19 +136,19 @@
 }
 
 @media (min-width: 1024px) {
- .Section {
+ /*.Section {
  background-image: url('/banner/hero-lg.png');
- }
+ }*/
 
  .Content {
  grid-column-gap: 1rem;
  }
 }
 
 @media (min-width: 1440px) {
- .Section {
+ /*.Section {
  background-image: url('/banner/hero-xl.png');
- }
+ }*/
 
  .Content {
  grid-column-gap: 14rem;

src/helpers/config.ts

@@ -18,16 +18,16 @@ export interface ConfigValues {
 
 
 const configValues = {
- name: 'Devfest Triângulo 2023',
- eventDate: '2023-12-02T08:00:00',
- eventLinkRegistrationUrl: 'https://doity.com.br/devfesttriangulo',
+ name: 'Devfest Triângulo 2024',
+ eventDate: '2024-11-02T08:00:00',
+ eventLinkRegistrationUrl: 'https://doity.com.br/devfest-triangulo-2024',
  place: 'Gaudium Hall',
  placeAddress: 'R. Anita, 25 Altamira, Uberlândia - MG 38411-122',
  placeCity: 'Uberlândia - MG',
- formattedDate: '02 Dezembro',
+ formattedDate: '02 Novembro',
  email: 'gdg.uberlandia@gmail.com',
  organizedBy: 'gdg', // options
- midiaKit: 'https://docs.google.com/presentation/d/1gPKzG7xZibF3wAbEA050irl2ijhsAMRKXMispSaFrys/edit#slide=id.g223b3f84614_0_31',
+ midiaKit: 'https://docs.google.com/presentation/d/1XUVpgqNhBOQQPaZe6gVE4xhfbmF5cabiZOQQIM3Qdk0/edit?usp=sharing',
  socialMedia: {
  instagram: 'https://www.instagram.com/devfesttriangulo'
  }