---
import Divider from '../components/AuthenticationFlow/Divider.astro';
import GoogleLogin from '../components/Login/GoogleLogin.astro';
import EmailSignupForm from '../components/AuthenticationFlow/EmailSignupForm';
import SettingLayout from '../layouts/SettingLayout.astro';
import { GitHubButton } from '../components/AuthenticationFlow/GitHubButton';
import { GoogleButton } from '../components/AuthenticationFlow/GoogleButton';
---

<SettingLayout
  title='Signup - roadmap.sh'
  description='Create an account to track your progress, showcase your skillset'
  permalink={'/signup'}
  noIndex={true}
>
  <div class='container'>
    <div
      class='mx-auto flex flex-col items-start justify-start pb-28 pt-10 sm:max-w-[400px] sm:items-center sm:justify-center sm:pt-20'
    >
      <div class='mb-2 text-left sm:mb-5 sm:text-center'>
        <h1 class='mb-2 text-3xl font-semibold sm:mb-5 sm:text-5xl'>Sign Up</h1>
        <p class='mb-3 hidden text-base leading-6 text-gray-600 sm:block'>
          Create an account to track your progress, showcase your skill-set and
          be a part of the community.
        </p>
        <p class='mb-3 block text-sm text-gray-600 sm:hidden'>
          Create an account to track your progress, showcase your skill-set and
          be a part of the community. videos.
        </p>
      </div>

      <div class='flex w-full flex-col items-stretch gap-2'>
        <GitHubButton client:load />
        <GoogleButton client:load />
      </div>

      <Divider />

      <EmailSignupForm client:load />

      <div class='mt-6 text-center text-sm text-slate-600'>
        Already have an account? <a
          href='/login'
          class='font-medium text-blue-700 hover:text-blue-600'>Login</a
        >
      </div>
    </div>
  </div>
</SettingLayout>