signal form value:{ email:"" password:"" remember:false }

Section id:"login-split-auth" p:0 minH:"vh-0"
  Grid columns:{ xs:1 md:2 } gap:0 minH:"vh-0"
    Box bg:"softPrimary" color:"primary" minH:{ xs:40 md:"vh-0" } p:{ xs:6 md:12 }
      Flex direction:"column" justify:"center" align:"center" minH:{ xs:40 md:"vh-0" }
        Box bg:"surface" rounded:"full" p:{ xs:5 md:9 } shadow:"xl" shadowColor:"muted"
          Icon name:"shield-user-bold-duotone" fill:"primary" w:{ xs:16 md:24 } h:{ xs:16 md:24 }
    Flex direction:"column" justify:"center" align:"center" p:{ xs:6 md:12 } minH:{ xs:"vh-40" md:"vh-0" }
      Grid columns:1 gap:5 w:"full" maxW:96
        Grid columns:1 gap:2
          Title size:"3xl" weight:"black"
            "Log in"
          Text size:"sm" color:"muted"
            "Welcome back. Enter your details to continue."
        Input bind:form.email label:"Email address" placeholder:"you@example.com" variant:"soft" w:"full"
        Password bind:form.password label:"Password" placeholder:"Enter your password" hideStrength:true variant:"soft" w:"full"
        Flex justify:"between" align:"center" gap:2
          Checkbox bind:form.remember label:"Remember me"
          Button href:"/blocks/auth-preview/forgot-password" variant:"ghost" size:"xs"
            "Forgot password?"
        Button w:"full"
          "Log in"
        Grid columns:{ xs:1 lg:2 } gap:2
          Button variant:"outlined" size:"sm" iconStart:"global" w:"full"
            "Continue with Google"
          Button variant:"outlined" size:"sm" iconStart:"smartphone" w:"full"
            "Continue with Apple"

signal form value:{ email:"" password:"" remember:false }

Section id:"login-reverse-auth" p:0 minH:"vh-0"
  Grid columns:{ xs:1 md:2 } gap:0 minH:"vh-0"
    Box show:{ xs:true md:false } bg:"softTertiary" color:"tertiary" minH:40 p:6
      Flex direction:"column" justify:"center" align:"center" minH:40
        Icon name:"lock-password-bold-duotone" fill:"tertiary" w:16 h:16
    Flex direction:"column" justify:"center" align:"center" p:{ xs:6 md:12 } minH:{ xs:"vh-40" md:"vh-0" }
      Grid columns:1 gap:5 w:"full" maxW:96
        Title size:"3xl" weight:"black"
          "Log in"
        Input bind:form.email label:"Email address" placeholder:"you@example.com" variant:"soft" scheme:"tertiary" w:"full"
        Password bind:form.password label:"Password" placeholder:"Enter your password" hideStrength:true variant:"soft" scheme:"tertiary" w:"full"
        Flex justify:"between" align:"center" gap:2
          Checkbox bind:form.remember label:"Remember me" scheme:"tertiary"
          Button href:"/blocks/auth-preview/forgot-password" variant:"ghost" scheme:"tertiary" size:"xs"
            "Forgot password?"
        Button scheme:"tertiary" w:"full"
          "Log in"
    Box show:{ xs:false md:true } bg:"softTertiary" color:"tertiary" minH:"vh-0" p:12
      Flex direction:"column" justify:"center" align:"center" minH:"vh-0"
        Icon name:"lock-password-bold-duotone" fill:"tertiary" w:24 h:24

signal form value:{ email:"" password:"" remember:false }

Section id:"login-card-auth" bg:"softMuted" boxed:true p:{ xs:5 md:10 } minH:"vh-0"
  Grid columns:{ xs:1 md:3 } align:"center" minH:"vh-0"
    Box show:{ xs:false md:true }
    Card rounded:"xl" shadow:"xl" shadowColor:"muted" p:{ xs:6 md:8 }
      Grid columns:1 gap:5
        Flex direction:"column" align:"center" gap:2
          Icon name:"user-circle-bold-duotone" fill:"primary" w:12 h:12
          Title size:"3xl" weight:"black"
            "Welcome back"
          Text size:"sm" color:"muted"
            "Please log in to continue."
        Input bind:form.email label:"Email address" placeholder:"you@example.com" variant:"soft" w:"full"
        Password bind:form.password label:"Password" placeholder:"Enter your password" hideStrength:true variant:"soft" w:"full"
        Checkbox bind:form.remember label:"Remember me"
        Button w:"full"
          "Log in"
        Grid columns:{ xs:1 sm:3 } gap:3
          Button variant:"outlined" size:"sm" iconStart:"global" w:"full"
            "Google"
          Button variant:"outlined" size:"sm" iconStart:"smartphone" w:"full"
            "Apple"
          Button variant:"outlined" size:"sm" iconStart:"chat-round-line" w:"full"
            "Twitter"
    Box show:{ xs:false md:true }

signal email value:""

Section id:"forgot-password-auth" bg:"softMuted" boxed:true p:{ xs:5 md:10 } minH:"vh-0"
  Grid columns:{ xs:1 md:3 } align:"center" minH:"vh-0"
    Box show:{ xs:false md:true }
    Card rounded:"xl" shadow:"xl" shadowColor:"muted" p:{ xs:6 md:8 }
      Grid columns:1 gap:5
        Flex direction:"column" align:"center" gap:2
          Box bg:"softPrimary" color:"primary" rounded:"full" p:4
            Icon name:"letter-unread-bold-duotone" fill:"primary" w:10 h:10
          Title size:"3xl" weight:"black"
            "Forgot your password?"
          Text size:"sm" color:"muted"
            "Enter your email and we will send you a secure reset link."
        Input bind:email label:"Email address" placeholder:"you@example.com" variant:"soft" w:"full"
        Button w:"full"
          "Send reset link"
        Button href:"/blocks/auth-preview/login-card" variant:"ghost" size:"sm" iconStart:"arrow-left"
          "Back to log in"
    Box show:{ xs:false md:true }

signal form value:{ firstName:"" lastName:"" email:"" password:"" accepted:false }

Section id:"signup-split-auth" p:0 minH:"vh-0"
  Grid columns:{ xs:1 md:2 } gap:0 minH:"vh-0"
    Box bg:"softSecondary" color:"success" minH:{ xs:40 md:"vh-0" } p:{ xs:6 md:12 }
      Flex direction:"column" justify:"center" align:"center" minH:{ xs:40 md:"vh-0" }
        Icon name:"user-plus-rounded-bold-duotone" fill:"success" w:{ xs:16 md:24 } h:{ xs:16 md:24 }
    Flex direction:"column" justify:"center" align:"center" p:{ xs:6 md:12 } minH:{ xs:"vh-40" md:"vh-0" }
      Grid columns:1 gap:5 w:"full" maxW:96
        Title size:"3xl" weight:"black"
          "Sign up"
        Grid columns:2 gap:3
          Input bind:form.firstName label:"First name" placeholder:"First name" variant:"soft" scheme:"success" w:"full"
          Input bind:form.lastName label:"Last name" placeholder:"Last name" variant:"soft" scheme:"success" w:"full"
        Input bind:form.email label:"Email address" placeholder:"you@example.com" variant:"soft" scheme:"success" w:"full"
        Password bind:form.password label:"Password" placeholder:"Create a password" hideStrength:false variant:"soft" scheme:"success" w:"full"
        Checkbox bind:form.accepted label:"I agree to the terms and privacy policy." scheme:"success"
        Button scheme:"success" w:"full"
          "Create account"
        Grid columns:{ xs:1 lg:2 } gap:2
          Button variant:"outlined" scheme:"success" size:"sm" iconStart:"global" w:"full"
            "Continue with Google"
          Button variant:"outlined" scheme:"success" size:"sm" iconStart:"smartphone" w:"full"
            "Continue with Apple"

signal form value:{ firstName:"" lastName:"" email:"" password:"" accepted:false }

Section id:"signup-reverse-auth" p:0 minH:"vh-0"
  Grid columns:{ xs:1 md:2 } gap:0 minH:"vh-0"
    Box show:{ xs:true md:false } bg:"softInfo" color:"info" minH:40 p:6
      Flex direction:"column" justify:"center" align:"center" minH:40
        Icon name:"user-check-rounded-bold-duotone" fill:"info" w:16 h:16
    Flex direction:"column" justify:"center" align:"center" p:{ xs:6 md:12 } minH:{ xs:"vh-40" md:"vh-0" }
      Grid columns:1 gap:5 w:"full" maxW:96
        Title size:"3xl" weight:"black"
          "Sign up"
        Grid columns:2 gap:3
          Input bind:form.firstName label:"First name" placeholder:"First name" variant:"soft" scheme:"info" w:"full"
          Input bind:form.lastName label:"Last name" placeholder:"Last name" variant:"soft" scheme:"info" w:"full"
        Input bind:form.email label:"Email address" placeholder:"you@example.com" variant:"soft" scheme:"info" w:"full"
        Password bind:form.password label:"Password" placeholder:"Create a password" hideStrength:false variant:"soft" scheme:"info" w:"full"
        Checkbox bind:form.accepted label:"I agree to the terms and privacy policy." scheme:"info"
        Button scheme:"info" w:"full"
          "Create account"
    Box show:{ xs:false md:true } bg:"softInfo" color:"info" minH:"vh-0" p:12
      Flex direction:"column" justify:"center" align:"center" minH:"vh-0"
        Icon name:"user-check-rounded-bold-duotone" fill:"info" w:24 h:24

signal form value:{ firstName:"" lastName:"" email:"" password:"" accepted:false }

Section id:"signup-card-auth" bg:"softMuted" boxed:true p:{ xs:5 md:10 } minH:"vh-0"
  Grid columns:{ xs:1 md:3 } align:"center" minH:"vh-0"
    Box show:{ xs:false md:true }
    Card rounded:"xl" shadow:"xl" shadowColor:"primary" p:{ xs:6 md:8 } border:1
      Grid columns:1 gap:5
        Flex direction:"column" align:"center" gap:2
          Icon name:"shield-check-bold-duotone" fill:"primary" w:12 h:12
          Title size:"3xl" weight:"black"
            "Sign up free"
          Text size:"sm" color:"muted"
            "14-day free access to unlimited resources."
        Grid columns:2 gap:3
          Input bind:form.firstName label:"First name" placeholder:"First name" variant:"soft" w:"full"
          Input bind:form.lastName label:"Last name" placeholder:"Last name" variant:"soft" w:"full"
        Input bind:form.email label:"Email address" placeholder:"you@example.com" variant:"soft" w:"full"
        Password bind:form.password label:"Password" placeholder:"Create a password" hideStrength:false variant:"soft" w:"full"
        Checkbox bind:form.accepted label:"I agree to the terms and privacy policy."
        Button w:"full"
          "Create free account"
        Grid columns:{ xs:1 sm:3 } gap:3
          Button variant:"outlined" size:"sm" iconStart:"global" w:"full"
            "Google"
          Button variant:"outlined" size:"sm" iconStart:"smartphone" w:"full"
            "Apple"
          Button variant:"outlined" size:"sm" iconStart:"chat-round-line" w:"full"
            "Twitter"
    Box show:{ xs:false md:true }