121 lines
3.3 KiB
Svelte
121 lines
3.3 KiB
Svelte
<script lang="ts">
|
|
import { getContext } from 'svelte'
|
|
import { page } from '$app/stores'
|
|
// Components
|
|
import Metas from '$components/Metas.svelte'
|
|
import SiteTitle from '$components/atoms/SiteTitle.svelte';
|
|
import Image from '$components/atoms/Image.svelte';
|
|
import PosterProduct from '$components/organisms/PosterProduct.svelte';
|
|
import Poster from '$components/molecules/Poster.svelte';
|
|
import Newsletter from '$components/organisms/Newsletter.svelte';
|
|
import EmailForm from '$components/molecules/EmailForm.svelte';
|
|
|
|
export let photos: any
|
|
</script>
|
|
|
|
<Metas
|
|
title="Houses Of"
|
|
description=""
|
|
image=""
|
|
/>
|
|
|
|
<main class="shop-page">
|
|
<header class="shop-page__header">
|
|
<p class="text-label">Shop your city</p>
|
|
<nav>
|
|
<ul>
|
|
<li>
|
|
<a href="#">Bordeaux</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">Brisbane</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">Melbourne</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">Montpellier</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">Occitanie</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">Toulouse</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<div class="cart">
|
|
<span>2 items</span>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="shop-page__intro">
|
|
<Image
|
|
id="d439adf1-2391-415b-bb24-232839f142d4"
|
|
sizeKey="photo-list"
|
|
width={1600}
|
|
height={1000}
|
|
alt="photo"
|
|
/>
|
|
<SiteTitle
|
|
variant="inline"
|
|
/>
|
|
</section>
|
|
|
|
<section class="shop-page__about grid">
|
|
<p class="description text-normal">Welcome to our shop!<br />We wanted to create a physical expression to share theses unique places and let the architecture transport you while inside of your own home.</p>
|
|
</section>
|
|
<PosterProduct />
|
|
|
|
<section class="shop-page__posters grid">
|
|
<h3>View all of our available posters</h3>
|
|
<div class="set">
|
|
<Poster />
|
|
<Poster />
|
|
<Poster />
|
|
<Poster />
|
|
<Poster />
|
|
<Poster />
|
|
</div>
|
|
<div class="subscribe">
|
|
<p>Subscribe to be notified when new posters become available</p>
|
|
<EmailForm />
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
|
|
<script context="module" lang="ts">
|
|
import { fetchAPI } from '$utils/api'
|
|
|
|
export async function load ({ page, fetch, session, stuff }) {
|
|
const res = await fetchAPI(`
|
|
query {
|
|
photo (limit: 11, sort: ["-date_created"]) {
|
|
slug
|
|
title
|
|
city
|
|
location {
|
|
name
|
|
slug
|
|
country {
|
|
slug
|
|
name
|
|
flag { id }
|
|
}
|
|
}
|
|
image { id }
|
|
}
|
|
}
|
|
`)
|
|
|
|
const { data } = res
|
|
|
|
return {
|
|
props: {
|
|
photos: data.photo,
|
|
}
|
|
}
|
|
}
|
|
</script>
|