Create Terms page

src/routes/terms/+page.server.ts

@@ -0,0 +1,21 @@
+import { error } from '@sveltejs/kit'
+import type { PageServerLoad } from './$types'
+import { fetchAPI } from '$utils/api'
+
+export const load: PageServerLoad = async () => {
+    try {
+        const res = await fetchAPI(`query {
+            legal {
+                terms
+            }
+        }`)
+
+        const { data } = res
+
+        return {
+            ...data
+        }
+    } catch (err) {
+        throw error(500, err.message)
+    }
+}

src/routes/terms/+page.svelte

@@ -0,0 +1,37 @@
+<style lang="scss">
+    @import "../../style/pages/terms";
+</style>
+
+<script lang="ts">
+    import type { PageData } from './$types'
+    import PageTransition from '$components/PageTransition.svelte'
+    import Metas from '$components/Metas.svelte'
+    import Heading from '$components/molecules/Heading.svelte'
+
+    export let data: PageData
+    const { legal } = data
+    console.log(legal)
+</script>
+
+<Metas
+    title="Terms and Conditions – Houses Of"
+    description=""
+/>
+
+
+<PageTransition name="terms">
+    <Heading text="Everything you need to know about using our website or buying our products" />
+
+    <section class="terms__categories">
+        <div class="container grid">
+            {#each legal.terms as { title, text }, index}
+                <article class="terms__section grid">
+                    <h2 class="title-small">{index + 1}. {title}</h2>
+                    <div class="text text-info">
+                        {@html text}
+                    </div>
+                </article>
+            {/each}
+        </div>
+    </section>
+</PageTransition>

src/style/pages/_terms.scss

@@ -0,0 +1,59 @@
+.terms {
+    // Categories
+    &__categories {
+        .container {
+            display: block;
+
+            @include bp (sm) {
+                display: grid;
+            }
+
+            & > * {
+                margin-bottom: clamp(40px, 5vw, 72px);
+            }
+        }
+    }
+
+    // Section
+    &__section {
+        --columns: 16;
+        display: block;
+        padding: 0 20px;
+
+        @include bp (sm) {
+            display: grid;
+            align-items: baseline;
+            grid-column: 3 / -3;
+        }
+        @include bp (sd) {
+            grid-column: 5 / -5;
+        }
+
+        h2 {
+            margin-bottom: 0.75em;
+            color: $color-secondary-light;
+            line-height: 1.1;
+
+            @include bp (sm) {
+                position: sticky;
+                top: clamp(24px, 3vw, 40px);
+                grid-column: 1 / span 4;
+                margin-bottom: 0;
+                text-align: right;
+            }
+            @include bp (sd) {
+                grid-column: 1 / span 6;
+            }
+        }
+        .text {
+            color: $color-tertiary;
+
+            @include bp (sm) {
+                grid-column: 6 / -1;
+            }
+            @include bp (sd) {
+                grid-column: 8 / -1;
+            }
+        }
+    }
+}