feat: admin page login

package.json

@@ -9,7 +9,11 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@emotion/react": "^11.13.0",
+    "@emotion/styled": "^11.13.0",
+    "@mui/material": "^5.16.4",
     "@radix-ui/react-accordion": "^1.2.0",
+    "@radix-ui/react-checkbox": "^1.1.1",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-select": "^2.1.1",

src/app/layout.tsx

@@ -2,6 +2,7 @@ import { Footer } from '@/components/footer'
 import { Header } from '@/components/header'
 import { ThemeProvider } from '@/components/providers/theme-provider'
 import '@/styles/globals.css'
+import { StyledEngineProvider } from '@mui/material'
 import type { Metadata } from 'next'
 import { Poppins } from 'next/font/google'
 
@@ -26,9 +27,11 @@ export default function RootLayout({
           enableSystem
           disableTransitionOnChange
         >
+          <StyledEngineProvider injectFirst>
             <Header />
             {children}
             <Footer />
+          </StyledEngineProvider>
         </ThemeProvider>
       </body>
     </html>

src/app/login/page.tsx

+import { InputMui } from '@/components/mui/inputs'
+import { Button } from '@/components/ui/button'
+import { Checkbox } from '@/components/ui/checkbox'
+import Image from 'next/image'
+import Link from 'next/link'
+import globo from '../../../public/images/globo.svg'
+
+export default function Login() {
+  return (
+    <main>
+      <section className=" container flex flex-col justify-center items-center space-y-10 h-[723px]">
+        <Image
+          src={globo}
+          width={77}
+          height={77}
+          alt="Imagem demonstrativa de um globo"
+        />
+        <h1 className="text-green-400 text-2xl">Área administrativa</h1>
+        <h2 className="text-gray-50">
+          Acesso exclusivo para usuários cadastrados.
+        </h2>
+        <form
+          // onSubmit={handleSubmit(onSubmit)}
+          className="w-full md:w-[600px] flex flex-col gap-8 order-4"
+        >
+          <div className="flex flex-col space-y-6">
+            <div className="flex flex-col space-y-4">
+              <InputMui label="E-mail" variant="outlined" type="email" />
+              <InputMui label="Senha" variant="outlined" type="password" />
+            </div>
+            <div className="flex items-center space-x-2">
+              <Checkbox id="remember" />
+              <label
+                htmlFor="remember"
+                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+              >
+                Lembrar-me
+              </label>
+            </div>
+            <Button className="rounded-sm">Entrar</Button>
+            <Button
+              variant={'link'}
+              asChild
+              className="text-green-400 uppercase"
+            >
+              <Link href="#">Recuperar senha</Link>
+            </Button>
+          </div>
+        </form>
+      </section>
+    </main>
+  )
+}

src/components/footer.tsx

@@ -64,7 +64,7 @@ export function Footer() {
             </li>
             <li>
               <Button asChild variant="link" className="uppercase p-0">
-                <Link href="#" className="flex items-center">
+                <Link href="/login" className="flex items-center">
                   Área Administrativa
                   <ChevronRight className="text-yellow-100 ml-3" />
                 </Link>

src/components/mui/inputs.tsx

+import { TextField } from '@mui/material'
+
+type InputMuiProps = {
+  label: string
+  variant: 'standard' | 'filled' | 'outlined'
+  type: string
+}
+
+export function InputMui({ label, variant, type }: InputMuiProps) {
+  return (
+    <TextField
+      label={label}
+      variant={variant}
+      type={type}
+      sx={{
+        '& .MuiOutlinedInput-root': {
+          '& fieldset': {
+            borderColor: 'white', // Inicialmente transparente
+          },
+          '&:hover fieldset': {
+            borderColor: 'white', // Mantém transparente ao passar o mouse
+          },
+          '&.Mui-focused fieldset': {
+            borderColor: 'white', // Mantém transparente ao focar
+          },
+        },
+        '& label.Mui-focused': {
+          color: '#B7B7B7',
+        },
+        '& label': {
+          color: 'white',
+        },
+        '& input': {
+          color: 'white',
+        },
+      }}
+    />
+  )
+}

src/components/ui/checkbox.tsx

+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }

tailwind.config.ts

@@ -39,6 +39,7 @@ const config = {
           50: '#F9F9F9',
           100: '#3C3C3C',
           300: '#DADADA',
+          400: '#B7B7B7',
           900: '#1C1C1C',
         },
         red: {