feat: adicionando base site 2024

gdg-uberlandia · Aug 26, 2024 · 0370020 · 0370020
1 parent acb624d
commit 0370020
Show file tree

Hide file tree

Showing 15 changed files with 120 additions and 136 deletions.
diff --git a/public/banner/logo big.png b/public/banner/logo big.png
diff --git a/public/banner/title.png b/public/banner/title.png
diff --git a/public/banner/title.svg b/public/banner/title.svg
diff --git a/public/videos/last-year-video.mp4 b/public/videos/last-year-video.mp4
diff --git a/src/components/devfest-triangulo-2023/countdown/CountdownTimer.module.css b/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%,

diff --git a/src/components/devfest-triangulo-2023/countdown/countdown-timer.tsx b/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({

diff --git a/src/components/devfest-triangulo-2023/older-events-section/OlderEvents.module.css b/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;

diff --git a/src/components/devfest-triangulo-2023/older-events-section/older-events-section.tsx b/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>
 
 
 

diff --git a/src/components/headers/header.module.css b/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;
   }
 }
diff --git a/src/components/headers/home-header.tsx b/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",

diff --git a/src/components/hero-section/index.tsx b/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>
   )
 }
diff --git a/src/components/hero-section/styles.module.css b/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;

diff --git a/src/helpers/config.ts b/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: '[email protected]',
   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'
   }