47 lines
1.1 KiB
Svelte
47 lines
1.1 KiB
Svelte
<style lang="scss" src="./Banner.scss"></style>
|
|
|
|
<script lang="ts">
|
|
// Components
|
|
import Image from '$components/atoms/Image.svelte'
|
|
|
|
let {
|
|
title,
|
|
image,
|
|
back = false,
|
|
}: {
|
|
title: string
|
|
image: any
|
|
back?: boolean
|
|
} = $props()
|
|
</script>
|
|
|
|
<section class="banner">
|
|
<div class="banner__top container">
|
|
{#if back}
|
|
<a href="/" class="back" data-sveltekit-noscroll>
|
|
<svg width="5" height="8" viewBox="0 0 5 8" fill="none">
|
|
<path d="M4 1 1 4l3 3" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
<span>Back to Houses Of</span>
|
|
</a>
|
|
{/if}
|
|
</div>
|
|
|
|
<div class="banner__title">
|
|
<h1 class="title-big-sans">{title}</h1>
|
|
</div>
|
|
|
|
<Image
|
|
class="banner__background"
|
|
id={image.id}
|
|
alt={image.alt}
|
|
sizeKey="hero"
|
|
sizes={{
|
|
large: { width: 1800, height: 1200 },
|
|
medium: { width: 1200, height: 800 },
|
|
small: { width: 700, height: 700 },
|
|
}}
|
|
lazy={false}
|
|
/>
|
|
</section>
|