feat: add register hero

figueroaignacio · Dec 29, 2024 · f749989 · f749989
1 parent 0f878cf
commit f749989
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 30 deletions.
diff --git a/apps/web/app/[locale]/(auth)/auth/register/page.tsx b/apps/web/app/[locale]/(auth)/auth/register/page.tsx
@@ -1,5 +1,8 @@
 // Components
 import { RegisterForm } from "@/modules/auth/ui/register-form";
+import { RegisterHero } from "@/modules/auth/ui/register-hero";
+
+// Utils
 import { setRequestLocale } from "next-intl/server";
 
 interface RegisterPageProps {
@@ -13,7 +16,8 @@ export default async function RegisterPage({ params }: RegisterPageProps) {
   setRequestLocale(locale);
 
   return (
-    <section className="min-h-dvh flex justify-center items-center">
+    <section className="min-h-[80dvh] flex justify-around">
+      <RegisterHero />
       <RegisterForm />
     </section>
   );

diff --git a/apps/web/locales/en/pages.json b/apps/web/locales/en/pages.json
@@ -49,20 +49,20 @@
     "description": "Explore articles, trends, and strategies crafted to enhance your skills, streamline your workflow, and keep you at the forefront of technological innovation. Join our community of experts and elevate your impact in the development world."
   },
   "register": {
-    "title": "Register for devs",
+    "title": "Register on devs",
     "fields": {
       "name": {
         "label": "Name",
         "description": "This is the name that will be displayed on your profile.",
         "errors": {
-          "minCharacters": "Name must be at least 2 characters long.",
-          "maxCharacters": "Name must be at most 30 characters long.",
-          "allowedCharacters": "Name can only contain letters and spaces."
+          "minCharacters": "The name must have at least 2 characters.",
+          "maxCharacters": "The name must not exceed 30 characters.",
+          "allowedCharacters": "The name can only contain letters and spaces."
         }
       },
       "email": {
         "label": "Email",
-        "description": "Your email will never share to no one",
+        "description": "Your email will never be shared with anyone.",
         "errors": {
           "validEmail": "Please enter a valid email address."
         }
@@ -71,18 +71,28 @@
         "label": "Password",
         "description": "Your password must be at least 8 characters long.",
         "errors": {
-          "minCharacters": "Password must be at least 2 characters long.",
-          "maxCharacters": "Password must be at most 50 characters long.",
-          "shouldIncludeOneLetter": "Password must include at least one letter.",
-          "shouldIncludeOneNumber": "Password must include at least one Number."
+          "minCharacters": "The password must have at least 8 characters.",
+          "maxCharacters": "The password must not exceed 50 characters.",
+          "shouldIncludeOneLetter": "The password must include at least one letter.",
+          "shouldIncludeOneNumber": "The password must include at least one number."
         }
       }
     },
-    "submit": "Submit",
-    "submitting": "Submitting...",
+    "submit": "Sign up",
+    "submitting": "Signing up...",
     "haveAccount": "Already have an account?",
-    "login": "Login",
-    "registerWithGithub": "Register with Github"
+    "login": "Log in",
+    "registerWithGithub": "Sign up with GitHub",
+    "orUseEmail": "Or sign up with your email",
+    "hero": {
+      "title": "Start connecting with other developers.",
+      "items": [
+        { "title": "Sign up for free and gain instant access." },
+        { "title": "Connect with developers worldwide." },
+        { "title": "Participate in exclusive events and challenges." },
+        { "title": "Join a community that shares your interests." }
+      ]
+    }
   },
   "login": {
     "title": "Log in to devs",

diff --git a/apps/web/locales/es/pages.json b/apps/web/locales/es/pages.json
@@ -49,7 +49,7 @@
     "description": "Descubre artículos, tendencias y estrategias diseñadas para potenciar tus habilidades, optimizar tu flujo de trabajo y mantenerte a la vanguardia de la innovación tecnológica. Únete a nuestra comunidad de expertos y eleva tu impacto en el mundo del desarrollo."
   },
   "register": {
-    "title": "Registrate en devs",
+    "title": "Regístrate en devs",
     "fields": {
       "name": {
         "label": "Nombre",
@@ -80,9 +80,19 @@
     },
     "submit": "Registrarse",
     "submitting": "Registrando...",
-    "haveAccount": "¿Y tienes una cuenta?",
+    "haveAccount": "¿Ya tienes una cuenta?",
     "login": "Iniciar Sesión",
-    "registerWithGithub": "Registrarse con GitHub"
+    "registerWithGithub": "Registrarse con GitHub",
+    "orUseEmail": "O regístrate con tu correo electrónico",
+    "hero": {
+      "title": "Comienza a conectar con otros desarrolladores.",
+      "items": [
+        { "title": "Regístrate gratis y obtén acceso instantáneo." },
+        { "title": "Conéctate con desarrolladores de todo el mundo." },
+        { "title": "Participa en eventos y desafíos exclusivos." },
+        { "title": "Únete a una comunidad que comparte tus intereses." }
+      ]
+    }
   },
   "login": {
     "title": "Iniciar sesión en devs",

diff --git a/apps/web/modules/auth/ui/register-form.tsx b/apps/web/modules/auth/ui/register-form.tsx
@@ -22,13 +22,13 @@ import { Separator } from "@/components/ui/separator";
 import { Link } from "@/config/i18n/routing";
 import { GitHubButton } from "./github-button";
 
+// Icons
+import { Loader2 } from "lucide-react";
+
 // Utils
 import { zodResolver } from "@hookform/resolvers/zod";
 import { signIn } from "next-auth/react";
 import { z } from "zod";
-
-// Schema
-import { Loader2 } from "lucide-react";
 import { registerAction } from "../lib/actions";
 import { registerSchema } from "../lib/schemas";
 
@@ -66,7 +66,6 @@ export function RegisterForm() {
           variant: "success",
           duration: 4000,
         });
-
         router.push("/hub");
       }
     });
@@ -77,10 +76,15 @@ export function RegisterForm() {
   };
 
   return (
-    <div className="container mx-auto max-w-md p-6">
-      <h1 className="text-2xl font-bold mb-6">{t("title")}</h1>
+    <div className="w-full max-w-md p-8 rounded-lg shadow-md">
+      <h1 className="text-3xl font-bold mb-6">{t("title")}</h1>
+      <GitHubButton handleGitHubAuth={handleGitHubSignUp} />
+      <Separator className="my-6" />
+      <p className="text-center text-sm text-gray-600 mb-6">
+        {t("orUseEmail")}
+      </p>
       <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
           <FormField
             control={form.control}
             name="name"
@@ -133,22 +137,19 @@ export function RegisterForm() {
             {isPending ? (
               <>
                 {t("submitting")}
-                <Loader2 className="animate-spin" />
+                <Loader2 className="ml-2 h-4 w-4 animate-spin" />
               </>
             ) : (
               t("submit")
             )}
           </Button>
         </form>
       </Form>
-      <Separator className="my-7" />
-      <div className="mt-4">
-        <GitHubButton handleGitHubAuth={handleGitHubSignUp} />
-      </div>
+
       <div className="mt-6 text-center">
         <p className="text-sm text-gray-600">
           {t("haveAccount")}{" "}
-          <Link href="/auth/login" className="text-blue-600 underline">
+          <Link href="/auth/login" className="text-blue-600 hover:underline">
             {t("login")}
           </Link>
         </p>

diff --git a/apps/web/modules/auth/ui/register-hero.tsx b/apps/web/modules/auth/ui/register-hero.tsx
@@ -0,0 +1,35 @@
+// Hooks
+import { useTranslations } from "next-intl";
+
+// Components
+import { Logo } from "@/components/shared/logo";
+import { CheckCircle } from "lucide-react";
+
+interface Feature {
+  title: string;
+}
+
+export function RegisterHero() {
+  const t = useTranslations();
+  const features = t.raw("register.hero.items") as Feature[];
+
+  return (
+    <div className="lg:flex flex-col justify-center p-8 max-w-2xl mx-auto lg:mx-0 hidden">
+      <Logo />
+      <h2 className="text-4xl lg:text-5xl font-bold leading-tight text-primary-900 my-6">
+        {t("register.hero.title")}
+      </h2>
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        {features.map((feature, index) => (
+          <div
+            key={index}
+            className="flex flex-col gap-3 bg-card p-4 rounded-lg text-foreground border gradient-background text-white"
+          >
+            <CheckCircle className="w-6 h-6 flex-shrink-0" />
+            <span className="font-medium">{feature.title}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}