Component home

package.json

@@ -25,7 +25,7 @@
     "core-js": "2.4.1",
     "font-awesome": "4.7.0",
     "intl": "1.2.5",
-    "jquery": "3.1.1",
+    "jquery": "^3.5.0",
     "reflect-metadata": "0.1.9",
     "rxjs": "5.1.0",
     "ts-helpers": "1.1.2",

src/app/app.component.html

@@ -1,35 +1,12 @@
 <div class="wrapper">
 
-  <!-- Início do header -->
-  <header class="main-header">
-  <nav class="navbar navbar-static-top">
-    <div class="container">
-      <div class="navbar-header">
-        <a class="navbar-brand"><b>Meat</b></a>
-        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
-          <i class="fa fa-bars"></i>
-        </button>
-      </div>
-
-      <!-- Collect the nav links, forms, and other content for toggling -->
-      <div class="collapse navbar-collapse pull-left" id="navbar-collapse">
-        <ul class="nav navbar-nav">
-            <li class="active"><a href="#">Restaurantes</a></li>
-            <li><a href="#">Sobre</a></li>
-        </ul>
-      </div>
-      <!-- /.navbar-collapse -->
-
-    </div>
-  </nav>
-  </header>
-  <!-- Fim do header -->
+  <mt-header></mt-header>
 
   <!-- Full Width Column -->
   <div class="content-wrapper">
     <div class="container">
 
-      {{content}}
+      <mt-home></mt-home>
 
     </div>
   </div>

src/app/app.module.ts

@@ -4,12 +4,16 @@ import { HttpModule } from '@angular/http';
 import { RouterModule } from '@angular/router';
 
 
-import { AppComponent } from './app.component'
+import { AppComponent } from './app.component';
+import { HeaderComponent } from './header/header.component';
+import { HomeComponent } from './home/home.component'
 
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    HeaderComponent,
+    HomeComponent
   ],
   imports: [
     BrowserModule,

src/app/header/header.component.html

@@ -0,0 +1,24 @@
+<!-- Início do header -->
+<header class="main-header">
+  <nav class="navbar navbar-static-top">
+    <div class="container">
+      <div class="navbar-header">
+        <a class="navbar-brand"><b>Meat</b></a>
+        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
+          <i class="fa fa-bars"></i>
+        </button>
+      </div>
+
+      <!-- Collect the nav links, forms, and other content for toggling -->
+      <div class="collapse navbar-collapse pull-left" id="navbar-collapse">
+        <ul class="nav navbar-nav">
+            <li class="active"><a href="#">Restaurantes</a></li>
+            <li><a href="#">Sobre</a></li>
+        </ul>
+      </div>
+      <!-- /.navbar-collapse -->
+
+    </div>
+  </nav>
+  </header>
+  <!-- Fim do header -->

src/app/header/header.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'mt-header',
+  templateUrl: './header.component.html'
+})
+export class HeaderComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/home/home.component.html

@@ -0,0 +1,16 @@
+<!-- INÍCIO DO CONTEÚDO -->
+<section class="content-header">
+</section>
+
+<section class="content">
+
+  <div class="jumbotron welcome-jumbotron">
+     <h1>Bem vindo ao Meat!</h1>
+     <p>
+       Está com fome? Peça e receba em casa.
+     </p>
+     <a class="btn btn-primary btn-lg" href="main-restaurants.html">Ver Restaurantes</a>
+  </div>
+
+</section>
+<!-- FIM DO CONTEÚDO -->

src/app/home/home.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'mt-home',
+  templateUrl: './home.component.html'
+})
+export class HomeComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}