[wip] Rework About page

2022-09-07 23:59:49 +02:00
parent e9fa0d3532
commit 28ed5c4f94
7 changed files with 802 additions and 598 deletions
--- a/src/components/organisms/Banner.svelte
+++ b/src/components/organisms/Banner.svelte
@@ -0,0 +1,98 @@
+<style lang="scss">
+    @import "../../style/organisms/banner";
+</style>
+
+<script lang="ts">
+    import { navigating } from '$app/stores'
+    import { onMount } from 'svelte'
+    import { stagger, timeline } from 'motion'
+    import { DELAY } from '$utils/contants'
+    import { quartOut } from '$animations/easings'
+    // Components
+    import Image from '$components/atoms/Image.svelte'
+
+    export let type: string = undefined
+    export let title: string
+    export let image: any
+
+
+    onMount(() => {
+        /**
+         * Animations
+         */
+        // const animation = timeline([
+        //     // Hero image
+        //     ['.shop-page__background', {
+        //         scale: [1.06, 1],
+        //         opacity: [0, 1],
+        //     }, {
+        //         at: 0.4,
+        //         duration: 2.4,
+        //     }],
+
+        //     // Intro top elements
+        //     ['.shop-page__intro .top > *', {
+        //         y: [-100, 0],
+        //         opacity: [0, 1],
+        //     }, {
+        //         at: 0.4,
+        //         delay: stagger(0.25),
+        //     }],
+
+        //     // Hero title
+        //     ['.shop-page__title h1', {
+        //         y: [32, 0],
+        //         opacity: [0, 1],
+        //     }, {
+        //         at: 0.5,
+        //     }],
+
+        //     // Intro navbar
+        //     ['.shop-page__nav .container > *, .shop-page__intro .button-cart', {
+        //         y: [100, 0],
+        //         opacity: [0, 1],
+        //     }, {
+        //         at: 0.7,
+        //         delay: stagger(0.25),
+        //     }]
+        // ], {
+        //     delay: $navigating ? DELAY.PAGE_LOADING / 1000 : 0,
+        //     defaultOptions: {
+        //         duration: 1.6,
+        //         easing: quartOut,
+        //     },
+        // })
+        // animation.stop()
+
+        // // Run animation
+        // requestAnimationFrame(animation.play)
+    })
+</script>
+
+<section class="banner">
+    <div class="banner__top container">
+        <a href="/" class="back" data-sveltekit-noscroll>
+            <svg width="5" height="8" viewBox="0 0 5 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M4 1 1 4l3 3" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+            <span>Back to Houses Of</span>
+        </a>
+    </div>
+
+    <div class="banner__title">
+        <h1>{title}</h1>
+    </div>
+
+    <Image
+        class="banner__background"
+        id={image.id}
+        alt={image.alt}
+        sizeKey="hero"
+        sizes={{
+            large: { width: 1800, height: 1200 },
+            medium: { width: 1200, height: 800 },
+            small: { width: 700, height: 700 },
+        }}
+        lazy={false}
+    />
+</section>