Services layouts update + filling empty routing pages
This commit is contained in:
Matthieu Morin
parent
c04d27265b
commit
67a2d0be1e
|
|
@ -3,26 +3,27 @@
|
|||
import type { Service } from '$lib/types/service';
|
||||
import convertMinutesToHours from '$lib/utils/minToH';
|
||||
|
||||
export let item: Service['items'][number];
|
||||
export let service: Service[][number];
|
||||
|
||||
</script>
|
||||
|
||||
<a href="/sluzby/{item.id}" id="{item.id}"class="w-72 card variant-glass-secondary mx-2 my-4 duration-500 hover:scale-105 hover:shadow-xl shadow-md">
|
||||
<a href="/sluzby/{service.id}" id="{service.id}"class="w-72 card variant-glass-secondary mx-2 my-4 duration-500 hover:scale-105 hover:shadow-xl shadow-md">
|
||||
<header>
|
||||
<img src={getImageLink({id: item.id, w: 288, h: 320 })} class="bg-black/50 object-cover aspect-[9/10] rounded-t-xl" alt="Post" loading="lazy" />
|
||||
// getImageLink maps all image links based on the services id, needs cloudinary implementation to work.
|
||||
<!-- <img src={getImageLink({id: service.id, w: 288, h: 320 })} class="bg-black/50 object-cover aspect-[9/10] rounded-t-xl" alt="Post" loading="lazy" /> -->
|
||||
</header>
|
||||
<!-- <div class="img" style="background-image: url('/images/services/{item.id}.jpg');"/> -->
|
||||
<!-- <div class="img" style="background-image: url('/images/services/{service.id}.jpg');"/> -->
|
||||
<div class="flex flex-col px-4 py-3 w-72 h-full">
|
||||
<div class="flex flex-row justify-between px-2 gap-y-2">
|
||||
<h3 class="h3 font-semibold w-full">{item.name}</h3>
|
||||
<h3 class="h3 font-semibold w-full">{service.title}</h3>
|
||||
|
||||
</div>
|
||||
<article>
|
||||
<p class="text-gray-800 font-medium hidden md:block mb-4">
|
||||
{item.description}
|
||||
{service.description}
|
||||
</p>
|
||||
<a
|
||||
href="/sluzby/{item.id}"
|
||||
href="/sluzby/{service.id}"
|
||||
class="text-primary-600 hover:text-primary-800 underline mb-2 md:mb-0">
|
||||
...Zjistěte více
|
||||
</a>
|
||||
|
|
@ -32,11 +33,11 @@
|
|||
<footer class="justify-self-end align-bottom">
|
||||
<div class="flex flex-col md:flex-row md:justify-between items-center">
|
||||
<p class=" text-lg text-surface-900 font-semibold text-right">
|
||||
{typeof item.price === 'number' ? `${item.price},-` : item.price}
|
||||
{typeof item.duration === 'number' ? `/${convertMinutesToHours(item.duration)}` : ''}
|
||||
{typeof service.price === 'number' ? `${service.price},-` : service.price}
|
||||
{typeof service.duration === 'number' ? `/${convertMinutesToHours(service.duration)}` : ''}
|
||||
</p>
|
||||
<a
|
||||
href="https://app.cal.com/kkosmetickysalon/{item.id}"
|
||||
href="https://app.cal.com/kkosmetickysalon/{service.id}"
|
||||
class="btn btn-md variant-filled-primary">
|
||||
Rezervace
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -1,43 +1,30 @@
|
|||
|
||||
<script lang="ts">
|
||||
import type { Service } from '$lib/types/service';
|
||||
import type { Category } from '$lib/types/service';
|
||||
import ServiceCard from '$lib/components/services/ServiceCard.svelte';
|
||||
import { Accordion, AccordionItem } from '@skeletonlabs/skeleton';
|
||||
|
||||
export let services: Service[] = [];
|
||||
export let category: Category[] = [];
|
||||
</script>
|
||||
|
||||
|
||||
<section>
|
||||
<Accordion class="bg-surface-100 w-full md:card p-4 md:max-w-[75%]">
|
||||
{#each services as service}
|
||||
{#each category as c}
|
||||
<AccordionItem on>
|
||||
<svelte:fragment slot="lead">
|
||||
<i class="fa-solid fa-wand-magic-sparkles text-xl w-6 text-center" />
|
||||
<i class="fa-solid fa-wand-magic-sparkles text-xl w-6 text-center" />
|
||||
<h2 class="h2 text-bold">{c.title}</h2>
|
||||
</svelte:fragment>
|
||||
<svelte:fragment slot="summary">
|
||||
<p class="text-lg font-bold">{service.category}</p>
|
||||
<p class="text-base">{c.description}</p>
|
||||
</svelte:fragment>
|
||||
<svelte:fragment slot="content">
|
||||
<div class="w-fit mx-auto flex flex-wrap justify-center justify-items-center gap-y-6 gap-x-8 mt-8 mb-5">
|
||||
{#each service.items as item}
|
||||
<ServiceCard {item} />
|
||||
{#each c.services as service}
|
||||
<ServiceCard {service} />
|
||||
{/each}
|
||||
</div>
|
||||
</svelte:fragment>
|
||||
</AccordionItem>
|
||||
{/each}
|
||||
</Accordion>
|
||||
|
||||
|
||||
|
||||
<style lang="postcss">
|
||||
/* .services-container {
|
||||
@apply grid md:grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 p-4;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.services-container {
|
||||
@apply grid-cols-1;
|
||||
}
|
||||
}*/
|
||||
|
||||
</style>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
<script lang="ts">
|
||||
|
||||
</script>
|
||||
|
|
@ -1,73 +1,17 @@
|
|||
<script lang="ts">
|
||||
import Spinner from '$lib/components/Spinner.svelte';
|
||||
import ServicesLayout from '$lib/components/services/ServicesLayout.svelte';
|
||||
import type { Service } from '$lib/types/service';
|
||||
export const id = '';
|
||||
|
||||
// Locally populated services
|
||||
let services: Service[] = [
|
||||
{
|
||||
category: 'Permanentní make-up',
|
||||
items: [
|
||||
{ name: 'Obočí Pudrové, Ombré', description: 'Diagnostika pleti, odlíčení tonizace', id: 'oboci',price: 3000, duration: 2.5 },
|
||||
{ name: 'Horní linky - meziřasové přirozené', description: 'Diagnostika pleti, odlíčení tonizace', id: 'linky', price: 2000, duration: 2 },
|
||||
{ name: 'Klasické linky - s ocáskem', description: 'Diagnostika pleti, odlíčení tonizace', id: 'classic-linky', price: 3000, duration: 2.5 },
|
||||
{ name: 'Klasické linky - s ocáskem + spodní linky', description: 'Diagnostika pleti, odlíčení tonizace', id: 'classic-linky+spodni', price: 3500, duration: 2.5 },
|
||||
{ name: 'Rty - kontura', description: 'Diagnostika pleti, odlíčení tonizace', id: 'rty', price: 2500, duration: 2 },
|
||||
{ name: '3D Rty (kontura a stínování), Full Lips (plné rty)', description: 'Diagnostika pleti, odlíčení tonizace', id: '3d-rty', price: 3500, duration: 2.5 },
|
||||
{ name: 'Aquarelle Lips (přirodní stínování, bez kontury)', description: 'Diagnostika pleti, odlíčení tonizace', id: 'aquarelle', price: 3000, duration: 2 },
|
||||
{ name: 'První korekce po aplikaci pmu max. do 3 měsíců', description: 'Diagnostika pleti, odlíčení tonizace', id: 'korekce', price: 1000, duration: 1.5 },
|
||||
{ name: 'Oprava práce obočí jiného salonu', description: 'Diagnostika pleti, odlíčení tonizace', id: 'oprava-oboci', price: 'na domluvě', duration: 'na domluvě' }
|
||||
],
|
||||
},
|
||||
{
|
||||
category: 'Kosmetické ošetření',
|
||||
items: [
|
||||
{ name: 'ZÁKLADNÍ CALM', description: 'Diagnostika pleti, odlíčení tonizace, enzymatický peeling, kavitační peeling -ultarzvuková špachtle, séra dle typu pleti, masky (tvář,krk,dekolt), závěrečná péče (oční a denní krém)', id: 'zakladni-calm', price: 500, duration: 1 },
|
||||
{ name: 'ZÁKLADNÍ + CALM PLUS', description:'Diagnostika pleti, odlíčení tonizace, úprava obočí (vosk+pinzeta), barvení řas a obočí, depilace horní ret/brada, enzymatický peeling, kavitační peeling -ultarzvuková špachtle, séra dle typu pleti, masky (tvář,krk,dekolt), závěrečná péče (oční a denní krém)', id: 'zakladni-calm-plus', price: 600, duration: 1 },
|
||||
{ name: 'RELAXAČNÍ', id: 'relaxacni', description:'Diagnostika pleti, odlíčení tonizace, úprava obočí (vosk+pinzeta), barvení řas a obočí, depilace horní ret/brada, enzymatický peeling, kavitační peeling -ultarzvuková špachtle, séra, masáž relaxační (tvář,krk dekolt), masky (tvář,krk,dekolt), závěrečná péče (oční a denní krém)', price: 690, duration: 1.5 },
|
||||
{ name: 'LIFTINGOVÉ - ANTI AGE', description:'Diagnostika pleti, odlíčení tonizace, úprava obočí (vosk+pinzeta), barvení řas a obočí, depilace horní ret/brada, enzymatický peeling, kavitační peeling -ultarzvuková špachtle, vacupres ošetření – lifting obličeje krku a dekoltu, séra, masky (tvář,krk,dekolt), alginátová maska, závěrečná péče (oční a denní krém)', id: 'liftingove-anti-age', price: 690, duration: 1.5 },
|
||||
{ name: 'CLEAR + ANTI AKNÉ', description: 'Diagnostika pleti, odlíčení tonizace', id: 'clear-anti-akne', price: 690, duration: 1.5 },
|
||||
{ name: 'Odlíčení + sérum + alginátová maska (PROJASNĚNÍ)', description: 'Diagnostika pleti, odlíčení tonizace', id: 'odliceni-serum-alginatova-maska', price: 300, duration: 1 },
|
||||
]
|
||||
},
|
||||
{
|
||||
category: 'DALŠÍ VELMI OBLÍBENÉ SLUŽBY',
|
||||
items: [
|
||||
{ name: 'Lifting řas booster (botox)', description: 'Diagnostika pleti, odlíčení tonizace', id: 'lifting-ras-booster', price: 500, duration: 1 },
|
||||
{ name: 'Laminace obočí + výživa', description: 'Diagnostika pleti, odlíčení tonizace', id: 'laminace-oboci-vyziva', price: 500, duration: 1 },
|
||||
{ name: 'Úprava obočí (tvar + barva)', description: 'Diagnostika pleti, odlíčení tonizace', id: 'uprava-oboci-tvar-barva', price: 250, duration: 1 },
|
||||
{ name: 'Úprava obočí + řasy (tvar + barvení)', description: 'Diagnostika pleti, odlíčení tonizace', id: 'uprava-oboci-rasy-tvar-barveni', price: 300, duration: 1 },
|
||||
]
|
||||
},
|
||||
{
|
||||
category: 'Depilace',
|
||||
items: [
|
||||
{ name: 'Depilace Horní ret', description: 'Diagnostika pleti, odlíčení tonizace', id: 'depilace-horni-ret', price: 80, duration: 0.5 },
|
||||
{ name: 'Depilace Brada', description: 'Diagnostika pleti, odlíčení tonizace', id: 'depilace-brada', price: 80, duration: 0.5 },
|
||||
{ name: 'Depilace Obočí', description: 'Diagnostika pleti, odlíčení tonizace', id: 'depilace-oboci', price: 150, duration: 0.5 },
|
||||
{ name: 'Depilace Tváře', description: 'Diagnostika pleti, odlíčení tonizace', id: 'depilace-tvare', price: 150, duration: 0.5 },
|
||||
{ name: 'Depilace Podpaží', description: 'Diagnostika pleti, odlíčení tonizace', id: 'depilace-podpazi', price: 150, duration: 0.5 },
|
||||
{ name: 'Depilace Předloktí', description: 'Diagnostika pleti, odlíčení tonizace', id: 'depilace-predlokti', price: 200, duration: 0.5 },
|
||||
{ name: 'Depilace Celé ruce', description: 'Diagnostika pleti, odlíčení tonizace', id: 'depilace-cele-ruce', price: 350, duration: 1 },
|
||||
{ name: 'Depilace Lýtka', description: 'Diagnostika pleti, odlíčení tonizace', id: 'depilace-lytka', price: 350, duration: 1 },
|
||||
{ name: 'Depilace Celé nohy', description: 'Diagnostika pleti, odlíčení tonizace', id: 'depilace-cele-nohy', price: 500, duration: 1 }
|
||||
]
|
||||
},
|
||||
{
|
||||
category: 'Vakuslim 48 - zeštíhlující procedura',
|
||||
items: [
|
||||
{ name: 'Ošetření horních končetin', description: 'Diagnostika pleti, odlíčení tonizace', id: 'vakuslim-48-zestihlujici-procedura-horni-koncetiny', price: 600, duration: 2 },
|
||||
{ name: '1 ošetření spodní části těla (břicho, boky, dolní končetiny)', description: 'Diagnostika pleti, odlíčení tonizace', id: 'vakuslim-48-zestihlujici-procedura-spodni-cast-tela', price: 800, duration: 2 },
|
||||
{ name: '1 ošetření komplet horní-dolní části', description: 'Diagnostika pleti, odlíčení tonizace', id: 'vakuslim-48-zestihlujici-procedura-komplet-horni-dolni-cast', price: 1200, duration: 2 },
|
||||
{ name: '6 ošetření předplatné kompet', description: 'Diagnostika pleti, odlíčení tonizace', id: 'vakuslim-48-zestihlujici-procedura-6-o-setreni-predplatne-kompet', price: 6600, duration: 2 },
|
||||
{ name: '12 ošetření předplatné komplet', description: 'Diagnostika pleti, odlíčení tonizace', id: 'vakuslim-48-zestihlujici-procedura-12-o-setreni-predplatne-komplet', price: 11000, duration: 2 }
|
||||
]
|
||||
}
|
||||
];
|
||||
export let services: Service[] = []
|
||||
</script>
|
||||
|
||||
{#if props.services.length === 0}
|
||||
<Spinner/>
|
||||
<p>Loading services...</p>
|
||||
{:else}
|
||||
<div class="flex flex-col items-center py-8">
|
||||
<h1 class="h1 m-4">Ceník služeb</h1>
|
||||
<p class="text-lg text-center font-semibold m-4 pb-8">Koukněte se jak vás mohu zkrášlit a rezervujte si termín</p>
|
||||
<ServicesLayout {services} />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
<!-- src/routes/[categoryId]/[serviceId]/+page.svelte -->
|
||||
<script lang="ts">
|
||||
import * as conf from '$lib/config'
|
||||
import type { PageData } from './$types';
|
||||
import { SEO } from '$lib/components/SEO.svelte';
|
||||
|
||||
export let data: PageData;
|
||||
</script>
|
||||
|
||||
<SEO seoData={data}/>
|
||||
|
||||
<!-- Your service content goes here -->
|
||||
Loading…
Reference in New Issue