Merge pull request #14 from QaseemLodhi/relink-nav-links

Solve #12 and some issues

src/app/app.module.ts

@@ -1,3 +1,4 @@
+import { ErrorService } from './services/error.service';
 
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
@@ -17,6 +18,7 @@ import { IntroCardComponent } from './shared/intro-card/intro-card.component';
 import { ConferenceCardComponent } from './shared/conference-card/conference-card.component';
 import { ProjectCardComponent } from './shared/project-card/project-card.component';
 import { SocialCardComponent } from './shared/social-card/social-card.component';
+import { JoinUsComponent } from './shared/joinUs-card/joinUs-card';
 import { NavigationComponent } from './shared/navigation/navigation.component';
 import { MainBannerComponent } from './shared/main-banner/main-banner.component';
 import { PakistanCardComponent } from './shared/pakistan-card/pakistan-card.component';
@@ -49,6 +51,7 @@ import { SignupComponent } from './signup/signup.component';
     NavigationComponent,
     MainBannerComponent,
     PakistanCardComponent,
+    JoinUsComponent,
     BigCardComponent,
     SmallCardComponent,
     FooterComponent,
@@ -68,7 +71,7 @@ import { SignupComponent } from './signup/signup.component';
     HttpModule,
     RouterModule.forRoot( ROUTES, { useHash: true, preloadingStrategy: PreloadAllModules })
   ],
-  providers: [ DefaultRequestOptions, ContactusService, UserService, ConferenceService ],
+  providers: [ DefaultRequestOptions, ContactusService, ErrorService, UserService, ConferenceService ],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/app.route.ts

@@ -3,16 +3,24 @@ import { HomeComponent } from './home';
 import { NoContentComponent } from './no-content';
 import { LoginComponent } from './login';
 import { SignupComponent } from './signup';
+import {
+  MeetupCardComponent, ConferenceCardComponent, ProjectCardComponent,
+  SocialCardComponent, PartnersComponent, ContactusCardComponent, JoinUsComponent
+} from './shared/index';
 
 export const ROUTES: Routes = [
-  { path: '',      component: HomeComponent },
-  { path: 'home',  component: HomeComponent },
-  { path: 'login',  component: LoginComponent },
-  { path: 'signup',  component: SignupComponent },
-  { path: 'meetups', loadChildren: './meetups/meetups.module.ts#MeetupsModule' },
-  { path: 'conferences', loadChildren: './conferences/conferences.module.ts#ConferencesModule'},
-  { path: 'projects', loadChildren: './projects/projects.module.ts#ProjectsModule'},
+  { path: '', component: HomeComponent },
+  { path: 'home', component: HomeComponent },
+  { path: 'login', component: LoginComponent },
+  { path: 'signup', component: SignupComponent },
+  { path: 'meetups', component: MeetupCardComponent },
+  { path: 'conferences', component: ConferenceCardComponent },
+  { path: 'projects', component: ProjectCardComponent },
+  { path: 'social', component: SocialCardComponent },
+  { path: 'partners', component: PartnersComponent },
+  { path: 'contactUs', component: ContactusCardComponent },
+  { path: 'joinUs', component: JoinUsComponent },
   { path: 'presskit', loadChildren: './presskit/presskit.module.ts#PressKitModule'},
-  { path: '**',    component: NoContentComponent },
+  { path: '**', component: NoContentComponent },
 ];
 

src/app/home/home.component.html

@@ -1,16 +1,17 @@
 
 <app-main-banner></app-main-banner>
 <app-intro-card></app-intro-card>
-<app-meetup-card [currentMeetup]="currentMeetup" [prevMeetup]="prevMeetup"></app-meetup-card>
+<app-meetup-card></app-meetup-card>
 
 <app-conference-card></app-conference-card>
 
-<app-project-card [projects]="projects"></app-project-card>
+<app-project-card></app-project-card>
 
-<app-social-card [socials]="socials"></app-social-card>
+<app-social-card></app-social-card>
 
-<app-partners [partners]="partners"></app-partners>
+<app-partners></app-partners>
 
 <app-contactus-card></app-contactus-card>
+<app-join-us></app-join-us>
 
 

src/app/home/home.component.ts

@@ -5,83 +5,5 @@ import { Component, OnInit } from '@angular/core';
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.css']
 })
-export class HomeComponent  {
-  currentMeetup = '../../../assets/img/meetup-4-banner.png';
-  prevMeetup = [
-    {
-      name: 'Meetup 3',
-      location: 'folio3, Karachi'
-    },
-    {
-      name: 'Meetup 2',
-      location: '10Pearls, Karachi'
-    },
-    {
-      name: 'Meetup 1',
-      location: 'Attribe Solutions, Karachi'
-    }
-  ];
-  projects = [
-    {
-      image: 'assets/img/project-angular-pakistan.png',
-      name: 'Angular Pakistan Website',
-      details: 'The official Angular Pakistan website'
-    },
-    {
-      image: 'assets/img/project-angular-io-in-urdu.png',
-      name: 'Angular.io in Urdu',
-      details: 'Angular.io localization project in Urdu'},
-    {
-      image: 'assets/img/project-conf-resource-hub.png',
-      name: 'Conf Resource Hub',
-      details: 'A open source project to help open source conferences manage speaker resources including presentation links,' +
-      ' resources pointed by speakers etc.'}
-  ];
-  socials = [
-    {
-      platform: 'Faecbook',
-      details: [
-        '3000+ active users'
-      ],
-      icon: 'fa fa-facebook-official'
-    },
-    {
-      platform: 'Twitter',
-      details: [
-        '400+ active users'
-      ],
-      icon: 'fa fa-twitter'
-    },
-    {
-      platform: 'Github',
-      details: [
-        '5+ active projects'
-      ],
-      icon: 'fa fa-github'
-    }
-  ];
-
-  partners = [
-    {
-      name: 'Attribe Solutions',
-      logo: 'assets/img/logo-attribe-solutions.png',
-      web: 'http://attribes.com/'
-    },
-    {
-      name: '10Pearls',
-      logo: 'assets/img/logo-10pearls.png',
-      web: 'https://10pearls.com/'
-    },
-    {
-      name: 'Folio3',
-      logo: 'assets/img/logo-folio3.jpeg',
-      web: 'http://www.folio3.com/'
-    },
-    {
-      name: 'Recurship',
-      logo: 'assets/img/logo-recurship.png',
-      web: 'http://recurship.com/'
-    }
-  ];
-}
+export class HomeComponent  {}
 

src/app/shared/footer/footer.component.html

@@ -1,35 +1,6 @@
 <!--Footer-->
 <footer id="footer" class="footer">
   <div class="container text-center">
-
-    <h3>Join Us</h3>
-
-    <form class="mc-trial row">
-      <div class="form-group col-md-3 col-md-offset-2 col-sm-4">
-        <div class=" controls">
-          <input name="name" placeholder="Enter Your Name" class="form-control" type="text">
-        </div>
-      </div><!-- End email input -->
-      <div class="form-group col-md-3 col-sm-4">
-        <div class=" controls">
-          <input name="EMAIL" placeholder="Enter Your email" class="form-control" type="email">
-        </div>
-      </div><!-- End email input -->
-
-      <div class="col-md-2 col-sm-4">
-        <p>
-          <button name="submit" type="submit" class="btn btn-block btn-submit">
-            Join now <i class="fa fa-arrow-right"></i></button>
-        </p>
-      </div>
-    </form><!-- End newsletter-form -->
-    <ul class="social-links">
-      <li><a href="https://twitter.com/ng_pakistan" target="_blank"><i class="fa fa-twitter fa-fw"></i></a></li>
-      <li><a href="https://www.facebook.com/ngPakistan/" target="_blank"><i class="fa fa-facebook fa-fw"></i></a></li>
-      <li><a href="mailto:[email protected]"><i class="fa fa-google-plus fa-fw"></i></a></li>
-      <li><a href="https://github.com/angular-pakistan" target="_blank"><i class="fa fa-github fa-fw"></i></a></li>
-      <li><a href="mailto:[email protected]"><i class="fa fa-envelope fa-fw"></i></a></li>
-    </ul>
     <a [routerLink]=" ['../../presskit'] " id="press-kit">Angular Pakistan Press Kit</a>
 
     ©2017 Angular Pakistan. All rights reserved

src/app/shared/index.ts

@@ -0,0 +1,7 @@
+export { MeetupCardComponent } from './meetup-card/meetup-card.component';
+export { ConferenceCardComponent } from './conference-card/conference-card.component';
+export { ProjectCardComponent } from './project-card/project-card.component';
+export { SocialCardComponent } from './social-card/social-card.component';
+export { PartnersComponent } from './partners/partners.component';
+export { ContactusCardComponent } from './contactus-card/contactus-card.component';
+export { JoinUsComponent } from './joinUs-card/joinUs-card';

src/app/shared/joinUs-card/joinUs-card.css

@@ -0,0 +1,60 @@
+.main{
+    padding: 213px 0 20px;
+    background: #111;
+    color: #ccc;
+}
+.container{
+    padding-right: 15px;
+    padding-left: 15px;
+    margin-right: auto;
+    margin-left: auto;
+    text-align: center;
+}
+h3{
+    font-weight: 300;
+    letter-spacing: 0.05em;
+    margin: 0 0 40px;
+    font-size: 24px;
+}
+.mc-trial {
+    margin: 20px 0;
+}
+.form-group {
+    margin-bottom: 15px;
+}
+.col-md-3, .col-sm-4{
+    position: relative;
+    min-height: 1px;
+    padding-right: 15px;
+    padding-left: 15px;
+}
+.form-control {
+    border-radius: 30px;
+    border: none;
+    background: rgba(255,255,255,.1);
+    padding-left: 30px;
+    color: #e5e6e7;
+    margin-bottom: 0;
+    height: 48px;
+}
+.social-links {
+    list-style: none;
+    padding: 0;
+    margin: 30px 0 40px;
+    padding: 40px 0 0;
+    border-bottom: 1px solid rgba(255,255,255,0.2);
+}
+.social-links li {
+    display: inline-block;
+    margin: 0 25px 25px;
+    transition: all .3s ease-out;
+}
+.social-links li a {
+    color: #fff;
+    font-size: 32px;
+    line-height: 50px;
+    border-radius: 50%;
+    text-align: center;
+    -webkit-transition: all .3s ease-out;
+    transition: all .3s ease-out;
+}

src/app/shared/joinUs-card/joinUs-card.html

@@ -0,0 +1,54 @@
+<div class="section-padding main">
+    <div class="container">
+        <h3>Join Us</h3>
+
+        <form class="mc-trial row">
+            <div class="form-group col-md-3 col-md-offset-2 col-sm-4">
+                <div class=" controls">
+                    <input name="name" placeholder="Enter Your Name" class="form-control" type="text">
+                </div>
+            </div>
+            <div class="form-group col-md-3 col-sm-4">
+                <div class=" controls">
+                    <input name="EMAIL" placeholder="Enter Your email" class="form-control" type="email">
+                </div>
+            </div>
+
+            <div class="col-md-2 col-sm-4">
+                <p>
+                    <button name="submit" type="submit" class="btn btn-block btn-submit">
+                        Join now
+                        <i class="fa fa-arrow-right"></i>
+                    </button>
+                </p>
+            </div>
+        </form>
+        <ul class="social-links">
+            <li>
+                <a href="https://twitter.com/ng_pakistan" target="_blank">
+                    <i class="fa fa-twitter fa-fw"></i>
+                </a>
+            </li>
+            <li>
+                <a href="https://www.facebook.com/ngPakistan/" target="_blank">
+                    <i class="fa fa-facebook fa-fw"></i>
+                </a>
+            </li>
+            <li>
+                <a href="mailto:[email protected]">
+                    <i class="fa fa-google-plus fa-fw"></i>
+                </a>
+            </li>
+            <li>
+                <a href="https://github.com/angular-pakistan" target="_blank">
+                    <i class="fa fa-github fa-fw"></i>
+                </a>
+            </li>
+            <li>
+                <a href="mailto:[email protected]">
+                    <i class="fa fa-envelope fa-fw"></i>
+                </a>
+            </li>
+        </ul>
+    </div>
+</div>

src/app/shared/joinUs-card/joinUs-card.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-join-us',
+  templateUrl: './joinUs-card.html',
+  styleUrls: ['./joinUs-card.css']
+})
+export class JoinUsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/shared/main-banner/main-banner.component.html

@@ -10,7 +10,7 @@ <h2 class="text-dec">Official Angular JS Community in Pakistan</h2>
           <div class="intro-para text-center quote">
             <p class="big-text">We meet. We learn. We share.</p>
             <p class="small-text">#AnythingAngular #AnythingJavaScript</p>
-            <a href="#." class="btn">Join Us</a>
+            <a class="btn" [routerLink]=" ['../../joinUs']" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">Join Us</a>
           </div>
           <a href="#feature" class="mouse-hover"><div class="mouse"></div></a>
         </div>

src/app/shared/meetup-card/meetup-card.component.ts

@@ -5,14 +5,20 @@ import { Component, OnInit, Input } from '@angular/core';
   templateUrl: './meetup-card.component.html',
   styleUrls: ['./meetup-card.component.css']
 })
-export class MeetupCardComponent implements OnInit {
-
-  @Input() currentMeetup;
-  @Input() prevMeetup;
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
+export class MeetupCardComponent {
+  currentMeetup = '../../../assets/img/meetup-4-banner.png';
+  prevMeetup = [
+    {
+      name: 'Meetup 3',
+      location: 'folio3, Karachi'
+    },
+    {
+      name: 'Meetup 2',
+      location: '10Pearls, Karachi'
+    },
+    {
+      name: 'Meetup 1',
+      location: 'Attribe Solutions, Karachi'
+    }
+  ];
 }