diff --git a/app/layout.tsx b/app/layout.tsx index 8c57b9c..a59f053 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,6 +1,8 @@ import type { Metadata, Viewport } from "next"; import { Inter } from "next/font/google"; import "./globals.css"; +import { GoogleOAuthProvider } from "@react-oauth/google"; +import { ThemeProvider } from 'next-themes' const inter = Inter({ variable: "--font-inter", @@ -36,12 +38,20 @@ export default function RootLayout({ children: React.ReactNode; }>) { return ( - - - {children} + // Remova o style={{ colorScheme: 'light' }} daqui, + // pois o Next.js tem dificuldade em hidratar estilos inline no + + + + + {children} + + ); -} +} \ No newline at end of file diff --git a/app/login/page.tsx b/app/login/page.tsx new file mode 100644 index 0000000..b094f82 --- /dev/null +++ b/app/login/page.tsx @@ -0,0 +1,101 @@ +"use client"; +import Image from 'next/image'; + +import React, { useState } from "react"; +import { useGoogleLogin } from "@react-oauth/google"; + +export default function AppleStyleAuth() { + const [email, setEmail] = useState(""); + const [password, setPassword] = useState(""); + const [isLoading, setIsLoading] = useState(false); + + // Lógica do Google Login + const googleLogin = useGoogleLogin({ + onSuccess: (res) => console.log("Google Success", res), + onError: () => console.log("Google Failed"), + }); + + return ( +
+
+ + {/* 1. LOGOTIPO (Apple Style) */} +
+
+ {/* Substitui pelo teu SVG de logo real */} + {/* tv1 */} + logo +
+

+ Iniciar sessão +

+

Usa a tua conta TVone.

+
+ + {/* 2. FORMULÁRIO DE CREDENCIAIS */} +
+
+ setEmail(e.target.value)} + className="w-full rounded-2xl border border-neutral-200 bg-white/50 px-5 py-4 text-sm outline-none transition-all focus:border-blue-500 focus:bg-white focus:ring-4 focus:ring-blue-500/10 dark:border-neutral-800 dark:bg-neutral-900" + /> +
+
+ setPassword(e.target.value)} + className="w-full rounded-2xl border border-neutral-200 bg-white/50 px-5 py-4 text-sm outline-none transition-all focus:border-blue-500 focus:bg-white focus:ring-4 focus:ring-blue-500/10 dark:border-neutral-800 dark:bg-neutral-900" + /> +
+ + +
+ + {/* 3. DIVISOR COM "OU" */} +
+
+ + ou + +
+
+ + {/* 4. BOTÃO GOOGLE (Melhorado) */} + + + {/* 5. LINKS ADICIONAIS */} +
+ + Esqueceste-te da palavra-passe? + +

+ Não tens conta?{" "} + + Cria uma agora. + +

+
+
+
+ ); +} \ No newline at end of file diff --git a/package.json b/package.json index 2b832f6..dd2bf30 100644 --- a/package.json +++ b/package.json @@ -9,9 +9,11 @@ "lint": "eslint" }, "dependencies": { + "@react-oauth/google": "^0.13.5", "framer-motion": "^12.38.0", "lucide-react": "^1.8.0", "next": "16.2.1", + "next-themes": "^0.4.6", "react": "19.2.4", "react-dom": "19.2.4", "react-easy-crop": "^5.5.7", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6833956..a0394aa 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,6 +8,9 @@ importers: .: dependencies: + '@react-oauth/google': + specifier: ^0.13.5 + version: 0.13.5(react-dom@19.2.4(react@19.2.4))(react@19.2.4) framer-motion: specifier: ^12.38.0 version: 12.38.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4) @@ -17,6 +20,9 @@ importers: next: specifier: 16.2.1 version: 16.2.1(@babel/core@7.29.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4) + next-themes: + specifier: ^0.4.6 + version: 0.4.6(react-dom@19.2.4(react@19.2.4))(react@19.2.4) react: specifier: 19.2.4 version: 19.2.4 @@ -440,6 +446,12 @@ packages: resolution: {integrity: sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==} engines: {node: '>=12.4.0'} + '@react-oauth/google@0.13.5': + resolution: {integrity: sha512-xQWri2s/3nNekZJ4uuov2aAfQYu83bN3864KcFqw2pK1nNbFurQIjPFDXhWaKH3IjYJ2r/9yyIIpsn5lMqrheQ==} + peerDependencies: + react: '>=16.8.0' + react-dom: '>=16.8.0' + '@rtsao/scc@1.1.0': resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==} @@ -1577,6 +1589,12 @@ packages: natural-compare@1.4.0: resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==} + next-themes@0.4.6: + resolution: {integrity: sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==} + peerDependencies: + react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc + react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc + next@16.2.1: resolution: {integrity: sha512-VaChzNL7o9rbfdt60HUj8tev4m6d7iC1igAy157526+cJlXOQu5LzsBXNT+xaJnTP/k+utSX5vMv7m0G+zKH+Q==} engines: {node: '>=20.9.0'} @@ -2357,6 +2375,11 @@ snapshots: '@nolyfill/is-core-module@1.0.39': {} + '@react-oauth/google@0.13.5(react-dom@19.2.4(react@19.2.4))(react@19.2.4)': + dependencies: + react: 19.2.4 + react-dom: 19.2.4(react@19.2.4) + '@rtsao/scc@1.1.0': {} '@swc/helpers@0.5.15': @@ -3591,6 +3614,11 @@ snapshots: natural-compare@1.4.0: {} + next-themes@0.4.6(react-dom@19.2.4(react@19.2.4))(react@19.2.4): + dependencies: + react: 19.2.4 + react-dom: 19.2.4(react@19.2.4) + next@16.2.1(@babel/core@7.29.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4): dependencies: '@next/env': 16.2.1 diff --git a/tailwind.config.ts b/tailwind.config.ts new file mode 100644 index 0000000..ca7385d --- /dev/null +++ b/tailwind.config.ts @@ -0,0 +1,15 @@ +import type { Config } from "tailwindcss"; + +const config: Config = { + darkMode: "class", // Isto desativa o modo automático do sistema + content: [ + "./src/pages/**/*.{js,ts,jsx,tsx,mdx}", + "./src/components/**/*.{js,ts,jsx,tsx,mdx}", + "./src/app/**/*.{js,ts,jsx,tsx,mdx}", + ], + theme: { + extend: {}, + }, + plugins: [], +}; +export default config; \ No newline at end of file