frontmatter in skills files

src/apps/officer-web/Screens/Authentication/LandingPage/LandingPage.tsx

@@ -18,10 +18,9 @@ export function LandingPage() {
         </div>
       </header>
 
-      <div className="absolute inset-x-0 bottom-0 z-20 flex justify-center pb-0 md:pb-12">
+      <div className="absolute inset-x-0 bottom-0 z-20 flex justify-center pb-0 md:pb-2">
         {registrationOpen ? <Bootstrap /> : <Login />}
       </div>
     </div>
   );
 }
-

src/apps/officer-web/Screens/Authentication/LandingPage/Login.tsx

@@ -7,17 +7,20 @@ import { useState } from 'react';
 import { toast } from 'sonner';
 import { useForm } from 'hooks/useForm';
 import { useAuth } from 'hooks/useAuth';
+import { useGlobal } from 'hooks/useGlobal';
 
 export function Login() {
   const [isSubmitting, setIsSubmitting] = useState(false);
   const { state, formRef, update, isValid } = useForm<LoginFormState>({}, validateForm);
   const { signin } = useAuth();
+  const [, setDuckHidden] = useGlobal('DUCK_HIDDEN', false);
 
   const handleSubmit = async (ev: React.FormEvent) => {
     ev.preventDefault();
     if (!isValid || isSubmitting) return;
 
     setIsSubmitting(true);
+    setDuckHidden(true);
     try {
       await signin({ email: state.email!, password: state.password! });
       window.location.href = '/';
@@ -31,7 +34,7 @@ export function Login() {
   };
 
   return (
-    <Card className="md:py-12 md:px-24 flex flex-col gap-6">
+    <Card className="md:py-6 md:px-24 flex flex-col gap-6">
       <div className="text-center">
         <div className="text-duck-dark text-2xl font-bold">Welcome Back</div>
         <div className="text-duck-dark/60">Sign in to your account</div>

src/apps/officer-web/Screens/Authentication/Layout/AuthenticationLayout.tsx

@@ -7,7 +7,7 @@ export function AuthenticationLayout({ children }: AuthenticationLayoutProps) {
     <div className="relative overflow-hidden h-dvh outline-none inset-0">
       <section className="relative h-dvh snap-start overflow-hidden">
         <Background />
-        <div className="absolute inset-0 z-520">
+        <div className="absolute inset-0 z-20">
           <div className="absolute inset-x-0 bottom-0 z-20 flex justify-center pb-8 md:pb-12">
             {children}
           </div>

src/apps/officer-web/Screens/Authentication/Layout/Background.tsx

@@ -1,8 +1,11 @@
 import { DuckAvatar } from "./DuckAvatar";
 import { PixelGrid } from "@/components/PixelGrid";
+import { useGlobal } from 'hooks/useGlobal';
 import landscapebg from './landscape1.jpg';
 
 export function Background() {
+  const [duckHidden] = useGlobal('DUCK_HIDDEN', false);
+
   return (
     <div
       className="absolute inset-0 z-0"
@@ -13,7 +16,7 @@ export function Background() {
       }}
     >
       <PixelGrid />
-      <DuckAvatar showDebug={false} fullControlMode={false} currentSection={0} />
+      {!duckHidden && <DuckAvatar showDebug={false} fullControlMode={false} currentSection={0} />}
     </div>
   );
 };