Login Form

---
import Form from "@forms/form/Form.astro";
import Input from "@forms/input/Input.astro";
import Submit from "@forms/submit/Submit.astro";
import LoginForm from "@page-sections/ctas/login-form/LoginForm.astro";
---

<LoginForm backgroundColor="base" benefits={
  [
    {
      "title": "Shared visibility",
      "description": "Teams can review the same content and status updates in one place.",
      "iconName": "chart-bar",
      "iconColor": "blue"
    },
    {
      "title": "Faster edits",
      "description": "Visual editing keeps routine content changes out of the code queue.",
      "iconName": "pencil-square",
      "iconColor": "purple"
    },
    {
      "title": "Safer workflows",
      "description": "Structured components reduce one-off publishing mistakes.",
      "iconName": "shield-check",
      "iconColor": "green"
    }
  ]
} cardEyebrow="Welcome back" cardHeading="Log in to your account" cardText="Use your email and password, or continue with a social provider below." colorScheme="inherit" dividerText="Or continue with" footerLink="/sign-up/" footerLinkText="Create one" footerText="Need an account?" forgotPasswordLink="/reset-password/" forgotPasswordText="Forgot your password?" formAction="#" imageAlt="Quiet street with storefronts in warm evening light" imageSource="/src/assets/images/component-docs/quiet-street.jpg" introEyebrow="Member access" introHeading="Sign in and continue your work" introText="Access project history, manage content updates, and keep your team aligned from one account area." paddingVertical="5xl" socialButtonSections={
  [
    {
      "_component": "building-blocks/core-elements/button",
      "text": "Continue with Google",
      "hideText": false,
      "link": "/api/auth/oauth/google/start?returnTo=/account/",
      "iconName": "social/google",
      "iconPosition": "before",
      "variant": "tertiary",
      "size": "md"
    },
    {
      "_component": "building-blocks/core-elements/button",
      "text": "Continue with Facebook",
      "hideText": false,
      "link": "/api/auth/oauth/facebook/start?returnTo=/account/",
      "iconName": "social/facebook",
      "iconPosition": "before",
      "variant": "tertiary",
      "size": "md"
    }
  ]
}>
  <Form action="#">
    <Input iconName="envelope" iconPosition="before" label="Email address" name="email" placeholder="you@company.com" required type="email" />
    <Input iconName="lock-closed" iconPosition="before" label="Password" name="password" placeholder="Enter your password" required type="password" />
    <Submit size="md" variant="primary">
      Log in
    </Submit>
  </Form>
</LoginForm>