finished v1

.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = false
+insert_final_newline = false

.tool-versions

@@ -0,0 +1 @@
+nodejs 18.14.0

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+    "cSpell.words": [
+        "latin",
+        "roboto",
+        "Shopee"
+    ]
+}

app/globals.css

@@ -1,107 +1,9 @@
-:root {
-  --max-width: 1100px;
-  --border-radius: 12px;
-  --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
-    'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
-    'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
-
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-
-  --primary-glow: conic-gradient(
-    from 180deg at 50% 50%,
-    #16abff33 0deg,
-    #0885ff33 55deg,
-    #54d6ff33 120deg,
-    #0071ff33 160deg,
-    transparent 360deg
-  );
-  --secondary-glow: radial-gradient(
-    rgba(255, 255, 255, 1),
-    rgba(255, 255, 255, 0)
-  );
-
-  --tile-start-rgb: 239, 245, 249;
-  --tile-end-rgb: 228, 232, 233;
-  --tile-border: conic-gradient(
-    #00000080,
-    #00000040,
-    #00000030,
-    #00000020,
-    #00000010,
-    #00000010,
-    #00000080
-  );
-
-  --callout-rgb: 238, 240, 241;
-  --callout-border-rgb: 172, 175, 176;
-  --card-rgb: 180, 185, 188;
-  --card-border-rgb: 131, 134, 135;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-
-    --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
-    --secondary-glow: linear-gradient(
-      to bottom right,
-      rgba(1, 65, 255, 0),
-      rgba(1, 65, 255, 0),
-      rgba(1, 65, 255, 0.3)
-    );
-
-    --tile-start-rgb: 2, 13, 46;
-    --tile-end-rgb: 2, 5, 19;
-    --tile-border: conic-gradient(
-      #ffffff80,
-      #ffffff40,
-      #ffffff30,
-      #ffffff20,
-      #ffffff10,
-      #ffffff10,
-      #ffffff80
-    );
-
-    --callout-rgb: 20, 20, 20;
-    --callout-border-rgb: 108, 108, 108;
-    --card-rgb: 100, 100, 100;
-    --card-border-rgb: 200, 200, 200;
-  }
+:root{
+    --gray: #c7c7c7;
 }
 
-* {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-}
-
-html,
-body {
-  max-width: 100vw;
-  overflow-x: hidden;
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-@media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
-  }
-}
+*{
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}

app/home.module.css

@@ -0,0 +1,93 @@
+.page{
+    display: flex;
+    align-items: center;
+    padding: 20px;
+    flex-direction: column;
+    width: 100vw;
+}
+
+.section{
+    width: 50%;
+    padding: 20px;
+}
+
+.titleText{
+    margin: 20px;
+    text-align: center;
+    font-size: 40px;
+    max-width: 800px;
+}
+
+.trackCodeInputArea{
+    display: flex;
+    flex-direction: column;
+}
+
+.inputLabel{
+    font-size: 25px;
+}
+
+.codeInput{
+    font-size: 25px;
+    border-radius: 5px;
+    border: 1px solid var(--gray);
+    outline: 0;
+    padding: 10px;
+}
+
+.carriersTable{
+    padding: 20px;
+    border-radius: 10px;
+    border: 1px solid var(--gray);
+    width: 100%;
+    grid-template-columns: repeat(2, 1fr);
+}
+
+.tableHeader{
+    border-bottom: 1px solid var(--gray); 
+    border-right: 1px solid var(--gray); 
+    padding: 10px;
+}
+
+.carrierInfo{
+    text-align: center;
+    border-right: 1px solid var(--gray); 
+    padding: 10px;
+
+}
+
+.tableHeader:last-child{
+    border-right: 0;
+}
+
+.carrierInfo:last-child{
+    border: 0;
+}
+
+.carrierURL{
+    color: black;
+
+}
+
+.tableCaption{
+    caption-side: bottom;
+    font-size: 12px;
+}
+
+@media (max-width:1000px){
+    .section{
+        width: 60%;
+    }
+}
+
+@media (max-width:770px){
+    .section{
+        width: 80%;
+    }
+}
+
+@media (max-width:550px){
+    .section{
+        width: 100%;
+    }
+}

app/layout.js

@@ -1,17 +1,18 @@
-import './globals.css'
-import { Inter } from 'next/font/google'
+import "./globals.css";
+import { Roboto } from "next/font/google";
 
-const inter = Inter({ subsets: ['latin'] })
+const roboto = Roboto({ weight: ["700", "400"], subsets: ["latin"] });
 
 export const metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
-}
+    title: "Shopee Entrega padrão",
+    description:
+        "Descubra por qual transportadora seu produto está sendo transportado!",
+};
 
 export default function RootLayout({ children }) {
-  return (
-    <html lang="en">
-      <body className={inter.className}>{children}</body>
-    </html>
-  )
+    return (
+        <html lang="pt-BR">
+            <body className={roboto.className}>{children}</body>
+        </html>
+    );
 }