diff --git a/db.json b/db.json index 360c0751..e8527f2f 100644 --- a/db.json +++ b/db.json @@ -1,43 +1,61 @@ { - "bg": "https://i2.wp.com/css-tricks.com/wp-content/uploads/2017/06/css-is-awesome-scaled.jpg?resize=1536%2C1208&ssl=1", - "title": "Quiz CSS da Alura", - "description": "Teste os seus conhecimentos sobre CSS e vamos ver quantos layouts você vai deixar de quebrar", + "bg": "https://www.hitalent.co/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBMmJDQXc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--1452099b706ad7d079f7a3a4dd5d702ebeeae45f/HiTalent.png", + "title": "Quiz JavaScript #AluraQuiz", + "description": "Um quiz rápido sobre o mundo do JavaScript", "questions": [ { - "image": "https://media.giphy.com/media/xUOxf3yDKCuwpOlT3i/giphy.gif", - "title": "Como fazer um seletor por id via CSS?", - "description": "Essa é pra aquecer", - "answer": 2, + "image": "https://media.giphy.com/media/j5P0DQIOf4PonLi55G/giphy.gif", + "title": "Qual a diferença entre = , == e === ?", + "description": "Pergunta fácil em!", + "answer": 1, "alternatives": [ - ".elemento", - "*elemento", - "#elemento", - "%elemento" + "São a mesma coisa", + "O = significa atribuição de valor. Já == verifica a igualdade do valor, enquanto === verifica valor e tipo de variável." ] }, { - "image": "https://media.giphy.com/media/13FrpeVH09Zrb2/giphy.gif", - "title": "Como fazer um background gradiente com css?", - "description": "Faz tempo em haha", + "image": "https://media.giphy.com/media/Ie2Hs3A0uJRtK/giphy.gif", + "title": "Que tipos de dados são suportados em JavaScript?", + "description": "E agora? Você sabe?", "answer": 0, "alternatives": [ - "background: linear-gradient(#e66465, #9198e5);", - "background: gradient(#e66465, #9198e5);" + "Number, String, Undefined, Null e Bool.", + "Int, String, Undefined, Null e Bool." + ] + }, + { + "image": "https://media.giphy.com/media/iI4vhciiVh2b3j9sgo/giphy.gif", + "title": "Qual a diferença de window e global?", + "answer": 1, + "alternatives": [ + "São a mesma coisa", + "window é o escopo global no browser, e global no node" + ] + }, + { + "image": "https://media.giphy.com/media/iI4vhciiVh2b3j9sgo/giphy.gif", + "title": "Qual a forma antiga de trabalhar com AJAX na Web?", + "answer": 1, + "alternatives": [ + "JSONHttpRequest", + "XMLHttpRequest", + "fetch" ] } ], "external": [ - "" + "https://aluraquiz-css.omariosouto.vercel.app/", + "https://aluraquiz-devsoutinho.omariosouto.vercel.app/" ], "theme": { "colors": { - "primary": "#0d47a1", - "secondary": "#29b6f6", - "mainBg": "#171B35", + "primary": "#222222", + "secondary": "#e89c3f", + "mainBg": "#213f4e", "contrastText": "#FFFFFF", "wrong": "#FF5722", "success": "#4CAF50" }, "borderRadius": "4px" } -} \ No newline at end of file +} diff --git a/package.json b/package.json index 00df819b..e6858684 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,10 @@ "lint": "eslint ./ --fix" }, "dependencies": { + "@crello/react-lottie": "^0.0.11", + "framer-motion": "^3.2.1", "next": "latest", + "prop-types": "^15.7.2", "react": "^16.8.0", "react-dom": "^16.8.0", "react-is": "^16.8.0", diff --git a/pages/index.js b/pages/index.js index 12421ebb..fa60a16d 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,10 +1,12 @@ import React from 'react'; import styled from 'styled-components'; import Head from 'next/head'; +import { motion } from 'framer-motion'; import { useRouter } from 'next/router'; import db from '../db.json'; import Widget from '../src/components/Widget'; +import Link from '../src/components/Link'; import QuizLogo from '../src/components/QuizLogo'; import QuizBackground from '../src/components/QuizBackground'; import Footer from '../src/components/Footer'; @@ -37,11 +39,23 @@ export default function Home() { return ( - {db.title} + + AluraQuiz - + {db.title} + - +

{db.title}

 @@ -66,14 +80,51 @@ export default function Home() { - +

Quizes da Galera

-

lorem ipsum dolor sit amet...

+
    + {db.external.map((linkExterno) => { + const [projectName, githubUser] = linkExterno + .replace(/\//g, '') + .replace('https:', '') + .replace('.vercel.app', '') + .split('.'); + + return ( +
  • + + {`${githubUser}/${projectName}`} + +
    • + ); + })} +
-