diff --git a/public/images/facebook_icon.svg b/public/images/facebook_icon.svg new file mode 100644 index 0000000..1fa22ef --- /dev/null +++ b/public/images/facebook_icon.svg @@ -0,0 +1,7 @@ + + \ No newline at end of file diff --git a/public/images/google_icon.svg b/public/images/google_icon.svg new file mode 100644 index 0000000..8f62896 --- /dev/null +++ b/public/images/google_icon.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/src/app/PrimaryLogin/page.tsx b/src/app/PrimaryLogin/page.tsx new file mode 100644 index 0000000..35cd6b8 --- /dev/null +++ b/src/app/PrimaryLogin/page.tsx @@ -0,0 +1,60 @@ +"use client"; + +import Image from "next/image"; +import { AuthButton } from "@/components/NewDesignSystem/molecules/AuthButton/inde"; + +export default function LoginPage() { + return ( +
+ Logo + +
+ {/* Grupo superior: Entre (3/4 largura) */} +
+ + Entre + +
+ + {/* Cadastre-se (3/4 largura) */} +
+ + Cadastre-se + +
+ + {/* Divisor com "Ou" */} +
+ + Ou + +
+ + {/* Grupo social: largura completa, fundo branco, borda cinza escuro e texto preto */} +
+ + Entrar com o Google + + + + Entrar com o Facebook + +
+
+
+ ); +} \ No newline at end of file diff --git a/src/app/Splash/page.tsx b/src/app/Splash/page.tsx new file mode 100644 index 0000000..3f5ae56 --- /dev/null +++ b/src/app/Splash/page.tsx @@ -0,0 +1,17 @@ +"use client"; + +import Image from "next/image"; + +export default function Splash1() { + return ( +
+ Logo +
+ ); +} \ No newline at end of file diff --git a/src/app/SplashTwo/page.tsx b/src/app/SplashTwo/page.tsx new file mode 100644 index 0000000..92be1a9 --- /dev/null +++ b/src/app/SplashTwo/page.tsx @@ -0,0 +1,17 @@ +"use client"; + +import Image from "next/image"; + +export default function Splash2() { + return ( +
+ Logo +
+ ); +} \ No newline at end of file diff --git a/src/components/NewDesignSystem/molecules/AuthButton/inde.tsx b/src/components/NewDesignSystem/molecules/AuthButton/inde.tsx index 88e4715..e5db737 100644 --- a/src/components/NewDesignSystem/molecules/AuthButton/inde.tsx +++ b/src/components/NewDesignSystem/molecules/AuthButton/inde.tsx @@ -1,16 +1,44 @@ "use client"; +import React from "react"; + type AuthButtonProps = React.ComponentPropsWithoutRef<"button">; + +type ExtendedAuthButtonProps = AuthButtonProps & { + provider?: "google" | "facebook"; +}; + // Este é o botão de autenticação. // TODO: Thiago -> Implementar lógica de icones e estilos. Para lógica de ícones, seguir o exemplo do FormInputWithIcon, porém utilizando imagens (svg em public) apropriadas para autenticação (Google, Facebook, etc). Caso tenha dúvida de component de molecula, olhar outros exemplos na pasta molecules. -export function AuthButton({ className, children, ...props }: AuthButtonProps) { +export function AuthButton({ className, children, provider, ...props }: ExtendedAuthButtonProps) { + const baseClasses = + "flex items-center justify-center gap-3 px-4 h-10 rounded-lg text-base font-medium transition"; + + const defaultClasses = !className + ? provider + ? "bg-black text-white hover:bg-gray-800" + : "bg-white text-black border border-gray-200 hover:bg-gray-50" + : ""; + + const iconSrc = provider ? `/images/${provider}_icon.svg` : null; + return (
);