File size: 3,403 Bytes
9b30f5f de10f77 9b30f5f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 |
<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:contact@bergereenchantee.fr">contact@bergereenchantee.fr</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>
|