aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/card-v4.svelte25
-rw-r--r--src/components/contact.svelte67
-rw-r--r--src/components/description.svelte0
-rw-r--r--src/components/hero.svelte0
-rw-r--r--src/lib/sanity-client.ts4
-rw-r--r--src/routes/+layout.svelte2
-rw-r--r--src/routes/[lang=lang]/+page.server.ts14
-rw-r--r--src/routes/[lang=lang]/+page.svelte19
-rw-r--r--src/routes/[lang=lang]/+page.ts2
-rw-r--r--src/routes/[lang=lang]/sections/contact.svelte69
-rw-r--r--src/routes/[lang=lang]/sections/description.svelte26
-rw-r--r--src/routes/[lang=lang]/sections/hero.svelte75
-rw-r--r--src/routes/[lang=lang]/sections/products.svelte28
-rw-r--r--src/routes/parts/header.svelte (renamed from src/components/header.svelte)2
14 files changed, 250 insertions, 83 deletions
diff --git a/src/components/card-v4.svelte b/src/components/card-v4.svelte
new file mode 100644
index 0000000..d067357
--- /dev/null
+++ b/src/components/card-v4.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+ export let title;
+ export let description;
+</script>
+
+<div class="card">
+ <div class="p-6">
+ <h3 class="mt-0">I have a dream</h3>
+ <p class="text-contrast-medium mt-3 mx-0 mb-4">
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia minus culpa commodi.
+ </p>
+ <div class="flex flex-wrap gap-3">
+ <a href="#0" class="btn btn--subtle">Learn more</a>
+ <a href="#0" class="btn btn--primary">Buy</a>
+ </div>
+ </div>
+</div>
+
+<style lang="postcss">
+ .card {
+ @apply flex flex-col bg-floor rounded-xl overflow-hidden;
+ box-shadow: 0 0 0 1px hsla(230, 13%, 9%, 0.05), 0 0.3px 0.4px hsla(230, 13%, 9%, 0.02),
+ 0 0.9px 1.5px hsla(230, 13%, 9%, 0.045), 0 3.5px 6px hsla(230, 13%, 9%, 0.09);
+ }
+</style>
diff --git a/src/components/contact.svelte b/src/components/contact.svelte
deleted file mode 100644
index 9f5bb98..0000000
--- a/src/components/contact.svelte
+++ /dev/null
@@ -1,67 +0,0 @@
-<script context="module" lang="ts">
- export type ContactModel = {
- addressLines: Array<string>;
- email?: string;
- phone?: string;
- phoneHours?: string;
- };
-</script>
-
-<script lang="ts">
- import LL from "$i18n/i18n-svelte";
-
- export let model: ContactModel;
-
- let visible = true;
-
- $: if (!model.addressLines) {
- visible = false;
- } else {
- visible = true;
- }
-</script>
-
-<section class="contact relative z-1">
- <div class="w-[calc(100%_-_2.5rem)] lg:w-[calc(100%_-_4rem)] mx-auto max-w-7xl">
- <div class="mb-8 lg:mb-12">
- <h1 class="text-center">{$LL.contact.title()}</h1>
- </div>
-
- <div class="grid grid-cols-12 gap-8 lg:gap-12">
- <div class="col-span-12 lg:col-span-6">
- <dl class="details-list details-list--rows">
- {#if (model.addressLines?.length ?? 0) > 0}
- <div class="details-list__item py-5 lg:py-8 lg:flex lg:justify-between">
- <dt class="font-bold mb-1.5 lg:mb-2 lg:mb-0">{$LL.contact.addressTitle()}</dt>
- <dd class="leading-snug lg:text-right">
- {#each model.addressLines as line}
- {line}<br />
- {/each}
- </dd>
- </div>
- {/if}
- {#if model.email}
- <div class="details-list__item py-5 lg:py-8 lg:flex lg:justify-between">
- <dt class="font-bold mb-1.5 lg:mb-2 lg:mb-0">{$LL.contact.emailTitle()}</dt>
- <dd>
- <a href="mailto:webmaster@example.com">{model.email}</a>
- </dd>
- </div>
- {/if}
- {#if model.phone}
- <div class="details-list__item py-5 lg:py-8 lg:flex lg:justify-between">
- <dt class="font-bold mb-1.5 lg:mb-2 lg:mb-0">{$LL.contact.phoneTitle()}</dt>
- <dd class="leading-snug lg:text-right">
- <p><a href="tel:+44 7656 6455">{model.phone}</a></p>
- {#if model.phoneHours}
- <p class="text-contrast-medium">{model.phoneHours}</p>
- {/if}
- </dd>
- </div>
- {/if}
- </dl>
- </div>
- <div class="rounded col-span-12 lg:col-span-6 lg:h-auto lg:pb-0" />
- </div>
- </div>
-</section>
diff --git a/src/components/description.svelte b/src/components/description.svelte
deleted file mode 100644
index e69de29..0000000
--- a/src/components/description.svelte
+++ /dev/null
diff --git a/src/components/hero.svelte b/src/components/hero.svelte
deleted file mode 100644
index e69de29..0000000
--- a/src/components/hero.svelte
+++ /dev/null
diff --git a/src/lib/sanity-client.ts b/src/lib/sanity-client.ts
index 70be363..96253ca 100644
--- a/src/lib/sanity-client.ts
+++ b/src/lib/sanity-client.ts
@@ -1,7 +1,7 @@
import { env } from "$env/dynamic/private";
-import sanityClient from "@sanity/client";
+import createSanityClient from "@sanity/client";
-export const sanity = sanityClient({
+export const sanity = createSanityClient({
projectId: env.SANITY_STUDIO_API_PROJECT_ID,
dataset: env.SANITY_STUDIO_API_DATASET,
apiVersion: "2022-03-24",
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 990dd94..af29844 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -4,6 +4,7 @@
import type { LayoutData } from "./$types";
import { locales, baseLocale } from "$i18n/i18n-util";
import { replaceLocaleInUrl } from "$lib/utils";
+ import Header from "./parts/header.svelte";
export let data: LayoutData;
</script>
@@ -16,4 +17,5 @@
<link rel="alternate" hreflang="x-default" href={`${replaceLocaleInUrl($page.url, baseLocale, true)}`} />
</svelte:head>
+<Header />
<slot />
diff --git a/src/routes/[lang=lang]/+page.server.ts b/src/routes/[lang=lang]/+page.server.ts
index 6e0a910..a647cfe 100644
--- a/src/routes/[lang=lang]/+page.server.ts
+++ b/src/routes/[lang=lang]/+page.server.ts
@@ -1,8 +1,10 @@
import { sanity } from '$lib/sanity-client';
import type { PageServerLoad } from './$types';
import groq from "groq";
-import type { ContactModel } from '$components/contact.svelte';
+import type { ContactModel } from './sections/contact.svelte';
import { fromLocalizedString } from '$lib/utils';
+import type { HeroModel } from './sections/hero.svelte';
+import type { DescriptionModel } from './sections/description.svelte';
export const load = (async ({ locals }) => {
const contactSection = await sanity.fetch(groq`*[_type == "contact"][0]`);
@@ -14,6 +16,14 @@ export const load = (async ({ locals }) => {
email: fromLocalizedString(contactSection.email, locals.locale),
phoneHours: fromLocalizedString(contactSection.phoneHours, locals.locale),
addressLines: contactSection.addressLines.map((el: string | object) => fromLocalizedString(el, locals.locale)),
- } as ContactModel
+ } as ContactModel,
+ hero: {
+ title: heroSection.title,
+ content: heroSection.content
+ } as HeroModel,
+ description: {
+ title: descriptionSection.title,
+ content: descriptionSection.content
+ } as DescriptionModel
};
}) satisfies PageServerLoad; \ No newline at end of file
diff --git a/src/routes/[lang=lang]/+page.svelte b/src/routes/[lang=lang]/+page.svelte
index b757a71..325f085 100644
--- a/src/routes/[lang=lang]/+page.svelte
+++ b/src/routes/[lang=lang]/+page.svelte
@@ -1,16 +1,15 @@
<script lang="ts">
- import Contact, { type ContactModel } from "$components/contact.svelte";
+ import Contact from "./sections/contact.svelte";
+ import Hero from "./sections/hero.svelte";
+ import Description from "./sections/description.svelte";
+ import Products from "./sections/products.svelte";
+
import type { PageData } from "./$types";
export let data: PageData;
-
- type Model = {
- contact: ContactModel;
- };
-
- const M: Model = {
- contact: data.contact,
- };
</script>
-<Contact model={M.contact} />
+<Hero model={data.hero} />
+<Description model={data.description} />
+<Contact model={data.contact} />
+<Products model={data.products} /> \ No newline at end of file
diff --git a/src/routes/[lang=lang]/+page.ts b/src/routes/[lang=lang]/+page.ts
index fa3907b..1ef0b57 100644
--- a/src/routes/[lang=lang]/+page.ts
+++ b/src/routes/[lang=lang]/+page.ts
@@ -13,6 +13,6 @@ export const load = (async ({ parent, data }) => {
const $LL = get(LL)
return {
title: $LL.homeTitle(),
- contact: data.contact
+ ...data
}
}) satisfies PageLoad; \ No newline at end of file
diff --git a/src/routes/[lang=lang]/sections/contact.svelte b/src/routes/[lang=lang]/sections/contact.svelte
new file mode 100644
index 0000000..b058180
--- /dev/null
+++ b/src/routes/[lang=lang]/sections/contact.svelte
@@ -0,0 +1,69 @@
+<script context="module" lang="ts">
+ export type ContactModel = {
+ addressLines: Array<string>;
+ email?: string;
+ phone?: string;
+ phoneHours?: string;
+ };
+</script>
+
+<script lang="ts">
+ import LL from "$i18n/i18n-svelte";
+
+ export let model: ContactModel;
+
+ let visible = true;
+
+ $: if (!model.addressLines) {
+ visible = false;
+ } else {
+ visible = true;
+ }
+</script>
+
+{#if visible}
+ <section class="contact relative z-1">
+ <div class="w-[calc(100%_-_2.5rem)] lg:w-[calc(100%_-_4rem)] mx-auto max-w-7xl">
+ <div class="mb-8 lg:mb-12">
+ <h1 class="text-center">{$LL.contact.title()}</h1>
+ </div>
+
+ <div class="grid grid-cols-12 gap-8 lg:gap-12">
+ <div class="col-span-12 lg:col-span-6">
+ <dl class="details-list details-list--rows">
+ {#if (model.addressLines?.length ?? 0) > 0}
+ <div class="details-list__item py-5 lg:py-8 lg:flex lg:justify-between">
+ <dt class="font-bold mb-1.5 lg:mb-2 lg:mb-0">{$LL.contact.addressTitle()}</dt>
+ <dd class="leading-snug lg:text-right">
+ {#each model.addressLines as line}
+ {line}<br />
+ {/each}
+ </dd>
+ </div>
+ {/if}
+ {#if model.email}
+ <div class="details-list__item py-5 lg:py-8 lg:flex lg:justify-between">
+ <dt class="font-bold mb-1.5 lg:mb-2 lg:mb-0">{$LL.contact.emailTitle()}</dt>
+ <dd>
+ <a href="mailto:webmaster@example.com">{model.email}</a>
+ </dd>
+ </div>
+ {/if}
+ {#if model.phone}
+ <div class="details-list__item py-5 lg:py-8 lg:flex lg:justify-between">
+ <dt class="font-bold mb-1.5 lg:mb-2 lg:mb-0">{$LL.contact.phoneTitle()}</dt>
+ <dd class="leading-snug lg:text-right">
+ <p><a href="tel:+44 7656 6455">{model.phone}</a></p>
+ {#if model.phoneHours}
+ <p class="text-contrast-medium">{model.phoneHours}</p>
+ {/if}
+ </dd>
+ </div>
+ {/if}
+ </dl>
+ </div>
+ <div class="rounded col-span-12 lg:col-span-6 lg:h-auto lg:pb-0" />
+ </div>
+ </div>
+ </section>
+{/if}
diff --git a/src/routes/[lang=lang]/sections/description.svelte b/src/routes/[lang=lang]/sections/description.svelte
new file mode 100644
index 0000000..79a3939
--- /dev/null
+++ b/src/routes/[lang=lang]/sections/description.svelte
@@ -0,0 +1,26 @@
+<script context="module" lang="ts">
+ export type DescriptionModel = {
+ title: string;
+ content?: any;
+ };
+</script>
+
+<script lang="ts">
+ import { PortableText } from "@portabletext/svelte";
+ export let model: DescriptionModel;
+
+ let visible = true;
+
+ $: if (!model.title) {
+ visible = false;
+ } else {
+ visible = true;
+ }
+</script>
+
+{#if visible}
+ <h3>{model.title}</h3>
+ {#if model.content}
+ <PortableText value={model.content} />
+ {/if}
+{/if}
diff --git a/src/routes/[lang=lang]/sections/hero.svelte b/src/routes/[lang=lang]/sections/hero.svelte
new file mode 100644
index 0000000..3cdf221
--- /dev/null
+++ b/src/routes/[lang=lang]/sections/hero.svelte
@@ -0,0 +1,75 @@
+<script context="module" lang="ts">
+ export type HeroModel = {
+ title: string;
+ content?: any;
+ };
+</script>
+
+<script lang="ts">
+ import { PortableText } from "@portabletext/svelte";
+ export let model: HeroModel;
+
+ let visible = true;
+
+ $: if (!model.title) {
+ visible = false;
+ } else {
+ visible = true;
+ }
+</script>
+
+{#if visible}
+ <section class="has-section-divider-bottom bg-contrast-low/50">
+ <div class="py-20 lg:py-32">
+ <div class="w-[calc(100%_-_2.5rem)] lg:w-[calc(100%_-_4rem)] mx-auto max-w-lg md:max-w-3xl">
+ <div class="text-component">
+ <h1>{model.title}</h1>
+ {#if model.content}
+ <PortableText value={model.content} />
+ {/if}
+ </div>
+ </div>
+ </div>
+
+ <div class="section-divider">
+ <svg viewBox="0 0 1920 60" aria-hidden="true">
+ <path
+ class="fill-floor"
+ d="M-153.5,85.5a4002.033,4002.033,0,0,1,658-71c262.854-6.5,431.675,15.372,600,27,257.356,17.779,624.828,19.31,1089-58v102Z"
+ />
+ </svg>
+ </div>
+ </section>
+{/if}
+
+<style lang="postcss">
+ :root {
+ --section-divider-width: 1920;
+ --section-divider-height: 60;
+ --section-divider-ratio: calc(100% * var(--section-divider-height) / var(--section-divider-width));
+ }
+
+ [class*="has-section-divider"] {
+ position: relative;
+ }
+
+ .has-section-divider-bottom {
+ padding-bottom: var(--section-divider-ratio);
+ }
+
+ .section-divider {
+ position: absolute;
+ bottom: -1px;
+ left: 0;
+ width: 100%;
+ overflow: hidden;
+ }
+ .section-divider svg {
+ position: relative;
+ display: block;
+ height: auto;
+ max-width: none;
+ width: 102%;
+ left: -1%;
+ }
+</style>
diff --git a/src/routes/[lang=lang]/sections/products.svelte b/src/routes/[lang=lang]/sections/products.svelte
new file mode 100644
index 0000000..4e10b6f
--- /dev/null
+++ b/src/routes/[lang=lang]/sections/products.svelte
@@ -0,0 +1,28 @@
+<script context="module" lang="ts">
+ export type ProductsModel = {
+ products: ProductModel[];
+ };
+
+ export type ProductModel = {
+ title: string;
+ duration: string;
+ cost: string;
+ description: string;
+ orderLink: string;
+ };
+</script>
+
+<script lang="ts">
+ export let model: ProductsModel;
+
+ let visible = true;
+ $: if (!model.products || !model.products.length) {
+ visible = false;
+ } else {
+ visible = true;
+ }
+</script>
+
+{#if visible}
+
+{/if} \ No newline at end of file
diff --git a/src/components/header.svelte b/src/routes/parts/header.svelte
index 5789196..55f1da0 100644
--- a/src/components/header.svelte
+++ b/src/routes/parts/header.svelte
@@ -1,6 +1,6 @@
<script lang="ts">
import { locale } from "$i18n/i18n-svelte";
- import LocaleSwitcher from "./locale-switcher.svelte";
+ import LocaleSwitcher from "$components/locale-switcher.svelte";
</script>
<header>
generated by cgit v1.3 (git 2.53.0) at 2026-03-07 09:38:37 +0100