page contact
This commit is contained in:
parent
d19e9c4d1e
commit
1e4c8c1454
1 changed files with 11 additions and 84 deletions
|
|
@ -1,19 +1,7 @@
|
||||||
---
|
---
|
||||||
// Import the necessary dependencies.
|
|
||||||
import AuthBtn from "@components/ui/buttons/AuthBtn.astro";
|
|
||||||
import ContactIconBlock from "@components/ui/blocks/ContactIconBlock.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 Icon from "@components/ui/icons/Icon.astro";
|
||||||
|
|
||||||
// Define the variables that will be used in this component
|
|
||||||
const title: string = "Contact us";
|
|
||||||
const subTitle: string =
|
|
||||||
"Have questions or want to discuss a project? Reach out, and let's craft the perfect solution with our tools and services.";
|
|
||||||
const formTitle: string = "Fill in the form below";
|
|
||||||
const formSubTitle: string = "We'll get back to you in 1-2 business days.";
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<!-- Contact Us -->
|
<!-- Contact Us -->
|
||||||
|
|
@ -23,93 +11,32 @@ const formSubTitle: string = "We'll get back to you in 1-2 business days.";
|
||||||
<h1
|
<h1
|
||||||
class="text-balance text-2xl font-bold tracking-tight text-neutral-800 dark:text-neutral-200 md:text-4xl md:leading-tight"
|
class="text-balance text-2xl font-bold tracking-tight text-neutral-800 dark:text-neutral-200 md:text-4xl md:leading-tight"
|
||||||
>
|
>
|
||||||
{title}
|
Nous contacter
|
||||||
</h1>
|
</h1>
|
||||||
<p class="mt-1 text-pretty text-neutral-600 dark:text-neutral-400">
|
<p class="mt-1 text-pretty text-neutral-600 dark:text-neutral-400">
|
||||||
{subTitle}
|
Vous avez des questions ? Vous souhaitez visiter notre maison ? Contactez-nous !
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mt-12 grid items-center gap-6 lg:grid-cols-2 lg:gap-16">
|
<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="First Name"
|
|
||||||
name="hs-firstname-contacts"
|
|
||||||
/>
|
|
||||||
<TextInput
|
|
||||||
id="hs-lastname-contacts"
|
|
||||||
label="Last Name"
|
|
||||||
name="hs-firstname-contacts"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<EmailContactInput id="hs-email-contacts" />
|
|
||||||
<PhoneInput id="hs-phone-number" />
|
|
||||||
<TextAreaInput
|
|
||||||
id="hs-about-contacts"
|
|
||||||
label="Details"
|
|
||||||
name="hs-about-contacts"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-4 grid">
|
|
||||||
<AuthBtn title="Send 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.-->
|
<!--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">
|
<div class="divide-y divide-neutral-300 dark:divide-neutral-700">
|
||||||
<ContactIconBlock
|
<ContactIconBlock
|
||||||
heading="Knowledgebase"
|
heading="Nous appeler"
|
||||||
content="Browse through all of our knowledgebase articles."
|
content="Si nous ne pouvons répondre immédiatement, nous vous rappelerons"
|
||||||
isLinkVisible={true}
|
isLinkVisible={true}
|
||||||
linkTitle="Visit guides & tutorials"
|
linkTitle="06 12 22 20 80"
|
||||||
linkURL="#"
|
linkURL="tel:0612222080"
|
||||||
isArrowVisible={true}
|
><Icon name="envelopeOpen" />
|
||||||
><Icon name="question" />
|
|
||||||
</ContactIconBlock>
|
</ContactIconBlock>
|
||||||
|
|
||||||
<ContactIconBlock
|
<ContactIconBlock
|
||||||
heading="FAQ"
|
heading="Nous écrire"
|
||||||
content="Explore our FAQ for quick, clear answers to common queries."
|
content="Nous répondons également rapidement par courriel"
|
||||||
isLinkVisible={true}
|
isLinkVisible={true}
|
||||||
linkTitle="Visit FAQ"
|
linkTitle="jaliletkarene@arfaoui.net"
|
||||||
linkURL="#"
|
linkURL="mailto:jaliletkarene@arfaoui.net"
|
||||||
isArrowVisible={true}
|
|
||||||
><Icon name="chatBubble" />
|
|
||||||
</ContactIconBlock>
|
|
||||||
|
|
||||||
<ContactIconBlock
|
|
||||||
heading="Visit our office"
|
|
||||||
content="UK ScrewFast"
|
|
||||||
isAddressVisible={true}
|
|
||||||
addressContent="72 Union Terrace, E10 4PE London"
|
|
||||||
><Icon name="mapPin" />
|
|
||||||
</ContactIconBlock>
|
|
||||||
|
|
||||||
<ContactIconBlock
|
|
||||||
heading="Contact us by email"
|
|
||||||
content="Prefer the written word? Drop us an email at"
|
|
||||||
isLinkVisible={true}
|
|
||||||
linkTitle="support@screwfast.uk"
|
|
||||||
linkURL="#"
|
|
||||||
><Icon name="envelopeOpen" />
|
><Icon name="envelopeOpen" />
|
||||||
</ContactIconBlock>
|
</ContactIconBlock>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue