115 lines
3.0 KiB
Svelte
115 lines
3.0 KiB
Svelte
<script lang="ts">
|
|
import { getContext } from 'svelte'
|
|
import { page } from '$app/stores'
|
|
// Components
|
|
import Metas from '$components/Metas.svelte'
|
|
import Button from '$components/atoms/Button.svelte'
|
|
import IconEarth from '$components/atoms/IconEarth.svelte'
|
|
import BoxCTA from '$components/atoms/BoxCTA.svelte'
|
|
import DiscoverText from '$components/atoms/DiscoverText.svelte'
|
|
import PhotoCard from '$components/molecules/PhotoCard.svelte'
|
|
import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte'
|
|
import Locations from '$components/organisms/Locations.svelte'
|
|
import Shop from '$components/organisms/Shop.svelte'
|
|
import Newsletter from '$components/organisms/Newsletter.svelte'
|
|
|
|
export let photos: any
|
|
|
|
const { settings, location }: any = getContext('global')
|
|
const { path } = $page
|
|
</script>
|
|
|
|
<Metas
|
|
title="Houses Of"
|
|
description=""
|
|
image=""
|
|
/>
|
|
|
|
<main class="homepage">
|
|
<section class="homepage__intro">
|
|
<h1 class="title-huge">Houses</h1>
|
|
|
|
<p class="text-medium">{settings.description}</p>
|
|
|
|
<Button text="Explore locations" url="{path}#locations">
|
|
<IconEarth animate={true} />
|
|
</Button>
|
|
</section>
|
|
|
|
<section class="homepage__photos">
|
|
<div class="homepage__collage">
|
|
{#each photos as { image: { id, title } }}
|
|
<PhotoCard id={id} alt={title} />
|
|
{/each}
|
|
</div>
|
|
</section>
|
|
|
|
<div class="homepage__ctas" id="ctas">
|
|
<DiscoverText />
|
|
|
|
<div class="cards">
|
|
<BoxCTA
|
|
url="{path}#locations"
|
|
icon="/images/icons/globe.svg"
|
|
label="Discover locations"
|
|
alt="Globe"
|
|
/>
|
|
<BoxCTA
|
|
url="/photos"
|
|
icon="/images/icons/photos.svg"
|
|
label="Browse all photos"
|
|
alt="Photos"
|
|
/>
|
|
<BoxCTA
|
|
url="/shop"
|
|
icon="/images/icons/bag.svg"
|
|
label="Shop our products"
|
|
alt="Shopping bag"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<section class="homepage__locations" id="locations">
|
|
<InteractiveGlobe />
|
|
|
|
<Locations
|
|
locations={location}
|
|
/>
|
|
</section>
|
|
|
|
<div class="grid-modules">
|
|
<div class="container grid">
|
|
<div class="wrap">
|
|
<Shop />
|
|
<Newsletter />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
|
|
<script context="module" lang="ts">
|
|
import { fetchAPI } from '$utils/api'
|
|
|
|
export async function load ({ page, session, fetch, context }) {
|
|
const res = await fetchAPI(`
|
|
query {
|
|
photo (limit: 11, sort: ["-date_created"]) {
|
|
image {
|
|
id
|
|
title
|
|
}
|
|
}
|
|
}
|
|
`)
|
|
|
|
const { data } = res
|
|
|
|
return {
|
|
props: {
|
|
photos: data.photo,
|
|
}
|
|
}
|
|
}
|
|
</script>
|