Merge pull request #65 from Nicoly-Almeida/programacao

Programacao

src/app/app-routing.module.ts

@@ -1,10 +1,21 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-
-const routes: Routes = [];
-
-@NgModule({
-  imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
-})
-export class AppRoutingModule { }
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { LayoutComponent } from './pages/layout/layout.component';
+import { ProgramacaoComponent } from './pages/programacao/programacao.component';
+
+const routes: Routes = [
+  {
+    path: "",
+    component: LayoutComponent
+  },
+  {
+    path: "programacao",
+    component: ProgramacaoComponent
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }

src/app/app.component.html

@@ -1,6 +1,4 @@
-<app-navbar></app-navbar>
-<app-header></app-header>
-<app-evento></app-evento>
-<app-palestrantes></app-palestrantes>
-<app-parcerias></app-parcerias>
+<app-navbar></app-navbar>
+<app-header></app-header>
+<router-outlet></router-outlet>
 <app-footer></app-footer>

src/app/app.module.ts

@@ -1,42 +1,52 @@
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { AppRoutingModule } from './app-routing.module';
-import { AppComponent } from './app.component';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { HttpClientModule } from '@angular/common/http';
-import { MaterialModule } from './shared/material/material.module';
-import { NavbarComponent } from './components/navbar/navbar.component';
-import { HeaderComponent } from './pages/header/header.component';
-import { EventoComponent } from './pages/evento/evento.component';
-import { PalestrantesComponent } from './pages/palestrantes/palestrantes.component';
-import { CarouselModule } from 'primeng/carousel';
-import { ParceriasComponent } from './pages/parcerias/parcerias.component';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { HttpClientModule } from '@angular/common/http';
+import { MaterialModule } from './shared/material/material.module';
+import { NavbarComponent } from './components/navbar/navbar.component';
+import { HeaderComponent } from './pages/header/header.component';
+import { EventoComponent } from './pages/evento/evento.component';
+import { PalestrantesComponent } from './pages/palestrantes/palestrantes.component';
+import { CarouselModule } from 'primeng/carousel';
+import { ParceriasComponent } from './pages/parcerias/parcerias.component';
 import { FooterComponent } from './components/footer/footer.component';
-
-
-@NgModule({
-  declarations: [
-    AppComponent,
-    NavbarComponent,
-    HeaderComponent,
-    EventoComponent,
-    PalestrantesComponent,
-    ParceriasComponent,
-    FooterComponent
-  ],
-  imports: [
-    BrowserModule,
-    AppRoutingModule,
-    BrowserAnimationsModule,
-    FormsModule,
-    ReactiveFormsModule,
-    HttpClientModule,
-    MaterialModule,
-    CarouselModule
-  ],
-  providers: [],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  bootstrap: [AppComponent]
-})
+import { VoluntariosComponent } from './pages/voluntarios/voluntarios.component';
+import { LocalComponent } from './pages/local/local.component';
+import { PatrocinioComponent } from './pages/patrocinio/patrocinio.component';
+import { ProgramacaoComponent } from './pages/programacao/programacao.component';
+import { LayoutComponent } from './pages/layout/layout.component';
+
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    NavbarComponent,
+    HeaderComponent,
+    EventoComponent,
+    PalestrantesComponent,
+    ParceriasComponent,
+    FooterComponent,
+    VoluntariosComponent,
+    LocalComponent,
+    PatrocinioComponent,
+    ProgramacaoComponent,
+    LayoutComponent
+  ],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    BrowserAnimationsModule,
+    FormsModule,
+    ReactiveFormsModule,
+    HttpClientModule,
+    MaterialModule,
+    CarouselModule
+  ],
+  providers: [],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  bootstrap: [AppComponent]
+})
 export class AppModule { }

src/app/components/navbar/navbar.component.html

@@ -9,9 +9,9 @@
           <li class="nav-item me-5">
             <a class="nav-link" href="#1">O Evento</a>
           </li>
-          <!-- <li class="nav-item me-5">
-            <a class="nav-link" href="#2">Programação</a>
-          </li> -->
+          <li class="nav-item me-5" routerLink="/programacao" style="cursor:pointer">
+            <a class="nav-link">Programação</a>
+          </li>
           <li class="nav-item me-5">
             <a class="nav-link" href="#3">Palestrantes</a>
           </li>

src/app/components/navbar/navbar.component.scss

@@ -1,32 +1,32 @@
-a {
-    color: var(--Black, #303031);
-    font-family: 'Product Sans', sans-serif;
-    font-size: 20px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: normal;
-    letter-spacing: -0.4px;
-}
-
-.nav-item{
-    display: flex;
-    align-content: center;
-    flex-wrap: wrap;
-}
-
-.navbar{
-    background-color: #FBBC04 !important;
-}
-
-.primary_button{
-    background-color: #4285F4 !important;
-    color: #FFF !important;
-    font-family: 'Product Sans', sans-serif !important;
-    font-size: 18px !important;
-    font-style: normal;
-    line-height: normal;
-    letter-spacing: -0.36px;
-    padding: 12px 16px;
-    height: 100%;
-}
-
+a {
+    color: #FFF;
+    font-family: 'Product Sans', sans-serif;
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: normal;
+    letter-spacing: -0.4px;
+}
+
+.nav-item{
+    display: flex;
+    align-content: center;
+    flex-wrap: wrap;
+}
+
+.navbar{
+    background-color: #FBBC04 !important;
+}
+
+.primary_button{
+    background-color: #4285F4 !important;
+    color: #FFF !important;
+    font-family: 'Product Sans', sans-serif !important;
+    font-size: 18px !important;
+    font-style: normal;
+    line-height: normal;
+    letter-spacing: -0.36px;
+    padding: 12px 16px;
+    height: 100%;
+}
+

src/app/pages/evento/evento.component.html

@@ -1,28 +1,28 @@
-<div class="me-lg-5 ms-lg-5 me-md-3 ms-md-3 me-2 ms-2 mt-lg-5 mt-3" id="1">
-    <div class="row">
-        <div class="col-md-6">
-           <div class="d-flex titulo">
-                <img src="/assets/icon_title.svg" class="icon_title"/>
-                <div class="ms-4 d-flex align-content-center flex-wrap">
-                    <h1> O Evento </h1> 
-                </div>
-            </div> 
-            <div>
-                <h2 style="margin-top: 24px; margin-bottom: 24px;"> Não sei, só sei que foi assim</h2>
-                <p>
-                    DevFests são eventos de tecnologia organizados anualmente por comunidades de desenvolvedores, os Google Developer Groups (GDGs), no mundo inteiro.
-                </p>
-                <p>
-                    Nos últimos anos, as comunidades dos Estados do Nordeste resolveram se unir para realizar o <strong>DevFest Nordeste</strong>, dando destaque aos talentos locais e também promovendo a troca de conhecimentos entre os participantes.
-                </p>
-                <p>
-                    O evento tem como público alvo profissionais de tecnologia, estudantes, e empresários, e aborda tanto conhecimentos técnicos, quanto questões como diversidade, soft skills e experiências profissionais.
-                </p>
-            </div>
-        </div>
-        <div class="col-md-6 d-none d-md-block">
-            <img src="/assets/image_evento.svg" class="image_nordeste">
-        </div>
-    </div>
-
-</div>
+<div class="me-lg-5 ms-lg-5 me-md-3 ms-md-3 me-2 ms-2 mt-lg-5 mt-3" id="1">
+    <div class="row">
+        <div class="col-md-6">
+           <div class="d-flex titulo">
+                <img src="/assets/icon_title.svg" class="icon_title"/>
+                <div class="ms-4 d-flex align-content-center flex-wrap">
+                    <h1> O Evento </h1> 
+                </div>
+            </div> 
+            <div>
+                <h2 style="margin-top: 24px; margin-bottom: 24px;"> Não sei, só sei que foi assim</h2>
+                <p>
+                    DevFests são eventos de tecnologia organizados anualmente por comunidades de desenvolvedores, os Google Developer Groups (GDGs), no mundo inteiro.
+                </p>
+                <p>
+                    Nos últimos anos, as comunidades dos Estados do Nordeste resolveram se unir para realizar o <strong>DevFest Nordeste</strong>, dando destaque aos talentos locais e também promovendo a troca de conhecimentos entre os participantes.
+                </p>
+                <p>
+                    O evento tem como público alvo profissionais de tecnologia, estudantes, e empresários, e aborda tanto conhecimentos técnicos, quanto questões como diversidade, soft skills e experiências profissionais.
+                </p>
+            </div>
+        </div>
+        <div class="col-md-6 d-none d-md-block">
+            <img src="/assets/image_evento.svg" class="image_nordeste">
+        </div>
+    </div>
+
+</div>

src/app/pages/header/header.component.html

@@ -2,5 +2,4 @@
     <a href="https://www.eventbrite.com.br/e/729800030537/" target="_blank">
        <img [src]="imagePath" class="image"> 
     </a>
-
-</div>
+</div>

src/app/pages/layout/layout.component.html

@@ -0,0 +1,8 @@
+<div class="d-flex justify-content-center" style="margin-top: -80px">
+    <a routerLink="/programacao" style="cursor:pointer">
+        <img src="/assets/programacao.png" width="100%"> 
+    </a>
+</div>
+<app-evento></app-evento>
+<app-palestrantes></app-palestrantes>
+<app-parcerias></app-parcerias>

src/app/pages/layout/layout.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LayoutComponent } from './layout.component';
+
+describe('LayoutComponent', () => {
+  let component: LayoutComponent;
+  let fixture: ComponentFixture<LayoutComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [LayoutComponent]
+    });
+    fixture = TestBed.createComponent(LayoutComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/layout/layout.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-layout',
+  templateUrl: './layout.component.html',
+  styleUrls: ['./layout.component.scss']
+})
+export class LayoutComponent {
+
+}

src/app/pages/local/local.component.html

@@ -0,0 +1 @@
+<p>local works!</p>

src/app/pages/local/local.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LocalComponent } from './local.component';
+
+describe('LocalComponent', () => {
+  let component: LocalComponent;
+  let fixture: ComponentFixture<LocalComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [LocalComponent]
+    });
+    fixture = TestBed.createComponent(LocalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/local/local.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-local',
+  templateUrl: './local.component.html',
+  styleUrls: ['./local.component.scss']
+})
+export class LocalComponent {
+
+}