Teste Carlos Azevedo

.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintrc.js

@@ -0,0 +1,25 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    node: true
+  },
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+  extends: [
+    '@nuxtjs',
+    'plugin:nuxt/recommended',
+    'plugin:prettier/recommended',
+    'prettier',
+    'prettier/vue'
+  ],
+  plugins: [
+    'prettier'
+  ],
+  // add your custom rules here
+  rules: {
+    'no-console': 1,
+    'camelcase': ['error', {properties: 'never'}]
+  }
+}

.gitignore

@@ -0,0 +1,84 @@
+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# Nuxt generate
+dist
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# IDE
+.idea
+
+# Service worker
+sw.*

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "semi": false,
+  "singleQuote": true
+}

Dockerfile

@@ -0,0 +1,13 @@
+FROM node
+
+ENV APP_ROOT /src
+
+RUN mkdir ${APP_ROOT}
+WORKDIR ${APP_ROOT}
+ADD . ${APP_ROOT}
+
+RUN npm install
+RUN npm install -g --unsafe-perm node-sass
+RUN npm run build
+
+ENV HOST 0.0.0.0

README.md

@@ -1,3 +1,12 @@
-Instruções em:
+#Teste Carlos Azevedo
 
-https://picpay.com/jobs/desafio-frontend
+Para rodar o projeto:
+> docker-compose up -d
+
+O projeto ira rodar na sua porta 3000
+
+
+#### Considerações
+Gostei do projeto, construi uma aplicação com nuxt que é um template par Vue.js.
+
+ps: estou realizando o teste de back-end, devido ao meu tempo, não consegui implementar a visão da aplicação para desktop, como desenvolvi em mobile-first essa parte já está pronta.

assets/README.md

@@ -0,0 +1,7 @@
+# ASSETS
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked).

assets/scss/base.scss

@@ -0,0 +1,6 @@
+body {
+	margin: 0px;
+	width: 100%;
+	background-image: linear-gradient(211deg, $dusk, $das);
+	min-height: 100vh;
+}

assets/scss/components/_header.scss

@@ -0,0 +1,10 @@
+.header {
+	background-color: $riptide;
+	padding: 4px 8px;
+	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
+	height: 16px;
+
+	img {
+		height: 100%;
+	}
+}

assets/scss/components/base/_voltar.scss

@@ -0,0 +1,21 @@
+.voltar {
+	margin: 8px 12px;
+
+	a {
+		font-family: roboto-regular;
+		font-size: 7px;
+		color: $white;
+		text-decoration: none;
+
+		&:before {
+			content: ' ';
+			background-image: url('/images/angle-left-solid.svg');
+			background-size: 4px 4px;
+			height: 4px;
+			width: 4px;
+			background-repeat: no-repeat;
+			color: $riptide;
+			display: inline-block;
+		}
+	}
+}

assets/scss/components/base/index.scss

@@ -0,0 +1,2 @@
+@import './voltar';
+@import './input';

assets/scss/components/base/input.scss

@@ -0,0 +1,87 @@
+.group 			  { 
+  position:relative; 
+  margin-bottom: 13px;
+  font-family: roboto-regular;
+}
+
+.inputMaterial 				{
+  font-size:8px;
+  padding:5px 10px 5px 5px;
+  display:block;
+  width: 167px;
+  border:none;
+  border-bottom:1px solid #757575;
+  background-color: inherit;
+  color: $white;
+}
+
+.inputMaterial:focus 		{ outline:none;}
+
+/* LABEL ======================================= */
+
+label 				 {
+  color:#999; 
+  font-size:6px;
+  font-weight:normal;
+  position:absolute;
+  pointer-events:none;
+  left:5px;
+  top:10px;
+  transition:0.2s ease all; 
+  -moz-transition:0.2s ease all; 
+  -webkit-transition:0.2s ease all;
+}
+
+/* active state */
+.inputMaterial:focus ~ label, .inputMaterial:valid ~ label 		{
+  top:-5px;
+  font-size:6px;
+  color: $riptide;
+}
+
+/* BOTTOM BARS ================================= */
+.bar 	{ position:relative; display:block; width:182px; }
+.bar:before, .bar:after 	{
+  content:'';
+  height:2px; 
+  width:0;
+  bottom:1px; 
+  position:absolute;
+  background: $riptide; 
+  transition:0.2s ease all; 
+  -moz-transition:0.2s ease all; 
+  -webkit-transition:0.2s ease all;
+}
+.bar:before {
+  left:50%;
+}
+.bar:after {
+  right:50%; 
+}
+
+/* active state */
+.inputMaterial:focus ~ .bar:before, .inputMaterial:focus ~ .bar:after {
+  width:50%;
+}
+
+
+/* active state */
+.inputMaterial:focus ~ .highlight {
+  -webkit-animation:inputHighlighter 0.3s ease;
+  -moz-animation:inputHighlighter 0.3s ease;
+  animation:inputHighlighter 0.3s ease;
+}
+
+/* ANIMATIONS ================ */
+@-webkit-keyframes inputHighlighter {
+	from { background:$riptide; }
+  to 	{ width:0; background:transparent; }
+}
+@-moz-keyframes inputHighlighter {
+	from { background:$riptide; }
+  to 	{ width:0; background:transparent; }
+}
+@keyframes inputHighlighter {
+	from { background:$riptide; }
+  to 	{ width:0; background:transparent; }
+}

assets/scss/components/cartao/index.scss

@@ -0,0 +1,2 @@
+@import './novo';
+@import './list';

assets/scss/components/cartao/list.scss

@@ -0,0 +1,85 @@
+.cartao-list {
+	text-align: center;
+
+	h5 {
+		font-family: roboto-regular;
+		font-size: 10px;
+		color: $white;
+	}
+
+	ul {
+		display: block;
+		padding: inherit;
+		margin-top: 0;
+		margin-bottom: 0;
+
+		.active {
+			background-color: $white10;
+		}
+
+		li {
+			display: flex;
+			padding: 12px 16px;
+
+			.img {
+				flex: 1;
+				max-width: 14px;
+
+				img {
+					width: 14px;
+					height: 14px;
+					margin-top: 1px;
+				}
+			}
+
+			.data {
+				flex: 1;
+				text-align: left;
+
+				span {
+					margin-left: 20px;
+					font-family: roboto-bold;
+					font-size: 10px;
+					font-weight: 500;
+					color: $white;
+				}
+			}
+
+			.check {
+				flex: 1;
+				max-width: 12px;
+
+				img {
+					width: 12px;
+					height: 12px;					
+					margin-top: 3px;
+				}
+			}
+		}
+	}
+
+	.plus {
+		display: flex;
+		margin: 0 16px;
+		padding-top: 12px;
+		text-align: center;
+		border-top: solid 1px $white10;
+
+		.s-plus {
+			flex: 1;
+			max-width: 14px;
+			img {
+				width: 14px;
+				height: 14px;
+			}
+		}
+
+		.text {
+			flex: 1;
+			color: $white;
+			font-family: roboto-bold;
+			font-size: 10px;
+			margin-top: 2px;
+		}
+	}
+}