changes

package.json

@@ -32,6 +32,7 @@
     "react-social-icons": "^6.18.0",
     "react-turnstile": "^1.1.3",
     "sharp": "^0.33.5",
+    "sonner": "^1.5.0",
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^3.23.8",

src/app/(pages)/auth/page.tsx

@@ -6,6 +6,7 @@ import { Separator } from "@/components/ui/separator";
 import AuthForm from "@/components/auth/auth-form";
 import { motion } from "framer-motion";
 import Greeting from "@/components/auth/greeting";
+import Footer from "@/components/auth/footer";
 
 /**
  * The page to authenticate with.
@@ -28,6 +29,7 @@ const AuthPage = (): ReactElement => (
                 <Separator className="w-28" />
             </div>
             <AuthForm />
+            <Footer />
         </motion.div>
     </main>
 );

src/app/(pages)/layout.tsx

@@ -6,6 +6,7 @@ import { cn } from "@/lib/utils";
 import { NextFont } from "next/dist/compiled/@next/font";
 import { ThemeProvider } from "@/components/theme-provider";
 import { CookiesProvider } from "next-client-cookies/server";
+import { Toaster } from "@/components/ui/sonner";
 
 const inter: NextFont = Inter({ subsets: ["latin"] });
 
@@ -50,7 +51,10 @@ const RootLayout = ({
                             "linear-gradient(to top, hsla(240, 6%, 10%, 0.7), hsl(var(--background)))",
                     }}
                 >
-                    <CookiesProvider>{children}</CookiesProvider>
+                    <CookiesProvider>
+                        {children}
+                        <Toaster />
+                    </CookiesProvider>
                 </div>
             </ThemeProvider>
         </body>

src/app/styles/globals.css

@@ -50,7 +50,7 @@ body {
         --card-foreground: 0 0% 98%;
         --popover: 240 10% 3.9%;
         --popover-foreground: 0 0% 98%;
-        --primary: 0 0% 98%;
+        --primary: 0 84% 60%;
         --primary-foreground: 240 5.9% 10%;
         --secondary: 240 3.7% 15.9%;
         --secondary-foreground: 0 0% 98%;

src/components/auth/footer.tsx

@@ -0,0 +1,28 @@
+import { ReactElement } from "react";
+import Link from "next/link";
+
+/**
+ * The auth footer.
+ *
+ * @return the footer jsx
+ */
+const Footer = (): ReactElement => (
+    <footer className="flex justify-center text-center">
+        <p className="max-w-[17rem]">
+            By registering you agree to our{" "}
+            <DocumentLink name="Terms and Conditions" link="/legal/terms" /> and
+            our <DocumentLink name="Privacy Policy" link="/legal/privacy" />.
+        </p>
+    </footer>
+);
+
+const DocumentLink = ({ name, link }: { name: string; link: string }) => (
+    <Link
+        className="text-primary hover:opacity-85 transition-all transform-gpu"
+        href={link}
+    >
+        {name}
+    </Link>
+);
+
+export default Footer;

src/components/auth/greeting.tsx

@@ -16,18 +16,11 @@ const Greeting = (): ReactElement => {
             : currentHour < 18
               ? "Afternoon"
               : "Evening";
-    // return (
-    //     <h1 className="text-3xl font-bold select-none pointer-events-none">
-    //         Good {greeting},
-    //     </h1>
-    // );
 
     return (
         <div className="flex flex-col gap-1.5 justify-center items-center select-none pointer-events-none">
             <Branding />
-            <h1 className="text-3xl font-bold leading-none">
-                Good {greeting},
-            </h1>
+            <h1 className="text-3xl font-bold leading-none">Good {greeting}</h1>
             <h2 className="opacity-65">Please login to continue!</h2>
         </div>
     );

src/components/ui/sonner.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { Toaster as Sonner } from "sonner";
+
+type ToasterProps = React.ComponentProps<typeof Sonner>;
+
+const Toaster = ({ ...props }: ToasterProps) => {
+    const { theme = "system" } = useTheme();
+
+    return (
+        <Sonner
+            theme={theme as ToasterProps["theme"]}
+            className="toaster group"
+            toastOptions={{
+                classNames: {
+                    toast: "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+                    description: "group-[.toast]:text-muted-foreground",
+                    actionButton:
+                        "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+                    cancelButton:
+                        "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+                },
+            }}
+            {...props}
+        />
+    );
+};
+
+export { Toaster };