feat(hero): add hero

Author: marcjulian

src/app/components/hero/hero.component.html

@@ -0,0 +1,12 @@
+<section id="hero">
+  <ion-grid fixed>
+    <ion-row>
+      <ion-col size="12" class="ion-text-center">
+        <ion-text color="light">
+          <h1 class="fivethree-title">We are fivethree.</h1>
+          <h2 class="fivethree-subtitle">Cross-platform App & Backend Developer</h2>
+        </ion-text>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+</section>

src/app/components/hero/hero.component.scss

@@ -0,0 +1,19 @@
+#hero {
+  height: 50vh;
+  background: var(--ion-color-dark);
+
+  .fivethree-title {
+    display: block;
+    font-weight: 500;
+    font-size: 6rem;
+    letter-spacing: 3px;
+    padding: 3rem 0 2rem;
+    margin-top: 2rem;
+  }
+
+  .fivethree-subtitle {
+    padding-bottom: 5rem;
+    line-height: 2.8rem;
+    font-weight: 400;
+  }
+}

src/app/components/hero/hero.component.spec.ts

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

src/app/components/hero/hero.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-hero',
+  templateUrl: './hero.component.html',
+  styleUrls: ['./hero.component.scss'],
+})
+export class HeroComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {}
+
+}

src/app/components/hero/hero.module.ts

@@ -0,0 +1,12 @@
+import { HeroComponent } from './hero.component';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
+
+@NgModule({
+  declarations: [HeroComponent],
+  imports: [CommonModule, IonicModule],
+  exports: [HeroComponent],
+  providers: []
+})
+export class HeroModule {}

src/app/pages/home/home.module.ts

@@ -6,6 +6,7 @@ import { RouterModule } from '@angular/router';
 
 import { HomePage } from './home.page';
 import { ComponentsModule } from '@components/components.module';
+import { HeroModule } from '@components/hero/hero.module';
 
 @NgModule({
   imports: [
@@ -18,7 +19,8 @@ import { ComponentsModule } from '@components/components.module';
         component: HomePage
       }
     ]),
-    ComponentsModule
+    ComponentsModule,
+    HeroModule
   ],
   declarations: [HomePage]
 })

src/app/pages/home/home.page.html

@@ -1,5 +1,6 @@
 <ion-content>
     <app-header></app-header>
+    <app-hero></app-hero>
 
     <app-about></app-about>
     <app-team></app-team>