Implementation of the three inicial screens.

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 (
+    <main className="min-h-screen bg-white flex flex-col items-center pt-20">
+      <Image 
+  src="/images/valorim_logo.png" 
+  alt="Logo"
+  width={128}
+  height={128}
+  className="w-32 h-32"
+/>
+
+      <div className="mt-12 w-full max-w-sm px-16 flex flex-col items-center gap-4">
+        {/* Grupo superior: Entre (3/4 largura) */}
+        <div className="w-3/4">
+          <AuthButton
+            className="w-full bg-emerald-600 text-white font-bold hover:bg-emerald-700 border-0"
+          >
+            Entre
+          </AuthButton>
+        </div>
+
+        {/* Cadastre-se (3/4 largura) */}
+        <div className="w-3/4">
+          <AuthButton className="w-full bg-gray-200 text-black font-bold hover:bg-gray-300 border-0">
+            Cadastre-se
+          </AuthButton>
+        </div>
+
+        {/* Divisor com "Ou" */}
+        <div className="w-full flex items-center my-2">
+          <span className="flex-1 h-px bg-gray-200" />
+          <span className="px-3 text-gray-500 text-sm">Ou</span>
+          <span className="flex-1 h-px bg-gray-200" />
+        </div>
+
+        {/* Grupo social: largura completa, fundo branco, borda cinza escuro e texto preto */}
+        <div className="w-full flex flex-col gap-3">
+          <AuthButton
+            provider="google"
+            className="w-full bg-white text-black border border-gray-700 hover:bg-gray-50"
+          >
+            Entrar com o Google
+          </AuthButton>
+
+          <AuthButton
+            provider="facebook"
+            className="w-full bg-white text-black border border-gray-700 hover:bg-gray-50"
+          >
+            Entrar com o Facebook
+          </AuthButton>
+        </div>
+      </div>
+    </main>
+  );
+}

src/app/Splash/page.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import Image from "next/image";
+
+export default function Splash1() {
+  return (
+    <main className="min-h-screen flex items-center justify-center bg-white">
+  <Image 
+    src="/images/valorim_logo.png" 
+    alt="Logo" 
+    width={160} 
+    height={160}
+    className="w-40 h-40"
+  />
+</main>
+  );
+}

src/app/SplashTwo/page.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import Image from "next/image";
+
+export default function Splash2() {
+  return (
+    <main className="min-h-screen flex items-center justify-center bg-green-500">
+      <Image 
+    src="/images/valorim_logo.png" 
+    alt="Logo" 
+    width={160} 
+    height={160}
+    className="w-40 h-40"
+  />
+    </main>
+  );
+}

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 (
     <div>
       <button
-        className={`bg-black h-10 text-white text-lg ${className ?? ""}`}
+        className={`${baseClasses} ${defaultClasses} ${className ?? ""}`}
         {...props}
       >
-        {children}
+        {iconSrc && (
+          <img
+            src={iconSrc}
+            alt={`${provider} icon`}
+            className="inline-block object-contain w-5 h-5"
+            onError={(e) => {
+              (e.currentTarget as HTMLImageElement).style.display = "none";
+            }}
+          />
+        )}
+        <span>{children}</span>
       </button>
     </div>
   );