achat-maison-albi-fr/src/components/sections/ContactSection_fr.astro
Emil Gulamov 82916cce1b Add French translations of new pages and update site configuration
Introduced French translations of new pages including 404, contact, products index, home, and services. Also updated site configuration to handle French translations and added a new ContactSection_fr.astro component for the French version of the Contact Us section.
2024-03-25 22:40:55 +04:00

119 lines
4.3 KiB
Text

---
// Import the necessary dependencies.
import AuthBtn from "../ui/buttons/AuthBtn.astro";
import ContactIconBlock from "../ui/blocks/ContactIconBlock.astro";
import TextInput from "../ui/forms/input/TextInput.astro";
import EmailContactInput from "../ui/forms/input/EmailContactInput.astro";
import PhoneInput from "../ui/forms/input/PhoneInput.astro";
import TextAreaInput from "../ui/forms/input/TextAreaInput.astro";
import Icon from "../ui/icons/Icon.astro";
// Define the variables that will be used in this component
const title: string = "Contactez-nous";
const subTitle: string =
"Vous avez des questions ou souhaitez discuter d'un projet ? Contactez-nous et laissons-nous élaborer la solution parfaite avec nos outils et services.";
const formTitle: string = "Remplissez le formulaire ci-dessous";
const formSubTitle: string =
"Nous vous répondrons dans un délai de 1 à 2 jours ouvrables.";
---
<!-- 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-balance text-2xl font-bold tracking-tight text-neutral-800 dark:text-neutral-200 md:text-4xl md:leading-tight"
>
{title}
</h1>
<p class="mt-1 text-pretty text-neutral-600 dark:text-neutral-400">
{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"
>
{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>
<div class="grid gap-4">
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
<TextInput
id="hs-firstname-contacts"
label="Prénom"
name="hs-firstname-contacts"
/>
<TextInput
id="hs-lastname-contacts"
label="Nom"
name="hs-firstname-contacts"
/>
</div>
<EmailContactInput id="hs-email-contacts" />
<PhoneInput id="hs-phone-number" />
<TextAreaInput
id="hs-about-contacts"
label="Détails"
name="hs-about-contacts"
/>
</div>
<div class="mt-4 grid">
<AuthBtn title="Envoyer un message" />
</div>
<div class="mt-3 text-center">
<p class="text-sm text-neutral-600 dark:text-neutral-400">
{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="Base de connaissances"
content="Parcourez tous nos articles de base de connaissances."
isLinkVisible={true}
linkTitle="Visiter les guides et tutoriels"
linkURL="#"
isArrowVisible={true}
><Icon name="question" />
</ContactIconBlock>
<ContactIconBlock
heading="FAQ"
content="Explorez notre FAQ pour des réponses rapides et claires aux questions courantes."
isLinkVisible={true}
linkTitle="Visiter la FAQ"
linkURL="#"
isArrowVisible={true}
><Icon name="chatBubble" />
</ContactIconBlock>
<ContactIconBlock
heading="Visitez notre bureau"
content="ScrewFast UK"
isAddressVisible={true}
addressContent="72 Union Terrace, E10 4PE London"
><Icon name="mapPin" />
</ContactIconBlock>
<ContactIconBlock
heading="Contactez-nous par e-mail"
content="Préférez-vous le texte écrit ? Envoyez-nous un e-mail à"
isLinkVisible={true}
linkTitle="support@screwfast.uk"
linkURL="#"
><Icon name="envelopeOpen" />
</ContactIconBlock>
</div>
</div>
</div>
</section>