Aluracord - Arquivos da Aula 01

config.json

{
  "name": "Aluracord - Matrix (peas)",
  "theme": {
    "colors": {
      "primary": {
        "050": "#E3F9E5",
        "100": "#C1EAC5",
        "200": "#A3D9A5",
        "300": "#7BC47F",
        "400": "#57AE5B",
        "500": "#3F9142",
        "600": "#2F8132",
        "700": "#207227",
        "800": "#0E5814",
        "900": "#05400A"
      },
      "neutrals": {
        "000": "#FFFFFF",
        "050": "#F5F7FA",
        "100": "#E4E7EB",
        "200": "#CBD2D9",
        "300": "#9AA5B1",
        "400": "#52667A",
        "500": "#313D49",
        "600": "#29333D",
        "700": "#212931",
        "800": "#181F25",
        "900": "#101418",
        "999": "#080A0C"
      }
    }
  },
  "stickers": [
    "https://www.alura.com.br/imersao-react-4/assets/figurinhas/Figurinha_1.png",
    "https://www.alura.com.br/imersao-react-4/assets/figurinhas/Figurinha_2.png",
    "https://www.alura.com.br/imersao-react-4/assets/figurinhas/Figurinha_3.png",
    "https://www.alura.com.br/imersao-react-4/assets/figurinhas/Figurinha_4.png",
    "https://www.alura.com.br/imersao-react-4/assets/figurinhas/Figurinha_5.png",
    "https://www.alura.com.br/imersao-react-4/assets/figurinhas/Figurinha_6.png",
    "https://www.alura.com.br/imersao-react-4/assets/figurinhas/Figurinha_7.png",
    "https://www.alura.com.br/imersao-react-4/assets/figurinhas/Figurinha_8.png",
    "https://www.alura.com.br/imersao-react-4/assets/figurinhas/Figurinha_9.png",
    "https://www.alura.com.br/imersao-react-4/assets/figurinhas/Figurinha_10.png",
    "https://www.alura.com.br/imersao-react-4/assets/figurinhas/Figurinha_11.png",
    "https://www.alura.com.br/imersao-react-4/assets/figurinhas/Figurinha_12.png",
    "https://www.alura.com.br/imersao-react-4/assets/figurinhas/Figurinha_13.png",
    "https://www.alura.com.br/imersao-react-4/assets/figurinhas/Figurinha_14.png",
    "https://www.alura.com.br/imersao-react-4/assets/figurinhas/Figurinha_15.png",
    "https://www.alura.com.br/imersao-react-4/assets/figurinhas/Figurinha_16.png",
    "https://www.alura.com.br/imersao-react-4/assets/figurinhas/Figurinha_17.png",
    "https://www.alura.com.br/imersao-react-4/assets/figurinhas/Figurinha_18.png",
    "https://www.alura.com.br/imersao-react-4/assets/figurinhas/Figurinha_19.png",
    "https://www.alura.com.br/imersao-react-4/assets/figurinhas/Figurinha_20.png",
    "https://www.alura.com.br/imersao-react-4/assets/figurinhas/Figurinha_21.png",
    "https://www.alura.com.br/imersao-react-4/assets/figurinhas/Figurinha_22.png",
    "https://www.alura.com.br/imersao-react-4/assets/figurinhas/Figurinha_23.png",
    "https://www.alura.com.br/imersao-react-4/assets/figurinhas/Figurinha_24.png",
    "https://www.alura.com.br/imersao-react-4/assets/figurinhas/Figurinha_25.png",
    "https://www.alura.com.br/imersao-react-4/assets/figurinhas/Figurinha_26.png",
    "https://www.alura.com.br/imersao-react-4/assets/figurinhas/Figurinha_27.png",
    "https://www.alura.com.br/imersao-react-4/assets/figurinhas/Figurinha_28.png",
    "https://www.alura.com.br/imersao-react-4/assets/figurinhas/Figurinha_29.png",
    "https://www.alura.com.br/imersao-react-4/assets/figurinhas/Figurinha_30.png",
    "http://2.bp.blogspot.com/-d21tffsTIQo/U_H9QjC69gI/AAAAAAAAKqM/wnvOyUr6a_I/s1600/Pikachu%2B2.gif",
    "https://media1.giphy.com/media/BdghqxNFV4efm/200.gif",
    "https://c.tenor.com/TKpmh4WFEsAAAAAC/alura-gaveta-filmes.gif",
    "https://i.pinimg.com/originals/0b/1c/23/0b1c2307c83e1ebdeed72e41b9a058ad.gif",
    "https://c.tenor.com/VylWt5lyjBoAAAAC/omg-yes.gif",
    "https://i.pinimg.com/originals/96/34/c5/9634c520c9a3cd4e7f23190bb2c96500.gif"
  ]
}

index.js

import { Box, Button, Text, TextField, Image } from '@skynexui/components';
import appConfig from '../config.json';

function GlobalStyle() {
  return (
    <style global jsx>{`
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        list-style: none;
      }
      body {
        font-family: 'Open Sans', sans-serif;
      }
      /* App fit Height */ 
      html, body, #__next {
        min-height: 100vh;
        display: flex;
        flex: 1;
      }
      #__next {
        flex: 1;
      }
      #__next > * {
        flex: 1;
      }
      /* ./App fit Height */ 
    `}</style>
  );
}

function Titulo(props) {
  const Tag = props.tag || 'h1';
  return (
    <>
      <Tag>{props.children}</Tag>
      <style jsx>{`
            ${Tag} {
                color: ${appConfig.theme.colors.neutrals['000']};
                font-size: 24px;
                font-weight: 600;
            }
            `}</style>
    </>
  );
}

// Componente React
// function HomePage() {
//     // JSX
//     return (
//         <div>
//             <GlobalStyle />
//             <Titulo tag="h2">Boas vindas de volta!</Titulo>
//             <h2>Discord - Alura Matrix</h2>
//         </div>
//     )
// }
// export default HomePage

export default function PaginaInicial() {
  const username = 'peas';

  return (
    <>
      <GlobalStyle />
      <Box
        styleSheet={{
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          backgroundColor: appConfig.theme.colors.primary[500],
          backgroundImage: 'url(https://virtualbackgrounds.site/wp-content/uploads/2020/08/the-matrix-digital-rain.jpg)',
          backgroundRepeat: 'no-repeat', backgroundSize: 'cover', backgroundBlendMode: 'multiply',
        }}
      >
        <Box
          styleSheet={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            flexDirection: {
              xs: 'column',
              sm: 'row',
            },
            width: '100%', maxWidth: '700px',
            borderRadius: '5px', padding: '32px', margin: '16px',
            boxShadow: '0 2px 10px 0 rgb(0 0 0 / 20%)',
            backgroundColor: appConfig.theme.colors.neutrals[700],
          }}
        >
          {/* Formulário */}
          <Box
            as="form"
            styleSheet={{
              display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
              width: { xs: '100%', sm: '50%' }, textAlign: 'center', marginBottom: '32px',
            }}
          >
            <Titulo tag="h2">Boas vindas de volta!</Titulo>
            <Text variant="body3" styleSheet={{ marginBottom: '32px', color: appConfig.theme.colors.neutrals[300] }}>
              {appConfig.name}
            </Text>

            <TextField
              fullWidth
              textFieldColors={{
                neutral: {
                  textColor: appConfig.theme.colors.neutrals[200],
                  mainColor: appConfig.theme.colors.neutrals[900],
                  mainColorHighlight: appConfig.theme.colors.primary[500],
                  backgroundColor: appConfig.theme.colors.neutrals[800],
                },
              }}
            />
            <Button
              type='submit'
              label='Entrar'
              fullWidth
              buttonColors={{
                contrastColor: appConfig.theme.colors.neutrals["000"],
                mainColor: appConfig.theme.colors.primary[500],
                mainColorLight: appConfig.theme.colors.primary[400],
                mainColorStrong: appConfig.theme.colors.primary[600],
              }}
            />
          </Box>
          {/* Formulário */}


          {/* Photo Area */}
          <Box
            styleSheet={{
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              maxWidth: '200px',
              padding: '16px',
              backgroundColor: appConfig.theme.colors.neutrals[800],
              border: '1px solid',
              borderColor: appConfig.theme.colors.neutrals[999],
              borderRadius: '10px',
              flex: 1,
              minHeight: '240px',
            }}
          >
            <Image
              styleSheet={{
                borderRadius: '50%',
                marginBottom: '16px',
              }}
              src={`https://github.com/${username}.png`}
            />
            <Text
              variant="body4"
              styleSheet={{
                color: appConfig.theme.colors.neutrals[200],
                backgroundColor: appConfig.theme.colors.neutrals[900],
                padding: '3px 10px',
                borderRadius: '1000px'
              }}
            >
              {username}
            </Text>
          </Box>
          {/* Photo Area */}
        </Box>
      </Box>
    </>
  );
}

Excelente material, Estão de parabéns.