flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add anchor links to CTAs

Browse Source
This commit is contained in:
Félix Péault
2021-10-03 13:10:57 +02:00
parent dc11cd28ad
commit c4ba30db6a
3 changed files with 14 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/routes/index.svelte
View File

@@ -1,10 +1,12 @@
<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 BoxCTA from '$components/atoms/BoxCTA.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'
@@ -12,6 +14,7 @@
export let photos: any
const { settings, location, count }: any = getContext('global')
const { path } = $page
</script>
<Metas
@@ -24,7 +27,7 @@
<section class="homepage__intro">
<h1 class="title-huge">Houses</h1>
<p class="text-medium">{settings.description}</p>
<Button text="Explore locations" url="#">
<Button text="Explore locations" url="{path}#ctas">
<img src="/images/icons/globe.svg" alt="explore globe">
</Button>
</section>
@@ -37,11 +40,15 @@
</div>
</section>
<div class="homepage__ctas">
<p>Discover <strong>{count.photos} homes<br /></strong> from <strong>{count.locations} cities</strong> of <strong>{count.countries} countries</strong></p>
<div class="homepage__ctas" id="ctas">
<p>
Discover <strong>{count.photos} homes</strong><br>
from <strong>{count.locations} cities</strong>
of <strong>{count.countries} countries</strong>
</p>
<div class="cards">
<BoxCTA url="#" icon="/images/icons/explore.svg" label="Explore the globe" alt="Globe" />
<BoxCTA url="#" icon="/images/icons/pin.svg" label="Discover the locations" alt="Paper pin" />
<BoxCTA url="{path}#globe" icon="/images/icons/explore.svg" label="Explore the globe" alt="Globe" />
<BoxCTA url="{path}#locations" icon="/images/icons/pin.svg" label="Discover the locations" alt="Paper pin" />
<BoxCTA url="/shop" icon="/images/icons/bag.svg" label="Shop the prints" alt="Shopping bag" />
</div>
</div>