Adding pricing page (#10)

* Adding pricing page

* Fixing lint error

* Fixing broken test

src/app/_components/nav/nav.component.html

@@ -7,6 +7,7 @@
 
   <a mat-button [routerLink]="['/about']">About</a>
   <a mat-button [routerLink]="['/demo']">Demo</a>
+  <a mat-button [routerLink]="['/pricing']">Pricing</a>
   <a mat-button [routerLink]="['/docs']">Docs</a>
   <a href="https://rapidapi.com/zestfuldata/api/Recipe%20and%20Ingredient%20Analysis" mat-button color="accent">Get Started</a>
 </mat-toolbar>
@@ -29,6 +30,10 @@
         <a [routerLink]="['/about']" (click)="sidenav.toggle()">About</a>
         <br />
       </p>
+      <p class="sidenav-button">
+        <a [routerLink]="['/pricing']" (click)="sidenav.toggle()">Pricing</a>
+        <br />
+      </p>
       <p class="sidenav-button">
         <a [routerLink]="['/demo']" (click)="sidenav.toggle()">Demo</a>
         <br />

src/app/app-routing.module.ts

@@ -4,6 +4,7 @@ import { RouterModule, Routes } from '@angular/router';
 import { AboutComponent } from './public/about/about.component';
 import { DemoComponent } from './public/demo/demo.component';
 import { DocsComponent } from './public/docs/docs.component';
+import { PricingComponent } from './public/pricing/pricing.component';
 import { TermsOfServiceComponent } from './public/terms-of-service/terms-of-service.component';
 
 const appRoutes: Routes = [
@@ -17,6 +18,11 @@ const appRoutes: Routes = [
     component: DemoComponent,
     pathMatch: 'full',
   },
+  {
+    path: 'pricing',
+    component: PricingComponent,
+    pathMatch: 'full',
+  },
   {
     path: 'docs',
     component: DocsComponent,
@@ -34,7 +40,7 @@ const appRoutes: Routes = [
   },
   {
     path: '**',
-    component: DemoComponent,
+    component: AboutComponent,
   },
 ];
 

src/app/app.module.ts

@@ -39,6 +39,7 @@ import { AboutComponent } from './public/about/about.component';
 import { FeatureCardComponent } from './_components/feature-card/feature-card.component';
 import { DocsComponent } from './public/docs/docs.component';
 import { TermsOfServiceComponent } from './public/terms-of-service/terms-of-service.component';
+import { PricingComponent } from './public/pricing/pricing.component';
 
 @NgModule({
   declarations: [
@@ -51,6 +52,7 @@ import { TermsOfServiceComponent } from './public/terms-of-service/terms-of-serv
     FeatureCardComponent,
     DocsComponent,
     TermsOfServiceComponent,
+    PricingComponent,
   ],
   imports: [
     AppRoutingModule,

src/app/public/pricing/pricing.component.html

@@ -0,0 +1,53 @@
+<h1>Pricing</h1>
+
+<div class="flex-grid">
+  <div class="col">
+    <mat-card>
+      <mat-card-title>Trial</mat-card-title>
+      <mat-card-subtitle>Free</mat-card-subtitle>
+      <mat-card-content>
+        <ul>
+          <li>
+            <i class="icon-li icon-ok"></i>50 ingredient parses per day</li>
+          <li>E-mail support</li>
+        </ul>
+      </mat-card-content>
+      <mat-card-actions>
+        <a href="https://rapidapi.com/zestfuldata/api/Recipe%20and%20Ingredient%20Analysis" mat-flat-button color="primary">Try for Free</a>
+      </mat-card-actions>
+    </mat-card>
+  </div>
+  <div class="col">
+    <mat-card class="preferred-plan">
+      <mat-card-title>Professional</mat-card-title>
+      <mat-card-subtitle>$3 per 1,000 ingredients parsed</mat-card-subtitle>
+      <mat-card-content>
+        <ul>
+          <li>Unlimited ingredient parses</li>
+          <li>Priority e-mail and phone support</li>
+          <li>Managed hosting</li>
+        </ul>
+      </mat-card-content>
+      <mat-card-actions>
+        <a class="preferred-plan" href="https://rapidapi.com/zestfuldata/api/Recipe%20and%20Ingredient%20Analysis" mat-raised-button
+          color="accent">Sign Up Now</a>
+      </mat-card-actions>
+    </mat-card>
+  </div>
+  <div class="col">
+    <mat-card>
+      <mat-card-title>Enterprise</mat-card-title>
+      <mat-card-subtitle>Flat fee</mat-card-subtitle>
+      <mat-card-content>
+        <ul>
+          <li>Self-hosted instance</li>
+          <li>Unlimited ingredient parses</li>
+          <li>Priority e-mail and phone support</li>
+        </ul>
+      </mat-card-content>
+      <mat-card-actions>
+        <a href="mailto:contact@zestfuldata.com" mat-flat-button color="primary">Contact Us</a>
+      </mat-card-actions>
+    </mat-card>
+  </div>
+</div>

src/app/public/pricing/pricing.component.scss

@@ -0,0 +1,91 @@
+@import '~styles/breakpoints';
+
+h2 {
+  margin-top: 15px;
+  margin-bottom: 30px;
+  @include respond-to('small') {
+    margin-bottom: 10px;
+  }
+}
+
+.flex-grid {
+  display: flex;
+  justify-content: space-between;
+  @include respond-to('small') {
+    display: block;
+  }
+}
+
+.col {
+  flex: 1;
+  width: 5%;
+  margin-bottom: 50px;
+  @include respond-to('small') {
+    width: 100%;
+    margin-bottom: 20px;
+    padding-top: 30px;
+  }
+}
+
+mat-card {
+  width: 325px;
+  margin-top: 55px;
+  @include respond-to('small') {
+    margin-top: 0px;
+    width: 100%;
+  }
+}
+
+mat-card.preferred-plan {
+  width: 400px;
+  height: 340px;
+  @include respond-to('small') {
+    width: 100%;
+  }
+}
+
+mat-card-title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.preferred-plan mat-card-title {
+  font-size: 20pt;
+}
+
+mat-card-subtitle {
+  font-size: 12pt;
+}
+
+.preferred-plan mat-card-subtitle {
+  font-size: 13pt;
+}
+
+mat-card-content {
+  @include respond-to('small') {
+    padding-left: 15px;
+  }
+}
+
+mat-card-content li {
+  margin-left: 4px;
+  font-size: 12pt;
+}
+
+.preferred-plan mat-card-content li {
+  margin-left: 4px;
+  font-size: 14pt;
+}
+
+mat-card-actions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+mat-card-actions a.preferred-plan {
+  font-size: 16pt;
+  margin-top: 20px;
+  padding: 20px;
+}

src/app/public/pricing/pricing.component.spec.ts

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

src/app/public/pricing/pricing.component.ts

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