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

2
src/components/atoms/BoxCTA.svelte
View File

@@ -2,7 +2,7 @@
export let icon: string export let icon: string
export let alt: string export let alt: string
export let label: string export let label: string
export let url: string = undefined export let url: string
</script> </script>
<a href={url} class="box-cta"> <a href={url} class="box-cta">

2
src/components/organisms/Locations.svelte
View File

@@ -9,7 +9,7 @@
const { continent, settings: { explore_list }} = getContext('global') const { continent, settings: { explore_list }} = getContext('global')
</script> </script>
<div class="browse"> <div class="browse" id="locations">
<div class="browse__description"> <div class="browse__description">
<p>{explore_list}</p> <p>{explore_list}</p>
</div> </div>

17
src/routes/index.svelte
View File

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