src/routes/contact/+page.svelte

<script lang="ts">
	import type { ContactPage } from '$lib/types/Page';
	import Container from '$lib/components/Container.svelte';
	import { marked } from 'marked';
	import Picture from '$lib/components/Picture.svelte';
	import type { ActionData, PageData } from './$types';
	import { enhance } from '$app/forms';

	export let data: PageData;

	const pageData: ContactPage = data.pageData as ContactPage;
	const pictures = data.pictures;

	export let form: ActionData;
</script>

<Container class="mb-6">
	<section class="relative lg:h-xl mt-12 flex">
		<img
			src="/triangles.svg"
			alt="Triangles"
			class="pointer-events-none select-none absolute hidden lg:block h-5/6"
			style="left: 50%; top: 50%; transform: translate(-50%, -50%) scaleX(-1); z-index: -1"
		/>
		<Picture
			picture={pictures.find((p) => p._id === pageData.pictures['photo-garde'])}
			sizes="(max-width: 1200px) 50vw, 600px"
			grow
			basis-0
			hidden
			class="rounded-3xl h-full object-cover w-3/6 lg:block"
		/>
		<div class="lg:w-3/6 h-full flex flex-col justify-evenly lg:pl-12">
			<h2 class="text-oxford text-7xl mb-7 lg:mb-0" style="mix-blend-mode: color-burn;">Contact</h2>
			<ul class="text-oxford">
				<li class="flex items-center">
					<div class="i-ant-design-phone-outlined inline-block mr-2" />
					<a rel="external" href="tel:+33774521115">07 74 52 11 15</a>
				</li>
				<li class="flex items-center mt-2">
					<div class="i-ant-design-mail-outlined inline-block mr-2" />
					<a rel="external" href="mailto:[email protected]">[email protected]</a
					>
				</li>
				<li class="flex mt-2">
					<div class="i-ant-design-clock-circle-outlined inline-block mr-2 lg:mt-1" />
					le lundi mardi jeudi vendredi de 9h à 17h30 et le mercredi de 9h à 12h
				</li>
			</ul>
		</div>
	</section>
	<div class="pt-3">
		{@html marked(pageData.text.description)}
	</div>

	{#if form?.success}
		<div class="border border-blue-500 bg-blue-300 rounded-lg pa-2">
			Votre message a bien été envoyé. <br /><br /> Daphné vous répondra rapidement.
		</div>
	{:else}
		<form method="post" class="text-oxford font-semibold text-lg" use:enhance>
			<div class="mt-4">
				<label for="lastName" class="block">Nom</label>
				<input
					type="text"
					name="lastName"
					id="lastName"
					placeholder="Nom"
					class="input box-border"
					style="max-width: 100% !important"
					required
				/>
			</div>

			<div class="mt-4">
				<label for="firstName" class="block">Prénom</label>
				<input
					type="text"
					name="firstName"
					id="firstName"
					placeholder="Prénom"
					class="input box-border"
					style="max-width: 100% !important"
					required
				/>
			</div>

			<div class="mt-4">
				<label for="email" class="block">Mail</label>
				<input
					type="email"
					name="email"
					id="email"
					placeholder="Adresse mail"
					class="input box-border"
					style="max-width: 100% !important"
					required
				/>
			</div>

			<div class="mt-4">
				<label for="message" class="block">Message</label>
				<textarea
					name="message"
					id="message"
					cols="30"
					rows="5"
					class="input box-border"
					style="max-width: 100% !important"
					placeholder="Votre message"
					required
				/>
			</div>

			<div class="w-full flex mt-4">
				<button type="submit" class="btn ml-auto"> Envoyer </button>
			</div>
		</form>
	{/if}
</Container>