<script>
  import { _ } from "svelte-i18n";
import FormLayout from "./FormLayout.svelte";
</script>

<div class="pt-12 px-4 sm:px-6 lg:px-8 lg:pt-20 bg-gray-900 pb-12">
  <div class="text-center mb-8">
    <h1
      class="mt-9 font-display text-4xl leading-none font-semibold text-white sm:text-5xl lg:text-6xl">
      🔨<br />{$_('settings')}
    </h1>
    <p
      class="mt-2 max-w-xl mx-auto text-xl lg:max-w-3xl lg:text-2xl text-gray-300">
      <span class="text-lg">configure your profile however you want</span>
    </p>
  </div>
</div>

<div class="pt-0 pb-16 bg-gray-50 overflow-hidden lg:pt-12 lg:py-24">
  <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
    <!-- <h2 class="text-4xl font-display font-semibold text-gray-900 md:text-5xl">
      General
    </h2> -->
    <div
      class="max-w-3xl mx-auto text-xl leading-8 font-medium text-gray-900 mb-16">
      <p class="text-center">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Temporibus et
        amet voluptate nulla accusantium vero blanditiis nobis facere veritatis.
        Impedit deserunt saepe aliquid unde consequuntur officia consequatur
        fugit iusto dolorem?
      </p>
    </div>
    <FormLayout />
  </div>
</div>