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

refactor: use global page transition in main layout

Browse Source
This commit is contained in:
Félix Péault
2023-05-26 23:49:23 +02:00
parent 685d4fd244
commit d991dad294
17 changed files with 864 additions and 908 deletions
Download Patch File Download Diff File Expand all files Collapse all files

151
apps/website/src/routes/+page.svelte
View File

@@ -13,7 +13,6 @@
import { quartOut } from '$animations/easings'
// Components
import Metas from '$components/Metas.svelte'
import PageTransition from '$components/PageTransition.svelte'
import SplitText from '$components/SplitText.svelte'
import Button from '$components/atoms/Button.svelte'
import IconEarth from '$components/atoms/IconEarth.svelte'
@@ -81,89 +80,87 @@
/>
<PageTransition>
<main class="homepage">
<section class="homepage__intro"
use:reveal={{
animation: { opacity: [0, 1] },
options: {
duration: 1,
},
}}
<main class="homepage">
<section class="homepage__intro"
use:reveal={{
animation: { opacity: [0, 1] },
options: {
duration: 1,
},
}}
>
<ScrollingTitle
tag="h1"
class="title-houses"
label="Houses of the World"
offsetStart={-300}
offsetEnd={400}
>
<ScrollingTitle
tag="h1"
class="title-houses"
label="Houses of the World"
offsetStart={-300}
offsetEnd={400}
>
<SplitText text="Houses" mode="chars" />
</ScrollingTitle>
<SplitText text="Houses" mode="chars" />
</ScrollingTitle>
<div class="homepage__headline">
<p class="text-medium">
{settings.description}
</p>
<div class="homepage__headline">
<p class="text-medium">
{settings.description}
</p>
<Button url="#locations" text="Explore locations" on:click={() => $smoothScroll.scrollTo('#locations', { duration: 2 })}>
<IconEarth animate={true} />
</Button>
</div>
</section>
<section class="homepage__photos">
<Collage {photos} />
</section>
<div class="homepage__ctas">
<DiscoverText />
<ListCTAs>
<li>
<BoxCTA
url="/photos"
icon="photos"
label="Browse all photos"
alt="Photos"
/>
</li>
<li>
<BoxCTA
url="/shop"
icon="bag"
label="Shop our products"
alt="Shopping bag"
/>
</li>
<li>
<BoxCTA
url="/about"
icon="compass"
label="Learn about the project"
alt="Compass"
/>
</li>
</ListCTAs>
<Button url="#locations" text="Explore locations" on:click={() => $smoothScroll.scrollTo('#locations', { duration: 2 })}>
<IconEarth animate={true} />
</Button>
</div>
</section>
<section class="homepage__locations" id="locations">
<InteractiveGlobe />
<section class="homepage__photos">
<Collage {photos} />
</section>
<ScrollingTitle tag="p" class="title-world mask">
<SplitText text="World" mode="chars" />
</ScrollingTitle>
<div class="homepage__ctas">
<DiscoverText />
<Locations {locations} />
</section>
<ListCTAs>
<li>
<BoxCTA
url="/photos"
icon="photos"
label="Browse all photos"
alt="Photos"
/>
</li>
<li>
<BoxCTA
url="/shop"
icon="bag"
label="Shop our products"
alt="Shopping bag"
/>
</li>
<li>
<BoxCTA
url="/about"
icon="compass"
label="Learn about the project"
alt="Compass"
/>
</li>
</ListCTAs>
</div>
<div class="grid-modules">
<div class="container grid">
<div class="wrap">
<ShopModule />
<NewsletterModule />
</div>
<section class="homepage__locations" id="locations">
<InteractiveGlobe />
<ScrollingTitle tag="p" class="title-world mask">
<SplitText text="World" mode="chars" />
</ScrollingTitle>
<Locations {locations} />
</section>
<div class="grid-modules">
<div class="container grid">
<div class="wrap">
<ShopModule />
<NewsletterModule />
</div>
</div>
</main>
</PageTransition>
</div>
</main>