Layouts update
This commit is contained in:
parent
da1d8f2c80
commit
503433a448
|
@ -1,38 +0,0 @@
|
|||
<script lang="ts">
|
||||
import type { Service } from '$lib/types/service';
|
||||
|
||||
export let services: Service[] = [];
|
||||
</script>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-4 p-4">
|
||||
{#each services as service}
|
||||
<div class="overflow-hidden rounded-lg shadow-lg hover:shadow-xl transition-shadow">
|
||||
<div class="p-6">
|
||||
<h1 class="text-center font-semibold text-xl mb-4">{service.category}</h1>
|
||||
{#each service.items as item}
|
||||
<div class="flex border-b border-gray-200 last:border-b-0 p-4 hover:bg-gray-100">
|
||||
<div class="flex-none w-24 h-24 bg-cover bg-center rounded-lg" style="background-image: url('/images/services/{item.id}');"></div>
|
||||
<div class="flex-grow p-3">
|
||||
<h4 class="font-semibold">{item.name}</h4>
|
||||
<p class="text-gray-600">{item.description}</p>
|
||||
</div>
|
||||
<div class="flex-none text-right">
|
||||
<p class="text-lg font-semibold">
|
||||
{typeof item.price === 'number' ? `${item.price},-` : item.price}
|
||||
</p>
|
||||
<a href="https://app.cal.com/kkosmetickysalon/{item.id}" class="text-indigo-600 hover:text-indigo-800">Objednejte se</a>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
service-card {
|
||||
@apply grid gap-4 p-4};
|
||||
@media (max-width: 768px) {
|
||||
@apply grid-cols-1;
|
||||
}
|
||||
</style>
|
|
@ -1,33 +0,0 @@
|
|||
<section class="text-gray-600 body-font">
|
||||
<div class="container px-5 py-24 mx-auto">
|
||||
<div class="flex flex-wrap -m-4">
|
||||
<div class="lg:w-1/3 lg:mb-0 mb-6 p-4">
|
||||
<div class="h-full text-center">
|
||||
<img alt="testimonial" class="w-20 h-20 mb-8 object-cover object-center rounded-full inline-block border-2 border-gray-200 bg-gray-100" src="https://dummyimage.com/302x302">
|
||||
<p class="leading-relaxed">Edison bulb retro cloud bread echo park, helvetica stumptown taiyaki taxidermy 90's cronut +1 kinfolk. Single-origin coffee ennui shaman taiyaki vape DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.</p>
|
||||
<span class="inline-block h-1 w-10 rounded bg-indigo-500 mt-6 mb-4"></span>
|
||||
<h2 class="text-gray-900 font-medium title-font tracking-wider text-sm">HOLDEN CAULFIELD</h2>
|
||||
<p class="text-gray-500">Senior Product Designer</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-1/3 lg:mb-0 mb-6 p-4">
|
||||
<div class="h-full text-center">
|
||||
<img alt="testimonial" class="w-20 h-20 mb-8 object-cover object-center rounded-full inline-block border-2 border-gray-200 bg-gray-100" src="https://dummyimage.com/300x300">
|
||||
<p class="leading-relaxed">Edison bulb retro cloud bread echo park, helvetica stumptown taiyaki taxidermy 90's cronut +1 kinfolk. Single-origin coffee ennui shaman taiyaki vape DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.</p>
|
||||
<span class="inline-block h-1 w-10 rounded bg-indigo-500 mt-6 mb-4"></span>
|
||||
<h2 class="text-gray-900 font-medium title-font tracking-wider text-sm">ALPER KAMU</h2>
|
||||
<p class="text-gray-500">UI Develeoper</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-1/3 lg:mb-0 p-4">
|
||||
<div class="h-full text-center">
|
||||
<img alt="testimonial" class="w-20 h-20 mb-8 object-cover object-center rounded-full inline-block border-2 border-gray-200 bg-gray-100" src="https://dummyimage.com/305x305">
|
||||
<p class="leading-relaxed">Edison bulb retro cloud bread echo park, helvetica stumptown taiyaki taxidermy 90's cronut +1 kinfolk. Single-origin coffee ennui shaman taiyaki vape DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.</p>
|
||||
<span class="inline-block h-1 w-10 rounded bg-indigo-500 mt-6 mb-4"></span>
|
||||
<h2 class="text-gray-900 font-medium title-font tracking-wider text-sm">HENRY LETHAM</h2>
|
||||
<p class="text-gray-500">CTO</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
|
@ -0,0 +1,43 @@
|
|||
<script lang="ts">
|
||||
import { getImageLink } from "$lib/images";
|
||||
|
||||
export let item: any = {};
|
||||
</script>
|
||||
|
||||
<a href="/sluzby/{item.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" />
|
||||
</header>
|
||||
<!-- <div class="img" style="background-image: url('/images/services/{item.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>
|
||||
|
||||
</div>
|
||||
<article>
|
||||
<p class="text-gray-800 font-medium hidden md:block mb-4">
|
||||
{item.description}
|
||||
</p>
|
||||
<a
|
||||
href="/sluzby/{item.id}"
|
||||
class="text-primary-600 hover:text-primary-800 underline mb-2 md:mb-0">
|
||||
...Zjistěte více
|
||||
</a>
|
||||
</article>
|
||||
|
||||
<hr class="border-gray-100 mb-4" />
|
||||
<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' ? `/${item.duration}h` : ''}
|
||||
</p>
|
||||
<a
|
||||
href="https://app.cal.com/kkosmetickysalon/{item.id}"
|
||||
class="btn btn-md variant-filled-primary">
|
||||
Rezervace
|
||||
</a>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
</a>
|
|
@ -0,0 +1,42 @@
|
|||
<script lang="ts">
|
||||
import type { Service } from '$lib/types/service';
|
||||
import ServiceCard from '$lib/components/services/ServiceCard.svelte';
|
||||
import { Accordion, AccordionItem } from '@skeletonlabs/skeleton';
|
||||
|
||||
export let services: Service[] = [];
|
||||
</script>
|
||||
|
||||
|
||||
<Accordion class="bg-surface-100 w-full md:card p-4 md:max-w-[75%]">
|
||||
{#each services as service}
|
||||
<AccordionItem on>
|
||||
<svelte:fragment slot="lead">
|
||||
<i class="fa-solid fa-wand-magic-sparkles text-xl w-6 text-center" />
|
||||
</svelte:fragment>
|
||||
<svelte:fragment slot="summary">
|
||||
<p class="text-lg font-bold">{service.category}</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}
|
||||
</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>
|
|
@ -0,0 +1,65 @@
|
|||
<script lang="ts">
|
||||
import type { Service } from '$lib/types/service';
|
||||
|
||||
export let services: Service[] = [];
|
||||
</script>
|
||||
|
||||
<div class="service-container">
|
||||
{#each services as service}
|
||||
<div class="service-card">
|
||||
<h2 class="h2 text-center font-bold mb-4">{service.category}</h2>
|
||||
{#each service.items as item}
|
||||
<div class="service-item">
|
||||
<div class="img" style="background-image: url('/images/services/{item.id}.jpg');"/>
|
||||
<div class="flex-grow flex flex-col justify-between p-3">
|
||||
<div class="flex flex-row justify-between">
|
||||
<h3 class="h3 font-semibold mb-2 max-w-lg">{item.name}</h3>
|
||||
<p class="text-xl font-semibold">
|
||||
{typeof item.price === 'number' ? `${item.price},-` : item.price}
|
||||
</p>
|
||||
</div>
|
||||
<p class="text-gray-600 hidden md:block mb-4">
|
||||
{item.description}
|
||||
|
||||
</p>
|
||||
<div class="flex flex-col md:flex-row justify-between md:items-center">
|
||||
<a
|
||||
href="/sluzby/{item.id}"
|
||||
class="text-indigo-600 hover:text-indigo-800 mb-2 md:mb-0">
|
||||
...Zjistěte více
|
||||
</a>
|
||||
<a
|
||||
href="https://app.cal.com/kkosmetickysalon/{item.id}"
|
||||
class="btn btn-md variant-filled-primary">
|
||||
Objednejte se
|
||||
</a>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
.service-container {
|
||||
@apply grid md:grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 p-4;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.service-container {
|
||||
@apply grid-cols-1;
|
||||
}
|
||||
}
|
||||
.img {
|
||||
@apply flex-none w-full h-32 rounded-lg bg-cover bg-center mb-2 ;
|
||||
}
|
||||
.service-item {
|
||||
@apply flex flex-col card variant-glass-secondary card-hover overflow-hidden mx-2 my-4 p-4;
|
||||
|
||||
}
|
||||
.service-card {
|
||||
@apply overflow-hidden rounded-lg p-6;
|
||||
}
|
||||
</style>
|
|
@ -1,5 +1,14 @@
|
|||
<script lang="ts">
|
||||
|
||||
// Styleshit
|
||||
import '../app.postcss';
|
||||
|
||||
// Font Gruesome
|
||||
import '@fortawesome/fontawesome-free/css/fontawesome.css';
|
||||
import '@fortawesome/fontawesome-free/css/brands.css';
|
||||
import '@fortawesome/fontawesome-free/css/solid.css';
|
||||
|
||||
// Components & Utilities
|
||||
import { AppShell } from '@skeletonlabs/skeleton';
|
||||
import { page } from '$app/stores';
|
||||
|
||||
|
@ -40,7 +49,8 @@
|
|||
if (elemTarget) elemTarget.scrollIntoView({ behavior: 'smooth' });
|
||||
};
|
||||
</script>
|
||||
<!-- SEO Meta tags -->
|
||||
|
||||
<!-- SEO -->
|
||||
<svelte:head>
|
||||
<title>{meta.title}</title>
|
||||
<!-- Meta Tags -->
|
||||
|
@ -68,16 +78,17 @@
|
|||
<meta name="twitter:image" content={meta.twitter.image} />
|
||||
</svelte:head>
|
||||
|
||||
<!-- <Analytics />
|
||||
-->
|
||||
<!-- <Analytics /> -->
|
||||
<!-- App Shell -->
|
||||
<AppShell>
|
||||
<svelte:fragment slot="header">
|
||||
<MainHeader />
|
||||
</svelte:fragment>
|
||||
<!-- Page Route Content -->
|
||||
<slot />
|
||||
<svelte:fragment slot="pageFooter">
|
||||
|
||||
<slot />
|
||||
|
||||
<svelte:fragment slot="footer">
|
||||
<MainFooter />
|
||||
</svelte:fragment>
|
||||
</AppShell>
|
||||
|
|
Loading…
Reference in New Issue