File size: 3,902 Bytes
65b4f03 3d330e9 65b4f03 3d330e9 65b4f03 012a5bd 65b4f03 012a5bd 65b4f03 |
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 |
<script lang="ts">
import Carousel from '$lib/components/Carousel.svelte';
import Container from '$lib/components/Container.svelte';
import Picture from '$lib/components/Picture.svelte';
import type { HomePage } from '$lib/types/Page';
import { typedKeys } from '$lib/utils/typedKeys';
import { marked } from 'marked';
import type { PageData } from './$types';
export let data: PageData;
const pageData = data.pageData as HomePage;
const pictures = data.pictures;
type PictureKey = keyof typeof pageData.pictures;
const showcasePics = typedKeys(pageData.pictures)
.filter((key) => key.startsWith('realisation-') && pageData.pictures[key as PictureKey])
.map((key) => pictures.find((pic) => pic._id === pageData.pictures[key as PictureKey]))
.filter(Boolean);
</script>
<Container>
<section class="h-xl relative mt-12">
<img
src="/triangles.svg"
alt="Triangles"
class="pointer-events-none select-none absolute h-5/6"
style="left: 38%; top: 50%; transform: translate(-50%, -50%)"
/>
<Picture
picture={pictures.find((p) => p._id === pageData.pictures.discover)}
sizes="(max-width: 1200px) 50vw, 600px"
class="absolute top-0 bottom-0 rounded-3xl right-0 w-full sm:w-3/6 h-full object-cover"
/>
<h2
class="drop-white absolute text-oxford text-center sm:text-left text-7xl"
style="left: 0; top: 50%; transform: translate(0, -50%)"
>
Découvrez <br class="hidden sm:inline" /> nos fauteuils
</h2>
<a
href="/realisations"
class="btn absolute"
style="left: 25%; top: 75%; transform: translate(-50%, -50%)">cliquez ici</a
>
</section>
<section class="h-sm mt-16 flex mb-16">
<div class="grow basis-0 h-full">
<div class="pr-12 h-full">
<div class="w-full h-full relative">
<div
class="rounded-3xl w-full h-full bg-sunray absolute left-4 top-4"
style="z-index: -1"
/>
<Picture
picture={pictures.find((p) => p._id === pageData.pictures.move)}
sizes="(max-width: 1024px) 50vw, 512px"
class="rounded-3xl w-full h-full object-cover"
/>
</div>
</div>
</div>
<div class="grow basis-0 flex flex-col relative">
<h2 class="text-oxford text-4xl mt-6">
Je me déplace dans le <span class="text-sunray">Finistère</span> sur rendez-vous.
</h2>
<a
href="/contact"
class="text-white bg-oxford px-4 py-2 rounded-3xl font-bold absolute bottom-0 right-0"
>en savoir plus</a
>
</div>
</section>
<section style="text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);">
{@html marked(pageData.text['presentation'])}
</section>
</Container>
<section class="bg-oxford my-12 py-12 w-full text-center flex flex-col items-center">
<h2 class="text-4xl text-white">Mes <span class="text-sunray">réalisations</span></h2>
<a href="/realisations" class="text-white bg-sunray px-4 py-2 rounded-3xl font-bold mt-4"
>voir plus</a
>
<Carousel class="w-full mt-12 h-xl sm:h-2xl">
{#each showcasePics as pic}
<div class="w-full h-full flex items-center justify-around">
<Picture
picture={pic}
class="rounded-3xl object-contain"
style="max-width: 100%; max-height: 100%"
sizes="(min-width: 650px) 50vw, 95vw"
/>
</div>
{/each}
</Carousel>
</section>
<Container>
<section class="h-xl rounded-3xl bg-oxford overflow-hidden flex mb-12">
<Picture
class="w-2/6 h-full object-cover"
sizes="(min-width: 1200px) 400px, 33vw"
picture={pictures.find((p) => p._id === pageData.pictures['e-shop'])}
/>
<div class="w-4/6 h-full px-6 py-12 text-white flex flex-col box-border">
<h2 class="text-4xl mb-10">
Notre <span class="text-sunray">e-shop</span> n'attend plus que vous
</h2>
{@html marked(pageData.text['eshop-description'])}
<div class="mt-auto text-center">
<a href="/vente" class="text-white bg-sunray px-4 py-2 rounded-3xl font-bold">e-shop</a>
</div>
</div>
</section>
</Container>
|