Skip to content

Commit 71056ed

Browse files
VyckieVyckie
committed
perzonalizando web
1 parent 3a653a4 commit 71056ed

12 files changed

+1488
-119
lines changed

‎Iginite/web/package-lock.json

+1,342-116
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Iginite/web/package.json

+5-2
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,16 @@
1212
"@types/node": "18.11.8",
1313
"@types/react": "18.0.24",
1414
"@types/react-dom": "18.0.8",
15+
"autoprefixer": "^10.4.13",
1516
"next": "13.0.1",
17+
"postcss": "^8.4.19",
1618
"react": "18.2.0",
1719
"react-dom": "18.2.0",
1820
"typescript": "4.8.4"
1921
},
20-
"devDependencies":{
22+
"devDependencies": {
2123
"eslint": "^8.26.0",
22-
"eslint-config-next": "^13.0.1"
24+
"eslint-config-next": "^13.0.1",
25+
"tailwindcss": "^3.2.4"
2326
}
2427
}

‎Iginite/web/postcss.config.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
}

‎Iginite/web/public/app-bg.png

575 KB
Loading

‎Iginite/web/src/assets/app-nlw-copa.png

152 KB
Loading

‎Iginite/web/src/assets/icon.svg

+4
Loading

‎Iginite/web/src/assets/logo.svg

+11
Loading

‎Iginite/web/src/assets/users-avatar-example.png

18 KB
Loading

‎Iginite/web/src/pages/_app.tsx

+60-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,64 @@
11
import type { AppProps } from 'next/app'
22

3+
import '../styles/global.css';
4+
import Image from 'next/image';
5+
import appPreview from '../assets/app-nlw-copa.png'
6+
import logoImg from '../assets/logo.svg';
7+
import usersAvatar from '../assets/users-avatar-example.png'
8+
import iconCheking from '../assets/icon.svg'
9+
310
export default function App({ Component, pageProps }: AppProps) {
4-
return <Component {...pageProps} />
11+
return(
12+
<div className='max-w-[1124px] h-screen mx-auto grid grid-cols-2 items-center gap-28'>
13+
<main>
14+
<Image src={logoImg} alt="Nlw Copa"/>
15+
16+
<h1 className='mt-14 text-white text-5xl font-bold leading-tight'>Crie seu próprio bolão da copa e compartilhe entre amigos! </h1>
17+
<div className='mt-10 flex items-center gap-2' >
18+
<Image src={usersAvatar} alt=""/>
19+
<strong className='text-gray-100 text-xl'>
20+
<span className='text-ignite-500'>+14.987</span> já estão usando
21+
</strong>
22+
23+
</div>
24+
<form className='mt-10 flex '>
25+
<input
26+
className='flex-1 px-6 py-4 rounded bg-gray-800 border border-gray-600 text-sm'
27+
type="text"
28+
required
29+
placeholder='Qual nome do bolão?' />
30+
<button
31+
className='bg-yellow-500 rounded gap-2 px-6 py-4 text-gray-900 font-bold text-sm uppercase hover:bg-yellow-700'
32+
type="submit"
33+
>Criar bolão
34+
</button>
35+
</form>
36+
37+
<p
38+
className='mt-4 text-sm text-grat-300'
39+
>Após criar seu bolão, você receberá um código único que poderá usar para convidar outras pessoas</p>
40+
41+
<div className='mt-10 pt-10 border-t border-gray-600 flex justify-between text-gray-100 items-center'>
42+
<div className='flex items-center'>
43+
<Image src={iconCheking} alt=""/>
44+
<div className='flex flex-col'>
45+
<span className='font-bold text-2xl'>+2.345</span>
46+
<span>Bolões criados</span>
47+
</div>
48+
</div>
49+
<div className='w-px h-14 bg-gray-600'></div>
50+
<div className='flex items-center'>
51+
<Image src={iconCheking} alt=""/>
52+
<div className='flex flex-col'>
53+
<span className='font-bold text-2xl'>+192.087</span>
54+
<span>Palpites enviados</span>
55+
</div>
56+
</div>
57+
</div>
58+
</main>
59+
60+
<Image src={appPreview} alt="Dois celulares exibindo uma prévia do app Nlw-Copa" />
61+
</div>
62+
)
63+
564
}

‎Iginite/web/src/pages/_document.tsx

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { Html, Head, Main, NextScript } from 'next/document'
2+
3+
export default function Document() {
4+
return (
5+
<Html>
6+
<Head>
7+
<link rel="preconnect" href="https://fonts.googleapis.com"/>
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin=""/>
9+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"/>
10+
</Head>
11+
<body className='bg-gray-900 bg-app bg-no-repeat bg-cover'>
12+
<Main/>
13+
<NextScript/>
14+
</body>
15+
</Html>
16+
)
17+
}

‎Iginite/web/src/styles/global.css

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@tailwind base;
2+
@tailwind utilities;
3+
@tailwind components;
4+
5+
body{
6+
-webkit-font-smoothing: antialiased;
7+
}

‎Iginite/web/tailwind.config.js

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
/** @type {import('tailwindcss').Config} */
2+
module.exports = {
3+
content: [
4+
'./src/**/*.tsx'
5+
],
6+
theme: {
7+
extend: {
8+
fontFamily:{
9+
sans: 'Roboto, sans-serif'
10+
},
11+
backgroundImage:{
12+
app: 'url(/app-bg.png)'
13+
},
14+
colors:{
15+
ignite:{
16+
500: '#129E57'
17+
},
18+
19+
yellow:{
20+
500: '#F7DD43',
21+
700: '#E5CD3D'
22+
},
23+
24+
gray:{
25+
100: '#E1E1E6',
26+
300: '#8D8D99',
27+
600: '#323238',
28+
800: '#202024',
29+
900: '#121214'
30+
}
31+
}
32+
33+
},
34+
},
35+
plugins: [],
36+
}

0 commit comments

Comments
 (0)