Add next events section

angular-bolivia · May 28, 2024 · 282f2a0 · 282f2a0
1 parent 466a6e0
commit 282f2a0
Show file tree

Hide file tree

Showing 9 changed files with 94 additions and 17 deletions.
diff --git a/public/img/angular-revolution.jpeg b/public/img/angular-revolution.jpeg
diff --git a/public/img/explorando-angular.png b/public/img/explorando-angular.png
diff --git a/src/components/home/join-the-team/join-the-team.component.ts b/src/components/home/join-the-team/join-the-team.component.ts
@@ -62,9 +62,7 @@ import { Component } from '@angular/core';
               <div class="join-the-team__card-action">
                 <a
                   class="main-button"
-                  href="https://lu.ma/AngularRevolution-MC4"
-                  rel="noopener noreferrer"
-                  target="_blank"
+                  href="#next-events"
                 >
                   {{ 'Inscríbete al próximo evento' | uppercase }}
                 </a>

diff --git a/src/components/home/next-events/next-events.component.ts b/src/components/home/next-events/next-events.component.ts
@@ -0,0 +1,47 @@
+import { NgFor, UpperCasePipe } from '@angular/common';
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ng-next-events',
+  standalone: true,
+  imports: [NgFor, UpperCasePipe],
+  template: `
+    <div class="next-events">
+      <div class="container">
+        <h2>{{ 'Próximos eventos' | uppercase }}</h2>
+        <div class="next-events__cards">
+          <div *ngFor="let event of events" class="next-events__card">
+            <img
+              width="380"
+              height="380"
+              [alt]="event.title"
+              [src]="event.image"
+            />
+            <a
+              class="main-button"
+              rel="noopener noreferrer"
+              target="_blank"
+              [href]="event.link"
+            >
+              {{ 'Inscríbete al evento' | uppercase }}
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+})
+export class NextEventsComponent {
+  events = [
+    {
+      title: 'Explorando Angular 18',
+      link: 'https://lu.ma/0m25cmh4',
+      image: '/img/explorando-angular.png',
+    },
+    {
+      title: 'Angular Revolution',
+      link: 'https://lu.ma/AngularRevolution-MC4',
+      image: '/img/angular-revolution.jpeg',
+    },
+  ];
+}
diff --git a/src/components/layout/navbar/navbar.component.ts b/src/components/layout/navbar/navbar.component.ts
@@ -9,19 +9,16 @@ import { Component } from '@angular/core';
     <div class="navbar">
       <div class="container">
         <div class="navbar__content">
-          <img
-            src="/img/ng-logo.svg"
-            width="34"
-            height="36"
-            alt="Logo principal de Angular Bolivia"
-          />
+          <a href="/">
+            <img
+              src="/img/ng-logo.svg"
+              width="34"
+              height="36"
+              alt="Logo principal de Angular Bolivia"
+            />
+          </a>
           <div class="navbar__links">
-            <a
-              class="main-button"
-              href="https://lu.ma/AngularRevolution-MC4"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
+            <a class="main-button" href="#next-events">
               <span class="navbar__mobile-text">
                 {{ 'Inscríbete' | uppercase }}
               </span>

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -6,6 +6,7 @@ import '../styles/home/banner.scss';
 import '../styles/home/contact.scss';
 import '../styles/home/highlighted-events.scss';
 import '../styles/home/join-the-team.scss';
+import '../styles/home/next-events.scss';
 import '../styles/home/organizers.scss';
 
 import GoogleAnalytics from '../components/google-analytics/google-analytics.astro';
@@ -15,6 +16,7 @@ import { BannerComponent } from '../components/home/banner/banner.component';
 import { ContactComponent } from '../components/home/contact/contact.component';
 import { HighlightedEventsComponent } from '../components/home/highlighted-events/highlighted-events.component';
 import { JoinTheTeamComponent } from '../components/home/join-the-team/join-the-team.component';
+import { NextEventsComponent } from '../components/home/next-events/next-events.component';
 import { OrganizersComponent } from '../components/home/organizers/organizers.component';
 ---
 
@@ -43,7 +45,8 @@ import { OrganizersComponent } from '../components/home/organizers/organizers.co
   <body>
     <NavbarComponent />
     <BannerComponent />
-    <div class="multi-section-container">
+    <div id="next-events" class="multi-section-container">
+      <NextEventsComponent />
       <HighlightedEventsComponent />
       <AboutUsComponent />
     </div>

diff --git a/src/styles/global.scss b/src/styles/global.scss
@@ -13,6 +13,7 @@
   color: #fff;
   font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
   font-synthesis: none;
+  scroll-behavior: smooth;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -21,7 +22,7 @@
 
 body {
   margin: 0;
-  min-height: 100vh;
+  min-height: 100vdh;
 }
 
 h1,

diff --git a/src/styles/home/highlighted-events.scss b/src/styles/home/highlighted-events.scss
@@ -1,4 +1,8 @@
 .highlighted-events {
+  border: 1px solid #2b2a2a;
+  border-left: none;
+  border-right: none;
+
   .highlighted-events__content {
     display: flex;
     flex-direction: column;

diff --git a/src/styles/home/next-events.scss b/src/styles/home/next-events.scss
@@ -0,0 +1,27 @@
+.next-events {
+  padding: 64px 0;
+
+  h2 {
+    font-size: 24px;
+    margin-block-end: 24px;
+    text-align: center;
+  }
+
+  .next-events__cards {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 40px;
+    justify-content: space-around;
+
+    .next-events__card {
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+
+      img {
+        max-width: 100%;
+        object-fit: cover;
+      }
+    }
+  }
+}