TenantAtlas/apps/website/src/components/sections/misc/ContactSection.astro

---
// Import the necessary dependencies.
import AuthBtn from '@components/ui/buttons/AuthBtn.astro';
import ContactIconBlock from '@components/ui/blocks/ContactIconBlock.astro';
import TextInput from '@components/ui/forms/input/TextInput.astro';
import EmailContactInput from '@components/ui/forms/input/EmailContactInput.astro';
import PhoneInput from '@components/ui/forms/input/PhoneInput.astro';
import TextAreaInput from '@components/ui/forms/input/TextAreaInput.astro';
import Icon from '@components/ui/icons/Icon.astro';
import { localizeHref, type Locale } from '@/i18n';
import { siteCopy } from '@data/site-copy';

const { locale = 'de' } = Astro.props;

interface Props {
  locale?: Locale;
}

const copy = siteCopy[locale].contact;
---

{/* Contact Us */}
<section class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14">
  <div class="mx-auto max-w-2xl lg:max-w-5xl">
    <div class="text-center">
      <h1
        class="text-2xl font-bold tracking-tight text-balance text-neutral-800 md:text-4xl md:leading-tight dark:text-neutral-200"
      >
        {copy.title}
      </h1>
      <p class="mt-1 text-pretty text-neutral-600 dark:text-neutral-400">
        {copy.subtitle}
      </p>
    </div>

    <div class="mt-12 grid items-center gap-6 lg:grid-cols-2 lg:gap-16">
      <div class="flex flex-col rounded-xl p-4 sm:p-6 lg:p-8">
        <h2
          class="mb-8 text-xl font-bold text-neutral-700 dark:text-neutral-300"
        >
          {copy.formTitle}
        </h2>
        {
          /* Form for user input with various input fields.-->
        {/* Each field utilizes a different input component for the specific type of input (text, email, phone, and textarea)*/
        }
        <form
          action="mailto:hello@tenantial.com"
          method="post"
          enctype="text/plain"
        >
          <div class="grid gap-4">
            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
              <TextInput
                id="hs-firstname-contacts"
                label={copy.firstName}
                name="hs-firstname-contacts"
              />
              <TextInput
                id="hs-lastname-contacts"
                label={copy.lastName}
                name="hs-lastname-contacts"
              />
            </div>
            <EmailContactInput id="hs-email-contacts" label={copy.email} />
            <PhoneInput id="hs-phone-number" label={copy.phone} />
            <TextAreaInput
              id="hs-about-contacts"
              label={copy.details}
              name="hs-about-contacts"
            />
          </div>

          <div class="mt-4 grid">
            <AuthBtn title={copy.submit} />
          </div>

          <div class="mt-3 text-center">
            <p class="text-sm text-neutral-600 dark:text-neutral-400">
              {copy.formSubtitle}
            </p>
          </div>
        </form>
      </div>

      {
        /*ContactIconBlocks are used to display different methods of contacting, including visiting office, email, browsing knowledgebase, and FAQ.*/
      }
      <div class="divide-y divide-neutral-300 dark:divide-neutral-700">
        <ContactIconBlock
          heading={copy.blocks.docsHeading}
          content={copy.blocks.docsContent}
          isLinkVisible={true}
          linkTitle={copy.blocks.docsLink}
          linkURL={localizeHref('/docs/', locale)}
          isArrowVisible={true}
          ><Icon name="question" />
        </ContactIconBlock>

        <ContactIconBlock
          heading={copy.blocks.faqHeading}
          content={copy.blocks.faqContent}
          isLinkVisible={true}
          linkTitle={copy.blocks.faqLink}
          linkURL={localizeHref('/#faq', locale)}
          isArrowVisible={true}
          ><Icon name="chatBubble" />
        </ContactIconBlock>

        <ContactIconBlock
          heading={copy.blocks.boundaryHeading}
          content={copy.blocks.boundaryContent}
          isAddressVisible={false}
          ><Icon name="mapPin" />
        </ContactIconBlock>

        <ContactIconBlock
          heading={copy.blocks.emailHeading}
          content={copy.blocks.emailContent}
          isLinkVisible={true}
          linkTitle="hello@tenantial.com"
          linkURL="mailto:hello@tenantial.com"
          ><Icon name="envelopeOpen" />
        </ContactIconBlock>
      </div>
    </div>
  </div>
</section>