Design review for demo

jadjoubran · Dec 29, 2015 · f41ad9f · f41ad9f
1 parent cc5279e
commit f41ad9f
Show file tree

Hide file tree

Showing 21 changed files with 479 additions and 546 deletions.
diff --git a/angular/app/footer/footer.html b/angular/app/footer/footer.html
@@ -1,8 +1,8 @@
 <md-content class="Page-Container Footer" ng-controller="FooterController as vm" layout-align="center center">
-	<md-icon md-svg-src="/img/icons/logo.svg"></md-icon>
+	<md-icon md-svg-src="/img/icons/logo-grey.svg"></md-icon>
 	<br/>
 	<br/>
-	<div>
+	<div class="Footer-text">
 		An open source project by <a href="https://github.com/jadjoubran" class="Footer-link" target="_blank"><strong>Jad Joubran</strong></a>.
 		Design by <a href="https://www.linkedin.com/in/nicolesaidy" class="Footer-link" target="_blank"><strong>Nicole Saidy</strong></a>
 	</div>

diff --git a/angular/app/footer/footer.less b/angular/app/footer/footer.less
@@ -2,12 +2,17 @@
 
 .Footer{
     text-align: center;
-    background-color: lighten(@light-gray, 25%);
+    background-color: @background;
     padding-top: 30px;
     padding-bottom: 30px;
 }
 
+.Footer-text{
+    opacity: 0.6;
+    color: @grey;
+}
+
 .Footer-link{
     text-decoration: none;
-    color: @navy;
+    color: @grey;
 }
diff --git a/angular/app/header/header.html b/angular/app/header/header.html
@@ -3,11 +3,11 @@
 		<div flex="80" flex-offset="10">
 			<div class="DemoHeader-container">
 				<div layout="row" layout-align="space-between">
-					<img src="img/laravel-angular-logo.svg" class="DemoHeader-logo"/>
+					<img src="img/icons/logo.svg" class="DemoHeader-logo"/>
 					<div>
-						<a class="DemoHeader-link" href="https://laravel-angular.readme.io" target="_blank">Docs</a>
-						<a class="DemoHeader-link" href="">Screencasts</a>
-						<a class="DemoHeader-link" href="https://github.com/jadjoubran/laravel5-angular-material-starter" target="_blank">Github</a>
+						<a class="DemoHeader-link md-subhead" href="https://laravel-angular.readme.io" target="_blank">Docs</a>
+						<a class="DemoHeader-link md-subhead" href="">Screencasts</a>
+						<a class="DemoHeader-link md-subhead" href="https://github.com/jadjoubran/laravel5-angular-material-starter" target="_blank">Github</a>
 					</div>
 				</div>
 			</div>

diff --git a/angular/app/header/header.less b/angular/app/header/header.less
@@ -1,7 +1,7 @@
 @import "../../material/project";
 
 .DemoHeader {
-    height: 62px;
+    height: 64px;
     background-color: white;
     position: absolute;
     top: 0;
@@ -15,13 +15,13 @@
 }
 
 .DemoHeader-logo {
-    width: 150px;
-    height: 40px;
+    width: 171px;
+    height: 41px;
 }
 
 .DemoHeader-link{
     text-decoration: none;
-    color: @dark-gray;
+    color: @black;
     padding: 10px 20px;
     display: inline-block;
     transition: 250ms background-color;

diff --git a/angular/app/landing/landing.html b/angular/app/landing/landing.html
@@ -1,15 +1,15 @@
 <div class="Page-Container Landing" ng-controller="LandingController as vm">
 	<div layout="column" class="Landing-cover" layout-align="center center">
 		<div class="md-body-1 Landing-subtitle">A starter project for Laravel & Angular using Angular Material.</div>
-		<h1 class="md-display-1 Landing-heading">Laravel Angular Material Starter</h1>
+		<h1 class="md-display-3 Landing-heading">Laravel Angular Material Starter</h1>
 		<md-button class="md-raised md-large Landing-getStarted" href="https://laravel-angular.readme.io/docs/install" target="_blank">Get Started</md-button>
 	</div>
 
 	<div class="Landing-laravelAngular">
 		<div class="Landing-ampersand">&amp;</div>
 		<div layout="row">
 			<div flex="50" class="Landing-laravel" layout-align="center center">
-				<h2 class="md-display-1 Landing-laravelAngular-title">Laravel</h2>
+				<h2 class="md-display-2 Landing-laravelAngular-title">Laravel</h2>
 				<div class="md-body-1 Landing-laravelAngular-subtitle">{{vm.laravel_description}}</div>
 				<br/>
 				<div class="DemoCode">
@@ -26,7 +26,7 @@ <h2 class="md-display-1 Landing-laravelAngular-title">Laravel</h2>
 				</div>
 			</div>
 			<div flex="50" class="Landing-angular" layout-align="center center">
-				<h2 class="md-display-1 Landing-laravelAngular-title">Angular</h2>
+				<h2 class="md-display-2 Landing-laravelAngular-title">Angular</h2>
 				<div class="md-body-1 Landing-laravelAngular-subtitle">{{vm.angular_description}}</div>
 				<br/>
 				<div class="DemoCode">
@@ -44,11 +44,38 @@ <h2 class="md-display-1 Landing-laravelAngular-title">Angular</h2>
 
 	<div class="Landing-features" layout-align="center center">
 		<h1 class="md-display-1">Laravel Angular Material Starter</h1>
-		<div class="md-body-1">
+		<div class="md-body-1 Landing-featuresDescription">
 			Laravel Angular Material Starter provides you with many features required when working with Laravel & Angular. Such as Json Web Token authentication, Angular generators and many more..
 		</div>
 		<br/>
-		<div>List of features coming soon..</div>
+		<div>
+			<div flex="80" flex-offset="10">
+				<div layout="row" layout-align="space-between">
+					<div flex="33">
+						<div class="Landing-featuresEntry Landing-featuresEntry--restful">
+							<md-icon md-svg-src="/img/icons/restful-api.svg" class="Landing-featuresEntry-icon"></md-icon>
+						</div>
+						<div class="md-headline Landing-featuresTitle">RESTful API</div>
+						<div class="md-subhead Landing-featuresDescription">Build consistent REST APIs and call them fluently using JavaScript, without having to worry about validation errors.</div>
+					</div>
+					<div flex="33">
+						<div class="Landing-featuresEntry Landing-featuresEntry--jwt">
+							<md-icon md-svg-src="/img/icons/json-webtoken.svg" class="Landing-featuresEntry-icon"></md-icon>
+						</div>
+						<div class="md-headline Landing-featuresTitle">Json Web Token Authentication</div>
+						<div class="md-subhead Landing-featuresDescription">Get an out-of-the-box JWT Authentication in your app.</div>
+					</div>
+					<div flex="33">
+						<div class="Landing-featuresEntry Landing-featuresEntry--generators">
+							<md-icon md-svg-src="/img/icons/angular-generators.svg" class="Landing-featuresEntry-icon"></md-icon>
+						</div>
+						<div class="md-headline Landing-featuresTitle">Angular Generators</div>
+						<div class="md-subhead Landing-featuresDescription">Generate angular features, dialogs, directives, services, filters & configs just like you're used to.</div>
+					</div>
+
+				</div>
+			</div>
+		</div>
 		<br/>
 		<br/>
 	</div>

diff --git a/angular/app/landing/landing.less b/angular/app/landing/landing.less
@@ -17,8 +17,19 @@
     color: white;
 }
 
+.Landing-heading{
+    color: white;
+    letter-spacing: -1px;
+    margin-top: 20px;
+}
+
+.Landing-subtitle{
+    opacity: 0.7;
+}
+
 .Landing-getStarted{
     padding: 10px 12px;
+    font-weight: bold;
 }
 
 .Landing-laravelAngular{
@@ -36,21 +47,24 @@
 }
 
 .Landing-angular{
-    background-color: lighten(@light-gray, 20%);
+    background-color: @background;
+    border-left: 1px solid @border;
 }
 
 .Landing-laravel,
 .Landing-angular{
     text-align: center;
     color: @navy;
+    border-bottom: 1px solid @border;
 }
 
 .Landing-laravelAngular-title{
     padding-top: 35px;
+    margin-bottom: 15px;
 }
 
 .Landing-laravelAngular-subtitle{
-    color: @gray;
+    color: @black;
 }
 
 .DemoCode{
@@ -74,11 +88,11 @@
 }
 
 .DemoCode-comment{
-    color: @light-gray;
+    color: @grey;
 }
 
 .DemoCode-operator{
-    color: @gray;
+    color: @grey;
 }
 
 .DemoCode-string{
@@ -91,5 +105,45 @@
 
 .Landing-features{
     text-align: center;
-    margin-top: 60px;
+    margin: 60px;
+}
+
+.Landing-featuresDescription{
+    line-height: 28px;
+    width: 80%;
+    margin: 0 auto;
+}
+
+.Landing-featuresEntry{
+    width: 176px;
+    height: 176px;
+    border-radius: 50%;
+    margin: 0 auto 20px;
+}
+
+.Landing-featuresEntry-icon{
+    width: 50%;
+    height: 100%;
+}
+
+.Landing-featuresTitle{
+    color: @navy;
+}
+
+.Landing-featuresDescription{
+    padding-top: 10px;
+    padding-left: 20px;
+    padding-right: 20px;
+}
+
+.Landing-featuresEntry--restful{
+    background-color: @brand;
+}
+
+.Landing-featuresEntry--jwt{
+    background-color: #EF704D;
+}
+
+.Landing-featuresEntry--generators{
+    background-color: #25C0CC;
 }
diff --git a/angular/material/project.less b/angular/material/project.less
@@ -1,7 +1,6 @@
-@brand: #00A4C8;
+@brand: #00A4C6;
+@black: #535362;
+@grey: #888888;
 @navy: #21455B;
-@dark-gray: #535362;
-@gray: #757584;
-@light-gray: #A8A8B7;
-@background: #F6F9FA;
 @border: #E9F0F3;
+@background: #F6F9FA;